@n8n/frontend-module-inbox 0.0.0-stage → 0.2.0

package/src/components/InboxList.test.ts

@@ -0,0 +1,289 @@
+import type { InboxSelfHealingItem, InboxWorkflowReviewItem } from '@n8n/api-types';
+import { createComponentRenderer } from '@n8n/frontend-test-utils';
+import { useUsersStore } from '@n8n/stores/users.store';
+import userEvent from '@testing-library/user-event';
+import { fireEvent, within } from '@testing-library/vue';
+import { useIntersectionObserver } from '@vueuse/core';
+
+import InboxList from './InboxList.vue';
+import type { InboxListSection } from './InboxListSection.vue';
+
+vi.mock('@vueuse/core', async (importOriginal) => ({
+	...(await importOriginal<typeof import('@vueuse/core')>()),
+	useIntersectionObserver: vi.fn(),
+}));
+
+function section(
+	key: InboxListSection['key'],
+	props: Partial<InboxListSection> = {},
+): InboxListSection {
+	return {
+		key,
+		items: [],
+		loading: false,
+		loadingMore: false,
+		hasMore: false,
+		error: null,
+		failedRequest: null,
+		partial: false,
+		...props,
+	};
+}
+function result(props: Partial<InboxSelfHealingItem> = {}): InboxSelfHealingItem {
+	return {
+		type: 'self_healing_result',
+		id: 'result',
+		state: 'open',
+		projectId: 'project',
+		workflowId: 'workflow',
+		workflowName: 'My workflow',
+		summary: 'Fix the workflow',
+		outcome: 'fix_ready',
+		createdAt: '2026-01-01T00:00:00.000Z',
+		updatedAt: '2026-01-01T00:00:00.000Z',
+		completedAt: '2026-01-01T00:00:00.000Z',
+		...props,
+	};
+}
+function review(): InboxWorkflowReviewItem {
+	return {
+		type: 'workflow_review',
+		id: 'review',
+		state: 'open',
+		decision: 'pending',
+		projectId: 'project',
+		title: 'Review my workflow',
+		workflowName: 'My workflow',
+		workflowVersionId: null,
+		requester: null,
+		authors: [],
+		reviewers: [],
+		createdAt: '2026-01-01T00:00:00.000Z',
+		updatedAt: '2026-01-01T00:00:00.000Z',
+	};
+}
+const renderComponent = createComponentRenderer(InboxList, {
+	props: {
+		sections: [section('waiting'), section('authored')],
+		activeTab: 'open',
+		selectedKey: null,
+		openCount: null,
+		closedCount: null,
+	},
+});
+beforeEach(() => localStorage.clear());
+function intersect(isIntersecting = true) {
+	const onIntersect = vi.mocked(useIntersectionObserver).mock.calls.at(-1)![1];
+	onIntersect([{ isIntersecting } as IntersectionObserverEntry], {} as IntersectionObserver);
+}
+
+it('shows one initial skeleton without empty group headers', () => {
+	const { getAllByTestId, queryByTestId } = renderComponent({
+		props: {
+			sections: [section('waiting', { loading: true }), section('authored', { loading: true })],
+		},
+	});
+	expect(getAllByTestId('inbox-list-skeleton')).toHaveLength(1);
+	expect(queryByTestId('inbox-section-header')).not.toBeInTheDocument();
+});
+it('offers one retry when the first load fails without rows', () => {
+	const { getAllByRole, queryByTestId, emitted } = renderComponent({
+		props: {
+			sections: [
+				section('waiting', { error: new Error('Request failed'), failedRequest: 'list' }),
+				section('authored', { error: new Error('Request failed'), failedRequest: 'list' }),
+			],
+		},
+	});
+	const buttons = getAllByRole('button', { name: 'Retry' });
+	expect(buttons).toHaveLength(1);
+	buttons[0].click();
+	expect(emitted('retryActiveTab')).toEqual([[]]);
+	expect(queryByTestId('inbox-section-header')).not.toBeInTheDocument();
+});
+it('retries the failed page after all loaded rows leave the list', () => {
+	const { getByRole, emitted } = renderComponent({
+		props: {
+			sections: [
+				section('waiting', {
+					hasMore: true,
+					error: new Error('Page failed'),
+					failedRequest: 'loadMore',
+				}),
+				section('authored'),
+			],
+		},
+	});
+	getByRole('button', { name: 'Retry' }).click();
+	expect(emitted('retry')).toEqual([['waiting']]);
+	expect(emitted('retryActiveTab')).toBeUndefined();
+	expect(getByRole('button', { name: 'Waiting for your review' })).toBeInTheDocument();
+});
+it('keeps healthy rows visible beside a failed group', () => {
+	const { queryByRole, getByRole, emitted } = renderComponent({
+		props: {
+			sections: [
+				section('waiting', { items: [result()] }),
+				section('authored', { error: new Error('Request failed') }),
+			],
+		},
+	});
+	expect(getByRole('button', { name: /Fix the workflow/ })).toHaveTextContent('Fix the workflow');
+	getByRole('button', { name: 'Retry' }).click();
+	expect(emitted('retry')).toEqual([['authored']]);
+	expect(queryByRole('button', { name: 'Load more' })).not.toBeInTheDocument();
+});
+it('hides settled empty group headers', () => {
+	const { queryByTestId } = renderComponent();
+	expect(queryByTestId('inbox-section-header')).not.toBeInTheDocument();
+});
+it('keeps a partial empty group visible with its own retry', () => {
+	const { getByRole, emitted } = renderComponent({
+		props: { sections: [section('waiting', { partial: true }), section('authored')] },
+	});
+	expect(getByRole('button', { name: 'Waiting for your review' })).toBeInTheDocument();
+	getByRole('button', { name: 'Retry' }).click();
+	expect(emitted('refreshSection')).toEqual([['waiting']]);
+});
+it('collapses groups without requesting more data', async () => {
+	const { getByRole, queryByRole, emitted } = renderComponent({
+		props: { sections: [section('waiting', { items: [result()] })] },
+	});
+	const header = getByRole('button', { name: 'Waiting for your review' });
+	await fireEvent.click(header);
+	expect(header).toHaveAttribute('aria-expanded', 'false');
+	expect(queryByRole('button', { name: /Fix the workflow/ })).not.toBeInTheDocument();
+	await fireEvent.click(header);
+	expect(getByRole('button', { name: /Fix the workflow/ })).toHaveTextContent('Fix the workflow');
+	expect(emitted('loadMore')).toBeUndefined();
+});
+it('uses the impersonal waiting label for administrators', () => {
+	vi.spyOn(useUsersStore(), 'isAdminOrOwner', 'get').mockReturnValue(true);
+	const { getByRole } = renderComponent({
+		props: { sections: [section('waiting', { items: [review()] })] },
+	});
+	expect(getByRole('button', { name: 'Waiting for review' })).toBeInTheDocument();
+});
+it('keeps loading open groups explicit and identifies the group', () => {
+	const { emitted, getByRole } = renderComponent({
+		props: { sections: [section('authored', { hasMore: true })] },
+	});
+	intersect();
+	expect(emitted('loadMore')).toBeUndefined();
+	getByRole('button', { name: 'Load more' }).click();
+	expect(emitted('loadMore')).toEqual([['authored']]);
+});
+it('loads Closed at the bottom without group headers or a Load more button', () => {
+	const { emitted, queryByRole, queryByTestId } = renderComponent({
+		props: { activeTab: 'closed', sections: [section('closed', { hasMore: true })] },
+	});
+	intersect(false);
+	expect(emitted('loadMore')).toBeUndefined();
+	intersect();
+	expect(emitted('loadMore')).toEqual([['closed']]);
+	expect(queryByRole('button', { name: 'Load more' })).not.toBeInTheDocument();
+	expect(queryByTestId('inbox-section-header')).not.toBeInTheDocument();
+});
+it.each([{ loading: true }, { loadingMore: true }, { hasMore: false }])(
+	'does not automatically load Closed with %o',
+	(props) => {
+		const { emitted } = renderComponent({
+			props: { activeTab: 'closed', sections: [section('closed', { hasMore: true, ...props })] },
+		});
+		intersect();
+		expect(emitted('loadMore')).toBeUndefined();
+	},
+);
+it('waits for Retry after a failed Closed page and removes the sentinel on Open', async () => {
+	const closed = section('closed', { hasMore: true, items: [{ ...review(), state: 'closed' }] });
+	const { rerender, emitted } = renderComponent({
+		props: { activeTab: 'closed', sections: [closed] },
+	});
+	const target = vi.mocked(useIntersectionObserver).mock.calls.at(-1)![0];
+	expect(target).not.toHaveProperty('value', null);
+	intersect();
+	await rerender({ sections: [{ ...closed, loadingMore: true }] });
+	expect(target).toHaveProperty('value', null);
+	intersect();
+	expect(emitted('loadMore')).toHaveLength(1);
+	await rerender({
+		sections: [{ ...closed, error: new Error('Page failed') }],
+	});
+	expect(target).toHaveProperty('value', null);
+	intersect();
+	expect(emitted('loadMore')).toHaveLength(1);
+	await rerender({ sections: [closed] });
+	expect(target).not.toHaveProperty('value', null);
+	intersect();
+	expect(emitted('loadMore')).toHaveLength(2);
+	await rerender({ activeTab: 'open', sections: [section('waiting')] });
+	expect(target).toHaveProperty('value', null);
+});
+it('renders compact rows with an Assistant avatar and no source subtitle', () => {
+	const { getByRole, queryByText } = renderComponent({
+		props: { sections: [section('waiting', { items: [result(), review()] })] },
+	});
+	const [assistantRow, reviewRow] = within(getByRole('list')).getAllByRole('button');
+	expect(within(assistantRow).getByTestId('inbox-assistant-avatar')).toBeInTheDocument();
+	expect(within(reviewRow).queryByTestId('inbox-assistant-avatar')).not.toBeInTheDocument();
+	expect(within(assistantRow).getByText('My workflow')).toBeInTheDocument();
+	expect(queryByText('Workflow review')).not.toBeInTheDocument();
+	expect(queryByText('Fix ready')).not.toBeInTheDocument();
+});
+it.each([
+	['fix_ready', 'open', 'Open | Fix ready', 'fixReady'],
+	['needs_you', 'open', 'Open | Needs attention', 'needsAttention'],
+	['could_not_fix', 'open', 'Open | Could not fix', 'needsAttention'],
+	['fix_ready', 'closed', 'Closed | Fix ready', 'closed'],
+] as const)(
+	'labels Assistant %s/%s without implying review approval',
+	(outcome, state, label, color) => {
+		const { getByRole } = renderComponent({
+			props: { sections: [section('waiting', { items: [result({ outcome, state })] })] },
+		});
+		const dot = getByRole('img', { name: label });
+		expect(dot.className).toContain(color);
+		expect(dot).not.toHaveAccessibleName(/approved/i);
+	},
+);
+
+it('separates partial-source recovery from a failed page retry', () => {
+	const { getByTestId, emitted } = renderComponent({
+		props: { sections: [section('waiting', { partial: true, error: new Error('Page failed') })] },
+	});
+	within(getByTestId('inbox-partial')).getByRole('button', { name: 'Retry' }).click();
+	expect(emitted('refreshSection')).toEqual([['waiting']]);
+	expect(emitted('retry')).toBeUndefined();
+	within(getByTestId('inbox-list-error')).getByRole('button', { name: 'Retry' }).click();
+	expect(emitted('retry')).toEqual([['waiting']]);
+});
+
+it('uses Tab, Enter, and Space to select rows in an ordinary list', async () => {
+	const user = userEvent.setup();
+	const first = review();
+	const second = result();
+	const { getByRole, queryByRole, emitted, rerender } = renderComponent({
+		props: {
+			selectedKey: `${first.type}:${first.id}`,
+			sections: [section('waiting', { items: [first, second] })],
+		},
+	});
+	const list = getByRole('list', { name: 'Waiting for your review' });
+	const rows = within(list)
+		.getAllByRole('listitem')
+		.map((item) => within(item).getByRole('button'));
+	expect(queryByRole('listbox')).not.toBeInTheDocument();
+	expect(rows[0]).toHaveAttribute('aria-current', 'true');
+	expect(rows[1]).not.toHaveAttribute('aria-current');
+	getByRole('button', { name: 'Waiting for your review' }).focus();
+	await user.tab();
+	expect(rows[0]).toHaveFocus();
+	await user.keyboard('{Enter}');
+	await user.tab();
+	expect(rows[1]).toHaveFocus();
+	await user.keyboard(' ');
+	expect(emitted('select')).toEqual([[first], [second]]);
+	await rerender({ selectedKey: `${second.type}:${second.id}` });
+	expect(rows[0]).not.toHaveAttribute('aria-current');
+	expect(rows[1]).toHaveAttribute('aria-current', 'true');
+});

