@iloveagents/foundry-web-ui 0.3.0 → 0.4.0

package/src/components/context-badges.tsx

@@ -1,136 +0,0 @@
-/**
- * Context badge components for the composer and sent messages.
- *
- * Renders user-selected context items as violet-tinted badges,
- * visually distinct from gray file attachment badges.
- *
- * - ComposerContextBadges: editable badges in the composer (with remove button)
- * - SentContextBadges: read-only badges on sent user messages
- */
-
-import { type FC, createElement } from "react";
-import { Pin, TextSelect, X, FileText, Link2, StickyNote, type LucideIcon } from "lucide-react";
-import { cn } from "@iloveagents/foundry-web-primitives";
-import { Tooltip, TooltipTrigger, TooltipContent } from "../ui/tooltip.tsx";
-import { useAppStore, type ContextItem, type ContextItemType } from "../lib/app-store.ts";
-
-const CONTEXT_ICONS: Record<ContextItemType, LucideIcon> = {
-  selection: TextSelect,
-  page: FileText,
-  ref: Link2,
-  note: StickyNote,
-};
-
-function ContextIcon({ type, className }: { type: ContextItemType; className?: string }) {
-  return createElement(CONTEXT_ICONS[type] ?? TextSelect, { className });
-}
-
-/** Get tooltip text for a context item (source page or path). */
-function getBadgeTooltip(item: ContextItem): string {
-  const source =
-    item.type === "page" && item.payload.kind === "page" ? item.payload.path : item.sourcePage;
-  return `${item.label}\n${source}`;
-}
-
-/** Editable badge in the composer with a remove button. */
-const ComposerBadge: FC<{ item: ContextItem }> = ({ item }) => {
-  const removeItem = useAppStore((s) => s.removeContextItem);
-  const promoteItem = useAppStore((s) => s.promoteContextItem);
-  const isEphemeral = item.persistence === "ephemeral";
-
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <div
-          className={cn(
-            "inline-flex items-center gap-1.5 max-w-70",
-            "rounded-lg bg-primary/5",
-            "px-2 py-1",
-            isEphemeral ? "border border-dashed border-primary/40" : "border border-primary/20",
-          )}
-        >
-          <ContextIcon type={item.type} className="size-3 text-primary shrink-0" />
-          <span className="text-xs text-foreground truncate">{item.label}</span>
-          {isEphemeral && (
-            <button
-              type="button"
-              onClick={() => promoteItem(item.id)}
-              className="p-0.5 rounded hover:bg-primary/10 shrink-0"
-              aria-label="Pin context"
-            >
-              <Pin className="size-3 text-muted-foreground" />
-            </button>
-          )}
-          <button
-            type="button"
-            onClick={() => removeItem(item.id)}
-            className="p-0.5 rounded hover:bg-primary/10 shrink-0"
-            aria-label="Remove context"
-          >
-            <X className="size-3" />
-          </button>
-        </div>
-      </TooltipTrigger>
-      <TooltipContent side="top" className="whitespace-pre-line">
-        {getBadgeTooltip(item)}
-      </TooltipContent>
-    </Tooltip>
-  );
-};
-
-/** Read-only badge on a sent user message. Mirrors composer context chips. */
-const SentBadge: FC<{ item: ContextItem }> = ({ item }) => {
-  const isEphemeral = item.persistence === "ephemeral";
-
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <div
-          className={cn(
-            "inline-flex items-center gap-1.5 max-w-70",
-            "rounded-lg bg-primary/5",
-            "px-2 py-1",
-            isEphemeral ? "border border-dashed border-primary/40" : "border border-primary/20",
-          )}
-        >
-          <ContextIcon type={item.type} className="size-3 text-primary shrink-0" />
-          <span className="text-[11px] leading-tight text-foreground truncate">{item.label}</span>
-        </div>
-      </TooltipTrigger>
-      <TooltipContent side="top" className="whitespace-pre-line">
-        {getBadgeTooltip(item)}
-      </TooltipContent>
-    </Tooltip>
-  );
-};
-
-/** Renders ephemeral context badges in the composer (persistent items shown in ContextPins). */
-export const ComposerContextBadges: FC = () => {
-  const items = useAppStore((s) => s.contextItems);
-  const ephemeral = items.filter((i) => i.persistence === "ephemeral");
-
-  if (ephemeral.length === 0) return null;
-
-  return (
-    <div className="flex flex-wrap gap-1.5">
-      {ephemeral.map((item) => (
-        <ComposerBadge key={item.id} item={item} />
-      ))}
-    </div>
-  );
-};
-
-/** Renders sent context badges on a user message (read-only). */
-export const SentContextBadges: FC<{ messageId: string }> = ({ messageId }) => {
-  const items = useAppStore((s) => s.sentContext[messageId]);
-
-  if (!items || items.length === 0) return null;
-
-  return (
-    <div className="flex flex-wrap gap-1 mb-1">
-      {items.map((item) => (
-        <SentBadge key={item.id} item={item} />
-      ))}
-    </div>
-  );
-};

