feat: manual albums + gallery multi-select with bulk actions
Albums (manual collections): - New albums/album_images tables with FK cascades; DB functions and Tauri commands for create/rename/delete/delete-many/reorder/list, add/remove images, and paginated get_album_images. - Distinct sidebar "ALBUMS" section with cover thumbnails, create/rename/ delete, and a Manage multi-select mode for bulk album deletion. - Album view reuses the gallery grid (activeView "album" + selectedAlbumId); spans folders; add from the bulk bar or the lightbox, remove from within. Gallery multi-select + bulk actions: - gallerySelectedIds selection model with a top-left corner checkbox that reveals on corner hover; click-to-toggle in selection mode, double-click to open. - Floating BulkActionBar: tag (inline autocomplete popover), rating, favorite, add-to-album, and a delete with an explicit "from disk" confirmation. Batch commands bulk_update_details/bulk_add_tags/ bulk_remove_tag. Also: - Duplicate Finder delete now requires confirmation with clear "from disk" wording (was single-click fire-and-forget). - CPU/CUDA build-variant badge in Settings (get_build_variant). - Rating/favorite no longer re-sorts derived collections (similar/region/ semantic/tag/album results); single and bulk paths replace in place there. - Album-aware indexed-images/media-updated handlers so thumbnails paint and newly-indexed files don't leak into an album view. - CHANGELOG updated.
This commit is contained in:
@@ -0,0 +1,269 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useGalleryStore } from "../store";
|
||||
import { BulkTagPopover } from "./bulk/BulkTagPopover";
|
||||
|
||||
type Panel = "tag" | "rating" | "album" | "delete" | null;
|
||||
|
||||
export function BulkActionBar() {
|
||||
const selectedCount = useGalleryStore((state) => state.gallerySelectedIds.size);
|
||||
const selectedIds = useGalleryStore((state) => state.gallerySelectedIds);
|
||||
const clearGallerySelection = useGalleryStore((state) => state.clearGallerySelection);
|
||||
const selectAllGallery = useGalleryStore((state) => state.selectAllGallery);
|
||||
const loadedCount = useGalleryStore((state) => state.loadedCount);
|
||||
const totalImages = useGalleryStore((state) => state.totalImages);
|
||||
const bulkSetFavorite = useGalleryStore((state) => state.bulkSetFavorite);
|
||||
const bulkSetRating = useGalleryStore((state) => state.bulkSetRating);
|
||||
const bulkDeleteSelected = useGalleryStore((state) => state.bulkDeleteSelected);
|
||||
const activeView = useGalleryStore((state) => state.activeView);
|
||||
const selectedAlbumId = useGalleryStore((state) => state.selectedAlbumId);
|
||||
const albums = useGalleryStore((state) => state.albums);
|
||||
const addToAlbum = useGalleryStore((state) => state.addToAlbum);
|
||||
const removeFromAlbum = useGalleryStore((state) => state.removeFromAlbum);
|
||||
const createAlbum = useGalleryStore((state) => state.createAlbum);
|
||||
|
||||
const [panel, setPanel] = useState<Panel>(null);
|
||||
const [deleting, setDeleting] = useState(false);
|
||||
const [newAlbumName, setNewAlbumName] = useState("");
|
||||
const barRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Close any open popover when clicking outside the bar.
|
||||
useEffect(() => {
|
||||
const onPointerDown = (event: PointerEvent) => {
|
||||
if (barRef.current?.contains(event.target as Node)) return;
|
||||
setPanel(null);
|
||||
};
|
||||
window.addEventListener("pointerdown", onPointerDown);
|
||||
return () => window.removeEventListener("pointerdown", onPointerDown);
|
||||
}, []);
|
||||
|
||||
// Reset transient UI whenever the selection empties.
|
||||
useEffect(() => {
|
||||
if (selectedCount === 0) {
|
||||
setPanel(null);
|
||||
setNewAlbumName("");
|
||||
}
|
||||
}, [selectedCount]);
|
||||
|
||||
if (selectedCount === 0) return null;
|
||||
|
||||
const ids = Array.from(selectedIds);
|
||||
const inAlbumView = activeView === "album" && selectedAlbumId !== null;
|
||||
const togglePanel = (next: Exclude<Panel, null>) => setPanel((current) => (current === next ? null : next));
|
||||
|
||||
const handleDelete = async () => {
|
||||
setDeleting(true);
|
||||
try {
|
||||
await bulkDeleteSelected();
|
||||
} finally {
|
||||
setDeleting(false);
|
||||
setPanel(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePickAlbum = async (albumId: number) => {
|
||||
await addToAlbum(albumId, ids);
|
||||
setPanel(null);
|
||||
};
|
||||
|
||||
const handleCreateAlbum = async () => {
|
||||
const name = newAlbumName.trim();
|
||||
if (!name) return;
|
||||
const album = await createAlbum(name);
|
||||
await addToAlbum(album.id, ids);
|
||||
setNewAlbumName("");
|
||||
setPanel(null);
|
||||
};
|
||||
|
||||
const btn = "rounded-md px-2.5 py-1.5 text-xs font-medium transition-colors";
|
||||
const btnIdle = `${btn} text-gray-300 hover:bg-white/10 hover:text-white`;
|
||||
const btnActive = `${btn} bg-white/10 text-white`;
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={barRef}
|
||||
className="pointer-events-auto absolute bottom-6 left-1/2 z-30 flex -translate-x-1/2 items-center gap-1 rounded-xl border border-white/10 bg-gray-950/95 px-2 py-1.5 shadow-2xl shadow-black/50 backdrop-blur"
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
>
|
||||
<div className="flex items-center gap-2 px-1.5">
|
||||
<span className="text-xs font-medium text-white">{selectedCount} selected</span>
|
||||
{loadedCount < totalImages || loadedCount > selectedCount ? (
|
||||
<button
|
||||
className="text-[11px] text-gray-500 transition-colors hover:text-gray-300"
|
||||
onClick={selectAllGallery}
|
||||
title={loadedCount < totalImages ? "Selects loaded items only" : "Select all loaded"}
|
||||
>
|
||||
Select all{loadedCount < totalImages ? " loaded" : ""}
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="h-5 w-px bg-white/10" />
|
||||
|
||||
<div className="relative">
|
||||
<button className={panel === "tag" ? btnActive : btnIdle} onClick={() => togglePanel("tag")}>
|
||||
Tag
|
||||
</button>
|
||||
{panel === "tag" ? <BulkTagPopover onClose={() => setPanel(null)} /> : null}
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<button className={panel === "rating" ? btnActive : btnIdle} onClick={() => togglePanel("rating")}>
|
||||
Rating
|
||||
</button>
|
||||
{panel === "rating" ? (
|
||||
<div
|
||||
data-bulk-popover
|
||||
className="absolute bottom-full left-1/2 mb-2 flex -translate-x-1/2 items-center gap-1 rounded-xl border border-white/10 bg-gray-950/98 p-2 shadow-2xl backdrop-blur"
|
||||
>
|
||||
{Array.from({ length: 5 }, (_, index) => {
|
||||
const rating = index + 1;
|
||||
return (
|
||||
<button
|
||||
key={rating}
|
||||
className="rounded-md p-1 text-white/25 transition-colors hover:bg-white/5 hover:text-amber-300"
|
||||
onClick={async () => {
|
||||
await bulkSetRating(rating);
|
||||
setPanel(null);
|
||||
}}
|
||||
title={`Set ${rating} star${rating === 1 ? "" : "s"}`}
|
||||
>
|
||||
<svg className="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81H7.03a1 1 0 00.951-.69l1.07-3.292z" />
|
||||
</svg>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
<button
|
||||
className="ml-1 rounded-md border border-white/10 px-2 py-1 text-[11px] text-gray-400 transition-colors hover:bg-white/5 hover:text-white"
|
||||
onClick={async () => {
|
||||
await bulkSetRating(0);
|
||||
setPanel(null);
|
||||
}}
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<button className={btnIdle} onClick={() => void bulkSetFavorite(true)} title="Mark as favorite">
|
||||
Favorite
|
||||
</button>
|
||||
|
||||
<div className="relative">
|
||||
<button className={panel === "album" ? btnActive : btnIdle} onClick={() => togglePanel("album")}>
|
||||
Add to album
|
||||
</button>
|
||||
{panel === "album" ? (
|
||||
<div
|
||||
data-bulk-popover
|
||||
className="absolute bottom-full left-1/2 mb-2 w-60 -translate-x-1/2 rounded-xl border border-white/10 bg-gray-950/98 p-2 shadow-2xl backdrop-blur"
|
||||
>
|
||||
<div className="max-h-48 overflow-y-auto">
|
||||
{albums.length === 0 ? (
|
||||
<p className="px-2 py-2 text-[11px] text-gray-600">No albums yet — create one below.</p>
|
||||
) : (
|
||||
albums.map((album) => (
|
||||
<button
|
||||
key={album.id}
|
||||
className="flex w-full items-center justify-between gap-2 rounded-md px-2 py-1.5 text-left text-xs text-gray-300 transition-colors hover:bg-white/5 hover:text-white"
|
||||
onClick={() => void handlePickAlbum(album.id)}
|
||||
>
|
||||
<span className="truncate">{album.name}</span>
|
||||
<span className="shrink-0 text-[10px] text-gray-600">{album.image_count}</span>
|
||||
</button>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
<form
|
||||
className="mt-1 flex gap-1 border-t border-white/[0.06] pt-2"
|
||||
onSubmit={(event) => {
|
||||
event.preventDefault();
|
||||
void handleCreateAlbum();
|
||||
}}
|
||||
>
|
||||
<input
|
||||
className="min-w-0 flex-1 rounded-md border border-white/10 bg-white/5 px-2 py-1 text-xs text-white placeholder-gray-600 focus:border-white/20 focus:outline-none"
|
||||
placeholder="New album…"
|
||||
value={newAlbumName}
|
||||
onChange={(event) => setNewAlbumName(event.target.value)}
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="rounded-md border border-white/10 bg-white/5 px-2 py-1 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white disabled:opacity-50"
|
||||
disabled={!newAlbumName.trim()}
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{inAlbumView ? (
|
||||
<button
|
||||
className={`${btn} text-amber-300/90 hover:bg-amber-500/10 hover:text-amber-200`}
|
||||
onClick={() => void removeFromAlbum(selectedAlbumId, ids)}
|
||||
>
|
||||
Remove from album
|
||||
</button>
|
||||
) : null}
|
||||
|
||||
<div className="h-5 w-px bg-white/10" />
|
||||
|
||||
<div className="relative">
|
||||
<button
|
||||
className={panel === "delete" ? `${btn} bg-red-500/15 text-red-300` : `${btn} text-gray-300 hover:bg-red-500/10 hover:text-red-300`}
|
||||
onClick={() => togglePanel("delete")}
|
||||
disabled={deleting}
|
||||
title="Delete files from disk"
|
||||
>
|
||||
{deleting ? "Deleting…" : "Delete"}
|
||||
</button>
|
||||
{panel === "delete" ? (
|
||||
<div
|
||||
data-bulk-popover
|
||||
className="absolute bottom-full left-1/2 mb-2 w-64 -translate-x-1/2 rounded-xl border border-red-500/30 bg-gray-950/98 p-3 shadow-2xl backdrop-blur"
|
||||
>
|
||||
<div className="mb-1 flex items-center gap-1.5 text-red-300">
|
||||
<svg className="h-3.5 w-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
|
||||
d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" />
|
||||
</svg>
|
||||
<p className="text-xs font-semibold">Delete from disk</p>
|
||||
</div>
|
||||
<p className="mb-2.5 text-[11px] leading-relaxed text-gray-400">
|
||||
Permanently delete {selectedCount} file{selectedCount === 1 ? "" : "s"} from your computer.
|
||||
This removes the actual file{selectedCount === 1 ? "" : "s"} from disk and cannot be undone.
|
||||
</p>
|
||||
<div className="flex justify-end gap-1.5">
|
||||
<button
|
||||
className="rounded-md border border-white/10 bg-white/5 px-2.5 py-1 text-[11px] text-gray-300 transition-colors hover:bg-white/10 hover:text-white"
|
||||
onClick={() => setPanel(null)}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
className="rounded-md bg-red-500/20 px-2.5 py-1 text-[11px] font-medium text-red-300 transition-colors hover:bg-red-500/30 hover:text-red-200 disabled:opacity-50"
|
||||
onClick={() => void handleDelete()}
|
||||
disabled={deleting}
|
||||
>
|
||||
{deleting ? "Deleting…" : `Delete ${selectedCount} from disk`}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="rounded-md p-1.5 text-gray-500 transition-colors hover:bg-white/[0.06] hover:text-white"
|
||||
onClick={clearGallerySelection}
|
||||
title="Clear selection"
|
||||
>
|
||||
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -129,6 +129,7 @@ export function DuplicateFinder() {
|
||||
const deleteSelectedDuplicates = useGalleryStore((state) => state.deleteSelectedDuplicates);
|
||||
|
||||
const [deleting, setDeleting] = useState(false);
|
||||
const [confirmingDelete, setConfirmingDelete] = useState(false);
|
||||
const [deleteResult, setDeleteResult] = useState<string | null>(null);
|
||||
|
||||
// Virtualize the group list so a large result set (e.g. thousands of pairs)
|
||||
@@ -153,6 +154,7 @@ export function DuplicateFinder() {
|
||||
|
||||
const handleDelete = async () => {
|
||||
setDeleting(true);
|
||||
setConfirmingDelete(false);
|
||||
setDeleteResult(null);
|
||||
try {
|
||||
const deleted = await deleteSelectedDuplicates();
|
||||
@@ -222,13 +224,48 @@ export function DuplicateFinder() {
|
||||
>
|
||||
Deselect all
|
||||
</button>
|
||||
<button
|
||||
className="rounded-lg border border-red-400/25 bg-red-500/10 px-3 py-1.5 text-xs text-red-300 transition-colors hover:bg-red-500/15 disabled:cursor-not-allowed disabled:opacity-40"
|
||||
onClick={handleDelete}
|
||||
disabled={deleting}
|
||||
>
|
||||
{deleting ? "Deleting…" : `Delete ${selectedCount} file${selectedCount === 1 ? "" : "s"}`}
|
||||
</button>
|
||||
<div className="relative">
|
||||
<button
|
||||
className="rounded-lg border border-red-400/25 bg-red-500/10 px-3 py-1.5 text-xs text-red-300 transition-colors hover:bg-red-500/15 disabled:cursor-not-allowed disabled:opacity-40"
|
||||
onClick={() => setConfirmingDelete((v) => !v)}
|
||||
disabled={deleting}
|
||||
>
|
||||
{deleting ? "Deleting…" : `Delete ${selectedCount} file${selectedCount === 1 ? "" : "s"}`}
|
||||
</button>
|
||||
{confirmingDelete && !deleting ? (
|
||||
<>
|
||||
{/* Click-away backdrop */}
|
||||
<div className="fixed inset-0 z-40" onClick={() => setConfirmingDelete(false)} />
|
||||
<div className="absolute right-0 top-full z-50 mt-2 w-72 rounded-xl border border-red-500/30 bg-gray-950/98 p-3 text-left shadow-2xl backdrop-blur">
|
||||
<div className="mb-1 flex items-center gap-1.5 text-red-300">
|
||||
<svg className="h-3.5 w-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
|
||||
d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" />
|
||||
</svg>
|
||||
<p className="text-xs font-semibold">Delete from disk</p>
|
||||
</div>
|
||||
<p className="mb-2.5 text-[11px] leading-relaxed text-gray-400">
|
||||
Permanently delete {selectedCount} file{selectedCount === 1 ? "" : "s"} from your computer.
|
||||
This removes the actual file{selectedCount === 1 ? "" : "s"} from disk and cannot be undone.
|
||||
</p>
|
||||
<div className="flex justify-end gap-1.5">
|
||||
<button
|
||||
className="rounded-md border border-white/10 bg-white/5 px-2.5 py-1 text-[11px] text-gray-300 transition-colors hover:bg-white/10 hover:text-white"
|
||||
onClick={() => setConfirmingDelete(false)}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
className="rounded-md bg-red-500/20 px-2.5 py-1 text-[11px] font-medium text-red-300 transition-colors hover:bg-red-500/30 hover:text-red-200"
|
||||
onClick={handleDelete}
|
||||
>
|
||||
Delete {selectedCount} from disk
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
</>
|
||||
) : null}
|
||||
<button
|
||||
|
||||
+60
-18
@@ -2,6 +2,7 @@ import { useEffect, useLayoutEffect, useRef, useCallback, useMemo, useState } fr
|
||||
import { useVirtualizer } from "@tanstack/react-virtual";
|
||||
import { convertFileSrc } from "@tauri-apps/api/core";
|
||||
import { ImageRecord, parseSearchValue, tileSizeForZoom, useGalleryStore } from "../store";
|
||||
import { BulkActionBar } from "./BulkActionBar";
|
||||
|
||||
const GAP = 6;
|
||||
|
||||
@@ -118,18 +119,57 @@ export function ImageTile({
|
||||
const [errored, setErrored] = useState(false);
|
||||
const loadSimilarImages = useGalleryStore((state) => state.loadSimilarImages);
|
||||
const similarScope = useGalleryStore((state) => state.similarScope);
|
||||
const selected = useGalleryStore((state) => state.gallerySelectedIds.has(image.id));
|
||||
const selectionActive = useGalleryStore((state) => state.gallerySelectedIds.size > 0);
|
||||
const toggleGallerySelected = useGalleryStore((state) => state.toggleGallerySelected);
|
||||
const canFindSimilar = image.embedding_status === "ready";
|
||||
|
||||
const src = image.thumbnail_path ? convertFileSrc(image.thumbnail_path) : null;
|
||||
|
||||
return (
|
||||
<button
|
||||
className="media-dark-surface group relative overflow-hidden rounded-xl bg-white/[0.04] text-left focus:outline-none"
|
||||
className={`media-dark-surface group relative overflow-hidden rounded-xl bg-white/[0.04] text-left focus:outline-none transition-shadow ${
|
||||
selected ? "ring-2 ring-inset ring-blue-400/80" : ""
|
||||
}`}
|
||||
style={{ width: "100%", aspectRatio: "1 / 1" }}
|
||||
onClick={onClick}
|
||||
onClick={() => {
|
||||
// In selection mode a plain click toggles; otherwise it opens.
|
||||
if (selectionActive) toggleGallerySelected(image.id);
|
||||
else onClick();
|
||||
}}
|
||||
onDoubleClick={(event) => {
|
||||
// Double-click always opens, even in selection mode.
|
||||
event.stopPropagation();
|
||||
onClick();
|
||||
}}
|
||||
onContextMenu={onContextMenu}
|
||||
title={image.filename}
|
||||
>
|
||||
{/* Selection corner — a top-left zone that reveals the checkbox only when
|
||||
hovered (not the whole tile) and toggles selection on click. The
|
||||
checkbox stays visible once the item is selected. */}
|
||||
<div
|
||||
role="checkbox"
|
||||
aria-checked={selected}
|
||||
aria-label={selected ? "Deselect" : "Select"}
|
||||
className="group/cb absolute top-0 left-0 z-20 h-11 w-11 cursor-pointer"
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
toggleGallerySelected(image.id);
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={`absolute top-2 left-2 flex h-5 w-5 items-center justify-center rounded-full border transition-all duration-150 ${
|
||||
selected
|
||||
? "border-blue-400 bg-blue-500 text-white opacity-100"
|
||||
: "border-white/70 bg-black/40 text-transparent opacity-0 backdrop-blur-sm group-hover/cb:opacity-100"
|
||||
}`}
|
||||
>
|
||||
<svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
{/* Image / placeholder */}
|
||||
{src && !errored ? (
|
||||
<>
|
||||
@@ -173,6 +213,17 @@ export function ImageTile({
|
||||
|
||||
{/* Persistent badges — only shown when meaningful */}
|
||||
<div className="absolute top-2 right-2 flex flex-col items-end gap-1 pointer-events-none">
|
||||
{image.embedding_status === "failed" && (
|
||||
<div
|
||||
className="flex items-center gap-1 rounded-md bg-black/60 px-1.5 py-0.5 text-[10px] font-medium text-amber-400 backdrop-blur-sm"
|
||||
title={image.embedding_error ?? "Embedding failed"}
|
||||
>
|
||||
<svg className="h-2.5 w-2.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5}
|
||||
d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
{image.favorite && (
|
||||
<div className="rounded-full bg-black/50 p-1 text-rose-400 backdrop-blur-sm">
|
||||
<svg className="h-2.5 w-2.5" fill="currentColor" viewBox="0 0 20 20">
|
||||
@@ -196,21 +247,6 @@ export function ImageTile({
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Embedding failed badge — top-left */}
|
||||
{image.embedding_status === "failed" && (
|
||||
<div
|
||||
className="absolute top-2 left-2 pointer-events-none"
|
||||
title={image.embedding_error ?? "Embedding failed"}
|
||||
>
|
||||
<div className="flex items-center gap-1 rounded-md bg-black/60 px-1.5 py-0.5 text-[10px] font-medium text-amber-400 backdrop-blur-sm">
|
||||
<svg className="h-2.5 w-2.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5}
|
||||
d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Hover overlay — slides up from bottom */}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/85 via-black/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none" />
|
||||
|
||||
@@ -338,7 +374,8 @@ export function Gallery() {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div ref={parentRef} className="relative flex-1 overflow-y-auto overflow-x-hidden min-h-0 bg-gray-950">
|
||||
<div className="relative flex-1 min-h-0">
|
||||
<div ref={parentRef} className="absolute inset-0 overflow-y-auto overflow-x-hidden bg-gray-950">
|
||||
{images.length === 0 && loadingImages ? (
|
||||
<div className="flex flex-1 flex-col items-center justify-center gap-4 text-center px-8 absolute inset-0">
|
||||
<div className="rounded-2xl border border-white/[0.06] bg-white/[0.02] p-8 min-w-72">
|
||||
@@ -448,5 +485,10 @@ export function Gallery() {
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{/* Pinned to the bottom of the gallery viewport — outside the scroll
|
||||
container so it stays put while the grid scrolls. */}
|
||||
<BulkActionBar />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -153,6 +153,9 @@ export function Lightbox() {
|
||||
const removeTag = useGalleryStore((state) => state.removeTag);
|
||||
const taggerModelStatus = useGalleryStore((state) => state.taggerModelStatus);
|
||||
const queueTaggingForImage = useGalleryStore((state) => state.queueTaggingForImage);
|
||||
const albums = useGalleryStore((state) => state.albums);
|
||||
const addToAlbum = useGalleryStore((state) => state.addToAlbum);
|
||||
const createAlbum = useGalleryStore((state) => state.createAlbum);
|
||||
|
||||
// Tracks the image id that is currently displayed, used to discard async
|
||||
// tag mutations that resolve after the user has navigated to another image.
|
||||
@@ -170,6 +173,9 @@ export function Lightbox() {
|
||||
const [taggingQueued, setTaggingQueued] = useState(false);
|
||||
|
||||
// Region selection state
|
||||
const [albumMenuOpen, setAlbumMenuOpen] = useState(false);
|
||||
const [albumAddedTo, setAlbumAddedTo] = useState<number | null>(null);
|
||||
const [newAlbumName, setNewAlbumName] = useState("");
|
||||
const [regionSelectMode, setRegionSelectMode] = useState(false);
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const [dragRect, setDragRect] = useState<DragRect | null>(null);
|
||||
@@ -780,6 +786,72 @@ export function Lightbox() {
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<div className="mb-2 flex items-center justify-between">
|
||||
<p className="text-xs uppercase tracking-wider text-gray-500">Albums</p>
|
||||
<button
|
||||
className="rounded-md border border-white/10 bg-white/5 px-2 py-0.5 text-[10px] text-gray-400 transition-colors hover:bg-white/10 hover:text-white"
|
||||
onClick={() => { setAlbumMenuOpen((v) => !v); setAlbumAddedTo(null); }}
|
||||
>
|
||||
Add to album
|
||||
</button>
|
||||
</div>
|
||||
{albumMenuOpen ? (
|
||||
<div className="rounded-lg border border-white/10 bg-white/[0.03] p-1.5">
|
||||
<div className="max-h-40 overflow-y-auto">
|
||||
{albums.length === 0 ? (
|
||||
<p className="px-2 py-1.5 text-[11px] text-gray-600">No albums yet — create one below.</p>
|
||||
) : (
|
||||
albums.map((album) => (
|
||||
<button
|
||||
key={album.id}
|
||||
className="flex w-full items-center justify-between gap-2 rounded-md px-2 py-1 text-left text-xs text-gray-300 transition-colors hover:bg-white/5 hover:text-white"
|
||||
onClick={() => {
|
||||
void addToAlbum(album.id, [selectedImage.id]);
|
||||
setAlbumAddedTo(album.id);
|
||||
}}
|
||||
>
|
||||
<span className="truncate">{album.name}</span>
|
||||
{albumAddedTo === album.id ? (
|
||||
<span className="shrink-0 text-[10px] text-emerald-400">Added</span>
|
||||
) : (
|
||||
<span className="shrink-0 text-[10px] text-gray-600">{album.image_count}</span>
|
||||
)}
|
||||
</button>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
<form
|
||||
className="mt-1 flex gap-1 border-t border-white/[0.06] pt-1.5"
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
const name = newAlbumName.trim();
|
||||
if (!name) return;
|
||||
void createAlbum(name).then((album) => {
|
||||
void addToAlbum(album.id, [selectedImage.id]);
|
||||
setAlbumAddedTo(album.id);
|
||||
});
|
||||
setNewAlbumName("");
|
||||
}}
|
||||
>
|
||||
<input
|
||||
className="min-w-0 flex-1 rounded-md border border-white/10 bg-white/5 px-2 py-1 text-xs text-white placeholder-gray-600 focus:border-white/20 focus:outline-none"
|
||||
placeholder="New album…"
|
||||
value={newAlbumName}
|
||||
onChange={(e) => setNewAlbumName(e.target.value)}
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="rounded-md border border-white/10 bg-white/5 px-2 py-1 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white disabled:opacity-50"
|
||||
disabled={!newAlbumName.trim()}
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="mb-1 flex items-center justify-between">
|
||||
<p className="text-xs uppercase tracking-wider text-gray-500">Path</p>
|
||||
|
||||
@@ -191,6 +191,7 @@ export function SettingsModal() {
|
||||
const getOrphanedThumbnailsInfo = useGalleryStore((state) => state.getOrphanedThumbnailsInfo);
|
||||
const cleanupOrphanedThumbnails = useGalleryStore((state) => state.cleanupOrphanedThumbnails);
|
||||
const appVersion = useGalleryStore((state) => state.appVersion);
|
||||
const buildVariant = useGalleryStore((state) => state.buildVariant);
|
||||
const updateStatus = useGalleryStore((state) => state.updateStatus);
|
||||
const updateVersion = useGalleryStore((state) => state.updateVersion);
|
||||
const updateProgress = useGalleryStore((state) => state.updateProgress);
|
||||
@@ -662,6 +663,11 @@ export function SettingsModal() {
|
||||
label={
|
||||
<span className="inline-flex items-center gap-2.5">
|
||||
<span>Phokus {appVersion ? `v${appVersion}` : "—"}</span>
|
||||
{buildVariant ? (
|
||||
<StatusPill tone={buildVariant === "cuda" ? "ready" : "muted"}>
|
||||
{buildVariant === "cuda" ? "CUDA" : "CPU"}
|
||||
</StatusPill>
|
||||
) : null}
|
||||
{updateStatus === "available" || updateStatus === "downloading" || updateStatus === "installing" ? (
|
||||
<StatusPill tone="busy">v{updateVersion} available</StatusPill>
|
||||
) : updateStatus === "upToDate" ? (
|
||||
|
||||
+387
-1
@@ -1,7 +1,8 @@
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { Reorder, useDragControls } from "framer-motion";
|
||||
import { open } from "@tauri-apps/plugin-dialog";
|
||||
import { useGalleryStore, Folder, IndexProgress } from "../store";
|
||||
import { convertFileSrc } from "@tauri-apps/api/core";
|
||||
import { useGalleryStore, Folder, Album, IndexProgress } from "../store";
|
||||
import { ThemedDropdown } from "./ThemedDropdown";
|
||||
|
||||
interface ContextMenuState {
|
||||
@@ -339,6 +340,207 @@ function FolderItem({
|
||||
);
|
||||
}
|
||||
|
||||
function AlbumContextMenu({
|
||||
x,
|
||||
y,
|
||||
onClose,
|
||||
onRename,
|
||||
onDelete,
|
||||
}: {
|
||||
x: number;
|
||||
y: number;
|
||||
onClose: () => void;
|
||||
onRename: () => void;
|
||||
onDelete: () => void;
|
||||
}) {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
useEffect(() => {
|
||||
const handleDown = (e: MouseEvent) => {
|
||||
if (ref.current && !ref.current.contains(e.target as Node)) onClose();
|
||||
};
|
||||
const handleKey = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") onClose();
|
||||
};
|
||||
document.addEventListener("mousedown", handleDown);
|
||||
document.addEventListener("keydown", handleKey);
|
||||
return () => {
|
||||
document.removeEventListener("mousedown", handleDown);
|
||||
document.removeEventListener("keydown", handleKey);
|
||||
};
|
||||
}, [onClose]);
|
||||
|
||||
const item = (label: string, onClick: () => void, danger = false) => (
|
||||
<button
|
||||
className={`w-full text-left px-3 py-1.5 text-[12px] rounded-md transition-colors ${
|
||||
danger
|
||||
? "text-red-400 hover:bg-red-500/15 hover:text-red-300"
|
||||
: "text-gray-300 hover:bg-white/8 hover:text-white"
|
||||
}`}
|
||||
onClick={() => {
|
||||
onClick();
|
||||
onClose();
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className="fixed z-50 min-w-[160px] py-1 px-1 rounded-lg bg-gray-900 border border-white/10 shadow-xl shadow-black/50"
|
||||
style={{ left: x, top: y }}
|
||||
>
|
||||
{item("Rename", onRename)}
|
||||
<div className="my-1 border-t border-white/[0.06]" />
|
||||
{item("Delete album", onDelete, true)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function AlbumItem({
|
||||
album,
|
||||
manageMode = false,
|
||||
selectedForManage = false,
|
||||
onToggleManage,
|
||||
}: {
|
||||
album: Album;
|
||||
manageMode?: boolean;
|
||||
selectedForManage?: boolean;
|
||||
onToggleManage?: () => void;
|
||||
}) {
|
||||
const viewAlbum = useGalleryStore((state) => state.viewAlbum);
|
||||
const renameAlbum = useGalleryStore((state) => state.renameAlbum);
|
||||
const deleteAlbum = useGalleryStore((state) => state.deleteAlbum);
|
||||
const activeView = useGalleryStore((state) => state.activeView);
|
||||
const selectedAlbumId = useGalleryStore((state) => state.selectedAlbumId);
|
||||
const selected = !manageMode && activeView === "album" && selectedAlbumId === album.id;
|
||||
|
||||
const [menu, setMenu] = useState<{ x: number; y: number } | null>(null);
|
||||
const [renaming, setRenaming] = useState(false);
|
||||
const [renameValue, setRenameValue] = useState(album.name);
|
||||
const [confirmingRemoval, setConfirmingRemoval] = useState(false);
|
||||
const renameInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (renaming) {
|
||||
setRenameValue(album.name);
|
||||
setTimeout(() => renameInputRef.current?.select(), 0);
|
||||
}
|
||||
}, [renaming, album.name]);
|
||||
|
||||
const commitRename = async () => {
|
||||
const trimmed = renameValue.trim();
|
||||
if (trimmed && trimmed !== album.name) {
|
||||
await renameAlbum(album.id, trimmed);
|
||||
}
|
||||
setRenaming(false);
|
||||
};
|
||||
|
||||
const cover = album.cover_thumbnail_path ? convertFileSrc(album.cover_thumbnail_path) : null;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`group relative flex items-center gap-2.5 px-2 py-1.5 rounded-lg cursor-pointer transition-all duration-150 ${
|
||||
selectedForManage
|
||||
? "bg-blue-500/10 text-white ring-1 ring-inset ring-blue-400/50"
|
||||
: selected
|
||||
? "bg-white/8 text-white"
|
||||
: "text-gray-500 hover:text-gray-200 hover:bg-white/5"
|
||||
}`}
|
||||
onClick={() => {
|
||||
if (manageMode) {
|
||||
onToggleManage?.();
|
||||
} else if (!renaming) {
|
||||
viewAlbum(album.id);
|
||||
}
|
||||
}}
|
||||
onContextMenu={(e) => {
|
||||
if (manageMode) return;
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setMenu({ x: Math.min(e.clientX, window.innerWidth - 180), y: Math.min(e.clientY, window.innerHeight - 120) });
|
||||
}}
|
||||
>
|
||||
{/* Manage-mode selection checkbox */}
|
||||
{manageMode ? (
|
||||
<div
|
||||
className={`flex h-4 w-4 shrink-0 items-center justify-center rounded border transition-colors ${
|
||||
selectedForManage ? "border-blue-400 bg-blue-500 text-white" : "border-white/30 text-transparent"
|
||||
}`}
|
||||
>
|
||||
<svg className="h-2.5 w-2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{/* Cover thumbnail — distinguishes albums from folder rows */}
|
||||
<div className="h-7 w-7 shrink-0 overflow-hidden rounded-md bg-white/[0.05] ring-1 ring-white/10">
|
||||
{cover ? (
|
||||
<img src={cover} alt="" className="h-full w-full object-cover" />
|
||||
) : (
|
||||
<div className="flex h-full w-full items-center justify-center text-white/20">
|
||||
<svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5}
|
||||
d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="min-w-0 flex-1">
|
||||
{renaming ? (
|
||||
<input
|
||||
ref={renameInputRef}
|
||||
className="w-full bg-white/10 text-white text-[13px] font-medium rounded px-1 py-0 outline-none ring-1 ring-blue-500/60 leading-tight"
|
||||
value={renameValue}
|
||||
onChange={(e) => setRenameValue(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") { e.preventDefault(); void commitRename(); }
|
||||
if (e.key === "Escape") setRenaming(false);
|
||||
}}
|
||||
onBlur={() => void commitRename()}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
/>
|
||||
) : (
|
||||
<div className={`truncate text-[13px] font-medium leading-tight ${selected ? "text-white" : ""}`}>
|
||||
{album.name}
|
||||
</div>
|
||||
)}
|
||||
<div className="text-[11px] text-gray-600 mt-0.5">{album.image_count.toLocaleString()}</div>
|
||||
</div>
|
||||
|
||||
{!renaming && confirmingRemoval ? (
|
||||
<div className="flex items-center gap-1 shrink-0" onClick={(e) => e.stopPropagation()}>
|
||||
<button
|
||||
className="px-1.5 py-0.5 text-[10px] rounded bg-red-500/20 text-red-400 hover:bg-red-500/30 hover:text-red-300 transition-colors"
|
||||
onClick={() => { void deleteAlbum(album.id); setConfirmingRemoval(false); }}
|
||||
>
|
||||
Confirm
|
||||
</button>
|
||||
<button
|
||||
className="px-1.5 py-0.5 text-[10px] rounded bg-white/5 text-gray-500 hover:bg-white/10 hover:text-gray-300 transition-colors"
|
||||
onClick={() => setConfirmingRemoval(false)}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{menu ? (
|
||||
<AlbumContextMenu
|
||||
x={menu.x}
|
||||
y={menu.y}
|
||||
onClose={() => setMenu(null)}
|
||||
onRename={() => setRenaming(true)}
|
||||
onDelete={() => setConfirmingRemoval(true)}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Sidebar() {
|
||||
const folders = useGalleryStore((state) => state.folders);
|
||||
const selectedFolderId = useGalleryStore((state) => state.selectedFolderId);
|
||||
@@ -348,6 +550,15 @@ export function Sidebar() {
|
||||
const activeView = useGalleryStore((state) => state.activeView);
|
||||
const setView = useGalleryStore((state) => state.setView);
|
||||
const reorderFolders = useGalleryStore((state) => state.reorderFolders);
|
||||
const albums = useGalleryStore((state) => state.albums);
|
||||
const createAlbum = useGalleryStore((state) => state.createAlbum);
|
||||
const deleteAlbums = useGalleryStore((state) => state.deleteAlbums);
|
||||
const [creatingAlbum, setCreatingAlbum] = useState(false);
|
||||
const [newAlbumName, setNewAlbumName] = useState("");
|
||||
const newAlbumInputRef = useRef<HTMLInputElement>(null);
|
||||
const [manageAlbums, setManageAlbums] = useState(false);
|
||||
const [manageSelectedIds, setManageSelectedIds] = useState<Set<number>>(new Set());
|
||||
const [confirmingAlbumDelete, setConfirmingAlbumDelete] = useState(false);
|
||||
const [librarySort, setLibrarySortState] = useState<LibrarySort>(() => {
|
||||
const saved = window.localStorage.getItem(LIBRARY_SORT_KEY);
|
||||
return saved === "za" || saved === "custom" ? saved : "az";
|
||||
@@ -463,6 +674,47 @@ export function Sidebar() {
|
||||
setFolderPickerOpen(true);
|
||||
};
|
||||
|
||||
const startCreatingAlbum = () => {
|
||||
setCreatingAlbum(true);
|
||||
setNewAlbumName("");
|
||||
setTimeout(() => newAlbumInputRef.current?.focus(), 0);
|
||||
};
|
||||
|
||||
const handleCreateAlbum = async () => {
|
||||
const name = newAlbumName.trim();
|
||||
if (!name) {
|
||||
setCreatingAlbum(false);
|
||||
return;
|
||||
}
|
||||
const album = await createAlbum(name);
|
||||
setNewAlbumName("");
|
||||
setCreatingAlbum(false);
|
||||
useGalleryStore.getState().viewAlbum(album.id);
|
||||
};
|
||||
|
||||
const exitManageAlbums = () => {
|
||||
setManageAlbums(false);
|
||||
setManageSelectedIds(new Set());
|
||||
setConfirmingAlbumDelete(false);
|
||||
};
|
||||
|
||||
const toggleManageSelected = (albumId: number) => {
|
||||
setManageSelectedIds((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(albumId)) next.delete(albumId);
|
||||
else next.add(albumId);
|
||||
return next;
|
||||
});
|
||||
setConfirmingAlbumDelete(false);
|
||||
};
|
||||
|
||||
const handleDeleteSelectedAlbums = async () => {
|
||||
const ids = Array.from(manageSelectedIds);
|
||||
if (ids.length === 0) return;
|
||||
await deleteAlbums(ids);
|
||||
exitManageAlbums();
|
||||
};
|
||||
|
||||
return (
|
||||
<aside className="w-60 shrink-0 flex flex-col bg-gray-950 border-r border-white/[0.06]">
|
||||
{/* Header */}
|
||||
@@ -601,6 +853,140 @@ export function Sidebar() {
|
||||
))
|
||||
)}
|
||||
</Reorder.Group>
|
||||
|
||||
{/* Albums — a visually distinct block, separated from Libraries by a
|
||||
heavier divider and given cover-thumbnail rows so the two never
|
||||
read as one list. */}
|
||||
<div className="shrink-0 border-t-2 border-white/[0.08] bg-white/[0.015]">
|
||||
<div className="flex items-center justify-between gap-2 px-5 pt-3 pb-1">
|
||||
<span className="text-[10px] font-semibold uppercase tracking-[0.15em] text-gray-600">
|
||||
{manageAlbums ? `${manageSelectedIds.size} selected` : "Albums"}
|
||||
</span>
|
||||
{manageAlbums ? (
|
||||
<button
|
||||
onClick={exitManageAlbums}
|
||||
className="rounded px-1 text-[10px] font-semibold uppercase tracking-wider text-gray-500 transition-colors hover:text-gray-200"
|
||||
>
|
||||
Done
|
||||
</button>
|
||||
) : (
|
||||
<div className="flex items-center gap-0.5">
|
||||
{albums.length > 0 ? (
|
||||
<button
|
||||
onClick={() => setManageAlbums(true)}
|
||||
className="rounded p-0.5 text-gray-600 transition-colors hover:bg-white/8 hover:text-gray-200"
|
||||
title="Manage albums"
|
||||
>
|
||||
<svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.75}
|
||||
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
||||
</svg>
|
||||
</button>
|
||||
) : null}
|
||||
<button
|
||||
onClick={startCreatingAlbum}
|
||||
className="rounded p-0.5 text-gray-600 transition-colors hover:bg-white/8 hover:text-gray-200"
|
||||
title="New album"
|
||||
>
|
||||
<svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.75} d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Manage action row */}
|
||||
{manageAlbums ? (
|
||||
<div className="px-3 pb-1.5">
|
||||
{confirmingAlbumDelete ? (
|
||||
<div className="rounded-lg border border-red-500/25 bg-red-500/[0.06] p-2">
|
||||
<p className="mb-2 text-[11px] leading-relaxed text-gray-400">
|
||||
Delete {manageSelectedIds.size} album{manageSelectedIds.size === 1 ? "" : "s"}? Your images stay in
|
||||
the library — only the album{manageSelectedIds.size === 1 ? "" : "s"} {manageSelectedIds.size === 1 ? "is" : "are"} removed.
|
||||
</p>
|
||||
<div className="flex justify-end gap-1.5">
|
||||
<button
|
||||
className="rounded-md border border-white/10 bg-white/5 px-2 py-1 text-[11px] text-gray-300 transition-colors hover:bg-white/10 hover:text-white"
|
||||
onClick={() => setConfirmingAlbumDelete(false)}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
className="rounded-md bg-red-500/20 px-2 py-1 text-[11px] font-medium text-red-300 transition-colors hover:bg-red-500/30 hover:text-red-200"
|
||||
onClick={() => void handleDeleteSelectedAlbums()}
|
||||
>
|
||||
Delete {manageSelectedIds.size}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<button
|
||||
className="text-[11px] text-gray-500 transition-colors hover:text-gray-300"
|
||||
onClick={() =>
|
||||
setManageSelectedIds((prev) =>
|
||||
prev.size === albums.length ? new Set() : new Set(albums.map((a) => a.id)),
|
||||
)
|
||||
}
|
||||
>
|
||||
{manageSelectedIds.size === albums.length ? "Deselect all" : "Select all"}
|
||||
</button>
|
||||
<button
|
||||
className="rounded-md border border-red-400/25 bg-red-500/10 px-2 py-1 text-[11px] text-red-300 transition-colors hover:bg-red-500/15 disabled:cursor-not-allowed disabled:opacity-40"
|
||||
onClick={() => setConfirmingAlbumDelete(true)}
|
||||
disabled={manageSelectedIds.size === 0}
|
||||
>
|
||||
Delete {manageSelectedIds.size > 0 ? manageSelectedIds.size : ""}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="max-h-52 overflow-y-auto px-2 pb-2 space-y-px">
|
||||
{creatingAlbum ? (
|
||||
<form
|
||||
className="flex gap-1 px-1 py-1"
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
void handleCreateAlbum();
|
||||
}}
|
||||
>
|
||||
<input
|
||||
ref={newAlbumInputRef}
|
||||
className="min-w-0 flex-1 rounded border border-white/10 bg-white/10 px-1.5 py-1 text-[13px] text-white outline-none ring-1 ring-blue-500/40 placeholder-gray-600"
|
||||
placeholder="Album name…"
|
||||
value={newAlbumName}
|
||||
onChange={(e) => setNewAlbumName(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Escape") {
|
||||
setCreatingAlbum(false);
|
||||
setNewAlbumName("");
|
||||
}
|
||||
}}
|
||||
onBlur={() => void handleCreateAlbum()}
|
||||
/>
|
||||
</form>
|
||||
) : null}
|
||||
|
||||
{albums.length === 0 && !creatingAlbum ? (
|
||||
<p className="px-3 py-3 text-center text-[11px] leading-relaxed text-gray-700">
|
||||
Select images and “Add to album” to start curating
|
||||
</p>
|
||||
) : (
|
||||
albums.map((album) => (
|
||||
<AlbumItem
|
||||
key={album.id}
|
||||
album={album}
|
||||
manageMode={manageAlbums}
|
||||
selectedForManage={manageSelectedIds.has(album.id)}
|
||||
onToggleManage={() => toggleManageSelected(album.id)}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,73 @@
|
||||
import { useBulkTagEditor } from "./useBulkTagEditor";
|
||||
|
||||
// Presentational tag-editing fields shared by the popover and modal surfaces.
|
||||
export function BulkTagFields({ autoFocus = false }: { autoFocus?: boolean }) {
|
||||
const { selectedCount, input, setInput, suggestions, appliedTags, pending, addTag, removeTag } =
|
||||
useBulkTagEditor();
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<form
|
||||
className="flex gap-1.5"
|
||||
onSubmit={(event) => {
|
||||
event.preventDefault();
|
||||
void addTag(input);
|
||||
}}
|
||||
>
|
||||
{/* eslint-disable-next-line jsx-a11y/no-autofocus */}
|
||||
<input
|
||||
autoFocus={autoFocus}
|
||||
className="min-w-0 flex-1 rounded-md border border-white/10 bg-white/5 px-2 py-1 text-xs text-white placeholder-gray-600 focus:border-white/20 focus:outline-none"
|
||||
placeholder={`Add tag to ${selectedCount} item${selectedCount === 1 ? "" : "s"}…`}
|
||||
value={input}
|
||||
onChange={(event) => setInput(event.target.value)}
|
||||
disabled={pending}
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="rounded-md border border-white/10 bg-white/5 px-2.5 py-1 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-50"
|
||||
disabled={pending || !input.trim()}
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{suggestions.length > 0 ? (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{suggestions.map((suggestion) => (
|
||||
<button
|
||||
key={suggestion.tag}
|
||||
className="rounded-md border border-white/10 bg-white/[0.03] px-2 py-0.5 text-[11px] text-gray-400 transition-colors hover:bg-white/10 hover:text-white"
|
||||
onClick={() => void addTag(suggestion.tag)}
|
||||
title={`${suggestion.count.toLocaleString()} tagged`}
|
||||
>
|
||||
{suggestion.tag}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{appliedTags.length > 0 ? (
|
||||
<div className="flex flex-wrap gap-1 border-t border-white/[0.06] pt-2">
|
||||
{appliedTags.map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="group/chip flex items-center gap-1 rounded-md border border-white/10 bg-white/5 px-2 py-0.5 text-xs text-gray-300"
|
||||
>
|
||||
{tag}
|
||||
<button
|
||||
className="text-gray-600 transition-colors hover:text-white"
|
||||
title="Remove from selected"
|
||||
onClick={() => void removeTag(tag)}
|
||||
>
|
||||
<svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
import { BulkTagFields } from "./BulkTagFields";
|
||||
|
||||
// Inline popover surface for bulk tagging — the default editing surface.
|
||||
// Anchored above the bar by the parent; closes on outside click via the
|
||||
// data-bulk-popover guard handled in BulkActionBar.
|
||||
export function BulkTagPopover({ onClose }: { onClose: () => void }) {
|
||||
return (
|
||||
<div
|
||||
data-bulk-popover
|
||||
className="absolute bottom-full left-1/2 mb-2 w-72 -translate-x-1/2 rounded-xl border border-white/10 bg-gray-950/98 p-3 shadow-2xl backdrop-blur"
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
>
|
||||
<div className="mb-2 flex items-center justify-between">
|
||||
<p className="text-[11px] uppercase tracking-wider text-gray-500">Add tags</p>
|
||||
<button
|
||||
className="text-gray-600 transition-colors hover:text-white"
|
||||
onClick={onClose}
|
||||
title="Close"
|
||||
>
|
||||
<svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<BulkTagFields autoFocus />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
import { ExploreTagEntry, useGalleryStore } from "../../store";
|
||||
|
||||
// Shared logic for the bulk tag editor, consumed by both the inline popover and
|
||||
// the modal surface so they stay behaviorally identical.
|
||||
export function useBulkTagEditor() {
|
||||
const selectedCount = useGalleryStore((state) => state.gallerySelectedIds.size);
|
||||
const selectedFolderId = useGalleryStore((state) => state.selectedFolderId);
|
||||
const bulkAddTags = useGalleryStore((state) => state.bulkAddTags);
|
||||
const bulkRemoveTag = useGalleryStore((state) => state.bulkRemoveTag);
|
||||
|
||||
const [input, setInput] = useState("");
|
||||
const [suggestions, setSuggestions] = useState<ExploreTagEntry[]>([]);
|
||||
const [appliedTags, setAppliedTags] = useState<string[]>([]);
|
||||
const [pending, setPending] = useState(false);
|
||||
const debounceRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
|
||||
|
||||
useEffect(() => {
|
||||
const query = input.trim();
|
||||
if (!query) {
|
||||
setSuggestions([]);
|
||||
return;
|
||||
}
|
||||
if (debounceRef.current) clearTimeout(debounceRef.current);
|
||||
debounceRef.current = setTimeout(async () => {
|
||||
try {
|
||||
const results = await invoke<ExploreTagEntry[]>("search_tags_autocomplete", {
|
||||
params: { query, folder_id: selectedFolderId ?? null, limit: 8 },
|
||||
});
|
||||
setSuggestions(results);
|
||||
} catch {
|
||||
setSuggestions([]);
|
||||
}
|
||||
}, 120);
|
||||
return () => {
|
||||
if (debounceRef.current) clearTimeout(debounceRef.current);
|
||||
};
|
||||
}, [input, selectedFolderId]);
|
||||
|
||||
const addTag = useCallback(
|
||||
async (raw: string) => {
|
||||
const tag = raw.trim();
|
||||
if (!tag || pending) return;
|
||||
setPending(true);
|
||||
try {
|
||||
await bulkAddTags([tag]);
|
||||
setAppliedTags((prev) => (prev.includes(tag) ? prev : [...prev, tag]));
|
||||
setInput("");
|
||||
setSuggestions([]);
|
||||
} finally {
|
||||
setPending(false);
|
||||
}
|
||||
},
|
||||
[bulkAddTags, pending],
|
||||
);
|
||||
|
||||
const removeTag = useCallback(
|
||||
async (tag: string) => {
|
||||
await bulkRemoveTag(tag);
|
||||
setAppliedTags((prev) => prev.filter((entry) => entry !== tag));
|
||||
},
|
||||
[bulkRemoveTag],
|
||||
);
|
||||
|
||||
return { selectedCount, input, setInput, suggestions, appliedTags, pending, addTag, removeTag };
|
||||
}
|
||||
Reference in New Issue
Block a user