package/src/components/InboxList.vue

@@ -0,0 +1,195 @@
+<script setup lang="ts">
+import type { InboxItem, InboxState } from '@n8n/api-types';
+import { N8nButton, N8nHeading, N8nLoading, N8nTabs, N8nText } from '@n8n/design-system';
+import { useI18n } from '@n8n/i18n';
+import { useIntersectionObserver } from '@vueuse/core';
+import { computed, useTemplateRef } from 'vue';
+
+import { useReviewInboxSectionCollapse } from '../composables/useReviewInboxSectionCollapse';
+import type { InboxSectionKey } from '../inbox.constants';
+import InboxListSection from './InboxListSection.vue';
+import type { InboxListSection as ListSection } from './InboxListSection.vue';
+
+const props = defineProps<{
+	sections: ListSection[];
+	activeTab: InboxState;
+	selectedKey: string | null;
+	openCount: number | null;
+	closedCount: number | null;
+}>();
+const emit = defineEmits<{
+	select: [item: InboxItem];
+	clear: [];
+	'update:active-tab': [state: InboxState];
+	loadMore: [section: InboxSectionKey];
+	retry: [section: InboxSectionKey];
+	retryActiveTab: [];
+	refreshSection: [section: InboxSectionKey];
+}>();
+const i18n = useI18n();
+const { isCollapsed, toggleSection } = useReviewInboxSectionCollapse();
+const loading = computed(() => props.sections.some((section) => section.loading));
+const hasUsableRows = computed(() => props.sections.some((section) => section.items.length > 0));
+const showInitialLoadError = computed(
+	() =>
+		!hasUsableRows.value &&
+		props.sections.some((section) => section.failedRequest === 'list') &&
+		!props.sections.some((section) => section.partial),
+);
+const visibleSections = computed(() =>
+	props.sections.filter(
+		(section) =>
+			!loading.value &&
+			!showInitialLoadError.value &&
+			(section.error || section.partial || section.items.length > 0 || section.hasMore),
+	),
+);
+const listRef = useTemplateRef<HTMLElement>('list');
+const loadMoreSentinel = useTemplateRef<HTMLElement>('loadMoreSentinel');
+const canAutoLoad = computed(() => {
+	const closed = props.sections.find((section) => section.key === 'closed');
+	// A failed page waits for Retry. A visible sentinel would otherwise retry in a loop.
+	return (
+		props.activeTab === 'closed' &&
+		closed?.hasMore &&
+		!loading.value &&
+		!closed.loadingMore &&
+		!closed.error
+	);
+});
+useIntersectionObserver(
+	loadMoreSentinel,
+	([entry]) => {
+		if (entry?.isIntersecting && canAutoLoad.value) emit('loadMore', 'closed');
+	},
+	{ root: listRef, threshold: 0.01 },
+);
+const tabs = computed(() => [
+	{
+		value: 'open',
+		label: i18n.baseText('inbox.tabs.open'),
+		tag: props.openCount === null ? undefined : String(props.openCount),
+	},
+	{
+		value: 'closed',
+		label: i18n.baseText('inbox.tabs.closed'),
+		tag: props.closedCount === null ? undefined : String(props.closedCount),
+	},
+]);
+function onTabChange(value: string | number | boolean) {
+	if (value === 'open' || value === 'closed') emit('update:active-tab', value);
+}
+
+function onListBackgroundClick() {
+	if (props.selectedKey) emit('clear');
+}
+</script>
+
+<template>
+	<aside :class="$style.sidebar" data-test-id="inbox-list">
+		<div :class="$style.title">
+			<N8nHeading bold tag="h2" size="xlarge">{{ i18n.baseText('inbox.title') }}</N8nHeading>
+		</div>
+		<div :class="$style.header">
+			<N8nTabs
+				:model-value="activeTab"
+				:options="tabs"
+				variant="modern"
+				data-test-id="inbox-tabs"
+				@update:model-value="onTabChange"
+			/>
+		</div>
+		<div ref="list" :class="$style.list" @click.self="onListBackgroundClick">
+			<N8nLoading v-if="loading" :loading="true" :rows="3" data-test-id="inbox-list-skeleton" />
+			<div
+				v-else-if="showInitialLoadError"
+				:class="$style.sectionError"
+				role="alert"
+				data-test-id="inbox-list-error"
+			>
+				<N8nText color="danger" size="small">{{ i18n.baseText('inbox.loadError') }}</N8nText>
+				<N8nButton
+					variant="outline"
+					size="mini"
+					:label="i18n.baseText('generic.retry')"
+					@click="emit('retryActiveTab')"
+				/>
+			</div>
+			<InboxListSection
+				v-for="section in visibleSections"
+				:key="section.key"
+				:section="section"
+				:collapsed="section.key !== 'closed' && isCollapsed(section.key)"
+				:selected-key="selectedKey"
+				@select="emit('select', $event)"
+				@toggle="toggleSection"
+				@load-more="emit('loadMore', section.key)"
+				@retry="emit('retry', section.key)"
+				@refresh-section="emit('refreshSection', section.key)"
+			/>
+			<div v-if="canAutoLoad" ref="loadMoreSentinel" :class="$style.sentinel" />
+			<div
+				v-else-if="activeTab === 'closed' && !loading && !showInitialLoadError"
+				:class="$style.sentinel"
+			/>
+		</div>
+	</aside>
+</template>
+
+<style module lang="scss">
+.sidebar {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	min-width: 0;
+	height: 100%;
+	border-right: var(--border-width) solid var(--border-color);
+}
+
+.title {
+	display: flex;
+	align-items: center;
+	min-height: var(--spacing--2xl);
+	padding: 0 var(--spacing--md) var(--spacing--sm) 0;
+}
+
+.header {
+	position: relative;
+	display: flex;
+	align-items: center;
+	height: var(--review-tab-bar--height, var(--height--sm));
+	padding-right: var(--spacing--md);
+	margin-bottom: var(--review-tab-bar--gap);
+
+	&::after {
+		content: '';
+		position: absolute;
+		left: 0;
+		right: var(--spacing--md);
+		bottom: calc(-1 * var(--review-tab-bar--indicator-overhang) - var(--border-width));
+		border-bottom: var(--border-width) solid var(--border-color);
+	}
+}
+
+.list {
+	display: flex;
+	flex: 1;
+	flex-direction: column;
+	gap: var(--spacing--sm);
+	min-width: 0;
+	overflow-y: auto;
+	padding: 0 var(--spacing--md) var(--spacing--md) 0;
+}
+
+.sectionError {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--spacing--2xs);
+	padding: 0 var(--spacing--2xs);
+}
+
+.sentinel {
+	height: var(--border-width);
+}
+</style>

