From 54adac3ae3bae333c7c521280f23334b2d39114e Mon Sep 17 00:00:00 2001
From: davidmonterocrespo24 <davidmonterocrespo24@gmail.com>
Date: Fri, 22 May 2026 18:08:33 -0300
Subject: [PATCH] =?UTF-8?q?feat(desktop):=20hide=20web=20nav=20+=20redirec?=
 =?UTF-8?q?t=20/=20=E2=86=92=20/editor=20in=20Tauri=20builds?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 frontend/src/App.tsx                         | 13 ++++++--
 frontend/src/components/layout/AppHeader.tsx | 32 +++++++++++++-------
 2 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 16f64e4a..5f7d272e 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -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).
diff --git a/frontend/src/components/layout/AppHeader.tsx b/frontend/src/components/layout/AppHeader.tsx
index 7bb535ef..fd4c49b8 100644
--- a/frontend/src/components/layout/AppHeader.tsx
+++ b/frontend/src/components/layout/AppHeader.tsx
@@ -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>