From 0a8f3745061d8b06fe5e7af0e87e6170bb0d10f2 Mon Sep 17 00:00:00 2001
From: Brian Fertig <brian.fertig@bio-techne.com>
Date: Tue, 29 Sep 2026 08:21:53 -0600
Subject: [PATCH] Add notes preview/edit toggle to group session dialog

- Notes now default to a rendered markdown preview instead of the raw
  editor, reducing visual noise when scanning group context.
- A pencil/eye icon button next to the label flips between the two modes.
- Preview panel is styled with the group tint and a distinct border so it
  reads as group-level notes rather than another to-do row.
- Todo row edit toggle also swaps to an Eye icon while editing for
  consistent affordance.
---
 components/board/group-session-dialog.tsx | 55 +++++++++++++++++++----
 1 file changed, 46 insertions(+), 9 deletions(-)

diff --git a/components/board/group-session-dialog.tsx b/components/board/group-session-dialog.tsx
index 7de0abf..44bdd46 100644
--- a/components/board/group-session-dialog.tsx
+++ b/components/board/group-session-dialog.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useCallback, useEffect, useRef, useState } from "react";
-import { ChevronDown, ChevronRight, Pencil, Plus, Sparkles, Trash2, X, XIcon } from "lucide-react";
+import { ChevronDown, ChevronRight, Eye, Pencil, Plus, Sparkles, Trash2, X, XIcon } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
@@ -113,6 +113,10 @@ export function GroupSessionDialog({
 
   const [noteDraft, setNoteDraft] = useState(group.noteContent);
   const [todoDrafts, setTodoDrafts] = useState<TodoDraft[]>(() => toDrafts(group.todos));
+  // Notes default to a rendered markdown preview; the pencil by the label
+  // flips into the full editor (and back). Kept out of the todo row state
+  // so it never collides with per-row edit toggles.
+  const [notesEditing, setNotesEditing] = useState(false);
   const [aiOpen, setAiOpen] = useState(false);
   const [todoAiOpen, setTodoAiOpen] = useState(false);
   const [savingAll, setSavingAll] = useState(false);
@@ -133,6 +137,7 @@ export function GroupSessionDialog({
     if (next) {
       setNoteDraft(group.noteContent);
       setTodoDrafts(toDrafts(group.todos));
+      setNotesEditing(false);
     } else {
       // Fire-and-forget: close immediately, flush any pending autosaves in
       // the background. board-context's mutators already toast on failure,
@@ -247,13 +252,45 @@ export function GroupSessionDialog({
 
           <div className="flex-1 space-y-6 overflow-y-auto overscroll-contain p-4">
             <div className="space-y-2">
-              <Label className="text-sm font-medium">Notes</Label>
-              <MDEditor
-                value={noteDraft}
-                onChange={(v) => setNoteDraft(v ?? "")}
-                height={280}
-                preview="edit"
-              />
+              <div className="flex items-center gap-2">
+                <Label className="text-sm font-medium">Notes</Label>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon-sm"
+                  onClick={() => setNotesEditing((v) => !v)}
+                  aria-label={notesEditing ? "Preview notes" : "Edit notes"}
+                >
+                  {notesEditing ? <Eye className="size-4" /> : <Pencil className="size-4" />}
+                </Button>
+              </div>
+              {notesEditing ? (
+                <MDEditor
+                  value={noteDraft}
+                  onChange={(v) => setNoteDraft(v ?? "")}
+                  height={280}
+                  preview="edit"
+                />
+              ) : (
+                // Rendered as a distinct group-note panel -- full group tint,
+                // stronger rule, no indent -- so it reads as notes for the
+                // whole group rather than another to-do row.
+                <div
+                  className="max-h-72 overflow-y-auto rounded-lg border p-4"
+                  style={{
+                    borderColor: ruleColor,
+                    backgroundColor: panelBackground,
+                  }}
+                >
+                  {noteDraft.trim() ? (
+                    <MarkdownPreview source={noteDraft} />
+                  ) : (
+                    <p className="text-sm text-muted-foreground">
+                      No notes yet — use the pencil above to add some.
+                    </p>
+                  )}
+                </div>
+              )}
             </div>
 
             <div className="space-y-2">
@@ -556,7 +593,7 @@ function SessionTodoRow({
           onClick={() => setEditingDetails((v) => !v)}
           aria-label={`${editingDetails ? "Preview" : "Edit"} details for "${draft.title || "new to-do"}"`}
         >
-          <Pencil className="size-4" />
+          {editingDetails ? <Eye className="size-4" /> : <Pencil className="size-4" />}
         </Button>
         {onCollapse && (
           <Button