JezzWTF/phokus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine explore and settings theming

Browse Source
This commit is contained in:
LyAhn
2026-06-20 18:08:39 +01:00
parent a4c928345c
commit 1df75fd490
3 changed files with 293 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/FolderScopeDropdown.tsx
+5 -5
View File
@@ -33,10 +33,10 @@ export function FolderScopeDropdown() {
};
return (
<div ref={ref} className="relative">
<div ref={ref} className="feature-scope-dropdown relative">
<button
onClick={() => setOpen((v) => !v)}
className={`flex max-w-56 items-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs transition-colors ${
className={`feature-scope-trigger flex max-w-56 items-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs transition-colors ${
open
? "border-white/15 bg-white/8 text-white light-theme:border-gray-700/50 light-theme:bg-gray-900 light-theme:text-white"
: "border-white/8 bg-transparent text-gray-400 hover:border-white/15 hover:text-gray-200 light-theme:border-gray-700/40 light-theme:text-gray-600 light-theme:hover:border-gray-700 light-theme:hover:bg-gray-900 light-theme:hover:text-white"
@@ -55,9 +55,9 @@ export function FolderScopeDropdown() {
</svg>
</button>
{open ? (
<div className="absolute right-0 top-full z-30 mt-1.5 max-h-80 min-w-52 overflow-y-auto rounded-xl border border-white/10 bg-gray-950/98 p-1 shadow-2xl backdrop-blur light-theme:border-gray-700/50">
<div className="feature-scope-menu absolute right-0 top-full z-30 mt-1.5 max-h-80 min-w-52 overflow-y-auto rounded-xl border border-white/10 bg-gray-950/98 p-1 shadow-2xl backdrop-blur light-theme:border-gray-700/50">
<button
className={`flex w-full items-center justify-between gap-3 rounded-lg px-3 py-2 text-left text-sm transition-colors ${
className={`feature-scope-option flex w-full items-center justify-between gap-3 rounded-lg px-3 py-2 text-left text-sm transition-colors ${
selectedFolderId === null ? "bg-white/6 text-white light-theme:bg-gray-900 light-theme:text-white" : "text-gray-400 hover:bg-white/5 hover:text-white light-theme:text-gray-600 light-theme:hover:bg-gray-900 light-theme:hover:text-white"
}`}
onClick={() => select(null)}
@@ -74,7 +74,7 @@ export function FolderScopeDropdown() {
return (
<button
key={folder.id}
className={`flex w-full items-center justify-between gap-3 rounded-lg px-3 py-2 text-left text-sm transition-colors ${
className={`feature-scope-option flex w-full items-center justify-between gap-3 rounded-lg px-3 py-2 text-left text-sm transition-colors ${
active ? "bg-white/6 text-white light-theme:bg-gray-900 light-theme:text-white" : "text-gray-400 hover:bg-white/5 hover:text-white light-theme:text-gray-600 light-theme:hover:bg-gray-900 light-theme:hover:text-white"
}`}
onClick={() => select(folder.id)}
src/components/TagCloud.tsx
+56 -33
View File
@@ -1,5 +1,5 @@
import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
import { motion } from "framer-motion";
import { motion, useReducedMotion } from "framer-motion";
import { convertFileSrc } from "@tauri-apps/api/core";
import { ExploreTagEntry, TagCloudEntry, useGalleryStore } from "../store";
import { FolderScopeDropdown } from "./FolderScopeDropdown";
@@ -110,29 +110,44 @@ function buildCloud(entries: TagCloudEntry[], containerW: number, containerH: nu
}));
}
function CloudCard({ node, onOpen }: { node: PlacedNode; onOpen: (imageIds: number[]) => void }) {
function CloudCard({ node, onOpen, animated }: { node: PlacedNode; onOpen: (imageIds: number[]) => void; animated: boolean }) {
const src = node.entry.thumbnail_path ? convertFileSrc(node.entry.thumbnail_path) : null;
const { w, h, accent } = node;
const driftTransition = {
duration: node.driftDuration,
ease: "easeInOut" as const,
delay: seeded(node.index + 41) * 1.6,
repeat: 1,
repeatType: "reverse" as const,
};
return (
<motion.button
className="group absolute overflow-hidden rounded-2xl border border-white/8 bg-white/[0.04] text-left shadow-[0_8px_40px_rgba(0,0,0,0.5)] focus:outline-none focus-visible:ring-2 focus-visible:ring-white/30"
className="explore-cluster-card group absolute overflow-hidden rounded-2xl border border-white/8 bg-white/[0.04] text-left shadow-[0_8px_28px_rgba(0,0,0,0.38)] focus:outline-none focus-visible:ring-2 focus-visible:ring-white/30"
style={{ width: w, height: h, left: node.x - w / 2, top: node.y - h / 2 }}
initial={{ opacity: 0, scale: 0.75 }}
animate={{
initial={animated ? { opacity: 0, scale: 0.82, rotate: node.rotateSeed } : { opacity: 0, scale: 0.96 }}
animate={
animated
? {
opacity: 1,
scale: 1,
x: [0, node.driftX, 0],
y: [0, node.driftY, 0],
rotate: [node.rotateSeed, node.rotateSeed + 1.4, node.rotateSeed],
}}
transition={{
opacity: { duration: 0.3, delay: Math.min(node.index * 0.035, 0.7) },
scale: { duration: 0.3, delay: Math.min(node.index * 0.035, 0.7) },
x: { duration: node.driftDuration, repeat: Infinity, ease: "easeInOut", delay: seeded(node.index + 41) * 3 },
y: { duration: node.driftDuration + 1.6, repeat: Infinity, ease: "easeInOut", delay: seeded(node.index + 51) * 3 },
rotate: { duration: node.driftDuration + 0.9, repeat: Infinity, ease: "easeInOut" },
}}
x: [0, node.driftX * 0.65, 0],
y: [0, node.driftY * 0.65, 0],
rotate: [node.rotateSeed, node.rotateSeed + 0.8, node.rotateSeed],
}
: { opacity: 1, scale: 1, rotate: node.rotateSeed }
}
transition={
animated
? {
opacity: { duration: 0.24, delay: Math.min(node.index * 0.024, 0.45) },
scale: { duration: 0.24, delay: Math.min(node.index * 0.024, 0.45) },
x: driftTransition,
y: { ...driftTransition, duration: node.driftDuration + 1.2, delay: seeded(node.index + 51) * 1.6 },
rotate: { ...driftTransition, duration: node.driftDuration + 0.8, delay: seeded(node.index + 61) * 1.2 },
}
: { opacity: { duration: 0.18, delay: Math.min(node.index * 0.016, 0.28) }, scale: { duration: 0.18, delay: Math.min(node.index * 0.016, 0.28) } }
}
whileHover={{ scale: 1.06, rotate: 0, transition: { duration: 0.18 } }}
onClick={() => onOpen(node.entry.image_ids)}
title={`Open cluster — ${node.entry.count.toLocaleString()} images`}
@@ -143,22 +158,24 @@ function CloudCard({ node, onOpen }: { node: PlacedNode; onOpen: (imageIds: numb
alt=""
className="absolute inset-0 h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
draggable={false}
loading="lazy"
decoding="async"
/>
) : (
<div className="absolute inset-0 bg-gradient-to-br from-white/[0.07] to-transparent" />
)}
<div className="absolute inset-0 bg-gradient-to-t from-black/85 via-black/20 to-transparent" />
<div className="explore-cluster-overlay absolute inset-0 bg-gradient-to-t from-black/85 via-black/20 to-transparent" />
{/* Accent glow on hover */}
<div
className="absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100"
style={{ background: `radial-gradient(ellipse at bottom, ${accent}25, transparent 70%)` }}
/>
<div className="absolute inset-x-0 bottom-0 p-3">
<div className="mb-2 h-px rounded-full" style={{ background: `linear-gradient(to right, ${accent}80, transparent)` }} />
<div className="explore-cluster-rule mb-2 h-px rounded-full" style={{ background: `linear-gradient(to right, ${accent}80, transparent)` }} />
<div className="flex items-end justify-between gap-2">
<div>
<p className="text-[9px] uppercase tracking-[0.18em] text-white/35">Cluster</p>
<p className="text-base font-semibold leading-none text-white">{node.entry.count.toLocaleString()}</p>
<p className="explore-cluster-label text-[9px] uppercase tracking-[0.18em] text-white/35">Cluster</p>
<p className="explore-cluster-count text-base font-semibold leading-none text-white">{node.entry.count.toLocaleString()}</p>
</div>
<span
className="rounded-full border px-2 py-0.5 text-[9px] uppercase tracking-[0.1em] opacity-0 transition-opacity duration-200 group-hover:opacity-100"
@@ -197,7 +214,7 @@ function TagWord({
animate={{ opacity: 0.4 + ratio * 0.6, scale: 1 }}
transition={{ delay: Math.min(index * 0.008, 0.55), duration: 0.22 }}
whileHover={{ scale: 1.2, opacity: 1, rotate: 0, transition: { duration: 0.14 } }}
className="group inline-flex items-center gap-1 rounded-full px-2 py-1 transition-colors hover:bg-white/[0.07]"
className="explore-tag-word group inline-flex items-center gap-1 rounded-full px-2 py-1 transition-colors hover:bg-white/[0.07]"
style={{ fontSize, rotate: tilt }}
onClick={() => onSearch(entry.tag)}
title={`${entry.tag} — ${entry.count.toLocaleString()} images`}
@@ -221,7 +238,7 @@ function TagWord({
function Spinner() {
return (
<motion.div
className="h-5 w-5 rounded-full border-2 border-white/15 border-t-white/50"
className="explore-spinner h-5 w-5 rounded-full border-2 border-white/15 border-t-white/50"
animate={{ rotate: 360 }}
transition={{ duration: 0.85, repeat: Infinity, ease: "linear" }}
/>
@@ -238,6 +255,7 @@ function ClusterCloud({
entries: TagCloudEntry[];
onOpen: (imageIds: number[]) => void;
}) {
const reducedMotion = useReducedMotion();
const canvasRef = useRef<HTMLDivElement>(null);
const [canvasSize, setCanvasSize] = useState({ w: 0, h: 0 });
@@ -261,9 +279,14 @@ function ClusterCloud({
return (
<div ref={canvasRef} className="relative min-h-0 flex-1 overflow-hidden">
<div className="pointer-events-none absolute inset-0 opacity-[0.07] [background-image:radial-gradient(circle,rgba(255,255,255,0.6)_1px,transparent_1px)] [background-size:28px_28px]" />
<div className="explore-cluster-grid pointer-events-none absolute inset-0 opacity-[0.07] [background-image:radial-gradient(circle,rgba(255,255,255,0.6)_1px,transparent_1px)] [background-size:28px_28px]" />
{nodes.map((node) => (
<CloudCard key={`${node.entry.representative_image_id}:${node.index}`} node={node} onOpen={onOpen} />
<CloudCard
key={`${node.entry.representative_image_id}:${node.index}`}
node={node}
onOpen={onOpen}
animated={!reducedMotion && node.index < 12}
/>
))}
</div>
);
@@ -300,13 +323,13 @@ export function TagCloud() {
const entryCount = exploreMode === "visual" ? tagCloudEntries.length : exploreTagEntries.length;
return (
<div className="flex min-h-0 flex-1 flex-col overflow-hidden bg-[radial-gradient(ellipse_at_top,rgba(59,130,246,0.08),transparent_50%),radial-gradient(ellipse_at_80%_75%,rgba(168,85,247,0.07),transparent_40%),#07080f]">
<div className="explore-view flex min-h-0 flex-1 flex-col overflow-hidden bg-[radial-gradient(ellipse_at_top,rgba(59,130,246,0.08),transparent_50%),radial-gradient(ellipse_at_80%_75%,rgba(168,85,247,0.07),transparent_40%),#07080f]">
{/* Header */}
<div className="shrink-0 border-b border-white/[0.05] px-6 py-4">
<div className="explore-header shrink-0 border-b border-white/[0.05] px-6 py-4">
<div className="flex items-center justify-between gap-4">
<div className="min-w-0">
<h2 className="text-[15px] font-semibold text-white">Explore</h2>
<p className="mt-0.5 truncate text-[11px] text-white/30">
<h2 className="explore-title text-[15px] font-semibold text-white">Explore</h2>
<p className="explore-subtitle mt-0.5 truncate text-[11px] text-white/30">
{loading
? exploreMode === "visual" ? "Computing visual clusters…" : "Loading tags…"
: hasEntries
@@ -320,9 +343,9 @@ export function TagCloud() {
</div>
<div className="flex shrink-0 items-center gap-2">
<FolderScopeDropdown />
<div className="flex rounded-lg border border-white/8 bg-white/[0.03] p-0.5">
<div className="explore-mode-toggle flex rounded-lg border border-white/8 bg-white/[0.03] p-0.5">
<button
className={`rounded-md px-3 py-1.5 text-xs transition-colors ${
className={`explore-mode-button rounded-md px-3 py-1.5 text-xs transition-colors ${
exploreMode === "visual" ? "bg-white/10 text-white" : "text-gray-500 hover:text-gray-300"
}`}
onClick={() => setExploreMode("visual")}
@@ -330,7 +353,7 @@ export function TagCloud() {
Clusters
</button>
<button
className={`rounded-md px-3 py-1.5 text-xs transition-colors ${
className={`explore-mode-button rounded-md px-3 py-1.5 text-xs transition-colors ${
exploreMode === "tags" ? "bg-white/10 text-white" : "text-gray-500 hover:text-gray-300"
}`}
onClick={() => setExploreMode("tags")}
@@ -343,13 +366,13 @@ export function TagCloud() {
</div>
{loading ? (
<div className="flex flex-1 items-center justify-center gap-3 text-white/25">
<div className="explore-empty flex flex-1 items-center justify-center gap-3 text-white/25">
<Spinner />
<span className="text-sm">{exploreMode === "visual" ? "Computing clusters…" : "Loading tags…"}</span>
</div>
) : !hasEntries ? (
<div className="flex flex-1 items-center justify-center px-8">
<p className="max-w-xs text-center text-sm leading-relaxed text-white/25">
<p className="explore-empty max-w-xs text-center text-sm leading-relaxed text-white/25">
{exploreMode === "visual"
? "No visual clusters yet. Images need embeddings before they can be grouped. Check indexing progress in the sidebar."
: "No tags yet. Run the AI tagger from Settings, or add tags manually in the image preview."}
src/index.css
+230
View File
@@ -61,6 +61,236 @@ html[data-theme="subtle-light"] .media-dark-surface {
--color-gray-100: #f3f4f6;
}
html[data-theme="subtle-light"] .settings-modal {
background: #f4f2ea !important;
border-color: #d6d1c7 !important;
color: #1f2937 !important;
box-shadow: 0 24px 80px rgb(0 0 0 / 0.24) !important;
}
html[data-theme="subtle-light"] .settings-modal aside {
background: #ece9e1 !important;
border-color: #d6d1c7 !important;
}
html[data-theme="subtle-light"] .settings-modal aside > div:first-child {
border-color: #d6d1c7 !important;
}
html[data-theme="subtle-light"] .settings-modal .settings-nav-active {
background: #d8d4ca !important;
color: #111827 !important;
}
html[data-theme="subtle-light"] .settings-modal .settings-nav-inactive {
background: transparent !important;
color: #4b5563 !important;
}
html[data-theme="subtle-light"] .settings-modal .settings-nav-inactive:hover {
background: #e2ded5 !important;
color: #111827 !important;
}
html[data-theme="subtle-light"] .settings-modal .settings-model-card,
html[data-theme="subtle-light"] .settings-modal .settings-light-panel {
background: #fbfaf6 !important;
border-color: #d6d1c7 !important;
color: #1f2937 !important;
}
html[data-theme="subtle-light"] .settings-modal button:not([role="switch"]) {
background: #fbfaf6 !important;
border-color: #cfc8ba !important;
color: #374151 !important;
}
html[data-theme="subtle-light"] .settings-modal button:not([role="switch"]):hover {
background: #eeeae0 !important;
color: #111827 !important;
}
html[data-theme="subtle-light"] .settings-modal input {
background: #ffffff !important;
border-color: #cfc8ba !important;
color: #111827 !important;
}
html[data-theme="subtle-light"] .settings-modal .text-white,
html[data-theme="subtle-light"] .settings-modal .text-gray-200,
html[data-theme="subtle-light"] .settings-modal .text-gray-300,
html[data-theme="subtle-light"] .settings-modal .text-gray-400 {
color: #111827 !important;
}
html[data-theme="subtle-light"] .settings-modal .text-gray-500,
html[data-theme="subtle-light"] .settings-modal .text-gray-600 {
color: #5f5a52 !important;
}
html[data-theme="subtle-light"] .settings-modal .text-emerald-200,
html[data-theme="subtle-light"] .settings-modal .text-emerald-300 {
color: #047857 !important;
}
html[data-theme="subtle-light"] .settings-modal .text-sky-300 {
color: #0369a1 !important;
}
html[data-theme="subtle-light"] .settings-modal .text-amber-200,
html[data-theme="subtle-light"] .settings-modal .text-amber-300 {
color: #b45309 !important;
}
html[data-theme="subtle-light"] .settings-modal .text-red-200 {
color: #b91c1c !important;
}
html[data-theme="subtle-light"] .settings-modal .bg-white\/10,
html[data-theme="subtle-light"] .settings-modal .bg-white\/5,
html[data-theme="subtle-light"] .settings-modal .bg-white\/\[0\.025\],
html[data-theme="subtle-light"] .settings-modal .bg-white\/\[0\.04\],
html[data-theme="subtle-light"] .settings-modal .bg-white\/\[0\.045\],
html[data-theme="subtle-light"] .settings-modal .bg-white\/\[0\.055\] {
background: #fbfaf6 !important;
}
html[data-theme="subtle-light"] .settings-modal .border-white\/10,
html[data-theme="subtle-light"] .settings-modal .border-white\/\[0\.05\],
html[data-theme="subtle-light"] .settings-modal .border-white\/\[0\.06\],
html[data-theme="subtle-light"] .settings-modal .border-white\/\[0\.07\] {
border-color: #d6d1c7 !important;
}
html[data-theme="subtle-light"] .explore-view {
background:
radial-gradient(ellipse at top, rgb(59 130 246 / 0.08), transparent 48%),
radial-gradient(ellipse at 80% 75%, rgb(16 185 129 / 0.07), transparent 42%),
#f4f2ea !important;
color: #1f2937 !important;
}
html[data-theme="subtle-light"] .explore-header {
background: #f4f2ea !important;
border-color: #d8d2c7 !important;
}
html[data-theme="subtle-light"] .explore-title {
color: #111827 !important;
}
html[data-theme="subtle-light"] .explore-subtitle,
html[data-theme="subtle-light"] .explore-empty {
color: #7a746b !important;
}
html[data-theme="subtle-light"] .explore-mode-toggle {
background: #ece8dd !important;
border-color: #d0c8ba !important;
}
html[data-theme="subtle-light"] .explore-mode-button {
background: transparent !important;
color: #4b5563 !important;
}
html[data-theme="subtle-light"] .explore-mode-button:hover {
background: #e0dbcf !important;
color: #111827 !important;
}
html[data-theme="subtle-light"] .explore-mode-button.bg-white\/10 {
background: #d8d4ca !important;
color: #111827 !important;
}
html[data-theme="subtle-light"] .explore-cluster-grid {
background-image: radial-gradient(circle, rgb(31 41 55 / 0.18) 1px, transparent 1px) !important;
opacity: 0.16 !important;
}
html[data-theme="subtle-light"] .explore-cluster-card {
background: #fbfaf6 !important;
border-color: #d8d2c7 !important;
box-shadow: 0 14px 36px rgb(28 25 23 / 0.18) !important;
}
html[data-theme="subtle-light"] .explore-cluster-card:hover {
box-shadow: 0 18px 44px rgb(28 25 23 / 0.22) !important;
}
html[data-theme="subtle-light"] .explore-cluster-overlay {
background: linear-gradient(
to top,
rgb(251 250 246 / 0.9),
rgb(251 250 246 / 0.52) 34%,
rgb(251 250 246 / 0.06) 68%,
transparent
) !important;
}
html[data-theme="subtle-light"] .explore-cluster-label {
color: #6b6257 !important;
}
html[data-theme="subtle-light"] .explore-cluster-count {
color: #111827 !important;
}
html[data-theme="subtle-light"] .explore-tag-word:hover {
background: #e8e2d6 !important;
}
html[data-theme="subtle-light"] .explore-tag-word span:first-child {
color: #374151 !important;
}
html[data-theme="subtle-light"] .explore-spinner {
border-color: rgb(17 24 39 / 0.18) !important;
border-top-color: rgb(17 24 39 / 0.55) !important;
}
html[data-theme="subtle-light"] .feature-scope-trigger {
background: #f8f6ef !important;
border-color: #d0c8ba !important;
color: #4b5563 !important;
}
html[data-theme="subtle-light"] .feature-scope-trigger:hover,
html[data-theme="subtle-light"] .feature-scope-dropdown:has(.feature-scope-menu) .feature-scope-trigger {
background: #ece8dd !important;
border-color: #bfb6a7 !important;
color: #111827 !important;
}
html[data-theme="subtle-light"] .feature-scope-menu {
background: #fbfaf6 !important;
border-color: #d0c8ba !important;
color: #1f2937 !important;
box-shadow: 0 18px 44px rgb(28 25 23 / 0.2) !important;
}
html[data-theme="subtle-light"] .feature-scope-option {
color: #4b5563 !important;
}
html[data-theme="subtle-light"] .feature-scope-option:hover {
background: #ece8dd !important;
color: #111827 !important;
}
html[data-theme="subtle-light"] .feature-scope-option.bg-white\/6 {
background: #d8d4ca !important;
color: #111827 !important;
}
@media (prefers-reduced-motion: reduce) {
.explore-cluster-card,
.explore-cluster-card img {
transition-duration: 0.01ms !important;
}
}
/* Custom scrollbar */
::-webkit-scrollbar {
width: 6px;