Skip to content

Commit c66e281

Browse files
dohsimpsondohsimpson
committed
dark mode
1 parent 6fe10d9 commit c66e281

10 files changed

+246
-51
lines changed

‎CHANGELOG.md

+7
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
# Changelog
22

3+
## Version 0.1.27
4+
5+
### Added
6+
7+
- dark mode toggle (#48)
8+
- notification badge for tasks (#51)
9+
310
## Version 0.1.26
411

512
### Added

‎app/layout.tsx

+14-4
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import { JotaiHydrate } from '@/components/jotai-hydrate'
77
import { loadSettings, loadHabitsData, loadCoinsData, loadWishlistData } from './actions/data'
88
import Layout from '@/components/Layout'
99
import { Toaster } from '@/components/ui/toaster'
10+
import { ThemeProvider } from "@/components/theme-provider"
11+
1012

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

4446
return (
45-
<html lang="en">
47+
// set suppressHydrationWarning to true to prevent hydration errors when using ThemeProvider (https://ui.shadcn.com/docs/dark-mode/next)
48+
<html lang="en" suppressHydrationWarning>
4649
<body className={activeFont.className}>
4750
<script
4851
dangerouslySetInnerHTML={{
@@ -71,9 +74,16 @@ export default async function RootLayout({
7174
wishlist: initialWishlist
7275
}}
7376
>
74-
<Layout>
75-
{children}
76-
</Layout>
77+
<ThemeProvider
78+
attribute="class"
79+
defaultTheme="system"
80+
enableSystem
81+
disableTransitionOnChange
82+
>
83+
<Layout>
84+
{children}
85+
</Layout>
86+
</ThemeProvider>
7787
</JotaiHydrate>
7888
</Suspense>
7989
</JotaiProvider>

‎components/Header.tsx

+2-36
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
1818
import AboutModal from './AboutModal'
1919
import Link from 'next/link'
2020
import dynamic from 'next/dynamic'
21+
import { Profile } from './Profile'
2122

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

2829
export default function Header({ className }: HeaderProps) {
29-
const [showAbout, setShowAbout] = useState(false)
3030
const [settings] = useAtom(settingsAtom)
3131
const [coins] = useAtom(coinsAtom)
3232
const [browserSettings] = useAtom(browserSettingsAtom)
@@ -56,45 +56,11 @@ export default function Header({ className }: HeaderProps) {
5656
<Button variant="ghost" size="icon" aria-label="Notifications">
5757
<Bell className="h-5 w-5" />
5858
</Button>
59-
<DropdownMenu>
60-
<DropdownMenuTrigger asChild>
61-
<Button variant="ghost" className="flex items-center gap-2">
62-
{/* <Menu className="h-5 w-5" /> */}
63-
<Avatar className="h-8 w-8">
64-
<AvatarImage src={settings?.profile?.avatarPath ? `/api/avatars/${settings.profile.avatarPath.split('/').pop()}` : '/avatars/default.png'} />
65-
<AvatarFallback>
66-
<User className="h-4 w-4" />
67-
</AvatarFallback>
68-
</Avatar>
69-
</Button>
70-
</DropdownMenuTrigger>
71-
<DropdownMenuContent align="end" className="w-56 p-2">
72-
<DropdownMenuItem className="cursor-pointer px-3 py-2" asChild>
73-
<Link
74-
href="/settings"
75-
aria-label='settings'
76-
className="flex items-center w-full gap-2"
77-
>
78-
<Settings className="h-4 w-4" />
79-
<span>Settings</span>
80-
</Link>
81-
</DropdownMenuItem>
82-
<DropdownMenuItem className="cursor-pointer px-3 py-2" asChild>
83-
<button
84-
onClick={() => setShowAbout(true)}
85-
className="flex items-center w-full gap-2"
86-
>
87-
<Info className="h-4 w-4" />
88-
<span>About</span>
89-
</button>
90-
</DropdownMenuItem>
91-
</DropdownMenuContent>
92-
</DropdownMenu>
59+
<Profile />
9360
</div>
9461
</div>
9562
</div>
9663
</header>
97-
<AboutModal isOpen={showAbout} onClose={() => setShowAbout(false)} />
9864
</>
9965
)
10066
}

‎components/Profile.tsx

+92
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
'use client'
2+
3+
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
4+
import { Button } from "@/components/ui/button"
5+
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
6+
import { Settings, Info, User, Moon, Sun, Palette } from "lucide-react"
7+
import Link from "next/link"
8+
import { useAtom } from "jotai"
9+
import { settingsAtom } from "@/lib/atoms"
10+
import AboutModal from "./AboutModal"
11+
import { useState } from "react"
12+
import { useTheme } from "next-themes"
13+
14+
export function Profile() {
15+
const [settings] = useAtom(settingsAtom)
16+
const [showAbout, setShowAbout] = useState(false)
17+
const { theme, setTheme } = useTheme()
18+
19+
return (
20+
<>
21+
<DropdownMenu>
22+
<DropdownMenuTrigger asChild>
23+
<Button variant="ghost" className="flex items-center gap-2">
24+
<Avatar className="h-8 w-8">
25+
<AvatarImage src={settings?.profile?.avatarPath ? `/api/avatars/${settings.profile.avatarPath.split('/').pop()}` : '/avatars/default.png'} />
26+
<AvatarFallback>
27+
<User className="h-4 w-4" />
28+
</AvatarFallback>
29+
</Avatar>
30+
</Button>
31+
</DropdownMenuTrigger>
32+
<DropdownMenuContent align="end" className="w-[200px] p-2">
33+
<DropdownMenuItem className="cursor-pointer px-2 py-1.5" asChild>
34+
<Link
35+
href="/settings"
36+
aria-label='settings'
37+
className="flex items-center w-full gap-3"
38+
>
39+
<Settings className="h-4 w-4" />
40+
<span>Settings</span>
41+
</Link>
42+
</DropdownMenuItem>
43+
<DropdownMenuItem className="cursor-pointer px-2 py-1.5" asChild>
44+
<button
45+
onClick={() => setShowAbout(true)}
46+
className="flex items-center w-full gap-3"
47+
>
48+
<Info className="h-4 w-4" />
49+
<span>About</span>
50+
</button>
51+
</DropdownMenuItem>
52+
<DropdownMenuItem className="cursor-pointer px-2 py-1.5">
53+
<div className="flex items-center justify-between w-full gap-3">
54+
<div className="flex items-center gap-3">
55+
<Palette className="h-4 w-4" />
56+
<span>Theme</span>
57+
</div>
58+
<button
59+
onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
60+
className={`
61+
w-12 h-6 rounded-full relative transition-all duration-300 ease-in-out
62+
hover:scale-105 shadow-inner
63+
${theme === 'dark'
64+
? 'bg-blue-600/90 hover:bg-blue-600'
65+
: 'bg-gray-200 hover:bg-gray-300'
66+
}
67+
`}
68+
>
69+
<div className={`
70+
w-5 h-5 rounded-full absolute top-0.5 left-0.5
71+
transition-all duration-300 ease-in-out
72+
shadow-md bg-white
73+
${theme === 'dark' ? 'translate-x-6' : 'translate-x-0'}
74+
`}>
75+
<div className="absolute inset-0 flex items-center justify-center">
76+
{theme === 'dark' ? (
77+
<Moon className="h-3 w-3 text-gray-600" />
78+
) : (
79+
<Sun className="h-3 w-3 text-gray-600" />
80+
)}
81+
</div>
82+
</div>
83+
</button>
84+
</div>
85+
</DropdownMenuItem>
86+
</DropdownMenuContent>
87+
</DropdownMenu>
88+
89+
<AboutModal isOpen={showAbout} onClose={() => setShowAbout(false)} />
90+
</>
91+
)
92+
}

‎components/ViewToggle.tsx

+26-10
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,11 @@
33
import { cn } from '@/lib/utils'
44
import { useAtom } from 'jotai'
55
import { CheckSquare, ListChecks } from 'lucide-react'
6-
import { browserSettingsAtom } from '@/lib/atoms'
6+
import { browserSettingsAtom, habitsAtom, settingsAtom } from '@/lib/atoms'
77
import type { ViewType } from '@/lib/types'
88
import { HabitIcon, TaskIcon } from '@/lib/constants'
9+
import { isHabitDueToday } from '@/lib/utils'
10+
import { NotificationBadge } from './ui/notification-badge'
911

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

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

33+
// Calculate due tasks count
34+
const dueTasksCount = habits.habits.filter(habit =>
35+
habit.isTask && !habit.archived && isHabitDueToday({ habit, timezone: settings.system.timezone })
36+
).length
37+
2938
return (
3039
<div className={cn('inline-flex rounded-full bg-muted/50 h-8', className)}>
3140
<div className="relative flex gap-0.5 rounded-full bg-background p-0.5 h-full">
@@ -39,16 +48,23 @@ export function ViewToggle({
3948
<HabitIcon className="h-4 w-4" />
4049
<span className="hidden sm:inline">Habits</span>
4150
</button>
42-
<button
43-
onClick={() => handleViewChange(true)}
44-
className={cn(
45-
'relative z-10 rounded-full px-4 py-2 text-sm font-medium transition-colors flex items-center gap-2',
46-
browserSettings.viewType === 'tasks' ? 'text-primary-foreground' : 'text-muted-foreground hover:text-foreground'
47-
)}
51+
<NotificationBadge
52+
label={dueTasksCount}
53+
show={dueTasksCount > 0}
54+
variant={browserSettings.viewType === 'tasks' ? 'secondary' : 'default'}
55+
className="shadow-md"
4856
>
49-
<TaskIcon className="h-4 w-4" />
50-
<span className="hidden sm:inline">Tasks</span>
51-
</button>
57+
<button
58+
onClick={() => handleViewChange(true)}
59+
className={cn(
60+
'relative z-10 rounded-full px-4 py-2 text-sm font-medium transition-colors flex items-center gap-2',
61+
browserSettings.viewType === 'tasks' ? 'text-primary-foreground' : 'text-muted-foreground hover:text-foreground'
62+
)}
63+
>
64+
<TaskIcon className="h-4 w-4" />
65+
<span className="hidden sm:inline">Tasks</span>
66+
</button>
67+
</NotificationBadge>
5268
<div
5369
className={cn(
5470
'absolute left-0.5 top-0.5 h-[calc(100%-0.25rem)] rounded-full bg-primary transition-transform',

‎components/theme-provider.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
"use client"
2+
3+
import * as React from "react"
4+
import { ThemeProvider as NextThemesProvider } from "next-themes"
5+
6+
export function ThemeProvider({
7+
children,
8+
...props
9+
}: React.ComponentProps<typeof NextThemesProvider>) {
10+
return <NextThemesProvider {...props}>{children}</NextThemesProvider>
11+
}

‎components/theme-toggle.tsx

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
"use client"
2+
3+
import * as React from "react"
4+
import { Moon, MoonIcon, Sun } from "lucide-react"
5+
import { useTheme } from "next-themes"
6+
7+
import { Button } from "@/components/ui/button"
8+
import {
9+
DropdownMenu,
10+
DropdownMenuContent,
11+
DropdownMenuItem,
12+
DropdownMenuTrigger,
13+
} from "@/components/ui/dropdown-menu"
14+
15+
export function ThemeToggle() {
16+
const { setTheme } = useTheme()
17+
18+
return (
19+
<DropdownMenu>
20+
<DropdownMenuTrigger asChild>
21+
<Button variant="outline" size="icon">
22+
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
23+
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
24+
<span className="sr-only">Toggle theme</span>
25+
</Button>
26+
</DropdownMenuTrigger>
27+
<DropdownMenuContent align="end">
28+
<DropdownMenuItem onClick={() => setTheme("light")}>
29+
Light
30+
</DropdownMenuItem>
31+
<DropdownMenuItem onClick={() => setTheme("dark")}>
32+
Dark
33+
</DropdownMenuItem>
34+
<DropdownMenuItem onClick={() => setTheme("system")}>
35+
System
36+
</DropdownMenuItem>
37+
</DropdownMenuContent>
38+
</DropdownMenu>
39+
)
40+
}

‎components/ui/notification-badge.tsx

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import React from 'react';
2+
import {Badge, BadgeProps} from './badge';
3+
import {cn} from '@/lib/utils';
4+
5+
export interface NotificationBadgeProps extends BadgeProps {
6+
label?: string | number;
7+
show?: boolean;
8+
variant?: 'destructive' | 'default' | 'secondary';
9+
}
10+
11+
export const NotificationBadge = ({
12+
label,
13+
className,
14+
show,
15+
variant = 'destructive',
16+
children,
17+
...props
18+
}: NotificationBadgeProps) => {
19+
const showBadge =
20+
typeof label !== 'undefined' && (typeof show === 'undefined' || show);
21+
return (
22+
<div className='inline-flex relative'>
23+
{children}
24+
{showBadge && (
25+
<Badge
26+
variant={variant}
27+
className={cn(
28+
'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',
29+
typeof label !== 'undefined' && ('' + label).length === 0
30+
? ''
31+
: 'min-w-[1rem]',
32+
className
33+
)}
34+
{...props}
35+
>
36+
{'' + label}
37+
</Badge>
38+
)}
39+
</div>
40+
);
41+
};

‎package-lock.json

+11
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)