fix(themes): theme wallpapers dont apply on firefox

src/interface/components/themes/ThemeBlobImage.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { blobToDataUrl } from '@/plugins/built-in/themes/themeImageUrl'
+
+  let {
+    source,
+    alt = '',
+    class: className = '',
+  } = $props<{
+    source: string | Blob | null | undefined
+    alt?: string
+    class?: string
+  }>()
+
+  let src = $state('')
+
+  $effect(() => {
+    const value = source
+    if (!value) {
+      src = ''
+      return
+    }
+    if (typeof value === 'string') {
+      src = value
+      return
+    }
+    let cancelled = false
+    blobToDataUrl(value).then((url) => {
+      if (!cancelled) src = url
+    })
+    return () => {
+      cancelled = true
+    }
+  })
+</script>
+
+{#if src}
+  <img src={src} alt={alt} class={className} />
+{/if}

src/interface/components/themes/ThemeSelector.svelte

@@ -9,6 +9,7 @@
   import { ThemeManager } from '@/plugins/built-in/themes/theme-manager'
   import { cloudAuth } from '@/seqta/utils/CloudAuth'
   import SignInToFavoriteModal from '@/interface/components/SignInToFavoriteModal.svelte'
+  import ThemeBlobImage from '@/interface/components/themes/ThemeBlobImage.svelte'
 
   const themeManager = ThemeManager.getInstance();
 
@@ -237,8 +238,8 @@
 
           <div class="relative top-0 z-10 flex justify-center w-full h-full overflow-hidden transition dark:text-white rounded-xl group place-items-center bg-zinc-100 dark:bg-zinc-900 { isEditMode ? 'animate-shake brightness-90' : ''}">
             {#if theme.coverImage}
-              <img
-                src={typeof theme.coverImage === 'string' ? theme.coverImage : URL.createObjectURL(theme.coverImage)}
+              <ThemeBlobImage
+                source={theme.coverImage}
                 alt={theme.name}
                 class="object-cover absolute inset-0 z-0 w-full h-full pointer-events-none"
               />

src/interface/index.ts

@@ -4,9 +4,10 @@ import IconFamily from "@/resources/fonts/IconFamily.woff";
 import browser from "webextension-polyfill";
 import renderSvelte from "./main";
 import { initializeSettingsState } from "@/seqta/utils/listeners/SettingsState";
+import { initVerboseLogging, verboseInfo } from "@/utils/verboseLog";
 
 function InjectCustomIcons() {
-  console.info("[BetterSEQTA+] Injecting Icons");
+  verboseInfo("[BetterSEQTA+] Injecting Icons");
 
   const style = document.createElement("style");
   style.setAttribute("type", "text/css");
@@ -30,5 +31,6 @@ InjectCustomIcons();
 
 (async () => {
   await initializeSettingsState();
+  initVerboseLogging();
   renderSvelte(Settings, mountPoint, { standalone: true });
 })();

src/interface/pages/settings/general.svelte

@@ -492,6 +492,18 @@
           <Switch state={$settingsState.devMode} onChange={(isOn: boolean) => settingsState.devMode = isOn} />
         </div>
       </div>
+      <div class="flex justify-between items-center px-4 py-3">
+        <div class="pr-4">
+          <h2 class="text-sm font-bold">Verbose logging</h2>
+          <p class="text-xs">Show diagnostic console output (indexer, theme manager, timetable colour patch, etc.)</p>
+        </div>
+        <div>
+          <Switch
+            state={$settingsState.verboseLogging ?? false}
+            onChange={(isOn: boolean) => settingsState.verboseLogging = isOn}
+          />
+        </div>
+      </div>
       <div class="flex justify-between items-center px-4 py-3">
         <div class="pr-4">
           <h2 class="text-sm font-bold">Sensitive Hider</h2>

src/interface/pages/settings/theme.svelte

@@ -22,7 +22,7 @@
       <button
         onclick={() => editMode = !editMode}
         class="absolute top-0 right-0 z-10 px-2 h-8 text-lg rounded-xl bg-zinc-100 dark:bg-zinc-700">
-        <span class="mr-2">{editMode ? 'Done' : 'Edit'}</span>
+        <span class="mr-2">{editMode ? 'Done' : 'Remove'}</span>
         <span class="font-IconFamily">{editMode ? '\ue9e4' : '\uec38'}</span>
       </button>
 

src/interface/pages/themeCreator.svelte

@@ -27,6 +27,7 @@
   import { ThemeManager } from '@/plugins/built-in/themes/theme-manager'
   import { themeUpdates } from '../hooks/ThemeUpdates'
   import { CloseThemeCreator } from '@/plugins/built-in/themes/ThemeCreator'
+  import ThemeBlobImage from '@/interface/components/themes/ThemeBlobImage.svelte'
 
   const { themeID } = $props<{ themeID: string }>()
   const themeManager = ThemeManager.getInstance();
@@ -230,7 +231,7 @@
             {#each theme.CustomImages as image (image.id)}
               <div class="flex gap-2 items-center px-2 py-2 mb-4 h-16 bg-white rounded-lg shadow-lg dark:bg-zinc-700">
                 <div class="h-full">
-                  <img src={URL.createObjectURL(image.blob)} alt={image.variableName} class="object-contain h-full rounded" />
+                  <ThemeBlobImage source={image.blob} alt={image.variableName} class="object-contain h-full rounded" />
                 </div>
                 <input
                   type="text"
@@ -330,7 +331,7 @@
       {/if}
       {#if theme.coverImage}
         <div class="absolute z-20 w-full h-full opacity-0 transition-opacity pointer-events-none group-hover:opacity-100 bg-black/20"></div>
-        <img src="{typeof theme.coverImage === 'string' ? theme.coverImage : URL.createObjectURL(theme.coverImage)}" alt='Cover' class="object-cover absolute z-0 w-full h-full rounded" />
+        <ThemeBlobImage source={theme.coverImage} alt="Cover" class="object-cover absolute z-0 w-full h-full rounded" />
       {/if}
     </div>