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.
This commit is contained in:
iamdoubz
2026-07-02 12:57:27 -05:00
parent 1dd9d57b0f
commit ecf38d5313
+52 -12
View File
@@ -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);