Fixed status circle checkmark for completed tasks

src/components/StatusCircle.tsx

@@ -7,6 +7,7 @@ interface StatusCircleProps {
     size?: number;
     className?: string;
     recurrenceProgress?: number | null;
+    completed?: boolean;
 }
 
 export const StatusCircle: Component<StatusCircleProps> = (props) => {
@@ -36,7 +37,7 @@ export const StatusCircle: Component<StatusCircleProps> = (props) => {
 
     return (
         <div class={cn("relative flex items-center justify-center", props.className)} style={{ width: `${size()}px`, height: `${size()}px` }}>
-            {props.status >= 10 ? (
+            {props.completed || props.status >= 10 ? (
                 props.recurrenceProgress != null ? (
                     <svg width={size()} height={size()}>
                         <For each={Array.from({ length: dotCount() })}>

src/components/TaskCard.tsx

@@ -64,7 +64,7 @@ export const TaskCard: Component<{ task: Task, isShaking?: boolean }> = (props)
         ];
     });
     const recurrenceProgress = createMemo(() => {
-        if (props.task.status !== 10) return null;
+        if (!props.task.completed && props.task.status !== 10) return null;
         return getRecurrenceProgress(props.task.recurrence, props.task.updated, now());
     });
     const shouldQuickloadFade = createMemo(() => store.quickloadFadeTaskIds.includes(props.task.id));
@@ -141,7 +141,7 @@ export const TaskCard: Component<{ task: Task, isShaking?: boolean }> = (props)
                                 updateTask(props.task.id, { status: 10 });
                             }}
                         >
-                            <StatusCircle status={props.task.status ?? 0} size={26} recurrenceProgress={recurrenceProgress()} />
+                            <StatusCircle status={props.task.status ?? 0} completed={props.task.completed} size={26} recurrenceProgress={recurrenceProgress()} />
                         </SelectTrigger>
                         <SelectContent />
                     </Select>

src/components/TaskDetail.tsx

@@ -221,7 +221,7 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
 
     const statusOptions = createMemo(() => getStatusOptionsForTask(props.task.recurrence));
     const recurrenceProgress = createMemo(() => {
-        if (props.task.status !== 10) return null;
+        if (!props.task.completed && props.task.status !== 10) return null;
         return getRecurrenceProgress(props.task.recurrence, props.task.updated, now());
     });
 
@@ -267,7 +267,7 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
                                         updateStatus("10");
                                     }}
                                 >
-                                    <StatusCircle status={props.task.status ?? 0} size={28} recurrenceProgress={recurrenceProgress()} />
+                                    <StatusCircle status={props.task.status ?? 0} completed={props.task.completed} size={28} recurrenceProgress={recurrenceProgress()} />
                                 </SelectTrigger>
                                 <SelectContent />
                             </Select>