!224 merge zz/fix into main

fix(web-ui): anchor native title tooltip at pointer and stop following movement

Created-by: dyxdsz
Commit-by: dyxdsz
Merged-by: SWangHash
Description: ## Summary

<!-- Briefly describe what changed. -->

Fixes #

## Type and Areas

Type:

<!-- Feature / bug fix / regression fix / refactor / UI/UX / docs / test / CI / dependency / other. -->

Areas:

<!-- Rust core, desktop/Tauri, web UI, mobile web, server/relay, AI adapters, installer, docs, etc. -->

## Motivation / Impact

<!-- What problem does this solve, and what changes for users or developers? Write "No direct user-facing change" if applicable. -->

## Verification

<!-- List exact commands, manual checks, and outcomes. For docs-only or template-only changes, use the lightest relevant checks or explain why runtime checks were skipped. -->

## Reviewer Notes

<!-- Optional: screenshots, architecture notes, compatibility risks, migration notes, or rollback guidance. -->

## Checklist

- [ ] This PR is focused and does not include secrets, temporary prompts, generated scratch files, or unrelated artifacts.
- [ ] Relevant verification is recorded above, or skipped checks are explained.
- [ ] User-facing strings, docs, and locales are updated where applicable.


See merge request: OpenHarmonyPCDeveloper/BitFun!224

Author: SWangHash

scripts/theme-color-governance-baseline.json

