chore: Icon picker

stream/src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "stream",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "identifier": "com.marcelmarais.stream",
   "build": {
     "beforeDevCommand": "pnpm dev",

stream/src/components/create-habit-dialog.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { useState } from "react";
+import { useId, useState } from "react";
 import { toast } from "sonner";
+import { HabitIconPicker } from "@/components/habit-icon-picker";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
@@ -21,7 +22,11 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { useCreateHabit } from "@/hooks/use-habits";
-import type { HabitPeriod } from "@/ipc/habit-reader";
+import {
+  DEFAULT_HABIT_ICON,
+  type HabitIcon,
+  type HabitPeriod,
+} from "@/ipc/habit-reader";
 
 interface CreateHabitDialogProps {
   open: boolean;
@@ -35,6 +40,11 @@ export function CreateHabitDialog({
   const [name, setName] = useState("");
   const [targetCount, setTargetCount] = useState(1);
   const [period, setPeriod] = useState<HabitPeriod>("weekly");
+  const [icon, setIcon] = useState<HabitIcon>(DEFAULT_HABIT_ICON);
+
+  const nameId = useId();
+  const targetId = useId();
+  const periodId = useId();
 
   const { mutate: createHabit, isPending } = useCreateHabit();
 
@@ -52,13 +62,14 @@ export function CreateHabitDialog({
     }
 
     createHabit(
-      { name: name.trim(), targetCount, period },
+      { name: name.trim(), targetCount, period, icon },
       {
         onSuccess: () => {
           toast.success(`Created habit: ${name.trim()}`);
           setName("");
           setTargetCount(1);
           setPeriod("weekly");
+          setIcon(DEFAULT_HABIT_ICON);
           onOpenChange(false);
         },
         onError: (error) => {
@@ -73,6 +84,7 @@ export function CreateHabitDialog({
       setName("");
       setTargetCount(1);
       setPeriod("weekly");
+      setIcon(DEFAULT_HABIT_ICON);
       onOpenChange(false);
     }
   };
@@ -91,43 +103,51 @@ export function CreateHabitDialog({
 
           <div className="grid gap-4 py-4">
             <div className="grid gap-2">
-              <Label htmlFor="habit-name">Habit Name</Label>
-              <Input
-                id="habit-name"
-                placeholder="e.g., Exercise, Read, Meditate"
-                value={name}
-                onChange={(e) => setName(e.target.value)}
-                disabled={isPending}
-                autoFocus
-              />
+              <Label htmlFor={nameId}>Habit Name</Label>
+              <div className="flex items-center gap-2">
+                <HabitIconPicker
+                  value={icon}
+                  onChange={setIcon}
+                  disabled={isPending}
+                />
+                <Input
+                  id={nameId}
+                  placeholder="e.g., Exercise, Read, Meditate"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  disabled={isPending}
+                  autoFocus
+                  className="flex-1"
+                />
+              </div>
             </div>
 
             <div className="grid grid-cols-2 gap-4">
               <div className="grid gap-2">
-                <Label htmlFor="target-count">Target</Label>
+                <Label htmlFor={targetId}>Target</Label>
                 <Input
-                  id="target-count"
+                  id={targetId}
                   type="number"
                   min={1}
                   max={100}
                   value={targetCount}
                   onChange={(e) =>
                     setTargetCount(
-                      Math.max(1, Number.parseInt(e.target.value) || 1),
+                      Math.max(1, Number.parseInt(e.target.value, 10) || 1),
                     )
                   }
                   disabled={isPending}
                 />
               </div>
 
               <div className="grid gap-2">
-                <Label htmlFor="period">Period</Label>
+                <Label htmlFor={periodId}>Period</Label>
                 <Select
                   value={period}
                   onValueChange={(value: HabitPeriod) => setPeriod(value)}
                   disabled={isPending}
                 >
-                  <SelectTrigger id="period">
+                  <SelectTrigger id={periodId}>
                     <SelectValue placeholder="Select period" />
                   </SelectTrigger>
                   <SelectContent>

stream/src/components/edit-habit-dialog.tsx

@@ -0,0 +1,205 @@
+"use client";
+
+import { useEffect, useId, useState } from "react";
+import { toast } from "sonner";
+import { HabitIconPicker } from "@/components/habit-icon-picker";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useUpdateHabit } from "@/hooks/use-habits";
+import {
+  DEFAULT_HABIT_ICON,
+  type Habit,
+  type HabitIcon,
+  type HabitPeriod,
+} from "@/ipc/habit-reader";
+
+interface EditHabitDialogProps {
+  habit: Habit | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function EditHabitDialog({
+  habit,
+  open,
+  onOpenChange,
+}: EditHabitDialogProps) {
+  const [name, setName] = useState("");
+  const [targetCount, setTargetCount] = useState(1);
+  const [period, setPeriod] = useState<HabitPeriod>("weekly");
+  const [icon, setIcon] = useState<HabitIcon>(DEFAULT_HABIT_ICON);
+
+  const nameId = useId();
+  const targetId = useId();
+  const periodId = useId();
+
+  const { mutate: updateHabit, isPending } = useUpdateHabit();
+
+  // Reset form when habit changes
+  useEffect(() => {
+    if (habit) {
+      setName(habit.name);
+      setTargetCount(habit.targetCount);
+      setPeriod(habit.period);
+      setIcon(habit.icon || DEFAULT_HABIT_ICON);
+    }
+  }, [habit]);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!habit) return;
+
+    if (!name.trim()) {
+      toast.error("Please enter a habit name");
+      return;
+    }
+
+    if (targetCount < 1) {
+      toast.error("Target must be at least 1");
+      return;
+    }
+
+    updateHabit(
+      {
+        id: habit.id,
+        updates: {
+          name: name.trim(),
+          targetCount,
+          period,
+          icon,
+        },
+      },
+      {
+        onSuccess: () => {
+          toast.success(`Updated habit: ${name.trim()}`);
+          onOpenChange(false);
+        },
+        onError: (error) => {
+          toast.error(`Failed to update habit: ${error.message}`);
+        },
+      },
+    );
+  };
+
+  const handleClose = () => {
+    if (!isPending) {
+      onOpenChange(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="sm:max-w-[425px]">
+        <form onSubmit={handleSubmit}>
+          <DialogHeader>
+            <DialogTitle>Edit Habit</DialogTitle>
+            <DialogDescription>
+              Update your habit settings. Changes are saved immediately.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="grid gap-4 py-4">
+            <div className="grid gap-2">
+              <Label htmlFor={nameId}>Habit Name</Label>
+              <div className="flex items-center gap-2">
+                <HabitIconPicker
+                  value={icon}
+                  onChange={setIcon}
+                  disabled={isPending}
+                />
+                <Input
+                  id={nameId}
+                  placeholder="e.g., Exercise, Read, Meditate"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  disabled={isPending}
+                  autoFocus
+                  className="flex-1"
+                />
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-4">
+              <div className="grid gap-2">
+                <Label htmlFor={targetId}>Target</Label>
+                <Input
+                  id={targetId}
+                  type="number"
+                  min={1}
+                  max={100}
+                  value={targetCount}
+                  onChange={(e) =>
+                    setTargetCount(
+                      Math.max(1, Number.parseInt(e.target.value, 10) || 1),
+                    )
+                  }
+                  disabled={isPending}
+                />
+              </div>
+
+              <div className="grid gap-2">
+                <Label htmlFor={periodId}>Period</Label>
+                <Select
+                  value={period}
+                  onValueChange={(value: HabitPeriod) => setPeriod(value)}
+                  disabled={isPending}
+                >
+                  <SelectTrigger id={periodId}>
+                    <SelectValue placeholder="Select period" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="daily">Daily</SelectItem>
+                    <SelectItem value="weekly">Weekly</SelectItem>
+                    <SelectItem value="monthly">Monthly</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+
+            <p className="text-muted-foreground text-sm">
+              {period === "daily" &&
+                `Complete ${targetCount} time${targetCount > 1 ? "s" : ""} per day`}
+              {period === "weekly" &&
+                `Complete ${targetCount} time${targetCount > 1 ? "s" : ""} per week`}
+              {period === "monthly" &&
+                `Complete ${targetCount} time${targetCount > 1 ? "s" : ""} per month`}
+            </p>
+          </div>
+
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={handleClose}
+              disabled={isPending}
+            >
+              Cancel
+            </Button>
+            <Button type="submit" disabled={isPending || !name.trim()}>
+              {isPending ? "Saving..." : "Save Changes"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default EditHabitDialog;