diff --git a/README.md b/README.md index 76940b20171..791453c64be 100644 --- a/README.md +++ b/README.md @@ -40,6 +40,7 @@ Works with any CLI agent. Built for local worktree-based development. | **大規模ファイル diff 高速化** | 2000行超のファイルで CodeMirror 6 ベースの仮想化 diff ビューアに自動切替。ビューポート分のDOMのみ描画し、15000行でもスムーズ表示。既存テーマ・シンタックスハイライト再利用、未変更領域の自動折りたたみ | [#5](https://github.com/MocA-Love/superset/pull/5) | 2026-03-28 | | **ports.json ポートの常時表示** | ports.json に定義されたポートをプロセス検出の有無にかかわらず常にサイドバーに表示。Docker 等で検知できないポートもラベル付きで一覧に出る。検出済みポートは従来通りアクティブ表示、未検出は グレー表示で区別 | [#7](https://github.com/MocA-Love/superset/pull/7) | 2026-03-28 | | **Ports ワークスペース名の改善** | Ports セクションのワークスペース名をワークツリーのディレクトリ名ベースに変更。同名ワークスペースが複数ある場合でもどのワークツリーか一目で区別可能 | [#8](https://github.com/MocA-Love/superset/pull/8) | 2026-03-28 | +| **ブラウザタブのズーム機能** | ブラウザタブのツールバーに拡大(+)・縮小(-)・リセットボタンを追加。webview の zoom API を直接操作し、50%〜200% の範囲でズーム可能。パーセント表示クリックで 100% にリセット | [#9](https://github.com/MocA-Love/superset/pull/9) | 2026-03-29 | ## Fork のビルド方法 (macOS) diff --git a/apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/BrowserPane/BrowserPane.tsx b/apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/BrowserPane/BrowserPane.tsx index 0225544e8bb..e3774ba78cd 100644 --- a/apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/BrowserPane/BrowserPane.tsx +++ b/apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/BrowserPane/BrowserPane.tsx @@ -1,6 +1,7 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "@superset/ui/tooltip"; import { GlobeIcon } from "lucide-react"; -import { useCallback } from "react"; +import { useCallback, useState } from "react"; +import { LuMinus, LuPlus } from "react-icons/lu"; import { TbDeviceDesktop } from "react-icons/tb"; import type { MosaicBranch } from "react-mosaic-component"; import { electronTrpc } from "renderer/lib/electron-trpc"; @@ -53,11 +54,38 @@ export function BrowserPane({ navigateTo, canGoBack, canGoForward, + setGuestZoom, } = usePersistentWebview({ paneId, initialUrl: currentUrl, }); + // -- Zoom state (CSS zoom injected into guest page) --------------------- + + const ZOOM_STEP = 10; + const ZOOM_MIN = 50; + const ZOOM_MAX = 200; + + const [zoomPercent, setZoomPercent] = useState(100); + + const applyZoom = useCallback( + (percent: number) => { + setZoomPercent(percent); + setGuestZoom(percent / 100); + }, + [setGuestZoom], + ); + + const zoomIn = useCallback( + () => applyZoom(Math.min(ZOOM_MAX, zoomPercent + ZOOM_STEP)), + [applyZoom, zoomPercent], + ); + const zoomOut = useCallback( + () => applyZoom(Math.max(ZOOM_MIN, zoomPercent - ZOOM_STEP)), + [applyZoom, zoomPercent], + ); + const resetZoom = useCallback(() => applyZoom(100), [applyZoom]); + const handleOpenDevTools = useCallback(() => { openDevTools({ paneId }); }, [openDevTools, paneId]); @@ -92,6 +120,50 @@ export function BrowserPane({ closeHotkeyId="CLOSE_TERMINAL" leadingActions={ <> +