@@ -252,7 +252,7 @@
       "max": 0
     },
     "colorDomainScopes.themePreset.occurrences": {
-      "max": 159
+      "max": 158
     },
     "colorDomainScopes.themePreset.uniqueColors": {
       "max": 112

src/apps/ohos/entry/src/main/ets/entryability/EntryAbility.ets

@@ -386,7 +386,7 @@ export default class EntryAbility extends RustAbility {
           req.visible,
         );
         if (req.visible) {
-          mainWin.setWindowDecorHeight(44);
+          mainWin.setWindowDecorHeight(38);
           mainWin.setWindowTitleMoveEnabled(false);
           mainWin.setWindowDecorVisible(false);
         }
@@ -496,6 +496,19 @@ export default class EntryAbility extends RustAbility {
       return '';
     });
     RustModule.registerArktsFunction('set_min_size_ohos', async (err: Error, arg: string): Promise<string> => {
+      const req: SetMinSizeArg = JSON.parse(arg);
+      try {
+        const mainWin = windowStage.getMainWindowSync();
+        await mainWin.setWindowLimits({
+          minWidth: req.width,
+          minHeight: req.height,
+          maxWidth: -1,
+          maxHeight: -1,
+        });
+      } catch (e) {
+        const be = e as BusinessError;
+        hilog.warn(DOMAIN, TAG, `setWindowLimits failed: ${be.message}`);
+      }
       return '';
     });
     RustModule.registerArktsFunction('set_focus_ohos', async (err: Error, arg: string): Promise<string> => {
@@ -629,6 +642,27 @@ export default class EntryAbility extends RustAbility {
         data.setWindowDecorHeight(38);
         data.setWindowTitleMoveEnabled(false);
         data.setWindowDecorVisible(false);
+        // setWindowLimits expects px (physical pixels). Convert the 800x600
+        // logical minimum, matching the desktop MAIN_WINDOW_MIN_WIDTH/HEIGHT,
+        // using the display density so non-1x scaling keeps the same logical
+        // minimum as Windows/Linux/macOS.
+        let scale: number = 1;
+        try {
+          scale = display.getDefaultDisplaySync().densityPixels > 0
+            ? display.getDefaultDisplaySync().densityPixels : 1;
+        } catch (e) {
+          hilog.warn(DOMAIN, TAG, 'read densityPixels on startup failed: ' + JSON.stringify(e));
+        }
+        const minWidth: number = Math.round(800 * scale);
+        const minHeight: number = Math.round(600 * scale);
+        data.setWindowLimits({
+          minWidth: minWidth,
+          minHeight: minHeight,
+          maxWidth: -1,
+          maxHeight: -1,
+        }).catch((e: BusinessError) => {
+          hilog.warn(DOMAIN, TAG, 'setWindowLimits on startup failed: ' + e.message);
+        });
       })
     }, 40)
     RustModule.registerArktsFunction('reveal_in_explorer', async (err: Error, arg: string): Promise<string> => {

src/web-ui/src/app/components/panels/FilesPanel.tsx

@@ -20,7 +20,7 @@ import type { FileSystemNode } from '@/tools/file-system/types';
 import { globalEventBus } from '@/infrastructure/event-bus';
 import { useNotification } from '@/shared/notification-system';
 import { InputDialog, CubeLoading } from '@/component-library';
-import { openFileInBestTarget } from '@/shared/utils/tabUtils';
+import { openFileInBestTarget, isFileAlreadyOpenInBestTarget } from '@/shared/utils/tabUtils';
 import { getMotionAwareScrollBehavior } from '@/shared/utils/motionPreference';
 import { PanelHeader } from './base';
 import { createLogger } from '@/shared/utils/logger';
@@ -363,6 +363,12 @@ const FilesPanel: React.FC<FilesPanelProps> = ({
   // ===== File Operation Handlers =====
 
   const shouldOpenLargeFile = useCallback(async (filePath: string, nodeSize?: number): Promise<boolean> => {
+    // Opening an already-open file only switches to its existing tab without
+    // reloading content, so the large-file warning is unnecessary.
+    if (isFileAlreadyOpenInBestTarget(filePath)) {
+      return true;
+    }
+
     let fileSize: number | undefined = nodeSize;
 
     if (fileSize === undefined || fileSize === null) {
@@ -1052,7 +1058,12 @@ const FilesPanel: React.FC<FilesPanelProps> = ({
     } else {
       setInternalViewMode(next);
     }
-  }, [viewMode, onViewModeChange]);
+    // When switching back to the tree, the search input unmounts and focus
+    // would land on <body>, leaving the filetree shortcut scope. Restore it.
+    if (next === 'tree') {
+      focusFileTree();
+    }
+  }, [viewMode, onViewModeChange, focusFileTree]);
 
   const handleExplorerToolbarNewFile = useCallback(() => {
     const parentPath = getNewItemParentPath(workspacePath, selectedFile, fileTree);

src/web-ui/src/app/components/panels/base/FlexiblePanel.tsx

@@ -380,14 +380,16 @@ const FlexiblePanel: React.FC<ExtendedFlexiblePanelProps> = memo(({
 
       case 'image-viewer': {
         const imageViewerData = content.data || {};
-        
+
         return (
           <div className="bitfun-flexible-panel__image-viewer-container" data-bf-component="flexible-panel" data-bf-part="image">
             {renderLazyEditor(
               <ImageViewer
                 filePath={imageViewerData.filePath || ''}
                 fileName={content.title}
                 workspacePath={workspacePath}
+                isActiveTab={isActive}
+                onFileMissingFromDiskChange={onFileMissingFromDiskChange}
                 className="bitfun-flexible-panel__image-viewer"
               />
             )}

src/web-ui/src/app/hooks/useApp.ts

@@ -90,8 +90,12 @@ export const useApp = (): UseAppReturn => {
   }, []);
 
   const updateRightPanelWidth = useCallback((width: number) => {
-    // Clamp width: 200px min, 1200px max
-    const MIN_WIDTH = 200;
+    // SessionScene already validates the width against the live container size
+    // (dynamic max, compact floor when there is room). A hard floor here would
+    // override that validated width on narrow windows and reintroduce the
+    // horizontal overflow this clamp once guarded against, so only keep the
+    // sanity bounds.
+    const MIN_WIDTH = 0;
     const MAX_WIDTH = 1200;
     const clampedWidth = Math.min(MAX_WIDTH, Math.max(MIN_WIDTH, width));
 

src/web-ui/src/app/scenes/file-viewer/FileViewerNav.tsx

@@ -52,9 +52,14 @@ const FileViewerNav: React.FC = () => {
         <span className="bitfun-file-viewer-nav__actions" data-bf-component="file-viewer-nav" data-bf-part="actions">
             {viewMode === 'tree' && explorerToolbar && (
               <>
+                {/* Keep focus on the file tree when clicking toolbar actions:
+                    these buttons live outside the filetree shortcut scope, so
+                    letting mousedown move focus would disable filetree-scoped
+                    shortcuts (F2 / Delete / Ctrl+N / F5 / ...) after the click. */}
                 <IconButton
                   size="xs"
                   variant="ghost"
+                  onMouseDown={(e) => e.preventDefault()}
                   onClick={explorerToolbar.onNewFile}
                   tooltip={shortcutTooltip(tTools('fileTree.newFile'), 'filetree.newFile')}
                   tooltipPlacement="bottom"
@@ -64,6 +69,7 @@ const FileViewerNav: React.FC = () => {
                 <IconButton
                   size="xs"
                   variant="ghost"
+                  onMouseDown={(e) => e.preventDefault()}
                   onClick={explorerToolbar.onNewFolder}
                   tooltip={shortcutTooltip(tTools('fileTree.newFolder'), 'filetree.newFolder')}
                   tooltipPlacement="bottom"
@@ -73,6 +79,7 @@ const FileViewerNav: React.FC = () => {
                 <IconButton
                   size="xs"
                   variant="ghost"
+                  onMouseDown={(e) => e.preventDefault()}
                   onClick={explorerToolbar.onRefresh}
                   tooltip={shortcutTooltip(tTools('fileTree.refresh'), 'filetree.refresh')}
                   tooltipPlacement="bottom"
@@ -83,6 +90,7 @@ const FileViewerNav: React.FC = () => {
             )}
             <IconButton
               size="xs"
+              onMouseDown={(e) => e.preventDefault()}
               onClick={handleToggleViewMode}
               tooltip={viewMode === 'tree' ? tFiles('actions.switchToSearch') : tFiles('actions.switchToTree')}
               tooltipPlacement="bottom"

src/web-ui/src/app/scenes/session/SessionScene.scss

@@ -65,7 +65,11 @@
 
 .bitfun-session-scene__chat-pane {
   flex: 1 1 auto;
-  min-width: 400px;
+  // 400px is the comfortable minimum, but it is a hard floor no more: on a
+  // narrow window the sum of the chat floor, the resizer and the aux pane
+  // exceeds the row, and the excess was clipped by the row's overflow: hidden.
+  // Capping the floor at the row width lets the pane shrink instead.
+  min-width: min(400px, 100%);
   height: 100%;
   overflow: hidden;
   position: relative;

src/web-ui/src/app/scenes/session/SessionScene.tsx

@@ -161,7 +161,10 @@ const SessionScene: React.FC<SessionSceneProps> = ({
     if (containerWidth <= 0) return newWidth;
     // NavPanel (240px) is outside SessionScene — only account for resizer + min chat width
     const reserved = PANEL_COMMON_CONFIG.RESIZER_WIDTH + PANEL_COMMON_CONFIG.MIN_CENTER_WIDTH;
-    const dynamicMax = containerWidth - reserved;
+    // Below the reserved minimum the dynamic max goes negative; a negative
+    // inline width is dropped by the browser and the pane falls back to its
+    // content width, which widens the overflow instead of shrinking it.
+    const dynamicMax = Math.max(0, containerWidth - reserved);
     const maxWidth = Math.min(RIGHT_PANEL_CONFIG.MAX_WIDTH, dynamicMax);
     return Math.min(maxWidth, Math.max(RIGHT_PANEL_CONFIG.COMPACT_WIDTH, newWidth));
   }, []);

src/web-ui/src/app/scenes/settings/SettingsNav.scss

@@ -39,11 +39,6 @@
     padding: 0 $size-gap-3 $size-gap-2;
   }
 
-  [data-bf-appearance-switching='true'] &__search-field .search__wrapper,
-  [data-bf-appearance-switching='true'] &__search-field .search__wrapper * {
-    transition: none !important;
-  }
-
   &__search-field.search {
     width: 100%;
 

src/web-ui/src/component-library/components/Search/Search.scss

@@ -281,6 +281,21 @@
 }
 
 
+/**
+ * Appearance switching suppresses transitions via `transition: none !important`
+ * rules on element trees (`... *`), but `*` cannot match pseudo-elements. The
+ * placeholder transition would otherwise keep animating color while the rest
+ * of the UI switches instantly.
+ */
+[data-bf-appearance-switching='true'] .search__wrapper,
+[data-bf-appearance-switching='true'] .search__wrapper *,
+[data-bf-appearance-switching='true'] .search__wrapper ::placeholder,
+[data-bf-appearance-switching='true'] .search__prefix,
+[data-bf-appearance-switching='true'] .search__prefix *,
+[data-bf-appearance-switching='true'] .search__icon {
+  transition: none !important;
+}
+
 @keyframes search-spin {
   to {
     transform: rotate(360deg);