@hyperframes/studio 0.8.6 → 0.8.8

package/src/components/sidebar/AssetsTab.tsx

@@ -1,9 +1,17 @@
 // fallow-ignore-file code-duplication
 import { memo, useState, useCallback, useRef, useMemo, useEffect } from "react";
+import { SearchInput } from "../ui/SearchInput";
 import { MEDIA_EXT, FONT_EXT } from "../../utils/mediaTypes";
 import { copyTextToClipboard } from "../../utils/clipboard";
 import { usePlayerStore } from "../../player/store/playerStore";
-import { type MediaCategory, getCategory, CATEGORY_LABELS, FILTER_ORDER } from "./assetHelpers";
+import {
+  type MediaCategory,
+  type CopyFeedback,
+  getCategory,
+  basename,
+  CATEGORY_LABELS,
+  FILTER_ORDER,
+} from "./assetHelpers";
 import { AudioRow } from "./AudioRow";
 import { GlobalAssetsView } from "./GlobalAssetsView";
 import { AssetCard, FontRow } from "./AssetCard";
@@ -11,7 +19,7 @@ import { AssetCard, FontRow } from "./AssetCard";
 interface AssetsTabProps {
   projectId: string;
   assets: string[];
-  onImport?: (files: FileList) => void;
+  onImport?: (files: FileList) => void | Promise<void>;
   onDelete?: (path: string) => void;
   onRename?: (oldPath: string, newPath: string) => void;
   onAddAssetToTimeline?: (path: string) => void;
@@ -90,6 +98,99 @@ export function deriveUsedPaths(elements: Array<{ src?: string }>): Set<string>
   return paths;
 }
 
