fix(calendar): visibility picker also in the Workbench DetailView

User reported the picker was missing in the Workbench's inline calendar
detail view. I'd only patched EventDetailModal.svelte (used by the
/calendar route), not views/DetailView.svelte which the app-registry
loads for the Workbench card overlay.

Same pattern as the other fixes: import VisibilityPicker + type,
handleVisibilityChange → eventsStore.setVisibility, place the compact
picker in the title-row next to the title input.

Added a small .title-row flex style so title input and picker sit
side-by-side without overlap. `:global(.title-input)` used because the
class is shared with other DetailViews' overrides.

Lesson: any module with BOTH a route-level detail component AND a
views/DetailView.svelte registered for the Workbench needs the picker
in both. Checked other shipped modules:
  - todo: views/DetailView already had it (correct)
  - places: views/DetailView already had it (correct)
  - library: opens in a sub-route, not inline Workbench — views/
    DetailView covers both (correct)
  - wardrobe: opens in a sub-route /wardrobe/outfit/[id] — covers both
  - picture: no Workbench detail view registered, only list
  - goals/recipes: inline-on-card, no separate detail view

Only calendar had the split, now fixed.

Verified:
- pnpm check (web): 7515 files, 0 errors

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Till JS 2026-04-24 15:49:48 +02:00
parent 3551652612
commit 98a68afc74

View file

@ -9,6 +9,7 @@
import DetailViewShell from '$lib/components/DetailViewShell.svelte';
import { eventsStore } from '../stores/events.svelte';
import { MapPin, Clock, X } from '@mana/shared-icons';
import { VisibilityPicker, type VisibilityLevel } from '@mana/shared-privacy';
import type { ViewProps } from '$lib/app-registry';
import type { LocalEvent } from '../types';
import type { LocalTimeBlock } from '$lib/data/time-blocks/types';
@ -92,6 +93,10 @@
await saveField();
}
async function handleVisibilityChange(next: VisibilityLevel) {
await eventsStore.setVisibility(eventId, next);
}
async function deleteEvent() {
const id = eventId;
await eventsStore.deleteEvent(id);
@ -113,13 +118,20 @@
onConfirmDelete={deleteEvent}
>
{#snippet body(event)}
<input
class="title-input"
bind:value={editTitle}
onfocus={detail.focus}
onblur={saveField}
placeholder="Titel..."
/>
<div class="title-row">
<input
class="title-input"
bind:value={editTitle}
onfocus={detail.focus}
onblur={saveField}
placeholder="Titel..."
/>
<VisibilityPicker
level={event.visibility ?? 'private'}
onChange={handleVisibilityChange}
compact
/>
</div>
<div class="properties">
<div class="prop-row">
@ -222,6 +234,15 @@
</DetailViewShell>
<style>
.title-row {
display: flex;
align-items: center;
gap: 0.5rem;
}
.title-row :global(.title-input) {
flex: 1 1 auto;
min-width: 0;
}
.prop-icon {
display: flex;
align-items: center;