@industry-theme/alexandria-panels 0.1.16 → 0.1.18

package/dist/panels/WorkspaceCollectionPanel/index.d.ts

@@ -1,11 +1,18 @@
 import React from 'react';
 import type { PanelComponentProps } from '../../types';
+export interface WorkspaceCollectionPanelProps extends PanelComponentProps {
+    selectedRepository?: string;
+}
 /**
  * WorkspaceCollectionPanel - Browser-based workspace repository management panel
  *
+ * Props:
+ * - selectedRepository: Full name of the selected repo (e.g., "owner/repo")
+ *
  * Features:
  * - List all repositories in a workspace
- * - Filter repositories by name/description
+ * - Toggle between name (A-Z) and recently updated sorting
+ * - Syncs selection with selectedRepository prop and repository:selected events
  * - Navigate to repository pages
  * - Remove repositories from workspace
  *
@@ -18,7 +25,7 @@ import type { PanelComponentProps } from '../../types';
  * - repository:navigate
  * - repository:removed
  */
-export declare const WorkspaceCollectionPanel: React.FC<PanelComponentProps>;
+export declare const WorkspaceCollectionPanel: React.FC<WorkspaceCollectionPanelProps>;
 /**
  * Preview component for panel tabs/thumbnails
  */

package/dist/panels/WorkspaceCollectionPanel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/panels/WorkspaceCollectionPanel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAUzE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAqwBvD;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAElE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,+BAA+B,EAAE,KAAK,CAAC,EAsCnD,CAAC;AAGF,YAAY,EACV,SAAS,EACT,wBAAwB,EACxB,0BAA0B,EAC1B,+BAA+B,EAC/B,yBAAyB,EACzB,wBAAwB,EACxB,yBAAyB,GAC1B,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/panels/WorkspaceCollectionPanel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AASzE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAYvD,MAAM,WAAW,6BAA8B,SAAQ,mBAAmB;IACxE,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AA8uBD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CAE5E,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,+BAA+B,EAAE,KAAK,CAAC,EAsCnD,CAAC;AAGF,YAAY,EACV,SAAS,EACT,wBAAwB,EACxB,0BAA0B,EAC1B,+BAA+B,EAC/B,yBAAyB,EACzB,wBAAwB,EACxB,yBAAyB,GAC1B,MAAM,SAAS,CAAC"}

package/dist/panels.bundle.js