package/src/components/context-bar.tsx

@@ -1,238 +0,0 @@
-/**
- * Context Pins — pin button with count badge and hover flyout.
- *
- * Click: toggles pin/unpin current page.
- * Hover (when pins exist): shows flyout to view, navigate, and remove pins.
- */
-
-import { type FC, useState, useRef, useEffect, createElement } from "react";
-import { useNavigate } from "react-router";
-import {
-  X,
-  Pin,
-  PinOff,
-  TextSelect,
-  FileText,
-  Link2,
-  StickyNote,
-  type LucideIcon,
-} from "lucide-react";
-import { cn } from "@iloveagents/foundry-web-primitives";
-import { TooltipIconButton } from "./tooltip-icon-button.tsx";
-import { useAppStore, type ContextItem, type ContextItemType } from "../lib/app-store.ts";
-
-const CONTEXT_ICONS: Record<ContextItemType, LucideIcon> = {
-  selection: TextSelect,
-  page: FileText,
-  ref: Link2,
-  note: StickyNote,
-};
-
-interface ContextPinsProps {
-  /** Show the pin button to add current page */
-  showPinButton?: boolean;
-  /** Compact mode for small containers (mini chat bubble header) */
-  compact?: boolean;
-  /** Direction flyout opens: up (composer) or down (header) */
-  flyoutDirection?: "up" | "down";
-}
-
-/** Resolve the URL a context item navigates to when clicked.
- *
- * Two shapes the framework knows about:
- *
- * 1. **Page** (``type: "page"``) — the canonical case the OSS shell
- *    creates for "Pin this page". The payload's ``path`` IS the
- *    navigation target.
- * 2. **Ref** (``type: "ref"``) — created by feature modules when the
- *    user pins a structured reference (Spaces blocks, code symbols,
- *    DB rows, …). The framework stays agnostic about the ref shape;
- *    the source module places the canonical deep-link URL — including
- *    any anchor hash — in the chip's ``sourcePage`` field, which is
- *    already the conventional "where the user pinned from" breadcrumb.
- *    Surfacing it here makes every feature module's ref chips clickable
- *    without an extension-point registry, and without the framework
- *    knowing module-specific URL shapes.
- *
- * Other item types (``selection``, ``note``) intentionally stay
- * non-clickable — they are excerpts / annotations, not anchors.
- *
- * @internal Exported for unit tests; not part of the public API.
- */
-export function getNavigablePath(item: ContextItem): string | null {
-  if (item.type === "page" && item.payload.kind === "page") return item.payload.path;
-  if (
-    item.type === "ref" &&
-    item.payload.kind === "ref" &&
-    typeof item.sourcePage === "string" &&
-    // Guard: ``sourcePage`` is also used as a free-form breadcrumb
-    // label by some callers (e.g. "page-label" instead of "/page").
-    // Treat it as a navigation target only when it looks like an
-    // in-app path. Hash-only links (``#anchor``) are also valid —
-    // they keep the user on the current entity but scroll to the
-    // pinned atom (e.g. Spaces ``#block-{id}`` deep-link from the
-    // current page).
-    (item.sourcePage.startsWith("/") || item.sourcePage.startsWith("#"))
-  ) {
-    return item.sourcePage;
-  }
-  return null;
-}
-
-export const ContextPins: FC<ContextPinsProps> = ({
-  showPinButton = true,
-  compact = false,
-  flyoutDirection = "up",
-}) => {
-  const items = useAppStore((s) => s.contextItems);
-  const removeItem = useAppStore((s) => s.removeContextItem);
-  const addContextItem = useAppStore((s) => s.addContextItem);
-  const currentPage = useAppStore((s) => s.currentPage);
-  const pageLabel = useAppStore((s) => s.navContext.label);
-  const navMeta = useAppStore((s) => s.navContext.meta);
-  const navigate = useNavigate();
-  const [flyoutOpen, setFlyoutOpen] = useState(false);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const hoverTimeout = useRef<ReturnType<typeof setTimeout>>(undefined);
-
-  const pinned = items.filter((i) => i.persistence === "persistent");
-
-  // Check if current page is already pinned
-  const isCurrentPagePinned = pinned.some(
-    (i) => i.type === "page" && i.payload.kind === "page" && i.payload.path === currentPage,
-  );
-
-  // Find the pin item for current page (to unpin)
-  const currentPagePin = pinned.find(
-    (i) => i.type === "page" && i.payload.kind === "page" && i.payload.path === currentPage,
-  );
-
-  // Close flyout on outside click
-  useEffect(() => {
-    if (!flyoutOpen) return;
-    const handleClick = (e: MouseEvent) => {
-      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
-        setFlyoutOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", handleClick);
-    return () => document.removeEventListener("mousedown", handleClick);
-  }, [flyoutOpen]);
-
-  const handleTogglePin = () => {
-    if (isCurrentPagePinned && currentPagePin) {
-      removeItem(currentPagePin.id);
-    } else {
-      addContextItem({
-        type: "page",
-        label: pageLabel,
-        payload: { kind: "page", path: currentPage, label: pageLabel, meta: navMeta },
-        sourcePage: currentPage,
-        persistence: "persistent",
-      });
-    }
-  };
-
-  const handleMouseEnter = () => {
-    clearTimeout(hoverTimeout.current);
-    if (pinned.length > 0) setFlyoutOpen(true);
-  };
-
-  const handleMouseLeave = () => {
-    hoverTimeout.current = setTimeout(() => setFlyoutOpen(false), 200);
-  };
-
-  if (pinned.length === 0 && !showPinButton) return null;
-
-  return (
-    <div
-      className="relative"
-      ref={containerRef}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-    >
-      <TooltipIconButton
-        tooltip={isCurrentPagePinned ? "Unpin this page" : "Pin this page"}
-        size="icon"
-        className={cn(
-          "shrink-0 relative",
-          compact ? "size-7" : "size-8",
-          isCurrentPagePinned && "text-primary",
-        )}
-        onClick={handleTogglePin}
-      >
-        {isCurrentPagePinned ? (
-          <PinOff className={compact ? "size-3.5" : "size-4"} />
-        ) : (
-          <Pin className={compact ? "size-3.5" : "size-4"} />
-        )}
-        {pinned.length > 0 && (
-          <span
-            className={cn(
-              "absolute rounded-full bg-primary font-medium text-primary-foreground flex items-center justify-center",
-              compact
-                ? "-top-0.5 -right-0.5 size-3.5 text-[9px]"
-                : "top-0 right-0 size-3.5 text-[9px]",
-            )}
-          >
-            {pinned.length}
-          </span>
-        )}
-      </TooltipIconButton>
-
-      {/* Hover flyout */}
-      {flyoutOpen && pinned.length > 0 && (
-        <div
-          className={cn(
-            "absolute z-50 w-64 rounded-lg border border-border bg-background shadow-xl p-2 space-y-1",
-            flyoutDirection === "up" ? "bottom-full mb-2 left-0" : "top-9 right-0",
-          )}
-        >
-          <div className="px-1 pb-1 border-b border-border/50">
-            <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wide">
-              Pinned Context
-            </span>
-          </div>
-          {pinned.map((item) => {
-            const navPath = getNavigablePath(item);
-            return (
-              <div
-                key={item.id}
-                className="flex items-center gap-1.5 px-1 py-1 rounded hover:bg-muted group/pin"
-              >
-                {createElement(CONTEXT_ICONS[item.type] ?? TextSelect, {
-                  className: "size-3 text-primary shrink-0",
-                })}
-                {navPath ? (
-                  <button
-                    type="button"
-                    onClick={() => {
-                      navigate(navPath);
-                      setFlyoutOpen(false);
-                    }}
-                    className="text-xs text-foreground truncate flex-1 text-left hover:underline"
-                  >
-                    {item.label}
-                  </button>
-                ) : (
-                  <span className="text-xs text-foreground truncate flex-1">{item.label}</span>
-                )}
-                <button
-                  type="button"
-                  onClick={() => removeItem(item.id)}
-                  className={cn(
-                    "p-0.5 rounded hover:bg-primary/10 transition-opacity shrink-0",
-                    "opacity-0 group-hover/pin:opacity-100",
-                  )}
-                  aria-label={`Remove ${item.label}`}
-                >
-                  <X className="size-3 text-muted-foreground" />
-                </button>
-              </div>
-            );
-          })}
-        </div>
-      )}
-    </div>
-  );
-};

package/src/components/form-dialog.tsx

@@ -1,56 +0,0 @@
-import type { ReactNode } from "react";
-
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "../ui/dialog.tsx";
-import { cn } from "@iloveagents/foundry-web-primitives";
-
-export function FormDialog({
-  open,
-  onOpenChange,
-  title,
-  description,
-  children,
-  footer,
-  contentClassName,
-  bodyClassName,
-  size = "md",
-}: {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  title: ReactNode;
-  description?: ReactNode;
-  children?: ReactNode;
-  footer?: ReactNode;
-  contentClassName?: string;
-  bodyClassName?: string;
-  size?: "sm" | "md" | "lg" | "xl" | "2xl";
-}) {
-  const sizeClassName = {
-    sm: "max-w-sm",
-    md: "max-w-lg",
-    lg: "max-w-xl",
-    xl: "max-w-2xl",
-    "2xl": "max-w-3xl",
-  }[size];
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className={cn(sizeClassName, contentClassName)}>
-        <DialogHeader>
-          <DialogTitle>{title}</DialogTitle>
-          <DialogDescription className={description ? undefined : "sr-only"}>
-            {description ?? "Complete the form below."}
-          </DialogDescription>
-        </DialogHeader>
-        {children != null ? <div className={bodyClassName}>{children}</div> : null}
-        {footer ? <DialogFooter>{footer}</DialogFooter> : null}
-      </DialogContent>
-    </Dialog>
-  );
-}

