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

package/src/workbench/settings/useSectionScrollSpy.ts

@@ -0,0 +1,420 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  WORKBENCH_SECTIONED_PANEL_INTERSECTION_THRESHOLDS,
+  WORKBENCH_SECTIONED_PANEL_SCROLL_SPY_OFFSET,
+  createWorkbenchSectionedPanelIntersectionRootMargin,
+  isWorkbenchSectionedPanelScrollable,
+  readWorkbenchSectionedPanelScrollMetrics,
+  resolveWorkbenchSectionedPanelActiveAnchorFromScroll,
+  resolveWorkbenchSectionedPanelProgrammaticScrollSettleMs,
+  resolveWorkbenchSectionedPanelScrollTarget,
+  shouldPreserveNavClickActiveAnchor,
+  type WorkbenchSectionedPanelScrollSpyAxis,
+} from './sectionedPanelScrollSpy';
+import {
+  animateSectionPanelScrollTo,
+  findPanelSection,
+  readSectionPositions,
+  readSectionStart,
+} from './sectionScrollSpyDom';
+
+const ACTIVE_UPDATE_DEBOUNCE_MS = 50;
+
+export interface UseSectionScrollSpyOptions {
+  activeAnchorId?: string | undefined;
+  anchorOrder: readonly string[];
+  axis?: WorkbenchSectionedPanelScrollSpyAxis | undefined;
+  defaultActiveAnchorId?: string | undefined;
+  offset?: number | undefined;
+  onActiveAnchorChange?: ((anchorId: string | undefined) => void) | undefined;
+  scrollBehavior?: ScrollBehavior | undefined;
+  scrollSpy?: boolean | 'auto' | undefined;
+}
+
+export function useSectionScrollSpy({
+  activeAnchorId: controlledActiveAnchorId,
+  anchorOrder,
+  axis = 'vertical',
+  defaultActiveAnchorId,
+  offset = WORKBENCH_SECTIONED_PANEL_SCROLL_SPY_OFFSET,
+  onActiveAnchorChange,
+  scrollBehavior = 'smooth',
+  scrollSpy = 'auto',
+}: UseSectionScrollSpyOptions) {
+  const scrollRef = useRef<HTMLDivElement | null>(null);
+  const isProgrammaticScrollRef = useRef(false);
+  const programmaticScrollTargetAnchorRef = useRef<string | null>(null);
+  const cancelProgrammaticScrollRef = useRef<(() => void) | null>(null);
+  const preserveNavClickAnchorRef = useRef<{
+    anchorId: string;
+    scrollPosition: number;
+    scrollSize: number;
+  } | null>(null);
+  const scrollTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const intersectionObserverRef = useRef<IntersectionObserver | null>(null);
+  const scrollSpyEnabledRef = useRef(false);
+  const [scrollSpyEnabled, setScrollSpyEnabled] = useState(false);
+  const [uncontrolledActiveAnchorId, setUncontrolledActiveAnchorId] = useState<string | undefined>(
+    defaultActiveAnchorId ?? anchorOrder[0],
+  );
+
+  const trackedActiveAnchorIdRef = useRef<string | undefined>(undefined);
+  const preferredActiveAnchorId = controlledActiveAnchorId ?? uncontrolledActiveAnchorId;
+  const resolvedActiveAnchorId =
+    preferredActiveAnchorId && anchorOrder.includes(preferredActiveAnchorId)
+      ? preferredActiveAnchorId
+      : anchorOrder[0];
+
+  trackedActiveAnchorIdRef.current = resolvedActiveAnchorId;
+
+  const isProgrammaticScrollPinned = useCallback(
+    () => isProgrammaticScrollRef.current || programmaticScrollTargetAnchorRef.current !== null,
+    [],
+  );
+
+  const commitActiveAnchorId = useCallback(
+    (anchorId: string | undefined) => {
+      if (!anchorId || anchorId === trackedActiveAnchorIdRef.current) {
+        return;
+      }
+
+      trackedActiveAnchorIdRef.current = anchorId;
+
+      if (controlledActiveAnchorId === undefined) {
+        setUncontrolledActiveAnchorId(anchorId);
+      }
+
+      onActiveAnchorChange?.(anchorId);
+    },
+    [controlledActiveAnchorId, onActiveAnchorChange],
+  );
+
+  const setActiveAnchorId = useCallback(
+    (anchorId: string | undefined) => {
+      if (!anchorId) return;
+
+      trackedActiveAnchorIdRef.current = anchorId;
+
+      if (controlledActiveAnchorId === undefined) {
+        setUncontrolledActiveAnchorId(anchorId);
+      }
+
+      onActiveAnchorChange?.(anchorId);
+    },
+    [controlledActiveAnchorId, onActiveAnchorChange],
+  );
+
+  const resolveScrollSpyEnabled = useCallback(
+    (content: HTMLElement) => {
+      if (scrollSpy === false) return false;
+      if (scrollSpy === true) return true;
+
+      const metrics = readWorkbenchSectionedPanelScrollMetrics(content, axis);
+      return isWorkbenchSectionedPanelScrollable({
+        axis,
+        clientSize: metrics.clientSize,
+        scrollSize: metrics.scrollSize,
+      });
+    },
+    [axis, scrollSpy],
+  );
+
+  const updateActiveAnchorFromScroll = useCallback(() => {
+    const content = scrollRef.current;
+    if (
+      !content ||
+      anchorOrder.length === 0 ||
+      !scrollSpyEnabledRef.current ||
+      isProgrammaticScrollPinned()
+    ) {
+      return;
+    }
+
+    const metrics = readWorkbenchSectionedPanelScrollMetrics(content, axis);
+    const preserveNavClick = preserveNavClickAnchorRef.current;
+
+    if (preserveNavClick) {
+      if (
+        shouldPreserveNavClickActiveAnchor({
+          pinnedScrollPosition: preserveNavClick.scrollPosition,
+          pinnedScrollSize: preserveNavClick.scrollSize,
+          scrollPosition: metrics.scrollPosition,
+          scrollSize: metrics.scrollSize,
+        })
+      ) {
+        commitActiveAnchorId(preserveNavClick.anchorId);
+        return;
+      }
+
+      preserveNavClickAnchorRef.current = null;
+    }
+
+    const nextActive = resolveWorkbenchSectionedPanelActiveAnchorFromScroll({
+      anchorOrder,
+      clientSize: metrics.clientSize,
+      fallbackAnchorId: anchorOrder[0],
+      offset,
+      scrollPosition: metrics.scrollPosition,
+      scrollSize: metrics.scrollSize,
+      sectionPositions: readSectionPositions(content, anchorOrder, axis),
+    });
+
+    commitActiveAnchorId(nextActive);
+  }, [anchorOrder, axis, commitActiveAnchorId, isProgrammaticScrollPinned, offset]);
+
+  const cancelPendingScrollSpyUpdate = useCallback(() => {
+    if (scrollTimeoutRef.current) {
+      clearTimeout(scrollTimeoutRef.current);
+      scrollTimeoutRef.current = null;
+    }
+  }, []);
+
+  const cancelProgrammaticScroll = useCallback(() => {
+    cancelProgrammaticScrollRef.current?.();
+    cancelProgrammaticScrollRef.current = null;
+  }, []);
+
+  const finishProgrammaticScroll = useCallback(() => {
+    if (!isProgrammaticScrollRef.current && programmaticScrollTargetAnchorRef.current === null) {
+      return;
+    }
+
+    cancelProgrammaticScroll();
+    cancelPendingScrollSpyUpdate();
+
+    const clickedAnchor = programmaticScrollTargetAnchorRef.current;
+    isProgrammaticScrollRef.current = false;
+    programmaticScrollTargetAnchorRef.current = null;
+
+    if (clickedAnchor) {
+      const content = scrollRef.current;
+      if (content) {
+        const metrics = readWorkbenchSectionedPanelScrollMetrics(content, axis);
+        preserveNavClickAnchorRef.current = {
+          anchorId: clickedAnchor,
+          scrollPosition: metrics.scrollPosition,
+          scrollSize: metrics.scrollSize,
+        };
+      }
+
+      commitActiveAnchorId(clickedAnchor);
+      return;
+    }
+
+    updateActiveAnchorFromScroll();
+  }, [
+    axis,
+    cancelPendingScrollSpyUpdate,
+    cancelProgrammaticScroll,
+    commitActiveAnchorId,
+    updateActiveAnchorFromScroll,
+  ]);
+
+  const scheduleActiveUpdate = useCallback(
+    (delay = ACTIVE_UPDATE_DEBOUNCE_MS) => {
+      if (isProgrammaticScrollPinned()) {
+        return;
+      }
+
+      cancelPendingScrollSpyUpdate();
+
+      scrollTimeoutRef.current = setTimeout(() => {
+        scrollTimeoutRef.current = null;
+        updateActiveAnchorFromScroll();
+      }, delay);
+    },
+    [cancelPendingScrollSpyUpdate, isProgrammaticScrollPinned, updateActiveAnchorFromScroll],
+  );
+
+  const disconnectIntersectionObserver = useCallback(() => {
+    intersectionObserverRef.current?.disconnect();
+    intersectionObserverRef.current = null;
+  }, []);
+
+  const setupIntersectionObserver = useCallback(() => {
+    const content = scrollRef.current;
+    if (!content || typeof IntersectionObserver === 'undefined' || !scrollSpyEnabledRef.current) {
+      disconnectIntersectionObserver();
+      return;
+    }
+
+    disconnectIntersectionObserver();
+
+    const observer = new IntersectionObserver(
+      () => {
+        if (isProgrammaticScrollPinned()) {
+          return;
+        }
+
+        scheduleActiveUpdate(0);
+      },
+      {
+        root: content,
+        rootMargin: createWorkbenchSectionedPanelIntersectionRootMargin(offset, axis),
+        threshold: [...WORKBENCH_SECTIONED_PANEL_INTERSECTION_THRESHOLDS],
+      },
+    );
+
+    for (const anchorId of anchorOrder) {
+      const section = findPanelSection(content, anchorId);
+      if (section) {
+        observer.observe(section);
+      }
+    }
+
+    intersectionObserverRef.current = observer;
+  }, [
+    anchorOrder,
+    axis,
+    disconnectIntersectionObserver,
+    isProgrammaticScrollPinned,
+    offset,
+    scheduleActiveUpdate,
+  ]);
+
+  const refreshScrollSpy = useCallback(() => {
+    const content = scrollRef.current;
+    if (!content) return;
+
+    const nextEnabled = resolveScrollSpyEnabled(content);
+    scrollSpyEnabledRef.current = nextEnabled;
+    setScrollSpyEnabled(nextEnabled);
+
+    if (nextEnabled) {
+      setupIntersectionObserver();
+      if (!isProgrammaticScrollPinned()) {
+        scheduleActiveUpdate(0);
+      }
+      return;
+    }
+
+    disconnectIntersectionObserver();
+  }, [
+    disconnectIntersectionObserver,
+    isProgrammaticScrollPinned,
+    resolveScrollSpyEnabled,
+    scheduleActiveUpdate,
+    setupIntersectionObserver,
+  ]);
+
+  const scrollToAnchor = useCallback(
+    (anchorId: string) => {
+      const content = scrollRef.current;
+      if (!content) {
+        setActiveAnchorId(anchorId);
+        return;
+      }
+
+      const section = findPanelSection(content, anchorId);
+      if (!section) {
+        setActiveAnchorId(anchorId);
+        return;
+      }
+
+      cancelProgrammaticScroll();
+      cancelPendingScrollSpyUpdate();
+      preserveNavClickAnchorRef.current = null;
+
+      setActiveAnchorId(anchorId);
+
+      if (!scrollSpyEnabledRef.current) {
+        return;
+      }
+
+      const target = resolveWorkbenchSectionedPanelScrollTarget({
+        offset,
+        sectionStart: readSectionStart(content, section, axis),
+      });
+
+      programmaticScrollTargetAnchorRef.current = anchorId;
+      isProgrammaticScrollRef.current = true;
+
+      const durationMs = resolveWorkbenchSectionedPanelProgrammaticScrollSettleMs(scrollBehavior);
+
+      cancelProgrammaticScrollRef.current = animateSectionPanelScrollTo({
+        axis,
+        durationMs,
+        element: content,
+        onComplete: finishProgrammaticScroll,
+        target,
+      });
+    },
+    [
+      axis,
+      cancelPendingScrollSpyUpdate,
+      cancelProgrammaticScroll,
+      finishProgrammaticScroll,
+      offset,
+      scrollBehavior,
+      setActiveAnchorId,
+    ],
+  );
+
+  const handleContentScroll = useCallback(() => {
+    if (isProgrammaticScrollPinned()) {
+      return;
+    }
+
+    scheduleActiveUpdate();
+  }, [isProgrammaticScrollPinned, scheduleActiveUpdate]);
+
+  useEffect(() => {
+    const content = scrollRef.current;
+    if (!content) return undefined;
+
+    refreshScrollSpy();
+
+    const resizeObserver =
+      typeof ResizeObserver === 'undefined'
+        ? null
+        : new ResizeObserver(() => {
+            refreshScrollSpy();
+          });
+    resizeObserver?.observe(content);
+
+    const mutationObserver =
+      typeof MutationObserver === 'undefined'
+        ? null
+        : new MutationObserver(() => {
+            refreshScrollSpy();
+          });
+    mutationObserver?.observe(content, {
+      attributes: false,
+      characterData: false,
+      childList: true,
+      subtree: true,
+    });
+
+    return () => {
+      resizeObserver?.disconnect();
+      mutationObserver?.disconnect();
+      disconnectIntersectionObserver();
+      cancelPendingScrollSpyUpdate();
+    };
+  }, [
+    anchorOrder,
+    axis,
+    cancelPendingScrollSpyUpdate,
+    disconnectIntersectionObserver,
+    offset,
+    refreshScrollSpy,
+    scrollSpy,
+  ]);
+
+  useEffect(
+    () => () => {
+      cancelProgrammaticScroll();
+      cancelPendingScrollSpyUpdate();
+      disconnectIntersectionObserver();
+    },
+    [cancelPendingScrollSpyUpdate, cancelProgrammaticScroll, disconnectIntersectionObserver],
+  );
+
+  return {
+    handleContentScroll,
+    resolvedActiveAnchorId,
+    scrollRef,
+    scrollSpyEnabled,
+    scrollToAnchor,
+  };
+}

