From a8805772cfedef9a7428fae89bae3ac6d630ff43 Mon Sep 17 00:00:00 2001
From: the-ghost-bot <contact.ghost01@gmail.com>
Date: Thu, 21 Nov 2024 21:36:14 +0100
Subject: [PATCH] v3.0.2

improve gallery and more
---
 README.md                            |  33 ++-
 package-lock.json                    |  42 +--
 package.json                         |   4 +-
 src/App.tsx                          |   2 -
 src/components/ContentTable.tsx      |   5 +-
 src/components/ErrorLog.tsx          |  24 +-
 src/components/GameDetails.tsx       | 172 +++++------
 src/components/ScreenshotGallery.tsx | 418 ++++++++++++++++++++++++---
 src/components/SearchBar.tsx         |  17 +-
 src/components/Settings.tsx          |  10 +-
 10 files changed, 530 insertions(+), 197 deletions(-)

diff --git a/README.md b/README.md
index 7be9467..3463dfe 100644
--- a/README.md
+++ b/README.md
@@ -9,10 +9,16 @@ A modern web application for tracking Nintendo Switch content, built with React
 - 🌓 Dark/Light theme support
 - 📱 Fully responsive design
 - 📊 Detailed content information
-- 🖼️ Screenshot gallery with lightbox
+- 🖼️ Interactive screenshot gallery with advanced features:
+  - Zoom and rotation controls
+  - Slideshow mode
+  - Fullscreen support
+  - Keyboard shortcuts
+  - Touch gestures
+  - Image download
 - 📈 Download statistics integration
 - 🔄 Auto-refresh capabilities
-- 🎯 Customizable display settings
+- ⚙️ Customizable display settings
 
 ## Development
 
@@ -21,7 +27,7 @@ This project uses:
 - React 18 with TypeScript
 - Tailwind CSS for styling
 - Zustand for state management
-- PhotoSwipe for the gallery viewer
+- Lucide for icons
 
 ### Getting Started
 
@@ -49,6 +55,25 @@ The application supports various configuration options through the settings pane
 - Auto-refresh intervals
 - Custom data source URLs
 
+## Gallery Controls
+
+The screenshot gallery supports various controls:
+- **Keyboard**:
+  - Arrow keys: Navigate between images
+  - R: Rotate image
+  - +/-: Zoom in/out
+  - F: Toggle fullscreen
+  - Space: Toggle slideshow
+  - ESC: Close gallery
+- **Mouse**:
+  - Click and drag to pan
+  - Mouse wheel to zoom
+  - Click outside to close
+- **Touch**:
+  - Swipe to navigate
+  - Pinch to zoom
+  - Double tap to toggle zoom
+
 ## Contributing
 
 1. Fork the repository