@@ -3020,12 +3020,13 @@ function getLanguageColor$1(language) {
 const WorkspaceCollectionPanelContent = ({
   context,
   actions,
-  events
+  events,
+  selectedRepository
 }) => {
   var _a, _b, _c, _d;
   const { theme } = useTheme();
-  const [filter, setFilter] = useState("");
   const [selectedRepo, setSelectedRepo] = useState(null);
+  const [sortField, setSortField] = useState("name");
   const panelActions = actions;
   const workspaceSlice = context.getSlice("workspace");
   const repositoriesSlice = context.getSlice("workspaceRepositories");
@@ -3033,24 +3034,44 @@ const WorkspaceCollectionPanelContent = ({
   const repositories = ((_b = repositoriesSlice == null ? void 0 : repositoriesSlice.data) == null ? void 0 : _b.repositories) ?? [];
   const isLoading = (workspaceSlice == null ? void 0 : workspaceSlice.loading) || (repositoriesSlice == null ? void 0 : repositoriesSlice.loading) || false;
   const error = ((_c = workspaceSlice == null ? void 0 : workspaceSlice.data) == null ? void 0 : _c.error) || ((_d = repositoriesSlice == null ? void 0 : repositoriesSlice.data) == null ? void 0 : _d.error);
-  const filteredRepositories = useMemo(() => {
-    let filtered = [...repositories];
-    if (filter.trim()) {
-      const normalizedFilter = filter.trim().toLowerCase();
-      filtered = filtered.filter((repo) => {
-        var _a2;
-        const haystack = [
-          repo.name,
-          repo.full_name,
-          ((_a2 = repo.owner) == null ? void 0 : _a2.login) ?? "",
-          repo.description ?? "",
-          repo.language ?? ""
-        ].join(" ").toLowerCase();
-        return haystack.includes(normalizedFilter);
-      });
+  useEffect(() => {
+    if (selectedRepository && repositories.length > 0) {
+      const repo = repositories.find((r) => r.full_name === selectedRepository);
+      if (repo) {
+        setSelectedRepo(repo);
+      }
     }
-    return filtered.sort((a, b) => a.name.localeCompare(b.name));
-  }, [repositories, filter]);
+  }, [selectedRepository, repositories]);
+  useEffect(() => {
+    const unsubscribe = events.on("repository:selected", (event) => {
+      var _a2;
+      const payload = event.payload;
+      if (((_a2 = payload == null ? void 0 : payload.repository) == null ? void 0 : _a2.full_name) && repositories.length > 0) {
+        const repo = repositories.find((r) => {
+          var _a3;
+          return r.full_name === ((_a3 = payload.repository) == null ? void 0 : _a3.full_name);
+        });
+        if (repo) {
+          setSelectedRepo(repo);
+        }
+      }
+    });
+    return () => unsubscribe();
+  }, [events, repositories]);
+  const toggleSort = () => {
+    setSortField(sortField === "name" ? "updated" : "name");
+  };
+  const sortedRepositories = useMemo(() => {
+    return [...repositories].sort((a, b) => {
+      if (sortField === "name") {
+        return a.name.localeCompare(b.name);
+      } else {
+        const aTime = new Date(a.pushed_at || a.updated_at || 0).getTime();
+        const bTime = new Date(b.pushed_at || b.updated_at || 0).getTime();
+        return bTime - aTime;
+      }
+    });
+  }, [repositories, sortField]);
   const handleSelectRepository = useCallback(
     (repository) => {
       setSelectedRepo(repository);
@@ -3138,10 +3159,6 @@ const WorkspaceCollectionPanelContent = ({
             void handleRemoveRepository(repository);
           }
         }
-      }),
-      events.on(`${PANEL_ID$a}:filter`, (event) => {
-        var _a2;
-        setFilter(((_a2 = event.payload) == null ? void 0 : _a2.filter) || "");
       })
     ];
     return () => unsubscribers.forEach((unsub) => unsub());
@@ -3153,9 +3170,7 @@ const WorkspaceCollectionPanelContent = ({
     backgroundColor: theme.colors.backgroundSecondary
   };
   const contentContainerStyle = {
-    ...baseContainerStyle,
-    padding: "16px",
-    gap: "12px"
+    ...baseContainerStyle
   };
   if (!workspace) {
     return /* @__PURE__ */ jsx("div", { style: baseContainerStyle, children: /* @__PURE__ */ jsx(
@@ -3273,69 +3288,71 @@ const WorkspaceCollectionPanelContent = ({
     ) });
   }
   return /* @__PURE__ */ jsxs("div", { style: contentContainerStyle, children: [
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx(
-        "h3",
-        {
-          style: {
-            margin: "0 0 4px 0",
-            fontSize: `${theme.fontSizes[2]}px`,
-            fontWeight: theme.fontWeights.semibold,
-            color: theme.colors.text,
-            fontFamily: theme.fonts.body
-          },
-          children: workspace.name
-        }
-      ),
-      workspace.description && /* @__PURE__ */ jsx(
-        "p",
-        {
-          style: {
-            margin: 0,
-            fontSize: `${theme.fontSizes[1]}px`,
-            color: theme.colors.textSecondary,
-            fontFamily: theme.fonts.body
-          },
-          children: workspace.description
-        }
-      )
-    ] }),
-    repositories.length > 0 && /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
-      /* @__PURE__ */ jsx(
-        Search,
-        {
-          size: 16,
-          style: {
-            position: "absolute",
-            top: "50%",
-            left: "12px",
-            transform: "translateY(-50%)",
-            color: theme.colors.textSecondary,
-            pointerEvents: "none"
-          }
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          type: "text",
-          value: filter,
-          placeholder: "Filter repositories...",
-          onChange: (e) => setFilter(e.target.value),
-          style: {
-            width: "100%",
-            padding: "8px 12px 8px 36px",
-            borderRadius: "6px",
-            border: `1px solid ${theme.colors.border}`,
-            backgroundColor: theme.colors.background,
-            color: theme.colors.text,
-            fontSize: `${theme.fontSizes[1]}px`,
-            fontFamily: theme.fonts.body,
-            outline: "none"
-          }
-        }
-      )
-    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          height: "40px",
+          minHeight: "40px",
+          padding: "0 16px",
+          borderBottom: `1px solid ${theme.colors.border}`,
+          display: "flex",
+          alignItems: "center",
+          gap: "8px"
+        },
+        children: [
+          /* @__PURE__ */ jsx(Folder, { size: 18, color: theme.colors.primary }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                fontSize: `${theme.fontSizes[2]}px`,
+                fontWeight: theme.fontWeights.medium,
+                color: theme.colors.text,
+                fontFamily: theme.fonts.body
+              },
+              children: "Repositories"
+            }
+          ),
+          repositories.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  fontSize: `${theme.fontSizes[1]}px`,
+                  color: theme.colors.textSecondary,
+                  padding: "2px 8px",
+                  borderRadius: "12px",
+                  backgroundColor: theme.colors.background
+                },
+                children: repositories.length
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: toggleSort,
+                style: {
+                  marginLeft: "auto",
+                  padding: "4px 10px",
+                  borderRadius: "4px",
+                  border: `1px solid ${theme.colors.border}`,
+                  background: theme.colors.background,
+                  color: theme.colors.text,
+                  fontSize: `${theme.fontSizes[1]}px`,
+                  fontFamily: theme.fonts.body,
+                  cursor: "pointer",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "4px"
+                },
+                children: sortField === "name" ? "A-Z" : "Recent"
+              }
+            )
+          ] })
+        ]
+      }
+    ),
     error && /* @__PURE__ */ jsx(
       "div",
       {
@@ -3344,6 +3361,7 @@ const WorkspaceCollectionPanelContent = ({
           alignItems: "center",
           gap: "8px",
           padding: "10px 14px",
+          margin: "8px 16px",
           borderRadius: "6px",
           backgroundColor: `${theme.colors.error || "#ef4444"}20`,
           color: theme.colors.error || "#ef4444",
@@ -3353,28 +3371,6 @@ const WorkspaceCollectionPanelContent = ({
         children: /* @__PURE__ */ jsx("span", { children: error })
       }
     ),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        style: {
-          fontSize: `${theme.fontSizes[0]}px`,
-          fontFamily: theme.fonts.body,
-          color: theme.colors.textSecondary,
-          textTransform: "uppercase",
-          letterSpacing: "0.5px"
-        },
-        children: [
-          filteredRepositories.length,
-          " ",
-          filteredRepositories.length === 1 ? "repository" : "repositories",
-          filter && repositories.length !== filteredRepositories.length && /* @__PURE__ */ jsxs("span", { children: [
-            " (filtered from ",
-            repositories.length,
-            ")"
-          ] })
-        ]
-      }
-    ),
     /* @__PURE__ */ jsxs(
       "div",
       {
@@ -3383,7 +3379,8 @@ const WorkspaceCollectionPanelContent = ({
           overflowY: "auto",
           display: "flex",
           flexDirection: "column",
-          gap: "4px"
+          gap: "4px",
+          padding: "8px"
         },
         children: [
           repositories.length === 0 && !isLoading && /* @__PURE__ */ jsxs(
@@ -3416,18 +3413,7 @@ const WorkspaceCollectionPanelContent = ({
               ]
             }
           ),
-          repositories.length > 0 && filteredRepositories.length === 0 && /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                padding: "32px",
-                textAlign: "center",
-                color: theme.colors.textSecondary
-              },
-              children: /* @__PURE__ */ jsx("p", { style: { margin: 0 }, children: "No repositories match your filter." })
-            }
-          ),
-          filteredRepositories.map((repository) => /* @__PURE__ */ jsx(
+          sortedRepositories.map((repository) => /* @__PURE__ */ jsx(
             WorkspaceCollectionRepositoryCard,
             {
               repository,