From 3f98b1f91ec3fab0d7d34f97d4b70e1dcbbb9fb3 Mon Sep 17 00:00:00 2001
From: April Hall <ari@arithefirst.com>
Date: Sat, 15 Feb 2025 21:57:27 -0500
Subject: [PATCH] feat: Account settings button

---
 src/lib/components/ui/tooltip/index.ts        | 15 +++++++++++
 .../ui/tooltip/tooltip-content.svelte         | 25 +++++++++++++++++++
 src/lib/components/user.svelte                | 13 +++++++++-
 3 files changed, 52 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/components/ui/tooltip/index.ts
 create mode 100644 src/lib/components/ui/tooltip/tooltip-content.svelte

diff --git a/src/lib/components/ui/tooltip/index.ts b/src/lib/components/ui/tooltip/index.ts
new file mode 100644
index 0000000..7e883a8
--- /dev/null
+++ b/src/lib/components/ui/tooltip/index.ts
@@ -0,0 +1,15 @@
+import { Tooltip as TooltipPrimitive } from 'bits-ui';
+import Content from './tooltip-content.svelte';
+
+const Root = TooltipPrimitive.Root;
+const Trigger = TooltipPrimitive.Trigger;
+
+export {
+  Root,
+  Trigger,
+  Content,
+  //
+  Root as Tooltip,
+  Content as TooltipContent,
+  Trigger as TooltipTrigger,
+};
diff --git a/src/lib/components/ui/tooltip/tooltip-content.svelte b/src/lib/components/ui/tooltip/tooltip-content.svelte
new file mode 100644
index 0000000..d4b55a7
--- /dev/null
+++ b/src/lib/components/ui/tooltip/tooltip-content.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { Tooltip as TooltipPrimitive } from 'bits-ui';
+  import { cn, flyAndScale } from '$lib/utils.js';
+
+  type $$Props = TooltipPrimitive.ContentProps;
+
+  let className: $$Props['class'] = undefined;
+  export let sideOffset: $$Props['sideOffset'] = 4;
+  export let transition: $$Props['transition'] = flyAndScale;
+  export let transitionConfig: $$Props['transitionConfig'] = {
+    y: 8,
+    duration: 150,
+  };
+  export { className as class };
+</script>
+
+<TooltipPrimitive.Content
+  {transition}
+  {transitionConfig}
+  {sideOffset}
+  class={cn('z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground', className)}
+  {...$$restProps}
+>
+  <slot />
+</TooltipPrimitive.Content>
diff --git a/src/lib/components/user.svelte b/src/lib/components/user.svelte
index c97de9e..1640be2 100644
--- a/src/lib/components/user.svelte
+++ b/src/lib/components/user.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+  import { Button } from '$lib/components/ui/button/index';
+  import * as Tooltip from '$lib/components/ui/tooltip';
+  import Cog from 'lucide-svelte/icons/cog';
   import type { PageData } from '../../routes/(main)/$types';
   const { data }: { data: PageData } = $props();
 
@@ -6,7 +9,7 @@
 </script>
 
 {#if data.session}
-  <div class="mb-1 flex w-full p-2">
+  <div class="mb-1 flex w-full items-center p-2">
     <div class="avatar mr-2 rounded-sm">
       <div class="h-12 w-12 overflow-hidden rounded-lg border bg-white">
         <img src={imageSrc} alt="Profile image for {data.session?.user.name}" />
@@ -15,5 +18,13 @@
     <div class="flex w-full items-center align-middle">
       <p class="font-bold">{data.session?.user.name}</p>
     </div>
+    <Tooltip.Root>
+      <Tooltip.Trigger>
+        <Button class="aspect-square p-0.5" href="/account"><Cog /></Button>
+      </Tooltip.Trigger>
+      <Tooltip.Content>
+        <p>Account Settings</p>
+      </Tooltip.Content>
+    </Tooltip.Root>
   </div>
 {/if}