From 6a8a94101a8b0f0861ca696984ff0391a48e1fd9 Mon Sep 17 00:00:00 2001
From: Jeffrey C <990135+JeffreyBytes@users.noreply.github.com>
Date: Mon, 12 Jan 2026 10:59:52 -0600
Subject: [PATCH 1/9] Add filter to show unassociated streams in Streams table

Adds a filter button with 'Only Unassociated' toggle option to the Streams table, allowing users to quickly identify streams from providers that are not associated with any channel. The filter button follows the existing UI pattern from ChannelTableHeader, positioned on the right side of the toolbar. Leverages existing backend support for the unassigned query parameter.

Resolves #667
---
 .../src/components/tables/StreamsTable.jsx    | 35 ++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/tables/StreamsTable.jsx b/frontend/src/components/tables/StreamsTable.jsx
index 21b13baf..8c931a65 100644
--- a/frontend/src/components/tables/StreamsTable.jsx
+++ b/frontend/src/components/tables/StreamsTable.jsx
@@ -20,6 +20,9 @@ import {
   ArrowUpNarrowWide,
   ArrowDownWideNarrow,
   Search,
+  Filter,
+  Square,
+  SquareCheck,
 } from 'lucide-react';
 import {
   TextInput,
@@ -48,7 +51,6 @@ import {
   Modal,
   NumberInput,
   Radio,
-  Checkbox,
 } from '@mantine/core';
 import { useNavigate } from 'react-router-dom';
 import useSettingsStore from '../../store/settings';
@@ -232,6 +234,7 @@ const StreamsTable = ({ onReady }) => {
     name: '',
     channel_group: '',
     m3u_account: '',
+    unassigned: '',
   });
   const [columnSizing, setColumnSizing] = useLocalStorage(
     'streams-table-column-sizing',
@@ -382,6 +385,13 @@ const StreamsTable = ({ onReady }) => {
     }));
   };
 
