From 600042864614b0629d2f235289df51b49da32b88 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 6 May 2026 05:24:05 +0000
Subject: [PATCH] Make Daily Notes collapsible and move it above Entry Type
 selector
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Registers "daily-notes" as a proper section ID so it participates in
expand/collapse all and persists open/closed state like other sections.
Moves the block from below Entry Type to between Date and Entry Type,
reflecting that daily notes are date-level context independent of type.

- use-section-state: add "daily-notes" to SectionId union and ALL_SECTION_IDS
- home.tsx: add "daily-notes" to SECTION_DEFAULTS (open), FIELD_TO_SECTION,
  and all three VISIBLE_SECTIONS_BY_TYPE arrays; wrap Daily Notes in
  CollapsibleSection; reorder Date → Daily Notes → Entry Type
- use-section-state.test.ts: add "daily-notes"/"rest-day"/"activity" to
  test defaults and persisted fixtures to match complete SectionId set
- CLAUDE.md: update section IDs list and default expansion docs

https://claude.ai/code/session_01WCETrYAfnUPD7wzy3YZUyi
---
 CLAUDE.md                                     |  6 +-
 client/src/hooks/use-section-state.ts         |  2 +
 client/src/pages/home.tsx                     | 64 ++++++++++---------
 .../src/test/hooks/use-section-state.test.ts  |  6 ++
 4 files changed, 45 insertions(+), 33 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index ae49935..a36ca1b 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -86,12 +86,12 @@ scripts/                              # AWS S3 deployment automation
 - localStorage key: `"pedalnotes-sections"`; stored as `{ version: 1, data: Record<SectionId, boolean> }`
 - On mount: reads stored state, merges defaults for any missing keys, drops unknown keys
 - Version mismatch or malformed data falls back to defaults and overwrites stored value
-- Default expansion: Core Metrics=open, Reflection=open, Rest Day=open, Activity=open; Fueling/Performance/Recovery=collapsed
+- Default expansion: Daily Notes=open, Core Metrics=open, Reflection=open, Rest Day=open, Activity=open; Fueling/Performance/Recovery=collapsed
 - `toggleSection(id)`, `setSection(id, open)`, `resetSections()` — writes persist immediately (no debounce)
 - `QuotaExceededError` on write is caught; section states still work in memory
 - Section states are independent from form draft; clearing the form does not reset section states
-- Section IDs: `core-metrics`, `fueling`, `performance-metrics`, `recovery-metrics`, `reflection`, `rest-day`, `activity`
-- Visible sections depend on `entryType` — `expandAllOrCollapseAll` only affects currently visible sections
+- Section IDs: `daily-notes`, `core-metrics`, `fueling`, `performance-metrics`, `recovery-metrics`, `reflection`, `rest-day`, `activity`
+- Visible sections depend on `entryType` — `expandAllOrCollapseAll` only affects currently visible sections; `daily-notes` is included in all three entry type section lists
 
 ### Entry Types
 Three entry types supported via `entryType` field (default: `cycling`):
diff --git a/client/src/hooks/use-section-state.ts b/client/src/hooks/use-section-state.ts
index 5ea0c7a..27662f9 100644
--- a/client/src/hooks/use-section-state.ts
+++ b/client/src/hooks/use-section-state.ts
@@ -1,6 +1,7 @@
 import { useState } from "react";
 
 export type SectionId =
+  | "daily-notes"
   | "core-metrics"
   | "fueling"
   | "performance-metrics"
