added support for tasks

2026-01-21 06:34:30 +01:00 · 2025-01-22 17:59:59 -05:00
parent 3b33719e1a
commit d3502e284d
19 changed files with 223 additions and 105 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog

+## Version 0.1.25
+
+### Added
+
+- added support for tasks (#41)
+
 ## Version 0.1.24

 ### Fixed
--- a/app/actions/data.ts
+++ b/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(),
--- a/components/AddEditHabitModal.tsx
+++ b/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>
--- a/components/DailyOverview.tsx
+++ b/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) || [])
--- a/components/Dashboard.tsx
+++ b/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} />
--- a/components/HabitItem.tsx
+++ b/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>
--- a/components/HabitList.tsx
+++ b/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>
--- a/components/Header.tsx
+++ b/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 || ''}`}>
--- a/components/Navigation.tsx
+++ b/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}
--- a/components/ViewToggle.tsx
+++ b/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>
--- a/hooks/useCoins.tsx
+++ b/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
--- a/hooks/useHabits.tsx
+++ b/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(
-        habit.coinReward,
-        `Completed habit: ${habit.name}`,
-        'HABIT_COMPLETION',
-        habit.id
-      )
+      const updatedCoins = await addCoins({
+        amount: habit.coinReward,
+        description: `Completed habit: ${habit.name}`,
+        type: habit.isTask ? 'TASK_COMPLETION' : 'HABIT_COMPLETION',
+        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(
-          habit.coinReward,
-          `Undid habit completion: ${habit.name}`,
-          'HABIT_UNDO',
-          habit.id
-        )
+        const updatedCoins = await removeCoins({
+          amount: habit.coinReward,
+          description: `Undid habit completion: ${habit.name}`,
+          type: habit.isTask ? 'TASK_UNDO' : 'HABIT_UNDO',
+          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(
-        habit.coinReward,
-        `Completed habit: ${habit.name} on ${d2s({ dateTime: date, timezone, format: 'yyyy-MM-dd' })}`,
-        'HABIT_COMPLETION',
-        habit.id
-      )
+      const updatedCoins = await addCoins({
+        amount: habit.coinReward,
+        description: `Completed habit: ${habit.name} on ${d2s({ dateTime: date, timezone, format: 'yyyy-MM-dd' })}`,
+        type: habit.isTask ? 'TASK_COMPLETION' : 'HABIT_COMPLETION',
+        relatedItemId: habit.id,
+      })
      setCoins(updatedCoins)
    }

--- a/hooks/useWishlist.tsx
+++ b/hooks/useWishlist.tsx
@@ -33,12 +33,12 @@ export function useWishlist() {

  const redeemWishlistItem = async (item: WishlistItemType) => {
    if (balance >= item.coinCost) {
-      const data = await removeCoins(
-        item.coinCost,
-        `Redeemed reward: ${item.name}`,
-        'WISH_REDEMPTION',
-        item.id
-      )
+      const data = await removeCoins({
+        amount: item.coinCost,
+        description: `Redeemed reward: ${item.name}`,
+        type: 'WISH_REDEMPTION',
+        relatedItemId: item.id
+      })
      setCoins(data)

      // Randomly choose a celebration effect
--- a/lib/atoms.ts
+++ b/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'
-})
--- a/lib/constants.ts
+++ b/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;
--- a/lib/types.ts
+++ b/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;
--- a/lib/utils.ts
+++ b/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) {
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",