@streamoid/settings 0.7.0 → 0.7.2

package/dist/index.d.mts

@@ -179,6 +179,9 @@ interface SettingsWorkspaceListItem {
     plan?: string;
     /** Optional owner email shown in the workspace list. */
     ownerEmail?: string;
+    /** The organization this workspace belongs to, if any. My workspaces groups
+     *  the list under each organization (named from `organization.list()`). */
+    organizationId?: string;
 }
 interface SettingsWorkspaceAdapter {
     /** Same authenticated transport used by the sidebar owner lookup. */
@@ -227,6 +230,16 @@ interface SettingsWorkspaceAdapter {
             role?: string;
         } | null;
     }>;
+    /**
+     * Optional: plan labels ("Free", "Pro", …) for the given workspaces, keyed by
+     * id. My workspaces lists workspaces a page at a time and asks only for the
+     * page on screen, so `list()` doesn't have to look up every workspace's plan
+     * before anything renders. Leave a workspace out of the result when its
+     * lookup failed; it is shown without a plan.
+     *
+     * When omitted, the plan on each `list()` item is used as before.
+     */
+    fetchPlans?: (workspaceIds: string[]) => Promise<Record<string, string>>;
     /**
      * Optional: host-controlled refresh after the package mutates workspace
      * state. If provided, the package will call this instead of (or in addition
@@ -928,13 +941,38 @@ declare function ProfileTab(): react.JSX.Element;
  * workspace you are not currently inside — the current one has its own
  * General page.
  */
-declare function WorkspaceListTab({ workspaces, loading, onCreateClick: _onCreateClick, onEditClick, onSwitchClick, onLeaveClick, }: {
+/** Workspaces shown per page in My workspaces. */
+declare const WORKSPACE_LIST_PAGE_SIZE = 10;
+/** An organization as My workspaces needs it to group the list. */
+interface WorkspaceListOrganization {
+    _id: string;
+    name: string;
+    role?: string;
+}
+interface WorkspaceListGroup {
+    key: string;
+    label: string;
+    workspaces: WorkspaceInfo[];
+}
+/**
+ * The same grouping as CXO's workspace switcher: the viewer's own
+ * organizations first, then those they are only a guest of (labelled so), and
+ * workspaces in no organization — or in one the viewer isn't a member of —
+ * 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, }: {
     workspaces: WorkspaceInfo[];
     loading: boolean;
     onCreateClick: () => void;
     onEditClick: (ws: WorkspaceInfo) => void;
     onSwitchClick: (ws: WorkspaceInfo) => void;
     onLeaveClick: (ws: WorkspaceInfo) => void;
+    /** See SettingsWorkspaceAdapter.fetchPlans. */
+    fetchPlans?: (workspaceIds: string[]) => Promise<Record<string, string>>;
+    /** The viewer's organizations, to group the list under. */
+    organizations?: WorkspaceListOrganization[];
+    pageSize?: number;
 }): react.JSX.Element;
 /**
  * @deprecated Renamed to `WorkspaceListTab` in 0.4.0 — the tab is a workspace
@@ -1399,4 +1437,4 @@ declare function SettingsAdaptersProvider({ adapters, children, }: {
  */
 declare function useSettingsAdapters(): SettingsAdapters;
 
