9d9d19ceb5
Uses h-9 (36px) on mobile, h-7 (28px) on desktop for better tap targets on small screens. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
96 lines
2.5 KiB
Svelte
96 lines
2.5 KiB
Svelte
<script lang="ts">
|
|
import { m } from '$lib/paraglide/messages.js';
|
|
|
|
type Props = {
|
|
mode: 'read' | 'edit';
|
|
hasBlocks: boolean;
|
|
blockCount: number;
|
|
lastEditedAt: string | null;
|
|
onModeChange: (mode: 'read' | 'edit') => void;
|
|
onClose: () => void;
|
|
};
|
|
|
|
let { mode, hasBlocks, blockCount, lastEditedAt, onModeChange, onClose }: Props = $props();
|
|
|
|
const formattedDate = $derived(
|
|
lastEditedAt
|
|
? new Intl.DateTimeFormat('de-DE', {
|
|
day: 'numeric',
|
|
month: 'short',
|
|
year: 'numeric'
|
|
}).format(new Date(lastEditedAt))
|
|
: null
|
|
);
|
|
|
|
function handleReadClick() {
|
|
if (hasBlocks) {
|
|
onModeChange('read');
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div
|
|
class="flex h-[44px] items-center justify-between border-b border-line bg-surface px-3 font-sans"
|
|
>
|
|
<!-- Segmented toggle -->
|
|
<div class="flex h-9 items-center rounded-full border border-line bg-muted p-0.5 md:h-7">
|
|
<button
|
|
type="button"
|
|
data-testid="mode-read"
|
|
aria-disabled={!hasBlocks}
|
|
onclick={handleReadClick}
|
|
class="h-full rounded-full px-3 text-xs font-semibold transition-colors {mode === 'read'
|
|
? 'bg-primary text-primary-fg'
|
|
: 'text-ink-2 hover:text-ink'}"
|
|
style:opacity={!hasBlocks ? '0.35' : undefined}
|
|
>
|
|
{m.mode_read()}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
data-testid="mode-edit"
|
|
onclick={() => onModeChange('edit')}
|
|
class="h-full rounded-full px-3 text-xs font-semibold transition-colors {mode === 'edit'
|
|
? 'bg-primary text-primary-fg'
|
|
: 'text-ink-2 hover:text-ink'}"
|
|
>
|
|
<span class="md:hidden">{m.mode_edit_short()}</span>
|
|
<span class="hidden md:inline">{m.mode_edit()}</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Status line (hidden on mobile to save space) -->
|
|
<p class="hidden text-xs text-ink-2 md:block">
|
|
{#if blockCount === 1}
|
|
{m.transcription_status_section()}
|
|
{:else}
|
|
{m.transcription_status_sections({ count: blockCount })}
|
|
{/if}
|
|
{#if formattedDate}
|
|
<span class="ml-1"
|
|
>· {m.transcription_status_last_edited({ time: formattedDate })}</span
|
|
>
|
|
{/if}
|
|
</p>
|
|
|
|
<!-- Close button -->
|
|
<button
|
|
type="button"
|
|
data-testid="panel-close"
|
|
onclick={onClose}
|
|
aria-label={m.transcription_panel_close()}
|
|
class="flex h-11 w-11 items-center justify-center rounded text-ink-2 transition-colors hover:bg-muted hover:text-ink"
|
|
>
|
|
<svg
|
|
class="h-4 w-4"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
aria-hidden="true"
|
|
>
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|