feat: crowding indicator

messages/ar.json

@@ -70,5 +70,8 @@
 	"board_dir_SE": "باتجاه الجنوب الشرقي",
 	"board_dir_SW": "باتجاه الجنوب الغربي",
 	"board_stop_code": "#{stopId}",
-	"board_no_departures_inline": "لا توجد رحلات مغادرة قادمة"
+	"board_no_departures_inline": "لا توجد رحلات مغادرة قادمة",
+	"board_occupancy_light": "قليل الازدحام",
+	"board_occupancy_medium": "مزدحم",
+	"board_occupancy_full": "ممتلئ"
 }

messages/de.json

@@ -70,5 +70,8 @@
 	"board_dir_SE": "Richtung Südosten",
 	"board_dir_SW": "Richtung Südwesten",
 	"board_stop_code": "#{stopId}",
-	"board_no_departures_inline": "Keine bevorstehenden Abfahrten"
+	"board_no_departures_inline": "Keine bevorstehenden Abfahrten",
+	"board_occupancy_light": "Geringe Auslastung",
+	"board_occupancy_medium": "Mittlere Auslastung",
+	"board_occupancy_full": "Sehr voll"
 }

messages/en.json

@@ -70,5 +70,8 @@
 	"board_dir_SE": "Southeast",
 	"board_dir_SW": "Southwest",
 	"board_stop_code": "#{stopId}",
-	"board_no_departures_inline": "No upcoming departures"
+	"board_no_departures_inline": "No upcoming departures",
+	"board_occupancy_light": "Not Crowded",
+	"board_occupancy_medium": "Crowded",
+	"board_occupancy_full": "Full"
 }

messages/es.json

@@ -70,5 +70,8 @@
 	"board_dir_SE": "Hacia el sureste",
 	"board_dir_SW": "Hacia el suroeste",
 	"board_stop_code": "#{stopId}",
-	"board_no_departures_inline": "No hay próximas salidas"
+	"board_no_departures_inline": "No hay próximas salidas",
+	"board_occupancy_light": "Casi vacío",
+	"board_occupancy_medium": "Concurrido",
+	"board_occupancy_full": "Lleno"
 }

messages/fr.json

@@ -70,5 +70,8 @@
 	"board_dir_SE": "Direction sud-est",
 	"board_dir_SW": "Direction sud-ouest",
 	"board_stop_code": "#{stopId}",
-	"board_no_departures_inline": "Aucun départ à venir"
+	"board_no_departures_inline": "Aucun départ à venir",
+	"board_occupancy_light": "Presque vide",
+	"board_occupancy_medium": "Chargé",
+	"board_occupancy_full": "Complet"
 }

src/app.css

@@ -150,6 +150,16 @@ body::before {
 	--status-tone: var(--sched);
 }
 
+.theme-departure .occupancy-LIGHT {
+	--occupancy-tone: var(--ink-dim);
+}
+.theme-departure .occupancy-MEDIUM {
+	--occupancy-tone: var(--early);
+}
+.theme-departure .occupancy-FULL {
+	--occupancy-tone: var(--late);
+}
+
 .theme-departure .tnum {
 	font-variant-numeric: tabular-nums;
 }

src/components/board/board.svelte

@@ -26,7 +26,8 @@
 		showStopName = false,
 		rowCount = 5,
 		showFooter = true,
-		showAlerts = true
+		showAlerts = true,
+		showCrowding = false
 	} = $props();
 
 	const visible = $derived(arrivals.slice(0, rowCount));
