From 7e781631bb4028014d657bf661cfa7bfa1edb576 Mon Sep 17 00:00:00 2001
From: david_bai <david_bai@example.com>
Date: Fri, 27 Mar 2026 17:20:49 +0800
Subject: [PATCH] chore(ui): clear remaining frontend warnings

Resolve the remaining lint warnings without changing behavior by fixing hook dependency lists, removing the icon naming false positive, and switching the YouTube thumbnail to next/image for compliant rendering.
---
 .../components/ClipboardApp/FileListDisplay.tsx     | 13 ++++++++++++-
 .../components/Editor/EditorToolbar/InsertTools.tsx |  4 ++--
 .../components/Editor/hooks/useEditorCommands.ts    | 12 ++++++------
 frontend/components/common/YouTubePlayer.tsx        |  5 ++++-
 4 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/frontend/components/ClipboardApp/FileListDisplay.tsx b/frontend/components/ClipboardApp/FileListDisplay.tsx
index ad20ee7..c0aedc7 100644
--- a/frontend/components/ClipboardApp/FileListDisplay.tsx
+++ b/frontend/components/ClipboardApp/FileListDisplay.tsx
@@ -225,6 +225,9 @@ const FileListDisplay: React.FC<FileListDisplayProps> = ({
     fileProgresses,
     showFinished,
     activeTransfers,
+    mode,
+    clearSendProgress,
+    clearReceiveProgress,
     folders,
     singleFiles,
   ]);
@@ -286,7 +289,15 @@ const FileListDisplay: React.FC<FileListDisplayProps> = ({
       // Update the last status
       prevShowFinishedRef.current[item.fileId] = currentShowFinished;
     });
-  }, [showFinished, singleFiles, folders, saveType, onDownload]);
+  }, [
+    showFinished,
+    singleFiles,
+    folders,
+    saveType,
+    onDownload,
+    activeTransfers,
+    fileProgresses,
+  ]);
 
   //Actions corresponding to each file - progress, download, delete
   const renderItemActions = (item: FileMeta) => {
diff --git a/frontend/components/Editor/EditorToolbar/InsertTools.tsx b/frontend/components/Editor/EditorToolbar/InsertTools.tsx
index 5421011..dac3105 100644
--- a/frontend/components/Editor/EditorToolbar/InsertTools.tsx
+++ b/frontend/components/Editor/EditorToolbar/InsertTools.tsx
@@ -1,4 +1,4 @@
-import { Link2, Image, Code } from "lucide-react";
+import { Link2, Image as ImageIcon, Code } from "lucide-react";
 
 interface InsertToolsProps {
   insertLink: () => void;
@@ -25,7 +25,7 @@ export function InsertTools({
         onClick={insertImage}
         title="Upload image"
       >
-        <Image className="w-3.5 h-3.5" />
+        <ImageIcon className="w-3.5 h-3.5" />
       </button>
       <button
         className="p-1.5 hover:bg-accent rounded"
diff --git a/frontend/components/Editor/hooks/useEditorCommands.ts b/frontend/components/Editor/hooks/useEditorCommands.ts
index 1af9d64..560ecaf 100644
--- a/frontend/components/Editor/hooks/useEditorCommands.ts
+++ b/frontend/components/Editor/hooks/useEditorCommands.ts
@@ -76,7 +76,7 @@ export const useEditorCommands = (
       // Update HTML
       handleChange();
     },
-    [findStyleParent, getSelection, removeStyle]
+    [editorRef, findStyleParent, getSelection, handleChange]
   );
 
   // Align text
@@ -129,7 +129,7 @@ export const useEditorCommands = (
       // Update HTML
       handleChange();
     },
-    [getSelection]
+    [editorRef, getSelection, handleChange]
   );
 
   // Set font style
@@ -218,7 +218,7 @@ export const useEditorCommands = (
 
       handleChange();
     },
-    [getSelection, findStyleParent, cleanupSpan]
+    [cleanupSpan, findStyleParent, getSelection, handleChange]
   );
 
   // Insert link
@@ -258,7 +258,7 @@ export const useEditorCommands = (
         handleChange();
       }
     }
-  }, [getSelection]);
+  }, [getSelection, handleChange]);
 
   // Insert image
   const insertImage = useCallback(() => {
@@ -290,7 +290,7 @@ export const useEditorCommands = (
       }
     };
     input.click();
-  }, [getSelection]);
+  }, [getSelection, handleChange]);
 
   // Insert code block
   const insertCodeBlock = useCallback(() => {
@@ -318,7 +318,7 @@ export const useEditorCommands = (
     range.deleteContents();
     range.insertNode(pre);
     handleChange();
-  }, [getSelection]);
+  }, [getSelection, handleChange]);
 
   return {
     formatText,
diff --git a/frontend/components/common/YouTubePlayer.tsx b/frontend/components/common/YouTubePlayer.tsx
index 72ae421..6092934 100644
--- a/frontend/components/common/YouTubePlayer.tsx
+++ b/frontend/components/common/YouTubePlayer.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useState, useEffect } from "react";
 import { Play } from "lucide-react";
+import Image from "next/image";
 
 interface YouTubePlayerProps {
   videoId: string;
@@ -21,9 +22,11 @@ const YouTubePlayer: React.FC<YouTubePlayerProps> = ({
       <div className="relative pb-[56.25%]">
         {!isPlaying ? (
           <div className="absolute top-0 left-0 w-full h-full">
-            <img
+            <Image
               src={localThumbnail}
               alt="Video preview"
+              fill
+              sizes="(max-width: 1024px) 100vw, 1024px"
               className="w-full h-full object-cover"
             />
             <button