@@ -65,4 +90,4 @@ This project is licensed under the MIT License - see the [LICENSE](LICENSE) file
 
 - Data provided by [nlib.cc](https://nlib.cc)
 - Icons by [Lucide](https://lucide.dev)
-- Gallery powered by [PhotoSwipe](https://photoswipe.com)
\ No newline at end of file
+- Stats by [ghostland.at](https://stats.ghostland.at)
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index a11313e..653b203 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,21 +1,19 @@
 {
   "name": "nx-content",
-  "version": "3.0.0",
+  "version": "3.0.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "nx-content",
-      "version": "3.0.0",
+      "version": "3.0.2",
       "dependencies": {
         "clsx": "^2.1.0",
         "fuse.js": "^7.0.0",
         "lucide-react": "^0.344.0",
         "nx-content": "file:",
-        "photoswipe": "^5.4.3",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-photoswipe-gallery": "^3.0.1",
         "zustand": "^4.5.0"
       },
       "devDependencies": {
@@ -1446,6 +1444,7 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -1502,14 +1501,6 @@
       "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
       "dev": true
     },
-    "node_modules/photoswipe": {
-      "version": "5.4.4",
-      "resolved": "https://registry.npmjs.org/photoswipe/-/photoswipe-5.4.4.tgz",
-      "integrity": "sha512-WNFHoKrkZNnvFFhbHL93WDkW3ifwVOXSW3w1UuZZelSmgXpIGiZSNlZJq37rR8YejqME2rHs9EhH9ZvlvFH2NA==",
-      "engines": {
-        "node": ">= 0.12.0"
-      }
-    },
     "node_modules/picocolors": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
@@ -1701,17 +1692,6 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "dev": true
     },
-    "node_modules/prop-types": {
-      "version": "15.8.1",
-      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
-      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "peer": true,
-      "dependencies": {
-        "loose-envify": "^1.4.0",
-        "object-assign": "^4.1.1",
-        "react-is": "^16.13.1"
-      }
-    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -1755,22 +1735,6 @@
         "react": "^18.3.1"
       }
     },
-    "node_modules/react-is": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "peer": true
-    },
-    "node_modules/react-photoswipe-gallery": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/react-photoswipe-gallery/-/react-photoswipe-gallery-3.0.2.tgz",
-      "integrity": "sha512-TLkpzp2BSUUL/4GPRU5SQWXfJ8xuUBKgS8qUaHyhsT1co6CStr1mVCl4oQrSSFbWxAKhB5fHbr12l1R+TkqFcQ==",
-      "peerDependencies": {
-        "photoswipe": ">= 5.2.2",
-        "prop-types": ">= 15.7.0",
-        "react": ">= 16.8.0"
-      }
-    },
     "node_modules/react-refresh": {
       "version": "0.14.2",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
diff --git a/package.json b/package.json
index 335accd..7c23ace 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "nx-content",
   "private": true,
-  "version": "3.0.0",
+  "version": "3.0.2",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -13,10 +13,8 @@
     "fuse.js": "^7.0.0",
     "lucide-react": "^0.344.0",
     "nx-content": "file:",
-    "photoswipe": "^5.4.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-photoswipe-gallery": "^3.0.1",
     "zustand": "^4.5.0"
   },
   "devDependencies": {
diff --git a/src/App.tsx b/src/App.tsx
index 07992bf..bbeabeb 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -176,8 +176,6 @@ export default function App() {
             tidQuery={tidQuery}
             onNameChange={setNameQuery}
             onTidChange={setTidQuery}
-            resultCount={filteredItems.length}
-            totalCount={items.filter(item => item.type === lastActiveTab).length}
           />
 
           <TabNavigation
diff --git a/src/components/ContentTable.tsx b/src/components/ContentTable.tsx
index 87780fe..68154ce 100644
--- a/src/components/ContentTable.tsx
+++ b/src/components/ContentTable.tsx
@@ -192,7 +192,10 @@ export function ContentTable({
       )}
 
       {selectedId && (
-        <div className="fixed inset-0 bg-background/80 backdrop-blur-sm flex items-center justify-center p-2 sm:p-4 z-50">
+        <div 
+          className="fixed inset-0 bg-background/80 backdrop-blur-sm flex items-center justify-center p-2 sm:p-4 z-50"
+          onClick={() => setSelectedId(null)}
+        >
           <div className="bg-card rounded-lg shadow-xl w-full max-h-[95vh] overflow-y-auto border border-border sm:max-w-4xl">
             <GameDetails
               content={getRelatedContent(allItems, selectedId)}
diff --git a/src/components/ErrorLog.tsx b/src/components/ErrorLog.tsx
index 45303af..b7453fb 100644
--- a/src/components/ErrorLog.tsx
+++ b/src/components/ErrorLog.tsx
@@ -38,8 +38,14 @@ export function ErrorLog({ onClose }: ErrorLogProps) {
   const logs = filter === 'all' ? logger.getLogs() : logger.getErrorLogs();
 
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
-      <div className="bg-card rounded-lg shadow-xl max-w-4xl w-full max-h-[90vh] flex flex-col border border-border">
+    <div 
+      className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-2 sm:p-4 z-50"
+      onClick={onClose}
+    >
+      <div 
+        className="bg-card rounded-lg shadow-xl w-full max-w-4xl max-h-[95vh] flex flex-col border border-border"
+        onClick={(e) => e.stopPropagation()}
+      >
         <div className="p-4 border-b border-border flex items-center justify-between">
           <div className="flex items-center space-x-2">
             <AlertTriangle className="h-5 w-5 text-primary" />
@@ -58,7 +64,7 @@ export function ErrorLog({ onClose }: ErrorLogProps) {
                 const url = URL.createObjectURL(blob);
                 const a = document.createElement('a');
                 a.href = url;
-                a.download = `nx-working-logs-${new Date().toISOString()}.txt`;
+                a.download = `nx-content-logs-${new Date().toISOString()}.txt`;
                 document.body.appendChild(a);
                 a.click();
                 document.body.removeChild(a);
@@ -67,7 +73,7 @@ export function ErrorLog({ onClose }: ErrorLogProps) {
               className="flex items-center space-x-2 px-3 py-1.5 rounded-lg bg-primary/10 text-primary hover:bg-primary/20 transition-colors"
             >
               <FileText className="h-4 w-4" />
-              <span>Export Logs</span>
+              <span className="hidden sm:inline">Export Logs</span>
             </button>
             <button
               onClick={onClose}
@@ -78,11 +84,11 @@ export function ErrorLog({ onClose }: ErrorLogProps) {
           </div>
         </div>
 
-        <div className="p-4 border-b border-border flex items-center justify-between">
+        <div className="p-4 border-b border-border flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2">
           <select
             value={filter}
             onChange={(e) => setFilter(e.target.value as 'all' | 'error')}
-            className="bg-muted border border-border rounded-lg px-3 py-1.5 text-foreground hover:border-primary/50 transition-colors"
+            className="w-full sm:w-auto bg-muted border border-border rounded-lg px-3 py-1.5 text-foreground hover:border-primary/50 transition-colors text-sm"
           >
             <option value="all">All Logs ({logger.getLogs().length})</option>
             <option value="error">Errors Only ({logger.getErrorLogs().length})</option>
@@ -93,7 +99,7 @@ export function ErrorLog({ onClose }: ErrorLogProps) {
               logger.clearLogs();
               onClose();
             }}
-            className="px-3 py-1.5 text-sm text-red-500 hover:text-red-600 transition-colors"
+            className="w-full sm:w-auto px-3 py-1.5 text-sm text-red-500 hover:text-red-600 transition-colors text-center"
           >
             Clear All Logs
           </button>
@@ -125,11 +131,11 @@ export function ErrorLog({ onClose }: ErrorLogProps) {
                         {log.level.toUpperCase()}
                       </span>
                     </div>
-                    <span className="text-sm text-muted-foreground">
+                    <span className="text-xs sm:text-sm text-muted-foreground">
                       {new Date(log.timestamp).toLocaleString()}
                     </span>
                   </div>
-                  <p className="mb-2 text-foreground">{log.message}</p>
+                  <p className="mb-2 text-sm text-foreground break-words">{log.message}</p>
                   {log.details && formatLogDetails(log.details)}
                 </div>
               ))}
diff --git a/src/components/GameDetails.tsx b/src/components/GameDetails.tsx
index a7c8eb8..7b53091 100644
--- a/src/components/GameDetails.tsx
+++ b/src/components/GameDetails.tsx
@@ -67,101 +67,103 @@ export function GameDetails({ content, onClose }: GameDetailsProps) {
   const assets = getVisualAssets(base.id);
 
   return (
-    <div className="p-4 sm:p-6 space-y-4 sm:space-y-6">
-      <div className="flex items-center justify-between">
-        <h2 className="text-lg sm:text-xl font-bold line-clamp-1">{base.name || 'Content Details'}</h2>
-        <div className="flex items-center space-x-2 sm:space-x-3">
-          <a
-            href={`https://stats.ghostland.at/${base.id}`}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="flex items-center space-x-1 sm:space-x-2 px-2 sm:px-3 py-1.5 rounded-lg bg-primary/10 text-primary hover:bg-primary/20 transition-colors text-sm"
-          >
-            <ExternalLink className="h-4 w-4" />
-            <span className="hidden sm:inline">View Stats</span>
-          </a>
-          <button
-            onClick={onClose}
-            className="p-2 hover:bg-muted rounded-full transition-colors"
-            aria-label="Close details"
-          >
-            <X className="h-5 w-5" />
-          </button>
+    <div className="relative" onClick={(e) => e.stopPropagation()}>
+      <div className="p-4 sm:p-6 space-y-4 sm:space-y-6">
+        <div className="flex items-center justify-between">
+          <h2 className="text-lg sm:text-xl font-bold line-clamp-1">{base.name || 'Content Details'}</h2>
+          <div className="flex items-center space-x-2 sm:space-x-3">
+            <a
+              href={`https://stats.ghostland.at/${base.id}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center space-x-1 sm:space-x-2 px-2 sm:px-3 py-1.5 rounded-lg bg-primary/10 text-primary hover:bg-primary/20 transition-colors text-sm"
+            >
+              <ExternalLink className="h-4 w-4" />
+              <span className="hidden sm:inline">View Stats</span>
+            </a>
+            <button
+              onClick={onClose}
+              className="p-2 hover:bg-muted rounded-full transition-colors"
+              aria-label="Close details"
+            >
+              <X className="h-5 w-5" />
+            </button>
+          </div>
         </div>
-      </div>
 
-      <div className="relative aspect-video rounded-lg overflow-hidden bg-muted">
-        <img
-          src={assets.banner}
-          alt="Game Banner"
-          className="w-full h-full object-cover"
-          onError={(e) => {
-            const img = e.target as HTMLImageElement;
-            img.style.display = 'none';
-          }}
-        />
-      </div>
-
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-        <div className="bg-card border border-border p-4 rounded-lg">
-          <div className="flex items-center space-x-3 mb-3">
-            <img
-              src={assets.icon}
-              alt="Game Icon"
-              className="w-12 h-12 rounded"
-              onError={(e) => {
-                const img = e.target as HTMLImageElement;
-                img.style.display = 'none';
-              }}
-            />
-            <div>
-              <h3 className="text-sm font-medium">Base Game</h3>
-              <p className="text-xs text-muted-foreground font-mono break-all">{base.id}</p>
-            </div>
-          </div>
-          {base.name && <p className="text-sm mb-2 break-words">{base.name}</p>}
-          {base.size && (
-            <p className="text-sm text-muted-foreground">
-              Size: {formatFileSize(base.size)}
-            </p>
-          )}
-          {base.releaseDate && (
-            <p className="text-sm text-muted-foreground">
-              Released: {formatDate(base.releaseDate)}
-            </p>
-          )}
+        <div className="relative aspect-video rounded-lg overflow-hidden bg-muted">
+          <img
+            src={assets.banner}
+            alt="Game Banner"
+            className="w-full h-full object-cover"
+            onError={(e) => {
+              const img = e.target as HTMLImageElement;
+              img.style.display = 'none';
+            }}
+          />
         </div>
 
-        {updates.length > 0 && (
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
           <div className="bg-card border border-border p-4 rounded-lg">
-            <div className="flex items-center space-x-2 mb-3">
-              <Download className="h-5 w-5 text-blue-500" />
-              <h3 className="text-sm font-medium">Updates ({updates.length})</h3>
+            <div className="flex items-center space-x-3 mb-3">
+              <img
+                src={assets.icon}
+                alt="Game Icon"
+                className="w-12 h-12 rounded"
+                onError={(e) => {
+                  const img = e.target as HTMLImageElement;
+                  img.style.display = 'none';
+                }}
+              />
+              <div>
+                <h3 className="text-sm font-medium">Base Game</h3>
+                <p className="text-xs text-muted-foreground font-mono break-all">{base.id}</p>
+              </div>
             </div>
-            <ContentList 
-              items={updates} 
-              maxVisible={maxUpdateDisplay} 
-              type="update"
-            />
+            {base.name && <p className="text-sm mb-2 break-words">{base.name}</p>}
+            {base.size && (
+              <p className="text-sm text-muted-foreground">
+                Size: {formatFileSize(base.size)}
+              </p>
+            )}
+            {base.releaseDate && (
+              <p className="text-sm text-muted-foreground">
+                Released: {formatDate(base.releaseDate)}
+              </p>
+            )}
           </div>
-        )}
 
-        {dlcs.length > 0 && (
-          <div className="bg-card border border-border p-4 rounded-lg">
-            <div className="flex items-center space-x-2 mb-3">
-              <Package className="h-5 w-5 text-purple-500" />
-              <h3 className="text-sm font-medium">DLCs ({dlcs.length})</h3>
+          {updates.length > 0 && (
+            <div className="bg-card border border-border p-4 rounded-lg">
+              <div className="flex items-center space-x-2 mb-3">
+                <Download className="h-5 w-5 text-blue-500" />
+                <h3 className="text-sm font-medium">Updates ({updates.length})</h3>
+              </div>
+              <ContentList 
+                items={updates} 
+                maxVisible={maxUpdateDisplay} 
+                type="update"
+              />
             </div>
-            <ContentList 
-              items={dlcs} 
-              maxVisible={maxDlcDisplay} 
-              type="dlc"
-            />
-          </div>
-        )}
-      </div>
+          )}
 
-      <ScreenshotGallery screenshots={assets.screenshots} />
+          {dlcs.length > 0 && (
+            <div className="bg-card border border-border p-4 rounded-lg">
+              <div className="flex items-center space-x-2 mb-3">
+                <Package className="h-5 w-5 text-purple-500" />
+                <h3 className="text-sm font-medium">DLCs ({dlcs.length})</h3>
+              </div>
+              <ContentList 
+                items={dlcs} 
+                maxVisible={maxDlcDisplay} 
+                type="dlc"
+              />
+            </div>
+          )}
+        </div>
+
+        <ScreenshotGallery screenshots={assets.screenshots} />
+      </div>
     </div>
   );
 }
\ No newline at end of file
diff --git a/src/components/ScreenshotGallery.tsx b/src/components/ScreenshotGallery.tsx
index 5bc1baf..2480d7e 100644
--- a/src/components/ScreenshotGallery.tsx
+++ b/src/components/ScreenshotGallery.tsx
@@ -1,51 +1,395 @@
-import { Gallery, Item } from 'react-photoswipe-gallery';
-import 'photoswipe/style.css';
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { Maximize2, X, ChevronLeft, ChevronRight, Download, ZoomIn, ZoomOut, RotateCw, Maximize, Minimize } from 'lucide-react';
 
 interface ScreenshotGalleryProps {
   screenshots: string[];
 }
 
 export function ScreenshotGallery({ screenshots }: ScreenshotGalleryProps) {
+  const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
+  const [isLoading, setIsLoading] = useState<{ [key: number]: boolean }>({});
+  const [loadError, setLoadError] = useState<{ [key: number]: boolean }>({});
+  const [rotation, setRotation] = useState(0);
+  const [zoom, setZoom] = useState(1);
+  const [isDragging, setIsDragging] = useState(false);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [showControls, setShowControls] = useState(true);
+  const [autoplayActive, setAutoplayActive] = useState(false);
+  const autoplayTimeoutRef = useRef<number>();
+  const dragStartRef = useRef({ x: 0, y: 0 });
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const validScreenshots = screenshots.filter((_, index) => !loadError[index]);
+
+  const handleImageLoad = (index: number) => {
+    setIsLoading(prev => ({ ...prev, [index]: false }));
+  };
+
+  const handleImageError = (index: number) => {
+    setLoadError(prev => ({ ...prev, [index]: true }));
+    setIsLoading(prev => ({ ...prev, [index]: false }));
+  };
+
+  const resetImageState = () => {
+    setRotation(0);
+    setZoom(1);
+    setPosition({ x: 0, y: 0 });
+  };
+
+  const handlePrevious = useCallback(() => {
+    if (selectedIndex === null) return;
+    const newIndex = selectedIndex === 0 ? validScreenshots.length - 1 : selectedIndex - 1;
+    setSelectedIndex(newIndex);
+    resetImageState();
+  }, [selectedIndex, validScreenshots.length]);
+
+  const handleNext = useCallback(() => {
+    if (selectedIndex === null) return;
+    const newIndex = selectedIndex === validScreenshots.length - 1 ? 0 : selectedIndex + 1;
+    setSelectedIndex(newIndex);
+    resetImageState();
+  }, [selectedIndex, validScreenshots.length]);
+
+  const toggleFullscreen = async () => {
+    if (!document.fullscreenElement) {
+      await containerRef.current?.requestFullscreen();
+      setIsFullscreen(true);
+    } else {
+      await document.exitFullscreen();
+      setIsFullscreen(false);
+    }
+  };
+
+  const toggleAutoplay = () => {
+    setAutoplayActive(prev => !prev);
+  };
+
+  useEffect(() => {
+    if (autoplayActive && selectedIndex !== null) {
+      autoplayTimeoutRef.current = window.setTimeout(handleNext, 3000);
+      return () => {
+        if (autoplayTimeoutRef.current) {
+          clearTimeout(autoplayTimeoutRef.current);
+        }
+      };
+    }
+  }, [autoplayActive, selectedIndex, handleNext]);
+
+  const handleMouseDown = (e: React.MouseEvent) => {
+    if (e.button !== 0) return; // Only left click
+    setIsDragging(true);
+    dragStartRef.current = {
+      x: e.clientX - position.x,
+      y: e.clientY - position.y
+    };
+  };
+
+  const handleMouseMove = (e: React.MouseEvent) => {
+    if (!isDragging) return;
+    setPosition({
+      x: e.clientX - dragStartRef.current.x,
+      y: e.clientY - dragStartRef.current.y
+    });
+  };
+
+  const handleMouseUp = () => {
+    setIsDragging(false);
+  };
+
+  const handleWheel = (e: React.WheelEvent) => {
+    e.preventDefault();
+    const delta = e.deltaY > 0 ? -0.1 : 0.1;
+    setZoom(prev => Math.max(0.5, Math.min(3, prev + delta)));
+  };
+
+  const handleKeyDown = useCallback((e: KeyboardEvent) => {
+    if (selectedIndex === null) return;
+
+    switch (e.key) {
+      case 'ArrowLeft':
+        handlePrevious();
+        break;
+      case 'ArrowRight':
+        handleNext();
+        break;
+      case 'Escape':
+        if (isFullscreen) {
+          document.exitFullscreen();
+        } else {
+          setSelectedIndex(null);
+        }
+        break;
+      case 'r':
+        setRotation(prev => (prev + 90) % 360);
+        break;
+      case '+':
+        setZoom(prev => Math.min(prev + 0.25, 3));
+        break;
+      case '-':
+        setZoom(prev => Math.max(prev - 0.25, 0.5));
+        break;
+      case 'f':
+        toggleFullscreen();
+        break;
+      case ' ':
+        toggleAutoplay();
+        break;
+    }
+  }, [selectedIndex, handlePrevious, handleNext, isFullscreen]);
+
+  useEffect(() => {
+    if (selectedIndex !== null) {
+      window.addEventListener('keydown', handleKeyDown);
+      return () => window.removeEventListener('keydown', handleKeyDown);
+    }
+  }, [selectedIndex, handleKeyDown]);
+
+  const handleDownload = async (url: string) => {
+    try {
+      const response = await fetch(url);
+      const blob = await response.blob();
+      const blobUrl = URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = blobUrl;
+      link.download = `screenshot-${Date.now()}.jpg`;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(blobUrl);
+    } catch (error) {
+      console.error('Failed to download image:', error);
+    }
+  };
+
+  useEffect(() => {
+    let timeout: number;
+    if (selectedIndex !== null) {
+      timeout = window.setTimeout(() => setShowControls(false), 3000);
+    }
+    return () => clearTimeout(timeout);
+  }, [selectedIndex, position, zoom, rotation]);
+
+  const handleMouseMove2 = useCallback(() => {
+    setShowControls(true);
+  }, []);
+
+  if (validScreenshots.length === 0) return null;
+
   return (
     <div className="space-y-3 sm:space-y-4">
-      <h3 className="text-sm font-medium text-foreground">Screenshots</h3>
+      <div className="flex items-center justify-between">
+        <h3 className="text-sm font-medium text-foreground">Screenshots</h3>
+        <div className="text-xs text-muted-foreground">
+          {validScreenshots.length} available
+        </div>
+      </div>
       
-      <Gallery>
-        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-2 sm:gap-4">
-          {screenshots.map((url, index) => (
-            <Item
-              key={index}
-              original={url}
-              thumbnail={url}
-              width={1280}
-              height={720}
+      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-2 sm:gap-4">
+        {screenshots.map((url, index) => !loadError[index] && (
+          <div
+            key={index}
+            onClick={() => {
+              setSelectedIndex(index);
+              resetImageState();
+            }}
+            className="relative aspect-video rounded-lg overflow-hidden bg-muted cursor-pointer group"
+            onMouseEnter={() => {
+              if (!isLoading[index]) return;
+              setIsLoading(prev => ({ ...prev, [index]: true }));
+            }}
+          >
+            {isLoading[index] && (
+              <div className="absolute inset-0 flex items-center justify-center bg-muted">
+                <div className="w-6 h-6 border-2 border-primary border-t-transparent rounded-full animate-spin" />
+              </div>
+            )}
+            <img
+              src={url}
+              alt={`Screenshot ${index + 1}`}
+              className={`
+                w-full h-full object-cover transition-all duration-300
+                ${isLoading[index] ? 'opacity-0' : 'opacity-100'}
+                group-hover:scale-105
+              `}
+              onLoad={() => handleImageLoad(index)}
+              onError={() => handleImageError(index)}
+              loading="lazy"
+            />
+            <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+              <div className="flex flex-col items-center space-y-2">
+                <Maximize2 className="w-5 h-5 text-white" />
+                <span className="text-white text-xs sm:text-sm font-medium px-2 text-center">
+                  View Fullscreen
+                </span>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {selectedIndex !== null && (
+        <div 
+          ref={containerRef}
+          className="fixed inset-0 z-[9999] bg-black/90 flex items-center justify-center"
+          onClick={(e) => {
+            if (e.target === e.currentTarget) {
+              setSelectedIndex(null);
+              setAutoplayActive(false);
+            }
+          }}
+          onMouseMove={handleMouseMove2}
+        >
+          {/* Top toolbar */}
+          <div className={`
+            absolute top-0 left-0 right-0 flex items-center justify-between p-4 
+            bg-gradient-to-b from-black/50 to-transparent
+            transition-opacity duration-300
+            ${showControls ? 'opacity-100' : 'opacity-0'}
+          `}>
+            <div className="text-white/80 text-sm flex items-center space-x-4">
+              <span>Screenshot {selectedIndex + 1} of {validScreenshots.length}</span>
+              <div className="hidden sm:flex items-center space-x-2 text-xs">
+                <span>Zoom: {Math.round(zoom * 100)}%</span>
+                <span>Rotation: {rotation}°</span>
+              </div>
+            </div>
+            <div className="flex items-center space-x-2">
+              <button
+                onClick={() => handleDownload(validScreenshots[selectedIndex])}
+                className="p-2 text-white/80 hover:text-white rounded-full hover:bg-white/10 transition-colors"
+                title="Download"
+              >
+                <Download className="w-5 h-5" />
+              </button>
+              <button
+                onClick={toggleAutoplay}
+                className={`p-2 rounded-full transition-colors ${
+                  autoplayActive 
+                    ? 'text-primary bg-white/10' 
+                    : 'text-white/80 hover:text-white hover:bg-white/10'
+                }`}
+                title={autoplayActive ? 'Stop Slideshow' : 'Start Slideshow'}
+              >
+                <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                  {autoplayActive ? (
+                    <rect x="6" y="4" width="4" height="16" />
+                  ) : (
+                    <polygon points="5 3 19 12 5 21" />
+                  )}
+                </svg>
+              </button>
+              <button
+                onClick={() => setRotation(prev => (prev + 90) % 360)}
+                className="p-2 text-white/80 hover:text-white rounded-full hover:bg-white/10 transition-colors"
+                title="Rotate (R)"
+              >
+                <RotateCw className="w-5 h-5" />
+              </button>
+              <button
+                onClick={() => setZoom(prev => Math.max(prev - 0.25, 0.5))}
+                className="p-2 text-white/80 hover:text-white rounded-full hover:bg-white/10 transition-colors"
+                title="Zoom Out (-)"
+                disabled={zoom <= 0.5}
+              >
+                <ZoomOut className="w-5 h-5" />
+              </button>
+              <button
+                onClick={() => setZoom(prev => Math.min(prev + 0.25, 3))}
+                className="p-2 text-white/80 hover:text-white rounded-full hover:bg-white/10 transition-colors"
+                title="Zoom In (+)"
+                disabled={zoom >= 3}
+              >
+                <ZoomIn className="w-5 h-5" />
+              </button>
+              <button
+                onClick={toggleFullscreen}
+                className="p-2 text-white/80 hover:text-white rounded-full hover:bg-white/10 transition-colors"
+                title="Toggle Fullscreen (F)"
+              >
+                {isFullscreen ? (
+                  <Minimize className="w-5 h-5" />
+                ) : (
+                  <Maximize className="w-5 h-5" />
+                )}
+              </button>
+              <button
+                onClick={() => {
+                  setSelectedIndex(null);
+                  setAutoplayActive(false);
+                }}
+                className="p-2 text-white/80 hover:text-white rounded-full hover:bg-white/10 transition-colors"
+                title="Close (ESC)"
+              >
+                <X className="w-5 h-5" />
+              </button>
+            </div>
+          </div>
+
+          {/* Navigation buttons */}
+          <div className={`
+            transition-opacity duration-300
+            ${showControls ? 'opacity-100' : 'opacity-0'}
+          `}>
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                handlePrevious();
+              }}
+              className="absolute left-4 top-1/2 -translate-y-1/2 text-white/80 hover:text-white p-2 rounded-full hover:bg-white/10 transition-colors"
             >
-              {({ ref, open }) => (
-                <div
-                  ref={ref}
-                  onClick={open}
-                  className="aspect-video rounded-lg overflow-hidden bg-muted cursor-pointer group relative"
-                >
-                  <img
-                    src={url}
-                    alt={`Screenshot ${index + 1}`}
-                    className="w-full h-full object-cover transition-transform group-hover:scale-105"
-                    onError={(e) => {
-                      const img = e.target as HTMLImageElement;
-                      img.style.display = 'none';
-                    }}
-                  />
-                  <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
-                    <span className="text-white text-xs sm:text-sm font-medium px-2 text-center">
-                      Tap to View
-                    </span>
-                  </div>
-                </div>
-              )}
-            </Item>
-          ))}
+              <ChevronLeft className="w-6 h-6" />
+            </button>
+
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                handleNext();
+              }}
+              className="absolute right-4 top-1/2 -translate-y-1/2 text-white/80 hover:text-white p-2 rounded-full hover:bg-white/10 transition-colors"
+            >
+              <ChevronRight className="w-6 h-6" />
+            </button>
+          </div>
+
+          {/* Image container */}
+          <div 
+            className="w-full h-full flex items-center justify-center overflow-hidden cursor-move"
+            onMouseDown={handleMouseDown}
+            onMouseMove={handleMouseMove}
+            onMouseUp={handleMouseUp}
+            onMouseLeave={handleMouseUp}
+            onWheel={handleWheel}
+          >
+            <img
+              src={validScreenshots[selectedIndex]}
+              alt={`Screenshot ${selectedIndex + 1}`}
+              className="max-w-full max-h-[90vh] object-contain transition-transform duration-200 select-none"
+              style={{
+                transform: `rotate(${rotation}deg) scale(${zoom}) translate(${position.x}px, ${position.y}px)`,
+                cursor: isDragging ? 'grabbing' : 'grab'
+              }}
+              draggable={false}
+            />
+          </div>
+
+          {/* Bottom info */}
+          <div className={`
+            absolute bottom-4 left-0 right-0 flex justify-center
+            transition-opacity duration-300
+            ${showControls ? 'opacity-100' : 'opacity-0'}
+          `}>
+            <div className="bg-black/50 text-white/80 text-xs rounded-full px-4 py-2">
+              <span className="hidden sm:inline">
+                Arrow keys to navigate • R to rotate • +/- to zoom • Space for slideshow • F for fullscreen • ESC to close
+              </span>
+              <span className="sm:hidden">
+                Tap edges to navigate • Pinch to zoom
+              </span>
+            </div>
+          </div>
         </div>
-      </Gallery>
+      )}
     </div>
   );
 }
\ No newline at end of file
diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
index 8d9ae90..c5cab53 100644
--- a/src/components/SearchBar.tsx
+++ b/src/components/SearchBar.tsx
@@ -5,17 +5,13 @@ interface SearchBarProps {
   tidQuery: string;
   onNameChange: (value: string) => void;
   onTidChange: (value: string) => void;
-  resultCount?: number;
-  totalCount?: number;
 }
 
 export function SearchBar({ 
   nameQuery, 
   tidQuery, 
   onNameChange, 
-  onTidChange, 
-  resultCount, 
-  totalCount 
+  onTidChange
 }: SearchBarProps) {
   return (
     <div className="flex flex-col sm:flex-row gap-4">
@@ -64,7 +60,7 @@ export function SearchBar({
           maxLength={16}
           className={`
             block w-full pl-10 pr-10 py-3 bg-card border border-border rounded-lg 
-            text-foreground placeholder-muted-foreground font-mono uppercase
+            text-foreground placeholder-muted-foreground font-mono
             focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent 
             hover:border-primary/50 transition-all duration-200
             ${tidQuery ? 'ring-2 ring-primary' : ''}
@@ -80,15 +76,6 @@ export function SearchBar({
           </button>
         )}
       </div>
-
-      {/* Results counter */}
-      {resultCount !== undefined && totalCount !== undefined && (
-        <div className="hidden sm:flex items-center justify-center px-4 py-2 bg-muted rounded-lg min-w-[120px]">
-          <span className="text-sm text-muted-foreground">
-            {resultCount.toLocaleString()} / {totalCount.toLocaleString()}
-          </span>
-        </div>
-      )}
     </div>
   );
 }
\ No newline at end of file
diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
index dcffd88..9685f3f 100644
--- a/src/components/Settings.tsx
+++ b/src/components/Settings.tsx
@@ -31,8 +31,14 @@ export function Settings({ onClose }: SettingsProps) {
   } = useUserPreferences();
 
   return (
-    <div className="fixed inset-0 bg-background/80 backdrop-blur-sm flex items-center justify-center p-2 sm:p-4 z-50">
-      <div className="bg-card rounded-lg shadow-xl w-full max-w-lg border border-border">
+    <div 
+      className="fixed inset-0 bg-background/80 backdrop-blur-sm flex items-center justify-center p-2 sm:p-4 z-50"
+      onClick={onClose}
+    >
+      <div 
+        className="bg-card rounded-lg shadow-xl w-full max-w-lg border border-border"
+        onClick={(e) => e.stopPropagation()}
+      >
         <div className="flex items-center justify-between p-4 border-b border-border">
           <div className="flex items-center space-x-2">
             <SettingsIcon className="h-5 w-5 text-primary" />