feat: prettier format, timeline slider, dark mode (v ugly commit)

package.json

···
 {
-    "name": "rabbithole",
-    "version": "3.0.0",
-    "type": "module",
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/nekitcorp/chrome-extension-svelte-typescript-boilerplate.git"
-    },
-    "scripts": {
-        "dev": "vite",
-        "build": "vite build",
-        "check": "svelte-check --tsconfig ./tsconfig.json"
-    },
-    "devDependencies": {
-        "@crxjs/vite-plugin": "1.0.14",
-        "@sveltejs/vite-plugin-svelte": "1.1.0",
-        "@tsconfig/svelte": "3.0.0",
-        "@types/chrome": "0.0.200",
-        "svelte": "3.52.0",
-        "svelte-check": "2.9.2",
-        "svelte-preprocess": "4.10.7",
-        "tslib": "2.4.0",
-        "typescript": "4.8.4",
-        "vite": "3.2.0"
-    },
-    "dependencies": {
-        "@svelteuidev/core": "^0.15.3",
-        "fuse.js": "^7.0.0",
-        "radix-icons-svelte": "^1.2.1",
-        "uuid": "^9.0.0"
-    }
+  "name": "rabbithole",
+  "version": "3.0.0",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nekitcorp/chrome-extension-svelte-typescript-boilerplate.git"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "check": "svelte-check --tsconfig ./tsconfig.json"
+  },
+  "devDependencies": {
+    "@crxjs/vite-plugin": "1.0.14",
+    "@sveltejs/vite-plugin-svelte": "1.1.0",
+    "@tsconfig/svelte": "3.0.0",
+    "@types/chrome": "0.0.200",
+    "prettier": "^3.6.2",
+    "prettier-plugin-svelte": "^3.4.0",
+    "svelte": "3.52.0",
+    "svelte-check": "2.9.2",
+    "svelte-preprocess": "4.10.7",
+    "tslib": "2.4.0",
+    "typescript": "4.8.4",
+    "vite": "3.2.0"
+  },
+  "dependencies": {
+    "@svelteuidev/core": "^0.15.3",
+    "d3-scale": "^4.0.2",
+    "d3-time": "^3.1.0",
+    "fuse.js": "^7.0.0",
+    "radix-icons-svelte": "^1.2.1",
+    "uuid": "^9.0.0"
+  }
 }

pnpm-lock.yaml

···
   '@svelteuidev/core':
     specifier: ^0.15.3
     version: 0.15.3(@svelteuidev/composables@0.15.3)(svelte@3.52.0)
+  d3-scale:
+    specifier: ^4.0.2
+    version: 4.0.2
+  d3-time:
+    specifier: ^3.1.0
+    version: 3.1.0
   fuse.js:
     specifier: ^7.0.0
     version: 7.0.0
···
   '@types/chrome':
     specifier: 0.0.200
     version: 0.0.200
+  prettier:
+    specifier: ^3.6.2
+    version: 3.6.2
+  prettier-plugin-svelte:
+    specifier: ^3.4.0
+    version: 3.4.0(prettier@3.6.2)(svelte@3.52.0)
   svelte:
     specifier: 3.52.0
     version: 3.52.0
···
     engines: {node: '>= 6'}
     dev: true
 
