fix: address administration layout and navigation issues #28 #29 #30 #31

frontend/src/shell/PiManagement.tsx

@@ -202,13 +202,12 @@ function PiInstructionSteps({ details }: { details: PiPlatformDetails }) {
   </ol>;
 }
 
-function PiPlatformInstructions() {
-  const [activePlatform, setActivePlatform] = useState<PiPlatform>();
-  const [focusedPlatform, setFocusedPlatform] = useState<PiPlatform>("linux");
+function PiPlatformInstructions({ hostPlatform }: { hostPlatform?: PiPlatform }) {
+  const [chosenPlatform, setActivePlatform] = useState<PiPlatform>();
+  const activePlatform = chosenPlatform ?? hostPlatform ?? "linux";
   const tabRefs = useRef<Record<PiPlatform, HTMLButtonElement | null>>({ linux: null, macos: null, windows: null });
 
   function activateAndFocus(platform: PiPlatform) {
-    setFocusedPlatform(platform);
     setActivePlatform(platform);
     tabRefs.current[platform]?.focus();
   }
@@ -242,13 +241,11 @@ function PiPlatformInstructions() {
             role="tab"
             aria-selected={activePlatform === platform.id}
             aria-controls={`pi-${platform.id}-panel`}
-            tabIndex={focusedPlatform === platform.id ? 0 : -1}
+            tabIndex={activePlatform === platform.id ? 0 : -1}
             className={activePlatform === platform.id ? "rounded bg-background px-2 py-1.5 font-semibold text-foreground shadow-sm" : "rounded px-2 py-1.5 font-semibold text-muted-foreground hover:bg-background/70 hover:text-foreground"}
-            onFocus={() => setFocusedPlatform(platform.id)}
             onKeyDown={(event) => handleTabKeyDown(event, platform.id)}
             onClick={() => {
-              setFocusedPlatform(platform.id);
-              setActivePlatform((current) => current === platform.id ? undefined : platform.id);
+              setActivePlatform(platform.id);
             }}
           >
             {platform.label}
@@ -348,7 +345,9 @@ export function PiManagement({ open, onClose, page = false }: { open: boolean; o
           <Button variant={section === "instructions" ? "navigationActive" : "ghost"} className="w-full justify-start whitespace-normal" aria-current={section === "instructions" ? "page" : undefined} onClick={() => setSection("instructions")}>Host maintenance</Button>
         </nav>}
         <div className={page ? "thot-pi-detail" : undefined}>
-        {(!page || section === "instructions") && <PiPlatformInstructions />}
+        <div hidden={page && section !== "instructions"}>
+          <PiPlatformInstructions hostPlatform={statusQuery.data?.hostPlatform} />
+        </div>
         <div className={page ? undefined : "mt-5"} hidden={page && section !== "runtime"}>
           {forbidden ? (
             <div role="alert" aria-label="Pi management unavailable" className="rounded-md border border-destructive/30 bg-destructive/5 p-4 text-sm">