From ecf38d53133046743bff53a3d0314c5e55d640e1 Mon Sep 17 00:00:00 2001
From: iamdoubz <>
Date: Thu, 2 Jul 2026 12:57:27 -0500
Subject: [PATCH] feat(ui): icon section headers + primary-button styling in
 the summary panel

Tags/Summary/Action items/Calendar event/Participants/Speakers each
get a matching icon and a consistent uppercase section-header style;
"Generate summary" becomes a proper primary (accent-filled) button;
the reminder bell emoji becomes a Lucide Bell icon that highlights in
the warning color once checked.
---
 src/lib/views/SummaryPanel.svelte | 64 +++++++++++++++++++++++++------
 1 file changed, 52 insertions(+), 12 deletions(-)

diff --git a/src/lib/views/SummaryPanel.svelte b/src/lib/views/SummaryPanel.svelte
index d99a0d5..9cc434f 100644
--- a/src/lib/views/SummaryPanel.svelte
+++ b/src/lib/views/SummaryPanel.svelte
@@ -5,6 +5,7 @@
   import { calendar } from "../stores/calendar.svelte";
   import { api, type ActionItem, type CalendarEventDetail, type LlmStatus } from "../api";
   import { renderMarkdown } from "../markdown";
+  import { Tags, Sparkles, ListTodo, CalendarDays, Users, Mic2, Bell } from "@lucide/svelte";
 
   onMount(() => calendar.load());
 
@@ -131,7 +132,7 @@
 </script>
 
 <div class="wrap">
-  <h3>Tags</h3>
+  <h3><Tags size={14} aria-hidden="true" /> Tags</h3>
   {#if !meetings.selected}
     <p class="muted">Select a meeting to tag it.</p>
   {:else}
@@ -152,7 +153,7 @@
     </button>
   {/if}
 
-  <h3>Summary</h3>
+  <h3><Sparkles size={14} aria-hidden="true" /> Summary</h3>
   {#if !meetings.selected}
     <p class="muted">Select a meeting to generate a summary.</p>
   {:else if meetings.summarizingId === meetings.selected.id}
@@ -178,14 +179,17 @@
     {#if llmStatus && llmStatus.provider === "off"}
       <p class="muted small">No local LLM provider configured — enable one in Settings.</p>
     {:else}
-      <button onclick={generateSummary}>Generate summary</button>
+      <button class="primary" onclick={generateSummary}>
+        <Sparkles size={14} aria-hidden="true" />
+        Generate summary
+      </button>
     {/if}
   {/if}
   {#if meetings.summaryError}
     <p class="error">{meetings.summaryError}</p>
   {/if}
 
-  <h3>Action items</h3>
+  <h3><ListTodo size={14} aria-hidden="true" /> Action items</h3>
   {#if !meetings.selected}
     <p class="muted">Select a meeting to see its action items.</p>
   {:else if editableItems.length === 0}
@@ -208,7 +212,7 @@
           />
           <label class="remind" title="Schedule a local reminder for this due date">
             <input type="checkbox" bind:checked={item.reminder_set} disabled={!item.due_at} />
-            🔔
+            <Bell size={14} aria-hidden="true" />
           </label>
         </li>
       {/each}
@@ -218,7 +222,7 @@
     </button>
   {/if}
 
-  <h3>Calendar event</h3>
+  <h3><CalendarDays size={14} aria-hidden="true" /> Calendar event</h3>
   {#if !meetings.selected}
     <p class="muted">Select a meeting to link it to a calendar event.</p>
   {:else}
@@ -252,7 +256,7 @@
     {/if}
   {/if}
 
-  <h3>Participants</h3>
+  <h3><Users size={14} aria-hidden="true" /> Participants</h3>
   {#if !eventDetail || eventDetail.participants.length === 0}
     <p class="muted">Populated from the linked calendar event.</p>
   {:else}
@@ -266,7 +270,7 @@
     </ul>
   {/if}
 
-  <h3>Speakers</h3>
+  <h3><Mic2 size={14} aria-hidden="true" /> Speakers</h3>
   {#if !meetings.selected}
     <p class="muted">Select a meeting to name its speakers.</p>
   {:else if meetings.selected.speakers.length === 0}
@@ -309,8 +313,38 @@
     padding: 0.75rem;
   }
   h3 {
-    font-size: 0.9rem;
-    margin: 0.75rem 0 0.25rem;
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    font-size: 0.78rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--muted);
+    margin: 1.1rem 0 0.5rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--border);
+  }
+  h3:first-child {
+    margin-top: 0;
+    padding-top: 0;
+    border-top: none;
+  }
+  button.primary {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    background: var(--accent);
+    color: var(--accent-fg);
+    border: 1px solid transparent;
+    border-radius: var(--radius-sm);
+    padding: 0.4rem 0.7rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+    cursor: pointer;
+  }
+  button.primary:hover {
+    background: var(--accent-hover);
   }
   .muted {
     color: var(--muted);
@@ -357,11 +391,17 @@
   }
   .due-date {
     font-size: 0.75rem;
-    padding: 0.15rem;
+    padding: 0.2rem;
     max-width: 8.5rem;
+    border-radius: var(--radius-sm);
   }
   .remind {
-    font-size: 0.85rem;
+    display: flex;
+    align-items: center;
+    color: var(--fg-subtle);
+  }
+  .remind:has(input:checked) {
+    color: var(--warning);
   }
   .error {
     color: var(--danger);