zidane-ui 9.1.1 → 9.1.4

package/src/chat/sidebar/SidebarFrame.tsx

@@ -1,154 +0,0 @@
-/**
- * The sidebar's frame: the aside that animates its width open and shut, the
- * sheet that holds the content at full width and slides out with it, the
- * drag strip that clears a window's native controls (`chromeInset`), and the
- * resize handle on its outer edge.
- *
- * Collapsed = absent, after the animation: `useSidebarFrame` keeps the aside
- * mounted for `--zg-panel-ms` so the width can animate to 0 while the sheet
- * slides out with it; reduced / off motion makes that instant. A frame that
- * mounts open (launch, reload) draws at its width at once: only an expand
- * mounts it collapsed first so it slides open. Under a
- * `LayoutBudgetProvider` (`zidane-ui/workspace`) the width and the drag cap
- * follow the window's budget, and a budget-forced collapse hides it too.
- */
-import type { CSSProperties, ReactNode } from 'react';
-import { useRef } from 'react';
-
-import { DEFAULT_APPEARANCE, LIMITS } from '../../appearance/headless/prefs';
-import { useResizeDrag } from '../../hooks/useResizeDrag';
-import { readPanelMs, usePresence } from '../../motion/presence';
-import { useLayoutBudgetOptional } from '../../workspace/LayoutBudget';
-
-/** What {@link useSidebarFrame} reads. */
-export interface SidebarFrameOptions {
-  /** The user collapsed the sidebar. */
-  collapsed: boolean;
-  /** The width the user wants (px). */
-  width: number;
-  /** A drag ended at this width: keep it. */
-  onWidthCommit: (width: number) => void;
-  /** The narrowest drag. Default: the appearance limit. */
-  minWidth?: number;
-  /** The widest drag without a layout budget. Default: the appearance limit. */
-  maxWidth?: number;
-  /** A double-click on the handle goes back to this width. Default: the appearance default. */
-  defaultWidth?: number;
-}
-
-/** The frame's state, for {@link SidebarFrame}. */
-export interface SidebarFrameState {
-  /** The aside is mounted (open, or animating shut). */
-  mounted: boolean;
-  /** Fully open (not entering or closing). */
-  open: boolean;
-  /** The width shown (px). */
-  width: number;
-  /** The aside, for the drag's live CSS var. */
-  asideRef: React.RefObject<HTMLElement | null>;
-  /** The resize handle's props and whether a drag is going. */
-  drag: ReturnType<typeof useResizeDrag>;
-}
-
-/**
- * The frame's presence, width and drag.
- *
- * @param options - Collapsed, the wanted width and where a drag commits.
- */
-export function useSidebarFrame(options: SidebarFrameOptions): SidebarFrameState {
-  const {
-    collapsed,
-    width: wanted,
-    onWidthCommit,
-    minWidth = LIMITS.sidebarWidth.min,
-    maxWidth = LIMITS.sidebarWidth.max,
-    defaultWidth = DEFAULT_APPEARANCE.sidebarWidth,
-  } = options;
-  const budget = useLayoutBudgetOptional();
-  const presence = usePresence(!collapsed && !(budget?.sidebarForcedCollapsed ?? false), {
-    enter: true,
-    exitMs: readPanelMs,
-  });
-  // The effective width comes from the layout budget (it may be shrunk to keep the chat readable).
-  const width = budget && budget.sidebarWidth > 0 ? budget.sidebarWidth : wanted;
-  const asideRef = useRef<HTMLElement | null>(null);
-  const max = budget ? Math.max(minWidth, budget.getCaps().sidebarMax) : maxWidth;
-  const drag = useResizeDrag({
-    value: width,
-    min: minWidth,
-    max,
-    defaultValue: defaultWidth,
-    edge: 'end',
-    target: { ref: asideRef, cssVar: '--zg-sidebar-w' },
-    onCommit: onWidthCommit,
-  });
-  return { mounted: presence.mounted, open: presence.state === 'open', width, asideRef, drag };
-}
-
-/** The space a window's native controls (macOS traffic lights) take at the sheet's top-left, as CSS lengths. */
-export interface SidebarChromeInset {
-  /** The drag strip's height: its centerline is the controls'. */
-  height: string;
-  /** What the strip keeps clear from the left edge. */
-  width: string;
-}
-
-/** Props of {@link SidebarFrame}. */
-export interface SidebarFrameProps {
-  /** The frame's state (`useSidebarFrame`). */
-  frame: SidebarFrameState;
-  /** A drag strip clearing the window's native controls. Absent: none. */
-  chromeInset?: SidebarChromeInset;
-  /** The sheet's content, top to bottom. */
-  children: ReactNode;
-  /** Names the aside's landmark (several sidebars on one page each need their own). Absent: unnamed. */
-  ariaLabel?: string;
-  /** Extra classes on the aside. */
-  className?: string;
-  /** Inline styles on the aside. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders the sidebar's aside, sheet, drag strip and resize handle. Render it only while `frame.mounted`.
- *
- * @param props - The frame state, the chrome inset, the content, its name, `className` and `style`.
- */
-export function SidebarFrame({ frame, chromeInset, children, ariaLabel, className = '', style }: SidebarFrameProps) {
-  const { open, width, asideRef, drag } = frame;
-  return (
-    <aside
-      ref={asideRef}
-      {...(ariaLabel ? { 'aria-label': ariaLabel } : {})}
-      data-collapsed={!open}
-      aria-hidden={!open}
-      // z-[2]: its clip-path makes it a stacking context, and the resize handle that
-      // straddles its edge must paint over the column next to it.
-      className={`zg-sidebar relative z-[2] shrink-0 h-full bg-[var(--zg-tray)]${className ? ` ${className}` : ''}`}
-      /* Width lives in the stylesheet (`.zg-sidebar[data-collapsed]`), not
-         inline: an inline width would outrank `[data-collapsed]` and kill the
-         slide. Only the var is inline. */
-      style={{ '--zg-sidebar-w': `${width}px`, ...style } as CSSProperties}
-    >
-      {/*
-       * The aside is the animated spacer; this sheet holds the content at
-       * full width and is anchored to the aside's RIGHT edge, so as the
-       * aside narrows the whole sheet slides left as one rigid piece.
-       */}
-      <div className="zg-sidebar-sheet absolute inset-y-0 right-0 flex flex-col">
-        {chromeInset && (
-          /*
-           * Drag strip = [spacer]: its height puts its centerline on the native
-           * controls' and the spacer clears them (the app authors both, in its
-           * own units: the desktop app in DIP so page zoom never drifts them).
-           */
-          <div className="zg-drag shrink-0 flex items-center" style={{ height: chromeInset.height }}>
-            <span aria-hidden className="shrink-0" style={{ width: chromeInset.width }} />
-          </div>
-        )}
-        {children}
-      </div>
-      {open && <div {...drag.handleProps} data-active={drag.active} className="zg-resize-handle zg-no-drag -right-1" />}
-    </aside>
-  );
-}

package/src/chat/sidebar/SidebarGroupHeader.tsx

@@ -1,263 +0,0 @@
-/**
- * A group header in the session list (project, date or state bucket):
- * leading glyph or project icon picker, collapse toggle, and for a project
- * folder of this machine a hover "+" that starts a session there, a pin,
- * and a right-click menu: new session, pin, Finder, copy path, move the
- * project to another space, archive or delete its conversations. It sticks
- * to the top of the list while its rows scroll (`.zg-sticky-head`).
- *
- * The icon slot and the "+" are SIBLINGS of the collapse button (never nested).
- *
- * With `onOpenProject` (the project home), a project folder's name opens its
- * home (a server's too) and its collapse is a chevron after the buttons; the
- * header of the home on show is `open`. With `onOpenChats`, the Chats name
- * starts a new chat with no folder the same way, and is `open` while it shows.
- */
-import { useState, type CSSProperties } from 'react';
-import { resolveSessionSpace, type Space } from 'zidane/chat/pure';
-
-import { IconButton } from '../../components/IconButton';
-import { RowActionsMenu, type RowActionItem } from '../../components/RowActionsMenu';
-import { HostBadge } from '../HostBadge';
-import { GroupGlyph, SessionGroupHeader } from '../SessionGroupHeader';
-import type { HostView } from '../headless/hosts';
-import type { ProjectIcon } from '../headless/sidebar/project-icons';
-import { groupsByFolder, type SidebarListRow } from '../headless/sidebar/rows';
-import type { SidebarGroupBy } from '../headless/sidebar/types';
-import { ProjectIconButton } from './ProjectIcon';
-import { spaceRows, type SidebarProject } from './session-menu';
-
-/** A project folder as the sidebar names it: its path, and the server it is on (absent: this computer). */
-export interface SidebarProjectRef {
-  /** The folder. */
-  path: string;
-  /** The saved server; absent: this computer. */
-  hostId?: string;
-}
-import { useSidebarHost } from './SidebarHostProvider';
-import { useSidebarLabels } from './useSidebarLabels';
-
-/** A group header row. */
-export type SidebarHeaderRow = Extract<SidebarListRow, { kind: 'header' }>;
-
-/** Props of {@link SidebarGroupHeader}. */
-export interface SidebarGroupHeaderProps {
-  /** The header. */
-  row: SidebarHeaderRow;
-  /** The view: which glyph a header shows, and whether its groups are folders. */
-  groupBy: SidebarGroupBy;
-  /** The project's picked icon. */
-  icon?: ProjectIcon;
-  /** Picks (or, with `null`, resets) a project's icon. */
-  onAssignIcon: (fullPath: string, icon: ProjectIcon | null) => void;
-  /** Collapses or expands the group. */
-  onToggle: (id: string) => void;
-  /** Starts a session in the project's folder. */
-  onNewSessionIn: (fullPath: string) => void;
-  /** The spaces to move the project between while Spaces is on; `null` off. */
-  spaces: readonly Space[] | null;
-  /** The space the list shows: where the project moves from. */
-  spaceId: string;
-  /** Moves the project to another space. */
-  onMoveProject: (project: SidebarProject, spaceId: string) => void;
-  /** The project is pinned at the top of the list. */
-  pinned: boolean;
-  /** Pins or unpins the project. */
-  onSetPinned: (fullPath: string, pinned: boolean) => void;
-  /** Some of the project's listed conversations are not archived yet. */
-  canArchive: boolean;
-  /** Archives the project's conversations (after a confirmation). */
-  onArchiveProject: (project: SidebarProject, label: string) => void;
-  /** Deletes the project's conversations (after a confirmation). */
-  onDeleteProject: (project: SidebarProject, label: string) => void;
-  /** The remote host a server folder's header names, as a badge that opens the host's settings. */
-  server?: HostView;
-  /** Opens a project folder's home. Absent: the name toggles collapse. */
-  onOpenProject?: (project: SidebarProjectRef) => void;
-  /** Starts a new chat with no folder from the Chats name. Absent: the name toggles collapse. */
-  onOpenChats?: () => void;
-  /** This project's home, or for Chats a new chat with no folder, is the one shown. */
-  open?: boolean;
-  /** Extra classes on the header. */
-  className?: string;
-  /** Inline styles on the header. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders a group header of the sidebar list.
- *
- * @param props - The header row, the view, its icon and the project actions.
- */
-export function SidebarGroupHeader({
-  row,
-  groupBy,
-  icon,
-  onAssignIcon,
-  onToggle,
-  onNewSessionIn,
-  spaces,
-  spaceId,
-  onMoveProject,
-  pinned,
-  onSetPinned,
-  canArchive,
-  onArchiveProject,
-  onDeleteProject,
-  server,
-  onOpenProject,
-  onOpenChats,
-  open = false,
-  className = '',
-  style,
-}: SidebarGroupHeaderProps) {
-  const labels = useSidebarLabels();
-  const { revealPath, openHostSettings } = useSidebarHost();
-  const byFolder = groupsByFolder(groupBy);
-  const isProjectFolder = byFolder && !row.chats && !row.favorites;
-  // A project folder on this machine (a server's headers carry no path).
-  const path = isProjectFolder ? row.fullPath : undefined;
-  // A repository's group lists its sessions on every machine: moving, archiving and deleting reach them all.
-  const repo = row.repoKey ? { repoKey: row.repoKey } : {};
-  /** Where the right-click opened the project's menu; `null` while it is closed. */
-  const [menuAt, setMenuAt] = useState<{ x: number; y: number } | null>(null);
-  const menuItems: RowActionItem[] = path
-    ? [
-        { id: 'new-session', label: labels.newSessionIn(row.label), onSelect: () => onNewSessionIn(path) },
-        {
-          id: 'pin',
-          label: pinned ? labels.unpinProject : labels.pinProject,
-          onSelect: () => onSetPinned(path, !pinned),
-        },
-        ...(revealPath
-          ? [
-              {
-                id: 'reveal',
-                label: labels.menuReveal,
-                group: 'folder',
-                onSelect: () => void revealPath(path).catch(() => undefined),
-              },
-            ]
-          : []),
-        {
-          id: 'copy-path',
-          label: labels.menuCopyPath,
-          group: 'folder',
-          onSelect: () => void navigator.clipboard.writeText(path).catch(() => undefined),
-        },
-        ...(spaces && spaces.length > 1
-          ? [
-              {
-                id: 'move-project',
-                label: labels.menuMoveProjectToSpace,
-                group: 'spaces',
-                items: spaceRows(spaces, resolveSessionSpace(spaceId, spaces), (to) =>
-                  onMoveProject({ path, spaceId, ...repo }, to),
-                ),
-              },
-            ]
-          : []),
-        ...(canArchive
-          ? [
-              {
-                id: 'archive-project',
-                label: labels.menuArchiveProject,
-                group: 'project-sessions',
-                onSelect: () => onArchiveProject({ path, spaceId, ...repo }, row.label),
-              },
-            ]
-          : []),
-        {
-          id: 'delete-project',
-          label: labels.menuDeleteProject,
-          group: 'project-sessions',
-          destructive: true,
-          onSelect: () => onDeleteProject({ path, spaceId, ...repo }, row.label),
-        },
-      ]
-    : [];
-
-  return (
-    <>
-      <SessionGroupHeader
-        className={`zg-sticky-head${className ? ` ${className}` : ''}`}
-        {...(style ? { style } : {})}
-        onContextMenu={
-          path
-            ? (event) => {
-                event.preventDefault();
-                setMenuAt({ x: event.clientX, y: event.clientY });
-              }
-            : undefined
-        }
-        id={row.id}
-        label={row.label}
-        collapsed={row.collapsed}
-        onToggle={onToggle}
-        {...(onOpenProject && isProjectFolder && row.fullPath
-          ? {
-              onOpen: () => onOpenProject({ path: row.fullPath!, ...(row.hostId ? { hostId: row.hostId } : {}) }),
-              active: open,
-            }
-          : onOpenChats && row.chats
-            ? { onOpen: onOpenChats, active: open }
-            : {})}
-        icon={
-          row.favorites ? (
-            <GroupGlyph icon="i-ph-star" />
-          ) : row.chats ? (
-            <GroupGlyph icon="i-ph-chats" />
-          ) : byFolder ? (
-            <ProjectIconButton
-              fullPath={row.fullPath}
-              label={row.label}
-              icon={icon}
-              isGitRepo={row.isGitRepo}
-              onAssign={onAssignIcon}
-            />
-          ) : (
-            <GroupGlyph icon={groupBy === 'date' ? 'i-ph-calendar-blank' : 'i-ph-lightning'} />
-          )
-        }
-        action={
-          // Same reveal as the rows' 3-dots (`.zg-row-dots`: hover + focus-within, so keyboard-reachable).
-          // The "+" and an outline pin appear on hover; a pinned project keeps its filled pin, at the far right, on show.
-          row.hostId && server ? (
-            <HostBadge
-              host={server}
-              icon
-              {...(openHostSettings ? { onOpen: () => void openHostSettings(server.id) } : {})}
-            />
-          ) : isProjectFolder && row.fullPath ? (
-            <>
-              <IconButton
-                icon="i-ph-plus"
-                label={labels.newSessionIn(row.label)}
-                size="xs"
-                className="zg-row-dots"
-                onClick={(event) => {
-                  event.stopPropagation();
-                  onNewSessionIn(row.fullPath!);
-                }}
-              />
-              <IconButton
-                icon={pinned ? 'i-ph-push-pin-fill' : 'i-ph-push-pin'}
-                label={pinned ? labels.unpinNamed(row.label) : labels.pinNamed(row.label)}
-                size="xs"
-                aria-pressed={pinned}
-                className={pinned ? undefined : 'zg-row-dots'}
-                onClick={(event) => {
-                  event.stopPropagation();
-                  onSetPinned(row.fullPath!, !pinned);
-                }}
-              />
-            </>
-          ) : undefined
-        }
-      />
-      {path && (
-        <RowActionsMenu open={menuAt !== null} position={menuAt} onClose={() => setMenuAt(null)} items={menuItems} />
-      )}
-    </>
-  );
-}

package/src/chat/sidebar/SidebarHostProvider.tsx

@@ -1,51 +0,0 @@
-/**
- * Puts a `SidebarHost` in context for the sidebar's rows and every other
- * surface that offers a session's menu (the session header), with the way
- * the app tells the user a command's outcome (`notify`).
- */
-import { createContext, useContext, useMemo, type ReactNode } from 'react';
-
-import type { SidebarHost } from '../headless/sidebar/host';
-
-interface SidebarHostContextValue {
-  host: SidebarHost;
-  notify: (message: string) => void;
-}
-
-const browserAlert = (message: string): void => {
-  globalThis.alert?.(message);
-};
-
-const NO_HOST: SidebarHostContextValue = { host: {}, notify: browserAlert };
-
-const SidebarHostContext = createContext<SidebarHostContextValue>(NO_HOST);
-
-/** Props of {@link SidebarHostProvider}. */
-export interface SidebarHostProviderProps {
-  /** The platform's sidebar capabilities. */
-  host: SidebarHost;
-  /** Tells the user a command's outcome or failure. Default: the browser's `alert`. */
-  notify?: (message: string) => void;
-  /** The app's components. */
-  children: ReactNode;
-}
-
-/**
- * Provides a {@link SidebarHost} to the sidebar and the session menus below.
- *
- * @param props - The `host`, an optional `notify` and the `children`.
- */
-export function SidebarHostProvider({ host, notify = browserAlert, children }: SidebarHostProviderProps) {
-  const value = useMemo(() => ({ host, notify }), [host, notify]);
-  return <SidebarHostContext.Provider value={value}>{children}</SidebarHostContext.Provider>;
-}
-
-/** The nearest {@link SidebarHost}; an empty host (every capability left out) outside a provider. */
-export function useSidebarHost(): SidebarHost {
-  return useContext(SidebarHostContext).host;
-}
-
-/** How the nearest {@link SidebarHostProvider} tells the user something. */
-export function useSidebarNotice(): (message: string) => void {
-  return useContext(SidebarHostContext).notify;
-}

package/src/chat/sidebar/SidebarRowView.tsx

@@ -1,151 +0,0 @@
-/**
- * An extension's row among a space's sessions (the `SidebarRow` token): its status or
- * icon, title, badges, time and subtitle on a session row's grid, its actions
- * in the row menu, and the sessions its `children` query lists nested under
- * it. A click opens its target (`open`); an item without one toggles its
- * sessions, and its button says whether they show (`aria-expanded`). The
- * menu trigger is named for the item (`labels.itemActions`).
- *
- * The sidebar's arrow keys walk sessions only and skip item rows: an arrow
- * press opens what it lands on, and an item's target may run an extension
- * command. Tab reaches an item's button and its menu.
- */
-import { memo, useCallback, useMemo, type CSSProperties, type ReactNode } from 'react';
-
-import { useMinuteTick } from '../../hooks/useMinuteTick';
-import type { ExtensionItem, SidebarRowActionWire } from '../../extensions/headless/wire';
-import { badgeToneClass } from '../../session/ArtifactRowChips';
-import type { RowActionItem } from '../../components/RowActionsMenu';
-import { SessionListRow } from '../SessionListRow';
-import { StatusDot, type SessionDotState } from '../StatusDot';
-import { relativeTime } from '../headless/session-list';
-import { SidebarChip } from './SidebarDecoration';
-import { useSidebarLabels } from './useSidebarLabels';
-
-/** An item's run state as a session dot. */
-const DOT: Record<NonNullable<ExtensionItem<'sidebar-row'>['item']['status']>, SessionDotState> = {
-  idle: 'idle',
-  running: 'running',
-  blocked: 'attention',
-  completed: 'completed',
-  error: 'error',
-};
-
-/** Props of {@link SidebarRowView}. */
-export interface SidebarRowViewProps {
-  /** The row's id (`i-<item id>`): collapse is kept under it. */
-  rowId: string;
-  /** The item. */
-  entry: ExtensionItem<'sidebar-row'>;
-  /** Its sessions are hidden. */
-  collapsed: boolean;
-  /** How many sessions it lists. */
-  childCount: number;
-  /** Opens the item's target. */
-  onOpen: (entry: ExtensionItem<'sidebar-row'>) => void;
-  /** Runs one of its actions. Absent: the actions show disabled. */
-  onRunAction?: (entry: ExtensionItem<'sidebar-row'>, action: SidebarRowActionWire) => void;
-  /** Shows or hides its sessions. */
-  onToggle: (rowId: string) => void;
-  /** Its child session rows, drawn under it while expanded. */
-  children?: ReactNode;
-  /** Extra classes on the root. */
-  className?: string;
-  /** Inline styles on the root. */
-  style?: CSSProperties;
-}
-
-/** Renders an extension item of the sidebar list. Memoized: keep every prop stable. */
-export const SidebarRowView = memo(function SidebarRowView({
-  rowId,
-  entry,
-  collapsed,
-  childCount,
-  onOpen,
-  onRunAction,
-  onToggle,
-  children,
-  className,
-  style,
-}: SidebarRowViewProps) {
-  const labels = useSidebarLabels();
-  useMinuteTick();
-  const { item } = entry;
-  const toggle = useCallback(() => onToggle(rowId), [onToggle, rowId]);
-  const select = useCallback(() => (item.open ? onOpen(entry) : toggle()), [item.open, onOpen, entry, toggle]);
-
-  const menuItems = useMemo<RowActionItem[]>(() => {
-    const out: RowActionItem[] = (item.actions ?? []).map((action) => ({
-      id: `action:${action.id}`,
-      label: action.label,
-      disabled: !action.command || !onRunAction,
-      onSelect: () => onRunAction?.(entry, action),
-    }));
-    if (childCount > 0 && item.open) {
-      out.push({
-        id: 'toggle',
-        label: collapsed ? labels.expandItem(item.title) : labels.collapseItem(item.title),
-        group: 'children',
-        onSelect: toggle,
-      });
-    }
-    return out;
-  }, [item, entry, childCount, collapsed, labels, onRunAction, toggle]);
-
-  const status = item.status ? (
-    <StatusDot state={DOT[item.status]} />
-  ) : item.icon?.gui ? (
-    <span aria-hidden className={`${item.icon.gui} text-sm ${badgeToneClass(item.tone)}`} />
-  ) : (
-    <span aria-hidden className="i-ph-puzzle-piece text-sm text-[var(--zg-text-muted)]" />
-  );
-
-  const badges =
-    (item.status && item.icon?.gui) || (item.badges?.length ?? 0) > 0 ? (
-      <span className="inline-flex items-center gap-1 min-w-0 shrink-0">
-        {item.status && item.icon?.gui && (
-          <span aria-hidden className={`${item.icon.gui} text-zg-meta ${badgeToneClass(item.tone)}`} />
-        )}
-        {(item.badges ?? []).map((badge, i) => (
-          <SidebarChip
-            key={`${i}:${badge.text}`}
-            chip={{
-              text: badge.text,
-              ...(badge.tone ? { tone: badge.tone } : {}),
-              ...(badge.icon?.gui ? { icon: badge.icon.gui } : {}),
-            }}
-          />
-        ))}
-      </span>
-    ) : undefined;
-
-  return (
-    <li data-sidebar-item={item.id} data-collapsed={collapsed ? 'true' : undefined} className={className} style={style}>
-      <ul className="list-none m-0 p-0">
-        <SessionListRow
-          id={rowId}
-          title={item.title}
-          status={status}
-          {...(badges ? { badges } : {})}
-          {...(typeof item.time === 'number'
-            ? { meta: <span className="zg-meta shrink-0">{relativeTime(item.time, Date.now(), labels)}</span> }
-            : {})}
-          {...(item.subtitle
-            ? { sub: item.subtitle, subClassName: 'text-xs leading-4 truncate text-[var(--zg-text-muted)]' }
-            : {})}
-          onSelect={select}
-          menuItems={menuItems}
-          menuLabel={labels.itemActions(item.title)}
-          {...(childCount > 0 && !item.open ? { expanded: !collapsed } : {})}
-        />
-        {childCount > 0 && !collapsed && (
-          <li>
-            <ul className="list-none m-0 p-0 pl-3" aria-label={item.title}>
-              {children}
-            </ul>
-          </li>
-        )}
-      </ul>
-    </li>
-  );
-});

package/src/chat/sidebar/SidebarSearchRow.tsx

@@ -1,66 +0,0 @@
-/**
- * Search pinned above the session list: a well on the same column grid as
- * the rows (the magnifier sits in the 18px icon column, so the placeholder
- * starts where every title starts). Typing filters titles instantly and
- * kicks off the debounced content scan in the parent. Escape clears and
- * blurs, handing the arrows back to session navigation. The filter menu
- * sits beside the well, not in it, so opening it doesn't light the well's
- * focus edge.
- */
-import type { CSSProperties, ReactNode } from 'react';
-
-import { IconButton } from '../../components/IconButton';
-import { useSidebarLabels } from './useSidebarLabels';
-
-/** Props of {@link SidebarSearchRow}. */
-export interface SidebarSearchRowProps {
-  /** The query typed so far. */
-  value: string;
-  /** The query changed (cleared with Escape or the clear button). */
-  onChange: (next: string) => void;
-  /** Beside the well: the filter menu. */
-  filter?: ReactNode;
-  /** Extra classes on the row. */
-  className?: string;
-  /** Inline styles on the row. */
-  style?: CSSProperties;
-}
-
-/**
- * The search well above the session list, with the filter menu beside it.
- *
- * @param props - The {@link SidebarSearchRowProps}.
- */
-export function SidebarSearchRow({ value, onChange, filter, className, style }: SidebarSearchRowProps) {
-  const labels = useSidebarLabels();
-  return (
-    <div className={['flex items-center gap-1', className].filter(Boolean).join(' ')} style={style}>
-      {/* pl-[3px] + the 1px well border puts the 18px glyph slot at x=12, the rows' column. */}
-      <div className="zg-well group flex-1 min-w-0 flex items-center gap-1.5 h-7 pl-[3px] pr-1">
-        <span aria-hidden className="inline-flex items-center justify-center w-[18px] shrink-0">
-          <span className="i-ph-magnifying-glass text-sm text-[var(--zg-text-muted)] group-focus-within:text-[var(--zg-text)]" />
-        </span>
-        <input
-          type="text"
-          value={value}
-          onChange={(e) => onChange(e.target.value)}
-          onKeyDown={(e) => {
-            if (e.key === 'Escape') {
-              e.preventDefault();
-              onChange('');
-              e.currentTarget.blur();
-            }
-          }}
-          placeholder={labels.searchSessions}
-          aria-label={labels.searchSessionsLabel}
-          spellCheck={false}
-          className="flex-1 min-w-0 bg-transparent border-0 outline-none p-0 text-sm text-[var(--zg-text)] placeholder:text-[var(--zg-text-muted)]"
-        />
-        {value.length > 0 && (
-          <IconButton icon="i-ph-x" label={labels.clearSearch} size="xs" onClick={() => onChange('')} />
-        )}
-      </div>
-      {filter}
-    </div>
-  );
-}