Cleaned the clutter (again!) =P

README.md

@@ -10,7 +10,7 @@ And things that would make it great but are not actually necessary.
 If you want to contact us, open a <a href="https://github.com/betterbrowser/arcfox/issues">issue</a> or use our <a href="https://discord.gg/jDASpgt68t">discord</a>
 </pre>
 
-## Rebuild roadmap
+## Our Roadmap
 
 ### Essential:
 
@@ -40,6 +40,10 @@ If you want to contact us, open a <a href="https://github.com/betterbrowser/arcf
 
 ### Non-Essential:
 
+- [x] Peek
+  - [x] Use Shift to Peek
+  - [x] Works in most webpages (Report if smth doesn't work as expected)
+  - [ ] Favorites Peek by default
 - [ ] Folders
   - [ ] Folders Feature
   - [ ] Stackable Folders
@@ -80,8 +84,9 @@ If you want to contact us, open a <a href="https://github.com/betterbrowser/arcf
 - [ ] Boosts
   - [ ] Boosts Feature
   - [ ] Boosts Store
+  - [ ] Arc Palette
 
-##
+ArcFox still has a lot of features to be implemented and you can see our <a href="https://github.com/orgs/betterbrowser/projects/2">Full Roadmap</a> for a better understanding of the upcoming features and things we are working on :D
 
 <p align="center">
   <a href="#">
@@ -129,10 +134,6 @@ To install arcfox-theme you need to open your firefox configurations and turn st
 - Inside the "chrome" folder, drop the "userChrome.css" that you find on the <a href="https://github.com/betterbrowser/arcfox/releases">releases.</a>
 - Restart firefox.
 
-# Roadmap
-
-ArcFox still have a lot of features to be implemented and you can see our <a href="https://github.com/orgs/betterbrowser/projects/2">Roadmap</a> for a better understanding of the upcoming features and things we are working on :D
-
 # Removing ArcFox
 
 If you have a major issue, or just want a different/default look, here is how to remove ArcFox.

src/components/peek/peek.css

@@ -6,7 +6,6 @@
 }
 
 /* Peek */
-
 div#peekpage {
   height: 100vh;
   width: 74vw;

src/components/sidebar/sidebar.js

@@ -1,30 +1,21 @@
 // Define variables
 let tabs = [];
 let activeTab = null;
-
 var favorites = [];
 var openedFavorites = []
 var openedFavoritesIds = [];
 
 const searchInput = document.getElementById("search-input");
 const tabList = document.getElementById("tab-list");
 const newTabButton = document.getElementById("new-tab-button");
-const searchIcon = document.querySelector('.address-bar i');
 const spaceName = document.querySelector('input#space-name');
 
 // Add event listeners
 newTabButton.addEventListener("click", () =>
   newTab()
 );
 
-// Get favorites from localstorage
-browser.storage.local.get('favorites', function (result) {
-  favorites = result.favorites || [{ url: 'https://gmail.com', favicon: 'https://mailmeteor.com/logos/assets/PNG/Gmail_Logo_512px.png', id: 0 }, { url: 'https://music.youtube.com', favicon: 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/Youtube_Music_icon.svg/2048px-Youtube_Music_icon.svg.png', id: 1 }];
-  console.log(favorites)
-  loadFavorites()
-});
-
-// Put space name on localstorage
+// Put space name on browser storeage
 spaceName.addEventListener('change', () => {
   spaceName.blur()
   browser.storage.local.set({ 'spaceName': spaceName.value })
@@ -41,13 +32,19 @@ browser.storage.local.get('spaceName', function (result) {
 });
 
 // Auto-selects address bar on click
-document.getElementById('search-input').addEventListener(`click`, () => {
+searchInput.addEventListener(`click`, () => {
   if (document.activeElement.id == 'search-input') {
-    document.getElementById('search-input').select()
+    searchInput.select()
   }
 });
 document.querySelector('div.address-bar').addEventListener(`click`, () => document.getElementById('search-input').select());
 
+// Loads favorites
+browser.storage.local.get('favorites', function (result) {
+  favorites = result.favorites || [{ url: 'https://gmail.com', favicon: 'https://mailmeteor.com/logos/assets/PNG/Gmail_Logo_512px.png', id: 0 }, { url: 'https://music.youtube.com', favicon: 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/Youtube_Music_icon.svg/2048px-Youtube_Music_icon.svg.png', id: 1 }];
+  loadFavorites()
+});
+
 // Update sidebar when a tab changes
 browser.tabs.onUpdated.addListener((changeInfo) => {
   if (changeInfo.status === "complete") {
@@ -89,6 +86,7 @@ function handleBrowserControl(id) {
   initTabSidebarControl();
 }
 
+// Handle controls
 const controls = ['back', 'front', 'refresh', 'close', 'size', 'hide', 'back', 'front']
 controls.forEach((control) => {
   document.getElementById(control).addEventListener("click", function () {
@@ -216,7 +214,6 @@ function newTab() {
 }
 
 // Sidebar Code
-const list = document.getElementById('tab-list');
 let base, draggedOver, dragging, activeTabId;
 
 const init = (array) => {
@@ -229,7 +226,7 @@ const init = (array) => {
 };
 
 const renderItems = (data) => {
-  list.innerHTML = '';
+  tabList.innerHTML = '';
   data.forEach((tab) => {
     const node = document.createElement('li');
     node.draggable = true;
@@ -275,7 +272,7 @@ const renderItems = (data) => {
     }
 
     if (!openedFavoritesIds.includes(tab.id)) {
-      list.appendChild(node);
+      tabList.appendChild(node);
     }
   });
 };
@@ -324,11 +321,11 @@ const navigateToTab = (e) => {
   browser.tabs.update(tabId, { active: true, highlighted: false });
   updateSearchBar();
 
-  list.querySelector('.active')?.classList.remove('active');
+  tabList.querySelector('.active')?.classList.remove('active');
   document.querySelector('[aria-label="favopen"]')?.setAttribute('aria-label', '');
 
   activeTabId = tabId;
-  list.querySelector(`[data-tab-id="${activeTabId}"]`)?.classList.add('active');
+  tabList.querySelector(`[data-tab-id="${activeTabId}"]`)?.classList.add('active');
 
   e.currentTarget.classList.add('current-tab');
 };