diff --git a/apps/web/src/routes/Monitor/index.tsx b/apps/web/src/routes/Monitor/index.tsx index 3b755215c..7cbb30478 100644 --- a/apps/web/src/routes/Monitor/index.tsx +++ b/apps/web/src/routes/Monitor/index.tsx @@ -1,7 +1,7 @@ import React, { useState, useMemo, useEffect, useCallback, useRef } from 'react' import { useNavigate } from 'react-router-dom' import { useTranslation } from 'react-i18next' -import { Camera, Terminal, Maximize2, Clock, FileText, Gauge, Columns3, PictureInPicture, ArrowLeftRight, RotateCcw, RotateCw, Square, ChevronDown, GripVertical, BarChart3, Wrench, ActivitySquare, ClipboardList, Move, SlidersHorizontal } from 'lucide-react' +import { Camera, Terminal, Maximize2, Clock, FileText, Gauge, Columns3, PictureInPicture, ArrowLeftRight, RotateCcw, RotateCw, Square, ChevronDown, GripVertical, BarChart3, Wrench, ActivitySquare, ClipboardList, Move, Eye, SlidersHorizontal } from 'lucide-react' import Hls from 'hls.js' import { Button } from '@/components/ui/button' import { Progress } from '@/components/ui/progress' @@ -250,7 +250,21 @@ interface VisualizerCameraViewProps { function VisualizerCameraView({ machinePosition, processedLines }: VisualizerCameraViewProps) { const { t } = useTranslation() - const [viewMode, setViewMode] = useState('side-by-side') + const [viewMode, setViewMode] = useState(() => { + const saved = localStorage.getItem('monitor.viewMode') + if (saved && ['side-by-side', 'visual-only', 'camera-only', 'pip-visual', 'pip-camera'].includes(saved)) { + return saved as ViewMode + } + return 'side-by-side' + }) + const [viewMenuOpen, setViewMenuOpen] = useState(false) + const setViewModePersist = useCallback((mode: ViewMode | ((prev: ViewMode) => ViewMode)) => { + setViewMode(prev => { + const next = typeof mode === 'function' ? mode(prev) : mode + localStorage.setItem('monitor.viewMode', next) + return next + }) + }, []) const { data: settings } = useGetSettingsQuery() const dispatch = useAppDispatch() const vizMode = settings?.machine?.visualizerMode ?? 'machine' @@ -432,9 +446,9 @@ function VisualizerCameraView({ machinePosition, processedLines }: VisualizerCam const handleSwapPiP = () => { if (viewMode === 'pip-visual') { - setViewMode('pip-camera') + setViewModePersist('pip-camera') } else if (viewMode === 'pip-camera') { - setViewMode('pip-visual') + setViewModePersist('pip-visual') } } @@ -503,55 +517,67 @@ function VisualizerCameraView({ machinePosition, processedLines }: VisualizerCam )} - {/* View mode controls */} -
- - + {/* View mode controls - eye icon toggle with popup */} +
-
- - {(viewMode === 'pip-visual' || viewMode === 'pip-camera') && ( - + {viewMenuOpen && ( +
+ + + +
+ + {(viewMode === 'pip-visual' || viewMode === 'pip-camera') && ( + + )} +
)}