feat: Account settings button

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,
+};

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>

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}