ManInDark/HabitTrove
1
0
Fork 0
mirror of https://github.com/ManInDark/HabitTrove.git synced 2026-01-21 06:34:30 +01:00
Code Issues Packages Projects Releases Wiki Activity

dark mode

Browse Source
This commit is contained in:
dohsimpson
2025-01-25 13:03:07 -05:00
parent 6fe10d9fa5
commit c66e28162c
10 changed files with 246 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
CHANGELOG.md
View File

@@ -1,5 +1,12 @@
# Changelog # Changelog
## Version 0.1.27
### Added
- dark mode toggle (#48)
- notification badge for tasks (#51)
## Version 0.1.26 ## Version 0.1.26
### Added ### Added

18
app/layout.tsx
View File

@@ -7,6 +7,8 @@ import { JotaiHydrate } from '@/components/jotai-hydrate'
import { loadSettings, loadHabitsData, loadCoinsData, loadWishlistData } from './actions/data' import { loadSettings, loadHabitsData, loadCoinsData, loadWishlistData } from './actions/data'
import Layout from '@/components/Layout' import Layout from '@/components/Layout'
import { Toaster } from '@/components/ui/toaster' import { Toaster } from '@/components/ui/toaster'
import { ThemeProvider } from "@/components/theme-provider"
// Inter (clean, modern, excellent readability) // Inter (clean, modern, excellent readability)
// const inter = Inter({ // const inter = Inter({
@@ -42,7 +44,8 @@ export default async function RootLayout({
]) ])
return ( 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}> <body className={activeFont.className}>
<script <script
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
@@ -71,9 +74,16 @@ export default async function RootLayout({
wishlist: initialWishlist wishlist: initialWishlist
}} }}
> >
<Layout> <ThemeProvider
{children} attribute="class"
</Layout> defaultTheme="system"
enableSystem
disableTransitionOnChange
>
<Layout>
{children}
</Layout>
</ThemeProvider>
</JotaiHydrate> </JotaiHydrate>
</Suspense> </Suspense>
</JotaiProvider> </JotaiProvider>

38
components/Header.tsx
View File

@@ -18,6 +18,7 @@ import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import AboutModal from './AboutModal' import AboutModal from './AboutModal'
import Link from 'next/link' import Link from 'next/link'
import dynamic from 'next/dynamic' import dynamic from 'next/dynamic'
import { Profile } from './Profile'
interface HeaderProps { interface HeaderProps {
className?: string className?: string
@@ -26,7 +27,6 @@ interface HeaderProps {
const TodayEarnedCoins = dynamic(() => import('./TodayEarnedCoins'), { ssr: false }) const TodayEarnedCoins = dynamic(() => import('./TodayEarnedCoins'), { ssr: false })
export default function Header({ className }: HeaderProps) { export default function Header({ className }: HeaderProps) {
const [showAbout, setShowAbout] = useState(false)
const [settings] = useAtom(settingsAtom) const [settings] = useAtom(settingsAtom)
const [coins] = useAtom(coinsAtom) const [coins] = useAtom(coinsAtom)
const [browserSettings] = useAtom(browserSettingsAtom) const [browserSettings] = useAtom(browserSettingsAtom)
@@ -56,45 +56,11 @@ export default function Header({ className }: HeaderProps) {
<Button variant="ghost" size="icon" aria-label="Notifications"> <Button variant="ghost" size="icon" aria-label="Notifications">
<Bell className="h-5 w-5" /> <Bell className="h-5 w-5" />
</Button> </Button>
<DropdownMenu> <Profile />
<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>
</div> </div>
</header> </header>
<AboutModal isOpen={showAbout} onClose={() => setShowAbout(false)} />
</> </>
) )
} }

92
components/Profile.tsx Normal file
View File

@@ -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)} />
</>
)
}

36
components/ViewToggle.tsx
View File

@@ -3,9 +3,11 @@
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
import { useAtom } from 'jotai' import { useAtom } from 'jotai'
import { CheckSquare, ListChecks } from 'lucide-react' 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 type { ViewType } from '@/lib/types'
import { HabitIcon, TaskIcon } from '@/lib/constants' import { HabitIcon, TaskIcon } from '@/lib/constants'
import { isHabitDueToday } from '@/lib/utils'
import { NotificationBadge } from './ui/notification-badge'
interface ViewToggleProps { interface ViewToggleProps {
defaultView?: ViewType defaultView?: ViewType
@@ -17,6 +19,8 @@ export function ViewToggle({
className className
}: ViewToggleProps) { }: ViewToggleProps) {
const [browserSettings, setBrowserSettings] = useAtom(browserSettingsAtom) const [browserSettings, setBrowserSettings] = useAtom(browserSettingsAtom)
const [habits] = useAtom(habitsAtom)
const [settings] = useAtom(settingsAtom)
const handleViewChange = (checked: boolean) => { const handleViewChange = (checked: boolean) => {
const newView = checked ? 'tasks' : 'habits' 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 ( return (
<div className={cn('inline-flex rounded-full bg-muted/50 h-8', className)}> <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"> <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" /> <HabitIcon className="h-4 w-4" />
<span className="hidden sm:inline">Habits</span> <span className="hidden sm:inline">Habits</span>
</button> </button>
<button <NotificationBadge
onClick={() => handleViewChange(true)} label={dueTasksCount}
className={cn( show={dueTasksCount > 0}
'relative z-10 rounded-full px-4 py-2 text-sm font-medium transition-colors flex items-center gap-2', variant={browserSettings.viewType === 'tasks' ? 'secondary' : 'default'}
browserSettings.viewType === 'tasks' ? 'text-primary-foreground' : 'text-muted-foreground hover:text-foreground' className="shadow-md"
)}
> >
<TaskIcon className="h-4 w-4" /> <button
<span className="hidden sm:inline">Tasks</span> onClick={() => handleViewChange(true)}
</button> 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 <div
className={cn( className={cn(
'absolute left-0.5 top-0.5 h-[calc(100%-0.25rem)] rounded-full bg-primary transition-transform', 'absolute left-0.5 top-0.5 h-[calc(100%-0.25rem)] rounded-full bg-primary transition-transform',

11
components/theme-provider.tsx Normal file
View File

@@ -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>
}

40
components/theme-toggle.tsx Normal file
View File

@@ -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>
)
}

41
components/ui/notification-badge.tsx Normal file
View File

@@ -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>
);
};

11
package-lock.json generated
View File

@@ -37,6 +37,7 @@
"lucide-react": "^0.469.0", "lucide-react": "^0.469.0",
"luxon": "^3.5.0", "luxon": "^3.5.0",
"next": "15.1.3", "next": "15.1.3",
"next-themes": "^0.4.4",
"react": "^19.0.0", "react": "^19.0.0",
"react-confetti": "^6.2.2", "react-confetti": "^6.2.2",
"react-day-picker": "^8.10.1", "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": { "node_modules/next/node_modules/postcss": {
"version": "8.4.31", "version": "8.4.31",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",

3
package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "habittrove", "name": "habittrove",
"version": "0.1.26", "version": "0.1.27",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "next dev --turbopack", "dev": "next dev --turbopack",
@@ -44,6 +44,7 @@
"lucide-react": "^0.469.0", "lucide-react": "^0.469.0",
"luxon": "^3.5.0", "luxon": "^3.5.0",
"next": "15.1.3", "next": "15.1.3",
"next-themes": "^0.4.4",
"react": "^19.0.0", "react": "^19.0.0",
"react-confetti": "^6.2.2", "react-confetti": "^6.2.2",
"react-day-picker": "^8.10.1", "react-day-picker": "^8.10.1",