Refactor settings to use profiles

src/lib/components/Settings/Profiles.svelte

@@ -1,15 +1,18 @@
 <script lang="ts">
   import { db } from '$lib/catalog/db';
+  import { changeProfile, currentProfile, profiles } from '$lib/settings';
   import { promptConfirmation } from '$lib/util';
   import { AccordionItem, Button, Select } from 'flowbite-svelte';
 
-  let profiles = [
+  $: items = Object.keys($profiles).map((id) => {
-    { value: 'default', name: 'Default' },
+    return { value: id, name: id };
-    { value: 'profile1', name: 'Profile 1' },
+  });
-    { value: 'profile2', name: 'Porfile 2' }
-  ];
 
-  let profile = 'default';
+  let profile = $currentProfile;
+
+  function onChange() {
+    changeProfile(profile);
+  }
 
   function onClear() {
     promptConfirmation('Are you sure you want to clear your catalog?', () => db.catalog.clear());
@@ -20,7 +23,7 @@
   <span slot="header">Profile</span>
   <div class="flex flex-col gap-5">
     <div class="flex flex-col gap-2">
-      <Select items={profiles} value={profile} />
+      <Select {items} bind:value={profile} on:change={onChange} />
       <Button size="sm" outline color="dark">Manage profiles</Button>
     </div>
     <Button on:click={onClear} outline color="red">Clear catalog</Button>

src/lib/components/Settings/Settings.svelte

@@ -6,8 +6,7 @@
   import { promptConfirmation } from '$lib/util';
   import AnkiConnectSettings from './AnkiConnectSettings.svelte';
   import ReaderSettings from './Reader/ReaderSettings.svelte';
-  import VolumeSettings from './VolumeSettings.svelte';
+  import Profiles from './Profiles.svelte';
-  // import Profiles from './Profiles.svelte';
 
   let transitionParams = {
     x: 320,
@@ -43,10 +42,9 @@
   </div>
   <div class="flex flex-col gap-5">
     <Accordion flush>
-      <VolumeSettings />
       <ReaderSettings />
       <AnkiConnectSettings />
-      <!-- <Profiles /> -->
+      <Profiles />
     </Accordion>
     <div class="flex flex-col gap-2">
       <Button outline on:click={onReset}>Reset</Button>

src/lib/settings/settings.ts

@@ -1,6 +1,6 @@
 import { browser } from '$app/environment';
 import { zoomDefault } from '$lib/panzoom';
-import { writable } from 'svelte/store';
+import { derived, get, writable } from 'svelte/store';
 
 export type FontSize =
   | 'auto'
@@ -55,7 +55,6 @@ export type AnkiConnectSettings = {
 
 export type AnkiSettingsKey = keyof AnkiConnectSettings;
 
-
 const defaultSettings: Settings = {
   rightToLeft: true,
   singlePageView: false,
@@ -80,40 +79,94 @@ const defaultSettings: Settings = {
   }
 };
 
-const stored = browser ? window.localStorage.getItem('settings') : undefined;
+type Profiles = Record<string, Settings>
-const initialSettings: Settings = stored && browser ? JSON.parse(stored) : defaultSettings;
 
+const defaultProfiles: Profiles = {
+  Default: defaultSettings
+}
 
-export const settings = writable<Settings>(initialSettings);
+const storedProfiles = browser ? window.localStorage.getItem('profiles') : undefined;
+const initialProfiles: Profiles = storedProfiles && browser ? JSON.parse(storedProfiles) : defaultProfiles;
+export const profiles = writable<Profiles>(initialProfiles);
+
+const storedCurrentProfile = browser ? window.localStorage.getItem('currentProfile') || 'Default' : 'Default';
+export const currentProfile = writable(storedCurrentProfile)
+
+profiles.subscribe((profiles) => {
+  if (browser) {
+    window.localStorage.setItem('profiles', JSON.stringify(profiles));
+  }
+});
+
+currentProfile.subscribe((currentProfile) => {
+  if (browser) {
+    window.localStorage.setItem('currentProfile', currentProfile);
+  }
+});
+
+export const settings = derived([profiles, currentProfile], ([profiles, currentProfile]) => {
+  return profiles[currentProfile]
+});
 
 export function updateSetting(key: SettingsKey, value: any) {
-  settings.update((settings) => {
+  profiles.update((profiles) => {
     return {
-      ...settings,
+      ...profiles,
+      [get(currentProfile)]: {
+        ...profiles[get(currentProfile)],
         [key]: value
+      }
     };
   });
   zoomDefault();
 }
 
 export function updateAnkiSetting(key: AnkiSettingsKey, value: any) {
-  settings.update((settings) => {
+  profiles.update((profiles) => {
     return {
-      ...settings,
+      ...profiles,
+      [get(currentProfile)]: {
+        ...profiles[get(currentProfile)],
         ankiConnectSettings: {
-        ...settings.ankiConnectSettings,
+          ...profiles[get(currentProfile)].ankiConnectSettings,
           [key]: value
         }
+      }
+
     };
   });
 }
 
 export function resetSettings() {
-  settings.set(defaultSettings);
+  profiles.update((profiles) => {
+    return {
+      ...profiles,
+      [get(currentProfile)]: defaultSettings
+    }
+  });
 }
 
-settings.subscribe((settings) => {
+export function createProfile(profileId: string) {
-  if (browser) {
+  profiles.update((profiles) => {
-    window.localStorage.setItem('settings', JSON.stringify(settings));
+    return {
+      ...profiles,
+      [profileId]: defaultSettings
     }
-});
+  })
+}
+
+export function deleteProfile(profileId: string) {
+  if (get(currentProfile) === profileId) {
+    currentProfile.set('Default');
+  }
+
+  profiles.update((profiles) => {
+    delete profiles[profileId]
+    return profiles
+  })
+}
+
+
+export function changeProfile(profileId: string) {
+  currentProfile.set(profileId)
+}

src/routes/+page.svelte

@@ -1,5 +1,15 @@
 <script lang="ts">
   import Catalog from '$lib/components/Catalog.svelte';
+  import { createProfile, deleteProfile } from '$lib/settings';
+  import { Button } from 'flowbite-svelte';
+
+  function newProfile() {
+    createProfile('New');
+  }
+
+  function Delete() {
+    deleteProfile('New');
+  }
 </script>
 
 <svelte:head>
@@ -7,5 +17,7 @@
 </svelte:head>
 
 <div class="p-2 h-[90svh]">
+  <Button on:click={newProfile}>New profile</Button>
+  <Button on:click={Delete}>Delete</Button>
   <Catalog />
 </div>