Develop

.github/dependabot.yml

@@ -2,6 +2,7 @@ version: 2
 updates:
   - package-ecosystem: "npm"
     directory: "/"
+    target-branch: "develop"
     schedule:
       interval: "weekly"
     open-pull-requests-limit: 10

apps/cli/package.json

@@ -17,7 +17,7 @@
     "@orpc/client": "^1.14.4",
     "@solid-imager/client": "workspace:*",
     "@solid-imager/core": "workspace:*",
-    "incur": "^0.4.8",
+    "incur": "^0.5.1",
     "zod": "^4.4.3"
   },
   "devDependencies": {

apps/server/package.json

@@ -35,8 +35,8 @@
     "docs:generate": "typedoc"
   },
   "dependencies": {
-    "@electric-sql/pglite": "0.5.3",
-    "@electric-sql/pglite-pgvector": "0.0.4",
+    "@electric-sql/pglite": "0.5.5",
+    "@electric-sql/pglite-pgvector": "0.0.6",
     "@orpc/client": "^1.14.4",
     "@orpc/contract": "^1.14.4",
     "@orpc/experimental-pino": "^1.14.4",
@@ -79,7 +79,7 @@
     "@orpc/openapi": "^1.14.4",
     "@playwright/test": "^1.60.0",
     "@tailwindcss/vite": "^4.3.0",
-    "@tanstack/devtools-vite": "^0.7.0",
+    "@tanstack/devtools-vite": "^0.8.3",
     "@types/archiver": "^8.0.0",
     "@types/ffmpeg-static": "^5.1.0",
     "@types/fluent-ffmpeg": "^2.1.28",

apps/server/src/components/media/legacy-media-grid-item.tsx

@@ -16,10 +16,12 @@ export type ServerMediaGridItemProps = {
 	priority?: boolean;
 	sourceRootPath?: string;
 	isBulkSelectMode?: boolean;
+	isPreviewSelected?: boolean;
 	isSelected?: boolean;
 	onToggleSelect?: () => void;
 	onPrepareMediaDetail?: () => void;
 	onPreviewSelect?: () => void;
+	onSelectGesture?: (event: MouseEvent | KeyboardEvent) => void;
 };
 
 export function LegacyMediaGridItem(props: ServerMediaGridItemProps) {

apps/server/src/components/media/v2-media-actions.tsx

@@ -1,5 +1,14 @@
 import type { MediaDetails } from "@solid-imager/core/domain/media/schemas";
 import { getErrorMessage } from "@solid-imager/core/utils";
+import {
+	AlertDialog,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+} from "@solid-imager/ui/alert-dialog";
 import { Button } from "@solid-imager/ui/button";
 import {
 	Popover,
@@ -11,9 +20,11 @@ import { toast } from "@solid-imager/ui/toast";
 import {
 	Binary,
 	ChevronDown,
+	Download,
 	Scan,
 	ScanSearch,
 	Sparkles,
+	Trash2,
 } from "@solid-imager/ui/v2/icons";
 import { useNavigate } from "@tanstack/solid-router";
 import { createEffect, createSignal, on, onCleanup } from "solid-js";
@@ -25,6 +36,7 @@ import {
 	getCcipVectorStatus,
 	startCcipExtraction,
 } from "~/infrastructure/api-clients/ai-api";
+import { deleteMedia } from "~/infrastructure/api-clients/media-api";
 
 type MediaActionsProps = {
 	media: MediaDetails;
@@ -41,6 +53,7 @@ export function V2MediaActions(props: MediaActionsProps) {
 		createSignal(false);
 	const [isCharacterCropModalOpen, setIsCharacterCropModalOpen] =
 		createSignal(false);
+	const [moreActionsOpen, setMoreActionsOpen] = createSignal(false);
 	const [ccipStatus, setCcipStatus] = createSignal<
 		"missing" | "processing" | "ready" | "stale" | "failed"
 	>("missing");
@@ -49,6 +62,8 @@ export function V2MediaActions(props: MediaActionsProps) {
 	);
 	const [isCcipJobPending, setIsCcipJobPending] = createSignal(false);
 	const [isExtractingCcip, setIsExtractingCcip] = createSignal(false);
+	const [isDeleteDialogOpen, setIsDeleteDialogOpen] = createSignal(false);
+	const [isDeleting, setIsDeleting] = createSignal(false);
 	const [ccipMissingStatusCount, setCcipMissingStatusCount] = createSignal(0);
 	let ccipStatusRequestId = 0;
 
@@ -101,6 +116,7 @@ export function V2MediaActions(props: MediaActionsProps) {
 	);
 
 	const handleCcipExtraction = async () => {
+		setMoreActionsOpen(false);
 		setIsExtractingCcip(true);
 		const currentMediaId = props.media.id;
 		const currentMediaSourceId = props.media.mediaSourceId;
@@ -168,6 +184,31 @@ export function V2MediaActions(props: MediaActionsProps) {
 		activateVectorSearch(props.media.id, { surface: "v2" });
 		void navigate({ to: "/v2/search" });
 	};
+	const handleDownload = () => {
+		setMoreActionsOpen(false);
+		const anchor = document.createElement("a");
+		anchor.href = `/api/sources/${encodeURIComponent(props.media.mediaSourceId)}/${encodeURIComponent(props.media.id)}`;
+		anchor.download = props.media.fileName;
+		anchor.click();
+	};
+	const handleDelete = async () => {
+		if (isDeleting()) return;
+		setIsDeleting(true);
+		try {
+			await deleteMedia(props.media.mediaSourceId, props.media.id);
+			setIsDeleteDialogOpen(false);
+			toast.success("Media deleted");
+			await navigate({
+				params: { mediaSourceId: props.media.mediaSourceId },
+				replace: true,
+				to: "/v2/sources/$mediaSourceId",
+			});
+		} catch (error) {
+			toast.error(`Failed to delete media: ${getErrorMessage(error)}`);
+		} finally {
+			setIsDeleting(false);
+		}
+	};
 	const ccipActionLabel = () => {
 		if (ccipStatus() === "ready" || ccipStatus() === "stale") {
 			return "Re-extract CCIP vector";
@@ -202,7 +243,11 @@ export function V2MediaActions(props: MediaActionsProps) {
 					<ScanSearch aria-hidden="true" size={15} />
 					Find similar
 				</Button>
-				<Popover placement="bottom-end">
+				<Popover
+					onOpenChange={setMoreActionsOpen}
+					open={moreActionsOpen()}
+					placement="bottom-end"
+				>
 					<PopoverTrigger class="flex h-10 min-w-32 flex-1 items-center justify-center gap-2 rounded-md border border-input bg-white px-3 font-medium text-xs outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-[var(--v2-focus)] md:h-9 md:flex-none">
 						More actions
 						<ChevronDown aria-hidden="true" size={14} />
@@ -242,6 +287,25 @@ export function V2MediaActions(props: MediaActionsProps) {
 						>
 							CCIP status: {ccipStatus()}
 						</p>
+						<div class="my-1 border-[var(--v2-border)] border-t" />
+						<Button
+							class="h-9 w-full justify-start px-2"
+							onClick={handleDownload}
+							size="sm"
+							variant="ghost"
+						>
+							<Download aria-hidden="true" size={14} />
+							Download original
+						</Button>
+						<Button
+							class="h-9 w-full justify-start px-2 text-destructive hover:bg-destructive/10 hover:text-destructive"
+							onClick={() => setIsDeleteDialogOpen(true)}
+							size="sm"
+							variant="ghost"
+						>
+							<Trash2 aria-hidden="true" size={14} />
+							Delete media…
+						</Button>
 					</PopoverContent>
 				</Popover>
 			</div>
@@ -264,6 +328,32 @@ export function V2MediaActions(props: MediaActionsProps) {
 				media={props.media}
 				onClose={() => setIsCharacterCropModalOpen(false)}
 			/>
+			<AlertDialog
+				onOpenChange={setIsDeleteDialogOpen}
+				open={isDeleteDialogOpen()}
+			>
+				<AlertDialogContent>
+					<AlertDialogHeader>
+						<AlertDialogTitle>Delete this media?</AlertDialogTitle>
+						<AlertDialogDescription>
+							{props.media.fileName} will be permanently removed from its
+							source. This action cannot be undone.
+						</AlertDialogDescription>
+					</AlertDialogHeader>
+					<AlertDialogFooter>
+						<AlertDialogCancel disabled={isDeleting()}>
+							Cancel
+						</AlertDialogCancel>
+						<Button
+							disabled={isDeleting()}
+							onClick={() => void handleDelete()}
+							variant="destructive"
+						>
+							{isDeleting() ? "Deleting…" : "Delete"}
+						</Button>
+					</AlertDialogFooter>
+				</AlertDialogContent>
+			</AlertDialog>
 		</>
 	);
 }

apps/server/src/components/media/v2-media-grid-item.tsx

@@ -3,7 +3,7 @@ import {
 	type MediaGridLinkProps,
 	V2MediaGridItem as SharedV2MediaGridItem,
 } from "@solid-imager/ui/v2-media-grid-item";
-import { Link, useLocation } from "@tanstack/solid-router";
+import { Link } from "@tanstack/solid-router";
 import { Show } from "solid-js";
 import type { ServerMediaGridItemProps } from "./legacy-media-grid-item";
 import { ThumbnailImage } from "./thumbnail-image";
@@ -13,35 +13,82 @@ export type V2ServerMediaGridItemProps = Omit<
 	"imageLoadPolicy"
 > & {
 	imageLoadPolicy?: MediaGridImageLoadPolicy;
+	onOpenMediaDetail?: () => void;
 };
 
 export function V2MediaGridItem(props: V2ServerMediaGridItemProps) {
-	const location = useLocation();
+	const isPlainPrimaryClick = (event: MouseEvent) =>
+		event.button === 0 &&
+		!event.metaKey &&
+		!event.ctrlKey &&
+		!event.shiftKey &&
+		!event.altKey;
+	const hasFinePointer = () => window.matchMedia("(pointer: fine)").matches;
+	const isModifiedSelectionClick = (event: MouseEvent) =>
+		event.button === 0 &&
+		!event.altKey &&
+		(event.metaKey || event.ctrlKey || event.shiftKey);
+
 	const detailLink = (linkProps: MediaGridLinkProps) => (
 		<Link
+			aria-current={linkProps["aria-current"]}
+			aria-pressed={linkProps["aria-pressed"]}
 			class={linkProps.class}
 			data-media-id={linkProps["data-media-id"]}
 			onClick={(event: MouseEvent) => {
 				if (
-					props.onPreviewSelect &&
-					window.matchMedia("(min-width: 1536px)").matches
+					props.onSelectGesture &&
+					hasFinePointer() &&
+					isModifiedSelectionClick(event)
 				) {
+					event.preventDefault();
+					props.onSelectGesture(event);
+					return;
+				}
+				if (!isPlainPrimaryClick(event)) return;
+
+				if (props.onPreviewSelect && hasFinePointer()) {
 					event.preventDefault();
 					props.onPreviewSelect();
 					return;
 				}
+
+				props.onPrepareMediaDetail?.();
+			}}
+			onContextMenu={linkProps.onContextMenu}
+			onDblClick={(event: MouseEvent) => {
 				if (
-					event.button === 0 &&
+					!isPlainPrimaryClick(event) ||
+					!hasFinePointer() ||
+					!props.onOpenMediaDetail
+				) {
+					return;
+				}
+
+				event.preventDefault();
+				props.onPrepareMediaDetail?.();
+				props.onOpenMediaDetail();
+			}}
+			onKeyDown={(event: KeyboardEvent) => {
+				if (
+					event.key === "Enter" &&
 					!event.metaKey &&
 					!event.ctrlKey &&
 					!event.shiftKey &&
-					!event.altKey
+					!event.altKey &&
+					props.onOpenMediaDetail
 				) {
+					event.preventDefault();
 					props.onPrepareMediaDetail?.();
-					sessionStorage.setItem("v2:media-return", location().href);
+					props.onOpenMediaDetail();
+					return;
+				}
+
+				if (event.key === " " && props.onPreviewSelect) {
+					event.preventDefault();
+					props.onPreviewSelect();
 				}
 			}}
-			onContextMenu={linkProps.onContextMenu}
 			params={{
 				mediaId: props.media.id,
 				mediaSourceId: props.media.mediaSourceId,
@@ -55,6 +102,7 @@ export function V2MediaGridItem(props: V2ServerMediaGridItemProps) {
 	return (
 		<SharedV2MediaGridItem
 			isBulkSelectMode={props.isBulkSelectMode}
+			isPreviewSelected={props.isPreviewSelected}
 			isSelected={props.isSelected}
 			imageLoadPolicy={props.imageLoadPolicy}
 			linkComponent={(linkProps) => (
@@ -65,6 +113,10 @@ export function V2MediaGridItem(props: V2ServerMediaGridItemProps) {
 						data-media-id={linkProps["data-media-id"]}
 						onClick={(event) => {
 							event.preventDefault();
+							if (props.onSelectGesture && isModifiedSelectionClick(event)) {
+								props.onSelectGesture(event);
+								return;
+							}
 							props.onToggleSelect?.();
 						}}
 						onContextMenu={linkProps.onContextMenu}