From bec77d59e8e4e094e6461276c869e7adb9a0d8ce Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Thu, 25 Sep 2025 10:37:53 -0700
Subject: [PATCH] Add theme toggle on mobile, change button color for quick
 links

---
 src/app/components/MenuSettings.svelte    | 17 +++++++++++++++++
 src/app/components/SpaceQuickLinks.svelte | 23 ++++++++++++++++++-----
 2 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/src/app/components/MenuSettings.svelte b/src/app/components/MenuSettings.svelte
index eae94a82..dbb18b54 100644
--- a/src/app/components/MenuSettings.svelte
+++ b/src/app/components/MenuSettings.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import UserRounded from "@assets/icons/user-rounded.svg?dataurl"
   import Server from "@assets/icons/server.svg?dataurl"
+  import Moon from "@assets/icons/moon.svg?dataurl"
   import Settings from "@assets/icons/settings-minimalistic.svg?dataurl"
   import Code2 from "@assets/icons/code-2.svg?dataurl"
   import Exit from "@assets/icons/logout-3.svg?dataurl"
@@ -13,8 +14,11 @@
   import LogOut from "@app/components/LogOut.svelte"
   import {PLATFORM_NAME} from "@app/core/state"
   import {pushModal} from "@app/util/modal"
+  import {theme} from "@app/util/theme"
 
   const logout = () => pushModal(LogOut)
+
+  const toggleTheme = () => theme.set($theme === "dark" ? "light" : "dark")
 </script>
 
 <div class="column menu gap-2">
@@ -83,6 +87,19 @@
       {/snippet}
     </CardButton>
   </Link>
+  <Button onclick={toggleTheme}>
+    <CardButton class="dark:btn-neutral">
+      {#snippet icon()}
+        <div><Icon icon={Moon} size={7} /></div>
+      {/snippet}
+      {#snippet title()}
+        <div>Theme</div>
+      {/snippet}
+      {#snippet info()}
+        <div>Switch between light and dark mode</div>
+      {/snippet}
+    </CardButton>
+  </Button>
   <Link replaceState href="/settings/about">
     <CardButton class="dark:btn-neutral">
       {#snippet icon()}
diff --git a/src/app/components/SpaceQuickLinks.svelte b/src/app/components/SpaceQuickLinks.svelte
index 94532622..bc25a5e4 100644
--- a/src/app/components/SpaceQuickLinks.svelte
+++ b/src/app/components/SpaceQuickLinks.svelte
@@ -14,7 +14,7 @@
   import Button from "@lib/components/Button.svelte"
   import RoomCreate from "@app/components/RoomCreate.svelte"
   import ChannelName from "@app/components/ChannelName.svelte"
-  import {makeThreadPath, makeCalendarPath, makeRoomPath, makeSpacePath} from "@app/util/routes"
+  import {makeRoomPath, makeSpacePath} from "@app/util/routes"
   import {
     hasNip29,
     deriveUserRooms,
@@ -34,8 +34,9 @@
   const userRooms = deriveUserRooms(url)
   const otherRooms = deriveOtherRooms(url)
   const chatPath = makeSpacePath(url, "chat")
-  const threadsPath = makeThreadPath(url)
-  const calendarPath = makeCalendarPath(url)
+  const goalsPath = makeSpacePath(url, "goals")
+  const threadsPath = makeSpacePath(url, "threads")
+  const calendarPath = makeSpacePath(url, "calendar")
 
   const addRoom = () => pushModal(RoomCreate, {url})
 
@@ -61,7 +62,19 @@
     Quick Links
   </h3>
   <div class="flex flex-col gap-2">
-    <Link href={threadsPath} class="btn btn-primary w-full justify-start">
+    <Link href={goalsPath} class="btn btn-neutral w-full justify-start">
+      <div class="relative flex items-center gap-2">
+        <Icon icon={NotesMinimalistic} />
+        Goals
+        {#if $notifications.has(goalsPath)}
+          <div
+            class="absolute -right-3 -top-1 h-2 w-2 rounded-full bg-primary-content"
+            transition:fade>
+          </div>
+        {/if}
+      </div>
+    </Link>
+    <Link href={threadsPath} class="btn btn-neutral w-full justify-start">
       <div class="relative flex items-center gap-2">
         <Icon icon={NotesMinimalistic} />
         Threads
@@ -73,7 +86,7 @@
         {/if}
       </div>
     </Link>
-    <Link href={calendarPath} class="btn btn-secondary w-full justify-start">
+    <Link href={calendarPath} class="btn btn-neutral w-full justify-start">
       <div class="relative flex items-center gap-2">
         <Icon icon={CalendarMinimalistic} />
         Calendar