UI/Header: move header into subpages & fix general layout

pkgs/webview-ui/app/src/layout/header.tsx

@@ -1,33 +1,13 @@
-import { createQuery } from "@tanstack/solid-query";
+import { JSX } from "solid-js";
-import { activeURI } from "../App";
+import { Typography } from "../components/Typography";
-import { callApi } from "../api";
-import { Accessor, Show } from "solid-js";
-import { useNavigate } from "@solidjs/router";
-
-import Icon from "../components/icon";
-import { Button } from "../components/button";
 
 interface HeaderProps {
-  clan_dir: Accessor<string | null>;
+  title: string;
+  toolbar?: JSX.Element;
 }
 export const Header = (props: HeaderProps) => {
-  const { clan_dir } = props;
-  const navigate = useNavigate();
-
-  const query = createQuery(() => ({
-    queryKey: [clan_dir(), "meta"],
-    queryFn: async () => {
-      const curr = clan_dir();
-      if (curr) {
-        const result = await callApi("show_clan_meta", { uri: curr });
-        if (result.status === "error") throw new Error("Failed to fetch data");
-        return result.data;
-      }
-    },
-  }));
-
   return (
-    <div class="navbar">
+    <div class="navbar border-b px-6 py-4 border-def-3">
       <div class="flex-none">
         <span class="tooltip tooltip-bottom lg:hidden" data-tip="Menu">
           <label
@@ -38,19 +18,13 @@ export const Header = (props: HeaderProps) => {
           </label>
         </span>
       </div>
-      <div class="flex-1"></div>
+      <div class="flex-1">
-      <div class="flex-none">
+        <Typography hierarchy="title" size="m" weight="medium">
-        <Show when={activeURI()}>
+          {props.title}
-          {(d) => (
+        </Typography>
-            <span class="tooltip tooltip-bottom" data-tip="Clan Settings">
+      </div>
-              <Button
+      <div class="flex-none items-center justify-center gap-3">
-                variant="light"
+        {props.toolbar}
-                onClick={() => navigate(`/clans/${window.btoa(d())}`)}
-                startIcon={<Icon icon="Settings" />}
-              ></Button>
-            </span>
-          )}
-        </Show>
       </div>
     </div>
   );

pkgs/webview-ui/app/src/layout/layout.tsx

@@ -1,16 +1,14 @@
-import { Component, createEffect, Show } from "solid-js";
+import { Component, createEffect } from "solid-js";
-import { Header } from "./header";
 import { Sidebar } from "@/src/components/Sidebar";
-import { activeURI, clanList } from "../App";
+import { clanList } from "../App";
 import { RouteSectionProps, useNavigate } from "@solidjs/router";
 
 export const Layout: Component<RouteSectionProps> = (props) => {
   const navigate = useNavigate();
   createEffect(() => {
-    console.log("Layout props", props.location);
     console.log(
       "empty ClanList, redirect to welcome page",
-      clanList().length === 0,
+      clanList().length === 0
     );
     if (clanList().length === 0) {
       navigate("/welcome");
@@ -25,10 +23,7 @@ export const Layout: Component<RouteSectionProps> = (props) => {
           type="checkbox"
           class="drawer-toggle hidden"
         />
-        <div class="drawer-content overflow-x-hidden overflow-y-scroll p-2">
+        <div class="drawer-content my-2 ml-8 overflow-x-hidden overflow-y-scroll rounded-lg border bg-def-1 border-def-3">
-          <Show when={props.location.pathname !== "welcome"}>
-            <Header clan_dir={activeURI} />
-          </Show>
           {props.children}
         </div>
         <div

pkgs/webview-ui/app/src/routes/machines/list.tsx

@@ -14,6 +14,7 @@ import { createQuery, useQueryClient } from "@tanstack/solid-query";
 import { useNavigate } from "@solidjs/router";
 import { Button } from "@/src/components/button";
 import Icon from "@/src/components/icon";
+import { Header } from "@/src/layout/header";
 
 type MachinesModel = Extract<
   OperationResponse<"list_inventory_machines">,
@@ -65,23 +66,50 @@ export const MachineListView: Component = () => {
   const navigate = useNavigate();
 
   return (
-    <div>
+    <>
-      <div class="tooltip tooltip-bottom" data-tip="Open Clan"></div>
+      <Header
-      <div class="tooltip tooltip-bottom" data-tip="Refresh">
+        title="Your Machines"
+        toolbar={
+          <>
+            <span class="tooltip tooltip-bottom" data-tip="Reload">
               <Button
                 variant="light"
+                size="s"
                 onClick={() => refresh()}
                 startIcon={<Icon icon="Reload" />}
               ></Button>
-      </div>
+            </span>
 
-      <div class="tooltip tooltip-bottom" data-tip="Create machine">
+            <div class="border border-def-3">
+              <span class="tooltip tooltip-bottom" data-tip="List View">
+                <Button
+                  variant="dark"
+                  size="s"
+                  startIcon={<Icon icon="List" />}
+                ></Button>
+              </span>
+              <span class="tooltip tooltip-bottom" data-tip="Grid View">
                 <Button
                   variant="light"
-          onClick={() => navigate("create")}
+                  size="s"
-          startIcon={<Icon icon="Plus" />}
+                  startIcon={<Icon icon="Grid" />}
                 ></Button>
+              </span>
             </div>
+            <span class="tooltip tooltip-bottom" data-tip="New Machine">
+              <Button
+                onClick={() => navigate("create")}
+                size="s"
+                variant="light"
+                startIcon={<Icon icon="Plus" />}
+              >
+                New Machine
+              </Button>
+            </span>
+          </>
+        }
+      />
+      <div>
         {/* <Show when={filter()}> */}
         <div class="my-1 flex w-full gap-2 p-2">
           <div class="size-6 p-1">
@@ -156,5 +184,6 @@ export const MachineListView: Component = () => {
           </Match>
         </Switch>
       </div>
+    </>
   );
 };