zidane-ui 9.0.4 → 9.1.3

package/src/chat/sidebar/SidebarFilterMenu.tsx

@@ -1,41 +0,0 @@
-import { SessionFilterMenu } from '../SessionFilterMenu';
-import type { SidebarGroupBy, SidebarView } from '../headless/sidebar/types';
-
-const VIEWS_WITH_HOST: readonly SidebarGroupBy[] = ['project', 'host', 'none', 'date', 'state'];
-
-/** Props of {@link SidebarFilterMenu}. */
-export interface SidebarFilterMenuProps {
-  /** The shown space's view. */
-  view: SidebarView;
-  /** Every project the listed sessions belong to (by folder name). */
-  projects: readonly string[];
-  /** Change some axes of the view. */
-  onChange: (patch: Partial<SidebarView>) => void;
-  /** Remote hosts are on: offer the per-host view. */
-  hosts?: boolean;
-  /** Extra classes on the trigger button. */
-  className?: string;
-}
-
-/**
- * The sidebar's five filter axes in the kit's filter menu.
- *
- * @param props - The {@link SidebarFilterMenuProps}.
- */
-export function SidebarFilterMenu({ view, projects, onChange, hosts = false, className }: SidebarFilterMenuProps) {
-  const { groupBy } = view;
-  return (
-    <SessionFilterMenu
-      {...(className ? { className } : {})}
-      view={{
-        value: groupBy,
-        onChange: (next) => onChange({ groupBy: next }),
-        ...(hosts || groupBy === 'host' ? { options: VIEWS_WITH_HOST } : {}),
-      }}
-      status={{ value: view.archive, onChange: (archive) => onChange({ archive }) }}
-      project={{ value: view.project, options: projects, onChange: (project) => onChange({ project }) }}
-      activity={{ value: view.activity, onChange: (activity) => onChange({ activity }) }}
-      sort={{ value: view.sortBy, onChange: (sortBy) => onChange({ sortBy }) }}
-    />
-  );
-}

package/src/chat/sidebar/SidebarFooter.tsx

