Handle profile management

src/lib/components/Settings/Profiles.svelte

@@ -1,31 +0,0 @@
-<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';
-
-  $: items = Object.keys($profiles).map((id) => {
-    return { value: id, name: id };
-  });
-
-  let profile = $currentProfile;
-
-  function onChange() {
-    changeProfile(profile);
-  }
-
-  function onClear() {
-    promptConfirmation('Are you sure you want to clear your catalog?', () => db.catalog.clear());
-  }
-</script>
-
-<AccordionItem>
-  <span slot="header">Profile</span>
-  <div class="flex flex-col gap-5">
-    <div class="flex flex-col gap-2">
-      <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>
-  </div>
-</AccordionItem>

src/lib/components/Settings/Profiles/ManageProfilesModal.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+  import {
+    copyProfile,
+    createProfile,
+    deleteProfile,
+    profiles,
+    renameProfile
+  } from '$lib/settings';
+  import { promptConfirmation, showSnackbar } from '$lib/util';
+  import { Listgroup, ListgroupItem, Modal, Input, Popover } from 'flowbite-svelte';
+  import {
+    CirclePlusSolid,
+    CopySolid,
+    EditOutline,
+    TrashBinSolid,
+    UserEditSolid
+  } from 'flowbite-svelte-icons';
+  import type { ListGroupItemType } from 'flowbite-svelte/dist/types';
+
+  export let open = false;
+
+  $: items = Object.keys($profiles);
+
+  let newProfile: string;
+
+  function onSubmit() {
+    if (!newProfile) {
+      showSnackbar('Profile name cannot be empty');
+      return;
+    }
+
+    if (items.includes(newProfile)) {
+      showSnackbar('Profile already exists');
+      return;
+    }
+
+    createProfile(newProfile);
+    newProfile = '';
+  }
+
+  function onCopy(item: string | ListGroupItemType) {
+    let newCopy = `${item} copy`;
+
+    while (items.includes(newCopy)) {
+      newCopy += ` copy`;
+    }
+
+    copyProfile(item as string, newCopy);
+  }
+
+  function onDelete(item: string | ListGroupItemType) {
+    promptConfirmation(`Are you sure you would like to delete the [${item}] profile?`, () => {
+      deleteProfile(item as string);
+    });
+  }
+
+  let profileToEdit: string | ListGroupItemType;
+  let newName: string | ListGroupItemType;
+
+  function onEditClicked(item: string | ListGroupItemType) {
+    if (profileToEdit) {
+      profileToEdit = '';
+    } else {
+      newName = item;
+      profileToEdit = item;
+    }
+  }
+
+  function onEdit() {
+    if (items.includes(newName as string)) {
+      showSnackbar('Profile already exists');
+      return;
+    }
+
+    renameProfile(profileToEdit as string, newName as string);
+  }
+
+  function onInputClick(this: any) {
+    this.select();
+  }
+</script>
+
+<Modal size="xs" bind:open outsideclose>
+  <Listgroup {items} let:item>
+    <ListgroupItem class="flex flex-row justify-between gap-6">
+      <div class="flex-1">
+        {#if profileToEdit === item}
+          <form on:submit|preventDefault={onEdit}>
+            <Input size="sm" bind:value={newName} autofocus on:click={onInputClick}>
+              <EditOutline
+                slot="right"
+                size="sm"
+                on:click={onEdit}
+                class="hover:text-primary-700"
+              />
+            </Input>
+          </form>
+        {:else}
+          <p class="line-clamp-1">{item}</p>
+        {/if}
+      </div>
+      <div class="flex flex-row gap-2 items-center">
+        <CopySolid size="sm" class="hover:text-primary-700" on:click={() => onCopy(item)} />
+        {#if item !== 'Default'}
+          <UserEditSolid
+            size="sm"
+            class="hover:text-primary-700"
+            on:click={() => onEditClicked(item)}
+          />
+          <TrashBinSolid size="sm" class="hover:text-primary-700" on:click={() => onDelete(item)} />
+        {/if}
+      </div>
+    </ListgroupItem>
+  </Listgroup>
+  <form on:submit|preventDefault={onSubmit}>
+    <Input type="text" placeholder="New profile..." bind:value={newProfile}>
+      <CirclePlusSolid slot="right" class="hover:text-primary-700" on:click={onSubmit} />
+    </Input>
+  </form>
+</Modal>

src/lib/components/Settings/Profiles/Profiles.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { changeProfile, currentProfile, profiles } from '$lib/settings';
+
+  import { AccordionItem, Button, Listgroup, Modal, Select } from 'flowbite-svelte';
+  import ManageProfilesModal from './ManageProfilesModal.svelte';
+
+  $: items = Object.keys($profiles).map((id) => {
+    return { value: id, name: id };
+  });
+
+  let profile = $currentProfile;
+
+  function onChange() {
+    changeProfile(profile);
+  }
+
+  let manageModalOpen = false;
+</script>
+
+<ManageProfilesModal bind:open={manageModalOpen} />
+
+<AccordionItem>
+  <span slot="header">Profile</span>
+  <div class="flex flex-col gap-5">
+    <div class="flex flex-col gap-2">
+      <Select {items} bind:value={profile} on:change={onChange} placeholder="Select profile ..." />
+      <Button size="sm" outline color="dark" on:click={() => (manageModalOpen = true)}
+        >Manage profiles</Button
+      >
+    </div>
+  </div>
+</AccordionItem>
+
+<!-- import { db } from '$lib/catalog/db';
+import { promptConfirmation } from '$lib/util';
+
+function onClear() {
+  promptConfirmation('Are you sure you want to clear your catalog?', () => db.catalog.clear());
+}
+<Button on:click={onClear} outline color="red">Clear catalog</Button> -->

src/lib/components/Settings/Settings.svelte

@@ -6,7 +6,7 @@
   import { promptConfirmation } from '$lib/util';
   import AnkiConnectSettings from './AnkiConnectSettings.svelte';
   import ReaderSettings from './Reader/ReaderSettings.svelte';
-  import Profiles from './Profiles.svelte';
+  import Profiles from './Profiles/Profiles.svelte';
 
   let transitionParams = {
     x: 320,

src/lib/settings/settings.ts

@@ -166,6 +166,28 @@ export function deleteProfile(profileId: string) {
   })
 }
 
+export function renameProfile(oldName: string, newName: string) {
+  if (get(currentProfile) === oldName) {
+    currentProfile.set('Default');
+  }
+
+  profiles.update((profiles) => {
+    delete Object.assign(profiles, { [newName]: profiles[oldName] })[oldName];
+    return profiles
+  })
+}
+
+export function copyProfile(profileToCopy: string, newName: string) {
+  profiles.update((profiles) => {
+    return {
+      ...profiles,
+      [newName]: {
+        ...profiles[profileToCopy]
+      }
+    }
+  })
+}
+
 
 export function changeProfile(profileId: string) {
   currentProfile.set(profileId)

src/routes/+page.svelte

@@ -1,15 +1,6 @@
 <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>
@@ -17,7 +8,5 @@
 </svelte:head>
 
 <div class="p-2 h-[90svh]">
-  <Button on:click={newProfile}>New profile</Button>
-  <Button on:click={Delete}>Delete</Button>
   <Catalog />
 </div>