@@ -10,6 +11,7 @@ export type SectionId =
   | "activity";
 
 const ALL_SECTION_IDS: SectionId[] = [
+  "daily-notes",
   "core-metrics",
   "fueling",
   "performance-metrics",
diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index c31f555..19f235d 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -42,6 +42,7 @@ import {
 } from "lucide-react";
 
 const SECTION_DEFAULTS: Record<SectionId, boolean> = {
+  "daily-notes": true,
   "core-metrics": true,
   "fueling": false,
   "performance-metrics": false,
@@ -70,6 +71,7 @@ const FIELD_TO_SECTION: Partial<Record<keyof InsertWorkout, SectionId>> = {
   whatCouldBeImproved: "reflection",
   description: "reflection",
   weight: "rest-day",
+  dailyNotes: "daily-notes",
   activityGoal: "activity",
   activityNotes: "activity",
 };
@@ -87,9 +89,9 @@ const entryTypeSubtitles: Record<EntryType, string> = {
 };
 
 const VISIBLE_SECTIONS_BY_TYPE: Record<EntryType, SectionId[]> = {
-  cycling: ["core-metrics", "fueling", "performance-metrics", "recovery-metrics", "reflection"],
-  rest: ["recovery-metrics", "rest-day"],
-  other: ["activity"],
+  cycling: ["daily-notes", "core-metrics", "fueling", "performance-metrics", "recovery-metrics", "reflection"],
+  rest: ["daily-notes", "recovery-metrics", "rest-day"],
+  other: ["daily-notes", "activity"],
 };
 
 const rpeOptions = [
@@ -705,6 +707,35 @@ export default function Home() {
                       />
                     </div>
 
+                    {/* Daily Notes — all entry types */}
+                    <CollapsibleSection
+                      id="daily-notes"
+                      title="Daily Notes"
+                      isOpen={sectionStates["daily-notes"]}
+                      onOpenChange={(open) => setSection("daily-notes", open)}
+                      hasData={!!watchedValues.dailyNotes}
+                    >
+                      <FormField
+                        control={form.control}
+                        name="dailyNotes"
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormControl>
+                              <Textarea
+                                rows={4}
+                                placeholder="Life context, mood, decisions, stressors... One thought per line."
+                                className="resize-y"
+                                {...field}
+                                value={field.value ?? ""}
+                              />
+                            </FormControl>
+                            <p className="text-xs text-gray-500">Each line will be formatted as a bullet point</p>
+                            <FormMessage />
+                          </FormItem>
+                        )}
+                      />
+                    </CollapsibleSection>
+
                     {/* Entry Type Selector */}
                     <div className="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
                       <label className="flex items-center gap-2 text-sm font-medium text-gray-900 dark:text-white mb-3">
@@ -731,33 +762,6 @@ export default function Home() {
                       </div>
                     </div>
 
-                    {/* Daily Notes — all entry types */}
-                    <div className="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
-                      <FormField
-                        control={form.control}
-                        name="dailyNotes"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel className="flex items-center gap-2">
-                              <NotebookPen className="w-4 h-4 text-blue-600 dark:text-blue-400" />
-                              Daily Notes
-                            </FormLabel>
-                            <FormControl>
-                              <Textarea
-                                rows={4}
-                                placeholder="Life context, mood, decisions, stressors... One thought per line."
-                                className="resize-y"
-                                {...field}
-                                value={field.value ?? ""}
-                              />
-                            </FormControl>
-                            <p className="text-xs text-gray-500">Each line will be formatted as a bullet point</p>
-                            <FormMessage />
-                          </FormItem>
-                        )}
-                      />
-                    </div>
-
                     {/* Core Metrics Section — Cycling only */}
                     {entryType === "cycling" && (
                     <CollapsibleSection
diff --git a/client/src/test/hooks/use-section-state.test.ts b/client/src/test/hooks/use-section-state.test.ts
index 662ed09..332559d 100644
--- a/client/src/test/hooks/use-section-state.test.ts
+++ b/client/src/test/hooks/use-section-state.test.ts
@@ -5,11 +5,14 @@ import { useSectionState, type SectionId } from "@/hooks/use-section-state";
 const SECTIONS_KEY = "pedalnotes-sections-test";
 
 const defaults: Record<SectionId, boolean> = {
+  "daily-notes": true,
   "core-metrics": true,
   "fueling": false,
   "performance-metrics": false,
   "recovery-metrics": false,
   "reflection": true,
+  "rest-day": true,
+  "activity": true,
 };
 
 function makeStored(data: Record<SectionId, boolean>, version = 1) {
@@ -38,11 +41,14 @@ describe("useSectionState", () => {
 
   it("restores persisted state on mount", () => {
     const persisted: Record<SectionId, boolean> = {
+      "daily-notes": false,
       "core-metrics": false,
       "fueling": true,
       "performance-metrics": true,
       "recovery-metrics": false,
       "reflection": false,
+      "rest-day": false,
+      "activity": false,
     };
     localStorage.setItem(SECTIONS_KEY, makeStored(persisted));