fix: persist channel status filter across page navigation (#5863)

web/default/src/features/channels/components/channels-table.tsx

@@ -18,7 +18,12 @@ For commercial licensing, please contact support@quantumnous.com
 */
 import { useQuery } from '@tanstack/react-query'
 import { getRouteApi } from '@tanstack/react-router'
-import type { OnChangeFn, SortingState, Row } from '@tanstack/react-table'
+import type {
+  ColumnFiltersState,
+  OnChangeFn,
+  SortingState,
+  Row,
+} from '@tanstack/react-table'
 import { Eye, EyeOff } from 'lucide-react'
 import { useState, useMemo, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -63,6 +68,7 @@ import { DataTableBulkActions } from './data-table-bulk-actions'
 const route = getRouteApi('/_authenticated/channels/')
 const CHANNELS_COLUMN_VISIBILITY_STORAGE_KEY = 'channels:column-visibility'
 const CHANNELS_VIEW_MODE_STORAGE_KEY = 'channels:view-mode'
+const CHANNELS_STATUS_FILTER_STORAGE_KEY = 'channel-status-filter'
 
 const CHANNEL_SORTABLE_COLUMNS = new Set<ChannelSortBy>([
   'id',
@@ -111,13 +117,40 @@ export function ChannelsTable() {
     },
     globalFilter: { enabled: true, key: 'filter' },
     columnFilters: [
-      { columnId: 'status', searchKey: 'status', type: 'array' },
+      {
+        columnId: 'status',
+        searchKey: 'status',
+        type: 'array',
+        deserialize: (value) => {
+          if (value !== undefined) return value
+          const stored = localStorage.getItem(
+            CHANNELS_STATUS_FILTER_STORAGE_KEY
+          )
+          return stored === 'enabled' || stored === 'disabled' ? [stored] : []
+        },
+      },
       { columnId: 'type', searchKey: 'type', type: 'array' },
       { columnId: 'group', searchKey: 'group', type: 'array' },
       { columnId: 'model', searchKey: 'model', type: 'string' },
     ],
   })
 
+  const handleColumnFiltersChange: OnChangeFn<ColumnFiltersState> = (
+    updater
+  ) => {
+    onColumnFiltersChange((previous) => {
+      const next = typeof updater === 'function' ? updater(previous) : updater
+      const status = next.find((f) => f.id === 'status')?.value as
+        | string[]
+        | undefined
+      localStorage.setItem(
+        CHANNELS_STATUS_FILTER_STORAGE_KEY,
+        status?.[0] ?? 'all'
+      )
+      return next
+    })
+  }
+
   // Extract filters from column filters
   const statusFilter =
     (columnFilters.find((f) => f.id === 'status')?.value as string[]) || []
@@ -290,7 +323,7 @@ export function ChannelsTable() {
       ? (row: Row<Channel>) => !isTagAggregateRow(row.original)
       : false,
     onSortingChange: handleSortingChange,
-    onColumnFiltersChange,
+    onColumnFiltersChange: handleColumnFiltersChange,
     onPaginationChange,
     onGlobalFilterChange,
     getSubRows: (row: Channel & { children?: Channel[] }) => row.children,