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

refactor(onboarding): play animations once with replay, fix search demo results

Browse Source 
Two refinements from testing:
- the gallery-reveal, pipeline-drain, and search-typing animations looped
  forever; they now play once and stop, with a Replay button to re-run
- the search demo's result tiles didn't match the queries. Now: a filename
  search returns one exact file, '/s golden sunset over water' shows only
  ocean-sunset stills (added a second), and '/t landscape' shows the three
  actual landscapes (valleys + alpine lake), not a foggy forest
This commit is contained in:
LyAhn
2026-06-13 09:19:38 +01:00
parent f8e981c6f6
commit 09810cb868
5 changed files with 121 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/onboarding/sunset2.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

src/components/onboarding/StepGalleryPreview.tsx
+24 -19
View File
@@ -1,8 +1,7 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { FakeTile } from "./fakes"; import { FakeTile, ReplayButton } from "./fakes";
const TILE_COUNT = 12; const REVEAL_MS = 280;
const REVEAL_MS = 350;
const TILE_PROPS: { favorite?: boolean; rating?: number; duration?: string }[] = [ const TILE_PROPS: { favorite?: boolean; rating?: number; duration?: string }[] = [
{}, {},
@@ -19,17 +18,20 @@ const TILE_PROPS: { favorite?: boolean; rating?: number; duration?: string }[] =
{}, {},
]; ];
/// Placeholder tiles "loading in" one by one, looping, to show how the grid const TILE_COUNT = TILE_PROPS.length;
/// fills while thumbnails are generated.
/// Placeholder tiles "loading in" once (skeleton → image), then stopping fully
/// revealed with a replay control.
export function StepGalleryPreview() { export function StepGalleryPreview() {
const [revealed, setRevealed] = useState(0); const [revealed, setRevealed] = useState(0);
useEffect(() => { useEffect(() => {
const timer = setInterval(() => { if (revealed >= TILE_COUNT) return;
setRevealed((current) => (current >= TILE_COUNT + 4 ? 0 : current + 1)); const timer = setTimeout(() => setRevealed((n) => n + 1), REVEAL_MS);
}, REVEAL_MS); return () => clearTimeout(timer);
return () => clearInterval(timer); }, [revealed]);
}, []);
const finished = revealed >= TILE_COUNT;
return ( return (
<div> <div>
@@ -44,15 +46,18 @@ export function StepGalleryPreview() {
))} ))}
</div> </div>
<div className="mt-6 divide-y divide-white/[0.05] text-xs leading-relaxed text-gray-500"> <div className="mt-6 flex items-start justify-between gap-4">
<p className="py-2.5"> <div className="divide-y divide-white/[0.05] text-xs leading-relaxed text-gray-500">
<span className="text-gray-300">Click any tile</span> to open the lightbox — keyboard navigation, <p className="pb-2.5">
zoom, inline tag editing, ratings, and a full video player. <span className="text-gray-300">Click any tile</span> to open the lightbox — keyboard navigation,
</p> zoom, inline tag editing, ratings, and a full video player.
<p className="py-2.5"> </p>
<span className="text-gray-300">The toolbar</span> filters by type, favorites, or rating, sorts by <p className="pt-2.5">
date/name/size, and switches grid density. <span className="text-gray-300">The toolbar</span> filters by type, favorites, or rating, sorts by
</p> date/name/size, and switches grid density.
</p>
</div>
{finished ? <ReplayButton onClick={() => setRevealed(0)} /> : null}
</div> </div>
</div> </div>
); );
src/components/onboarding/StepPipeline.tsx
+45 -29
View File
@@ -1,29 +1,40 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { FakeProgressBar, FakeStageTag } from "./fakes"; import { FakeProgressBar, FakeStageTag, ReplayButton } from "./fakes";
const STAGES = ["Thumbnails", "Metadata", "Embeddings", "Tags"] as const; const STAGES = ["Thumbnails", "Metadata", "Embeddings", "Tags"] as const;
const STAGE_TOTAL = 128; const STAGE_TOTAL = 128;
const TICK_MS = 90; const TICK_MS = 80;
const STEP_PER_TICK = 6; const STEP_PER_TICK = 8;
/// A looping, entirely fake render of the background-tasks bar: each stage /// A one-shot fake of the background-tasks bar: each stage drains in order,
/// drains in order, then the cycle restarts. /// then it stops at "all done" with a replay control.
export function StepPipeline() { export function StepPipeline() {
const [stageIndex, setStageIndex] = useState(0); const [stageIndex, setStageIndex] = useState(0);
const [done, setDone] = useState(0); const [filled, setFilled] = useState(0);
const finished = stageIndex >= STAGES.length;
useEffect(() => { useEffect(() => {
const timer = setInterval(() => { if (finished) return;
setDone((current) => { const timer = setTimeout(() => {
if (current + STEP_PER_TICK < STAGE_TOTAL) return current + STEP_PER_TICK; // Read from the closure and call setters directly — nesting one setter
setStageIndex((stage) => (stage + 1) % STAGES.length); // inside another's updater double-advances under React StrictMode.
return 0; if (filled + STEP_PER_TICK < STAGE_TOTAL) {
}); setFilled(filled + STEP_PER_TICK);
} else {
setStageIndex(stageIndex + 1);
setFilled(0);
}
}, TICK_MS); }, TICK_MS);
return () => clearInterval(timer); return () => clearTimeout(timer);
}, []); }, [filled, stageIndex, finished]);
const remaining = STAGE_TOTAL - done; const replay = () => {
setStageIndex(0);
setFilled(0);
};
const remaining = STAGE_TOTAL - filled;
return ( return (
<div> <div>
@@ -41,32 +52,37 @@ export function StepPipeline() {
<div className="mt-3 rounded-lg border border-white/[0.07] bg-white/[0.02] px-4 py-3"> <div className="mt-3 rounded-lg border border-white/[0.07] bg-white/[0.02] px-4 py-3">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<span className="relative flex h-1.5 w-1.5 shrink-0"> <span className="relative flex h-1.5 w-1.5 shrink-0">
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-400 opacity-60" /> {!finished ? (
<span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-blue-400" /> <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-400 opacity-60" />
) : null}
<span className={`relative inline-flex h-1.5 w-1.5 rounded-full ${finished ? "bg-emerald-400" : "bg-blue-400"}`} />
</span> </span>
<span className="text-[13px] font-medium text-white/60">Holiday Photos</span> <span className="text-[13px] font-medium text-white/60">Holiday Photos</span>
<div className="flex items-center gap-1.5"> <div className="flex items-center gap-1.5">
{STAGES.map((stage, i) => ( {STAGES.map((stage, i) => (
<FakeStageTag <FakeStageTag
key={stage} key={stage}
label={i === stageIndex ? `${stage} · ${remaining}` : stage} label={!finished && i === stageIndex ? `${stage} · ${remaining}` : stage}
state={i < stageIndex ? "done" : i === stageIndex ? "active" : "waiting"} state={finished || i < stageIndex ? "done" : i === stageIndex ? "active" : "waiting"}
/> />
))} ))}
</div> </div>
<FakeProgressBar fraction={done / STAGE_TOTAL} className="ml-auto w-24" /> <FakeProgressBar fraction={finished ? 1 : filled / STAGE_TOTAL} className="ml-auto w-24" />
</div> </div>
</div> </div>
<div className="mt-6 divide-y divide-white/[0.05] text-xs leading-relaxed text-gray-500"> <div className="mt-6 flex items-start justify-between gap-4">
<p className="py-2.5"> <div className="divide-y divide-white/[0.05] text-xs leading-relaxed text-gray-500">
<span className="text-gray-300">It's all interruptible.</span> Close the app whenever you like — <p className="pb-2.5">
the queue picks up where it left off next launch. <span className="text-gray-300">It's all interruptible.</span> Close the app whenever you like —
</p> the queue picks up where it left off next launch.
<p className="py-2.5"> </p>
<span className="text-gray-300">Per-folder control.</span> Right-click a folder in the sidebar to <p className="pt-2.5">
pause its background work, and click the bar itself to expand a detailed per-folder view. <span className="text-gray-300">Per-folder control.</span> Right-click a folder in the sidebar to
</p> pause its background work, and click the bar itself to expand a detailed per-folder view.
</p>
</div>
{finished ? <ReplayButton onClick={replay} /> : null}
</div> </div>
</div> </div>
); );
src/components/onboarding/StepSearchDemo.tsx
+29 -12
View File
@@ -1,11 +1,11 @@
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { SEARCH_RESULTS } from "./fakes"; import { ReplayButton, SEARCH_RESULTS } from "./fakes";
const DEMOS = [ const DEMOS = [
{ {
query: "beach-day_042.jpg", query: "beach-day_042.jpg",
mode: "Filename", mode: "Filename",
description: "Plain text matches file names — the default, instant search.", description: "Plain text matches file names — the default, instant search. One name, one file.",
results: SEARCH_RESULTS.filename, results: SEARCH_RESULTS.filename,
}, },
{ {
@@ -25,25 +25,39 @@ const DEMOS = [
const TYPE_MS = 55; const TYPE_MS = 55;
const HOLD_MS = 2600; const HOLD_MS = 2600;
/// A mock search bar that "types" each demo query, shows fake results, and /// Types each demo query, shows matching results, advances through all three
/// cycles to the next mode. /// modes once, then stops on the last with a replay control.
export function StepSearchDemo() { export function StepSearchDemo() {
const [demoIndex, setDemoIndex] = useState(0); const [demoIndex, setDemoIndex] = useState(0);
const [typed, setTyped] = useState(0); const [typed, setTyped] = useState(0);
const [finished, setFinished] = useState(false);
const demo = DEMOS[demoIndex]; const demo = DEMOS[demoIndex];
const isLastDemo = demoIndex === DEMOS.length - 1;
useEffect(() => { useEffect(() => {
if (finished) return;
if (typed < demo.query.length) { if (typed < demo.query.length) {
const timer = setTimeout(() => setTyped((n) => n + 1), TYPE_MS); const timer = setTimeout(() => setTyped((n) => n + 1), TYPE_MS);
return () => clearTimeout(timer); return () => clearTimeout(timer);
} }
// Fully typed: hold, then advance — or finish on the last demo.
const timer = setTimeout(() => { const timer = setTimeout(() => {
setDemoIndex((i) => (i + 1) % DEMOS.length); if (isLastDemo) {
setTyped(0); setFinished(true);
} else {
setDemoIndex((i) => i + 1);
setTyped(0);
}
}, HOLD_MS); }, HOLD_MS);
return () => clearTimeout(timer); return () => clearTimeout(timer);
}, [typed, demo.query.length]); }, [typed, demo.query.length, isLastDemo, finished]);
const replay = () => {
setDemoIndex(0);
setTyped(0);
setFinished(false);
};
const fullyTyped = typed >= demo.query.length; const fullyTyped = typed >= demo.query.length;
@@ -61,23 +75,26 @@ export function StepSearchDemo() {
</svg> </svg>
<span className="text-sm text-white"> <span className="text-sm text-white">
{demo.query.slice(0, typed)} {demo.query.slice(0, typed)}
<span className="animate-pulse text-gray-500">|</span> {!finished ? <span className="animate-pulse text-gray-500">|</span> : null}
</span> </span>
<span className="ml-auto shrink-0 rounded-md border border-sky-400/25 bg-sky-500/10 px-2 py-0.5 text-[11px] font-medium text-sky-300"> <span className="ml-auto shrink-0 rounded-md border border-sky-400/25 bg-sky-500/10 px-2 py-0.5 text-[11px] font-medium text-sky-300">
{demo.mode} {demo.mode}
</span> </span>
</div> </div>
{/* Fake results */} {/* Results — fixed-width tiles, centered, so 1/2/3 results all look right */}
<div className={`mt-3 grid grid-cols-3 gap-1.5 transition-opacity duration-300 ${fullyTyped ? "opacity-100" : "opacity-30"}`}> <div className={`mt-3 flex flex-wrap justify-center gap-1.5 transition-opacity duration-300 ${fullyTyped ? "opacity-100" : "opacity-30"}`}>
{demo.results.map((src, i) => ( {demo.results.map((src, i) => (
<div key={`${demoIndex}-${i}`} className="aspect-square overflow-hidden rounded-xl bg-white/[0.04]"> <div key={`${demoIndex}-${i}`} className="aspect-square w-36 overflow-hidden rounded-xl bg-white/[0.04]">
<img src={src} alt="" className="h-full w-full object-cover" /> <img src={src} alt="" className="h-full w-full object-cover" />
</div> </div>
))} ))}
</div> </div>
<p className="mt-4 min-h-10 text-xs leading-relaxed text-gray-500">{demo.description}</p> <div className="mt-4 flex min-h-10 items-start justify-between gap-4">
<p className="text-xs leading-relaxed text-gray-500">{demo.description}</p>
{finished ? <ReplayButton onClick={replay} /> : null}
</div>
</div> </div>
); );
} }
src/components/onboarding/fakes.tsx
+23 -4
View File
@@ -3,6 +3,7 @@
// demo progress — so new users see the real UI's shapes before their own // demo progress — so new users see the real UI's shapes before their own
// library exists. // library exists.
import sunset from "../../assets/onboarding/sunset.webp"; import sunset from "../../assets/onboarding/sunset.webp";
import sunset2 from "../../assets/onboarding/sunset2.webp";
import beach from "../../assets/onboarding/beach.webp"; import beach from "../../assets/onboarding/beach.webp";
import landscape1 from "../../assets/onboarding/landscape1.webp"; import landscape1 from "../../assets/onboarding/landscape1.webp";
import landscape2 from "../../assets/onboarding/landscape2.webp"; import landscape2 from "../../assets/onboarding/landscape2.webp";
@@ -37,11 +38,14 @@ export function fakeImage(index: number): string {
return FAKE_IMAGES[index % FAKE_IMAGES.length]; return FAKE_IMAGES[index % FAKE_IMAGES.length];
} }
// Curated result sets so each search demo returns thematically right images. // Result sets matched to what each query would genuinely return.
// - filename: one exact file (a filename search hits a specific name)
// - semantic "golden sunset over water": only the ocean-sunset stills
// - tags "landscape": mountain valleys + the alpine lake (all landscapes)
export const SEARCH_RESULTS = { export const SEARCH_RESULTS = {
filename: [beach, dunes, sunset], // "beach-day_042.jpg" filename: [beach],
semantic: [sunset, alpinelake, beach], // "golden sunset over water" semantic: [sunset, sunset2],
tags: [landscape1, landscape2, forest], // "landscape" tags: [landscape1, landscape2, alpinelake],
} as const; } as const;
// Abstract gradient blobs/ticks for the Explore & Timeline mini-previews, // Abstract gradient blobs/ticks for the Explore & Timeline mini-previews,
@@ -133,6 +137,21 @@ export function FakeProgressBar({ fraction, className = "" }: { fraction: number
); );
} }
export function ReplayButton({ onClick, label = "Replay" }: { onClick: () => void; label?: string }) {
return (
<button
type="button"
onClick={onClick}
className="inline-flex items-center gap-1.5 rounded-md border border-white/10 bg-white/[0.04] px-2.5 py-1 text-[11px] text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-200"
>
<svg className="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12a7.5 7.5 0 0012.9 5.3M19.5 12A7.5 7.5 0 006.6 6.7M4.5 6.5v3h3M19.5 17.5v-3h-3" />
</svg>
{label}
</button>
);
}
export function formatBytes(bytes: number): string { export function formatBytes(bytes: number): string {
if (bytes >= 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`; if (bytes >= 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
if (bytes >= 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(0)} MB`; if (bytes >= 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(0)} MB`;