From 15961e611723fe83130820ccb821e8957d8afc23 Mon Sep 17 00:00:00 2001
From: Daniel Chalmers <daniel.chalmers@outlook.com>
Date: Fri, 17 Jul 2026 12:25:42 -0500
Subject: [PATCH] Bring Worksheets and Safety Plan into the M3E grouped-list
 pattern

Worksheets drops the flat divider card for tonal rows with the group radius, turns the table of contents into a wrapped row of suggestion chips, and demotes descriptions to body2 on the secondary ink. Safety Plan gets the same grouped rows and now shows each section's title above its supporting text instead of only the description.
---
 .../Pages/SafetyPlanning/SafetyPlanItem.razor |  6 ++-
 .../SafetyPlanning/SafetyPlanPage.razor.css   | 36 ++++++++++++-
 .../Pages/Worksheets/WorksheetView.razor      |  4 +-
 .../Pages/Worksheets/WorksheetsPage.razor     | 22 +++-----
 .../Pages/Worksheets/WorksheetsPage.razor.css | 51 ++++++++++++++++---
 5 files changed, 92 insertions(+), 27 deletions(-)

diff --git a/JournalApp/Pages/SafetyPlanning/SafetyPlanItem.razor b/JournalApp/Pages/SafetyPlanning/SafetyPlanItem.razor
index 0dc24a33..72c11961 100644
--- a/JournalApp/Pages/SafetyPlanning/SafetyPlanItem.razor
+++ b/JournalApp/Pages/SafetyPlanning/SafetyPlanItem.razor
@@ -1,7 +1,11 @@
 @namespace JournalApp
 
 <section class="@($"safety-plan-item safety-plan-item-{MarkupUtil.ToClassName(Title)}")">
-    <MudText>@Subtitle</MudText>
+    <div class="safety-plan-item-header">
+        <MudText Class="safety-plan-item-title">@Title</MudText>
+
+        <MudText Class="safety-plan-item-subtitle" Typo="Typo.body2">@Subtitle</MudText>
+    </div>
 
     <MudTextField T="string" @bind-Text="Text" Placeholder="@Placeholder"
                   Typo="Typo.body2" Variant="Variant.Outlined" Immediate Underline="false"
diff --git a/JournalApp/Pages/SafetyPlanning/SafetyPlanPage.razor.css b/JournalApp/Pages/SafetyPlanning/SafetyPlanPage.razor.css
index 64f27c9c..02af801f 100644
--- a/JournalApp/Pages/SafetyPlanning/SafetyPlanPage.razor.css
+++ b/JournalApp/Pages/SafetyPlanning/SafetyPlanPage.razor.css
@@ -1,8 +1,40 @@
+/* M3E grouped list, like Settings: every plan item is its own tonal row, and the first and last rows carry the large group radius. */
 .safety-plan-items-container {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 3px;
 }
 
