From a933d67384f17fa95cf17e62a3481e93951512be Mon Sep 17 00:00:00 2001
From: ShivaGupta-14 <shivascalerite@gmail.com>
Date: Thu, 9 Oct 2025 00:13:05 +0530
Subject: [PATCH] feat(media-view): Implement open folder and enhance controls

- Implements 'Open Folder' functionality.

- Removes placeholder buttons for unimplemented features.

- Improves button visibility on light/dark backgrounds.

- Adds hover tooltips (titles) to all control buttons.
---
 frontend/src/components/Media/MediaView.tsx   | 14 +++++
 .../components/Media/MediaViewControls.tsx    | 55 ++++++-------------
 2 files changed, 30 insertions(+), 39 deletions(-)

diff --git a/frontend/src/components/Media/MediaView.tsx b/frontend/src/components/Media/MediaView.tsx
index e59e3c354..09cb9a4ea 100644
--- a/frontend/src/components/Media/MediaView.tsx
+++ b/frontend/src/components/Media/MediaView.tsx
@@ -1,5 +1,7 @@
 import { useState, useCallback, useMemo } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
+import { open } from '@tauri-apps/plugin-shell';
+import { dirname } from '@tauri-apps/api/path';
 import { MediaViewProps } from '@/types/Media';
 import { selectCurrentViewIndex } from '@/features/imageSelectors';
 import {
@@ -75,6 +77,17 @@ export function MediaView({ onClose, images, type = 'image' }: MediaViewProps) {
     handleNextImage,
   );
 
+  // Folder Open functionality
+  const handleOpenFolder = async () => {
+    if (!currentImage?.path) return;
+    try {
+      const folderPath = await dirname(currentImage.path);
+      await open(folderPath);
+    } catch (err) {
+      console.error('Failed to open folder.');
+    }
+  };
+
   // Toggle functions
   const toggleInfo = useCallback(() => {
     setShowInfo((prev) => !prev);
@@ -112,6 +125,7 @@ export function MediaView({ onClose, images, type = 'image' }: MediaViewProps) {
         showInfo={showInfo}
         onToggleInfo={toggleInfo}
         onToggleFavorite={handleToggleFavorite}
+        onOpenFolder={handleOpenFolder}
         isFavorite={isFavorite(currentImage.path)}
         isSlideshowActive={isSlideshowActive}
         onToggleSlideshow={toggleSlideshow}
diff --git a/frontend/src/components/Media/MediaViewControls.tsx b/frontend/src/components/Media/MediaViewControls.tsx
index 2f47d78dd..2a8deee7f 100644
--- a/frontend/src/components/Media/MediaViewControls.tsx
+++ b/frontend/src/components/Media/MediaViewControls.tsx
@@ -1,21 +1,11 @@
 import React from 'react';
-import {
-  Info,
-  ImageIcon,
-  Folder,
-  ExternalLink,
-  Share2,
-  Heart,
-  Play,
-  Pause,
-  Lock,
-  X,
-} from 'lucide-react';
+import { Info, Folder, Share2, Heart, Play, Pause, X } from 'lucide-react';
 
 interface MediaViewControlsProps {
   showInfo: boolean;
   onToggleInfo: () => void;
   onToggleFavorite: () => void;
+  onOpenFolder: () => void;
   isFavorite: boolean;
   isSlideshowActive: boolean;
   onToggleSlideshow: () => void;
@@ -27,6 +17,7 @@ export const MediaViewControls: React.FC<MediaViewControlsProps> = ({
   showInfo,
   onToggleInfo,
   onToggleFavorite,
+  onOpenFolder,
   isFavorite,
   isSlideshowActive,
   onToggleSlideshow,
@@ -38,37 +29,27 @@ export const MediaViewControls: React.FC<MediaViewControlsProps> = ({
       <button
         onClick={onToggleInfo}
         className={`rounded-full ${
-          showInfo ? 'bg-blue-500/70' : 'bg-white/10'
-        } p-2.5 text-white/90 transition-all duration-200 hover:bg-white/20 hover:text-white hover:shadow-lg`}
+          showInfo ? 'bg-indigo-500/70' : 'bg-black/50'
+        } p-2.5 text-white/90 transition-all duration-200 hover:bg-black/20 hover:text-white hover:shadow-lg`}
         aria-label="Show Info"
+        title="Show Info"
       >
         <Info className="h-5 w-5" />
       </button>
 
       <button
-        className="rounded-full bg-white/10 p-2.5 text-white/90 transition-all duration-200 hover:bg-white/20 hover:text-white hover:shadow-lg"
-        aria-label="Set as Wallpaper"
-      >
-        <ImageIcon className="h-5 w-5" />
-      </button>
-
-      <button
-        className="rounded-full bg-white/10 p-2.5 text-white/90 transition-all duration-200 hover:bg-white/20 hover:text-white hover:shadow-lg"
+        onClick={onOpenFolder}
+        className="rounded-full bg-black/50 p-2.5 text-white/90 transition-all duration-200 hover:bg-black/20 hover:text-white hover:shadow-lg"
         aria-label="Open Folder"
+        title="Open Folder"
       >
         <Folder className="h-5 w-5" />
       </button>
 
       <button
-        className="rounded-full bg-white/10 p-2.5 text-white/90 transition-all duration-200 hover:bg-white/20 hover:text-white hover:shadow-lg"
-        aria-label="Open With"
-      >
-        <ExternalLink className="h-5 w-5" />
-      </button>
-
-      <button
-        className="rounded-full bg-white/10 p-2.5 text-white/90 transition-all duration-200 hover:bg-white/20 hover:text-white hover:shadow-lg"
+        className="rounded-full bg-black/50 p-2.5 text-white/90 transition-all duration-200 hover:bg-black/20 hover:text-white hover:shadow-lg"
         aria-label="Share"
+        title="Share"
       >
         <Share2 className="h-5 w-5" />
       </button>
@@ -78,25 +59,20 @@ export const MediaViewControls: React.FC<MediaViewControlsProps> = ({
         className={`rounded-full p-2.5 text-white transition-all duration-300 ${
           isFavorite
             ? 'bg-rose-500/80 hover:bg-rose-600 hover:shadow-lg'
-            : 'bg-white/10 hover:bg-white/20 hover:text-white hover:shadow-lg'
+            : 'bg-black/50 hover:bg-black/20 hover:text-white hover:shadow-lg'
         }`}
         aria-label={isFavorite ? 'Remove from favorites' : 'Add to favorites'}
+        title="Favorites"
       >
         <Heart className={`h-5 w-5 ${isFavorite ? 'fill-current' : ''}`} />
       </button>
 
-      <button
-        className="rounded-full bg-white/10 p-2.5 text-white/90 transition-all duration-200 hover:bg-white/20 hover:text-white hover:shadow-lg"
-        aria-label="Move to Secure Folder"
-      >
-        <Lock className="h-5 w-5" />
-      </button>
-
       {type === 'image' && (
         <button
           onClick={onToggleSlideshow}
           className="flex items-center gap-2 rounded-full bg-indigo-500/70 px-4 py-2 text-white transition-all duration-200 hover:bg-indigo-600/80 hover:shadow-lg"
           aria-label="Toggle Slideshow"
+          title="SlideShow"
         >
           {isSlideshowActive ? (
             <Pause className="h-4 w-4" />
@@ -111,8 +87,9 @@ export const MediaViewControls: React.FC<MediaViewControlsProps> = ({
 
       <button
         onClick={onClose}
-        className="ml-2 rounded-full bg-white/10 p-2.5 text-white/90 transition-all duration-200 hover:bg-white/20 hover:text-white hover:shadow-lg"
+        className="ml-2 rounded-full bg-black/50 p-2.5 text-white/90 transition-all duration-200 hover:bg-black/20 hover:text-white hover:shadow-lg"
         aria-label="Close"
+        title="Close"
       >
         <X className="h-5 w-5" />
       </button>