package/src/components/InboxListItem.vue

@@ -0,0 +1,208 @@
+<script setup lang="ts">
+import type { InboxItem, InboxSelfHealingItem } from '@n8n/api-types';
+import {
+	N8nAssistantAvatar,
+	N8nBadge,
+	N8nCard,
+	N8nIcon,
+	N8nText,
+	N8nTimeAgo,
+} from '@n8n/design-system';
+import { useI18n } from '@n8n/i18n';
+import { useRootStore } from '@n8n/stores/useRootStore';
+
+import WorkflowReviewStatusDot from '../reviews/components/WorkflowReviewStatusDot.vue';
+
+defineProps<{ item: InboxItem; selected: boolean }>();
+const emit = defineEmits<{ select: [] }>();
+const i18n = useI18n();
+const rootStore = useRootStore();
+
+function outcomeLabel(item: InboxSelfHealingItem) {
+	switch (item.outcome) {
+		case 'fix_ready':
+			return i18n.baseText('inbox.outcome.fixReady');
+		case 'needs_you':
+			return i18n.baseText('inbox.outcome.needsAttention');
+		case 'could_not_fix':
+			return i18n.baseText('inbox.outcome.couldNotFix');
+	}
+}
+</script>
+
+<template>
+	<N8nCard
+		:class="[$style.card, { [$style.selected]: selected }]"
+		role="button"
+		tabindex="0"
+		:aria-current="selected ? 'true' : undefined"
+		:data-source="item.type"
+		data-test-id="inbox-row"
+		@click="emit('select')"
+		@keydown.enter.prevent="emit('select')"
+		@keydown.space.prevent="emit('select')"
+	>
+		<div :class="$style.cardContent">
+			<div :class="$style.cardHeader">
+				<N8nAssistantAvatar
+					v-if="item.type === 'self_healing_result'"
+					size="mini"
+					:class="$style.assistantAvatar"
+					data-test-id="inbox-assistant-avatar"
+				/>
+				<N8nText
+					bold
+					tag="h3"
+					:class="[
+						$style.cardTitle,
+						{ [$style.assistantTitle]: item.type === 'self_healing_result' },
+					]"
+					>{{ item.type === 'workflow_review' ? item.title : item.summary }}</N8nText
+				>
+				<WorkflowReviewStatusDot
+					v-if="item.type === 'workflow_review'"
+					:state="item.state"
+					:decision="item.decision"
+				/>
+				<span
+					v-else
+					:class="[
+						$style.statusDot,
+						item.state === 'closed'
+							? $style.closed
+							: item.outcome === 'fix_ready'
+								? $style.fixReady
+								: $style.needsAttention,
+					]"
+					role="img"
+					:aria-label="`${i18n.baseText(item.state === 'open' ? 'inbox.tabs.open' : 'inbox.tabs.closed')} | ${outcomeLabel(item)}`"
+					data-test-id="inbox-assistant-status"
+				/>
+			</div>
+			<div :class="$style.meta">
+				<N8nBadge v-if="item.workflowName" variant="outline" :class="$style.workflowBadge">
+					<span :class="$style.workflowBadgeText" :title="item.workflowName"
+						><N8nIcon icon="workflow" size="small" /><span>{{ item.workflowName }}</span></span
+					>
+				</N8nBadge>
+				<div :class="$style.metaActions">
+					<N8nText :class="$style.time" size="xsmall" color="text-light">
+						<N8nTimeAgo :date="item.updatedAt" :locale="rootStore.defaultLocale" />
+					</N8nText>
+				</div>
+			</div>
+		</div>
+	</N8nCard>
+</template>
+
+<style module lang="scss">
+.card {
+	cursor: pointer;
+	padding: var(--spacing--xs);
+	align-items: stretch;
+	border: var(--border-width) solid var(--border-color);
+}
+
+.card:hover:not(.selected) {
+	background-color: var(--background--hover);
+	border-color: transparent;
+}
+
+.selected {
+	background-color: var(--background--active);
+	border-color: transparent;
+}
+.card:focus-visible {
+	border-color: var(--focus--border-color);
+}
+.cardContent {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: var(--spacing--2xs);
+	min-width: 0;
+	width: 100%;
+}
+.cardHeader {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--spacing--2xs);
+	width: 100%;
+	min-width: 0;
+}
+.cardTitle {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	min-width: 0;
+	font-size: var(--font-size--sm);
+}
+
+.assistantTitle {
+	flex: 1;
+}
+
+.assistantAvatar {
+	flex-shrink: 0;
+}
+.meta {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--spacing--sm);
+	width: 100%;
+	min-width: 0;
+}
+.workflowBadge {
+	flex: 0 1 auto;
+	min-width: 0;
+	border: var(--border);
+	border-radius: var(--radius);
+	padding: var(--spacing--4xs) var(--spacing--2xs);
+	color: var(--color--text);
+	> span {
+		max-width: 100%;
+	}
+}
+.workflowBadgeText {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--spacing--3xs);
+	max-width: 100%;
+	min-width: 0;
+	line-height: calc(var(--font-size--sm) + var(--border-width));
+	> span {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		min-width: 0;
+	}
+}
+.metaActions {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing--sm);
+	margin-left: auto;
+	flex-shrink: 0;
+}
+
+.time {
+	white-space: nowrap;
+}
+.statusDot {
+	flex-shrink: 0;
+	width: var(--font-size--3xs);
+	height: var(--font-size--3xs);
+	border-radius: 50%;
+}
+.fixReady {
+	background-color: var(--color--blue-500);
+}
+.needsAttention {
+	background-color: var(--color--yellow-500);
+}
+.closed {
+	background-color: var(--color--neutral-500);
+}
+</style>