dark mode

2026-01-20 22:24:28 +01:00 · 2025-01-25 13:03:07 -05:00
parent 6fe10d9fa5
commit c66e28162c
10 changed files with 246 additions and 51 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Changelog

+## Version 0.1.27
+
+### Added
+
+- dark mode toggle (#48)
+- notification badge for tasks (#51)
+
 ## Version 0.1.26

 ### Added
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -7,6 +7,8 @@ import { JotaiHydrate } from '@/components/jotai-hydrate'
 import { loadSettings, loadHabitsData, loadCoinsData, loadWishlistData } from './actions/data'
 import Layout from '@/components/Layout'
 import { Toaster } from '@/components/ui/toaster'
+import { ThemeProvider } from "@/components/theme-provider"
+

 // Inter (clean, modern, excellent readability)
 // const inter = Inter({
@@ -42,7 +44,8 @@ export default async function RootLayout({
  ])

  return (
-    <html lang="en">
+    // set suppressHydrationWarning to true to prevent hydration errors when using ThemeProvider (https://ui.shadcn.com/docs/dark-mode/next)
+    <html lang="en" suppressHydrationWarning>
      <body className={activeFont.className}>
        <script
          dangerouslySetInnerHTML={{
@@ -71,9 +74,16 @@ export default async function RootLayout({
                wishlist: initialWishlist
              }}
            >
-              <Layout>
-                {children}
-              </Layout>
+              <ThemeProvider
+                attribute="class"
+                defaultTheme="system"
+                enableSystem
+                disableTransitionOnChange
+              >
+                <Layout>
+                  {children}
+                </Layout>
+              </ThemeProvider>
            </JotaiHydrate>
          </Suspense>
        </JotaiProvider>
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -18,6 +18,7 @@ import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import AboutModal from './AboutModal'
 import Link from 'next/link'
 import dynamic from 'next/dynamic'
+import { Profile } from './Profile'

 interface HeaderProps {
  className?: string
@@ -26,7 +27,6 @@ interface HeaderProps {
 const TodayEarnedCoins = dynamic(() => import('./TodayEarnedCoins'), { ssr: false })

 export default function Header({ className }: HeaderProps) {
-  const [showAbout, setShowAbout] = useState(false)
  const [settings] = useAtom(settingsAtom)
  const [coins] = useAtom(coinsAtom)
  const [browserSettings] = useAtom(browserSettingsAtom)
@@ -56,45 +56,11 @@ export default function Header({ className }: HeaderProps) {
              <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>
+              <Profile />
            </div>
          </div>
        </div>
      </header>
-      <AboutModal isOpen={showAbout} onClose={() => setShowAbout(false)} />
    </>
  )
 }
--- a/components/Profile.tsx
+++ b/components/Profile.tsx
@@ -0,0 +1,92 @@
+'use client'
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Button } from "@/components/ui/button"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+import { Settings, Info, User, Moon, Sun, Palette } from "lucide-react"
+import Link from "next/link"
+import { useAtom } from "jotai"
+import { settingsAtom } from "@/lib/atoms"
+import AboutModal from "./AboutModal"
+import { useState } from "react"
+import { useTheme } from "next-themes"
+
+export function Profile() {
+  const [settings] = useAtom(settingsAtom)
+  const [showAbout, setShowAbout] = useState(false)
+  const { theme, setTheme } = useTheme()
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" className="flex items-center gap-2">
+            <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-[200px] p-2">
+          <DropdownMenuItem className="cursor-pointer px-2 py-1.5" asChild>
+            <Link
+              href="/settings"
+              aria-label='settings'
+              className="flex items-center w-full gap-3"
+            >
+              <Settings className="h-4 w-4" />
+              <span>Settings</span>
+            </Link>
+          </DropdownMenuItem>
+          <DropdownMenuItem className="cursor-pointer px-2 py-1.5" asChild>
+            <button
+              onClick={() => setShowAbout(true)}
+              className="flex items-center w-full gap-3"
+            >
+              <Info className="h-4 w-4" />
+              <span>About</span>
+            </button>
+          </DropdownMenuItem>
+          <DropdownMenuItem className="cursor-pointer px-2 py-1.5">
+            <div className="flex items-center justify-between w-full gap-3">
+              <div className="flex items-center gap-3">
+                <Palette className="h-4 w-4" />
+                <span>Theme</span>
+              </div>
+              <button
+                onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+                className={`
+                  w-12 h-6 rounded-full relative transition-all duration-300 ease-in-out
+                  hover:scale-105 shadow-inner
+                  ${theme === 'dark' 
+                    ? 'bg-blue-600/90 hover:bg-blue-600' 
+                    : 'bg-gray-200 hover:bg-gray-300'
+                  }
+                `}
+              >
+                <div className={`
+                  w-5 h-5 rounded-full absolute top-0.5 left-0.5
+                  transition-all duration-300 ease-in-out
+                  shadow-md bg-white
+                  ${theme === 'dark' ? 'translate-x-6' : 'translate-x-0'}
+                `}>
+                  <div className="absolute inset-0 flex items-center justify-center">
+                    {theme === 'dark' ? (
+                      <Moon className="h-3 w-3 text-gray-600" />
+                    ) : (
+                      <Sun className="h-3 w-3 text-gray-600" />
+                    )}
+                  </div>
+                </div>
+              </button>
+            </div>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <AboutModal isOpen={showAbout} onClose={() => setShowAbout(false)} />
+    </>
+  )
+}
--- a/components/ViewToggle.tsx
+++ b/components/ViewToggle.tsx
@@ -3,9 +3,11 @@
 import { cn } from '@/lib/utils'
 import { useAtom } from 'jotai'
 import { CheckSquare, ListChecks } from 'lucide-react'
-import { browserSettingsAtom } from '@/lib/atoms'
+import { browserSettingsAtom, habitsAtom, settingsAtom } from '@/lib/atoms'
 import type { ViewType } from '@/lib/types'
 import { HabitIcon, TaskIcon } from '@/lib/constants'
+import { isHabitDueToday } from '@/lib/utils'
+import { NotificationBadge } from './ui/notification-badge'

 interface ViewToggleProps {
  defaultView?: ViewType
@@ -17,6 +19,8 @@ export function ViewToggle({
  className
 }: ViewToggleProps) {
  const [browserSettings, setBrowserSettings] = useAtom(browserSettingsAtom)
+  const [habits] = useAtom(habitsAtom)
+  const [settings] = useAtom(settingsAtom)

  const handleViewChange = (checked: boolean) => {
    const newView = checked ? 'tasks' : 'habits'
@@ -26,6 +30,11 @@ export function ViewToggle({
    })
  }

+  // Calculate due tasks count
+  const dueTasksCount = habits.habits.filter(habit => 
+    habit.isTask && !habit.archived && isHabitDueToday({ habit, timezone: settings.system.timezone })
+  ).length
+
  return (
    <div className={cn('inline-flex rounded-full bg-muted/50 h-8', className)}>
      <div className="relative flex gap-0.5 rounded-full bg-background p-0.5 h-full">
@@ -39,16 +48,23 @@ export function ViewToggle({
          <HabitIcon className="h-4 w-4" />
          <span className="hidden sm:inline">Habits</span>
        </button>
-        <button
-          onClick={() => handleViewChange(true)}
-          className={cn(
-            'relative z-10 rounded-full px-4 py-2 text-sm font-medium transition-colors flex items-center gap-2',
-            browserSettings.viewType === 'tasks' ? 'text-primary-foreground' : 'text-muted-foreground hover:text-foreground'
-          )}
+        <NotificationBadge 
+          label={dueTasksCount}
+          show={dueTasksCount > 0}
+          variant={browserSettings.viewType === 'tasks' ? 'secondary' : 'default'}
+          className="shadow-md"
        >
-          <TaskIcon className="h-4 w-4" />
-          <span className="hidden sm:inline">Tasks</span>
-        </button>
+          <button
+            onClick={() => handleViewChange(true)}
+            className={cn(
+              'relative z-10 rounded-full px-4 py-2 text-sm font-medium transition-colors flex items-center gap-2',
+              browserSettings.viewType === 'tasks' ? 'text-primary-foreground' : 'text-muted-foreground hover:text-foreground'
+            )}
+          >
+            <TaskIcon className="h-4 w-4" />
+            <span className="hidden sm:inline">Tasks</span>
+          </button>
+        </NotificationBadge>
        <div
          className={cn(
            'absolute left-0.5 top-0.5 h-[calc(100%-0.25rem)] rounded-full bg-primary transition-transform',
--- a/components/theme-provider.tsx
+++ b/components/theme-provider.tsx
@@ -0,0 +1,11 @@
+"use client"
+
+import * as React from "react"
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+
+export function ThemeProvider({
+  children,
+  ...props
+}: React.ComponentProps<typeof NextThemesProvider>) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}
--- a/components/theme-toggle.tsx
+++ b/components/theme-toggle.tsx
@@ -0,0 +1,40 @@
+"use client"
+
+import * as React from "react"
+import { Moon, MoonIcon, Sun } from "lucide-react"
+import { useTheme } from "next-themes"
+
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+export function ThemeToggle() {
+  const { setTheme } = useTheme()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon">
+          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
--- a/components/ui/notification-badge.tsx
+++ b/components/ui/notification-badge.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import {Badge, BadgeProps} from './badge';
+import {cn} from '@/lib/utils';
+
+export interface NotificationBadgeProps extends BadgeProps {
+  label?: string | number;
+  show?: boolean;
+  variant?: 'destructive' | 'default' | 'secondary';
+}
+
+export const NotificationBadge = ({
+  label,
+  className,
+  show,
+  variant = 'destructive',
+  children,
+  ...props
+}: NotificationBadgeProps) => {
+  const showBadge =
+    typeof label !== 'undefined' && (typeof show === 'undefined' || show);
+  return (
+    <div className='inline-flex relative'>
+      {children}
+      {showBadge && (
+        <Badge
+          variant={variant}
+          className={cn(
+            'absolute rounded-full -top-1.5 -right-1.5 z-20 border h-4 w-4 p-0 flex items-center justify-center text-xs',
+            typeof label !== 'undefined' && ('' + label).length === 0
+              ? ''
+              : 'min-w-[1rem]',
+            className
+          )}
+          {...props}
+        >
+          {'' + label}
+        </Badge>
+      )}
+    </div>
+  );
+};
--- a/package-lock.json
+++ b/package-lock.json
@@ -37,6 +37,7 @@
        "lucide-react": "^0.469.0",
        "luxon": "^3.5.0",
        "next": "15.1.3",
+        "next-themes": "^0.4.4",
        "react": "^19.0.0",
        "react-confetti": "^6.2.2",
        "react-day-picker": "^8.10.1",
@@ -6489,6 +6490,16 @@
        }
      }
    },
+    "node_modules/next-themes": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.4.tgz",
+      "integrity": "sha512-LDQ2qIOJF0VnuVrrMSMLrWGjRMkq+0mpgl6e0juCLqdJ+oo8Q84JRWT6Wh11VDQKkMMe+dVzDKLWs5n87T+PkQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
+      }
+    },
    "node_modules/next/node_modules/postcss": {
      "version": "8.4.31",
      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "habittrove",
-  "version": "0.1.26",
+  "version": "0.1.27",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
@@ -44,6 +44,7 @@
    "lucide-react": "^0.469.0",
    "luxon": "^3.5.0",
    "next": "15.1.3",
+    "next-themes": "^0.4.4",
    "react": "^19.0.0",
    "react-confetti": "^6.2.2",
    "react-day-picker": "^8.10.1",