feat: Sight Page update

src/shared/modals/SelectMediaDialog/index.tsx

@@ -1,6 +1,6 @@
 import { mediaStore } from "@shared";
 import { observer } from "mobx-react-lite";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import {
   Dialog,
   DialogTitle,
@@ -21,7 +21,12 @@ import { MediaViewer } from "@widgets";
 interface SelectMediaDialogProps {
   open: boolean; // Corrected prop name
   onClose: () => void;
-  onSelectMedia: (mediaId: string) => void; // Renamed from onSelectArticle
+  onSelectMedia: (media: {
+    id: string;
+    filename: string;
+    media_name?: string;
+    media_type: number;
+  }) => void; // Renamed from onSelectArticle
   linkedMediaIds?: string[]; // Renamed from linkedArticleIds, assuming it refers to media already in use
 }
 
@@ -32,15 +37,14 @@ export const SelectMediaDialog = observer(
     onSelectMedia, // Renamed prop
     linkedMediaIds = [], // Default to empty array if not provided, renamed
   }: SelectMediaDialogProps) => {
-    const { media, getMedia } = mediaStore; // Confirmed: using mediaStore for media
+    const { media, getMedia } = mediaStore;
     const [searchQuery, setSearchQuery] = useState("");
     const [hoveredMediaId, setHoveredMediaId] = useState<string | null>(null);
-    const hoverTimerRef = useRef<NodeJS.Timeout | null>(null);
 
     // Fetch media on component mount
     useEffect(() => {
       getMedia();
-    }, [getMedia]); // getMedia should be a dependency to avoid lint warnings if it's not stable
+    }, [getMedia]);
 
     // Keyboard event listener for "Enter" key to select hovered media
     useEffect(() => {
@@ -49,7 +53,10 @@ export const SelectMediaDialog = observer(
           event.preventDefault(); // Prevent browser default action (e.g., form submission)
 
           if (hoveredMediaId) {
-            onSelectMedia(hoveredMediaId); // Call onSelectMedia
+            const mediaItem = media.find((m) => m.id === hoveredMediaId);
+            if (mediaItem) {
+              onSelectMedia(mediaItem);
+            }
             onClose();
           }
         }
@@ -61,26 +68,6 @@ export const SelectMediaDialog = observer(
       };
     }, [hoveredMediaId, onSelectMedia, onClose]); // Dependencies for keyboard listener
 
-    // Effect for handling hover timeout (if you want to clear the preview after a delay)
-    // Based on the original code, it seemed like you wanted a delay for showing,
-    // but typically for a preview, it's immediate on hover and cleared on mouse leave.
-    // I've removed the 5-second timeout for setting the ID as it's counter-intuitive for a live preview.
-    // If you intend for the preview to disappear after a short while *after* the mouse leaves,
-    // you would implement a mouseleave timer. For now, it will clear on mouseleave.
-
-    const handleMouseEnter = (mediaId: string) => {
-      if (hoverTimerRef.current) {
-        clearTimeout(hoverTimerRef.current);
-      }
-      setHoveredMediaId(mediaId);
-    };
-
-    const handleMouseLeave = () => {
-      // You can add a small delay here if you want the preview to linger for a moment
-      // before disappearing, e.g., setTimeout(() => setHoveredMediaId(null), 200);
-      setHoveredMediaId(null);
-    };
-
     const filteredMedia = media
       .filter((mediaItem) => !linkedMediaIds.includes(mediaItem.id)) // Use mediaItem to avoid name collision
       .filter((mediaItem) =>
@@ -125,9 +112,11 @@ export const SelectMediaDialog = observer(
                   ) => (
                     <ListItemButton
                       key={mediaItem.id}
-                      onClick={() => onSelectMedia(mediaItem.id)} // Call onSelectMedia
-                      onMouseEnter={() => handleMouseEnter(mediaItem.id)}
-                      onMouseLeave={handleMouseLeave}
+                      onClick={() => setHoveredMediaId(mediaItem.id)} // Call onSelectMedia
+                      onDoubleClick={() => {
+                        onSelectMedia(mediaItem);
+                        onClose();
+                      }}
                       sx={{
                         borderRadius: 1,
                         mb: 0.5,