added support for tasks

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,9 +48,8 @@ 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
     })
   }
 
@@ -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 { 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,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}
-              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 || ''}`}>

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({
-      ...transientSettings,
+    setBrowserSettings({
+      ...browserSettings,
       viewType: newView,
     })
   }
 
   return (
-    <div className={cn('inline-flex rounded-full bg-muted/50', className)}>
-      <div className="relative flex gap-0.5 rounded-full bg-background p-0.5">
+    <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">
         <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',
-            transientSettings.viewType === 'habits' ? 'text-primary-foreground' : 'text-muted-foreground hover:text-foreground'
+            'relative z-10 rounded-full px-4 py-2 text-sm font-medium transition-colors flex items-center gap-2',
+            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',
-            transientSettings.viewType === 'tasks' ? 'text-primary-foreground' : 'text-muted-foreground hover:text-foreground'
+            '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'
           )}
         >
-          <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>