+  /d3-array@3.2.4:
+    resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==}
+    engines: {node: '>=12'}
+    dependencies:
+      internmap: 2.0.3
+    dev: false
+
+  /d3-color@3.1.0:
+    resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-format@3.1.0:
+    resolution: {integrity: sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-interpolate@3.0.1:
+    resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-color: 3.1.0
+    dev: false
+
+  /d3-scale@4.0.2:
+    resolution: {integrity: sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-array: 3.2.4
+      d3-format: 3.1.0
+      d3-interpolate: 3.0.1
+      d3-time: 3.1.0
+      d3-time-format: 4.1.0
+    dev: false
+
+  /d3-time-format@4.1.0:
+    resolution: {integrity: sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-time: 3.1.0
+    dev: false
+
+  /d3-time@3.1.0:
+    resolution: {integrity: sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-array: 3.2.4
+    dev: false
+
   /debug@2.6.9:
     resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
     peerDependencies:
···
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
     dev: true
 
+  /internmap@2.0.3:
+    resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
+    engines: {node: '>=12'}
+    dev: false
+
   /is-binary-path@2.1.0:
     resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
     engines: {node: '>=8'}
···
       nanoid: 3.3.7
       picocolors: 1.0.0
       source-map-js: 1.0.2
+    dev: true
+
+  /prettier-plugin-svelte@3.4.0(prettier@3.6.2)(svelte@3.52.0):
+    resolution: {integrity: sha512-pn1ra/0mPObzqoIQn/vUTR3ZZI6UuZ0sHqMK5x2jMLGrs53h0sXhkVuDcrlssHwIMk7FYrMjHBPoUSyyEEDlBQ==}
+    peerDependencies:
+      prettier: ^3.0.0
+      svelte: ^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0
+    dependencies:
+      prettier: 3.6.2
+      svelte: 3.52.0
+    dev: true
+
+  /prettier@3.6.2:
+    resolution: {integrity: sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==}
+    engines: {node: '>=14'}
+    hasBin: true
     dev: true
 
   /q@1.5.1:

src/background/index.ts

···
-import { MessageRequest } from "../utils"
-import { WebsiteStore } from "../storage/db"
+import { MessageRequest } from "../utils";
+import { WebsiteStore } from "../storage/db";
 
 function sendOverlayUpdate(tabId: number) {
   // ignore errors; receiving end won't exist if it's the newtab page
   try {
-    chrome.tabs.sendMessage(tabId, { type: MessageRequest.PING })
-  } catch (err) {
-  }
+    chrome.tabs.sendMessage(tabId, { type: MessageRequest.PING });
+  } catch (err) {}
 }
 
 // this is meant to be called async
-function storeWebsites(tabs: chrome.tabs.Tab[], db: WebsiteStore, sendResponse: any): Promise<void[]> {
+function storeWebsites(
+  tabs: chrome.tabs.Tab[],
+  db: WebsiteStore,
+  sendResponse: any,
+): Promise<void[]> {
   // delegate this to db?
   // FIXME: add some guarantees that this won't randomly crash
-  const promiseArray = tabs.map(tab => fetch(`https://cardyb.bsky.app/v1/extract?url=${encodeURIComponent(tab.url)}`,
-    {
-      method: 'GET',
-      redirect: 'follow'
-    })
-    .then(response => response.json())
-    .then(result => {
-      return {
-        url: tab.url,
-        name: (result.error === "" && result.title !== "") ? result.title : tab.title,
-        faviconUrl: tab.favIconUrl,
-        savedAt: Date.now(),
-        openGraphImageUrl: (result.error === "") ? result.image : null,
-        description: (result.error === "") ? result.description : null,
-      };
-    })
-    .then(website => {
-      db.saveWebsiteToProject([website])
-        .then(res => sendResponse(res))
-        .catch(err => {
-          console.log(err)
-          sendResponse(err)
-        });
-    })
-    .catch(error => {
-      // just use info at hand if OG information cannot be retrieved
-      // TODO: are there cases when it's preferable to do this?
-      db.saveWebsiteToProject([{
-        url: tab.url,
-        name: tab.title,
-        faviconUrl: tab.favIconUrl,
-        savedAt: Date.now(),
-        openGraphImageUrl: null,
-        description: null,
-      }])
-        .then(res => sendResponse(res))
-        .catch(err => {
-          console.log(err)
-          sendResponse(err)
-        });
-    }));
+  const promiseArray = tabs.map((tab) =>
+    fetch(
+      `https://cardyb.bsky.app/v1/extract?url=${encodeURIComponent(tab.url)}`,
+      {
+        method: "GET",
+        redirect: "follow",
+      },
+    )
+      .then((response) => response.json())
+      .then((result) => {
+        return {
+          url: tab.url,
+          name:
+            result.error === "" && result.title !== ""
+              ? result.title
+              : tab.title,
+          faviconUrl: tab.favIconUrl,
+          savedAt: Date.now(),
+          openGraphImageUrl: result.error === "" ? result.image : null,
+          description: result.error === "" ? result.description : null,
+        };
+      })
+      .then((website) => {
+        db.saveWebsiteToProject([website])
+          .then((res) => sendResponse(res))
+          .catch((err) => {
+            console.log(err);
+            sendResponse(err);
+          });
+      })
+      .catch((error) => {
+        // just use info at hand if OG information cannot be retrieved
+        // TODO: are there cases when it's preferable to do this?
+        db.saveWebsiteToProject([
+          {
+            url: tab.url,
+            name: tab.title,
+            faviconUrl: tab.favIconUrl,
+            savedAt: Date.now(),
+            openGraphImageUrl: null,
+            description: null,
+          },
+        ])
+          .then((res) => sendResponse(res))
+          .catch((err) => {
+            console.log(err);
+            sendResponse(err);
+          });
+      }),
+  );
 
   return Promise.all(promiseArray);
 }
 
 chrome.runtime.onInstalled.addListener(async () => {
-  console.log("just installed!")
+  console.log("just installed!");
   WebsiteStore.init(indexedDB);
 });
 
-chrome.runtime.onMessage.addListener(
-  (request, sender, sendResponse) => {
-    if (!("type" in request)) {
-      sendResponse({
-        error: "request type required"
-      });
-    }
-    const db = new WebsiteStore(indexedDB)
+chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+  if (!("type" in request)) {
+    sendResponse({
+      error: "request type required",
+    });
+  }
+  const db = new WebsiteStore(indexedDB);
 
-    // ugly callback/.then syntax because of listener function quirks
-    // see https://stackoverflow.com/questions/70353944/chrome-runtime-onmessage-returns-undefined-even-when-value-is-known-for-asynch
-    switch (request.type) {
-      case MessageRequest.SAVE_TAB:
-        chrome.tabs.query({ active: true, lastFocusedWindow: true },
-          (tabs) => storeWebsites(tabs, db, sendResponse));
+  // ugly callback/.then syntax because of listener function quirks
+  // see https://stackoverflow.com/questions/70353944/chrome-runtime-onmessage-returns-undefined-even-when-value-is-known-for-asynch
+  switch (request.type) {
+    case MessageRequest.SAVE_TAB:
+      chrome.tabs.query({ active: true, lastFocusedWindow: true }, (tabs) =>
+        storeWebsites(tabs, db, sendResponse),
+      );
+      break;
+    case MessageRequest.GET_ALL_ITEMS:
+      db.getAllWebsites()
+        .then((res) => sendResponse(res))
+        .catch((err) => {
+          console.log(err);
+          sendResponse(err);
+        });
+      break;
+    case MessageRequest.GET_SETTINGS:
+      db.getSettings()
+        .then((res) => sendResponse(res))
+        .catch((err) => {
+          console.log(err);
+          sendResponse(err);
+        });
+      break;
+    case MessageRequest.UPDATE_SETTINGS:
+      if (!("settings" in request)) {
+        sendResponse({
+          error: "settings required",
+        });
         break;
-      case MessageRequest.GET_ALL_ITEMS:
-        db.getAllWebsites()
-          .then((res) => sendResponse(res))
-          .catch(err => {
-            console.log(err)
-            sendResponse(err)
-          });
+      }
+      db.updateSettings(request.settings)
+        .then((res) => sendResponse(res))
+        .catch((err) => {
+          console.log(err);
+          sendResponse(err);
+        });
+      break;
+    case MessageRequest.GET_ALL_PROJECTS:
+      db.getAllProjects()
+        .then((res) => sendResponse(res))
+        .catch((err) => {
+          console.log(err);
+          sendResponse(err);
+        });
+      break;
+    case MessageRequest.GET_PROJECT_SAVED_WEBSITES:
+      if (!("projectId" in request)) {
+        sendResponse({
+          error: "projectId required",
+        });
         break;
-      case MessageRequest.GET_SETTINGS:
-        db.getSettings()
-          .then((res) => sendResponse(res))
-          .catch(err => {
-            console.log(err)
-            sendResponse(err)
-          });
+      }
+      db.getAllWebsitesForProject(request.projectId)
+        .then((res) => sendResponse(res))
+        .catch((err) => {
+          console.log(err);
+          sendResponse(err);
+        });
+      break;
+    case MessageRequest.CREATE_NEW_PROJECT:
+      if (!("newProjectName" in request)) {
+        sendResponse({
+          error: "newProjectName required",
+        });
         break;
-      case MessageRequest.UPDATE_SETTINGS:
-        if (!("settings" in request)) {
-          sendResponse({
-            error: "settings required"
-          });
-          break;
-        }
-        db.updateSettings(request.settings)
-          .then((res) => sendResponse(res))
-          .catch(err => {
-            console.log(err)
-            sendResponse(err)
-          });
+      }
+      db.createNewActiveProject(request.newProjectName)
+        .then((res) => sendResponse(res))
+        .catch((err) => {
+          console.log(err);
+          sendResponse(err);
+        });
+      break;
+    case MessageRequest.CHANGE_ACTIVE_PROJECT:
+      if (!("projectId" in request)) {
+        sendResponse({
+          error: "projectId required",
+        });
         break;
-      case MessageRequest.GET_ALL_PROJECTS:
-        db.getAllProjects()
-          .then((res) => sendResponse(res))
-          .catch(err => {
-            console.log(err)
-            sendResponse(err)
-          });
+      }
+      db.changeActiveProject(request.projectId)
+        .then((res) => sendResponse(res))
+        .catch((err) => {
+          console.log(err);
+          sendResponse(err);
+        });
+      break;
+    case MessageRequest.GET_ACTIVE_PROJECT:
+      db.getActiveProject()
+        .then((res) => sendResponse(res))
+        .catch((err) => {
+          console.log(err);
+          sendResponse(err);
+        });
+      break;
+    case MessageRequest.GET_PROJECT:
+      if (!("projectId" in request)) {
+        sendResponse({
+          error: "projectId required",
+        });
         break;
-      case MessageRequest.GET_PROJECT_SAVED_WEBSITES:
-        if (!("projectId" in request)) {
-          sendResponse({
-            error: "projectId required"
-          });
-          break;
-        }
-        db.getAllWebsitesForProject(request.projectId)
-          .then((res) => sendResponse(res))
-          .catch(err => {
-            console.log(err)
-            sendResponse(err)
-          });
-        break;
-      case MessageRequest.CREATE_NEW_PROJECT:
+      }
+      db.getProject(request.projectId)
+        .then((res) => sendResponse(res))
+        .catch((err) => {
+          console.log(err);
+          sendResponse(err);
+        });
+      break;
+    case MessageRequest.SAVE_WINDOW_TO_NEW_PROJECT:
+      chrome.tabs.query({ windowId: sender.tab.windowId }).then((tabs) => {
+        let websites: string[] = tabs.map((tab) => tab.url);
+        // store websites async
+        storeWebsites(tabs, db, sendResponse);
+
         if (!("newProjectName" in request)) {
           sendResponse({
-            error: "newProjectName required"
-          });
-          break;
-        }
-        db.createNewActiveProject(request.newProjectName)
-          .then((res) => sendResponse(res))
-          .catch(err => {
-            console.log(err)
-            sendResponse(err)
-          });
-        break;
-      case MessageRequest.CHANGE_ACTIVE_PROJECT:
-        if (!("projectId" in request)) {
-          sendResponse({
-            error: "projectId required"
-          });
-          break;
-        }
-        db.changeActiveProject(request.projectId)
-          .then((res) => sendResponse(res))
-          .catch(err => {
-            console.log(err)
-            sendResponse(err)
-          });
-        break;
-      case MessageRequest.GET_ACTIVE_PROJECT:
-        db.getActiveProject()
-          .then((res) => sendResponse(res))
-          .catch(err => {
-            console.log(err)
-            sendResponse(err)
-          });
-        break;
-      case MessageRequest.GET_PROJECT:
-        if (!("projectId" in request)) {
-          sendResponse({
-            error: "projectId required"
+            error: "projectName required",
           });
-          break;
         }
-        db.getProject(request.projectId)
+        // FIXME: remove websites to see if that fixes double website store
+        db.createNewActiveProject(request.newProjectName, websites)
           .then((res) => sendResponse(res))
-          .catch(err => {
-            console.log(err)
-            sendResponse(err)
+          .catch((err) => {
+            console.log(err);
+            sendResponse(err);
           });
-        break;
-      case MessageRequest.SAVE_WINDOW_TO_NEW_PROJECT:
-        chrome.tabs.query({ windowId: sender.tab.windowId })
-          .then(tabs => {
-            let websites: string[] = tabs.map(tab => tab.url);
-            // store websites async
-            storeWebsites(tabs, db, sendResponse);
+      });
 
-            if (!("newProjectName" in request)) {
-              sendResponse({
-                error: "projectName required"
-              });
-            }
-            // FIXME: remove websites to see if that fixes double website store
-            db.createNewActiveProject(request.newProjectName, websites)
-              .then((res) => sendResponse(res))
-              .catch(err => {
-                console.log(err)
-                sendResponse(err)
-              });
-          });
+      break;
+    case MessageRequest.SAVE_WINDOW_TO_ACTIVE_PROJECT:
+      chrome.tabs.query({ windowId: sender.tab.windowId }).then((tabs) => {
+        // store websites async
+        storeWebsites(tabs, db, sendResponse);
+      });
 
+      break;
+    case MessageRequest.RENAME_PROJECT:
+      if (!("newName" in request) || !("projectId" in request)) {
+        sendResponse({
+          error: "projectId and newName required",
+        });
         break;
-      case MessageRequest.SAVE_WINDOW_TO_ACTIVE_PROJECT:
-        chrome.tabs.query({ windowId: sender.tab.windowId })
-          .then(tabs => {
-            // store websites async
-            storeWebsites(tabs, db, sendResponse);
-          });
-
+      }
+      db.renameProject(request.projectId, request.newName)
+        .then((res) => sendResponse(res))
+        .catch((err) => {
+          console.log(err);
+          sendResponse(err);
+        });
+      break;
+    case MessageRequest.DELETE_PROJECT:
+      if (!("projectId" in request)) {
+        sendResponse({
+          error: "projectId required",
+        });
         break;
-      case MessageRequest.RENAME_PROJECT:
-        if (!("newName" in request) || !("projectId" in request)) {
-          sendResponse({
-            error: "projectId and newName required"
-          });
-          break;
-        }
-        db.renameProject(request.projectId, request.newName)
-          .then(res => sendResponse(res))
-          .catch(err => {
-            console.log(err)
-            sendResponse(err)
-          });
+      }
+      db.deleteProject(request.projectId)
+        .then((res) => sendResponse(res))
+        .catch((err) => {
+          console.log(err);
+          sendResponse(err);
+        });
+      break;
+    case MessageRequest.DELETE_WEBSITE:
+      if (!("url" in request) || !("projectId" in request)) {
+        sendResponse({
+          error: "projectId and url required",
+        });
         break;
-      case MessageRequest.DELETE_PROJECT:
-        if (!("projectId" in request)) {
-          sendResponse({
-            error: "projectId required"
-          });
-          break;
-        }
-        db.deleteProject(request.projectId)
-          .then(res => sendResponse(res))
-          .catch(err => {
-            console.log(err)
-            sendResponse(err)
-          });
-        break;
-      case MessageRequest.DELETE_WEBSITE:
-        if (!("url" in request) || !("projectId" in request)) {
-          sendResponse({
-            error: "projectId and url required"
-          });
-          break;
-        }
-        db.deleteWebsiteFromProject(request.projectId, request.url)
-          .then(res => sendResponse(res))
-          .catch(err => {
-            console.log(err)
-            sendResponse(err)
-          });
-        break;
-      default:
-    }
+      }
+      db.deleteWebsiteFromProject(request.projectId, request.url)
+        .then((res) => sendResponse(res))
+        .catch((err) => {
+          console.log(err);
+          sendResponse(err);
+        });
+      break;
+    default:
+  }
 
-    // arcane incantation required for async `sendResponse`s to work
-    // https://developer.chrome.com/docs/extensions/mv3/messaging/#simple
-    return true;
-  }
-);
+  // arcane incantation required for async `sendResponse`s to work
+  // https://developer.chrome.com/docs/extensions/mv3/messaging/#simple
+  return true;
+});
 
 // send updates to tabs when created, changed, updated
 // chrome.tabs.onUpdated.addListener((tabId, info) => {
···
 // sendOverlayUpdate(tabId);
 // }
 // });
-chrome.tabs.onActivated.addListener(tab => {
-  chrome.tabs.query({ active: true, lastFocusedWindow: true },
-    (tabInfo) => {
-      // FIXME: firefox? also maybe should be abstracted
-      if ("pendingUrl" in tabInfo[0]) {
-        if (!tabInfo[0].pendingUrl.includes("chrome://") &&
-          !tabInfo[0].pendingUrl.includes("brave://") &&
-          !tabInfo[0].pendingUrl.includes("edge://")
-        ) {
-          sendOverlayUpdate(tab.tabId);
-        }
-      } else {
-        if (!tabInfo[0].url.includes("chrome://") &&
-          !tabInfo[0].url.includes("brave://") &&
-          !tabInfo[0].url.includes("edge://")
-        ) {
-          sendOverlayUpdate(tab.tabId);
-        }
+chrome.tabs.onActivated.addListener((tab) => {
+  chrome.tabs.query({ active: true, lastFocusedWindow: true }, (tabInfo) => {
+    // FIXME: firefox? also maybe should be abstracted
+    if ("pendingUrl" in tabInfo[0]) {
+      if (
+        !tabInfo[0].pendingUrl.includes("chrome://") &&
+        !tabInfo[0].pendingUrl.includes("brave://") &&
+        !tabInfo[0].pendingUrl.includes("edge://")
+      ) {
+        sendOverlayUpdate(tab.tabId);
+      }
+    } else {
+      if (
+        !tabInfo[0].url.includes("chrome://") &&
+        !tabInfo[0].url.includes("brave://") &&
+        !tabInfo[0].url.includes("edge://")
+      ) {
+        sendOverlayUpdate(tab.tabId);
       }
     }
-  )
+  });
 });

src/content/index.ts

···
 }
 
 loadOverlay();
-chrome.runtime.onMessage.addListener(
-  function(request, sender, sendResponse) {
-    if (!("type" in request)) {
-      sendResponse({
-        error: "request type required"
-      });
-    }
-    if (request.type === MessageRequest.PING) {
-      // load floating action overlay
-      loadOverlay();
-      sendResponse();
-    }
+chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
+  if (!("type" in request)) {
+    sendResponse({
+      error: "request type required",
+    });
   }
-);
+  if (request.type === MessageRequest.PING) {
+    // load floating action overlay
+    loadOverlay();
+    sendResponse();
+  }
+});

src/content/styles.css

···
 body {
-
 }

src/lib/Options.svelte

···
 <script lang="ts">
-  import { MessageRequest, NotificationDuration } from "../utils"
-  import { Button, Group } from '@svelteuidev/core';
+  import { MessageRequest, NotificationDuration } from "../utils";
+  import { Button, Group } from "@svelteuidev/core";
 
   let successMessage: string = null;
 
   async function save() {
-    const [savedTab] = await chrome.runtime.sendMessage({type: MessageRequest.SAVE_TAB});
-    successMessage = (savedTab.alreadySaved)? "Website already saved!" : "Website saved!";
+    const [savedTab] = await chrome.runtime.sendMessage({
+      type: MessageRequest.SAVE_TAB,
+    });
+    successMessage = savedTab.alreadySaved
+      ? "Website already saved!"
+      : "Website saved!";
     setTimeout(() => {
       successMessage = null;
     }, NotificationDuration);
···
 
 <div class="container">
   <Group position="center">
-    <Button on:click={save} size="md" id="move" color='blue'>
+    <Button on:click={save} size="md" id="move" color="blue">
       Save Website
     </Button>
-  {#if successMessage}<span class="success">{successMessage}</span>{/if}
+    {#if successMessage}<span class="success">{successMessage}</span>{/if}
   </Group>
 </div>
 

src/lib/Overlay.svelte

···
 <script lang="ts">
   import { onMount } from "svelte";
-  import { Button, Group, Tooltip } from '@svelteuidev/core';
+  import { Button, Group, Tooltip } from "@svelteuidev/core";
   import Options from "./Options.svelte";
-  import ProjectSelector from "src/lib/ProjectSelector.svelte"
-  import { MessageRequest, getOrderedProjects } from "../utils.ts"
+  import ProjectSelector from "src/lib/ProjectSelector.svelte";
+  import { MessageRequest, getOrderedProjects } from "../utils.ts";
 
   let settings: Settings = {
     show: false,
-    alignment: "right"
+    alignment: "right",
   };
   let projects = [];
   let isHovering = false;
 
   onMount(async () => {
-    settings = await chrome.runtime.sendMessage({type: MessageRequest.GET_SETTINGS});
-    projects = await getOrderedProjects()
+    settings = await chrome.runtime.sendMessage({
+      type: MessageRequest.GET_SETTINGS,
+    });
+    projects = await getOrderedProjects();
   });
 
   function changeAlignment(event) {
···
   <div id="overlay-container" class="overlay {settings.alignment}">
     <div class="buttons">
       <Group position="center" spacing="md">
-        <Button on:click={changeAlignment} id="move" variant='light' color='blue'>
+        <Button
+          on:click={changeAlignment}
+          id="move"
+          variant="light"
+          color="blue"
+        >
           Move
         </Button>
         <Tooltip {isHovering} label="You can unhide from the newtab page">
           <Button
             on:click={hideOverlay}
-            on:mouseenter={()=>{isHovering=true}}
-            on:mouseleave={()=>{isHovering=false}}
+            on:mouseenter={() => {
+              isHovering = true;
+            }}
+            on:mouseleave={() => {
+              isHovering = false;
+            }}
             id="move"
-            variant='light'
-            color='blue'
-            >
+            variant="light"
+            color="blue"
+          >
             Hide
           </Button>
         </Tooltip>
       </Group>
     </div>
     <div class="selector">
-      <ProjectSelector projects={projects} handleProjectChange={handleProjectChange} />
+      <ProjectSelector {projects} {handleProjectChange} />
     </div>
     <div>
-      <Options/>
+      <Options />
     </div>
   </div>
 {/if}
···
     height: 200px;
     position: fixed;
     bottom: 16px;
-    background-color: rgba(255,255,255,0.8);
+    background-color: rgba(255, 255, 255, 0.8);
     border-radius: 20px;
     border: 1px solid black;
     padding: 4px;

src/lib/ProjectSelector.svelte

···
 <script>
   import { onMount } from "svelte";
-  import { NativeSelect } from '@svelteuidev/core';
-  import { MessageRequest } from "../utils.ts"
+  import { NativeSelect } from "@svelteuidev/core";
+  import { MessageRequest } from "../utils.ts";
 
   export let handleProjectChange;
   export let projects = [];
 </script>
 
 <div>
-  <NativeSelect data={projects.map(p => { return { label: p.name, value: p.id }; })}
+  <NativeSelect
+    data={projects.map((p) => {
+      return { label: p.name, value: p.id };
+    })}
     on:change={handleProjectChange}
-    />
+  />
 </div>

src/lib/Rabbithole.svelte

···
 <script>
   import { onMount } from "svelte";
-  import Timeline from "src/lib/Timeline.svelte"
-  import Sidebar from "src/lib/Sidebar.svelte"
-  import { MessageRequest, getOrderedProjects, NotificationDuration } from "../utils"
-  import { SvelteUIProvider, fns, AppShell, Navbar, Title, Divider } from "@svelteuidev/core";
+  import Timeline from "src/lib/Timeline.svelte";
+  import Sidebar from "src/lib/Sidebar.svelte";
+  import {
+    MessageRequest,
+    getOrderedProjects,
+    NotificationDuration,
+  } from "../utils";
+  import {
+    SvelteUIProvider,
+    fns,
+    AppShell,
+    Navbar,
+    Title,
+    Divider,
+  } from "@svelteuidev/core";
 
   let activeProject = {};
   let websites = [];
   let projects = [];
-  let isDark = true;
+  let isDark = false;
   let opened = false;
 
   // status for updatingComponents
···
   let syncFail = false;
 
   onMount(async () => {
-    projects = await getOrderedProjects()
-    activeProject = await chrome.runtime.sendMessage({ type: MessageRequest.GET_ACTIVE_PROJECT })
+    projects = await getOrderedProjects();
+    activeProject = await chrome.runtime.sendMessage({
+      type: MessageRequest.GET_ACTIVE_PROJECT,
+    });
     updateWebsites();
   });
 
···
     setTimeout(() => {
       updateWebsites();
       syncSuccess = true;
-      setTimeout(() => { syncSuccess = false }, NotificationDuration);
+      setTimeout(() => {
+        syncSuccess = false;
+      }, NotificationDuration);
     }, 300);
     setTimeout(() => {
       updateWebsites();
···
     activeProject = await chrome.runtime.sendMessage({
       type: MessageRequest.RENAME_PROJECT,
       newName: event.detail.newActiveProjectName,
-      projectId: activeProject.id
+      projectId: activeProject.id,
     });
     projects = await getOrderedProjects();
   }
···
   async function deleteActiveProject(event) {
     activeProject = await chrome.runtime.sendMessage({
       type: MessageRequest.DELETE_PROJECT,
-      projectId: activeProject.id
+      projectId: activeProject.id,
     });
     projects = await getOrderedProjects();
     updateWebsites();
···
     await chrome.runtime.sendMessage({
       type: MessageRequest.DELETE_WEBSITE,
       projectId: activeProject.id,
-      url: event.detail.url
+      url: event.detail.url,
     });
     updateWebsites();
   }
···
       type: MessageRequest.GET_PROJECT_SAVED_WEBSITES,
       projectId: activeProject.id,
     });
-    websites = possiblyDuplicatedWebsites.filter((value, index, self) =>
-      index === self.findIndex((t) => (
-        t.url === value.url
-      ))
+    websites = possiblyDuplicatedWebsites.filter(
+      (value, index, self) =>
+        index === self.findIndex((t) => t.url === value.url),
     );
   }
 
···
     const projects = await chrome.runtime.sendMessage({
       type: MessageRequest.GET_ALL_PROJECTS,
     });
-    const blob = new Blob([JSON.stringify(projects)], {type: 'application/json'});
+    const blob = new Blob([JSON.stringify(projects)], {
+      type: "application/json",
+    });
     const url = URL.createObjectURL(blob);
-    const link = document.createElement('a');
+    const link = document.createElement("a");
     link.href = url;
-    link.setAttribute('download', "rabbithole.json");
+    link.setAttribute("download", "rabbithole.json");
     link.click();
   }
 
   function toggleTheme() {
     isDark = !isDark;
+    document.body.classList.toggle("dark-mode", isDark);
   }
+
   function toggleOpened() {
     opened = !opened;
   }
···
       width={{
         sm: 300,
         lg: 400,
-        base: 100
+        base: 100,
       }}
       height={"100%"}
       override={{
         borderRight: "1px solid rgb(233, 236, 239)",
-        overflowY: "scroll"
+        overflowY: "scroll",
       }}
-      hidden={!opened}>
+      hidden={!opened}
+    >
       <Sidebar
-        syncSuccess={syncSuccess}
-        projects={projects}
+        {syncSuccess}
+        {projects}
         on:projectDelete={deleteActiveProject}
         on:projectChange={updateActiveProject}
         on:newProject={createNewProject}
         on:newProjectSync={createNewProjectFromWindow}
         on:projectSync={saveWindowToActiveProject}
-        on:exportRabbitholes={exportRabbitholes} />
+        on:exportRabbitholes={exportRabbitholes}
+      />
     </Navbar>
     <Timeline
       on:websiteDelete={deleteWebsite}
       on:projectRename={renameActiveProject}
-      activeProject={activeProject}
-      websites={websites} />
+      on:toggleTheme={toggleTheme}
+      {activeProject}
+      {websites}
+      {isDark}
+    />
   </AppShell>
 </SvelteUIProvider>
+
+<style>
+  :global(body.dark-mode) {
+    background-color: #1a1a1a;
+    color: #ffffff;
+  }
+
+  :global(body.dark-mode .timeline) {
+    background-color: #1a1a1a;
+    color: #ffffff;
+  }
+
+  :global(body.dark-mode .mantine-AppShell-root) {
+    background-color: #1a1a1a;
+  }
+
+  :global(body.dark-mode .mantine-AppShell-main) {
+    background-color: #1a1a1a;
+    color: #ffffff;
+  }
+
+  :global(body.dark-mode .mantine-Card-root) {
+    background-color: #2c2c2c;
+    color: #ffffff;
+  }
+
+  :global(body.dark-mode .mantine-Text-root) {
+    color: #ffffff;
+  }
+
+  :global(body.dark-mode .mantine-TextInput-input) {
+    background-color: #2c2c2c;
+    color: #ffffff;
+    border-color: #444;
+  }
+
+  :global(body.dark-mode .mantine-Input-input) {
+    background-color: #2c2c2c;
+    color: #ffffff;
+  }
+
+  :global(body.dark-mode .mantine-Navbar-root) {
+    background-color: #2c2c2c;
+    border-right: 1px solid #444 !important;
+  }
+
+  :global(body.dark-mode .mantine-Button-root) {
+    background-color: #2c2c2c;
+    color: #ffffff;
+  }
+
+  :global(body.dark-mode .mantine-Divider-root) {
+    border-color: #444;
+  }
+</style>

src/lib/SettingsButtons.svelte

···
 <script lang="ts">
   import { onMount } from "svelte";
-  import { Button, Group, Tooltip } from '@svelteuidev/core';
+  import { Button, Group, Tooltip } from "@svelteuidev/core";
   import Options from "./Options.svelte";
-  import { MessageRequest } from "../utils.ts"
+  import { MessageRequest } from "../utils.ts";
 
   export let settings: Settings = {
     show: false,
-    alignment: "right"
+    alignment: "right",
   };
   let isHovering = false;
 
···
   }
 
   onMount(async () => {
-    settings = await chrome.runtime.sendMessage({type: MessageRequest.GET_SETTINGS});
+    settings = await chrome.runtime.sendMessage({
+      type: MessageRequest.GET_SETTINGS,
+    });
   });
 </script>
 
 <div>
   <Group position="center" spacing="md">
-    <Button on:click={changeAlignment} id="move" variant='light' color='blue'>
+    <Button on:click={changeAlignment} id="move" variant="light" color="blue">
       {#if settings.alignment === "right"}
         Move button left
       {:else}
···
     </Button>
     <Button
       on:click={hideOverlay}
-      on:mouseenter={()=>{isHovering=true}}
-      on:mouseleave={()=>{isHovering=false}}
+      on:mouseenter={() => {
+        isHovering = true;
+      }}
+      on:mouseleave={() => {
+        isHovering = false;
+      }}
       id="move"
-      variant='light'
-      color='blue'
-      >
+      variant="light"
+      color="blue"
+    >
       {#if settings.show}
         Hide
       {:else}

src/lib/Sidebar.svelte

···
 <script>
   import { onMount, createEventDispatcher } from "svelte";
-  import { Badge, Button, Card, Group, Image, Text, TextInput, Tooltip } from '@svelteuidev/core';
-  import SettingsButtons from "src/lib/SettingsButtons.svelte"
-  import UpdatingComponent from "src/lib/UpdatingComponent.svelte"
-  import { MessageRequest, NotificationDuration } from "../utils"
-  import ProjectSelector from "src/lib/ProjectSelector.svelte"
+  import {
+    Badge,
+    Button,
+    Card,
+    Group,
+    Image,
+    Text,
+    TextInput,
+    Tooltip,
+  } from "@svelteuidev/core";
+  import SettingsButtons from "src/lib/SettingsButtons.svelte";
+  import UpdatingComponent from "src/lib/UpdatingComponent.svelte";
+  import { MessageRequest, NotificationDuration } from "../utils";
+  import ProjectSelector from "src/lib/ProjectSelector.svelte";
 
   // FIXME: why aren't types working here?
   const dispatch = createEventDispatcher();
···
   let isHoveringOverSync = false;
   let isHoveringOverDelete = false;
   const textStyleOverride = {
-    marginTop: "15px"
-  }
+    marginTop: "15px",
+  };
 
   function validateProjectName() {
     let valid = true;
···
       createProjectFailMsg = "Project name required!";
       valid = false;
     }
-    if (projects.filter(p => p.name === newRabbitholeName).length > 0) {
+    if (projects.filter((p) => p.name === newRabbitholeName).length > 0) {
       createProjectFailMsg = "Project name already used!";
       valid = false;
     }
     if (!valid) {
       createProjectFail = true;
-      setTimeout(() => { createProjectFail = false; }, NotificationDuration);
+      setTimeout(() => {
+        createProjectFail = false;
+      }, NotificationDuration);
       return false;
     }
     return valid;
   }
 
   async function handleProjectChange(event) {
-    dispatch('projectChange', {
+    dispatch("projectChange", {
       newProjectId: event.target.value,
     });
   }
 
   async function createNewProject() {
-    if (validateProjectName()){
-      dispatch('newProject', {
-        newProjectName: newRabbitholeName
+    if (validateProjectName()) {
+      dispatch("newProject", {
+        newProjectName: newRabbitholeName,
       });
     }
   }
 
   async function saveAllTabsToNewProject() {
-    if (validateProjectName()){
-      dispatch('newProjectSync', {
-        newProjectName: newRabbitholeName
+    if (validateProjectName()) {
+      dispatch("newProjectSync", {
+        newProjectName: newRabbitholeName,
       });
     }
   }
 
   async function saveAllTabsToActiveProject() {
-    dispatch('projectSync');
+    dispatch("projectSync");
   }
 
   async function deleteProject() {
···
 </script>
 
 <div class="sidebar">
-  <Group direction="column" position="left" override={{
-         alignItems: "left"
-     }}>
-    <Text weight="bold" size="lg" override={textStyleOverride}>Overlay Settings</Text>
-    <SettingsButtons/>
-    <Text weight="bold" size="lg" override={textStyleOverride}>Change Project</Text>
-    <ProjectSelector
-      id="project-selector"
-      projects={projects}
-      handleProjectChange={handleProjectChange} />
-    <Tooltip {isHoveringOverSync} label="Save all tabs in window to current project">
-      <UpdatingComponent success={syncSuccess} successMsg="Window synced successfully!">
+  <Group
+    direction="column"
+    position="left"
+    override={{
+      alignItems: "left",
+    }}
+  >
+    <Text weight="bold" size="lg" override={textStyleOverride}
+      >Overlay Settings</Text
+    >
+    <SettingsButtons />
+    <Text weight="bold" size="lg" override={textStyleOverride}
+      >Change Project</Text
+    >
+    <ProjectSelector id="project-selector" {projects} {handleProjectChange} />
+    <Tooltip
+      {isHoveringOverSync}
+      label="Save all tabs in window to current project"
+    >
+      <UpdatingComponent
+        success={syncSuccess}
+        successMsg="Window synced successfully!"
+      >
         <Button
           on:click={saveAllTabsToActiveProject}
-          on:mouseenter={()=>{isHoveringOverSync=true}}
-          on:mouseleave={()=>{isHoveringOverSync=false}}
-          variant='light'
-          color='blue'
-          >
+          on:mouseenter={() => {
+            isHoveringOverSync = true;
+          }}
+          on:mouseleave={() => {
+            isHoveringOverSync = false;
+          }}
+          variant="light"
+          color="blue"
+        >
           Sync window
         </Button>
       </UpdatingComponent>
···
     <Tooltip {isHoveringOverDelete} label="This action is irreversible!">
       <Button
         on:click={deleteProject}
-        on:mouseenter={()=>{isHoveringOverDelete=true}}
-        on:mouseleave={()=>{isHoveringOverDelete=false}}
-        variant='filled'
-        color='red'
-        >
+        on:mouseenter={() => {
+          isHoveringOverDelete = true;
+        }}
+        on:mouseleave={() => {
+          isHoveringOverDelete = false;
+        }}
+        variant="filled"
+        color="red"
+      >
         Delete Project
       </Button>
     </Tooltip>
-    <Text weight="bold" size="lg" override={textStyleOverride}>Create Project</Text>
+    <Text weight="bold" size="lg" override={textStyleOverride}
+      >Create Project</Text
+    >
     <UpdatingComponent fail={createProjectFail} failMsg={createProjectFailMsg}>
       <TextInput
         placeholder="My new rabbithole"
         bind:value={newRabbitholeName}
-        />
+      />
     </UpdatingComponent>
-    <Button
-      on:click={createNewProject}
-      variant='light'
-      color='blue'
-      >
+    <Button on:click={createNewProject} variant="light" color="blue">
       Create empty project
     </Button>
-    <Button
-      on:click={saveAllTabsToNewProject}
-      variant='light'
-      color='blue'
-      >
+    <Button on:click={saveAllTabsToNewProject} variant="light" color="blue">
       Create and save all tabs in window
     </Button>
-    <Button
-      on:click={exportRabbitholes}
-      variant='light'
-      color='blue'
-      >
+    <Button on:click={exportRabbitholes} variant="light" color="blue">
       Export rabbitholes
     </Button>
   </Group>

src/lib/Timeline.svelte

···
 <script>
   import Fuse from "fuse.js";
   import { onMount, createEventDispatcher } from "svelte";
-  import { Badge, Button, Card, Group, Image, Input, Text, TextInput, Tooltip } from '@svelteuidev/core';
-  import { MessageRequest } from "../utils"
+  import {
+    Badge,
+    Button,
+    Card,
+    Group,
+    Image,
+    Input,
+    Text,
+    TextInput,
+    Tooltip,
+  } from "@svelteuidev/core";
+  import { MessageRequest } from "../utils";
   import TimelineCard from "src/lib/TimelineCard.svelte";
-  import { Pencil1 } from 'radix-icons-svelte';
+  import TimelineSlider from "src/lib/TimelineSlider.svelte";
+  import { Pencil1, Moon, Sun } from "radix-icons-svelte";
 
   // FIXME: why aren't types working here?
   const dispatch = createEventDispatcher();
 
   export let activeProject = {};
   export let websites = [];
+  export let isDark = false;
 
   let searchResults = [];
   let nameClicked = false;
   let isHovering = false;
   let searchQuery = "";
+  let filteredWebsites = [];
+  let startDate = null;
+  let endDate = null;
 
+  function toggleDarkMode() {
+    dispatch("toggleTheme");
+  }
   async function renameProject() {
     if (activeProject.name === "") {
       // TODO: error modal
       return;
     }
     dispatch("projectRename", {
-      newActiveProjectName: activeProject.name
+      newActiveProjectName: activeProject.name,
     });
   }
 
···
 
   async function deleteWebsite(event) {
     dispatch("websiteDelete", {
-      url: event.detail.url
+      url: event.detail.url,
     });
   }
 
···
 
   function applySearchQuery(node) {
     const results = checkWebsiteForQuery(websites);
-    searchResults = results.map(res => res.item);
+    searchResults = results.map((res) => res.item);
   }
+
+  function handleDateRangeChange(event) {
+    startDate = event.detail.startDate;
+    endDate = event.detail.endDate;
+
+    filteredWebsites = websites.filter((website) => {
+      const websiteDate = new Date(website.savedAt);
+      return websiteDate >= startDate && websiteDate <= endDate;
+    });
+  }
+
+  $: if (websites.length > 0 && filteredWebsites.length === 0) {
+    filteredWebsites = websites;
+  }
+
+  $: websitesToDisplay =
+    searchQuery.length < 3 ? filteredWebsites : searchResults;
 </script>
 
 <div class="timeline">
   <Group position="center">
     <div class="logo-container">
-      <img class="logo" alt="Rabbithole logo" src="../assets/icons/logo.png">
+      <img class="logo" alt="Rabbithole logo" src="../assets/icons/logo.png" />
     </div>
     <div class="input-div">
       <Tooltip {isHovering} label="Click to rename project">
-        <Input id="project-name"
-               icon={Pencil1}
-               variant="unstyled"
-               size="lg"
-               on:click={() => { nameClicked = true; }}
-               on:mouseenter={()=>{isHovering=true}}
-               on:mouseleave={()=>{isHovering=false}}
-               bind:value={activeProject.name}
-               />
+        <Input
+          id="project-name"
+          icon={Pencil1}
+          variant="unstyled"
+          size="lg"
+          on:click={() => {
+            nameClicked = true;
+          }}
+          on:mouseenter={() => {
+            isHovering = true;
+          }}
+          on:mouseleave={() => {
+            isHovering = false;
+          }}
+          bind:value={activeProject.name}
+        />
       </Tooltip>
     </div>
     {#if nameClicked}
-      <Button
-        on:click={renameProject}
-        variant='light'
-        color='blue'
-        >
+      <Button on:click={renameProject} variant="light" color="blue">
         Rename
       </Button>
     {/if}
+    <Button on:click={toggleDarkMode} variant="light" color="gray">
+      {#if isDark}
+        <Sun size="16" />
+      {:else}
+        <Moon size="16" />
+      {/if}
+    </Button>
   </Group>
+
+  <TimelineSlider
+    {websites}
+    {startDate}
+    {endDate}
+    on:dateRangeChange={handleDateRangeChange}
+  />
+
   <div class="feed">
     <div class="search-bar">
       <TextInput
         placeholder="Search"
         bind:value={searchQuery}
         on:input={applySearchQuery}
-        />
+      />
     </div>
     <!-- Following deadgrep's convention of 3 char minimum -->
-    {#if searchQuery.length < 3}
-      {#each websites as site}
-        <TimelineCard website={site} on:websiteDelete={deleteWebsite} />
-      {/each}
-    {:else}
-      {#each searchResults as site}
-        <TimelineCard website={site} on:websiteDelete={deleteWebsite} />
-      {/each}
-    {/if}
+    {#each websitesToDisplay as site}
+      <TimelineCard website={site} on:websiteDelete={deleteWebsite} />
+    {/each}
   </div>
 </div>
 
···
     width: 40vw;
     margin: 0 auto;
     margin-top: 50px;
+    transition:
+      background-color 0.3s ease,
+      color 0.3s ease;
+  }
+
+  .timeline.dark {
+    background-color: #1a1a1a;
+    color: #ffffff;
   }
 
   .input-div {
···
 
   .search-bar {
     width: inherit;
-    margin-x: 20px
+    margin-x: 20px;
   }
 </style>

src/lib/TimelineCard.svelte

···
 <script>
   import { createEventDispatcher } from "svelte";
   import { Button, Card, Group, Image, Text } from "@svelteuidev/core";
-  import { Trash } from 'radix-icons-svelte';
+  import { Trash } from "radix-icons-svelte";
 
   const dispatch = createEventDispatcher();
 
···
 
   async function deleteWebsite() {
     dispatch("websiteDelete", {
-      url: website.url
+      url: website.url,
     });
   }
 </script>
···
     </div>
 
     <Group spacing="xs">
-      <Button variant="light" color="blue" href={website.url} target="_blank" override={{width: "85%"}}>
+      <Button
+        variant="light"
+        color="blue"
+        href={website.url}
+        target="_blank"
+        override={{ width: "85%" }}
+      >
         Open
       </Button>
       <Button
         on:click={deleteWebsite}
         variant="light"
         color="red"
-        override={{width: "10%"}}>
-        <Trash size="30"/>
+        override={{ width: "10%" }}
+      >
+        <Trash size="30" />
       </Button>
     </Group>
   </Card>

src/lib/TimelineSlider.svelte

···
+<script>
+  import { createEventDispatcher, onMount } from "svelte";
+  import { scaleTime } from "d3-scale";
+  import { timeDay } from "d3-time";
+
+  const dispatch = createEventDispatcher();
+
+  export let websites = [];
+  export let startDate = null;
+  export let endDate = null;
+
+  let sliderContainer;
+  let isDragging = false;
+  let dragHandle = null;
+
+  $: if (websites.length > 0) {
+    initializeSlider();
+  }
+
+  function initializeSlider() {
+    if (websites.length === 0) return;
+
+    const dates = websites.map((w) => new Date(w.savedAt));
+    const minDate = new Date(Math.min(...dates));
+    const maxDate = new Date(Math.max(...dates));
+
+    if (!startDate) startDate = minDate;
+    if (!endDate) endDate = maxDate;
+
+    dispatch("dateRangeChange", { startDate, endDate });
+  }
+
+  function handleSliderChange(event) {
+    if (websites.length === 0) return;
+
+    const rect = sliderContainer.getBoundingClientRect();
+    const dates = websites.map((w) => new Date(w.savedAt));
+    const minDate = new Date(Math.min(...dates));
+    const maxDate = new Date(Math.max(...dates));
+
+    const scale = scaleTime().domain([minDate, maxDate]).range([0, rect.width]);
+
+    const x = event.clientX - rect.left;
+    const selectedDate = scale.invert(x);
+
+    if (event.target.classList.contains("start-handle")) {
+      startDate = selectedDate;
+    } else if (event.target.classList.contains("end-handle")) {
+      endDate = selectedDate;
+    }
+
+    dispatch("dateRangeChange", { startDate, endDate });
+  }
+
+  function getWebsitePositions() {
+    if (websites.length === 0 || !sliderContainer) return [];
+
+    const rect = sliderContainer.getBoundingClientRect();
+    const dates = websites.map((w) => new Date(w.savedAt));
+    const minDate = new Date(Math.min(...dates));
+    const maxDate = new Date(Math.max(...dates));
+
+    const scale = scaleTime().domain([minDate, maxDate]).range([0, rect.width]);
+
+    return websites.map((website) => ({
+      ...website,
+      x: scale(new Date(website.savedAt)),
+    }));
+  }
+
+  function getHandlePositions() {
+    if (websites.length === 0 || !sliderContainer || !startDate || !endDate)
+      return { start: 0, end: 0 };
+
+    const rect = sliderContainer.getBoundingClientRect();
+    const dates = websites.map((w) => new Date(w.savedAt));
+    const minDate = new Date(Math.min(...dates));
+    const maxDate = new Date(Math.max(...dates));
+
+    const scale = scaleTime().domain([minDate, maxDate]).range([0, rect.width]);
+
+    return {
+      start: scale(startDate),
+      end: scale(endDate),
+    };
+  }
+
+  $: websitePositions = getWebsitePositions();
+  $: handlePositions = getHandlePositions();
+</script>
+
+<div class="timeline-container">
+  <div
+    class="timeline-slider"
+    bind:this={sliderContainer}
+    on:click={handleSliderChange}
+  >
+    <div class="slider-track"></div>
+
+    <!-- Website icons -->
+    {#each websitePositions as website}
+      <div
+        class="website-icon"
+        style="left: {website.x}px"
+        title="{website.name} - {new Date(
+          website.savedAt,
+        ).toLocaleDateString()}"
+      >
+        {#if website.faviconUrl}
+          <img src={website.faviconUrl} alt={website.name} />
+        {:else}
+          <div class="default-icon">•</div>
+        {/if}
+      </div>
+    {/each}
+
+    <!-- Range selection -->
+    <div
+      class="range-selection"
+      style="left: {handlePositions.start}px; width: {handlePositions.end -
+        handlePositions.start}px"
+    ></div>
+
+    <!-- Handles -->
+    <div
+      class="slider-handle start-handle"
+      style="left: {handlePositions.start}px"
+      on:click={handleSliderChange}
+    ></div>
+    <div
+      class="slider-handle end-handle"
+      style="left: {handlePositions.end}px"
+      on:click={handleSliderChange}
+    ></div>
+  </div>
+
+  <!-- Date labels -->
+  <div class="date-labels">
+    <span>{startDate ? startDate.toLocaleDateString() : ""}</span>
+    <span>{endDate ? endDate.toLocaleDateString() : ""}</span>
+  </div>
+</div>
+
+<style>
+  .timeline-container {
+    margin: 20px 0;
+    width: 100%;
+  }
+
+  .timeline-slider {
+    position: relative;
+    height: 60px;
+    width: 100%;
+    background: #f5f5f5;
+    border-radius: 8px;
+    cursor: pointer;
+  }
+
+  .slider-track {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: #ddd;
+    transform: translateY(-50%);
+  }
+
+  .website-icon {
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 16px;
+    height: 16px;
+    z-index: 2;
+  }
+
+  .website-icon img {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+  }
+
+  .default-icon {
+    width: 100%;
+    height: 100%;
+    background: #007bff;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 8px;
+  }
+
+  .range-selection {
+    position: absolute;
+    top: 50%;
+    height: 8px;
+    background: rgba(0, 123, 255, 0.3);
+    transform: translateY(-50%);
+    z-index: 1;
+  }
+
+  .slider-handle {
+    position: absolute;
+    top: 50%;
+    width: 20px;
+    height: 20px;
+    background: #007bff;
+    border: 2px solid white;
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    cursor: grab;
+    z-index: 3;
+  }
+
+  .slider-handle:active {
+    cursor: grabbing;
+  }
+
+  .date-labels {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 10px;
+    font-size: 12px;
+    color: #666;
+  }
+</style>

src/lib/UpdatingComponent.svelte

···
 <script>
-  import { Button, Group } from '@svelteuidev/core';
-  import { CheckCircled, CrossCircled } from 'radix-icons-svelte';
+  import { Button, Group } from "@svelteuidev/core";
+  import { CheckCircled, CrossCircled } from "radix-icons-svelte";
 
   export let success, fail;
   export let successMsg, failMsg;
···
   </div>
   {#if success}
     <div class="child">
-      <span class="success"><CheckCircled size="20"/></span>
+      <span class="success"><CheckCircled size="20" /></span>
     </div>
     <div>
       <span class="success">{successMsg}</span>
···
   {/if}
   {#if fail}
     <div class="child">
-      <span class="fail"><CrossCircled size="20"/></span>
+      <span class="fail"><CrossCircled size="20" /></span>
     </div>
     <div>
-      <span class="fail">{ failMsg }</span>
+      <span class="fail">{failMsg}</span>
     </div>
   {/if}
 </div>

src/newtab/index.ts

···
-import Rabbithole from "src/lib/Rabbithole.svelte"
+import Rabbithole from "src/lib/Rabbithole.svelte";
 
 // global styles
 import "./styles.css";

src/newtab/styles.css

···
 body {
-
 }
 
 #project-name {

src/storage/db.ts

···
-import { v4 as uuid } from 'uuid';
+import { v4 as uuid } from "uuid";
 
 const version = 3;
 
···
   faviconUrl: string;
   openGraphImageUrl?: string;
   description?: string;
-};
+}
 
 export interface Project {
   id: string; // key
···
   private async getDb(): Promise<IDBDatabase> {
     return new Promise((resolve, reject) => {
       if (this.db !== null) {
-        resolve(this.db)
+        resolve(this.db);
         return;
       }
-      let request = this.factory.open('rabbithole', version);
+      let request = this.factory.open("rabbithole", version);
       request.onsuccess = () => {
         const db = request.result;
         db.onerror = (event) => {
···
       request.onerror = () => {
         console.error("Please allow Rabbithole to use storage!");
         reject(new Error("Insufficient permissions"));
-      }
+      };
     });
   }
 
···
   static async init(factory: IDBFactory): Promise<void> {
     await new Promise((resolve, reject) => {
       if (factory === undefined) {
-        console.error("This browser doesn't support Rabbithole! You should uninstall it :(");
+        console.error(
+          "This browser doesn't support Rabbithole! You should uninstall it :(",
+        );
         reject(new Error("indexedDB not supported"));
       } else {
-        let request = factory.open('rabbithole', version);
+        let request = factory.open("rabbithole", version);
         request.onerror = (e) => {
           console.error(e);
           console.error("Please allow Rabbithole to use storage!");
           reject(new Error("Insufficient permissions"));
-        }
+        };
 
         // This event is only implemented in recent browsers
         request.onupgradeneeded = (event) => {
           const db = event.target.result;
           if (event.oldVersion < 1) {
-            const objectStore = db.createObjectStore("savedWebsites", { keyPath: "url" });
+            const objectStore = db.createObjectStore("savedWebsites", {
+              keyPath: "url",
+            });
             objectStore.createIndex("name", "name", { unique: false });
             objectStore.createIndex("url", "url", { unique: true });
-            objectStore.transaction.oncomplete = () => { };
+            objectStore.transaction.oncomplete = () => {};
           }
           if (event.oldVersion < 2) {
             db.createObjectStore("user", { keyPath: "id" });
           }
           if (event.oldVersion < 3) {
-            const objectStore = db.createObjectStore("projects", { keyPath: "id" });
+            const objectStore = db.createObjectStore("projects", {
+              keyPath: "id",
+            });
             objectStore.createIndex("name", "name", { unique: true });
           }
 
···
               id: uuid(),
               settings: {
                 show: true,
-                alignment: "right"
+                alignment: "right",
               },
               currentProject: null,
             };
-            const userRequest = db.transaction(["user"], "readwrite")
+            const userRequest = db
+              .transaction(["user"], "readwrite")
               .objectStore("user")
               .add(newUser);
             userRequest.onsuccess = async () => {
               await store.createNewActiveProject("Default project");
-            }
+            };
             return;
           }
 
-          if (!("currentProject" in user) || user.currentProject === null
-            || user.currentProject === undefined) {
+          if (
+            !("currentProject" in user) ||
+            user.currentProject === null ||
+            user.currentProject === undefined
+          ) {
             await store.createNewActiveProject("Default project");
           }
-        }
+        };
       }
     });
   }
 
   // also adds website to savedWebsites if it isn't there already
-  async saveWebsiteToProject(items: Website[]): Promise<Website | { alreadySaved: boolean }[]> {
+  async saveWebsiteToProject(
+    items: Website[],
+  ): Promise<Website | { alreadySaved: boolean }[]> {
     return new Promise(async (resolve, reject) => {
       let db: IDBDatabase;
       try {
         db = await this.getDb();
       } catch (err) {
-        reject(err)
+        reject(err);
       }
 
       // update website list of active project
···
         }
       }
 
-      const projectRequest = db.transaction(["projects"], "readwrite")
+      const projectRequest = db
+        .transaction(["projects"], "readwrite")
         .objectStore("projects")
         .put(currentProject);
 
       projectRequest.onsuccess = (event) => {
         const tx = db.transaction(["savedWebsites"], "readwrite");
-        items.forEach(item => tx
-          .objectStore("savedWebsites")
-          .add(item));
+        items.forEach((item) => tx.objectStore("savedWebsites").add(item));
 
         tx.oncomplete = async () => {
           console.log(`store item success`);
···
 
         tx.onerror = (event) => {
           // ignore error if website is stored already
-          if (!(event.target.error.message.indexOf("exists"))) {
+          if (!event.target.error.message.indexOf("exists")) {
             reject(new Error(event.target.error));
           }
         };
 
         console.log(`store item success`);
         resolve(items);
-      }
+      };
 
       projectRequest.onerror = (event) => {
         // ignore error if website is stored already
-        if (!(event.target.error.message.indexOf("exists"))) {
+        if (!event.target.error.message.indexOf("exists")) {
           console.log(`store item error`);
-          console.log(event.target)
+          console.log(event.target);
           reject(new Error(event.target.error));
         }
       };
     });
   }
 
-  async deleteWebsiteFromProject(projectId: string, url: string): Promise<void> {
+  async deleteWebsiteFromProject(
+    projectId: string,
+    url: string,
+  ): Promise<void> {
     return new Promise(async (resolve, reject) => {
       let db: IDBDatabase;
       try {
         db = await this.getDb();
       } catch (err) {
-        reject(err)
+        reject(err);
       }
 
       // update website list of active project
···
         return w !== url;
       });
 
-      const projectRequest = db.transaction(["projects"], "readwrite")
+      const projectRequest = db
+        .transaction(["projects"], "readwrite")
         .objectStore("projects")
         .put(project);
 
       projectRequest.onsuccess = (event) => {
         console.log(`delete item success`);
         resolve();
-      }
+      };
 
       projectRequest.onerror = (event) => {
         // ignore error if website is stored already
-        if (!(event.target.error.message.indexOf("exists"))) {
+        if (!event.target.error.message.indexOf("exists")) {
           console.log(`store item error`);
-          console.log(event.target)
+          console.log(event.target);
           reject(new Error(event.target.error));
         }
       };
···
       try {
         db = await this.getDb();
       } catch (err) {
-        reject(err)
+        reject(err);
       }
-      const request = db.transaction(["savedWebsites"])
+      const request = db
+        .transaction(["savedWebsites"])
         .objectStore("savedWebsites")
         .get(url);
 
···
       try {
         db = await this.getDb();
       } catch (err) {
-        reject(err)
+        reject(err);
       }
-      const request = db.transaction(["savedWebsites"])
+      const request = db
+        .transaction(["savedWebsites"])
         .objectStore("savedWebsites")
         .getAll();
 
···
       try {
         db = await this.getDb();
       } catch (err) {
-        reject(err)
+        reject(err);
       }
 
       // update website list of active project
       let project = await this.getProject(projectId);
       project.name = newName;
 
-      const projectRequest = db.transaction(["projects"], "readwrite")
+      const projectRequest = db
+        .transaction(["projects"], "readwrite")
         .objectStore("projects")
         .put(project);
 
       projectRequest.onsuccess = (event) => {
         console.log(`rename project success`);
         resolve(project);
-      }
+      };
 
       projectRequest.onerror = (event) => {
         console.log(`rename project error`);
-        console.log(event.target)
+        console.log(event.target);
         reject(new Error(event.target.error));
       };
     });
···
       try {
         db = await this.getDb();
       } catch (err) {
-        reject(err)
+        reject(err);
       }
 
-      const projectRequest = db.transaction(["projects"], "readwrite")
+      const projectRequest = db
+        .transaction(["projects"], "readwrite")
         .objectStore("projects")
         .delete(projectId);
 
···
         console.log(`delete project success`);
         // replace active project
         const projects = await this.getAllProjects();
-        await this.changeActiveProject(projects[0].id)
+        await this.changeActiveProject(projects[0].id);
         resolve(projects[0]);
-      }
+      };
 
       projectRequest.onerror = (event) => {
         console.log(`rename project error`);
-        console.log(event.target)
+        console.log(event.target);
         reject(new Error(event.target.error));
       };
     });
···
       try {
         db = await this.getDb();
       } catch (err) {
-        reject(err)
+        reject(err);
       }
 
       let user = await this.getUser();
       user.settings = settings;
 
-      const request = db.transaction(["user"], "readwrite")
+      const request = db
+        .transaction(["user"], "readwrite")
         .objectStore("user")
         .put(user);
 
···
       try {
         db = await this.getDb();
       } catch (err) {
-        reject(err)
+        reject(err);
       }
-      const request = db.transaction(["user"])
-        .objectStore("user")
-        .getAll();
+      const request = db.transaction(["user"]).objectStore("user").getAll();
 
       request.onsuccess = (_) => {
         const [user] = request.result;
···
       try {
         db = await this.getDb();
       } catch (err) {
-        reject(err)
+        reject(err);
       }
-      const request = db.transaction(["user"])
-        .objectStore("user")
-        .getAll();
+      const request = db.transaction(["user"]).objectStore("user").getAll();
 
       request.onsuccess = (_) => {
         const [user] = request.result;
···
       try {
         db = await this.getDb();
       } catch (err) {
-        reject(err)
+        reject(err);
       }
-      const userRequest = db.transaction(["user"])
-        .objectStore("user")
-        .getAll();
+      const userRequest = db.transaction(["user"]).objectStore("user").getAll();
 
       userRequest.onsuccess = (_) => {
         const [user] = userRequest.result;
-        const projectRequest = db.transaction(["projects"], "readwrite")
+        const projectRequest = db
+          .transaction(["projects"], "readwrite")
           .objectStore("projects")
           .get(user.currentProject);
 
···
           const project = projectRequest.result;
           console.log("getProject success");
           resolve(project);
-        }
+        };
 
         projectRequest.onerror = (event) => {
           console.log(`getProject error: ${event.target}`);
           reject(new Error("Failed to retrieve settings"));
-        }
+        };
       };
 
       userRequest.onerror = (event) => {
···
       try {
         db = await this.getDb();
       } catch (err) {
-        reject(err)
+        reject(err);
       }
-      const request = db.transaction(["projects"])
+      const request = db
+        .transaction(["projects"])
         .objectStore("projects")
         .getAll();
 
···
       try {
         db = await this.getDb();
       } catch (err) {
-        reject(err)
+        reject(err);
       }
-      const request = db.transaction(["projects"])
+      const request = db
+        .transaction(["projects"])
         .objectStore("projects")
         .get(projectId);
 
···
       try {
         db = await this.getDb();
       } catch (err) {
-        reject(err)
+        reject(err);
       }
-      const userRequest = db.transaction(["user"])
-        .objectStore("user")
-        .getAll();
+      const userRequest = db.transaction(["user"]).objectStore("user").getAll();
 
       userRequest.onsuccess = async () => {
         const [user] = userRequest.result;
         user.currentProject = projectId;
 
-        const userPutRequest = db.transaction(["user"], "readwrite")
+        const userPutRequest = db
+          .transaction(["user"], "readwrite")
           .objectStore("user")
           .put(user);
 
         userPutRequest.onsuccess = () => {
           console.log("changeActiveProject success");
           resolve();
-        }
+        };
 
         userPutRequest.onerror = (event) => {
           console.log(`changeActiveProject error: ${event.target}`);
           reject(new Error("Failed to retrieve settings"));
-        }
+        };
       };
 
       userRequest.onerror = (event) => {
···
   }
 
   // create new project and set it as user's active project
-  async createNewActiveProject(projectName: string, savedWebsites?: string[])
-    : Promise<Project> {
+  async createNewActiveProject(
+    projectName: string,
+    savedWebsites?: string[],
+  ): Promise<Project> {
     return new Promise(async (resolve, reject) => {
       const db = await this.getDb();
       const user = await this.getUser();
···
       // FIXME: when rabbithole is installed, the first time a session is saved
       // the website list is duplicated, so dedup here for now
       // Also see how else this can be repro'd
-      const projectReq = db.transaction(["projects"], "readwrite")
+      const projectReq = db
+        .transaction(["projects"], "readwrite")
         .objectStore("projects")
         .put(project);
 
···
           });
 
         resolve(project);
-      }
+      };
 
       projectReq.onerror = (event) => {
         console.log(`getAll error: ${event.target}`);
         reject(new Error("Failed to retrieve items"));
-      }
+      };
     });
   }
 }

src/utils.ts

···
 export const NotificationDuration = 1500;
 
 export async function getOrderedProjects(): Promise<Project[]> {
-  let projects = await chrome.runtime.sendMessage({ type: MessageRequest.GET_ALL_PROJECTS });
-  const activeProject = await chrome.runtime.sendMessage({ type: MessageRequest.GET_ACTIVE_PROJECT });
-
+  let projects = await chrome.runtime.sendMessage({
+    type: MessageRequest.GET_ALL_PROJECTS,
+  });
+  const activeProject = await chrome.runtime.sendMessage({
+    type: MessageRequest.GET_ACTIVE_PROJECT,
+  });
 
   for (let i = 0; i < projects.length; i++) {
     if (projects[i].name === activeProject.name) {
···
   }
   projects.sort((a, b) => a.name.localeCompare(b.name));
   projects.unshift(activeProject);
-  return projects
+  return projects;
 }