-export { APP_KEYS, type ApiToken, type AppKey, type AvailableCreditsResponse, BillingContent, type BillingEventPayload, type BillingProduct, type BillingSubscription, BuyCreditsModal, type BuyCreditsPayload, type BuyCreditsResponse, ConfirmDeleteModal, ConfirmLeaveModal, type CreatedToken, type CustomCreditInfo, type CustomCreditResponse, DEFAULT_PERMISSIONS, DEFAULT_USER_LANGUAGE, ExportDateModal, InviteUpdateModal, type InvoicePdfResponse, MemberListFrame, type MemberListFrameProps, type MemberListTab, MemberListToolbar, type MemberListToolbarProps, type MemberPermissionsPayload, OrganizationContent, type OrganizationData, type OrganizationInvite, type OrganizationJoinRequest, type OrganizationMember, OrganizationMemberModal, type OrganizationMemberModalProps, OrganizationModal, type OrganizationView, type OrganizationWorkspaceItem, type Price, type PriceMetadata, type ProductsResponse, ProfileAvatar, ProfileTab, ReferralTab, SCOPE_LABELS, ScopeHeader, type ScopeHeaderProps, type ServiceItem, type SettingsAdapters, SettingsAdaptersProvider, type SettingsApiAdapter, type SettingsAuthAdapter, type SettingsAuthUser, SettingsContent, type SettingsContentProps, type SettingsImageUploadAdapter, type SettingsNavigationAdapter, type SettingsOrganizationAdapter, type SettingsOrganizationCurrent, type SettingsOrganizationListItem, type SettingsScope, type SettingsTab, type SettingsToastAdapter, SettingsTooltip, type SettingsTooltipPlacement, type SettingsTooltipProps, type SettingsWorkspaceAdapter, type SettingsWorkspaceCurrent, type SettingsWorkspaceListItem, SiconKey, type StoreItem, type SubscriptionPlan, type SubscriptionResponse, TAB_DESCRIPTIONS, TAB_LABELS, TAB_SCOPE, TAB_TO_URL, type TeamMember, TeamsContent, type TokenExpiry, TokensContent, URL_TO_TAB, USER_LANGUAGES, type UpdateSubscriptionPayload, type UpdateSubscriptionResponse, type UsageHistoryItem, type UsageHistoryResponse, type UserLanguage, type UserPermissions, type WorkspaceData, WorkspaceGeneralTab, type WorkspaceGeneralTabProps, type WorkspaceInvite, WorkspaceListTab, type WorkspaceMember, WorkspaceModal, type WorkspaceOrganization, type WorkspaceOrganizationRequest, WorkspacePicker, type WorkspacePickerItem, type WorkspacePickerProps, WorkspaceTab, type WorkspaceUsageResponse, countLabel, loadWorkspaceOrganization, resolveSettingsTabFromPath, useSettingsAdapters, useWorkspaceOrganization, userLanguageLabel };
+export { APP_KEYS, type ApiToken, type AppKey, type AvailableCreditsResponse, BillingContent, type BillingEventPayload, type BillingProduct, type BillingSubscription, BuyCreditsModal, type BuyCreditsPayload, type BuyCreditsResponse, ConfirmDeleteModal, ConfirmLeaveModal, type CreatedToken, type CustomCreditInfo, type CustomCreditResponse, DEFAULT_PERMISSIONS, DEFAULT_USER_LANGUAGE, ExportDateModal, InviteUpdateModal, type InvoicePdfResponse, MemberListFrame, type MemberListFrameProps, type MemberListTab, MemberListToolbar, type MemberListToolbarProps, type MemberPermissionsPayload, OrganizationContent, type OrganizationData, type OrganizationInvite, type OrganizationJoinRequest, type OrganizationMember, OrganizationMemberModal, type OrganizationMemberModalProps, OrganizationModal, type OrganizationView, type OrganizationWorkspaceItem, type Price, type PriceMetadata, type ProductsResponse, ProfileAvatar, ProfileTab, ReferralTab, SCOPE_LABELS, ScopeHeader, type ScopeHeaderProps, type ServiceItem, type SettingsAdapters, SettingsAdaptersProvider, type SettingsApiAdapter, type SettingsAuthAdapter, type SettingsAuthUser, SettingsContent, type SettingsContentProps, type SettingsImageUploadAdapter, type SettingsNavigationAdapter, type SettingsOrganizationAdapter, type SettingsOrganizationCurrent, type SettingsOrganizationListItem, type SettingsScope, type SettingsTab, type SettingsToastAdapter, SettingsTooltip, type SettingsTooltipPlacement, type SettingsTooltipProps, type SettingsWorkspaceAdapter, type SettingsWorkspaceCurrent, type SettingsWorkspaceListItem, SiconKey, type StoreItem, type SubscriptionPlan, type SubscriptionResponse, TAB_DESCRIPTIONS, TAB_LABELS, TAB_SCOPE, TAB_TO_URL, type TeamMember, TeamsContent, type TokenExpiry, TokensContent, URL_TO_TAB, USER_LANGUAGES, type UpdateSubscriptionPayload, type UpdateSubscriptionResponse, type UsageHistoryItem, type UsageHistoryResponse, type UserLanguage, type UserPermissions, WORKSPACE_LIST_PAGE_SIZE, type WorkspaceData, WorkspaceGeneralTab, type WorkspaceGeneralTabProps, type WorkspaceInvite, type WorkspaceListOrganization, WorkspaceListTab, type WorkspaceMember, WorkspaceModal, type WorkspaceOrganization, type WorkspaceOrganizationRequest, WorkspacePicker, type WorkspacePickerItem, type WorkspacePickerProps, WorkspaceTab, type WorkspaceUsageResponse, countLabel, groupWorkspaceList, loadWorkspaceOrganization, resolveSettingsTabFromPath, useSettingsAdapters, useWorkspaceOrganization, userLanguageLabel };

package/dist/index.d.ts

@@ -179,6 +179,9 @@ interface SettingsWorkspaceListItem {
     plan?: string;
     /** Optional owner email shown in the workspace list. */
     ownerEmail?: string;
+    /** The organization this workspace belongs to, if any. My workspaces groups
+     *  the list under each organization (named from `organization.list()`). */
+    organizationId?: string;
 }
 interface SettingsWorkspaceAdapter {
     /** Same authenticated transport used by the sidebar owner lookup. */
@@ -227,6 +230,16 @@ interface SettingsWorkspaceAdapter {
             role?: string;
         } | null;
     }>;
+    /**
+     * Optional: plan labels ("Free", "Pro", …) for the given workspaces, keyed by
+     * id. My workspaces lists workspaces a page at a time and asks only for the
+     * page on screen, so `list()` doesn't have to look up every workspace's plan
+     * before anything renders. Leave a workspace out of the result when its
+     * lookup failed; it is shown without a plan.
+     *
+     * When omitted, the plan on each `list()` item is used as before.
+     */
+    fetchPlans?: (workspaceIds: string[]) => Promise<Record<string, string>>;
     /**
      * Optional: host-controlled refresh after the package mutates workspace
      * state. If provided, the package will call this instead of (or in addition
@@ -928,13 +941,38 @@ declare function ProfileTab(): react.JSX.Element;
  * workspace you are not currently inside — the current one has its own
  * General page.
  */