@@ -198,7 +199,7 @@
 			style:min-height="0"
 		>
 			{#each visible as arrival (arrival.tripId ?? `${arrival.route}-${arrival.departureAt}`)}
-				<DepartureRow {arrival} {showStopName} />
+				<DepartureRow {arrival} {showStopName} {showCrowding} />
 			{/each}
 			{#each Array.from({ length: emptyCount }, (_, i) => i) as i (i)}
 				<div style:border-bottom="1px dashed var(--rule)"></div>

src/components/board/departure-row.svelte

@@ -5,8 +5,9 @@
 	import ArrivalHero from '$components/board/arrival-hero.svelte';
 	import RouteBadge from '$components/board/route-badge.svelte';
 	import StatusPip from '$components/board/status-pip.svelte';
+	import OccupancyPip from '$components/board/occupancy-pip.svelte';
 
-	let { arrival, showStopName = false } = $props();
+	let { arrival, showStopName = false, showCrowding = false } = $props();
 
 	const isCancel = $derived(arrival.status === 'CANCEL');
 	const isSched = $derived(arrival.status === 'SCHED');
@@ -108,5 +109,10 @@
 				{t.board_sched()} {clock}
 			{/if}
 		</div>
+		{#if showCrowding && arrival.occupancy && !isCancel}
+			<div style:margin-top="6px">
+				<OccupancyPip level={arrival.occupancy} />
+			</div>
+		{/if}
 	</div>
 </div>

src/components/board/departure-row.svelte.test.js

@@ -0,0 +1,48 @@
+import { render, cleanup } from '@testing-library/svelte';
+import { describe, test, expect, afterEach } from 'vitest';
+import DepartureRow from './departure-row.svelte';
+
+function arrival(overrides = {}) {
+	return {
+		route: '249',
+		name: 'Route 249',
+		dest: 'South Bellevue Station',
+		min: 16,
+		delta: 0,
+		status: 'ONTIME',
+		departureAt: Date.now() + 16 * 60000,
+		tripId: 't-1',
+		occupancy: 'FULL',
+		...overrides
+	};
+}
+
+describe('DepartureRow occupancy', () => {
+	afterEach(() => cleanup());
+
+	test('shows occupancy when enabled', () => {
+		const { container } = render(DepartureRow, {
+			props: { arrival: arrival(), showCrowding: true }
+		});
+		expect(container.querySelector('.occupancy-FULL')).not.toBeNull();
+	});
+
+	test('hides occupancy when disabled', () => {
+		const { container } = render(DepartureRow, { props: { arrival: arrival() } });
+		expect(container.querySelector('.occupancy-FULL')).toBeNull();
+	});
+
+	test('hides occupancy when there is no occupancy data', () => {
+		const { container } = render(DepartureRow, {
+			props: { arrival: arrival({ occupancy: null }), showCrowding: true }
+		});
+		expect(container.querySelector('[class*="occupancy-"]')).toBeNull();
+	});
+
+	test('hides occupancy for a canceled trip', () => {
+		const { container } = render(DepartureRow, {
+			props: { arrival: arrival({ status: 'CANCEL' }), showCrowding: true }
+		});
+		expect(container.querySelector('.occupancy-FULL')).toBeNull();
+	});
+});

src/components/board/multi-stop-board.svelte

@@ -32,7 +32,8 @@
 		isStale = false,
 		maxDepartures = 6,
 		showFooter = true,
-		showAlerts = true
+		showAlerts = true,
+		showCrowding = false
 	} = $props();
 
 	// Stops with departures come first; an empty or failed stop collapses to one line at the
@@ -172,6 +173,7 @@
 				limit={layout.perCard}
 				rowHeight={layout.rowHeight}
 				numeralSize={layout.numeralSize}
+				{showCrowding}
 			/>
 		{/each}
 	</div>

src/components/board/occupancy-pip.svelte

@@ -0,0 +1,39 @@
+<script>
+	import * as t from '$lib/paraglide/messages.js';
+
+	const LEVELS = {
+		LIGHT: { filled: 1 },
+		MEDIUM: { filled: 2 },
+		FULL: { filled: 3 }
+	};
+
+	let { level, size = 22 } = $props();
+
+	const s = $derived(LEVELS[level]);
+	const label = $derived.by(() => {
+		if (!s) return '';
+		if (level === 'LIGHT') return t.board_occupancy_light();
+		if (level === 'MEDIUM') return t.board_occupancy_medium();
+		if (level === 'FULL') return t.board_occupancy_full();
+		return '';
+	});
+</script>
+
+{#if s}
+	<span
+		class="occupancy-{level} sc"
+		dir="ltr"
+		style:display="inline-flex"
+		style:align-items="center"
+		style:gap="{Math.round(size * 0.45)}px"
+		style:font-weight="500"
+		style:font-size="{size}px"
+		style:color="var(--occupancy-tone)"
+		style:letter-spacing="0.1em"
+	>
+		<span aria-hidden="true" style:font-size="{size * 0.95}px">
+			{#each [0, 1, 2] as i (i)}{i < s.filled ? '●' : '○'}{/each}
+		</span>
+		<span>{label}</span>
+	</span>
+{/if}

src/components/board/occupancy-pip.svelte.test.js

@@ -0,0 +1,46 @@
+import { render, cleanup } from '@testing-library/svelte';
+import { describe, test, expect, afterEach, beforeEach, vi } from 'vitest';
+import OccupancyPip from './occupancy-pip.svelte';
+
+let mockLocale = 'en';
+
+vi.mock('$lib/paraglide/runtime.js', async (importOriginal) => {
+	const actual = await importOriginal();
+	return {
+		...actual,
+		getLocale: () => mockLocale
+	};
+});
+
+beforeEach(() => {
+	mockLocale = 'en';
+});
+
+describe('OccupancyPip', () => {
+	afterEach(() => cleanup());
+
+	test.each([
+		['LIGHT', '●○○', 'Not Crowded'],
+		['MEDIUM', '●●○', 'Crowded'],
+		['FULL', '●●●', 'Full']
+	])('renders %s as %s with its label', (level, glyphs, label) => {
+		const { container } = render(OccupancyPip, { props: { level } });
+		const pip = container.querySelector(`.occupancy-${level}`);
+		expect(pip).not.toBeNull();
+		expect(pip.querySelector('[aria-hidden="true"]').textContent.trim()).toBe(glyphs);
+		expect(pip.textContent).toContain(label);
+	});
+
+	test.each([null, undefined, 'UNKNOWN'])('renders nothing for %s', (level) => {
+		const { container } = render(OccupancyPip, { props: { level } });
+		expect(container.textContent.trim()).toBe('');
+	});
+
+	test('keeps glyph-then-label order and translates the label in Arabic', () => {
+		mockLocale = 'ar';
+		const { container } = render(OccupancyPip, { props: { level: 'FULL' } });
+		const pip = container.querySelector('.occupancy-FULL');
+		expect(pip.getAttribute('dir')).toBe('ltr');
+		expect(pip.textContent).toContain('ممتلئ');
+	});
+});

src/components/board/stop-card.svelte

@@ -4,7 +4,7 @@
 	import { COLLAPSED_CARD_HEIGHT } from '$lib/board-layout.js';
 	import StopRow from '$components/board/stop-row.svelte';
 
-	let { stop, limit = 4, rowHeight = 64, numeralSize = 48 } = $props();
+	let { stop, limit = 4, rowHeight = 64, numeralSize = 48, showCrowding = false } = $props();
 
 	const rows = $derived(stop.failed ? [] : stop.arrivals.slice(0, limit));
 	// A failed stop can still hold last-good arrivals, but the card has always given the
@@ -97,7 +97,7 @@
 
 		<div style:display="grid" style:min-height="0">
 			{#each rows as arrival, i (arrival.tripId ?? `${arrival.route}-${arrival.departureAt}`)}
-				<StopRow {arrival} {rowHeight} {numeralSize} last={i === rows.length - 1} />
+				<StopRow {arrival} {rowHeight} {numeralSize} {showCrowding} last={i === rows.length - 1} />
 			{/each}
 		</div>
 	</section>

src/components/board/stop-row.svelte

@@ -1,5 +1,6 @@
 <script>
 	import * as t from '$lib/paraglide/messages.js';
+	import OccupancyPip from '$components/board/occupancy-pip.svelte';
 
 	const STATUS = {
 		ONTIME: { glyph: '●', weight: 500 },
@@ -9,9 +10,10 @@
 		SCHED: { glyph: '○', weight: 500 }
 	};
 
-	let { arrival, last = false, rowHeight = 64, numeralSize = 48 } = $props();
+	let { arrival, last = false, rowHeight = 64, numeralSize = 48, showCrowding = false } = $props();
 
 	const isCancel = $derived(arrival.status === 'CANCEL');
+	const showOccupancy = $derived(showCrowding && !!arrival.occupancy && !isCancel);
 	const isNow = $derived(!isCancel && arrival.min <= 0);
 	const s = $derived(STATUS[arrival.status] ?? STATUS.SCHED);
 
@@ -102,16 +104,28 @@
 		>
 			{arrival.dest || arrival.name}
 		</div>
-		{#if phrase}
+		{#if phrase || showOccupancy}
 			<div
-				class="sc tnum"
-				style:font-size="12px"
-				style:letter-spacing="0.10em"
+				style:display="flex"
+				style:align-items="center"
+				style:gap="14px"
 				style:margin-top="2px"
-				style:color="var(--status-tone)"
-				style:font-weight={s.weight}
+				style:white-space="nowrap"
 			>
-				{phrase}
+				{#if phrase}
+					<span
+						class="sc tnum"
+						style:font-size="12px"
+						style:letter-spacing="0.10em"
+						style:color="var(--status-tone)"
+						style:font-weight={s.weight}
+					>
+						{phrase}
+					</span>
+				{/if}
+				{#if showOccupancy}
+					<OccupancyPip level={arrival.occupancy} size={12} />
+				{/if}
 			</div>
 		{/if}
 	</div>

src/components/board/stop-row.svelte.test.js

@@ -144,3 +144,44 @@ describe('StopRow sizing', () => {
 		expect(container.firstElementChild.style.height).toBe('96px');
 	});
 });
+
+describe('StopRow occupancy', () => {
+	afterEach(() => cleanup());
+
+	test('shows occupancy when enabled', () => {
+		const { container } = render(StopRow, {
+			props: { arrival: arrival({ occupancy: 'FULL' }), showCrowding: true }
+		});
+		expect(container.querySelector('.occupancy-FULL')).not.toBeNull();
+	});
+
+	test('hides occupancy when disabled', () => {
+		const { container } = render(StopRow, { props: { arrival: arrival({ occupancy: 'FULL' }) } });
+		expect(container.querySelector('.occupancy-FULL')).toBeNull();
+	});
+
+	test('hides occupancy when there is no occupancy data', () => {
+		const { container } = render(StopRow, {
+			props: { arrival: arrival({ occupancy: null }), showCrowding: true }
+		});
+		expect(container.querySelector('[class*="occupancy-"]')).toBeNull();
+	});
+
+	test('hides occupancy for a canceled trip', () => {
+		const { container } = render(StopRow, {
+			props: { arrival: arrival({ status: 'CANCEL', occupancy: 'FULL' }), showCrowding: true }
+		});
+		expect(container.querySelector('.occupancy-FULL')).toBeNull();
+	});
+
+	test('sits on the same line as the late phrase', () => {
+		const { container } = render(StopRow, {
+			props: {
+				arrival: arrival({ status: 'LATE', delta: 1, occupancy: 'MEDIUM' }),
+				showCrowding: true
+			}
+		});
+		const pip = container.querySelector('.occupancy-MEDIUM');
+		expect(pip.parentElement.textContent).toContain('1 MIN LATE');
+	});
+});

src/lib/config/defaults.js

@@ -8,7 +8,8 @@ export const DEFAULT_CONFIG = {
 	updateInterval: 30,
 	theme: THEMES[0],
 	colorMode: COLOR_MODES[0],
-	branding: BRANDING_DEFAULTS
+	branding: BRANDING_DEFAULTS,
+	showCrowding: false
 };
 
 function positiveInt(value, fallback) {
@@ -25,6 +26,8 @@ export function normalizeConfig(raw) {
 		updateInterval: positiveInt(source.updateInterval, DEFAULT_CONFIG.updateInterval),
 		theme: THEMES.includes(source.theme) ? source.theme : DEFAULT_CONFIG.theme,
 		colorMode: COLOR_MODES.includes(source.colorMode) ? source.colorMode : DEFAULT_CONFIG.colorMode,
-		branding: normalizeBranding(source.branding)
+		branding: normalizeBranding(source.branding),
+		showCrowding:
+			typeof source.showCrowding === 'boolean' ? source.showCrowding : DEFAULT_CONFIG.showCrowding
 	};
 }