Added profile button (#21)

Budfile

@@ -101,3 +101,58 @@ run() {
 build() {
   npm run build
 }
+
+add_changelog() {
+  # Get current version from package.json
+  current_version=$(node -p "require('./package.json').version")
+
+  # Ask if this is for a new version
+  echo "Is this for a new version? (y/n)"
+  read -r is_new_version
+
+  if [[ "$is_new_version" =~ ^[Yy]$ ]]; then
+    new_version=$(node -p "require('./package.json').version")
+
+    # Add new version header
+    sed -i "/^# Changelog/a \\\n## Version $new_version" CHANGELOG.md
+  fi
+
+  while true; do
+    # Get change type
+    echo "What type of change is this? ([A]dded/[C]hanged/[F]ixed/[R]emoved)"
+    read -r change_type
+
+    case $change_type in
+    A | a) change_type="Added" ;;
+    C | c) change_type="Changed" ;;
+    F | f) change_type="Fixed" ;;
+    R | r) change_type="Removed" ;;
+    *)
+      echo "Invalid change type"
+      continue
+      ;;
+    esac
+
+    # Get change description
+    echo "Enter description of the change:"
+    read -r change_desc
+
+    # Add the change to CHANGELOG.md
+    if grep -q "^### $change_type" CHANGELOG.md; then
+      # If type exists, append to it
+      sed -i "/^### $change_type$/a - $change_desc" CHANGELOG.md
+    else
+      # If type doesn't exist, create new section
+      sed -i "/^## Version/ {N; s/\n/\n\n### $change_type\n- $change_desc\n/}" CHANGELOG.md
+    fi
+
+    echo "Change added successfully!"
+
+    # Ask if user wants to add another change
+    echo "Add another change? (y/n)"
+    read -r add_another
+    [[ "$add_another" =~ ^[Yy]$ ]] || break
+  done
+
+  echo "Changelog update complete!"
+}

CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## Version 0.1.11
+
+### Added
+
+- profile button
+- settings to update profile image
+
+### Changed
+
+- Move settings and about to under profile button
+
 ## Version 0.1.10
 
 ### Fixed

app/actions/data.ts

@@ -165,6 +165,41 @@ export async function removeCoins(
   return newData
 }
 
