From cc9ae3fcd3a8699a397dc353677a653dd8d1b226 Mon Sep 17 00:00:00 2001 From: ZacharyZcR Date: Thu, 25 Sep 2025 09:34:51 +0800 Subject: [PATCH] FIX: Resolve keyboard shortcuts and enhance image preview with i18n support MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Fix keyboard shortcut conflicts in FileViewer.tsx (Ctrl+F, H, ?, Space, A) - Add comprehensive i18n translations for keyboard shortcuts help panel - Integrate react-photo-view for enhanced fullscreen image viewing - Simplify image preview by removing complex toolbar and hover hints - Add proper error handling and loading states for image display - Update English and Chinese translation files with new keyboard shortcut terms 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- package-lock.json | 11 ++ package.json | 1 + src/locales/en/translation.json | 24 ++++ src/locales/zh/translation.json | 24 ++++ .../File Manager/components/FileViewer.tsx | 108 +++++++++++++----- 5 files changed, 137 insertions(+), 31 deletions(-) diff --git a/package-lock.json b/package-lock.json index 013c6bfa..30796236 100644 --- a/package-lock.json +++ b/package-lock.json @@ -75,6 +75,7 @@ "react-hook-form": "^7.60.0", "react-i18next": "^15.7.3", "react-icons": "^5.5.0", + "react-photo-view": "^1.2.7", "react-resizable-panels": "^3.0.3", "react-simple-keyboard": "^3.8.120", "react-xtermjs": "^1.0.10", @@ -13762,6 +13763,16 @@ "react": "*" } }, + "node_modules/react-photo-view": { + "version": "1.2.7", + "resolved": "https://registry.npmjs.org/react-photo-view/-/react-photo-view-1.2.7.tgz", + "integrity": "sha512-MfOWVPxuibncRLaycZUNxqYU8D9IA+rbGDDaq6GM8RIoGJal592hEJoRAyRSI7ZxyyJNJTLMUWWL3UIXHJJOpw==", + "license": "Apache-2.0", + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, "node_modules/react-remove-scroll": { "version": "2.7.1", "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.1.tgz", diff --git a/package.json b/package.json index cda74fcf..d058b9da 100644 --- a/package.json +++ b/package.json @@ -93,6 +93,7 @@ "react-hook-form": "^7.60.0", "react-i18next": "^15.7.3", "react-icons": "^5.5.0", + "react-photo-view": "^1.2.7", "react-resizable-panels": "^3.0.3", "react-simple-keyboard": "^3.8.120", "react-xtermjs": "^1.0.10", diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index 6f5383ce..74bd114b 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -857,6 +857,30 @@ "replace": "Replace", "replaceAll": "Replace All", "downloadInstead": "Download Instead", + "keyboardShortcuts": "Keyboard Shortcuts", + "searchAndReplace": "Search & Replace", + "editing": "Editing", + "navigation": "Navigation", + "code": "Code", + "search": "Search", + "findNext": "Find Next", + "findPrevious": "Find Previous", + "save": "Save", + "selectAll": "Select All", + "undo": "Undo", + "redo": "Redo", + "goToLine": "Go to Line", + "moveLineUp": "Move Line Up", + "moveLineDown": "Move Line Down", + "toggleComment": "Toggle Comment", + "indent": "Indent", + "outdent": "Outdent", + "autoComplete": "Auto Complete", + "imageLoadError": "Failed to load image", + "zoomIn": "Zoom In", + "zoomOut": "Zoom Out", + "rotate": "Rotate", + "originalSize": "Original Size", "startTyping": "Start typing...", "unknownSize": "Unknown size", "fileIsEmpty": "File is empty", diff --git a/src/locales/zh/translation.json b/src/locales/zh/translation.json index 59ce438d..a2050d05 100644 --- a/src/locales/zh/translation.json +++ b/src/locales/zh/translation.json @@ -880,6 +880,30 @@ "replace": "替换", "replaceAll": "全部替换", "downloadInstead": "下载文件", + "keyboardShortcuts": "键盘快捷键", + "searchAndReplace": "搜索和替换", + "editing": "编辑", + "navigation": "导航", + "code": "代码", + "search": "搜索", + "findNext": "查找下一个", + "findPrevious": "查找上一个", + "save": "保存", + "selectAll": "全选", + "undo": "撤销", + "redo": "重做", + "goToLine": "跳转到行", + "moveLineUp": "向上移动行", + "moveLineDown": "向下移动行", + "toggleComment": "切换注释", + "indent": "增加缩进", + "outdent": "减少缩进", + "autoComplete": "自动补全", + "imageLoadError": "图片加载失败", + "zoomIn": "放大", + "zoomOut": "缩小", + "rotate": "旋转", + "originalSize": "原始大小", "startTyping": "开始输入...", "fileSavedSuccessfully": "文件保存成功", "autoSaveFailed": "自动保存失败", diff --git a/src/ui/Desktop/Apps/File Manager/components/FileViewer.tsx b/src/ui/Desktop/Apps/File Manager/components/FileViewer.tsx index c81407f6..d85f7062 100644 --- a/src/ui/Desktop/Apps/File Manager/components/FileViewer.tsx +++ b/src/ui/Desktop/Apps/File Manager/components/FileViewer.tsx @@ -50,6 +50,8 @@ import { EditorView, keymap } from "@codemirror/view"; import { searchKeymap, search } from "@codemirror/search"; import { defaultKeymap, history, historyKeymap, toggleComment } from "@codemirror/commands"; import { autocompletion, completionKeymap } from "@codemirror/autocomplete"; +import { PhotoProvider, PhotoView } from "react-photo-view"; +import "react-photo-view/dist/react-photo-view.css"; interface FileItem { name: string; @@ -286,6 +288,8 @@ export function FileViewer({ const [forceShowAsText, setForceShowAsText] = useState(false); const [showKeyboardShortcuts, setShowKeyboardShortcuts] = useState(false); const [editorFocused, setEditorFocused] = useState(false); + const [imageLoadError, setImageLoadError] = useState(false); + const [imageLoading, setImageLoading] = useState(true); const fileTypeInfo = getFileType(file.name); @@ -469,7 +473,7 @@ export function FileViewer({ {showKeyboardShortcuts && isEditable && (
-

Keyboard Shortcuts

+

{t("fileManager.keyboardShortcuts")}

+ )} +
+ ) : ( + + + {file.name} { + setImageLoading(false); + setImageLoadError(false); + }} + onError={() => { + setImageLoading(false); + setImageLoadError(true); + }} + /> + + + )} + + {/* Loading state */} + {imageLoading && !imageLoadError && ( +
+
+
+

Loading image...

+
+
+ )}
)}