my prefect server setup
prefect-metrics.waow.tech
python
orchestration
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>
+23
-33
+9
-19
web/src/lib/briefing-styles.ts
+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
+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}