+export async function uploadAvatar(formData: FormData) {
+  const file = formData.get('avatar') as File
+  if (!file) throw new Error('No file provided')
+  
+  if (file.size > 5 * 1024 * 1024) { // 5MB
+    throw new Error('File size must be less than 5MB')
+  }
+
+  // Create avatars directory if it doesn't exist
+  const avatarsDir = path.join(process.cwd(), 'data', 'avatars')
+  await fs.mkdir(avatarsDir, { recursive: true })
+
+  // Generate unique filename
+  const ext = file.name.split('.').pop()
+  const filename = `${Date.now()}.${ext}`
+  const filePath = path.join(avatarsDir, filename)
+
+  // Save file
+  const buffer = await file.arrayBuffer()
+  await fs.writeFile(filePath, Buffer.from(buffer))
+
+  // Update settings with new avatar path
+  const settings = await loadSettings()
+  const newSettings = {
+    ...settings,
+    profile: {
+      ...settings.profile,
+      avatarPath: `/data/avatars/${filename}`
+    }
+  }
+
+  await saveSettings(newSettings)
+  return newSettings;
+}
+
 export async function getChangelog(): Promise<string> {
   try {
     const changelogPath = path.join(process.cwd(), 'CHANGELOG.md')

app/api/avatars/[...path]/route.ts

@@ -0,0 +1,26 @@
+import { NextResponse } from 'next/server'
+import fs from 'fs/promises'
+import path from 'path'
+
+export async function GET(
+  request: Request,
+  { params }: { params: Promise<{ path: string[] }> }
+) {
+  try {
+    const { path: pathSegments } = await Promise.resolve(params)
+    const filePath = path.join(process.cwd(), 'data', 'avatars', ...(pathSegments || []))
+    const file = await fs.readFile(filePath)
+    const ext = path.extname(filePath).slice(1)
+
+    return new NextResponse(file, {
+      headers: {
+        'Content-Type': `image/${ext}`,
+      },
+    })
+  } catch (error) {
+    return NextResponse.json(
+      { error: 'File not found' },
+      { status: 404 }
+    )
+  }
+}

app/settings/page.tsx

@@ -7,7 +7,10 @@ import { DynamicTimeNoSSR } from '@/components/DynamicTimeNoSSR'
 import { useAtom } from 'jotai'
 import { settingsAtom } from '@/lib/atoms'
 import { Settings } from '@/lib/types'
-import { saveSettings } from '../actions/data'
+import { saveSettings, uploadAvatar } from '../actions/data'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { Button } from '@/components/ui/button'
+import { User } from 'lucide-react'
 
 export default function SettingsPage() {
   const [settings, setSettings] = useAtom(settingsAtom)
@@ -21,88 +24,144 @@ export default function SettingsPage() {
   if (!settings) return null
 
   return (
-    <div className="container mx-auto px-4 py-8">
-      <h1 className="text-3xl font-bold mb-6">Settings</h1>
-      <Card className="mb-6">
-        <CardHeader>
-          <CardTitle>UI Settings</CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-6">
-          <div className="flex items-center justify-between">
-            <div className="space-y-0.5">
-              <Label htmlFor="number-formatting">Number Formatting</Label>
-              <div className="text-sm text-muted-foreground">
-                Format large numbers (e.g., 1K, 1M, 1B)
+    <>
+      <div className="container mx-auto px-4 py-8">
+        <h1 className="text-3xl font-bold mb-6">Settings</h1>
+        <Card className="mb-6">
+          <CardHeader>
+            <CardTitle>UI Settings</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-6">
+            <div className="flex items-center justify-between">
+              <div className="space-y-0.5">
+                <Label htmlFor="number-formatting">Number Formatting</Label>
+                <div className="text-sm text-muted-foreground">
+                  Format large numbers (e.g., 1K, 1M, 1B)
+                </div>
               </div>
-            </div>
-            <Switch
-              id="number-formatting"
-              checked={settings.ui.useNumberFormatting}
-              onCheckedChange={(checked) =>
-                updateSettings({
-                  ...settings,
-                  ui: { ...settings.ui, useNumberFormatting: checked }
-                })
-              }
-            />
-          </div>
-
-          <div className="flex items-center justify-between">
-            <div className="space-y-0.5">
-              <Label htmlFor="number-grouping">Number Grouping</Label>
-              <div className="text-sm text-muted-foreground">
-                Use thousand separators (e.g., 1,000 vs 1000)
-              </div>
-            </div>
-            <Switch
-              id="number-grouping"
-              checked={settings.ui.useGrouping}
-              onCheckedChange={(checked) =>
-                updateSettings({
-                  ...settings,
-                  ui: { ...settings.ui, useGrouping: checked }
-                })
-              }
-            />
-          </div>
-        </CardContent>
-      </Card>
-
-      <Card className="mb-6">
-        <CardHeader>
-          <CardTitle>System Settings</CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-6">
-          <div className="flex items-center justify-between">
-            <div className="space-y-0.5">
-              <Label htmlFor="timezone">Timezone</Label>
-              <div className="text-sm text-muted-foreground">
-                Select your timezone for accurate date tracking
-              </div>
-            </div>
-            <div className="flex flex-col items-end gap-2">
-              <select
-                id="timezone"
-                value={settings.system.timezone}
-                onChange={(e) =>
+              <Switch
+                id="number-formatting"
+                checked={settings.ui.useNumberFormatting}
+                onCheckedChange={(checked) =>
                   updateSettings({
                     ...settings,
-                    system: { ...settings.system, timezone: e.target.value }
+                    ui: { ...settings.ui, useNumberFormatting: checked }
                   })
                 }
-                className="w-[200px] rounded-md border border-input bg-background px-3 py-2"
-              >
-                {Intl.supportedValuesOf('timeZone').map((tz) => (
-                  <option key={tz} value={tz}>
-                    {tz}
-                  </option>
-                ))}
-              </select>
-              <DynamicTimeNoSSR />
+              />
             </div>
-          </div>
-        </CardContent>
-      </Card>
-    </div>
+
+            <div className="flex items-center justify-between">
+              <div className="space-y-0.5">
+                <Label htmlFor="number-grouping">Number Grouping</Label>
+                <div className="text-sm text-muted-foreground">
+                  Use thousand separators (e.g., 1,000 vs 1000)
+                </div>
+              </div>
+              <Switch
+                id="number-grouping"
+                checked={settings.ui.useGrouping}
+                onCheckedChange={(checked) =>
+                  updateSettings({
+                    ...settings,
+                    ui: { ...settings.ui, useGrouping: checked }
+                  })
+                }
+              />
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="mb-6">
+          <CardHeader>
+            <CardTitle>System Settings</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-6">
+            <div className="flex items-center justify-between">
+              <div className="space-y-0.5">
+                <Label htmlFor="timezone">Timezone</Label>
+                <div className="text-sm text-muted-foreground">
+                  Select your timezone for accurate date tracking
+                </div>
+              </div>
+              <div className="flex flex-col items-end gap-2">
+                <select
+                  id="timezone"
+                  value={settings.system.timezone}
+                  onChange={(e) =>
+                    updateSettings({
+                      ...settings,
+                      system: { ...settings.system, timezone: e.target.value }
+                    })
+                  }
+                  className="w-[200px] rounded-md border border-input bg-background px-3 py-2"
+                >
+                  {Intl.supportedValuesOf('timeZone').map((tz) => (
+                    <option key={tz} value={tz}>
+                      {tz}
+                    </option>
+                  ))}
+                </select>
+                <DynamicTimeNoSSR />
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+        <Card className="mb-6">
+          <CardHeader>
+            <CardTitle>Profile Settings</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-6">
+            <div className="flex items-center justify-between">
+              <div className="space-y-0.5">
+                <Label htmlFor="avatar">Avatar</Label>
+                <div className="text-sm text-muted-foreground">
+                  Customize your profile picture
+                </div>
+              </div>
+              <div className="flex items-center gap-4">
+                <Avatar className="h-16 w-16">
+                  <AvatarImage src={settings.profile?.avatarPath ? `/api/avatars/${settings.profile.avatarPath.split('/').pop()}` : '/avatars/default.png'} />
+                  <AvatarFallback>
+                    <User className="h-8 w-8" />
+                  </AvatarFallback>
+                </Avatar>
+                <form action={async (formData: FormData) => {
+                  const newSettings = await uploadAvatar(formData)
+                  setSettings(newSettings)
+                }}>
+                  <input
+                    type="file"
+                    id="avatar"
+                    name="avatar"
+                    accept="image/png, image/jpeg"
+                    className="hidden"
+                    onChange={(e) => {
+                      const file = e.target.files?.[0]
+                      if (file) {
+                        if (file.size > 5 * 1024 * 1024) { // 5MB
+                          alert('File size must be less than 5MB')
+                          e.target.value = ''
+                          return
+                        }
+                        const form = e.target.form
+                        if (form) form.requestSubmit()
+                      }
+                    }}
+                  />
+                  <Button
+                    type="button"
+                    variant="outline"
+                    onClick={() => document.getElementById('avatar')?.click()}
+                  >
+                    Change
+                  </Button>
+                </form>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </>
   )
 }

components/Header.tsx

@@ -1,6 +1,19 @@
-import { Bell, Settings } from 'lucide-react'
+'use client'
+
+import { useState } from 'react'
+import { useAtom } from 'jotai'
+import { settingsAtom } from '@/lib/atoms'
+import { Bell, Menu, Settings, User, Info } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { Logo } from '@/components/Logo'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import AboutModal from './AboutModal'
 import Link from 'next/link'
 
 interface HeaderProps {
@@ -8,27 +21,60 @@ interface HeaderProps {
 }
 
 export default function Header({ className }: HeaderProps) {
+  const [showAbout, setShowAbout] = useState(false)
+  const [settings] = useAtom(settingsAtom)
   return (
-    <header className={`border-b bg-white dark:bg-gray-800 shadow-sm ${className || ''}`}>
-      <div className="mx-auto py-4 px-4 sm:px-6 lg:px-8">
-        <div className="flex items-center justify-between">
-          <Logo />
-          <div className="flex items-center">
-            {/*   <Button variant="ghost" size="icon" className="mr-2"> */}
-            {/*     <Bell className="h-5 w-5" /> */}
-            {/*   </Button> */}
-            <Link
-              href="/settings"
-              aria-label='settings'
-            >
-              <Button variant="ghost" size="icon">
-                <Settings className="h-5 w-5" />
-              </Button>
+    <>
+      <header className={`border-b bg-white dark:bg-gray-800 shadow-sm ${className || ''}`}>
+        <div className="mx-auto py-4 px-4 sm:px-6 lg:px-8">
+          <div className="flex items-center justify-between">
+            <Link href="/">
+              <Logo />
             </Link>
+            <div className="flex items-center gap-2">
+              <Button variant="ghost" size="icon" aria-label="Notifications">
+                <Bell className="h-5 w-5" />
+              </Button>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="ghost" className="flex items-center gap-2">
+                    {/* <Menu className="h-5 w-5" /> */}
+                    <Avatar className="h-8 w-8">
+                      <AvatarImage src={settings?.profile?.avatarPath ? `/api/avatars/${settings.profile.avatarPath.split('/').pop()}` : '/avatars/default.png'} />
+                      <AvatarFallback>
+                        <User className="h-4 w-4" />
+                      </AvatarFallback>
+                    </Avatar>
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end" className="w-56 p-2">
+                  <DropdownMenuItem className="cursor-pointer px-3 py-2" asChild>
+                    <Link
+                      href="/settings"
+                      aria-label='settings'
+                      className="flex items-center w-full gap-2"
+                    >
+                      <Settings className="h-4 w-4" />
+                      <span>Settings</span>
+                    </Link>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem className="cursor-pointer px-3 py-2" asChild>
+                    <button
+                      onClick={() => setShowAbout(true)}
+                      className="flex items-center w-full gap-2"
+                    >
+                      <Info className="h-4 w-4" />
+                      <span>About</span>
+                    </button>
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
           </div>
         </div>
-      </div>
-    </header >
+      </header>
+      <AboutModal isOpen={showAbout} onClose={() => setShowAbout(false)} />
+    </>
   )
 }
 

components/Navigation.tsx

@@ -13,7 +13,6 @@ const navItems = [
   { icon: Calendar, label: 'Calendar', href: '/calendar', position: 'main' },
   { icon: Gift, label: 'Wishlist', href: '/wishlist', position: 'main' },
   { icon: Coins, label: 'Coins', href: '/coins', position: 'main' },
-  { icon: Info, label: 'About', href: '#', position: 'bottom', onClick: (setShow: (show: boolean) => void) => setShow(true) },
 ]
 
 interface NavigationProps {
@@ -46,27 +45,16 @@ export default function Navigation({ className, viewPort }: NavigationProps) {
         <div className="pb-16" /> {/* Add padding at the bottom to prevent content from being hidden */}
         <nav className="lg:hidden fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-800 shadow-lg">
           <div className="flex justify-around">
-            {[...navItems.filter(item => item.position === 'main'), ...navItems.filter(item => item.position === 'bottom')].map((item) =>
-              item.onClick ? (
-                <button
-                  key={item.label}
-                  onClick={() => item.onClick?.(setShowAbout)}
-                  className="flex flex-col items-center py-2 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400"
-                >
-                  <item.icon className="h-6 w-6" />
-                  <span className="text-xs mt-1">{item.label}</span>
-                </button>
-              ) : (
-                <Link
-                  key={item.label}
-                  href={item.href}
-                  className="flex flex-col items-center py-2 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400"
-                >
-                  <item.icon className="h-6 w-6" />
-                  <span className="text-xs mt-1">{item.label}</span>
-                </Link>
-              )
-            )}
+            {[...navItems.filter(item => item.position === 'main'), ...navItems.filter(item => item.position === 'bottom')].map((item) => (
+              <Link
+                key={item.label}
+                href={item.href}
+                className="flex flex-col items-center py-2 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400"
+              >
+                <item.icon className="h-6 w-6" />
+                <span className="text-xs mt-1">{item.label}</span>
+              </Link>
+            ))}
           </div>
         </nav>
         <AboutModal isOpen={showAbout} onClose={() => setShowAbout(false)} />
@@ -92,15 +80,6 @@ export default function Navigation({ className, viewPort }: NavigationProps) {
                   </Link>
                 ))}
               </nav>
-              <div className="px-2 pb-2">
-                <button
-                  onClick={() => setShowAbout(true)}
-                  className="w-full group flex items-center px-2 py-2 text-sm leading-6 font-medium rounded-md text-gray-300 hover:text-white hover:bg-gray-700"
-                >
-                  <Info className="mr-4 flex-shrink-0 h-6 w-6 text-gray-400" aria-hidden="true" />
-                  About
-                </button>
-              </div>
             </div>
           </div>
         </div>

components/ui/avatar.tsx

@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }

components/ui/dropdown-menu.tsx

@@ -0,0 +1,201 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}

lib/types.ts

@@ -61,7 +61,8 @@ export const getDefaultSettings = (): Settings => ({
   },
   system: {
     timezone: Intl.DateTimeFormat().resolvedOptions().timeZone
-  }
+  },
+  profile: {}
 });
 
 // Map of data types to their default values
@@ -84,9 +85,14 @@ export interface SystemSettings {
   timezone: string;
 }
 
+export interface ProfileSettings {
+  avatarPath?: string;
+}
+
 export interface Settings {
   ui: UISettings;
   system: SystemSettings;
+  profile: ProfileSettings;
 }
 
 export interface JotaiHydrateInitialValues {

package-lock.json

@@ -1,15 +1,17 @@
 {
   "name": "habittrove",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "habittrove",
-      "version": "0.1.8",
+      "version": "0.1.10",
       "dependencies": {
         "@next/font": "^14.2.15",
+        "@radix-ui/react-avatar": "^1.1.2",
         "@radix-ui/react-dialog": "^1.1.4",
+        "@radix-ui/react-dropdown-menu": "^2.1.4",
         "@radix-ui/react-label": "^2.1.1",
         "@radix-ui/react-progress": "^1.1.1",
         "@radix-ui/react-select": "^2.1.4",
@@ -936,6 +938,31 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-avatar": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-avatar/-/react-avatar-1.1.2.tgz",
+      "integrity": "sha512-GaC7bXQZ5VgZvVvsJ5mu/AEbjYLnhhkoidOboC50Z6FFlLA03wG2ianUoH+zgDQ31/9gCF59bE4+2bBgTyMiig==",
+      "dependencies": {
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.1",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-collection": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.1.tgz",
@@ -1064,6 +1091,34 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-dropdown-menu": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.4.tgz",
+      "integrity": "sha512-iXU1Ab5ecM+yEepGAWK8ZhMyKX4ubFdCNtol4sT9D0OVErG9PNElfx3TQhjw7n7BC5nFVz68/5//clWy+8TXzA==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-menu": "2.1.4",
+        "@radix-ui/react-primitive": "2.0.1",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-focus-guards": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.1.tgz",
@@ -1141,6 +1196,45 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-menu": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.4.tgz",
+      "integrity": "sha512-BnOgVoL6YYdHAG6DtXONaR29Eq4nvbi8rutrV/xlr3RQCMMb3yqP85Qiw/3NReozrSW+4dfLkK+rc1hb4wPU/A==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-collection": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-dismissable-layer": "1.1.3",
+        "@radix-ui/react-focus-guards": "1.1.1",
+        "@radix-ui/react-focus-scope": "1.1.1",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-popper": "1.2.1",
+        "@radix-ui/react-portal": "1.1.3",
+        "@radix-ui/react-presence": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.1",
+        "@radix-ui/react-roving-focus": "1.1.1",
+        "@radix-ui/react-slot": "1.1.1",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "^2.6.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-popper": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.1.tgz",
@@ -1263,6 +1357,36 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-roving-focus": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.1.tgz",
+      "integrity": "sha512-QE1RoxPGJ/Nm8Qmk0PxP8ojmoaS67i0s7hVssS7KuI2FQoc/uzVlZsqKfQvxPE6D8hICCPHJ4D88zNhT3OOmkw==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-collection": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.1",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-select": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.1.4.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "habittrove",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack",
@@ -16,7 +16,9 @@
   },
   "dependencies": {
     "@next/font": "^14.2.15",
+    "@radix-ui/react-avatar": "^1.1.2",
     "@radix-ui/react-dialog": "^1.1.4",
+    "@radix-ui/react-dropdown-menu": "^2.1.4",
     "@radix-ui/react-label": "^2.1.1",
     "@radix-ui/react-progress": "^1.1.1",
     "@radix-ui/react-select": "^2.1.4",