Merge pull request #8 from idkncc/feat/settings

feat: settings page
idkncc · Sep 11, 2024 · df9b035 · df9b035
2 parents b336c45 + 3cb82d9
commit df9b035
Show file tree

Hide file tree

Showing 42 changed files with 912 additions and 60 deletions.
diff --git a/package.json b/package.json
@@ -31,6 +31,7 @@
     "clsx": "^2.1.1",
     "embla-carousel-svelte": "^8.2.1",
     "lodash.chunk": "^4.2.0",
+    "mode-watcher": "^0.4.1",
     "svelte-radix": "^1.1.1",
     "swiper": "^11.1.7",
     "tailwind-merge": "^2.5.2",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app.html b/src/app.html
@@ -6,7 +6,7 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>
-	<body data-sveltekit-preload-data="hover" class="dark">
+	<body data-sveltekit-preload-data="hover">
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/src/lib/components/Settings/Navbar/ShortcutsDialog.scss b/src/lib/components/Settings/Navbar/ShortcutsDialog.scss
@@ -0,0 +1,11 @@
+.settings-navbar {
+  @apply grid grid-cols-[5fr_3fr_2fr] gap-2 items-center;
+  @apply bg-secondary text-secondary-foreground rounded-xl border;
+  @apply p-2;
+
+  .shortcuts {
+    @apply flex gap-1;
+    @apply p-2;
+    @apply bg-background text-foreground border border-dashed rounded-lg;
+  }
+}
diff --git a/src/lib/components/Settings/Navbar/ShortcutsDialog.svelte b/src/lib/components/Settings/Navbar/ShortcutsDialog.svelte
@@ -0,0 +1,56 @@
+<script>
+    import "./ShortcutsDialog.scss";
+
+    import * as Section from "@ui/section";
+    import { Input } from "@ui/input";
+    import { Root } from "@ui/dialog";
+</script>
+
+<div class="settings-navbar">
+    <div class="shortcuts">
+        <p>Home</p>
+        <p>Friends</p>
+        <p>Discovery</p>
+    </div>
+
+    <div class="navbar-search">
+        <div class="input-container">
+            <Input
+                class="control-input"
+                type="search"
+                placeholder="Search..."
+            />
+            <button class="search-button">
+                <svg
+                    class="search-icon"
+                    aria-hidden="true"
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="24"
+                    height="24"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                >
+                    <path
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-width="2"
+                        d="m21 21-3.5-3.5M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0Z"
+                    />
+                </svg>
+            </button>
+        </div>
+    </div>
+
+    <p>John Doe</p>
+</div>
+
+<br />
+
+<Section.Root>
+    <Section.Title>Available elements</Section.Title>
+    <Section.Content>
+        <p class="cursor-default">Home</p>
+        <p class="cursor-default">Friends</p>
+        <p class="cursor-default">Discovery</p>
+    </Section.Content>
+</Section.Root>
diff --git a/src/lib/components/Settings/SettingsPageLink.svelte b/src/lib/components/Settings/SettingsPageLink.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+    import { page } from "$app/stores";
+    import { Badge } from "@ui/badge";
+    import { Button } from "@ui/button";
+
+    export let href: string;
+    export let title: string;
+    export let badge: "wip" | "beta" | "new" | undefined = undefined;
+</script>
+
+<a class:settings-page-active={$page.route.id === href} {href}>
+    <Button variant="ghost" class="w-full flex">
+        {title}
+
+        <span class="flex-grow" />
+
+        {#if badge !== undefined}
+            {#if badge === "wip"}
+                <Badge class="ml-2" variant="warning">WIP</Badge>
+            {:else if badge === "beta"}
+                <Badge class="ml-2" variant="destructive">BETA</Badge>
+            {:else if badge === "new"}
+                <Badge class="ml-2" variant="info">NEW</Badge>
+            {/if}
+        {/if}
+    </Button>
+</a>
diff --git a/src/lib/components/navbar/Navbar.scss b/src/lib/components/navbar/Navbar.scss
@@ -6,40 +6,6 @@ nav.navbar {
 
   @apply bg-background/60 backdrop-blur-2xl;
 
-  .navbar-search {
-    .input-container {
-      @apply relative;
-
-      input {
-        @media (screen and max-width: 400px) {
-          @apply hidden;
-        }
-
-        @apply w-full py-0.5;
-        @apply text-base;
-      }
-
-      .search-button {
-        @apply absolute top-0 right-0;
-        @apply h-full p-1;
-
-        .search-icon {
-          @apply transition-all;
-          @apply text-border;
-          @apply h-full;
-        }
-
-        &:hover .search-icon {
-          @apply text-[#A4A4A4];
-        }
-
-        &:active .search-icon {
-          @apply text-[#646464];
-        }
-      }
-    }
-  }
-
   .navbar-profile {
     @apply justify-self-end;
   }
@@ -56,3 +22,37 @@ nav.navbar {
     }
   }
 }
+
+.navbar-search {
+  .input-container {
+    @apply relative;
+
+    input {
+      @media (screen and max-width: 400px) {
+        @apply hidden;
+      }
+
+      @apply w-full py-0.5;
+      @apply text-base;
+    }
+
+    .search-button {
+      @apply absolute top-0 right-0;
+      @apply h-full p-1;
+
+      .search-icon {
+        @apply transition-all;
+        @apply text-border;
+        @apply h-full;
+      }
+
+      &:hover .search-icon {
+        @apply text-[#A4A4A4];
+      }
+
+      &:active .search-icon {
+        @apply text-[#646464];
+      }
+    }
+  }
+}
diff --git a/src/lib/components/NavbarProfile.svelte → ...ib/components/navbar/NavbarProfile.svelte b/src/lib/components/NavbarProfile.svelte → ...ib/components/navbar/NavbarProfile.svelte
@@ -37,11 +37,11 @@
     </p>
 
     {#if $clientInfo}
-        <a data-sveltekit-reload href={`/user?id=${$clientInfo.user_id}`}>
-            <p use:tippy={{ content: tippyTooltip, placement: "bottom-end" }}>
+        <p use:tippy={{ content: tippyTooltip, placement: "bottom-end" }}>
+            <a data-sveltekit-reload href={`/user?id=${$clientInfo.user_id}`}>
                 {$clientInfo.display_name}
-            </p>
-        </a>
+            </a>
+        </p>
     {:else}
         <p use:tippy={{ content: tippyTooltip, placement: "bottom-end" }}>
             Loading...

diff --git a/src/lib/components/navbar/NavbarProfileTooltip.scss b/src/lib/components/navbar/NavbarProfileTooltip.scss
@@ -0,0 +1,20 @@
+#navbar-profile-tooltip {
+  @apply border border-secondary;
+  @apply overflow-hidden backdrop-blur-xl;
+  @apply w-full rounded-lg;
+  @apply z-50;
+
+  .tooltip-header {
+    @apply bg-secondary/80 text-secondary-foreground;
+    @apply w-full p-2;
+  }
+
+  .tooltip-body {
+    @apply p-1.5;
+    @apply flex flex-col;
+
+    &>* {
+      @apply w-full;
+    }
+  }
+}
diff --git a/...ib/components/NavbarProfileTooltip.svelte → ...onents/navbar/NavbarProfileTooltip.svelte b/...ib/components/NavbarProfileTooltip.svelte → ...onents/navbar/NavbarProfileTooltip.svelte
@@ -1,10 +1,15 @@
 <script lang="ts">
+    import "./NavbarProfileTooltip.scss";
+
     import { getContext } from "svelte";
 
     import { Store } from "tauri-plugin-store-api";
     import { STORE_PATH } from "$lib/constants";
 
+    import { Button } from "@ui/button";
+
     import { type ClientInfoWritable } from "$lib/typings";
+    import { goto } from "$app/navigation";
 
     const clientInfo = getContext<ClientInfoWritable>("clientInfo");
 
@@ -20,25 +25,9 @@
         @{$clientInfo?.username ?? "loading"}
     </div>
     <div class="tooltip-body">
-        <button on:click={logOut}>Logout</button>
+        <a href="/settings">
+            <Button variant="ghost" class="w-full">Settings</Button>
+        </a>
+        <Button variant="ghost" on:click={logOut}>Logout</Button>
     </div>
 </div>
-
-<style lang="scss">
-    #navbar-profile-tooltip {
-        @apply border;
-        @apply overflow-hidden backdrop-blur-xl;
-        @apply w-full rounded-lg;
-        @apply z-50;
-
-        .tooltip-header {
-            @apply bg-secondary/80 text-secondary-foreground;
-            @apply w-full p-2;
-        }
-
-        .tooltip-body > * {
-            @apply bg-secondary/60 text-secondary-foreground;
-            @apply w-full p-2;
-        }
-    }
-</style>
diff --git a/src/lib/components/navbar/navbar.svelte b/src/lib/components/navbar/navbar.svelte
@@ -6,7 +6,7 @@
 
     import { Input } from "@ui/input";
 
-    import NavbarProfile from "@components/NavbarProfile.svelte";
+    import NavbarProfile from "./NavbarProfile.svelte";
 
     let searchQuery = "";
 

diff --git a/src/lib/components/ui/badge/badge.svelte b/src/lib/components/ui/badge/badge.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { type Variant, badgeVariants } from "./index.js";
+	import { cn } from "$lib/utils.js";
+
+	let className: string | undefined | null = undefined;
+	export let href: string | undefined = undefined;
+	export let variant: Variant = "default";
+	export { className as class };
+</script>
+
+<svelte:element
+	this={href ? "a" : "span"}
+	{href}
+	class={cn(badgeVariants({ variant, className }))}
+	{...$$restProps}
+>
+	<slot />
+</svelte:element>
diff --git a/src/lib/components/ui/badge/index.ts b/src/lib/components/ui/badge/index.ts
@@ -0,0 +1,27 @@
+import { type VariantProps, tv } from "tailwind-variants";
+
+export { default as Badge } from "./badge.svelte";
+export const badgeVariants = tv({
+    base: "focus:ring-ring inline-flex select-none items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",
+    variants: {
+        variant: {
+            default:
+                "bg-primary text-primary-foreground hover:bg-primary/80 border-transparent shadow",
+            secondary:
+                "bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent",
+            warning:
+                "bg-yellow-500 text-white dark:bg-yellow-600 dark:text-white hover:bg-yellow-500/80 dark:hover:bg-yellow-600/80 border-transparent",
+            destructive:
+                "bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent shadow",
+            info:
+                "bg-green-600 dark:bg-green-700 text-white hover:bg-green-600/80 dark:hover:bg-green-700/80 border-transparent shadow",
+            outline: "text-foreground",
+
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+
+export type Variant = VariantProps<typeof badgeVariants>["variant"];