From dac3ac235a4b8a5bdc4fa187aaee13666dde752e Mon Sep 17 00:00:00 2001
From: Frederic Cabassut <frederic.cabassut@arte.tv>
Date: Mon, 9 Mar 2026 01:16:08 +0100
Subject: [PATCH] fix: improve image actions for mobile and always show
 delete/star

- Use opacity-based visibility (max-md:opacity-100) for image hover
  actions so they're always accessible on touch devices
- Always show ImageUpload with delete/star when attachments exist,
  not just when in image upload mode
- Replace drag-and-drop zone with compact "Add images" button on mobile
- Add showDropZone prop to ImageUpload for conditional drop zone display
- Clean up unused lightbox state from NoteEditor

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/lib/components/ImageUpload.svelte | 84 +++++++++++++++++----------
 src/lib/components/NoteEditor.svelte  | 25 +-------
 2 files changed, 56 insertions(+), 53 deletions(-)

diff --git a/src/lib/components/ImageUpload.svelte b/src/lib/components/ImageUpload.svelte
index 90e791e..6283750 100644
--- a/src/lib/components/ImageUpload.svelte
+++ b/src/lib/components/ImageUpload.svelte
@@ -15,9 +15,10 @@
 		onUpload: (attachment: Attachment) => void;
 		onRemove: (attachmentId: string) => void;
 		onToggleFeatured?: (attachmentId: string, featured: boolean) => void;
+		showDropZone?: boolean;
 	}
 
-	let { noteId, attachments = [], onUpload, onRemove, onToggleFeatured }: Props = $props();
+	let { noteId, attachments = [], onUpload, onRemove, onToggleFeatured, showDropZone = true }: Props = $props();
 
 	let uploading = $state(false);
 	let optimizing = $state(false);
@@ -133,7 +134,7 @@
 					{:else if onToggleFeatured}
 						<button
 							onclick={() => onToggleFeatured(attachment.id, !attachment.featured)}
-							class="absolute bottom-0.5 right-0.5 rounded-full bg-black/50 p-0.5 {attachment.featured ? 'block' : 'hidden group-hover:block'}"
+							class="absolute bottom-0.5 right-0.5 rounded-full bg-black/50 p-0.5 transition-opacity {attachment.featured ? 'opacity-100' : 'max-md:opacity-100 md:opacity-0 md:group-hover:opacity-100'}"
 							aria-label={attachment.featured ? 'Unfeature image' : 'Feature image'}
 							data-testid="toggle-featured"
 						>
@@ -142,7 +143,7 @@
 					{/if}
 					<button
 						onclick={() => onRemove(attachment.id)}
-						class="absolute -right-1 -top-1 hidden rounded-full bg-[var(--destructive)] p-0.5 text-white group-hover:block"
+						class="absolute -right-1 -top-1 rounded-full bg-[var(--destructive)] p-0.5 text-white transition-opacity max-md:opacity-100 md:opacity-0 md:group-hover:opacity-100"
 						aria-label="Remove attachment"
 						data-testid="remove-attachment"
 					>
@@ -154,33 +155,56 @@
 	{/if}
 
 	<!-- Upload area -->
