0058b297d8
Leonie (UX): the toggle pill (text-[7.5px]) and loading subtitle (text-[9px]) were below the 12px floor for the 60+ audience. Bump both to text-xs and the toggle icon to h-3.5/w-3.5. Overrides the visual spec's tokens, which conflicted with the issue's own legibility mandate. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
70 lines
2.2 KiB
Svelte
70 lines
2.2 KiB
Svelte
<script lang="ts">
|
|
import { m } from '$lib/paraglide/messages.js';
|
|
|
|
type SmartSearchErrorCode = 'SMART_SEARCH_UNAVAILABLE' | 'SMART_SEARCH_RATE_LIMITED';
|
|
|
|
let {
|
|
status,
|
|
errorCode,
|
|
onSwitchToKeyword
|
|
}: {
|
|
status: 'loading' | 'error';
|
|
errorCode?: SmartSearchErrorCode;
|
|
onSwitchToKeyword?: () => void;
|
|
} = $props();
|
|
|
|
const isRateLimited = $derived(errorCode === 'SMART_SEARCH_RATE_LIMITED');
|
|
const title = $derived(
|
|
isRateLimited ? m.search_error_rate_limited() : m.search_error_unavailable()
|
|
);
|
|
const body = $derived(
|
|
isRateLimited ? m.search_error_rate_limited_body() : m.search_error_unavailable_body()
|
|
);
|
|
</script>
|
|
|
|
{#if status === 'loading'}
|
|
<div
|
|
role="status"
|
|
aria-live="polite"
|
|
class="flex flex-col items-center justify-center gap-3 py-16 text-center"
|
|
>
|
|
<div
|
|
aria-hidden="true"
|
|
class="h-9 w-9 rounded-full border-[3px] border-primary/12 border-t-primary motion-safe:animate-spin"
|
|
></div>
|
|
<p class="text-sm font-bold text-ink">{m.search_loading_nl()}</p>
|
|
<p class="max-w-xs text-xs text-ink-3 motion-safe:animate-pulse">
|
|
{m.search_loading_nl_sub()}
|
|
</p>
|
|
</div>
|
|
{:else if status === 'error'}
|
|
<div role="alert" class="flex flex-col items-center justify-center gap-3 py-16 text-center">
|
|
<div
|
|
aria-hidden="true"
|
|
class="flex h-10 w-10 items-center justify-center rounded-full border-2 text-lg font-bold {isRateLimited
|
|
? 'border-amber-400 bg-amber-50 text-amber-600'
|
|
: 'border-red-400 bg-red-50 text-red-600'}"
|
|
>
|
|
{#if isRateLimited}
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-5 w-5">
|
|
<circle cx="12" cy="12" r="9" />
|
|
<path d="M12 7v5l3 2" stroke-linecap="round" stroke-linejoin="round" />
|
|
</svg>
|
|
{:else}
|
|
<span>!</span>
|
|
{/if}
|
|
</div>
|
|
<p class="text-sm font-bold text-ink">{title}</p>
|
|
<p class="max-w-xs text-xs text-ink-3">{body}</p>
|
|
{#if !isRateLimited}
|
|
<button
|
|
type="button"
|
|
onclick={onSwitchToKeyword}
|
|
class="mt-2 inline-flex min-h-[44px] items-center rounded border border-primary bg-primary px-4 py-2 text-sm font-bold text-primary-fg outline-none focus-visible:ring-2 focus-visible:ring-brand-navy"
|
|
>
|
|
{m.search_switch_to_keyword()}
|
|
</button>
|
|
{/if}
|
|
</div>
|
|
{/if}
|