@heyramzi/ui 2.22.0 → 2.23.0

package/src/triage/triage-task.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+	import { Button } from "../shadcn/button/index.js";
+	import StatusBadge from "../status/status-badge.svelte";
+	import { cn } from "../lib/utils.js";
+	import {
+		DEFAULT_TRIAGE_TASK_LABELS,
+		type TriageOutcome,
+		type TriageTaskLabels,
+		type TriageTaskLink,
+	} from "./types.js";
+
+	interface Props {
+		sender: string;
+		subject: string;
+		/** What happened to the email. */
+		outcome: TriageOutcome;
+		/** The task it became. */
+		task?: TriageTaskLink | null;
+		/** When it settled, as text the host already formatted. */
+		when: string;
+		whenAt?: string | null;
+		/** Why it failed. */
+		detail?: string | null;
+		error?: string | null;
+		labels?: Partial<TriageTaskLabels>;
+		/** Takes the change back. The button shows only when this is passed. */
+		onUndo?: () => void | Promise<void>;
+		class?: string;
+	}
+
+	let {
+		sender,
+		subject,
+		outcome,
+		task,
+		when,
+		whenAt,
+		detail,
+		error,
+		labels,
+		onUndo,
+		class: className,
+	}: Props = $props();
+
+	let words = $derived({ ...DEFAULT_TRIAGE_TASK_LABELS, ...labels });
+	let busy = $state(false);
+
+	async function undo() {
+		busy = true;
+		try {
+			await onUndo?.();
+		} finally {
+			busy = false;
+		}
+	}
+</script>
+
+<li
+	class={cn(
+		"flex flex-col gap-3 px-5 py-4 sm:flex-row sm:items-center sm:justify-between",
+		className,
+	)}
+>
+	<div class="min-w-0 space-y-1">
+		<p class="text-foreground text-sm font-medium [overflow-wrap:anywhere]">
+			{sender}: {subject}
+		</p>
+		<div class="flex flex-wrap items-center gap-x-3 gap-y-1">
+			<StatusBadge tone={outcome.tone} capitalize={false}>{outcome.label}</StatusBadge>
+			{#if task}
+				<a
+					href={task.url}
+					target="_blank"
+					rel="noreferrer"
+					class="text-primary min-w-0 text-xs [overflow-wrap:anywhere] hover:underline"
+				>
+					{task.name ?? words.openTask}
+				</a>
+			{/if}
+			<time class="text-muted-foreground text-xs" datetime={whenAt ?? undefined}>{when}</time>
+		</div>
+		{#if detail}
+			<p class="text-muted-foreground text-xs [overflow-wrap:anywhere]">{detail}</p>
+		{/if}
+		{#if error}
+			<p class="text-destructive text-xs [overflow-wrap:anywhere]" role="alert">{error}</p>
+		{/if}
+	</div>
+
+	{#if onUndo}
+		<Button variant="outline" class="shrink-0" disabled={busy} onclick={undo}>
+			{words.undo}
+		</Button>
+	{/if}
+</li>

package/src/triage/types.ts

@@ -0,0 +1,35 @@
+import type { Tone } from "../lib/tone.js";
+
+/** The words a plan card shows. Pass a partial to translate or reword. */
+export type TriagePlanLabels = {
+  approve: string;
+  pick: string;
+  dismiss: string;
+  /** The label over the field where the person types the task to use instead. */
+  taskLabel: string;
+  useTask: string;
+  cancel: string;
+};
+
+export const DEFAULT_TRIAGE_PLAN_LABELS: TriagePlanLabels = {
+  approve: "Approve",
+  pick: "Pick another task",
+  dismiss: "Dismiss",
+  taskLabel: "Task",
+  useTask: "Use this task",
+  cancel: "Cancel",
+};
+
+/** The words a task row shows. */
+export type TriageTaskLabels = { undo: string; openTask: string };
+
+export const DEFAULT_TRIAGE_TASK_LABELS: TriageTaskLabels = {
+  undo: "Undo",
+  openTask: "Open task",
+};
+
+/** What happened to a settled email: the chip's words and its tone. */
+export type TriageOutcome = { label: string; tone: Tone };
+
+/** The task the email ended up as, when there is one. */
+export type TriageTaskLink = { name?: string | null; url: string };

package/src/work/kanban-column.svelte

@@ -65,11 +65,13 @@
 </div>
 
 <style>
-	/* Columns split the board's width equally, never under 280px (the board scrolls instead)
-	   nor over 420px (a 2-line card title stays near 55 characters a line). */
+	/* Columns split the board's width equally, never under 240px (the board scrolls instead)
+	   nor over 420px (a 2-line card title stays near 55 characters a line). At 280px four
+	   columns needed 1168px, so a docs page at 1440 cut the Done column off; 240px fits four
+	   in the 1008px a 1440 page leaves, and a card's meta row still fits on one line. */
 	.kanban-column {
 		flex: 1 1 0;
-		min-width: var(--kanban-column-min, 280px);
+		min-width: var(--kanban-column-min, 240px);
 		max-width: var(--kanban-column-max, 420px);
 		transition: opacity var(--duration-quick) var(--ease-smooth-out);
 	}

package/src/work/time/time-chip.svelte

@@ -57,9 +57,7 @@
 					class={cn(
 						"font-normal",
 						tone === "neutral" ? "text-muted-foreground/70" : TONE_TEXT[tone],
-					)}
-				>
-					/ {formatMinutes(estimate)}</span
+					)}>{`\u2009/\u2009${formatMinutes(estimate)}`}</span
 				>{/if}
 		</span>
 	</StatusPill>