shinuwa/sokko-g
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add guided onboarding tour for first toolbox creation
All checks were successful
Deploy Sokko G / deploy (push) Successful in 14s
Details

Browse source
This commit is contained in:
Shinuwa 2026-08-14 13:20:47 +02:00
parent 3007aa1389
commit 4f73e0068b
20 changed files with 470 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

9
website/src/pages/HomeOnboardingSection.jsx
View file

@ -7,7 +7,7 @@ function prefersReducedMotion() {
return typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
}
export function HomeOnboardingSection({ content, className = "" }) {
export function HomeOnboardingSection({ content, className = "", onCreateToolbox }) {
const slides = useMemo(() => content?.slides || [], [content]);
const [activeSlide, setActiveSlide] = useState(0);
const [isPaused, setIsPaused] = useState(false);
@ -45,6 +45,13 @@ export function HomeOnboardingSection({ content, className = "" }) {
</li>
))}
</ol>
{onCreateToolbox && content.primaryAction && (
<div className="home-onboarding-steps-action">
<button className="primary home-onboarding-create-button" type="button" onClick={onCreateToolbox}>
{content.primaryAction}
</button>
</div>
)}
</div>
<div className="home-onboarding-preview">
<h3>{content.sliderTitle}</h3>

4
website/src/pages/HomePage.jsx
View file

@ -3,7 +3,7 @@ import { TOOLBOX_MODULES } from "../features/toolboxes/toolboxModuleRegistry.js"
import { RichText } from "../components/RichText.jsx";
import { HomeOnboardingSection } from "./HomeOnboardingSection.jsx";
export function HomePage({ siteContent, toolboxes }) {
export function HomePage({ siteContent, toolboxes, actions }) {
const content = siteContent.home;
const toolCount = Object.keys(TOOLBOX_MODULES).length;
const showOnboarding = import.meta.env.DEV || toolboxes.length === 0;
@ -24,7 +24,7 @@ export function HomePage({ siteContent, toolboxes }) {
<article><strong>{toolCount}</strong><span>{toolCount > 1 ? content.stats.toolPlural : content.stats.toolSingular}</span></article>
</div>
</section>
{showOnboarding && <HomeOnboardingSection content={content.onboarding} />}
{showOnboarding && <HomeOnboardingSection content={content.onboarding} onCreateToolbox={() => actions.setCreateModal({ tutorial: true })} />}
<section className="origin-section nebula-panel" aria-labelledby="origin-title">
<div className="origin-copy">
<p className="eyebrow">{content.origin.eyebrow}</p>