Clan-app: edit clan, memoize active clan

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

@@ -1,15 +1,20 @@
 import { createQuery } from "@tanstack/solid-query";
 import { activeURI, setRoute } from "../App";
 import { callApi } from "../api";
-import { Show } from "solid-js";
+import { Accessor, createEffect, Show } from "solid-js";
 
-export const Header = () => {
-  const { isLoading, data } = createQuery(() => ({
-    queryKey: [`${activeURI()}:meta`],
+interface HeaderProps {
+  clan_dir: Accessor<string | null>;
+}
+export const Header = (props: HeaderProps) => {
+  const { clan_dir } = props;
+
+  const query = createQuery(() => ({
+    queryKey: [clan_dir(), "meta"],
     queryFn: async () => {
-      const currUri = activeURI();
-      if (currUri) {
-        const result = await callApi("show_clan_meta", { uri: currUri });
+      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;
       }
@@ -29,16 +34,25 @@ export const Header = () => {
         </span>
       </div>
       <div class="flex-1">
-        <div class="tooltip tooltip-right" data-tip={data?.name || activeURI()}>
-          <div class="avatar placeholder online mx-4">
-            <div class="w-10 rounded-full bg-slate-700 text-neutral-content">
-              <span class="text-xl">C</span>
-              <Show when={data?.name}>
-                {(name) => <span class="text-xl">{name()}</span>}
-              </Show>
+        <Show when={!query.isFetching && query.data}>
+          {(meta) => (
+            <div class="tooltip tooltip-right" data-tip={activeURI()}>
+              <div class="avatar placeholder online mx-4">
+                <div class="w-10 rounded-full bg-slate-700 text-3xl text-neutral-content">
+                  {meta().name.slice(0, 1)}
+                </div>
+              </div>
             </div>
-          </div>
-        </div>
+          )}
+        </Show>
+        <span class="flex flex-col">
+          <Show when={!query.isFetching && query.data}>
+            {(meta) => [
+              <span class="text-primary">{meta().name}</span>,
+              <span class="text-neutral">{meta()?.description}</span>,
+            ]}
+          </Show>
+        </span>
       </div>
       <div class="flex-none">
         <span class="tooltip tooltip-bottom" data-tip="Settings">

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

@@ -1,7 +1,7 @@
 import { Component, JSXElement, Show } from "solid-js";
 import { Header } from "./header";
 import { Sidebar } from "../Sidebar";
-import { clanList, route, setRoute } from "../App";
+import { activeURI, clanList, route, setRoute } from "../App";
 
 interface LayoutProps {
   children: JSXElement;
@@ -18,7 +18,7 @@ export const Layout: Component<LayoutProps> = (props) => {
         />
         <div class="drawer-content">
           <Show when={route() !== "welcome"}>
-            <Header />
+            <Header clan_dir={activeURI} />
           </Show>
           {props.children}
         </div>