zero-value completion buttons

Author: roboslone

src/components/habit/button.tsx

@@ -10,10 +10,12 @@ import {
     HabitSchema,
 } from "@/proto/models/v1/models_pb"
 import { clone, create } from "@bufbuild/protobuf"
-import { ArrowRight, ArrowUp, Check, Undo2 } from "lucide-react"
-import type React from "react"
+import { ArrowRight, ArrowUp, Check, Plus, Undo2 } from "lucide-react"
+import React from "react"
 import { toast } from "sonner"
 
+import { ManualCompletionDialog } from "./manual-completion-dialog"
+
 interface P extends React.ComponentProps<typeof Button> {
     options?: Completion_ButtonOptions
     preview?: boolean
@@ -23,32 +25,33 @@ const defaultOptions = create(Completion_ButtonOptionsSchema, {
     kind: { case: "complete", value: true },
 })
 
-const applyButton = (completion: Completion, options: Completion_ButtonOptions) => {
+const applyButton = (
+    completion: Completion,
+    options: Completion_ButtonOptions,
+    manualValue?: number,
+) => {
     switch (options.kind.case) {
         case "delta":
-            completion.count += options.kind.value
+            completion.count = manualValue ?? options.kind.value
             return
         case "percentage":
-            completion.count += Math.ceil((options.kind.value / 100) * completion.target)
+            completion.count += Math.ceil(
+                ((manualValue ?? options.kind.value) / 100) * completion.target,
+            )
             return
         case "complete":
             completion.count = completion.target
             return
         case "set":
-            completion.count = options.kind.value
+            completion.count = manualValue ?? options.kind.value
             return
     }
 }
 
-export const CompletionButton: React.FC<P> = ({
-    options = defaultOptions,
-    children,
-    preview,
-    ...rest
-}) => {
+export const CompletionButton: React.FC<P> = ({ options = defaultOptions, preview, ...rest }) => {
     const { habit, color, update } = useHabitContext()
 
-    const handleClick = () => {
+    const handleClick = (manualValue?: number) => {
         if (preview) return
 
         const next = clone(HabitSchema, habit)
@@ -60,7 +63,7 @@ export const CompletionButton: React.FC<P> = ({
             const completion =
                 next.completions[date] ?? create(CompletionSchema, { target: next.dailyTarget })
 
-            applyButton(completion, options)
+            applyButton(completion, options, manualValue)
             next.completions[date] = completion
         }
 
@@ -85,30 +88,78 @@ export const CompletionButton: React.FC<P> = ({
                 <span>Reset</span>
             </>
         )
-    } else if (kind.case === "delta") {
-        className = cn(className, "gap-1")
+    } else if (kind.case === "complete") {
         content = (
             <>
-                <ArrowUp />
-                <span>+{kind.value}</span>
+                <Check />
+                Done
             </>
         )
-    } else if (kind.case === "percentage") {
+    } else if (kind.case === "delta") {
+        if (kind.value === 0) {
+            return (
+                <ManualCompletionDialog onSubmit={handleClick}>
+                    <Button
+                        variant="ghost"
+                        {...rest}
+                        className={className}
+                        disabled={rest.disabled || update.isPending}
+                    >
+                        <Plus />
+                        Add
+                    </Button>
+                </ManualCompletionDialog>
+            )
+        }
+
         className = cn(className, "gap-1")
         content = (
             <>
-                <ArrowUp />
-                <span>+{kind.value}%</span>
+                <Plus />
+                <span>{kind.value}</span>
             </>
         )
-    } else if (kind.case === "complete") {
+    } else if (kind.case === "percentage") {
+        className = cn(className, "gap-1")
         content = (
             <>
-                <Check />
-                Done
+                <Plus />
+                <span>{kind.value}%</span>
             </>
         )
+
+        if (kind.value === 0) {
+            return (
+                <ManualCompletionDialog onSubmit={handleClick}>
+                    <Button
+                        variant="ghost"
+                        {...rest}
+                        className={className}
+                        disabled={rest.disabled || update.isPending}
+                    >
+                        <Plus />
+                        Add %
+                    </Button>
+                </ManualCompletionDialog>
+            )
+        }
     } else if (kind.case === "set") {
+        if (kind.value === 0) {
+            return (
+                <ManualCompletionDialog onSubmit={handleClick}>
+                    <Button
+                        variant="ghost"
+                        {...rest}
+                        className={className}
+                        disabled={rest.disabled || update.isPending}
+                    >
+                        <ArrowRight />
+                        Set
+                    </Button>
+                </ManualCompletionDialog>
+            )
+        }
+
         content = (
             <>
                 <ArrowRight />
@@ -123,9 +174,9 @@ export const CompletionButton: React.FC<P> = ({
             {...rest}
             className={className}
             disabled={rest.disabled || update.isPending}
-            onClick={handleClick}
+            onClick={() => handleClick()}
         >
-            {children ?? content}
+            {content}
         </Button>
     )
 }

src/components/habit/manual-completion-dialog.tsx

@@ -0,0 +1,56 @@
+import { Button } from "@/components/ui/button"
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogTitle,
+    DialogTrigger,
+} from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { Check, Undo2 } from "lucide-react"
+import React from "react"
+
+interface P extends React.PropsWithChildren {
+    onSubmit: (v: number) => void
+}
+
+export const ManualCompletionDialog: React.FC<P> = ({ children, onSubmit }) => {
+    const [open, setOpen] = React.useState(false)
+    const [value, setValue] = React.useState(0)
+
+    const handleSubmit = () => {
+        onSubmit(value)
+        setOpen(false)
+        setValue(0)
+    }
+
+    return (
+        <Dialog open={open} onOpenChange={setOpen}>
+            <DialogTrigger asChild>{children}</DialogTrigger>
+            <DialogContent>
+                <DialogTitle>Manual update</DialogTitle>
+                <DialogDescription>Set a value for manual update</DialogDescription>
+
+                <Input
+                    type="number"
+                    inputMode="numeric"
+                    value={value}
+                    onFocus={(e) => e.target.select()}
+                    onChange={(e) => setValue(e.target.valueAsNumber || 0)}
+                />
+
+                <DialogFooter>
+                    <Button variant="outline" onClick={() => setOpen(false)}>
+                        <Undo2 />
+                        Cancel
+                    </Button>
+                    <Button variant="outline" onClick={handleSubmit}>
+                        <Check className="text-emerald-600" />
+                        Cancel
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    )
+}