fix pomo (#42)

CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## Version 0.1.20
+
+### Changed
+
+- improved UI for habits and wishlist on mobile
+
+### Fixed
+
+- fix pomodoro break timer from triggering completions
+- don't show progress on pomodoro for single completion habit
+
 ## Version 0.1.19
 
 ### Added

components/ChangelogModal.tsx

@@ -27,7 +27,7 @@ export default function ChangelogModal({ isOpen, onClose }: ChangelogModalProps)
     <Dialog open={isOpen} onOpenChange={onClose}>
       <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
         <DialogHeader>
-          <DialogTitle>Changelog</DialogTitle>
+          <DialogTitle></DialogTitle>
         </DialogHeader>
         <div className="prose dark:prose-invert prose-sm max-w-none">
           <ReactMarkdown>{changelog}</ReactMarkdown>

components/HabitItem.tsx

@@ -3,8 +3,16 @@ import { useAtom } from 'jotai'
 import { settingsAtom } from '@/lib/atoms'
 import { getTodayInTimezone, isSameDate, t2d, d2t, getNow, parseNaturalLanguageRRule, parseRRule } from '@/lib/utils'
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
+import ReactMarkdown from 'react-markdown'
 import { Button } from '@/components/ui/button'
-import { Coins, Edit, Trash2, Check, Undo2 } from 'lucide-react'
+import { Coins, Edit, Trash2, Check, Undo2, MoreVertical } from 'lucide-react'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
 import { useEffect, useState } from 'react'
 import { useHabits } from '@/hooks/useHabits'
 import { RRule } from 'rrule'
@@ -49,30 +57,24 @@ export default function HabitItem({ habit, onEdit, onDelete }: HabitItemProps) {
   return (
     <Card
       id={`habit-${habit.id}`}
-      className={`transition-all duration-500 ${isHighlighted ? 'bg-yellow-100 dark:bg-yellow-900' : ''}`}
+      className={`h-full flex flex-col transition-all duration-500 ${isHighlighted ? 'bg-yellow-100 dark:bg-yellow-900' : ''}`}
     >
-      <CardHeader>
+      <CardHeader className="flex-none">
-        <CardTitle>{habit.name}</CardTitle>
+        <CardTitle className="line-clamp-1">{habit.name}</CardTitle>
-        <CardDescription>{habit.description}</CardDescription>
+        {habit.description && (
+          <CardDescription className="whitespace-pre-line">
+            {habit.description}
+          </CardDescription>
+        )}
       </CardHeader>
-      <CardContent>
+      <CardContent className="flex-1">
         <p className="text-sm text-gray-500">Frequency: {parseRRule(habit.frequency || INITIAL_RECURRENCE_RULE).toText()}</p>
         <div className="flex items-center mt-2">
           <Coins className="h-4 w-4 text-yellow-400 mr-1" />
           <span className="text-sm font-medium">{habit.coinReward} coins per completion</span>
         </div>
       </CardContent>
-      <CardFooter className="flex justify-between">
+      <CardFooter className="flex justify-between gap-2">
-        <div>
-          <Button variant="outline" size="sm" onClick={onEdit} className="mr-2">
-            <Edit className="h-4 w-4 mr-2" />
-            Edit
-          </Button>
-          <Button variant="destructive" size="sm" onClick={onDelete}>
-            <Trash2 className="h-4 w-4 mr-2" />
-            Delete
-          </Button>
-        </div>
         <div className="flex gap-2">
           <div className="relative">
             <Button
@@ -80,14 +82,28 @@ export default function HabitItem({ habit, onEdit, onDelete }: HabitItemProps) {
               size="sm"
               onClick={async () => await completeHabit(habit)}
               disabled={isCompletedToday && completionsToday >= target}
-              className="overflow-hidden"
+              className="overflow-hidden w-24 sm:w-auto"
             >
-              <Check className="h-4 w-4 mr-2" />
+              <Check className="h-4 w-4 sm:mr-2" />
+              <span>
                 {isCompletedToday ? (
-                target > 1 ? `Completed (${completionsToday}/${target})` : 'Completed'
+                  target > 1 ? (
+                    <>
+                      <span className="sm:hidden">{completionsToday}/{target}</span>
+                      <span className="hidden sm:inline">Completed ({completionsToday}/{target})</span>
+                    </>
                   ) : (
-                target > 1 ? `Complete (${completionsToday}/${target})` : 'Complete'
+                    'Completed'
+                  )
+                ) : (
+                  target > 1 ? (
+                    <>
+                      <span className="sm:hidden">{completionsToday}/{target}</span>
+                      <span className="hidden sm:inline">Complete ({completionsToday}/{target})</span>
+                    </>
+                  ) : 'Complete'
                 )}
+              </span>
               {habit.targetCompletions && habit.targetCompletions > 1 && (
                 <div
                   className="absolute bottom-0 left-0 h-1 bg-white/50"
@@ -103,11 +119,45 @@ export default function HabitItem({ habit, onEdit, onDelete }: HabitItemProps) {
               variant="outline"
               size="sm"
               onClick={async () => await undoComplete(habit)}
+              className="w-10 sm:w-auto"
             >
-              <Undo2 />
+              <Undo2 className="h-4 w-4" />
+              <span className="hidden sm:inline ml-2">Undo</span>
             </Button>
           )}
         </div>
+        <div className="flex gap-2">
+          <Button
+            variant="edit"
+            size="sm"
+            onClick={onEdit}
+            className="hidden sm:flex"
+          >
+            <Edit className="h-4 w-4" />
+            <span className="ml-2">Edit</span>
+          </Button>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
+                <MoreVertical className="h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem onClick={onEdit} className="sm:hidden">
+                <Edit className="mr-2 h-4 w-4" />
+                Edit
+              </DropdownMenuItem>
+              <DropdownMenuSeparator className="sm:hidden" />
+              <DropdownMenuItem
+                className="text-red-600 focus:text-red-600 dark:text-red-400 dark:focus:text-red-400 cursor-pointer"
+                onClick={onDelete}
+              >
+                <Trash2 className="mr-2 h-4 w-4" />
+                Delete
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
       </CardFooter>
     </Card>
   )

components/HabitList.tsx

@@ -33,7 +33,7 @@ export default function HabitList() {
           <Plus className="mr-2 h-4 w-4" /> Add Habit
         </Button>
       </div>
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 items-stretch">
         {habits.length === 0 ? (
           <div className="col-span-2">
             <EmptyState

components/PomodoroTimer.tsx

@@ -158,7 +158,8 @@ export default function PomodoroTimer() {
 
   const handleTimerEnd = async () => {
     setState("stopped")
-    currentTimer.current = currentTimer.current.type === 'focus' ? PomoConfigs.break : PomoConfigs.focus
+    const currentTimerType = currentTimer.current.type
+    currentTimer.current = currentTimerType === 'focus' ? PomoConfigs.break : PomoConfigs.focus
     setTimeLeft(currentTimer.current.duration)
     setCurrentLabel(
       currentTimer.current.labels[Math.floor(Math.random() * currentTimer.current.labels.length)]
@@ -167,15 +168,12 @@ export default function PomodoroTimer() {
     // Play sound
     playSound()
 
-    // update habits
+    // update habits only after focus sessions
-    if (selectedHabit) {
+    if (selectedHabit && currentTimerType === 'focus') {
-      const ret = await completeHabit(selectedHabit)
+      await completeHabit(selectedHabit)
-      if (ret) {
-        const updatedHabit = ret.updatedHabits.find(h => h.id === selectedHabit.id)
       // The atom will automatically update with the new completions
     }
   }
-  }
 
   const toggleTimer = () => {
     setState(prev => prev === 'started' ? 'paused' : 'started')
@@ -258,14 +256,13 @@ export default function PomodoroTimer() {
                 </div>
               )}
               <span>{currentTimer.current.type.charAt(0).toUpperCase() + currentTimer.current.type.slice(1)}: {currentLabel}</span>
-              {selectedHabit && (
+              {selectedHabit && selectedHabit.targetCompletions && selectedHabit.targetCompletions > 1 && (
                 <div className="flex justify-center gap-1 mt-2">
                   {(() => {
-                    const total = selectedHabit.targetCompletions || 1
                     // Show up to 7 items, but no more than the target completions
-                    const maxItems = Math.min(7, total)
+                    const maxItems = Math.min(7, selectedHabit.targetCompletions)
                     // Calculate start position to center current completion
-                    const start = Math.max(0, Math.min(todayCompletions - Math.floor(maxItems / 2), total - maxItems))
+                    const start = Math.max(0, Math.min(todayCompletions - Math.floor(maxItems / 2), selectedHabit.targetCompletions - maxItems))
 
                     return Array.from({ length: maxItems }).map((_, i) => {
                       const cycle = start + i

components/WishlistItem.tsx

@@ -1,7 +1,15 @@
 import { WishlistItemType } from '@/lib/types'
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
+import ReactMarkdown from 'react-markdown'
 import { Button } from '@/components/ui/button'
-import { Coins, Edit, Trash2, Gift } from 'lucide-react'
+import { Coins, Edit, Trash2, Gift, MoreVertical } from 'lucide-react'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
 
 interface WishlistItemProps {
   item: WishlistItemType
@@ -25,43 +33,81 @@ export default function WishlistItem({
   return (
     <Card
       id={`wishlist-${item.id}`}
-      className={`transition-all duration-500 ${isHighlighted ? 'bg-yellow-100 dark:bg-yellow-900' : ''
+      className={`h-full flex flex-col transition-all duration-500 ${isHighlighted ? 'bg-yellow-100 dark:bg-yellow-900' : ''
         } ${isRecentlyRedeemed ? 'animate-[celebrate_1s_ease-in-out] shadow-lg ring-2 ring-primary' : ''
         }`}
     >
-      <CardHeader>
+      <CardHeader className="flex-none">
-        <CardTitle>{item.name}</CardTitle>
+        <CardTitle className="line-clamp-1">{item.name}</CardTitle>
-        <CardDescription>{item.description}</CardDescription>
+        {item.description && (
+          <CardDescription className="whitespace-pre-line">
+            {item.description}
+          </CardDescription>
+        )}
       </CardHeader>
-      <CardContent>
+      <CardContent className="flex-1">
         <div className="flex items-center">
           <Coins className="h-4 w-4 text-yellow-400 mr-1" />
           <span className="text-sm font-medium">{item.coinCost} coins</span>
         </div>
       </CardContent>
-      <CardFooter className="flex justify-between">
+      <CardFooter className="flex justify-between gap-2">
-        <div>
+        <div className="flex gap-2">
-          <Button variant="outline" size="sm" onClick={onEdit} className="mr-2">
-            <Edit className="h-4 w-4 mr-2" />
-            Edit
-          </Button>
-          <Button variant="destructive" size="sm" onClick={onDelete}>
-            <Trash2 className="h-4 w-4 mr-2" />
-            Delete
-          </Button>
-        </div>
           <Button
             variant={canRedeem ? "default" : "secondary"}
             size="sm"
             onClick={onRedeem}
             disabled={!canRedeem}
-          className={`transition-all duration-300 ${isRecentlyRedeemed ? 'bg-green-500 hover:bg-green-600' : ''
+            className={`transition-all duration-300 w-24 sm:w-auto ${isRecentlyRedeemed ? 'bg-green-500 hover:bg-green-600' : ''}`}
-            }`}
           >
-          <Gift className={`h-4 w-4 mr-2 ${isRecentlyRedeemed ? 'animate-spin' : ''
+            <Gift className={`h-4 w-4 sm:mr-2 ${isRecentlyRedeemed ? 'animate-spin' : ''}`} />
-            }`} />
+            <span>
-          {isRecentlyRedeemed ? 'Redeemed!' : 'Redeem'}
+              {isRecentlyRedeemed ? (
+                <>
+                  <span className="sm:hidden">Done</span>
+                  <span className="hidden sm:inline">Redeemed!</span>
+                </>
+              ) : (
+                <>
+                  <span className="sm:hidden">Redeem</span>
+                  <span className="hidden sm:inline">Redeem</span>
+                </>
+              )}
+            </span>
           </Button>
+        </div>
+        <div className="flex gap-2">
+          <Button
+            variant="edit"
+            size="sm"
+            onClick={onEdit}
+            className="hidden sm:flex"
+          >
+            <Edit className="h-4 w-4" />
+            <span className="ml-2">Edit</span>
+          </Button>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
+                <MoreVertical className="h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem onClick={onEdit} className="sm:hidden">
+                <Edit className="mr-2 h-4 w-4" />
+                Edit
+              </DropdownMenuItem>
+              <DropdownMenuSeparator className="sm:hidden" />
+              <DropdownMenuItem
+                className="text-red-600 focus:text-red-600 dark:text-red-400 dark:focus:text-red-400 cursor-pointer"
+                onClick={onDelete}
+              >
+                <Trash2 className="mr-2 h-4 w-4" />
+                Delete
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
       </CardFooter>
     </Card>
   )

components/WishlistManager.tsx

@@ -68,7 +68,7 @@ export default function WishlistManager() {
           <Plus className="mr-2 h-4 w-4" /> Add Reward
         </Button>
       </div>
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 items-stretch">
         {wishlistItems.length === 0 ? (
           <div className="col-span-2">
             <EmptyState

components/ui/button.tsx

@@ -19,6 +19,7 @@ const buttonVariants = cva(
           "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
+        edit: "bg-white text-blue-600 hover:bg-gray-50 dark:bg-gray-800 dark:text-blue-400 dark:hover:bg-gray-700 border border-slate-200 dark:border-blue-800",
       },
       size: {
         default: "h-9 px-4 py-2",

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "habittrove",
-  "version": "0.1.18",
+  "version": "0.1.19",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "habittrove",
-      "version": "0.1.18",
+      "version": "0.1.19",
       "dependencies": {
         "@emoji-mart/data": "^1.2.1",
         "@emoji-mart/react": "^1.1.1",

package.json

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