@teambit/workspace 1.0.982 → 1.0.984

package/ui/workspace/workspace-overview/hope-component-card.module.scss

@@ -0,0 +1,162 @@
+.card {
+  position: relative;
+  border-radius: 10px;
+  overflow: hidden;
+  background: var(--surface-color);
+  border: 1px solid var(--border-medium-color);
+  cursor: pointer;
+  transition:
+    box-shadow 0.15s ease,
+    border-color 0.15s ease;
+
+  &:hover {
+    box-shadow: 0 4px 14px rgba(20, 0, 104, 0.06);
+  }
+}
+
+.cardBuilding {
+  composes: card;
+
+  &:hover {
+    box-shadow: none;
+  }
+}
+
+.linkWrapper {
+  text-decoration: none;
+  color: inherit;
+  display: block;
+}
+
+/* ---- Preview ---- */
+
+.preview {
+  height: 180px;
+  position: relative;
+  overflow: hidden;
+  background: white;
+  border-bottom: 1px solid var(--border-medium-color);
+}
+
+.previewQueued {
+  composes: preview;
+  background: var(--surface01-color);
+}
+
+.previewInner {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+}
+
+/* ---- Env badge ---- */
+
+.envBadge {
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+  background: var(--surface-color);
+  padding: 4px;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  z-index: 3;
+}
+
+.envIcon {
+  height: 14px;
+  display: block;
+}
+
+/* ---- Status corner ---- */
+
+.statusCorner {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 2;
+}
+
+/* ---- Footer ---- */
+
+.footer {
+  padding: 8px 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.name {
+  flex: 1;
+  min-width: 0;
+  font-size: 12.5px;
+  font-weight: 500;
+  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
+  color: var(--on-background-color);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  letter-spacing: -0.01em;
+}
+
+.nameQueued {
+  composes: name;
+  color: var(--on-background-medium-color);
+}
+
+.hash {
+  font-size: 10.5px;
+  padding: 1px 6px;
+  border-radius: 4px;
+  background: var(--surface01-color);
+  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
+  color: var(--on-background-low-color);
+  flex-shrink: 0;
+}
+
+.scopeBadge {
+  width: 20px;
+  height: 20px;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
+.scopeBadgeIcon {
+  width: 12px;
+  height: 12px;
+  object-fit: contain;
+  filter: brightness(0) invert(1);
+}
+
+.scopeBadgeInitial {
+  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
+  font-size: 10px;
+  font-weight: 700;
+  color: white;
+  line-height: 1;
+}
+
+.buildingLabel {
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  flex-shrink: 0;
+}
+
+/* ---- Load preview button ---- */
+
+.loadPreview {
+  position: absolute;
+  right: 4px !important;
+  left: unset !important;
+  z-index: 4;
+}

package/ui/workspace/workspace-overview/hope-component-card.tsx

@@ -0,0 +1,152 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Link } from '@teambit/base-react.navigation.link';
+import { PreviewPlaceholder } from '@teambit/preview.ui.preview-placeholder';
+import { Tooltip } from '@teambit/design.ui.tooltip';
+import { LoadPreview } from '@teambit/workspace.ui.load-preview';
+import { ComponentID } from '@teambit/component-id';
+import type { ComponentModel } from '@teambit/component';
+import type { ComponentDescriptor } from '@teambit/component-descriptor';
+import type { ScopeID } from '@teambit/scopes.scope-id';
+import { getComponentStatus } from './filter-utils';
+import { ChangedPill, BuildSpinner, BuildingPreview } from './card-overlays';
+import styles from './hope-component-card.module.scss';
+
+export type HopeComponentCardProps = {
+  component: ComponentModel;
+  componentDescriptor: ComponentDescriptor;
+  scope?: { id: ScopeID; icon?: string; backgroundIconColor?: string };
+  showPreview?: boolean;
+};
+
+export function HopeComponentCard({
+  component,
+  componentDescriptor,
+  scope,
+  showPreview: showPreviewProp,
+}: HopeComponentCardProps) {
+  const [shouldShowPreview, setShouldShowPreview] = useState(Boolean(showPreviewProp));
+  const prevServerUrlRef = useRef(component.server?.url);
+
+  useEffect(() => {
+    if (prevServerUrlRef.current !== component.server?.url && shouldShowPreview) {
+      setShouldShowPreview(false);
+      setTimeout(() => setShouldShowPreview(true), 50);
+    }
+    prevServerUrlRef.current = component.server?.url;
+  }, [component.server?.url]);
+
+  useEffect(() => {
+    setShouldShowPreview(Boolean(showPreviewProp));
+  }, [showPreviewProp]);
+
+  const item = { component } as any;
+  const status = getComponentStatus(item);
+  const accent = 'var(--bit-accent-color, #6c5ce7)';
+
+  const isBuilding = status === 'building';
+  const isQueued = status === 'queued';
+  const isChanged = status === 'changed';
+
+  const href = `${component.id.fullName}?scope=${component.id.scope}`;
+
+  const loadPreviewVisible = component.compositions.length > 0 && !isBuilding && !shouldShowPreview;
+
+  const showPreviewClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    e.preventDefault();
+    setShouldShowPreview(true);
+  };
+
+  const envAspect = componentDescriptor.get<any>('teambit.envs/envs');
+  const env = envAspect?.data || envAspect;
+  const envComponentId = env?.id ? ComponentID.fromString(env.id) : undefined;
+
+  const cardClass = isBuilding ? styles.cardBuilding : styles.card;
+  const buildingBorderStyle = isBuilding
+    ? {
+        borderColor: accent,
+        boxShadow: `0 0 0 3px color-mix(in srgb, var(--bit-accent-color, #6c5ce7) 10%, transparent)`,
+      }
+    : undefined;
+
+  const nameLabel = component.id.namespace ? `${component.id.namespace}/${component.id.name}` : component.id.name;
+
+  const shortHash = component.id.version?.slice(0, 7);
+
+  const scopeInitial = component.id.scope?.split('.').pop()?.charAt(0).toUpperCase();
+
+  return (
+    <div className={cardClass} style={buildingBorderStyle}>
+      {loadPreviewVisible && <LoadPreview className={styles.loadPreview} onClick={showPreviewClick} />}
+
+      <Link href={href} className={styles.linkWrapper}>
+        <div className={styles.preview}>
+          <div className={styles.previewInner}>
+            <CardPreview
+              component={component}
+              componentDescriptor={componentDescriptor}
+              status={status}
+              shouldShowPreview={shouldShowPreview}
+            />
+          </div>
+
+          {!isQueued && env?.icon && (
+            <div className={styles.envBadge}>
+              <Tooltip delay={300} content={envComponentId?.name}>
+                <img src={env.icon} className={styles.envIcon} alt="" />
+              </Tooltip>
+            </div>
+          )}
+
+          {(isChanged || isBuilding) && (
+            <div className={styles.statusCorner}>
+              {isChanged && <ChangedPill />}
+              {isBuilding && <BuildSpinner />}
+            </div>
+          )}
+        </div>
+
+        <div className={styles.footer}>
+          <Tooltip delay={300} content={component.id.scope}>
+            <div className={styles.scopeBadge} style={{ background: scope?.backgroundIconColor || accent }}>
+              {scope?.icon ? (
+                <img src={scope.icon} className={styles.scopeBadgeIcon} alt="" />
+              ) : (
+                <span className={styles.scopeBadgeInitial}>{scopeInitial}</span>
+              )}
+            </div>
+          </Tooltip>
+          <span className={styles.name}>{nameLabel}</span>
+          {!isBuilding && !isQueued && shortHash && <span className={styles.hash}>{shortHash}</span>}
+          {isBuilding && (
+            <span className={styles.buildingLabel} style={{ color: accent }}>
+              BUILDING
+            </span>
+          )}
+        </div>
+      </Link>
+    </div>
+  );
+}
+
+function CardPreview({
+  component,
+  componentDescriptor,
+  status,
+  shouldShowPreview,
+}: {
+  component: ComponentModel;
+  componentDescriptor: ComponentDescriptor;
+  status: string;
+  shouldShowPreview: boolean;
+}) {
+  if (status === 'building') return <BuildingPreview />;
+
+  return (
+    <PreviewPlaceholder
+      component={component}
+      componentDescriptor={componentDescriptor}
+      shouldShowPreview={shouldShowPreview}
+    />
+  );
+}

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

