feat: move svelte interface to 'src/interface'

src/interface/hooks/BackgroundDataLoader.ts

@@ -0,0 +1,75 @@
+import { type DBSchema, type IDBPDatabase, openDB } from 'idb';
+
+interface BackgroundDB extends DBSchema {
+  backgrounds: {
+    key: string;
+    value: {
+      id: string;
+      type: string;
+      blob: Blob;
+    };
+  };
+}
+
+let db: IDBPDatabase<BackgroundDB> | null = null;
+
+export async function openDatabase(): Promise<IDBPDatabase<BackgroundDB>> {
+  if (db) return db;
+
+  db = await openDB<BackgroundDB>('BackgroundDB', 1, {
+    upgrade(db: IDBPDatabase<BackgroundDB>) {
+      db.createObjectStore('backgrounds', { keyPath: 'id' });
+    },
+  });
+
+  return db;
+}
+
+export async function readAllData(): Promise<Array<{ id: string; type: string; blob: Blob }>> {
+  const db = await openDatabase();
+  return db.getAll('backgrounds');
+}
+
+export async function writeData(id: string, type: string, blob: Blob): Promise<void> {
+  const db = await openDatabase();
+  await db.put('backgrounds', { id, type, blob });
+}
+
+export async function deleteData(id: string): Promise<void> {
+  const db = await openDatabase();
+  await db.delete('backgrounds', id);
+}
+
+export async function clearAllData(): Promise<void> {
+  const db = await openDatabase();
+  await db.clear('backgrounds');
+}
+
+export async function getDataById(id: string): Promise<{ id: string; type: string; blob: Blob } | undefined> {
+  const db = await openDatabase();
+  return db.get('backgrounds', id);
+}
+
+export function closeDatabase(): void {
+  if (db) {
+    db.close();
+    db = null;
+  }
+}
+
+// Helper function to check if IndexedDB is supported
+export function isIndexedDBSupported(): boolean {
+  return 'indexedDB' in window;
+}
+
+// Helper function to check if there's enough storage space
+export async function hasEnoughStorageSpace(requiredSpace: number): Promise<boolean> {
+  if ('storage' in navigator && 'estimate' in navigator.storage) {
+    const { quota, usage } = await navigator.storage.estimate();
+    if (quota !== undefined && usage !== undefined) {
+      return (quota - usage) > requiredSpace;
+    }
+  }
+  // If we can't determine, assume there's enough space
+  return true;
+}

src/interface/hooks/BackgroundUpdates.ts

@@ -0,0 +1,29 @@
+type BackgroundUpdateCallback = () => void;
+
+class BackgroundUpdates {
+  private static instance: BackgroundUpdates;
+  private listeners: Set<BackgroundUpdateCallback> = new Set();
+
+  private constructor() {}
+
+  public static getInstance(): BackgroundUpdates {
+    if (!BackgroundUpdates.instance) {
+      BackgroundUpdates.instance = new BackgroundUpdates();
+    }
+    return BackgroundUpdates.instance;
+  }
+
+  public addListener(callback: BackgroundUpdateCallback): void {
+    this.listeners.add(callback);
+  }
+
+  public removeListener(callback: BackgroundUpdateCallback): void {
+    this.listeners.delete(callback);
+  }
+
+  public triggerUpdate(): void {
+    this.listeners.forEach(callback => callback());
+  }
+}
+
+export const backgroundUpdates = BackgroundUpdates.getInstance();

src/interface/hooks/SettingsPopup.ts

@@ -0,0 +1,37 @@
+type SettingsPopupCallback = () => void;
+
+/** 
+ * This is a singleton that triggers an update when the settings popup is closed.
+ * This is used to close the colour picker.
+ * Usage:
+ *  settingsPopup.addListener(() => {
+ *    console.log('Settings popup closed');
+ *  });
+*/ 
+class SettingsPopup {
+  private static instance: SettingsPopup;
+  private listeners: Set<SettingsPopupCallback> = new Set();
+
+  private constructor() {}
+
+  public static getInstance(): SettingsPopup {
+    if (!SettingsPopup.instance) {
+      SettingsPopup.instance = new SettingsPopup();
+    }
+    return SettingsPopup.instance;
+  }
+
+  public addListener(callback: SettingsPopupCallback): void {
+    this.listeners.add(callback);
+  }
+
+  public removeListener(callback: SettingsPopupCallback): void {
+    this.listeners.delete(callback);
+  }
+
+  public triggerClose(): void {
+    this.listeners.forEach(callback => callback());
+  }
+}
+
+export const settingsPopup = SettingsPopup.getInstance();

src/interface/hooks/ThemeUpdates.ts

@@ -0,0 +1,29 @@
+type ThemeUpdateCallback = () => void;
+
+class ThemeUpdates {
+  private static instance: ThemeUpdates;
+  private listeners: Set<ThemeUpdateCallback> = new Set();
+
+  private constructor() {}
+
+  public static getInstance(): ThemeUpdates {
+    if (!ThemeUpdates.instance) {
+      ThemeUpdates.instance = new ThemeUpdates();
+    }
+    return ThemeUpdates.instance;
+  }
+
+  public addListener(callback: ThemeUpdateCallback): void {
+    this.listeners.add(callback);
+  }
+
+  public removeListener(callback: ThemeUpdateCallback): void {
+    this.listeners.delete(callback);
+  }
+
+  public triggerUpdate(): void {
+    this.listeners.forEach(callback => callback());
+  }
+}
+
+export const themeUpdates = ThemeUpdates.getInstance();

src/interface/hooks/backgroundState.svelte.ts

@@ -0,0 +1 @@
+export let selectedBackground = $state<string | null>(null);