@hyperframes/studio 0.8.6 → 0.8.8

package/src/components/panels/SlideshowSubPanels.tsx

@@ -23,7 +23,7 @@ export function SectionHeader({
   return (
     <button
       type="button"
-      className="flex w-full items-center justify-between px-3 py-2 text-[11px] font-medium text-neutral-400 hover:text-neutral-200 border-b border-neutral-800 transition-colors"
+      className="flex w-full items-center justify-between px-3 py-2 text-[11px] font-medium text-neutral-400 hover:text-neutral-200 active:bg-neutral-800/60 border-b border-neutral-800 transition-colors"
       onClick={onToggle}
       aria-expanded={expanded}
     >
@@ -64,6 +64,7 @@ export function SlideList({
       {rows.map((scene) => {
         const isSlide = slideIds.has(scene.id);
         const isSelected = selectedSceneId === scene.id;
+        const slideIndex = slides.findIndex((s) => s.sceneId === scene.id);
         return (
           <div
             key={scene.id}
@@ -98,7 +99,8 @@ export function SlideList({
                   type="button"
                   aria-label="Move slide up"
                   title="Move up"
-                  className="px-1 py-0.5 text-[10px] text-neutral-400 hover:text-white disabled:opacity-30"
+                  disabled={slideIndex <= 0}
+                  className="px-1 py-0.5 text-[10px] text-neutral-400 enabled:hover:text-white enabled:active:scale-[0.95] disabled:opacity-30 disabled:cursor-not-allowed"
                   onClick={(e) => {
                     e.stopPropagation();
                     onReorder(scene.id, "up");
@@ -110,7 +112,8 @@ export function SlideList({
                   type="button"
                   aria-label="Move slide down"
                   title="Move down"
-                  className="px-1 py-0.5 text-[10px] text-neutral-400 hover:text-white disabled:opacity-30"
+                  disabled={slideIndex === slides.length - 1}
+                  className="px-1 py-0.5 text-[10px] text-neutral-400 enabled:hover:text-white enabled:active:scale-[0.95] disabled:opacity-30 disabled:cursor-not-allowed"
                   onClick={(e) => {
                     e.stopPropagation();
                     onReorder(scene.id, "down");
@@ -310,6 +313,7 @@ function BranchItem({
 }: BranchItemProps) {
   const [editing, setEditing] = useState(false);
   const [draft, setDraft] = useState(seq.label);
+  const [confirmingDelete, setConfirmingDelete] = useState(false);
 
   const commitRename = useCallback(() => {
     const label = draft.trim();
@@ -341,7 +345,10 @@ function BranchItem({
             title="Click to rename"
             onClick={() => setEditing(true)}
             onKeyDown={(e) => {
-              if (e.key === "Enter" || e.key === " ") setEditing(true);
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                setEditing(true);
+              }
             }}
           >
             {seq.label}
@@ -350,12 +357,42 @@ function BranchItem({
         <button
           type="button"
           aria-label={`Delete branch ${seq.label}`}
-          className="text-[10px] text-neutral-500 hover:text-red-400 transition-colors px-1"
-          onClick={() => onDelete(seq.id)}
+          className="text-[10px] text-neutral-500 hover:text-red-400 active:scale-[0.95] transition-colors px-1"
+          onClick={() => setConfirmingDelete(true)}
         >
           ✕
         </button>
       </div>
+      {confirmingDelete && (
+        <div className="px-2 py-1.5 bg-red-950/30 border-l-2 border-red-500 flex flex-col gap-1 rounded-sm">
+          <span className="text-[10px] text-red-400">
+            Delete branch &ldquo;{seq.label}&rdquo;
+            {seq.slides.length > 0
+              ? ` and its ${seq.slides.length} slide${seq.slides.length === 1 ? "" : "s"}`
+              : ""}
+            ? Hotspots pointing to it will no longer resolve.
+          </span>
+          <div className="flex items-center justify-end gap-1">
+            <button
+              type="button"
+              onClick={() => {
+                setConfirmingDelete(false);
+                onDelete(seq.id);
+              }}
+              className="px-2 py-0.5 text-[10px] rounded bg-red-600 text-white hover:bg-red-500 active:bg-red-700 transition-colors"
+            >
+              Delete
+            </button>
+            <button
+              type="button"
+              onClick={() => setConfirmingDelete(false)}
+              className="px-2 py-0.5 text-[10px] rounded text-neutral-400 hover:text-neutral-200 transition-colors"
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+      )}
       <div className="flex flex-col gap-px pl-2">
         {scenes.map((scene) => {
           const assigned = seq.slides.some((s) => s.sceneId === scene.id);
@@ -447,6 +484,16 @@ export function HotspotTool({
           Selected element:{" "}
           <span className="text-neutral-200 font-mono">{elementKey ?? "none"}</span>
         </p>
+        {!elementKey && (
+          <p className="text-[10px] text-neutral-500 italic">
+            Click an element on the canvas to choose the hotspot target.
+          </p>
+        )}
+        {sequences.length === 0 && (
+          <p className="text-[10px] text-neutral-500 italic">
+            Create a branch in the Branches section first — hotspots jump to a branch.
+          </p>
+        )}
         <label className="text-[11px] text-neutral-400">Hotspot label</label>
         <input
           type="text"
@@ -473,7 +520,14 @@ export function HotspotTool({
         <button
           type="button"
           disabled={!elementKey || !targetSequenceId}
-          className="px-3 py-1.5 rounded bg-studio-accent/80 hover:bg-studio-accent text-white text-[11px] font-medium transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
+          title={
+            !elementKey
+              ? "Select an element on the canvas first"
+              : !targetSequenceId
+                ? "Choose a target branch first"
+                : undefined
+          }
+          className="px-3 py-1.5 rounded bg-studio-accent/80 enabled:hover:bg-studio-accent enabled:active:scale-[0.98] text-white text-[11px] font-medium transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
           onClick={handleMakeHotspot}
         >
           Make hotspot

package/src/components/sidebar/AssetCard.test.tsx

@@ -52,7 +52,7 @@ describe("AssetCard click behavior", () => {
   const cardProps = {
     projectId: "p1",
     onCopy: vi.fn(),
-    isCopied: false,
+    copyFeedback: null,
   };
 
   it("clears an open preview overlay when clicking an already-added asset (reveal branch)", () => {
@@ -81,7 +81,7 @@ describe("AudioRow click behavior", () => {
   const rowProps = {
     projectId: "p1",
     onCopy: vi.fn(),
-    isCopied: false,
+    copyFeedback: null,
   };
 
   it("clears an open preview overlay when clicking an already-added audio asset (reveal branch)", () => {

package/src/components/sidebar/AssetCard.tsx

@@ -11,7 +11,7 @@ import { usePlayerStore } from "../../player/store/playerStore";
 import { timelineClipFocusId } from "../../player/components/timelineNavigationIdentity";
 import { useAssetPreviewStore } from "../../utils/assetPreviewStore";
 import { findClipForAsset, isPointerClick } from "../../utils/assetClickBehavior";
-import { basename, ext, truncateMiddle, formatDuration } from "./assetHelpers";
+import { basename, ext, truncateMiddle, formatDuration, type CopyFeedback } from "./assetHelpers";
 import { resolveMediaPreviewUrl } from "../../player/components/thumbnailUtils";
 
 /** Drag payload writer shared by the asset tile and the font row: copy effect
@@ -22,6 +22,23 @@ function writeAssetDragData(e: React.DragEvent, asset: string): void {
   e.dataTransfer.setData("text/plain", asset);
 }
 
+/** Copy-path outcome chip. Copying is a context-menu action, so this is pure
+ *  feedback — it renders only once a copy has succeeded or failed, and never
+ *  as an idle affordance for something the tile itself does not do. */
+function CopyChip({ feedback, asset }: { feedback: CopyFeedback; asset: string }) {
+  if (feedback?.path !== asset) return null;
+  return (
+    <span
+      role="status"
+      className={`flex-shrink-0 text-[9px] font-medium px-1.5 py-px rounded ${
+        feedback.ok ? "text-panel-accent bg-panel-accent/10" : "text-red-400 bg-red-500/10"
+      }`}
+    >
+      {feedback.ok ? "Copied" : "Copy failed"}
+    </span>
+  );
+}
+
 /** Open the row/tile context menu at the pointer, shared by asset tile + font row. */
 function openAssetContextMenu(
   e: React.MouseEvent,
@@ -90,7 +107,7 @@ export interface AssetCardProps {
   used: boolean;
   duration?: number;
   onCopy: (path: string) => void;
-  isCopied: boolean;
+  copyFeedback: CopyFeedback;
   onDelete?: (path: string) => void;
   onRename?: (oldPath: string, newPath: string) => void;
   onAddAssetToTimeline?: (path: string) => void;
@@ -112,13 +129,15 @@ export function AssetCard({
   used,
   duration,
   onCopy,
-  isCopied,
+  copyFeedback,
   onDelete,
   onRename,
   onAddAssetToTimeline,
 }: AssetCardProps) {
   const [contextMenu, setContextMenu] = useState<{ x: number; y: number } | null>(null);
   const [hovered, setHovered] = useState(false);
+  const [imgError, setImgError] = useState(false);
+  const isCopied = copyFeedback?.path === asset && copyFeedback.ok;
   const fullName = asset.split("/").pop() ?? asset;
   const name = basename(asset);
   const extension = ext(asset);
@@ -143,66 +162,80 @@ export function AssetCard({
     pointerDownRef.current = { x: e.clientX, y: e.clientY };
   }, []);
 
+  // Reveal the clip when the asset is already on the timeline, otherwise open
+  // the preview overlay. Shared by pointer-up and keyboard activation so the
+  // tile does the same thing however it is operated.
+  const activateCard = useCallback(() => {
+    if (used) {
+      const clip = findClipForAsset(elements, asset);
+      if (clip) {
+        // Dismiss any open preview overlay (from another asset) — the reveal
+        // must not leave a stale preview card floating over the canvas.
+        clearPreviewAsset();
+        const clipKey = clip.key ?? clip.id;
+        setSelectedElementId(clipKey);
+        // Scroll the timeline so the selected clip is actually visible.
+        requestTimelineFocus(timelineClipFocusId(clipKey));
+        return;
+      }
+    }
+    // Not added (or no matching clip found) → preview overlay
+    setPreviewAsset(asset, projectId);
+  }, [
+    used,
+    elements,
+    asset,
+    projectId,
+    setSelectedElementId,
+    requestTimelineFocus,
+    setPreviewAsset,
+    clearPreviewAsset,
+  ]);
+
   const handlePointerUp = useCallback(
     (e: React.PointerEvent) => {
       const origin = pointerDownRef.current;
       pointerDownRef.current = null;
       if (!origin) return;
       if (!isPointerClick(e.clientX - origin.x, e.clientY - origin.y)) return;
-      // Treat as click
-      if (used) {
-        const clip = findClipForAsset(elements, asset);
-        if (clip) {
-          // Dismiss any open preview overlay (from another asset) — the reveal
-          // must not leave a stale preview card floating over the canvas.
-          clearPreviewAsset();
-          const clipKey = clip.key ?? clip.id;
-          setSelectedElementId(clipKey);
-          // Scroll the timeline so the selected clip is actually visible.
-          requestTimelineFocus(timelineClipFocusId(clipKey));
-          return;
-        }
-      }
-      // Not added (or no matching clip found) → preview overlay
-      setPreviewAsset(asset, projectId);
+      activateCard();
     },
-    [
-      used,
-      elements,
-      asset,
-      projectId,
-      setSelectedElementId,
-      requestTimelineFocus,
-      setPreviewAsset,
-      clearPreviewAsset,
-    ],
+    [activateCard],
   );
 
   return (
     <>
       <div
         draggable
+        role="button"
+        tabIndex={0}
+        aria-label={`${name} — open, drag to timeline, right-click for actions`}
         onPointerDown={handlePointerDown}
         onPointerUp={handlePointerUp}
+        onKeyDown={(e) => {
+          if (e.target !== e.currentTarget) return;
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            activateCard();
+          }
+        }}
         onDragStart={(e) => writeAssetDragData(e, asset)}
         onContextMenu={(e) => openAssetContextMenu(e, setContextMenu)}
         onPointerEnter={() => setHovered(true)}
         onPointerLeave={() => setHovered(false)}
-        className={`flex flex-col gap-1 cursor-pointer rounded-md p-1 transition-colors ${
+        className={`flex flex-col gap-1 cursor-pointer rounded-md p-1 transition-colors outline-none focus-visible:bg-neutral-800/60 ${
           isCopied ? "bg-studio-accent/10" : "hover:bg-neutral-800/40"
         }`}
       >
         {/* Thumbnail */}
         <div className="w-full aspect-video rounded overflow-hidden bg-neutral-900 relative">
-          {isImage && (
+          {isImage && !imgError && (
             <img
               src={serveUrl}
               alt={name}
               loading="lazy"
               className="w-full h-full object-cover"
-              onError={(e) => {
-                (e.target as HTMLImageElement).style.display = "none";
-              }}
+              onError={() => setImgError(true)}
             />
           )}
           {isVideo && (
@@ -220,7 +253,7 @@ export function AssetCard({
               )}
             </>
           )}
-          {!isImage && !isVideo && (
+          {((!isImage && !isVideo) || (isImage && imgError)) && (
             <div className="w-full h-full flex items-center justify-center">
               <span className="text-[10px] font-medium text-neutral-600">{extension}</span>
             </div>
@@ -242,14 +275,17 @@ export function AssetCard({
         </div>
 
         {/* Filename caption */}
-        <span
-          className={`text-[10px] leading-tight text-center block w-full ${
-            used ? "text-panel-text-2" : "text-panel-text-4"
-          }`}
-          title={fullName}
-        >
-          {truncateMiddle(fullName, 22)}
-        </span>
+        <div className="flex items-center justify-center gap-1">
+          <span
+            className={`text-[10px] leading-tight text-center ${
+              used ? "text-panel-text-2" : "text-panel-text-4"
+            }`}
+            title={fullName}
+          >
+            {truncateMiddle(fullName, 22)}
+          </span>
+          <CopyChip feedback={copyFeedback} asset={asset} />
+        </div>
       </div>
 
       {contextMenu && (
@@ -272,7 +308,7 @@ export interface FontRowProps {
   asset: string;
   used: boolean;
   onCopy: (path: string) => void;
-  isCopied: boolean;
+  copyFeedback: CopyFeedback;
   onDelete?: (path: string) => void;
   onRename?: (oldPath: string, newPath: string) => void;
   onAddAssetToTimeline?: (path: string) => void;
@@ -285,7 +321,7 @@ export function FontRow({
   asset,
   used,
   onCopy,
-  isCopied,
+  copyFeedback,
   onDelete,
   onRename,
   onAddAssetToTimeline,
@@ -293,15 +329,26 @@ export function FontRow({
   const [contextMenu, setContextMenu] = useState<{ x: number; y: number } | null>(null);
   const name = basename(asset);
   const extension = ext(asset);
+  const isCopied = copyFeedback?.path === asset && copyFeedback.ok;
 
   return (
     <>
       <div
         draggable
+        role="button"
+        tabIndex={0}
+        aria-label={`${name} — copy path, drag to timeline, right-click for actions`}
         onClick={() => onCopy(asset)}
+        onKeyDown={(e) => {
+          if (e.target !== e.currentTarget) return;
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onCopy(asset);
+          }
+        }}
         onDragStart={(e) => writeAssetDragData(e, asset)}
         onContextMenu={(e) => openAssetContextMenu(e, setContextMenu)}
-        className={`px-2.5 py-1.5 flex items-center gap-2.5 cursor-pointer transition-colors ${
+        className={`px-2.5 py-1.5 flex items-center gap-2.5 cursor-pointer transition-colors outline-none focus-visible:bg-neutral-800/60 ${
           isCopied
             ? "bg-studio-accent/10 border-l-2 border-studio-accent"
             : "border-l-2 border-transparent hover:bg-neutral-800/50"
@@ -323,6 +370,7 @@ export function FontRow({
                 in use
               </span>
             )}
+            <CopyChip feedback={copyFeedback} asset={asset} />
           </div>
         </div>
       </div>

package/src/components/sidebar/AssetContextMenu.tsx

@@ -1,3 +1,12 @@
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { filename } from "./assetHelpers";
+
+/** Reject names that would escape the asset directory or break paths. */
+function isValidAssetName(name: string): boolean {
+  return name.length > 0 && !/[/\\]/.test(name) && !name.includes("..");
+}
+
+// fallow-ignore-next-line complexity
 export function ContextMenu({
   x,
   y,
@@ -17,6 +26,77 @@ export function ContextMenu({
   onRename?: (oldPath: string, newPath: string) => void;
   onAddAtPlayhead?: (path: string) => void;
 }) {
+  const menuRef = useRef<HTMLDivElement>(null);
+  const [pos, setPos] = useState({ x, y });
+  const [mode, setMode] = useState<"menu" | "confirm-delete" | "rename">("menu");
+  const [renameDraft, setRenameDraft] = useState(() => filename(asset));
+  const [renameError, setRenameError] = useState<string | null>(null);
+
+  // Clamp the menu inside the viewport once it has a size.
+  useLayoutEffect(() => {
+    const el = menuRef.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    const margin = 8;
+    setPos({
+      x: Math.min(x, window.innerWidth - rect.width - margin),
+      y: Math.min(y, window.innerHeight - rect.height - margin),
+    });
+  }, [x, y, mode]);
+
+  // Keyboard contract: Escape backs out one level (rename/delete-confirm →
+  // menu → closed), arrows move between menu items.
+  useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        if (mode !== "menu") {
+          setMode("menu");
+        } else {
+          onClose();
+        }
+        return;
+      }
+      if (mode !== "menu" || (e.key !== "ArrowDown" && e.key !== "ArrowUp")) return;
+      const items = Array.from(
+        menuRef.current?.querySelectorAll<HTMLButtonElement>('[role="menuitem"]') ?? [],
+      );
+      if (items.length === 0) return;
+      e.preventDefault();
+      const idx = items.findIndex((el) => el === document.activeElement);
+      const delta = e.key === "ArrowDown" ? 1 : -1;
+      const next = items[(idx + delta + items.length) % items.length];
+      next.focus();
+    };
+    document.addEventListener("keydown", onKeyDown, true);
+    return () => document.removeEventListener("keydown", onKeyDown, true);
+  }, [mode, onClose]);
+
+  // Move focus into the menu on open so arrow keys work immediately.
+  useEffect(() => {
+    if (mode === "menu") {
+      menuRef.current?.querySelector<HTMLButtonElement>('[role="menuitem"]')?.focus();
+    }
+  }, [mode]);
+
+  const commitRename = useCallback(() => {
+    const trimmed = renameDraft.trim();
+    if (trimmed === filename(asset)) {
+      onClose();
+      return;
+    }
+    if (!isValidAssetName(trimmed)) {
+      setRenameError("Name can't contain / or ..");
+      return;
+    }
+    const dir = asset.includes("/") ? asset.slice(0, asset.lastIndexOf("/") + 1) : "";
+    onRename?.(asset, `${dir}${trimmed}`);
+    onClose();
+  }, [renameDraft, asset, onRename, onClose]);
+
+  const itemCls =
+    "w-full text-left px-3 py-1.5 text-neutral-300 hover:bg-neutral-800 focus-visible:bg-neutral-800 outline-none active:bg-neutral-700/70 transition-colors";
+
   return (
     <div
       className="fixed inset-0 z-[200]"
@@ -27,55 +107,129 @@ export function ContextMenu({
       }}
     >
       <div
-        className="absolute bg-neutral-900 border border-neutral-700 rounded-lg shadow-xl py-1 min-w-[140px] text-xs"
-        style={{ left: x, top: y }}
+        ref={menuRef}
+        role="menu"
+        aria-label={`Actions for ${filename(asset)}`}
+        className="absolute bg-neutral-900 border border-neutral-700 rounded-lg shadow-xl py-1 min-w-[160px] text-xs"
+        style={{ left: pos.x, top: pos.y }}
+        onClick={(e) => e.stopPropagation()}
       >
-        {onAddAtPlayhead && (
-          <button
-            type="button"
-            onClick={(e) => {
-              e.stopPropagation();
-              onAddAtPlayhead(asset);
+        {mode === "menu" && (
+          <>
+            {onAddAtPlayhead && (
+              <button
+                role="menuitem"
+                onClick={() => {
+                  onAddAtPlayhead(asset);
+                  onClose();
+                }}
+                className={itemCls}
+              >
+                Add at playhead
+              </button>
+            )}
+            <button
+              role="menuitem"
+              onClick={() => {
+                onCopy(asset);
+                onClose();
+              }}
+              className={itemCls}
+            >
+              Copy path
+            </button>
+            {onRename && (
+              <button role="menuitem" onClick={() => setMode("rename")} className={itemCls}>
+                Rename
+              </button>
+            )}
+            {onDelete && (
+              <button
+                role="menuitem"
+                onClick={() => setMode("confirm-delete")}
+                className={`${itemCls} text-red-400`}
+              >
+                Delete
+              </button>
+            )}
+          </>
+        )}
+        {mode === "confirm-delete" && (
+          <DeleteConfirm
+            name={filename(asset)}
+            onConfirm={() => {
+              onDelete?.(asset);
               onClose();
             }}
-            className="w-full text-left px-3 py-1.5 text-neutral-300 hover:bg-neutral-800 transition-colors"
-          >
-            Add at playhead
-          </button>
+            onCancel={() => setMode("menu")}
+          />
+        )}
+        {mode === "rename" && (
+          <div className="px-2 py-1.5 flex flex-col gap-1">
+            <input
+              autoFocus
+              value={renameDraft}
+              onChange={(e) => {
+                setRenameDraft(e.target.value);
+                setRenameError(null);
+              }}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") commitRename();
+                if (e.key === "Escape") {
+                  e.stopPropagation();
+                  setMode("menu");
+                }
+              }}
+              aria-label={`Rename ${filename(asset)}`}
+              className="w-full bg-neutral-800 border border-neutral-600 rounded px-1.5 py-1 text-[11px] text-white focus:border-studio-accent/60 focus:outline-none"
+            />
+            {renameError && <span className="text-[10px] text-red-400">{renameError}</span>}
+            <div className="flex items-center justify-end gap-1">
+              <button
+                onClick={() => setMode("menu")}
+                className="px-2 py-0.5 text-[10px] rounded text-neutral-400 hover:text-neutral-200 transition-colors"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={commitRename}
+                className="px-2 py-0.5 text-[10px] rounded bg-studio-accent/80 hover:bg-studio-accent text-white transition-colors"
+              >
+                Rename
+              </button>
+            </div>
+          </div>
         )}
+      </div>
+    </div>
+  );
+}
+
+function DeleteConfirm({
+  name,
+  onConfirm,
+  onCancel,
+}: {
+  name: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+}) {
+  return (
+    <div className="px-2 py-1.5 bg-red-950/30 border-l-2 border-red-500 flex items-center justify-between gap-2">
+      <span className="text-[10px] text-red-400 truncate">Delete {name}?</span>
+      <div className="flex items-center gap-1 flex-shrink-0">
         <button
-          onClick={(e) => {
-            e.stopPropagation();
-            onCopy(asset);
-            onClose();
-          }}
-          className="w-full text-left px-3 py-1.5 text-neutral-300 hover:bg-neutral-800 transition-colors"
+          onClick={onConfirm}
+          className="px-2 py-0.5 text-[10px] rounded bg-red-600 text-white hover:bg-red-500 active:bg-red-700 transition-colors"
         >
-          Copy path
+          Delete
+        </button>
+        <button
+          onClick={onCancel}
+          className="px-2 py-0.5 text-[10px] rounded text-neutral-400 hover:text-neutral-200 transition-colors"
+        >
+          Cancel
         </button>
-        {onRename && (
-          <button
-            onClick={(e) => {
-              e.stopPropagation();
-              onClose();
-            }}
-            className="w-full text-left px-3 py-1.5 text-neutral-300 hover:bg-neutral-800 transition-colors"
-          >
-            Rename
-          </button>
-        )}
-        {onDelete && (
-          <button
-            onClick={(e) => {
-              e.stopPropagation();
-              onDelete(asset);
-              onClose();
-            }}
-            className="w-full text-left px-3 py-1.5 text-red-400 hover:bg-neutral-800 transition-colors"
-          >
-            Delete
-          </button>
-        )}
       </div>
     </div>
   );