+/** Import trigger. An import is an await, so the button owns the pending state
+ *  instead of leaving the author clicking a control that looks idle. */
+function ImportButton({ importing, onClick }: { importing: boolean; onClick: () => void }) {
+  return (
+    <button
+      onClick={onClick}
+      disabled={importing}
+      aria-busy={importing}
+      className="w-full flex items-center justify-center gap-1.5 rounded-md bg-panel-input px-3 py-[7px] text-[11px] font-medium text-panel-text-3 enabled:hover:text-panel-text-1 enabled:active:scale-[0.98] disabled:opacity-60 transition-colors mb-2.5"
+    >
+      {importing ? (
+        <svg className="animate-spin" width="11" height="11" viewBox="0 0 24 24" fill="none">
+          <circle
+            className="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            strokeWidth="4"
+          />
+          <path
+            className="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+          />
+        </svg>
+      ) : (
+        <svg
+          width="11"
+          height="11"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2.5"
+          strokeLinecap="round"
+        >
+          <path d="M12 5v14M5 12h14" />
+        </svg>
+      )}
+      {importing ? "Importing…" : "Import media"}
+    </button>
+  );
+}
+
+/** Empty list body. A query that matched nothing says so and offers a way out;
+ *  a genuinely empty project gets the drop hint. */
+function EmptyState({
+  searchQuery,
+  onClearSearch,
+}: {
+  searchQuery: string;
+  onClearSearch: () => void;
+}) {
+  if (searchQuery) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full px-4 gap-2">
+        <p className="text-[11px] text-neutral-500 text-center">
+          No assets match &ldquo;{searchQuery}&rdquo;
+        </p>
+        <button
+          type="button"
+          onClick={onClearSearch}
+          className="px-2.5 py-1 text-[11px] font-medium rounded-md bg-panel-input text-panel-text-3 hover:text-panel-text-1 active:scale-[0.98] transition-colors"
+        >
+          Clear search
+        </button>
+      </div>
+    );
+  }
+  return (
+    <div className="flex flex-col items-center justify-center h-full px-4 gap-2">
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        className="text-neutral-700"
+      >
+        <path
+          d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <polyline points="17 8 12 3 7 8" strokeLinecap="round" strokeLinejoin="round" />
+        <line x1="12" y1="3" x2="12" y2="15" strokeLinecap="round" />
+      </svg>
+      <p className="text-[10px] text-neutral-600 text-center">Drop media files here</p>
+    </div>
+  );
+}
+
 export const AssetsTab = memo(function AssetsTab({
   projectId,
   assets,
@@ -100,7 +201,8 @@ export const AssetsTab = memo(function AssetsTab({
 }: AssetsTabProps) {
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [dragOver, setDragOver] = useState(false);
-  const [copiedPath, setCopiedPath] = useState<string | null>(null);
+  const [copyFeedback, setCopyFeedback] = useState<CopyFeedback>(null);
+  const [importing, setImporting] = useState(false);
   const [activeFilter, setActiveFilter] = useState<MediaCategory | "all">("all");
   const [usageFilter, setUsageFilter] = useState<"all" | "used" | "unused">("all");
   const [searchQuery, setSearchQuery] = useState("");
@@ -144,42 +246,55 @@ export const AssetsTab = memo(function AssetsTab({
       cancelled = true;
     };
   }, [projectId, assetsKey]);
+
+  const handleImport = useCallback(
+    async (files: FileList) => {
+      if (!onImport) return;
+      setImporting(true);
+      try {
+        await onImport(files);
+      } finally {
+        setImporting(false);
+      }
+    },
+    [onImport],
+  );
+
   const handleDrop = useCallback(
     (e: React.DragEvent) => {
       e.preventDefault();
       setDragOver(false);
-      if (e.dataTransfer.files.length) onImport?.(e.dataTransfer.files);
+      if (e.dataTransfer.files.length) void handleImport(e.dataTransfer.files);
     },
-    [onImport],
+    [handleImport],
   );
+
   const handleCopyPath = useCallback(async (path: string) => {
     const copied = await copyTextToClipboard(path);
-    if (copied) {
-      setCopiedPath(path);
-      setTimeout(() => setCopiedPath(null), 1500);
-    }
+    setCopyFeedback({ path, ok: copied });
+    setTimeout(() => setCopyFeedback(null), copied ? 1500 : 3000);
   }, []);
   const elements = usePlayerStore((s) => s.elements);
   const usedPaths = useMemo(() => deriveUsedPaths(elements), [elements]);
+
+  // Unfiltered pool — header controls (search, chips) are gated on THIS, not
+  // the search-filtered list, so a no-match query can't unmount its own input.
+  const allMediaAssets = useMemo(
+    () => assets.filter((a) => MEDIA_EXT.test(a) || FONT_EXT.test(a)),
+    [assets],
+  );
+
   const mediaAssets = useMemo(() => {
-    const media = assets.filter((a) => MEDIA_EXT.test(a) || FONT_EXT.test(a));
-    const all = filterByUsage(media, usedPaths, usageFilter);
+    const all = filterByUsage(allMediaAssets, usedPaths, usageFilter);
     if (!searchQuery) return all;
     const q = searchQuery.toLowerCase();
     return all.filter((a) => {
-      if (
-        a
-          .split("/")
-          .pop()
-          ?.replace(/\.[^.]*$/, "")
-          .toLowerCase()
-          .includes(q)
-      )
-        return true;
+      if (basename(a).toLowerCase().includes(q)) return true;
       const rec = manifest.get(a);
       return rec?.description?.toLowerCase().includes(q);
     });
-  }, [assets, searchQuery, manifest, usageFilter, usedPaths]);
+  }, [allMediaAssets, searchQuery, manifest, usageFilter, usedPaths]);
+
   const categorized = useMemo(() => {
     const groups: Record<MediaCategory, string[]> = { audio: [], images: [], video: [], fonts: [] };
     for (const a of mediaAssets) {
@@ -244,23 +359,7 @@ export const AssetsTab = memo(function AssetsTab({
         {/* Import */}
         {onImport && (
           <>
-            <button
-              onClick={() => fileInputRef.current?.click()}
-              className="w-full flex items-center justify-center gap-1.5 rounded-md bg-panel-input px-3 py-[7px] text-[11px] font-medium text-panel-text-3 hover:text-panel-text-1 transition-colors mb-2.5"
-            >
-              <svg
-                width="11"
-                height="11"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2.5"
-                strokeLinecap="round"
-              >
-                <path d="M12 5v14M5 12h14" />
-              </svg>
-              Import media
-            </button>
+            <ImportButton importing={importing} onClick={() => fileInputRef.current?.click()} />
             <input
               ref={fileInputRef}
               type="file"
@@ -269,7 +368,7 @@ export const AssetsTab = memo(function AssetsTab({
               className="hidden"
               onChange={(e) => {
                 if (e.target.files?.length) {
-                  onImport(e.target.files);
+                  void handleImport(e.target.files);
                   e.target.value = "";
                 }
               }}
@@ -277,45 +376,24 @@ export const AssetsTab = memo(function AssetsTab({
           </>
         )}
 
-        {/* Search */}
-        {mediaAssets.length > 0 && (
-          <div className="flex items-center gap-1.5 rounded-md bg-panel-input px-2.5 py-[5px] mb-2">
-            <svg width="12" height="12" viewBox="0 0 256 256" fill="none" className="flex-shrink-0">
-              <circle
-                cx="116"
-                cy="116"
-                r="76"
-                stroke="currentColor"
-                strokeWidth="22"
-                className="text-panel-text-5"
-              />
-              <line
-                x1="170"
-                y1="170"
-                x2="232"
-                y2="232"
-                stroke="currentColor"
-                strokeWidth="22"
-                strokeLinecap="round"
-                className="text-panel-text-5"
-              />
-            </svg>
-            <input
-              type="text"
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              placeholder="Search assets..."
-              className="min-w-0 w-full bg-transparent text-[11px] text-panel-text-1 outline-none placeholder:text-panel-text-5"
-            />
-          </div>
+        {/* Search — gated on the UNFILTERED pool so it never unmounts itself */}
+        {allMediaAssets.length > 0 && (
+          <SearchInput
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            placeholder="Search assets..."
+            aria-label="Search assets"
+            className="mb-2"
+          />
         )}
 
         {/* Filter chips */}
-        {viewMode === "local" && mediaAssets.length > 0 && (
+        {viewMode === "local" && allMediaAssets.length > 0 && (
           <div className="flex gap-1.5 flex-wrap">
             <button
               onClick={() => setActiveFilter("all")}
-              className={`px-2.5 py-1 text-[11px] font-medium rounded-md transition-colors ${
+              aria-pressed={activeFilter === "all"}
+              className={`px-2.5 py-1 text-[11px] font-medium rounded-md transition-colors active:scale-[0.98] ${
                 activeFilter === "all"
                   ? "bg-panel-accent/15 text-panel-accent"
                   : "bg-panel-input text-panel-text-3 hover:text-panel-text-1"
@@ -328,7 +406,8 @@ export const AssetsTab = memo(function AssetsTab({
                 <button
                   key={cat}
                   onClick={() => setActiveFilter(activeFilter === cat ? "all" : cat)}
-                  className={`px-2.5 py-1 text-[11px] font-medium rounded-md transition-colors ${
+                  aria-pressed={activeFilter === cat}
+                  className={`px-2.5 py-1 text-[11px] font-medium rounded-md transition-colors active:scale-[0.98] ${
                     activeFilter === cat
                       ? "bg-panel-accent/15 text-panel-accent"
                       : "bg-panel-input text-panel-text-3 hover:text-panel-text-1"
@@ -371,26 +450,7 @@ export const AssetsTab = memo(function AssetsTab({
         {viewMode === "global" ? (
           <GlobalAssetsView searchQuery={searchQuery} />
         ) : mediaAssets.length === 0 ? (
-          <div className="flex flex-col items-center justify-center h-full px-4 gap-2">
-            <svg
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="1.5"
-              className="text-neutral-700"
-            >
-              <path
-                d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-              <polyline points="17 8 12 3 7 8" strokeLinecap="round" strokeLinejoin="round" />
-              <line x1="12" y1="3" x2="12" y2="15" strokeLinecap="round" />
-            </svg>
-            <p className="text-[10px] text-neutral-600 text-center">Drop media files here</p>
-          </div>
+          <EmptyState searchQuery={searchQuery} onClearSearch={() => setSearchQuery("")} />
         ) : (
           visibleCategories.map((cat) => (
             <div key={cat} className="mb-1">
@@ -411,7 +471,7 @@ export const AssetsTab = memo(function AssetsTab({
                     used={usedPaths.has(a)}
                     meta={manifest.get(a)}
                     onCopy={handleCopyPath}
-                    isCopied={copiedPath === a}
+                    copyFeedback={copyFeedback}
                     onDelete={onDelete}
                     onRename={onRename}
                     onAddAssetToTimeline={onAddAssetToTimeline}
@@ -427,7 +487,7 @@ export const AssetsTab = memo(function AssetsTab({
                       used={usedPaths.has(a)}
                       duration={manifest.get(a)?.duration}
                       onCopy={handleCopyPath}
-                      isCopied={copiedPath === a}
+                      copyFeedback={copyFeedback}
                       onDelete={onDelete}
                       onRename={onRename}
                       onAddAssetToTimeline={onAddAssetToTimeline}
@@ -442,7 +502,7 @@ export const AssetsTab = memo(function AssetsTab({
                     asset={a}
                     used={usedPaths.has(a)}
                     onCopy={handleCopyPath}
-                    isCopied={copiedPath === a}
+                    copyFeedback={copyFeedback}
                     onDelete={onDelete}
                     onRename={onRename}
                     onAddAssetToTimeline={onAddAssetToTimeline}

package/src/components/sidebar/AudioRow.tsx

@@ -1,6 +1,6 @@
 import { useState, useRef, useEffect, useCallback } from "react";
 import { ContextMenu } from "./AssetContextMenu";
-import { basename, getAudioSubtype } from "./assetHelpers";
+import { basename, getAudioSubtype, type CopyFeedback } from "./assetHelpers";
 import { TIMELINE_ASSET_MIME } from "../../utils/timelineAssetDrop";
 import { usePlayerStore } from "../../player/store/playerStore";
 import { useAssetPreviewStore } from "../../utils/assetPreviewStore";
@@ -8,13 +8,16 @@ import { findClipForAsset, isPointerClick } from "../../utils/assetClickBehavior
 import { resolveMediaPreviewUrl } from "../../player/components/thumbnailUtils";
 import { timelineClipFocusId } from "../../player/components/timelineNavigationIdentity";
 
+// Only one preview should play at a time; starting a row stops the previous one.
+let stopCurrentPreview: (() => void) | null = null;
+
 export function AudioRow({
   projectId,
   asset,
   used,
   meta,
   onCopy,
-  isCopied,
+  copyFeedback,
   onDelete,
   onRename,
   onAddAssetToTimeline,
@@ -24,7 +27,7 @@ export function AudioRow({
   used: boolean;
   meta?: { description?: string; duration?: number };
   onCopy: (path: string) => void;
-  isCopied: boolean;
+  copyFeedback: CopyFeedback;
   onDelete?: (path: string) => void;
   onRename?: (oldPath: string, newPath: string) => void;
   onAddAssetToTimeline?: (path: string) => void;
@@ -40,6 +43,14 @@ export function AudioRow({
   const name = basename(asset);
   const subtype = getAudioSubtype(asset);
   const serveUrl = resolveMediaPreviewUrl(asset, projectId);
+  const isCopied = copyFeedback?.path === asset && copyFeedback.ok;
+  const copyFailed = copyFeedback?.path === asset && !copyFeedback.ok;
+
+  const stopPlayback = useCallback(() => {
+    audioRef.current?.pause();
+    setPlaying(false);
+    cancelAnimationFrame(animRef.current);
+  }, []);
 
   // CapCut-style click behavior: drag-threshold gate.
   const pointerDownRef = useRef<{ x: number; y: number } | null>(null);
@@ -49,6 +60,36 @@ export function AudioRow({
   const setPreviewAsset = useAssetPreviewStore((s) => s.setPreviewAsset);
   const clearPreviewAsset = useAssetPreviewStore((s) => s.clearPreviewAsset);
 
+  // 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
+  // row does the same thing however it is operated.
+  const activateRow = 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 → preview overlay (audio player)
+    setPreviewAsset(asset, projectId);
+  }, [
+    used,
+    elements,
+    asset,
+    projectId,
+    setSelectedElementId,
+    requestTimelineFocus,
+    setPreviewAsset,
+    clearPreviewAsset,
+  ]);
+
   const handlePointerDown = useCallback((e: React.PointerEvent) => {
     pointerDownRef.current = { x: e.clientX, y: e.clientY };
   }, []);
@@ -59,32 +100,9 @@ export function AudioRow({
       pointerDownRef.current = null;
       if (!origin) return;
       if (!isPointerClick(e.clientX - origin.x, e.clientY - origin.y)) return;
-      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 → preview overlay (audio player)
-      setPreviewAsset(asset, projectId);
+      activateRow();
     },
-    [
-      used,
-      elements,
-      asset,
-      projectId,
-      setSelectedElementId,
-      requestTimelineFocus,
-      setPreviewAsset,
-      clearPreviewAsset,
-    ],
+    [activateRow],
   );
 
   useEffect(() => {
@@ -92,8 +110,9 @@ export function AudioRow({
       cancelAnimationFrame(animRef.current);
       audioRef.current?.pause();
       actxRef.current?.close();
+      if (stopCurrentPreview === stopPlayback) stopCurrentPreview = null;
     };
-  }, []);
+  }, [stopPlayback]);
 
   useEffect(() => {
     if (playing) {
@@ -126,12 +145,15 @@ export function AudioRow({
 
   const togglePlay = useCallback(async () => {
     if (playing) {
-      audioRef.current?.pause();
-      setPlaying(false);
-      cancelAnimationFrame(animRef.current);
+      stopPlayback();
+      if (stopCurrentPreview === stopPlayback) stopCurrentPreview = null;
       return;
     }
 
+    // Stop whichever other row is currently previewing.
+    if (stopCurrentPreview && stopCurrentPreview !== stopPlayback) stopCurrentPreview();
+    stopCurrentPreview = stopPlayback;
+
     if (!actxRef.current) {
       actxRef.current = new AudioContext();
       analyserRef.current = actxRef.current.createAnalyser();
@@ -146,17 +168,26 @@ export function AudioRow({
         cancelAnimationFrame(animRef.current);
       };
       audioRef.current = el;
-      sourceRef.current = actxRef.current.createMediaElementSource(el);
-      sourceRef.current.connect(analyserRef.current!);
-      analyserRef.current!.connect(actxRef.current.destination);
+      const analyser = analyserRef.current;
+      if (analyser) {
+        sourceRef.current = actxRef.current.createMediaElementSource(el);
+        sourceRef.current.connect(analyser);
+        analyser.connect(actxRef.current.destination);
+      }
       el.src = serveUrl;
     }
 
     if (actxRef.current.state === "suspended") await actxRef.current.resume();
     audioRef.current.currentTime = 0;
-    await audioRef.current.play();
-    setPlaying(true);
-  }, [serveUrl, playing]);
+    try {
+      await audioRef.current.play();
+      setPlaying(true);
+    } catch {
+      // Playback refused (e.g. decode failure) — reset instead of a stuck state.
+      setPlaying(false);
+      if (stopCurrentPreview === stopPlayback) stopCurrentPreview = null;
+    }
+  }, [serveUrl, playing, stopPlayback]);
 
   return (
     <>
@@ -164,6 +195,18 @@ export function AudioRow({
         draggable
         onPointerDown={handlePointerDown}
         onPointerUp={handlePointerUp}
+        role="button"
+        tabIndex={0}
+        aria-label={`${name} — open, drag to timeline, right-click for actions`}
+        onKeyDown={(e) => {
+          // Only when the row itself is focused — keydowns bubbling from the
+          // inner controls (play button) must keep their native activation.
+          if (e.target !== e.currentTarget) return;
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            activateRow();
+          }
+        }}
         onDragStart={(e) => {
           e.dataTransfer.effectAllowed = "copy";
           e.dataTransfer.setData(TIMELINE_ASSET_MIME, JSON.stringify({ path: asset }));
@@ -173,7 +216,7 @@ export function AudioRow({
           e.preventDefault();
           setContextMenu({ x: e.clientX, y: e.clientY });
         }}
-        className={`group w-full text-left px-4 py-1.5 flex items-center gap-2.5 transition-all cursor-pointer ${
+        className={`group w-full text-left px-4 py-1.5 flex items-center gap-2.5 transition-colors cursor-pointer outline-none focus-visible:bg-neutral-800/60 ${
           playing
             ? "bg-panel-accent/[0.06]"
             : isCopied
@@ -182,7 +225,9 @@ export function AudioRow({
         }`}
       >
         <button
-          className={`w-7 h-7 rounded-md flex-shrink-0 flex items-center justify-center transition-all ${
+          aria-label={playing ? `Pause preview of ${name}` : `Play preview of ${name}`}
+          aria-pressed={playing}
+          className={`w-7 h-7 rounded-md flex-shrink-0 flex items-center justify-center transition-colors active:scale-[0.95] ${
             playing
               ? "bg-panel-accent/15 text-panel-accent"
               : "text-panel-text-5 group-hover:text-panel-text-3"
@@ -221,6 +266,16 @@ export function AudioRow({
                 in use
               </span>
             )}
+            {(isCopied || copyFailed) && (
+              <span
+                role="status"
+                className={`flex-shrink-0 text-[9px] font-medium px-1.5 py-px rounded ${
+                  copyFailed ? "text-red-400 bg-red-500/10" : "text-panel-accent bg-panel-accent/10"
+                }`}
+              >
+                {copyFailed ? "Copy failed" : "Copied"}
+              </span>
+            )}
           </div>
           {bars.length > 0 && (
             <div className="flex items-end gap-[2px] h-[14px] mt-0.5">