-	<div
-		class="rounded-sm border-2 border-dashed p-4 text-center transition-colors {dragOver ? 'border-[var(--primary)] bg-[var(--primary)]/5' : 'border-[var(--border-subtle)]'}"
-		ondrop={handleDrop}
-		ondragover={handleDragOver}
-		ondragleave={() => (dragOver = false)}
-		role="button"
-		tabindex="0"
-		data-testid="upload-dropzone"
-	>
-		{#if optimizing}
-			<p class="text-sm text-[var(--text-muted)]">Optimizing...</p>
-		{:else if uploading}
-			<p class="text-sm text-[var(--text-muted)]">Uploading...</p>
-		{:else}
-			<label class="cursor-pointer">
-				<span class="text-sm text-[var(--text-muted)]">Drop images here or <span class="text-[var(--primary)] underline">browse</span></span>
-				<input
-					type="file"
-					accept="image/*"
-					multiple
-					class="hidden"
-					onchange={(e) => handleFiles((e.target as HTMLInputElement).files)}
-					data-testid="file-input"
-				/>
-			</label>
-		{/if}
-	</div>
+	{#if showDropZone}
+		<!-- Drop zone for desktop, browse-only label for mobile -->
+		<div
+			class="hidden rounded-sm border-2 border-dashed p-4 text-center transition-colors md:block {dragOver ? 'border-[var(--primary)] bg-[var(--primary)]/5' : 'border-[var(--border-subtle)]'}"
+			ondrop={handleDrop}
+			ondragover={handleDragOver}
+			ondragleave={() => (dragOver = false)}
+			role="button"
+			tabindex="0"
+			data-testid="upload-dropzone"
+		>
+			{#if optimizing}
+				<p class="text-sm text-[var(--text-muted)]">Optimizing...</p>
+			{:else if uploading}
+				<p class="text-sm text-[var(--text-muted)]">Uploading...</p>
+			{:else}
+				<label class="cursor-pointer">
+					<span class="text-sm text-[var(--text-muted)]">Drop images here or <span class="text-[var(--primary)] underline">browse</span></span>
+					<input
+						type="file"
+						accept="image/*"
+						multiple
+						class="hidden"
+						onchange={(e) => handleFiles((e.target as HTMLInputElement).files)}
+						data-testid="file-input"
+					/>
+				</label>
+			{/if}
+		</div>
+		<!-- Mobile: compact browse button -->
+		<div class="md:hidden">
+			{#if optimizing}
+				<p class="text-sm text-[var(--text-muted)]">Optimizing...</p>
+			{:else if uploading}
+				<p class="text-sm text-[var(--text-muted)]">Uploading...</p>
+			{:else}
+				<label class="inline-flex cursor-pointer items-center gap-1.5 rounded-sm border border-[var(--border-subtle)] px-3 py-1.5 text-sm text-[var(--text-muted)] hover:border-[var(--primary)]">
+					<span>Add images</span>
+					<input
+						type="file"
+						accept="image/*"
+						multiple
+						class="hidden"
+						onchange={(e) => handleFiles((e.target as HTMLInputElement).files)}
+						data-testid="file-input-mobile"
+					/>
+				</label>
+			{/if}
+		</div>
+	{/if}
 </div>
 
 {#if lightboxSrc}
diff --git a/src/lib/components/NoteEditor.svelte b/src/lib/components/NoteEditor.svelte
index c68b7f4..40e1e4d 100644
--- a/src/lib/components/NoteEditor.svelte
+++ b/src/lib/components/NoteEditor.svelte
@@ -4,7 +4,6 @@
 	import FormattingToolbar from './FormattingToolbar.svelte';
 	import TiptapEditor from './TiptapEditor.svelte';
 	import ImageUpload from './ImageUpload.svelte';
-	import ImageLightbox from './ImageLightbox.svelte';
 	import { updateNote, createNote } from '$lib/stores/notes.js';
 	import { NOTE_COLORS } from '$lib/utils/colors.js';
 	import type { Editor } from '@tiptap/core';
@@ -38,8 +37,6 @@
 	let textareaEl: HTMLTextAreaElement | undefined = $state();
 	let tiptapEditor: Editor | undefined = $state();
 	let editorTick = $state(0);
-	let lightboxSrc = $state<string | null>(null);
-	let lightboxAlt = $state('');
 
 	// Mutable note identity — allows transitioning from new → saved without closing
 	// svelte-ignore state_referenced_locally
@@ -211,7 +208,7 @@
 		</div>
 
 		<!-- Image attachments -->
-		{#if noteId && showImageUpload}
+		{#if noteId && (showImageUpload || attachmentsList.length > 0)}
 			<div class="border-t border-[var(--border-subtle)] px-4 py-2">
 				<ImageUpload
 					noteId={noteId}
@@ -219,27 +216,9 @@
 					onUpload={handleAttachmentUpload}
 					onRemove={handleAttachmentRemove}
 					onToggleFeatured={handleToggleFeatured}
+					showDropZone={showImageUpload}
 				/>
 			</div>
-		{:else if noteId && attachmentsList.length > 0}
-			<div class="border-t border-[var(--border-subtle)] px-4 py-2">
-				<div class="flex flex-wrap gap-2">
-					{#each attachmentsList as attachment}
-						<!-- svelte-ignore a11y_no_noninteractive_element_interactions a11y_click_events_have_key_events -->
-						<img
-							src="/api/notes/{noteId}/attachments?attachmentId={attachment.id}"
-							alt={attachment.filename}
-							class="h-20 w-20 cursor-pointer rounded-sm object-cover"
-							onclick={() => { lightboxSrc = `/api/notes/${noteId}/attachments?attachmentId=${attachment.id}`; lightboxAlt = attachment.filename; }}
-							data-testid="attachment-thumbnail"
-						/>
-					{/each}
-				</div>
-			</div>
-		{/if}
-
-		{#if lightboxSrc}
-			<ImageLightbox src={lightboxSrc} alt={lightboxAlt} onClose={() => lightboxSrc = null} />
 		{/if}
 
 		<!-- Formatting toolbar -->