add bookit popup and improve popup UI with new buttons and archiving …

…option
exekis · Nov 30, 2024 · 41d6bbe · 41d6bbe
1 parent 6ad93ed
commit 41d6bbe
Show file tree

Hide file tree

Showing 4 changed files with 116 additions and 56 deletions.
diff --git a/background.js b/background.js
@@ -7,41 +7,38 @@ chrome.action.onClicked.addListener(() => {
       return;
     }
 
-    const today = new Date().toISOString().split('T')[0];
+    const today = new Date().toISOString().split("T")[0];
 
-    chrome.bookmarks.search({ title: 'Bookit' }, (results) => {
-      let bookitFolder = results.find(folder => folder.title === 'Bookit');
+    chrome.bookmarks.search({ title: "Bookit" }, (results) => {
+      let bookitFolder = results.find((folder) => folder.title === "Bookit");
 
       if (!bookitFolder) {
-        chrome.bookmarks.create({ title: 'Bookit' }, (newFolder) => {
+        chrome.bookmarks.create({ title: "Bookit" }, (newFolder) => {
           bookitFolder = newFolder;
-          createUniqueDateFolderAndBookmarks(bookitFolder.id, today, tabs);
+          saveTabsToFolder(bookitFolder.id, today, tabs);
         });
       } else {
-        createUniqueDateFolderAndBookmarks(bookitFolder.id, today, tabs);
+        saveTabsToFolder(bookitFolder.id, today, tabs);
       }
     });
   });
 });
 
-function createUniqueDateFolderAndBookmarks(parentId, date, tabs) {
+function saveTabsToFolder(parentId, date, tabs) {
   chrome.bookmarks.getChildren(parentId, (children) => {
-    const dateFolders = children.filter(child => child.title.startsWith(date));
+    const dateFolders = children.filter((child) => child.title.startsWith(date));
     let folderTitle = date;
 
     if (dateFolders.length > 0) {
       folderTitle = `${date} (${dateFolders.length + 1})`;
     }
 
-    chrome.bookmarks.create({
-      parentId: parentId,
-      title: folderTitle
-    }, (dateFolder) => {
+    chrome.bookmarks.create({ parentId: parentId, title: folderTitle }, (dateFolder) => {
       tabs.forEach((tab) => {
         chrome.bookmarks.create({
           parentId: dateFolder.id,
           title: tab.title,
-          url: tab.url
+          url: tab.url,
         });
       });
       console.log(`Bookmarked ${tabs.length} tabs into folder 'Bookit/${folderTitle}'.`);

diff --git a/manifest.json b/manifest.json
@@ -24,6 +24,7 @@
     "16": "icons/icon-16.png",
     "24": "icons/icon-24.png",
     "32": "icons/icon-32.png",
-    "64": "icons/icon-64.png"
+    "64": "icons/icon-64.png",
+    "128": "icons/icon-128.png"
   }
 }
diff --git a/popup.html b/popup.html
@@ -7,37 +7,62 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Bookit</title>
   <style>
-    body {
-      font-family: Arial, sans-serif;
+    * {
       margin: 0;
       padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: Arial, sans-serif;
+      background-color: #f9f9f9;
+      padding: 20px;
       display: flex;
       justify-content: center;
       align-items: center;
-      min-height: 100vh;
-      background-color: #f0f4f8;
+      width: 100%;
+      height: 100%;
     }
 
     .popup-container {
-      background: #ffffff;
-      border-radius: 12px;
-      box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
-      padding: 20px 30px;
-      text-align: center;
+      width: 100%;
       max-width: 300px;
+      background-color: white;
+      padding: 20px;
+      border-radius: 8px;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+      text-align: center;
     }
 
     h1 {
+      font-size: 18px;
+      color: #333;
+      margin-bottom: 15px;
+    }
+
+    button {
       font-size: 14px;
-      color: #2c3e50;
-      margin: 0;
+      padding: 10px 20px;
+      margin: 10px 0;
+      background-color: #4caf50;
+      color: white;
+      border: none;
+      border-radius: 5px;
+      cursor: pointer;
+      transition: background-color 0.3s ease;
+    }
+
+    button:hover {
+      background-color: #45a049;
     }
   </style>
   <script src="popup.js" defer></script>
 </head>
 <body>
   <div class="popup-container">
-    <h1>All Tabs Saved!</h1>
+    <h1>Bookit Actions</h1>
+    <button id="save-all-tabs-btn">Save All Tabs</button>
+    <button id="combine-all-btn">Combine All</button>
   </div>
 </body>
 </html>
diff --git a/popup.js b/popup.js
@@ -1,27 +1,58 @@
 document.addEventListener("DOMContentLoaded", () => {
-    chrome.tabs.query({ currentWindow: true }, (tabs) => {
-      if (tabs.length === 0) {
-        console.log("No tabs to bookmark.");
-        return;
-      }
+    const saveAllTabsButton = document.getElementById("save-all-tabs-btn");
+    const combineAllButton = document.getElementById("combine-all-btn");
 
-      const today = new Date().toISOString().split("T")[0];
+    saveAllTabsButton.addEventListener("click", () => {
+      chrome.tabs.query({ currentWindow: true }, (tabs) => {
+        if (tabs.length === 0) {
+          console.log("No tabs to bookmark.");
+          return;
+        }
+
+        const today = new Date().toISOString().split("T")[0];
+
+        chrome.bookmarks.search({ title: "Bookit" }, (results) => {
+          let bookitFolder = results.find((folder) => folder.title === "Bookit");
+
+          if (!bookitFolder) {
+            chrome.bookmarks.create({ title: "Bookit" }, (newFolder) => {
+              bookitFolder = newFolder;
+              saveTabsToFolder(bookitFolder.id, today, tabs);
+            });
+          } else {
+            saveTabsToFolder(bookitFolder.id, today, tabs);
+          }
+        });
+      });
+    });
 
+    combineAllButton.addEventListener("click", () => {
       chrome.bookmarks.search({ title: "Bookit" }, (results) => {
-        let bookitFolder = results.find((folder) => folder.title === "Bookit");
+        const bookitFolder = results.find((folder) => folder.title === "Bookit");
 
         if (!bookitFolder) {
-          chrome.bookmarks.create({ title: "Bookit" }, (newFolder) => {
-            bookitFolder = newFolder;
-            createUniqueDateFolderAndBookmarks(bookitFolder.id, today, tabs);
-          });
-        } else {
-          createUniqueDateFolderAndBookmarks(bookitFolder.id, today, tabs);
+          console.error("No 'Bookit' folder found.");
+          return;
         }
+
+        chrome.bookmarks.getChildren(bookitFolder.id, (children) => {
+          const archiveFolder = children.find((child) => child.title === "Archive");
+
+          if (!archiveFolder) {
+            chrome.bookmarks.create({
+              parentId: bookitFolder.id,
+              title: "Archive",
+            }, (newArchiveFolder) => {
+              moveFoldersToArchive(children, newArchiveFolder.id);
+            });
+          } else {
+            moveFoldersToArchive(children, archiveFolder.id);
+          }
+        });
       });
     });
 
-    function createUniqueDateFolderAndBookmarks(parentId, date, tabs) {
+    function saveTabsToFolder(parentId, date, tabs) {
       chrome.bookmarks.getChildren(parentId, (children) => {
         const dateFolders = children.filter((child) => child.title.startsWith(date));
         let folderTitle = date;
@@ -30,22 +61,28 @@ document.addEventListener("DOMContentLoaded", () => {
           folderTitle = `${date} (${dateFolders.length + 1})`;
         }
 
-        chrome.bookmarks.create(
-          {
-            parentId: parentId,
-            title: folderTitle,
-          },
-          (dateFolder) => {
-            tabs.forEach((tab) => {
-              chrome.bookmarks.create({
-                parentId: dateFolder.id,
-                title: tab.title,
-                url: tab.url,
-              });
+        chrome.bookmarks.create({ parentId: parentId, title: folderTitle }, (dateFolder) => {
+          tabs.forEach((tab) => {
+            chrome.bookmarks.create({
+              parentId: dateFolder.id,
+              title: tab.title,
+              url: tab.url,
             });
-            console.log(`Bookmarked ${tabs.length} tabs into folder 'Bookit/${folderTitle}'.`);
-          }
-        );
+          });
+          console.log(`Bookmarked ${tabs.length} tabs into folder 'Bookit/${folderTitle}'.`);
+        });
+      });
+    }
+
+    function moveFoldersToArchive(folders, archiveFolderId) {
+      folders.forEach((folder) => {
+        if (folder.title === "Archive") {
+          return;
+        }
+
+        chrome.bookmarks.move(folder.id, { parentId: archiveFolderId }, () => {
+          console.log(`Moved folder '${folder.title}' to Archive.`);
+        });
       });
     }
-  });
+  });