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/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 -->