From f4f5e47e48c7f3b942f20c0d4752bb04700bf924 Mon Sep 17 00:00:00 2001
From: ZacharyZcR <zacharyzcr1984@gmail.com>
Date: Tue, 16 Sep 2025 17:46:34 +0800
Subject: [PATCH] Refactor file window components to use shadcn design tokens
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace hardcoded colors with shadcn CSS variables in DraggableWindow
- Update FileViewer to use proper shadcn theme colors
- Switch from gray-* to muted/foreground/background tokens
- Improve dark mode compatibility and visual consistency
- Maintain all existing functionality with better theming support

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../components/DraggableWindow.tsx            | 12 +++----
 .../File Manager/components/FileViewer.tsx    | 34 +++++++++----------
 2 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/src/ui/Desktop/Apps/File Manager/components/DraggableWindow.tsx b/src/ui/Desktop/Apps/File Manager/components/DraggableWindow.tsx
index 7a30a806..19c3e3f7 100644
--- a/src/ui/Desktop/Apps/File Manager/components/DraggableWindow.tsx	
+++ b/src/ui/Desktop/Apps/File Manager/components/DraggableWindow.tsx	
@@ -150,7 +150,7 @@ export function DraggableWindow({
     <div
       ref={windowRef}
       className={cn(
-        "absolute bg-white border border-gray-300 rounded-lg shadow-2xl",
+        "absolute bg-card border border-border rounded-lg shadow-2xl",
         "select-none overflow-hidden",
         isMaximized ? "inset-0" : ""
       )}
@@ -168,8 +168,8 @@ export function DraggableWindow({
         ref={titleBarRef}
         className={cn(
           "flex items-center justify-between px-3 py-2",
-          "bg-gradient-to-r from-blue-500 to-blue-600 text-white",
-          "border-b border-gray-300 cursor-grab active:cursor-grabbing"
+          "bg-muted/50 text-foreground border-b border-border",
+          "cursor-grab active:cursor-grabbing"
         )}
         onMouseDown={handleMouseDown}
         onDoubleClick={handleTitleDoubleClick}
@@ -181,7 +181,7 @@ export function DraggableWindow({
         <div className="flex items-center gap-1">
           {onMinimize && (
             <button
-              className="w-8 h-6 flex items-center justify-center rounded hover:bg-white/20 transition-colors"
+              className="w-8 h-6 flex items-center justify-center rounded hover:bg-accent transition-colors"
               onClick={(e) => {
                 e.stopPropagation();
                 onMinimize();
@@ -194,7 +194,7 @@ export function DraggableWindow({
 
           {onMaximize && (
             <button
-              className="w-8 h-6 flex items-center justify-center rounded hover:bg-white/20 transition-colors"
+              className="w-8 h-6 flex items-center justify-center rounded hover:bg-accent transition-colors"
               onClick={(e) => {
                 e.stopPropagation();
                 onMaximize();
@@ -210,7 +210,7 @@ export function DraggableWindow({
           )}
 
           <button
-            className="w-8 h-6 flex items-center justify-center rounded hover:bg-red-500 transition-colors"
+            className="w-8 h-6 flex items-center justify-center rounded hover:bg-destructive hover:text-destructive-foreground transition-colors"
             onClick={(e) => {
               e.stopPropagation();
               onClose();
diff --git a/src/ui/Desktop/Apps/File Manager/components/FileViewer.tsx b/src/ui/Desktop/Apps/File Manager/components/FileViewer.tsx
index 02fdef5b..e6712973 100644
--- a/src/ui/Desktop/Apps/File Manager/components/FileViewer.tsx	
+++ b/src/ui/Desktop/Apps/File Manager/components/FileViewer.tsx	
@@ -146,20 +146,20 @@ export function FileViewer({
   }
 
   return (
-    <div className="h-full flex flex-col bg-gray-50">
+    <div className="h-full flex flex-col bg-background">
       {/* 文件信息头部 */}
-      <div className="flex-shrink-0 bg-white border-b border-gray-200 p-4">
+      <div className="flex-shrink-0 bg-card border-b border-border p-4">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-3">
-            <div className={cn("p-2 rounded-lg bg-gray-100", fileTypeInfo.color)}>
+            <div className={cn("p-2 rounded-lg bg-muted", fileTypeInfo.color)}>
               {fileTypeInfo.icon}
             </div>
             <div>
-              <h3 className="font-medium text-gray-900">{file.name}</h3>
-              <div className="flex items-center gap-4 text-sm text-gray-500">
+              <h3 className="font-medium text-foreground">{file.name}</h3>
+              <div className="flex items-center gap-4 text-sm text-muted-foreground">
                 <span>{formatFileSize(file.size)}</span>
                 {file.modified && <span>Modified: {file.modified}</span>}
-                <span className={cn("px-2 py-1 rounded-full text-xs", fileTypeInfo.color, "bg-gray-100")}>
+                <span className={cn("px-2 py-1 rounded-full text-xs", fileTypeInfo.color, "bg-muted")}>
                   {fileTypeInfo.type.toUpperCase()}
                 </span>
               </div>
@@ -197,13 +197,13 @@ export function FileViewer({
       <div className="flex-1 overflow-auto">
         {/* 大文件警告对话框 */}
         {showLargeFileWarning && (
-          <div className="h-full flex items-center justify-center bg-gray-50">
-            <div className="bg-white border border-orange-200 rounded-lg p-6 max-w-md mx-4 shadow-lg">
+          <div className="h-full flex items-center justify-center bg-background">
+            <div className="bg-card border border-orange-200 rounded-lg p-6 max-w-md mx-4 shadow-lg">
               <div className="flex items-start gap-3 mb-4">
                 <AlertCircle className="w-6 h-6 text-orange-500 flex-shrink-0 mt-0.5" />
                 <div>
-                  <h3 className="font-medium text-gray-900 mb-2">Large File Warning</h3>
-                  <p className="text-sm text-gray-600 mb-3">
+                  <h3 className="font-medium text-foreground mb-2">Large File Warning</h3>
+                  <p className="text-sm text-muted-foreground mb-3">
                     This file is {formatFileSize(file.size)} in size, which may cause performance issues when opened as text.
                   </p>
                   {isTooLarge ? (
@@ -213,7 +213,7 @@ export function FileViewer({
                       </p>
                     </div>
                   ) : (
-                    <p className="text-sm text-gray-600 mb-4">
+                    <p className="text-sm text-muted-foreground mb-4">
                       Do you want to continue opening this file as text? This may slow down your browser.
                     </p>
                   )}
@@ -277,8 +277,8 @@ export function FileViewer({
                 onChange={(e) => handleContentChange(e.target.value)}
                 className={cn(
                   "w-full h-full p-4 border-none resize-none outline-none",
-                  "font-mono text-sm bg-white",
-                  fileTypeInfo.type === 'code' && "bg-gray-900 text-gray-100"
+                  "font-mono text-sm bg-background text-foreground",
+                  fileTypeInfo.type === 'code' && "bg-muted text-foreground"
                 )}
                 placeholder="Start typing..."
                 spellCheck={false}
@@ -286,7 +286,7 @@ export function FileViewer({
             ) : (
               <div className={cn(
                 "h-full p-4 font-mono text-sm whitespace-pre-wrap",
-                fileTypeInfo.type === 'code' ? "bg-gray-900 text-gray-100" : "bg-white text-gray-900"
+                fileTypeInfo.type === 'code' ? "bg-muted text-foreground" : "bg-background text-foreground"
               )}>
                 {content || 'File is empty'}
               </div>
@@ -328,8 +328,8 @@ export function FileViewer({
         {/* 未知文件类型 - 只在不能显示为文本且没有警告时显示 */}
         {fileTypeInfo.type === 'unknown' && !shouldShowAsText && !showLargeFileWarning && (
           <div className="h-full flex items-center justify-center">
-            <div className="text-center text-gray-500">
-              <AlertCircle className="w-16 h-16 mx-auto mb-4 text-gray-300" />
+            <div className="text-center text-muted-foreground">
+              <AlertCircle className="w-16 h-16 mx-auto mb-4 text-muted-foreground/50" />
               <h3 className="text-lg font-medium mb-2">Cannot preview this file type</h3>
               <p className="text-sm mb-4">
                 This file type is not supported for preview. You can download it to view in an external application.
@@ -350,7 +350,7 @@ export function FileViewer({
       </div>
 
       {/* 底部状态栏 */}
-      <div className="flex-shrink-0 bg-gray-100 border-t border-gray-200 px-4 py-2 text-xs text-gray-600">
+      <div className="flex-shrink-0 bg-muted/50 border-t border-border px-4 py-2 text-xs text-muted-foreground">
         <div className="flex justify-between items-center">
           <span>{file.path}</span>
           {hasChanges && (