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

Merge Tag v0.2.13

Browse Source
This commit is contained in:
ManInDark
2025-05-21 14:57:45 +02:00
parent eff14f3772 ac71c94d53
commit 92d1462010
10 changed files with 97 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
CHANGELOG.md
View File

@@ -1,5 +1,13 @@
# Changelog # Changelog
## Version 0.2.13
### Fixed
* fix responsive design on mobile (#134)
* fix translation (#132)
* fix latest docker tag auto build (#131)
## Version 0.2.12 ## Version 0.2.12
### Added ### Added

8
app/settings/page.tsx
View File

@@ -33,7 +33,7 @@ export default function SettingsPage() {
return ( return (
<> <>
<div className="container mx-auto px-4 py-8"> <div>
<h1 className="text-3xl font-bold mb-6">{t('title')}</h1> <h1 className="text-3xl font-bold mb-6">{t('title')}</h1>
<Card className="mb-6"> <Card className="mb-6">
<CardHeader> <CardHeader>
@@ -102,7 +102,7 @@ export default function SettingsPage() {
system: { ...settings.system, timezone: e.target.value } system: { ...settings.system, timezone: e.target.value }
}) })
} }
className="w-[200px] rounded-md border border-input bg-background px-3 py-2 mb-4" className="w-[110px] xs:w-[200px] rounded-md border border-input bg-background px-3 py-2 mb-4"
> >
{Intl.supportedValuesOf('timeZone').map((tz) => ( {Intl.supportedValuesOf('timeZone').map((tz) => (
<option key={tz} value={tz}> <option key={tz} value={tz}>
@@ -130,7 +130,7 @@ export default function SettingsPage() {
system: { ...settings.system, weekStartDay: Number(e.target.value) as WeekDay } system: { ...settings.system, weekStartDay: Number(e.target.value) as WeekDay }
}) })
} }
className="w-[200px] rounded-md border border-input bg-background px-3 py-2" className="w-[110px] xs:w-[200px] rounded-md border border-input bg-background px-3 py-2"
> >
{([ {([
['sunday', 0], ['sunday', 0],
@@ -213,7 +213,7 @@ export default function SettingsPage() {
variant: 'default', variant: 'default',
}); });
}} }}
className={`w-[200px] rounded-md border border-input bg-background px-3 py-2 ${serverSettings.isDemo ? 'cursor-not-allowed opacity-50' : ''}`} className={`w-[110px] xs:w-[200px] rounded-md border border-input bg-background px-3 py-2 ${serverSettings.isDemo ? 'cursor-not-allowed opacity-50' : ''}`}
> >
{/* Add more languages as needed */} {/* Add more languages as needed */}
<option value="en">English</option> <option value="en">English</option>

4
components/CoinsManager.tsx
View File

@@ -102,9 +102,9 @@ export default function CoinsManager() {
} }
return ( return (
<div className="container mx-auto px-4 py-8"> <div>
<div className="flex items-center justify-between mb-6"> <div className="flex items-center justify-between mb-6">
<h1 className="text-3xl font-bold mr-6">{t('title')}</h1> <h1 className="text-xl xs:text-3xl font-bold mr-6">{t('title')}</h1>
{currentUser?.isAdmin && ( {currentUser?.isAdmin && (
<select <select
className="border rounded p-2" className="border rounded p-2"

4
components/Dashboard.tsx
View File

@@ -17,9 +17,9 @@ export default function Dashboard() {
const wishlistItems = wishlist.items const wishlistItems = wishlist.items
return ( return (
<div className="container mx-auto px-4 py-8"> <div>
<div className="flex justify-between items-center mb-6"> <div className="flex justify-between items-center mb-6">
<h1 className="text-3xl font-bold">{t('title')}</h1> <h1 className="text-xl xs:text-3xl font-bold">{t('title')}</h1>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<CoinBalance coinBalance={balance} /> <CoinBalance coinBalance={balance} />

84
components/HabitCalendar.tsx
View File

@@ -42,8 +42,8 @@ export default function HabitCalendar() {
}, [completedHabitsMap, settings.system.timezone]) }, [completedHabitsMap, settings.system.timezone])
return ( return (
<div className="container mx-auto px-4 py-8"> <div>
<h1 className="text-3xl font-bold mb-6">{t('title')}</h1> <h1 className="text-xl xs:text-3xl font-bold mb-6">{t('title')}</h1>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6"> <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
<Card> <Card>
<CardHeader> <CardHeader>
@@ -156,49 +156,49 @@ export default function HabitCalendar() {
date: selectedDateTime date: selectedDateTime
})) }))
.map((habit) => { .map((habit) => {
const completions = getCompletionsForDate({ habit, date: selectedDateTime, timezone: settings.system.timezone }) const completions = getCompletionsForDate({ habit, date: selectedDateTime, timezone: settings.system.timezone })
const isCompleted = completions >= (habit.targetCompletions || 1) const isCompleted = completions >= (habit.targetCompletions || 1)
return ( return (
<li key={habit.id} className="flex items-center justify-between gap-2 px-3 py-2 rounded-lg hover:bg-muted/50 transition-colors"> <li key={habit.id} className="flex items-center justify-between gap-2 px-3 py-2 rounded-lg hover:bg-muted/50 transition-colors">
<span className="flex items-center gap-2"> <span className="flex items-center gap-2">
<Linkify>{habit.name}</Linkify> <Linkify>{habit.name}</Linkify>
</span> </span>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{habit.targetCompletions && ( {habit.targetCompletions && (
<span className="text-sm text-muted-foreground"> <span className="text-sm text-muted-foreground">
{completions}/{habit.targetCompletions} {completions}/{habit.targetCompletions}
</span> </span>
)} )}
<button <button
onClick={() => handleCompletePastHabit(habit, selectedDateTime)} onClick={() => handleCompletePastHabit(habit, selectedDateTime)}
disabled={isCompleted} disabled={isCompleted}
className="relative h-4 w-4 hover:opacity-70 transition-opacity disabled:opacity-100" className="relative h-4 w-4 hover:opacity-70 transition-opacity disabled:opacity-100"
> >
{isCompleted ? ( {isCompleted ? (
<CircleCheck className="h-4 w-4 text-green-500" /> <CircleCheck className="h-4 w-4 text-green-500" />
) : ( ) : (
<div className="relative h-4 w-4"> <div className="relative h-4 w-4">
<Circle className="absolute h-4 w-4 text-muted-foreground" /> <Circle className="absolute h-4 w-4 text-muted-foreground" />
<div <div
className="absolute h-4 w-4 rounded-full overflow-hidden" className="absolute h-4 w-4 rounded-full overflow-hidden"
style={{ style={{
background: `conic-gradient( background: `conic-gradient(
currentColor ${(completions / (habit.targetCompletions ?? 1)) * 360}deg, currentColor ${(completions / (habit.targetCompletions ?? 1)) * 360}deg,
transparent ${(completions / (habit.targetCompletions ?? 1)) * 360}deg 360deg transparent ${(completions / (habit.targetCompletions ?? 1)) * 360}deg 360deg
)`, )`,
mask: 'radial-gradient(transparent 50%, black 51%)', mask: 'radial-gradient(transparent 50%, black 51%)',
WebkitMask: 'radial-gradient(transparent 50%, black 51%)' WebkitMask: 'radial-gradient(transparent 50%, black 51%)'
}} }}
/> />
</div> </div>
)} )}
</button> </button>
</div> </div>
</div> </div>
</li> </li>
) )
})} })}
</ul> </ul>
</div> </div>
</div> </div>

30
components/HabitList.tsx
View File

@@ -120,9 +120,11 @@ export default function HabitList({ isTasksView }: { isTasksView: boolean}) {
return ( return (
<div className="container mx-auto px-4 py-8"> <div>
<div className="flex justify-between items-center mb-6"> <div className="flex justify-between items-center mb-6">
<h1 className="text-3xl font-bold">{t(isTasksView ? "myTasks" : "myHabits")}</h1> <h1 className="text-xl xs:text-3xl font-bold">
{t(isTasksView ? 'myTasks' : 'myHabits')}
</h1>
<span> <span>
<Button onClick={() => setModalConfig({ isOpen: true, isTask: isTasksView })}> <Button onClick={() => setModalConfig({ isOpen: true, isTask: isTasksView })}>
<Plus className='mr-2 h-4 w-4' />{isTasksView ? t("addTaskButton") : t("addHabitButton")} <Plus className='mr-2 h-4 w-4' />{isTasksView ? t("addTaskButton") : t("addHabitButton")}
@@ -178,18 +180,18 @@ export default function HabitList({ isTasksView }: { isTasksView: boolean}) {
/> />
</div> </div>
) : ( ) : (
activeHabits.map((habit: Habit) => ( activeHabits.map((habit: Habit) => (
<HabitItem <HabitItem
key={habit.id} key={habit.id}
habit={habit} habit={habit}
onEdit={() => { onEdit={() => {
setEditingHabit(habit) setEditingHabit(habit)
setModalConfig({ isOpen: true, isTask: isTasksView }) setModalConfig({ isOpen: true, isTask: isTasksView })
}} }}
onDelete={() => setDeleteConfirmation({ isOpen: true, habitId: habit.id })} onDelete={() => setDeleteConfirmation({ isOpen: true, habitId: habit.id })}
/> />
)) ))
)} )}
{archivedHabits.length > 0 && ( {archivedHabits.length > 0 && (
<> <>

10
components/Layout.tsx
View File

@@ -1,3 +1,4 @@
import { ResponsiveContainer } from 'recharts'
import ClientWrapper from './ClientWrapper' import ClientWrapper from './ClientWrapper'
import Header from './Header' import Header from './Header'
import Navigation from './Navigation' import Navigation from './Navigation'
@@ -10,9 +11,12 @@ export default function Layout({ children }: { children: React.ReactNode }) {
<Navigation viewPort='main' /> <Navigation viewPort='main' />
<div className="flex-1 flex flex-col"> <div className="flex-1 flex flex-col">
<main className="flex-1 overflow-x-hidden overflow-y-auto bg-gray-100 dark:bg-gray-900 relative"> <main className="flex-1 overflow-x-hidden overflow-y-auto bg-gray-100 dark:bg-gray-900 relative">
<ClientWrapper> {/* responsive container (optimized for mobile) */}
{children} <div className="mx-auto px-2 xs:px-4 py-8 max-w-sm xs:max-w-full">
</ClientWrapper> <ClientWrapper>
{children}
</ClientWrapper>
</div>
</main> </main>
<Navigation viewPort='mobile' /> <Navigation viewPort='mobile' />
</div> </div>

8
components/WishlistManager.tsx
View File

@@ -66,7 +66,7 @@ export default function WishlistManager() {
setTimeout(() => { setTimeout(() => {
setRecentlyRedeemedId(null) setRecentlyRedeemedId(null)
}, 3000) }, 3000)
if (item.link) { if (item.link) {
setTimeout(() => { setTimeout(() => {
const opened = openWindow(item.link!) const opened = openWindow(item.link!)
@@ -83,9 +83,9 @@ export default function WishlistManager() {
} }
return ( return (
<div className="container mx-auto px-4 py-8"> <div>
<div className="flex justify-between items-center mb-6"> <div className="flex justify-between items-center mb-6">
<h1 className="text-3xl font-bold">{t('title')}</h1> <h1 className="text-xl xs:text-3xl font-bold">{t('title')}</h1>
<Button onClick={() => setIsModalOpen(true)}> <Button onClick={() => setIsModalOpen(true)}>
<Plus className="mr-2 h-4 w-4" /> {t('addRewardButton')} <Plus className="mr-2 h-4 w-4" /> {t('addRewardButton')}
</Button> </Button>
@@ -126,7 +126,7 @@ export default function WishlistManager() {
</div> </div>
)) ))
)} )}
{archivedItems.length > 0 && ( {archivedItems.length > 0 && (
<> <>
<div className="col-span-1 lg:col-span-2 relative flex items-center my-6"> <div className="col-span-1 lg:col-span-2 relative flex items-center my-6">

2
package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "habittrove", "name": "habittrove",
"version": "0.2.12", "version": "0.2.13",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "next dev --turbopack", "dev": "next dev --turbopack",

11
tailwind.config.ts
View File

@@ -8,6 +8,17 @@ export default {
"./app/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}",
], ],
theme: { theme: {
screens: {
'3xs': '320px',
'2xs': '375px',
'xs': '480px',
'sm': '640px',
'md': '768px',
'lg': '1024px',
'xl': '1280px',
'2xl': '1536px',
'3xl': '1920px'
},
extend: { extend: {
keyframes: { keyframes: {
celebrate: { celebrate: {