@@ -1,234 +0,0 @@
-/**
- * The strip at the bottom of the sidebar:
- *
- *   [status …]   [spaces]   [settings]
- *
- * The status side holds what the app puts there (the daemon dot, the sign-in
- * prompt, the usage chip, the compacting indicator, each below); the spaces
- * switcher sits at the TRUE center (equal `1fr` sides, each clipping rather
- * than pushing it; without it the status side runs up to the gear, clipping
- * there); the gear opens Settings, with a dot when something waits
- * there (an update).
- */
-import { useEffect, useState, type CSSProperties, type ReactNode } from 'react';
-import {
-  activeSnapshotFor,
-  compactingParts,
-  formatUsagePercent,
-  mostConstrainedWindow,
-  resetLabel,
-  usageTone,
-  type ProviderUsageSnapshot,
-} from 'zidane/chat/pure';
-
-import { IconButton } from '../../components/IconButton';
-import type { CompactionProgress } from '../headless/sidebar/compaction';
-import { Throbber } from '../Throbber';
-import { useSidebarLabels } from './useSidebarLabels';
-
-/** Something waiting in Settings: the gear's dot and its name. */
-export interface SidebarSettingsNote {
-  /** Said after "Settings" in the gear's name. */
-  text: string;
-  /** A warning (a failed update) rather than news. */
-  warn?: boolean;
-}
-
-/** Props of {@link SidebarFooter}. */
-export interface SidebarFooterProps {
-  /** The status side, left: the app's indicators. */
-  status?: ReactNode;
-  /** The center: the spaces switcher (Spaces on). */
-  spaces?: ReactNode;
-  /** Opens Settings. */
-  onOpenSettings: () => void;
-  /** Something waiting in Settings. */
-  settingsNote?: SidebarSettingsNote;
-  /** Extra classes on the strip. */
-  className?: string;
-  /** Inline styles on the strip. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders the sidebar's footer strip.
- *
- * @param props - The status side, the spaces switcher, the settings gear, `className` and `style`.
- */
-export function SidebarFooter({
-  status,
-  spaces,
-  onOpenSettings,
-  settingsNote,
-  className = '',
-  style,
-}: SidebarFooterProps) {
-  const labels = useSidebarLabels();
-  return (
-    /*
-     * Height: 28px content (h-7 buttons) + 5px top + 4px bottom padding = 37px,
-     * on the sidebar's tray tone with no border line. Bottom-anchored with a
-     * fixed height, so its top edge stays one band with a composer's control
-     * axis that is also 37px from the window's bottom.
-     */
-    <div
-      className={`grid ${spaces ? 'grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)]' : 'grid-cols-[minmax(0,1fr)_auto]'} items-center gap-2 px-2 pt-[5px] pb-1 text-zg-meta text-[var(--zg-text-muted)] shrink-0${className ? ` ${className}` : ''}`}
-      style={style}
-    >
-      {/* Clipped sideways only (focus rings and hit areas keep their 6px): a narrow sidebar never spills the status over the gear. */}
-      <div className="flex items-center gap-2 min-w-0 -mx-1.5 px-1.5 [overflow-x:clip]">{status}</div>
-      {spaces && <div className="flex items-center justify-center min-w-0">{spaces}</div>}
-      <div className="flex items-center justify-end min-w-0">
-        <IconButton
-          icon="i-ph-gear-six"
-          label={settingsNote ? labels.footerSettingsWithNote(settingsNote.text) : labels.footerSettings}
-          onClick={onOpenSettings}
-          className="zg-hit-extend relative"
-        >
-          {settingsNote && (
-            <span
-              aria-hidden
-              data-update-dot
-              className={`pointer-events-none absolute top-1 right-1 w-1.5 h-1.5 rounded-full ${
-                settingsNote.warn ? 'bg-[var(--zg-warn)]' : 'bg-[var(--zg-accent)]'
-              }`}
-            />
-          )}
-        </IconButton>
-      </div>
-    </div>
-  );
-}
-
-/** Props of {@link SidebarSignInPrompt}. */
-export interface SidebarSignInPromptProps {
-  /** Opens the sign-in. */
-  onClick: () => void;
-  /** Extra classes on the button. */
-  className?: string;
-  /** Inline styles on the button. */
-  style?: CSSProperties;
-}
-
-/** Text buttons in the strip (sign in): the icon buttons' lift, sized to their label. */
-const FOOTER_TEXT_BUTTON =
-  'zg-segment-item zg-press-soft zg-hit-extend relative inline-flex items-center gap-1.5 h-7 px-2 rounded-zg-sm bg-transparent border-0 cursor-pointer shrink-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[var(--zg-ring)]';
-
-/**
- * The "sign in" prompt, for while no provider credentials exist. The signed-in state has no footer presence.
- *
- * @param props - What it opens, `className` and `style`.
- */
-export function SidebarSignInPrompt({ onClick, className = '', style }: SidebarSignInPromptProps) {
-  const labels = useSidebarLabels();
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      title={labels.footerSignInTitle}
-      className={`${FOOTER_TEXT_BUTTON}${className ? ` ${className}` : ''}`}
-      style={style}
-    >
-      <span className="inline-block w-1.5 h-1.5 rounded-full bg-zg-danger-dot" />
-      <span className="text-[var(--zg-danger)]">{labels.footerSignIn}</span>
-    </button>
-  );
-}
-
-/** Props of {@link SidebarUsageIndicator}. */
-export interface SidebarUsageIndicatorProps {
-  /** The providers' usage snapshots (`useProviderUsage`, `zidane-ui/session`). */
-  snapshots: readonly ProviderUsageSnapshot[];
-  /** The open session's provider. Absent: nothing renders. */
-  providerKey?: string;
-  /** The account the session is pinned to, when it is. */
-  account?: string;
-  /** Extra classes on the chip. */
-  className?: string;
-  /** Inline styles on the chip. */
-  style?: CSSProperties;
-}
-
-/**
- * `▰ 5h 43%`: the open session's provider's most constrained subscription window, on the TUI footer's
- * helpers so both read the same number in the same color. Nothing when the provider reports no usage.
- *
- * @param props - The snapshots, the session's provider and account, `className` and `style`.
- */
-export function SidebarUsageIndicator({
-  snapshots,
-  providerKey,
-  account,
-  className = '',
-  style,
-}: SidebarUsageIndicatorProps) {
-  const labels = useSidebarLabels();
-  // A provider with several accounts has several snapshots; a session pinned to one shows THAT account's.
-  const snapshot = providerKey ? activeSnapshotFor(snapshots, providerKey, account) : null;
-  const worst = snapshot && snapshot.status === 'ok' ? mostConstrainedWindow(snapshot) : null;
-  if (!worst) return null;
-  const tone = usageTone(worst.usedPercent);
-  const toneCls = tone === 'error' ? '!text-zg-danger' : tone === 'warn' ? '!text-zg-warn' : '';
-  return (
-    <span
-      className={`zg-track-chip zg-meta inline-flex items-center gap-1 h-5 px-2 shrink-0 ${toneCls}${className ? ` ${className}` : ''}`}
-      style={style}
-      title={[
-        `${snapshot?.label ?? ''}${snapshot?.account ? ` (${snapshot.account})` : ''}`,
-        labels.usageWindow(worst.label, formatUsagePercent(worst.usedPercent)),
-        worst.resetsAt ? resetLabel(worst.resetsAt) : null,
-        labels.usagePanelHint,
-      ]
-        .filter(Boolean)
-        .join('\n')}
-    >
-      <span aria-hidden>▰</span>
-      {worst.label} {formatUsagePercent(worst.usedPercent)}%
-    </span>
-  );
-}
-
-/** Props of {@link SidebarCompactingIndicator}. */
-export interface SidebarCompactingIndicatorProps {
-  /** The compaction's progress; `null` before it reports any. */
-  progress: CompactionProgress | null;
-  /** Extra classes on the root. */
-  className?: string;
-  /** Inline styles on the root. */
-  style?: CSSProperties;
-}
-
-/**
- * "compacting…" with the Throbber's ellipsis, then a live `~12k` summary estimate and the elapsed time past
- * one second, so a long compaction reads as progress rather than a hang.
- *
- * @param props - The progress, `className` and `style`.
- */
-export function SidebarCompactingIndicator({ progress, className = '', style }: SidebarCompactingIndicatorProps) {
-  const labels = useSidebarLabels();
-  const [, tick] = useState(0);
-  useEffect(() => {
-    if (!progress) return undefined;
-    const timer = setInterval(() => tick((n) => n + 1), 1000);
-    return () => clearInterval(timer);
-  }, [progress]);
-  const { label, meta } = compactingParts(progress?.estTokens ?? null, progress?.startedAt ?? null);
-  return (
-    <span
-      className={`inline-flex flex-wrap items-center gap-x-1 h-5 min-w-0 overflow-hidden${className ? ` ${className}` : ''}`}
-      style={style}
-      title={labels.compactingTitle}
-    >
-      <span className="zg-track-chip inline-flex items-center gap-2 h-5 px-2 min-w-0">
-        <span className="zg-meta truncate">{label}</span>
-        <Throbber />
-      </span>
-      {meta.map((value) => (
-        // The elapsed time differs between a server render and its hydration; the next tick repaints it.
-        <span key={value} className="zg-track-chip zg-meta inline-flex items-center h-5 px-2" suppressHydrationWarning>
-          {value}
-        </span>
-      ))}
-    </span>
-  );
-}

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,231 +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).
- */
-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 SidebarRow } from '../headless/sidebar/rows';
-import type { SidebarGroupBy } from '../headless/sidebar/types';
-import { ProjectIconButton } from './ProjectIcon';
-import { spaceRows, type SidebarProject } from './session-menu';
-import { useSidebarHost } from './SidebarHostProvider';
-import { useSidebarLabels } from './useSidebarLabels';
-
-/** A group header row. */
-export type SidebarHeaderRow = Extract<SidebarRow, { 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;
-  /** 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,
-  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;
-  /** 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 }, to),
-                ),
-              },
-            ]
-          : []),
-        ...(canArchive
-          ? [
-              {
-                id: 'archive-project',
-                label: labels.menuArchiveProject,
-                group: 'project-sessions',
-                onSelect: () => onArchiveProject({ path, spaceId }, row.label),
-              },
-            ]
-          : []),
-        {
-          id: 'delete-project',
-          label: labels.menuDeleteProject,
-          group: 'project-sessions',
-          destructive: true,
-          onSelect: () => onDeleteProject({ path, spaceId }, 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}
-        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} />
-      )}
-    </>
-  );
-}