✨ implement crud/pin lists, error toasts

src/routes/+layout.svelte

···
   import toast, { Toaster } from "svelte-french-toast";
   import { persisted, pinned_list } from "$lib/stores.svelte";
 
-  const theme = persisted<string>("theme", "light");
+  let theme = persisted<string>("theme", "dark");
   let is_menu_open = $state(false);
-  let theme_style = $derived(theme.value === "light"
-    ? "text-black absolute inset-0 -z-10 h-full w-full bg-white bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] [background-size:16px_16px]"
-    : "text-white absolute top-0 z-[-2] h-screen w-screen bg-[#000000] bg-[radial-gradient(#ffffff33_1px,#00091d_1px)] bg-[size:20px_20px]"
+  let theme_style = $derived(theme.value === "dark"
+    ? "text-white absolute top-0 z-[-2] h-screen w-screen bg-[#000000] bg-[radial-gradient(#ffffff33_1px,#00091d_1px)] bg-[size:20px_20px]"
+    : "text-black absolute inset-0 -z-10 h-full w-full bg-white bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] [background-size:16px_16px]"
   );
 
   function comingSoon() {
···
             onclick={comingSoon}
             class="flex gap-2 text-start w-full h-full rounded-xl pl-2 pr-5 py-2 hover:bg-slate-500/10 transition-all duration-150 items-center"
           >
-            <img src="/shooting-star.svg" alt="Item 1" class="w-8 h-8" />
+            <img src="/shooting-star-line.svg" alt="Item 1" class="w-8 h-8" />
             Try a new list
           </button>
           <button 

src/routes/+page.svelte

···
+<p>Test</p>

src/routes/[id]/+page.svelte

···
 <script lang="ts">
-  import { onMount } from "svelte";
+  import { onMount, tick } from "svelte";
   import { page } from "$app/stores";
   import { local_lists, pinned_list, generateId, type List } from "$lib/stores.svelte";
+  import { goto, pushState } from "$app/navigation";
+  import toast, { Toaster } from "svelte-french-toast";
 
+  let is_menu_open = $state(false);
   let list : List | undefined = $state(); 
   let task_input = $state("");
+  let user_lists = $derived(local_lists.value) as List[];
 
   onMount(() => {
     list = local_lists.value!.find((l) => l.id === $page.params.id); 
   });
 
+  // since list points to something inside local_lists,
+  // it will run when list state changes
   $effect(() => local_lists.update());
 
   function addTask() {
+    if (task_input.length === 0) {
+      toast.error("Enter a task to add");
+      return;
+    }
+
     list?.tasks.push({
       id: generateId(),
       description: task_input,
···
       list.tasks = list.tasks.filter((t) => t.id !== id);
     }
   }
+
+  function createList() {
+    const new_list = {
+      id: generateId(),
+      title: "",
+      tasks: []
+    };
+
+    local_lists.value!.push(new_list);
+    list = local_lists.value!.find((l) => l.id === new_list.id);
+    goto(`/${list!.id}`);
+  }
+
+  function switchToList(id: string) {
+    list = local_lists.value!.find((l) => l.id === id);
+    goto(`/${list!.id}`);
+  }
+
+  function pinList(id: string) {
+    pinned_list.value = id;
+  }
+
+  function deleteList() {
+    if (pinned_list.value === $page.params.id) {
+      toast.error("Cannot delete pinned list");
+      return;
+    }
+
+    local_lists.value = local_lists.value!.filter((l) => l.id !== $page.params.id);
+    list = local_lists.value.find((l) => l.id === pinned_list.value);
+    goto(`/${list!.id}`);
+  }
 </script>
 
 <main class="flex flex-col w-full px-2 pt-8 pb-12 lg:p-4 lg:pb-24 gap-8 text-xl lg:text-3xl">
   {#if list}
-    <input 
-      type="text" 
-      bind:value={list.title} 
-      class="text-5xl font-bold bg-transparent"
-    />
+    <section class="relative flex gap-4 w-full">
+      <div class="flex gap-4 border-black border w-fit h-fit p-2 bg-white rounded-xl">
+        <button onclick={() => is_menu_open = !is_menu_open}>
+          <img
+            src="/list-box-line.svg"
+            alt="Lists button"
+            class="w-12 h-12 hover:bg-slate-500/10 rounded-full"
+          />
+        </button>
+        <button onclick={() => pinList(list!.id)}>
+          <img
+            src={pinned_list.value === list.id ? "/pin.svg" : "/pin-line.svg"}
+            alt="Pin list button"
+            class="w-12 h-12 hover:bg-slate-500/10 rounded-full"
+          />
+        </button>
+        <button onclick={deleteList}>
+          <img
+            src="/trash-line.svg"
+            alt="Delete list button"
+            class="w-12 h-12 hover:bg-slate-500/10 rounded-full"
+          />
+        </button>
+      </div>
+
+      {#if is_menu_open}
+        <menu class="absolute flex flex-col gap-2 w-fit h-fit top-20 p-2 bg-white border border-black rounded-lg !text-black !text-lg">
+          {#each user_lists as user_list : List (user_list.id)}
+            <button
+              onclick={() => switchToList(user_list.id)}
+              class="flex gap-2 justify-between text-start w-full h-full rounded-xl pl-2 pr-5 py-2 hover:bg-slate-500/10 transition-all duration-150 items-center"
+            >
+              {user_list.title.length > 0 ? user_list.title : "Untitled"}
+              {#if user_list.id === list.id}
+                <img src="/check-line.svg" alt="Item 1" class="w-8 h-8" />
+              {/if}
+            </button>
+          {/each}
+          <button
+            onclick={createList}
+            class="flex gap-2 justify-between text-start w-full h-full rounded-xl pl-2 pr-5 py-2 hover:bg-slate-500/10 transition-all duration-150 items-center"
+          >
+            Create new list
+          </button>
+        </menu>
+      {/if}
+    </section>
+        <input 
+          type="text" 
+          bind:value={list.title} 
+          placeholder="Untitled"
+          class="text-5xl font-bold bg-transparent"
+        />
     <ul class="flex flex-col gap-4">
       {#each list.tasks as task (task.id)}
         <li class="group flex justify-between items-center gap-4">

static/check-line.svg

···
+<svg width="512" height="512" viewBox="0 0 512 512" style="color:currentColor" xmlns="http://www.w3.org/2000/svg" class="h-full w-full"><rect width="512" height="512" x="0" y="0" rx="30" fill="transparent" stroke="transparent" stroke-width="0" stroke-opacity="100%" paint-order="stroke"></rect><svg width="256px" height="256px" viewBox="0 0 24 24" fill="currentColor" x="128" y="128" role="img" style="display:inline-block;vertical-align:middle" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor"><g fill="currentColor"><path d="M19.707 6.293a1 1 0 0 1 0 1.414l-10 10a1 1 0 0 1-1.414 0l-4-4a1 1 0 1 1 1.414-1.414L9 15.586l9.293-9.293a1 1 0 0 1 1.414 0z"/></g></g></svg></svg>

static/list-box-line.svg

···
+<svg width="512" height="512" viewBox="0 0 512 512" style="color:currentColor" xmlns="http://www.w3.org/2000/svg" class="h-full w-full"><rect width="512" height="512" x="0" y="0" rx="30" fill="transparent" stroke="transparent" stroke-width="0" stroke-opacity="100%" paint-order="stroke"></rect><svg width="256px" height="256px" viewBox="0 0 24 24" fill="currentColor" x="128" y="128" role="img" style="display:inline-block;vertical-align:middle" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 8h5m0 4h-5m5 4h-5m-5 4h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2zM8 8h.001M8 12h.001M8 16h.001"/></g></svg></svg>

static/pin-line.svg

···
+<svg width="512" height="512" viewBox="0 0 512 512" style="color:currentColor" xmlns="http://www.w3.org/2000/svg" class="h-full w-full"><rect width="512" height="512" x="0" y="0" rx="30" fill="transparent" stroke="transparent" stroke-width="0" stroke-opacity="100%" paint-order="stroke"></rect><svg width="256px" height="256px" viewBox="0 0 24 24" fill="currentColor" x="128" y="128" role="img" style="display:inline-block;vertical-align:middle" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m4 20l5-5m0 0l3.956 3.956a1 1 0 0 0 1.626-.314l2.255-5.261a1 1 0 0 1 .548-.535l3.207-1.283a1 1 0 0 0 .336-1.635l-6.856-6.856a1 1 0 0 0-1.635.336l-1.283 3.207a1 1 0 0 1-.535.548L5.358 9.418a1 1 0 0 0-.314 1.626L9 15z"/></g></svg></svg>

static/shooting-star-line.svg

···
+<svg width="512" height="512" viewBox="0 0 512 512" style="color:currentColor" xmlns="http://www.w3.org/2000/svg" class="h-full w-full"><rect width="512" height="512" x="0" y="0" rx="30" fill="transparent" stroke="transparent" stroke-width="0" stroke-opacity="100%" paint-order="stroke"></rect><svg width="256px" height="256px" viewBox="0 0 24 24" fill="currentColor" x="128" y="128" role="img" style="display:inline-block;vertical-align:middle" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 8c-1.667.667-5.4 2.7-7 5.5m9.5-2.5C9.167 12.333 4 16.4 2 22m10.5-7.5c-1.167 1.167-3.8 4.1-5 6.5m7.174-14.55l.673-3.285l2.225 2.51l3.027-.294l-1.768 3.062l1.743 2.639l-3.286-.673l-2.51 2.225l.19-3.156l-3.062-1.768l2.768-1.26z"/></g></svg></svg>

static/shooting-star.svg

···
-<svg width="512" height="512" viewBox="0 0 512 512" style="color:currentColor" xmlns="http://www.w3.org/2000/svg" class="h-full w-full"><rect width="512" height="512" x="0" y="0" rx="30" fill="transparent" stroke="transparent" stroke-width="0" stroke-opacity="100%" paint-order="stroke"></rect><svg width="256px" height="256px" viewBox="0 0 24 24" fill="currentColor" x="128" y="128" role="img" style="display:inline-block;vertical-align:middle" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M9 8c-1.667.667-5.4 2.7-7 5.5m9.5-2.5C9.167 12.333 4 16.4 2 22m10.5-7.5c-1.167 1.167-3.8 4.1-5 6.5"/><path fill="currentColor" d="m14.674 6.45l.673-3.285l2.225 2.51l3.027-.294l-1.768 3.062l1.743 2.639l-3.286-.673l-2.51 2.225l.19-3.156l-3.062-1.768l2.768-1.26z"/></g></g></svg></svg>

static/trash-line.svg

···
+<svg width="512" height="512" viewBox="0 0 512 512" style="color:currentColor" xmlns="http://www.w3.org/2000/svg" class="h-full w-full"><rect width="512" height="512" x="0" y="0" rx="30" fill="transparent" stroke="transparent" stroke-width="0" stroke-opacity="100%" paint-order="stroke"></rect><svg width="256px" height="256px" viewBox="0 0 24 24" fill="currentColor" x="128" y="128" role="img" style="display:inline-block;vertical-align:middle" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor"><g fill="currentColor"><path d="M4 7a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2v10a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3V8a1 1 0 0 1-1-1zm3 1v10a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8H7z"/><path d="M11 5a1 1 0 0 0-1 1v1a1 1 0 0 1-2 0V6a3 3 0 0 1 3-3h2a3 3 0 0 1 3 3v1a1 1 0 1 1-2 0V6a1 1 0 0 0-1-1h-2zm-1 5a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0v-5a1 1 0 0 1 1-1zm4 0a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0v-5a1 1 0 0 1 1-1z"/></g></g></svg></svg>