mobile download

frontend/src/components/TrendSearchPage.tsx

@@ -33,16 +33,6 @@ import { autoAddTrendSearchTargets } from '../utils/trendSearchAutoAddTargets';
 import '../styles/trendSearchDashboard.css';
 import '../styles/virtualTradingDashboard.css';
 
-const DISPLAY_MODE_KEY = 'tsd-display-mode';
-
-function loadDisplayMode(): TrendSearchDisplayMode {
-  try {
-    const v = localStorage.getItem(DISPLAY_MODE_KEY);
-    if (v === 'chart' || v === 'summary') return v;
-  } catch { /* ignore */ }
-  return 'summary';
-}
-
 interface Props {
   theme?: Theme;
   chartRealtimeSource?: ChartRealtimeSource;
@@ -68,7 +58,9 @@ const TrendSearchPage: React.FC<Props> = ({
   const [results, setResults] = useState<TrendSearchResultDto[]>([]);
   const [selectedMarket, setSelectedMarket] = useState<string | null>(null);
   const [searching, setSearching] = useState(false);
-  const [displayMode, setDisplayMode] = useState<TrendSearchDisplayMode>(() => loadDisplayMode());
+  const [displayMode, setDisplayMode] = useState<TrendSearchDisplayMode>(
+    () => tsSettings.displayMode ?? 'summary',
+  );
   const [flashMarkets, setFlashMarkets] = useState<Set<string>>(new Set());
   const [lastUpdatedAt, setLastUpdatedAt] = useState<number>(Date.now());
   const filtersRef = useRef(filters);
@@ -84,6 +76,7 @@ const TrendSearchPage: React.FC<Props> = ({
     if (lastSyncedSettingsSigRef.current === tsSettingsSig) return;
     lastSyncedSettingsSigRef.current = tsSettingsSig;
     setFilters(prev => mergeFiltersFromTrendSearchSettings(prev, tsSettings));
+    if (tsSettings.displayMode) setDisplayMode(tsSettings.displayMode);
   }, [appSettingsLoaded, tsSettingsSig, tsSettings]);
 
   useEffect(() => {
@@ -168,8 +161,10 @@ const TrendSearchPage: React.FC<Props> = ({
   }, [tsSettings.autoRefreshEnabled, tsSettings.autoRefreshSeconds, loadFromDb]);
 
   useEffect(() => {
-    try { localStorage.setItem(DISPLAY_MODE_KEY, displayMode); } catch { /* ignore */ }
-  }, [displayMode]);
+    if (!appSettingsLoaded) return;
+    if (tsSettings.displayMode === displayMode) return;
+    persistTrendSettings({ displayMode });
+  }, [displayMode, appSettingsLoaded, tsSettings.displayMode, persistTrendSettings]);
 
   const handleSelect = useCallback(async (row: TrendSearchResultDto) => {
     setSelectedMarket(row.market);