65b79a337b
Moves Status + Persons sections into a shared component so both GeschichteEditor (STORY) and the upcoming JourneyEditor (JOURNEY) can use the same sidebar without duplicating markup. Adds <details> mobile collapsibles with 44px summary hit areas. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
61 lines
2.0 KiB
Svelte
61 lines
2.0 KiB
Svelte
<script lang="ts">
|
|
import { m } from '$lib/paraglide/messages.js';
|
|
import type { components } from '$lib/generated/api';
|
|
import PersonMultiSelect from '$lib/person/PersonMultiSelect.svelte';
|
|
|
|
type Person = components['schemas']['Person'];
|
|
|
|
interface Props {
|
|
status: 'DRAFT' | 'PUBLISHED';
|
|
selectedPersons: Person[];
|
|
}
|
|
|
|
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"
|
|
>
|
|
Status
|
|
</summary>
|
|
<section class="rounded border border-line bg-surface p-4 shadow-sm">
|
|
<h2 class="mb-1 font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">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 font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
|
|
{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>
|