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:
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user