@workbench-kit/react 0.0.2-prototype.0.1.2 → 0.0.2-prototype.0.2.2

package/src/layout/sidebar/SidebarSectionNestingContext.tsx

@@ -0,0 +1,21 @@
+import { createContext, useContext, type ReactNode } from 'react';
+
+const SidebarSectionNestingContext = createContext(0);
+
+export function useSidebarSectionBaseDepth(): number {
+  return useContext(SidebarSectionNestingContext);
+}
+
+export function SidebarSectionNestingProvider({
+  baseDepth,
+  children,
+}: {
+  baseDepth: number;
+  children: ReactNode;
+}) {
+  return (
+    <SidebarSectionNestingContext.Provider value={baseDepth}>
+      {children}
+    </SidebarSectionNestingContext.Provider>
+  );
+}

package/src/layout/sidebar/SidebarSlotChrome.tsx

@@ -0,0 +1,32 @@
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+
+import { cx } from '../../utils/cx';
+import { PanelHeader } from '../panel/Panel';
+
+export interface SidebarSlotChromeProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {
+  readonly actions?: ReactNode;
+  readonly leading?: ReactNode;
+  readonly reserveActionsSlot?: boolean;
+}
+
+/**
+ * Shared primary/secondary sidebar slot header: leading title or tab strip, trailing actions.
+ */
+export function SidebarSlotChrome({
+  actions,
+  className,
+  leading,
+  reserveActionsSlot,
+  ...props
+}: SidebarSlotChromeProps): ReactNode {
+  return (
+    <PanelHeader
+      actions={actions}
+      className={cx('ui-sidebar-view__header', 'ui-sidebar-slot-chrome', className)}
+      reserveActionsSlot={reserveActionsSlot ?? Boolean(actions)}
+      {...props}
+    >
+      {leading}
+    </PanelHeader>
+  );
+}

package/src/layout/sidebar/SidebarToolbar.tsx

@@ -0,0 +1,10 @@
+import './sidebar-chrome.css';
+import type { ToolbarProps } from '../../primitives/toolbar';
+import { Toolbar } from '../../primitives/toolbar';
+import { cx } from '../../utils/cx';
+
+export type SidebarToolbarProps = ToolbarProps;
+
+export function SidebarToolbar({ className, ...props }: SidebarToolbarProps) {
+  return <Toolbar className={cx('ui-sidebar-toolbar', className)} {...props} />;
+}

package/src/layout/sidebar/WorkbenchActionSidebar.tsx

@@ -0,0 +1,73 @@
+import type { ReactNode } from 'react';
+
+import { cx } from '../../utils/cx';
+import { SideBarViewFrame, type SideBarViewFrameProps } from './SideBarViewFrame';
+import {
+  WorkbenchActionList,
+  WorkbenchActionListItem,
+  type WorkbenchActionItem,
+  type WorkbenchActionListProps,
+} from './WorkbenchSidebarActions';
+
+export interface WorkbenchActionSidebarItem extends WorkbenchActionItem {
+  readonly selected?: boolean | undefined;
+  readonly showStatus?: boolean | undefined;
+  readonly testId?: string | undefined;
+  readonly title?: string | undefined;
+  readonly unavailable?: boolean | undefined;
+}
+
+export interface WorkbenchActionSidebarProps extends Omit<
+  SideBarViewFrameProps,
+  'children' | 'onSelect'
+> {
+  readonly emptyLabel?: ReactNode | undefined;
+  readonly items: readonly WorkbenchActionSidebarItem[];
+  readonly listProps?:
+    Omit<WorkbenchActionListProps, 'children' | 'empty' | 'emptyLabel'> | undefined;
+  readonly onSelect?: ((item: WorkbenchActionSidebarItem) => void) | undefined;
+  readonly renderIcon?: ((item: WorkbenchActionSidebarItem) => ReactNode) | undefined;
+}
+
+export function WorkbenchActionSidebar({
+  className,
+  emptyLabel = 'No actions',
+  items,
+  listProps,
+  onSelect,
+  renderIcon,
+  ...frameProps
+}: WorkbenchActionSidebarProps) {
+  const { className: listClassName, ...restListProps } = listProps ?? {};
+  const empty = items.length === 0;
+
+  return (
+    <SideBarViewFrame className={cx('ui-workbench-action-sidebar', className)} {...frameProps}>
+      <WorkbenchActionList
+        className={cx('ui-workbench-action-sidebar__list', listClassName)}
+        empty={empty}
+        emptyLabel={emptyLabel}
+        {...restListProps}
+      >
+        {items.map((item) => (
+          <WorkbenchActionListItem
+            key={item.id}
+            danger={item.danger}
+            data-testid={item.testId}
+            description={item.description}
+            disabledReason={item.disabledReason}
+            icon={renderIcon ? renderIcon(item) : item.icon}
+            label={item.label}
+            selected={item.selected}
+            shortcut={item.shortcut}
+            showStatus={item.showStatus ?? false}
+            status={item.status}
+            title={item.title ?? item.label}
+            unavailable={item.unavailable}
+            onClick={onSelect ? () => onSelect(item) : undefined}
+          />
+        ))}
+      </WorkbenchActionList>
+    </SideBarViewFrame>
+  );
+}

