@workbench-kit/react 0.0.2-prototype.0.1.4 → 0.0.2-prototype.0.2.10

package/src/workbench/shell/WorkbenchViewSidebar.tsx

@@ -0,0 +1,85 @@
+import type { ReactNode } from 'react';
+
+import {
+  SideBarList,
+  SideBarListItem,
+  SideBarViewFrame,
+  type SideBarListProps,
+  type SideBarViewFrameProps,
+} from '../../layout/sidebar';
+import { cx } from '../../utils/cx';
+
+export interface WorkbenchViewSidebarItem<TViewId extends string, TIcon = unknown> {
+  readonly disabled?: boolean;
+  readonly icon: TIcon;
+  readonly id: TViewId;
+  readonly label: string;
+  readonly title?: string;
+}
+
+export interface WorkbenchViewSidebarProps<TViewId extends string, TIcon = unknown> extends Omit<
+  SideBarViewFrameProps,
+  'children' | 'onSelect'
+> {
+  readonly [key: `data-${string}`]: boolean | number | string | undefined;
+  readonly activeId?: TViewId;
+  readonly itemDataAttributeName?: string;
+  readonly items: ReadonlyArray<WorkbenchViewSidebarItem<TViewId, TIcon>>;
+  readonly listProps?: Omit<SideBarListProps, 'children'>;
+  readonly onSelect?:
+    ((viewId: TViewId, item: WorkbenchViewSidebarItem<TViewId, TIcon>) => void) | undefined;
+  readonly renderIcon: (icon: TIcon, item: WorkbenchViewSidebarItem<TViewId, TIcon>) => ReactNode;
+}
+
+export function WorkbenchViewSidebar<TViewId extends string, TIcon = unknown>({
+  activeId,
+  className,
+  itemDataAttributeName,
+  items,
+  listProps,
+  onSelect,
+  renderIcon,
+  ...frameProps
+}: WorkbenchViewSidebarProps<TViewId, TIcon>) {
+  const { className: listClassName, fill = true, ...restListProps } = listProps ?? {};
+
+  return (
+    <SideBarViewFrame
+      className={cx('ui-workbench-view-sidebar', 'workbench-primary-sidebar', className)}
+      {...frameProps}
+    >
+      <SideBarList
+        className={cx('ui-workbench-view-sidebar__list', listClassName)}
+        fill={fill}
+        {...restListProps}
+      >
+        {items.map((item) => {
+          const selected = item.id === activeId;
+          const itemDataProps =
+            itemDataAttributeName === undefined
+              ? undefined
+              : ({ [itemDataAttributeName]: item.id } as Record<string, string>);
+
+          return (
+            <SideBarListItem
+              key={item.id}
+              active={selected}
+              disabled={item.disabled}
+              onClick={onSelect === undefined ? undefined : () => onSelect(item.id, item)}
+              selected={selected}
+              title={item.title ?? item.label}
+              {...itemDataProps}
+            >
+              <span className="ui-workbench-view-sidebar__item-content">
+                <span className="ui-workbench-view-sidebar__item-icon">
+                  {renderIcon(item.icon, item)}
+                </span>
+                <span className="ui-workbench-view-sidebar__item-label">{item.label}</span>
+              </span>
+            </SideBarListItem>
+          );
+        })}
+      </SideBarList>
+    </SideBarViewFrame>
+  );
+}

package/src/workbench/shell/WorkbenchWindowChromeControls.tsx

