Update Worksheets and Safety Plan for M3E grouped-list pattern

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"

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);
 }

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>
 

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>

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;
 }