Refac: theme modal and header components

src/svelte-interface/+layout.svel

@@ -1,19 +0,0 @@
-<script lang="ts">
-  // @ts-expect-error - svelte-hash-router is not typed
-  import Router from 'svelte-hash-router'
-  import browser from 'webextension-polyfill';
-
-  const style = document.createElement("style");
-  style.setAttribute("type", "text/css");
-  style.innerHTML = `
-  @font-face {
-    font-family: 'IconFamily';
-    src: url('${browser.runtime.getURL('resources/fonts/IconFamily.woff')}') format('woff'),
-         url('${browser.runtime.getURL('resources/fonts/IconFamily.woff2')}') format('woff2');
-    font-weight: normal;
-    font-style: normal;
-  }`;
-  document.head.appendChild(style);
-</script>
-
-<Router />

src/svelte-interface/components/TabbedContainer.svelte

@@ -72,7 +72,7 @@
     >
       <div class="flex">
         {#each tabs as { Content, props }, index}
-          <div class="absolute focus:outline-none w-full h-full transition-opacity duration-300 overflow-y-scroll no-scrollbar tab {activeTab === index ? 'opacity-100 active' : 'opacity-0'}"
+          <div class="absolute focus:outline-none w-full transition-opacity duration-300 overflow-y-scroll no-scrollbar h-full tab {activeTab === index ? 'opacity-100 active' : 'opacity-0'}"
             style="left: {index * 100}%;">
              <Content {...props} />
           </div>

src/svelte-interface/components/store/Header.svelte

@@ -5,7 +5,13 @@
   import browser from 'webextension-polyfill';
 
   // Props
-  let { searchTerm, setSearchTerm, darkMode } = $props<{ searchTerm: string, setSearchTerm: (term: string) => void, darkMode: boolean }>();
+  let { searchTerm, setSearchTerm, darkMode, activeTab, setActiveTab } = $props<{
+    searchTerm: string,
+    setSearchTerm: (term: string) => void,
+    darkMode: boolean,
+    activeTab: string,
+    setActiveTab: (tab: string) => void
+  }>();
 
   // Clear search input function
   const clearSearch = () => {
@@ -21,7 +27,18 @@
 
       <div class="w-[1px] h-10 my-auto bg-zinc-400 dark:bg-zinc-600"></div>
 
-      <h1 class="text-xl font-semibold">Theme Store</h1>
+      <button
+        class="px-4 py-2 font-semibold text-lg transition-colors duration-200 {activeTab === 'themes' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400'}"
+        onclick={() => setActiveTab('themes')}
+      >
+        Themes
+      </button>
+      <button
+        class="px-4 py-2 font-semibold text-lg transition-colors duration-200 {activeTab === 'backgrounds' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400'}"
+        onclick={() => setActiveTab('backgrounds')}
+      >
+        Backgrounds
+      </button>
     </div>
 
     <div class="relative flex gap-2">

src/svelte-interface/components/store/ThemeModal.svelte

@@ -60,7 +60,7 @@
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div
     bind:this={modalElement}
-    class="w-full max-w-[50%] h-[95%] p-4 bg-white rounded-t-2xl dark:bg-zinc-800 overflow-scroll no-scrollbar cursor-auto" 
+    class="w-full max-w-[600px] h-[95%] p-4 bg-white rounded-t-2xl dark:bg-zinc-800 overflow-scroll no-scrollbar cursor-auto" 
     onclick={(e) => e.stopPropagation()}
     onkeydown={(e) => e.stopPropagation()}
   >

src/svelte-interface/pages/store.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   
-  // Import child components
+  // Import existing components
   import CoverSwiper from '../components/store/CoverSwiper.svelte';
   import ThemeGrid from '../components/store/ThemeGrid.svelte';
   import SkeletonLoader from '../components/SkeletonLoader.svelte';
@@ -16,14 +16,26 @@
   import { getAvailableThemes } from '@/seqta/ui/themes/getAvailableThemes'
   import { themeUpdates } from '../hooks/ThemeUpdates'
 
+  // Import background-related functions and components
+  import { hasEnoughStorageSpace, isIndexedDBSupported, writeData, openDatabase, readAllData, deleteData } from '@/svelte-interface/hooks/BackgroundDataLoader'
+  import BackgroundUploader from '../components/themes/BackgroundUploader.svelte';
+  import BackgroundItem from '../components/themes/BackgroundItem.svelte'
+  import { loadBackground } from '@/seqta/ui/ImageBackgrounds'
+
   // State variables
-  let searchTerm = $state<string>('');
+  let searchTerm = $state('');
   let themes = $state<Theme[]>([]);
   let coverThemes = $state<Theme[]>([]);
-  let loading = $state<boolean>(true);
+  let loading = $state(true);
-  let darkMode = $state<boolean>(false);
+  let darkMode = $state(false);
   let displayTheme = $state<Theme | null>(null);
   let currentThemes = $state<string[]>([]);
+  let activeTab = $state('themes');
+  
+  // Background-related state
+  let backgrounds = $state<{ id: string; type: string; blob: Blob | null; url?: string }[]>([]);
+  let error = $state<string | null>(null);
+  let selectedBackground = $state<string | null>(null);
 
   const fetchCurrentThemes = async () => {
     const themes = await getAvailableThemes();
@@ -38,6 +50,14 @@
     searchTerm = term;
   };
 
+  const setActiveTab = (tab: string) => {
+    activeTab = tab;
+  };
+
+  async function getTheme() {
+    return localStorage.getItem('selectedBackground');
+  }
+
   // Fetch themes and initialize app
   const fetchThemes = async () => {
     try {
@@ -56,13 +76,123 @@
     }
   };
 
+  // Background-related functions
+  async function handleFileChange(file: File): Promise<void> {
+    if (!file) return;
+
+    try {
+      if (!isIndexedDBSupported()) {
+        throw new Error("Your browser doesn't support IndexedDB. Unable to save backgrounds.");
+      }
+
+      const hasSpace = await hasEnoughStorageSpace(file.size);
+      if (!hasSpace) {
+        throw new Error("Not enough storage space to save this background.");
+      }
+
+      const fileId = `${Date.now()}-${file.name}`;
+      const fileType = file.type.split('/')[0];
+      const blob = new Blob([file], { type: file.type });
+
+      await writeData(fileId, fileType, blob);
+      backgrounds = [...backgrounds, { id: fileId, type: fileType, blob, url: URL.createObjectURL(blob) }];
+    } catch (e) {
+      if (e instanceof Error) {
+        error = e.message;
+      } else {
+        error = 'An unknown error occurred';
+      }
+    }
+  }
+
+  async function loadBackgroundMetadata(): Promise<void> {
+    try {
+      error = null;
+
+      if (!isIndexedDBSupported()) {
+        throw new Error("Your browser doesn't support IndexedDB. Unable to load backgrounds.");
+      }
+
+      await openDatabase();
+      const data = await readAllData();
+      selectedBackground = await getTheme();
+      
+      // Only load metadata (id and type) for placeholders
+      backgrounds = data.map(({ id, type }) => ({ id, type, blob: null }));
+    } catch (e) {
+      if (e instanceof Error) {
+        error = e.message;
+      } else {
+        error = 'An unknown error occurred';
+      }
+    }
+  }
+
+  async function loadFullBackgrounds(): Promise<void> {
+    try {
+      error = null;
+
+      if (!isIndexedDBSupported()) {
+        throw new Error("Your browser doesn't support IndexedDB. Unable to load backgrounds.");
+      }
+
+      const data = await readAllData();
+      backgrounds = await preloadBackgrounds(data);
+    } catch (e) {
+      if (e instanceof Error) {
+        error = e.message;
+      } else {
+        error = 'An unknown error occurred';
+      }
+    }
+  }
+
+  async function preloadBackgrounds(data: { id: string; type: string; blob: Blob }[]): Promise<{ id: string; type: string; blob: Blob; url: string }[]> {
+    return data.map(bg => ({
+      ...bg,
+      url: URL.createObjectURL(bg.blob)
+    }));
+  }
+
+  function selectBackground(fileId: string): void {
+    if (selectedBackground === fileId) {
+      selectNoBackground();
+      return;
+    }
+    
+    selectedBackground = fileId;
+    setTheme(fileId);
+  }
+
+  async function deleteBackground(fileId: string): Promise<void> {
+    try {
+      await deleteData(fileId);
+      backgrounds = backgrounds.filter(bg => bg.id !== fileId);
+
+      if (selectedBackground === fileId) {
+        selectNoBackground();
+      }
+    } catch (e) {
+      if (e instanceof Error) {
+        error = `Failed to delete background: ${e.message}`;
+      } else {
+        error = 'An unknown error occurred';
+      }
+    }
+  }
+
+  function selectNoBackground() {
+    selectedBackground = null;
+    setTheme('');
+  }
+
   // On mount
   onMount(async () => {
     await fetchThemes();
     await fetchCurrentThemes();
+    await loadBackgroundMetadata();
     
     darkMode = (await browser.storage.local.get('DarkMode')).DarkMode === 'true';
-
     darkMode = $settingsState.DarkMode;
   });
 
@@ -71,44 +201,102 @@
     theme.name.toLowerCase().includes(searchTerm.toLowerCase()) || 
     theme.description.toLowerCase().includes(searchTerm.toLowerCase())
   ));
