66e9309d8a
- JourneyItemCard: 'Brief öffnen' back to a >=44px touch target with the height regression spec restored - GeschichteListRow: REISE badges text-[10px] -> text-xs; drop the hardcoded aria-label and the mobile badge's aria-hidden so phone screen readers learn a row is a Lesereise; mobile avatar initials -> color dot - detail page: badge text-xs, metabar Edit/Delete h-9 -> h-11, avatar color keyed by name to match the list - JourneyReader: dead border-subtle class -> border-line-2 - DocumentPickerDropdown: aria-controls only while the listbox exists - JourneyAddBar: aria-expanded/aria-controls on both toggles + focus hand-off into the revealed picker input / interlude textarea - GeschichteSidebar: section h2s hidden below sm (summary already shows the label there) - JourneyCreate: bg-brand-navy -> semantic bg-primary/text-primary-fg; title maxlength=255 - JourneyItemRow interlude: neutral frame border + left accent only, token utilities instead of arbitrary var() syntax and inline style Review round 3: Leonie (1-8 + round-1 leftovers), Elicit. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
66 lines
2.2 KiB
Svelte
66 lines
2.2 KiB
Svelte
<script lang="ts">
|
|
import { m } from '$lib/paraglide/messages.js';
|
|
import PersonMultiSelect from '$lib/person/PersonMultiSelect.svelte';
|
|
import type { PersonOption } from '$lib/person/personOption';
|
|
|
|
interface Props {
|
|
status: 'DRAFT' | 'PUBLISHED';
|
|
selectedPersons: PersonOption[];
|
|
}
|
|
|
|
let { status, selectedPersons = $bindable() }: Props = $props();
|
|
|
|
const isDraft = $derived(status === 'DRAFT');
|
|
</script>
|
|
|
|
<aside class="flex flex-col gap-6">
|
|
<!-- Status section -->
|
|
<details open class="sm:contents">
|
|
<summary
|
|
class="flex min-h-[44px] cursor-pointer items-center px-4 font-sans text-xs font-bold tracking-widest text-ink-3 uppercase sm:hidden"
|
|
>
|
|
{m.geschichte_sidebar_status()}
|
|
</summary>
|
|
<section class="rounded border border-line bg-surface p-4 shadow-sm">
|
|
<!-- hidden below sm: the <summary> already shows this label there -->
|
|
<h2
|
|
class="mb-1 hidden font-sans text-xs font-bold tracking-widest text-ink-3 uppercase sm:block"
|
|
>
|
|
{m.geschichte_sidebar_status()}
|
|
</h2>
|
|
<p class="mb-3">
|
|
<span
|
|
class="inline-flex items-center rounded px-2 py-1 font-sans text-xs font-bold tracking-widest uppercase {isDraft
|
|
? 'bg-muted text-ink-2'
|
|
: 'bg-accent-bg text-ink'}"
|
|
>
|
|
{isDraft ? m.geschichte_editor_status_draft() : m.geschichte_editor_status_published()}
|
|
</span>
|
|
</p>
|
|
<p class="font-sans text-xs text-ink-3">
|
|
{isDraft
|
|
? m.geschichte_editor_status_draft_hint()
|
|
: m.geschichte_editor_status_published_hint()}
|
|
</p>
|
|
</section>
|
|
</details>
|
|
|
|
<!-- Persons section -->
|
|
<details open class="sm:contents">
|
|
<summary
|
|
class="flex min-h-[44px] cursor-pointer items-center px-4 font-sans text-xs font-bold tracking-widest text-ink-3 uppercase sm:hidden"
|
|
>
|
|
{m.geschichte_editor_personen_heading()}
|
|
</summary>
|
|
<section class="rounded border border-line bg-surface p-4 shadow-sm">
|
|
<h2
|
|
class="mb-2 hidden font-sans text-xs font-bold tracking-widest text-ink-3 uppercase sm:block"
|
|
>
|
|
{m.geschichte_editor_personen_heading()}
|
|
</h2>
|
|
<p class="mb-3 font-sans text-xs text-ink-3">{m.geschichte_editor_personen_hint()}</p>
|
|
<PersonMultiSelect bind:selectedPersons={selectedPersons} />
|
|
</section>
|
|
</details>
|
|
</aside>
|