feat: 0.1.1 — timeline scrubber, gallery virtualisation, folder reorder, QoL polish
Timeline: - Add a right-edge scrubber (year labels + month dots) that jumps to any period; runs in the same direction as the scrolled content - Load the full filtered set in Timeline view so the scrubber spans the whole library instead of just the first page Gallery & UI: - Virtualise the gallery grid - Folder reordering in the sidebar (drag + persisted sort_order) and a themed dropdown component - Subtle Light theme contrast fixes for toggles, secondary buttons and the update toast Embedding workers now defer video jobs without a thumbnail at claim time and requeue any previously-failed deferred jobs on startup, so videos no longer churn through failed embeddings. QoL polish across BackgroundTasks, DuplicateFinder, Lightbox and VideoPlayer.
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
import { revealItemInDir } from "@tauri-apps/plugin-opener";
|
||||
import { useGalleryStore, WorkerKey } from "../store";
|
||||
|
||||
const WORKER_FOR_STAGE: Record<string, WorkerKey> = {
|
||||
@@ -33,6 +34,7 @@ interface Task {
|
||||
interface FailedEmbeddingItem {
|
||||
image_id: number;
|
||||
filename: string;
|
||||
path: string;
|
||||
error: string | null;
|
||||
}
|
||||
|
||||
@@ -504,12 +506,21 @@ export function BackgroundTasks() {
|
||||
<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 className="min-w-0">
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-[10px] text-amber-400/80 truncate font-medium">{item.filename}</p>
|
||||
{item.error && (
|
||||
<p className="text-[9px] text-gray-600 truncate">{item.error}</p>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
className="shrink-0 text-gray-700 hover:text-gray-300 transition-colors"
|
||||
title="Reveal in Explorer"
|
||||
onClick={() => void revealItemInDir(item.path)}
|
||||
>
|
||||
<svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V7z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -165,7 +165,7 @@ export function DuplicateFinder() {
|
||||
: null;
|
||||
|
||||
return (
|
||||
<div className="flex min-h-0 flex-1 flex-col overflow-hidden bg-[#07080f]">
|
||||
<div className="flex min-h-0 flex-1 flex-col overflow-hidden bg-gray-950">
|
||||
{/* Header */}
|
||||
<div className="shrink-0 border-b border-white/[0.05] px-6 py-4">
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
|
||||
+84
-38
@@ -1,4 +1,5 @@
|
||||
import { useEffect, useRef, useCallback, useState } from "react";
|
||||
import { useEffect, useLayoutEffect, useRef, useCallback, useMemo, useState } from "react";
|
||||
import { useVirtualizer } from "@tanstack/react-virtual";
|
||||
import { convertFileSrc } from "@tauri-apps/api/core";
|
||||
import { ImageRecord, parseSearchValue, tileSizeForZoom, useGalleryStore } from "../store";
|
||||
|
||||
@@ -119,11 +120,7 @@ export function ImageTile({
|
||||
const similarScope = useGalleryStore((state) => state.similarScope);
|
||||
const canFindSimilar = image.embedding_status === "ready";
|
||||
|
||||
const src = image.thumbnail_path
|
||||
? convertFileSrc(image.thumbnail_path)
|
||||
: image.media_kind === "image" && image.path
|
||||
? convertFileSrc(image.path)
|
||||
: null;
|
||||
const src = image.thumbnail_path ? convertFileSrc(image.thumbnail_path) : null;
|
||||
|
||||
return (
|
||||
<button
|
||||
@@ -268,29 +265,62 @@ export function Gallery() {
|
||||
const parsedSearch = parseSearchValue(search);
|
||||
|
||||
const parentRef = useRef<HTMLDivElement>(null);
|
||||
const [containerWidth, setContainerWidth] = useState(0);
|
||||
const [contextMenu, setContextMenu] = useState<{ x: number; y: number; image: ImageRecord } | null>(null);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
const el = parentRef.current;
|
||||
if (!el) return;
|
||||
setContainerWidth(el.clientWidth);
|
||||
const ro = new ResizeObserver((entries) => {
|
||||
setContainerWidth(entries[0].contentRect.width);
|
||||
});
|
||||
ro.observe(el);
|
||||
return () => ro.disconnect();
|
||||
}, []);
|
||||
|
||||
const tileSize = tileSizeForZoom(zoomPreset);
|
||||
const cols = useMemo(
|
||||
() => Math.max(1, Math.floor((containerWidth - GAP) / (tileSize + GAP))),
|
||||
[containerWidth, tileSize],
|
||||
);
|
||||
const rowCount = Math.ceil(images.length / cols);
|
||||
|
||||
const estimateSize = useCallback(() => tileSize + GAP, [tileSize]);
|
||||
|
||||
const virtualizer = useVirtualizer({
|
||||
count: rowCount,
|
||||
getScrollElement: () => parentRef.current,
|
||||
estimateSize,
|
||||
overscan: 3,
|
||||
paddingStart: GAP,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
virtualizer.measure();
|
||||
}, [cols, virtualizer]);
|
||||
|
||||
useEffect(() => {
|
||||
parentRef.current?.scrollTo({ top: 0, left: 0 });
|
||||
}, [galleryScrollResetKey]);
|
||||
|
||||
const handleScroll = useCallback(() => {
|
||||
const element = parentRef.current;
|
||||
if (!element) return;
|
||||
if (element.scrollTop < 24) return;
|
||||
const nearBottom = element.scrollTop + element.clientHeight >= element.scrollHeight - 600;
|
||||
const el = parentRef.current;
|
||||
if (!el) return;
|
||||
if (el.scrollTop < 24) return;
|
||||
const nearBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 600;
|
||||
if (nearBottom && !loadingImages && images.length < totalImages) {
|
||||
void loadMoreImages();
|
||||
}
|
||||
}, [images.length, loadMoreImages, loadingImages, totalImages]);
|
||||
|
||||
useEffect(() => {
|
||||
const element = parentRef.current;
|
||||
if (!element) return;
|
||||
element.addEventListener("scroll", handleScroll, { passive: true });
|
||||
return () => element.removeEventListener("scroll", handleScroll);
|
||||
const el = parentRef.current;
|
||||
if (!el) return;
|
||||
el.addEventListener("scroll", handleScroll, { passive: true });
|
||||
return () => el.removeEventListener("scroll", handleScroll);
|
||||
}, [handleScroll]);
|
||||
|
||||
useEffect(() => {
|
||||
parentRef.current?.scrollTo({ top: 0, left: 0 });
|
||||
}, [galleryScrollResetKey]);
|
||||
|
||||
useEffect(() => {
|
||||
const close = (event: PointerEvent) => {
|
||||
if ((event.target as HTMLElement | null)?.closest("[data-gallery-context-menu]")) return;
|
||||
@@ -308,7 +338,7 @@ export function Gallery() {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div ref={parentRef} className="relative flex-1 overflow-y-auto overflow-x-hidden min-h-0 bg-[#07080f]">
|
||||
<div ref={parentRef} className="relative flex-1 overflow-y-auto overflow-x-hidden min-h-0 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">
|
||||
@@ -365,25 +395,41 @@ export function Gallery() {
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className="grid content-start"
|
||||
style={{
|
||||
padding: GAP,
|
||||
gap: GAP,
|
||||
gridTemplateColumns: `repeat(auto-fill, minmax(${tileSizeForZoom(zoomPreset)}px, 1fr))`,
|
||||
}}
|
||||
>
|
||||
{images.map((image) => (
|
||||
<ImageTile
|
||||
key={image.id}
|
||||
image={image}
|
||||
onClick={() => openImage(image)}
|
||||
onContextMenu={(event) => {
|
||||
event.preventDefault();
|
||||
setContextMenu({ x: event.clientX, y: event.clientY, image });
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
<div style={{ height: virtualizer.getTotalSize(), position: "relative" }}>
|
||||
{virtualizer.getVirtualItems().map((virtualRow) => {
|
||||
const startIndex = virtualRow.index * cols;
|
||||
const rowImages = images.slice(startIndex, startIndex + cols);
|
||||
return (
|
||||
<div
|
||||
key={virtualRow.key}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: virtualRow.start,
|
||||
width: "100%",
|
||||
height: virtualRow.size,
|
||||
display: "grid",
|
||||
gridTemplateColumns: `repeat(${cols}, ${tileSize}px)`,
|
||||
gap: GAP,
|
||||
paddingLeft: GAP,
|
||||
paddingRight: GAP,
|
||||
paddingBottom: GAP,
|
||||
boxSizing: "border-box",
|
||||
}}
|
||||
>
|
||||
{rowImages.map((image) => (
|
||||
<ImageTile
|
||||
key={image.id}
|
||||
image={image}
|
||||
onClick={() => openImage(image)}
|
||||
onContextMenu={(event) => {
|
||||
event.preventDefault();
|
||||
setContextMenu({ x: event.clientX, y: event.clientY, image });
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { useEffect, useCallback, useRef, useState } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { convertFileSrc } from "@tauri-apps/api/core";
|
||||
import { revealItemInDir } from "@tauri-apps/plugin-opener";
|
||||
import { useGalleryStore, ImageTag, AiRating } from "../store";
|
||||
import { VideoPlayer } from "./VideoPlayer";
|
||||
|
||||
@@ -377,7 +378,7 @@ export function Lightbox() {
|
||||
{selectedImage ? (
|
||||
<motion.div
|
||||
key="lightbox"
|
||||
className="fixed inset-0 z-50 flex bg-black/90 backdrop-blur-sm"
|
||||
className="media-dark-surface fixed inset-0 z-50 flex bg-black/90 backdrop-blur-sm"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
@@ -780,7 +781,18 @@ export function Lightbox() {
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="mb-1 text-xs uppercase tracking-wider text-gray-500">Path</p>
|
||||
<div className="mb-1 flex items-center justify-between">
|
||||
<p className="text-xs uppercase tracking-wider text-gray-500">Path</p>
|
||||
<button
|
||||
className="rounded p-0.5 text-gray-600 transition-colors hover:text-gray-300"
|
||||
title="Reveal in Explorer"
|
||||
onClick={() => void revealItemInDir(selectedImage.path)}
|
||||
>
|
||||
<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="M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V7z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<p className="break-all text-xs text-gray-400">{selectedImage.path}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { CleanupOrphanedThumbnailsResult, DatabaseInfo, OrphanedThumbnailsInfo, TaggerAcceleration, TaggingQueueScope, VacuumResult, useGalleryStore } from "../store";
|
||||
import { AppTheme, CleanupOrphanedThumbnailsResult, DatabaseInfo, OrphanedThumbnailsInfo, TaggerAcceleration, TaggingQueueScope, VacuumResult, useGalleryStore } from "../store";
|
||||
import { FfmpegStatusRow } from "./onboarding/StepWelcome";
|
||||
import { ThemedDropdown } from "./ThemedDropdown";
|
||||
|
||||
type SettingsSection = "workspace" | "general";
|
||||
|
||||
@@ -18,9 +19,9 @@ function formatBytesShort(bytes: number): string {
|
||||
function StatusPill({ children, tone }: { children: React.ReactNode; tone: "ready" | "muted" | "busy" }) {
|
||||
const className =
|
||||
tone === "ready"
|
||||
? "border-emerald-400/25 bg-emerald-500/10 text-emerald-300"
|
||||
? "border-emerald-400/25 bg-emerald-500/10 text-emerald-300 light-theme:border-emerald-600/40 light-theme:bg-emerald-100 light-theme:text-emerald-700"
|
||||
: tone === "busy"
|
||||
? "border-sky-400/25 bg-sky-500/10 text-sky-300"
|
||||
? "border-sky-400/25 bg-sky-500/10 text-sky-300 light-theme:border-sky-600/40 light-theme:bg-sky-100 light-theme:text-sky-700"
|
||||
: "border-white/10 bg-white/[0.04] text-gray-500";
|
||||
|
||||
return <span className={`inline-flex rounded-md border px-2 py-0.5 text-[11px] font-medium ${className}`}>{children}</span>;
|
||||
@@ -88,8 +89,8 @@ function ScopeButton({ scope, current, onSelect, children }: {
|
||||
type="button"
|
||||
className={`rounded-md border px-3 py-1.5 text-xs transition-colors ${
|
||||
active
|
||||
? "border-emerald-400/35 bg-emerald-500/15 text-emerald-200"
|
||||
: "border-transparent text-gray-500 hover:bg-white/[0.06] hover:text-gray-200"
|
||||
? "border-emerald-400/35 bg-emerald-500/15 text-emerald-200 light-theme:border-emerald-600/50 light-theme:bg-emerald-100 light-theme:text-emerald-700"
|
||||
: "border-transparent text-gray-500 hover:bg-white/[0.06] hover:text-gray-200 light-theme:text-gray-600 light-theme:hover:bg-black/[0.06] light-theme:hover:text-gray-900"
|
||||
}`}
|
||||
onClick={() => onSelect(scope)}
|
||||
>
|
||||
@@ -110,8 +111,8 @@ function TaggerAccelerationButton({ acceleration, current, onSelect, children }:
|
||||
type="button"
|
||||
className={`rounded-md border px-3 py-1.5 text-xs transition-colors ${
|
||||
active
|
||||
? "border-emerald-400/35 bg-emerald-500/15 text-emerald-200"
|
||||
: "border-transparent text-gray-500 hover:bg-white/[0.06] hover:text-gray-200"
|
||||
? "border-emerald-400/35 bg-emerald-500/15 text-emerald-200 light-theme:border-emerald-600/50 light-theme:bg-emerald-100 light-theme:text-emerald-700"
|
||||
: "border-transparent text-gray-500 hover:bg-white/[0.06] hover:text-gray-200 light-theme:text-gray-600 light-theme:hover:bg-black/[0.06] light-theme:hover:text-gray-900"
|
||||
}`}
|
||||
onClick={() => onSelect(acceleration)}
|
||||
>
|
||||
@@ -192,6 +193,8 @@ export function SettingsModal() {
|
||||
const checkForUpdates = useGalleryStore((state) => state.checkForUpdates);
|
||||
const installUpdate = useGalleryStore((state) => state.installUpdate);
|
||||
const openOnboarding = useGalleryStore((state) => state.openOnboarding);
|
||||
const theme = useGalleryStore((state) => state.theme);
|
||||
const setTheme = useGalleryStore((state) => state.setTheme);
|
||||
|
||||
useEffect(() => {
|
||||
if (!settingsOpen) return;
|
||||
@@ -309,7 +312,7 @@ export function SettingsModal() {
|
||||
return (
|
||||
<div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/65 px-6 backdrop-blur-sm" onClick={() => setSettingsOpen(false)}>
|
||||
<div
|
||||
className="relative flex h-[min(85vh,900px)] w-[min(85vw,1400px)] overflow-hidden rounded-lg border border-white/10 bg-[#07080f] shadow-2xl shadow-black/60"
|
||||
className="relative flex h-[min(85vh,900px)] w-[min(85vw,1400px)] overflow-hidden rounded-lg border border-white/10 bg-gray-950 shadow-2xl shadow-black/60"
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
>
|
||||
<aside className="flex w-64 shrink-0 flex-col border-r border-white/[0.07] bg-white/[0.025]">
|
||||
@@ -368,14 +371,14 @@ export function SettingsModal() {
|
||||
{taggerReady ? (
|
||||
<>
|
||||
<button
|
||||
className="rounded-md border border-white/10 bg-white/[0.055] px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-45"
|
||||
className="rounded-md border border-white/10 bg-white/[0.055] px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-45 light-theme:border-gray-300/70 light-theme:bg-gray-100 light-theme:text-gray-700 light-theme:hover:bg-gray-200 light-theme:hover:text-gray-900"
|
||||
onClick={() => void probeTaggerRuntime()}
|
||||
disabled={taggerRuntimeChecking}
|
||||
>
|
||||
{taggerRuntimeChecking ? "Checking runtime..." : "Check runtime"}
|
||||
</button>
|
||||
<button
|
||||
className="rounded-md border border-red-400/20 bg-red-500/10 px-3 py-1.5 text-xs text-red-200 transition-colors hover:bg-red-500/15 disabled:cursor-not-allowed disabled:opacity-45"
|
||||
className="rounded-md border border-red-400/20 bg-red-500/10 px-3 py-1.5 text-xs text-red-200 transition-colors hover:bg-red-500/15 disabled:cursor-not-allowed disabled:opacity-45 light-theme:border-red-400/50 light-theme:bg-red-50 light-theme:text-red-700 light-theme:hover:bg-red-100"
|
||||
onClick={() => void deleteTaggerModel()}
|
||||
disabled={taggerModelPreparing}
|
||||
>
|
||||
@@ -384,7 +387,7 @@ export function SettingsModal() {
|
||||
</>
|
||||
) : (
|
||||
<button
|
||||
className="relative overflow-hidden rounded-md border border-white/10 bg-white/[0.055] px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-45"
|
||||
className="relative overflow-hidden rounded-md border border-white/10 bg-white/[0.055] px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-45 light-theme:border-gray-300/70 light-theme:bg-gray-100 light-theme:text-gray-700 light-theme:hover:bg-gray-200 light-theme:hover:text-gray-900"
|
||||
onClick={() => void prepareTaggerModel()}
|
||||
disabled={taggerModelPreparing}
|
||||
>
|
||||
@@ -397,7 +400,7 @@ export function SettingsModal() {
|
||||
|
||||
<SettingsItem label="Tagger acceleration" description="Use DirectML when available, or fall back to CPU for reliability.">
|
||||
<div className="flex flex-col items-end gap-1.5">
|
||||
<div className="flex rounded-lg border border-white/[0.07] p-0.5">
|
||||
<div className="flex rounded-lg border border-white/[0.07] p-0.5 light-theme:border-gray-300/80">
|
||||
{(["auto", "directml", "cpu"] as const).map((acceleration) => (
|
||||
<TaggerAccelerationButton
|
||||
key={acceleration}
|
||||
@@ -519,7 +522,7 @@ export function SettingsModal() {
|
||||
|
||||
<SettingsGroup title="Queue targets" description="Choose which folders to include when queuing tagging jobs.">
|
||||
<SettingsItem label="Target scope" description="Queue across the full library, or choose a specific folder set and keep the modal open while you work through it.">
|
||||
<div className="flex rounded-lg border border-white/[0.07] p-0.5">
|
||||
<div className="flex rounded-lg border border-white/[0.07] p-0.5 light-theme:border-gray-300/80">
|
||||
<ScopeButton scope="all" current={taggingQueueScope} onSelect={setTaggingQueueScope}>All media</ScopeButton>
|
||||
<ScopeButton scope="selected" current={taggingQueueScope} onSelect={setTaggingQueueScope}>Selected folders</ScopeButton>
|
||||
</div>
|
||||
@@ -533,14 +536,14 @@ export function SettingsModal() {
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
className="rounded-md border border-white/10 bg-white/[0.045] px-2.5 py-1 text-[11px] text-gray-400 transition-colors hover:bg-white/[0.075] hover:text-white disabled:opacity-40 disabled:cursor-not-allowed"
|
||||
className="rounded-md border border-white/10 bg-white/[0.045] px-2.5 py-1 text-[11px] text-gray-400 transition-colors hover:bg-white/[0.075] hover:text-white disabled:opacity-40 disabled:cursor-not-allowed light-theme:border-gray-300/70 light-theme:bg-gray-100 light-theme:text-gray-700 light-theme:hover:bg-gray-200 light-theme:hover:text-gray-900"
|
||||
onClick={() => setTaggingQueueFolderIds(folders.map((folder) => folder.id))}
|
||||
disabled={taggingQueueScope === "all" || folders.length === 0}
|
||||
>
|
||||
Select all
|
||||
</button>
|
||||
<button
|
||||
className="rounded-md border border-white/10 bg-white/[0.045] px-2.5 py-1 text-[11px] text-gray-400 transition-colors hover:bg-white/[0.075] hover:text-white disabled:opacity-40 disabled:cursor-not-allowed"
|
||||
className="rounded-md border border-white/10 bg-white/[0.045] px-2.5 py-1 text-[11px] text-gray-400 transition-colors hover:bg-white/[0.075] hover:text-white disabled:opacity-40 disabled:cursor-not-allowed light-theme:border-gray-300/70 light-theme:bg-gray-100 light-theme:text-gray-700 light-theme:hover:bg-gray-200 light-theme:hover:text-gray-900"
|
||||
onClick={() => setTaggingQueueFolderIds([])}
|
||||
disabled={taggingQueueScope === "all" || taggingQueueFolderIds.length === 0}
|
||||
>
|
||||
@@ -579,14 +582,14 @@ export function SettingsModal() {
|
||||
<SettingsItem label="Queue tagging jobs" description="Generate missing AI tags for the current target. Results flow back into the library as the background worker finishes.">
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
className="rounded-md border border-white/10 bg-white/[0.055] px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-45"
|
||||
className="rounded-md border border-white/10 bg-white/[0.055] px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-45 light-theme:border-gray-300/70 light-theme:bg-gray-100 light-theme:text-gray-700 light-theme:hover:bg-gray-200 light-theme:hover:text-gray-900"
|
||||
onClick={() => runQueueAction("queue")}
|
||||
disabled={!taggerReady || taggerQueueing || taggerClearing || (taggingQueueScope === "selected" && taggingQueueFolderIds.length === 0)}
|
||||
>
|
||||
{taggerQueueing ? "Queueing..." : "Queue tagging"}
|
||||
</button>
|
||||
<button
|
||||
className="rounded-md border border-amber-400/20 bg-amber-500/10 px-3 py-1.5 text-xs text-amber-200 transition-colors hover:bg-amber-500/15 disabled:cursor-not-allowed disabled:opacity-45"
|
||||
className="rounded-md border border-amber-400/20 bg-amber-500/10 px-3 py-1.5 text-xs text-amber-200 transition-colors hover:bg-amber-500/15 disabled:cursor-not-allowed disabled:opacity-45 light-theme:border-amber-500/50 light-theme:bg-amber-50 light-theme:text-amber-700 light-theme:hover:bg-amber-100"
|
||||
onClick={() => runQueueAction("clear")}
|
||||
disabled={taggerQueueing || taggerClearing || (taggingQueueScope === "selected" && taggingQueueFolderIds.length === 0)}
|
||||
>
|
||||
@@ -600,6 +603,21 @@ export function SettingsModal() {
|
||||
</div>
|
||||
) : (
|
||||
<div className="mt-8 space-y-9">
|
||||
<SettingsGroup title="Appearance">
|
||||
<SettingsItem label="Theme" description="Choose the app palette. Subtle Light uses a warm, low-glare background.">
|
||||
<ThemedDropdown
|
||||
value={theme}
|
||||
onChange={(value) => setTheme(value as AppTheme)}
|
||||
ariaLabel="App theme"
|
||||
options={[
|
||||
{ value: "phokus", label: "Phokus" },
|
||||
{ value: "subtle-light", label: "Subtle Light" },
|
||||
{ value: "conventional-dark", label: "Conventional Dark" },
|
||||
]}
|
||||
/>
|
||||
</SettingsItem>
|
||||
</SettingsGroup>
|
||||
|
||||
<SettingsGroup title="Updates">
|
||||
<SettingsItem
|
||||
label={
|
||||
@@ -624,14 +642,14 @@ export function SettingsModal() {
|
||||
>
|
||||
{updateStatus === "available" ? (
|
||||
<button
|
||||
className="rounded-md border border-emerald-400/35 bg-emerald-500/15 px-3 py-1.5 text-xs text-emerald-200 transition-colors hover:bg-emerald-500/25"
|
||||
className="rounded-md border border-emerald-400/35 bg-emerald-500/15 px-3 py-1.5 text-xs text-emerald-200 transition-colors hover:bg-emerald-500/25 light-theme:border-emerald-600/50 light-theme:bg-emerald-100 light-theme:text-emerald-700 light-theme:hover:bg-emerald-200"
|
||||
onClick={() => void installUpdate()}
|
||||
>
|
||||
Install & restart
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
className="rounded-md border border-white/10 bg-white/[0.055] px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-45"
|
||||
className="rounded-md border border-white/10 bg-white/[0.055] px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-45 light-theme:border-gray-300/70 light-theme:bg-gray-100 light-theme:text-gray-700 light-theme:hover:bg-gray-200 light-theme:hover:text-gray-900"
|
||||
onClick={() => void checkForUpdates()}
|
||||
disabled={updateStatus === "checking" || updateStatus === "downloading" || updateStatus === "installing"}
|
||||
>
|
||||
@@ -648,7 +666,7 @@ export function SettingsModal() {
|
||||
description="Replay the guided first-run tour — library setup, the background pipeline, search modes, and AI features."
|
||||
>
|
||||
<button
|
||||
className="rounded-md border border-white/10 bg-white/[0.055] px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white"
|
||||
className="rounded-md border border-white/10 bg-white/[0.055] px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white light-theme:border-gray-300/70 light-theme:bg-gray-100 light-theme:text-gray-700 light-theme:hover:bg-gray-200 light-theme:hover:text-gray-900"
|
||||
onClick={() => {
|
||||
setSettingsOpen(false);
|
||||
openOnboarding();
|
||||
@@ -665,7 +683,7 @@ export function SettingsModal() {
|
||||
description="Open the folder in Explorer to inspect or back up the database, thumbnails, and models."
|
||||
>
|
||||
<button
|
||||
className="rounded-md border border-white/10 bg-white/[0.055] px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-45"
|
||||
className="rounded-md border border-white/10 bg-white/[0.055] px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-45 light-theme:border-gray-300/70 light-theme:bg-gray-100 light-theme:text-gray-700 light-theme:hover:bg-gray-200 light-theme:hover:text-gray-900"
|
||||
onClick={() => {
|
||||
setOpeningDataFolder(true);
|
||||
void openAppDataFolder().finally(() => setOpeningDataFolder(false));
|
||||
@@ -730,7 +748,7 @@ export function SettingsModal() {
|
||||
}
|
||||
>
|
||||
<button
|
||||
className="rounded-md border border-white/10 bg-white/[0.055] px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-45"
|
||||
className="rounded-md border border-white/10 bg-white/[0.055] px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-45 light-theme:border-gray-300/70 light-theme:bg-gray-100 light-theme:text-gray-700 light-theme:hover:bg-gray-200 light-theme:hover:text-gray-900"
|
||||
onClick={() => {
|
||||
setVacuuming(true);
|
||||
setVacuumResult(null);
|
||||
@@ -791,7 +809,7 @@ export function SettingsModal() {
|
||||
}
|
||||
>
|
||||
<button
|
||||
className="rounded-md border border-white/10 bg-white/[0.055] px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-45"
|
||||
className="rounded-md border border-white/10 bg-white/[0.055] px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-45 light-theme:border-gray-300/70 light-theme:bg-gray-100 light-theme:text-gray-700 light-theme:hover:bg-gray-200 light-theme:hover:text-gray-900"
|
||||
onClick={() => {
|
||||
setCleaningThumbnails(true);
|
||||
cleanupOrphanedThumbnails()
|
||||
|
||||
+189
-8
@@ -1,6 +1,8 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
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 { ThemedDropdown } from "./ThemedDropdown";
|
||||
|
||||
interface ContextMenuState {
|
||||
folderId: number;
|
||||
@@ -8,6 +10,9 @@ interface ContextMenuState {
|
||||
y: number;
|
||||
}
|
||||
|
||||
type LibrarySort = "az" | "za" | "custom";
|
||||
const LIBRARY_SORT_KEY = "phokus-library-sort";
|
||||
|
||||
function FolderContextMenu({
|
||||
menu,
|
||||
folder,
|
||||
@@ -82,11 +87,22 @@ function FolderItem({
|
||||
folder,
|
||||
selected,
|
||||
progress,
|
||||
customOrdering,
|
||||
dragging,
|
||||
onDragStart,
|
||||
onDragEnd,
|
||||
onKeyboardMove,
|
||||
}: {
|
||||
folder: Folder;
|
||||
selected: boolean;
|
||||
progress: IndexProgress | undefined;
|
||||
customOrdering: boolean;
|
||||
dragging: boolean;
|
||||
onDragStart: (pointerY: number) => void;
|
||||
onDragEnd: () => void;
|
||||
onKeyboardMove: (direction: -1 | 1) => void;
|
||||
}) {
|
||||
const dragControls = useDragControls();
|
||||
const { selectFolder, removeFolder, reindexFolder, renameFolder, updateFolderPath, toggleMutedFolder } = useGalleryStore();
|
||||
const mutedFolderIds = useGalleryStore((state) => state.mutedFolderIds);
|
||||
const setAllWorkersPaused = useGalleryStore((state) => state.setAllWorkersPaused);
|
||||
@@ -141,16 +157,57 @@ function FolderItem({
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Reorder.Item
|
||||
as="div"
|
||||
value={folder.id}
|
||||
drag={customOrdering ? "y" : false}
|
||||
dragControls={dragControls}
|
||||
dragListener={false}
|
||||
dragElastic={0.08}
|
||||
onDragEnd={onDragEnd}
|
||||
layout
|
||||
transition={{ layout: { type: "spring", stiffness: 520, damping: 38, mass: 0.55 } }}
|
||||
className={`relative z-0 ${dragging ? "z-20" : ""}`}
|
||||
style={{ position: "relative" }}
|
||||
>
|
||||
<div
|
||||
className={`group relative flex items-center gap-2.5 px-3 py-2 rounded-lg cursor-pointer transition-all duration-150 ${
|
||||
selected
|
||||
? "bg-white/8 text-white"
|
||||
: "text-gray-500 hover:text-gray-200 hover:bg-white/5"
|
||||
}`}
|
||||
} ${dragging ? "scale-[1.02] bg-white/[0.11] text-white shadow-xl shadow-black/25 ring-1 ring-white/15" : ""}`}
|
||||
onClick={() => !renaming && selectFolder(folder.id)}
|
||||
onContextMenu={handleContextMenu}
|
||||
>
|
||||
{customOrdering ? (
|
||||
<button
|
||||
type="button"
|
||||
aria-label={`Reorder ${folder.name}`}
|
||||
title={`Drag to reorder ${folder.name}`}
|
||||
className={`-ml-1 flex h-7 w-5 shrink-0 touch-none items-center justify-center rounded-md transition-colors ${
|
||||
dragging
|
||||
? "cursor-grabbing bg-white/10 text-gray-300"
|
||||
: "cursor-grab text-gray-700 hover:bg-white/[0.06] hover:text-gray-400"
|
||||
}`}
|
||||
onPointerDown={(event) => {
|
||||
event.stopPropagation();
|
||||
onDragStart(event.clientY);
|
||||
dragControls.start(event);
|
||||
}}
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
onKeyboardMove(event.key === "ArrowUp" ? -1 : 1);
|
||||
}}
|
||||
>
|
||||
<svg className="h-3 w-3" viewBox="0 0 12 12" fill="currentColor">
|
||||
<circle cx="3" cy="3" r="1" /><circle cx="9" cy="3" r="1" />
|
||||
<circle cx="3" cy="9" r="1" /><circle cx="9" cy="9" r="1" />
|
||||
</svg>
|
||||
</button>
|
||||
) : null}
|
||||
{isMissing ? (
|
||||
<span className="shrink-0 text-amber-400">
|
||||
<svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
@@ -278,7 +335,7 @@ function FolderItem({
|
||||
onRemove={() => setConfirmingRemoval(true)}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
</Reorder.Item>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -290,6 +347,103 @@ export function Sidebar() {
|
||||
const selectFolder = useGalleryStore((state) => state.selectFolder);
|
||||
const activeView = useGalleryStore((state) => state.activeView);
|
||||
const setView = useGalleryStore((state) => state.setView);
|
||||
const reorderFolders = useGalleryStore((state) => state.reorderFolders);
|
||||
const [librarySort, setLibrarySortState] = useState<LibrarySort>(() => {
|
||||
const saved = window.localStorage.getItem(LIBRARY_SORT_KEY);
|
||||
return saved === "za" || saved === "custom" ? saved : "az";
|
||||
});
|
||||
const [customFolders, setCustomFolders] = useState(folders);
|
||||
const [draggedFolderId, setDraggedFolderId] = useState<number | null>(null);
|
||||
const folderListRef = useRef<HTMLDivElement>(null);
|
||||
const customFoldersRef = useRef(folders);
|
||||
const pointerYRef = useRef(0);
|
||||
const autoScrollFrameRef = useRef<number | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (draggedFolderId !== null) return;
|
||||
setCustomFolders(folders);
|
||||
customFoldersRef.current = folders;
|
||||
}, [folders, draggedFolderId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (draggedFolderId === null) return;
|
||||
|
||||
const handlePointerMove = (event: PointerEvent) => {
|
||||
pointerYRef.current = event.clientY;
|
||||
};
|
||||
|
||||
const autoScroll = () => {
|
||||
const list = folderListRef.current;
|
||||
if (list) {
|
||||
const rect = list.getBoundingClientRect();
|
||||
const edgeSize = Math.min(64, rect.height * 0.2);
|
||||
const topDistance = pointerYRef.current - rect.top;
|
||||
const bottomDistance = rect.bottom - pointerYRef.current;
|
||||
let velocity = 0;
|
||||
|
||||
if (topDistance < edgeSize) {
|
||||
velocity = -Math.pow((edgeSize - Math.max(0, topDistance)) / edgeSize, 1.6) * 14;
|
||||
} else if (bottomDistance < edgeSize) {
|
||||
velocity = Math.pow((edgeSize - Math.max(0, bottomDistance)) / edgeSize, 1.6) * 14;
|
||||
}
|
||||
|
||||
if (velocity !== 0) list.scrollTop += velocity;
|
||||
}
|
||||
autoScrollFrameRef.current = requestAnimationFrame(autoScroll);
|
||||
};
|
||||
|
||||
window.addEventListener("pointermove", handlePointerMove, { passive: true });
|
||||
autoScrollFrameRef.current = requestAnimationFrame(autoScroll);
|
||||
return () => {
|
||||
window.removeEventListener("pointermove", handlePointerMove);
|
||||
if (autoScrollFrameRef.current !== null) cancelAnimationFrame(autoScrollFrameRef.current);
|
||||
autoScrollFrameRef.current = null;
|
||||
};
|
||||
}, [draggedFolderId]);
|
||||
|
||||
const displayedFolders = useMemo(() => {
|
||||
if (librarySort === "custom") return customFolders;
|
||||
return [...folders].sort((a, b) => {
|
||||
const result = a.name.localeCompare(b.name, undefined, { numeric: true, sensitivity: "base" });
|
||||
return librarySort === "az" ? result : -result;
|
||||
});
|
||||
}, [customFolders, folders, librarySort]);
|
||||
|
||||
const setLibrarySort = (sort: LibrarySort) => {
|
||||
window.localStorage.setItem(LIBRARY_SORT_KEY, sort);
|
||||
setLibrarySortState(sort);
|
||||
};
|
||||
|
||||
const handleReorder = (orderedIds: number[]) => {
|
||||
const byId = new Map(customFoldersRef.current.map((folder) => [folder.id, folder]));
|
||||
const next = orderedIds
|
||||
.map((id) => byId.get(id))
|
||||
.filter((folder): folder is Folder => folder !== undefined);
|
||||
customFoldersRef.current = next;
|
||||
setCustomFolders(next);
|
||||
};
|
||||
|
||||
const finishReorder = () => {
|
||||
const nextIds = customFoldersRef.current.map((folder) => folder.id);
|
||||
setDraggedFolderId(null);
|
||||
const currentIds = folders.map((folder) => folder.id);
|
||||
if (nextIds.some((id, index) => id !== currentIds[index])) {
|
||||
void reorderFolders(nextIds);
|
||||
}
|
||||
};
|
||||
|
||||
const moveFolderByKeyboard = (folderId: number, direction: -1 | 1) => {
|
||||
const current = customFoldersRef.current;
|
||||
const currentIndex = current.findIndex((folder) => folder.id === folderId);
|
||||
const nextIndex = currentIndex + direction;
|
||||
if (currentIndex < 0 || nextIndex < 0 || nextIndex >= current.length) return;
|
||||
|
||||
const next = [...current];
|
||||
[next[currentIndex], next[nextIndex]] = [next[nextIndex], next[currentIndex]];
|
||||
customFoldersRef.current = next;
|
||||
setCustomFolders(next);
|
||||
void reorderFolders(next.map((folder) => folder.id));
|
||||
};
|
||||
|
||||
const handleAddFolder = async () => {
|
||||
const selected = await open({ directory: true, multiple: false, title: "Select Media Folder" });
|
||||
@@ -387,28 +541,55 @@ export function Sidebar() {
|
||||
|
||||
{/* Section label */}
|
||||
{folders.length > 0 && (
|
||||
<div className="px-5 pt-3 pb-1">
|
||||
<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">Libraries</span>
|
||||
<ThemedDropdown
|
||||
value={librarySort}
|
||||
onChange={(value) => setLibrarySort(value as LibrarySort)}
|
||||
ariaLabel="Library order"
|
||||
compact
|
||||
options={[
|
||||
{ value: "az", label: "A-Z" },
|
||||
{ value: "za", label: "Z-A" },
|
||||
{ value: "custom", label: "Custom" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Folder list */}
|
||||
<div className="flex-1 overflow-y-auto px-2 pb-2 space-y-px min-h-0">
|
||||
<Reorder.Group
|
||||
ref={folderListRef}
|
||||
as="div"
|
||||
axis="y"
|
||||
values={displayedFolders.map((folder) => folder.id)}
|
||||
onReorder={librarySort === "custom" ? handleReorder : () => {}}
|
||||
layoutScroll
|
||||
className="flex-1 overflow-y-auto px-2 pb-2 space-y-px min-h-0"
|
||||
>
|
||||
{folders.length === 0 ? (
|
||||
<p className="text-gray-700 text-xs px-3 py-6 text-center leading-relaxed">
|
||||
Add a folder to get started
|
||||
</p>
|
||||
) : (
|
||||
folders.map((folder) => (
|
||||
displayedFolders.map((folder) => (
|
||||
<FolderItem
|
||||
key={folder.id}
|
||||
folder={folder}
|
||||
selected={selectedFolderId === folder.id}
|
||||
progress={indexingProgress[folder.id]}
|
||||
customOrdering={librarySort === "custom"}
|
||||
dragging={draggedFolderId === folder.id}
|
||||
onDragStart={(pointerY) => {
|
||||
pointerYRef.current = pointerY;
|
||||
setDraggedFolderId(folder.id);
|
||||
}}
|
||||
onDragEnd={finishReorder}
|
||||
onKeyboardMove={(direction) => moveFolderByKeyboard(folder.id, direction)}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</Reorder.Group>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,106 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
|
||||
export interface DropdownOption {
|
||||
value: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
export function ThemedDropdown({
|
||||
value,
|
||||
options,
|
||||
onChange,
|
||||
ariaLabel,
|
||||
compact = false,
|
||||
align = "right",
|
||||
}: {
|
||||
value: string;
|
||||
options: DropdownOption[];
|
||||
onChange: (value: string) => void;
|
||||
ariaLabel: string;
|
||||
compact?: boolean;
|
||||
align?: "left" | "right";
|
||||
}) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const current = options.find((option) => option.value === value) ?? options[0];
|
||||
|
||||
useEffect(() => {
|
||||
const handlePointerDown = (event: PointerEvent) => {
|
||||
if (!ref.current?.contains(event.target as Node)) setOpen(false);
|
||||
};
|
||||
const handleKeyDown = (event: KeyboardEvent) => {
|
||||
if (event.key === "Escape") setOpen(false);
|
||||
};
|
||||
window.addEventListener("pointerdown", handlePointerDown);
|
||||
window.addEventListener("keydown", handleKeyDown);
|
||||
return () => {
|
||||
window.removeEventListener("pointerdown", handlePointerDown);
|
||||
window.removeEventListener("keydown", handleKeyDown);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div ref={ref} className="relative">
|
||||
<button
|
||||
type="button"
|
||||
aria-label={ariaLabel}
|
||||
aria-haspopup="listbox"
|
||||
aria-expanded={open}
|
||||
onClick={() => setOpen((currentOpen) => !currentOpen)}
|
||||
className={`flex items-center justify-between gap-2 rounded-md border transition-colors ${
|
||||
compact
|
||||
? "border-white/10 bg-white/[0.04] px-1.5 py-0.5 text-[10px] font-medium"
|
||||
: "min-w-40 border-white/10 bg-white/[0.055] px-3 py-1.5 text-xs"
|
||||
} ${open ? "border-white/20 text-white" : "text-gray-400 hover:border-white/15 hover:text-gray-200"}`}
|
||||
>
|
||||
<span>{current?.label}</span>
|
||||
<svg
|
||||
className={`h-3 w-3 shrink-0 text-gray-500 transition-transform duration-150 ${open ? "rotate-180" : ""}`}
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{open ? (
|
||||
<div
|
||||
role="listbox"
|
||||
aria-label={ariaLabel}
|
||||
className={`absolute top-full z-50 mt-1.5 min-w-full rounded-xl border border-white/10 bg-gray-950/98 p-1 shadow-2xl shadow-black/30 backdrop-blur-xl ${
|
||||
align === "right" ? "right-0" : "left-0"
|
||||
}`}
|
||||
>
|
||||
{options.map((option) => {
|
||||
const selected = option.value === value;
|
||||
return (
|
||||
<button
|
||||
key={option.value}
|
||||
type="button"
|
||||
role="option"
|
||||
aria-selected={selected}
|
||||
className={`flex w-full items-center justify-between gap-4 whitespace-nowrap rounded-lg px-3 py-2 text-left text-xs transition-colors ${
|
||||
selected
|
||||
? "bg-white/[0.08] text-white"
|
||||
: "text-gray-400 hover:bg-white/[0.055] hover:text-gray-200"
|
||||
}`}
|
||||
onClick={() => {
|
||||
onChange(option.value);
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
<span>{option.label}</span>
|
||||
{selected ? (
|
||||
<svg className="h-3.5 w-3.5 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
) : null}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+234
-101
@@ -5,6 +5,8 @@ import { ContextMenu, ImageTile } from "./Gallery";
|
||||
|
||||
const GAP = 6;
|
||||
const HEADER_HEIGHT = 52;
|
||||
const SCRUBBER_WIDTH = 48;
|
||||
const MONTH_SHORT = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"] as const;
|
||||
|
||||
interface TimelineGroup {
|
||||
key: string;
|
||||
@@ -12,6 +14,18 @@ interface TimelineGroup {
|
||||
images: ImageRecord[];
|
||||
}
|
||||
|
||||
interface ScrubberMonth {
|
||||
monthNum: number;
|
||||
label: string;
|
||||
groupIndex: number;
|
||||
}
|
||||
|
||||
interface ScrubberYear {
|
||||
year: string;
|
||||
firstGroupIndex: number;
|
||||
months: ScrubberMonth[];
|
||||
}
|
||||
|
||||
function buildLabel(key: string): string {
|
||||
if (key === "unknown") return "Unknown Date";
|
||||
const [yearStr, monthStr] = key.split("-");
|
||||
@@ -44,6 +58,27 @@ function groupImages(images: ImageRecord[]): TimelineGroup[] {
|
||||
.map(([key, imgs]) => ({ key, label: buildLabel(key), images: imgs }));
|
||||
}
|
||||
|
||||
function buildScrubberYears(groups: TimelineGroup[]): ScrubberYear[] {
|
||||
const byYear = new Map<string, ScrubberYear>();
|
||||
for (let i = 0; i < groups.length; i++) {
|
||||
const group = groups[i];
|
||||
if (group.key === "unknown") continue;
|
||||
const year = group.key.substring(0, 4);
|
||||
const monthNum = Number(group.key.substring(5, 7));
|
||||
if (!byYear.has(year)) {
|
||||
byYear.set(year, { year, firstGroupIndex: i, months: [] });
|
||||
}
|
||||
byYear.get(year)!.months.push({
|
||||
monthNum,
|
||||
label: MONTH_SHORT[monthNum - 1] ?? "",
|
||||
groupIndex: i,
|
||||
});
|
||||
}
|
||||
// Keep insertion order so the scrubber runs the same direction as the scrolled
|
||||
// content (oldest at top with taken_asc), keeping the active highlight aligned.
|
||||
return Array.from(byYear.values());
|
||||
}
|
||||
|
||||
export function Timeline() {
|
||||
const images = useGalleryStore((s) => s.images);
|
||||
const loadMoreImages = useGalleryStore((s) => s.loadMoreImages);
|
||||
@@ -55,13 +90,15 @@ export function Timeline() {
|
||||
|
||||
const parentRef = useRef<HTMLDivElement>(null);
|
||||
const [containerWidth, setContainerWidth] = useState(0);
|
||||
const [activeGroupIndex, setActiveGroupIndex] = useState(0);
|
||||
const [contextMenu, setContextMenu] = useState<{
|
||||
x: number;
|
||||
y: number;
|
||||
image: ImageRecord;
|
||||
} | null>(null);
|
||||
|
||||
// Measure container width before first paint to avoid a single-column flash.
|
||||
// parentRef is the scroll container. Its clientWidth already excludes the
|
||||
// scrubber because they are flex siblings, so no further adjustment is needed.
|
||||
useLayoutEffect(() => {
|
||||
const el = parentRef.current;
|
||||
if (!el) return;
|
||||
@@ -74,16 +111,18 @@ export function Timeline() {
|
||||
}, []);
|
||||
|
||||
const tileSize = tileSizeForZoom(zoomPreset);
|
||||
const groups = useMemo(() => groupImages(images), [images]);
|
||||
const scrubberYears = useMemo(() => buildScrubberYears(groups), [groups]);
|
||||
// Show as soon as there's more than one month to jump between — not gated on
|
||||
// a full year. With taken_asc sort the loaded set is oldest-first, so this
|
||||
// reflects whatever range is currently loaded.
|
||||
const showScrubber = groups.length > 1;
|
||||
|
||||
const cols = useMemo(
|
||||
() => Math.max(1, Math.floor((containerWidth - GAP) / (tileSize + GAP))),
|
||||
[containerWidth, tileSize],
|
||||
);
|
||||
|
||||
const groups = useMemo(() => groupImages(images), [images]);
|
||||
|
||||
// estimateSize must be exact so virtualizer positions groups correctly.
|
||||
// Each group height = header + rowCount * (tileSize + GAP) where the last row's
|
||||
// GAP acts as spacing between this group and the next header.
|
||||
const estimateSize = useCallback(
|
||||
(index: number): number => {
|
||||
const group = groups[index];
|
||||
@@ -101,8 +140,11 @@ export function Timeline() {
|
||||
overscan: 2,
|
||||
});
|
||||
|
||||
// Re-measure all items when cols changes so virtualizer positions stay accurate
|
||||
// after a window resize (react-virtual v3 doesn't invalidate cached sizes on its own).
|
||||
const groupsRef = useRef(groups);
|
||||
groupsRef.current = groups;
|
||||
const estimateSizeRef = useRef(estimateSize);
|
||||
estimateSizeRef.current = estimateSize;
|
||||
|
||||
useEffect(() => {
|
||||
virtualizer.measure();
|
||||
}, [cols, virtualizer]);
|
||||
@@ -110,6 +152,23 @@ export function Timeline() {
|
||||
const handleScroll = useCallback(() => {
|
||||
const el = parentRef.current;
|
||||
if (!el) return;
|
||||
|
||||
const scrollTop = el.scrollTop;
|
||||
const g = groupsRef.current;
|
||||
const es = estimateSizeRef.current;
|
||||
let cumHeight = 0;
|
||||
let newActive = 0;
|
||||
for (let i = 0; i < g.length; i++) {
|
||||
const h = es(i);
|
||||
if (cumHeight + h > scrollTop + HEADER_HEIGHT / 2) {
|
||||
newActive = i;
|
||||
break;
|
||||
}
|
||||
cumHeight += h;
|
||||
newActive = i;
|
||||
}
|
||||
setActiveGroupIndex(newActive);
|
||||
|
||||
if (el.scrollTop < 24) return;
|
||||
const nearBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 600;
|
||||
if (nearBottom && !loadingImages && images.length < totalImages) {
|
||||
@@ -140,105 +199,131 @@ export function Timeline() {
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={parentRef}
|
||||
className="relative flex-1 overflow-y-auto overflow-x-hidden min-h-0 bg-[#07080f]"
|
||||
>
|
||||
{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">
|
||||
<div className="h-5 w-5 mx-auto rounded-full border-2 border-white/20 border-t-white/60 animate-spin" />
|
||||
<p className="mt-4 text-sm text-white/40 font-medium">Loading timeline</p>
|
||||
<p className="text-xs text-white/20 mt-1">Fetching results</p>
|
||||
</div>
|
||||
</div>
|
||||
) : images.length === 0 ? (
|
||||
<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">
|
||||
<svg
|
||||
className="h-12 w-12 mx-auto text-white/10 mb-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={0.75}
|
||||
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
|
||||
/>
|
||||
</svg>
|
||||
<p className="text-sm text-white/30 font-medium">
|
||||
{imageLoadError ? "Could not load timeline" : "No media found"}
|
||||
</p>
|
||||
<p className="text-xs text-white/15 mt-1">
|
||||
{imageLoadError ?? "Add a folder to see your timeline"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ height: virtualizer.getTotalSize(), position: "relative" }}>
|
||||
{virtualizer.getVirtualItems().map((virtualItem) => {
|
||||
const group = groups[virtualItem.index];
|
||||
if (!group) return null;
|
||||
return (
|
||||
<div
|
||||
key={virtualItem.key}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: virtualItem.start,
|
||||
width: "100%",
|
||||
height: virtualItem.size,
|
||||
}}
|
||||
>
|
||||
{/* Group header */}
|
||||
<div
|
||||
className="flex items-center gap-3 px-4"
|
||||
style={{ height: HEADER_HEIGHT }}
|
||||
>
|
||||
<span className="text-sm font-semibold text-white/80 shrink-0">
|
||||
{group.label}
|
||||
</span>
|
||||
<span className="text-xs text-white/25 shrink-0 tabular-nums">
|
||||
{group.images.length}
|
||||
</span>
|
||||
<div className="flex-1 h-px bg-white/[0.06]" />
|
||||
</div>
|
||||
const scrollToGroup = useCallback(
|
||||
(index: number) => {
|
||||
virtualizer.scrollToIndex(index, { align: "start" });
|
||||
},
|
||||
[virtualizer],
|
||||
);
|
||||
|
||||
{/* Image grid — paddingBottom:GAP gives the gap below the last row,
|
||||
matching the row-to-row gap and making estimateSize exact. */}
|
||||
return (
|
||||
// Outer flex-row: fills remaining height in <main>'s flex-col, then
|
||||
// splits horizontally between the scroll area and the scrubber.
|
||||
<div className="flex flex-1 min-h-0 bg-gray-950">
|
||||
{/* Scroll container — flex-1 takes all width except the scrubber */}
|
||||
<div
|
||||
ref={parentRef}
|
||||
className="relative flex-1 overflow-y-auto overflow-x-hidden min-h-0"
|
||||
>
|
||||
{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">
|
||||
<div className="h-5 w-5 mx-auto rounded-full border-2 border-white/20 border-t-white/60 animate-spin" />
|
||||
<p className="mt-4 text-sm text-white/40 font-medium">Loading timeline</p>
|
||||
<p className="text-xs text-white/20 mt-1">Fetching results</p>
|
||||
</div>
|
||||
</div>
|
||||
) : images.length === 0 ? (
|
||||
<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">
|
||||
<svg
|
||||
className="h-12 w-12 mx-auto text-white/10 mb-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={0.75}
|
||||
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
|
||||
/>
|
||||
</svg>
|
||||
<p className="text-sm text-white/30 font-medium">
|
||||
{imageLoadError ? "Could not load timeline" : "No media found"}
|
||||
</p>
|
||||
<p className="text-xs text-white/15 mt-1">
|
||||
{imageLoadError ?? "Add a folder to see your timeline"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ height: virtualizer.getTotalSize(), position: "relative" }}>
|
||||
{virtualizer.getVirtualItems().map((virtualItem) => {
|
||||
const group = groups[virtualItem.index];
|
||||
if (!group) return null;
|
||||
return (
|
||||
<div
|
||||
key={virtualItem.key}
|
||||
style={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: `repeat(${cols}, ${tileSize}px)`,
|
||||
gap: GAP,
|
||||
paddingLeft: GAP,
|
||||
paddingRight: GAP,
|
||||
paddingBottom: GAP,
|
||||
position: "absolute",
|
||||
top: virtualItem.start,
|
||||
width: "100%",
|
||||
height: virtualItem.size,
|
||||
}}
|
||||
>
|
||||
{group.images.map((image) => (
|
||||
<ImageTile
|
||||
key={image.id}
|
||||
image={image}
|
||||
onClick={() => openImage(image)}
|
||||
onContextMenu={(event) => {
|
||||
event.preventDefault();
|
||||
setContextMenu({ x: event.clientX, y: event.clientY, image });
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className="flex items-center gap-3 px-4"
|
||||
style={{ height: HEADER_HEIGHT }}
|
||||
>
|
||||
<span className="text-sm font-semibold text-white/80 shrink-0">
|
||||
{group.label}
|
||||
</span>
|
||||
<span className="text-xs text-white/25 shrink-0 tabular-nums">
|
||||
{group.images.length}
|
||||
</span>
|
||||
<div className="flex-1 h-px bg-white/[0.06]" />
|
||||
</div>
|
||||
|
||||
{images.length > 0 && loadingImages ? (
|
||||
<div className="flex justify-center py-8">
|
||||
<div className="h-4 w-4 rounded-full border-2 border-white/20 border-t-white/60 animate-spin" />
|
||||
<div
|
||||
style={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: `repeat(${cols}, ${tileSize}px)`,
|
||||
gap: GAP,
|
||||
paddingLeft: GAP,
|
||||
paddingRight: GAP,
|
||||
paddingBottom: GAP,
|
||||
}}
|
||||
>
|
||||
{group.images.map((image) => (
|
||||
<ImageTile
|
||||
key={image.id}
|
||||
image={image}
|
||||
onClick={() => openImage(image)}
|
||||
onContextMenu={(event) => {
|
||||
event.preventDefault();
|
||||
setContextMenu({ x: event.clientX, y: event.clientY, image });
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{images.length > 0 && loadingImages ? (
|
||||
<div className="flex justify-center py-8">
|
||||
<div className="h-4 w-4 rounded-full border-2 border-white/20 border-t-white/60 animate-spin" />
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{/* Scrubber — flex sibling so it stays visible while the left panel scrolls */}
|
||||
{showScrubber ? (
|
||||
<div
|
||||
className="overflow-y-auto border-l border-white/[0.04] py-2 flex flex-col items-center gap-0.5"
|
||||
style={{ width: SCRUBBER_WIDTH }}
|
||||
>
|
||||
{scrubberYears.map((yearEntry) => (
|
||||
<ScrubberYearBlock
|
||||
key={yearEntry.year}
|
||||
yearEntry={yearEntry}
|
||||
activeGroupIndex={activeGroupIndex}
|
||||
onScrollTo={scrollToGroup}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
@@ -253,3 +338,51 @@ export function Timeline() {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface ScrubberYearBlockProps {
|
||||
yearEntry: ScrubberYear;
|
||||
activeGroupIndex: number;
|
||||
onScrollTo: (index: number) => void;
|
||||
}
|
||||
|
||||
function ScrubberYearBlock({ yearEntry, activeGroupIndex, onScrollTo }: ScrubberYearBlockProps) {
|
||||
const isYearActive = yearEntry.months.some((m) => m.groupIndex === activeGroupIndex);
|
||||
|
||||
return (
|
||||
<div className="w-full flex flex-col items-center">
|
||||
<button
|
||||
className={`w-full text-center py-0.5 text-[10px] font-semibold tracking-wide transition-colors ${
|
||||
isYearActive ? "text-white/80" : "text-white/30 hover:text-white/55"
|
||||
}`}
|
||||
onClick={() => onScrollTo(yearEntry.firstGroupIndex)}
|
||||
title={yearEntry.year}
|
||||
>
|
||||
{yearEntry.year}
|
||||
</button>
|
||||
|
||||
<div
|
||||
className="grid gap-[3px] pb-1.5"
|
||||
style={{ gridTemplateColumns: "repeat(3, 10px)" }}
|
||||
>
|
||||
{Array.from({ length: 12 }, (_, i) => {
|
||||
const monthNum = i + 1;
|
||||
const monthEntry = yearEntry.months.find((m) => m.monthNum === monthNum);
|
||||
const isActive = monthEntry !== undefined && monthEntry.groupIndex === activeGroupIndex;
|
||||
if (!monthEntry) {
|
||||
return <span key={monthNum} className="h-[10px] w-[10px]" />;
|
||||
}
|
||||
return (
|
||||
<button
|
||||
key={monthNum}
|
||||
title={`${monthEntry.label} ${yearEntry.year}`}
|
||||
onClick={() => onScrollTo(monthEntry.groupIndex)}
|
||||
className={`h-[10px] w-[10px] rounded-full transition-colors ${
|
||||
isActive ? "bg-white/70" : "bg-white/15 hover:bg-white/40"
|
||||
}`}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -31,7 +31,7 @@ export function UpdateToast() {
|
||||
</p>
|
||||
<div className="mt-3 flex items-center gap-2">
|
||||
<button
|
||||
className="rounded-md border border-emerald-400/35 bg-emerald-500/15 px-3 py-1.5 text-xs text-emerald-200 transition-colors hover:bg-emerald-500/25"
|
||||
className="rounded-md border border-emerald-400/35 bg-emerald-500/15 px-3 py-1.5 text-xs text-emerald-200 transition-colors hover:bg-emerald-500/25 light-theme:border-emerald-600/50 light-theme:bg-emerald-100 light-theme:text-emerald-700 light-theme:hover:bg-emerald-200"
|
||||
onClick={() => void installUpdate()}
|
||||
>
|
||||
Install & restart
|
||||
|
||||
@@ -282,7 +282,7 @@ export function VideoPlayer({ src }: { src: string }) {
|
||||
return (
|
||||
<div
|
||||
ref={containerRef}
|
||||
className={`relative flex h-full w-full items-center justify-center bg-black ${controlsVisible ? "" : "cursor-none"}`}
|
||||
className={`media-dark-surface relative flex h-full w-full items-center justify-center bg-black ${controlsVisible ? "" : "cursor-none"}`}
|
||||
onPointerMove={showControls}
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
>
|
||||
|
||||
+49
-3
@@ -1,5 +1,7 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
@custom-variant light-theme (&:is(html[data-theme="subtle-light"] *));
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@@ -10,11 +12,55 @@ body,
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #030712;
|
||||
background: var(--color-gray-950);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
html[data-theme="conventional-dark"] {
|
||||
--color-gray-950: #1f1f1f;
|
||||
--color-gray-900: #252525;
|
||||
--color-gray-800: #303030;
|
||||
--color-gray-700: #444444;
|
||||
--color-gray-600: #666666;
|
||||
--color-gray-500: #858585;
|
||||
--color-gray-400: #a3a3a3;
|
||||
--color-gray-300: #c4c4c4;
|
||||
--color-gray-200: #dddddd;
|
||||
--color-gray-100: #eeeeee;
|
||||
background: #1f1f1f;
|
||||
}
|
||||
|
||||
html[data-theme="subtle-light"] {
|
||||
--color-white: #18202c;
|
||||
--color-gray-950: #e9e7e2;
|
||||
--color-gray-900: #dedbd4;
|
||||
--color-gray-800: #cfcbc3;
|
||||
--color-gray-700: #aea99f;
|
||||
--color-gray-600: #817b72;
|
||||
--color-gray-500: #655f57;
|
||||
--color-gray-400: #514b44;
|
||||
--color-gray-300: #403b35;
|
||||
--color-gray-200: #302c28;
|
||||
--color-gray-100: #24211e;
|
||||
background: #e9e7e2;
|
||||
}
|
||||
|
||||
html[data-theme="subtle-light"] .media-dark-surface {
|
||||
--color-white: #ffffff;
|
||||
--color-black: #000000;
|
||||
--color-gray-950: #030712;
|
||||
--color-gray-900: #111827;
|
||||
--color-gray-800: #1f2937;
|
||||
--color-gray-700: #374151;
|
||||
--color-gray-600: #4b5563;
|
||||
--color-gray-500: #6b7280;
|
||||
--color-gray-400: #9ca3af;
|
||||
--color-gray-300: #d1d5db;
|
||||
--color-gray-200: #e5e7eb;
|
||||
--color-gray-100: #f3f4f6;
|
||||
}
|
||||
|
||||
/* Custom scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
@@ -24,9 +70,9 @@ body,
|
||||
background: transparent;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: color-mix(in srgb, var(--color-white, #fff) 12%, transparent);
|
||||
border-radius: 3px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
background: color-mix(in srgb, var(--color-white, #fff) 22%, transparent);
|
||||
}
|
||||
|
||||
+46
-2
@@ -11,6 +11,7 @@ import { notifyTaskComplete } from "./notifications";
|
||||
// Keyed as `${folderId}:embedding` or `${folderId}:tagging`.
|
||||
const notificationTimers = new Map<string, ReturnType<typeof setTimeout>>();
|
||||
const NOTIFICATION_DEBOUNCE_MS = 6000;
|
||||
const THEME_KEY = "phokus-theme";
|
||||
|
||||
export interface Folder {
|
||||
id: number;
|
||||
@@ -19,6 +20,7 @@ export interface Folder {
|
||||
image_count: number;
|
||||
indexed_at: string | null;
|
||||
scan_error: string | null;
|
||||
sort_order: number;
|
||||
}
|
||||
|
||||
export type MediaKind = "image" | "video";
|
||||
@@ -33,6 +35,7 @@ export type AiRating = "general" | "sensitive" | "questionable" | "explicit";
|
||||
export type TaggingQueueScope = "all" | "selected";
|
||||
export type SimilarScope = "all_media" | "current_folder";
|
||||
export type ExploreMode = "visual" | "tags";
|
||||
export type AppTheme = "phokus" | "subtle-light" | "conventional-dark";
|
||||
|
||||
export interface ImageRecord {
|
||||
id: number;
|
||||
@@ -341,6 +344,7 @@ interface GalleryState {
|
||||
taggingQueueFolderIds: number[];
|
||||
mutedFolderIds: number[];
|
||||
notificationsPaused: boolean;
|
||||
theme: AppTheme;
|
||||
// Per-folder background-worker pause flags, shared by the BackgroundTasks
|
||||
// bar and the sidebar folder context menu.
|
||||
workerPaused: Record<number, Record<WorkerKey, boolean>>;
|
||||
@@ -385,6 +389,7 @@ interface GalleryState {
|
||||
reindexFolder: (folderId: number) => Promise<void>;
|
||||
renameFolder: (folderId: number, newName: string) => Promise<void>;
|
||||
updateFolderPath: (folderId: number, newPath: string) => Promise<void>;
|
||||
reorderFolders: (folderIds: number[]) => Promise<void>;
|
||||
selectFolder: (folderId: number | null) => void;
|
||||
setViewFolderScope: (folderId: number | null) => void;
|
||||
loadImages: (reset?: boolean) => Promise<void>;
|
||||
@@ -436,6 +441,7 @@ interface GalleryState {
|
||||
toggleMutedFolder: (folderId: number) => void;
|
||||
loadNotificationsPaused: () => Promise<void>;
|
||||
setNotificationsPaused: (paused: boolean) => void;
|
||||
setTheme: (theme: AppTheme) => void;
|
||||
loadWorkerStates: () => Promise<void>;
|
||||
setWorkerPaused: (folderId: number, worker: WorkerKey, paused: boolean) => void;
|
||||
setAllWorkersPaused: (folderId: number, paused: boolean) => void;
|
||||
@@ -487,6 +493,10 @@ interface GalleryState {
|
||||
}
|
||||
|
||||
const PAGE_SIZE = 200;
|
||||
// Timeline loads its full filtered set in one indexed taken_at query so the
|
||||
// scrubber can span the entire library and jump to any month. Rendering is
|
||||
// virtualized, so the cost is one query + records in memory — fine at this scale.
|
||||
const TIMELINE_PAGE_SIZE = 100000;
|
||||
const AI_CAPTIONS_ENABLED_KEY = "phokus.aiCaptionsEnabled";
|
||||
const SIMILAR_DISTANCE_THRESHOLD = 0.24;
|
||||
|
||||
@@ -502,6 +512,15 @@ function initialAiCaptionsEnabled(): boolean {
|
||||
return window.localStorage.getItem(AI_CAPTIONS_ENABLED_KEY) === "true";
|
||||
}
|
||||
|
||||
function initialTheme(): AppTheme {
|
||||
if (typeof window === "undefined") return "phokus";
|
||||
const saved = window.localStorage.getItem(THEME_KEY);
|
||||
const theme: AppTheme =
|
||||
saved === "subtle-light" || saved === "conventional-dark" ? saved : "phokus";
|
||||
document.documentElement.dataset.theme = theme;
|
||||
return theme;
|
||||
}
|
||||
|
||||
function mergeIntoVisibleWindow(
|
||||
currentImages: ImageRecord[],
|
||||
newImages: ImageRecord[],
|
||||
@@ -726,6 +745,7 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
|
||||
taggingQueueFolderIds: [],
|
||||
mutedFolderIds: [],
|
||||
notificationsPaused: false,
|
||||
theme: initialTheme(),
|
||||
workerPaused: {},
|
||||
|
||||
appVersion: null,
|
||||
@@ -840,6 +860,24 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
|
||||
await loadBackgroundJobProgress();
|
||||
},
|
||||
|
||||
reorderFolders: async (folderIds) => {
|
||||
const previous = get().folders;
|
||||
const byId = new Map(previous.map((folder) => [folder.id, folder]));
|
||||
const folders = folderIds
|
||||
.map((id, index) => {
|
||||
const folder = byId.get(id);
|
||||
return folder ? { ...folder, sort_order: index + 1 } : null;
|
||||
})
|
||||
.filter((folder): folder is Folder => folder !== null);
|
||||
set({ folders });
|
||||
try {
|
||||
await invoke("reorder_folders", { params: { folder_ids: folderIds } });
|
||||
} catch (error) {
|
||||
set({ folders: previous });
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
|
||||
selectFolder: (folderId) => {
|
||||
set({ selectedFolderId: folderId, images: [], loadedCount: 0, collectionTitle: null, similarSourceImageId: null, similarHasMore: false, activeView: "gallery", failedEmbeddingsOnly: false, imageLoadError: null });
|
||||
void get().loadImages(true);
|
||||
@@ -874,7 +912,7 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
|
||||
},
|
||||
|
||||
loadImages: async (reset = false) => {
|
||||
const { selectedFolderId, search, sort, loadedCount, mediaFilter, favoritesOnly, minimumRating, failedEmbeddingsOnly } = get();
|
||||
const { selectedFolderId, search, sort, loadedCount, mediaFilter, favoritesOnly, minimumRating, failedEmbeddingsOnly, activeView } = get();
|
||||
const parsedSearch = parseSearchValue(search);
|
||||
const requestToken = ++galleryRequestToken;
|
||||
set({ loadingImages: true, imageLoadError: null });
|
||||
@@ -963,7 +1001,7 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
|
||||
embedding_failed_only: failedEmbeddingsOnly,
|
||||
sort,
|
||||
offset,
|
||||
limit: PAGE_SIZE,
|
||||
limit: activeView === "timeline" ? TIMELINE_PAGE_SIZE : PAGE_SIZE,
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1557,6 +1595,12 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
|
||||
void invoke("set_notifications_paused", { paused }).catch(() => {});
|
||||
},
|
||||
|
||||
setTheme: (theme) => {
|
||||
window.localStorage.setItem(THEME_KEY, theme);
|
||||
document.documentElement.dataset.theme = theme;
|
||||
set({ theme });
|
||||
},
|
||||
|
||||
loadWorkerStates: async () => {
|
||||
const folderIds = get().folders.map((folder) => folder.id);
|
||||
if (folderIds.length === 0) {
|
||||
|
||||
Reference in New Issue
Block a user