From 229be7a5e89fdf3c1a14fd909f8181ec5f77ef7d Mon Sep 17 00:00:00 2001
From: Jacob Owens <jacobowens75@gmail.com>
Date: Mon, 9 Mar 2026 07:56:14 -0700
Subject: [PATCH 1/2] feat: added settings dialog and user settings page

---
 ROADMAP.md                                    |   6 +-
 apps/api/src/routes/v1/uploads/handlers.ts    |  34 +-
 apps/api/src/routes/v1/uploads/index.ts       |   4 +-
 apps/api/src/routes/v1/uploads/routes.ts      |  34 +-
 apps/api/src/routes/v1/uploads/schema.ts      |  24 +
 .../components/chat/message-action-bar.tsx    |  16 +-
 .../components/chat/message-edit-input.tsx    |   9 +
 apps/web/src/components/chat/message-item.tsx |   4 +-
 .../settings/my-account-settings.tsx          | 308 ++++++++
 .../components/settings/settings-dialog.tsx   | 139 ++++
 .../sidebar/channel-panel/user-bar.tsx        |  10 +-
 apps/web/src/context/settings-context.tsx     |  31 +
 apps/web/src/routes/_authenticated.tsx        |  17 +-
 packages/auth/src/lib/auth.ts                 |  10 +
 packages/db/src/schemas/users.ts              |  11 +-
 packages/ui/src/components/breadcrumb.tsx     | 106 +++
 packages/ui/src/components/sidebar.tsx        | 725 ++++++++++++++++++
 packages/ui/src/hooks/use-mobile.ts           |  19 +
 packages/ui/src/styles/globals.css            | 120 ++-
 19 files changed, 1538 insertions(+), 89 deletions(-)
 create mode 100644 apps/web/src/components/settings/my-account-settings.tsx
 create mode 100644 apps/web/src/components/settings/settings-dialog.tsx
 create mode 100644 apps/web/src/context/settings-context.tsx
 create mode 100644 packages/ui/src/components/breadcrumb.tsx
 create mode 100644 packages/ui/src/components/sidebar.tsx
 create mode 100644 packages/ui/src/hooks/use-mobile.ts

diff --git a/ROADMAP.md b/ROADMAP.md
index 64da683..c056629 100644
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -23,10 +23,10 @@
 
 - [x] File/image attachment uploads (R2)
 - [x] Message deletion
-- [ ] Message editing UI
-- [ ] User profiles (bio, custom status, avatar upload)
+- [x] Message editing UI
+- [x] User profiles (bio, custom status, avatar upload)
 - [ ] Channel edit/delete
-- [ ] Settings pages
+- [x] Settings pages
 
 ## Phase 2 — Permissions & Moderation
 
diff --git a/apps/api/src/routes/v1/uploads/handlers.ts b/apps/api/src/routes/v1/uploads/handlers.ts
index a39ab34..3d79650 100644
--- a/apps/api/src/routes/v1/uploads/handlers.ts
+++ b/apps/api/src/routes/v1/uploads/handlers.ts
@@ -7,8 +7,8 @@ import { and, eq } from "drizzle-orm"
 import * as HttpStatusCodes from "@/lib/helpers/http/status-codes"
 import { s3Client } from "@/lib/s3"
 import type { AppRouteHandler } from "@/lib/types/app-types"
-import type { PresignRoute } from "./routes"
-import { PRESIGNED_URL_EXPIRY_SECONDS } from "./schema"
+import type { AvatarPresignRoute, PresignRoute } from "./routes"
+import { MAX_AVATAR_SIZE, PRESIGNED_URL_EXPIRY_SECONDS } from "./schema"
 
 const DM_CHANNEL_TYPES = ["dm", "group_dm"] as const
 
@@ -107,3 +107,33 @@ export const presign: AppRouteHandler<PresignRoute> = async (c) => {
 
   return c.json({ uploadUrl, fileUrl, key }, HttpStatusCodes.OK)
 }
+
+export const avatarPresign: AppRouteHandler<AvatarPresignRoute> = async (c) => {
+  const user = c.var.user
+  const { filename, contentType, size } = c.req.valid("json")
+
+  if (size > MAX_AVATAR_SIZE) {
+    return c.json(
+      { success: false, message: "File too large" },
+      HttpStatusCodes.REQUEST_TOO_LONG
+    )
+  }
+
+  const sanitizedFilename = filename.replace(/[^a-zA-Z0-9._-]/g, "_")
+  const key = `avatars/${user.id}/${crypto.randomUUID()}/${sanitizedFilename}`
+
+  const command = new PutObjectCommand({
+    Bucket: env.S3_BUCKET_NAME,
+    Key: key,
+    ContentType: contentType,
+    ContentLength: size,
+  })
+
+  const uploadUrl = await getSignedUrl(s3Client, command, {
+    expiresIn: PRESIGNED_URL_EXPIRY_SECONDS,
+  })
+
+  const fileUrl = `${env.S3_PUBLIC_URL.replace(/\/$/, "")}/${key}`
+
+  return c.json({ uploadUrl, fileUrl }, HttpStatusCodes.OK)
+}
diff --git a/apps/api/src/routes/v1/uploads/index.ts b/apps/api/src/routes/v1/uploads/index.ts
index dc9628b..692df02 100644
--- a/apps/api/src/routes/v1/uploads/index.ts
+++ b/apps/api/src/routes/v1/uploads/index.ts
@@ -2,6 +2,8 @@ import { createRouter } from "@/lib/helpers/app/create-app"
 import * as handlers from "./handlers"
 import * as routes from "./routes"
 
-const uploadsRouter = createRouter().openapi(routes.presign, handlers.presign)
+const uploadsRouter = createRouter()
+  .openapi(routes.presign, handlers.presign)
+  .openapi(routes.avatarPresign, handlers.avatarPresign)
 
 export default uploadsRouter
diff --git a/apps/api/src/routes/v1/uploads/routes.ts b/apps/api/src/routes/v1/uploads/routes.ts
index a16994b..8a943ce 100644
--- a/apps/api/src/routes/v1/uploads/routes.ts
+++ b/apps/api/src/routes/v1/uploads/routes.ts
@@ -8,7 +8,12 @@ import {
   unauthorizedSchema,
 } from "@/lib/helpers/openapi/schemas"
 import { sessionAuthMiddleware } from "@/middleware/session-auth"
