feat(ui): stop reloading sidebar when moving between machine

pkgs/clan-app/ui/src/components/Sidebar/SidebarPane.tsx

@@ -9,7 +9,7 @@ export interface SidebarPaneProps {
   class?: string;
   title: string;
   onClose: () => void;
-  subHeader?: () => JSX.Element;
+  subHeader?: JSX.Element;
   children: JSX.Element;
 }
 
@@ -43,7 +43,7 @@ export const SidebarPane = (props: SidebarPaneProps) => {
         </KButton>
       </div>
       <Show when={props.subHeader}>
-        <div class="sub-header">{props.subHeader!()}</div>
+        <div class="sub-header">{props.subHeader}</div>
       </Show>
       <div class="body">{props.children}</div>
     </div>

pkgs/clan-app/ui/src/routes/Machine/Machine.tsx

@@ -20,7 +20,8 @@ export const Machine = (props: RouteSectionProps) => {
     navigateToClan(navigate, clanURI);
   };
 
-  const sidebarPane = (machineName: string) => {
+  const sections = () => {
+    const machineName = useMachineName();
     const machineQuery = useMachineQuery(clanURI, machineName);
 
     // we have to update the whole machine model rather than just the sub fields that were changed
@@ -51,25 +52,35 @@ export const Machine = (props: RouteSectionProps) => {
     const sectionProps = { clanURI, machineName, onSubmit, machineQuery };
 
     return (
-      <div class={styles.sidebarPaneContainer}>
-        <SidebarPane
-          title={machineName}
-          onClose={onClose}
-          subHeader={() => (
-            <SidebarMachineStatus clanURI={clanURI} machineName={machineName} />
-          )}
-        >
-          <SidebarSectionInstall clanURI={clanURI} machineName={machineName} />
-          <SectionGeneral {...sectionProps} />
-          <SectionTags {...sectionProps} />
-        </SidebarPane>
-      </div>
+      <>
+        <SidebarSectionInstall
+          clanURI={clanURI}
+          machineName={useMachineName()}
+        />
+        <SectionGeneral {...sectionProps} />
+        <SectionTags {...sectionProps} />
+      </>
     );
   };
 
   return (
-    <Show when={useMachineName()} keyed>
-      {sidebarPane(useMachineName())}
+    <Show when={useMachineName()}>
+      <div class={styles.sidebarPaneContainer}>
+        <SidebarPane
+          title={useMachineName()}
+          onClose={onClose}
+          subHeader={
+            <Show when={useMachineName()} keyed>
+              <SidebarMachineStatus
+                clanURI={clanURI}
+                machineName={useMachineName()}
+              />
+            </Show>
+          }
+        >
+          {sections()}
+        </SidebarPane>
+      </div>
     </Show>
   );
 };