@teambit/workspace 1.0.983 → 1.0.984

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

@@ -1,211 +1,91 @@
 @import '@teambit/ui-foundation.ui.constants.z-indexes/z-indexes.module.scss';
 
 .container {
-  padding: 24px 5% 150px 5%;
   overflow-y: auto;
   height: 100%;
   box-sizing: border-box;
   z-index: 1;
 }
 
-.rightPreviewPlugins {
-  display: flex;
-  align-items: flex-end;
-  justify-content: flex-end;
-  width: 100%;
-  height: 100%;
-}
-
-.envIcon {
-  height: 14px;
+.content {
+  padding: 20px 40px 80px;
 }
 
-.badge {
-  background-color: var(--surface-color);
-  padding: 4px;
-  height: 15px;
-  margin-right: 4px;
-  z-index: $nav-z-index;
-  border-radius: 8px;
-  margin-bottom: 4px;
-  box-shadow: 0px 2px 18px rgb(0 0 0 / 10%);
-}
-
-.cardGrid {
-  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;
-}
+/* ---- Command bar ---- */
 
-.filterPanel {
+.commandBar {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 24px;
-  position: relative;
+  gap: 12px;
+  flex-wrap: wrap;
+  padding: 12px 40px;
+  background: color-mix(in srgb, var(--bit-accent-color, #6c5ce7) 3%, var(--background-color, #fff));
+  border-bottom: 1px solid var(--border-medium-color);
+  position: sticky;
+  top: 0;
   z-index: $modal-z-index - 1;
 }
 
-.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;
+.leftCluster {
   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;
+  flex-wrap: wrap;
 }
 
-.dropdownItem {
+.rightCluster {
   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;
+  margin-left: auto;
 }
 
-.aggregationTitle {
-  margin-top: 0;
-  margin-bottom: 15px;
+.aggToggle {
+  height: 32px !important;
+  font-size: 12.5px;
+  --surface02-color: color-mix(in srgb, var(--bit-accent-color, #6c5ce7) 20%, var(--surface-color, #f5f5f5));
 }
 
-:global(.componentGrid) {
-  grid-row-gap: 24px !important;
-  grid-column-gap: 16px !important;
-}
+/* ---- Base filter overrides ---- */
 
-.filterPanel :global(.baseFilter) {
+.commandBar :global(.baseFilter) {
   max-width: 220px;
   height: 32px;
 }
 
-.filterPanel :global(.control) {
+.commandBar :global(.control) {
   border-radius: 8px !important;
   height: 32px;
   padding: 0 10px !important;
 }
 
-.filterPanel :global(.menu) {
+.commandBar :global(.menu) {
   z-index: $modal-z-index - 1 !important;
-  border-radius: 8px !important;
+  border-radius: 14px !important;
   padding: 8px 0 !important;
+  width: 260px;
+  box-shadow: 0 24px 60px -12px rgba(20, 0, 104, 0.2);
 }
 
-.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;
-}
+/* ---- Section ---- */
 
-.filterPanel {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 24px;
-  gap: 16px;
-}
-
-.leftFilters {
-  display: flex;
-  gap: 12px;
-  align-items: center;
+.section {
+  margin-bottom: 40px;
 }
 
-.rightAggToggle {
-  display: flex;
-  align-items: center;
-  margin-left: auto;
-  height: 32px;
-  font-size: 14px;
+.sectionHeader {
+  position: sticky;
+  top: 57px;
+  z-index: $nav-z-index;
+  background: var(--background-color);
+  padding: 12px 0 18px;
 }
 
-.toggleBtn {
-  height: 32px !important;
-  font-size: 14px;
-}
+/* ---- Card grid ---- */
 
 .cardGrid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
-  grid-row-gap: 32px;
-  grid-column-gap: 24px;
-  max-width: 1280px;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 14px;
 }

package/ui/workspace/workspace-overview/workspace-overview.tsx

@@ -1,21 +1,15 @@
 import React, { useContext, useMemo } from 'react';
 import { ComponentGrid } from '@teambit/explorer.ui.gallery.component-grid';
 import { EmptyWorkspace } from '@teambit/workspace.ui.empty-workspace';
-import { PreviewPlaceholder } from '@teambit/preview.ui.preview-placeholder';
-import { Tooltip } from '@teambit/design.ui.tooltip';
-import { ComponentID } from '@teambit/component-id';
-import type { ComponentModel } from '@teambit/component';
 import compact from 'lodash.compact';
 import { ScopeID } from '@teambit/scopes.scope-id';
 import { useCloudScopes } from '@teambit/cloud.hooks.use-cloud-scopes';
-import { WorkspaceComponentCard } from '@teambit/workspace.ui.workspace-component-card';
-import type { ComponentCardPluginType, PluginProps } from '@teambit/explorer.ui.component-card';
 import { useWorkspaceMode } from '@teambit/workspace.ui.use-workspace-mode';
-import { H3 } from '@teambit/design.ui.heading';
 import { WorkspaceContext } from '../workspace-context';
-import { LinkPlugin } from './link-plugin';
 import { useWorkspaceAggregation } from './use-workspace-aggregation';
 import { useQueryParamWithDefault, useListParamWithDefault } from './use-query-param-with-default';
+import { NamespaceHeader } from './namespace-header';
+import { HopeComponentCard } from './hope-component-card';
 import type { AggregationType } from './workspace-overview.types';
 import { WorkspaceFilterPanel } from './workspace-filter-panel';
 import styles from './workspace-overview.module.scss';
@@ -27,8 +21,6 @@ export function WorkspaceOverview() {
   if (!components.length) return <EmptyWorkspace name={workspace.name} />;
 
   const { isMinimal } = useWorkspaceMode();
-  const compModelsById = useMemo(() => new Map(components.map((c) => [c.id.toString(), c])), [components]);
-
   const uniqueScopes = [...new Set(components.map((c) => c.id.scope))];
   const { cloudScopes } = useCloudScopes(uniqueScopes);
   const cloudMap = new Map((cloudScopes || []).map((s) => [s.id.toString(), s]));
@@ -48,7 +40,13 @@ export function WorkspaceOverview() {
         (ScopeID.isValid(component.id.scope) && { id: ScopeID.fromString(component.id.scope) }) ||
         undefined;
 
-      return { component, componentDescriptor: descriptor, scope: (scope && { id: scope.id }) || undefined };
+      return {
+        component,
+        componentDescriptor: descriptor,
+        scope: scope
+          ? { id: scope.id, icon: (scope as any).icon, backgroundIconColor: (scope as any).backgroundIconColor }
+          : undefined,
+      };
     })
   );
 
@@ -57,7 +55,7 @@ export function WorkspaceOverview() {
   const [activeScopes, setActiveScopes] = useListParamWithDefault('scopes');
 
   const filters = useMemo(
-    () => ({ namespaces: activeNamespaces, scopes: activeScopes }),
+    () => ({ namespaces: activeNamespaces, scopes: activeScopes, statuses: new Set() as any }),
     [activeNamespaces, activeScopes]
   );
 
@@ -67,8 +65,6 @@ export function WorkspaceOverview() {
     filters
   );
 
-  const plugins = useCardPlugins({ compModelsById, showPreview: isMinimal });
-
   return (
     <div className={styles.container}>
       <WorkspaceFilterPanel
@@ -82,80 +78,36 @@ export function WorkspaceOverview() {
         onScopesChange={setActiveScopes}
       />
 
-      {filteredCount === 0 && <EmptyWorkspace name={workspace.name} />}
-
-      {groups.map((group) => (
-        <section key={group.name} className={styles.agg}>
-          {groupType !== 'none' && <H3 className={styles.aggregationTitle}>{group.displayName}</H3>}
-
-          <ComponentGrid className={styles.cardGrid}>
-            {group.items.map((item) => (
-              <WorkspaceComponentCard
-                key={item.component.id.toString()}
-                component={item.component}
-                componentDescriptor={item.componentDescriptor}
-                scope={item.scope}
-                plugins={plugins}
-                shouldShowPreviewState={isMinimal}
-              />
-            ))}
-          </ComponentGrid>
-        </section>
-      ))}
-    </div>
-  );
-}
-
-export function useCardPlugins({
-  compModelsById,
-  showPreview,
-}: {
-  compModelsById: Map<string, ComponentModel>;
-  showPreview?: boolean;
-}): ComponentCardPluginType<PluginProps>[] {
-  const serverUrlsSignature = React.useMemo(() => {
-    const serversCount = Array.from(compModelsById.values())
-      .filter((comp) => comp.server?.url)
-      .map((comp) => comp.server?.url)
-      .join(',');
-    return serversCount;
-  }, [compModelsById]);
-
-  const plugins = React.useMemo(
-    () => [
-      {
-        preview: function Preview({ component, shouldShowPreview }) {
-          const compModel = compModelsById.get(component.id.toString());
-          if (!compModel) return null;
-          return (
-            <PreviewPlaceholder
-              componentDescriptor={component}
-              component={compModel}
-              shouldShowPreview={showPreview || shouldShowPreview}
-            />
-          );
-        },
-      },
-      {
-        previewBottomRight: function PreviewBottomRight({ component }) {
-          const env = component.get('teambit.envs/envs');
-          const envComponentId = env?.id ? ComponentID.fromString(env?.id) : undefined;
-
-          return (
-            <div className={styles.rightPreviewPlugins}>
-              <div className={styles.badge}>
-                <Tooltip delay={300} content={envComponentId?.name}>
-                  <img src={env?.icon} className={styles.envIcon} />
-                </Tooltip>
+      <div className={styles.content}>
+        {filteredCount === 0 && <EmptyWorkspace name={workspace.name} />}
+
+        {groups.map((group) => (
+          <section key={group.name} className={styles.section}>
+            {groupType !== 'none' && (
+              <div className={styles.sectionHeader}>
+                <NamespaceHeader
+                  namespace={group.name}
+                  items={group.items}
+                  scopeIcon={group.scopeIcon}
+                  scopeIconColor={group.scopeIconColor}
+                />
               </div>
-            </div>
-          );
-        },
-      },
-      new LinkPlugin(),
-    ],
-    [compModelsById.size, serverUrlsSignature, showPreview]
+            )}
+
+            <ComponentGrid className={styles.cardGrid}>
+              {group.items.map((item) => (
+                <HopeComponentCard
+                  key={item.component.id.toString()}
+                  component={item.component}
+                  componentDescriptor={item.componentDescriptor}
+                  scope={item.scope as any}
+                  showPreview={isMinimal}
+                />
+              ))}
+            </ComponentGrid>
+          </section>
+        ))}
+      </div>
+    </div>
   );
-
-  return plugins;
 }

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

@@ -5,15 +5,21 @@ import type { ScopeID } from '@teambit/scopes.scope-id';
 export interface WorkspaceItem {
   component: ComponentModel;
   componentDescriptor: ComponentDescriptor;
-  scope?: { id: ScopeID };
+  scope?: { id: ScopeID; icon?: string; backgroundIconColor?: string };
 }
 
 export type AggregationType = 'namespaces' | 'scopes' | 'none';
 
+export type Density = 'compact' | 'comfy';
+
+export type ComponentStatus = 'built' | 'changed' | 'building' | 'queued';
+
 export interface AggregationGroup {
   name: string;
   displayName: string;
   items: WorkspaceItem[];
+  scopeIcon?: string;
+  scopeIconColor?: string;
 }
 
 export interface AggregationResult {

package/ui/workspace/workspace.module.scss

@@ -18,37 +18,20 @@
   }
 }
 
-.minimalCorner {
-  width: fit-content;
-  height: 46px !important;
-  background: var(--background-color, #ededed) !important;
-
-  &.dark {
-    --bit-border-color-lightest: #333333;
-    --bit-text-color-heavy: white;
-
-    > a > img {
-      filter: invert(1);
-    }
-  }
-
-  &.light {
-    --background-color: #ededed;
-  }
-
-  > a {
-    &[aria-current='page'] > img {
-      filter: invert(31%) sepia(75%) saturate(3183%) hue-rotate(235deg) brightness(99%) contrast(108%);
-    }
-
-    > img {
-      width: 22px;
-      height: 22px;
+.backButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  color: var(--on-background-color, var(--bit-text-color-heavy, #2b2b2b));
+  text-decoration: none;
+  transition: background 0.15s ease;
+  margin-left: 8px;
 
-      &:hover {
-        filter: invert(31%) sepia(75%) saturate(3183%) hue-rotate(235deg) brightness(99%) contrast(108%);
-      }
-    }
+  &:hover {
+    background: color-mix(in srgb, var(--on-background-color, #2b2b2b) 8%, transparent);
   }
 }
 
@@ -96,6 +79,28 @@
   flex-direction: column;
   overflow: hidden; // TODO
   height: 100vh;
+
+  @media (hover: hover) {
+    * {
+      &::-webkit-scrollbar {
+        width: 14px;
+      }
+
+      &::-webkit-scrollbar-track {
+        background: var(--background-color, #fff);
+      }
+
+      &::-webkit-scrollbar-thumb {
+        border: 5px solid var(--background-color, #fff);
+        background: var(--border-medium-color, #d0d0d0);
+        border-radius: 100vmax;
+      }
+
+      &::-webkit-scrollbar-thumb:hover {
+        background: var(--on-background-color, var(--bit-text-color-light, #999));
+      }
+    }
+  }
 }
 
 .topbar {
@@ -135,6 +140,9 @@
 
   &.minimal {
     height: 46px;
+    --bit-bg-heaviest: color-mix(in srgb, var(--bit-accent-color, #6c5ce7) 3%, var(--background-color, #fff));
+    --bit-border-color-lightest: var(--bit-bg-heaviest);
+    border-bottom: 1px solid var(--border-medium-color, #e6e6e6);
   }
 }
 

package/ui/workspace/workspace.tsx

@@ -86,6 +86,9 @@ export function Workspace({ routeSlot, menuSlot, sidebar, workspaceUI, onSidebar
 
   workspaceUI.setComponents(workspace.components);
   const inIframe = typeof window !== 'undefined' && window.parent && window.parent !== window;
+  const location = useLocation();
+  const isOverview = location.pathname === '/' || location.pathname === '';
+  const showTopBar = !isMinimal || (isMinimal && !isOverview);
 
   return (
     <WorkspaceProvider workspace={workspace}>
@@ -94,23 +97,37 @@ export function Workspace({ routeSlot, menuSlot, sidebar, workspaceUI, onSidebar
         <ThemeFromUrlSync />
         {isMinimal && inIframe && <MinimalModeUrlBroadcasterAndListener />}
         <div className={styles.workspaceWrapper}>
-          {
+          {showTopBar && (
             <TopBar
               className={classNames(styles.topbar, styles[themeName], isMinimal && styles.minimal)}
               Corner={() => (
                 <div className={classNames(isMinimal && styles.cornerWithBreadcrumb)}>
-                  <Corner
-                    className={classNames((isMinimal && styles.minimalCorner) || styles.corner, styles[themeName])}
-                    name={isMinimal ? '' : workspace.name}
-                    icon={isMinimal ? 'https://static.bit.dev/bit-icons/house.svg' : workspace.icon}
-                  />
+                  {isMinimal ? (
+                    <Link to="/" className={styles.backButton}>
+                      <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
+                        <path
+                          d="M11.25 13.5L6.75 9L11.25 4.5"
+                          stroke="currentColor"
+                          strokeWidth="1.5"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                        />
+                      </svg>
+                    </Link>
+                  ) : (
+                    <Corner
+                      className={classNames(styles.corner, styles[themeName])}
+                      name={workspace.name}
+                      icon={workspace.icon}
+                    />
+                  )}
                   {isMinimal && <WorkspaceBreadcrumb />}
                 </div>
               )}
               // @ts-ignore - getting an error of "Types have separate declarations of a private property 'registerFn'." for some reason after upgrading teambit.harmony/harmony from 0.4.6 to 0.4.7
               menu={menuSlot}
             />
-          }
+          )}
           <SplitPane className={styles.main} size={246} layout={sidebarOpenness}>
             <Pane className={classNames(styles.sidebar, styles[themeName], !isSidebarOpen && styles.closed)}>
               {sidebar}