@@ -0,0 +1,293 @@
+import type { ReactNode } from 'react';
+
+import { cx } from '../../utils/cx';
+import { useWorkbenchHostPlatform } from '../chrome/WorkbenchPlatformContext';
+import type {
+  WorkbenchHostPlatform,
+  WorkbenchWindowChromeMode,
+} from '../chrome/workbenchPlatformChrome';
+
+export interface WorkbenchWindowChromeControlsProps {
+  chrome?: WorkbenchWindowChromeMode;
+  closeLabel?: string;
+  isMaximized?: boolean;
+  maximizeLabel?: string;
+  minimizeLabel?: string;
+  onClose: () => void;
+  onMinimize?: () => void;
+  onToggleMaximized?: () => void;
+  restoreLabel?: string;
+  showMaximize?: boolean;
+  showMinimize?: boolean;
+  surface: 'desktop-titlebar' | 'modal';
+}
+
+export function WorkbenchWindowChromeControls({
+  chrome = 'platform',
+  closeLabel = 'Close',
+  isMaximized = false,
+  maximizeLabel = 'Maximize',
+  minimizeLabel = 'Minimize',
+  onClose,
+  onMinimize,
+  onToggleMaximized,
+  restoreLabel = 'Restore',
+  showMaximize = true,
+  showMinimize = true,
+  surface,
+}: WorkbenchWindowChromeControlsProps): ReactNode {
+  const platform = useWorkbenchHostPlatform();
+
+  if (chrome !== 'platform') {
+    return renderGenericControls({
+      closeLabel,
+      isMaximized,
+      maximizeLabel,
+      minimizeLabel,
+      onClose,
+      onMinimize,
+      onToggleMaximized,
+      restoreLabel,
+      showMaximize,
+      showMinimize,
+      surface,
+    });
+  }
+
+  if (platform === 'darwin') {
+    return renderDarwinControls({
+      closeLabel,
+      isMaximized,
+      maximizeLabel,
+      minimizeLabel,
+      onClose,
+      onMinimize,
+      onToggleMaximized,
+      restoreLabel,
+      showMaximize,
+      showMinimize,
+      surface,
+    });
+  }
+
+  return renderWindowsControls({
+    closeLabel,
+    isMaximized,
+    maximizeLabel,
+    minimizeLabel,
+    onClose,
+    onMinimize,
+    onToggleMaximized,
+    restoreLabel,
+    showMaximize,
+    showMinimize,
+    surface,
+  });
+}
+
+interface SharedControlProps {
+  closeLabel: string;
+  isMaximized: boolean;
+  maximizeLabel: string;
+  minimizeLabel: string;
+  onClose: () => void;
+  onMinimize?: () => void;
+  onToggleMaximized?: () => void;
+  restoreLabel: string;
+  showMaximize: boolean;
+  showMinimize: boolean;
+  surface: 'desktop-titlebar' | 'modal';
+}
+
+function renderDarwinControls({
+  closeLabel,
+  isMaximized,
+  maximizeLabel,
+  minimizeLabel,
+  onClose,
+  onMinimize,
+  onToggleMaximized,
+  restoreLabel,
+  showMaximize,
+  showMinimize,
+  surface,
+}: SharedControlProps): ReactNode {
+  const maximizeTitle = isMaximized ? restoreLabel : maximizeLabel;
+
+  return (
+    <div
+      className={cx(
+        'ui-workbench-window-chrome-controls',
+        'ui-workbench-window-chrome-controls--darwin',
+        surface === 'modal' && 'ui-workbench-window-chrome-controls--modal',
+      )}
+    >
+      <button
+        aria-label={closeLabel}
+        className="ui-workbench-window-chrome-control ui-workbench-window-chrome-control--darwin ui-workbench-window-chrome-control--close"
+        title={closeLabel}
+        type="button"
+        onClick={onClose}
+      >
+        <span aria-hidden="true" className="ui-workbench-window-chrome-control__glyph" />
+      </button>
+      {showMinimize && onMinimize ? (
+        <button
+          aria-label={minimizeLabel}
+          className="ui-workbench-window-chrome-control ui-workbench-window-chrome-control--darwin ui-workbench-window-chrome-control--minimize"
+          title={minimizeLabel}
+          type="button"
+          onClick={onMinimize}
+        >
+          <span aria-hidden="true" className="ui-workbench-window-chrome-control__glyph" />
+        </button>
+      ) : null}
+      {showMaximize && onToggleMaximized ? (
+        <button
+          aria-label={maximizeTitle}
+          className="ui-workbench-window-chrome-control ui-workbench-window-chrome-control--darwin ui-workbench-window-chrome-control--zoom"
+          title={maximizeTitle}
+          type="button"
+          onClick={onToggleMaximized}
+        >
+          <span aria-hidden="true" className="ui-workbench-window-chrome-control__glyph" />
+        </button>
+      ) : null}
+    </div>
+  );
+}
+
+function renderWindowsControls({
+  closeLabel,
+  isMaximized,
+  maximizeLabel,
+  minimizeLabel,
+  onClose,
+  onMinimize,
+  onToggleMaximized,
+  restoreLabel,
+  showMaximize,
+  showMinimize,
+  surface,
+}: SharedControlProps): ReactNode {
+  const maximizeTitle = isMaximized ? restoreLabel : maximizeLabel;
+  const controlClassName =
+    surface === 'modal'
+      ? 'ui-modal__control ui-workbench-window-chrome-control--win32'
+      : 'ui-workbench-desktop-titlebar__control ui-workbench-window-chrome-control--win32';
+  const closeClassName =
+    surface === 'modal'
+      ? cx(controlClassName, 'ui-modal__close')
+      : cx(controlClassName, 'ui-workbench-desktop-titlebar__control--close');
+  const containerClassName =
+    surface === 'modal'
+      ? 'ui-modal__controls ui-workbench-window-chrome-controls ui-workbench-window-chrome-controls--win32'
+      : 'ui-workbench-desktop-titlebar__controls ui-workbench-window-chrome-controls ui-workbench-window-chrome-controls--win32';
+
+  return (
+    <div className={containerClassName}>
+      {showMinimize && onMinimize ? (
+        <button
+          aria-label={minimizeLabel}
+          className={controlClassName}
+          title={minimizeLabel}
+          type="button"
+          onClick={onMinimize}
+        >
+          <i aria-hidden="true" className="codicon codicon-chrome-minimize" />
+        </button>
+      ) : null}
+      {showMaximize && onToggleMaximized ? (
+        <button
+          aria-label={maximizeTitle}
+          className={controlClassName}
+          title={maximizeTitle}
+          type="button"
+          onClick={onToggleMaximized}
+        >
+          <i
+            aria-hidden="true"
+            className={cx(
+              'codicon',
+              isMaximized ? 'codicon-chrome-restore' : 'codicon-chrome-maximize',
+            )}
+          />
+        </button>
+      ) : null}
+      <button
+        aria-label={closeLabel}
+        className={closeClassName}
+        title={closeLabel}
+        type="button"
+        onClick={onClose}
+      >
+        <i
+          aria-hidden="true"
+          className={cx('codicon', surface === 'modal' ? 'codicon-close' : 'codicon-chrome-close')}
+        />
+      </button>
+    </div>
+  );
+}
+
+function renderGenericControls({
+  closeLabel,
+  isMaximized,
+  maximizeLabel,
+  onClose,
+  onToggleMaximized,
+  restoreLabel,
+  showMaximize,
+  surface,
+}: SharedControlProps): ReactNode {
+  const maximizeTitle = isMaximized ? restoreLabel : maximizeLabel;
+  const controlClassName =
+    surface === 'modal' ? 'ui-modal__control' : 'ui-workbench-desktop-titlebar__control';
+  const closeClassName =
+    surface === 'modal'
+      ? cx(controlClassName, 'ui-modal__close')
+      : cx(controlClassName, 'ui-workbench-desktop-titlebar__control--close');
+  const containerClassName =
+    surface === 'modal' ? 'ui-modal__controls' : 'ui-workbench-desktop-titlebar__controls';
+
+  return (
+    <div className={containerClassName}>
+      {showMaximize && onToggleMaximized ? (
+        <button
+          aria-label={maximizeTitle}
+          className={controlClassName}
+          title={maximizeTitle}
+          type="button"
+          onClick={onToggleMaximized}
+        >
+          <i
+            aria-hidden="true"
+            className={cx(
+              'codicon',
+              isMaximized ? 'codicon-chrome-restore' : 'codicon-chrome-maximize',
+            )}
+          />
+        </button>
+      ) : null}
+      <button
+        aria-label={closeLabel}
+        className={closeClassName}
+        title={closeLabel}
+        type="button"
+        onClick={onClose}
+      >
+        <i
+          aria-hidden="true"
+          className={cx('codicon', surface === 'modal' ? 'codicon-close' : 'codicon-chrome-close')}
+        />
+      </button>
+    </div>
+  );
+}
+
+export function shouldUseDarwinPlatformChrome(
+  chrome: WorkbenchWindowChromeMode,
+  platform: WorkbenchHostPlatform,
+): boolean {
+  return chrome === 'platform' && platform === 'darwin';
+}