-import { presignRequestSchema, presignResponseSchema } from "./schema"
+import {
+  avatarPresignRequestSchema,
+  avatarPresignResponseSchema,
+  presignRequestSchema,
+  presignResponseSchema,
+} from "./schema"
 
 export const presign = createRoute({
   path: "/uploads/presign",
@@ -37,3 +42,30 @@ export const presign = createRoute({
 })
 
 export type PresignRoute = typeof presign
+
+export const avatarPresign = createRoute({
+  path: "/uploads/avatar/presign",
+  method: "post",
+  summary: "Request a presigned URL for avatar upload",
+  description:
+    "Returns a presigned URL for uploading a user avatar to S3-compatible storage.",
+  tags: ["Uploads"],
+  middleware: [sessionAuthMiddleware] as const,
+  request: {
+    body: jsonContent({
+      schema: avatarPresignRequestSchema,
+      description: "Avatar file metadata",
+    }),
+  },
+  responses: {
+    [HttpStatusCodes.OK]: jsonContent({
+      schema: avatarPresignResponseSchema,
+      description: "Presigned URL for avatar upload",
+    }),
+    [HttpStatusCodes.UNAUTHORIZED]: unauthorizedSchema,
+    [HttpStatusCodes.REQUEST_TOO_LONG]: payloadTooLargeSchema,
+    [HttpStatusCodes.INTERNAL_SERVER_ERROR]: internalServerErrorSchema,
+  },
+})
+
+export type AvatarPresignRoute = typeof avatarPresign
diff --git a/apps/api/src/routes/v1/uploads/schema.ts b/apps/api/src/routes/v1/uploads/schema.ts
index 64efbef..22b9b2b 100644
--- a/apps/api/src/routes/v1/uploads/schema.ts
+++ b/apps/api/src/routes/v1/uploads/schema.ts
@@ -23,3 +23,27 @@ export const presignResponseSchema = z.object({
   fileUrl: z.string().url(),
   key: z.string(),
 })
+
+const AVATAR_MIME_TYPES = [
+  "image/jpeg",
+  "image/png",
+  "image/gif",
+  "image/webp",
+] as const
+
+export const MAX_AVATAR_SIZE = 2 * 1024 * 1024 // 2 MB
+
+export const avatarPresignRequestSchema = z.object({
+  filename: z.string().min(1).max(256),
+  contentType: z
+    .string()
+    .refine((ct) => (AVATAR_MIME_TYPES as readonly string[]).includes(ct), {
+      message: "Unsupported image type",
+    }),
+  size: z.number().int().min(1).max(MAX_AVATAR_SIZE),
+})
+
+export const avatarPresignResponseSchema = z.object({
+  uploadUrl: z.string().url(),
+  fileUrl: z.string().url(),
+})
diff --git a/apps/web/src/components/chat/message-action-bar.tsx b/apps/web/src/components/chat/message-action-bar.tsx
index 52e3a19..48c73fc 100644
--- a/apps/web/src/components/chat/message-action-bar.tsx
+++ b/apps/web/src/components/chat/message-action-bar.tsx
@@ -12,7 +12,7 @@ import {
   TooltipTrigger,
 } from "@repo/ui/components/tooltip"
 import { MoreHorizontal, Reply } from "lucide-react"
-import { useEffect, useState } from "react"
+import { useCallback, useEffect, useState } from "react"
 import { EmojiReactionPicker } from "./emoji-reaction-picker"
 
 interface MessageActionBarProps {
@@ -36,11 +36,21 @@ export function MessageActionBar({
 }: MessageActionBarProps) {
   const [isEmojiOpen, setIsEmojiOpen] = useState(false)
   const [isMoreOpen, setIsMoreOpen] = useState(false)
+  const [suppressTooltip, setSuppressTooltip] = useState(false)
 
   useEffect(() => {
     onOverlayOpenChange?.(isEmojiOpen || isMoreOpen)
   }, [isEmojiOpen, isMoreOpen, onOverlayOpenChange])
 
+  const handleMoreOpenChange = useCallback((open: boolean) => {
+    setIsMoreOpen(open)
+    if (!open) {
+      // Suppress tooltip briefly after dropdown closes to prevent it from sticking
+      setSuppressTooltip(true)
+      setTimeout(() => setSuppressTooltip(false), 150)
+    }
+  }, [])
+
   return (
     <div className="flex items-center gap-0.5 rounded-md border border-border bg-background p-0.5 shadow-sm">
       <EmojiReactionPicker onSelect={onReact} onOpenChange={setIsEmojiOpen} />
@@ -61,8 +71,8 @@ export function MessageActionBar({
         <TooltipContent side="top">Reply</TooltipContent>
       </Tooltip>
 
-      <DropdownMenu open={isMoreOpen} onOpenChange={setIsMoreOpen}>
-        <Tooltip>
+      <DropdownMenu open={isMoreOpen} onOpenChange={handleMoreOpenChange}>
+        <Tooltip open={isMoreOpen || suppressTooltip ? false : undefined}>
           <TooltipTrigger asChild>
             <DropdownMenuTrigger asChild>
               <Button
diff --git a/apps/web/src/components/chat/message-edit-input.tsx b/apps/web/src/components/chat/message-edit-input.tsx
index aff7537..679ad2a 100644
--- a/apps/web/src/components/chat/message-edit-input.tsx
+++ b/apps/web/src/components/chat/message-edit-input.tsx
@@ -79,6 +79,15 @@ export function MessageEditInput({
     []
   )
 
+  // Force focus after mount — the Radix dropdown close animation steals focus back
+  useEffect(() => {
+    if (!editor) return
+    const timeout = setTimeout(() => {
+      editor.commands.focus("end")
+    }, 200)
+    return () => clearTimeout(timeout)
+  }, [editor])
+
   const handleSave = useCallback(() => {
     if (!editor) return
 
diff --git a/apps/web/src/components/chat/message-item.tsx b/apps/web/src/components/chat/message-item.tsx
index d5b9cc4..c5fab99 100644
--- a/apps/web/src/components/chat/message-item.tsx
+++ b/apps/web/src/components/chat/message-item.tsx
@@ -93,7 +93,7 @@ function ReplyPreview({
     <button
       type="button"
       onClick={() => scrollToMessage(referencedMessage.id)}
-      className="mb-0.5 flex cursor-pointer items-center gap-1.5 rounded-sm text-xs hover:opacity-80"
+      className="mb-0.5 flex min-w-0 max-w-full cursor-pointer items-center gap-1.5 rounded-sm text-xs hover:opacity-80"
     >
       <div className="mb-1 ml-4 h-3 w-8 rounded-tl-md border-t-2 border-l-2 border-muted-foreground/40" />
       <Avatar size="sm" className="size-4">
@@ -102,7 +102,7 @@ function ReplyPreview({
           {nameInitial(author.displayUsername ?? author.name)}
         </AvatarFallback>
       </Avatar>
-      <span className="font-semibold text-foreground/80">
+      <span className="shrink-0 font-semibold text-foreground/80">
         {author.displayUsername ?? author.name}
       </span>
       {truncatedContent && (
diff --git a/apps/web/src/components/settings/my-account-settings.tsx b/apps/web/src/components/settings/my-account-settings.tsx
new file mode 100644
index 0000000..1cea6b7
--- /dev/null
+++ b/apps/web/src/components/settings/my-account-settings.tsx
@@ -0,0 +1,308 @@
+import { authClient } from "@repo/auth/client"
+import { Avatar, AvatarFallback, AvatarImage } from "@repo/ui/components/avatar"
+import { Button } from "@repo/ui/components/button"
+import { Input } from "@repo/ui/components/input"
+import { Label } from "@repo/ui/components/label"
+import { Separator } from "@repo/ui/components/separator"
+import { Textarea } from "@repo/ui/components/textarea"
+import { cn } from "@repo/ui/lib/utils"
+import { Camera, Loader2, Upload } from "lucide-react"
+import { useCallback, useEffect, useRef, useState } from "react"
+import { toast } from "sonner"
+import { apiClient } from "@/lib/api-client"
+
+const MAX_BIO_LENGTH = 255
+const MAX_STATUS_LENGTH = 128
+const MAX_AVATAR_BYTES = 2 * 1024 * 1024
+const ACCEPTED_IMAGE_TYPES = [
+  "image/jpeg",
+  "image/png",
+  "image/gif",
+  "image/webp",
+]
+
+function validateAvatarFile(file: File): string | null {
+  if (!ACCEPTED_IMAGE_TYPES.includes(file.type)) {
+    return "Only JPEG, PNG, GIF, and WebP images are allowed"
+  }
+  if (file.size > MAX_AVATAR_BYTES) {
+    return "Avatar must be under 2 MB"
+  }
+  return null
+}
+
+export function MyAccountSettings() {
+  const { data: session } = authClient.useSession()
+  const user = session?.user
+
+  const [name, setName] = useState("")
+  const [bio, setBio] = useState("")
+  const [status, setStatus] = useState("")
+  const [avatarPreview, setAvatarPreview] = useState<string | null>(null)
+  const [avatarFile, setAvatarFile] = useState<File | null>(null)
+  const [isSaving, setIsSaving] = useState(false)
+  const [isDragging, setIsDragging] = useState(false)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const dragCountRef = useRef(0)
+
+  useEffect(() => {
+    if (!user) return
+    setName(user.name ?? "")
+    setBio((user.bio as string) ?? "")
+    setStatus((user.status as string) ?? "")
+  }, [user])
+
+  const setAvatarFromFile = useCallback((file: File) => {
+    const error = validateAvatarFile(file)
+    if (error) {
+      toast.error(error)
+      return
+    }
+    setAvatarFile(file)
+    setAvatarPreview(URL.createObjectURL(file))
+  }, [])
+
+  const handleAvatarSelect = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0]
+      if (file) setAvatarFromFile(file)
+    },
+    [setAvatarFromFile]
+  )
+
+  const handleDragEnter = useCallback((e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    dragCountRef.current += 1
+    setIsDragging(true)
+  }, [])
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    dragCountRef.current -= 1
+    if (dragCountRef.current === 0) {
+      setIsDragging(false)
+    }
+  }, [])
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+  }, [])
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault()
+      e.stopPropagation()
+      dragCountRef.current = 0
+      setIsDragging(false)
+
+      const file = e.dataTransfer.files[0]
+      if (file) setAvatarFromFile(file)
+    },
+    [setAvatarFromFile]
+  )
+
+  const uploadAvatar = useCallback(async (file: File): Promise<string> => {
+    const res = await apiClient.v1.uploads.avatar.presign.$post({
+      json: {
+        filename: file.name,
+        contentType: file.type,
+        size: file.size,
+      },
+    })
+
+    if (!res.ok) {
+      throw new Error("Failed to get upload URL")
+    }
+
+    const { uploadUrl, fileUrl } = await res.json()
+
+    const uploadRes = await fetch(uploadUrl, {
+      method: "PUT",
+      body: file,
+      headers: { "Content-Type": file.type },
+    })
+
+    if (!uploadRes.ok) {
+      throw new Error("Failed to upload avatar")
+    }
+
+    return fileUrl
+  }, [])
+
+  const handleSave = useCallback(async () => {
+    if (!user) return
+    setIsSaving(true)
+
+    try {
+      let imageUrl = user.image
+
+      if (avatarFile) {
+        imageUrl = await uploadAvatar(avatarFile)
+      }
+
+      await authClient.updateUser({
+        name: name.trim(),
+        image: imageUrl ?? undefined,
+        bio: bio.trim() || undefined,
+        status: status.trim() || undefined,
+      })
+
+      setAvatarFile(null)
+      if (avatarPreview) {
+        URL.revokeObjectURL(avatarPreview)
+        setAvatarPreview(null)
+      }
+
+      toast.success("Profile updated")
+    } catch {
+      toast.error("Failed to update profile")
+    } finally {
+      setIsSaving(false)
+    }
+  }, [user, name, bio, status, avatarFile, avatarPreview, uploadAvatar])
+
+  const hasChanges =
+    user &&
+    (name.trim() !== (user.name ?? "") ||
+      bio.trim() !== ((user.bio as string) ?? "") ||
+      status.trim() !== ((user.status as string) ?? "") ||
+      avatarFile !== null)
+
+  const isValid = name.trim().length > 0
+
+  if (!user) return null
+
+  const displayAvatar = avatarPreview ?? user.image
+  const initials = user.name
+    ?.split(" ")
+    .map((n) => n[0])
+    .join("")
+    .slice(0, 2)
+    .toUpperCase()
+
+  return (
+    <div className="space-y-6">
+      {/* biome-ignore lint/a11y/noStaticElementInteractions: drop zone for avatar upload */}
+      <div
+        className={cn(
+          "flex items-center gap-4 rounded-lg border-2 border-dashed p-4 transition-colors",
+          isDragging ? "border-primary bg-primary/5" : "border-transparent"
+        )}
+        onDragEnter={handleDragEnter}
+        onDragLeave={handleDragLeave}
+        onDragOver={handleDragOver}
+        onDrop={handleDrop}
+      >
+        <button
+          type="button"
+          className="group relative shrink-0"
+          onClick={() => fileInputRef.current?.click()}
+        >
+          <Avatar className="size-20">
+            {displayAvatar && (
+              <AvatarImage src={displayAvatar} alt={user.name} />
+            )}
+            <AvatarFallback className="text-lg font-semibold">
+              {initials ?? "?"}
+            </AvatarFallback>
+          </Avatar>
+          <div className="absolute inset-0 flex items-center justify-center rounded-full bg-black/50 opacity-0 transition-opacity group-hover:opacity-100">
+            <Camera className="size-5 text-white" />
+          </div>
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept="image/jpeg,image/png,image/gif,image/webp"
+            className="hidden"
+            onChange={handleAvatarSelect}
+          />
+        </button>
+        <div className="min-w-0">
+          <p className="text-sm font-semibold">{user.name}</p>
+          <p className="text-xs text-muted-foreground">
+            {user.username ? `@${user.username}` : user.email}
+          </p>
+          <div className="mt-2 flex items-center gap-2">
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={() => fileInputRef.current?.click()}
+            >
+              Change avatar
+            </Button>
+            <span className="flex items-center gap-1 text-xs text-muted-foreground">
+              <Upload className="size-3" />
+              or drag & drop
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <Separator />
+
+      <div className="space-y-4">
+        <div className="space-y-1.5">
+          <Label htmlFor="display-name">Display Name</Label>
+          <Input
+            id="display-name"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            maxLength={50}
+          />
+        </div>
+
+        <div className="space-y-1.5">
+          <Label htmlFor="email">Email</Label>
+          <Input id="email" value={user.email} disabled />
+        </div>
+
+        <div className="space-y-1.5">
+          <div className="flex items-center justify-between">
+            <Label htmlFor="status">Status</Label>
+            <span className="text-xs text-muted-foreground">
+              {status.length}/{MAX_STATUS_LENGTH}
+            </span>
+          </div>
+          <Input
+            id="status"
+            value={status}
+            onChange={(e) => setStatus(e.target.value)}
+            placeholder="What are you up to?"
+            maxLength={MAX_STATUS_LENGTH}
+          />
+        </div>
+
+        <div className="space-y-1.5">
+          <div className="flex items-center justify-between">
+            <Label htmlFor="bio">Bio</Label>
+            <span className="text-xs text-muted-foreground">
+              {bio.length}/{MAX_BIO_LENGTH}
+            </span>
+          </div>
+          <Textarea
+            id="bio"
+            value={bio}
+            onChange={(e) => setBio(e.target.value)}
+            placeholder="Tell us about yourself"
+            maxLength={MAX_BIO_LENGTH}
+            className="min-h-20 resize-none"
+          />
+        </div>
+      </div>
+
+      <div className="flex justify-end">
+        <Button
+          onClick={handleSave}
+          disabled={!hasChanges || !isValid || isSaving}
+        >
+          {isSaving && <Loader2 className="size-4 animate-spin" />}
+          Save Changes
+        </Button>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/web/src/components/settings/settings-dialog.tsx b/apps/web/src/components/settings/settings-dialog.tsx
new file mode 100644
index 0000000..1130342
--- /dev/null
+++ b/apps/web/src/components/settings/settings-dialog.tsx
@@ -0,0 +1,139 @@
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@repo/ui/components/breadcrumb"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+} from "@repo/ui/components/dialog"
+import { Input } from "@repo/ui/components/input"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from "@repo/ui/components/sidebar"
+import {
+  Bell,
+  Globe,
+  Keyboard,
+  type LucideIcon,
+  MessageCircle,
+  Paintbrush,
+  Search,
+  Settings,
+  Shield,
+  User,
+} from "lucide-react"
+import { useMemo, useState } from "react"
+import { useSettings } from "@/context/settings-context"
+import { MyAccountSettings } from "./my-account-settings"
+
+interface SettingsNav {
+  name: string
+  icon: LucideIcon
+}
+
+const settingsNav: SettingsNav[] = [
+  { name: "My Account", icon: User },
+  { name: "Appearance", icon: Paintbrush },
+  { name: "Notifications", icon: Bell },
+  { name: "Messages & Media", icon: MessageCircle },
+  { name: "Language & Region", icon: Globe },
+  { name: "Accessibility", icon: Keyboard },
+  { name: "Privacy & Safety", icon: Shield },
+  { name: "Advanced", icon: Settings },
+]
+
+export function SettingsDialog() {
+  const { isOpen, closeSettings } = useSettings()
+  const [activeItem, setActiveItem] = useState("My Account")
+  const [search, setSearch] = useState("")
+
+  const filteredNav = useMemo(() => {
+    if (!search.trim()) return settingsNav
+    const q = search.toLowerCase()
+    return settingsNav.filter((item) => item.name.toLowerCase().includes(q))
+  }, [search])
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && closeSettings()}>
+      <DialogContent className="overflow-hidden p-0 md:max-h-[700px] md:max-w-[850px] lg:max-w-[1000px]">
+        <DialogTitle className="sr-only">Settings</DialogTitle>
+        <DialogDescription className="sr-only">
+          Customize your settings here.
+        </DialogDescription>
+        <SidebarProvider className="min-h-0 items-start">
+          <Sidebar collapsible="none" className="hidden border-r md:flex">
+            <SidebarHeader>
+              <div className="relative">
+                <Search className="pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2 text-muted-foreground" />
+                <Input
+                  placeholder="Search settings..."
+                  value={search}
+                  onChange={(e) => setSearch(e.target.value)}
+                  className="h-8 pl-8"
+                  autoFocus={false}
+                  tabIndex={-1}
+                />
+              </div>
+            </SidebarHeader>
+            <SidebarContent>
+              <SidebarGroup>
+                <SidebarGroupContent>
+                  <SidebarMenu>
+                    {filteredNav.map((item) => (
+                      <SidebarMenuItem key={item.name}>
+                        <SidebarMenuButton
+                          isActive={item.name === activeItem}
+                          onClick={() => setActiveItem(item.name)}
+                        >
+                          <item.icon />
+                          <span>{item.name}</span>
+                        </SidebarMenuButton>
+                      </SidebarMenuItem>
+                    ))}
+                  </SidebarMenu>
+                </SidebarGroupContent>
+              </SidebarGroup>
+            </SidebarContent>
+          </Sidebar>
+          <main className="flex h-[660px] flex-1 flex-col overflow-hidden">
+            <header className="flex h-14 shrink-0 items-center border-b px-4">
+              <Breadcrumb>
+                <BreadcrumbList>
+                  <BreadcrumbItem className="hidden md:block">
+                    <span className="text-muted-foreground">Settings</span>
+                  </BreadcrumbItem>
+                  <BreadcrumbSeparator className="hidden md:block" />
+                  <BreadcrumbItem>
+                    <BreadcrumbPage>{activeItem}</BreadcrumbPage>
+                  </BreadcrumbItem>
+                </BreadcrumbList>
+              </Breadcrumb>
+            </header>
+            <div className="flex flex-1 flex-col gap-4 overflow-y-auto p-4">
+              {activeItem === "My Account" ? (
+                <MyAccountSettings />
+              ) : (
+                <div className="flex items-center justify-center py-12 text-sm text-muted-foreground">
+                  {activeItem} settings coming soon.
+                </div>
+              )}
+            </div>
+          </main>
+        </SidebarProvider>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/apps/web/src/components/sidebar/channel-panel/user-bar.tsx b/apps/web/src/components/sidebar/channel-panel/user-bar.tsx
index 4ec17c3..8d15f1c 100644
--- a/apps/web/src/components/sidebar/channel-panel/user-bar.tsx
+++ b/apps/web/src/components/sidebar/channel-panel/user-bar.tsx
@@ -19,6 +19,7 @@ import {
 } from "lucide-react"
 import { LayoutGroup, motion } from "motion/react"
 import { useTheme } from "next-themes"
+import { useSettings } from "@/context/settings-context"
 import { UserAvatar } from "../../ui/user-avatar"
 
 const themes = [
@@ -76,6 +77,7 @@ function ThemeSwitcher({
 export function UserBar() {
   const { data: session } = authClient.useSession()
   const { setTheme, theme } = useTheme()
+  const { openSettings } = useSettings()
   const name = session?.user.name ?? "User"
   const email = session?.user.email ?? ""
 
@@ -87,10 +89,6 @@ export function UserBar() {
     }
   }
 
-  const handleOpenSettings = () => {
-    // TODO: Navigate to settings page
-  }
-
   return (
     <div className="border-t border-border px-2 py-2">
       <div className="flex items-center gap-1">
@@ -144,7 +142,7 @@ export function UserBar() {
             <DropdownMenuSeparator />
 
             <DropdownMenuGroup>
-              <DropdownMenuItem onSelect={handleOpenSettings}>
+              <DropdownMenuItem onSelect={openSettings}>
                 <Settings className="h-4 w-4 mr-2" />
                 Settings
               </DropdownMenuItem>
@@ -162,7 +160,7 @@ export function UserBar() {
           type="button"
           aria-label="Open settings"
           title="Open settings"
-          onClick={handleOpenSettings}
+          onClick={openSettings}
           className="flex size-8 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-foreground/5 hover:text-foreground"
         >
           <Settings className="size-4" />
diff --git a/apps/web/src/context/settings-context.tsx b/apps/web/src/context/settings-context.tsx
new file mode 100644
index 0000000..5055f54
--- /dev/null
+++ b/apps/web/src/context/settings-context.tsx
@@ -0,0 +1,31 @@
+import type { ReactNode } from "react"
+import { createContext, useCallback, useContext, useState } from "react"
+
+interface SettingsContextValue {
+  isOpen: boolean
+  openSettings: () => void
+  closeSettings: () => void
+}
+
+const SettingsContext = createContext<SettingsContextValue | null>(null)
+
+export function useSettings() {
+  const ctx = useContext(SettingsContext)
+  if (!ctx) {
+    throw new Error("useSettings must be used within a SettingsProvider")
+  }
+  return ctx
+}
+
+export function SettingsProvider({ children }: { children: ReactNode }) {
+  const [isOpen, setIsOpen] = useState(false)
+
+  const openSettings = useCallback(() => setIsOpen(true), [])
+  const closeSettings = useCallback(() => setIsOpen(false), [])
+
+  return (
+    <SettingsContext.Provider value={{ isOpen, openSettings, closeSettings }}>
+      {children}
+    </SettingsContext.Provider>
+  )
+}
diff --git a/apps/web/src/routes/_authenticated.tsx b/apps/web/src/routes/_authenticated.tsx
index 1a062a6..d88a196 100644
--- a/apps/web/src/routes/_authenticated.tsx
+++ b/apps/web/src/routes/_authenticated.tsx
@@ -8,7 +8,9 @@ import {
 } from "@tanstack/react-router"
 import { useEffect } from "react"
 import { OnboardingDialog } from "../components/onboarding/onboarding-dialog"
+import { SettingsDialog } from "../components/settings/settings-dialog"
 import { Sidebar } from "../components/sidebar"
+import { SettingsProvider } from "../context/settings-context"
 import { SocketProvider } from "../context/socket-context"
 
 const LAST_PATH_KEY = "townhall:last-path"
@@ -64,12 +66,15 @@ function AuthenticatedLayout() {
 
   return (
     <SocketProvider enabled={!!session}>
-      <div className="flex h-screen select-none overflow-hidden bg-background text-foreground">
-        <Sidebar>
-          <Outlet />
-        </Sidebar>
-        <OnboardingDialog open={showOnboarding} />
-      </div>
+      <SettingsProvider>
+        <div className="flex h-screen select-none overflow-hidden bg-background text-foreground">
+          <Sidebar>
+            <Outlet />
+          </Sidebar>
+          <OnboardingDialog open={showOnboarding} />
+          <SettingsDialog />
+        </div>
+      </SettingsProvider>
     </SocketProvider>
   )
 }
diff --git a/packages/auth/src/lib/auth.ts b/packages/auth/src/lib/auth.ts
index 0c5933b..58772dc 100644
--- a/packages/auth/src/lib/auth.ts
+++ b/packages/auth/src/lib/auth.ts
@@ -85,6 +85,16 @@ export const auth = betterAuth({
         defaultValue: false,
         returned: true,
       },
+      bio: {
+        type: "string",
+        returned: true,
+        required: false,
+      },
+      status: {
+        type: "string",
+        returned: true,
+        required: false,
+      },
     },
   },
   trustedOrigins:
diff --git a/packages/db/src/schemas/users.ts b/packages/db/src/schemas/users.ts
index e6410bf..a018590 100644
--- a/packages/db/src/schemas/users.ts
+++ b/packages/db/src/schemas/users.ts
@@ -1,5 +1,12 @@
 import { relations } from "drizzle-orm"
-import { boolean, pgTable, text, timestamp, uuid } from "drizzle-orm/pg-core"
+import {
+  boolean,
+  pgTable,
+  text,
+  timestamp,
+  uuid,
+  varchar,
+} from "drizzle-orm/pg-core"
 import { account } from "./accounts"
 import { guildMember } from "./guild-members"
 import { guild } from "./guilds"
@@ -26,6 +33,8 @@ export const user = pgTable("user", {
   displayUsername: text("display_username"),
   twoFactorEnabled: boolean("two_factor_enabled").default(false),
   onboardingCompleted: boolean("onboarding_completed").default(false).notNull(),
+  bio: varchar("bio", { length: 255 }),
+  status: varchar("status", { length: 128 }),
 })
 
 export const userRelations = relations(user, ({ many }) => ({
diff --git a/packages/ui/src/components/breadcrumb.tsx b/packages/ui/src/components/breadcrumb.tsx
new file mode 100644
index 0000000..a9dbdf6
--- /dev/null
+++ b/packages/ui/src/components/breadcrumb.tsx
@@ -0,0 +1,106 @@
+import { cn } from "@repo/ui/lib/utils"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
+import { Slot } from "radix-ui"
+import type * as React from "react"
+
+function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        "flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground sm:gap-2.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1.5", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot.Root : "a"
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn("transition-colors hover:text-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      aria-current="page"
+      className={cn("font-normal text-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? <ChevronRight />}
+    </li>
+  )
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontal className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  )
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}
diff --git a/packages/ui/src/components/sidebar.tsx b/packages/ui/src/components/sidebar.tsx
new file mode 100644
index 0000000..9aa0449
--- /dev/null
+++ b/packages/ui/src/components/sidebar.tsx
@@ -0,0 +1,725 @@
+"use client"
+
+import { Button } from "@repo/ui/components/button"
+import { Input } from "@repo/ui/components/input"
+import { Separator } from "@repo/ui/components/separator"
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@repo/ui/components/sheet"
+import { Skeleton } from "@repo/ui/components/skeleton"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@repo/ui/components/tooltip"
+import { useIsMobile } from "@repo/ui/hooks/use-mobile"
+import { cn } from "@repo/ui/lib/utils"
+import { cva, type VariantProps } from "class-variance-authority"
+import { PanelLeftIcon } from "lucide-react"
+import { Slot } from "radix-ui"
+import * as React from "react"
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state"
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH_MOBILE = "18rem"
+const SIDEBAR_WIDTH_ICON = "3rem"
+const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+
+type SidebarContextProps = {
+  state: "expanded" | "collapsed"
+  open: boolean
+  setOpen: (open: boolean) => void
+  openMobile: boolean
+  setOpenMobile: (open: boolean) => void
+  isMobile: boolean
+  toggleSidebar: () => void
+}
+
+const SidebarContext = React.createContext<SidebarContextProps | null>(null)
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext)
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.")
+  }
+
+  return context
+}
+
+function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  defaultOpen?: boolean
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}) {
+  const isMobile = useIsMobile()
+  const [openMobile, setOpenMobile] = React.useState(false)
+
+  // This is the internal state of the sidebar.
+  // We use openProp and setOpenProp for control from outside the component.
+  const [_open, _setOpen] = React.useState(defaultOpen)
+  const open = openProp ?? _open
+  const setOpen = React.useCallback(
+    (value: boolean | ((value: boolean) => boolean)) => {
+      const openState = typeof value === "function" ? value(open) : value
+      if (setOpenProp) {
+        setOpenProp(openState)
+      } else {
+        _setOpen(openState)
+      }
+
+      // This sets the cookie to keep the sidebar state.
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+    },
+    [setOpenProp, open]
+  )
+
+  // Helper to toggle the sidebar.
+  const toggleSidebar = React.useCallback(() => {
+    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
+  }, [isMobile, setOpen, setOpenMobile])
+
+  // Adds a keyboard shortcut to toggle the sidebar.
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+        (event.metaKey || event.ctrlKey)
+      ) {
+        event.preventDefault()
+        toggleSidebar()
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+    return () => window.removeEventListener("keydown", handleKeyDown)
+  }, [toggleSidebar])
+
+  // We add a state so that we can do data-state="expanded" or "collapsed".
+  // This makes it easier to style the sidebar with Tailwind classes.
+  const state = open ? "expanded" : "collapsed"
+
+  const contextValue = React.useMemo<SidebarContextProps>(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar,
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+  )
+
+  return (
+    <SidebarContext.Provider value={contextValue}>
+      <TooltipProvider delayDuration={0}>
+        <div
+          data-slot="sidebar-wrapper"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH,
+              "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+              ...style,
+            } as React.CSSProperties
+          }
+          className={cn(
+            "group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar",
+            className
+          )}
+          {...props}
+        >
+          {children}
+        </div>
+      </TooltipProvider>
+    </SidebarContext.Provider>
+  )
+}
+
+function Sidebar({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  side?: "left" | "right"
+  variant?: "sidebar" | "floating" | "inset"
+  collapsible?: "offcanvas" | "icon" | "none"
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+
+  if (collapsible === "none") {
+    return (
+      <div
+        data-slot="sidebar"
+        className={cn(
+          "flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    )
+  }
+
+  if (isMobile) {
+    return (
+      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+        <SheetContent
+          data-sidebar="sidebar"
+          data-slot="sidebar"
+          data-mobile="true"
+          className="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+            } as React.CSSProperties
+          }
+          side={side}
+        >
+          <SheetHeader className="sr-only">
+            <SheetTitle>Sidebar</SheetTitle>
+            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+          </SheetHeader>
+          <div className="flex h-full w-full flex-col">{children}</div>
+        </SheetContent>
+      </Sheet>
+    )
+  }
+
+  return (
+    <div
+      className="group peer hidden text-sidebar-foreground md:block"
+      data-state={state}
+      data-collapsible={state === "collapsed" ? collapsible : ""}
+      data-variant={variant}
+      data-side={side}
+      data-slot="sidebar"
+    >
+      {/* This is what handles the sidebar gap on desktop */}
+      <div
+        data-slot="sidebar-gap"
+        className={cn(
+          "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+          "group-data-[collapsible=offcanvas]:w-0",
+          "group-data-[side=right]:rotate-180",
+          variant === "floating" || variant === "inset"
+            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+        )}
+      />
+      <div
+        data-slot="sidebar-container"
+        className={cn(
+          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
+          side === "left"
+            ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+            : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+          // Adjust the padding for floating and inset variants.
+          variant === "floating" || variant === "inset"
+            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+          className
+        )}
+        {...props}
+      >
+        <div
+          data-sidebar="sidebar"
+          data-slot="sidebar-inner"
+          className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm"
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function SidebarTrigger({
+  className,
+  onClick,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <Button
+      data-sidebar="trigger"
+      data-slot="sidebar-trigger"
+      variant="ghost"
+      size="icon"
+      className={cn("size-7", className)}
+      onClick={(event) => {
+        onClick?.(event)
+        toggleSidebar()
+      }}
+      {...props}
+    >
+      <PanelLeftIcon />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  )
+}
+
+function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <button
+      data-sidebar="rail"
+      data-slot="sidebar-rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex",
+        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
+  return (
+    <main
+      data-slot="sidebar-inset"
+      className={cn(
+        "relative flex w-full flex-1 flex-col bg-background",
+        "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof Input>) {
+  return (
+    <Input
+      data-slot="sidebar-input"
+      data-sidebar="input"
+      className={cn("h-8 w-full bg-background shadow-none", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-header"
+      data-sidebar="header"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-footer"
+      data-sidebar="footer"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="sidebar-separator"
+      data-sidebar="separator"
+      className={cn("mx-2 w-auto bg-sidebar-border", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-content"
+      data-sidebar="content"
+      className={cn(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group"
+      data-sidebar="group"
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupLabel({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "div"
+
+  return (
+    <Comp
+      data-slot="sidebar-group-label"
+      data-sidebar="group-label"
+      className={cn(
+        "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupAction({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="sidebar-group-action"
+      data-sidebar="group-action"
+      className={cn(
+        "absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 md:after:hidden",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupContent({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group-content"
+      data-sidebar="group-content"
+      className={cn("w-full text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu"
+      data-sidebar="menu"
+      className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-item"
+      data-sidebar="menu-item"
+      className={cn("group/menu-item relative", className)}
+      {...props}
+    />
+  )
+}
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function SidebarMenuButton({
+  asChild = false,
+  isActive = false,
+  variant = "default",
+  size = "default",
+  tooltip,
+  className,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean
+  isActive?: boolean
+  tooltip?: string | React.ComponentProps<typeof TooltipContent>
+} & VariantProps<typeof sidebarMenuButtonVariants>) {
+  const Comp = asChild ? Slot.Root : "button"
+  const { isMobile, state } = useSidebar()
+
+  const button = (
+    <Comp
+      data-slot="sidebar-menu-button"
+      data-sidebar="menu-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+      {...props}
+    />
+  )
+
+  if (!tooltip) {
+    return button
+  }
+
+  if (typeof tooltip === "string") {
+    tooltip = {
+      children: tooltip,
+    }
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      <TooltipContent
+        side="right"
+        align="center"
+        hidden={state !== "collapsed" || isMobile}
+        {...tooltip}
+      />
+    </Tooltip>
+  )
+}
+
+function SidebarMenuAction({
+  className,
+  asChild = false,
+  showOnHover = false,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean
+  showOnHover?: boolean
+}) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-action"
+      data-sidebar="menu-action"
+      className={cn(
+        "absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform peer-hover/menu-button:text-sidebar-accent-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 md:after:hidden",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        showOnHover &&
+          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground data-[state=open]:opacity-100 md:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuBadge({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-menu-badge"
+      data-sidebar="menu-badge"
+      className={cn(
+        "pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none",
+        "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showIcon?: boolean
+}) {
+  // Random width between 50 to 90%.
+  const width = React.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`
+  }, [])
+
+  return (
+    <div
+      data-slot="sidebar-menu-skeleton"
+      data-sidebar="menu-skeleton"
+      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 max-w-(--skeleton-width) flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  )
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu-sub"
+      data-sidebar="menu-sub"
+      className={cn(
+        "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubItem({
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-sub-item"
+      data-sidebar="menu-sub-item"
+      className={cn("group/menu-sub-item relative", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubButton({
+  asChild = false,
+  size = "md",
+  isActive = false,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean
+  size?: "sm" | "md"
+  isActive?: boolean
+}) {
+  const Comp = asChild ? Slot.Root : "a"
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-sub-button"
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        size === "sm" && "text-xs",
+        size === "md" && "text-sm",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+}
diff --git a/packages/ui/src/hooks/use-mobile.ts b/packages/ui/src/hooks/use-mobile.ts
new file mode 100644
index 0000000..2b0fe1d
--- /dev/null
+++ b/packages/ui/src/hooks/use-mobile.ts
@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}
diff --git a/packages/ui/src/styles/globals.css b/packages/ui/src/styles/globals.css
index b861ad2..e3286ea 100644
--- a/packages/ui/src/styles/globals.css
+++ b/packages/ui/src/styles/globals.css
@@ -50,99 +50,91 @@
 :root {
   --radius: 0.625rem;
 
-  --background: oklch(0.99 0.009 78.24);
-  --foreground: oklch(0.201 0.014 34.34);
+  --background: oklch(0.985 0.012 48);
+  --foreground: oklch(0.22 0.016 40);
 
-  --card: oklch(0.975 0.019 72.54);
-  --card-foreground: oklch(0.201 0.014 34.34);
+  --card: oklch(0.965 0.018 48);
+  --card-foreground: oklch(0.22 0.016 40);
 
-  --popover: oklch(0.975 0.019 72.54);
-  --popover-foreground: oklch(0.201 0.014 34.34);
+  --popover: oklch(0.965 0.018 48);
+  --popover-foreground: oklch(0.22 0.016 40);
 
-  /* ↓ CHANGED: deep amber — rich, readable, on-brand */
-  --primary: oklch(0.54 0.138 55);
-  --primary-foreground: oklch(0.97 0.008 54);
+  --primary: oklch(0.5 0.12 45);
+  --primary-foreground: oklch(0.97 0.008 48);
 
-  --secondary: oklch(0.932 0.03 73.87);
-  --secondary-foreground: oklch(0.201 0.014 34.34);
+  --secondary: oklch(0.94 0.022 48);
+  --secondary-foreground: oklch(0.22 0.016 40);
 
-  --muted: oklch(0.954 0.037 75.15);
-  --muted-foreground: oklch(0.481 0.029 57.14);
+  --muted: oklch(0.945 0.025 48);
+  --muted-foreground: oklch(0.5 0.032 45);
 
-  /* ↓ CHANGED: quiet warm sand replaces vibrant yellow-gold */
-  --accent: oklch(0.935 0.025 72);
-  --accent-foreground: oklch(0.201 0.014 34.34);
+  --accent: oklch(0.925 0.025 48);
+  --accent-foreground: oklch(0.22 0.016 40);
 
   --destructive: oklch(0.637 0.208 25.32);
 
-  --border: oklch(0.883 0.035 70.11);
-  --input: oklch(0.883 0.035 70.11);
+  --border: oklch(0.88 0.028 48);
+  --input: oklch(0.88 0.028 48);
+  --ring: oklch(0.5 0.12 45);
 
-  /* ↓ CHANGED: ring matches new primary */
-  --ring: oklch(0.54 0.138 55);
-
-  --chart-1: oklch(0.414 0.105 45.89);
-  --chart-2: oklch(0.769 0.165 70.08);
-  --chart-3: oklch(0.666 0.157 58.31);
+  --chart-1: oklch(0.4 0.09 42);
+  --chart-2: oklch(0.65 0.12 50);
+  --chart-3: oklch(0.55 0.1 45);
   --chart-4: oklch(0.723 0.192 149.6);
   --chart-5: oklch(0.623 0.188 259.82);
 
-  --sidebar: oklch(0.975 0.019 72.54);
-  --sidebar-foreground: oklch(0.201 0.014 34.34);
-  /* ↓ CHANGED: sidebar primary matches new primary */
-  --sidebar-primary: oklch(0.54 0.138 55);
-  --sidebar-primary-foreground: oklch(0.97 0.008 54);
-  --sidebar-accent: oklch(0.935 0.025 72);
-  --sidebar-accent-foreground: oklch(0.201 0.014 34.34);
-  --sidebar-border: oklch(0.883 0.035 70.11);
-  --sidebar-ring: oklch(0.54 0.138 55);
+  --sidebar: oklch(0.965 0.018 48);
+  --sidebar-foreground: oklch(0.22 0.016 40);
+  --sidebar-primary: oklch(0.5 0.12 45);
+  --sidebar-primary-foreground: oklch(0.97 0.008 48);
+  --sidebar-accent: oklch(0.925 0.025 48);
+  --sidebar-accent-foreground: oklch(0.22 0.016 40);
+  --sidebar-border: oklch(0.88 0.028 48);
+  --sidebar-ring: oklch(0.5 0.12 45);
 }
 
 .dark {
-  --background: oklch(0.143 0.007 59.16);
-  --foreground: oklch(0.951 0.011 54.29);
+  --background: oklch(0.155 0.012 42);
+  --foreground: oklch(0.93 0.014 48);
 
-  --card: oklch(0.201 0.014 34.34);
-  --card-foreground: oklch(0.951 0.011 54.29);
+  --card: oklch(0.2 0.016 42);
+  --card-foreground: oklch(0.93 0.014 48);
 
-  --popover: oklch(0.201 0.014 34.34);
-  --popover-foreground: oklch(0.951 0.011 54.29);
+  --popover: oklch(0.2 0.016 42);
+  --popover-foreground: oklch(0.93 0.014 48);
 
-  /* dark primary stays gold — already correct */
-  --primary: oklch(0.769 0.165 70.08);
-  --primary-foreground: oklch(0.143 0.007 59.16);
+  --primary: oklch(0.74 0.12 55);
+  --primary-foreground: oklch(0.155 0.012 42);
 
-  --secondary: oklch(0.241 0.018 47.91);
-  --secondary-foreground: oklch(0.951 0.011 54.29);
+  --secondary: oklch(0.25 0.018 42);
+  --secondary-foreground: oklch(0.93 0.014 48);
 
-  --muted: oklch(0.279 0.023 40.5);
-  --muted-foreground: oklch(0.682 0.032 62.32);
+  --muted: oklch(0.27 0.02 42);
+  --muted-foreground: oklch(0.65 0.03 48);
 
-  /* ↓ CHANGED: calm warm dark tone for hover — not saturated amber */
-  --accent: oklch(0.255 0.018 60);
-  --accent-foreground: oklch(0.951 0.011 54.29);
+  --accent: oklch(0.26 0.018 45);
+  --accent-foreground: oklch(0.93 0.014 48);
 
   --destructive: oklch(0.637 0.208 25.32);
 
-  --border: oklch(0.337 0.029 49.2);
-  --input: oklch(0.279 0.023 40.5);
-  --ring: oklch(0.769 0.165 70.08);
+  --border: oklch(0.33 0.024 42);
+  --input: oklch(0.27 0.02 42);
+  --ring: oklch(0.74 0.12 55);
 
-  --chart-1: oklch(0.769 0.165 70.08);
-  --chart-2: oklch(0.837 0.164 84.43);
-  --chart-3: oklch(0.569 0.135 49.95);
+  --chart-1: oklch(0.74 0.12 55);
+  --chart-2: oklch(0.8 0.1 52);
+  --chart-3: oklch(0.55 0.1 45);
   --chart-4: oklch(0.723 0.192 149.6);
   --chart-5: oklch(0.623 0.188 259.82);
 
-  --sidebar: oklch(0.201 0.014 34.34);
-  --sidebar-foreground: oklch(0.951 0.011 54.29);
-  --sidebar-primary: oklch(0.769 0.165 70.08);
-  --sidebar-primary-foreground: oklch(0.143 0.007 59.16);
-  /* ↓ CHANGED: sidebar accent matches new calm dark accent */
-  --sidebar-accent: oklch(0.255 0.018 60);
-  --sidebar-accent-foreground: oklch(0.951 0.011 54.29);
-  --sidebar-border: oklch(0.337 0.029 49.2);
-  --sidebar-ring: oklch(0.769 0.165 70.08);
+  --sidebar: oklch(0.2 0.016 42);
+  --sidebar-foreground: oklch(0.93 0.014 48);
+  --sidebar-primary: oklch(0.74 0.12 55);
+  --sidebar-primary-foreground: oklch(0.155 0.012 42);
+  --sidebar-accent: oklch(0.26 0.018 45);
+  --sidebar-accent-foreground: oklch(0.93 0.014 48);
+  --sidebar-border: oklch(0.33 0.024 42);
+  --sidebar-ring: oklch(0.74 0.12 55);
 }
 
 @layer base {

From 13e78f5fdf55f311ef4e4e13c197b0e379735c49 Mon Sep 17 00:00:00 2001
From: Jacob Owens <jacobowens75@gmail.com>
Date: Mon, 9 Mar 2026 09:41:00 -0700
Subject: [PATCH 2/2] fix: fixed various minor optimizations

---
 .../src/components/chat/message-action-bar.tsx    | 15 +++++++++++++--
 .../components/settings/my-account-settings.tsx   | 14 +++++++++++++-
 packages/ui/src/components/breadcrumb.tsx         |  3 +--
 packages/ui/src/components/sidebar.tsx            |  2 +-
 4 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/components/chat/message-action-bar.tsx b/apps/web/src/components/chat/message-action-bar.tsx
index 48c73fc..9d9f1a3 100644
--- a/apps/web/src/components/chat/message-action-bar.tsx
+++ b/apps/web/src/components/chat/message-action-bar.tsx
@@ -12,7 +12,7 @@ import {
   TooltipTrigger,
 } from "@repo/ui/components/tooltip"
 import { MoreHorizontal, Reply } from "lucide-react"
-import { useCallback, useEffect, useState } from "react"
+import { useCallback, useEffect, useRef, useState } from "react"
 import { EmojiReactionPicker } from "./emoji-reaction-picker"
 
 interface MessageActionBarProps {
@@ -37,17 +37,28 @@ export function MessageActionBar({
   const [isEmojiOpen, setIsEmojiOpen] = useState(false)
   const [isMoreOpen, setIsMoreOpen] = useState(false)
   const [suppressTooltip, setSuppressTooltip] = useState(false)
+  const suppressTimeoutRef = useRef<ReturnType<typeof setTimeout>>(null)
 
   useEffect(() => {
     onOverlayOpenChange?.(isEmojiOpen || isMoreOpen)
   }, [isEmojiOpen, isMoreOpen, onOverlayOpenChange])
 
+  useEffect(() => {
+    return () => {
+      if (suppressTimeoutRef.current) clearTimeout(suppressTimeoutRef.current)
+    }
+  }, [])
+
   const handleMoreOpenChange = useCallback((open: boolean) => {
     setIsMoreOpen(open)
     if (!open) {
       // Suppress tooltip briefly after dropdown closes to prevent it from sticking
       setSuppressTooltip(true)
-      setTimeout(() => setSuppressTooltip(false), 150)
+      if (suppressTimeoutRef.current) clearTimeout(suppressTimeoutRef.current)
+      suppressTimeoutRef.current = setTimeout(
+        () => setSuppressTooltip(false),
+        150
+      )
     }
   }, [])
 
diff --git a/apps/web/src/components/settings/my-account-settings.tsx b/apps/web/src/components/settings/my-account-settings.tsx
index 1cea6b7..5b7c3e5 100644
--- a/apps/web/src/components/settings/my-account-settings.tsx
+++ b/apps/web/src/components/settings/my-account-settings.tsx
@@ -44,6 +44,7 @@ export function MyAccountSettings() {
   const [isDragging, setIsDragging] = useState(false)
   const fileInputRef = useRef<HTMLInputElement>(null)
   const dragCountRef = useRef(0)
+  const avatarPreviewRef = useRef<string | null>(null)
 
   useEffect(() => {
     if (!user) return
@@ -52,6 +53,13 @@ export function MyAccountSettings() {
     setStatus((user.status as string) ?? "")
   }, [user])
 
+  useEffect(() => {
+    return () => {
+      if (avatarPreviewRef.current)
+        URL.revokeObjectURL(avatarPreviewRef.current)
+    }
+  }, [])
+
   const setAvatarFromFile = useCallback((file: File) => {
     const error = validateAvatarFile(file)
     if (error) {
@@ -59,7 +67,10 @@ export function MyAccountSettings() {
       return
     }
     setAvatarFile(file)
-    setAvatarPreview(URL.createObjectURL(file))
+    if (avatarPreviewRef.current) URL.revokeObjectURL(avatarPreviewRef.current)
+    const url = URL.createObjectURL(file)
+    avatarPreviewRef.current = url
+    setAvatarPreview(url)
   }, [])
 
   const handleAvatarSelect = useCallback(
@@ -153,6 +164,7 @@ export function MyAccountSettings() {
       setAvatarFile(null)
       if (avatarPreview) {
         URL.revokeObjectURL(avatarPreview)
+        avatarPreviewRef.current = null
         setAvatarPreview(null)
       }
 
diff --git a/packages/ui/src/components/breadcrumb.tsx b/packages/ui/src/components/breadcrumb.tsx
index a9dbdf6..f27c5e4 100644
--- a/packages/ui/src/components/breadcrumb.tsx
+++ b/packages/ui/src/components/breadcrumb.tsx
@@ -85,11 +85,10 @@ function BreadcrumbEllipsis({
     <span
       data-slot="breadcrumb-ellipsis"
       role="presentation"
-      aria-hidden="true"
       className={cn("flex size-9 items-center justify-center", className)}
       {...props}
     >
-      <MoreHorizontal className="size-4" />
+      <MoreHorizontal className="size-4" aria-hidden="true" />
       <span className="sr-only">More</span>
     </span>
   )
diff --git a/packages/ui/src/components/sidebar.tsx b/packages/ui/src/components/sidebar.tsx
index 9aa0449..64fe89f 100644
--- a/packages/ui/src/components/sidebar.tsx
+++ b/packages/ui/src/components/sidebar.tsx
@@ -479,7 +479,7 @@ const sidebarMenuButtonVariants = cva(
       variant: {
         default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
         outline:
-          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+          "bg-background shadow-[0_0_0_1px_var(--color-sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--color-sidebar-accent)]",
       },
       size: {
         default: "h-8 text-sm",