@streamoid/settings 0.7.1 → 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. */
@@ -940,7 +943,25 @@ declare function ProfileTab(): react.JSX.Element;
  */
 /** 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, }: {
+/** 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;
@@ -949,6 +970,8 @@ declare function WorkspaceListTab({ workspaces, loading, onCreateClick: _onCreat
     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;
 /**
@@ -1414,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, 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 };
+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. */
@@ -940,7 +943,25 @@ declare function ProfileTab(): react.JSX.Element;
  */
 /** 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, }: {
+/** 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;
@@ -949,6 +970,8 @@ declare function WorkspaceListTab({ workspaces, loading, onCreateClick: _onCreat
     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;
 /**
@@ -1414,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, 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 };
+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

@@ -58,6 +58,7 @@ __export(index_exports, {
   WorkspacePicker: () => WorkspacePicker,
   WorkspaceTab: () => WorkspaceTab,
   countLabel: () => countLabel,
+  groupWorkspaceList: () => groupWorkspaceList,
   loadWorkspaceOrganization: () => loadWorkspaceOrganization,
   resolveSettingsTabFromPath: () => resolveSettingsTabFromPath,
   useSettingsAdapters: () => useSettingsAdapters,
@@ -10898,6 +10899,36 @@ 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,
@@ -10906,15 +10937,27 @@ function WorkspaceListTab({
   onSwitchClick,
   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 pageWorkspaces = otherWorkspaces.slice(pageStart, pageStart + 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 = [
@@ -10976,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",
@@ -10987,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)(
@@ -11023,41 +11069,43 @@ function WorkspaceListTab({
             className: "flex flex-col items-start flex-1 min-h-0 w-full",
             style: { gap: 16, overflowY: "auto" },
             children: [
-              /* @__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)"
-                  },
-                  children: "Other Workspaces"
-                }
-              ),
               /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                 "div",
                 {
                   className: "flex flex-col items-start w-full",
                   style: { gap: 16 },
-                  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: planOf(ws),
-                      ownerId: ws.ownerEmail,
-                      type: "otherWS",
-                      onSwitch: () => onSwitchClick(ws),
-                      onSettings: () => onEditClick(ws),
-                      onLeave: () => onLeaveClick(ws)
-                    },
-                    ws._id
-                  ))
+                  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))
                 }
               ),
               pageCount > 1 && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
@@ -11255,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);
@@ -11903,6 +11973,7 @@ 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",
@@ -10901,6 +10902,36 @@ 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,
@@ -10909,15 +10940,27 @@ function WorkspaceListTab({
   onSwitchClick,
   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 pageWorkspaces = otherWorkspaces.slice(pageStart, pageStart + 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 = [
@@ -10979,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",
@@ -10990,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(
@@ -11026,41 +11072,43 @@ function WorkspaceListTab({
             className: "flex flex-col items-start flex-1 min-h-0 w-full",
             style: { gap: 16, overflowY: "auto" },
             children: [
-              /* @__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)"
-                  },
-                  children: "Other Workspaces"
-                }
-              ),
               /* @__PURE__ */ jsx22(
                 "div",
                 {
                   className: "flex flex-col items-start w-full",
                   style: { gap: 16 },
-                  children: pageWorkspaces.map((ws) => /* @__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
-                  ))
+                  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))
                 }
               ),
               pageCount > 1 && /* @__PURE__ */ jsxs19(
@@ -11258,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);
@@ -11645,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",
@@ -11678,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",
@@ -11906,6 +11976,7 @@ function SettingsContentInner({
                         workspaces: displayWorkspaces,
                         loading: workspaceListLoading && workspaceList.length === 0,
                         fetchPlans: workspace.fetchPlans,
+                        organizations: listOrganizations,
                         onCreateClick: handleCreateClick,
                         onEditClick: handleEditClick,
                         onSwitchClick: async (ws) => {
@@ -12355,6 +12426,7 @@ export {
   WorkspacePicker,
   WorkspaceTab,
   countLabel,
+  groupWorkspaceList,
   loadWorkspaceOrganization,
   resolveSettingsTabFromPath,
   useSettingsAdapters,

package/package.json

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