@streamoid/settings 0.7.3 → 0.7.4

package/dist/index.d.mts

@@ -182,6 +182,9 @@ interface SettingsWorkspaceListItem {
     /** The organization this workspace belongs to, if any. My workspaces groups
      *  the list under each organization (named from `organization.list()`). */
     organizationId?: string;
+    /** The organization's name, when the host has it (used by `listPage()`
+     *  rows whose organization isn't in `organization.list()`). */
+    organizationName?: string;
 }
 interface SettingsWorkspaceAdapter {
     /** Same authenticated transport used by the sidebar owner lookup. */
@@ -240,6 +243,20 @@ interface SettingsWorkspaceAdapter {
      * When omitted, the plan on each `list()` item is used as before.
      */
     fetchPlans?: (workspaceIds: string[]) => Promise<Record<string, string>>;
+    /**
+     * Optional: one page of the workspace list, from the API
+     * (`GET /workspace?limit=&offset=`). When given, My workspaces asks for each
+     * page as it is shown and renders exactly what comes back — `total` is every
+     * workspace the user can see. When omitted (or when a page request fails),
+     * My workspaces pages through `list()` in the browser as before.
+     */
+    listPage?: (params: {
+        limit: number;
+        offset: number;
+    }) => Promise<{
+        items: SettingsWorkspaceListItem[];
+        total: number;
+    }>;
     /**
      * Optional: host-controlled refresh after the package mutates workspace
      * state. If provided, the package will call this instead of (or in addition
@@ -961,7 +978,7 @@ interface WorkspaceListGroup {
  * last. Groups keep the order the organizations came in.
  */
 declare function groupWorkspaceList(workspaces: WorkspaceInfo[], organizations?: WorkspaceListOrganization[]): WorkspaceListGroup[];
-declare function WorkspaceListTab({ workspaces, loading, onCreateClick: _onCreateClick, onEditClick, onSwitchClick, onLeaveClick, fetchPlans, organizations, pageSize, }: {
+declare function WorkspaceListTab({ workspaces, loading, onCreateClick: _onCreateClick, onEditClick, onSwitchClick, onLeaveClick, fetchPlans, organizations, pageSize, listPage, reloadKey, }: {
     workspaces: WorkspaceInfo[];
     loading: boolean;
     onCreateClick: () => void;
@@ -973,6 +990,18 @@ declare function WorkspaceListTab({ workspaces, loading, onCreateClick: _onCreat
     /** The viewer's organizations, to group the list under. */
     organizations?: WorkspaceListOrganization[];
     pageSize?: number;
+    /** One page from the API (see SettingsWorkspaceAdapter.listPage). When
+     *  given, each page is fetched as it is shown and rendered as returned. */
+    listPage?: (params: {
+        limit: number;
+        offset: number;
+    }) => Promise<{
+        items: WorkspaceInfo[];
+        total: number;
+    }>;
+    /** Changes whenever the host's list changes (a leave, a rename…), so the
+     *  page on screen is fetched again. */
+    reloadKey?: string;
 }): react.JSX.Element;
 /**
  * @deprecated Renamed to `WorkspaceListTab` in 0.4.0 — the tab is a workspace

package/dist/index.d.ts

@@ -182,6 +182,9 @@ interface SettingsWorkspaceListItem {
     /** The organization this workspace belongs to, if any. My workspaces groups
      *  the list under each organization (named from `organization.list()`). */
     organizationId?: string;
+    /** The organization's name, when the host has it (used by `listPage()`
+     *  rows whose organization isn't in `organization.list()`). */
+    organizationName?: string;
 }
 interface SettingsWorkspaceAdapter {
     /** Same authenticated transport used by the sidebar owner lookup. */
@@ -240,6 +243,20 @@ interface SettingsWorkspaceAdapter {
      * When omitted, the plan on each `list()` item is used as before.
      */
     fetchPlans?: (workspaceIds: string[]) => Promise<Record<string, string>>;
+    /**
+     * Optional: one page of the workspace list, from the API
+     * (`GET /workspace?limit=&offset=`). When given, My workspaces asks for each
+     * page as it is shown and renders exactly what comes back — `total` is every
+     * workspace the user can see. When omitted (or when a page request fails),
+     * My workspaces pages through `list()` in the browser as before.
+     */
+    listPage?: (params: {
+        limit: number;
+        offset: number;
+    }) => Promise<{
+        items: SettingsWorkspaceListItem[];
+        total: number;
+    }>;
     /**
      * Optional: host-controlled refresh after the package mutates workspace
      * state. If provided, the package will call this instead of (or in addition
@@ -961,7 +978,7 @@ interface WorkspaceListGroup {
  * last. Groups keep the order the organizations came in.
  */
 declare function groupWorkspaceList(workspaces: WorkspaceInfo[], organizations?: WorkspaceListOrganization[]): WorkspaceListGroup[];
-declare function WorkspaceListTab({ workspaces, loading, onCreateClick: _onCreateClick, onEditClick, onSwitchClick, onLeaveClick, fetchPlans, organizations, pageSize, }: {
+declare function WorkspaceListTab({ workspaces, loading, onCreateClick: _onCreateClick, onEditClick, onSwitchClick, onLeaveClick, fetchPlans, organizations, pageSize, listPage, reloadKey, }: {
     workspaces: WorkspaceInfo[];
     loading: boolean;
     onCreateClick: () => void;
@@ -973,6 +990,18 @@ declare function WorkspaceListTab({ workspaces, loading, onCreateClick: _onCreat
     /** The viewer's organizations, to group the list under. */
     organizations?: WorkspaceListOrganization[];
     pageSize?: number;
+    /** One page from the API (see SettingsWorkspaceAdapter.listPage). When
+     *  given, each page is fetched as it is shown and rendered as returned. */
+    listPage?: (params: {
+        limit: number;
+        offset: number;
+    }) => Promise<{
+        items: WorkspaceInfo[];
+        total: number;
+    }>;
+    /** Changes whenever the host's list changes (a leave, a rename…), so the
+     *  page on screen is fetched again. */
+    reloadKey?: string;
 }): react.JSX.Element;
 /**
  * @deprecated Renamed to `WorkspaceListTab` in 0.4.0 — the tab is a workspace

package/dist/index.js

@@ -10938,26 +10938,59 @@ function WorkspaceListTab({
   onLeaveClick,
   fetchPlans,
   organizations = [],
-  pageSize = WORKSPACE_LIST_PAGE_SIZE
+  pageSize = WORKSPACE_LIST_PAGE_SIZE,
+  listPage,
+  reloadKey
 }) {
   const currentWorkspace = workspaces.find((ws) => ws.isCurrent);
-  const groups = groupWorkspaceList(
+  const currentOrganization = organizations.find(
+    (org) => org._id && org._id === currentWorkspace?.organizationId
+  );
+  const [page, setPage] = (0, import_react17.useState)(0);
+  const [serverPage, setServerPage] = (0, import_react17.useState)(null);
+  const [serverFailed, setServerFailed] = (0, import_react17.useState)(false);
+  const serverMode = !!listPage && !serverFailed;
+  (0, import_react17.useEffect)(() => {
+    if (!listPage || serverFailed) return;
+    let cancelled = false;
+    listPage({ limit: pageSize, offset: page * pageSize }).then((result) => {
+      if (cancelled) return;
+      const lastPage = Math.max(0, Math.ceil(result.total / pageSize) - 1);
+      if (page > lastPage) {
+        setPage(lastPage);
+        return;
+      }
+      setServerPage({ page, items: result.items, total: result.total });
+    }).catch(() => {
+      if (!cancelled) setServerFailed(true);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [listPage, serverFailed, page, pageSize, reloadKey]);
+  const organizationLabel = (org) => org.role === "guest" ? `${org.name} \xB7 Guest` : org.name;
+  const serverGroupOf = (ws) => {
+    const org = organizations.find((o) => o._id === ws.organizationId);
+    if (org) return { key: org._id, label: organizationLabel(org), workspaces: [] };
+    if (ws.organizationId && ws.organizationName) {
+      return { key: ws.organizationId, label: ws.organizationName, workspaces: [] };
+    }
+    return { key: "__no_org__", label: "No organization", workspaces: [] };
+  };
+  const groups = serverMode ? [] : groupWorkspaceList(
     workspaces.filter((ws) => !ws.isCurrent),
     organizations
   );
   const rows = groups.flatMap(
     (group) => group.workspaces.map((ws) => ({ ws, group }))
   );
-  const otherWorkspaces = rows.map((row) => row.ws);
-  const currentOrganization = organizations.find(
-    (org) => org._id && org._id === currentWorkspace?.organizationId
-  );
-  const pageCount = Math.max(1, Math.ceil(otherWorkspaces.length / pageSize));
-  const [page, setPage] = (0, import_react17.useState)(0);
-  const safePage = Math.min(page, pageCount - 1);
+  const listTotal = serverMode ? serverPage?.total ?? 0 : rows.length;
+  const pageCount = Math.max(1, Math.ceil(listTotal / pageSize));
+  const safePage = serverMode ? serverPage?.page ?? 0 : Math.min(page, pageCount - 1);
   const pageStart = safePage * pageSize;
-  const pageRows = rows.slice(pageStart, pageStart + pageSize);
+  const pageRows = serverMode ? (serverPage?.items ?? []).map((ws) => ({ ws, group: serverGroupOf(ws) })) : rows.slice(pageStart, pageStart + pageSize);
   const pageWorkspaces = pageRows.map((row) => row.ws);
+  const listLoading = loading || serverMode && !serverPage;
   const [plans, setPlans] = (0, import_react17.useState)({});
   const requestedPlans = (0, import_react17.useRef)(/* @__PURE__ */ new Set());
   const visibleIds = [
@@ -10973,7 +11006,7 @@ function WorkspaceListTab({
     };
   }, []);
   (0, import_react17.useEffect)(() => {
-    if (!fetchPlans || loading) return;
+    if (!fetchPlans || listLoading) return;
     const missing = visibleKey.split(",").filter((id) => id && !requestedPlans.current.has(id));
     if (!missing.length) return;
     missing.forEach((id) => requestedPlans.current.add(id));
@@ -10981,7 +11014,7 @@ function WorkspaceListTab({
       if (mounted.current) setPlans((prev) => ({ ...prev, ...found }));
     }).catch(() => {
     });
-  }, [fetchPlans, loading, visibleKey]);
+  }, [fetchPlans, listLoading, visibleKey]);
   const planOf = (ws) => fetchPlans ? plans[ws._id] ?? "" : ws.plan ?? "";
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     "div",
@@ -11002,7 +11035,7 @@ function WorkspaceListTab({
             children: "Switching changes which workspace the rest of Settings acts on."
           }
         ),
-        loading && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        listLoading && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           "p",
           {
             style: {
@@ -11013,7 +11046,7 @@ function WorkspaceListTab({
             children: "Loading workspaces\u2026"
           }
         ),
-        !loading && currentWorkspace && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+        !listLoading && currentWorkspace && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
           "div",
           {
             className: "flex flex-col items-start shrink-0 w-full",
@@ -11053,7 +11086,7 @@ function WorkspaceListTab({
             ]
           }
         ),
-        !loading && currentWorkspace && otherWorkspaces.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        !listLoading && currentWorkspace && listTotal > 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           "div",
           {
             className: "shrink-0 w-full",
@@ -11063,7 +11096,7 @@ function WorkspaceListTab({
             }
           }
         ),
-        !loading && otherWorkspaces.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+        !listLoading && listTotal > 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
           "div",
           {
             className: "flex flex-col items-start flex-1 min-h-0 w-full",
@@ -11099,8 +11132,8 @@ function WorkspaceListTab({
                         role: ws.role,
                         plan: planOf(ws),
                         ownerId: ws.ownerEmail,
-                        type: "otherWS",
-                        onSwitch: () => onSwitchClick(ws),
+                        type: ws.isCurrent ? "currentWS" : "otherWS",
+                        onSwitch: ws.isCurrent ? void 0 : () => onSwitchClick(ws),
                         onSettings: () => onEditClick(ws),
                         onLeave: () => onLeaveClick(ws)
                       }
@@ -11129,7 +11162,7 @@ function WorkspaceListTab({
                           pageStart + pageWorkspaces.length,
                           " of",
                           " ",
-                          otherWorkspaces.length
+                          listTotal
                         ]
                       }
                     ),
@@ -11303,6 +11336,24 @@ function SettingsContentInner({
   (0, import_react17.useEffect)(() => {
     void refreshWorkspaceList();
   }, [refreshWorkspaceList]);
+  const hostListPage = workspace.listPage;
+  const listWorkspacePage = (0, import_react17.useMemo)(
+    () => hostListPage ? async (params) => {
+      const result = await hostListPage(params);
+      return {
+        total: result.total,
+        items: result.items.map(
+          (it) => ({
+            ...it,
+            isCurrent: it.isCurrent ?? it._id === workspaceId,
+            imageUrl: it.imageUrl ?? it.image,
+            initials: deriveInitials(it.name)
+          })
+        )
+      };
+    } : void 0,
+    [hostListPage, workspaceId]
+  );
   const [listOrganizations, setListOrganizations] = (0, import_react17.useState)([]);
   (0, import_react17.useEffect)(() => {
     if (activeTab !== "workspaceList" || typeof organization?.list !== "function") {
@@ -11976,6 +12027,8 @@ function SettingsContentInner({
                         loading: workspaceListLoading && workspaceList.length === 0,
                         fetchPlans: workspace.fetchPlans,
                         organizations: listOrganizations,
+                        listPage: listWorkspacePage,
+                        reloadKey: displayWorkspaces.map((ws) => `${ws._id}:${ws.name}:${ws.role}`).join(","),
                         onCreateClick: handleCreateClick,
                         onEditClick: handleEditClick,
                         onSwitchClick: async (ws) => {

package/dist/index.mjs

@@ -167,7 +167,8 @@ import {
   useState as useState15,
   useEffect as useEffect13,
   useRef as useRef7,
-  useCallback as useCallback7
+  useCallback as useCallback7,
+  useMemo as useMemo3
 } from "react";
 import {
   ScSidebarMenu,
@@ -10941,26 +10942,59 @@ function WorkspaceListTab({
   onLeaveClick,
   fetchPlans,
   organizations = [],
-  pageSize = WORKSPACE_LIST_PAGE_SIZE
+  pageSize = WORKSPACE_LIST_PAGE_SIZE,
+  listPage,
+  reloadKey
 }) {
   const currentWorkspace = workspaces.find((ws) => ws.isCurrent);
-  const groups = groupWorkspaceList(
+  const currentOrganization = organizations.find(
+    (org) => org._id && org._id === currentWorkspace?.organizationId
+  );
+  const [page, setPage] = useState15(0);
+  const [serverPage, setServerPage] = useState15(null);
+  const [serverFailed, setServerFailed] = useState15(false);
+  const serverMode = !!listPage && !serverFailed;
+  useEffect13(() => {
+    if (!listPage || serverFailed) return;
+    let cancelled = false;
+    listPage({ limit: pageSize, offset: page * pageSize }).then((result) => {
+      if (cancelled) return;
+      const lastPage = Math.max(0, Math.ceil(result.total / pageSize) - 1);
+      if (page > lastPage) {
+        setPage(lastPage);
+        return;
+      }
+      setServerPage({ page, items: result.items, total: result.total });
+    }).catch(() => {
+      if (!cancelled) setServerFailed(true);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [listPage, serverFailed, page, pageSize, reloadKey]);
+  const organizationLabel = (org) => org.role === "guest" ? `${org.name} \xB7 Guest` : org.name;
+  const serverGroupOf = (ws) => {
+    const org = organizations.find((o) => o._id === ws.organizationId);
+    if (org) return { key: org._id, label: organizationLabel(org), workspaces: [] };
+    if (ws.organizationId && ws.organizationName) {
+      return { key: ws.organizationId, label: ws.organizationName, workspaces: [] };
+    }
+    return { key: "__no_org__", label: "No organization", workspaces: [] };
+  };
+  const groups = serverMode ? [] : groupWorkspaceList(
     workspaces.filter((ws) => !ws.isCurrent),
     organizations
   );
   const rows = groups.flatMap(
     (group) => group.workspaces.map((ws) => ({ ws, group }))
   );
-  const otherWorkspaces = rows.map((row) => row.ws);
-  const currentOrganization = organizations.find(
-    (org) => org._id && org._id === currentWorkspace?.organizationId
-  );
-  const pageCount = Math.max(1, Math.ceil(otherWorkspaces.length / pageSize));
-  const [page, setPage] = useState15(0);
-  const safePage = Math.min(page, pageCount - 1);
+  const listTotal = serverMode ? serverPage?.total ?? 0 : rows.length;
+  const pageCount = Math.max(1, Math.ceil(listTotal / pageSize));
+  const safePage = serverMode ? serverPage?.page ?? 0 : Math.min(page, pageCount - 1);
   const pageStart = safePage * pageSize;
-  const pageRows = rows.slice(pageStart, pageStart + pageSize);
+  const pageRows = serverMode ? (serverPage?.items ?? []).map((ws) => ({ ws, group: serverGroupOf(ws) })) : rows.slice(pageStart, pageStart + pageSize);
   const pageWorkspaces = pageRows.map((row) => row.ws);
+  const listLoading = loading || serverMode && !serverPage;
   const [plans, setPlans] = useState15({});
   const requestedPlans = useRef7(/* @__PURE__ */ new Set());
   const visibleIds = [
@@ -10976,7 +11010,7 @@ function WorkspaceListTab({
     };
   }, []);
   useEffect13(() => {
-    if (!fetchPlans || loading) return;
+    if (!fetchPlans || listLoading) return;
     const missing = visibleKey.split(",").filter((id) => id && !requestedPlans.current.has(id));
     if (!missing.length) return;
     missing.forEach((id) => requestedPlans.current.add(id));
@@ -10984,7 +11018,7 @@ function WorkspaceListTab({
       if (mounted.current) setPlans((prev) => ({ ...prev, ...found }));
     }).catch(() => {
     });
-  }, [fetchPlans, loading, visibleKey]);
+  }, [fetchPlans, listLoading, visibleKey]);
   const planOf = (ws) => fetchPlans ? plans[ws._id] ?? "" : ws.plan ?? "";
   return /* @__PURE__ */ jsxs19(
     "div",
@@ -11005,7 +11039,7 @@ function WorkspaceListTab({
             children: "Switching changes which workspace the rest of Settings acts on."
           }
         ),
-        loading && /* @__PURE__ */ jsx22(
+        listLoading && /* @__PURE__ */ jsx22(
           "p",
           {
             style: {
@@ -11016,7 +11050,7 @@ function WorkspaceListTab({
             children: "Loading workspaces\u2026"
           }
         ),
-        !loading && currentWorkspace && /* @__PURE__ */ jsxs19(
+        !listLoading && currentWorkspace && /* @__PURE__ */ jsxs19(
           "div",
           {
             className: "flex flex-col items-start shrink-0 w-full",
@@ -11056,7 +11090,7 @@ function WorkspaceListTab({
             ]
           }
         ),
-        !loading && currentWorkspace && otherWorkspaces.length > 0 && /* @__PURE__ */ jsx22(
+        !listLoading && currentWorkspace && listTotal > 0 && /* @__PURE__ */ jsx22(
           "div",
           {
             className: "shrink-0 w-full",
@@ -11066,7 +11100,7 @@ function WorkspaceListTab({
             }
           }
         ),
-        !loading && otherWorkspaces.length > 0 && /* @__PURE__ */ jsxs19(
+        !listLoading && listTotal > 0 && /* @__PURE__ */ jsxs19(
           "div",
           {
             className: "flex flex-col items-start flex-1 min-h-0 w-full",
@@ -11102,8 +11136,8 @@ function WorkspaceListTab({
                         role: ws.role,
                         plan: planOf(ws),
                         ownerId: ws.ownerEmail,
-                        type: "otherWS",
-                        onSwitch: () => onSwitchClick(ws),
+                        type: ws.isCurrent ? "currentWS" : "otherWS",
+                        onSwitch: ws.isCurrent ? void 0 : () => onSwitchClick(ws),
                         onSettings: () => onEditClick(ws),
                         onLeave: () => onLeaveClick(ws)
                       }
@@ -11132,7 +11166,7 @@ function WorkspaceListTab({
                           pageStart + pageWorkspaces.length,
                           " of",
                           " ",
-                          otherWorkspaces.length
+                          listTotal
                         ]
                       }
                     ),
@@ -11306,6 +11340,24 @@ function SettingsContentInner({
   useEffect13(() => {
     void refreshWorkspaceList();
   }, [refreshWorkspaceList]);
+  const hostListPage = workspace.listPage;
+  const listWorkspacePage = useMemo3(
+    () => hostListPage ? async (params) => {
+      const result = await hostListPage(params);
+      return {
+        total: result.total,
+        items: result.items.map(
+          (it) => ({
+            ...it,
+            isCurrent: it.isCurrent ?? it._id === workspaceId,
+            imageUrl: it.imageUrl ?? it.image,
+            initials: deriveInitials(it.name)
+          })
+        )
+      };
+    } : void 0,
+    [hostListPage, workspaceId]
+  );
   const [listOrganizations, setListOrganizations] = useState15([]);
   useEffect13(() => {
     if (activeTab !== "workspaceList" || typeof organization?.list !== "function") {
@@ -11979,6 +12031,8 @@ function SettingsContentInner({
                         loading: workspaceListLoading && workspaceList.length === 0,
                         fetchPlans: workspace.fetchPlans,
                         organizations: listOrganizations,
+                        listPage: listWorkspacePage,
+                        reloadKey: displayWorkspaces.map((ws) => `${ws._id}:${ws.name}:${ws.role}`).join(","),
                         onCreateClick: handleCreateClick,
                         onEditClick: handleEditClick,
                         onSwitchClick: async (ws) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamoid/settings",
-  "version": "0.7.3",
+  "version": "0.7.4",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",