Fixed tables

src/components/StoreWatchPage.js

@@ -10,6 +10,7 @@ import {
 import { haversineDistanceKm } from '../utils/distance';
 
 const REGION_STORAGE_KEY = 'storeWatchRegionSelection';
+const WATCH_TABLE_STATE_KEY = 'storeWatchTableState';
 
 const columnHelper = createColumnHelper();
 
@@ -48,6 +49,47 @@ const ColumnSelectFilter = ({ column, options }) => {
   );
 };
 
+function readWatchTableState() {
+  if (typeof window === 'undefined') {
+    return {
+      sorting: [],
+      columnFilters: [{ id: 'isOpen', value: 'true' }]
+    };
+  }
+  try {
+    const raw = window.localStorage.getItem(WATCH_TABLE_STATE_KEY);
+    if (!raw) {
+      return {
+        sorting: [],
+        columnFilters: [{ id: 'isOpen', value: 'true' }]
+      };
+    }
+    const parsed = JSON.parse(raw);
+    return {
+      sorting: Array.isArray(parsed.sorting) ? parsed.sorting : [],
+      columnFilters: Array.isArray(parsed.columnFilters) && parsed.columnFilters.length > 0
+        ? parsed.columnFilters
+        : [{ id: 'isOpen', value: 'true' }]
+    };
+  } catch {
+    return {
+      sorting: [],
+      columnFilters: [{ id: 'isOpen', value: 'true' }]
+    };
+  }
+}
+
+function persistWatchTableState(state) {
+  if (typeof window === 'undefined') {
+    return;
+  }
+  try {
+    window.localStorage.setItem(WATCH_TABLE_STATE_KEY, JSON.stringify(state));
+  } catch {
+    /* ignore */
+  }
+}
+
 const StoreWatchPage = ({ authorizedFetch, knownStores = [], userLocation }) => {
   const [regions, setRegions] = useState([]);
   const [selectedRegionId, setSelectedRegionId] = useState(() => {
@@ -69,8 +111,9 @@ const StoreWatchPage = ({ authorizedFetch, knownStores = [], userLocation }) =>
   const [error, setError] = useState('');
   const [dirty, setDirty] = useState(false);
   const [saving, setSaving] = useState(false);
-  const [sorting, setSorting] = useState([]);
+  const initialTableState = useMemo(() => readWatchTableState(), []);
-  const [columnFilters, setColumnFilters] = useState([{ id: 'isOpen', value: 'true' }]);
+  const [sorting, setSorting] = useState(initialTableState.sorting);
+  const [columnFilters, setColumnFilters] = useState(initialTableState.columnFilters);
 
   useEffect(() => {
     if (typeof window === 'undefined') {
@@ -83,6 +126,10 @@ const StoreWatchPage = ({ authorizedFetch, knownStores = [], userLocation }) =>
     }
   }, [selectedRegionId]);
 
+  useEffect(() => {
+    persistWatchTableState({ sorting, columnFilters });
+  }, [sorting, columnFilters]);
+
   const watchedIds = useMemo(
     () => new Set(watchList.map((entry) => String(entry.storeId))),
     [watchList]
@@ -282,11 +329,10 @@ const StoreWatchPage = ({ authorizedFetch, knownStores = [], userLocation }) =>
         ),
         cell: ({ getValue }) => {
           const value = getValue();
-          return (
+          const label = value
-            <span className="text-sm text-gray-600">
+            ? new Date(value).toLocaleDateString('de-DE', { year: 'numeric', month: '2-digit', day: '2-digit' })
-              {value ? new Date(value).toLocaleDateString('de-DE') : 'unbekannt'}
+            : '–';
-            </span>
+          return <div className="text-center font-mono text-xs text-gray-600">{label}</div>;
-          );
         },
         sortingFn: (rowA, rowB, columnId) => {
           const a = rowA.getValue(columnId);