package/src/workbench/settings/workbench-settings-modal.css

@@ -0,0 +1,273 @@
+.workbench-settings-modal {
+  --ui-modal-width: 1120px;
+  --ui-modal-height: 760px;
+}
+
+.workbench-settings-modal__body {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  background: var(--color-bg);
+}
+
+.workbench-settings-search {
+  flex-shrink: 0;
+  padding: var(--workbench-settings-search-padding-block-start)
+    var(--workbench-settings-search-padding-inline)
+    var(--workbench-settings-search-padding-block-end);
+  background: var(--color-bg);
+}
+
+.workbench-settings-tabs {
+  height: 34px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: flex-end;
+  gap: 14px;
+  padding: 0 var(--workbench-settings-tabs-padding-inline);
+  border-bottom: 1px solid var(--color-border);
+  background: var(--color-bg);
+}
+
+.workbench-settings-tab {
+  --ui-button-height: var(--workbench-settings-tab-height);
+  --ui-button-min-height: 0;
+  --ui-button-padding: 0;
+  --ui-button-border: 0;
+  --ui-button-border-bottom: 1px solid transparent;
+  --ui-button-border-radius: 0;
+  --ui-button-color: var(--color-text-muted);
+  --ui-button-background: transparent;
+  --ui-button-font-family: inherit;
+  --ui-button-font-size: var(--font-size-sm);
+  --ui-button-font-weight: 400;
+  --ui-button-hover-color: var(--color-text);
+  --ui-button-hover-background: transparent;
+  --ui-button-disabled-color: var(--color-text-subtle);
+  --ui-button-disabled-background: transparent;
+  position: relative;
+  height: var(--workbench-settings-tab-height);
+  padding: 0;
+  border: 0;
+  border-bottom: 1px solid transparent;
+  color: var(--color-text-muted);
+  background: transparent;
+  font-family: inherit;
+  font-size: var(--font-size-sm);
+  cursor: pointer;
+}
+
+.workbench-settings-tab:hover {
+  color: var(--color-text);
+}
+
+.workbench-settings-tab:disabled,
+.workbench-settings-tab:disabled:hover {
+  color: var(--color-text-subtle);
+  cursor: default;
+}
+
+.workbench-settings-tab--active {
+  --ui-button-color: var(--color-text);
+  --ui-button-border-bottom: 1px solid
+    var(--vscode-focusBorder, var(--color-accent, var(--color-text)));
+  color: var(--color-text);
+  border-bottom-color: var(--vscode-focusBorder, var(--color-accent, var(--color-text)));
+}
+
+.workbench-settings-layout {
+  --ui-workbench-navigation-panel-nav-min-width: 160px;
+  --ui-workbench-navigation-panel-nav-width: 180px;
+  flex: 1;
+}
+
+.workbench-settings-sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: var(--workbench-settings-nav-padding-block) 0;
+  border-right: 0;
+}
+
+.workbench-settings-layout .ui-workbench-navigation-panel__nav-scroll {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.workbench-settings-layout
+  .ui-workbench-navigation-panel__nav-scroll
+  > .workbench-settings-nav-item {
+  margin-inline: var(--workbench-settings-content-padding-inline) 12px;
+  width: auto;
+  align-self: stretch;
+}
+
+.workbench-settings-nav-item {
+  --ui-button-width: 100%;
+  --ui-button-min-height: 24px;
+  --ui-button-height: auto;
+  --ui-button-display: flex;
+  --ui-button-align-items: center;
+  --ui-button-justify-content: flex-start;
+  --ui-button-padding: 0 8px;
+  --ui-button-border: 0;
+  --ui-button-border-radius: var(--radius-sm);
+  --ui-button-color: var(--color-text-muted);
+  --ui-button-background: transparent;
+  --ui-button-font-family: inherit;
+  --ui-button-font-size: var(--font-size-sm);
+  --ui-button-font-weight: 400;
+  --ui-button-text-align: left;
+  --ui-button-hover-color: var(--color-text);
+  --ui-button-hover-background: var(--color-surface-hover);
+  --ui-button-disabled-color: var(--color-text-subtle);
+  --ui-button-disabled-background: transparent;
+  width: 100%;
+  min-height: 24px;
+  display: flex;
+  align-items: center;
+  padding: 0 8px;
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--color-text-muted);
+  background: transparent;
+  font-family: inherit;
+  font-size: var(--font-size-sm);
+  text-align: left;
+  cursor: pointer;
+}
+
+.workbench-settings-nav-item:hover {
+  color: var(--color-text);
+  background: var(--color-surface-hover);
+}
+
+.workbench-settings-nav-item:disabled,
+.workbench-settings-nav-item:disabled:hover {
+  color: var(--color-text-subtle);
+  background: transparent;
+  cursor: default;
+}
+
+.workbench-settings-nav-item--active,
+.workbench-settings-nav-item--active:hover {
+  --ui-button-color: var(--color-text);
+  --ui-button-background: var(--color-surface-hover);
+  --ui-button-font-weight: 600;
+  --ui-button-hover-color: var(--color-text);
+  --ui-button-hover-background: var(--color-surface-hover);
+  color: var(--color-text);
+  background: var(--color-surface-hover);
+  font-weight: 600;
+}
+
+.workbench-settings-content {
+  min-width: 0;
+  padding: 0;
+}
+
+.workbench-settings-content > .ui-workbench-navigation-panel__content-scroll > * {
+  padding-inline: var(--workbench-settings-content-padding-inline);
+  padding-top: var(--workbench-settings-content-padding-block-start);
+}
+
+.workbench-settings-content > .ui-workbench-navigation-panel__content-scroll > *:last-child {
+  padding-bottom: var(--workbench-settings-content-padding-block-end);
+}
+
+.workbench-settings-section {
+  max-width: 920px;
+  padding-top: 0;
+}
+
+.workbench-settings-section__title {
+  margin: 0 0 10px;
+  color: var(--color-text);
+  font-size: 1.45rem;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.workbench-settings-section__description {
+  max-width: 760px;
+  margin: 0 0 18px;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
+  line-height: 1.5;
+}
+
+.workbench-settings-footer__spacer {
+  flex: 1;
+}
+
+.workbench-settings-badge-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.workbench-settings-contribution-list {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.workbench-settings-contribution-field {
+  padding-bottom: 14px;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.workbench-settings-contribution-field:last-child {
+  border-bottom: 0;
+}
+
+.workbench-settings-contribution-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.workbench-settings-contribution-default {
+  display: block;
+  margin-top: 8px;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.workbench-appearance-settings {
+  display: grid;
+  gap: 14px;
+  max-width: 560px;
+}
+
+.workbench-settings-section .ui-select__trigger,
+.workbench-settings-section .ui-input,
+.workbench-profile-section .ui-select__trigger,
+.workbench-profile-section .ui-input,
+.workbench-appearance-settings .ui-select__trigger,
+.workbench-appearance-settings .ui-input {
+  color: var(--color-input-text, var(--color-text));
+  background: var(--color-input-bg, var(--color-surface-elevated));
+  border-color: var(--color-input-border, var(--color-border));
+}
+
+.workbench-appearance-settings__field {
+  max-width: 520px;
+}
+
+.workbench-appearance-settings__description {
+  margin: 8px 0 0;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
+  line-height: 1.45;
+}
+
+.workbench-settings-empty {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
+}