@heyramzi/ui 2.0.1 → 2.2.0

package/src/tasks/record/logic.ts

@@ -1,324 +0,0 @@
-// The record's pure logic: grouping, merging, picking. No DOM, no clock of its own.
-import type {
-	RecordEvent,
-	RecordFilterDef,
-	RecordNext,
-	RecordSummary,
-	StageDef,
-	StepDef,
-	StepGroupDef,
-	StepMarker,
-} from "./types.js";
-
-// =========================
-// EVENTS
-// =========================
-
-/** The calendar day of a timestamp as `YYYY-MM-DD`, in the given zone or the viewer's own. */
-export function localDay(iso: string, timeZone?: string): string {
-	return new Intl.DateTimeFormat("en-CA", {
-		year: "numeric",
-		month: "2-digit",
-		day: "2-digit",
-		timeZone,
-	}).format(new Date(iso));
-}
-
-export type DayGroup = { day: string; events: RecordEvent[] };
-
-/** Newest day first, newest event first inside a day. */
-export function groupEventsByDay(events: readonly RecordEvent[], timeZone?: string): DayGroup[] {
-	const sorted = [...events].sort(
-		(a, b) => new Date(b.occurredAt).getTime() - new Date(a.occurredAt).getTime(),
-	);
-	const groups: DayGroup[] = [];
-	for (const event of sorted) {
-		const day = localDay(event.occurredAt, timeZone);
-		const last = groups[groups.length - 1];
-		if (last && last.day === day) last.events.push(event);
-		else groups.push({ day, events: [event] });
-	}
-	return groups;
-}
-
-/** `today`, `yesterday` or `date`, by calendar distance from `today`. */
-export function dayRelation(day: string, today: string): "today" | "yesterday" | "date" {
-	if (day === today) return "today";
-	const gap = (Date.parse(`${today}T00:00:00Z`) - Date.parse(`${day}T00:00:00Z`)) / 86_400_000;
-	return gap === 1 ? "yesterday" : "date";
-}
-
-/** The events one filter chip shows. An unknown or empty key shows everything. */
-export function eventsForFilter(
-	events: readonly RecordEvent[],
-	filterKey: string,
-	filters: readonly RecordFilterDef[],
-): RecordEvent[] {
-	const filter = filters.find((f) => f.key === filterKey);
-	if (!filter) return [...events];
-	const kinds = new Set(filter.kinds);
-	return events.filter((e) => kinds.has(e.kind));
-}
-
-/** Per-chip counts. Chips with no events are the host's to hide. */
-export function filterCounts(
-	events: readonly RecordEvent[],
-	filters: readonly RecordFilterDef[],
-): Record<string, number> {
-	const counts: Record<string, number> = {};
-	for (const filter of filters) {
-		const kinds = new Set(filter.kinds);
-		counts[filter.key] = events.filter((e) => kinds.has(e.kind)).length;
-	}
-	return counts;
-}
-
-/** Keep the newest `limit` events and count the rest, cutting a day group where the limit falls. */
-export function foldGroups(
-	groups: readonly DayGroup[],
-	limit: number,
-): { groups: DayGroup[]; hidden: number } {
-	const kept: DayGroup[] = [];
-	let used = 0;
-	let total = 0;
-	for (const group of groups) total += group.events.length;
-	for (const group of groups) {
-		if (used >= limit) break;
-		const room = limit - used;
-		const events = group.events.slice(0, room);
-		kept.push({ day: group.day, events });
-		used += events.length;
-	}
-	return { groups: kept, hidden: total - used };
-}
-
-export type ProjectEvents = {
-	id: string;
-	name: string;
-	href?: string | null;
-	events: readonly RecordEvent[];
-};
-
-/**
- * One client's timeline: its own events and every project's, each project event
- * tagged with where it came from. An id seen twice keeps the first, so a source
- * passed in both lists draws once. Newest first.
- */
-export function mergeClientEvents(
-	clientEvents: readonly RecordEvent[],
-	projects: readonly ProjectEvents[],
-): RecordEvent[] {
-	const seen = new Set<string>();
-	const merged: RecordEvent[] = [];
-	const add = (event: RecordEvent) => {
-		if (seen.has(event.id)) return;
-		seen.add(event.id);
-		merged.push(event);
-	};
-	for (const project of projects) {
-		for (const event of project.events) {
-			add({
-				...event,
-				projectId: project.id,
-				projectName: project.name,
-				projectHref: project.href ?? null,
-			});
-		}
-	}
-	for (const event of clientEvents) add({ ...event, projectId: null, projectName: null, projectHref: null });
-	return merged.sort((a, b) => new Date(b.occurredAt).getTime() - new Date(a.occurredAt).getTime());
-}
-
-// =========================
-// PROJECTS
-// =========================
-
-const ACTIVE: ReadonlySet<string> = new Set(["open", "proposal", "ongoing"]);
-
-/** Projects still in play: not closed, and in a stage that isn't won-and-done or lost. */
-export function activeProjects(
-	projects: readonly RecordSummary[],
-	stages: readonly StageDef[],
-): RecordSummary[] {
-	const category = new Map(stages.map((s) => [s.key, s.category]));
-	return projects.filter((p) => {
-		if (p.closed) return false;
-		const c = category.get(p.stageKey);
-		return c === undefined || ACTIVE.has(c);
-	});
-}
-
-/** The earliest dated next across active projects, undated ones after, ties by list order. */
-export function nextAcrossProjects(
-	projects: readonly RecordSummary[],
-	stages: readonly StageDef[],
-): RecordNext | null {
-	let best: RecordNext | null = null;
-	for (const project of activeProjects(projects, stages)) {
-		const next = project.next;
-		if (!next) continue;
-		const candidate: RecordNext = { ...next, projectId: project.id, projectName: project.name };
-		if (!best) {
-			best = candidate;
-			continue;
-		}
-		if (!best.date && candidate.date) best = candidate;
-		else if (best.date && candidate.date && candidate.date < best.date) best = candidate;
-	}
-	return best;
-}
-
-export type LatestStatus = NonNullable<RecordSummary["whereWeAre"]> & {
-	projectId: string;
-	projectName: string;
-};
-
-/** The newest "where we are" across projects, tagged with its project. */
-export function latestWhereWeAre(projects: readonly RecordSummary[]): LatestStatus | null {
-	let best: LatestStatus | null = null;
-	for (const project of projects) {
-		const status = project.whereWeAre;
-		if (!status || !status.text) continue;
-		const at = status.at ? new Date(status.at).getTime() : 0;
-		const bestAt = best?.at ? new Date(best.at).getTime() : -1;
-		if (!best || at > bestAt) best = { ...status, projectId: project.id, projectName: project.name };
-	}
-	return best;
-}
-
-export type MoneyTotals = Record<string, { pipeline: number; won: number; paid: number }>;
-
-export type ClientRollup = {
-	count: number;
-	activeCount: number;
-	totals: MoneyTotals;
-	lastCallAt: string | null;
-};
-
-/**
- * The client's strip. Pipeline is the value of projects in an open or proposal
- * stage, won the value in an ongoing or completed one, paid what came in. A lost
- * project adds to none. Totals stay per currency, because a sum across two is a lie.
- */
-export function rollupProjects(
-	projects: readonly RecordSummary[],
-	stages: readonly StageDef[],
-	fallbackCurrency = "EUR",
-): ClientRollup {
-	const category = new Map(stages.map((s) => [s.key, s.category]));
-	const totals: MoneyTotals = {};
-	let lastCallAt: string | null = null;
-	for (const project of projects) {
-		const currency = project.currency ?? fallbackCurrency;
-		const bucket = (totals[currency] ??= { pipeline: 0, won: 0, paid: 0 });
-		const c = category.get(project.stageKey);
-		const value = project.value ?? 0;
-		if (c === "open" || c === "proposal") bucket.pipeline += value;
-		if (c === "ongoing" || c === "completed") bucket.won += value;
-		bucket.paid += project.paid ?? 0;
-		if (project.lastCallAt && (!lastCallAt || project.lastCallAt > lastCallAt)) lastCallAt = project.lastCallAt;
-	}
-	return {
-		count: projects.length,
-		activeCount: activeProjects(projects, stages).length,
-		totals,
-		lastCallAt,
-	};
-}
-
-// =========================
-// STEPS
-// =========================
-
-/** A step is visible unless hidden. */
-export function visibleSteps(steps: readonly StepDef[]): StepDef[] {
-	return steps.filter((s) => !s.hidden);
-}
-
-export function stepProgress(steps: readonly StepDef[]): { done: number; total: number } {
-	const visible = visibleSteps(steps);
-	return { done: visible.filter((s) => s.done).length, total: visible.length };
-}
-
-/**
- * One marker per visible step. The current step is the first one not done. Any
- * open step before it, or past its own date, is late. Nothing else is.
- * `today` is an ISO date.
- */
-export function stepMarkers(steps: readonly StepDef[], today: string): Map<string, StepMarker> {
-	const visible = visibleSteps(steps);
-	const currentId = visible.find((s) => !s.done)?.id ?? null;
-	const markers = new Map<string, StepMarker>();
-	let beforeCurrent = currentId !== null;
-	for (const step of visible) {
-		if (step.done) {
-			markers.set(step.id, "complete");
-			continue;
-		}
-		if (step.id === currentId) {
-			markers.set(step.id, "current");
-			beforeCurrent = false;
-			continue;
-		}
-		const due = (step.end ?? step.start)?.slice(0, 10);
-		const overdue = due !== undefined && due < today;
-		markers.set(step.id, beforeCurrent || overdue ? "late" : "pending");
-	}
-	return markers;
-}
-
-export type StepBucket = { key: string; label: string | null; steps: StepDef[] };
-
-/**
- * Buckets by group in the declared order, not by consecutive runs, so a reordered
- * rail still draws one header per group. Steps with no or an unknown group go last,
- * under no header.
- */
-export function groupSteps(steps: readonly StepDef[], groups: readonly StepGroupDef[] = []): StepBucket[] {
-	const known = new Set(groups.map((g) => g.key));
-	const buckets: StepBucket[] = groups.map((g) => ({ key: g.key, label: g.label, steps: [] }));
-	const loose: StepBucket = { key: "", label: null, steps: [] };
-	for (const step of steps) {
-		const bucket = buckets.find((b) => b.key === step.group);
-		(step.group && known.has(step.group) && bucket ? bucket : loose).steps.push(step);
-	}
-	const result = buckets.filter((b) => b.steps.length > 0);
-	if (loose.steps.length > 0) result.push(loose);
-	return result;
-}
-
-/** Move `movedId` next to `targetId` inside the id list. Same list back when nothing moves. */
-export function reorderIds(
-	ids: readonly string[],
-	movedId: string,
-	targetId: string,
-	before: boolean,
-): string[] {
-	if (movedId === targetId) return [...ids];
-	const from = ids.indexOf(movedId);
-	if (from < 0 || !ids.includes(targetId)) return [...ids];
-	const next = [...ids];
-	next.splice(from, 1);
-	const at = next.indexOf(targetId);
-	next.splice(before ? at : at + 1, 0, movedId);
-	return next;
-}
-
-/** Swap a step with its neighbour in its own group. Same list back at an edge. */
-export function nudgeStep(steps: readonly StepDef[], id: string, direction: -1 | 1): string[] {
-	const ids = steps.map((s) => s.id);
-	const step = steps.find((s) => s.id === id);
-	if (!step) return ids;
-	const mates = steps.filter((s) => s.group === step.group && !s.hidden);
-	const at = mates.findIndex((s) => s.id === id);
-	const neighbour = mates[at + direction];
-	if (!neighbour) return ids;
-	const a = ids.indexOf(id);
-	const b = ids.indexOf(neighbour.id);
-	const first = ids[a];
-	const second = ids[b];
-	if (first === undefined || second === undefined) return ids;
-	ids[a] = second;
-	ids[b] = first;
-	return ids;
-}

