Improve UX by showing a fallback screen to handle empty or insufficie…

.gitignore

@@ -705,3 +705,4 @@ fabric.properties
 # Exclude web-ext build artifacts
 /web-ext-artifacts/
 /*.zip
+.DS_Store

package.json

@@ -10,7 +10,7 @@
     "dev": "webpack --mode development",
     "build": "webpack --mode production",
     "test": "jest --env=jsdom",
-    "build:ext": "npm run build && web-ext build --source-dir ./dist/"
+    "build:ext": "npm run build && web-ext build --overwrite-dest --source-dir ./dist/"
   },
   "repository": {
     "type": "git",

src/background/background.js

@@ -8,7 +8,23 @@
  */
 
 import { initDB } from './initdb.js';
-import handlers       from './handlers/index.js';
+import handlers from './handlers/index.js'; // Keep the default import for window assignment
+
+// Destructure the specific handlers needed for the message listener
+const {
+  fetchAndStoreHistory,
+  getMostVisitedSites,
+  getVisitsPerHour,
+  getLabelCounts,
+  //getTimeSpentPerSite, 
+  getCategoryTrends,
+  getCOCounts,
+  getDailyVisitCounts,
+  getRecencyFrequency,
+  getTransitionPatterns,
+  getUniqueWebsites
+} = handlers;
+
 
 /**
  * Initialize the extension’s database on startup.
@@ -54,10 +70,11 @@ browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
     return true;
   }
 
-  if (action === "getTimeSpentPerSite") {
-    getTimeSpentPerSite(days, limit).then(sendResponse);
-    return true;
-  }
+  // Note: 'getTimeSpentPerSite' is not defined in handlers/index.js
+  // if (action === "getTimeSpentPerSite") {
+  //   getTimeSpentPerSite(days, limit).then(sendResponse);
+  //   return true;
+  // }
 
   if (action === "getCategoryTrends") {
     getCategoryTrends(days).then(sendResponse);
@@ -91,19 +108,5 @@ browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
 
   console.warn("[Background] No handler for action:", action);
   sendResponse(null);
-  return true;
+  return true; // Keep true here for async sendResponse
 });
-
-
-/**
- * Expose background handler functions on the global `window` object.
- *
- * This allows you to call e.g.
- * ```
- * getMostVisitedSites(7).then(console.log)
- * ```
- * directly from the console for debugging or ad‐hoc testing.
- *
- * @type {Object.<string, Function>}
- */
-Object.assign(window, handlers);

src/background/services/ml.js

@@ -110,7 +110,7 @@ export async function classifyURLAndTitle(
   console.log('ML classify:', textToClassify);
   const result = await mlApi.runEngine({
     args: [textToClassify],
-    options: { top_k: null },
+    options: { top_k: null }, // mutli-label classification we apply threshold later this might be better at 2
   });
 
   const mapped = result

src/manifest.json

@@ -18,7 +18,7 @@
     "scripts": [
       "background.js"
     ],
-    "persistent": false 
+    "persistent": true
   },
   "browser_action": {
     "default_popup": "popup.html",
@@ -34,5 +34,10 @@
   "web_accessible_resources": [
     "recap.html"
   ],
+  "browser_specific_settings": {
+    "gecko": {
+      "id": "[email protected]"
+    }
+  },
   "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'; connect-src https://big.oisd.nl blob:;"
 }

src/popup/SlideShow.jsx

@@ -17,11 +17,13 @@ const safeCallBackground = async (action, payload = {}) => {
   }
 };
 
+
 const SlideShow = ({ setView, timeRange }) => {
   const [slides, setSlides] = useState([]);
   const [index, setIndex] = useState(0);
   const [loading, setLoading] = useState(true);
   const [progress, setProgress] = useState(0);
+  const [notEnoughData, setNotEnoughData] = useState(false);
   const videoRef = useRef(null);
 
   const backgroundVideos = [
@@ -81,6 +83,16 @@ const SlideShow = ({ setView, timeRange }) => {
       });
 
       const totalUnique = await safeCallBackground("getUniqueWebsites", { days });
+
+      // see if theres any data, if not skip slides
+      if (!totalUnique || totalUnique === 0) {
+        console.log("[SlideShow] Not enough data (totalUnique=0).");
+        setNotEnoughData(true);
+        setLoading(false);
+        setProgress(100);
+        return;
+      }
+
       slides.push({
         id: 'totalWebsites',
         video: videos[2],
@@ -179,12 +191,12 @@ const SlideShow = ({ setView, timeRange }) => {
         video: videos[7],
         prompt: pickPrompt("recapOutro", { x: timeRangeMap[timeRange] })
       });
-
       setSlides(slides);
+      setNotEnoughData(false);
       setLoading(false);
       setProgress(100);
     };
-
+  
     loadSlides();
   }, [timeRange]);
 
@@ -207,11 +219,14 @@ const SlideShow = ({ setView, timeRange }) => {
   }, [index]);
 
   useEffect(() => {
+    if (loading || notEnoughData) return;
+
     const timer = setTimeout(() => {
       setIndex(prev => (prev < slides.length - 1 ? prev + 1 : prev));
     }, 5000);
+
     return () => clearTimeout(timer);
-  }, [index, slides.length]);
+  }, [index, slides.length, loading, notEnoughData]);
 
   // 🚀 LOADING SCREEN while slides are being fetched
   if (loading || progress < 100) {
@@ -244,6 +259,15 @@ const SlideShow = ({ setView, timeRange }) => {
     );
   }
 
+  if (notEnoughData) {
+    return (
+      <div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', padding: '2rem', boxSizing: 'border-box' }}>
+        <h1 style={{ color: '#fff', textAlign: 'center', marginTop: '35vh' }}>Not enough browsing history yet. Your recap will be ready once you’ve explored a bit more!</h1>
+    </div>
+    );
+  }
+
+
   // 🚀 SLIDESHOW UI after loading
   return (
     <div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }}>