From d62564fd0dade62804026df49d9d0dae1471779e Mon Sep 17 00:00:00 2001
From: Nico <Nico>
Date: Wed, 18 Feb 2026 14:52:41 -0800
Subject: [PATCH] refactor: streamline navbar and settings tab cues

---
 frontend/src/components/layout/Navbar.jsx     |  77 +++---
 .../src/components/manage/ManageStores.jsx    |   1 -
 frontend/src/components/store/StoreTabs.jsx   |   1 -
 frontend/src/pages/Settings.jsx               |  96 ++++++--
 frontend/src/styles/components/Navbar.css     | 220 ++++++++++++------
 frontend/src/styles/pages/Settings.css        |  79 ++++++-
 6 files changed, 330 insertions(+), 144 deletions(-)

diff --git a/frontend/src/components/layout/Navbar.jsx b/frontend/src/components/layout/Navbar.jsx
index cd2945a..0d66338 100644
--- a/frontend/src/components/layout/Navbar.jsx
+++ b/frontend/src/components/layout/Navbar.jsx
@@ -8,11 +8,9 @@ import HouseholdSwitcher from "../household/HouseholdSwitcher";
 
 export default function Navbar() {
   const { role, logout, username } = useContext(AuthContext);
-  const [showNavMenu, setShowNavMenu] = useState(false);
   const [showUserMenu, setShowUserMenu] = useState(false);
 
   const closeMenus = () => {
-    setShowNavMenu(false);
     setShowUserMenu(false);
   };
 
@@ -30,39 +28,35 @@ export default function Navbar() {
 
   return (
     <nav className="navbar">
-      {/* Left: Navigation Menu */}
-      <div className="navbar-section navbar-left">
-        <button
-          className="navbar-menu-btn"
-          onClick={() => {
-            setShowNavMenu(!showNavMenu);
-            setShowUserMenu(false);
-          }}
-          aria-label="Navigation menu"
-        >
-          <span className="hamburger-icon">
-            <span></span>
-            <span></span>
-            <span></span>
-          </span>
-        </button>
+      <div className="navbar-section navbar-spacer" aria-hidden="true"></div>
 
-        {showNavMenu && (
-          <>
-            <div className="menu-overlay" onClick={closeMenus}></div>
-            <div className="navbar-dropdown nav-dropdown">
-              <Link to="/" onClick={closeMenus}>Home</Link>
-              <Link to="/manage" onClick={closeMenus}>Manage</Link>
-              <Link to="/settings" onClick={closeMenus}>Settings</Link>
-              {role === "system_admin" && <Link to="/admin" onClick={closeMenus}>Admin</Link>}
-            </div>
-          </>
-        )}
-      </div>
-
-      {/* Center: Household Switcher */}
+      {/* Center: Home + Household + Manage */}
       <div className="navbar-section navbar-center">
-        <HouseholdSwitcher />
+        <div className="navbar-center-nav">
+          <Link
+            to="/"
+            className="navbar-icon-link navbar-icon-left"
+            title="Home"
+            aria-label="Home"
+            onClick={closeMenus}
+          >
+            <span aria-hidden="true">&#8962;</span>
+          </Link>
+
+          <div className="navbar-household-wrap">
+            <HouseholdSwitcher />
+          </div>
+
+          <Link
+            to="/manage"
+            className="navbar-icon-link navbar-icon-right"
+            title="Manage"
+            aria-label="Manage"
+            onClick={closeMenus}
+          >
+            <span aria-hidden="true">&#9881;</span>
+          </Link>
+        </div>
       </div>
 
       {/* Right: User Menu */}
@@ -71,10 +65,15 @@ export default function Navbar() {
           className="navbar-user-btn"
           onClick={() => {
             setShowUserMenu(!showUserMenu);
-            setShowNavMenu(false);
           }}
+          aria-label="User menu"
         >
-          {username}
+          <span className="navbar-user-icon" aria-hidden="true">
+            <svg viewBox="0 0 24 24" focusable="false" aria-hidden="true">
+              <path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-4.14 0-7.5 2.69-7.5 6v1h15v-1c0-3.31-3.36-6-7.5-6Z" />
+            </svg>
+          </span>
+          <span className="navbar-user-name">{username}</span>
         </button>
 
         {showUserMenu && (
@@ -85,6 +84,14 @@ export default function Navbar() {
                 <span className="user-dropdown-username">{username}</span>
                 <span className="user-dropdown-role">{role}</span>
               </div>
+              <Link to="/settings" className="user-dropdown-link" onClick={closeMenus}>
+                User Settings
+              </Link>
+              {role === "system_admin" && (
+                <Link to="/admin" className="user-dropdown-link" onClick={closeMenus}>
+                  Admin Settings
+                </Link>
+              )}
               <button className="user-dropdown-logout" onClick={handleLogout}>
                 Logout
               </button>
diff --git a/frontend/src/components/manage/ManageStores.jsx b/frontend/src/components/manage/ManageStores.jsx
index 4325a1f..b34b1e9 100644
--- a/frontend/src/components/manage/ManageStores.jsx
+++ b/frontend/src/components/manage/ManageStores.jsx
@@ -86,7 +86,6 @@ export default function ManageStores() {
                 <div className="store-info">
                   <h3>{store.name}</h3>
                   {store.location && <p className="store-location">{store.location}</p>}
-                  {store.is_default && <span className="default-badge">Default</span>}
                 </div>
                 {isAdmin && (
                   <div className="store-actions">
diff --git a/frontend/src/components/store/StoreTabs.jsx b/frontend/src/components/store/StoreTabs.jsx
index 5f9a755..4da17e3 100644
--- a/frontend/src/components/store/StoreTabs.jsx
+++ b/frontend/src/components/store/StoreTabs.jsx
@@ -26,7 +26,6 @@ export default function StoreTabs() {
             disabled={loading}
           >
             <span className="store-name">{store.name}</span>
-            {store.is_default && <span className="default-badge">Default</span>}
           </button>
         ))}
       </div>
diff --git a/frontend/src/pages/Settings.jsx b/frontend/src/pages/Settings.jsx
index 5c0ce13..86b8025 100644
--- a/frontend/src/pages/Settings.jsx
+++ b/frontend/src/pages/Settings.jsx
@@ -1,4 +1,4 @@
-import { useContext, useEffect, useState } from "react";
+import { useContext, useEffect, useRef, useState } from "react";
 import { changePassword, getCurrentUser, updateCurrentUser } from "../api/users";
 import { SettingsContext } from "../context/SettingsContext";
 import "../styles/pages/Settings.css";
@@ -7,6 +7,9 @@ import "../styles/pages/Settings.css";
 export default function Settings() {
   const { settings, updateSettings, resetSettings } = useContext(SettingsContext);
   const [activeTab, setActiveTab] = useState("appearance");
+  const tabsRef = useRef(null);
+  const [showLeftArrow, setShowLeftArrow] = useState(false);
+  const [showRightArrow, setShowRightArrow] = useState(false);
 
   // Account management state
   const [displayName, setDisplayName] = useState("");
@@ -30,6 +33,35 @@ export default function Settings() {
     loadProfile();
   }, []);
 
+  useEffect(() => {
+    const tabsElement = tabsRef.current;
+    if (!tabsElement) return;
+
+    const updateArrowVisibility = () => {
+      const hasOverflow = tabsElement.scrollWidth > tabsElement.clientWidth + 1;
+
+      if (!hasOverflow) {
+        setShowLeftArrow(false);
+        setShowRightArrow(false);
+        return;
+      }
+
+      setShowLeftArrow(tabsElement.scrollLeft > 4);
+      setShowRightArrow(
+        tabsElement.scrollLeft + tabsElement.clientWidth < tabsElement.scrollWidth - 4
+      );
+    };
+
+    updateArrowVisibility();
+
+    tabsElement.addEventListener("scroll", updateArrowVisibility, { passive: true });
+    window.addEventListener("resize", updateArrowVisibility);
+
+    return () => {
+      tabsElement.removeEventListener("scroll", updateArrowVisibility);
+      window.removeEventListener("resize", updateArrowVisibility);
+    };
+  }, []);
 
   const handleThemeChange = (theme) => {
     updateSettings({ theme });
@@ -114,31 +146,47 @@ export default function Settings() {
       <div className="card" style={{ maxWidth: '800px', margin: '0 auto' }}>
         <h1 className="text-2xl font-semibold mb-4">Settings</h1>
 
-        <div className="settings-tabs">
-          <button
-            className={`settings-tab ${activeTab === "appearance" ? "active" : ""}`}
-            onClick={() => setActiveTab("appearance")}
+        <div className="settings-tabs-wrapper">
+          <div
+            className={`settings-tabs-arrow settings-tabs-arrow-left ${showLeftArrow ? "visible" : ""}`}
+            aria-hidden="true"
           >
-            Appearance
-          </button>
-          <button
-            className={`settings-tab ${activeTab === "list" ? "active" : ""}`}
-            onClick={() => setActiveTab("list")}
+            &#8249;
+          </div>
+
+          <div className="settings-tabs" ref={tabsRef}>
+            <button
+              className={`settings-tab ${activeTab === "appearance" ? "active" : ""}`}
+              onClick={() => setActiveTab("appearance")}
+            >
+              Appearance
+            </button>
+            <button
+              className={`settings-tab ${activeTab === "list" ? "active" : ""}`}
+              onClick={() => setActiveTab("list")}
+            >
+              List Display
+            </button>
+            <button
+              className={`settings-tab ${activeTab === "behavior" ? "active" : ""}`}
+              onClick={() => setActiveTab("behavior")}
+            >
+              Behavior
+            </button>
+            <button
+              className={`settings-tab ${activeTab === "account" ? "active" : ""}`}
+              onClick={() => setActiveTab("account")}
+            >
+              Account
+            </button>
+          </div>
+
+          <div
+            className={`settings-tabs-arrow settings-tabs-arrow-right ${showRightArrow ? "visible" : ""}`}
+            aria-hidden="true"
           >
-            List Display
-          </button>
-          <button
-            className={`settings-tab ${activeTab === "behavior" ? "active" : ""}`}
-            onClick={() => setActiveTab("behavior")}
-          >
-            Behavior
-          </button>
-          <button
-            className={`settings-tab ${activeTab === "account" ? "active" : ""}`}
-            onClick={() => setActiveTab("account")}
-          >
-            Account
-          </button>
+            &#8250;
+          </div>
         </div>
 
         <div className="settings-content">
diff --git a/frontend/src/styles/components/Navbar.css b/frontend/src/styles/components/Navbar.css
index 082db82..33a39d8 100644
--- a/frontend/src/styles/components/Navbar.css
+++ b/frontend/src/styles/components/Navbar.css
@@ -6,8 +6,8 @@
   background: #343a40;
   color: white;
   padding: 0.75rem 1rem;
-  display: flex;
-  justify-content: space-between;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
   align-items: center;
   gap: 1rem;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
@@ -19,52 +19,86 @@
   align-items: center;
 }
 
-.navbar-left {
-  flex: 0 0 auto;
-}
-
 .navbar-center {
-  flex: 1 1 auto;
+  grid-column: 2;
   display: flex;
   justify-content: center;
-  max-width: 80%;
-  margin: 0 auto;
+  min-width: 0;
+  justify-self: center;
 }
 
 .navbar-right {
+  grid-column: 3;
+  justify-self: end;
   flex: 0 0 auto;
   position: relative;
 }
 
-/* Hamburger Menu Button */
-.navbar-menu-btn {
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  padding: 0.5rem;
+.navbar-spacer {
+  grid-column: 1;
+}
+
+.navbar-center-nav {
   display: flex;
   align-items: center;
+  gap: 0;
+  width: 100%;
   justify-content: center;
 }
 
-.hamburger-icon {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  width: 24px;
+.navbar-household-wrap {
+  position: relative;
+  width: 17rem;
+  flex: 0 0 17rem;
+  margin: 0;
 }
 
-.hamburger-icon span {
+.navbar .household-switcher {
   display: block;
   width: 100%;
-  height: 3px;
-  background: white;
-  border-radius: 2px;
-  transition: all 0.3s;
 }
 
-.navbar-menu-btn:hover .hamburger-icon span {
-  background: #ddd;
+.navbar-icon-link {
+  width: 48px;
+  height: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+  color: #ffffff;
+  background: #495057;
+  border: 1px solid #5a6268;
+  border-radius: 0;
+  font-size: 1.2rem;
+  line-height: 1;
+  transition: background 0.2s;
+}
+
+.navbar-icon-link:hover {
+  background: #5a6268;
+}
+
+.navbar-icon-link:focus-visible {
+  outline: 2px solid #9ec5fe;
+  outline-offset: 2px;
+}
+
+.navbar-icon-left {
+  margin-right: 0;
+  border-radius: 8px 0 0 8px;
+  border-right: none;
+}
+
+.navbar-icon-right {
+  margin-left: 0;
+  border-radius: 0 8px 8px 0;
+  border-left: none;
+}
+
+.navbar .household-switcher-toggle {
+  border-radius: 0;
+  height: 40px;
+  padding: 0 0.75rem;
 }
 
 /* User Button */
@@ -79,12 +113,33 @@
   font-weight: 500;
   white-space: nowrap;
   transition: background 0.2s;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
 }
 
 .navbar-user-btn:hover {
   background: #5a6268;
 }
 
+.navbar-user-icon {
+  width: 18px;
+  height: 18px;
+  display: none;
+  color: #ffffff;
+}
+
+.navbar-user-icon svg {
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
+  display: block;
+}
+
+.navbar-user-name {
+  display: inline-block;
+}
+
 /* Dropdown Overlay */
 .menu-overlay {
   position: fixed;
@@ -110,31 +165,6 @@
 }
 
 /* Navigation Dropdown */
-.nav-dropdown {
-  left: 0;
-  display: flex;
-  flex-direction: column;
-}
-
-.nav-dropdown a {
-  color: #343a40;
-  text-decoration: none;
-  padding: 0.75rem 1.25rem;
-  font-size: 1rem;
-  transition: background 0.2s;
-  border-bottom: 1px solid #f0f0f0;
-}
-
-.nav-dropdown a:last-child {
-  border-bottom: none;
-}
-
-.nav-dropdown a:hover {
-  background: #f8f9fa;
-  color: var(--color-primary);
-}
-
-/* User Dropdown */
 .user-dropdown {
   right: 0;
   min-width: 200px;
@@ -161,6 +191,20 @@
   text-transform: capitalize;
 }
 
+.user-dropdown-link {
+  display: block;
+  width: 100%;
+  padding: 0.75rem 1.25rem;
+  color: #343a40;
+  text-decoration: none;
+  border-bottom: 1px solid #f0f0f0;
+  transition: background 0.2s;
+}
+
+.user-dropdown-link:hover {
+  background: #f8f9fa;
+}
+
 .user-dropdown-logout {
   width: 100%;
   background: #dc3545;
@@ -177,12 +221,6 @@
   background: #c82333;
 }
 
-/* Household Switcher - Centered with max width */
-.navbar-center > * {
-  width: 100%;
-  max-width: 24ch; /* 24 characters max width */
-}
-
 /* Mobile Responsive */
 @media (max-width: 768px) {
   .navbar {
@@ -190,8 +228,23 @@
     gap: 0.5rem;
   }
 
-  .navbar-center {
-    max-width: 60%;
+  .navbar-household-wrap {
+    width: 14rem;
+    flex: 0 0 14rem;
+  }
+
+  .navbar-icon-link {
+    width: 42px;
+    height: 40px;
+    font-size: 1rem;
+  }
+
+  .navbar-icon-left {
+    margin-right: 0;
+  }
+
+  .navbar-icon-right {
+    margin-left: 0;
   }
 
   .navbar-user-btn {
@@ -199,10 +252,6 @@
     font-size: 0.9rem;
   }
 
-  .nav-dropdown {
-    min-width: 160px;
-  }
-
   .user-dropdown {
     min-width: 180px;
   }
@@ -211,22 +260,43 @@
 @media (max-width: 480px) {
   .navbar {
     padding: 0.5rem;
+    grid-template-columns: auto 1fr auto;
   }
 
-  .navbar-center {
-    max-width: 50%;
+  .navbar-household-wrap {
+    width: 11rem;
+    flex: 0 0 11rem;
   }
 
-  .navbar-user-btn {
-    padding: 0.4rem 0.6rem;
-    font-size: 0.85rem;
+  .navbar-icon-left {
+    margin-right: 0;
   }
 
-  .hamburger-icon {
-    width: 20px;
-  }
-
-  .hamburger-icon span {
-    height: 2.5px;
+  .navbar-icon-right {
+    margin-left: 0;
+  }
+}
+
+@media (max-width: 360px) {
+  .navbar-household-wrap {
+    width: 10rem;
+    flex: 0 0 10rem;
+  }
+}
+
+@media (max-width: 900px) {
+  .navbar-user-btn {
+    width: 40px;
+    height: 40px;
+    padding: 0;
+    justify-content: center;
+  }
+
+  .navbar-user-icon {
+    display: inline-flex;
+  }
+
+  .navbar-user-name {
+    display: none;
   }
 }
diff --git a/frontend/src/styles/pages/Settings.css b/frontend/src/styles/pages/Settings.css
index 56205c4..4d993b3 100644
--- a/frontend/src/styles/pages/Settings.css
+++ b/frontend/src/styles/pages/Settings.css
@@ -7,10 +7,19 @@
 }
 
 /* Tabs */
+.settings-tabs-wrapper {
+  position: relative;
+  margin-bottom: var(--spacing-xl);
+  padding: 0 0.8rem;
+}
+
 .settings-tabs {
   display: flex;
-  gap: var(--spacing-sm);
-  margin-bottom: var(--spacing-xl);
+  gap: 0rem;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
   border-bottom: 2px solid var(--color-border-light);
   touch-action: pan-x; /* Lock Y-axis, allow only horizontal scrolling */
   scrollbar-width: none; /* Firefox */
@@ -22,7 +31,10 @@
 }
 
 .settings-tab {
-  padding: var(--spacing-md) var(--spacing-lg);
+  flex: 0 0 max-content;
+  white-space: nowrap;
+  width: max-content;
+  padding: 0rem 1.4rem;
   background: none;
   border: none;
   border-bottom: 3px solid transparent;
@@ -34,6 +46,41 @@
   margin-bottom: -2px;
 }
 
+.settings-tabs-arrow {
+  position: absolute;
+  top: calc(50% - 0.2rem);
+  transform: translateY(-50%);
+  width: 2.6rem;
+  height: 2.6rem;
+  border-radius: 999px;
+  border: none;
+  background: transparent;
+  color: var(--color-primary);
+  font-size: 2rem;
+  font-weight: 700;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+  opacity: 0;
+  pointer-events: none;
+  user-select: none;
+  transition: opacity 0.2s ease;
+}
+
+.settings-tabs-arrow.visible {
+  opacity: 1;
+}
+
+.settings-tabs-arrow-left {
+  left: -1.6rem;
+}
+
+.settings-tabs-arrow-right {
+  right: -1.6rem;
+}
+
 .settings-tab:hover {
   color: var(--color-primary);
   background: var(--color-bg-hover);
@@ -180,14 +227,30 @@
   }
 
   .settings-tabs {
-    flex-wrap: nowrap;
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
+    padding: 0 0.1rem;
   }
 
   .settings-tab {
-    padding: var(--spacing-sm) var(--spacing-md);
-    white-space: nowrap;
+    padding: 0.4rem 0.35rem;
+  }
+
+  .settings-tabs-wrapper {
+    padding: 0 0.55rem;
+  }
+
+  .settings-tabs-arrow {
+    top: calc(50% - 0.15rem);
+    width: 2.2rem;
+    height: 2.2rem;
+    font-size: 1.65rem;
+  }
+
+  .settings-tabs-arrow-left {
+    left: -1.2rem;
+  }
+
+  .settings-tabs-arrow-right {
+    right: -1.2rem;
   }
 
   .settings-theme-options {