From 04fa5ab0543fd513360027349286e47e94b181b8 Mon Sep 17 00:00:00 2001
From: Jaime Idolpx <jaime@idolpx.com>
Date: Fri, 12 Jun 2026 05:33:21 -0400
Subject: [PATCH] feat(MediaManager): implement MarqueeText component for
 improved overflow handling in titles

---
 src/app/components/MediaManager.tsx | 59 +++++++++++++++++++++++++----
 1 file changed, 51 insertions(+), 8 deletions(-)

diff --git a/src/app/components/MediaManager.tsx b/src/app/components/MediaManager.tsx
index 7bcd7b7..fd9027a 100644
--- a/src/app/components/MediaManager.tsx
+++ b/src/app/components/MediaManager.tsx
@@ -1,4 +1,4 @@
-import { lazy, Suspense, useCallback, useEffect, useRef, useState } from 'react';
+import { lazy, Suspense, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import {
   AlignLeft,
   ArrowLeft,
@@ -126,6 +126,53 @@ function ViewerModeIcon({ mode, className }: { mode: ViewMode; className?: strin
 
 // EntryIcon is imported from MediaEntry.
 
+// ─── MarqueeText ──────────────────────────────────────────────────────────────
+// Scrolls text left→right when it overflows its container, then back — ping-pong.
+// Uses a CSS variable for the per-instance scroll distance so a single keyframe
+// declaration covers every instance.
+
+if (typeof document !== 'undefined' && !document.getElementById('mm-marquee-kf')) {
+  const s = document.createElement('style');
+  s.id = 'mm-marquee-kf';
+  s.textContent = `@keyframes mm-scroll {
+    0%,12%  { transform: translateX(0) }
+    88%,100%{ transform: translateX(var(--mm-dx,0px)) }
+  }`;
+  document.head.appendChild(s);
+}
+
+function MarqueeText({ children, className }: { children?: string; className?: string }) {
+  const wrapRef = useRef<HTMLSpanElement>(null);
+  const textRef = useRef<HTMLSpanElement>(null);
+  const [dx, setDx] = useState(0);
+
+  useLayoutEffect(() => {
+    const wrap = wrapRef.current;
+    const text = textRef.current;
+    if (!wrap || !text) return;
+    const measure = () => setDx(Math.max(0, text.scrollWidth - wrap.offsetWidth));
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(wrap);
+    return () => ro.disconnect();
+  }, [children]);
+
+  return (
+    <span ref={wrapRef} className={`overflow-hidden whitespace-nowrap block ${className ?? ''}`}>
+      <span
+        ref={textRef}
+        style={dx > 0 ? {
+          display: 'inline-block',
+          '--mm-dx': `-${dx}px`,
+          animation: `mm-scroll ${1.5 + dx / 80}s ease-in-out 1s infinite alternate`,
+        } as React.CSSProperties : undefined}
+      >
+        {children}
+      </span>
+    </span>
+  );
+}
+
 // ─── ActionsModal ─────────────────────────────────────────────────────────────
 
 interface FolderManagementActions {
@@ -164,7 +211,7 @@ function ActionsModal({ entry, onClose, onOpen, onMount, onDownload, onDuplicate
     <Dialog open={entry !== null} onOpenChange={open => !open && onClose()}>
       <DialogContent className="max-w-sm">
         <DialogHeader>
-          <DialogTitle className="truncate">{entry?.name || '/'}</DialogTitle>
+          <DialogTitle><MarqueeText>{entry?.name || '/'}</MarqueeText></DialogTitle>
           <DialogDescription>
             {isFolder ? 'Folder' : humanFileSize(entry?.size ?? 0)}
           </DialogDescription>
@@ -1269,12 +1316,8 @@ export default function MediaManager({ initialPath, rootPath, title, config, set
         <DialogContent className="max-w-sm flex flex-col max-h-[90dvh]">
           <DialogHeader className="flex-shrink-0">
             <DialogTitle>Mount on Virtual Drive</DialogTitle>
-            <DialogDescription
-              className="block overflow-hidden whitespace-nowrap"
-              style={{ direction: 'rtl', textOverflow: 'ellipsis' }}
-              title={mountEntry?.name}
-            >
-              {mountEntry?.name}
+            <DialogDescription title={mountEntry?.name}>
+              <MarqueeText>{mountEntry?.name}</MarqueeText>
             </DialogDescription>
           </DialogHeader>
           <div className="overflow-y-auto flex-1 min-h-0">