package/src/workbench/shell/activity-bar.css

@@ -0,0 +1,245 @@
+.ui-workbench-activity-bar {
+  flex-shrink: 0;
+  width: var(--workbench-activity-bar-item-size, 48px);
+  background: var(--color-surface);
+  border-right: 1px solid var(--color-border);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0;
+  gap: 0;
+  user-select: none;
+}
+
+.ui-workbench-activity-bar--hidden {
+  display: none;
+  pointer-events: none;
+}
+
+.ide-body--activity-bar-hidden .ui-workbench-activity-bar {
+  display: none;
+  pointer-events: none;
+}
+
+.workbench-bottom-panel {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--vscode-panel-background, var(--color-surface));
+  border-top: 1px solid var(--vscode-panel-border, var(--color-border));
+}
+
+.ui-workbench-activity-bar__item {
+  --ui-button-width: var(--workbench-activity-bar-item-size);
+  --ui-button-min-width: 0;
+  --ui-button-height: var(--workbench-activity-bar-item-size);
+  --ui-button-min-height: 0;
+  --ui-button-display: flex;
+  --ui-button-align-items: center;
+  --ui-button-justify-content: center;
+  --ui-button-padding: 0;
+  --ui-button-border: none;
+  --ui-button-border-radius: var(--radius-sm);
+  --ui-button-color: var(--color-text-subtle);
+  --ui-button-background: transparent;
+  --ui-button-font-family: inherit;
+  --ui-button-font-size: 0;
+  --ui-button-hover-color: var(--color-text-muted);
+  --ui-button-hover-background: transparent;
+  position: relative;
+  width: var(--workbench-activity-bar-item-size);
+  height: var(--workbench-activity-bar-item-size);
+  border: none;
+  border-radius: var(--radius-sm);
+  color: var(--color-text-subtle);
+  background: transparent;
+  font-family: inherit;
+  font-size: 0;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: color 0.1s;
+}
+
+.ui-workbench-activity-bar__item::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 12px;
+  bottom: 12px;
+  width: 2px;
+  border-radius: 0 2px 2px 0;
+  background: transparent;
+}
+
+.ui-workbench-activity-bar__item::before {
+  content: '';
+  position: absolute;
+  inset: 4px;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  transition: background 0.1s;
+}
+
+.ui-workbench-activity-bar__icon {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ui-workbench-activity-bar__icon .codicon[class*='codicon-'] {
+  width: 32px;
+  height: 32px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 30px;
+  line-height: 32px;
+}
+
+.ui-workbench-activity-bar__item:hover {
+  color: var(--color-text-muted);
+}
+
+.ui-workbench-activity-bar__item:hover::before {
+  background: var(--color-surface-hover);
+}
+
+.ui-workbench-activity-bar__item--active {
+  --ui-button-color: var(--vscode-activityBar-activeForeground, var(--color-text));
+  --ui-button-hover-color: var(--vscode-activityBar-activeForeground, var(--color-text));
+  color: var(--vscode-activityBar-activeForeground, var(--color-text));
+}
+
+.ui-workbench-activity-bar__item--active::after {
+  background: var(
+    --vscode-activityBar-activeBorder,
+    var(--color-focus-border, var(--color-accent))
+  );
+}
+
+.ui-workbench-activity-bar__item--active::before {
+  background: color-mix(
+    in srgb,
+    var(--vscode-activityBar-activeBorder, var(--color-focus-border, var(--color-accent))) 16%,
+    var(--color-surface-hover)
+  );
+}
+
+.ui-workbench-activity-bar__item:focus-visible {
+  outline: 1px solid var(--color-accent);
+  outline-offset: -4px;
+}
+
+.ui-workbench-activity-bar__item--reorderable {
+  cursor: grab;
+}
+
+.ui-workbench-activity-bar__item--reorderable:active {
+  cursor: grabbing;
+}
+
+.ui-workbench-activity-bar__item--dragging {
+  opacity: 0.45;
+}
+
+.ui-workbench-activity-bar__item-host {
+  display: flex;
+  flex: 0 0 auto;
+}
+
+.ui-workbench-activity-bar__item-host--reorderable {
+  cursor: grab;
+}
+
+.ui-workbench-activity-bar__item-host--reorderable:active {
+  cursor: grabbing;
+}
+
+.ui-workbench-activity-bar__item-host--dragging {
+  opacity: 0.45;
+}
+
+.ui-workbench-activity-bar__drop-indicator {
+  position: absolute;
+  left: 10px;
+  right: 10px;
+  z-index: 2;
+  height: 2px;
+  border-radius: 1px;
+  background: var(--vscode-focusBorder, var(--color-focus-border, var(--color-accent, #2f81f7)));
+  pointer-events: none;
+}
+
+.ui-workbench-activity-bar__drop-indicator--before {
+  top: 0;
+  transform: translateY(-50%);
+}
+
+.ui-workbench-activity-bar__drop-indicator--after {
+  bottom: 0;
+  transform: translateY(50%);
+}
+
+.ui-workbench-activity-bar__spacer {
+  flex: 1;
+}
+
+.ui-workbench-activity-bar--horizontal {
+  width: 100%;
+  height: var(--workbench-activity-bar-item-size, 48px);
+  flex-direction: row;
+  align-items: stretch;
+  border-right: none;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.ui-workbench-activity-bar--horizontal .ui-workbench-activity-bar__item::after {
+  top: auto;
+  right: 12px;
+  bottom: 0;
+  left: 12px;
+  width: auto;
+  height: 2px;
+  border-radius: 2px 2px 0 0;
+}
+
+.ui-workbench-activity-bar--horizontal .ui-workbench-activity-bar__drop-indicator {
+  top: 10px;
+  bottom: 10px;
+  left: auto;
+  right: auto;
+  width: 2px;
+  height: auto;
+}
+
+.ui-workbench-activity-bar--horizontal .ui-workbench-activity-bar__drop-indicator--before {
+  left: 0;
+  top: 10px;
+  bottom: 10px;
+  transform: translateX(-50%);
+}
+
+.ui-workbench-activity-bar--horizontal .ui-workbench-activity-bar__drop-indicator--after {
+  right: 0;
+  left: auto;
+  top: 10px;
+  bottom: 10px;
+  transform: translateX(50%);
+}
+
+.ide-root--activity-bar-top .ui-workbench-activity-bar--hidden {
+  display: none;
+  pointer-events: none;
+}
+
+.ide-body--activity-bar-top {
+  flex: 1;
+  min-height: 0;
+}

package/src/workbench/shell/activityBarOrder.ts

@@ -0,0 +1,98 @@
+export const DEFAULT_ACTIVITY_BAR_ITEM_ORDER = [
+  'explorer',
+  'search',
+  'chatting',
+  'aiChat',
+] as const;
+
+export type ActivityBarDropPosition = 'after' | 'before';
+
+export function reorderActivityBarItems(
+  itemIds: readonly string[],
+  sourceId: string,
+  targetId: string,
+  position: ActivityBarDropPosition,
+): readonly string[] | undefined {
+  if (sourceId === targetId) {
+    return undefined;
+  }
+
+  const sourceIndex = itemIds.indexOf(sourceId);
+  const targetIndex = itemIds.indexOf(targetId);
+  if (sourceIndex < 0 || targetIndex < 0) {
+    return undefined;
+  }
+
+  let insertIndex = position === 'before' ? targetIndex : targetIndex + 1;
+  const nextItemIds = [...itemIds];
+  nextItemIds.splice(sourceIndex, 1);
+
+  if (sourceIndex < insertIndex) {
+    insertIndex -= 1;
+  }
+
+  if (insertIndex === sourceIndex) {
+    return undefined;
+  }
+
+  nextItemIds.splice(insertIndex, 0, sourceId);
+  return nextItemIds;
+}
+
+export type ActivityBarOrientation = 'horizontal' | 'vertical';
+
+export function getActivityBarDropPosition(
+  target: HTMLElement,
+  pointerPosition: number,
+  orientation: ActivityBarOrientation = 'vertical',
+): ActivityBarDropPosition {
+  const rect = target.getBoundingClientRect();
+
+  if (orientation === 'horizontal') {
+    if (rect.width <= 0) {
+      return 'after';
+    }
+
+    return pointerPosition < rect.left + rect.width / 2 ? 'before' : 'after';
+  }
+
+  if (rect.height <= 0) {
+    return 'after';
+  }
+
+  return pointerPosition < rect.top + rect.height / 2 ? 'before' : 'after';
+}
+
+export function sortActivityBarItems<T extends { id: string }>(
+  items: readonly T[],
+  itemOrder?: readonly string[] | undefined,
+  fallbackOrder: readonly string[] = DEFAULT_ACTIVITY_BAR_ITEM_ORDER,
+): T[] {
+  const order = itemOrder?.length ? itemOrder : fallbackOrder;
+  const orderIndex = new Map(order.map((id, index) => [id, index]));
+
+  return [...items].sort((left, right) => {
+    const leftIndex = orderIndex.get(left.id);
+    const rightIndex = orderIndex.get(right.id);
+
+    if (leftIndex === undefined && rightIndex === undefined) {
+      return left.id.localeCompare(right.id);
+    }
+
+    if (leftIndex === undefined) return 1;
+    if (rightIndex === undefined) return -1;
+    return leftIndex - rightIndex;
+  });
+}
+
+export function filterActivityBarItems<T extends { id: string }>(
+  items: readonly T[],
+  hiddenItemIds?: readonly string[] | undefined,
+): T[] {
+  if (!hiddenItemIds?.length) {
+    return [...items];
+  }
+
+  const hiddenItems = new Set(hiddenItemIds);
+  return items.filter((item) => !hiddenItems.has(item.id));
+}