package/src/layout/{WorkbenchSidebarActions.tsx → sidebar/WorkbenchSidebarActions.tsx}

@@ -1,20 +1,24 @@
 import type { ComponentPropsWithRef, ReactNode } from 'react';
 import { forwardRef, useId, useState } from 'react';
-import { Badge } from '../primitives/Badge';
-import { cxCodicon } from '../utils/codicon';
-import { cx } from '../utils/cx';
+import { Badge } from '../../primitives/badge';
+import { cxCodicon } from '../../utils/codicon';
+import { cx } from '../../utils/cx';
 import {
   getWorkbenchStatusLabel,
   isWorkbenchStatusBusy,
   isWorkbenchStatusDisabled,
   type WorkbenchStatus,
-} from '../workbench/status';
+} from '../../workbench/status';
 import {
   SideBarList,
   SideBarListItem,
   type SideBarListItemProps,
   type SideBarListProps,
 } from './SideBarViewFrame';
+import {
+  SidebarSectionNestingProvider,
+  useSidebarSectionBaseDepth,
+} from './SidebarSectionNestingContext';
 
 export type WorkbenchActionStatus = WorkbenchStatus;
 
@@ -32,6 +36,78 @@ export interface WorkbenchActionItem {
 
 type WorkbenchSidebarHeadingLevel = 2 | 3 | 4 | 5 | 6;
 
+export interface WorkbenchSidebarSectionHeaderProps {
+  actions?: ReactNode;
+  badge?: ReactNode;
+  collapsible?: boolean;
+  collapsed: boolean;
+  contentId?: string;
+  headingId: string;
+  headingLevel?: WorkbenchSidebarHeadingLevel;
+  onToggle?: () => void;
+  title: ReactNode;
+}
+
+export function WorkbenchSidebarSectionHeader({
+  actions,
+  badge,
+  collapsible = true,
+  collapsed,
+  contentId,
+  headingId,
+  headingLevel = 3,
+  onToggle,
+  title,
+}: WorkbenchSidebarSectionHeaderProps) {
+  return (
+    <div className="ui-workbench-sidebar-section__header">
+      {collapsible ? (
+        <button
+          aria-controls={contentId}
+          aria-expanded={!collapsed}
+          className="ui-workbench-sidebar-section__toggle"
+          type="button"
+          onClick={onToggle}
+        >
+          <i
+            aria-hidden="true"
+            className={cxCodicon(
+              collapsed ? 'chevron-right' : 'chevron-down',
+              'ui-workbench-sidebar-section__chevron',
+            )}
+          />
+          <span
+            id={headingId}
+            aria-level={headingLevel}
+            className="ui-workbench-sidebar-section__title"
+            role="heading"
+          >
+            {title}
+          </span>
+        </button>
+      ) : (
+        <div className="ui-workbench-sidebar-section__static-title">
+          <span className="ui-workbench-sidebar-section__chevron" />
+          <span
+            id={headingId}
+            aria-level={headingLevel}
+            className="ui-workbench-sidebar-section__title"
+            role="heading"
+          >
+            {title}
+          </span>
+        </div>
+      )}
+      {badge || actions ? (
+        <div className="ui-workbench-sidebar-section__meta">
+          {badge}
+          {actions}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
 export interface WorkbenchSidebarSectionProps extends Omit<
   ComponentPropsWithRef<'section'>,
   'title'
@@ -44,6 +120,12 @@ export interface WorkbenchSidebarSectionProps extends Omit<
   count?: number;
   defaultCollapsed?: boolean;
   headingLevel?: WorkbenchSidebarHeadingLevel;
+  /**
+   * When true (default), `SideBarListItem` depth under this section is offset by +1
+   * so rows read as children of the section header. Set false for trees that already
+   * own full indent (rare).
+   */
+  nestListItems?: boolean;
   onCollapsedChange?: (collapsed: boolean) => void;
   title: ReactNode;
 }
@@ -59,6 +141,7 @@ export function WorkbenchSidebarSection({
   defaultCollapsed = false,
   headingLevel = 3,
   id,
+  nestListItems = true,
   onCollapsedChange,
   title,
   ...props
@@ -67,8 +150,10 @@ export function WorkbenchSidebarSection({
   const sectionId = id ?? generatedId;
   const headingId = `${sectionId}-heading`;
   const contentId = `${sectionId}-content`;
+  const parentBaseDepth = useSidebarSectionBaseDepth();
   const [uncontrolledCollapsed, setUncontrolledCollapsed] = useState(defaultCollapsed);
   const resolvedCollapsed = collapsed ?? uncontrolledCollapsed;
+  const nestedBaseDepth = nestListItems ? parentBaseDepth + 1 : parentBaseDepth;
 
   const handleToggle = () => {
     if (!collapsible) return;
@@ -90,63 +175,32 @@ export function WorkbenchSidebarSection({
       className={cx('ui-workbench-sidebar-section', className)}
       {...props}
     >
-      <div className="ui-workbench-sidebar-section__header">
-        {collapsible ? (
-          <button
-            aria-controls={contentId}
-            aria-expanded={!resolvedCollapsed}
-            className="ui-workbench-sidebar-section__toggle"
-            type="button"
-            onClick={handleToggle}
-          >
-            <i
-              aria-hidden="true"
-              className={cxCodicon(
-                resolvedCollapsed ? 'chevron-right' : 'chevron-down',
-                'ui-workbench-sidebar-section__chevron',
-              )}
-            />
-            <span
-              id={headingId}
-              aria-level={headingLevel}
-              className="ui-workbench-sidebar-section__title"
-              role="heading"
-            >
-              {title}
-            </span>
-          </button>
-        ) : (
-          <div className="ui-workbench-sidebar-section__static-title">
-            <span className="ui-workbench-sidebar-section__chevron" />
-            <span
-              id={headingId}
-              aria-level={headingLevel}
-              className="ui-workbench-sidebar-section__title"
-              role="heading"
-            >
-              {title}
-            </span>
-          </div>
-        )}
-        {resolvedBadge || actions ? (
-          <div className="ui-workbench-sidebar-section__meta">
-            {resolvedBadge}
-            {actions}
-          </div>
-        ) : null}
-      </div>
+      <WorkbenchSidebarSectionHeader
+        actions={actions}
+        badge={resolvedBadge}
+        collapsible={collapsible}
+        collapsed={resolvedCollapsed}
+        contentId={contentId}
+        headingId={headingId}
+        headingLevel={headingLevel}
+        title={title}
+        onToggle={handleToggle}
+      />
       <div
         id={contentId}
         className="ui-workbench-sidebar-section__content"
         hidden={resolvedCollapsed}
       >
-        {children}
+        <SidebarSectionNestingProvider baseDepth={nestedBaseDepth}>
+          {children}
+        </SidebarSectionNestingProvider>
       </div>
     </section>
   );
 }
 
 export interface WorkbenchActionListProps extends SideBarListProps {
+  children?: ReactNode;
   empty?: boolean;
   emptyLabel?: ReactNode;
 }
@@ -161,7 +215,7 @@ export function WorkbenchActionList({
   return (
     <SideBarList className={cx('ui-workbench-action-list', className)} {...props}>
       {empty ? (
-        <li className="ui-side-bar-list-entry">
+        <li className="ui-sidebar-list-entry">
           <div className="ui-workbench-action-list__empty">{emptyLabel}</div>
         </li>
       ) : (

package/src/layout/sidebar/WorkbenchSidebarSectionStack.tsx

@@ -0,0 +1,165 @@
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+import { useCallback, useEffect, useState } from 'react';
+import './sidebar-section-stack.css';
+import './sidebar-section.css';
+import { cx } from '../../utils/cx';
+import {
+  WorkbenchSidebarSection,
+  type WorkbenchSidebarSectionProps,
+} from './WorkbenchSidebarActions';
+
+export interface WorkbenchSidebarSectionStackItem extends Pick<
+  WorkbenchSidebarSectionProps,
+  | 'actions'
+  | 'badge'
+  | 'className'
+  | 'collapsible'
+  | 'count'
+  | 'defaultCollapsed'
+  | 'nestListItems'
+  | 'title'
+> {
+  children: ReactNode;
+  id: string;
+}
+
+export interface WorkbenchSidebarSectionStackProps extends Omit<
+  ComponentPropsWithRef<'div'>,
+  'children'
+> {
+  collapsedBehavior?: 'dock' | 'in-flow';
+  items: readonly WorkbenchSidebarSectionStackItem[];
+}
+
+function buildInitialCollapsedState(
+  items: readonly WorkbenchSidebarSectionStackItem[],
+): Record<string, boolean> {
+  return Object.fromEntries(items.map((item) => [item.id, item.defaultCollapsed ?? false]));
+}
+
+function resolveCollapsedDockPlacement(
+  expandedCount: number,
+  collapsedCount: number,
+): 'top' | 'bottom' | null {
+  if (collapsedCount === 0) {
+    return null;
+  }
+
+  return expandedCount === 0 ? 'top' : 'bottom';
+}
+
+export function WorkbenchSidebarSectionStack({
+  className,
+  collapsedBehavior = 'in-flow',
+  items,
+  ...props
+}: WorkbenchSidebarSectionStackProps) {
+  const [collapsedById, setCollapsedById] = useState(() => buildInitialCollapsedState(items));
+
+  useEffect(() => {
+    setCollapsedById((current) => {
+      const next = { ...current };
+      let changed = false;
+
+      for (const item of items) {
+        if (!(item.id in next)) {
+          next[item.id] = item.defaultCollapsed ?? false;
+          changed = true;
+        }
+      }
+
+      for (const id of Object.keys(next)) {
+        if (!items.some((item) => item.id === id)) {
+          delete next[id];
+          changed = true;
+        }
+      }
+
+      return changed ? next : current;
+    });
+  }, [items]);
+
+  const setCollapsed = useCallback((id: string, collapsed: boolean) => {
+    setCollapsedById((current) => {
+      if (current[id] === collapsed) {
+        return current;
+      }
+
+      return { ...current, [id]: collapsed };
+    });
+  }, []);
+
+  const expandedItems = items.filter((item) => {
+    if (item.collapsible === false) {
+      return true;
+    }
+
+    return !collapsedById[item.id];
+  });
+
+  const collapsedItems = items.filter(
+    (item) => item.collapsible !== false && collapsedById[item.id],
+  );
+
+  const dockPlacement = resolveCollapsedDockPlacement(expandedItems.length, collapsedItems.length);
+  const renderInFlow = collapsedBehavior === 'in-flow';
+
+  const renderSection = (
+    item: WorkbenchSidebarSectionStackItem,
+    options: { collapsed: boolean; docked: boolean },
+  ) => (
+    <WorkbenchSidebarSection
+      key={item.id}
+      actions={item.actions}
+      badge={item.badge}
+      className={cx(
+        item.className,
+        options.docked && 'ui-workbench-sidebar-section--collapsed-dock',
+      )}
+      collapsible={item.collapsible}
+      collapsed={options.collapsed}
+      count={item.count}
+      id={item.id}
+      nestListItems={item.nestListItems}
+      title={item.title}
+      onCollapsedChange={(nextCollapsed) => {
+        setCollapsed(item.id, nextCollapsed);
+      }}
+    >
+      {options.collapsed ? null : item.children}
+    </WorkbenchSidebarSection>
+  );
+
+  return (
+    <div className={cx('ui-workbench-sidebar-section-stack', className)} {...props}>
+      {!renderInFlow && dockPlacement === 'top' ? (
+        <div
+          aria-label="Collapsed sections"
+          className="ui-workbench-sidebar-section-stack__collapsed"
+          role="group"
+        >
+          {collapsedItems.map((item) => renderSection(item, { collapsed: true, docked: true }))}
+        </div>
+      ) : null}
+      <div className="ui-workbench-sidebar-section-stack__expanded ui-workbench-scrollbar">
+        {renderInFlow
+          ? items.map((item) =>
+              renderSection(item, {
+                collapsed: item.collapsible !== false && collapsedById[item.id],
+                docked: false,
+              }),
+            )
+          : expandedItems.map((item) => renderSection(item, { collapsed: false, docked: false }))}
+      </div>
+      {!renderInFlow && dockPlacement === 'bottom' ? (
+        <div
+          aria-label="Collapsed sections"
+          className="ui-workbench-sidebar-section-stack__collapsed"
+          role="group"
+        >
+          {collapsedItems.map((item) => renderSection(item, { collapsed: true, docked: true }))}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/layout/sidebar/index.css

@@ -0,0 +1,5 @@
+/* layout/sidebar feature styles */
+@import './sidebar-view.css';
+@import './sidebar-chrome.css';
+@import './sidebar-section-stack.css';
+@import './sidebar-section.css';

package/src/layout/sidebar/index.ts

@@ -0,0 +1,55 @@
+export { SideBarViewTitleMenu } from './SideBarViewTitleMenu';
+export type { SideBarViewTitleMenuProps } from './SideBarViewTitleMenu';
+export {
+  SideBarViewFrame,
+  SideBarHeaderControl,
+  SideBarList,
+  SideBarListItem,
+  SideBarRow,
+  SideBarScrollSpacer,
+  sideBarTreeDepthStyle,
+} from './SideBarViewFrame';
+export type {
+  SideBarHeaderControlProps,
+  SideBarListItemProps,
+  SideBarListProps,
+  SideBarRowProps,
+  SideBarScrollSpacerProps,
+  SideBarViewFrameProps,
+} from './SideBarViewFrame';
+export { SidebarActionIconBar } from './SidebarActionIconBar';
+export { SidebarSlotChrome } from './SidebarSlotChrome';
+export type { SidebarSlotChromeProps } from './SidebarSlotChrome';
+export type {
+  SidebarActionIconBarProps,
+  SidebarActionIconDescriptor,
+} from './SidebarActionIconBar';
+export { SideBarViewTabStrip } from './SideBarViewTabStrip';
+export type { SideBarViewTabDescriptor, SideBarViewTabStripProps } from './SideBarViewTabStrip';
+export { SidebarToolbar } from './SidebarToolbar';
+export type { SidebarToolbarProps } from './SidebarToolbar';
+export {
+  WorkbenchActionList,
+  WorkbenchActionListItem,
+  WorkbenchSidebarSection,
+  WorkbenchSidebarSectionHeader,
+} from './WorkbenchSidebarActions';
+export type {
+  WorkbenchActionItem,
+  WorkbenchActionListItemProps,
+  WorkbenchActionListProps,
+  WorkbenchActionStatus,
+  WorkbenchSidebarSectionHeaderProps,
+  WorkbenchSidebarSectionProps,
+} from './WorkbenchSidebarActions';
+export { useSidebarSectionBaseDepth } from './SidebarSectionNestingContext';
+export { WorkbenchSidebarSectionStack } from './WorkbenchSidebarSectionStack';
+export type {
+  WorkbenchSidebarSectionStackItem,
+  WorkbenchSidebarSectionStackProps,
+} from './WorkbenchSidebarSectionStack';
+export { WorkbenchActionSidebar } from './WorkbenchActionSidebar';
+export type {
+  WorkbenchActionSidebarItem,
+  WorkbenchActionSidebarProps,
+} from './WorkbenchActionSidebar';

package/src/layout/sidebar/sidebar-chrome.css

@@ -0,0 +1,95 @@
+.ui-sidebar-toolbar {
+  min-width: 0;
+}
+
+.ui-sidebar-action-icon-bar {
+  flex-shrink: 0;
+  gap: var(--shell-spacing-inline-xs, 2px);
+}
+
+.ui-sidebar-view-tab-strip.ui-sidebar-action-icon-bar,
+.ui-sidebar-view-tab-strip .ui-sidebar-toolbar {
+  width: 100%;
+  justify-content: flex-start;
+}
+
+.ui-sidebar-action-icon-bar__item {
+  display: inline-flex;
+}
+
+.ui-sidebar-action-icon-bar__item-host {
+  position: relative;
+  display: inline-flex;
+}
+
+.ui-sidebar-action-icon-bar__item-host--reorderable {
+  cursor: grab;
+}
+
+.ui-sidebar-action-icon-bar__item-host--reorderable:active {
+  cursor: grabbing;
+}
+
+.ui-sidebar-action-icon-bar__item-host--dragging {
+  opacity: 0.45;
+}
+
+.ui-sidebar-action-icon-bar__button {
+  position: relative;
+}
+
+.ui-sidebar-action-icon-bar__drop-indicator {
+  position: absolute;
+  top: 6px;
+  bottom: 6px;
+  z-index: 2;
+  width: 2px;
+  border-radius: 1px;
+  background: var(--vscode-focusBorder, var(--color-focus-border, var(--color-accent, #2f81f7)));
+  pointer-events: none;
+}
+
+.ui-sidebar-action-icon-bar__drop-indicator--before {
+  left: 0;
+  transform: translateX(-50%);
+}
+
+.ui-sidebar-action-icon-bar__drop-indicator--after {
+  right: 0;
+  transform: translateX(50%);
+}
+
+.ui-sidebar-action-icon-bar__button--active.ui-icon-button {
+  color: var(--shell-color-text, var(--color-text));
+  background: var(--shell-color-list-active, var(--color-list-active, rgba(255, 255, 255, 0.08)));
+}
+
+.ui-view-empty-state {
+  margin: 0;
+  padding: 12px;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
+}
+
+/* Sole empty/loading content should sit in the panel viewport center, not top-left. */
+.ui-sidebar-view__body:has(> .ui-panel-centered-state:only-child),
+.ui-panel-body:has(> .ui-panel-centered-state:only-child) {
+  display: flex;
+  flex-direction: column;
+}
+
+.ui-sidebar-view__body > .ui-panel-centered-state:only-child,
+.ui-panel-body > .ui-panel-centered-state:only-child {
+  flex: 1 1 auto;
+  min-height: 100%;
+}
+
+.ui-sidebar-view__body > .ui-view-empty-state:only-child,
+.ui-panel-body > .ui-view-empty-state:only-child,
+.ui-sidebar-view__body > .ui-panel-loading:only-child,
+.ui-panel-body > .ui-panel-loading:only-child {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}