zidane-ui 9.0.4 → 9.1.3

package/src/files/ReviewDraft.tsx

@@ -1,88 +0,0 @@
-/**
- * Inline comment draft rendered as a line annotation (Diffs and Files
- * tabs). ⌘↵ or the button hands the text to the caller, which turns it into
- * a composer attachment.
- */
-import { useState } from 'react';
-
-import { KeyHint } from '../keybindings/KeyHint';
-import { useFilesLabels } from './useFilesLabels';
-
-export function ReviewDraft({
-  label,
-  excerpt,
-  onSubmit,
-  onCancel,
-}: {
-  label: string;
-  /** The lines the comment covers, shown so what gets sent is never a surprise. */
-  excerpt?: string;
-  onSubmit: (text: string) => void;
-  onCancel: () => void;
-}) {
-  const labels = useFilesLabels();
-  const [text, setText] = useState('');
-  const preview = excerpt === undefined ? null : previewOf(excerpt, labels.filesMoreLines);
-  return (
-    <div className="flex flex-col gap-1.5 px-3 py-2.5 border-s-2 border-[var(--zg-accent)] bg-[var(--zg-tray)] font-sans">
-      <div className="flex items-center gap-2 text-zg-meta text-[var(--zg-text-muted)]">
-        <span className="i-ph-chat-teardrop-text text-zg-label text-[var(--zg-accent)]" aria-hidden />
-        <span>{labels.filesCommentOn(label)}</span>
-        <span className="zg-meta ml-auto inline-flex items-center gap-1">
-          <KeyHint spec="cmd+enter" size="sm" /> {labels.filesToAdd}
-        </span>
-      </div>
-      {preview !== null && (
-        <pre
-          className={`zg-code-panel m-0 max-h-16 overflow-hidden whitespace-pre text-zg-meta leading-4 font-mono rounded-zg-sm px-2 py-1 !text-[var(--zg-text-muted)] ${
-            preview === '' ? 'italic' : ''
-          }`}
-          aria-label={labels.filesSelectedLines}
-        >
-          {preview === '' ? labels.filesBlankLines : preview}
-        </pre>
-      )}
-      <textarea
-        autoFocus
-        value={text}
-        onChange={(e) => setText(e.target.value)}
-        onKeyDown={(e) => {
-          if (e.key === 'Escape') onCancel();
-          if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
-            e.preventDefault();
-            onSubmit(text);
-          }
-        }}
-        placeholder={labels.filesCommentPlaceholder}
-        rows={2}
-        className="zg-well w-full min-h-12 resize-y px-2 py-1.5 text-xs leading-5 placeholder:text-[var(--zg-text-muted)] font-sans"
-      />
-      <div className="flex items-center justify-end gap-1.5">
-        <button
-          type="button"
-          onClick={onCancel}
-          className="zg-raised zg-press-subtle h-6 px-2 rounded-zg-sm border text-zg-meta text-[var(--zg-text-muted)] hover:text-[var(--zg-text)] cursor-pointer"
-        >
-          {labels.filesCancel}
-        </button>
-        <button
-          type="button"
-          onClick={() => onSubmit(text)}
-          disabled={!text.trim()}
-          className="zg-press-subtle h-6 px-2.5 rounded-zg-sm border-0 zg-fill text-zg-meta font-medium cursor-pointer disabled:opacity-zg-disabled disabled:cursor-not-allowed"
-        >
-          {labels.filesAddToPrompt}
-        </button>
-      </div>
-    </div>
-  );
-}
-
-/** First lines of the excerpt, trimmed of common indentation, capped at four (`more` words the rest). */
-export function previewOf(excerpt: string, more: (count: number) => string): string {
-  const lines = excerpt.split('\n');
-  if (lines.every((l) => l.trim() === '')) return '';
-  const indent = Math.min(...lines.filter((l) => l.trim()).map((l) => l.match(/^\s*/)?.[0].length ?? 0));
-  const shown = lines.slice(0, 4).map((l) => l.slice(indent));
-  return lines.length > 4 ? [...shown, more(lines.length - 4)].join('\n') : shown.join('\n');
-}

