From 0a8ff7241398cdf5f5e9c3493fd7ad34fba77ffd Mon Sep 17 00:00:00 2001
From: Samuel Olabode <solabode223@gmail.com>
Date: Fri, 7 Aug 2026 17:25:02 -0600
Subject: [PATCH 1/3] refactor(AppShell): update navigation logic to
 conditionally show "New scan" button for authenticated users and improve
 accessibility with aria-labels

---
 frontend/src/views/AppShell.jsx | 27 +++++++++++++++------------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/frontend/src/views/AppShell.jsx b/frontend/src/views/AppShell.jsx
index f0cf3c8..e6389c6 100644
--- a/frontend/src/views/AppShell.jsx
+++ b/frontend/src/views/AppShell.jsx
@@ -6,7 +6,10 @@ const BMC = 'https://ko-fi.com/devolabode'
 
 /** Top app bar with logo + nav, global footer. Donate lives in the footer. */
 export default function AppShell({ children, route, onNav, authed, user, theme, onToggleTheme }) {
-  const inApp = route === 'results' || route === 'problem'
+  // Primary “New scan” in the header whenever signed in, except on landing
+  // (already the scan entry) and auth/connect setup screens.
+  const showNewScan =
+    authed && route !== 'landing' && route !== 'signin' && route !== 'connect'
 
   const NavLink = ({ to, children }) => (
     <button onClick={() => onNav(to)} style={{
@@ -45,27 +48,27 @@ export default function AppShell({ children, route, onNav, authed, user, theme,
         <button onClick={() => onNav('landing')} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0 }} aria-label="Vizably home">
           <Logo size={28} />
         </button>
-        <nav style={{ display: 'flex', alignItems: 'center', gap: 20 }}>
+        <nav aria-label="Primary" style={{ display: 'flex', alignItems: 'center', gap: 20 }}>
           <button onClick={onToggleTheme} aria-label={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'} title={theme === 'dark' ? 'Light mode' : 'Dark mode'} style={{
             width: 34, height: 34, borderRadius: '50%', display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
             border: '1px solid var(--border-default)', background: 'var(--surface-card)', color: 'var(--text-body)', cursor: 'pointer',
           }}>{Ico(theme === 'dark' ? 'Sun' : 'Moon', 17, 'currentColor')}</button>
-          {inApp && (
+          {showNewScan && (
             <Button size="sm" variant="secondary" onClick={() => onNav('landing')} iconLeft={Ico('Plus', 16)}>New scan</Button>
           )}
           {authed ? (
-            <>
-              <NavLink to="dashboard">My scans</NavLink>
-              <button onClick={() => onNav('account')} aria-label="Account settings" style={{
-                width: 34, height: 34, borderRadius: '50%',
-                border: route === 'account' ? '2px solid var(--accent)' : '1px solid var(--border-default)',
-                background: 'var(--accent-subtle)', color: 'var(--accent)', cursor: 'pointer',
-                font: 'var(--font-sans)', fontWeight: 'var(--weight-bold)', fontSize: 'var(--text-sm)',
-              }}>{initials}</button>
-            </>
+            <NavLink to="dashboard">My scans</NavLink>
           ) : (
             <NavLink to="signin">Sign in</NavLink>
           )}
+          {authed && (
+            <button onClick={() => onNav('account')} aria-label="Account settings" style={{
+              width: 34, height: 34, borderRadius: '50%',
+              border: route === 'account' ? '2px solid var(--accent)' : '1px solid var(--border-default)',
+              background: 'var(--accent-subtle)', color: 'var(--accent)', cursor: 'pointer',
+              font: 'var(--font-sans)', fontWeight: 'var(--weight-bold)', fontSize: 'var(--text-sm)',
+            }}>{initials}</button>
+          )}
         </nav>
       </header>
 

From 1d987d916fe5bdbee6a1ac999799d801df0c8d9a Mon Sep 17 00:00:00 2001
From: Samuel Olabode <solabode223@gmail.com>
Date: Fri, 7 Aug 2026 17:26:22 -0600
Subject: [PATCH 2/3] refactor(AppShell): adjust logic for displaying "New
 scan" button to maintain consistent header layout across routes

---
 frontend/src/views/AppShell.jsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/frontend/src/views/AppShell.jsx b/frontend/src/views/AppShell.jsx
index e6389c6..20f037e 100644
--- a/frontend/src/views/AppShell.jsx
+++ b/frontend/src/views/AppShell.jsx
@@ -6,10 +6,9 @@ const BMC = 'https://ko-fi.com/devolabode'
 
 /** Top app bar with logo + nav, global footer. Donate lives in the footer. */
 export default function AppShell({ children, route, onNav, authed, user, theme, onToggleTheme }) {
-  // Primary “New scan” in the header whenever signed in, except on landing
-  // (already the scan entry) and auth/connect setup screens.
-  const showNewScan =
-    authed && route !== 'landing' && route !== 'signin' && route !== 'connect'
+  // Keep New scan in the same slot whenever signed in so header order does not
+  // jump between routes (landing used to omit it and look reordered).
+  const showNewScan = authed && route !== 'signin' && route !== 'connect'
 
   const NavLink = ({ to, children }) => (
     <button onClick={() => onNav(to)} style={{

From 9f6dbbddbc935c41b780ee62ebd33a1d0c813fa1 Mon Sep 17 00:00:00 2001
From: Samuel Olabode <solabode223@gmail.com>
Date: Fri, 14 Aug 2026 08:18:13 -0600
Subject: [PATCH 3/3] fix(nav): keep New scan on results/problem for guests

AppShell was gating New scan on authed alone, which hides it for signed-out
scanners and signed-in users without storage (App passes authed && storageReady).
Show it when authed or on results/problem, still excluding signin/connect.
---
 frontend/src/views/AppShell.jsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/frontend/src/views/AppShell.jsx b/frontend/src/views/AppShell.jsx
index 20f037e..ac1ae21 100644
--- a/frontend/src/views/AppShell.jsx
+++ b/frontend/src/views/AppShell.jsx
@@ -6,9 +6,13 @@ const BMC = 'https://ko-fi.com/devolabode'
 
 /** Top app bar with logo + nav, global footer. Donate lives in the footer. */
 export default function AppShell({ children, route, onNav, authed, user, theme, onToggleTheme }) {
-  // Keep New scan in the same slot whenever signed in so header order does not
-  // jump between routes (landing used to omit it and look reordered).
-  const showNewScan = authed && route !== 'signin' && route !== 'connect'
+  // Show New scan when signed in (stable header order), and also on results /
+  // problem for guests or signed-in users who have not connected storage yet —
+  // App passes authed={authed && storageReady}, and those routes have no guard.
+  const showNewScan =
+    (authed || route === 'results' || route === 'problem') &&
+    route !== 'signin' &&
+    route !== 'connect'
 
   const NavLink = ({ to, children }) => (
     <button onClick={() => onNav(to)} style={{