From ee0cf13b711fa5d3f178dc088be1e8f554839053 Mon Sep 17 00:00:00 2001
From: abccodes <abayercalvert@gmail.com>
Date: Wed, 10 Jun 2026 16:35:08 -0700
Subject: [PATCH] [aidan] fix: back/foward buttons interaction ui fix

---
 .../src/app/components/Layout/AppShell.tsx    | 65 +++++++++++--------
 1 file changed, 39 insertions(+), 26 deletions(-)

diff --git a/frontend/src/app/components/Layout/AppShell.tsx b/frontend/src/app/components/Layout/AppShell.tsx
index 208c85c2..737efd31 100644
--- a/frontend/src/app/components/Layout/AppShell.tsx
+++ b/frontend/src/app/components/Layout/AppShell.tsx
@@ -77,6 +77,13 @@ const AppShell: React.FC = () => {
     return fn as typeof navigateRaw;
   }, [navigateRaw]);
   const location = useLocation();
+  // React Router (HashRouter) stores a monotonic index in history state. location
+  // re-renders on every nav, by which point window.history.state.idx is updated.
+  const historyIdx = (window.history.state?.idx as number | undefined) ?? 0;
+  const maxHistoryIdx = useRef(0);
+  maxHistoryIdx.current = Math.max(maxHistoryIdx.current, historyIdx);
+  const canGoBack = historyIdx > 0;
+  const canGoForward = historyIdx < maxHistoryIdx.current;
   const [dashboardsExpanded, setDashboardsExpanded] = useState(true);
   const [appsExpanded, setAppsExpanded] = useState(true);
   const [customizationExpanded, setCustomizationExpanded] = useState(true);
@@ -400,34 +407,40 @@ const AppShell: React.FC = () => {
           </IconButton>
         </Tooltip>
         <Tooltip title="Back">
-          <IconButton
-            size="small"
-            onClick={() => navigate(-1)}
-            sx={{
-              WebkitAppRegion: 'no-drag',
-              color: c.text.tertiary,
-              p: 0.5,
-              borderRadius: 1,
-              '&:hover': { color: c.text.secondary, bgcolor: `${c.text.tertiary}14` },
-            }}
-          >
-            <ArrowBackOutlinedIcon sx={{ fontSize: 18 }} />
-          </IconButton>
+          <span>
+            <IconButton
+              size="small"
+              onClick={() => navigate(-1)}
+              disabled={!canGoBack}
+              sx={{
+                WebkitAppRegion: 'no-drag',
+                color: c.text.tertiary,
+                p: 0.5,
+                borderRadius: 1,
+                '&:hover': { color: c.text.secondary, bgcolor: `${c.text.tertiary}14` },
+              }}
+            >
+              <ArrowBackOutlinedIcon sx={{ fontSize: 18 }} />
+            </IconButton>
+          </span>
         </Tooltip>
         <Tooltip title="Forward">
-          <IconButton
-            size="small"
-            onClick={() => navigate(1)}
-            sx={{
-              WebkitAppRegion: 'no-drag',
-              color: c.text.tertiary,
-              p: 0.5,
-              borderRadius: 1,
-              '&:hover': { color: c.text.secondary, bgcolor: `${c.text.tertiary}14` },
-            }}
-          >
-            <ArrowForwardOutlinedIcon sx={{ fontSize: 18 }} />
-          </IconButton>
+          <span>
+            <IconButton
+              size="small"
+              onClick={() => navigate(1)}
+              disabled={!canGoForward}
+              sx={{
+                WebkitAppRegion: 'no-drag',
+                color: c.text.tertiary,
+                p: 0.5,
+                borderRadius: 1,
+                '&:hover': { color: c.text.secondary, bgcolor: `${c.text.tertiary}14` },
+              }}
+            >
+              <ArrowForwardOutlinedIcon sx={{ fontSize: 18 }} />
+            </IconButton>
+          </span>
         </Tooltip>
 
         <DynamicIsland />