package/src/files/ReviewableDiff.tsx

@@ -1,72 +0,0 @@
-/**
- * A working-tree file diff with the shared review interactions: select
- * lines, gutter "+" or right-click to comment / add to chat / copy. The
- * excerpt is side-aware (deletions come from the old file).
- */
-import { memo, useMemo } from 'react';
-
-import {
-  DiffView,
-  type DiffLineAnnotation,
-  type DiffStyle,
-  type FileDiffMetadata,
-  type SelectedLineRange,
-} from '../code/editor/DiffView';
-import { excerptFor } from './code-excerpt';
-import { useFilesChat } from './tab-hooks';
-import { useCodeReview } from './useCodeReview';
-
-interface DraftMeta {
-  kind: 'draft';
-  range: SelectedLineRange;
-}
-
-/** Memoised: the Diffs tab re-renders as diffs scroll in and out of view; a diff itself only when its file changes. */
-export const ReviewableDiff = memo(function ReviewableDiff({
-  fileDiff,
-  diffStyle,
-  wrap,
-  hideHeader = false,
-}: {
-  fileDiff: FileDiffMetadata;
-  diffStyle: DiffStyle;
-  wrap: boolean;
-  hideHeader?: boolean;
-}) {
-  const review = useCodeReview({
-    filePath: fileDiff.name,
-    kind: 'diff',
-    excerptOf: (range) => excerptFor(fileDiff, range),
-    chat: useFilesChat(),
-  });
-  const annotations = useMemo<DiffLineAnnotation<DraftMeta>[]>(
-    () =>
-      review.draft
-        ? [
-            {
-              side: review.draft.endSide ?? review.draft.side ?? 'additions',
-              lineNumber: Math.max(review.draft.start, review.draft.end),
-              metadata: { kind: 'draft', range: review.draft },
-            },
-          ]
-        : [],
-    [review.draft],
-  );
-  return (
-    <>
-      <DiffView<DraftMeta>
-        fileDiff={fileDiff}
-        diffStyle={diffStyle}
-        wrap={wrap}
-        hideHeader={hideHeader}
-        selectedLines={review.selected}
-        onSelectionEnd={review.onSelectionEnd}
-        onGutterAction={review.canComment ? review.openDraft : undefined}
-        onContextMenu={review.onContextMenu}
-        annotations={annotations}
-        renderAnnotation={() => review.draftNode}
-      />
-      {review.menuNode}
-    </>
-  );
-});

package/src/files/SearchPanel.tsx