+  const toggleUnassignedOnly = () => {
+    setFilters((prev) => ({
+      ...prev,
+      unassigned: prev.unassigned === '1' ? '' : '1',
+    }));
+  };
+
   const fetchData = useCallback(async () => {
     setIsLoading(true);
 
@@ -1057,6 +1067,29 @@ const StreamsTable = ({ onReady }) => {
           </Flex>
 
           <Flex gap={6} wrap="nowrap" style={{ flexShrink: 0 }}>
+            <Menu shadow="md" width={200}>
+              <Menu.Target>
+                <Button size="xs" variant="default">
+                  <Filter size={18} />
+                </Button>
+              </Menu.Target>
+
+              <Menu.Dropdown>
+                <Menu.Item
+                  onClick={toggleUnassignedOnly}
+                  leftSection={
+                    filters.unassigned === '1' ? (
+                      <SquareCheck size={18} />
+                    ) : (
+                      <Square size={18} />
+                    )
+                  }
+                >
+                  <Text size="xs">Only Unassociated</Text>
+                </Menu.Item>
+              </Menu.Dropdown>
+            </Menu>
+
             <Button
               leftSection={<SquarePlus size={18} />}
               variant="light"

From cbde9297ea47b64709007b376bf534a57ff45669 Mon Sep 17 00:00:00 2001
From: Jeffrey C <990135+JeffreyBytes@users.noreply.github.com>
Date: Mon, 12 Jan 2026 12:03:14 -0600
Subject: [PATCH 2/9] Fix StreamsTable Group column header overflow and align
 with ChannelsTable

The Group column header was overflowing vertically when multiple groups were selected in the MultiSelect filter. Initial attempts to preserve sorting functionality while fixing the overflow were unsuccessful due to how Mantine's MultiSelect rightSection positioning works.

Final solution removes the sorting icon from the Group column to match ChannelsTable's implementation, where channel_group also uses a MultiSelect filter without sorting. This allows the header to properly expand vertically to accommodate selected filter values without overflow.

Resolves #613
---
 .../src/components/tables/StreamsTable.jsx    | 36 +++++++------------
 1 file changed, 12 insertions(+), 24 deletions(-)

diff --git a/frontend/src/components/tables/StreamsTable.jsx b/frontend/src/components/tables/StreamsTable.jsx
index 8c931a65..25b7e330 100644
--- a/frontend/src/components/tables/StreamsTable.jsx
+++ b/frontend/src/components/tables/StreamsTable.jsx
@@ -856,30 +856,18 @@ const StreamsTable = ({ onReady }) => {
 
       case 'group':
         return (
-          <Flex align="center" style={{ width: '100%', flex: 1 }}>
-            <MultiSelect
-              placeholder="Group"
-              searchable
-              size="xs"
-              nothingFoundMessage="No options"
-              onClick={handleSelectClick}
-              onChange={handleGroupChange}
-              data={groupOptions}
-              variant="unstyled"
-              className="table-input-header custom-multiselect"
-              clearable
-              style={{ flex: 1, minWidth: 0 }}
-              rightSectionPointerEvents="auto"
-              rightSection={React.createElement(sortingIcon, {
-                onClick: (e) => {
-                  e.stopPropagation();
-                  onSortingChange('group');
-                },
-                size: 14,
-                style: { cursor: 'pointer' },
-              })}
-            />
-          </Flex>
+          <MultiSelect
+            placeholder="Group"
+            className="table-input-header"
+            variant="unstyled"
+            data={groupOptions}
+            size="xs"
+            searchable
+            clearable
+            onClick={handleSelectClick}
+            onChange={handleGroupChange}
+            style={{ width: '100%' }}
+          />
         );
 
       case 'm3u':

From 367ee26f9aee5f8456f0cda95f59a1838849fd86 Mon Sep 17 00:00:00 2001
From: Jeffrey C <990135+JeffreyBytes@users.noreply.github.com>
Date: Mon, 12 Jan 2026 17:00:04 -0600
Subject: [PATCH 3/9] Fix unassigned filter not updating after adding streams
 to channels

When a stream was added to a channel (via "Add to Channel" button, "Create New Channel", or bulk "Add Streams to Channel"), the StreamsTable data wasn't being refetched. This caused streams to remain visible even when the "Only Unassociated" filter was active, despite no longer being unassociated.

Fixed by calling fetchData() after channel updates in:
  - StreamRowActions.addStreamToChannel (single stream to channel)
  - addStreamsToChannel (bulk add to channel)
  - executeSingleChannelCreation (create new channel from stream)

Now streams immediately disappear from the filtered view when associated with a channel.
---
 frontend/src/components/tables/StreamsTable.jsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/frontend/src/components/tables/StreamsTable.jsx b/frontend/src/components/tables/StreamsTable.jsx
index 25b7e330..8be3bb6d 100644
--- a/frontend/src/components/tables/StreamsTable.jsx
+++ b/frontend/src/components/tables/StreamsTable.jsx
@@ -70,6 +70,7 @@ const StreamRowActions = ({
   handleWatchStream,
   selectedChannelIds,
   createChannelFromStream,
+  fetchData,
 }) => {
   const [tableSize, _] = useLocalStorage('table-size', 'default');
   const channelSelectionStreams = useChannelsTableStore(
@@ -87,6 +88,7 @@ const StreamRowActions = ({
       ],
     });
     await API.requeryChannels();
+    await fetchData();
   };
 
   const onEdit = useCallback(() => {
@@ -545,6 +547,10 @@ const StreamsTable = ({ onReady }) => {
 
       // Clear selection since the task has started
       setSelectedStreamIds([]);
+
+      // Note: This is a background task, so fetchData may not show updated data immediately
+      // The actual update will occur when the WebSocket event fires on task completion
+      await fetchData();
     } catch (error) {
       console.error('Error starting bulk channel creation:', error);
       // Error notifications will be handled by WebSocket
@@ -714,6 +720,7 @@ const StreamsTable = ({ onReady }) => {
     await API.requeryChannels();
     const fetchLogos = useChannelsStore.getState().fetchLogos;
     fetchLogos();
+    await fetchData();
   };
 
   // Handle confirming the single channel numbering modal
@@ -756,6 +763,7 @@ const StreamsTable = ({ onReady }) => {
       ],
     });
     await API.requeryChannels();
+    await fetchData();
   };
 
   const onRowSelectionChange = (updatedIds) => {
@@ -916,6 +924,7 @@ const StreamsTable = ({ onReady }) => {
               handleWatchStream={handleWatchStream}
               selectedChannelIds={selectedChannelIds}
               createChannelFromStream={createChannelFromStream}
+              fetchData={fetchData}
             />
           );
       }
@@ -927,6 +936,7 @@ const StreamsTable = ({ onReady }) => {
       editStream,
       deleteStream,
       handleWatchStream,
+      fetchData,
     ]
   );
 

From 77067d4a1d0eb8eb56dc670e1ac3dd22621e0c5f Mon Sep 17 00:00:00 2001
From: Jeffrey C <990135+JeffreyBytes@users.noreply.github.com>
Date: Wed, 14 Jan 2026 04:47:47 -0600
Subject: [PATCH 4/9] Fix: refresh streams after bulk channel creation

Signed-off-by: Jeffrey C <990135+JeffreyBytes@users.noreply.github.com>
---
 .../src/components/tables/StreamsTable.jsx    | 43 +++++++++++++------
 1 file changed, 29 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/tables/StreamsTable.jsx b/frontend/src/components/tables/StreamsTable.jsx
index 8be3bb6d..bc10e904 100644
--- a/frontend/src/components/tables/StreamsTable.jsx
+++ b/frontend/src/components/tables/StreamsTable.jsx
@@ -61,6 +61,7 @@ import { CustomTable, useTable } from './CustomTable';
 import useLocalStorage from '../../hooks/useLocalStorage';
 import ConfirmationDialog from '../ConfirmationDialog';
 import CreateChannelModal from '../modals/CreateChannelModal';
+import { useWebSocket } from '../../WebSocket';
 
 const StreamRowActions = ({
   theme,
@@ -88,7 +89,7 @@ const StreamRowActions = ({
       ],
     });
     await API.requeryChannels();
-    await fetchData();
+    await fetchData({ showLoader: false });
   };
 
   const onEdit = useCallback(() => {
@@ -181,6 +182,7 @@ const StreamRowActions = ({
 const StreamsTable = ({ onReady }) => {
   const theme = useMantineTheme();
   const hasSignaledReady = useRef(false);
+  const [, , websocketEvent] = useWebSocket();
 
   /**
    * useState
@@ -394,8 +396,10 @@ const StreamsTable = ({ onReady }) => {
     }));
   };
 
-  const fetchData = useCallback(async () => {
-    setIsLoading(true);
+  const fetchData = useCallback(async ({ showLoader = true } = {}) => {
+    if (showLoader) {
+      setIsLoading(true);
+    }
 
     // Ensure we have channel groups first (if not already loaded)
     if (!groupsLoaded && Object.keys(channelGroups).length === 0) {
@@ -465,7 +469,9 @@ const StreamsTable = ({ onReady }) => {
       console.error('Error fetching data:', error);
     }
 
-    setIsLoading(false);
+    if (showLoader) {
+      setIsLoading(false);
+    }
   }, [
     pagination,
     sorting,
@@ -550,7 +556,7 @@ const StreamsTable = ({ onReady }) => {
 
       // Note: This is a background task, so fetchData may not show updated data immediately
       // The actual update will occur when the WebSocket event fires on task completion
-      await fetchData();
+      await fetchData({ showLoader: false });
     } catch (error) {
       console.error('Error starting bulk channel creation:', error);
       // Error notifications will be handled by WebSocket
@@ -610,7 +616,7 @@ const StreamsTable = ({ onReady }) => {
     setDeleting(true);
     try {
       await API.deleteStream(id);
-      fetchData();
+      fetchData({ showLoader: false });
       // Clear the selection for the deleted stream
       setSelectedStreamIds([]);
       table.setSelectedTableIds([]);
@@ -633,16 +639,14 @@ const StreamsTable = ({ onReady }) => {
   };
 
   const executeDeleteStreams = async () => {
-    setIsLoading(true);
     setDeleting(true);
     try {
       await API.deleteStreams(selectedStreamIds);
-      fetchData();
+      fetchData({ showLoader: false });
       setSelectedStreamIds([]);
       table.setSelectedTableIds([]);
     } finally {
       setDeleting(false);
-      setIsLoading(false);
       setConfirmDeleteOpen(false);
     }
   };
@@ -650,7 +654,7 @@ const StreamsTable = ({ onReady }) => {
   const closeStreamForm = () => {
     setStream(null);
     setModalOpen(false);
-    fetchData();
+    fetchData({ showLoader: false });
   };
 
   // Single channel creation functions
@@ -718,9 +722,9 @@ const StreamsTable = ({ onReady }) => {
       channel_profile_ids: channelProfileIds,
     });
     await API.requeryChannels();
-    const fetchLogos = useChannelsStore.getState().fetchLogos;
-    fetchLogos();
-    await fetchData();
+    // const fetchLogos = useChannelsStore.getState().fetchLogos;
+    // fetchLogos();
+    await fetchData({ showLoader: false });
   };
 
   // Handle confirming the single channel numbering modal
@@ -763,7 +767,7 @@ const StreamsTable = ({ onReady }) => {
       ],
     });
     await API.requeryChannels();
-    await fetchData();
+    await fetchData({ showLoader: false });
   };
 
   const onRowSelectionChange = (updatedIds) => {
@@ -980,6 +984,17 @@ const StreamsTable = ({ onReady }) => {
     fetchData();
   }, [fetchData]);
 
+  useEffect(() => {
+    const eventType = websocketEvent?.data?.type;
+    if (
+      eventType === 'channels_created' ||
+      (eventType === 'bulk_channel_creation_progress' &&
+        websocketEvent?.data?.status === 'completed')
+    ) {
+      fetchData({ showLoader: false });
+    }
+  }, [websocketEvent, fetchData]);
+
   return (
     <>
       <Flex

From 29395f05381a07dbbc3102a2e8f23c91796f3f2f Mon Sep 17 00:00:00 2001
From: Jeffrey C <990135+JeffreyBytes@users.noreply.github.com>
Date: Wed, 14 Jan 2026 09:48:40 -0600
Subject: [PATCH 5/9] unify StreamsTable refresh with channels requery

---
 frontend/src/WebSocket.jsx                    |   1 +
 frontend/src/api.js                           |  51 ++++++++
 .../components/tables/ChannelTableStreams.jsx |   1 +
 .../src/components/tables/StreamsTable.jsx    | 121 ++++++++----------
 frontend/src/store/streamsTable.jsx           |  49 +++++++
 5 files changed, 152 insertions(+), 71 deletions(-)
 create mode 100644 frontend/src/store/streamsTable.jsx

diff --git a/frontend/src/WebSocket.jsx b/frontend/src/WebSocket.jsx
index 87d80953..72bbb39a 100644
--- a/frontend/src/WebSocket.jsx
+++ b/frontend/src/WebSocket.jsx
@@ -755,6 +755,7 @@ export const WebsocketProvider = ({ children }) => {
               // Refresh the channels table to show new channels
               try {
                 await API.requeryChannels();
+                await API.requeryStreams();
                 await useChannelsStore.getState().fetchChannels();
                 await fetchChannelProfiles();
                 console.log('Channels refreshed after bulk creation');
diff --git a/frontend/src/api.js b/frontend/src/api.js
index c33ff1ee..f8b1f1c8 100644
--- a/frontend/src/api.js
+++ b/frontend/src/api.js
@@ -10,6 +10,7 @@ import useStreamProfilesStore from './store/streamProfiles';
 import useSettingsStore from './store/settings';
 import { notifications } from '@mantine/notifications';
 import useChannelsTableStore from './store/channelsTable';
+import useStreamsTableStore from './store/streamsTable';
 import useUsersStore from './store/users';
 
 // If needed, you can set a base host or keep it empty if relative requests
@@ -380,6 +381,7 @@ export default class API {
       });
 
       useChannelsStore.getState().removeChannels([id]);
+      await API.requeryStreams();
     } catch (e) {
       errorNotification('Failed to delete channel', e);
     }
@@ -394,6 +396,7 @@ export default class API {
       });
 
       useChannelsStore.getState().removeChannels(channel_ids);
+      await API.requeryStreams();
     } catch (e) {
       errorNotification('Failed to delete channels', e);
     }
@@ -447,6 +450,9 @@ export default class API {
       );
 
       useChannelsStore.getState().updateChannel(response);
+      if (Object.prototype.hasOwnProperty.call(payload, 'streams')) {
+        await API.requeryStreams();
+      }
       return response;
     } catch (e) {
       errorNotification('Failed to update channel', e);
@@ -630,6 +636,7 @@ export default class API {
         useChannelsStore.getState().addChannel(response);
       }
 
+      await API.requeryStreams();
       return response;
     } catch (e) {
       errorNotification('Failed to create channel', e);
@@ -705,6 +712,46 @@ export default class API {
     }
   }
 
+  static async queryStreamsTable(params) {
+    try {
+      API.lastStreamQueryParams = params;
+
+      const response = await request(
+        `${host}/api/channels/streams/?${params.toString()}`
+      );
+
+      useStreamsTableStore.getState().queryStreams(response, params);
+
+      return response;
+    } catch (e) {
+      errorNotification('Failed to fetch streams', e);
+    }
+  }
+
+  static async requeryStreams() {
+    if (!API.lastStreamQueryParams) {
+      return null;
+    }
+
+    try {
+      const [response, ids] = await Promise.all([
+        request(
+          `${host}/api/channels/streams/?${API.lastStreamQueryParams.toString()}`
+        ),
+        API.getAllStreamIds(API.lastStreamQueryParams),
+      ]);
+
+      useStreamsTableStore
+        .getState()
+        .queryStreams(response, API.lastStreamQueryParams);
+      useStreamsTableStore.getState().setAllQueryIds(ids);
+
+      return response;
+    } catch (e) {
+      errorNotification('Failed to fetch streams', e);
+    }
+  }
+
   static async getAllStreamIds(params) {
     try {
       const response = await request(
@@ -738,6 +785,7 @@ export default class API {
         useStreamsStore.getState().addStream(response);
       }
 
+      await API.requeryStreams();
       return response;
     } catch (e) {
       errorNotification('Failed to add stream', e);
@@ -756,6 +804,7 @@ export default class API {
         useStreamsStore.getState().updateStream(response);
       }
 
+      await API.requeryStreams();
       return response;
     } catch (e) {
       errorNotification('Failed to update stream', e);
@@ -769,6 +818,7 @@ export default class API {
       });
 
       useStreamsStore.getState().removeStreams([id]);
+      await API.requeryStreams();
     } catch (e) {
       errorNotification('Failed to delete stream', e);
     }
@@ -782,6 +832,7 @@ export default class API {
       });
 
       useStreamsStore.getState().removeStreams(ids);
+      await API.requeryStreams();
     } catch (e) {
       errorNotification('Failed to delete streams', e);
     }
diff --git a/frontend/src/components/tables/ChannelTableStreams.jsx b/frontend/src/components/tables/ChannelTableStreams.jsx
index 4fb62009..0443b3ca 100644
--- a/frontend/src/components/tables/ChannelTableStreams.jsx
+++ b/frontend/src/components/tables/ChannelTableStreams.jsx
@@ -167,6 +167,7 @@ const ChannelStreams = ({ channel, isExpanded }) => {
       streams: newStreamList.map((s) => s.id),
     });
     await API.requeryChannels();
+    await API.requeryStreams();
   };
 
   // Create M3U account map for quick lookup
diff --git a/frontend/src/components/tables/StreamsTable.jsx b/frontend/src/components/tables/StreamsTable.jsx
index bc10e904..2d7de36e 100644
--- a/frontend/src/components/tables/StreamsTable.jsx
+++ b/frontend/src/components/tables/StreamsTable.jsx
@@ -46,7 +46,6 @@ import {
   MultiSelect,
   useMantineTheme,
   UnstyledButton,
-  LoadingOverlay,
   Skeleton,
   Modal,
   NumberInput,
@@ -61,7 +60,7 @@ import { CustomTable, useTable } from './CustomTable';
 import useLocalStorage from '../../hooks/useLocalStorage';
 import ConfirmationDialog from '../ConfirmationDialog';
 import CreateChannelModal from '../modals/CreateChannelModal';
-import { useWebSocket } from '../../WebSocket';
+import useStreamsTableStore from '../../store/streamsTable';
 
 const StreamRowActions = ({
   theme,
@@ -71,7 +70,6 @@ const StreamRowActions = ({
   handleWatchStream,
   selectedChannelIds,
   createChannelFromStream,
-  fetchData,
 }) => {
   const [tableSize, _] = useLocalStorage('table-size', 'default');
   const channelSelectionStreams = useChannelsTableStore(
@@ -89,7 +87,6 @@ const StreamRowActions = ({
       ],
     });
     await API.requeryChannels();
-    await fetchData({ showLoader: false });
   };
 
   const onEdit = useCallback(() => {
@@ -182,23 +179,18 @@ const StreamRowActions = ({
 const StreamsTable = ({ onReady }) => {
   const theme = useMantineTheme();
   const hasSignaledReady = useRef(false);
-  const [, , websocketEvent] = useWebSocket();
+  const hasFetchedOnce = useRef(false);
 
   /**
    * useState
    */
-  const [allRowIds, setAllRowIds] = useState([]);
   const [stream, setStream] = useState(null);
   const [modalOpen, setModalOpen] = useState(false);
   const [groupOptions, setGroupOptions] = useState([]);
   const [initialDataCount, setInitialDataCount] = useState(null);
 
-  const [data, setData] = useState([]); // Holds fetched data
-  const [pageCount, setPageCount] = useState(0);
   const [paginationString, setPaginationString] = useState('');
   const [isLoading, setIsLoading] = useState(true);
-  const [sorting, setSorting] = useState([{ id: 'name', desc: false }]);
-  const [selectedStreamIds, setSelectedStreamIds] = useState([]);
 
   // Channel creation modal state (bulk)
   const [channelNumberingModalOpen, setChannelNumberingModalOpen] =
@@ -230,10 +222,6 @@ const StreamsTable = ({ onReady }) => {
     'streams-page-size',
     50
   );
-  const [pagination, setPagination] = useState({
-    pageIndex: 0,
-    pageSize: storedPageSize,
-  });
   const [filters, setFilters] = useState({
     name: '',
     channel_group: '',
@@ -246,15 +234,12 @@ const StreamsTable = ({ onReady }) => {
   );
   const debouncedFilters = useDebounce(filters, 500, () => {
     // Reset to first page whenever filters change to avoid "Invalid page" errors
-    setPagination((prev) => ({
-      ...prev,
+    setPagination({
+      ...pagination,
       pageIndex: 0,
-    }));
+    });
   });
 
-  // Add state to track if stream groups are loaded
-  const [groupsLoaded, setGroupsLoaded] = useState(false);
-
   const navigate = useNavigate();
 
   /**
@@ -277,6 +262,20 @@ const StreamsTable = ({ onReady }) => {
   const showVideo = useVideoStore((s) => s.showVideo);
   const [tableSize, _] = useLocalStorage('table-size', 'default');
 
+  const data = useStreamsTableStore((s) => s.streams);
+  const pageCount = useStreamsTableStore((s) => s.pageCount);
+  const totalCount = useStreamsTableStore((s) => s.totalCount);
+  const allRowIds = useStreamsTableStore((s) => s.allQueryIds);
+  const setAllRowIds = useStreamsTableStore((s) => s.setAllQueryIds);
+  const pagination = useStreamsTableStore((s) => s.pagination);
+  const setPagination = useStreamsTableStore((s) => s.setPagination);
+  const sorting = useStreamsTableStore((s) => s.sorting);
+  const setSorting = useStreamsTableStore((s) => s.setSorting);
+  const selectedStreamIds = useStreamsTableStore((s) => s.selectedStreamIds);
+  const setSelectedStreamIds = useStreamsTableStore(
+    (s) => s.setSelectedStreamIds
+  );
+
   // Warnings store for "remember choice" functionality
   const suppressWarning = useWarningsStore((s) => s.suppressWarning);
   const isWarningSuppressed = useWarningsStore((s) => s.isWarningSuppressed);
@@ -401,16 +400,6 @@ const StreamsTable = ({ onReady }) => {
       setIsLoading(true);
     }
 
-    // Ensure we have channel groups first (if not already loaded)
-    if (!groupsLoaded && Object.keys(channelGroups).length === 0) {
-      try {
-        await fetchChannelGroups();
-        setGroupsLoaded(true);
-      } catch (error) {
-        console.error('Error fetching channel groups:', error);
-      }
-    }
-
     const params = new URLSearchParams();
     params.append('page', pagination.pageIndex + 1);
     params.append('page_size', pagination.pageSize);
@@ -436,30 +425,18 @@ const StreamsTable = ({ onReady }) => {
 
     try {
       const [result, ids, groups] = await Promise.all([
-        API.queryStreams(params),
+        API.queryStreamsTable(params),
         API.getAllStreamIds(params),
         API.getStreamGroups(),
       ]);
 
       setAllRowIds(ids);
-      setData(result.results);
-      setPageCount(Math.ceil(result.count / pagination.pageSize));
       setGroupOptions(groups);
 
-      // Calculate the starting and ending item indexes
-      const startItem = pagination.pageIndex * pagination.pageSize + 1; // +1 to start from 1, not 0
-      const endItem = Math.min(
-        (pagination.pageIndex + 1) * pagination.pageSize,
-        result.count
-      );
-
       if (initialDataCount === null) {
         setInitialDataCount(result.count);
       }
 
-      // Generate the string
-      setPaginationString(`${startItem} to ${endItem} of ${result.count}`);
-
       // Signal that initial data load is complete
       if (!hasSignaledReady.current && onReady) {
         hasSignaledReady.current = true;
@@ -469,18 +446,11 @@ const StreamsTable = ({ onReady }) => {
       console.error('Error fetching data:', error);
     }
 
+    hasFetchedOnce.current = true;
     if (showLoader) {
       setIsLoading(false);
     }
-  }, [
-    pagination,
-    sorting,
-    debouncedFilters,
-    groupsLoaded,
-    channelGroups,
-    fetchChannelGroups,
-    onReady,
-  ]);
+  }, [pagination, sorting, debouncedFilters, onReady]);
 
   // Bulk creation: create channels from selected streams asynchronously
   const createChannelsFromStreams = async () => {
@@ -554,9 +524,7 @@ const StreamsTable = ({ onReady }) => {
       // Clear selection since the task has started
       setSelectedStreamIds([]);
 
-      // Note: This is a background task, so fetchData may not show updated data immediately
-      // The actual update will occur when the WebSocket event fires on task completion
-      await fetchData({ showLoader: false });
+      // Note: This is a background task, so the update happens on WebSocket completion
     } catch (error) {
       console.error('Error starting bulk channel creation:', error);
       // Error notifications will be handled by WebSocket
@@ -616,7 +584,6 @@ const StreamsTable = ({ onReady }) => {
     setDeleting(true);
     try {
       await API.deleteStream(id);
-      fetchData({ showLoader: false });
       // Clear the selection for the deleted stream
       setSelectedStreamIds([]);
       table.setSelectedTableIds([]);
@@ -642,7 +609,6 @@ const StreamsTable = ({ onReady }) => {
     setDeleting(true);
     try {
       await API.deleteStreams(selectedStreamIds);
-      fetchData({ showLoader: false });
       setSelectedStreamIds([]);
       table.setSelectedTableIds([]);
     } finally {
@@ -654,7 +620,7 @@ const StreamsTable = ({ onReady }) => {
   const closeStreamForm = () => {
     setStream(null);
     setModalOpen(false);
-    fetchData({ showLoader: false });
+    API.requeryStreams();
   };
 
   // Single channel creation functions
@@ -724,7 +690,6 @@ const StreamsTable = ({ onReady }) => {
     await API.requeryChannels();
     // const fetchLogos = useChannelsStore.getState().fetchLogos;
     // fetchLogos();
-    await fetchData({ showLoader: false });
   };
 
   // Handle confirming the single channel numbering modal
@@ -767,7 +732,6 @@ const StreamsTable = ({ onReady }) => {
       ],
     });
     await API.requeryChannels();
-    await fetchData({ showLoader: false });
   };
 
   const onRowSelectionChange = (updatedIds) => {
@@ -928,7 +892,6 @@ const StreamsTable = ({ onReady }) => {
               handleWatchStream={handleWatchStream}
               selectedChannelIds={selectedChannelIds}
               createChannelFromStream={createChannelFromStream}
-              fetchData={fetchData}
             />
           );
       }
@@ -940,7 +903,6 @@ const StreamsTable = ({ onReady }) => {
       editStream,
       deleteStream,
       handleWatchStream,
-      fetchData,
     ]
   );
 
@@ -958,6 +920,10 @@ const StreamsTable = ({ onReady }) => {
     manualSorting: true,
     manualFiltering: true,
     enableRowSelection: true,
+    state: {
+      pagination,
+      sorting,
+    },
     headerCellRenderFns: {
       name: renderHeaderCell,
       group: renderHeaderCell,
@@ -985,15 +951,29 @@ const StreamsTable = ({ onReady }) => {
   }, [fetchData]);
 
   useEffect(() => {
-    const eventType = websocketEvent?.data?.type;
-    if (
-      eventType === 'channels_created' ||
-      (eventType === 'bulk_channel_creation_progress' &&
-        websocketEvent?.data?.status === 'completed')
-    ) {
-      fetchData({ showLoader: false });
+    if (Object.keys(channelGroups).length > 0) {
+      return;
     }
-  }, [websocketEvent, fetchData]);
+
+    const loadGroups = async () => {
+      try {
+        await fetchChannelGroups();
+      } catch (error) {
+        console.error('Error fetching channel groups:', error);
+      }
+    };
+
+    loadGroups();
+  }, [channelGroups, fetchChannelGroups]);
+
+  useEffect(() => {
+    const startItem = pagination.pageIndex * pagination.pageSize + 1;
+    const endItem = Math.min(
+      (pagination.pageIndex + 1) * pagination.pageSize,
+      totalCount
+    );
+    setPaginationString(`${startItem} to ${endItem} of ${totalCount}`);
+  }, [pagination.pageIndex, pagination.pageSize, totalCount]);
 
   return (
     <>
@@ -1201,7 +1181,6 @@ const StreamsTable = ({ onReady }) => {
                 borderRadius: 'var(--mantine-radius-default)',
               }}
             >
-              <LoadingOverlay visible={isLoading} />
               <CustomTable table={table} />
             </Box>
 
diff --git a/frontend/src/store/streamsTable.jsx b/frontend/src/store/streamsTable.jsx
new file mode 100644
index 00000000..f353acf7
--- /dev/null
+++ b/frontend/src/store/streamsTable.jsx
@@ -0,0 +1,49 @@
+import { create } from 'zustand';
+
+const useStreamsTableStore = create((set) => ({
+  streams: [],
+  pageCount: 0,
+  totalCount: 0,
+  sorting: [{ id: 'name', desc: false }],
+  pagination: {
+    pageIndex: 0,
+    pageSize:
+      JSON.parse(localStorage.getItem('streams-page-size')) || 50,
+  },
+  selectedStreamIds: [],
+  allQueryIds: [],
+
+  queryStreams: ({ results, count }, params) => {
+    set(() => ({
+      streams: results,
+      totalCount: count,
+      pageCount: Math.ceil(count / params.get('page_size')),
+    }));
+  },
+
+  setAllQueryIds: (allQueryIds) => {
+    set(() => ({
+      allQueryIds,
+    }));
+  },
+
+  setSelectedStreamIds: (selectedStreamIds) => {
+    set(() => ({
+      selectedStreamIds,
+    }));
+  },
+
+  setPagination: (pagination) => {
+    set(() => ({
+      pagination,
+    }));
+  },
+
+  setSorting: (sorting) => {
+    set(() => ({
+      sorting,
+    }));
+  },
+}));
+
+export default useStreamsTableStore;

From 3ddc6d196b6d5e7a32c1f44b1b057922e669dd7b Mon Sep 17 00:00:00 2001
From: Jeffrey C <990135+JeffreyBytes@users.noreply.github.com>
Date: Thu, 15 Jan 2026 10:23:20 -0600
Subject: [PATCH 6/9] Fix: restore StreamsTable loading feedback

---
 frontend/src/components/tables/StreamsTable.jsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/tables/StreamsTable.jsx b/frontend/src/components/tables/StreamsTable.jsx
index 2d7de36e..64bf425a 100644
--- a/frontend/src/components/tables/StreamsTable.jsx
+++ b/frontend/src/components/tables/StreamsTable.jsx
@@ -50,6 +50,7 @@ import {
   Modal,
   NumberInput,
   Radio,
+  LoadingOverlay,
 } from '@mantine/core';
 import { useNavigate } from 'react-router-dom';
 import useSettingsStore from '../../store/settings';
@@ -582,6 +583,7 @@ const StreamsTable = ({ onReady }) => {
 
   const executeDeleteStream = async (id) => {
     setDeleting(true);
+    setIsLoading(true);
     try {
       await API.deleteStream(id);
       // Clear the selection for the deleted stream
@@ -589,6 +591,7 @@ const StreamsTable = ({ onReady }) => {
       table.setSelectedTableIds([]);
     } finally {
       setDeleting(false);
+      setIsLoading(false);
       setConfirmDeleteOpen(false);
     }
   };
@@ -607,20 +610,27 @@ const StreamsTable = ({ onReady }) => {
 
   const executeDeleteStreams = async () => {
     setDeleting(true);
+    setIsLoading(true);
     try {
       await API.deleteStreams(selectedStreamIds);
       setSelectedStreamIds([]);
       table.setSelectedTableIds([]);
     } finally {
       setDeleting(false);
+      setIsLoading(false);
       setConfirmDeleteOpen(false);
     }
   };
 
-  const closeStreamForm = () => {
+  const closeStreamForm = async () => {
     setStream(null);
     setModalOpen(false);
-    API.requeryStreams();
+    setIsLoading(true);
+    try {
+      await API.requeryStreams();
+    } finally {
+      setIsLoading(false);
+    }
   };
 
   // Single channel creation functions
@@ -1181,6 +1191,7 @@ const StreamsTable = ({ onReady }) => {
                 borderRadius: 'var(--mantine-radius-default)',
               }}
             >
+              <LoadingOverlay visible={isLoading} />
               <CustomTable table={table} />
             </Box>
 

From 1afb15fb63d649f5696f251f2ca46fbc1e4bf72d Mon Sep 17 00:00:00 2001
From: SergeantPanda <chester.cullen@gmail.com>
Date: Sat, 17 Jan 2026 16:15:11 -0600
Subject: [PATCH 7/9] Revert change to header sizing.

---
 frontend/src/index.css | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/index.css b/frontend/src/index.css
index 1586f432..5e902b6c 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -118,14 +118,14 @@ table.mrt-table tr.mantine-Table-tr.mantine-Table-tr-detail-panel td.mantine-Tab
 
 .custom-multiselect .mantine-MultiSelect-input {
   min-height: 30px;
-  max-height: fit-content;
-  overflow: visible;
-  flex-wrap: wrap;
+  max-height: 30px;
+  overflow: hidden;
+  flex-wrap: nowrap;
 }
 
 .custom-multiselect .mantine-MultiSelect-pillsList {
-  flex-wrap: wrap;
-  overflow: visible;
+  flex-wrap: nowrap;
+  overflow: hidden;
 }
 
 .custom-multiselect .mantine-MultiSelect-pill {

From f81014249389fd8be0f60cb693827291df47efbf Mon Sep 17 00:00:00 2001
From: SergeantPanda <chester.cullen@gmail.com>
Date: Sat, 17 Jan 2026 17:55:12 -0600
Subject: [PATCH 8/9] Enhancement: Optimize channel filtering in StreamViewSet
 using Count annotation for improved performance on large datasets.

---
 apps/channels/api_views.py                    |   4 +-
 .../src/components/tables/StreamsTable.jsx    | 125 +++++++++---------
 2 files changed, 67 insertions(+), 62 deletions(-)

diff --git a/apps/channels/api_views.py b/apps/channels/api_views.py
index 8ea5db8a..a87bac90 100644
--- a/apps/channels/api_views.py
+++ b/apps/channels/api_views.py
@@ -8,6 +8,7 @@ from drf_yasg.utils import swagger_auto_schema
 from drf_yasg import openapi
 from django.shortcuts import get_object_or_404, get_list_or_404
 from django.db import transaction
+from django.db.models import Count
 from django.db.models import Q
 import os, json, requests, logging
 from urllib.parse import unquote
@@ -148,7 +149,8 @@ class StreamViewSet(viewsets.ModelViewSet):
 
         unassigned = self.request.query_params.get("unassigned")
         if unassigned == "1":
-            qs = qs.filter(channels__isnull=True)
+            # Use annotation with Count for better performance on large datasets
+            qs = qs.annotate(channel_count=Count('channels')).filter(channel_count=0)
 
         channel_group = self.request.query_params.get("channel_group")
         if channel_group:
diff --git a/frontend/src/components/tables/StreamsTable.jsx b/frontend/src/components/tables/StreamsTable.jsx
index 167d2532..61fe36b7 100644
--- a/frontend/src/components/tables/StreamsTable.jsx
+++ b/frontend/src/components/tables/StreamsTable.jsx
@@ -397,70 +397,73 @@ const StreamsTable = ({ onReady }) => {
     }));
   };
 
-  const fetchData = useCallback(async ({ showLoader = true } = {}) => {
-    if (showLoader) {
-      setIsLoading(true);
-    }
-
-    const params = new URLSearchParams();
-    params.append('page', pagination.pageIndex + 1);
-    params.append('page_size', pagination.pageSize);
-
-    // Apply sorting
-    if (sorting.length > 0) {
-      const columnId = sorting[0].id;
-      // Map frontend column IDs to backend field names
-      const fieldMapping = {
-        name: 'name',
-        group: 'channel_group__name',
-        m3u: 'm3u_account__name',
-      };
-      const sortField = fieldMapping[columnId] || columnId;
-      const sortDirection = sorting[0].desc ? '-' : '';
-      params.append('ordering', `${sortDirection}${sortField}`);
-    }
-
-    // Apply debounced filters
-    Object.entries(debouncedFilters).forEach(([key, value]) => {
-      if (value) params.append(key, value);
-    });
-
-    try {
-      const [result, ids, filterOptions] = await Promise.all([
-        API.queryStreamsTable(params),
-        API.getAllStreamIds(params),
-        API.getStreamFilterOptions(params),
-      ]);
-
-      setAllRowIds(ids);
-
-      // Set filtered options based on current filters
-      setGroupOptions(filterOptions.groups);
-      setM3uOptions(
-        filterOptions.m3u_accounts.map((m3u) => ({
-          label: m3u.name,
-          value: `${m3u.id}`,
-        }))
-      );
-
-      if (initialDataCount === null) {
-        setInitialDataCount(result.count);
+  const fetchData = useCallback(
+    async ({ showLoader = true } = {}) => {
+      if (showLoader) {
+        setIsLoading(true);
       }
 
-      // Signal that initial data load is complete
-      if (!hasSignaledReady.current && onReady) {
-        hasSignaledReady.current = true;
-        onReady();
-      }
-    } catch (error) {
-      console.error('Error fetching data:', error);
-    }
+      const params = new URLSearchParams();
+      params.append('page', pagination.pageIndex + 1);
+      params.append('page_size', pagination.pageSize);
 
-    hasFetchedOnce.current = true;
-    if (showLoader) {
-      setIsLoading(false);
-    }
-  }, [pagination, sorting, debouncedFilters, onReady]);
+      // Apply sorting
+      if (sorting.length > 0) {
+        const columnId = sorting[0].id;
+        // Map frontend column IDs to backend field names
+        const fieldMapping = {
+          name: 'name',
+          group: 'channel_group__name',
+          m3u: 'm3u_account__name',
+        };
+        const sortField = fieldMapping[columnId] || columnId;
+        const sortDirection = sorting[0].desc ? '-' : '';
+        params.append('ordering', `${sortDirection}${sortField}`);
+      }
+
+      // Apply debounced filters
+      Object.entries(debouncedFilters).forEach(([key, value]) => {
+        if (value) params.append(key, value);
+      });
+
+      try {
+        const [result, ids, filterOptions] = await Promise.all([
+          API.queryStreamsTable(params),
+          API.getAllStreamIds(params),
+          API.getStreamFilterOptions(params),
+        ]);
+
+        setAllRowIds(ids);
+
+        // Set filtered options based on current filters
+        setGroupOptions(filterOptions.groups);
+        setM3uOptions(
+          filterOptions.m3u_accounts.map((m3u) => ({
+            label: m3u.name,
+            value: `${m3u.id}`,
+          }))
+        );
+
+        if (initialDataCount === null) {
+          setInitialDataCount(result.count);
+        }
+
+        // Signal that initial data load is complete
+        if (!hasSignaledReady.current && onReady) {
+          hasSignaledReady.current = true;
+          onReady();
+        }
+      } catch (error) {
+        console.error('Error fetching data:', error);
+      }
+
+      hasFetchedOnce.current = true;
+      if (showLoader) {
+        setIsLoading(false);
+      }
+    },
+    [pagination, sorting, debouncedFilters, onReady]
+  );
 
   // Bulk creation: create channels from selected streams asynchronously
   const createChannelsFromStreams = async () => {

From 0a340e51e2b89e1aaea2d9a6831cae51212e2cb7 Mon Sep 17 00:00:00 2001
From: SergeantPanda <chester.cullen@gmail.com>
Date: Sat, 17 Jan 2026 18:05:57 -0600
Subject: [PATCH 9/9] Enhancement: Add playlist and channel group fetching
 logic to StreamsTable for improved data management

---
 .../src/components/tables/StreamsTable.jsx    | 31 ++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/tables/StreamsTable.jsx b/frontend/src/components/tables/StreamsTable.jsx
index 61fe36b7..dcb3284e 100644
--- a/frontend/src/components/tables/StreamsTable.jsx
+++ b/frontend/src/components/tables/StreamsTable.jsx
@@ -182,6 +182,8 @@ const StreamsTable = ({ onReady }) => {
   const theme = useMantineTheme();
   const hasSignaledReady = useRef(false);
   const hasFetchedOnce = useRef(false);
+  const hasFetchedPlaylists = useRef(false);
+  const hasFetchedChannelGroups = useRef(false);
 
   /**
    * useState
@@ -249,6 +251,8 @@ const StreamsTable = ({ onReady }) => {
    * Stores
    */
   const playlists = usePlaylistsStore((s) => s.playlists);
+  const fetchPlaylists = usePlaylistsStore((s) => s.fetchPlaylists);
+  const playlistsLoading = usePlaylistsStore((s) => s.isLoading);
 
   // Get direct access to channel groups without depending on other data
   const fetchChannelGroups = useChannelsStore((s) => s.fetchChannelGroups);
@@ -1048,11 +1052,15 @@ const StreamsTable = ({ onReady }) => {
   }, [fetchData]);
 
   useEffect(() => {
-    if (Object.keys(channelGroups).length > 0) {
+    if (
+      Object.keys(channelGroups).length > 0 ||
+      hasFetchedChannelGroups.current
+    ) {
       return;
     }
 
     const loadGroups = async () => {
+      hasFetchedChannelGroups.current = true;
       try {
         await fetchChannelGroups();
       } catch (error) {
@@ -1063,6 +1071,27 @@ const StreamsTable = ({ onReady }) => {
     loadGroups();
   }, [channelGroups, fetchChannelGroups]);
 
+  useEffect(() => {
+    if (
+      playlists.length > 0 ||
+      hasFetchedPlaylists.current ||
+      playlistsLoading
+    ) {
+      return;
+    }
+
+    const loadPlaylists = async () => {
+      hasFetchedPlaylists.current = true;
+      try {
+        await fetchPlaylists();
+      } catch (error) {
+        console.error('Error fetching playlists:', error);
+      }
+    };
+
+    loadPlaylists();
+  }, [playlists, fetchPlaylists, playlistsLoading]);
+
   useEffect(() => {
     const startItem = pagination.pageIndex * pagination.pageSize + 1;
     const endItem = Math.min(