mobile fixes

frontend/src/components/MediaViewer/MediaViewer.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { api, type BrowseEntry, type MediaItem } from "../../api/client";
 import TagPanel from "../TagPanel/TagPanel";
@@ -11,7 +11,8 @@ interface Props {
 }
 
 export default function MediaViewer({ mediaId, siblings, onClose, onNavigate }: Props) {
-  const [showTags, setShowTags] = useState(true);
+  const [showTags, setShowTags] = useState(() => window.innerWidth >= 768);
+  const touchStartX = useRef<number | null>(null);
 
   const { data: item } = useQuery<MediaItem>({
     queryKey: ["media", mediaId],
@@ -29,8 +30,24 @@ export default function MediaViewer({ mediaId, siblings, onClose, onNavigate }:
       if (e.key === "ArrowLeft" && prevId) onNavigate(prevId);
       if (e.key === "ArrowRight" && nextId) onNavigate(nextId);
     }
+    const onTouchStart = (e: TouchEvent) => { touchStartX.current = e.touches[0].clientX; };
+    const onTouchEnd = (e: TouchEvent) => {
+      if (touchStartX.current === null) return;
+      const delta = touchStartX.current - e.changedTouches[0].clientX;
+      if (Math.abs(delta) > 50) {
+        if (delta > 0 && nextId) onNavigate(nextId);
+        if (delta < 0 && prevId) onNavigate(prevId);
+      }
+      touchStartX.current = null;
+    };
     window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
+    window.addEventListener("touchstart", onTouchStart);
+    window.addEventListener("touchend", onTouchEnd);
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      window.removeEventListener("touchstart", onTouchStart);
+      window.removeEventListener("touchend", onTouchEnd);
+    };
   }, [prevId, nextId, onClose, onNavigate]);
 
   return (