From 90915b7879f1cc7f036846621c0bb1be5807b8fd Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Fri, 24 Apr 2026 16:03:48 +0200
Subject: [PATCH] fix(visibility): promote picker to labeled rows across
 remaining modules
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Pattern established in fix(calendar, 8c43c119e) — the picker reads as
a first-class property when it sits in its own row with a 'Sichtbarkeit'
label instead of being tucked behind a compact icon. Applying the same
treatment everywhere the picker was still using the compact variant.

Changes:
- library/views/DetailView: move the picker out of the meta-top-row
  (kind-pill + picker cluster) and into the existing <dl class="details">
  block as a first dt/dd pair. Keeps the kind-pill standalone and gives
  visibility equal weight to the other structured details. Removes the
  now-orphaned .meta-top-row CSS rule
- wardrobe/views/DetailOutfitView: remove the compact picker from the
  header action cluster (it was competing with favourite/edit buttons);
  replace with a 'Sichtbarkeit' label + full picker in its own flex row
  directly below the header, above description
- calendar/components/EventDetailModal: remove the compact picker from
  the modal-actions row (copy/edit/delete chevron area). Add a new
  detail-row at the top of event-details with a 'Sichtbarkeit' label
  (new .detail-label CSS rule, mirrors .detail-icon layout for visual
  consistency with Time/Location/etc rows)

Picture board detail stays as-is: the picker already renders with its
label visible (non-compact) in the header flex, and the Board-Detail
page has no prop-row-style content list to slot it into — inline in
the header is the right spot there.

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

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../components/EventDetailModal.svelte        | 17 ++++++++++++++++-
 .../modules/library/views/DetailView.svelte   | 19 +++++++------------
 .../wardrobe/views/DetailOutfitView.svelte    | 13 ++++++++-----
 3 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/apps/mana/apps/web/src/lib/modules/calendar/components/EventDetailModal.svelte b/apps/mana/apps/web/src/lib/modules/calendar/components/EventDetailModal.svelte
index f1e244ba6..3dbaa32f6 100644
--- a/apps/mana/apps/web/src/lib/modules/calendar/components/EventDetailModal.svelte
+++ b/apps/mana/apps/web/src/lib/modules/calendar/components/EventDetailModal.svelte
@@ -211,7 +211,6 @@
 			</div>
 			<div class="modal-actions">
 				{#if !isEditing}
-					<VisibilityPicker level={event.visibility} onChange={handleVisibilityChange} compact />
 					<button class="btn btn-ghost" onclick={copyToClipboard} title="Kopieren">
 						{#if copied}<Check size={16} />{:else}<Copy size={16} />{/if}
 					</button>
@@ -243,6 +242,14 @@
 				/>
 			{:else}
 				<div class="event-details">
+					<!-- Visibility -->
+					<div class="detail-row">
+						<span class="detail-label">Sichtbarkeit</span>
+						<div class="detail-content">
+							<VisibilityPicker level={event.visibility} onChange={handleVisibilityChange} />
+						</div>
+					</div>
+
 					<!-- Time -->
 					<div class="detail-row">
 						<span class="detail-icon"><Clock size={18} /></span>
@@ -496,6 +503,14 @@
 		margin-top: 0.125rem;
 	}
 
+	.detail-label {
+		font-size: 0.8125rem;
+		color: hsl(var(--color-muted-foreground));
+		min-width: 5rem;
+		flex-shrink: 0;
+		margin-top: 0.25rem;
+	}
+
 	.detail-content {
 		display: flex;
 		flex-direction: column;
diff --git a/apps/mana/apps/web/src/lib/modules/library/views/DetailView.svelte b/apps/mana/apps/web/src/lib/modules/library/views/DetailView.svelte
index 6f1a2774d..f8f2de67e 100644
--- a/apps/mana/apps/web/src/lib/modules/library/views/DetailView.svelte
+++ b/apps/mana/apps/web/src/lib/modules/library/views/DetailView.svelte
@@ -80,12 +80,9 @@
 			</div>
 
 			<div class="meta-col">
-				<div class="meta-top-row">
-					<div class="kind-pill">
-						{KIND_LABELS[entry.kind].emoji}
-						{KIND_LABELS[entry.kind].de}
-					</div>
-					<VisibilityPicker level={entry.visibility} onChange={onVisibilityChange} />
+				<div class="kind-pill">
+					{KIND_LABELS[entry.kind].emoji}
+					{KIND_LABELS[entry.kind].de}
 				</div>
 				<h1>{entry.title}</h1>
 				{#if entry.originalTitle && entry.originalTitle !== entry.title}
@@ -141,6 +138,10 @@
 				{/if}
 
 				<dl class="details">
+					<dt>Sichtbarkeit</dt>
+					<dd>
+						<VisibilityPicker level={entry.visibility} onChange={onVisibilityChange} />
+					</dd>
 					{#if entry.details.kind === 'book'}
 						{#if entry.details.pages}
 							<dt>Seiten</dt>
@@ -279,12 +280,6 @@
 		flex-direction: column;
 		gap: 0.35rem;
 	}
-	.meta-top-row {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		gap: 0.75rem;
-	}
 	.kind-pill {
 		display: inline-flex;
 		align-items: center;
diff --git a/apps/mana/apps/web/src/lib/modules/wardrobe/views/DetailOutfitView.svelte b/apps/mana/apps/web/src/lib/modules/wardrobe/views/DetailOutfitView.svelte
index c109d5d21..5ad65443a 100644
--- a/apps/mana/apps/web/src/lib/modules/wardrobe/views/DetailOutfitView.svelte
+++ b/apps/mana/apps/web/src/lib/modules/wardrobe/views/DetailOutfitView.svelte
@@ -179,11 +179,6 @@
 							</div>
 						</div>
 						<div class="flex items-center gap-1">
-							<VisibilityPicker
-								level={outfit.visibility ?? 'private'}
-								onChange={handleVisibilityChange}
-								compact
-							/>
 							<button
 								type="button"
 								onclick={handleToggleFavorite}
@@ -206,6 +201,14 @@
 						</div>
 					</header>
 
+					<div class="flex items-center justify-between gap-3">
+						<span class="text-xs text-muted-foreground">Sichtbarkeit</span>
+						<VisibilityPicker
+							level={outfit.visibility ?? 'private'}
+							onChange={handleVisibilityChange}
+						/>
+					</div>
+
 					{#if outfit.description}
 						<p class="whitespace-pre-wrap text-sm text-foreground">{outfit.description}</p>
 					{/if}