-declare function WorkspaceListTab({ workspaces, loading, onCreateClick: _onCreateClick, onEditClick, onSwitchClick, onLeaveClick, }: {
+/** Workspaces shown per page in My workspaces. */
+declare const WORKSPACE_LIST_PAGE_SIZE = 10;
+/** An organization as My workspaces needs it to group the list. */
+interface WorkspaceListOrganization {
+    _id: string;
+    name: string;
+    role?: string;
+}
+interface WorkspaceListGroup {
+    key: string;
+    label: string;
+    workspaces: WorkspaceInfo[];
+}
+/**
+ * The same grouping as CXO's workspace switcher: the viewer's own
+ * organizations first, then those they are only a guest of (labelled so), and
+ * workspaces in no organization — or in one the viewer isn't a member of —
+ * 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, }: {
     workspaces: WorkspaceInfo[];
     loading: boolean;
     onCreateClick: () => void;
     onEditClick: (ws: WorkspaceInfo) => void;
     onSwitchClick: (ws: WorkspaceInfo) => void;
     onLeaveClick: (ws: WorkspaceInfo) => void;
+    /** See SettingsWorkspaceAdapter.fetchPlans. */
+    fetchPlans?: (workspaceIds: string[]) => Promise<Record<string, string>>;
+    /** The viewer's organizations, to group the list under. */
+    organizations?: WorkspaceListOrganization[];
+    pageSize?: number;
 }): react.JSX.Element;
 /**
  * @deprecated Renamed to `WorkspaceListTab` in 0.4.0 — the tab is a workspace
@@ -1399,4 +1437,4 @@ declare function SettingsAdaptersProvider({ adapters, children, }: {
  */
 declare function useSettingsAdapters(): SettingsAdapters;
 
-export { APP_KEYS, type ApiToken, type AppKey, type AvailableCreditsResponse, BillingContent, type BillingEventPayload, type BillingProduct, type BillingSubscription, BuyCreditsModal, type BuyCreditsPayload, type BuyCreditsResponse, ConfirmDeleteModal, ConfirmLeaveModal, type CreatedToken, type CustomCreditInfo, type CustomCreditResponse, DEFAULT_PERMISSIONS, DEFAULT_USER_LANGUAGE, ExportDateModal, InviteUpdateModal, type InvoicePdfResponse, MemberListFrame, type MemberListFrameProps, type MemberListTab, MemberListToolbar, type MemberListToolbarProps, type MemberPermissionsPayload, OrganizationContent, type OrganizationData, type OrganizationInvite, type OrganizationJoinRequest, type OrganizationMember, OrganizationMemberModal, type OrganizationMemberModalProps, OrganizationModal, type OrganizationView, type OrganizationWorkspaceItem, type Price, type PriceMetadata, type ProductsResponse, ProfileAvatar, ProfileTab, ReferralTab, SCOPE_LABELS, ScopeHeader, type ScopeHeaderProps, type ServiceItem, type SettingsAdapters, SettingsAdaptersProvider, type SettingsApiAdapter, type SettingsAuthAdapter, type SettingsAuthUser, SettingsContent, type SettingsContentProps, type SettingsImageUploadAdapter, type SettingsNavigationAdapter, type SettingsOrganizationAdapter, type SettingsOrganizationCurrent, type SettingsOrganizationListItem, type SettingsScope, type SettingsTab, type SettingsToastAdapter, SettingsTooltip, type SettingsTooltipPlacement, type SettingsTooltipProps, type SettingsWorkspaceAdapter, type SettingsWorkspaceCurrent, type SettingsWorkspaceListItem, SiconKey, type StoreItem, type SubscriptionPlan, type SubscriptionResponse, TAB_DESCRIPTIONS, TAB_LABELS, TAB_SCOPE, TAB_TO_URL, type TeamMember, TeamsContent, type TokenExpiry, TokensContent, URL_TO_TAB, USER_LANGUAGES, type UpdateSubscriptionPayload, type UpdateSubscriptionResponse, type UsageHistoryItem, type UsageHistoryResponse, type UserLanguage, type UserPermissions, type WorkspaceData, WorkspaceGeneralTab, type WorkspaceGeneralTabProps, type WorkspaceInvite, WorkspaceListTab, type WorkspaceMember, WorkspaceModal, type WorkspaceOrganization, type WorkspaceOrganizationRequest, WorkspacePicker, type WorkspacePickerItem, type WorkspacePickerProps, WorkspaceTab, type WorkspaceUsageResponse, countLabel, loadWorkspaceOrganization, resolveSettingsTabFromPath, useSettingsAdapters, useWorkspaceOrganization, userLanguageLabel };
+export { APP_KEYS, type ApiToken, type AppKey, type AvailableCreditsResponse, BillingContent, type BillingEventPayload, type BillingProduct, type BillingSubscription, BuyCreditsModal, type BuyCreditsPayload, type BuyCreditsResponse, ConfirmDeleteModal, ConfirmLeaveModal, type CreatedToken, type CustomCreditInfo, type CustomCreditResponse, DEFAULT_PERMISSIONS, DEFAULT_USER_LANGUAGE, ExportDateModal, InviteUpdateModal, type InvoicePdfResponse, MemberListFrame, type MemberListFrameProps, type MemberListTab, MemberListToolbar, type MemberListToolbarProps, type MemberPermissionsPayload, OrganizationContent, type OrganizationData, type OrganizationInvite, type OrganizationJoinRequest, type OrganizationMember, OrganizationMemberModal, type OrganizationMemberModalProps, OrganizationModal, type OrganizationView, type OrganizationWorkspaceItem, type Price, type PriceMetadata, type ProductsResponse, ProfileAvatar, ProfileTab, ReferralTab, SCOPE_LABELS, ScopeHeader, type ScopeHeaderProps, type ServiceItem, type SettingsAdapters, SettingsAdaptersProvider, type SettingsApiAdapter, type SettingsAuthAdapter, type SettingsAuthUser, SettingsContent, type SettingsContentProps, type SettingsImageUploadAdapter, type SettingsNavigationAdapter, type SettingsOrganizationAdapter, type SettingsOrganizationCurrent, type SettingsOrganizationListItem, type SettingsScope, type SettingsTab, type SettingsToastAdapter, SettingsTooltip, type SettingsTooltipPlacement, type SettingsTooltipProps, type SettingsWorkspaceAdapter, type SettingsWorkspaceCurrent, type SettingsWorkspaceListItem, SiconKey, type StoreItem, type SubscriptionPlan, type SubscriptionResponse, TAB_DESCRIPTIONS, TAB_LABELS, TAB_SCOPE, TAB_TO_URL, type TeamMember, TeamsContent, type TokenExpiry, TokensContent, URL_TO_TAB, USER_LANGUAGES, type UpdateSubscriptionPayload, type UpdateSubscriptionResponse, type UsageHistoryItem, type UsageHistoryResponse, type UserLanguage, type UserPermissions, WORKSPACE_LIST_PAGE_SIZE, type WorkspaceData, WorkspaceGeneralTab, type WorkspaceGeneralTabProps, type WorkspaceInvite, type WorkspaceListOrganization, WorkspaceListTab, type WorkspaceMember, WorkspaceModal, type WorkspaceOrganization, type WorkspaceOrganizationRequest, WorkspacePicker, type WorkspacePickerItem, type WorkspacePickerProps, WorkspaceTab, type WorkspaceUsageResponse, countLabel, groupWorkspaceList, loadWorkspaceOrganization, resolveSettingsTabFromPath, useSettingsAdapters, useWorkspaceOrganization, userLanguageLabel };

