Add catalog settings

src/lib/components/Settings/CatalogSettings.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { AccordionItem, Button } from 'flowbite-svelte';
+  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());
+  }
+</script>
+
+<AccordionItem>
+  <span slot="header">Catalog settings</span>
+  <Button on:click={onClear} outline color="red">Clear catalog</Button>
+</AccordionItem>

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

@@ -30,11 +30,3 @@
     </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

@@ -7,6 +7,7 @@
   import AnkiConnectSettings from './AnkiConnectSettings.svelte';
   import ReaderSettings from './Reader/ReaderSettings.svelte';
   import Profiles from './Profiles/Profiles.svelte';
+  import CatalogSettings from './CatalogSettings.svelte';
 
   let transitionParams = {
     x: 320,
@@ -45,6 +46,7 @@
       <ReaderSettings />
       <AnkiConnectSettings />
       <Profiles />
+      <CatalogSettings />
     </Accordion>
     <div class="flex flex-col gap-2">
       <Button outline on:click={onReset}>Reset</Button>