added tag picker to query form; added habit query removal after break

Author: roboslone

src/components/habit/form.tsx

@@ -16,6 +16,8 @@ import { AlertTriangle, Check, Loader2, X } from "lucide-react"
 import React from "react"
 import { toast } from "sonner"
 
+import { TagPicker } from "../tag/picker"
+
 interface P {
     value?: Habit
     onChange: (h: Habit) => Promise<unknown>
@@ -140,6 +142,14 @@ export const HabitForm: React.FC<P> = ({ value, onChange, onCancel }) => {
                 />
             </div>
 
+            <div className="flex flex-col gap-2">
+                <Label>Tags</Label>
+                <TagPicker
+                    value={habit.tagNames}
+                    onChange={(tags) => update((h) => (h.tagNames = tags))}
+                />
+            </div>
+
             <Separator />
 
             <div className="flex flex-col items-center gap-2 justify-center">

src/components/habit/view.tsx

@@ -6,11 +6,12 @@ import { Button } from "@/components/ui/button"
 import { Label } from "@/components/ui/label"
 import { Separator } from "@/components/ui/separator"
 import { cn } from "@/lib/utils"
-import { Completion_ButtonOptionsSchema } from "@/proto/models/v1/models_pb"
-import { create } from "@bufbuild/protobuf"
+import { Completion_ButtonOptionsSchema, HabitSchema } from "@/proto/models/v1/models_pb"
+import { clone, create } from "@bufbuild/protobuf"
 import { Link } from "@tanstack/react-router"
 import { ChevronLeft, History, Pencil, RefreshCw, Trash2 } from "lucide-react"
 import React from "react"
+import { toast } from "sonner"
 
 import { Page } from "../page/page"
 import { HabitBreakDialog } from "./break-dialog"
@@ -32,6 +33,15 @@ export const HabitView: React.FC = () => {
 
     const historyURL = `https://github.com/${repo?.full_name}/commits/main/habits/${habit.name}.json`
 
+    const handleTagsChange = (tags: string[]) => {
+        const copy = clone(HabitSchema, habit)
+        copy.tagNames = [...tags].sort()
+
+        toast.promise(update.mutateAsync(copy), {
+            error: (e: Error) => ({ message: "Habit update failed", description: e.message }),
+        })
+    }
+
     let content = (
         <>
             <div className="flex items-center gap-2 flex-wrap">
@@ -83,7 +93,7 @@ export const HabitView: React.FC = () => {
 
             <div className="flex flex-col gap-2">
                 <Label className="text-muted-foreground/50">Tags</Label>
-                <TagPicker />
+                <TagPicker value={habit.tagNames} onChange={handleTagsChange} />
             </div>
 
             <Separator />

src/components/tag/picker.tsx

@@ -1,5 +1,4 @@
 import { useCollectionContext } from "@/components/collection/context"
-import { useHabitContext } from "@/components/habit/context"
 import { Button } from "@/components/ui/button"
 import {
     Dialog,
@@ -8,23 +7,24 @@ import {
     DialogFooter,
     DialogTitle,
 } from "@/components/ui/dialog"
-import { HabitSchema } from "@/proto/models/v1/models_pb"
-import { clone } from "@bufbuild/protobuf"
 import { DialogTrigger } from "@radix-ui/react-dialog"
 import { Link } from "@tanstack/react-router"
-import { Check, Ellipsis, Loader2, Plus, Undo2 } from "lucide-react"
+import { Check, Ellipsis, Plus, Undo2 } from "lucide-react"
 import React from "react"
-import { toast } from "sonner"
 
 import { TagContext } from "./context"
 import { TagList } from "./list"
 
-export const TagPicker: React.FC = () => {
+interface P {
+    value: string[]
+    onChange: (tags: string[]) => void
+}
+
+export const TagPicker: React.FC<P> = ({ value, onChange }) => {
     const { tags } = useCollectionContext()
-    const { habit, update } = useHabitContext()
 
     const [open, setOpen] = React.useState(false)
-    const [selected, setSelected] = React.useState<Set<string>>(new Set(habit.tagNames))
+    const [selected, setSelected] = React.useState<Set<string>>(new Set(value))
 
     const toggleTag = (name: string) => {
         const next = new Set(selected)
@@ -38,24 +38,19 @@ export const TagPicker: React.FC = () => {
 
     const handleCancel = () => {
         setOpen(false)
-        setSelected(new Set(habit.tagNames))
+        setSelected(new Set(value))
     }
 
     const handleSubmit = () => {
-        const copy = clone(HabitSchema, habit)
-        copy.tagNames = [...selected].sort()
-
-        toast.promise(
-            update.mutateAsync(copy).then(() => setOpen(false)),
-            {
-                error: (e: Error) => ({ message: "Habit update failed", description: e.message }),
-            },
-        )
+        const tags = [...selected]
+        tags.sort()
+        onChange(tags)
+        setOpen(false)
     }
 
     return (
         <div data-testid="tag-picker" className="flex items-center gap-1 flex-wrap">
-            <TagList tags={habit.tagNames}>
+            <TagList tags={value}>
                 <TagContext value={{ active: selected, onClick: toggleTag }}>
                     <Dialog open={open} onOpenChange={setOpen}>
                         <DialogTrigger asChild>
@@ -86,24 +81,12 @@ export const TagPicker: React.FC = () => {
                                         <TagList tags={tags} />
                                     </div>
                                     <DialogFooter>
-                                        <Button
-                                            variant="outline"
-                                            onClick={handleCancel}
-                                            disabled={update.isPending}
-                                        >
+                                        <Button variant="outline" onClick={handleCancel}>
                                             <Undo2 />
                                             Cancel
                                         </Button>
-                                        <Button
-                                            variant="outline"
-                                            disabled={update.isPending}
-                                            onClick={handleSubmit}
-                                        >
-                                            {update.isPending ? (
-                                                <Loader2 className="animate-spin" />
-                                            ) : (
-                                                <Check className="text-emerald-600" />
-                                            )}
+                                        <Button variant="outline" onClick={handleSubmit}>
+                                            <Check className="text-emerald-600" />
                                             Save
                                         </Button>
                                     </DialogFooter>

src/components/tag/view.tsx

@@ -25,7 +25,7 @@ export const TagView: React.FC<P> = ({ name, tag, preview }) => {
     }
 
     return (
-        <div
+        <button
             data-testid={`tag-${name}`}
             onClick={() => ctx.onClick?.(name)}
             className={cn(
@@ -45,6 +45,6 @@ export const TagView: React.FC<P> = ({ name, tag, preview }) => {
             >
                 {displayedName}
             </span>
-        </div>
+        </button>
     )
 }

src/lib/queries.ts

@@ -296,7 +296,8 @@ export const useBreakHabit = () => {
                 sha: habit.sha,
             })
         },
-        onSettled: async () => {
+        onSettled: async (_, __, habit) => {
+            client.removeQueries({ queryKey: ["repo", repo.id, "habit", habit.name] })
             await client.invalidateQueries({ queryKey: ["repo", repo.id, "content"] })
         },
         retry: handleError("Failed to break a habit", { maxFailures: 0 }),