Admin module: integrate with clan app

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

@@ -15,6 +15,7 @@ import { CreateMachine } from "./routes/machines/create";
 import { HostList } from "./routes/hosts/view";
 import { Welcome } from "./routes/welcome";
 import { Toaster } from "solid-toast";
+import { Details } from "./routes/clan/details";
 
 const client = new QueryClient();
 
@@ -66,7 +67,7 @@ export const routes: AppRoute[] = [
     ],
   },
   {
-    path: "/clan",
+    path: "/clans",
     label: "Clans",
     icon: "groups",
     children: [
@@ -84,6 +85,7 @@ export const routes: AppRoute[] = [
         path: "/:id",
         label: "Details",
         hidden: true,
+        component: () => <Details />,
       },
     ],
   },

pkgs/webview-ui/app/src/routes/clan/details.tsx

@@ -0,0 +1,67 @@
+import { callApi, SuccessData } from "@/src/api";
+import { BackButton } from "@/src/components/BackButton";
+import { useParams } from "@solidjs/router";
+import { createQuery } from "@tanstack/solid-query";
+import { createEffect, For, Match, Switch } from "solid-js";
+import { Show } from "solid-js";
+import { DiskView } from "../disk/view";
+import { Accessor } from "solid-js";
+
+type AdminData = SuccessData<"get_admin_service">["data"];
+
+interface ClanDetailsProps {
+  admin: AdminData;
+}
+
+const ClanDetails = (props: ClanDetailsProps) => {
+  const items = () =>
+    Object.entries<string>(
+      (props.admin?.config?.allowedKeys as Record<string, string>) || {},
+    );
+
+  return (
+    <div>
+      <h1>Clan Details </h1>
+      <For each={items()}>
+        {([name, key]) => (
+          <div>
+            <span>{name}</span>
+            <span>{key}</span>
+          </div>
+        )}
+      </For>
+    </div>
+  );
+};
+
+export const Details = () => {
+  const params = useParams();
+  const clan_dir = window.atob(params.id);
+  const query = createQuery(() => ({
+    queryKey: [clan_dir, "get_admin_service"],
+    queryFn: async () => {
+      const result = await callApi("get_admin_service", {
+        base_url: clan_dir,
+      });
+      if (result.status === "error") throw new Error("Failed to fetch data");
+      return result.data || null;
+    },
+  }));
+
+  return (
+    <div class="p-2">
+      <BackButton />
+      <Show
+        when={!query.isLoading}
+        fallback={<span class="loading loading-lg"></span>}
+      >
+        <Switch>
+          <Match when={query.data}>
+            {(d) => <ClanDetails admin={query.data} />}
+          </Match>
+        </Switch>
+        {clan_dir}
+      </Show>
+    </div>
+  );
+};

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

@@ -17,6 +17,7 @@ export function CreateMachine() {
         loc: activeURI() || "",
       },
       machine: {
+        tags: ["all"],
         deploy: {
           targetHost: "",
         },

pkgs/webview-ui/app/src/routes/settings/index.tsx

@@ -5,7 +5,8 @@ import { createQuery } from "@tanstack/solid-query";
 import { useFloating } from "@/src/floating";
 import { autoUpdate, flip, hide, offset, shift } from "@floating-ui/dom";
 import { EditClanForm } from "../clan/editClan";
-import { useNavigate } from "@solidjs/router";
+import { useNavigate, A } from "@solidjs/router";
+import { fileURLToPath } from "url";
 
 export const registerClan = async () => {
   try {
@@ -145,7 +146,9 @@ const ClanDetails = (props: ClanDetailsProps) => {
         <div class="skeleton h-12 w-80" />
       </Show>
       <Show when={details.isSuccess}>
-        <div class="stat-value">{details.data?.name}</div>
+        <A href={`/clans/${window.btoa(clan_dir)}`}>
+          <div class="stat-value underline">{details.data?.name}</div>
+        </A>
       </Show>
       <Show when={details.isSuccess && details.data?.description}>
         <div class="stat-desc text-lg">{details.data?.description}</div>

pkgs/webview-ui/app/src/routes/welcome/index.tsx

@@ -13,7 +13,7 @@ export const Welcome = () => {
           <div class="flex flex-col items-start gap-2">
             <button
               class="btn btn-primary w-full"
-              onClick={() => navigate("/clan/create")}
+              onClick={() => navigate("/clans/create")}
             >
               Build your own
             </button>