From 32fa742cb0dac5aab70ad4e942b954159af39d79 Mon Sep 17 00:00:00 2001
From: Zeu Capua <coding@zeu.dev>
Date: Mon, 11 Mar 2024 00:43:37 -0700
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20implement=20crud/pin=20lists,=20err?=
 =?UTF-8?q?or=20toasts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/+layout.svelte                    |  10 +-
 src/routes/+page.svelte                      |   1 +
 src/routes/[id]/+page.svelte                 | 103 +++++++++++++++++--
 static/{shooting-star.svg => check-line.svg} |   2 +-
 static/list-box-line.svg                     |   1 +
 static/pin-line.svg                          |   1 +
 static/shooting-star-line.svg                |   1 +
 static/trash-line.svg                        |   1 +
 8 files changed, 108 insertions(+), 12 deletions(-)
 rename static/{shooting-star.svg => check-line.svg} (57%)
 create mode 100644 static/list-box-line.svg
 create mode 100644 static/pin-line.svg
 create mode 100644 static/shooting-star-line.svg
 create mode 100644 static/trash-line.svg

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 08048c6..a58e282 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -7,11 +7,11 @@
   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() {
@@ -41,7 +41,7 @@
             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 
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index e69de29..b2feaee 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -0,0 +1 @@
+<p>Test</p>
diff --git a/src/routes/[id]/+page.svelte b/src/routes/[id]/+page.svelte
index c7a4e7a..fbf3a95 100644
--- a/src/routes/[id]/+page.svelte
+++ b/src/routes/[id]/+page.svelte
@@ -1,18 +1,29 @@
 <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,
@@ -27,15 +38,95 @@
       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">
diff --git a/static/shooting-star.svg b/static/check-line.svg
similarity index 57%
rename from static/shooting-star.svg
rename to static/check-line.svg
index 51c1656..5c38d0a 100644
--- a/static/shooting-star.svg
+++ b/static/check-line.svg
@@ -1 +1 @@
-<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>
\ No newline at end of file
+<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>
\ No newline at end of file
diff --git a/static/list-box-line.svg b/static/list-box-line.svg
new file mode 100644
index 0000000..e4a9dea
--- /dev/null
+++ b/static/list-box-line.svg
@@ -0,0 +1 @@
+<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>
\ No newline at end of file
diff --git a/static/pin-line.svg b/static/pin-line.svg
new file mode 100644
index 0000000..a50976a
--- /dev/null
+++ b/static/pin-line.svg
@@ -0,0 +1 @@
+<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>
\ No newline at end of file
diff --git a/static/shooting-star-line.svg b/static/shooting-star-line.svg
new file mode 100644
index 0000000..7eaf1f5
--- /dev/null
+++ b/static/shooting-star-line.svg
@@ -0,0 +1 @@
+<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>
\ No newline at end of file
diff --git a/static/trash-line.svg b/static/trash-line.svg
new file mode 100644
index 0000000..6b6fac8
--- /dev/null
+++ b/static/trash-line.svg
@@ -0,0 +1 @@
+<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>
\ No newline at end of file
-- 
2.51.2