From 1295adc727311d942117251ecc5cdda0b1792ccf Mon Sep 17 00:00:00 2001
From: Jamil <jamilbk@users.noreply.github.com>
Date: Tue, 10 Jun 2025 22:53:09 -0700
Subject: [PATCH] fix(gui-client): fix minor frontend issues in app window
 (#9505)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- removes `NavLink` in favor of using the `href` prop on `SidebarItem`.
This fixes vertical spacing between sidebar items (it was inconsistent)
and DOM structure issues caused by setting `NavLink` as a direct child
of `<SidebarItemGroup>`.
- adds `cursor-pointer` to all `<Button>`s
- adds `cursor-pointer` to the `<SidebarCollapse>`

### Before

<img width="1238" alt="Screenshot 2025-06-10 at 7 57 37 PM"
src="https://github.com/user-attachments/assets/2e5e66f2-d4c1-48b7-b81d-1803de2442fc"
/>


### After

<img width="1238" alt="Screenshot 2025-06-10 at 7 57 55 PM"
src="https://github.com/user-attachments/assets/aa676fc1-124a-4e33-859d-da8f3eaad211"
/>
---
 .../src-frontend/components/App.tsx           | 119 +++++++++---------
 rust/gui-client/src-frontend/main.tsx         |   4 +
 website/src/components/Changelog/GUI.tsx      |   3 +
 3 files changed, 70 insertions(+), 56 deletions(-)

diff --git a/rust/gui-client/src-frontend/components/App.tsx b/rust/gui-client/src-frontend/components/App.tsx
index db2ff51dc..a941eb0c2 100644
--- a/rust/gui-client/src-frontend/components/App.tsx
+++ b/rust/gui-client/src-frontend/components/App.tsx
@@ -17,7 +17,7 @@ import {
   SidebarItems,
 } from "flowbite-react";
 import React, { useEffect, useState } from "react";
-import { NavLink, Route, Routes } from "react-router";
+import { Route, Routes, useNavigate, useLocation } from "react-router";
 import { AdvancedSettingsViewModel } from "../generated/AdvancedSettingsViewModel";
 import { FileCount } from "../generated/FileCount";
 import { SessionViewModel } from "../generated/SessionViewModel";
@@ -37,6 +37,19 @@ export default function App() {
   let [advancedSettings, setAdvancedSettings] =
     useState<AdvancedSettingsViewModel | null>(null);
 
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  // Custom navigation handler for SidebarItems to avoid full page reloads
+  const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    const target = event.currentTarget;
+    const href = target.getAttribute("href");
+    if (href) {
+      navigate(href);
+    }
+  };
+
   useEffect(() => {
     const sessionChanged = listen<SessionViewModel>("session_changed", (e) => {
       let session = e.payload;
@@ -79,7 +92,7 @@ export default function App() {
       advancedSettingsChangedUnlisten.then((unlistenFn) => unlistenFn());
       logsRecountedUnlisten.then((unlistenFn) => unlistenFn());
     };
-  }, []);
+  }, [location, handleClick]);
 
   const isDev = import.meta.env.DEV;
 
@@ -91,65 +104,59 @@ export default function App() {
       >
         <SidebarItems>
           <SidebarItemGroup>
-            <NavLink to="/overview">
-              {({ isActive }) => (
-                <SidebarItem active={isActive} icon={HomeIcon} as="div">
-                  Overview
-                </SidebarItem>
-              )}
-            </NavLink>
+            <SidebarItem
+              active={location.pathname.startsWith("/overview")}
+              icon={HomeIcon}
+              href="/overview"
+              onClick={handleClick}
+            >
+              Overview
+            </SidebarItem>
             <SidebarCollapse label="Settings" open={true} icon={Bars3Icon}>
-              <NavLink to="/general-settings">
-                {({ isActive }) => (
-                  <SidebarItem active={isActive} icon={CogIcon} as="div">
-                    General
-                  </SidebarItem>
-                )}
-              </NavLink>
-              <NavLink to="/advanced-settings">
-                {({ isActive }) => (
-                  <SidebarItem
-                    active={isActive}
-                    icon={WrenchScrewdriverIcon}
-                    as="div"
-                  >
-                    Advanced
-                  </SidebarItem>
-                )}
-              </NavLink>
+              <SidebarItem
+                active={location.pathname.startsWith("/general-settings")}
+                icon={CogIcon}
+                href="/general-settings"
+                onClick={handleClick}
+              >
+                General
+              </SidebarItem>
+              <SidebarItem
+                active={location.pathname.startsWith("/advanced-settings")}
+                icon={WrenchScrewdriverIcon}
+                href="/advanced-settings"
+                onClick={handleClick}
+              >
+                Advanced
+              </SidebarItem>
             </SidebarCollapse>
-            <NavLink to="/diagnostics">
-              {({ isActive }) => (
-                <SidebarItem
-                  active={isActive}
-                  icon={DocumentMagnifyingGlassIcon}
-                  as="div"
-                >
-                  Diagnostics
-                </SidebarItem>
-              )}
-            </NavLink>
-            <NavLink to="/about">
-              {({ isActive }) => (
-                <SidebarItem
-                  active={isActive}
-                  icon={InformationCircleIcon}
-                  as="div"
-                >
-                  About
-                </SidebarItem>
-              )}
-            </NavLink>
+            <SidebarItem
+              active={location.pathname.startsWith("/diagnostics")}
+              icon={DocumentMagnifyingGlassIcon}
+              href="/diagnostics"
+              onClick={handleClick}
+            >
+              Diagnostics
+            </SidebarItem>
+            <SidebarItem
+              active={location.pathname.startsWith("/about")}
+              icon={InformationCircleIcon}
+              href="/about"
+              onClick={handleClick}
+            >
+              About
+            </SidebarItem>
           </SidebarItemGroup>
           {isDev && (
             <SidebarItemGroup>
-              <NavLink to="/colour-palette">
-                {({ isActive }) => (
-                  <SidebarItem active={isActive} icon={SwatchIcon} as="div">
-                    Color Palette
-                  </SidebarItem>
-                )}
-              </NavLink>
+              <SidebarItem
+                active={location.pathname.startsWith("/colour-palette")}
+                icon={SwatchIcon}
+                href="/colour-palette"
+                onClick={handleClick}
+              >
+                Color Palette
+              </SidebarItem>
             </SidebarItemGroup>
           )}
         </SidebarItems>
diff --git a/rust/gui-client/src-frontend/main.tsx b/rust/gui-client/src-frontend/main.tsx
index e00722bd3..b818bec57 100644
--- a/rust/gui-client/src-frontend/main.tsx
+++ b/rust/gui-client/src-frontend/main.tsx
@@ -8,8 +8,12 @@ import * as Sentry from "@sentry/react";
 const customTheme = createTheme({
   sidebar: {
     root: { inner: "rounded-none bg-white" },
+    collapse: {
+      button: "cursor-pointer",
+    },
   },
   button: {
+    base: "cursor-pointer",
     color: {
       default: "bg-accent-450 hover:bg-accent-700 text-white",
       alternative:
diff --git a/website/src/components/Changelog/GUI.tsx b/website/src/components/Changelog/GUI.tsx
index b1dee97de..794416753 100644
--- a/website/src/components/Changelog/GUI.tsx
+++ b/website/src/components/Changelog/GUI.tsx
@@ -11,6 +11,9 @@ export default function GUI({ os }: { os: OS }) {
     <Entries downloadLinks={downloadLinks(os)} title={title(os)}>
       {/* When you cut a release, remove any solved issues from the "known issues" lists over in `client-apps`. This must not be done when the issue's PR merges. */}
       <Unreleased>
+        <ChangeItem pull="9505">
+          Fixes minor visual inconsistencies in the main app window.
+        </ChangeItem>
         <ChangeItem pull="9443">
           Fixes an issue where log directives applied via MDM would not be
           applied on startup.