-::deep safety-plan-item {
+::deep .safety-plan-item {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  background-color: var(--mud-palette-surface);
+  border-radius: 6px;
+  padding: 14px 16px;
+}
+
+::deep .safety-plan-item:first-child {
+  border-top-left-radius: 18px;
+  border-top-right-radius: 18px;
+}
+
+::deep .safety-plan-item:last-child {
+  border-bottom-left-radius: 18px;
+  border-bottom-right-radius: 18px;
+}
+
+::deep .safety-plan-item-header {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+::deep .safety-plan-item-title {
+  font-size: 16px;
+  font-weight: 500;
+}
+
+::deep .safety-plan-item-subtitle {
+  color: var(--mud-palette-text-secondary);
 }
diff --git a/JournalApp/Pages/Worksheets/WorksheetView.razor b/JournalApp/Pages/Worksheets/WorksheetView.razor
index 3cac3ace..f63dbf0d 100644
--- a/JournalApp/Pages/Worksheets/WorksheetView.razor
+++ b/JournalApp/Pages/Worksheets/WorksheetView.razor
@@ -2,13 +2,13 @@
 @inject ILogger<WorksheetView> logger
 
 <li class="worksheet-view">
-    <MudLink OnClick="OnResourceClicked" Color="Color.Primary" aria-label="Open worksheet" StartIcon="@Icons.Material.Rounded.Link">
+    <MudLink Class="worksheet-view-title" OnClick="OnResourceClicked" Color="Color.Primary" aria-label="Open worksheet" StartIcon="@Icons.Material.Rounded.Link">
         @Worksheet.Title
     </MudLink>
 
     @if (!string.IsNullOrEmpty(Worksheet.Description))
     {
-        <MudText Typo="Typo.body1">@Worksheet.Description</MudText>
+        <MudText Class="worksheet-view-description" Typo="Typo.body2">@Worksheet.Description</MudText>
     }
 </li>
 
diff --git a/JournalApp/Pages/Worksheets/WorksheetsPage.razor b/JournalApp/Pages/Worksheets/WorksheetsPage.razor
index 865a8b0f..b2f70559 100644
--- a/JournalApp/Pages/Worksheets/WorksheetsPage.razor
+++ b/JournalApp/Pages/Worksheets/WorksheetsPage.razor
@@ -22,8 +22,7 @@
                     {
                         <li class="worksheet-group-toc-item">
                             <MudLink OnClick="async () => await ScrollToGroup(MarkupUtil.ToClassName(group.Key))"
-                                     aria-label="Scroll to group"
-                                     StartIcon="@Icons.Material.Rounded.Label">
+                                     aria-label="Scroll to group">
                                 @group.Key
                             </MudLink>
                         </li>
@@ -40,19 +39,12 @@
                     <MudText Class="list-group-title">@group.Key</MudText>
                 }
 
-                <MudCard>
-                    <ul class="worksheet-group-items">
-                        @foreach (var ws in group)
-                        {
-                            <WorksheetView Worksheet="ws" />
-
-                            if (ws != group.Last())
-                            {
-                                <MudDivider />
-                            }
-                        }
-                    </ul>
-                </MudCard>
+                <ul class="worksheet-group-items">
+                    @foreach (var ws in group)
+                    {
+                        <WorksheetView Worksheet="ws" />
+                    }
+                </ul>
             </div>
         }
     </div>
diff --git a/JournalApp/Pages/Worksheets/WorksheetsPage.razor.css b/JournalApp/Pages/Worksheets/WorksheetsPage.razor.css
index 1b549031..90eb4485 100644
--- a/JournalApp/Pages/Worksheets/WorksheetsPage.razor.css
+++ b/JournalApp/Pages/Worksheets/WorksheetsPage.razor.css
@@ -9,28 +9,65 @@
   flex-direction: column;
 }
 
+/* M3E grouped list, like Settings: every worksheet is its own tonal row, and the first and last rows carry the large group radius. */
 .worksheet-group-items {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 3px;
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+::deep .worksheet-view {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  gap: 4px;
+  background-color: var(--mud-palette-surface);
+  border-radius: 6px;
+  padding: 14px 16px;
 }
 
+::deep .worksheet-view:first-child {
+  border-top-left-radius: 18px;
+  border-top-right-radius: 18px;
+}
+
+::deep .worksheet-view:last-child {
+  border-bottom-left-radius: 18px;
+  border-bottom-right-radius: 18px;
+}
+
+::deep .worksheet-view-title {
+  font-size: 16px;
+  font-weight: 500;
+}
+
+::deep .worksheet-view-description {
+  color: var(--mud-palette-text-secondary);
+}
+
+/* The table of contents reads as a wrapped row of M3 suggestion chips. */
 .worksheet-group-toc {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   gap: 8px;
   list-style-type: none;
+  padding: 0;
+  margin: 0;
 }
 
 .worksheet-group-toc-item {
   white-space: nowrap;
-  align-items: start;
+  border: 1px solid var(--mud-palette-lines-default);
+  border-radius: 8px;
+  padding: 6px 12px;
 }
 
-::deep .worksheet-view {
-  display: flex;
-  flex-direction: column;
-  align-items: start;
-  gap: 4px;
+.worksheet-group-toc-item ::deep .mud-link {
+  color: var(--mud-palette-text-primary);
+  font-size: 14px;
+  font-weight: 500;
 }