added support for tasks

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(
+export async function addCoins({
-  amount: number,
+  amount,
-  description: string,
+  description,
-  type: TransactionType = 'MANUAL_ADJUSTMENT',
+  type = 'MANUAL_ADJUSTMENT',
-  relatedItemId?: string,
+  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(
+export async function removeCoins({
-  amount: number,
+  amount,
-  description: string,
+  description,
-  type: TransactionType = 'MANUAL_ADJUSTMENT',
+  type = 'MANUAL_ADJUSTMENT',
-  relatedItemId?: string,
+  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 { d2s, d2t, getISODate, getNow, parseNaturalLanguageDate, parseNaturalLanguageRRule, parseRRule, serializeRRule } from '@/lib/utils'
-import { INITIAL_RECURRENCE_RULE } from '@/lib/constants'
+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,9 +48,8 @@ export default function AddEditHabitModal({ onClose, onSave, habit }: AddEditHab
       coinReward,
       targetCompletions: targetCompletions > 1 ? targetCompletions : undefined,
       completions: habit?.completions || [],
-      frequency: habit ? (
+      frequency: isRecurRule ? serializeRRule(parseNaturalLanguageRRule(ruleText)) : d2t({ dateTime: parseNaturalLanguageDate({ text: ruleText, timezone: settings.system.timezone }) }),
-        origRuleText === ruleText ? habit.frequency : serializeRRule(parseNaturalLanguageRRule(ruleText))
+      isTask: isTasksView ? true : undefined
-      ) : serializeRRule(parseNaturalLanguageRRule(ruleText)),
     })
   }
 
@@ -52,7 +57,7 @@ export default function AddEditHabitModal({ onClose, onSave, habit }: AddEditHab
     <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,7 +173,7 @@ export default function AddEditHabitModal({ onClose, onSave, habit }: AddEditHab
                     </button>
                   </div>
                   <span className="text-sm text-muted-foreground">
-                    times per occurrence
+                    times
                   </span>
                 </div>
               </div>
@@ -176,7 +181,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="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 { settingsAtom, pomodoroAtom, browserSettingsAtom } from '@/lib/atoms'
-import { getTodayInTimezone, isSameDate, t2d, d2t, getNow, parseNaturalLanguageRRule, parseRRule } from '@/lib/utils'
+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,7 +3,7 @@
 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'
@@ -11,11 +11,16 @@ 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}
+              icon={isTasksView ? TaskIcon : HabitIcon}
-              title="No habits yet"
+              title={isTasksView ? "No tasks yet" : "No habits yet"}
-              description="Create your first habit to start tracking your progress"
+              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"
+        title={isTasksView ? "Delete Task" : "Delete Habit"}
-        message="Are you sure you want to delete this habit? This action cannot be undone."
+        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 || ''}`}>

components/Navigation.tsx

@@ -1,15 +1,23 @@
 'use client'
 
 import Link from 'next/link'
-import { Home, Calendar, List, Gift, Coins, Settings, Info } from 'lucide-react'
+import { Home, Calendar, List, Gift, Coins, Settings, Info, CheckSquare } from 'lucide-react'
+import { useAtom } from 'jotai'
+import { browserSettingsAtom } from '@/lib/atoms'
 import { useEffect, useState } from 'react'
 import AboutModal from './AboutModal'
+import { HabitIcon, TaskIcon } from '@/lib/constants'
 
 type ViewPort = 'main' | 'mobile'
 
-const navItems = [
+const navItems = (isTasksView: boolean) => [
   { icon: Home, label: 'Dashboard', href: '/', position: 'main' },
-  { icon: List, label: 'Habits', href: '/habits', position: 'main' },
+  {
+    icon: isTasksView ? TaskIcon : HabitIcon,
+    label: isTasksView ? 'Tasks' : 'Habits',
+    href: '/habits',
+    position: 'main'
+  },
   { icon: Calendar, label: 'Calendar', href: '/calendar', position: 'main' },
   { icon: Gift, label: 'Wishlist', href: '/wishlist', position: 'main' },
   { icon: Coins, label: 'Coins', href: '/coins', position: 'main' },
@@ -23,6 +31,8 @@ interface NavigationProps {
 export default function Navigation({ className, viewPort }: NavigationProps) {
   const [showAbout, setShowAbout] = useState(false)
   const [isMobileView, setIsMobileView] = useState(false)
+  const [browserSettings] = useAtom(browserSettingsAtom)
+  const isTasksView = browserSettings.viewType === 'tasks'
 
   useEffect(() => {
     const handleResize = () => {
@@ -45,7 +55,7 @@ export default function Navigation({ className, viewPort }: NavigationProps) {
         <div className="pb-16" /> {/* Add padding at the bottom to prevent content from being hidden */}
         <nav className="lg:hidden fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-800 shadow-lg">
           <div className="flex justify-around">
-            {[...navItems.filter(item => item.position === 'main'), ...navItems.filter(item => item.position === 'bottom')].map((item) => (
+            {[...navItems(isTasksView).filter(item => item.position === 'main'), ...navItems(isTasksView).filter(item => item.position === 'bottom')].map((item) => (
               <Link
                 key={item.label}
                 href={item.href}
@@ -69,7 +79,7 @@ export default function Navigation({ className, viewPort }: NavigationProps) {
           <div className="flex flex-col h-0 flex-1 bg-gray-800">
             <div className="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
               <nav className="mt-5 flex-1 px-2 space-y-1">
-                {navItems.filter(item => item.position === 'main').map((item) => (
+                {navItems(isTasksView).filter(item => item.position === 'main').map((item) => (
                   <Link
                     key={item.label}
                     href={item.href}

components/ViewToggle.tsx

@@ -3,8 +3,9 @@
 import { cn } from '@/lib/utils'
 import { useAtom } from 'jotai'
 import { CheckSquare, ListChecks } from 'lucide-react'
-import { transientSettingsAtom } from '@/lib/atoms'
+import { browserSettingsAtom } from '@/lib/atoms'
 import type { ViewType } from '@/lib/types'
+import { HabitIcon, TaskIcon } from '@/lib/constants'
 
 interface ViewToggleProps {
   defaultView?: ViewType
@@ -15,43 +16,43 @@ export function ViewToggle({
   defaultView = 'habits',
   className
 }: ViewToggleProps) {
-  const [transientSettings, setTransientSettings] = useAtom(transientSettingsAtom)
+  const [browserSettings, setBrowserSettings] = useAtom(browserSettingsAtom)
 
   const handleViewChange = (checked: boolean) => {
     const newView = checked ? 'tasks' : 'habits'
-    setTransientSettings({
+    setBrowserSettings({
-      ...transientSettings,
+      ...browserSettings,
       viewType: newView,
     })
   }
 
   return (
-    <div className={cn('inline-flex rounded-full bg-muted/50', 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">
+      <div className="relative flex gap-0.5 rounded-full bg-background p-0.5 h-full">
         <button
           onClick={() => handleViewChange(false)}
           className={cn(
-            'relative z-10 rounded-full px-3 py-1 text-xs font-medium transition-colors flex items-center gap-1',
+            'relative z-10 rounded-full px-4 py-2 text-sm font-medium transition-colors flex items-center gap-2',
-            transientSettings.viewType === 'habits' ? 'text-primary-foreground' : 'text-muted-foreground hover:text-foreground'
+            browserSettings.viewType === 'habits' ? 'text-primary-foreground' : 'text-muted-foreground hover:text-foreground'
           )}
         >
-          <ListChecks className="h-3 w-3" />
+          <HabitIcon className="h-4 w-4" />
           <span className="hidden sm:inline">Habits</span>
         </button>
         <button
           onClick={() => handleViewChange(true)}
           className={cn(
-            'relative z-10 rounded-full px-3 py-1 text-xs font-medium transition-colors flex items-center gap-1',
+            'relative z-10 rounded-full px-4 py-2 text-sm font-medium transition-colors flex items-center gap-2',
-            transientSettings.viewType === 'tasks' ? 'text-primary-foreground' : 'text-muted-foreground hover:text-foreground'
+            browserSettings.viewType === 'tasks' ? 'text-primary-foreground' : 'text-muted-foreground hover:text-foreground'
           )}
         >
-          <CheckSquare className="h-3 w-3" />
+          <TaskIcon className="h-4 w-4" />
           <span className="hidden sm:inline">Tasks</span>
         </button>
         <div
           className={cn(
             'absolute left-0.5 top-0.5 h-[calc(100%-0.25rem)] rounded-full bg-primary transition-transform',
-            transientSettings.viewType === 'habits' ? 'w-[calc(50%-0.125rem)]' : 'w-[calc(50%-0.125rem)] translate-x-[calc(100%+0.125rem)]'
+            browserSettings.viewType === 'habits' ? 'w-[calc(50%-0.125rem)]' : 'w-[calc(50%-0.125rem)] translate-x-[calc(100%+0.125rem)]'
           )}
         />
       </div>

hooks/useCoins.tsx

@@ -28,7 +28,12 @@ export function useCoins() {
       return null
     }
 
-    const data = await addCoins(amount, description, 'MANUAL_ADJUSTMENT', undefined, note)
+    const data = await addCoins({
+      amount,
+      description,
+      type: 'MANUAL_ADJUSTMENT',
+      note
+    })
     setCoins(data)
     toast({ title: "Success", description: `Added ${amount} coins` })
     return data
@@ -44,7 +49,12 @@ export function useCoins() {
       return null
     }
 
-    const data = await removeCoins(numAmount, description, 'MANUAL_ADJUSTMENT', undefined, note)
+    const data = await removeCoins({
+      amount: numAmount,
+      description,
+      type: 'MANUAL_ADJUSTMENT',
+      note
+    })
     setCoins(data)
     toast({ title: "Success", description: `Removed ${numAmount} coins` })
     return data

hooks/useHabits.tsx

@@ -51,12 +51,12 @@ export function useHabits() {
     // Check if we've now reached the target
     const isTargetReached = completionsToday + 1 === target
     if (isTargetReached) {
-      const updatedCoins = await addCoins(
+      const updatedCoins = await addCoins({
-        habit.coinReward,
+        amount: habit.coinReward,
-        `Completed habit: ${habit.name}`,
+        description: `Completed habit: ${habit.name}`,
-        'HABIT_COMPLETION',
+        type: habit.isTask ? 'TASK_COMPLETION' : 'HABIT_COMPLETION',
-        habit.id
+        relatedItemId: habit.id,
-      )
+      })
       setCoins(updatedCoins)
     }
 
@@ -105,12 +105,12 @@ export function useHabits() {
       // If we were at the target, remove the coins
       const target = habit.targetCompletions || 1
       if (todayCompletions.length === target) {
-        const updatedCoins = await removeCoins(
+        const updatedCoins = await removeCoins({
-          habit.coinReward,
+          amount: habit.coinReward,
-          `Undid habit completion: ${habit.name}`,
+          description: `Undid habit completion: ${habit.name}`,
-          'HABIT_UNDO',
+          type: habit.isTask ? 'TASK_UNDO' : 'HABIT_UNDO',
-          habit.id
+          relatedItemId: habit.id,
-        )
+        })
         setCoins(updatedCoins)
       }
 
@@ -205,12 +205,12 @@ export function useHabits() {
     // Check if we've now reached the target
     const isTargetReached = completionsOnDate + 1 === target
     if (isTargetReached) {
-      const updatedCoins = await addCoins(
+      const updatedCoins = await addCoins({
-        habit.coinReward,
+        amount: habit.coinReward,
-        `Completed habit: ${habit.name} on ${d2s({ dateTime: date, timezone, format: 'yyyy-MM-dd' })}`,
+        description: `Completed habit: ${habit.name} on ${d2s({ dateTime: date, timezone, format: 'yyyy-MM-dd' })}`,
-        'HABIT_COMPLETION',
+        type: habit.isTask ? 'TASK_COMPLETION' : 'HABIT_COMPLETION',
-        habit.id
+        relatedItemId: habit.id,
-      )
+      })
       setCoins(updatedCoins)
     }
 

hooks/useWishlist.tsx

@@ -33,12 +33,12 @@ export function useWishlist() {
 
   const redeemWishlistItem = async (item: WishlistItemType) => {
     if (balance >= item.coinCost) {
-      const data = await removeCoins(
+      const data = await removeCoins({
-        item.coinCost,
+        amount: item.coinCost,
-        `Redeemed reward: ${item.name}`,
+        description: `Redeemed reward: ${item.name}`,
-        'WISH_REDEMPTION',
+        type: 'WISH_REDEMPTION',
-        item.id
+        relatedItemId: item.id
-      )
+      })
       setCoins(data)
 
       // Randomly choose a celebration effect

lib/atoms.ts

@@ -19,6 +19,15 @@ import {
   getCompletionsForToday,
   getISODate
 } from "@/lib/utils";
+import { atomWithStorage } from "jotai/utils";
+
+export interface BrowserSettings {
+  viewType: ViewType
+}
+
+export const browserSettingsAtom = atomWithStorage('browserSettings', {
+  viewType: 'habits'
+} as BrowserSettings)
 
 export const settingsAtom = atom(getDefaultSettings());
 export const habitsAtom = atom(getDefaultHabitsData());
@@ -120,11 +129,3 @@ export const pomodoroTodayCompletionsAtom = atom((get) => {
     timezone: settings.system.timezone
   })
 })
-
-export interface TransientSettings {
-  viewType: ViewType
-}
-
-export const transientSettingsAtom = atom<TransientSettings>({
-  viewType: 'habits'
-})

lib/constants.ts

@@ -1,4 +1,7 @@
+import { CheckSquare, Target } from "lucide-react"
+
 export const INITIAL_RECURRENCE_RULE = 'daily'
+export const INITIAL_DUE = 'today'
 
 export const RECURRENCE_RULE_MAP: { [key: string]: string } = {
   'daily': 'FREQ=DAILY',
@@ -8,3 +11,11 @@ export const RECURRENCE_RULE_MAP: { [key: string]: string } = {
   '': 'invalid',
 }
 
+export const DUE_MAP: { [key: string]: string } = {
+  'tom': 'tomorrow',
+  'tod': 'today',
+  'yes': 'yesterday',
+}
+
+export const HabitIcon = Target
+export const TaskIcon = CheckSquare;

lib/types.ts

@@ -6,6 +6,7 @@ export type Habit = {
   coinReward: number
   targetCompletions?: number // Optional field, default to 1
   completions: string[] // Array of UTC ISO date strings
+  isTask?: boolean // mark the habit as a task
 }
 
 
@@ -18,7 +19,7 @@ export type WishlistItemType = {
   coinCost: number
 }
 
-export type TransactionType = 'HABIT_COMPLETION' | 'HABIT_UNDO' | 'WISH_REDEMPTION' | 'MANUAL_ADJUSTMENT';
+export type TransactionType = 'HABIT_COMPLETION' | 'HABIT_UNDO' | 'WISH_REDEMPTION' | 'MANUAL_ADJUSTMENT' | 'TASK_COMPLETION' | 'TASK_UNDO';
 
 export interface CoinTransaction {
   id: string;

lib/utils.ts

@@ -1,9 +1,10 @@
 import { clsx, type ClassValue } from "clsx"
 import { twMerge } from "tailwind-merge"
-import { DateTime } from "luxon"
+import { DateTime, DateTimeFormatOptions } from "luxon"
 import { datetime, RRule } from 'rrule'
 import { Freq, Habit, CoinTransaction } from '@/lib/types'
-import { INITIAL_RECURRENCE_RULE, RECURRENCE_RULE_MAP } from "./constants"
+import { DUE_MAP, INITIAL_RECURRENCE_RULE, RECURRENCE_RULE_MAP } from "./constants"
+import * as chrono from 'chrono-node';
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
@@ -41,9 +42,13 @@ export function d2t({ dateTime, timezone = 'utc' }: { dateTime: DateTime, timezo
 }
 
 // convert datetime object to string, mostly for display
-export function d2s({ dateTime, format, timezone }: { dateTime: DateTime, format?: string, timezone: string }) {
+export function d2s({ dateTime, format, timezone }: { dateTime: DateTime, format?: string | DateTimeFormatOptions, timezone: string }) {
   if (format) {
-    return dateTime.setZone(timezone).toFormat(format);
+    if (typeof format === 'string') {
+      return dateTime.setZone(timezone).toFormat(format);
+    } else {
+      return dateTime.setZone(timezone).toLocaleString(format);
+    }
   }
   return dateTime.setZone(timezone).toLocaleString(DateTime.DATETIME_MED);
 }
@@ -204,6 +209,17 @@ export function serializeRRule(rrule: RRule) {
   return rrule.toString()
 }
 
+export function parseNaturalLanguageDate({ text, timezone }: { text: string, timezone: string }) {
+  if (DUE_MAP[text]) {
+    text = DUE_MAP[text]
+  }
+  const now = getNow({ timezone })
+  const due = chrono.parseDate(text, { instant: now.toJSDate(), timezone })
+  if (!due) throw Error('invalid rule')
+  // return d2s({ dateTime: DateTime.fromJSDate(due), timezone, format: DateTime.DATE_MED_WITH_WEEKDAY })
+  return DateTime.fromJSDate(due).setZone(timezone)
+}
+
 export function isHabitDue({
   habit,
   timezone,
@@ -213,6 +229,11 @@ export function isHabitDue({
   timezone: string
   date: DateTime
 }): boolean {
+  if (habit.isTask) {
+    // For tasks, frequency is stored as a UTC ISO timestamp
+    const taskDueDate = t2d({ timestamp: habit.frequency, timezone })
+    return isSameDate(taskDueDate, date);
+  }
   const startOfDay = date.setZone(timezone).startOf('day')
   const endOfDay = date.setZone(timezone).endOf('day')
 
@@ -244,6 +265,10 @@ export function isHabitDueToday({
 }
 
 export function getHabitFreq(habit: Habit): Freq {
+  if (habit.isTask) {
+    // don't support recurring task yet
+    return 'daily'
+  }
   const rrule = parseRRule(habit.frequency)
   const freq = rrule.origOptions.freq
   switch (freq) {

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "habittrove",
-  "version": "0.1.19",
+  "version": "0.1.24",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "habittrove",
-      "version": "0.1.19",
+      "version": "0.1.24",
       "dependencies": {
         "@emoji-mart/data": "^1.2.1",
         "@emoji-mart/react": "^1.1.1",
@@ -26,6 +26,7 @@
         "@types/canvas-confetti": "^1.9.0",
         "@uiw/react-heat-map": "^2.3.2",
         "canvas-confetti": "^1.9.3",
+        "chrono-node": "^2.7.7",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "date-fns": "^3.6.0",
@@ -3137,6 +3138,17 @@
         "node": ">=6.0"
       }
     },
+    "node_modules/chrono-node": {
+      "version": "2.7.7",
+      "resolved": "https://registry.npmjs.org/chrono-node/-/chrono-node-2.7.7.tgz",
+      "integrity": "sha512-p3S7gotuTPu5oqhRL2p1fLwQXGgdQaRTtWR3e8Di9P1Pa9mzkK5DWR5AWBieMUh2ZdOnPgrK+zCrbbtyuA+D/Q==",
+      "dependencies": {
+        "dayjs": "^1.10.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      }
+    },
     "node_modules/class-variance-authority": {
       "version": "0.7.1",
       "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
@@ -3428,6 +3440,11 @@
         "url": "https://github.com/sponsors/kossnocorp"
       }
     },
+    "node_modules/dayjs": {
+      "version": "1.11.13",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
+      "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg=="
+    },
     "node_modules/debug": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "habittrove",
-  "version": "0.1.24",
+  "version": "0.1.25",
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack",
@@ -33,6 +33,7 @@
     "@types/canvas-confetti": "^1.9.0",
     "@uiw/react-heat-map": "^2.3.2",
     "canvas-confetti": "^1.9.3",
+    "chrono-node": "^2.7.7",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",