package/dist/index.js

@@ -51,12 +51,14 @@ __export(index_exports, {
   TokensContent: () => TokensContent,
   URL_TO_TAB: () => URL_TO_TAB,
   USER_LANGUAGES: () => USER_LANGUAGES,
+  WORKSPACE_LIST_PAGE_SIZE: () => WORKSPACE_LIST_PAGE_SIZE,
   WorkspaceGeneralTab: () => WorkspaceGeneralTab,
   WorkspaceListTab: () => WorkspaceListTab,
   WorkspaceModal: () => WorkspaceModal,
   WorkspacePicker: () => WorkspacePicker,
   WorkspaceTab: () => WorkspaceTab,
   countLabel: () => countLabel,
+  groupWorkspaceList: () => groupWorkspaceList,
   loadWorkspaceOrganization: () => loadWorkspaceOrganization,
   resolveSettingsTabFromPath: () => resolveSettingsTabFromPath,
   useSettingsAdapters: () => useSettingsAdapters,
@@ -10896,16 +10898,91 @@ function ProfileTab() {
     }
   );
 }
+var WORKSPACE_LIST_PAGE_SIZE = 10;
+function groupWorkspaceList(workspaces, organizations = []) {
+  const ordered = [
+    ...organizations.filter((org) => org.role !== "guest"),
+    ...organizations.filter((org) => org.role === "guest")
+  ];
+  const groups = [];
+  for (const org of ordered) {
+    const inOrg = workspaces.filter((ws) => ws.organizationId === org._id);
+    if (inOrg.length) {
+      groups.push({
+        key: org._id,
+        label: org.role === "guest" ? `${org.name} \xB7 Guest` : org.name,
+        workspaces: inOrg
+      });
+    }
+  }
+  const known = new Set(organizations.map((org) => org._id));
+  const ungrouped = workspaces.filter(
+    (ws) => !ws.organizationId || !known.has(ws.organizationId)
+  );
+  if (ungrouped.length) {
+    groups.push({
+      key: "__no_org__",
+      // "No organization" only means something next to named groups.
+      label: groups.length ? "No organization" : "Other Workspaces",
+      workspaces: ungrouped
+    });
+  }
+  return groups;
+}
 function WorkspaceListTab({
   workspaces,
   loading,
   onCreateClick: _onCreateClick,
   onEditClick,
   onSwitchClick,
-  onLeaveClick
+  onLeaveClick,
+  fetchPlans,
+  organizations = [],
+  pageSize = WORKSPACE_LIST_PAGE_SIZE
 }) {
   const currentWorkspace = workspaces.find((ws) => ws.isCurrent);
-  const otherWorkspaces = workspaces.filter((ws) => !ws.isCurrent);
+  const groups = 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 pageStart = safePage * pageSize;
+  const pageRows = rows.slice(pageStart, pageStart + pageSize);
+  const pageWorkspaces = pageRows.map((row) => row.ws);
+  const [plans, setPlans] = (0, import_react17.useState)({});
+  const requestedPlans = (0, import_react17.useRef)(/* @__PURE__ */ new Set());
+  const visibleIds = [
+    ...currentWorkspace ? [currentWorkspace._id] : [],
+    ...pageWorkspaces.map((ws) => ws._id)
+  ];
+  const visibleKey = visibleIds.join(",");
+  const mounted = (0, import_react17.useRef)(true);
+  (0, import_react17.useEffect)(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+  (0, import_react17.useEffect)(() => {
+    if (!fetchPlans || loading) return;
+    const missing = visibleKey.split(",").filter((id) => id && !requestedPlans.current.has(id));
+    if (!missing.length) return;
+    missing.forEach((id) => requestedPlans.current.add(id));
+    fetchPlans(missing).then((found) => {
+      if (mounted.current) setPlans((prev) => ({ ...prev, ...found }));
+    }).catch(() => {
+    });
+  }, [fetchPlans, loading, visibleKey]);
+  const planOf = (ws) => fetchPlans ? plans[ws._id] ?? "" : ws.plan ?? "";
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     "div",
     {
@@ -10942,7 +11019,7 @@ function WorkspaceListTab({
             className: "flex flex-col items-start shrink-0 w-full",
             style: { gap: 16, padding: "var(--spacing-md) 0" },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
                 "p",
                 {
                   className: "w-full overflow-hidden text-ellipsis whitespace-nowrap",
@@ -10953,7 +11030,10 @@ function WorkspaceListTab({
                     fontWeight: 400,
                     lineHeight: "var(--line-height-line-height-md)"
                   },
-                  children: "Current Workspace"
+                  children: [
+                    "Current Workspace",
+                    currentOrganization ? ` \xB7 ${currentOrganization.name}${currentOrganization.role === "guest" ? " (guest)" : ""}` : ""
+                  ]
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
@@ -10963,7 +11043,7 @@ function WorkspaceListTab({
                   initials: currentWorkspace.initials,
                   imageUrl: currentWorkspace.imageUrl,
                   role: currentWorkspace.role,
-                  plan: currentWorkspace.plan,
+                  plan: planOf(currentWorkspace),
                   ownerId: currentWorkspace.ownerEmail,
                   type: "currentWS",
                   onSettings: () => onEditClick(currentWorkspace),
@@ -10990,40 +11070,92 @@ function WorkspaceListTab({
             style: { gap: 16, overflowY: "auto" },
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-                "p",
+                "div",
                 {
-                  className: "w-full overflow-hidden text-ellipsis whitespace-nowrap shrink-0",
-                  style: {
-                    color: "var(--alias-text---icons-muted)",
-                    fontFamily: "var(--font-family-font-family-body)",
-                    fontSize: "var(--font-size-font-size-md)",
-                    fontWeight: 400,
-                    lineHeight: "var(--line-height-line-height-md)"
-                  },
-                  children: "Other Workspaces"
+                  className: "flex flex-col items-start w-full",
+                  style: { gap: 16 },
+                  children: pageRows.map(({ ws, group }, index) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react17.Fragment, { children: [
+                    (index === 0 || pageRows[index - 1].group.key !== group.key) && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                      "p",
+                      {
+                        className: "w-full overflow-hidden text-ellipsis whitespace-nowrap shrink-0",
+                        style: {
+                          color: "var(--alias-text---icons-muted)",
+                          fontFamily: "var(--font-family-font-family-body)",
+                          fontSize: "var(--font-size-font-size-md)",
+                          fontWeight: 400,
+                          lineHeight: "var(--line-height-line-height-md)",
+                          marginTop: index === 0 ? 0 : 8
+                        },
+                        children: group.label
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                      import_ui14.ScWorkspaceSwitchCard,
+                      {
+                        wsName: ws.name,
+                        initials: ws.initials,
+                        imageUrl: ws.imageUrl,
+                        role: ws.role,
+                        plan: planOf(ws),
+                        ownerId: ws.ownerEmail,
+                        type: "otherWS",
+                        onSwitch: () => onSwitchClick(ws),
+                        onSettings: () => onEditClick(ws),
+                        onLeave: () => onLeaveClick(ws)
+                      }
+                    )
+                  ] }, ws._id))
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              pageCount > 1 && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
                 "div",
                 {
-                  className: "flex flex-col items-start w-full",
-                  style: { gap: 16 },
-                  children: otherWorkspaces.map((ws) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-                    import_ui14.ScWorkspaceSwitchCard,
-                    {
-                      wsName: ws.name,
-                      initials: ws.initials,
-                      imageUrl: ws.imageUrl,
-                      role: ws.role,
-                      plan: ws.plan,
-                      ownerId: ws.ownerEmail,
-                      type: "otherWS",
-                      onSwitch: () => onSwitchClick(ws),
-                      onSettings: () => onEditClick(ws),
-                      onLeave: () => onLeaveClick(ws)
-                    },
-                    ws._id
-                  ))
+                  className: "flex items-center justify-between shrink-0 w-full",
+                  style: { gap: "var(--spacing-md)" },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+                      "span",
+                      {
+                        style: {
+                          color: "var(--alias-text---icons-muted)",
+                          fontFamily: "var(--font-family-font-family-body)",
+                          fontSize: "var(--font-size-font-size-sm)",
+                          lineHeight: "var(--line-height-line-height-sm)"
+                        },
+                        children: [
+                          pageStart + 1,
+                          "\u2013",
+                          pageStart + pageWorkspaces.length,
+                          " of",
+                          " ",
+                          otherWorkspaces.length
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center", style: { gap: "var(--spacing-md)" }, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                        import_ui13.ScButton,
+                        {
+                          text: "Previous",
+                          variant: "tertiary",
+                          size: "sm",
+                          state: safePage === 0 ? "disabled" : "default",
+                          onClick: safePage === 0 ? void 0 : () => setPage(safePage - 1)
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                        import_ui13.ScButton,
+                        {
+                          text: "Next",
+                          variant: "tertiary",
+                          size: "sm",
+                          state: safePage >= pageCount - 1 ? "disabled" : "default",
+                          onClick: safePage >= pageCount - 1 ? void 0 : () => setPage(safePage + 1)
+                        }
+                      )
+                    ] })
+                  ]
                 }
               )
             ]
@@ -11171,6 +11303,28 @@ function SettingsContentInner({
   (0, import_react17.useEffect)(() => {
     void refreshWorkspaceList();
   }, [refreshWorkspaceList]);
+  const [listOrganizations, setListOrganizations] = (0, import_react17.useState)([]);
+  (0, import_react17.useEffect)(() => {
+    if (activeTab !== "workspaceList" || typeof organization?.list !== "function") {
+      return;
+    }
+    let cancelled = false;
+    organization.list().then((orgs) => {
+      if (!cancelled) {
+        setListOrganizations(
+          (orgs ?? []).map((org) => ({
+            _id: org._id,
+            name: org.name,
+            role: org.role
+          }))
+        );
+      }
+    }).catch(() => {
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [activeTab, organization]);
   const switchWorkspace = (0, import_react17.useCallback)(
     async (id) => {
       await workspace.switch(id);
@@ -11818,6 +11972,8 @@ function SettingsContentInner({
                       {
                         workspaces: displayWorkspaces,
                         loading: workspaceListLoading && workspaceList.length === 0,
+                        fetchPlans: workspace.fetchPlans,
+                        organizations: listOrganizations,
                         onCreateClick: handleCreateClick,
                         onEditClick: handleEditClick,
                         onSwitchClick: async (ws) => {

package/dist/index.mjs

@@ -163,6 +163,7 @@ function useWorkspaceOrganization({
 
 // src/settings-content.tsx
 import {
+  Fragment as Fragment11,
   useState as useState15,
   useEffect as useEffect13,
   useRef as useRef7,
@@ -10097,7 +10098,7 @@ function TokenTable({ tokens, deletingId, onRevoke, onDelete }) {
 }
 
 // src/settings-content.tsx
-import { Fragment as Fragment11, jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
 function deriveInitials(name) {
   return name.split(/\s+/).slice(0, 2).map((part) => part[0]?.toUpperCase() ?? "").join("") || "WS";
 }
@@ -10205,14 +10206,14 @@ function SettingsNav({
           /* @__PURE__ */ jsx22("div", { title: workspaceName ?? void 0, style: { padding: "4px 12px", fontSize: 11, fontWeight: 500, color: MUTED_COLOR2, textTransform: "uppercase", letterSpacing: "0.08em" }, children: "Workspace" }),
           item("workspace", (color) => /* @__PURE__ */ jsx22(SiconSettings2, { className: "w-5 h-5", color })),
           item("workspaceMembers", (color) => /* @__PURE__ */ jsx22(SiconTeam, { className: "w-5 h-5", color })),
-          isWorkspaceAdmin && /* @__PURE__ */ jsxs19(Fragment11, { children: [
+          isWorkspaceAdmin && /* @__PURE__ */ jsxs19(Fragment12, { children: [
             item("billing", (color) => /* @__PURE__ */ jsx22(SiconBilling, { className: "w-5 h-5", color })),
             item("apikey", (color) => /* @__PURE__ */ jsx22(SiconKey_default, { className: "w-5 h-5", color }))
           ] }),
           !isWorkspaceAdmin && /* @__PURE__ */ jsx22("p", { style: { margin: "4px 12px", fontSize: 12, lineHeight: "18px", color: MUTED_COLOR2 }, children: "Contact your workspace admin for credit top-ups and billing history." })
         ] }),
         /* @__PURE__ */ jsx22(ScHDivider, {}),
-        /* @__PURE__ */ jsx22("div", { className: "flex flex-col w-full", style: { gap: "var(--spacing-md)" }, children: hasOrganization ? /* @__PURE__ */ jsxs19(Fragment11, { children: [
+        /* @__PURE__ */ jsx22("div", { className: "flex flex-col w-full", style: { gap: "var(--spacing-md)" }, children: hasOrganization ? /* @__PURE__ */ jsxs19(Fragment12, { children: [
           /* @__PURE__ */ jsx22("div", { style: { padding: "4px 12px", fontSize: 11, fontWeight: 500, color: MUTED_COLOR2, textTransform: "uppercase", letterSpacing: "0.08em" }, children: "Organization" }),
           item("organization", (color) => /* @__PURE__ */ jsx22(SiconTeam, { className: "w-5 h-5", color })),
           item("organizationWorkspaces", (color) => /* @__PURE__ */ jsx22(SiconWorkspace2, { className: "w-5 h-5", color }))
@@ -10510,7 +10511,7 @@ function LanguageDropdown({
                 ScMenuOptions,
                 {
                   text: lang.label,
-                  icon: /* @__PURE__ */ jsx22(Fragment11, {}),
+                  icon: /* @__PURE__ */ jsx22(Fragment12, {}),
                   hover: isActive ? "true" : "false",
                   variant: "default",
                   role: "option",
@@ -10900,16 +10901,91 @@ function ProfileTab() {
     }
   );
 }
+var WORKSPACE_LIST_PAGE_SIZE = 10;
+function groupWorkspaceList(workspaces, organizations = []) {
+  const ordered = [
+    ...organizations.filter((org) => org.role !== "guest"),
+    ...organizations.filter((org) => org.role === "guest")
+  ];
+  const groups = [];
+  for (const org of ordered) {
+    const inOrg = workspaces.filter((ws) => ws.organizationId === org._id);
+    if (inOrg.length) {
+      groups.push({
+        key: org._id,
+        label: org.role === "guest" ? `${org.name} \xB7 Guest` : org.name,
+        workspaces: inOrg
+      });
+    }
+  }
+  const known = new Set(organizations.map((org) => org._id));
+  const ungrouped = workspaces.filter(
+    (ws) => !ws.organizationId || !known.has(ws.organizationId)
+  );
+  if (ungrouped.length) {
+    groups.push({
+      key: "__no_org__",
+      // "No organization" only means something next to named groups.
+      label: groups.length ? "No organization" : "Other Workspaces",
+      workspaces: ungrouped
+    });
+  }
+  return groups;
+}
 function WorkspaceListTab({
   workspaces,
   loading,
   onCreateClick: _onCreateClick,
   onEditClick,
   onSwitchClick,
-  onLeaveClick
+  onLeaveClick,
+  fetchPlans,
+  organizations = [],
+  pageSize = WORKSPACE_LIST_PAGE_SIZE
 }) {
   const currentWorkspace = workspaces.find((ws) => ws.isCurrent);
-  const otherWorkspaces = workspaces.filter((ws) => !ws.isCurrent);
+  const groups = 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 pageStart = safePage * pageSize;
+  const pageRows = rows.slice(pageStart, pageStart + pageSize);
+  const pageWorkspaces = pageRows.map((row) => row.ws);
+  const [plans, setPlans] = useState15({});
+  const requestedPlans = useRef7(/* @__PURE__ */ new Set());
+  const visibleIds = [
+    ...currentWorkspace ? [currentWorkspace._id] : [],
+    ...pageWorkspaces.map((ws) => ws._id)
+  ];
+  const visibleKey = visibleIds.join(",");
+  const mounted = useRef7(true);
+  useEffect13(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+  useEffect13(() => {
+    if (!fetchPlans || loading) return;
+    const missing = visibleKey.split(",").filter((id) => id && !requestedPlans.current.has(id));
+    if (!missing.length) return;
+    missing.forEach((id) => requestedPlans.current.add(id));
+    fetchPlans(missing).then((found) => {
+      if (mounted.current) setPlans((prev) => ({ ...prev, ...found }));
+    }).catch(() => {
+    });
+  }, [fetchPlans, loading, visibleKey]);
+  const planOf = (ws) => fetchPlans ? plans[ws._id] ?? "" : ws.plan ?? "";
   return /* @__PURE__ */ jsxs19(
     "div",
     {
@@ -10946,7 +11022,7 @@ function WorkspaceListTab({
             className: "flex flex-col items-start shrink-0 w-full",
             style: { gap: 16, padding: "var(--spacing-md) 0" },
             children: [
-              /* @__PURE__ */ jsx22(
+              /* @__PURE__ */ jsxs19(
                 "p",
                 {
                   className: "w-full overflow-hidden text-ellipsis whitespace-nowrap",
@@ -10957,7 +11033,10 @@ function WorkspaceListTab({
                     fontWeight: 400,
                     lineHeight: "var(--line-height-line-height-md)"
                   },
-                  children: "Current Workspace"
+                  children: [
+                    "Current Workspace",
+                    currentOrganization ? ` \xB7 ${currentOrganization.name}${currentOrganization.role === "guest" ? " (guest)" : ""}` : ""
+                  ]
                 }
               ),
               /* @__PURE__ */ jsx22(
@@ -10967,7 +11046,7 @@ function WorkspaceListTab({
                   initials: currentWorkspace.initials,
                   imageUrl: currentWorkspace.imageUrl,
                   role: currentWorkspace.role,
-                  plan: currentWorkspace.plan,
+                  plan: planOf(currentWorkspace),
                   ownerId: currentWorkspace.ownerEmail,
                   type: "currentWS",
                   onSettings: () => onEditClick(currentWorkspace),
@@ -10994,40 +11073,92 @@ function WorkspaceListTab({
             style: { gap: 16, overflowY: "auto" },
             children: [
               /* @__PURE__ */ jsx22(
-                "p",
+                "div",
                 {
-                  className: "w-full overflow-hidden text-ellipsis whitespace-nowrap shrink-0",
-                  style: {
-                    color: "var(--alias-text---icons-muted)",
-                    fontFamily: "var(--font-family-font-family-body)",
-                    fontSize: "var(--font-size-font-size-md)",
-                    fontWeight: 400,
-                    lineHeight: "var(--line-height-line-height-md)"
-                  },
-                  children: "Other Workspaces"
+                  className: "flex flex-col items-start w-full",
+                  style: { gap: 16 },
+                  children: pageRows.map(({ ws, group }, index) => /* @__PURE__ */ jsxs19(Fragment11, { children: [
+                    (index === 0 || pageRows[index - 1].group.key !== group.key) && /* @__PURE__ */ jsx22(
+                      "p",
+                      {
+                        className: "w-full overflow-hidden text-ellipsis whitespace-nowrap shrink-0",
+                        style: {
+                          color: "var(--alias-text---icons-muted)",
+                          fontFamily: "var(--font-family-font-family-body)",
+                          fontSize: "var(--font-size-font-size-md)",
+                          fontWeight: 400,
+                          lineHeight: "var(--line-height-line-height-md)",
+                          marginTop: index === 0 ? 0 : 8
+                        },
+                        children: group.label
+                      }
+                    ),
+                    /* @__PURE__ */ jsx22(
+                      ScWorkspaceSwitchCard,
+                      {
+                        wsName: ws.name,
+                        initials: ws.initials,
+                        imageUrl: ws.imageUrl,
+                        role: ws.role,
+                        plan: planOf(ws),
+                        ownerId: ws.ownerEmail,
+                        type: "otherWS",
+                        onSwitch: () => onSwitchClick(ws),
+                        onSettings: () => onEditClick(ws),
+                        onLeave: () => onLeaveClick(ws)
+                      }
+                    )
+                  ] }, ws._id))
                 }
               ),
-              /* @__PURE__ */ jsx22(
+              pageCount > 1 && /* @__PURE__ */ jsxs19(
                 "div",
                 {
-                  className: "flex flex-col items-start w-full",
-                  style: { gap: 16 },
-                  children: otherWorkspaces.map((ws) => /* @__PURE__ */ jsx22(
-                    ScWorkspaceSwitchCard,
-                    {
-                      wsName: ws.name,
-                      initials: ws.initials,
-                      imageUrl: ws.imageUrl,
-                      role: ws.role,
-                      plan: ws.plan,
-                      ownerId: ws.ownerEmail,
-                      type: "otherWS",
-                      onSwitch: () => onSwitchClick(ws),
-                      onSettings: () => onEditClick(ws),
-                      onLeave: () => onLeaveClick(ws)
-                    },
-                    ws._id
-                  ))
+                  className: "flex items-center justify-between shrink-0 w-full",
+                  style: { gap: "var(--spacing-md)" },
+                  children: [
+                    /* @__PURE__ */ jsxs19(
+                      "span",
+                      {
+                        style: {
+                          color: "var(--alias-text---icons-muted)",
+                          fontFamily: "var(--font-family-font-family-body)",
+                          fontSize: "var(--font-size-font-size-sm)",
+                          lineHeight: "var(--line-height-line-height-sm)"
+                        },
+                        children: [
+                          pageStart + 1,
+                          "\u2013",
+                          pageStart + pageWorkspaces.length,
+                          " of",
+                          " ",
+                          otherWorkspaces.length
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs19("div", { className: "flex items-center", style: { gap: "var(--spacing-md)" }, children: [
+                      /* @__PURE__ */ jsx22(
+                        ScButton7,
+                        {
+                          text: "Previous",
+                          variant: "tertiary",
+                          size: "sm",
+                          state: safePage === 0 ? "disabled" : "default",
+                          onClick: safePage === 0 ? void 0 : () => setPage(safePage - 1)
+                        }
+                      ),
+                      /* @__PURE__ */ jsx22(
+                        ScButton7,
+                        {
+                          text: "Next",
+                          variant: "tertiary",
+                          size: "sm",
+                          state: safePage >= pageCount - 1 ? "disabled" : "default",
+                          onClick: safePage >= pageCount - 1 ? void 0 : () => setPage(safePage + 1)
+                        }
+                      )
+                    ] })
+                  ]
                 }
               )
             ]
@@ -11175,6 +11306,28 @@ function SettingsContentInner({
   useEffect13(() => {
     void refreshWorkspaceList();
   }, [refreshWorkspaceList]);
+  const [listOrganizations, setListOrganizations] = useState15([]);
+  useEffect13(() => {
+    if (activeTab !== "workspaceList" || typeof organization?.list !== "function") {
+      return;
+    }
+    let cancelled = false;
+    organization.list().then((orgs) => {
+      if (!cancelled) {
+        setListOrganizations(
+          (orgs ?? []).map((org) => ({
+            _id: org._id,
+            name: org.name,
+            role: org.role
+          }))
+        );
+      }
+    }).catch(() => {
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [activeTab, organization]);
   const switchWorkspace = useCallback7(
     async (id) => {
       await workspace.switch(id);
@@ -11562,7 +11715,7 @@ function SettingsContentInner({
                           children: "Settings"
                         }
                       ),
-                      scopeCrumb && /* @__PURE__ */ jsxs19(Fragment11, { children: [
+                      scopeCrumb && /* @__PURE__ */ jsxs19(Fragment12, { children: [
                         /* @__PURE__ */ jsx22(SiconRight2, { className: "w-6 h-6 shrink-0", color: "var(--alias-text---icons-primary)" }),
                         /* @__PURE__ */ jsx22(
                           "span",
@@ -11595,7 +11748,7 @@ function SettingsContentInner({
                           children: leafLabel
                         }
                       ),
-                      isBillingPlans && /* @__PURE__ */ jsxs19(Fragment11, { children: [
+                      isBillingPlans && /* @__PURE__ */ jsxs19(Fragment12, { children: [
                         /* @__PURE__ */ jsx22(SiconRight2, { className: "w-6 h-6 shrink-0", color: "var(--alias-text---icons-primary)" }),
                         /* @__PURE__ */ jsx22(
                           "span",
@@ -11822,6 +11975,8 @@ function SettingsContentInner({
                       {
                         workspaces: displayWorkspaces,
                         loading: workspaceListLoading && workspaceList.length === 0,
+                        fetchPlans: workspace.fetchPlans,
+                        organizations: listOrganizations,
                         onCreateClick: handleCreateClick,
                         onEditClick: handleEditClick,
                         onSwitchClick: async (ws) => {
@@ -12264,12 +12419,14 @@ export {
   TokensContent,
   URL_TO_TAB,
   USER_LANGUAGES,
+  WORKSPACE_LIST_PAGE_SIZE,
   WorkspaceGeneralTab,
   WorkspaceListTab,
   WorkspaceModal,
   WorkspacePicker,
   WorkspaceTab,
   countLabel,
+  groupWorkspaceList,
   loadWorkspaceOrganization,
   resolveSettingsTabFromPath,
   useSettingsAdapters,

package/package.json

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