@@ -0,0 +1,88 @@
+.header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 3px;
+  flex-shrink: 0;
+}
+
+.name {
+  font-size: 20px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: var(--on-background-color);
+  flex-shrink: 0;
+}
+
+.count {
+  font-size: 12px;
+  color: var(--on-background-low-color);
+  flex-shrink: 0;
+}
+
+.buildingPill {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 10.5px;
+  font-weight: 500;
+  padding: 1px 8px;
+  border-radius: 999px;
+  margin-left: 4px;
+  flex-shrink: 0;
+}
+
+.buildingDot {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  animation: pulse 1.4s ease-in-out infinite;
+}
+
+.scopeIconBadge {
+  width: 24px;
+  height: 24px;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
+.scopeIconImg {
+  width: 14px;
+  height: 14px;
+  object-fit: contain;
+  filter: brightness(0) invert(1);
+}
+
+.scopeInitial {
+  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
+  font-size: 11px;
+  font-weight: 700;
+  color: white;
+  line-height: 1;
+}
+
+.divider {
+  flex: 1;
+  height: 1px;
+  background: var(--border-medium-color);
+  margin-left: 4px;
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.55;
+  }
+}

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

@@ -0,0 +1,72 @@
+import React from 'react';
+import { getComponentStatus } from './filter-utils';
+import type { WorkspaceItem } from './workspace-overview.types';
+import styles from './namespace-header.module.scss';
+
+export interface NamespaceHeaderProps {
+  namespace: string;
+  items: WorkspaceItem[];
+  scopeIcon?: string;
+  scopeIconColor?: string;
+}
+
+export function NamespaceHeader({ namespace, items, scopeIcon, scopeIconColor }: NamespaceHeaderProps) {
+  const accent = 'var(--bit-accent-color, #6c5ce7)';
+  const tint = 'color-mix(in srgb, var(--bit-accent-color, #6c5ce7) 12%, transparent)';
+
+  let buildingCount = 0;
+  let readyCount = 0;
+  for (const item of items) {
+    const s = getComponentStatus(item);
+    if (s === 'building') buildingCount++;
+    if (s === 'built' || s === 'changed') readyCount++;
+  }
+
+  return (
+    <header className={styles.header}>
+      <HeaderIcon scopeIcon={scopeIcon} scopeIconColor={scopeIconColor} namespace={namespace} accent={accent} />
+      <span className={styles.name}>{namespace}</span>
+      <span className={styles.count}>
+        {readyCount}/{items.length}
+      </span>
+      {buildingCount > 0 && (
+        <span className={styles.buildingPill} style={{ color: accent, background: tint }}>
+          <span className={styles.buildingDot} style={{ background: accent }} />
+          building
+        </span>
+      )}
+      <div className={styles.divider} />
+    </header>
+  );
+}
+
+function HeaderIcon({
+  scopeIcon,
+  scopeIconColor,
+  namespace,
+  accent,
+}: {
+  scopeIcon?: string;
+  scopeIconColor?: string;
+  namespace: string;
+  accent: string;
+}) {
+  if (scopeIcon) {
+    return (
+      <div className={styles.scopeIconBadge} style={{ background: scopeIconColor || accent }}>
+        <img src={scopeIcon} className={styles.scopeIconImg} alt="" />
+      </div>
+    );
+  }
+
+  if (scopeIconColor) {
+    const initial = namespace.split(/[./]/).pop()?.charAt(0).toUpperCase() || '?';
+    return (
+      <div className={styles.scopeIconBadge} style={{ background: scopeIconColor }}>
+        <span className={styles.scopeInitial}>{initial}</span>
+      </div>
+    );
+  }
+
+  return <span className={styles.dot} style={{ background: accent }} />;
+}

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

