From a7191b1c90bb0feca6e53e9a2011ad57b6ed5636 Mon Sep 17 00:00:00 2001
From: Johannes Kirschbauer <hsjobeki@gmail.com>
Date: Tue, 10 Dec 2024 15:15:11 +0100
Subject: [PATCH] UI/Header: move header into subpages & fix general layout

---
 pkgs/webview-ui/app/src/layout/header.tsx     |  50 ++---
 pkgs/webview-ui/app/src/layout/layout.tsx     |  13 +-
 .../app/src/routes/machines/list.tsx          | 203 ++++++++++--------
 3 files changed, 132 insertions(+), 134 deletions(-)

diff --git a/pkgs/webview-ui/app/src/layout/header.tsx b/pkgs/webview-ui/app/src/layout/header.tsx
index 3924a299d..45859f909 100644
--- a/pkgs/webview-ui/app/src/layout/header.tsx
+++ b/pkgs/webview-ui/app/src/layout/header.tsx
@@ -1,33 +1,13 @@
-import { createQuery } from "@tanstack/solid-query";
-import { activeURI } from "../App";
-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";
+import { JSX } from "solid-js";
+import { Typography } from "../components/Typography";
 
 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-none">
-        <Show when={activeURI()}>
-          {(d) => (
-            <span class="tooltip tooltip-bottom" data-tip="Clan Settings">
-              <Button
-                variant="light"
-                onClick={() => navigate(`/clans/${window.btoa(d())}`)}
-                startIcon={<Icon icon="Settings" />}
-              ></Button>
-            </span>
-          )}
-        </Show>
+      <div class="flex-1">
+        <Typography hierarchy="title" size="m" weight="medium">
+          {props.title}
+        </Typography>
+      </div>
+      <div class="flex-none items-center justify-center gap-3">
+        {props.toolbar}
       </div>
     </div>
   );
diff --git a/pkgs/webview-ui/app/src/layout/layout.tsx b/pkgs/webview-ui/app/src/layout/layout.tsx
index 55cde957e..0aef50176 100644
--- a/pkgs/webview-ui/app/src/layout/layout.tsx
+++ b/pkgs/webview-ui/app/src/layout/layout.tsx
@@ -1,16 +1,14 @@
-import { Component, createEffect, Show } from "solid-js";
-import { Header } from "./header";
+import { Component, createEffect } from "solid-js";
 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">
-          <Show when={props.location.pathname !== "welcome"}>
-            <Header clan_dir={activeURI} />
-          </Show>
+        <div class="drawer-content my-2 ml-8 overflow-x-hidden overflow-y-scroll rounded-lg border bg-def-1 border-def-3">
           {props.children}
         </div>
         <div
