Add comment field

Author: MikeRomaa

src/checklist.ts

@@ -18,6 +18,7 @@ export interface ActionItem {
     latchable?: boolean;
     /** Duration in seconds for timed items. */
     timer?: number;
+    comment?: string;
 }
 
 export interface ConditionalItem {

src/components/editor/ItemOverlay.tsx

@@ -37,6 +37,7 @@ function ActionOverlay({ item }: { item: ActionItem }) {
                     <span className="vH-flag">TIMER</span>
                     <span className="vH-flag">DEFER</span>
                     <span className="vH-flag">FOLLOW-ON</span>
+                    <span className="vH-flag">COMMENT</span>
                 </div>
                 {item.sensed !== undefined && (
                     <div className="vH-meta" style={sensedStyle}>
@@ -63,6 +64,11 @@ function ActionOverlay({ item }: { item: ActionItem }) {
                         <span className="vH-meta-v">—</span>
                     </div>
                 )}
+                {item.comment && (
+                    <div className="vH-comment" style={{ whiteSpace: "pre", lineHeight: 1.4 }}>
+                        {item.comment}
+                    </div>
+                )}
             </div>
         </div>
     );

src/components/editor/items/ActionItemView.tsx

@@ -16,6 +16,7 @@ export function ActionItemView({ item, number }: { item: ActionItem; number: str
     const [deferOpen, setDeferOpen] = useState(!!item.defer);
     const [followOnOpen, setFollowOnOpen] = useState(!!item.followOn);
     const [timerOpen, setTimerOpen] = useState(item.timer !== undefined);
+    const [commentOpen, setCommentOpen] = useState(item.comment !== undefined);
 
     const otherChecklists = db ? allChecklists(db).filter((cl) => cl.id !== checklist?.id) : [];
     const nameOf = (id: string) => otherChecklists.find((cl) => cl.id === id)?.name ?? id;
@@ -33,6 +34,7 @@ export function ActionItemView({ item, number }: { item: ActionItem; number: str
     const deferActive = !!item.defer || deferOpen;
     const followOnActive = !!item.followOn || followOnOpen;
     const timerActive = item.timer !== undefined || timerOpen;
+    const commentActive = item.comment !== undefined || commentOpen;
 
     const deferUnresolved = !!item.defer && !isResolved(item.defer);
     const followOnUnresolved = !!item.followOn && !isResolved(item.followOn);
@@ -64,6 +66,15 @@ export function ActionItemView({ item, number }: { item: ActionItem; number: str
         }
     }
 
+    function toggleComment() {
+        if (item.comment !== undefined) {
+            update({ comment: undefined });
+            setCommentOpen(false);
+        } else {
+            setCommentOpen(!commentOpen);
+        }
+    }
+
     return (
         <RowFrame item={item} number={number} color={color}>
             <div className="vH-action">
@@ -136,6 +147,13 @@ export function ActionItemView({ item, number }: { item: ActionItem; number: str
                 >
                     FOLLOW-ON{followOnUnresolved && " ⚠"}
                 </button>
+                <button
+                    className={`vH-flag${commentActive ? " active" : ""}`}
+                    title="Add a comment"
+                    onClick={toggleComment}
+                >
+                    COMMENT
+                </button>
             </div>
             {item.sensed !== undefined && (
                 <div className="vH-meta" style={{ "--sensed": color } as React.CSSProperties}>
@@ -211,6 +229,16 @@ export function ActionItemView({ item, number }: { item: ActionItem; number: str
                     </span>
                 </div>
             )}
+            {commentActive && (
+                <EditableText
+                    value={item.comment ?? ""}
+                    onCommit={(v) => update({ comment: v || undefined })}
+                    multiline
+                    autoSize
+                    placeholder="Comment…"
+                    className="vH-comment"
+                />
+            )}
         </RowFrame>
     );
 }

src/components/editor/items/items.css

@@ -100,13 +100,16 @@
     min-width: 16px;
 }
 .vH-meta {
-    margin-top: 3px;
+    margin-top: 6px;
     font-family: var(--font-mono);
     font-size: 11.5px;
     display: flex;
     gap: 4px;
     align-items: baseline;
 }
+.vH-meta + .vH-meta {
+    margin-top: 3px;
+}
 .vH-meta-k {
     color: var(--sensed);
     opacity: 0.7;
@@ -180,6 +183,10 @@
     border-color: color-mix(in oklab, #ffe300 45%, transparent);
     background: color-mix(in oklab, #ffe300 12%, transparent);
 }
+.vH-comment {
+    margin-top: 6px;
+}
+
 .vH-ext {
     margin-top: 3px;
     font-family: var(--font-mono);

src/migrations.ts

@@ -173,6 +173,7 @@ function migrateItem(raw: unknown): ChecklistItem | null {
                 inverted: typeof it.inverted === "boolean" ? it.inverted : undefined,
                 latchable: typeof it.latchable === "boolean" ? it.latchable : undefined,
                 timer: typeof it.timer === "number" && it.timer > 0 ? it.timer : undefined,
+                comment: typeof it.comment === "string" ? it.comment : undefined,
             };
         }
         case "sensed": {

src/schemas.ts

@@ -40,6 +40,7 @@ const externalItemSchema: z.ZodType<ExternalItem> = z.lazy(() =>
             followOn: z.string().optional(),
             ...baseSensed,
             timer: z.number().int().positive().optional(),
+            comment: z.string().optional(),
         }),
         // Legacy "sensed" type — accepted on import, converted to "action".
         z.object({
@@ -90,6 +91,7 @@ export type ExternalItem =
           inverted?: boolean;
           latchable?: boolean;
           timer?: number;
+          comment?: string;
       }
     | {
           type: "sensed";
@@ -154,6 +156,7 @@ function stripItem(it: ChecklistItem, nameOf: (id: string) => string | undefined
                 inverted: it.inverted ? true : undefined,
                 latchable: it.latchable ? true : undefined,
                 timer: it.timer,
+                comment: it.comment,
             };
         case "conditional":
             return {
@@ -213,6 +216,7 @@ function hydrateItem(it: ExternalItem, idOf: (name: string) => string | undefine
                 inverted: it.inverted,
                 latchable: it.latchable,
                 timer: it.timer,
+                comment: it.comment,
             };
         case "sensed":
             return {