Feat(UI/modules): display more module informations

pkgs/clan-cli/clan_lib/api/modules.py

@@ -143,6 +143,8 @@ def get_roles(module_path: Path) -> None | list[str]:
 
 class ModuleManifest(TypedDict):
     name: str
+    description: str
+    categories: list[str]
     features: dict[str, bool]
 
 

pkgs/webview-ui/app/src/queries/index.ts

@@ -22,10 +22,10 @@ export const createModulesQuery = (
         const response = await callApi("list_modules", {
           base_path: uri,
         });
-        console.log({ response });
         if (response.status === "error") {
           toast.error("Failed to fetch data");
         } else {
+          console.log(response.data.localModules["hello-world"]["manifest"]);
           return response.data;
         }
       }

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

@@ -48,6 +48,7 @@ const Roles = (props: RolesProps) => {
 const ModuleItem = (props: {
   name: string;
   info: ModuleInfo;
+  source: string;
   class?: string;
 }) => {
   const { name, info } = props;
@@ -60,42 +61,38 @@ const ModuleItem = (props: {
         props.class,
       )}
     >
-      {/* <div class="stat-figure text-primary-800">
+      <header class="flex flex-row items-center justify-between">
-        <div class="join">
+        <div class="flex flex-col gap-4">
-          <Menu popoverid={`menu-${props.name}`} label={<Icon icon={"More"} />}>
+          <A href={`/modules/details/${props.source}/${info.manifest.name}`}>
-            <ul class="z-[1] w-52 p-2 shadow">
+            <div class="">
-              <li>
+              <div class="flex flex-col">
-                <a
+                {/* <Categories categories={info.categories} /> */}
-                  onClick={() => {
+                <Typography hierarchy="title" size="m" weight="medium">
-                    navigate(`/modules/details/${name}`);
+                  {info.manifest.name}
-                  }}
+                </Typography>
-                >
+              </div>
-                  Configure
-                </a>
-              </li>
-            </ul>
-          </Menu>
-        </div>
-      </div> */}
-
-      <header class="flex flex-col gap-4">
-        <A href={`/modules/details/${name}`}>
-          <div class="">
-            <div class="flex flex-col">
-              {/* <Categories categories={info.categories} /> */}
-              <Typography hierarchy="title" size="m" weight="medium">
-                {name}
-              </Typography>
             </div>
-          </div>
+          </A>
-        </A>
 
-        <div class="w-full">
+          <div class="w-full">
-          <Typography hierarchy="body" size="xs">
+            <Typography hierarchy="body" size="xs">
-            description
+              {info.manifest.description}
-            {/* TODO: {info.description} */}
+            </Typography>
-          </Typography>
+          </div>
         </div>
+        <Menu popoverid={`menu-${props.name}`} label={<Icon icon={"More"} />}>
+          <ul class="z-[1] w-52 bg-slate-100 p-2 shadow">
+            <li>
+              <a
+                onClick={() => {
+                  navigate(`/modules/details/${name}`);
+                }}
+              >
+                Configure
+              </a>
+            </li>
+          </ul>
+        </Menu>
       </header>
       <Roles roles={info.roles || {}} />
     </div>
@@ -181,6 +178,7 @@ export const ModuleList = () => {
                     <For each={Object.entries(v)}>
                       {([moduleName, moduleInfo]) => (
                         <ModuleItem
+                          source={sourceName}
                           info={moduleInfo}
                           name={moduleName}
                           class={view() == "grid" ? cx("max-w-md") : ""}
@@ -194,6 +192,7 @@ export const ModuleList = () => {
               <For each={Object.entries(modules().localModules)}>
                 {([moduleName, moduleInfo]) => (
                   <ModuleItem
+                    source={"localModules"}
                     info={moduleInfo}
                     name={moduleName}
                     class={view() == "grid" ? cx("max-w-md") : ""}