zidane-ui 9.1.1 → 9.1.3

package/src/chat/SessionList.tsx

@@ -1,413 +0,0 @@
-/**
- * The sessions list, wired to a `ChatHost`: grouped and sorted rows, inline
- * rename, archive and delete (each only when the host can), "show more" for
- * long groups, a title search, arrow-key navigation, live relative times.
- *
- *   <ChatProvider host={host}>
- *     <SessionList activeId={id} onSelect={setId} groupBy="project" />
- *   </ChatProvider>
- *
- * Built from `SessionListRow` and `SessionGroupHeader`, the same parts the
- * desktop app's sidebar renders. Per-session extras (badges, a second line,
- * more menu items) come through `rowProps`.
- */
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  type CSSProperties,
-  type KeyboardEvent,
-  type ReactNode,
-} from 'react';
-
-import { buttonClass } from '../components/button';
-import { ConfirmDialog } from '../components/ConfirmDialog';
-import { Overlay } from '../components/Overlay';
-import { PanelEmpty } from '../components/PanelEmpty';
-import { useChatHost, useHostSessions } from './ChatProvider';
-import type { ChatSession } from './headless/host';
-import {
-  buildSessionRows,
-  filterSessions,
-  relativeTime,
-  type CalendarOptions,
-  type SessionGroupBy,
-  type SessionSortBy,
-} from './headless/session-list';
-import { GroupGlyph, SessionGroupHeader, ShowMoreRow } from './SessionGroupHeader';
-import { SessionListRow, type RowActionItem, type SessionListRowProps } from './SessionListRow';
-import { dotStateFor } from './StatusDot';
-import { useChatLabels } from './useChatLabels';
-
-type RowExtras = Partial<Pick<SessionListRowProps, 'status' | 'dot' | 'titleDisplay' | 'badges' | 'meta' | 'sub'>> & {
-  /** Added before the built-in Delete. */
-  menuItems?: RowActionItem[];
-};
-
-/** Props for {@link SessionList}. */
-export interface SessionListProps {
-  /**
-   * Id of the session shown as selected. `null` or omitted marks none.
-   * @default null
-   */
-  activeId?: string | null;
-  /** Called with the session id when the user clicks a row or activates it with the keyboard. */
-  onSelect: (id: string) => void;
-  /** Override the host's list (a filtered or merged view). */
-  sessions?: readonly ChatSession[];
-  /**
-   * How rows are grouped: `project`, `date`, `state`, or `none` for a flat list.
-   * @default 'none'
-   */
-  groupBy?: SessionGroupBy;
-  /**
-   * Row order inside a group: `recency`, `createdTime`, or `alphabetical`.
-   * @default 'recency'
-   */
-  sortBy?: SessionSortBy;
-  /** Show the title search field above the list. */
-  search?: boolean;
-  /** Shows a "New session" button (and is called by it). */
-  onNewSession?: () => void;
-  /** Called with the group's path when the user clicks "+" on a group header. The app creates the session. */
-  onNewSessionIn?: (group: string) => void;
-  /** Per-session additions: badges, meta, a second line, menu items. */
-  rowProps?: (session: ChatSession) => RowExtras;
-  /** Ask before deleting (default true). */
-  confirmDelete?: boolean;
-  /** Shown when the host has no sessions at all. */
-  empty?: ReactNode;
-  /** Pin the clock (screenshots, server renders); live minute ticks otherwise. */
-  now?: number;
-  /** Pin the zone and locale of date labels; set it with `now` when a server renders the list too. */
-  calendar?: CalendarOptions;
-  /** The list's landmark name (default: the `sessions` label); set it when a page shows several. */
-  'aria-label'?: string;
-  /** Extra class names for the list's root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/** Re-renders once a minute, for relative times. */
-function useMinuteClock(): number {
-  const [now, setNow] = useState(() => Date.now());
-  useEffect(() => {
-    const id = setInterval(() => setNow(Date.now()), 60_000);
-    return () => clearInterval(id);
-  }, []);
-  return now;
-}
-
-const toggleIn = (set: ReadonlySet<string>, id: string) => {
-  const next = new Set(set);
-  if (next.has(id)) next.delete(id);
-  else next.add(id);
-  return next;
-};
-
-/**
- * Renders the session list for the {@link ChatHost} in context: grouped and sorted rows with rename, archive, and delete when the host supports them.
- *
- * @param props - The {@link SessionListProps}.
- */
-export function SessionList({
-  activeId = null,
-  onSelect,
-  sessions: sessionsProp,
-  groupBy = 'none',
-  sortBy = 'recency',
-  search = false,
-  onNewSession,
-  onNewSessionIn,
-  rowProps,
-  confirmDelete = true,
-  empty,
-  now: nowProp,
-  calendar,
-  'aria-label': ariaLabel,
-  className = '',
-  style,
-}: SessionListProps) {
-  const host = useChatHost();
-  const hostSessions = useHostSessions();
-  const sessions = sessionsProp ?? hostSessions;
-  const labels = useChatLabels();
-  const clock = useMinuteClock();
-  const now = nowProp ?? clock;
-  const listRef = useRef<HTMLUListElement>(null);
-
-  const [query, setQuery] = useState('');
-  const [collapsed, setCollapsed] = useState<ReadonlySet<string>>(new Set());
-  const [expanded, setExpanded] = useState<ReadonlySet<string>>(new Set());
-  const [renaming, setRenaming] = useState<{ id: string; value: string } | null>(null);
-  const [menuFor, setMenuFor] = useState<string | null>(null);
-  const [deleting, setDeleting] = useState<ChatSession | null>(null);
-
-  const groupLabels = useMemo(() => {
-    const out = new Map<string, string>();
-    for (const s of sessions) if (s.group && s.groupLabel && !out.has(s.group)) out.set(s.group, s.groupLabel);
-    return out;
-  }, [sessions]);
-
-  const visible = useMemo(() => filterSessions(sessions, query), [sessions, query]);
-  const pinned = useMemo(() => visible.filter((s) => s.pinned), [visible]);
-  const rows = useMemo(
-    () =>
-      buildSessionRows(
-        visible.filter((s) => !s.pinned),
-        {
-          groupBy,
-          sortBy,
-          collapsedGroups: collapsed,
-          showMoreExpanded: expanded,
-          project: (s) => s.group,
-          isFavorite: (s) => s.favorite === true,
-          labels,
-          now,
-          calendar,
-        },
-      ),
-    [visible, groupBy, sortBy, collapsed, expanded, labels, now, calendar],
-  );
-
-  const commitRename = useCallback(async () => {
-    if (!renaming) return;
-    const { id, value } = renaming;
-    setRenaming(null);
-    const title = value.trim();
-    const before = sessions.find((s) => s.id === id)?.title;
-    if (title && title !== before) await host.sessions?.rename?.(id, title);
-  }, [renaming, sessions, host]);
-
-  const remove = useCallback(
-    (s: ChatSession) => {
-      if (confirmDelete) setDeleting(s);
-      else void host.sessions?.remove?.(s.id);
-    },
-    [confirmDelete, host],
-  );
-
-  const itemsFor = useCallback(
-    (s: ChatSession, extra: RowActionItem[] | undefined): RowActionItem[] => {
-      const api = host.sessions;
-      return [
-        ...(api?.rename
-          ? [
-              {
-                id: 'rename',
-                label: labels.rename,
-                shortcut: 'R',
-                onSelect: () => setRenaming({ id: s.id, value: s.title }),
-              },
-            ]
-          : []),
-        ...(api?.setFavorite
-          ? [
-              {
-                id: 'favorite',
-                label: s.favorite ? labels.removeFavorite : labels.addFavorite,
-                shortcut: 'F',
-                onSelect: () => void api.setFavorite?.(s.id, !s.favorite),
-              },
-            ]
-          : []),
-        ...(api?.setArchived
-          ? [
-              {
-                id: 'archive',
-                label: s.archived ? labels.unarchive : labels.archive,
-                shortcut: 'A',
-                onSelect: () => void api.setArchived?.(s.id, !s.archived),
-              },
-            ]
-          : []),
-        ...(extra ?? []),
-        ...(api?.remove
-          ? [{ id: 'delete', label: labels.delete, destructive: true, shortcut: 'D', onSelect: () => remove(s) }]
-          : []),
-      ];
-    },
-    [host, labels, remove],
-  );
-
-  // ↑ / ↓ / Home / End move between rows; Enter (native button) opens one.
-  const onKeyDown = (e: KeyboardEvent<HTMLUListElement>) => {
-    if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(e.key) || renaming) return;
-    const buttons = [...(listRef.current?.querySelectorAll<HTMLButtonElement>('[data-row-select]') ?? [])];
-    if (!buttons.length) return;
-    const at = buttons.indexOf(document.activeElement as HTMLButtonElement);
-    const next =
-      e.key === 'Home'
-        ? 0
-        : e.key === 'End'
-          ? buttons.length - 1
-          : Math.max(0, Math.min(buttons.length - 1, at + (e.key === 'ArrowDown' ? 1 : -1)));
-    e.preventDefault();
-    buttons[at < 0 && e.key === 'ArrowUp' ? buttons.length - 1 : next]?.focus();
-  };
-
-  const row = (s: ChatSession) => {
-    const extras = rowProps?.(s) ?? {};
-    const { menuItems: extraItems, ...slots } = extras;
-    const isRenaming = renaming?.id === s.id;
-    return (
-      <SessionListRow
-        key={s.id}
-        id={s.id}
-        title={s.title}
-        active={s.id === activeId}
-        archived={s.archived}
-        dot={slots.dot ?? dotStateFor(s.status)}
-        meta={
-          slots.meta ?? (
-            <span
-              className="zg-row-meta zg-meta shrink-0 tabular-nums"
-              title={new Date(s.updatedAt).toLocaleString(calendar?.locale, { timeZone: calendar?.timeZone })}
-            >
-              {relativeTime(s.updatedAt, now, labels, calendar)}
-            </span>
-          )
-        }
-        status={slots.status}
-        titleDisplay={slots.titleDisplay}
-        badges={slots.badges}
-        sub={slots.sub}
-        onSelect={onSelect}
-        renaming={isRenaming}
-        renameValue={isRenaming ? renaming.value : ''}
-        onStartRename={host.sessions?.rename ? (id, title) => setRenaming({ id, value: title }) : undefined}
-        onRenameChange={(value) => setRenaming((r) => (r ? { ...r, value } : r))}
-        onRenameCommit={commitRename}
-        onRenameCancel={() => setRenaming(null)}
-        menuItems={itemsFor(s, extraItems)}
-        menuOpen={menuFor === s.id}
-        onOpenMenu={setMenuFor}
-        onCloseMenu={() => setMenuFor(null)}
-      />
-    );
-  };
-
-  const nothing = sessions.length === 0;
-  return (
-    <nav aria-label={ariaLabel ?? labels.sessions} className={`flex flex-col min-h-0 ${className}`} style={style}>
-      {(onNewSession || search) && (
-        <div className="flex flex-col gap-2 px-2 pb-2">
-          {onNewSession && (
-            <button type="button" onClick={onNewSession} className={`${buttonClass({ size: 'sm' })} justify-start`}>
-              <span className="i-ph-plus text-[13px]" aria-hidden />
-              {labels.newSession}
-            </button>
-          )}
-          {search && !nothing && (
-            <label className="zg-well h-8 flex items-center gap-2 px-2.5 text-[13px]">
-              <span className="i-ph-magnifying-glass text-[13px] text-[var(--zg-text-muted)] shrink-0" aria-hidden />
-              <input
-                type="search"
-                value={query}
-                onChange={(e) => setQuery(e.target.value)}
-                placeholder={labels.searchSessions}
-                aria-label={labels.searchSessions}
-                className="flex-1 min-w-0 bg-transparent border-0 outline-none text-[var(--zg-text)] placeholder:text-[var(--zg-text-subtle)]"
-              />
-            </label>
-          )}
-        </div>
-      )}
-      {nothing ? (
-        (empty ?? <PanelEmpty icon="i-ph-chats-circle-duotone" title={labels.noSessions} />)
-      ) : visible.length === 0 ? (
-        <PanelEmpty icon="i-ph-magnifying-glass-duotone" title={labels.noMatches(query)} />
-      ) : (
-        // Arrow-key roving between the row buttons, delegated to the list: the rows are the interactive elements.
-        // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-        <ul ref={listRef} className="list-none m-0 p-0 px-2 overflow-y-auto" onKeyDown={onKeyDown}>
-          {pinned.map(row)}
-          {rows.map((r) => {
-            if (r.kind === 'header') {
-              const label = (!r.chats && r.fullPath && groupLabels.get(r.fullPath)) || r.label;
-              return (
-                <SessionGroupHeader
-                  key={r.id}
-                  id={r.id}
-                  label={label}
-                  collapsed={r.collapsed}
-                  onToggle={(id) => setCollapsed((c) => toggleIn(c, id))}
-                  icon={
-                    <GroupGlyph
-                      icon={
-                        r.favorites
-                          ? 'i-ph-star'
-                          : groupBy === 'date'
-                            ? 'i-ph-calendar-blank'
-                            : groupBy === 'state'
-                              ? 'i-ph-lightning'
-                              : r.chats
-                                ? 'i-ph-chats'
-                                : 'i-ph-folder'
-                      }
-                    />
-                  }
-                  action={
-                    onNewSessionIn && r.fullPath ? (
-                      <button
-                        type="button"
-                        aria-label={labels.newSessionIn(label)}
-                        title={labels.newSessionIn(label)}
-                        onClick={() => onNewSessionIn(r.fullPath!)}
-                        className="zg-row-dots zg-segment-item zg-press-soft inline-flex items-center justify-center w-5 h-5 rounded-[var(--zg-radius-sm)] border-0 bg-transparent cursor-pointer p-0 text-[11px] text-[var(--zg-text-muted)]"
-                      >
-                        <span className="i-ph-plus" aria-hidden />
-                      </button>
-                    ) : undefined
-                  }
-                />
-              );
-            }
-            if (r.kind === 'showMore') {
-              return (
-                <ShowMoreRow
-                  key={r.id}
-                  hiddenCount={r.hiddenCount}
-                  onExpand={() => setExpanded((x) => toggleIn(x, r.groupId))}
-                />
-              );
-            }
-            return row(r.session);
-          })}
-        </ul>
-      )}
-      <Overlay
-        open={deleting !== null}
-        onClose={() => setDeleting(null)}
-        className="fixed inset-0 z-50 flex items-start justify-center pt-[15vh] px-4"
-      >
-        {(state) => (
-          <div data-state={state} className="contents">
-            <div
-              className="relative"
-              style={{
-                opacity: state === 'open' ? 1 : 0,
-                transition: `opacity var(--zg-motion-${state === 'open' ? 'fade' : 'fade-out'})`,
-              }}
-            >
-              <ConfirmDialog
-                title={deleting ? `${labels.delete} “${deleting.title}”?` : ''}
-                destructive
-                confirmLabel={labels.delete}
-                onCancel={() => setDeleting(null)}
-                onConfirm={() => {
-                  const s = deleting;
-                  setDeleting(null);
-                  if (s) void host.sessions?.remove?.(s.id);
-                }}
-              />
-            </div>
-          </div>
-        )}
-      </Overlay>
-    </nav>
-  );
-}