package/src/components/global-selection-popover.tsx

@@ -1,266 +0,0 @@
-/**
- * Global selection command bar for text selection anywhere on the page.
- *
- * Appears near selected text when the user makes a selection outside of
- * input elements and the tool panel (which has its own SelectionPopover).
- */
-
-import { type FormEvent, useState, useEffect, useCallback, useRef } from "react";
-import { PencilLine, Send, TextSelect, X } from "lucide-react";
-import { cn } from "@iloveagents/foundry-web-primitives";
-import { useAppStore } from "../lib/app-store.ts";
-import { useChatBubbleStore } from "../lib/chat-bubble-store.ts";
-import { submitComposerText } from "../lib/composer-submit-store.ts";
-import {
-  resolveSelectionContext,
-  type SelectionContextResult,
-} from "../lib/selection-context.ts";
-
-const ACTION_POPOVER_HEIGHT = 38;
-const SIMPLE_POPOVER_WIDTH = 126;
-const ACTION_POPOVER_WIDTH = 236;
-const MODIFY_POPOVER_WIDTH = 340;
-const OFFSET = 8;
-const DEFAULT_MODIFY_PROMPT_PREFIX = "Modify the selected content:";
-
-/** Elements where selection should NOT trigger the popover */
-function isEditableTarget(node: Node): boolean {
-  const el = node instanceof HTMLElement ? node : node.parentElement;
-  if (!el) return false;
-  const tag = el.tagName;
-  if (tag === "INPUT" || tag === "TEXTAREA") return true;
-  if (el.isContentEditable) return true;
-  return false;
-}
-
-export function GlobalSelectionPopover() {
-  const [position, setPosition] = useState<{ top: number; left: number } | null>(null);
-  const [selectedText, setSelectedText] = useState("");
-  const [selectionContext, setSelectionContext] = useState<SelectionContextResult | null>(null);
-  const [mode, setMode] = useState<"actions" | "modify">("actions");
-  const [modifyPrompt, setModifyPrompt] = useState("");
-  const addContextItem = useAppStore((s) => s.addContextItem);
-  const popoverRef = useRef<HTMLElement | null>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const setPopoverNode = useCallback((node: HTMLElement | null) => {
-    popoverRef.current = node;
-  }, []);
-
-  const hidePopover = useCallback(() => {
-    setPosition(null);
-    setSelectedText("");
-    setSelectionContext(null);
-    setMode("actions");
-    setModifyPrompt("");
-  }, []);
-
-  const handleMouseUp = useCallback((event: MouseEvent) => {
-    if (popoverRef.current?.contains(event.target as Node)) return;
-
-    requestAnimationFrame(() => {
-      const selection = window.getSelection();
-      if (!selection || selection.isCollapsed || !selection.toString().trim()) return;
-
-      const anchorNode = selection.anchorNode;
-      if (!anchorNode) return;
-
-      // Skip if inside editable element
-      if (isEditableTarget(anchorNode)) return;
-
-      // Skip if inside tool panel (it has its own SelectionPopover)
-      const el = anchorNode instanceof HTMLElement ? anchorNode : anchorNode.parentElement;
-      if (el?.closest("[data-tool-panel]")) return;
-
-      const text = selection.toString().trim();
-      if (!text) return;
-
-      const range = selection.getRangeAt(0);
-      const rect = range.getBoundingClientRect();
-      const sourcePage = useAppStore.getState().navContext.label;
-      const resolved = resolveSelectionContext({
-        text,
-        anchorNode,
-        focusNode: selection.focusNode,
-        range,
-        sourcePage,
-      });
-      const width = resolved.supportsModify ? ACTION_POPOVER_WIDTH : SIMPLE_POPOVER_WIDTH;
-
-      // Position above selection, fixed to viewport
-      let top = rect.top - ACTION_POPOVER_HEIGHT - OFFSET;
-      let left = rect.left + rect.width / 2 - width / 2;
-
-      // If would go above viewport, place below
-      if (top < OFFSET) {
-        top = rect.bottom + OFFSET;
-      }
-
-      // Clamp horizontal
-      left = Math.max(OFFSET, Math.min(left, window.innerWidth - width - OFFSET));
-
-      setSelectedText(text);
-      setSelectionContext(resolved);
-      setMode("actions");
-      setModifyPrompt("");
-      setPosition({ top, left });
-    });
-  }, []);
-
-  const addResolvedContext = useCallback(() => {
-    if (!selectionContext) return false;
-    addContextItem(selectionContext.item);
-    return true;
-  }, [addContextItem, selectionContext]);
-
-  const handleAddToContext = useCallback(() => {
-    if (!selectedText || !addResolvedContext()) return;
-
-    window.getSelection()?.removeAllRanges();
-    hidePopover();
-  }, [selectedText, addResolvedContext, hidePopover]);
-
-  const handleStartModify = useCallback(() => {
-    setMode("modify");
-    setPosition((current) => {
-      if (!current) return current;
-      const centeredLeft = current.left - (MODIFY_POPOVER_WIDTH - ACTION_POPOVER_WIDTH) / 2;
-      return {
-        ...current,
-        left: Math.max(
-          OFFSET,
-          Math.min(centeredLeft, window.innerWidth - MODIFY_POPOVER_WIDTH - OFFSET),
-        ),
-      };
-    });
-  }, []);
-
-  const handleModifySubmit = useCallback(
-    (event: FormEvent<HTMLFormElement>) => {
-      event.preventDefault();
-      const prompt = modifyPrompt.trim();
-      if (!prompt || !selectionContext || !addResolvedContext()) return;
-
-      const text =
-        selectionContext.formatModifyPrompt?.(prompt) ??
-        `${DEFAULT_MODIFY_PROMPT_PREFIX} ${prompt}`;
-      useChatBubbleStore.getState().open();
-      submitComposerText(text);
-      window.getSelection()?.removeAllRanges();
-      hidePopover();
-    },
-    [addResolvedContext, hidePopover, modifyPrompt, selectionContext],
-  );
-
-  useEffect(() => {
-    const handleMouseDown = (e: MouseEvent) => {
-      if (popoverRef.current?.contains(e.target as Node)) return;
-      hidePopover();
-    };
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === "Escape") hidePopover();
-    };
-
-    document.addEventListener("mouseup", handleMouseUp);
-    document.addEventListener("mousedown", handleMouseDown);
-    window.addEventListener("keydown", handleKeyDown);
-
-    return () => {
-      document.removeEventListener("mouseup", handleMouseUp);
-      document.removeEventListener("mousedown", handleMouseDown);
-      window.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [handleMouseUp, hidePopover]);
-
-  useEffect(() => {
-    if (mode === "modify") {
-      inputRef.current?.focus();
-    }
-  }, [mode]);
-
-  if (!position || !selectionContext) return null;
-
-  if (mode === "modify") {
-    return (
-      <form
-        ref={setPopoverNode}
-        className={cn(
-          "fixed z-50",
-          "flex items-center gap-1.5",
-          "rounded-2xl border border-border/70 bg-background/95 p-1.5 shadow-xl shadow-black/10 backdrop-blur-md",
-          "animate-in fade-in-0 zoom-in-95 duration-150",
-        )}
-        style={{ top: position.top, left: position.left, width: MODIFY_POPOVER_WIDTH }}
-        onSubmit={handleModifySubmit}
-      >
-        <PencilLine className="ml-1 size-3.5 shrink-0 text-primary" />
-        <input
-          ref={inputRef}
-          value={modifyPrompt}
-          onChange={(event) => setModifyPrompt(event.target.value)}
-          placeholder="Describe change..."
-          className={cn(
-            "min-w-0 flex-1 bg-transparent px-1 py-1.5 text-xs text-foreground outline-none",
-            "placeholder:text-muted-foreground",
-          )}
-        />
-        <button
-          type="button"
-          aria-label="Cancel modify"
-          onClick={hidePopover}
-          className="rounded-full p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
-        >
-          <X className="size-3.5" />
-        </button>
-        <button
-          type="submit"
-          aria-label="Send modify prompt"
-          disabled={!modifyPrompt.trim()}
-          className={cn(
-            "rounded-full p-1.5 transition-colors",
-            modifyPrompt.trim()
-              ? "bg-primary text-primary-foreground hover:bg-primary/90"
-              : "text-muted-foreground opacity-50",
-          )}
-        >
-          <Send className="size-3.5" />
-        </button>
-      </form>
-    );
-  }
-
-  return (
-    <div
-      ref={setPopoverNode}
-      role="toolbar"
-      aria-label="Selection actions"
-      className={cn(
-        "fixed z-50",
-        "inline-flex items-center gap-1",
-        "rounded-full border border-border/70 bg-background/95 p-1 shadow-xl shadow-black/10 backdrop-blur-md",
-        "animate-in fade-in-0 zoom-in-95 duration-150",
-      )}
-      style={{ top: position.top, left: position.left }}
-      onMouseDown={(e) => e.preventDefault()}
-    >
-      <button
-        type="button"
-        className="inline-flex h-7 items-center gap-1.5 rounded-full px-2.5 text-xs font-medium text-foreground transition-colors hover:bg-muted"
-        onClick={handleAddToContext}
-      >
-        <TextSelect className="size-3.5 text-primary" />
-        Add to chat
-      </button>
-      {selectionContext.supportsModify && (
-        <button
-          type="button"
-          className="inline-flex h-7 items-center gap-1.5 rounded-full px-2.5 text-xs font-medium text-foreground transition-colors hover:bg-primary/10 hover:text-primary"
-          onClick={handleStartModify}
-        >
-          <PencilLine className="size-3.5 text-primary" />
-          Modify
-        </button>
-      )}
-    </div>
-  );
-}