+
+  let imageBackgrounds = $derived(backgrounds.filter(bg => bg.type === 'image'));
+  let videoBackgrounds = $derived(backgrounds.filter(bg => bg.type === 'video'));
+
+  $effect(() => {
+    loadBackground();
+    selectedBackground
+  });
+
+  $effect(() => {
+    if (error) {
+      console.error(error);
+    }
+  });
 </script>
 
-<div class="w-screen h-screen bg-white pt-[4.25rem] {darkMode ? 'dark' : ''}">
+<div class="w-screen h-screen bg-white {darkMode ? 'dark' : ''}">
-  <div class="h-full overflow-y-scroll bg-zinc-200/50 dark:bg-zinc-900 dark:text-white">
+  <div class="h-full overflow-y-scroll bg-zinc-200/50 dark:bg-zinc-900 dark:text-white pt-[4.25rem]">
-    <Header searchTerm={searchTerm} setSearchTerm={setSearchTerm} darkMode={darkMode} />
+    <Header {searchTerm} {setSearchTerm} {darkMode} {activeTab} {setActiveTab} />
     
-    <div class="px-12 pt-12">
+    <div class="px-12 pt-6">
       <!-- Loading State -->
       {#if loading}
         <div class="grid grid-cols-1 gap-4 py-12 mx-auto sm:grid-cols-2 lg:grid-cols-3">
           <SkeletonLoader width="100%" height="200px" />
         </div>
       {:else}
-  
+        <!-- Themes Tab Content -->
+        {#if activeTab === 'themes'}
           {#if searchTerm === ''}
-          <CoverSwiper coverThemes={coverThemes} setDisplayTheme={setDisplayTheme} />
+            <CoverSwiper {coverThemes} {setDisplayTheme} />
           {/if}
     
           <!-- ThemeGrid to display filtered themes -->
-        <ThemeGrid themes={filteredThemes} searchTerm={searchTerm} setDisplayTheme={setDisplayTheme} />
+          <ThemeGrid themes={filteredThemes} {searchTerm} {setDisplayTheme} />
     
           {#if displayTheme}
-          <ThemeModal currentThemes={currentThemes} allThemes={themes} theme={displayTheme} displayTheme={displayTheme} setDisplayTheme={setDisplayTheme} onInstall={async () => {
+            <ThemeModal
+              currentThemes={currentThemes}
+              allThemes={themes}
+              theme={displayTheme}
+              {displayTheme}
+              {setDisplayTheme}
+              onInstall={async () => {
                 if (displayTheme) {
                   await StoreDownloadTheme({themeContent: displayTheme})
-              // @ts-ignore
                   setTheme(displayTheme.id);
                   themeUpdates.triggerUpdate();
                   await fetchCurrentThemes();
                 }
-          }} onRemove={async () => {
+              }}
+              onRemove={async () => {
                 if (displayTheme?.id) {
                   console.debug('deleting theme', displayTheme.id);
                   deleteTheme(displayTheme.id)
                   themeUpdates.triggerUpdate();
                   await fetchCurrentThemes();
                 }
-          }} />
+              }}
+            />
+          {/if}
+        {:else if activeTab === 'backgrounds'}
+          <!-- Backgrounds Tab Content -->
+          <div class="space-y-6">
+            <div>
+              <h2 class="mb-4 text-lg font-bold">Background Images</h2>
+              <div class="flex flex-wrap gap-4 mb-4">
+                <BackgroundUploader on:fileChange={e => handleFileChange(e.detail)} />
+                {#each imageBackgrounds as bg (bg.id)}
+                  <BackgroundItem
+                    {bg}
+                    isSelected={selectedBackground === bg.id}
+                    isEditMode={false}
+                    onClick={() => selectBackground(bg.id)}
+                    onDelete={() => deleteBackground(bg.id)}
+                  />
+                {/each}
+              </div>
+            </div>
+            
+            <div>
+              <h2 class="mb-4 text-lg font-bold">Background Videos</h2>
+              <div class="flex flex-wrap gap-4">
+                <BackgroundUploader on:fileChange={e => handleFileChange(e.detail)} />
+                {#each videoBackgrounds as bg (bg.id)}
+                  <BackgroundItem
+                    {bg}
+                    isSelected={selectedBackground === bg.id}
+                    isEditMode={false}
+                    onClick={() => selectBackground(bg.id)}
+                    onDelete={() => deleteBackground(bg.id)}
+                  />
+                {/each}
+              </div>
+            </div>
+          </div>
         {/if}
       {/if}
     </div>