zidane-ui 9.0.4 → 9.1.3

package/src/chat/sidebar/SpacesSection.tsx

@@ -1,256 +0,0 @@
-/**
- * Settings › Spaces: the opt-in Spaces feature (`settings.spaces`, off by
- * default) and its list (`settings.spaceList`), over the settings host
- * (`zidane-ui/settings`).
- *
- * Each space has a name, an icon (the project icon picker), and whatever the
- * app shows under it (`renderDefaults`: the desktop app's defaults for new
- * sessions in it). The list order is the sidebar switcher's (and the slide
- * direction). The Default space can be renamed but not deleted; deleting
- * another one moves its sessions back to Default (their stored id no longer
- * resolves).
- */
-import { useEffect, useState, type CSSProperties, type ReactNode } from 'react';
-import { DEFAULT_SPACE_ID, newSpaceId, normalizeSpaces, type Space, type SpaceIcon } from 'zidane/chat/pure';
-
-import { useConfirm } from '../../app/useConfirm';
-import { FloatingSurface } from '../../components/floating/FloatingSurface';
-import { usePopover } from '../../components/floating/usePopover';
-import { FormSection, INPUT_CLASS, ROW_CLASS, SwitchRow } from '../../components/Form';
-import { IconButton } from '../../components/IconButton';
-import { useSettingsDocument, useSettingsHost } from '../../settings/SettingsProvider';
-import { ICON_PICKER_WIDTH, IconPicker } from './ProjectIcon';
-import { SpaceGlyph } from './SpaceSwitcher';
-import { useSidebarLabels } from './useSidebarLabels';
-
-/** Props of {@link SpacesSection}. */
-export interface SpacesSectionProps {
-  /**
-   * What a space shows under its name row (its defaults for new sessions). `update` patches the space in
-   * the list. Absent: nothing.
-   */
-  renderDefaults?: (space: Space, update: (patch: (space: Space) => Space) => void) => ReactNode;
-  /** Extra classes on the root. */
-  className?: string;
-  /** Inline styles on the root. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders the Spaces sections: the switch, then the list while it is on. Nothing until the settings are read.
- *
- * @param props - The per-space rows, `className` and `style`.
- */
-export function SpacesSection({ renderDefaults, className = '', style }: SpacesSectionProps) {
-  const labels = useSidebarLabels();
-  const host = useSettingsHost();
-  const document = useSettingsDocument();
-  const confirm = useConfirm();
-  if (document.status !== 'ready') return null;
-  const settings = document.values;
-  const on = settings.spaces === true;
-  const spaces = normalizeSpaces(settings.spaceList);
-
-  const patch = (next: Parameters<NonNullable<typeof host.update>>[0]) =>
-    void host.update?.(next).catch(() => undefined);
-  const write = (next: Space[]) => patch({ spaceList: normalizeSpaces(next) });
-  const update = (id: string, change: (space: Space) => Space) =>
-    write(spaces.map((s) => (s.id === id ? change(s) : s)));
-
-  const move = (index: number, delta: -1 | 1) => {
-    const to = index + delta;
-    if (to < 0 || to >= spaces.length) return;
-    const next = [...spaces];
-    const [moved] = next.splice(index, 1);
-    next.splice(to, 0, moved!);
-    write(next);
-  };
-
-  const remove = async (space: Space) => {
-    const fallback = spaces.find((s) => s.id === DEFAULT_SPACE_ID)?.name ?? labels.defaultSpaceName;
-    const ok = await confirm({
-      title: labels.deleteSpaceQuestion(space.name),
-      message: labels.deleteSpaceMessage(fallback),
-      confirmLabel: labels.deleteSpace,
-      destructive: true,
-    });
-    if (ok) write(spaces.filter((s) => s.id !== space.id));
-  };
-
-  const add = () => write([...spaces, { id: newSpaceId(spaces), name: labels.newSpaceName(spaces.length + 1) }]);
-
-  return (
-    // The page's section rhythm: these two sit in one slot of it.
-    <div className={`space-y-5${className ? ` ${className}` : ''}`} style={style}>
-      <FormSection title={labels.spacesTitle}>
-        <SwitchRow
-          label={labels.useSpaces}
-          description={labels.useSpacesDescription}
-          on={on}
-          onToggle={() => patch({ spaces: !on })}
-        />
-      </FormSection>
-      {on && (
-        <FormSection
-          title={labels.yourSpaces}
-          trailing={
-            <IconButton icon="i-ph-plus" label={labels.addSpace} title={labels.addSpace} size="sm" onClick={add} />
-          }
-        >
-          {spaces.map((space, index) => (
-            <SpaceRow
-              key={space.id}
-              space={space}
-              first={index === 0}
-              last={index === spaces.length - 1}
-              onRename={(name) => update(space.id, (s) => ({ ...s, name }))}
-              onIcon={(icon) =>
-                update(space.id, (s) => {
-                  const { icon: _old, ...rest } = s;
-                  return icon ? { ...rest, icon } : rest;
-                })
-              }
-              onMove={(delta) => move(index, delta)}
-              onDelete={space.id === DEFAULT_SPACE_ID ? undefined : () => void remove(space)}
-            >
-              {renderDefaults?.(space, (change) => update(space.id, change))}
-            </SpaceRow>
-          ))}
-        </FormSection>
-      )}
-    </div>
-  );
-}
-
-function SpaceRow({
-  space,
-  first,
-  last,
-  onRename,
-  onIcon,
-  onMove,
-  onDelete,
-  children,
-}: {
-  space: Space;
-  first: boolean;
-  last: boolean;
-  onRename: (name: string) => void;
-  onIcon: (icon: SpaceIcon | null) => void;
-  onMove: (delta: -1 | 1) => void;
-  /** Absent for the Default space (not deletable). */
-  onDelete?: () => void;
-  children?: ReactNode;
-}) {
-  const labels = useSidebarLabels();
-  const [name, setName] = useState(space.name);
-  // eslint-disable-next-line react-hooks/set-state-in-effect -- a rename saved elsewhere replaces the draft
-  useEffect(() => setName(space.name), [space.name]);
-  const commitName = () => {
-    const trimmed = name.trim();
-    if (trimmed && trimmed !== space.name) onRename(trimmed);
-    else setName(space.name);
-  };
-
-  return (
-    <div
-      data-testid={`space-row-${space.id}`}
-      role="group"
-      aria-label={space.name}
-      className="flex flex-col gap-1 py-1"
-    >
-      <div className={ROW_CLASS}>
-        <SpaceIconButton space={space} onIcon={onIcon} />
-        <input
-          type="text"
-          value={name}
-          aria-label={labels.spaceNameOf(space.name)}
-          onChange={(e) => setName(e.target.value)}
-          onBlur={commitName}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter') {
-              e.preventDefault();
-              e.currentTarget.blur();
-            } else if (e.key === 'Escape') {
-              setName(space.name);
-            }
-          }}
-          className={`${INPUT_CLASS} flex-1 min-w-0`}
-        />
-        <IconButton
-          icon="i-ph-arrow-up"
-          label={labels.moveSpaceUp(space.name)}
-          size="sm"
-          disabled={first}
-          onClick={() => onMove(-1)}
-        />
-        <IconButton
-          icon="i-ph-arrow-down"
-          label={labels.moveSpaceDown(space.name)}
-          size="sm"
-          disabled={last}
-          onClick={() => onMove(1)}
-        />
-        {onDelete ? (
-          <IconButton icon="i-ph-trash" label={labels.deleteSpaceNamed(space.name)} size="sm" onClick={onDelete} />
-        ) : (
-          <span aria-hidden className="w-6 shrink-0" />
-        )}
-      </div>
-      {children}
-    </div>
-  );
-}
-
-function SpaceIconButton({ space, onIcon }: { space: Space; onIcon: (icon: SpaceIcon | null) => void }) {
-  const labels = useSidebarLabels();
-  const popover = usePopover();
-  return (
-    <>
-      <button
-        ref={(node) => {
-          // eslint-disable-next-line react-hooks/immutability -- the popover's anchor, set by its element
-          popover.triggerRef.current = node;
-        }}
-        type="button"
-        title={labels.changeSpaceIcon}
-        aria-label={labels.changeIconFor(space.name)}
-        aria-haspopup="dialog"
-        aria-expanded={popover.open}
-        onClick={() => popover.toggle()}
-        className="zg-press-soft inline-flex items-center justify-center w-7 h-7 shrink-0 p-0 rounded-zg-md border-0 bg-transparent cursor-pointer hover:before:bg-[var(--zg-row-hover)]"
-      >
-        <SpaceGlyph space={space} />
-      </button>
-      <FloatingSurface
-        ref={(node) => {
-          // eslint-disable-next-line react-hooks/immutability -- the popover's surface, set by its element
-          popover.surfaceRef.current = node;
-        }}
-        open={popover.open}
-        anchor={{ element: popover.triggerRef.current }}
-        side="bottom"
-        align="start"
-        offset={4}
-        width={ICON_PICKER_WIDTH}
-        role="dialog"
-        aria-label={labels.chooseSpaceIcon}
-        className="p-2"
-        // A full-window settings layer sits at z-index 90 (`.zg-modal-screen`); the
-        // surface's own z-50 would open BEHIND it, out of reach.
-        style={{ zIndex: 100 }}
-      >
-        {popover.open && (
-          <IconPicker
-            hasIcon={Boolean(space.icon)}
-            resetLabel={labels.resetToInitial}
-            onPick={(icon) => {
-              onIcon(icon);
-              popover.close();
-            }}
-          />
-        )}
-      </FloatingSurface>
-    </>
-  );
-}

