LyAhn
c97fec2eb3
Make the onboarding tour theme-aware across the app themes, add the first-run theme picker, and keep fake media previews on the dark media surface. Update light-mode secondary controls in onboarding, settings, dropdowns, toolbar controls, and duplicate actions so they no longer render as dark buttons on subtle-light.
62 lines
2.1 KiB
TypeScript
62 lines
2.1 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { FakeTile, ReplayButton } from "./fakes";
|
|
|
|
const REVEAL_MS = 280;
|
|
|
|
// Two rows (cols-4) keeps the explainer text visible without scrolling.
|
|
const TILE_PROPS: { favorite?: boolean; rating?: number; duration?: string }[] = [
|
|
{},
|
|
{ favorite: true },
|
|
{},
|
|
{ duration: "1:24" },
|
|
{ rating: 5 },
|
|
{ favorite: true, rating: 3 },
|
|
{ duration: "0:09" },
|
|
{},
|
|
];
|
|
|
|
const TILE_COUNT = TILE_PROPS.length;
|
|
|
|
/// Placeholder tiles "loading in" once (skeleton → image), then stopping fully
|
|
/// revealed with a replay control.
|
|
export function StepGalleryPreview() {
|
|
const [revealed, setRevealed] = useState(0);
|
|
|
|
useEffect(() => {
|
|
if (revealed >= TILE_COUNT) return;
|
|
const timer = setTimeout(() => setRevealed((n) => n + 1), REVEAL_MS);
|
|
return () => clearTimeout(timer);
|
|
}, [revealed]);
|
|
|
|
const finished = revealed >= TILE_COUNT;
|
|
|
|
return (
|
|
<div>
|
|
<p className="text-sm leading-relaxed text-gray-300">
|
|
The gallery is a virtualized grid — it stays fast with hundreds of thousands of items. Tiles
|
|
carry your favorites, star ratings, and video durations; hover for filename and quick actions.
|
|
</p>
|
|
|
|
<div className="media-dark-surface mt-5 grid grid-cols-4 gap-1.5">
|
|
{TILE_PROPS.map((props, i) => (
|
|
<FakeTile key={i} index={i} loaded={i < revealed} {...props} />
|
|
))}
|
|
</div>
|
|
|
|
<div className="mt-6 flex items-start justify-between gap-4">
|
|
<div className="divide-y divide-white/[0.05] text-xs leading-relaxed text-gray-500 light-theme:divide-gray-300/70">
|
|
<p className="pb-2.5">
|
|
<span className="text-gray-300">Click any tile</span> to open the lightbox — keyboard navigation,
|
|
zoom, inline tag editing, ratings, and a full video player.
|
|
</p>
|
|
<p className="pt-2.5">
|
|
<span className="text-gray-300">The toolbar</span> filters by type, favorites, or rating, sorts by
|
|
date/name/size, and switches grid density.
|
|
</p>
|
|
</div>
|
|
{finished ? <ReplayButton onClick={() => setRevealed(0)} /> : null}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|