fix: background migration not working properly

src/manifests/manifest.json

@@ -40,6 +40,10 @@
     {
       "resources": ["resources/icons/*"],
       "matches": ["*://*/*"]
+    },
+    {
+      "resources": ["seqta/utils/migration/migrate.html"],
+      "matches": ["*://*/*"]
     }
   ]
 }

src/seqta/utils/migration/migration-iframe.ts

@@ -44,7 +44,23 @@ const getSelectedBackground = (): string | null => {
 const startMigration = async () => {
   try {
     console.info('Starting background extraction...');
-    const backgrounds = await getAllBackgrounds();
+    let backgrounds: Data[];
+    try {
+      backgrounds = await getAllBackgrounds();
+      if (!backgrounds || backgrounds.length === 0) {
+        console.info('No backgrounds to migrate');
+        window.parent.postMessage({ type: 'MIGRATION_COMPLETE' }, '*');
+        return;
+      }
+    } catch (error: any) {
+      if (error.name === 'NotFoundError' && error.message.includes('object stores was not found')) {
+        console.info('No backgrounds to migrate: object store not found');
+        window.parent.postMessage({ type: 'MIGRATION_COMPLETE' }, '*');
+        return;
+      }
+      console.error('Error fetching backgrounds:', error);
+      throw new Error('Failed to fetch backgrounds');
+    }
     const selectedBackground = getSelectedBackground();
     console.info(`Found ${backgrounds.length} backgrounds`);
 

tailwind.config.js

@@ -1,17 +1,10 @@
-const {
+import flattenColorPalette from "tailwindcss/lib/util/flattenColorPalette";
-  default: flattenColorPalette,
-} = require("tailwindcss/lib/util/flattenColorPalette");
 
 /** @type {import('tailwindcss').Config} */
 export default {
   content: [
     "./src/**/*.{js,ts,jsx,tsx,html,svelte}",
   ],
-  //safelist: [
-    //{
-    //  pattern: / */,
-    //}
-  //],
   darkMode: "class",
   theme: {
     fontSize: {