added support for tasks

Author: dohsimpson

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## Version 0.1.25
+
+### Added
+
+- added support for tasks (#41)
+
 ## Version 0.1.24
 
 ### Fixed

app/actions/data.ts

@@ -101,13 +101,19 @@ export async function saveCoinsData(data: CoinsData): Promise<void> {
   return saveData('coins', data)
 }
 
-export async function addCoins(
-  amount: number,
-  description: string,
-  type: TransactionType = 'MANUAL_ADJUSTMENT',
-  relatedItemId?: string,
+export async function addCoins({
+  amount,
+  description,
+  type = 'MANUAL_ADJUSTMENT',
+  relatedItemId,
+  note,
+}: {
+  amount: number
+  description: string
+  type?: TransactionType
+  relatedItemId?: string
   note?: string
-): Promise<CoinsData> {
+}): Promise<CoinsData> {
   const data = await loadCoinsData()
   const newTransaction: CoinTransaction = {
     id: crypto.randomUUID(),
@@ -143,13 +149,19 @@ export async function saveSettings(settings: Settings): Promise<void> {
   return saveData('settings', settings)
 }
 
-export async function removeCoins(
-  amount: number,
-  description: string,
-  type: TransactionType = 'MANUAL_ADJUSTMENT',
-  relatedItemId?: string,
+export async function removeCoins({
+  amount,
+  description,
+  type = 'MANUAL_ADJUSTMENT',
+  relatedItemId,
+  note,
+}: {
+  amount: number
+  description: string
+  type?: TransactionType
+  relatedItemId?: string
   note?: string
-): Promise<CoinsData> {
+}): Promise<CoinsData> {
   const data = await loadCoinsData()
   const newTransaction: CoinTransaction = {
     id: crypto.randomUUID(),

components/AddEditHabitModal.tsx

@@ -3,7 +3,7 @@
 import { useState, useEffect } from 'react'
 import { RRule, RRuleSet, rrulestr } from 'rrule'
 import { useAtom } from 'jotai'
-import { settingsAtom } from '@/lib/atoms'
+import { settingsAtom, browserSettingsAtom } from '@/lib/atoms'
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
@@ -16,8 +16,10 @@ import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover
 import data from '@emoji-mart/data'
 import Picker from '@emoji-mart/react'
 import { Habit } from '@/lib/types'
-import { parseNaturalLanguageRRule, parseRRule, serializeRRule } from '@/lib/utils'
-import { INITIAL_RECURRENCE_RULE } from '@/lib/constants'
+import { d2s, d2t, getISODate, getNow, parseNaturalLanguageDate, parseNaturalLanguageRRule, parseRRule, serializeRRule } from '@/lib/utils'
+import { INITIAL_DUE, INITIAL_RECURRENCE_RULE } from '@/lib/constants'
+import * as chrono from 'chrono-node';
+import { DateTime } from 'luxon'
 
 interface AddEditHabitModalProps {
   onClose: () => void
@@ -27,12 +29,16 @@ interface AddEditHabitModalProps {
 
 export default function AddEditHabitModal({ onClose, onSave, habit }: AddEditHabitModalProps) {
   const [settings] = useAtom(settingsAtom)
+  const [browserSettings] = useAtom(browserSettingsAtom)
+  const isTasksView = browserSettings.viewType === 'tasks'
   const [name, setName] = useState(habit?.name || '')
   const [description, setDescription] = useState(habit?.description || '')
   const [coinReward, setCoinReward] = useState(habit?.coinReward || 1)
   const [targetCompletions, setTargetCompletions] = useState(habit?.targetCompletions || 1)
-  const origRuleText = parseRRule(habit?.frequency || INITIAL_RECURRENCE_RULE).toText()
+  const isRecurRule = !isTasksView
+  const origRuleText = isRecurRule ? parseRRule(habit?.frequency || INITIAL_RECURRENCE_RULE).toText() : habit?.frequency || INITIAL_DUE
   const [ruleText, setRuleText] = useState<string>(origRuleText)
+  const now = getNow({ timezone: settings.system.timezone })
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
@@ -42,17 +48,16 @@ export default function AddEditHabitModal({ onClose, onSave, habit }: AddEditHab
       coinReward,
       targetCompletions: targetCompletions > 1 ? targetCompletions : undefined,
       completions: habit?.completions || [],
-      frequency: habit ? (
-        origRuleText === ruleText ? habit.frequency : serializeRRule(parseNaturalLanguageRRule(ruleText))
-      ) : serializeRRule(parseNaturalLanguageRRule(ruleText)),
+      frequency: isRecurRule ? serializeRRule(parseNaturalLanguageRRule(ruleText)) : d2t({ dateTime: parseNaturalLanguageDate({ text: ruleText, timezone: settings.system.timezone }) }),
+      isTask: isTasksView ? true : undefined
     })
   }
 
   return (
     <Dialog open={true} onOpenChange={onClose}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>{habit ? 'Edit Habit' : 'Add New Habit'}</DialogTitle>
+          <DialogTitle>{habit ? `Edit ${isTasksView ? 'Task' : 'Habit'}` : `Add New ${isTasksView ? 'Task' : 'Habit'}`}</DialogTitle>
         </DialogHeader>
         <form onSubmit={handleSubmit}>
           <div className="grid gap-4 py-4">
@@ -109,7 +114,7 @@ export default function AddEditHabitModal({ onClose, onSave, habit }: AddEditHab
             </div>
             <div className="grid grid-cols-4 items-center gap-4">
               <Label htmlFor="recurrence" className="text-right">
-                Frequency
+                When
               </Label>
               <div className="col-span-3 space-y-2">
                 <Input
@@ -123,7 +128,7 @@ export default function AddEditHabitModal({ onClose, onSave, habit }: AddEditHab
                 <span>
                   {(() => {
                     try {
-                      return parseNaturalLanguageRRule(ruleText).toText()
+                      return isRecurRule ? parseNaturalLanguageRRule(ruleText).toText() : d2s({ dateTime: parseNaturalLanguageDate({ text: ruleText, timezone: settings.system.timezone }), timezone: settings.system.timezone, format: DateTime.DATE_MED_WITH_WEEKDAY })
                     } catch (e: unknown) {
                       return `Invalid rule: ${e instanceof Error ? e.message : 'Invalid recurrence rule'}`
                     }
@@ -134,7 +139,7 @@ export default function AddEditHabitModal({ onClose, onSave, habit }: AddEditHab
             <div className="grid grid-cols-4 items-center gap-4">
               <div className="flex items-center gap-2 justify-end">
                 <Label htmlFor="targetCompletions">
-                  Repetitions
+                  Complete
                 </Label>
               </div>
               <div className="col-span-3">
@@ -168,15 +173,15 @@ export default function AddEditHabitModal({ onClose, onSave, habit }: AddEditHab
                     </button>
                   </div>
                   <span className="text-sm text-muted-foreground">
-                    times per occurrence
+                    times
                   </span>
                 </div>
               </div>
             </div>
             <div className="grid grid-cols-4 items-center gap-4">
               <div className="flex items-center gap-2 justify-end">
                 <Label htmlFor="coinReward">
-                  Coin Reward
+                  Reward
                 </Label>
               </div>
               <div className="col-span-3">
@@ -207,14 +212,14 @@ export default function AddEditHabitModal({ onClose, onSave, habit }: AddEditHab
                     </button>
                   </div>
                   <span className="text-sm text-muted-foreground">
-                    coins per completion
+                    coins
                   </span>
                 </div>
               </div>
             </div>
           </div>
           <DialogFooter>
-            <Button type="submit">{habit ? 'Save Changes' : 'Add Habit'}</Button>
+            <Button type="submit">{habit ? 'Save Changes' : `Add ${isTasksView ? 'Task' : 'Habit'}`}</Button>
           </DialogFooter>
         </form>
       </DialogContent>

components/DailyOverview.tsx

@@ -9,7 +9,7 @@ import { cn, isHabitDueToday, getHabitFreq } from '@/lib/utils'
 import Link from 'next/link'
 import { useState, useEffect } from 'react'
 import { useAtom } from 'jotai'
-import { pomodoroAtom, settingsAtom, completedHabitsMapAtom, transientSettingsAtom } from '@/lib/atoms'
+import { pomodoroAtom, settingsAtom, completedHabitsMapAtom, browserSettingsAtom } from '@/lib/atoms'
 import { getTodayInTimezone, isSameDate, t2d, d2t, getNow } from '@/lib/utils'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'
@@ -32,16 +32,21 @@ export default function DailyOverview({
 }: UpcomingItemsProps) {
   const { completeHabit, undoComplete } = useHabits()
   const [settings] = useAtom(settingsAtom)
+  const [browserSettings] = useAtom(browserSettingsAtom)
   const [dailyHabits, setDailyHabits] = useState<Habit[]>([])
   const [completedHabitsMap] = useAtom(completedHabitsMapAtom)
   const today = getTodayInTimezone(settings.system.timezone)
   const todayCompletions = completedHabitsMap.get(today) || []
+  const isTasksView = browserSettings.viewType === 'tasks'
 
   useEffect(() => {
     // Filter habits that are due today based on their recurrence rule
-    const filteredHabits = habits.filter(habit => isHabitDueToday({ habit, timezone: settings.system.timezone }))
+    const filteredHabits = habits.filter(habit =>
+      (isTasksView ? habit.isTask : !habit.isTask) &&
+      isHabitDueToday({ habit, timezone: settings.system.timezone })
+    )
     setDailyHabits(filteredHabits)
-  }, [habits])
+  }, [habits, isTasksView])
 
   // Get all wishlist items sorted by redeemable status (non-redeemable first) then by coin cost
   const sortedWishlistItems = wishlistItems
@@ -72,7 +77,7 @@ export default function DailyOverview({
           <div className="space-y-4">
             <div>
               <div className="flex items-center justify-between mb-2">
-                <h3 className="font-semibold">Daily Habits</h3>
+                <h3 className="font-semibold">{isTasksView ? 'Daily Tasks' : 'Daily Habits'}</h3>
                 <Badge variant="secondary">
                   {`${dailyHabits.filter(habit => {
                     const completions = (completedHabitsMap.get(today) || [])

components/Dashboard.tsx

@@ -21,7 +21,7 @@ export default function Dashboard() {
     <div className="container mx-auto px-4 py-8">
       <div className="flex justify-between items-center mb-6">
         <h1 className="text-3xl font-bold">Dashboard</h1>
-        {/* <ViewToggle /> */}
+        <ViewToggle />
       </div>
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
         <CoinBalance coinBalance={coinBalance} />

components/HabitItem.tsx

@@ -1,7 +1,7 @@
 import { Habit } from '@/lib/types'
 import { useAtom } from 'jotai'
-import { settingsAtom, pomodoroAtom } from '@/lib/atoms'
-import { getTodayInTimezone, isSameDate, t2d, d2t, getNow, parseNaturalLanguageRRule, parseRRule } from '@/lib/utils'
+import { settingsAtom, pomodoroAtom, browserSettingsAtom } from '@/lib/atoms'
+import { getTodayInTimezone, isSameDate, t2d, d2t, getNow, parseNaturalLanguageRRule, parseRRule, d2s } from '@/lib/utils'
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
 import { Coins, Edit, Trash2, Check, Undo2, MoreVertical, Timer } from 'lucide-react'
@@ -15,6 +15,7 @@ import {
 import { useEffect, useState } from 'react'
 import { useHabits } from '@/hooks/useHabits'
 import { INITIAL_RECURRENCE_RULE } from '@/lib/constants'
+import { DateTime } from 'luxon'
 
 interface HabitItemProps {
   habit: Habit
@@ -32,6 +33,9 @@ export default function HabitItem({ habit, onEdit, onDelete }: HabitItemProps) {
   const target = habit.targetCompletions || 1
   const isCompletedToday = completionsToday >= target
   const [isHighlighted, setIsHighlighted] = useState(false)
+  const [browserSettings] = useAtom(browserSettingsAtom)
+  const isTasksView = browserSettings.viewType === 'tasks'
+  const isRecurRule = !isTasksView
 
   useEffect(() => {
     const params = new URLSearchParams(window.location.search)
@@ -66,7 +70,7 @@ export default function HabitItem({ habit, onEdit, onDelete }: HabitItemProps) {
         )}
       </CardHeader>
       <CardContent className="flex-1">
-        <p className="text-sm text-gray-500">Frequency: {parseRRule(habit.frequency || INITIAL_RECURRENCE_RULE).toText()}</p>
+        <p className="text-sm text-gray-500">When: {isRecurRule ? parseRRule(habit.frequency || INITIAL_RECURRENCE_RULE).toText() : d2s({ dateTime: t2d({ timestamp: habit.frequency, timezone: settings.system.timezone }), timezone: settings.system.timezone, format: DateTime.DATE_MED_WITH_WEEKDAY })}</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>

components/HabitList.tsx

@@ -3,19 +3,24 @@
 import { useState } from 'react'
 import { Plus, ListTodo } from 'lucide-react'
 import { useAtom } from 'jotai'
-import { habitsAtom, settingsAtom } from '@/lib/atoms'
+import { habitsAtom, settingsAtom, browserSettingsAtom } from '@/lib/atoms'
 import EmptyState from './EmptyState'
 import { Button } from '@/components/ui/button'
 import HabitItem from './HabitItem'
 import AddEditHabitModal from './AddEditHabitModal'
 import ConfirmDialog from './ConfirmDialog'
 import { Habit } from '@/lib/types'
 import { useHabits } from '@/hooks/useHabits'
+import { HabitIcon, TaskIcon } from '@/lib/constants'
 
 export default function HabitList() {
   const { saveHabit, deleteHabit } = useHabits()
   const [habitsData, setHabitsData] = useAtom(habitsAtom)
-  const habits = habitsData.habits
+  const [browserSettings] = useAtom(browserSettingsAtom)
+  const isTasksView = browserSettings.viewType === 'tasks'
+  const habits = habitsData.habits.filter(habit =>
+    isTasksView ? habit.isTask : !habit.isTask
+  )
   const [settings] = useAtom(settingsAtom)
   const [isModalOpen, setIsModalOpen] = useState(false)
   const [editingHabit, setEditingHabit] = useState<Habit | null>(null)
@@ -28,18 +33,20 @@ export default function HabitList() {
   return (
     <div className="container mx-auto px-4 py-8">
       <div className="flex justify-between items-center mb-6">
-        <h1 className="text-3xl font-bold">My Habits</h1>
+        <h1 className="text-3xl font-bold">
+          {isTasksView ? 'My Tasks' : 'My Habits'}
+        </h1>
         <Button onClick={() => setIsModalOpen(true)}>
-          <Plus className="mr-2 h-4 w-4" /> Add Habit
+          <Plus className="mr-2 h-4 w-4" /> {isTasksView ? 'Add Task' : 'Add Habit'}
         </Button>
       </div>
       <div className="grid grid-cols-1 md:grid-cols-2 gap-4 items-stretch">
         {habits.length === 0 ? (
           <div className="col-span-2">
             <EmptyState
-              icon={ListTodo}
-              title="No habits yet"
-              description="Create your first habit to start tracking your progress"
+              icon={isTasksView ? TaskIcon : HabitIcon}
+              title={isTasksView ? "No tasks yet" : "No habits yet"}
+              description={isTasksView ? "Create your first task to start tracking your progress" : "Create your first habit to start tracking your progress"}
             />
           </div>
         ) : (
@@ -79,8 +86,8 @@ export default function HabitList() {
           }
           setDeleteConfirmation({ isOpen: false, habitId: null })
         }}
-        title="Delete Habit"
-        message="Are you sure you want to delete this habit? This action cannot be undone."
+        title={isTasksView ? "Delete Task" : "Delete Habit"}
+        message={isTasksView ? "Are you sure you want to delete this task? This action cannot be undone." : "Are you sure you want to delete this habit? This action cannot be undone."}
         confirmText="Delete"
       />
     </div>

components/Header.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from 'react'
 import { useAtom } from 'jotai'
-import { coinsAtom, settingsAtom } from '@/lib/atoms'
+import { coinsAtom, settingsAtom, browserSettingsAtom } from '@/lib/atoms'
 import { useCoins } from '@/hooks/useCoins'
 import { FormattedNumber } from '@/components/FormattedNumber'
 import { Bell, Menu, Settings, User, Info, Coins } from 'lucide-react'
@@ -29,6 +29,8 @@ export default function Header({ className }: HeaderProps) {
   const [showAbout, setShowAbout] = useState(false)
   const [settings] = useAtom(settingsAtom)
   const [coins] = useAtom(coinsAtom)
+  const [browserSettings] = useAtom(browserSettingsAtom)
+  const isTasksView = browserSettings.viewType === 'tasks'
   return (
     <>
       <header className={`border-b bg-white dark:bg-gray-800 shadow-sm ${className || ''}`}>