@@ -58,11 +58,17 @@ export function useWorkspaceAggregation(
 
   const sortedScopes = [...map.keys()].sort();
 
-  const groups: AggregationGroup[] = sortedScopes.map((sc) => ({
-    name: sc,
-    displayName: sc,
-    items: sortItemsByNamespace(map.get(sc)!),
-  }));
+  const groups: AggregationGroup[] = sortedScopes.map((sc) => {
+    const groupItems = map.get(sc)!;
+    const sampleScope = groupItems.find((i) => i.scope?.icon)?.scope;
+    return {
+      name: sc,
+      displayName: sc,
+      items: sortItemsByNamespace(groupItems),
+      scopeIcon: sampleScope?.icon,
+      scopeIconColor: sampleScope?.backgroundIconColor,
+    };
+  });
 
   return {
     groups,

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

@@ -50,13 +50,15 @@ export function WorkspaceFilterPanel({
   const activeNsOptions = activeNamespaces.map((v) => ({ value: v }));
   const activeScopeOptions = activeScopes.map((v) => ({ value: v }));
 
-  const applyNs = (opts) => {
-    const list = opts.map((o) => o.value).filter((v): v is string => typeof v === 'string');
+  const applyNs = (opts: readonly { value?: string }[] | { value?: string } | null) => {
+    const arr = Array.isArray(opts) ? opts : opts ? [opts] : [];
+    const list = arr.map((o) => o.value).filter((v): v is string => typeof v === 'string');
     onNamespacesChange(list);
   };
 
-  const applyScopes = (opts) => {
-    const list = opts.map((o) => o.value).filter((v): v is string => typeof v === 'string');
+  const applyScopes = (opts: readonly { value?: string }[] | { value?: string } | null) => {
+    const arr = Array.isArray(opts) ? opts : opts ? [opts] : [];
+    const list = arr.map((o) => o.value).filter((v): v is string => typeof v === 'string');
     onScopesChange(list);
   };
 
@@ -71,8 +73,8 @@ export function WorkspaceFilterPanel({
   };
 
   return (
-    <div className={styles.filterPanel}>
-      <div className={styles.leftFilters}>
+    <div className={styles.commandBar}>
+      <div className={styles.leftCluster}>
         <BaseFilter
           id="namespaces"
           placeholder="Namespaces"
@@ -81,7 +83,6 @@ export function WorkspaceFilterPanel({
           onChange={applyNs}
           isSearchable
         />
-
         <BaseFilter
           id="scopes"
           placeholder="Scopes"
@@ -92,9 +93,9 @@ export function WorkspaceFilterPanel({
         />
       </div>
 
-      <div className={styles.rightAggToggle}>
+      <div className={styles.rightCluster}>
         <ToggleButton
-          className={styles.toggleBtn}
+          className={styles.aggToggle}
           defaultIndex={currentIndex}
           onOptionSelect={(idx) => applyAgg(idx)}
           options={availableAggregations.map((agg) => ({