wotra/web/src/lib/components/DayChip.svelte

<script lang="ts">
	import { formatDurationShort } from '$lib/utils';

	interface Props {
		dayKey: string;
		weekdayLabel: string; // e.g. 'Mon'
		workedMs: number;
		expectedMs: number;
		kind: 'work' | 'holiday' | 'vacation' | 'sick' | null; // null = open/untracked
		closed: boolean;
		isToday: boolean;
		selected: boolean;
		isWorkday: boolean;
		onclick?: () => void;
	}

	let {
		dayKey,
		weekdayLabel,
		workedMs,
		expectedMs,
		kind,
		closed,
		isToday,
		selected,
		isWorkday,
		onclick
	}: Props = $props();

	const dateNum = $derived(dayKey.slice(8)); // DD

	// Progress bar fill: clamp to [0,1]. Non-workdays have expectedMs=0 → no bar.
	const progress = $derived(expectedMs > 0 ? Math.min(workedMs / expectedMs, 1) : 0);

	const workedLabel = $derived(workedMs > 0 ? formatDurationShort(workedMs) : null);

	// Kind icons (emoji-free: text labels used for kind badges)
	const KIND_ICON: Record<string, string> = {
		holiday: 'H',
		vacation: 'V',
		sick: 'S'
	};
</script>

<!-- container query context wraps the button -->
<div class="chip-wrap">
	<button
		class="day-chip"
		class:today={isToday}
		class:selected
		class:weekend={!isWorkday}
		class:closed
		role="tab"
		aria-selected={selected}
		tabindex={selected ? 0 : -1}
		{onclick}
	>
		<span class="wd-label">{weekdayLabel}</span>
		<span class="date-num">{dateNum}</span>

		{#if expectedMs > 0}
			<div class="progress-track" title="{formatDurationShort(workedMs)} / {formatDurationShort(expectedMs)}">
				<div class="progress-fill" class:over={workedMs > expectedMs} style="width: {progress * 100}%"></div>
			</div>
		{:else}
			<div class="progress-track weekend-track"></div>
		{/if}

		<!-- shown only in wide mode via container query -->
		{#if workedLabel}
			<span class="worked-label">{workedLabel}</span>
		{/if}

		<div class="badges">
			{#if kind && kind !== 'work'}
				<span class="kind-badge" data-kind={kind}>{KIND_ICON[kind]}</span>
			{/if}
			{#if closed}
				<span class="closed-badge" title="Closed">✓</span>
			{/if}
		</div>
	</button>
</div>

<style>
	/* Container query context: each chip slot is the container */
	.chip-wrap {
		container-type: inline-size;
		flex: 1;
		min-width: 2.8rem;
		scroll-snap-align: start;
		display: flex;
	}

	.day-chip {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.2rem;
		padding: 0.4rem 0.3rem;
		border: 1px solid #dee2e6;
		border-radius: 8px;
		background: #fff;
		cursor: pointer;
		width: 100%;
		transition: border-color 0.15s, box-shadow 0.15s;
		font-family: inherit;
	}

	.day-chip:hover {
		border-color: #adb5bd;
	}

	.day-chip.today {
		border-color: #2c7be5;
	}

	.day-chip.selected {
		border-color: #2c7be5;
		box-shadow: 0 0 0 2px #cce5ff;
		background: #f0f7ff;
	}

	.day-chip.weekend {
		background: #f8f9fa;
		color: #adb5bd;
	}

	.day-chip.closed {
		background: #f0f9f0;
	}

	.wd-label {
		font-size: 0.65rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.03em;
		color: inherit;
	}

	.date-num {
		font-size: 1rem;
		font-weight: 600;
		line-height: 1;
	}

	.today .date-num {
		color: #2c7be5;
	}

	.progress-track {
		width: 100%;
		height: 4px;
		background: #e9ecef;
		border-radius: 2px;
		overflow: hidden;
		margin: 0.15rem 0;
	}

	.weekend-track {
		background: transparent;
	}

	.progress-fill {
		height: 100%;
		background: #27ae60;
		border-radius: 2px;
		transition: width 0.2s;
	}

	.progress-fill.over {
		background: #f39c12;
	}

	/* Worked duration text — hidden by default, shown when chip is wide */
	.worked-label {
		display: none;
		font-size: 0.7rem;
		font-weight: 600;
		color: #495057;
		line-height: 1;
	}

	.weekend .worked-label {
		color: #adb5bd;
	}

	/* Wide chip (≥ 72px): show worked duration */
	@container (min-width: 72px) {
		.worked-label {
			display: block;
		}

		.day-chip {
			padding: 0.55rem 0.5rem;
			gap: 0.25rem;
		}

		.wd-label {
			font-size: 0.7rem;
		}

		.date-num {
			font-size: 1.15rem;
		}
	}

	/* Very wide chip (≥ 100px): bigger text, more padding */
	@container (min-width: 100px) {
		.day-chip {
			padding: 0.7rem 0.6rem;
			gap: 0.3rem;
		}

		.date-num {
			font-size: 1.3rem;
		}

		.worked-label {
			font-size: 0.8rem;
		}
	}

	.badges {
		display: flex;
		gap: 0.15rem;
		flex-wrap: wrap;
		justify-content: center;
		min-height: 1rem;
	}

	.kind-badge {
		font-size: 0.6rem;
		font-weight: 700;
		padding: 0.05rem 0.25rem;
		border-radius: 3px;
		line-height: 1.4;
	}

	.kind-badge[data-kind="holiday"] { background: #fff3cd; color: #856404; }
	.kind-badge[data-kind="vacation"] { background: #cce5ff; color: #004085; }
	.kind-badge[data-kind="sick"] { background: #f8d7da; color: #721c24; }

	.closed-badge {
		font-size: 0.65rem;
		color: #27ae60;
		font-weight: 700;
	}
</style>