repeating tasks UI improvements

2026-03-13 12:00:04 -05:00
parent 3cbbc65c5c
commit b89e6ca2c3
4 changed files with 112 additions and 5 deletions
@@ -7,6 +7,7 @@ import { useTheme } from "./ThemeProvider";
 import { getThemeAdjustedColor } from "@/lib/colors";
 import { Select, SelectContent, SelectItem, SelectTrigger } from "@/components/ui/select";
 import { getStatusOptionsForTask } from "@/lib/constants";
+import { getRecurrenceProgress } from "@/lib/recurrence";
 import { StatusCircle } from "./StatusCircle";

 export const TaskCard: Component<{ task: Task, isShaking?: boolean }> = (props) => {
@@ -54,6 +55,10 @@ export const TaskCard: Component<{ task: Task, isShaking?: boolean }> = (props)
    });

    const statusOptions = createMemo(() => getStatusOptionsForTask(props.task.recurrence));
+    const recurrenceProgress = createMemo(() => {
+        if (props.task.status !== 10) return null;
+        return getRecurrenceProgress(props.task.recurrence, props.task.updated, now());
+    });

    return (
        <div
@@ -93,7 +98,7 @@ export const TaskCard: Component<{ task: Task, isShaking?: boolean }> = (props)
                            updateTask(props.task.id, { status: 10 });
                        }}
                    >
-                        <StatusCircle status={props.task.status ?? 0} size={26} />
+                        <StatusCircle status={props.task.status ?? 0} size={26} recurrenceProgress={recurrenceProgress()} />
                    </SelectTrigger>
                    <SelectContent />
                </Select>