my prefect server setup prefect-metrics.waow.tech
python orchestration
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

clean up briefing cards: dots instead of icons, fix highlight + orphan layout

- replace heroicon SVGs with small colored dots (less visual noise)
- highlight now uses subtle bg tint instead of a border-l that clashes
with the card's own left border
- orphan section (odd non-high count) spans full width instead of
sitting alone in the bottom-left

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

zzstoatzz b44349f1 812bdb62

+23 -33
+9 -19
web/src/lib/briefing-styles.ts
··· 1 - import type { SectionAccent, SectionIcon, SectionPriority } from '$lib/server/briefing'; 1 + import type { SectionAccent, SectionPriority } from '$lib/server/briefing'; 2 2 3 3 /* 4 4 * tailwind safelist (JIT needs to see these classes statically): ··· 6 6 * text-red-400 text-amber-400 text-emerald-400 text-sky-400 text-violet-400 7 7 * text-red-300 text-amber-300 text-emerald-300 text-sky-300 text-violet-300 8 8 * bg-red-950/40 bg-amber-950/40 bg-emerald-950/40 bg-sky-950/40 bg-violet-950/40 9 + * bg-red-400 bg-amber-400 bg-emerald-400 bg-sky-400 bg-violet-400 9 10 * border-l-2 border-l-3 border-l-4 10 - * sm:col-span-2 11 + * sm:col-span-2 bg-white/5 11 12 */ 12 13 13 14 export const ACCENT_STYLES: Record< ··· 16 17 border: string; 17 18 headerText: string; 18 19 summaryText: string; 19 - highlightBar: string; 20 + dot: string; 20 21 bgTint: string; 21 22 } 22 23 > = { ··· 24 25 border: 'border-red-500', 25 26 headerText: 'text-red-400', 26 27 summaryText: 'text-red-300/70', 27 - highlightBar: 'border-red-500', 28 + dot: 'bg-red-400', 28 29 bgTint: 'bg-red-950/40' 29 30 }, 30 31 amber: { 31 32 border: 'border-amber-500', 32 33 headerText: 'text-amber-400', 33 34 summaryText: 'text-amber-300/70', 34 - highlightBar: 'border-amber-500', 35 + dot: 'bg-amber-400', 35 36 bgTint: 'bg-amber-950/40' 36 37 }, 37 38 emerald: { 38 39 border: 'border-emerald-500', 39 40 headerText: 'text-emerald-400', 40 41 summaryText: 'text-emerald-300/70', 41 - highlightBar: 'border-emerald-500', 42 + dot: 'bg-emerald-400', 42 43 bgTint: 'bg-emerald-950/40' 43 44 }, 44 45 sky: { 45 46 border: 'border-sky-500', 46 47 headerText: 'text-sky-400', 47 48 summaryText: 'text-sky-300/70', 48 - highlightBar: 'border-sky-500', 49 + dot: 'bg-sky-400', 49 50 bgTint: 'bg-sky-950/40' 50 51 }, 51 52 violet: { 52 53 border: 'border-violet-500', 53 54 headerText: 'text-violet-400', 54 55 summaryText: 'text-violet-300/70', 55 - highlightBar: 'border-violet-500', 56 + dot: 'bg-violet-400', 56 57 bgTint: 'bg-violet-950/40' 57 58 } 58 - }; 59 - 60 - /** heroicons mini 20x20 SVG paths */ 61 - export const ICON_PATHS: Record<SectionIcon, string> = { 62 - alert: 'M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2z', 63 - clock: 'M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm.75-13a.75.75 0 0 0-1.5 0v5c0 .414.336.75.75.75h4a.75.75 0 0 0 0-1.5h-3.25V5z', 64 - check: 'M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5z', 65 - eye: 'M10 12.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z M.664 10.59a1.651 1.651 0 0 1 0-1.186A10.004 10.004 0 0 1 10 3c4.257 0 7.893 2.66 9.336 6.41.147.381.146.804 0 1.186A10.004 10.004 0 0 1 10 17c-4.257 0-7.893-2.66-9.336-6.41z', 66 - bolt: 'M11.983 1.907a.75.75 0 0 0-1.292-.657l-8.5 9.5A.75.75 0 0 0 2.75 12h6.572l-1.305 6.093a.75.75 0 0 0 1.292.657l8.5-9.5A.75.75 0 0 0 17.25 8h-6.572l1.305-6.093z', 67 - bookmark: 68 - 'M10 2c-1.543 0-3.29.47-4.593 1.19C4.11 3.91 3 4.963 3 6.5c0 1.14.523 2.044 1.268 2.724.672.612 1.538 1.075 2.303 1.465A20.1 20.1 0 0 0 8 11.448V19.5a.75.75 0 0 0 1.272.537L10 19.31l.728.727A.75.75 0 0 0 12 19.5v-8.052c.56-.264 1.245-.622 1.929-1.06.765-.39 1.631-.853 2.303-1.465C16.977 8.544 17.5 7.64 17.5 6.5c0-1.537-1.11-2.59-2.407-3.31C13.79 2.47 12.043 2 10 2z' 69 59 }; 70 60 71 61 export const PRIORITY_LAYOUT: Record<
+14 -14
web/src/lib/components/Briefing.svelte
··· 2 2 import type { Briefing, BriefingItem } from '$lib/server/briefing'; 3 3 import type { Card } from '$lib/types'; 4 4 import { hashColor, timeAgo } from '$lib/format'; 5 - import { ACCENT_STYLES, ICON_PATHS, PRIORITY_LAYOUT } from '$lib/briefing-styles'; 5 + import { ACCENT_STYLES, PRIORITY_LAYOUT } from '$lib/briefing-styles'; 6 6 7 7 let { briefing, cards }: { briefing: Briefing | null; cards: Card[] } = $props(); 8 8 9 9 let cardMap = $derived(new Map(cards.map((c) => [c.id, c]))); 10 + 11 + /** sections that don't already span full width */ 12 + let normalSections = $derived( 13 + briefing?.sections.filter((s) => (s.priority ?? 'normal') !== 'high') ?? [] 14 + ); 15 + let lastNormalTitle = $derived( 16 + normalSections.length % 2 === 1 ? normalSections[normalSections.length - 1]?.title : null 17 + ); 10 18 11 19 function urlFor(item: BriefingItem): string | null { 12 20 return cardMap.get(item.item_id)?.url ?? null; ··· 58 66 {#each briefing.sections as section (section.title)} 59 67 {@const accent = ACCENT_STYLES[section.accent ?? 'sky']} 60 68 {@const layout = PRIORITY_LAYOUT[section.priority ?? 'normal']} 61 - {@const icon = section.icon ? ICON_PATHS[section.icon] : null} 69 + {@const isOrphan = section.title === lastNormalTitle} 70 + {@const colSpan = layout.colSpan || (isOrphan ? 'sm:col-span-2' : '')} 62 71 63 72 <div 64 - class="rounded-lg {accent.bgTint} {accent.border} {layout.borderWidth} {layout.padding} {layout.colSpan} space-y-3" 73 + class="rounded-lg {accent.bgTint} {accent.border} {layout.borderWidth} {layout.padding} {colSpan} space-y-3" 65 74 > 66 75 <div class="flex items-center gap-2"> 67 - {#if icon} 68 - <svg 69 - xmlns="http://www.w3.org/2000/svg" 70 - viewBox="0 0 20 20" 71 - fill="currentColor" 72 - class="h-5 w-5 shrink-0 {accent.headerText}" 73 - > 74 - <path d={icon} /> 75 - </svg> 76 - {/if} 76 + <span class="h-2 w-2 shrink-0 rounded-full {accent.dot}"></span> 77 77 <h3 class="{layout.titleSize} font-medium {accent.headerText} lowercase"> 78 78 {section.title} 79 79 </h3> ··· 89 89 {@const highlighted = item.highlight ?? false} 90 90 <li 91 91 class="text-sm flex items-center gap-2 {highlighted 92 - ? `border-l-2 ${accent.highlightBar} pl-2 text-gray-100` 92 + ? 'bg-white/5 rounded px-1.5 py-0.5 -mx-1.5 text-gray-100 font-medium' 93 93 : 'text-gray-300'}" 94 94 > 95 95 {#if parsed}