@vertesia/tools-admin-ui 1.2.0 → 1.4.0-dev.20260615.042549Z

package/src/pages/ToolCollection.tsx

@@ -22,27 +22,38 @@ export function ToolCollection() {
     const { baseUrl } = useAdminContext();
 
     const { data, error } = useFetch<ToolCollectionResponse>(
-        () => fetch(`${baseUrl}/tools/${collection}`).then(r => {
-            if (!r.ok) throw new Error(`Failed to load collection: ${r.statusText}`);
-            return r.json();
-        }),
-        [baseUrl, collection]
+        () =>
+            fetch(`${baseUrl}/tools/${collection}`).then((r) => {
+                if (!r.ok) throw new Error(`Failed to load collection: ${r.statusText}`);
+                return r.json();
+            }),
+        [baseUrl, collection],
     );
 
-    if (error) return <div className="p-6 text-destructive">Failed to load tool collection &ldquo;{collection}&rdquo;.</div>;
-    if (!data) return <div className="flex h-64 items-center justify-center text-muted-foreground"><Spinner /></div>;
+    if (error)
+        return <div className="p-6 text-destructive">Failed to load tool collection &ldquo;{collection}&rdquo;.</div>;
+    if (!data)
+        return (
+            <div className="flex h-64 items-center justify-center text-muted-foreground">
+                <Spinner />
+            </div>
+        );
 
     return (
         <DetailPage
             type="tool"
             title={data.title || collection}
-            description={data.description || `${data.tools.length} tool${data.tools.length !== 1 ? 's' : ''} in this collection.`}
+            description={
+                data.description || `${data.tools.length} tool${data.tools.length !== 1 ? 's' : ''} in this collection.`
+            }
         >
-            {data.tools.map(tool => (
+            {data.tools.map((tool) => (
                 <Card key={tool.name} className="mb-4">
                     <CardContent className="p-5">
                         <div className="mb-2 flex items-center gap-2">
-                            <span className={`inline-block rounded-full px-2 py-0.5 text-[0.7rem] font-semibold uppercase tracking-wide ${TYPE_VARIANTS.tool}`}>
+                            <span
+                                className={`inline-block rounded-full px-2 py-0.5 text-[0.7rem] font-semibold uppercase tracking-wide ${TYPE_VARIANTS.tool}`}
+                            >
                                 tool
                             </span>
                             <span className="font-semibold text-card-foreground">{tool.name}</span>

package/src/pages/TypeCollection.tsx

@@ -11,15 +11,22 @@ export function TypeCollection() {
     const { baseUrl } = useAdminContext();
 
     const { data: types, error } = useFetch<InCodeTypeDefinition[]>(
-        () => fetch(`${baseUrl}/types/${collection}`).then(r => {
-            if (!r.ok) throw new Error(`Failed to load collection: ${r.statusText}`);
-            return r.json();
-        }),
-        [baseUrl, collection]
+        () =>
+            fetch(`${baseUrl}/types/${collection}`).then((r) => {
+                if (!r.ok) throw new Error(`Failed to load collection: ${r.statusText}`);
+                return r.json();
+            }),
+        [baseUrl, collection],
     );
 
-    if (error) return <div className="p-6 text-destructive">Failed to load type collection &ldquo;{collection}&rdquo;.</div>;
-    if (!types) return <div className="flex h-64 items-center justify-center text-muted-foreground"><Spinner /></div>;
+    if (error)
+        return <div className="p-6 text-destructive">Failed to load type collection &ldquo;{collection}&rdquo;.</div>;
+    if (!types)
+        return (
+            <div className="flex h-64 items-center justify-center text-muted-foreground">
+                <Spinner />
+            </div>
+        );
 
     return (
         <DetailPage
@@ -28,25 +35,27 @@ export function TypeCollection() {
             description={`${types.length} content type${types.length !== 1 ? 's' : ''} in this collection.`}
         >
             <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
-                {types.map(t => {
+                {types.map((t) => {
                     const typeName = t.id?.split(':')[1] || t.name;
                     return (
-                        <NavLink
-                            key={t.name}
-                            href={`/types/${collection}/${typeName}`}
-                            className="no-underline"
-                        >
+                        <NavLink key={t.name} href={`/types/${collection}/${typeName}`} className="no-underline">
                             <Card className="h-full transition-all hover:-translate-y-0.5 hover:shadow-md">
                                 <CardContent className="p-5">
-                                    <span className={`mb-2 inline-block rounded-full px-2 py-0.5 text-[0.7rem] font-semibold uppercase tracking-wide ${TYPE_VARIANTS.type}`}>
+                                    <span
+                                        className={`mb-2 inline-block rounded-full px-2 py-0.5 text-[0.7rem] font-semibold uppercase tracking-wide ${TYPE_VARIANTS.type}`}
+                                    >
                                         type
                                     </span>
                                     <div className="font-semibold text-card-foreground">{t.name}</div>
-                                    <div className="mt-1 text-sm text-muted-foreground">{t.description || 'No description'}</div>
+                                    <div className="mt-1 text-sm text-muted-foreground">
+                                        {t.description || 'No description'}
+                                    </div>
                                     {t.tags && t.tags.length > 0 && (
                                         <div className="mt-3 flex flex-wrap gap-1.5">
-                                            {t.tags.map(tag => (
-                                                <Badge key={tag} variant="default">{tag}</Badge>
+                                            {t.tags.map((tag) => (
+                                                <Badge key={tag} variant="default">
+                                                    {tag}
+                                                </Badge>
                                             ))}
                                         </div>
                                     )}

package/src/pages/TypeDetail.tsx

@@ -12,15 +12,21 @@ export function TypeDetail() {
     const { baseUrl } = useAdminContext();
 
     const { data: typeDef, error } = useFetch<InCodeTypeDefinition>(
-        () => fetch(`${baseUrl}/types/${collection}/${name}`).then(r => {
-            if (!r.ok) throw new Error(`Failed to load type: ${r.statusText}`);
-            return r.json();
-        }),
-        [baseUrl, collection, name]
+        () =>
+            fetch(`${baseUrl}/types/${collection}/${name}`).then((r) => {
+                if (!r.ok) throw new Error(`Failed to load type: ${r.statusText}`);
+                return r.json();
+            }),
+        [baseUrl, collection, name],
     );
 
     if (error) return <div className="p-6 text-destructive">Failed to load type &ldquo;{name}&rdquo;.</div>;
-    if (!typeDef) return <div className="flex h-64 items-center justify-center text-muted-foreground"><Spinner /></div>;
+    if (!typeDef)
+        return (
+            <div className="flex h-64 items-center justify-center text-muted-foreground">
+                <Spinner />
+            </div>
+        );
 
     return (
         <DetailPage

package/src/types.ts

@@ -106,7 +106,7 @@ export interface ResourceData {
  * Formats a kebab/snake-case name into a title.
  */
 function formatTitle(name: string): string {
-    return name.replace(/[-_]/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+    return name.replace(/[-_]/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
 }
 
 /**
@@ -178,11 +178,7 @@ export function buildResourceData(
     }
 
     // --- Tools (url format: "tools/{collection}") ---
-    const toolCounts = countPerCollection(
-        toolsResp.tools,
-        toolsResp.collections,
-        (t) => t.url?.split('/').pop(),
-    );
+    const toolCounts = countPerCollection(toolsResp.tools, toolsResp.collections, (t) => t.url?.split('/').pop());
     for (const col of toolsResp.collections) {
         collections.push({
             name: col.name,
@@ -203,11 +199,7 @@ export function buildResourceData(
     }
 
     // --- Skills (url format: "skills/{collection}") ---
-    const skillCounts = countPerCollection(
-        skillsResp.tools,
-        skillsResp.collections,
-        (t) => t.url?.split('/').pop(),
-    );
+    const skillCounts = countPerCollection(skillsResp.tools, skillsResp.collections, (t) => t.url?.split('/').pop());
     for (const col of skillsResp.collections) {
         collections.push({
             name: col.name,
@@ -228,11 +220,7 @@ export function buildResourceData(
     }
 
     // --- Activities (use collection field from definition) ---
-    const actCounts = countPerCollection(
-        activitiesResp.activities,
-        activitiesResp.collections,
-        (a) => a.collection,
-    );
+    const actCounts = countPerCollection(activitiesResp.activities, activitiesResp.collections, (a) => a.collection);
     for (const col of activitiesResp.collections) {
         collections.push({
             name: col.name,
@@ -253,11 +241,7 @@ export function buildResourceData(
     }
 
     // --- Types (id format: "collection:pathName") ---
-    const typeCounts = countPerCollection(
-        typesResp.types,
-        typesResp.collections,
-        (t) => t.id?.split(':')[0],
-    );
+    const typeCounts = countPerCollection(typesResp.types, typesResp.collections, (t) => t.id?.split(':')[0]);
     for (const col of typesResp.collections) {
         collections.push({
             name: col.name,
@@ -278,14 +262,10 @@ export function buildResourceData(
     }
 
     // --- Templates (path format: "/api/templates/{collection}/{name}") ---
-    const tmplCounts = countPerCollection(
-        templatesResp.templates,
-        templatesResp.collections,
-        (t) => {
-            const segments = t.path?.split('/');
-            return segments && segments.length >= 4 ? segments[3] : undefined;
-        },
-    );
+    const tmplCounts = countPerCollection(templatesResp.templates, templatesResp.collections, (t) => {
+        const segments = t.path?.split('/');
+        return segments && segments.length >= 4 ? segments[3] : undefined;
+    });
     for (const col of templatesResp.collections) {
         collections.push({
             name: col.name,
@@ -327,11 +307,12 @@ export function buildResourceData(
 export function filterResources(items: ResourceItem[], query: string): ResourceItem[] {
     const q = query.toLowerCase().trim();
     if (!q) return items;
-    return items.filter(item =>
-        item.name.toLowerCase().includes(q) ||
-        item.title.toLowerCase().includes(q) ||
-        item.description.toLowerCase().includes(q) ||
-        item.type.includes(q) ||
-        item.tags?.some(t => t.toLowerCase().includes(q))
+    return items.filter(
+        (item) =>
+            item.name.toLowerCase().includes(q) ||
+            item.title.toLowerCase().includes(q) ||
+            item.description.toLowerCase().includes(q) ||
+            item.type.includes(q) ||
+            item.tags?.some((t) => t.toLowerCase().includes(q)),
     );
 }