layout cleanup wip

src/components/DeviceSelector.tsx

@@ -2,52 +2,64 @@ import type React from "react";
 
 import { useAppStore } from "@app/core/stores/appStore.js";
 import { useDeviceStore } from "@app/core/stores/deviceStore.js";
+import { NavSpacer } from "@app/Nav/NavSpacer.js";
+import { PageNav } from "@app/Nav/PageNav.js";
 import { Mono } from "@components/generic/Mono.js";
 import { Hashicon } from "@emeraldpay/hashicon-react";
-import { MoonIcon, PlusIcon } from "@heroicons/react/24/outline";
-import { IconButton } from "./form/IconButton.js";
+import { PlusIcon } from "@heroicons/react/24/outline";
 
 export const DeviceSelector = (): JSX.Element => {
   const { getDevices } = useDeviceStore();
   const { selectedDevice, setSelectedDevice, darkMode } = useAppStore();
 
   return (
-    <div className="flex h-full w-16 items-center whitespace-nowrap bg-backgroundPrimary pt-12 [writing-mode:vertical-rl]">
-      <Mono>Connected Devices</Mono>
-      <span className="mt-6 flex gap-4 font-bold text-textPrimary">
-        {getDevices().map((device) => (
-          <div
-            key={device.id}
-            onClick={() => {
-              setSelectedDevice(device.id);
-            }}
-            className="group flex h-8 w-8 cursor-pointer bg-backgroundPrimary p-0.5 drop-shadow-md hover:brightness-hover"
-          >
-            <Hashicon size={32} value={device.hardware.myNodeNum.toString()} />
+    <div className="flex h-full w-14 items-center gap-3 bg-backgroundPrimary pt-3 [writing-mode:vertical-rl]">
+      <div className="flex items-center gap-3">
+        <Mono className="select-none">Connected Devices</Mono>
+        <span className="flex font-bold text-textPrimary">
+          {getDevices().map((device) => (
             <div
-              className={`absolute -left-1.5 h-7 w-0.5 rounded-full group-hover:bg-accent ${
-                device.id === selectedDevice ? "bg-accent" : "bg-transparent"
+              key={device.id}
+              onClick={() => {
+                setSelectedDevice(device.id);
+              }}
+              className={`cursor-pointer border-x-4 border-backgroundPrimary bg-backgroundPrimary py-3 px-2 hover:brightness-hover active:brightness-press ${
+                selectedDevice === device.id ? "border-l-accent" : ""
               }`}
-            />
-          </div>
-        ))}
-        <div
-          onClick={() => {
-            setSelectedDevice(0);
-          }}
-          className="group flex h-8 w-8 cursor-pointer p-0.5 drop-shadow-md"
-        >
-          <PlusIcon />
+            >
+              <Hashicon
+                size={32}
+                value={device.hardware.myNodeNum.toString()}
+              />
+            </div>
+          ))}
           <div
-            className={`absolute -left-1.5 h-7 w-0.5 rounded-full group-hover:bg-accent ${
-              selectedDevice === 0 ? "bg-accent" : "bg-transparent"
+            onClick={() => {
+              setSelectedDevice(0);
+            }}
+            className={`cursor-pointer border-x-4 border-backgroundPrimary bg-backgroundPrimary py-4 px-3 hover:brightness-hover active:brightness-press ${
+              selectedDevice === 0 ? "border-l-accent" : ""
             }`}
-          />
-        </div>
-      </span>
+          >
+            <PlusIcon className="w-6" />
+          </div>
+        </span>
+      </div>
+
+      {selectedDevice !== 0 && (
+        <>
+          <NavSpacer />
+          <PageNav />
+        </>
+      )}
+
+      <NavSpacer />
+
+      <div>//actions</div>
+
       <img
         src={darkMode ? "Logo_White.svg" : "Logo_Black.svg"}
-        className="mt-auto px-3 py-4"
+        className="mt-auto px-2 py-3"
       />
     </div>
   );