zidane-ui 9.1.1 → 9.1.4

package/src/chat/sidebar/ProjectIcon.tsx

@@ -1,399 +0,0 @@
-/**
- * Per-project custom icons for the sidebar's grouped view.
- *
- * The 18×18 icon slot on a project header doubles as a picker trigger:
- * clicking it opens a small popover offering (a) any emoji — via a free
- * text input or a grid of common choices — and (b) an uploaded image,
- * downscaled client-side to a 48×48 cover-cropped data-URL so the
- * localStorage entry stays a few KB. "Reset" returns the default folder
- * glyph.
- *
- * **Persistence.** One localStorage map (`zg-sidebar-project-icons`)
- * keyed by the project's FULL directory path — groups display by
- * basename, but two projects sharing a basename must not share an icon.
- * Reads are guarded with try/catch + per-entry shape validation, same
- * defensive pattern as the sidebar view map (`headless/sidebar/view.ts`).
- * One map per page, shared by every `useProjectIcons`: a pick in the
- * sidebar shows at once wherever the project's icon is drawn (the project
- * home's header, `ProjectIconGlyph`).
- *
- * **Popover.** The shared floating surface under the trigger
- * (`usePopover`: outside press and Esc close, Esc never reaches App).
- */
-import { useRef, useState, useSyncExternalStore, type ChangeEvent, type CSSProperties } from 'react';
-
-import { FloatingSurface } from '../../components/floating/FloatingSurface';
-import { usePopover } from '../../components/floating/usePopover';
-import { MenuRow, MenuSeparator } from '../../components/Menu';
-import { readPersisted, writePersisted } from '../../hooks/usePersistedState';
-import {
-  COMMON_EMOJI,
-  firstGrapheme,
-  parseProjectIcons,
-  PROJECT_ICONS_KEY,
-  type ProjectIcon,
-  type ProjectIconMap,
-} from '../headless/sidebar/project-icons';
-import { useSidebarLabels } from './useSidebarLabels';
-
-const loadProjectIcons = (): ProjectIconMap => readPersisted(PROJECT_ICONS_KEY, parseProjectIcons) ?? {};
-
-/** The page's one icon map, read from storage on first use. */
-let sharedIcons: ProjectIconMap | null = null;
-const iconListeners = new Set<() => void>();
-const readIcons = (): ProjectIconMap => (sharedIcons ??= loadProjectIcons());
-const subscribeIcons = (listener: () => void) => {
-  iconListeners.add(listener);
-  return () => iconListeners.delete(listener);
-};
-
-/**
- * Assigns (or, with `null`, resets) a folder's icon. State-first, storage-second: the localStorage write is
- * best-effort (quota overflow from many image icons must not break the in-session assignment).
- */
-function setProjectIcon(fullPath: string, icon: ProjectIcon | null): void {
-  const next = { ...readIcons() };
-  if (icon) next[fullPath] = icon;
-  else delete next[fullPath];
-  sharedIcons = next;
-  writePersisted(PROJECT_ICONS_KEY, JSON.stringify(next));
-  for (const listener of iconListeners) listener();
-}
-
-/** Forget the shared map (tests: a fresh read from storage). */
-export function resetProjectIconsForTests(): void {
-  sharedIcons = null;
-}
-
-/** Icon map + setter, shared by every caller on the page. */
-export function useProjectIcons(): {
-  icons: ProjectIconMap;
-  setIcon: (fullPath: string, icon: ProjectIcon | null) => void;
-} {
-  const icons = useSyncExternalStore(subscribeIcons, readIcons, readIcons);
-  return { icons, setIcon: setProjectIcon };
-}
-
-/** Props of {@link ProjectIconGlyph}. */
-export interface ProjectIconGlyphProps {
-  /** The icon assigned to the folder, if any. */
-  icon?: ProjectIcon;
-  /** No icon assigned: a git branch for a repository, else a folder. */
-  isGitRepo?: boolean;
-  /** Default glyph class when nothing is assigned; overrides the folder / git-branch choice. */
-  defaultGlyph?: string;
-  /** `sm`: the sidebar's 18px slot. `lg`: a heading's 28px slot (the project home). */
-  size?: 'sm' | 'lg';
-  /** Extra classes on the slot. */
-  className?: string;
-  /** Inline styles on the slot. */
-  style?: CSSProperties;
-}
-
-const GLYPH_SIZE = {
-  sm: { slot: 'w-[18px] h-[18px] rounded-zg-sm', emoji: 'text-zg-ui', glyph: 'text-sm' },
-  lg: { slot: 'w-7 h-7 rounded-zg-md', emoji: 'text-zg-title', glyph: 'text-zg-title' },
-} as const;
-
-/** The glyph inside a project's icon slot: the picked image or emoji, else the default glyph. */
-function iconGlyph(
-  icon: ProjectIcon | undefined,
-  isGitRepo: boolean | undefined,
-  defaultGlyph: string | undefined,
-  size: 'sm' | 'lg',
-) {
-  const s = GLYPH_SIZE[size];
-  return icon?.kind === 'image' ? (
-    <img src={icon.value} alt="" draggable={false} className="w-full h-full object-cover" />
-  ) : icon?.kind === 'emoji' ? (
-    <span aria-hidden className={`${s.emoji} leading-none`}>
-      {icon.value}
-    </span>
-  ) : (
-    <span aria-hidden className={`${defaultGlyph ?? (isGitRepo ? 'i-ph-git-branch' : 'i-ph-folder')} ${s.glyph}`} />
-  );
-}
-
-/**
- * A project's icon, display only: the same picked icon or default glyph its sidebar header shows.
- *
- * @param props - The {@link ProjectIconGlyphProps}.
- */
-export function ProjectIconGlyph({
-  icon,
-  isGitRepo,
-  defaultGlyph,
-  size = 'sm',
-  className,
-  style,
-}: ProjectIconGlyphProps) {
-  return (
-    <span
-      aria-hidden
-      className={[
-        `inline-flex items-center justify-center shrink-0 overflow-hidden ${GLYPH_SIZE[size].slot}`,
-        className,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-      style={style}
-    >
-      {iconGlyph(icon, isGitRepo, defaultGlyph, size)}
-    </span>
-  );
-}
-
-/** Downscale target in px: well above the 18px display slot so it stays sharp on retina, ~2–4 KB as webp. */
-const ICON_PX = 48;
-
-/**
- * Cover-crop an uploaded image into a 48×48 data-URL. Prefers webp
- * (Chromium always supports encoding it); falls back to png if the
- * canvas declines.
- */
-async function fileToIconDataUrl(file: File): Promise<string> {
-  const bitmap = await createImageBitmap(file);
-
-  try {
-    const canvas = document.createElement('canvas');
-    canvas.width = ICON_PX;
-    canvas.height = ICON_PX;
-
-    const ctx = canvas.getContext('2d');
-
-    if (!ctx) {
-      throw new Error('canvas 2d context unavailable');
-    }
-
-    const scale = Math.max(ICON_PX / bitmap.width, ICON_PX / bitmap.height);
-    const w = bitmap.width * scale;
-    const h = bitmap.height * scale;
-    ctx.drawImage(bitmap, (ICON_PX - w) / 2, (ICON_PX - h) / 2, w, h);
-
-    const webp = canvas.toDataURL('image/webp', 0.85);
-
-    return webp.startsWith('data:image/webp') ? webp : canvas.toDataURL('image/png');
-  } finally {
-    bitmap.close();
-  }
-}
-
-/** Props of {@link ProjectIconButton}. */
-export interface ProjectIconButtonProps {
-  /**
-   * Full directory path keying the icon map. Absent for the "No folder"
-   * bucket — renders the default glyph as a plain non-interactive slot.
-   */
-  fullPath?: string;
-  /** Basename shown in the header — used for the trigger's aria-label. */
-  label: string;
-  /** The icon assigned to the folder, if any. */
-  icon?: ProjectIcon;
-  /**
-   * Directory is a git repository — the DEFAULT glyph (no custom icon
-   * assigned, or after Reset) becomes a git branch instead of a folder.
-   */
-  isGitRepo?: boolean;
-  /**
-   * Default glyph class when nothing is assigned. Overrides the folder /
-   * git-branch choice — the pinned Main row uses a home icon here.
-   */
-  defaultGlyph?: string;
-  /** Tooltip on the trigger; defaults to the project wording. */
-  title?: string;
-  /** Assigns (or, with `null`, resets) the folder's icon. */
-  onAssign: (fullPath: string, icon: ProjectIcon | null) => void;
-  /** Extra classes on the trigger (or the plain slot). */
-  className?: string;
-  /** Inline styles on the trigger (or the plain slot). */
-  style?: CSSProperties;
-}
-
-/**
- * The 18×18 icon slot on a project group header. Rendered as a SIBLING
- * of the collapse button (never nested — button-in-button is invalid),
- * so clicking it opens the picker without toggling the group; the
- * `stopPropagation` is belt-and-braces against ancestor click handlers.
- *
- * @param props - The {@link ProjectIconButtonProps}.
- */
-export function ProjectIconButton({
-  fullPath,
-  label,
-  icon,
-  isGitRepo,
-  defaultGlyph,
-  title,
-  onAssign,
-  className,
-  style,
-}: ProjectIconButtonProps) {
-  const labels = useSidebarLabels();
-  const popover = usePopover();
-  const { triggerRef, surfaceRef } = popover;
-
-  const glyph = iconGlyph(icon, isGitRepo, defaultGlyph, 'sm');
-
-  if (!fullPath) {
-    return (
-      <ProjectIconGlyph
-        {...(icon ? { icon } : {})}
-        {...(isGitRepo !== undefined ? { isGitRepo } : {})}
-        {...(defaultGlyph ? { defaultGlyph } : {})}
-        {...(className ? { className } : {})}
-        {...(style ? { style } : {})}
-      />
-    );
-  }
-
-  return (
-    <>
-      <button
-        ref={(node) => {
-          triggerRef.current = node;
-        }}
-        type="button"
-        title={title ?? labels.changeProjectIcon}
-        aria-label={labels.changeIconFor(label)}
-        aria-haspopup="dialog"
-        aria-expanded={popover.open}
-        onClick={(event) => {
-          event.stopPropagation();
-          popover.toggle();
-        }}
-        className={[
-          'zg-segment-item zg-press-soft inline-flex items-center justify-center w-[18px] h-[18px] shrink-0 rounded-zg-sm overflow-hidden bg-transparent border-0 cursor-pointer p-0 text-[var(--zg-text-muted)]',
-          className,
-        ]
-          .filter(Boolean)
-          .join(' ')}
-        style={style}
-      >
-        {glyph}
-      </button>
-      <FloatingSurface
-        ref={(node) => {
-          surfaceRef.current = node;
-        }}
-        open={popover.open}
-        anchor={{ element: triggerRef.current }}
-        side="bottom"
-        align="start"
-        offset={4}
-        width={POPOVER_WIDTH}
-        role="dialog"
-        aria-label={labels.chooseProjectIcon}
-        className="p-2"
-      >
-        {popover.open && (
-          <IconPicker
-            hasIcon={Boolean(icon)}
-            onPick={(next) => {
-              onAssign(fullPath, next);
-              popover.close();
-            }}
-          />
-        )}
-      </FloatingSurface>
-    </>
-  );
-}
-
-/** Width of the picker's popover — shared with other hosts of {@link IconPicker} (space icons). */
-export const ICON_PICKER_WIDTH = 232;
-const POPOVER_WIDTH = ICON_PICKER_WIDTH;
-
-/** Props of {@link IconPicker}. */
-export interface IconPickerProps {
-  /** An icon is set: the reset row shows. */
-  hasIcon: boolean;
-  /** `null` = reset to the default glyph. */
-  onPick: (icon: ProjectIcon | null) => void;
-  /** Label of the reset row (shown when an icon is set). */
-  resetLabel?: string;
-}
-
-/**
- * The emoji / image picker body — directory icons here, space icons in
- * Settings › General › Spaces. Hosts own the popover and the persistence.
- *
- * @param props - The {@link IconPickerProps}.
- */
-export function IconPicker({ hasIcon, onPick, resetLabel }: IconPickerProps) {
-  const labels = useSidebarLabels();
-  const fileRef = useRef<HTMLInputElement | null>(null);
-  const [emojiInput, setEmojiInput] = useState('');
-
-  const commitEmojiInput = () => {
-    const grapheme = firstGrapheme(emojiInput);
-
-    if (grapheme) {
-      onPick({ kind: 'emoji', value: grapheme });
-    }
-  };
-
-  const onFileChange = async (event: ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
-    event.target.value = '';
-
-    if (!file) {
-      return;
-    }
-
-    try {
-      onPick({ kind: 'image', value: await fileToIconDataUrl(file) });
-    } catch {
-      // Undecodable file (corrupt / unsupported) — keep the popover open.
-    }
-  };
-
-  return (
-    <>
-      <input
-        type="text"
-        value={emojiInput}
-        onChange={(event) => setEmojiInput(event.target.value)}
-        onKeyDown={(event) => {
-          if (event.key === 'Enter') {
-            event.preventDefault();
-            commitEmojiInput();
-          }
-        }}
-        placeholder={labels.emojiPlaceholder}
-        aria-label={labels.customEmoji}
-        spellCheck={false}
-        autoFocus
-        className="zg-well w-full box-border h-7 px-2 mb-2 outline-none text-zg-ui placeholder:text-[var(--zg-text-muted)]"
-      />
-      <div className="grid grid-cols-8 gap-0.5">
-        {COMMON_EMOJI.map((emoji) => (
-          <button
-            key={emoji}
-            type="button"
-            title={emoji}
-            onClick={() => onPick({ kind: 'emoji', value: emoji })}
-            className="zg-press-soft inline-flex items-center justify-center w-6 h-6 rounded-zg-sm bg-transparent border-0 cursor-pointer p-0 text-zg-body leading-none hover:before:bg-[var(--zg-row-hover)]"
-          >
-            {emoji}
-          </button>
-        ))}
-      </div>
-      <MenuSeparator />
-      <MenuRow
-        size="sm"
-        icon={<span aria-hidden className="i-ph-image text-sm" />}
-        title={labels.chooseImage}
-        onClick={() => fileRef.current?.click()}
-      />
-      {hasIcon && (
-        <MenuRow
-          size="sm"
-          icon={<span aria-hidden className="i-ph-arrow-u-up-left text-sm" />}
-          title={resetLabel ?? labels.resetToFolder}
-          onClick={() => onPick(null)}
-        />
-      )}
-      <input ref={fileRef} type="file" accept="image/*" className="hidden" onChange={(e) => void onFileChange(e)} />
-    </>
-  );
-}

package/src/chat/sidebar/RowChips.tsx

@@ -1,98 +0,0 @@
-/**
- * The chips a sidebar row's badge line leads with (after the host's
- * `HostBadge`): its project once a favorite has left its project group, and
- * the environment it runs in when not here.
- */
-import type { CSSProperties } from 'react';
-import type { SessionEnvironmentSummary } from 'zidane/chat';
-
-import { environmentKindIcon } from '../../git/headless/environment';
-import { environmentKindLabel, environmentSummaryText } from '../headless/sidebar/environment';
-import type { ProjectIcon } from '../headless/sidebar/project-icons';
-import { useSidebarLabels } from './useSidebarLabels';
-
-const CHIP = 'zg-row-badge zg-meta inline-flex items-center gap-1 h-[18px] px-1.5 rounded-zg-sm whitespace-nowrap';
-
-/** Props of {@link EnvironmentChip}. */
-export interface EnvironmentChipProps {
-  /** Where the session runs; nothing renders without one (a local session). */
-  environment: SessionEnvironmentSummary | undefined;
-  /** Extra classes on the chip. */
-  className?: string;
-  /** Inline styles on the chip. */
-  style?: CSSProperties;
-}
-
-/**
- * Where a non-local session runs: the kind's glyph and a short name (the branch for a worktree, else the
- * kind or machine). A spinner while provisioning, a red warning when setup failed; the tooltip has the
- * details.
- *
- * @param props - The `environment`, `className` and `style`.
- */
-export function EnvironmentChip({ environment, className = '', style }: EnvironmentChipProps) {
-  const labels = useSidebarLabels();
-  if (!environment) return null;
-  const icon =
-    environment.state === 'provisioning'
-      ? 'i-ph-circle-notch animate-spin text-[var(--zg-text-muted)]'
-      : environment.state === 'failed'
-        ? 'i-ph-warning-circle text-[var(--zg-danger)]'
-        : `${environmentKindIcon(environment.kind)} ${environment.suspended ? 'opacity-45' : ''}`;
-  return (
-    <span
-      data-testid="row-badge-environment"
-      title={environmentSummaryText(environment, labels)}
-      className={`${CHIP} ${className}`}
-      style={style}
-    >
-      <span aria-hidden className={`${icon} text-zg-meta`} />
-      {environment.branch || environmentKindLabel(environment.kind, labels)}
-    </span>
-  );
-}
-
-/** A session's project, first on its badge line: a favorite has left its project group. */
-export interface RowProject {
-  /** The project's name. */
-  label: string;
-  /** Its folder, for the tooltip. */
-  path: string;
-  /** The icon the project's group shows (a picked one, else git or folder). */
-  icon?: ProjectIcon;
-  /** Its folder is a git repository. */
-  isGitRepo: boolean;
-}
-
-/** Props of {@link ProjectChip}. */
-export interface ProjectChipProps {
-  /** The project. */
-  project: RowProject;
-  /** Extra classes on the chip. */
-  className?: string;
-  /** Inline styles on the chip. */
-  style?: CSSProperties;
-}
-
-/**
- * A session's project as a chip: its icon (picked, else git or folder) and its name.
- *
- * @param props - The `project`, `className` and `style`.
- */
-export function ProjectChip({ project, className = '', style }: ProjectChipProps) {
-  const { icon } = project;
-  return (
-    <span data-testid="row-badge-project" title={project.path} className={`${CHIP} ${className}`} style={style}>
-      {icon?.kind === 'image' ? (
-        <img src={icon.value} alt="" draggable={false} className="w-3 h-3 rounded-[2px] object-cover" />
-      ) : icon?.kind === 'emoji' ? (
-        <span aria-hidden className="text-zg-meta leading-none">
-          {icon.value}
-        </span>
-      ) : (
-        <span aria-hidden className={`${project.isGitRepo ? 'i-ph-git-branch' : 'i-ph-folder'} text-zg-meta`} />
-      )}
-      {project.label}
-    </span>
-  );
-}