Refactor continuing to work on UI

client/src/pages/home/Home.jsx

@@ -1,64 +1,69 @@
-import { HStack, Flex, Box } from "@chakra-ui/react";
-import { NavLink, Outlet, useLocation } from "react-router-dom";
-import { SearchBar } from "../../components/dashboard/SearchBar.jsx";
-import { SettingsButton } from "../../components/dashboard/SettingsButton.jsx";
+import {HStack, Flex, Box, useRecipe} from "@chakra-ui/react";
+import {NavLink, Outlet, useLocation} from "react-router-dom";
+import {SearchBar} from "../../components/dashboard/SearchBar.jsx";
+import {SettingsButton} from "../../components/dashboard/SettingsButton.jsx";
+
+// 1. Import your icons (Swap these for whichever you prefer!)
+import {LayoutDashboard, CalendarDays, Cloud, Satellite, Activity} from "lucide-react";
+
+// 2. Define the tabs array
+const HOME_TABS = [
+  {name: "My Dashboard", url: "/home", icon: LayoutDashboard, exact: true},
+  {name: "Daily Activity", url: "/home/daily", icon: CalendarDays},
+  {name: "Gas", url: "/home/gas", icon: Cloud},
+  {name: "Remote Sensing", url: "/home/remote", icon: Satellite},
+  {name: "Seismic", url: "/home/seismic", icon: Activity},
+];
 
 export default function Home() {
+  const recipe = useRecipe({key: "glassTab"});
+  const tabStyles = recipe();
+
   const location = useLocation();
   const isPersonalDashboard = location.pathname === "/home" || location.pathname === "/home/";
 
-  // 1. CSS making this look like how we want it, TODO turn to theme?
-  const tabStyles = {
-    fontSize: "lg",
-    fontWeight: "bold",
-    color: "fg.muted",
-    px: 2,                   // Horizontal padding
-    // py: 2,                   // Vertical padding
-    borderBottom: "1px solid transparent",
-    transition: "all 0.2s",
-    _hover: { color: "fg" },
-
-    "&.active": {         // Target the active class applied by React Router NavLink
-      color: "fg",
-      borderColor: "fg",
-    }
-  };
-
   return (
-      <Flex direction="column" height="100%" width="100%">
+    <Flex direction="column" height="100%" width="100%">
 
-        {/* 2. 🛠️ SUB HEADER: Matches your original padding and background */}
-        <Flex as="header" position="sticky" top="0" zIndex="dropdown" bg="transparent" p={5} align="center" justify="space-between" width="100%">
+      <Flex as="header" position="sticky" top="0" zIndex="dropdown" bg="transparent" p={5} align="center"
+            justify="space-between" width="100%">
 
-          {/* TABS CONTAINER - Replicates the Tabs.List line container */}
-          <Flex borderBottom="1px solid" borderColor="fg.muted" gap={2}>
-            <Box as={NavLink} to="/home" end css={tabStyles}>My Dashboard</Box>
-            <Box as={NavLink} to="/home/daily" css={tabStyles}>Daily Activity</Box>
-            <Box as={NavLink} to="/home/gas" css={tabStyles}>Gas</Box>
-            <Box as={NavLink} to="/home/remote" css={tabStyles}>Remote Sensing</Box>
-            <Box as={NavLink} to="/home/seismic" css={tabStyles}>Seismic</Box>
-          </Flex>
+        {/* TABS CONTAINER */}
+        <Flex gap={2} alignItems="center">
+          {HOME_TABS.map((tab) => {
+            const Icon = tab.icon;
+            return (
+              <Box
+                key={tab.name}
+                as={NavLink}
+                to={tab.url}
+                end={tab.exact} // CRITICAL: Forces exact match so "/home" deactivates on sub-routes
+                css={tabStyles}
+              >
+                {/* flexShrink: 0 ensures the icon never squishes during the gooey animation */}
+                <Icon size={24} style={{flexShrink: 0}}/>
+                <Box as="span">{tab.name}</Box>
+              </Box>
+            );
+          })}
 
-          {/* EDIT MODE BUTTONS & CONTROLS */}
-          <HStack width="258px" justifyContent="flex-end">
-            {isPersonalDashboard ? (
-                <>
-                  <SearchBar placeholder="Enter a volcano to search" size="sm" width="210px" />
-                  {/* This will eventually trigger your Zustand store's edit mode! */}
-                  <SettingsButton />
-                </>
-            ) : (
-                <SettingsButton />
-            )}
-          </HStack>
+          {/* The Settings button is now inline with the tabs and only renders on the personal dashboard */}
+          {isPersonalDashboard && <SettingsButton/>}
 
         </Flex>
 
-        {/* 3. 🛠️ CANVAS AREA */}
-        <Flex flex="1" overflow="auto">
-          <Outlet />
-        </Flex>
+        {/* EDIT MODE BUTTONS & CONTROLS */}
+        {/* Leaving this HStack here in case you plan to put the SearchBar or other global tools back on the right side */}
+        <HStack width="258px" justifyContent="flex-end">
+          {/* Future global controls go here */}
+        </HStack>
 
       </Flex>
+
+      <Flex flex="1" overflow="auto">
+        <Outlet/>
+      </Flex>
+
+    </Flex>
   );
 }