diff --git a/pkgs/webview-ui/app/src/routes/machines/list.tsx b/pkgs/webview-ui/app/src/routes/machines/list.tsx
index 5f858a661..0d475e5f5 100644
--- a/pkgs/webview-ui/app/src/routes/machines/list.tsx
+++ b/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,96 +66,124 @@ export const MachineListView: Component = () => {
   const navigate = useNavigate();
 
   return (
-    <div>
-      <div class="tooltip tooltip-bottom" data-tip="Open Clan"></div>
-      <div class="tooltip tooltip-bottom" data-tip="Refresh">
-        <Button
-          variant="light"
-          onClick={() => refresh()}
-          startIcon={<Icon icon="Reload" />}
-        ></Button>
-      </div>
+    <>
+      <Header
+        title="Your Machines"
+        toolbar={
+          <>
+            <span class="tooltip tooltip-bottom" data-tip="Reload">
+              <Button
+                variant="light"
+                size="s"
+                onClick={() => refresh()}
+                startIcon={<Icon icon="Reload" />}
+              ></Button>
+            </span>
 
-      <div class="tooltip tooltip-bottom" data-tip="Create machine">
-        <Button
-          variant="light"
-          onClick={() => navigate("create")}
-          startIcon={<Icon icon="Plus" />}
-        ></Button>
-      </div>
-      {/* <Show when={filter()}> */}
-      <div class="my-1 flex w-full gap-2 p-2">
-        <div class="size-6 p-1">
-          <Icon icon="Filter" />
-        </div>
-        <For each={filter().tags.sort()}>
-          {(tag) => (
-            <button
-              type="button"
-              onClick={() =>
-                setFilter((prev) => {
-                  return {
-                    ...prev,
-                    tags: prev.tags.filter((t) => t !== tag),
-                  };
-                })
-              }
-            >
-              <span class="rounded-full px-3 py-1 bg-inv-4 fg-inv-1">
-                {tag}
+            <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>
-            </button>
-          )}
-        </For>
-      </div>
-      {/* </Show> */}
-      <Switch>
-        <Match when={inventoryQuery.isLoading}>
-          {/* Loading skeleton */}
-          <div>
-            <div class="card card-side m-2 bg-base-100 shadow-lg">
-              <figure class="pl-2">
-                <div class="skeleton size-12"></div>
-              </figure>
-              <div class="card-body">
-                <h2 class="card-title">
-                  <div class="skeleton h-12 w-80"></div>
-                </h2>
-                <div class="skeleton h-8 w-72"></div>
+              <span class="tooltip tooltip-bottom" data-tip="Grid View">
+                <Button
+                  variant="light"
+                  size="s"
+                  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">
+            <Icon icon="Filter" />
+          </div>
+          <For each={filter().tags.sort()}>
+            {(tag) => (
+              <button
+                type="button"
+                onClick={() =>
+                  setFilter((prev) => {
+                    return {
+                      ...prev,
+                      tags: prev.tags.filter((t) => t !== tag),
+                    };
+                  })
+                }
+              >
+                <span class="rounded-full px-3 py-1 bg-inv-4 fg-inv-1">
+                  {tag}
+                </span>
+              </button>
+            )}
+          </For>
+        </div>
+        {/* </Show> */}
+        <Switch>
+          <Match when={inventoryQuery.isLoading}>
+            {/* Loading skeleton */}
+            <div>
+              <div class="card card-side m-2 bg-base-100 shadow-lg">
+                <figure class="pl-2">
+                  <div class="skeleton size-12"></div>
+                </figure>
+                <div class="card-body">
+                  <h2 class="card-title">
+                    <div class="skeleton h-12 w-80"></div>
+                  </h2>
+                  <div class="skeleton h-8 w-72"></div>
+                </div>
               </div>
             </div>
-          </div>
-        </Match>
-        <Match
-          when={!inventoryQuery.isLoading && inventoryMachines().length === 0}
-        >
-          <div class="mt-8 flex w-full flex-col items-center justify-center gap-2">
-            <span class="text-lg text-neutral">
-              No machines defined yet. Click below to define one.
-            </span>
-            <Button
-              variant="light"
-              class="size-28 overflow-hidden p-2"
-              onClick={() => navigate("/machines/create")}
-            >
-              <span class="material-icons text-6xl font-light">add</span>
-            </Button>
-          </div>
-        </Match>
-        <Match when={!inventoryQuery.isLoading}>
-          <ul>
-            <For each={inventoryMachines()}>
-              {([name, info]) => (
-                <MachineListItem
-                  name={name}
-                  info={info}
-                  setFilter={setFilter}
-                />
-              )}
-            </For>
-          </ul>
-        </Match>
-      </Switch>
-    </div>
+          </Match>
+          <Match
+            when={!inventoryQuery.isLoading && inventoryMachines().length === 0}
+          >
+            <div class="mt-8 flex w-full flex-col items-center justify-center gap-2">
+              <span class="text-lg text-neutral">
+                No machines defined yet. Click below to define one.
+              </span>
+              <Button
+                variant="light"
+                class="size-28 overflow-hidden p-2"
+                onClick={() => navigate("/machines/create")}
+              >
+                <span class="material-icons text-6xl font-light">add</span>
+              </Button>
+            </div>
+          </Match>
+          <Match when={!inventoryQuery.isLoading}>
+            <ul>
+              <For each={inventoryMachines()}>
+                {([name, info]) => (
+                  <MachineListItem
+                    name={name}
+                    info={info}
+                    setFilter={setFilter}
+                  />
+                )}
+              </For>
+            </ul>
+          </Match>
+        </Switch>
+      </div>
+    </>
   );
 };