feat(desktop): hide web nav + redirect / → /editor in Tauri builds

The marketing nav (Home/Docs/Examples/Pricing/Blog/GitHub/Discord) and
the LandingPage hero are great for velxio.dev visitors but become
clutter once the SPA ships inside a Tauri shell — the user installed
the desktop app to land in the editor, not to read about the project.

Two small VITE_DESKTOP gates handle this:

  - AppHeader.tsx hides the <nav> + the mobile hamburger that toggles
    it. The brand, language switcher, auto-save indicator, share
    button, and the pro overlay's auth slot all stay visible — they
    carry real per-session info, not navigation.
  - App.tsx swaps the `/` route's element for a <Navigate to=/editor>
    so first-launch (and any future `velxio://` deep-link that lands
    on `/`) goes straight to the editor.

Equivalent actions for the items being hidden live on the native
menubar that the velxio-prod overlay builds via
pro/desktop/src-tauri/src/menu.rs.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
davidmonterocrespo24 2026-05-22 18:08:33 -03:00
parent aab380e80b
commit 54adac3ae3
2 changed files with 32 additions and 13 deletions

View File

@ -1,5 +1,5 @@
import { useEffect, type ReactElement } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import { LandingPage } from './pages/LandingPage';
import { EditorPage } from './pages/EditorPage';
import { ExamplesPage } from './pages/ExamplesPage';
@ -43,8 +43,17 @@ import './App.css';
* Index entries (path === '') belong to the locale-prefixed parent's
* `index` slot they render at exactly `/<locale>/`.
*/
// In Tauri desktop builds the marketing landing page is a disorienting
// first screen — users opened the desktop app to land in the editor.
// `/` redirects there. Web builds still see the LandingPage.
const ROOT_ELEMENT: ReactElement = import.meta.env.VITE_DESKTOP ? (
<Navigate to="/editor" replace />
) : (
<LandingPage />
);
const ROUTES: { path: string; element: ReactElement; index?: boolean }[] = [
{ path: '/', element: <LandingPage />, index: true },
{ path: '/', element: ROOT_ELEMENT, index: true },
{ path: 'editor', element: <EditorPage /> },
{ path: 'examples', element: <ExamplesPage /> },
// /examples/<id> = SEO landing (preview, badges, "Open in Simulator" CTA).

View File

@ -104,7 +104,13 @@ export const AppHeader: React.FC<AppHeaderProps> = ({ autoSave }) => {
</Link>
</div>
{/* Main nav links (desktop) */}
{/* Main nav links (web only). The Tauri desktop build hides
this nav and surfaces the equivalent actions via the
native menubar (see pro/desktop/src-tauri/src/menu.rs in
velxio-prod). VITE_DESKTOP is the env flag the Tauri
build sets main.tsx already uses it to gate the @pro
overlay, same pattern here. */}
{!import.meta.env.VITE_DESKTOP && (
<nav className={'header-nav-links' + (menuOpen ? ' header-nav-open' : '')}>
<Link to={localize('/')} className={'header-nav-link' + isActive('/')}>
{t('header.nav.home')}
@ -168,6 +174,7 @@ export const AppHeader: React.FC<AppHeaderProps> = ({ autoSave }) => {
{t('header.nav.discord')}
</a>
</nav>
)}
</div>
{/* Right: language + share + auth + mobile hamburger */}
@ -224,16 +231,19 @@ export const AppHeader: React.FC<AppHeaderProps> = ({ autoSave }) => {
OSS image has no auth backend either. */}
<div data-velxio-slot="header-auth" style={{ display: 'contents' }} />
{/* Mobile hamburger */}
<button
className="header-hamburger"
onClick={() => setMenuOpen((v) => !v)}
aria-label="Toggle menu"
>
<span />
<span />
<span />
</button>
{/* Mobile hamburger useless in desktop where the nav it
would expand is itself hidden. */}
{!import.meta.env.VITE_DESKTOP && (
<button
className="header-hamburger"
onClick={() => setMenuOpen((v) => !v)}
aria-label="Toggle menu"
>
<span />
<span />
<span />
</button>
)}
</div>
</div>