Add catalog search, fix sorting

src/lib/components/Catalog.svelte

@@ -1,17 +1,38 @@
 <script lang="ts">
   import { catalog } from '$lib/catalog';
+  import { Button, Search } from 'flowbite-svelte';
   import CatalogItem from './CatalogItem.svelte';
   import Loader from './Loader.svelte';
+  import { GridOutline, SortOutline } from 'flowbite-svelte-icons';
+
+  $: sortedCatalog = $catalog
+    ?.sort((a, b) => a.manga[0].mokuroData.title.localeCompare(b.manga[0].mokuroData.title))
+    .filter((item) => {
+      return item.manga[0].mokuroData.title.toLowerCase().indexOf(search.toLowerCase()) !== -1;
+    });
+
+  let search = '';
 </script>
 
 {#if $catalog}
   {#if $catalog.length > 0}
     <div class="flex flex-col gap-5">
-      <div class="flex sm:flex-row flex-col gap-5 flex-wrap justify-center sm:justify-start">
+      <div class="flex gap-1 py-2">
-        {#each $catalog as { id } (id)}
+        <Search bind:value={search} />
-          <CatalogItem {id} />
+        <!-- <Button size="sm" color="alternative"><GridOutline /></Button>
-        {/each}
+        <Button size="sm" color="alternative"><SortOutline /></Button> -->
       </div>
+      {#if search && sortedCatalog.length === 0}
+        <div class="text-center p-20">
+          <p>No results found.</p>
+        </div>
+      {:else}
+        <div class="flex sm:flex-row flex-col gap-5 flex-wrap justify-center sm:justify-start">
+          {#each sortedCatalog as { id } (id)}
+            <CatalogItem {id} />
+          {/each}
+        </div>
+      {/if}
     </div>
   {:else}
     <div class="text-center p-20">

src/routes/+page.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import Catalog from '$lib/components/Catalog.svelte';
-  import { createProfile, deleteProfile } from '$lib/settings';
 </script>
 
 <svelte:head>