@streamoid/settings 0.7.0 → 0.7.1

package/dist/index.d.mts

@@ -227,6 +227,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 +938,18 @@ 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;
+declare function WorkspaceListTab({ workspaces, loading, onCreateClick: _onCreateClick, onEditClick, onSwitchClick, onLeaveClick, fetchPlans, 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>>;
+    pageSize?: number;
 }): react.JSX.Element;
 /**
  * @deprecated Renamed to `WorkspaceListTab` in 0.4.0 — the tab is a workspace
@@ -1399,4 +1414,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, WorkspaceListTab, type WorkspaceMember, WorkspaceModal, type WorkspaceOrganization, type WorkspaceOrganizationRequest, WorkspacePicker, type WorkspacePickerItem, type WorkspacePickerProps, WorkspaceTab, type WorkspaceUsageResponse, countLabel, loadWorkspaceOrganization, resolveSettingsTabFromPath, useSettingsAdapters, useWorkspaceOrganization, userLanguageLabel };

package/dist/index.d.ts

@@ -227,6 +227,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 +938,18 @@ 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;
+declare function WorkspaceListTab({ workspaces, loading, onCreateClick: _onCreateClick, onEditClick, onSwitchClick, onLeaveClick, fetchPlans, 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>>;
+    pageSize?: number;
 }): react.JSX.Element;
 /**
  * @deprecated Renamed to `WorkspaceListTab` in 0.4.0 — the tab is a workspace
@@ -1399,4 +1414,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, WorkspaceListTab, type WorkspaceMember, WorkspaceModal, type WorkspaceOrganization, type WorkspaceOrganizationRequest, WorkspacePicker, type WorkspacePickerItem, type WorkspacePickerProps, WorkspaceTab, type WorkspaceUsageResponse, countLabel, loadWorkspaceOrganization, resolveSettingsTabFromPath, useSettingsAdapters, useWorkspaceOrganization, userLanguageLabel };

package/dist/index.js

@@ -51,6 +51,7 @@ __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,
@@ -10896,16 +10897,49 @@ function ProfileTab() {
     }
   );
 }
+var WORKSPACE_LIST_PAGE_SIZE = 10;
 function WorkspaceListTab({
   workspaces,
   loading,
   onCreateClick: _onCreateClick,
   onEditClick,
   onSwitchClick,
-  onLeaveClick
+  onLeaveClick,
+  fetchPlans,
+  pageSize = WORKSPACE_LIST_PAGE_SIZE
 }) {
   const currentWorkspace = workspaces.find((ws) => ws.isCurrent);
   const otherWorkspaces = workspaces.filter((ws) => !ws.isCurrent);
+  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 pageWorkspaces = otherWorkspaces.slice(pageStart, pageStart + pageSize);
+  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",
     {
@@ -10963,7 +10997,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),
@@ -11008,14 +11042,14 @@ function WorkspaceListTab({
                 {
                   className: "flex flex-col items-start w-full",
                   style: { gap: 16 },
-                  children: otherWorkspaces.map((ws) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                  children: pageWorkspaces.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,
+                      plan: planOf(ws),
                       ownerId: ws.ownerEmail,
                       type: "otherWS",
                       onSwitch: () => onSwitchClick(ws),
@@ -11025,6 +11059,56 @@ function WorkspaceListTab({
                     ws._id
                   ))
                 }
+              ),
+              pageCount > 1 && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+                "div",
+                {
+                  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)
+                        }
+                      )
+                    ] })
+                  ]
+                }
               )
             ]
           }
@@ -11818,6 +11902,7 @@ function SettingsContentInner({
                       {
                         workspaces: displayWorkspaces,
                         loading: workspaceListLoading && workspaceList.length === 0,
+                        fetchPlans: workspace.fetchPlans,
                         onCreateClick: handleCreateClick,
                         onEditClick: handleEditClick,
                         onSwitchClick: async (ws) => {

package/dist/index.mjs

@@ -10900,16 +10900,49 @@ function ProfileTab() {
     }
   );
 }
+var WORKSPACE_LIST_PAGE_SIZE = 10;
 function WorkspaceListTab({
   workspaces,
   loading,
   onCreateClick: _onCreateClick,
   onEditClick,
   onSwitchClick,
-  onLeaveClick
+  onLeaveClick,
+  fetchPlans,
+  pageSize = WORKSPACE_LIST_PAGE_SIZE
 }) {
   const currentWorkspace = workspaces.find((ws) => ws.isCurrent);
   const otherWorkspaces = workspaces.filter((ws) => !ws.isCurrent);
+  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 pageWorkspaces = otherWorkspaces.slice(pageStart, pageStart + pageSize);
+  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",
     {
@@ -10967,7 +11000,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),
@@ -11012,14 +11045,14 @@ function WorkspaceListTab({
                 {
                   className: "flex flex-col items-start w-full",
                   style: { gap: 16 },
-                  children: otherWorkspaces.map((ws) => /* @__PURE__ */ jsx22(
+                  children: pageWorkspaces.map((ws) => /* @__PURE__ */ jsx22(
                     ScWorkspaceSwitchCard,
                     {
                       wsName: ws.name,
                       initials: ws.initials,
                       imageUrl: ws.imageUrl,
                       role: ws.role,
-                      plan: ws.plan,
+                      plan: planOf(ws),
                       ownerId: ws.ownerEmail,
                       type: "otherWS",
                       onSwitch: () => onSwitchClick(ws),
@@ -11029,6 +11062,56 @@ function WorkspaceListTab({
                     ws._id
                   ))
                 }
+              ),
+              pageCount > 1 && /* @__PURE__ */ jsxs19(
+                "div",
+                {
+                  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)
+                        }
+                      )
+                    ] })
+                  ]
+                }
               )
             ]
           }
@@ -11822,6 +11905,7 @@ function SettingsContentInner({
                       {
                         workspaces: displayWorkspaces,
                         loading: workspaceListLoading && workspaceList.length === 0,
+                        fetchPlans: workspace.fetchPlans,
                         onCreateClick: handleCreateClick,
                         onEditClick: handleEditClick,
                         onSwitchClick: async (ws) => {
@@ -12264,6 +12348,7 @@ export {
   TokensContent,
   URL_TO_TAB,
   USER_LANGUAGES,
+  WORKSPACE_LIST_PAGE_SIZE,
   WorkspaceGeneralTab,
   WorkspaceListTab,
   WorkspaceModal,

package/package.json

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