clean up

web/src/components/images.tsx

@@ -11,6 +11,7 @@ interface ImageDetails {
 interface ImageData {
   url: string;
   height: number;
+  isGif: boolean;
 }
 
 export const Images: React.FC = () => {
@@ -25,7 +26,7 @@ export const Images: React.FC = () => {
 
       chrome.storage.local.get(tabId.toString(), (items) => {
         const requests = (items[tabId.toString()] as ImageDetails[]) || [];
-        const imgs = requests.filter(({ type }) => type === "image");
+        const imgs = requests.filter(({ type }) => type === "image" || type === "media");
 
         const uniqueImages = [
           ...new Map(imgs.map((item) => [item.url, item])).values(),
@@ -34,8 +35,12 @@ export const Images: React.FC = () => {
         const imagePromises = uniqueImages.map(({ url }) => {
           return new Promise<ImageData>((resolve) => {
             const img = new Image();
-            img.onload = () => resolve({ url: img.src, height: img.height });
-            img.onerror = () => resolve({ url, height: 0 }); // Handle load errors
+            img.onload = () => resolve({ 
+              url: img.src, 
+              height: img.height, 
+              isGif: url.toLowerCase().endsWith('.gif') 
+            });
+            img.onerror = () => resolve({ url, height: 0, isGif: false });
             img.src = url;
           });
         });

web/src/components/images/image-download.tsx

@@ -65,7 +65,7 @@ export const ImageDownload: React.FC = () => {
             <SelectContent>
               <SelectItem value="original">Original</SelectItem>
               {IMAGE_FORMATS.map((fmt) => (
-                <SelectItem key={fmt} value={fmt}>
+                <SelectItem defaultValue={fmt[0]} key={fmt} value={fmt}>
                   {fmt.toUpperCase()}
                 </SelectItem>
               ))}

web/src/components/images/image-masonry.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { a, useTransition } from "@react-spring/web";
 import shuffle from "lodash.shuffle";
 import React, { useEffect, useMemo } from "react";
@@ -55,17 +56,23 @@ export const ImageMasonry: React.FC = () => {
       className={styles.list}
       style={{ height: Math.max(...heights) }}
     >
-      {transitions((style, item) => (
+      {transitions((style, item: any) => (
         <a.div style={style}>
           <div
             onClick={() => setSelectedImage(item)}
             style={{
               backgroundImage: `url(${item.url})`,
               borderWidth: selectedImages.includes(item) ? "4px" : "0px",
               borderStyle: "solid",
-              borderColor: "rgb(30, 64, 175)", // blue-800 in tailwind
+              borderColor: "rgb(30, 64, 175)",
             }}
-          />
+          >
+            {item.isGif && (
+              <div className="absolute bottom-0 right-0 bg-black bg-opacity-50 text-white px-2 py-1 text-xs">
+                GIF
+              </div>
+            )}
+          </div>
         </a.div>
       ))}
     </div>

web/todo.tsx

@@ -0,0 +1 @@
+//TODO: Scrollbar