@teambit/workspace 1.0.843 → 1.0.845

package/dist/ui/workspace/workspace-overview/workspace-overview.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","data","_interopRequireWildcard","require","_explorerUiGallery","_workspaceUi","_previewUi","_designUi","_componentId","_cloudHooks","_scopes","_lodash","_workspaceUi2","_workspaceUi3","_workspaceContext","_workspaceOverviewModule","_interopRequireDefault","_linkPlugin","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","WorkspaceOverview","workspace","useContext","WorkspaceContext","isMinimal","useWorkspaceMode","compModelsById","Map","components","map","comp","id","toString","componentDescriptors","uniqueScopes","Set","c","scope","uniqueScopesArr","Array","from","cloudScopes","useCloudScopes","cloudScopesById","plugins","useCardPlugins","showPreview","length","createElement","EmptyWorkspace","name","compDescriptorById","componentsWithDescriptorAndScope","compact","component","deprecation","isDeprecate","componentDescriptor","cloudScope","ScopeID","isValid","fromString","undefined","className","styles","container","ComponentGrid","cardGrid","WorkspaceComponentCard","key","shouldShowPreviewState","serverUrlsSignature","React","useMemo","serversCount","values","filter","server","url","join","preview","Preview","shouldShowPreview","compModel","PreviewPlaceholder","previewBottomRight","PreviewBottomRight","env","envComponentId","ComponentID","rightPreviewPlugins","badge","Tooltip","delay","content","src","icon","envIcon","LinkPlugin","size"],"sources":["workspace-overview.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { ComponentGrid } from '@teambit/explorer.ui.gallery.component-grid';\nimport { EmptyWorkspace } from '@teambit/workspace.ui.empty-workspace';\nimport { PreviewPlaceholder } from '@teambit/preview.ui.preview-placeholder';\nimport { Tooltip } from '@teambit/design.ui.tooltip';\nimport { ComponentID } from '@teambit/component-id';\nimport type { ComponentModel } from '@teambit/component';\nimport { useCloudScopes } from '@teambit/cloud.hooks.use-cloud-scopes';\nimport { ScopeID } from '@teambit/scopes.scope-id';\nimport { compact } from 'lodash';\nimport { WorkspaceComponentCard } from '@teambit/workspace.ui.workspace-component-card';\nimport type { ComponentCardPluginType, PluginProps } from '@teambit/explorer.ui.component-card';\nimport { useWorkspaceMode } from '@teambit/workspace.ui.use-workspace-mode';\nimport { WorkspaceContext } from '../workspace-context';\nimport styles from './workspace-overview.module.scss';\nimport { LinkPlugin } from './link-plugin';\n\nexport function WorkspaceOverview() {\n  const workspace = useContext(WorkspaceContext);\n  const { isMinimal } = useWorkspaceMode();\n  const compModelsById = new Map(workspace.components.map((comp) => [comp.id.toString(), comp]));\n  const { components, componentDescriptors } = workspace;\n  const uniqueScopes = new Set(components.map((c) => c.id.scope));\n  const uniqueScopesArr = Array.from(uniqueScopes);\n  const { cloudScopes = [] } = useCloudScopes(uniqueScopesArr);\n  const cloudScopesById = new Map(cloudScopes.map((scope) => [scope.id.toString(), scope]));\n\n  const plugins = useCardPlugins({ compModelsById, showPreview: isMinimal });\n\n  if (!components || components.length === 0) return <EmptyWorkspace name={workspace.name} />;\n\n  const compDescriptorById = new Map(componentDescriptors.map((comp) => [comp.id.toString(), comp]));\n  const componentsWithDescriptorAndScope = compact(\n    components.map((component) => {\n      if (component.deprecation?.isDeprecate) return null;\n      const componentDescriptor = compDescriptorById.get(component.id.toString());\n      if (!componentDescriptor) return null;\n      const cloudScope = cloudScopesById.get(component.id.scope);\n      const scope =\n        cloudScope ||\n        (ScopeID.isValid(component.id.scope) && { id: ScopeID.fromString(component.id.scope) }) ||\n        undefined;\n\n      return { component, componentDescriptor, scope };\n    })\n  );\n\n  return (\n    <div className={styles.container}>\n      <ComponentGrid className={styles.cardGrid}>\n        {componentsWithDescriptorAndScope.map(({ component, componentDescriptor, scope }) => {\n          return (\n            <WorkspaceComponentCard\n              key={component.id.toString()}\n              componentDescriptor={componentDescriptor}\n              component={component}\n              plugins={plugins}\n              scope={scope}\n              shouldShowPreviewState={isMinimal}\n            />\n          );\n        })}\n      </ComponentGrid>\n    </div>\n  );\n}\n\nexport function useCardPlugins({\n  compModelsById,\n  showPreview,\n}: {\n  compModelsById: Map<string, ComponentModel>;\n  showPreview?: boolean;\n}): ComponentCardPluginType<PluginProps>[] {\n  const serverUrlsSignature = React.useMemo(() => {\n    const serversCount = Array.from(compModelsById.values())\n      .filter((comp) => comp.server?.url)\n      .map((comp) => comp.server?.url)\n      .join(',');\n    return serversCount;\n  }, [compModelsById]);\n\n  const plugins = React.useMemo(\n    () => [\n      {\n        preview: function Preview({ component, shouldShowPreview }) {\n          const compModel = compModelsById.get(component.id.toString());\n          if (!compModel) return null;\n          return (\n            <PreviewPlaceholder\n              componentDescriptor={component}\n              component={compModel}\n              shouldShowPreview={showPreview || shouldShowPreview}\n            />\n          );\n        },\n      },\n      {\n        previewBottomRight: function PreviewBottomRight({ component }) {\n          const env = component.get('teambit.envs/envs');\n          const envComponentId = env?.id ? ComponentID.fromString(env?.id) : undefined;\n\n          return (\n            <div className={styles.rightPreviewPlugins}>\n              <div className={styles.badge}>\n                <Tooltip delay={300} content={envComponentId?.name}>\n                  <img src={env?.icon} className={styles.envIcon} />\n                </Tooltip>\n              </div>\n            </div>\n          );\n        },\n      },\n      new LinkPlugin(),\n    ],\n    [compModelsById.size, serverUrlsSignature, showPreview]\n  );\n\n  return plugins;\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","data","_interopRequireWildcard","require","_explorerUiGallery","_workspaceUi","_previewUi","_designUi","_componentId","_lodash","_interopRequireDefault","_scopes","_cloudHooks","_reactRouterDom","_workspaceUi2","_workspaceUi3","_designUi2","_workspaceContext","_linkPlugin","_useWorkspaceAggregation","_workspaceFilterPanel","_workspaceOverviewModule","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","WorkspaceOverview","workspace","useContext","WorkspaceContext","components","componentDescriptors","length","createElement","EmptyWorkspace","name","isMinimal","useWorkspaceMode","compModelsById","useMemo","Map","map","c","id","toString","uniqueScopes","Set","scope","cloudScopes","useCloudScopes","cloudMap","s","compDescriptorMap","d","items","compact","component","deprecation","isDeprecate","descriptor","cloudScope","ScopeID","isValid","fromString","undefined","componentDescriptor","searchParams","useSearchParams","aggregation","groups","groupType","availableAggregations","filteredCount","useWorkspaceAggregation","plugins","useCardPlugins","showPreview","className","styles","container","WorkspaceFilterPanel","group","key","agg","H3","aggregationTitle","displayName","ComponentGrid","cardGrid","item","WorkspaceComponentCard","shouldShowPreviewState","serverUrlsSignature","React","serversCount","Array","from","values","filter","comp","server","url","join","preview","Preview","shouldShowPreview","compModel","PreviewPlaceholder","previewBottomRight","PreviewBottomRight","env","envComponentId","ComponentID","rightPreviewPlugins","badge","Tooltip","delay","content","src","icon","envIcon","LinkPlugin","size"],"sources":["workspace-overview.tsx"],"sourcesContent":["import React, { useContext, useMemo } from 'react';\nimport { ComponentGrid } from '@teambit/explorer.ui.gallery.component-grid';\nimport { EmptyWorkspace } from '@teambit/workspace.ui.empty-workspace';\nimport { PreviewPlaceholder } from '@teambit/preview.ui.preview-placeholder';\nimport { Tooltip } from '@teambit/design.ui.tooltip';\nimport { ComponentID } from '@teambit/component-id';\nimport type { ComponentModel } from '@teambit/component';\nimport compact from 'lodash.compact';\nimport { ScopeID } from '@teambit/scopes.scope-id';\nimport { useCloudScopes } from '@teambit/cloud.hooks.use-cloud-scopes';\nimport { useSearchParams } from 'react-router-dom';\nimport { WorkspaceComponentCard } from '@teambit/workspace.ui.workspace-component-card';\nimport type { ComponentCardPluginType, PluginProps } from '@teambit/explorer.ui.component-card';\nimport { useWorkspaceMode } from '@teambit/workspace.ui.use-workspace-mode';\nimport { H3 } from '@teambit/design.ui.heading';\nimport { WorkspaceContext } from '../workspace-context';\nimport { LinkPlugin } from './link-plugin';\nimport { useWorkspaceAggregation } from './use-workspace-aggregation';\nimport { WorkspaceFilterPanel } from './workspace-filter-panel';\nimport styles from './workspace-overview.module.scss';\n\nexport function WorkspaceOverview() {\n  const workspace = useContext(WorkspaceContext);\n  const { components, componentDescriptors } = workspace;\n\n  if (!components.length) return <EmptyWorkspace name={workspace.name} />;\n\n  const { isMinimal } = useWorkspaceMode();\n  const compModelsById = useMemo(() => new Map(components.map((c) => [c.id.toString(), c])), [components]);\n\n  const uniqueScopes = [...new Set(components.map((c) => c.id.scope))];\n  const { cloudScopes } = useCloudScopes(uniqueScopes);\n  const cloudMap = new Map((cloudScopes || []).map((s) => [s.id.toString(), s]));\n\n  const compDescriptorMap = new Map(componentDescriptors.map((d) => [d.id.toString(), d]));\n\n  const items = compact(\n    components.map((component) => {\n      if (component.deprecation?.isDeprecate) return null;\n\n      const descriptor = compDescriptorMap.get(component.id.toString());\n      if (!descriptor) return null;\n\n      const cloudScope = cloudMap.get(component.id.scope);\n      const scope =\n        cloudScope ||\n        (ScopeID.isValid(component.id.scope) && { id: ScopeID.fromString(component.id.scope) }) ||\n        undefined;\n\n      return { component, componentDescriptor: descriptor, scope: (scope && { id: scope.id }) || undefined };\n    })\n  );\n\n  const [searchParams] = useSearchParams();\n  const aggregation = (searchParams.get('aggregation') as any) || 'namespaces';\n\n  const { groups, groupType, availableAggregations, filteredCount } = useWorkspaceAggregation(items, aggregation);\n\n  const plugins = useCardPlugins({ compModelsById, showPreview: isMinimal });\n\n  return (\n    <div className={styles.container}>\n      <WorkspaceFilterPanel aggregation={aggregation} availableAggregations={availableAggregations} items={items} />\n\n      {filteredCount === 0 && <EmptyWorkspace name={workspace.name} />}\n\n      {groups.map((group) => (\n        <section key={group.name} className={styles.agg}>\n          {groupType !== 'none' && <H3 className={styles.aggregationTitle}>{group.displayName}</H3>}\n\n          <ComponentGrid className={styles.cardGrid}>\n            {group.items.map((item) => (\n              <WorkspaceComponentCard\n                key={item.component.id.toString()}\n                component={item.component}\n                componentDescriptor={item.componentDescriptor}\n                scope={item.scope}\n                plugins={plugins}\n                shouldShowPreviewState={isMinimal}\n              />\n            ))}\n          </ComponentGrid>\n        </section>\n      ))}\n    </div>\n  );\n}\n\nexport function useCardPlugins({\n  compModelsById,\n  showPreview,\n}: {\n  compModelsById: Map<string, ComponentModel>;\n  showPreview?: boolean;\n}): ComponentCardPluginType<PluginProps>[] {\n  const serverUrlsSignature = React.useMemo(() => {\n    const serversCount = Array.from(compModelsById.values())\n      .filter((comp) => comp.server?.url)\n      .map((comp) => comp.server?.url)\n      .join(',');\n    return serversCount;\n  }, [compModelsById]);\n\n  const plugins = React.useMemo(\n    () => [\n      {\n        preview: function Preview({ component, shouldShowPreview }) {\n          const compModel = compModelsById.get(component.id.toString());\n          if (!compModel) return null;\n          return (\n            <PreviewPlaceholder\n              componentDescriptor={component}\n              component={compModel}\n              shouldShowPreview={showPreview || shouldShowPreview}\n            />\n          );\n        },\n      },\n      {\n        previewBottomRight: function PreviewBottomRight({ component }) {\n          const env = component.get('teambit.envs/envs');\n          const envComponentId = env?.id ? ComponentID.fromString(env?.id) : undefined;\n\n          return (\n            <div className={styles.rightPreviewPlugins}>\n              <div className={styles.badge}>\n                <Tooltip delay={300} content={envComponentId?.name}>\n                  <img src={env?.icon} className={styles.envIcon} />\n                </Tooltip>\n              </div>\n            </div>\n          );\n        },\n      },\n      new LinkPlugin(),\n    ],\n    [compModelsById.size, serverUrlsSignature, showPreview]\n  );\n\n  return plugins;\n}\n"],"mappings":";;;;;;;AAAA,SAAAA,OAAA;EAAA,MAAAC,IAAA,GAAAC,uBAAA,CAAAC,OAAA;EAAAH,MAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAG,mBAAA;EAAA,MAAAH,IAAA,GAAAE,OAAA;EAAAC,kBAAA,YAAAA,CAAA;IAAA,OAAAH,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAI,aAAA;EAAA,MAAAJ,IAAA,GAAAE,OAAA;EAAAE,YAAA,YAAAA,CAAA;IAAA,OAAAJ,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAK,WAAA;EAAA,MAAAL,IAAA,GAAAE,OAAA;EAAAG,UAAA,YAAAA,CAAA;IAAA,OAAAL,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAM,UAAA;EAAA,MAAAN,IAAA,GAAAE,OAAA;EAAAI,SAAA,YAAAA,CAAA;IAAA,OAAAN,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAO,aAAA;EAAA,MAAAP,IAAA,GAAAE,OAAA;EAAAK,YAAA,YAAAA,CAAA;IAAA,OAAAP,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAEA,SAAAQ,QAAA;EAAA,MAAAR,IAAA,GAAAS,sBAAA,CAAAP,OAAA;EAAAM,OAAA,YAAAA,CAAA;IAAA,OAAAR,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAU,QAAA;EAAA,MAAAV,IAAA,GAAAE,OAAA;EAAAQ,OAAA,YAAAA,CAAA;IAAA,OAAAV,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAW,YAAA;EAAA,MAAAX,IAAA,GAAAE,OAAA;EAAAS,WAAA,YAAAA,CAAA;IAAA,OAAAX,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAY,gBAAA;EAAA,MAAAZ,IAAA,GAAAE,OAAA;EAAAU,eAAA,YAAAA,CAAA;IAAA,OAAAZ,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAa,cAAA;EAAA,MAAAb,IAAA,GAAAE,OAAA;EAAAW,aAAA,YAAAA,CAAA;IAAA,OAAAb,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAEA,SAAAc,cAAA;EAAA,MAAAd,IAAA,GAAAE,OAAA;EAAAY,aAAA,YAAAA,CAAA;IAAA,OAAAd,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAe,WAAA;EAAA,MAAAf,IAAA,GAAAE,OAAA;EAAAa,UAAA,YAAAA,CAAA;IAAA,OAAAf,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAgB,kBAAA;EAAA,MAAAhB,IAAA,GAAAE,OAAA;EAAAc,iBAAA,YAAAA,CAAA;IAAA,OAAAhB,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAiB,YAAA;EAAA,MAAAjB,IAAA,GAAAE,OAAA;EAAAe,WAAA,YAAAA,CAAA;IAAA,OAAAjB,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAkB,yBAAA;EAAA,MAAAlB,IAAA,GAAAE,OAAA;EAAAgB,wBAAA,YAAAA,CAAA;IAAA,OAAAlB,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAmB,sBAAA;EAAA,MAAAnB,IAAA,GAAAE,OAAA;EAAAiB,qBAAA,YAAAA,CAAA;IAAA,OAAAnB,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAoB,yBAAA;EAAA,MAAApB,IAAA,GAAAS,sBAAA,CAAAP,OAAA;EAAAkB,wBAAA,YAAAA,CAAA;IAAA,OAAApB,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAAsD,SAAAS,uBAAAY,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAApB,wBAAAoB,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAxB,uBAAA,YAAAA,CAAAoB,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;AAE/C,SAASgB,iBAAiBA,CAAA,EAAG;EAClC,MAAMC,SAAS,GAAG,IAAAC,mBAAU,EAACC,oCAAgB,CAAC;EAC9C,MAAM;IAAEC,UAAU;IAAEC;EAAqB,CAAC,GAAGJ,SAAS;EAEtD,IAAI,CAACG,UAAU,CAACE,MAAM,EAAE,oBAAO/C,MAAA,GAAAwB,OAAA,CAAAwB,aAAA,CAAC3C,YAAA,GAAA4C,cAAc;IAACC,IAAI,EAAER,SAAS,CAACQ;EAAK,CAAE,CAAC;EAEvE,MAAM;IAAEC;EAAU,CAAC,GAAG,IAAAC,gCAAgB,EAAC,CAAC;EACxC,MAAMC,cAAc,GAAG,IAAAC,gBAAO,EAAC,MAAM,IAAIC,GAAG,CAACV,UAAU,CAACW,GAAG,CAAEC,CAAC,IAAK,CAACA,CAAC,CAACC,EAAE,CAACC,QAAQ,CAAC,CAAC,EAAEF,CAAC,CAAC,CAAC,CAAC,EAAE,CAACZ,UAAU,CAAC,CAAC;EAExG,MAAMe,YAAY,GAAG,CAAC,GAAG,IAAIC,GAAG,CAAChB,UAAU,CAACW,GAAG,CAAEC,CAAC,IAAKA,CAAC,CAACC,EAAE,CAACI,KAAK,CAAC,CAAC,CAAC;EACpE,MAAM;IAAEC;EAAY,CAAC,GAAG,IAAAC,4BAAc,EAACJ,YAAY,CAAC;EACpD,MAAMK,QAAQ,GAAG,IAAIV,GAAG,CAAC,CAACQ,WAAW,IAAI,EAAE,EAAEP,GAAG,CAAEU,CAAC,IAAK,CAACA,CAAC,CAACR,EAAE,CAACC,QAAQ,CAAC,CAAC,EAAEO,CAAC,CAAC,CAAC,CAAC;EAE9E,MAAMC,iBAAiB,GAAG,IAAIZ,GAAG,CAACT,oBAAoB,CAACU,GAAG,CAAEY,CAAC,IAAK,CAACA,CAAC,CAACV,EAAE,CAACC,QAAQ,CAAC,CAAC,EAAES,CAAC,CAAC,CAAC,CAAC;EAExF,MAAMC,KAAK,GAAG,IAAAC,iBAAO,EACnBzB,UAAU,CAACW,GAAG,CAAEe,SAAS,IAAK;IAC5B,IAAIA,SAAS,CAACC,WAAW,EAAEC,WAAW,EAAE,OAAO,IAAI;IAEnD,MAAMC,UAAU,GAAGP,iBAAiB,CAACjC,GAAG,CAACqC,SAAS,CAACb,EAAE,CAACC,QAAQ,CAAC,CAAC,CAAC;IACjE,IAAI,CAACe,UAAU,EAAE,OAAO,IAAI;IAE5B,MAAMC,UAAU,GAAGV,QAAQ,CAAC/B,GAAG,CAACqC,SAAS,CAACb,EAAE,CAACI,KAAK,CAAC;IACnD,MAAMA,KAAK,GACTa,UAAU,IACTC,iBAAO,CAACC,OAAO,CAACN,SAAS,CAACb,EAAE,CAACI,KAAK,CAAC,IAAI;MAAEJ,EAAE,EAAEkB,iBAAO,CAACE,UAAU,CAACP,SAAS,CAACb,EAAE,CAACI,KAAK;IAAE,CAAE,IACvFiB,SAAS;IAEX,OAAO;MAAER,SAAS;MAAES,mBAAmB,EAAEN,UAAU;MAAEZ,KAAK,EAAGA,KAAK,IAAI;QAAEJ,EAAE,EAAEI,KAAK,CAACJ;MAAG,CAAC,IAAKqB;IAAU,CAAC;EACxG,CAAC,CACH,CAAC;EAED,MAAM,CAACE,YAAY,CAAC,GAAG,IAAAC,iCAAe,EAAC,CAAC;EACxC,MAAMC,WAAW,GAAIF,YAAY,CAAC/C,GAAG,CAAC,aAAa,CAAC,IAAY,YAAY;EAE5E,MAAM;IAAEkD,MAAM;IAAEC,SAAS;IAAEC,qBAAqB;IAAEC;EAAc,CAAC,GAAG,IAAAC,kDAAuB,EAACnB,KAAK,EAAEc,WAAW,CAAC;EAE/G,MAAMM,OAAO,GAAGC,cAAc,CAAC;IAAErC,cAAc;IAAEsC,WAAW,EAAExC;EAAU,CAAC,CAAC;EAE1E,oBACEnD,MAAA,GAAAwB,OAAA,CAAAwB,aAAA;IAAK4C,SAAS,EAAEC,kCAAM,CAACC;EAAU,gBAC/B9F,MAAA,GAAAwB,OAAA,CAAAwB,aAAA,CAAC5B,qBAAA,GAAA2E,oBAAoB;IAACZ,WAAW,EAAEA,WAAY;IAACG,qBAAqB,EAAEA,qBAAsB;IAACjB,KAAK,EAAEA;EAAM,CAAE,CAAC,EAE7GkB,aAAa,KAAK,CAAC,iBAAIvF,MAAA,GAAAwB,OAAA,CAAAwB,aAAA,CAAC3C,YAAA,GAAA4C,cAAc;IAACC,IAAI,EAAER,SAAS,CAACQ;EAAK,CAAE,CAAC,EAE/DkC,MAAM,CAAC5B,GAAG,CAAEwC,KAAK,iBAChBhG,MAAA,GAAAwB,OAAA,CAAAwB,aAAA;IAASiD,GAAG,EAAED,KAAK,CAAC9C,IAAK;IAAC0C,SAAS,EAAEC,kCAAM,CAACK;EAAI,GAC7Cb,SAAS,KAAK,MAAM,iBAAIrF,MAAA,GAAAwB,OAAA,CAAAwB,aAAA,CAAChC,UAAA,GAAAmF,EAAE;IAACP,SAAS,EAAEC,kCAAM,CAACO;EAAiB,GAAEJ,KAAK,CAACK,WAAgB,CAAC,eAEzFrG,MAAA,GAAAwB,OAAA,CAAAwB,aAAA,CAAC5C,kBAAA,GAAAkG,aAAa;IAACV,SAAS,EAAEC,kCAAM,CAACU;EAAS,GACvCP,KAAK,CAAC3B,KAAK,CAACb,GAAG,CAAEgD,IAAI,iBACpBxG,MAAA,GAAAwB,OAAA,CAAAwB,aAAA,CAAClC,aAAA,GAAA2F,sBAAsB;IACrBR,GAAG,EAAEO,IAAI,CAACjC,SAAS,CAACb,EAAE,CAACC,QAAQ,CAAC,CAAE;IAClCY,SAAS,EAAEiC,IAAI,CAACjC,SAAU;IAC1BS,mBAAmB,EAAEwB,IAAI,CAACxB,mBAAoB;IAC9ClB,KAAK,EAAE0C,IAAI,CAAC1C,KAAM;IAClB2B,OAAO,EAAEA,OAAQ;IACjBiB,sBAAsB,EAAEvD;EAAU,CACnC,CACF,CACY,CACR,CACV,CACE,CAAC;AAEV;AAEO,SAASuC,cAAcA,CAAC;EAC7BrC,cAAc;EACdsC;AAIF,CAAC,EAA0C;EACzC,MAAMgB,mBAAmB,GAAGC,gBAAK,CAACtD,OAAO,CAAC,MAAM;IAC9C,MAAMuD,YAAY,GAAGC,KAAK,CAACC,IAAI,CAAC1D,cAAc,CAAC2D,MAAM,CAAC,CAAC,CAAC,CACrDC,MAAM,CAAEC,IAAI,IAAKA,IAAI,CAACC,MAAM,EAAEC,GAAG,CAAC,CAClC5D,GAAG,CAAE0D,IAAI,IAAKA,IAAI,CAACC,MAAM,EAAEC,GAAG,CAAC,CAC/BC,IAAI,CAAC,GAAG,CAAC;IACZ,OAAOR,YAAY;EACrB,CAAC,EAAE,CAACxD,cAAc,CAAC,CAAC;EAEpB,MAAMoC,OAAO,GAAGmB,gBAAK,CAACtD,OAAO,CAC3B,MAAM,CACJ;IACEgE,OAAO,EAAE,SAASC,OAAOA,CAAC;MAAEhD,SAAS;MAAEiD;IAAkB,CAAC,EAAE;MAC1D,MAAMC,SAAS,GAAGpE,cAAc,CAACnB,GAAG,CAACqC,SAAS,CAACb,EAAE,CAACC,QAAQ,CAAC,CAAC,CAAC;MAC7D,IAAI,CAAC8D,SAAS,EAAE,OAAO,IAAI;MAC3B,oBACEzH,MAAA,GAAAwB,OAAA,CAAAwB,aAAA,CAAC1C,UAAA,GAAAoH,kBAAkB;QACjB1C,mBAAmB,EAAET,SAAU;QAC/BA,SAAS,EAAEkD,SAAU;QACrBD,iBAAiB,EAAE7B,WAAW,IAAI6B;MAAkB,CACrD,CAAC;IAEN;EACF,CAAC,EACD;IACEG,kBAAkB,EAAE,SAASC,kBAAkBA,CAAC;MAAErD;IAAU,CAAC,EAAE;MAC7D,MAAMsD,GAAG,GAAGtD,SAAS,CAACrC,GAAG,CAAC,mBAAmB,CAAC;MAC9C,MAAM4F,cAAc,GAAGD,GAAG,EAAEnE,EAAE,GAAGqE,0BAAW,CAACjD,UAAU,CAAC+C,GAAG,EAAEnE,EAAE,CAAC,GAAGqB,SAAS;MAE5E,oBACE/E,MAAA,GAAAwB,OAAA,CAAAwB,aAAA;QAAK4C,SAAS,EAAEC,kCAAM,CAACmC;MAAoB,gBACzChI,MAAA,GAAAwB,OAAA,CAAAwB,aAAA;QAAK4C,SAAS,EAAEC,kCAAM,CAACoC;MAAM,gBAC3BjI,MAAA,GAAAwB,OAAA,CAAAwB,aAAA,CAACzC,SAAA,GAAA2H,OAAO;QAACC,KAAK,EAAE,GAAI;QAACC,OAAO,EAAEN,cAAc,EAAE5E;MAAK,gBACjDlD,MAAA,GAAAwB,OAAA,CAAAwB,aAAA;QAAKqF,GAAG,EAAER,GAAG,EAAES,IAAK;QAAC1C,SAAS,EAAEC,kCAAM,CAAC0C;MAAQ,CAAE,CAC1C,CACN,CACF,CAAC;IAEV;EACF,CAAC,EACD,KAAIC,wBAAU,EAAC,CAAC,CACjB,EACD,CAACnF,cAAc,CAACoF,IAAI,EAAE9B,mBAAmB,EAAEhB,WAAW,CACxD,CAAC;EAED,OAAOF,OAAO;AAChB","ignoreList":[]}

package/dist/ui/workspace/workspace-overview/workspace-overview.module.scss

@@ -3,15 +3,11 @@
   overflow-y: auto;
   height: 100%;
   box-sizing: border-box;
+  z-index: 1;
 }
 
 .rightPreviewPlugins {
-  // background-color: var(--surface-color);
   display: flex;
-  // box-shadow: 0px 2px 48px rgb(0 0 0 / 89%);
-  // box-shadow: 0px 2px 160px rgb(0 0 0 / 52%);
-  // border-radius: 8px;
-  // padding: 4px;
   align-items: flex-end;
   justify-content: flex-end;
   width: 100%;
@@ -19,10 +15,7 @@
 }
 
 .envIcon {
-  // padding-right: 4px;
-  // height: 24px;
   height: 14px;
-  // padding-top: 2px;
 }
 
 .badge {
@@ -37,12 +30,173 @@
 }
 
 .cardGrid {
-  grid-column-gap: 10px;
-  grid-gap: 32px 24px;
-  -moz-column-gap: 10px;
-  column-gap: 10px;
   display: grid;
   gap: 32px 24px;
   grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
   max-width: 1280px;
+  grid-column-gap: 28px;
+  grid-row-gap: 32px;
+}
+
+.filterPanel {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 24px;
+  position: relative;
+  z-index: 100000;
+}
+
+.aggButtons {
+  display: inline-flex;
+  background: var(--surface-1-color);
+  border: 1px solid var(--border-medium-color);
+  border-radius: 8px;
+  padding: 2px;
+  height: 34px;
+}
+
+.aggButton,
+.aggActive {
+  padding: 4px 12px;
+  font-size: 14px;
+  border-radius: 6px;
+  background: transparent;
+  cursor: pointer;
+  border: none;
+  display: flex;
+  align-items: center;
+}
+
+.aggButton:hover {
+  background: var(--surface-hover-color);
+}
+
+.aggActive {
+  background: var(--brand-primary-color);
+  color: white;
+}
+
+.dropdownList {
+  max-height: 260px;
+  overflow-y: auto;
+  padding: 0 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.dropdownItem {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.dropdownItem input {
+  width: 16px;
+  height: 16px;
+}
+
+.count {
+  opacity: 0.55;
+}
+
+.agg {
+  margin-bottom: 28px;
+}
+
+.aggregationTitle {
+  margin-top: 0;
+  margin-bottom: 15px;
+}
+
+:global(.componentGrid) {
+  grid-row-gap: 24px !important;
+  grid-column-gap: 16px !important;
+}
+
+.filterPanel :global(.baseFilter) {
+  max-width: 220px;
+  height: 32px;
+}
+
+.filterPanel :global(.control) {
+  border-radius: 8px !important;
+  height: 32px;
+  padding: 0 10px !important;
+}
+
+.filterPanel :global(.menu) {
+  z-index: 200000 !important;
+  border-radius: 8px !important;
+  padding: 8px 0 !important;
+}
+
+.filterDropdown :global(.baseFilter) {
+  height: 32px;
+  max-width: 240px;
+  font-size: 14px;
+}
+
+.filterDropdown :global(.baseFilter .control) {
+  padding: 8px 12px;
+  border-radius: 8px;
+}
+
+.filterDropdown :global(.menu) {
+  margin-top: 10px;
+  padding: 12px 0;
+  min-width: 260px;
+  border-radius: 12px;
+
+  box-shadow: var(--bit-shadow-hover-low, 0 2px 8px rgba(0, 0, 0, 0.1));
+  border: 1px solid var(--border-medium-color, #ededed);
+}
+
+.filterDropdown :global(.checkboxContainer) {
+  padding-left: 14px;
+}
+
+.filterDropdown :global(.checkbox) {
+  margin-right: 12px;
+  accent-color: var(--bit-accent-color, #6c5ce7);
+}
+
+.filterDropdown :global(.buttonsSection) {
+  padding: 12px 16px;
+  border-top: 1px solid var(--border-medium-color, #ededed);
+}
+
+.filterDropdown :global(.placeholder > span:not(:first-child)) {
+  margin-left: 8px;
+}
+
+.filterPanel {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 24px;
+  gap: 16px;
+}
+
+.leftFilters {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.rightAggToggle {
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+}
+
+.cardGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
+  grid-row-gap: 32px;
+  grid-column-gap: 24px;
+  max-width: 1280px;
 }

package/dist/ui/workspace/workspace-overview/workspace-overview.sort.d.ts

@@ -0,0 +1 @@
+export declare function sortNamespacesAdvanced(arr: string[]): string[];

package/dist/ui/workspace/workspace-overview/workspace-overview.sort.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sortNamespacesAdvanced = sortNamespacesAdvanced;
+const PRIORITY_HIGH = ['ui', 'pages'];
+const PRIORITY_MED = ['design'];
+const PRIORITY_LOW = ['entities', 'provider', 'hooks', 'icons'];
+function root(ns) {
+  if (!ns) return '';
+  return ns.split('/')[0];
+}
+function priorityOf(ns) {
+  const r = root(ns);
+  if (PRIORITY_HIGH.includes(r)) return 0;
+  if (PRIORITY_MED.includes(r)) return 1;
+  if (PRIORITY_LOW.includes(r)) return 3;
+  return 2;
+}
+function sortNamespacesAdvanced(arr) {
+  return [...arr].sort((a, b) => {
+    const pa = priorityOf(a);
+    const pb = priorityOf(b);
+    if (pa !== pb) return pa - pb;
+    return a.localeCompare(b);
+  });
+}
+
+//# sourceMappingURL=workspace-overview.sort.js.map

package/dist/ui/workspace/workspace-overview/workspace-overview.sort.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["PRIORITY_HIGH","PRIORITY_MED","PRIORITY_LOW","root","ns","split","priorityOf","r","includes","sortNamespacesAdvanced","arr","sort","a","b","pa","pb","localeCompare"],"sources":["workspace-overview.sort.ts"],"sourcesContent":["const PRIORITY_HIGH = ['ui', 'pages'];\nconst PRIORITY_MED = ['design'];\nconst PRIORITY_LOW = ['entities', 'provider', 'hooks', 'icons'];\n\nfunction root(ns: string) {\n  if (!ns) return '';\n  return ns.split('/')[0];\n}\n\nfunction priorityOf(ns: string) {\n  const r = root(ns);\n\n  if (PRIORITY_HIGH.includes(r)) return 0;\n  if (PRIORITY_MED.includes(r)) return 1;\n  if (PRIORITY_LOW.includes(r)) return 3;\n\n  return 2;\n}\n\nexport function sortNamespacesAdvanced(arr: string[]) {\n  return [...arr].sort((a, b) => {\n    const pa = priorityOf(a);\n    const pb = priorityOf(b);\n\n    if (pa !== pb) return pa - pb;\n\n    return a.localeCompare(b);\n  });\n}\n"],"mappings":";;;;;;AAAA,MAAMA,aAAa,GAAG,CAAC,IAAI,EAAE,OAAO,CAAC;AACrC,MAAMC,YAAY,GAAG,CAAC,QAAQ,CAAC;AAC/B,MAAMC,YAAY,GAAG,CAAC,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,CAAC;AAE/D,SAASC,IAAIA,CAACC,EAAU,EAAE;EACxB,IAAI,CAACA,EAAE,EAAE,OAAO,EAAE;EAClB,OAAOA,EAAE,CAACC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;AACzB;AAEA,SAASC,UAAUA,CAACF,EAAU,EAAE;EAC9B,MAAMG,CAAC,GAAGJ,IAAI,CAACC,EAAE,CAAC;EAElB,IAAIJ,aAAa,CAACQ,QAAQ,CAACD,CAAC,CAAC,EAAE,OAAO,CAAC;EACvC,IAAIN,YAAY,CAACO,QAAQ,CAACD,CAAC,CAAC,EAAE,OAAO,CAAC;EACtC,IAAIL,YAAY,CAACM,QAAQ,CAACD,CAAC,CAAC,EAAE,OAAO,CAAC;EAEtC,OAAO,CAAC;AACV;AAEO,SAASE,sBAAsBA,CAACC,GAAa,EAAE;EACpD,OAAO,CAAC,GAAGA,GAAG,CAAC,CAACC,IAAI,CAAC,CAACC,CAAC,EAAEC,CAAC,KAAK;IAC7B,MAAMC,EAAE,GAAGR,UAAU,CAACM,CAAC,CAAC;IACxB,MAAMG,EAAE,GAAGT,UAAU,CAACO,CAAC,CAAC;IAExB,IAAIC,EAAE,KAAKC,EAAE,EAAE,OAAOD,EAAE,GAAGC,EAAE;IAE7B,OAAOH,CAAC,CAACI,aAAa,CAACH,CAAC,CAAC;EAC3B,CAAC,CAAC;AACJ","ignoreList":[]}

package/dist/ui/workspace/workspace-overview/workspace-overview.types.d.ts

@@ -0,0 +1,22 @@
+import type { ComponentModel } from '@teambit/component';
+import type { ComponentDescriptor } from '@teambit/component-descriptor';
+import type { ScopeID } from '@teambit/scopes.scope-id';
+export interface WorkspaceItem {
+    component: ComponentModel;
+    componentDescriptor: ComponentDescriptor;
+    scope?: {
+        id: ScopeID;
+    };
+}
+export type AggregationType = 'namespaces' | 'scopes' | 'none';
+export interface AggregationGroup {
+    name: string;
+    displayName: string;
+    items: WorkspaceItem[];
+}
+export interface AggregationResult {
+    groups: AggregationGroup[];
+    groupType: AggregationType;
+    availableAggregations: AggregationType[];
+    filteredCount: number;
+}

package/dist/ui/workspace/workspace-overview/workspace-overview.types.js

@@ -0,0 +1,3 @@
+"use strict";
+
+//# sourceMappingURL=workspace-overview.types.js.map

package/dist/ui/workspace/workspace-overview/workspace-overview.types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["workspace-overview.types.ts"],"sourcesContent":["import type { ComponentModel } from '@teambit/component';\nimport type { ComponentDescriptor } from '@teambit/component-descriptor';\nimport type { ScopeID } from '@teambit/scopes.scope-id';\n\nexport interface WorkspaceItem {\n  component: ComponentModel;\n  componentDescriptor: ComponentDescriptor;\n  scope?: { id: ScopeID };\n}\n\nexport type AggregationType = 'namespaces' | 'scopes' | 'none';\n\nexport interface AggregationGroup {\n  name: string;\n  displayName: string;\n  items: WorkspaceItem[];\n}\n\nexport interface AggregationResult {\n  groups: AggregationGroup[];\n  groupType: AggregationType;\n  availableAggregations: AggregationType[];\n  filteredCount: number;\n}\n"],"mappings":"","ignoreList":[]}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/workspace",
-  "version": "1.0.843",
+  "version": "1.0.845",
   "homepage": "https://bit.cloud/teambit/workspace/workspace",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.workspace",
     "name": "workspace",
-    "version": "1.0.843"
+    "version": "1.0.845"
   },
   "dependencies": {
     "lodash": "4.17.21",
@@ -94,7 +94,10 @@
     "@teambit/workspace.hooks.use-navigation-message-listener": "0.0.1",
     "@teambit/workspace.hooks.use-url-change-broadcaster": "0.0.1",
     "@teambit/workspace.ui.preserve-workspace-mode": "0.0.2",
+    "@teambit/component.filters.base-filter": "0.0.6",
+    "@teambit/design.inputs.toggle-button": "0.0.13",
     "@teambit/cloud.hooks.use-cloud-scopes": "0.0.15",
+    "@teambit/design.ui.heading": "1.0.26",
     "@teambit/design.ui.tooltip": "0.0.382",
     "@teambit/explorer.ui.component-card": "0.0.51",
     "@teambit/explorer.ui.gallery.component-grid": "0.0.496",
@@ -102,23 +105,23 @@
     "@teambit/scopes.scope-id": "0.0.9",
     "@teambit/workspace.ui.empty-workspace": "0.0.509",
     "@teambit/workspace.ui.workspace-component-card": "0.0.565",
-    "@teambit/component": "1.0.843",
-    "@teambit/dependency-resolver": "1.0.843",
-    "@teambit/envs": "1.0.843",
-    "@teambit/objects": "0.0.350",
-    "@teambit/scope": "1.0.843",
-    "@teambit/graph": "1.0.843",
-    "@teambit/isolator": "1.0.843",
-    "@teambit/component-tree": "1.0.843",
-    "@teambit/watcher": "1.0.843",
-    "@teambit/aspect-loader": "1.0.843",
-    "@teambit/graphql": "1.0.843",
-    "@teambit/bundler": "1.0.843",
-    "@teambit/ui": "1.0.843",
-    "@teambit/command-bar": "1.0.843",
-    "@teambit/sidebar": "1.0.843",
-    "@teambit/pubsub": "1.0.843",
-    "@teambit/deprecation": "1.0.843"
+    "@teambit/component": "1.0.845",
+    "@teambit/dependency-resolver": "1.0.845",
+    "@teambit/envs": "1.0.845",
+    "@teambit/objects": "0.0.352",
+    "@teambit/scope": "1.0.845",
+    "@teambit/graph": "1.0.845",
+    "@teambit/isolator": "1.0.845",
+    "@teambit/component-tree": "1.0.845",
+    "@teambit/watcher": "1.0.845",
+    "@teambit/aspect-loader": "1.0.845",
+    "@teambit/graphql": "1.0.845",
+    "@teambit/bundler": "1.0.845",
+    "@teambit/ui": "1.0.845",
+    "@teambit/command-bar": "1.0.845",
+    "@teambit/sidebar": "1.0.845",
+    "@teambit/pubsub": "1.0.845",
+    "@teambit/deprecation": "1.0.845"
   },
   "devDependencies": {
     "@types/lodash": "4.14.165",

package/ui/workspace/workspace-overview/filter-utils.ts

@@ -0,0 +1,25 @@
+import type { WorkspaceItem } from './workspace-overview.types';
+
+export interface ActiveFilters {
+  namespaces: string[];
+  scopes: string[];
+}
+
+export function parseActiveFilters(search: URLSearchParams): ActiveFilters {
+  return {
+    namespaces: (search.get('ns') || '').split(',').filter(Boolean),
+    scopes: (search.get('scopes') || '').split(',').filter(Boolean),
+  };
+}
+
+export function filterItems(items: WorkspaceItem[], filters: ActiveFilters): WorkspaceItem[] {
+  return items.filter((item) => {
+    const ns = item.component.id.namespace || '/';
+    const sc = item.component.id.scope;
+
+    if (filters.namespaces.length && !filters.namespaces.includes(ns)) return false;
+    if (filters.scopes.length && !filters.scopes.includes(sc)) return false;
+
+    return true;
+  });
+}

package/ui/workspace/workspace-overview/namespace-sort.ts

@@ -0,0 +1,41 @@
+import type { WorkspaceItem } from './workspace-overview.types';
+
+export const PRIORITY_HIGH = ['ui', 'pages'] as string[];
+export const PRIORITY_MED = ['design'] as string[];
+export const PRIORITY_LOW = ['entities', 'provider', 'hooks', 'icons'] as string[];
+
+export function getRootNamespace(ns: string): string {
+  if (!ns) return '';
+  return ns.split('/')[0]!;
+}
+
+export function namespacePriority(ns: string): number {
+  const root = getRootNamespace(ns);
+
+  if (PRIORITY_HIGH.includes(root)) return 0;
+  if (PRIORITY_MED.includes(root)) return 1;
+  if (PRIORITY_LOW.includes(root)) return 3;
+  return 2;
+}
+
+export function sortNamespacesAdvanced(list: string[]): string[] {
+  return [...list].sort((a, b) => {
+    const pa = namespacePriority(a);
+    const pb = namespacePriority(b);
+    if (pa !== pb) return pa - pb;
+    return a.localeCompare(b);
+  });
+}
+
+export function sortItemsByNamespace(items: WorkspaceItem[]): WorkspaceItem[] {
+  return [...items].sort((a, b) => {
+    const na = a.component.id.namespace || '/';
+    const nb = b.component.id.namespace || '/';
+
+    const pa = namespacePriority(na);
+    const pb = namespacePriority(nb);
+    if (pa !== pb) return pa - pb;
+
+    return a.component.id.name.localeCompare(b.component.id.name);
+  });
+}

package/ui/workspace/workspace-overview/scope-sort.ts

@@ -0,0 +1,9 @@
+export function sortScopes(scopes: string[]) {
+  const designPrefix = 'design';
+
+  const nonDesign = scopes.filter((s) => !s.includes(designPrefix)).sort((a, b) => a.localeCompare(b));
+
+  const design = scopes.filter((s) => s.includes(designPrefix)).sort((a, b) => a.localeCompare(b));
+
+  return [...nonDesign, ...design];
+}

package/ui/workspace/workspace-overview/use-workspace-aggregation.ts

@@ -0,0 +1,72 @@
+import { useMemo } from 'react';
+import { sortNamespacesAdvanced, sortItemsByNamespace } from './namespace-sort';
+import { filterItems, parseActiveFilters } from './filter-utils';
+import type { WorkspaceItem, AggregationType, AggregationGroup, AggregationResult } from './workspace-overview.types';
+
+export function useWorkspaceAggregation(items: WorkspaceItem[], aggregation: AggregationType): AggregationResult {
+  const search = new URLSearchParams(window.location.search);
+  const filters = parseActiveFilters(search);
+
+  const filtered = useMemo(() => filterItems(items, filters), [items, filters]);
+
+  if (aggregation === 'none') {
+    return {
+      groups: [
+        {
+          name: 'all',
+          displayName: '',
+          items: sortItemsByNamespace(filtered),
+        },
+      ],
+      groupType: 'none',
+      availableAggregations: ['namespaces', 'scopes', 'none'],
+      filteredCount: filtered.length,
+    };
+  }
+
+  if (aggregation === 'namespaces') {
+    const map = new Map<string, WorkspaceItem[]>();
+    for (const item of filtered) {
+      const ns = item.component.id.namespace || '/';
+      if (!map.has(ns)) map.set(ns, []);
+      map.get(ns)!.push(item);
+    }
+
+    const sortedKeys = sortNamespacesAdvanced([...map.keys()]);
+
+    const groups: AggregationGroup[] = sortedKeys.map((ns) => ({
+      name: ns,
+      displayName: ns,
+      items: sortItemsByNamespace(map.get(ns)!),
+    }));
+
+    return {
+      groups,
+      groupType: 'namespaces',
+      availableAggregations: ['namespaces', 'scopes', 'none'],
+      filteredCount: filtered.length,
+    };
+  }
+
+  const map = new Map<string, WorkspaceItem[]>();
+  for (const item of filtered) {
+    const scope = item.component.id.scope;
+    if (!map.has(scope)) map.set(scope, []);
+    map.get(scope)!.push(item);
+  }
+
+  const sortedScopes = [...map.keys()].sort();
+
+  const groups: AggregationGroup[] = sortedScopes.map((sc) => ({
+    name: sc,
+    displayName: sc,
+    items: sortItemsByNamespace(map.get(sc)!),
+  }));
+
+  return {
+    groups,
+    groupType: 'scopes',
+    availableAggregations: ['namespaces', 'scopes', 'none'],
+    filteredCount: filtered.length,
+  };
+}