package/src/chat/sidebar/index.ts

@@ -1,92 +0,0 @@
-/** The session sidebar: the list with its groups, rows, filters, search and spaces, and the pieces around it. */
-export { useSidebarLabels } from './useSidebarLabels';
-export { usePinnedProjects } from './usePinnedProjects';
-export { useSessionActivity } from './useSessionActivity';
-export { useCompactionProgress } from './useCompactionProgress';
-export { useSessionBadges } from './useSessionBadges';
-export { useSessionDirectoryView, type SessionDirectoryView } from './useSessionDirectoryView';
-export { MainSessionRow, type MainSessionRowProps } from './MainSessionRow';
-export { useMainSession } from './use-main-session';
-export { SidebarFilterMenu, type SidebarFilterMenuProps } from './SidebarFilterMenu';
-export { SidebarSearchRow, type SidebarSearchRowProps } from './SidebarSearchRow';
-export { useSessionSearch, type SessionContentSearch } from './useSessionSearch';
-export { SpaceGlyph, SpaceSwitcher, type SpaceGlyphProps, type SpaceSwitcherProps } from './SpaceSwitcher';
-export {
-  ICON_PICKER_WIDTH,
-  IconPicker,
-  ProjectIconButton,
-  useProjectIcons,
-  type IconPickerProps,
-  type ProjectIconButtonProps,
-} from './ProjectIcon';
-export {
-  SidebarHostProvider,
-  useSidebarHost,
-  useSidebarNotice,
-  type SidebarHostProviderProps,
-} from './SidebarHostProvider';
-export {
-  archiveProjectPrompt,
-  deleteProjectPrompt,
-  sessionMenuItems,
-  spaceRows,
-  useConfirmDeleteSession,
-  useEnvironmentActions,
-  useEnvironmentCommands,
-  useProjectSessionActions,
-  useSessionMenuItems,
-  type SessionMenuActions,
-  type SessionMenuContext,
-  type SessionMenuSurfaceActions,
-  type SessionMenuTarget,
-  type SidebarProject,
-} from './session-menu';
-export {
-  EnvironmentChip,
-  ProjectChip,
-  type EnvironmentChipProps,
-  type ProjectChipProps,
-  type RowProject,
-} from './RowChips';
-export {
-  ARRIVAL_MS,
-  createSidebarLive,
-  useArrival,
-  type SidebarBadgeFocus,
-  type SidebarLive,
-  type SidebarLiveOptions,
-  type SidebarRowArtifactsProps,
-  type SidebarRowMetaProps,
-} from './sidebar-live';
-export { SidebarSessionRow, type SidebarRowHandlers, type SidebarSessionRowProps } from './SidebarSessionRow';
-export { SidebarGroupHeader, type SidebarGroupHeaderProps, type SidebarHeaderRow } from './SidebarGroupHeader';
-export { useSidebarKeyboardNav, type SidebarKeyboardNavOptions } from './useSidebarKeyboardNav';
-export {
-  SidebarFrame,
-  useSidebarFrame,
-  type SidebarChromeInset,
-  type SidebarFrameOptions,
-  type SidebarFrameProps,
-  type SidebarFrameState,
-} from './SidebarFrame';
-export {
-  NewSessionButton,
-  SessionSidebar,
-  type NewSessionButtonProps,
-  type SessionSidebarProps,
-  type SidebarRowSession,
-  type SidebarSpaceSlide,
-} from './SessionSidebar';
-export {
-  SidebarCompactingIndicator,
-  SidebarFooter,
-  SidebarSignInPrompt,
-  SidebarUsageIndicator,
-  type SidebarCompactingIndicatorProps,
-  type SidebarFooterProps,
-  type SidebarSettingsNote,
-  type SidebarSignInPromptProps,
-  type SidebarUsageIndicatorProps,
-} from './SidebarFooter';
-export { SidebarToggleButton, type SidebarToggleButtonProps } from './SidebarToggleButton';
-export { SpacesSection, type SpacesSectionProps } from './SpacesSection';