From 8c43c119eab1d4984e74feb847b85bb37c56a55e Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Fri, 24 Apr 2026 15:52:59 +0200
Subject: [PATCH] fix(calendar): promote visibility picker to a labeled
 prop-row

User feedback: the picker tucked behind the compact icon in the title
row was easy to miss. The other prop-rows carry an icon + field so a
full row reads as "this is an editable property".

Moves the picker into its own prop-row with a "Sichtbarkeit" label,
matching the pattern todo + places already use. Uses the non-compact
variant so the current level (lock / users / link / globe + word) is
readable at a glance.

prop-row--labeled modifier carries the label-text style (muted, fixed
5rem min-width so the picker aligns with the other rows).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../modules/calendar/views/DetailView.svelte  | 38 +++++++++----------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/apps/mana/apps/web/src/lib/modules/calendar/views/DetailView.svelte b/apps/mana/apps/web/src/lib/modules/calendar/views/DetailView.svelte
index 640a76d3a..7b7b5a730 100644
--- a/apps/mana/apps/web/src/lib/modules/calendar/views/DetailView.svelte
+++ b/apps/mana/apps/web/src/lib/modules/calendar/views/DetailView.svelte
@@ -118,22 +118,20 @@
 	onConfirmDelete={deleteEvent}
 >
 	{#snippet body(event)}
-		<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>
+		<input
+			class="title-input"
+			bind:value={editTitle}
+			onfocus={detail.focus}
+			onblur={saveField}
+			placeholder="Titel..."
+		/>
 
 		<div class="properties">
+			<div class="prop-row prop-row--labeled">
+				<span class="prop-label">Sichtbarkeit</span>
+				<VisibilityPicker level={event.visibility ?? 'private'} onChange={handleVisibilityChange} />
+			</div>
+
 			<div class="prop-row">
 				<span class="prop-icon"><Clock size={14} /></span>
 				<div class="time-fields">
@@ -234,14 +232,16 @@
 </DetailViewShell>
 
 <style>
-	.title-row {
+	.prop-row--labeled {
 		display: flex;
 		align-items: center;
-		gap: 0.5rem;
+		gap: 0.75rem;
 	}
-	.title-row :global(.title-input) {
-		flex: 1 1 auto;
-		min-width: 0;
+	.prop-row--labeled .prop-label {
+		font-size: 0.8125rem;
+		color: hsl(var(--color-muted-foreground));
+		min-width: 5rem;
+		flex-shrink: 0;
 	}
 	.prop-icon {
 		display: flex;