@@ -1,325 +0,0 @@
-/**
- * ⌘⇧F: search across files, shown in place of the Files tree or the Diffs
- * file tree. File names first, then the matching lines grouped by file
- * (each group collapsible). Names come from what the panel already lists;
- * lines come from `search` (the host for Files, the diffs for Diffs).
- *
- * Keys: ↓ / ↑ move between results, Enter opens, Esc closes.
- */
-import { memo, useEffect, useMemo, useRef, useState, type KeyboardEvent } from 'react';
-
-import { FileIcon, TreeChevron } from '../code/editor/FileIcon';
-import { IconButton } from '../components/IconButton';
-import { Tooltip } from '../components/Tooltip';
-import type { ContentMatch, ContentSearchResult, TextMatchOptions } from './headless/host';
-import { useFilesLabels } from './useFilesLabels';
-
-function splitPath(path: string): { dir: string; base: string } {
-  const slash = path.lastIndexOf('/');
-  return slash === -1 ? { dir: '', base: path } : { dir: path.slice(0, slash), base: path.slice(slash + 1) };
-}
-
-const DEBOUNCE_MS = 150;
-const MAX_NAMES = 50;
-/** Characters kept before the first match on a long line. */
-const LEAD = 32;
-
-export interface SearchLine extends ContentMatch {
-  /** Diffs: which diff and side the line is on. */
-  part?: string;
-  side?: 'old' | 'new';
-}
-
-export interface SearchPanelProps {
-  label: string;
-  /** Bumps on every ⌘⇧F: focus and select the query. */
-  asked: number;
-  names: (query: string, opts: TextMatchOptions) => readonly string[];
-  search: (
-    query: string,
-    opts: TextMatchOptions,
-  ) => Promise<Omit<ContentSearchResult, 'matches'> & { matches: SearchLine[] }>;
-  onOpenFile: (path: string) => void;
-  onOpenLine: (match: SearchLine, query: string, opts: TextMatchOptions) => void;
-  onClose: () => void;
-  /** Room on one edge of the header for a control the host overlays there (the Files tree toggle). */
-  inset?: 'left' | 'right';
-}
-
-export const SearchPanel = memo(function SearchPanel({
-  label,
-  asked,
-  names,
-  search,
-  onOpenFile,
-  onOpenLine,
-  onClose,
-  inset,
-}: SearchPanelProps) {
-  const labels = useFilesLabels();
-  const [query, setQuery] = useState('');
-  const [caseSensitive, setCaseSensitive] = useState(false);
-  const opts = useMemo(() => ({ caseSensitive }), [caseSensitive]);
-  const [result, setResult] = useState<{
-    query: string;
-    matches: SearchLine[];
-    capped: boolean;
-    unsupported?: string;
-  } | null>(null);
-  const input = useRef<HTMLInputElement | null>(null);
-  const list = useRef<HTMLDivElement | null>(null);
-  const [collapsed, setCollapsed] = useState<ReadonlySet<string>>(() => new Set());
-
-  useEffect(() => {
-    input.current?.select();
-  }, [asked]);
-
-  const latest = useRef(search);
-  // eslint-disable-next-line react-hooks/refs -- a latest-value ref: written in render, read by callbacks and effects
-  latest.current = search;
-  useEffect(() => {
-    if (!query) {
-      // eslint-disable-next-line react-hooks/set-state-in-effect -- follows a new input once, as the desktop app measured it
-      setResult(null);
-      return;
-    }
-    let live = true;
-    const t = window.setTimeout(() => {
-      void latest.current(query, opts).then((r) => {
-        if (live)
-          setResult({
-            query,
-            matches: r.matches,
-            capped: r.capped,
-            ...(r.unsupported ? { unsupported: r.unsupported } : {}),
-          });
-      });
-    }, DEBOUNCE_MS);
-    return () => {
-      live = false;
-      window.clearTimeout(t);
-    };
-  }, [query, opts]);
-
-  const nameHits = useMemo(() => (query ? names(query, opts).slice(0, MAX_NAMES) : []), [names, query, opts]);
-  const groups = useMemo(() => {
-    const byPath = new Map<string, SearchLine[]>();
-    for (const m of result?.matches ?? []) byPath.set(m.path, [...(byPath.get(m.path) ?? []), m]);
-    return [...byPath];
-  }, [result]);
-  const hitCount = useMemo(() => (result?.matches ?? []).reduce((n, m) => n + m.ranges.length, 0), [result]);
-  const pending = query !== '' && result?.query !== query;
-
-  const focusResult = (from: Element | null, direction: 1 | -1) => {
-    const rows = [...(list.current?.querySelectorAll<HTMLElement>('[data-result]') ?? [])];
-    const at = from ? rows.indexOf(from as HTMLElement) : -1;
-    const next = rows[at + direction];
-    if (next) next.focus();
-    else if (direction === -1) input.current?.focus();
-  };
-  const onKeyDown = (e: KeyboardEvent<HTMLElement>) => {
-    if (e.key === 'Escape') {
-      e.preventDefault();
-      e.stopPropagation();
-      onClose();
-    } else if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
-      e.preventDefault();
-      focusResult(e.target === input.current ? null : (e.target as Element), e.key === 'ArrowDown' ? 1 : -1);
-    } else if (e.key === 'Enter' && e.target === input.current) {
-      e.preventDefault();
-      list.current?.querySelector<HTMLElement>('[data-result]')?.click();
-    } else if (e.key.toLowerCase() === 'f' && (e.metaKey || e.ctrlKey) && e.shiftKey) {
-      e.preventDefault();
-      input.current?.select();
-    }
-  };
-
-  const summary = !query
-    ? null
-    : pending && !result
-      ? labels.filesSearching
-      : result?.unsupported
-        ? labels.filesSearchNamesOnly
-        : hitCount + nameHits.length === 0
-          ? labels.filesNoResults
-          : [
-              nameHits.length > 0 ? labels.filesNameHits(nameHits.length, nameHits.length === MAX_NAMES) : null,
-              hitCount > 0 ? labels.filesLineHits(hitCount, result?.capped === true, groups.length) : null,
-            ]
-              .filter(Boolean)
-              .join(', ');
-
-  return (
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- arrows, Enter and Esc for the results inside
-    <div role="search" aria-label={label} className="flex-1 min-h-0 flex flex-col" onKeyDown={onKeyDown}>
-      <div
-        className={`shrink-0 flex items-center gap-1 h-9 ${inset === 'left' ? 'pl-9 pr-2' : inset === 'right' ? 'pl-2 pr-9' : 'px-2'}`}
-      >
-        <label className="zg-well min-w-0 flex-1 flex items-center gap-1.5 h-7 pl-2 pr-1 cursor-text">
-          <span className="i-ph-magnifying-glass text-sm text-[var(--zg-text-muted)] shrink-0" aria-hidden />
-          <input
-            ref={input}
-            type="text"
-            value={query}
-            onChange={(e) => setQuery(e.target.value)}
-            placeholder={label}
-            aria-label={label}
-            spellCheck={false}
-            autoFocus
-            className="min-w-0 flex-1 bg-transparent border-0 outline-none p-0 text-zg-ui text-[var(--zg-text)] placeholder:text-[var(--zg-text-muted)]"
-          />
-          <Tooltip label={labels.filesMatchCase} portal>
-            <button
-              type="button"
-              aria-pressed={caseSensitive}
-              aria-label={labels.filesMatchCase}
-              onClick={() => {
-                setCaseSensitive((v) => !v);
-                input.current?.focus();
-              }}
-              className={`zg-press-subtle shrink-0 h-5 px-1 rounded-zg-sm border-0 cursor-pointer text-zg-meta font-medium ${
-                caseSensitive
-                  ? 'before:bg-[var(--zg-row-active)] text-[var(--zg-text)]'
-                  : 'bg-transparent text-[var(--zg-text-muted)] hover:before:bg-[var(--zg-row-hover)]'
-              }`}
-            >
-              Aa
-            </button>
-          </Tooltip>
-        </label>
-        <IconButton
-          icon="i-ph-x"
-          label={labels.filesCloseSearch}
-          title={labels.filesCloseSearchHint}
-          size="sm"
-          onClick={onClose}
-        />
-      </div>
-      {summary && (
-        <div className="shrink-0 px-3 pb-1 zg-meta" aria-live="polite">
-          {summary}
-        </div>
-      )}
-      <div ref={list} className="flex-1 min-h-0 overflow-y-auto px-2 pb-2">
-        {nameHits.length > 0 && (
-          <ul aria-label={labels.filesFileNames} className="m-0 p-0 list-none flex flex-col">
-            {nameHits.map((path) => (
-              <li key={path}>
-                <button
-                  type="button"
-                  data-result=""
-                  data-size="sm"
-                  onClick={() => onOpenFile(path)}
-                  className="zg-menu-row zg-press-subtle"
-                  title={path}
-                >
-                  <FileIcon path={path} />
-                  <PathLabel path={path} />
-                </button>
-              </li>
-            ))}
-          </ul>
-        )}
-        {groups.length > 0 && (
-          <ul
-            aria-label={labels.filesMatchingLines}
-            className={`m-0 p-0 list-none flex flex-col ${nameHits.length ? 'mt-2' : ''}`}
-          >
-            {groups.map(([path, lines]) => {
-              const closed = collapsed.has(path);
-              return (
-                <li key={path}>
-                  <button
-                    type="button"
-                    data-result=""
-                    data-size="sm"
-                    aria-expanded={!closed}
-                    onClick={() =>
-                      setCollapsed((prev) => {
-                        const next = new Set(prev);
-                        if (!next.delete(path)) next.add(path);
-                        return next;
-                      })
-                    }
-                    className="zg-menu-row zg-press-subtle"
-                    title={path}
-                  >
-                    <TreeChevron open={!closed} className="text-[var(--zg-text-muted)]" />
-                    <FileIcon path={path} />
-                    <PathLabel path={path} />
-                    <span className="zg-meta shrink-0 tabular-nums">
-                      {lines.reduce((n, l) => n + l.ranges.length, 0)}
-                    </span>
-                  </button>
-                  {!closed && (
-                    <ul className="m-0 p-0 list-none flex flex-col">
-                      {lines.map((m) => (
-                        <li key={`${m.part ?? ''}:${m.side ?? ''}:${m.line}`}>
-                          <button
-                            type="button"
-                            data-result=""
-                            data-size="sm"
-                            onClick={() => onOpenLine(m, result!.query, opts)}
-                            className="zg-menu-row zg-press-subtle"
-                            style={{ paddingLeft: 30 }}
-                            aria-label={labels.filesMatchLine(path, m.line, m.text.trim())}
-                          >
-                            <span className="zg-meta shrink-0 w-8 text-right tabular-nums">
-                              {m.side === 'old' ? '−' : ''}
-                              {m.line}
-                            </span>
-                            <LineText match={m} />
-                          </button>
-                        </li>
-                      ))}
-                    </ul>
-                  )}
-                </li>
-              );
-            })}
-          </ul>
-        )}
-      </div>
-    </div>
-  );
-});
-
-function PathLabel({ path }: { path: string }) {
-  const { dir, base } = splitPath(path);
-  return (
-    <span className="min-w-0 flex-1 truncate">
-      <span className="text-[var(--zg-text)]">{base}</span>
-      {dir && <span className="ml-1.5 text-[var(--zg-text-subtle)]">{dir}</span>}
-    </span>
-  );
-}
-
-/** The line, trimmed to start a little before its first match, matches marked. */
-function LineText({ match }: { match: SearchLine }) {
-  const indent = match.text.length - match.text.trimStart().length;
-  const from = Math.max(indent, (match.ranges[0]?.start ?? 0) - LEAD);
-  const parts: { text: string; hit: boolean }[] = [];
-  let at = from;
-  for (const r of match.ranges) {
-    if (r.end <= from) continue;
-    const start = Math.max(r.start, from);
-    if (start > at) parts.push({ text: match.text.slice(at, start), hit: false });
-    parts.push({ text: match.text.slice(start, r.end), hit: true });
-    at = r.end;
-  }
-  parts.push({ text: match.text.slice(at), hit: false });
-  return (
-    <span className="min-w-0 flex-1 truncate font-mono text-zg-label text-[var(--zg-text-muted)]">
-      {from > indent && '…'}
-      {parts.map((p, i) =>
-        p.hit ? (
-          <mark key={i} className="zg-search-hit">
-            {p.text}
-          </mark>
-        ) : (
-          <span key={i}>{p.text}</span>
-        ),
-      )}
-    </span>
-  );
-}