Skip to content

Commit 969c856

Browse files
Copilotsawka
Copilot
and
sawka
committed
Add consolidated onboarding preview page
Co-authored-by: sawka <2722291+sawka@users.noreply.github.com>
1 parent 527f692 commit 969c856

3 files changed

Lines changed: 125 additions & 1 deletion

File tree

‎frontend/app/onboarding/onboarding-features.tsx‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -266,6 +266,93 @@ const FilesPage = ({ onFinish, onPrev }: { onFinish: () => void; onPrev?: () =>
266266
);
267267
};
268268

269+
const FilesPageV = ({ onFinish, onPrev }: { onFinish: () => void; onPrev?: () => void }) => {
270+
const [fireClicked, setFireClicked] = useState(false);
271+
272+
const handleFireClick = () => {
273+
setFireClicked(!fireClicked);
274+
};
275+
276+
return (
277+
<div className="flex flex-col h-full">
278+
<header className="flex items-center gap-4 mb-6 w-full unselectable flex-shrink-0">
279+
<div>
280+
<Logo />
281+
</div>
282+
<div className="text-[25px] font-normal text-foreground">Viewing/Editing Files</div>
283+
</header>
284+
<div className="flex-1 flex flex-row gap-0 min-h-0">
285+
<div className="flex-1 flex flex-col items-center justify-center gap-8 pr-6 unselectable">
286+
<div className="flex flex-col items-start gap-6 max-w-md">
287+
<div className="flex flex-col items-start gap-4 text-secondary">
288+
<p>
289+
Wave can preview markdown, images, and video files on both local <i>and remote</i>{" "}
290+
machines.
291+
</p>
292+
<div className="flex items-start gap-3 w-full">
293+
<i className="fa fa-eye text-accent text-lg mt-1 flex-shrink-0" />
294+
<div>
295+
<p className="mb-2">
296+
Use{" "}
297+
<span className="font-mono font-semibold text-foreground">wsh view [filename]</span>{" "}
298+
to preview files in Wave&apos;s graphical viewer
299+
</p>
300+
</div>
301+
</div>
302+
<div className="flex items-start gap-3 w-full">
303+
<i className="fa fa-pen-to-square text-accent text-lg mt-1 flex-shrink-0" />
304+
<div>
305+
<p className="mb-2">
306+
Use{" "}
307+
<span className="font-mono font-semibold text-foreground">wsh edit [filename]</span>{" "}
308+
to open config files or code files in Wave&apos;s graphical editor
309+
</p>
310+
</div>
311+
</div>
312+
<p>
313+
These commands work seamlessly on both local and remote machines, making it easy to view
314+
and edit files wherever they are.
315+
</p>
316+
<EmojiButton emoji="🔥" isClicked={fireClicked} onClick={handleFireClick} />
317+
</div>
318+
</div>
319+
</div>
320+
<div className="w-[2px] bg-border flex-shrink-0"></div>
321+
<div className="flex items-center justify-center pl-6 flex-shrink-0 w-[400px]">
322+
<div className="w-full h-[400px] bg-background rounded border border-border/50 p-4 flex flex-col gap-4">
323+
<div className="flex items-center gap-2 font-mono text-sm text-foreground/80">
324+
<span className="text-accent">&gt;</span>
325+
<span>wsh view keyboard-shortcuts.md</span>
326+
</div>
327+
<div className="w-full h-full bg-background rounded border-2 border-border/50"></div>
328+
</div>
329+
</div>
330+
</div>
331+
<OnboardingFooter currentStep={4} totalSteps={4} onNext={onFinish} onPrev={onPrev} />
332+
</div>
333+
);
334+
};
335+
336+
export const OnboardingFeaturesV = () => {
337+
const noop = () => {};
338+
return (
339+
<div className="flex flex-col w-full gap-8">
340+
<div className="w-[800px] rounded-[10px] p-[30px] relative overflow-hidden bg-panel">
341+
<WaveAIPage onNext={noop} onSkip={noop} />
342+
</div>
343+
<div className="w-[800px] rounded-[10px] p-[30px] relative overflow-hidden bg-panel">
344+
<DurableSessionPage onNext={noop} onSkip={noop} onPrev={noop} />
345+
</div>
346+
<div className="w-[800px] rounded-[10px] p-[30px] relative overflow-hidden bg-panel">
347+
<MagnifyBlocksPage onNext={noop} onSkip={noop} onPrev={noop} />
348+
</div>
349+
<div className="w-[800px] rounded-[10px] p-[30px] relative overflow-hidden bg-panel">
350+
<FilesPageV onFinish={noop} onPrev={noop} />
351+
</div>
352+
</div>
353+
);
354+
};
355+
269356
export const OnboardingFeatures = ({ onComplete }: { onComplete: () => void }) => {
270357
const [currentPage, setCurrentPage] = useState<FeaturePageName>("waveai");
271358

‎frontend/app/onboarding/onboarding-upgrade-patch.tsx‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,27 @@ const versions: VersionConfig[] = [
6666
},
6767
];
6868

69+
const UpgradeOnboardingPatchV = () => {
70+
return (
71+
<div className="flex flex-col gap-6 w-full max-w-[900px]">
72+
{versions.map((version) => (
73+
<div key={version.version} className="w-[650px] rounded-[10px] p-[30px] relative overflow-hidden bg-panel">
74+
<div className="absolute inset-0 bg-gradient-to-br from-accent/[0.25] via-transparent to-accent/[0.05] pointer-events-none rounded-[10px]" />
75+
<div className="flex flex-col w-full h-full relative z-10">
76+
<header className="flex flex-col gap-2 border-b-0 p-0 mt-1 mb-6 w-full unselectable flex-shrink-0">
77+
<div className="flex justify-center">
78+
<Logo />
79+
</div>
80+
<div className="text-center text-[25px] font-normal text-foreground">Wave {version.version} Update</div>
81+
</header>
82+
<div className="flex-1">{version.content()}</div>
83+
</div>
84+
</div>
85+
))}
86+
</div>
87+
);
88+
};
89+
6990
const UpgradeOnboardingPatch = () => {
7091
const modalRef = useRef<HTMLDivElement | null>(null);
7192
const [isCompact, setIsCompact] = useState<boolean>(window.innerHeight < 800);
@@ -191,4 +212,4 @@ const UpgradeOnboardingPatch = () => {
191212

192213
UpgradeOnboardingPatch.displayName = "UpgradeOnboardingPatch";
193214

194-
export { UpgradeOnboardingPatch };
215+
export { UpgradeOnboardingPatch, UpgradeOnboardingPatchV };

‎frontend/preview/previews/onboarding.preview.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
// Copyright 2026, Command Line Inc.
2+
// SPDX-License-Identifier: Apache-2.0
3+
4+
import { OnboardingFeaturesV } from "@/app/onboarding/onboarding-features";
5+
import { UpgradeOnboardingPatchV } from "@/app/onboarding/onboarding-upgrade-patch";
6+
7+
export function OnboardingPreview() {
8+
return (
9+
<div className="w-full max-w-[1300px] py-10 px-4 flex flex-col gap-8">
10+
<div className="text-sm font-mono text-muted">Onboarding features</div>
11+
<OnboardingFeaturesV />
12+
<div className="text-sm font-mono text-muted mt-6">Onboarding patch updates</div>
13+
<UpgradeOnboardingPatchV />
14+
</div>
15+
);
16+
}

0 commit comments

Comments
 (0)