package/src/tasks/record/next-up.svelte

@@ -1,70 +0,0 @@
-<script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import { ArrowRight } from "phosphor-svelte";
-import { cn } from "../../lib/utils.js";
-import { TONE_TEXT } from "../../lib/tone.js";
-import StatusBadge from "../status-badge.svelte";
-import { gutterClass } from "./gutter.js";
-import { formatRange } from "./format.js";
-import { todayIso } from "../dates.js";
-import { resolveLabels, type RecordLabels, type RecordNext } from "./types.js";
-
-// =========================
-// PROPS
-// =========================
-interface Props {
-	next?: RecordNext | null;
-	/** Client mode: say which project the next step belongs to. */
-	showProject?: boolean;
-	labels?: Partial<RecordLabels>;
-	locale?: string;
-	/** ISO date. Decides "late". Defaults to the viewer's today. */
-	today?: string;
-	class?: string;
-}
-let { next, showProject = false, labels, locale, today = todayIso(), class: className }: Props = $props();
-
-// =========================
-// DERIVED
-// =========================
-let t = $derived(resolveLabels(labels));
-let due = $derived((next?.endDate ?? next?.date)?.slice(0, 10));
-let late = $derived(due !== undefined && due < today);
-let when = $derived(next?.date ? formatRange(next.date, next.endDate, locale) : null);
-</script>
-
-<!-- =========================== -->
-<!-- MARKUP -->
-<!-- =========================== -->
-{#if next}
-	<section
-		aria-label={t.next}
-		class={cn(
-			"flex flex-wrap items-center gap-x-2.5 gap-y-1 border-b border-border py-2 text-sm",
-			gutterClass,
-			className,
-		)}
-	>
-		<ArrowRight class="size-3.5 shrink-0 text-muted-foreground" aria-hidden="true" />
-		<span class="font-medium">{t.next}</span>
-		{#if when}
-			<span class={cn("tabular-nums", late ? TONE_TEXT.warning : "text-muted-foreground")}>{when}</span>
-		{/if}
-		{#if next.href}
-			<a href={next.href} class="min-w-0 truncate underline-offset-2 hover:underline">{next.label}</a>
-		{:else}
-			<span class="min-w-0 truncate">{next.label}</span>
-		{/if}
-		{#if next.owner}
-			<span class="text-muted-foreground">{next.owner}</span>
-		{/if}
-		{#if showProject && next.projectName}
-			<span class="text-muted-foreground">{next.projectName}</span>
-		{/if}
-		{#if late}
-			<StatusBadge tone="warning" capitalize={false}>{t.late}</StatusBadge>
-		{/if}
-	</section>
-{/if}

package/src/tasks/record/record-stats.svelte

@@ -1,48 +0,0 @@
-<script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import { cn } from "../../lib/utils.js";
-import type { PanelStat } from "../side-panel-types.js";
-import { gutterClass } from "./gutter.js";
-
-// =========================
-// PROPS
-// =========================
-interface Props {
-	stats: PanelStat[];
-	/** Sits flush with the record's gutter. Off inside a card. */
-	gutter?: boolean;
-	class?: string;
-}
-let { stats, gutter = true, class: className }: Props = $props();
-
-// =========================
-// DERIVED
-// =========================
-const TONE = {
-	default: "",
-	muted: "text-muted-foreground",
-	good: "text-success",
-	bad: "text-destructive",
-} as const;
-</script>
-
-<!-- =========================== -->
-<!-- MARKUP -->
-<!-- =========================== -->
-{#if stats.length > 0}
-	<dl class={cn("flex flex-wrap gap-x-6 gap-y-2", gutter && gutterClass, className)}>
-		{#each stats as stat (stat.label)}
-			<div class="min-w-0">
-				<dt class="text-xs text-muted-foreground">{stat.label}</dt>
-				<dd class={cn("text-sm font-medium tabular-nums", TONE[stat.tone ?? "default"])}>
-					{stat.value}
-					{#if stat.sub}
-						<span class="text-xs font-normal text-muted-foreground">{stat.sub}</span>
-					{/if}
-				</dd>
-			</div>
-		{/each}
-	</dl>
-{/if}

package/src/tasks/record/record-timeline.svelte

@@ -1,231 +0,0 @@
-<script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import type { Snippet } from "svelte";
-import { Circle } from "phosphor-svelte";
-import { SvelteSet } from "svelte/reactivity";
-import { cn } from "../../lib/utils.js";
-import { Button } from "../../shadcn/button/index.js";
-import { Badge } from "../../shadcn/badge/index.js";
-import { Skeleton } from "../../shadcn/skeleton/index.js";
-import { SegmentedFilter } from "../../components/segmented/index.js";
-import { TONE_ICON } from "../../lib/tone.js";
-import { DEFAULT_RECORD_FILTERS, DEFAULT_RECORD_KINDS } from "./kinds.js";
-import { formatDayHeader, formatMoney, formatTime } from "./format.js";
-import {
-	dayRelation,
-	eventsForFilter,
-	filterCounts,
-	foldGroups,
-	groupEventsByDay,
-	localDay,
-} from "./logic.js";
-import {
-	resolveLabels,
-	type RecordEvent,
-	type RecordFilterDef,
-	type RecordKindDef,
-	type RecordLabels,
-} from "./types.js";
-
-// =========================
-// PROPS
-// =========================
-interface Props {
-	events: RecordEvent[];
-	kinds?: RecordKindDef[];
-	filters?: RecordFilterDef[];
-	/** The chip picked: `all` or a filter key. */
-	filter?: string;
-	/** Draws a kind's content in place of the default title and body. The time,
-	    the project chip and the amount stay the timeline's. */
-	entry?: Record<string, Snippet<[RecordEvent]>>;
-	/** Client mode: a chip on each entry says which project it came from. */
-	showProject?: boolean;
-	/** Entries drawn before the rest fold behind one button. */
-	limit?: number;
-	/** Above the list: a note composer, a status form. */
-	composer?: Snippet;
-	loading?: boolean;
-	labels?: Partial<RecordLabels>;
-	locale?: string;
-	/** IANA zone for day boundaries. Defaults to the viewer's own. */
-	timeZone?: string;
-	/** ISO date for "Today". Defaults to the viewer's today. */
-	today?: string;
-	class?: string;
-}
-let {
-	events,
-	kinds = DEFAULT_RECORD_KINDS,
-	filters = DEFAULT_RECORD_FILTERS,
-	filter = $bindable("all"),
-	entry,
-	showProject = false,
-	limit = 30,
-	composer,
-	loading = false,
-	labels,
-	locale,
-	timeZone,
-	today,
-	class: className,
-}: Props = $props();
-
-// =========================
-// STATE
-// =========================
-let showAll = $state(false);
-const expanded = new SvelteSet<string>();
-
-// =========================
-// DERIVED
-// =========================
-let t = $derived(resolveLabels(labels));
-let kindByKey = $derived(new Map(kinds.map((k) => [k.key, k])));
-let counts = $derived(filterCounts(events, filters));
-let chips = $derived([
-	{ value: "all", label: t.all, count: events.length },
-	...filters.filter((f) => (counts[f.key] ?? 0) > 0).map((f) => ({ value: f.key, label: f.label, count: counts[f.key] })),
-]);
-let shown = $derived(eventsForFilter(events, filter, filters));
-let grouped = $derived(groupEventsByDay(shown, timeZone));
-let folded = $derived(showAll ? { groups: grouped, hidden: 0 } : foldGroups(grouped, limit));
-let todayDay = $derived(today ?? localDay(new Date().toISOString(), timeZone));
-
-// =========================
-// FUNCTIONS
-// =========================
-function dayLabel(day: string): string {
-	const relation = dayRelation(day, todayDay);
-	if (relation === "today") return t.today;
-	if (relation === "yesterday") return t.yesterday;
-	return formatDayHeader(day, locale);
-}
-
-function kindOf(event: RecordEvent): RecordKindDef {
-	return kindByKey.get(event.kind) ?? { key: event.kind, label: event.kind };
-}
-
-// A body this long, or with a line break, gets a More toggle. Measuring each
-// row would re-layout the list on every resize.
-function isLong(body: string | null | undefined): boolean {
-	return Boolean(body && (body.length > 180 || body.includes("\n")));
-}
-</script>
-
-<!-- =========================== -->
-<!-- MARKUP -->
-<!-- =========================== -->
-<div class={cn("flex min-w-0 flex-col gap-4", className)}>
-	{@render composer?.()}
-
-	{#if chips.length > 1}
-		<div class="no-scrollbar -mx-1 overflow-x-auto px-1">
-			<SegmentedFilter
-				options={chips}
-				bind:value={filter}
-				ariaLabel={t.activity}
-				block={false}
-				max="none"
-			/>
-		</div>
-	{/if}
-
-	{#if loading}
-		<div class="flex flex-col gap-3">
-			{#each [0, 1, 2] as i (i)}
-				<Skeleton class="h-12" />
-			{/each}
-		</div>
-	{:else if grouped.length === 0}
-		<p class="py-6 text-sm text-muted-foreground">{t.noEvents}</p>
-	{:else}
-		<div class="flex flex-col gap-5">
-			{#each folded.groups as group (group.day)}
-				<section class="flex flex-col gap-1">
-					<h3 class="text-xs font-medium text-muted-foreground">{dayLabel(group.day)}</h3>
-					<ul class="flex flex-col">
-						{#each group.events as event (event.id)}
-							{@const kind = kindOf(event)}
-							{@const Icon = kind.icon ?? Circle}
-							{@const custom = entry?.[event.kind]}
-							<li class="flex gap-3 border-b border-border/60 py-3 last:border-b-0">
-								<span class="mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-full bg-muted">
-									<Icon class={cn("size-3.5", TONE_ICON[kind.tone ?? "neutral"])} aria-hidden="true" />
-									<span class="sr-only">{kind.label}</span>
-								</span>
-								<div class="min-w-0 flex-1">
-									{#if custom}
-										{@render custom(event)}
-									{:else}
-										<p class="text-sm leading-snug font-medium wrap-anywhere">
-											{#if event.href}
-												<a href={event.href} class="underline-offset-2 hover:underline">{event.title}</a>
-											{:else}
-												{event.title}
-											{/if}
-										</p>
-										{#if event.body}
-											<p
-												class={cn(
-													"mt-0.5 text-sm leading-snug whitespace-pre-line text-muted-foreground wrap-anywhere",
-													!expanded.has(event.id) && "line-clamp-3",
-												)}
-											>
-												{event.body}
-											</p>
-											{#if isLong(event.body)}
-												<Button
-													variant="ghost"
-													size="sm"
-													class="-ml-2 text-muted-foreground"
-													aria-expanded={expanded.has(event.id)}
-													onclick={() => (expanded.has(event.id) ? expanded.delete(event.id) : expanded.add(event.id))}
-												>
-													{expanded.has(event.id) ? t.less : t.more}
-												</Button>
-											{/if}
-										{/if}
-										{#if event.details?.length}
-											<dl class="mt-1 flex flex-wrap gap-x-4 gap-y-0.5 text-xs">
-												{#each event.details as detail (detail.label)}
-													<div class="flex gap-1.5">
-														<dt class="text-muted-foreground">{detail.label}</dt>
-														<dd class="font-medium">{detail.value}</dd>
-													</div>
-												{/each}
-											</dl>
-										{/if}
-									{/if}
-									<p class="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground">
-										<span class="tabular-nums">{formatTime(event.occurredAt, locale, timeZone)}</span>
-										<span>{kind.label}</span>
-										{#if event.amount != null}
-											<span class="font-medium text-foreground tabular-nums">
-												{formatMoney(event.amount, event.currency ?? undefined, locale)}
-											</span>
-										{/if}
-										{#if event.actor}<span>{t.by(event.actor)}</span>{/if}
-										{#if event.edited}<span>{t.edited}</span>{/if}
-										{#if showProject && event.projectName}
-											<Badge variant="outline" href={event.projectHref ?? undefined} class="max-w-48 truncate">
-												{event.projectName}
-											</Badge>
-										{/if}
-									</p>
-								</div>
-							</li>
-						{/each}
-					</ul>
-				</section>
-			{/each}
-		</div>
-		{#if folded.hidden > 0}
-			<Button variant="outline" class="w-fit self-start" onclick={() => (showAll = true)}>
-				{t.older(folded.hidden)}
-			</Button>
-		{/if}
-	{/if}
-</div>