🚀 feat(web/channels): Deep modular refactor of Channels table

1. Split monolithic `ChannelsTable` (2200+ LOC) into focused components
   • `channels/index.jsx` – composition entry
   • `ChannelsTable.jsx` – pure `<Table>` rendering
   • `ChannelsActions.jsx` – bulk & settings toolbar
   • `ChannelsFilters.jsx` – search / create / column-settings form
   • `ChannelsTabs.jsx` – type tabs
   • `ChannelsColumnDefs.js` – column definitions & render helpers
   • `modals/` – BatchTag, ColumnSelector, ModelTest modals

2. Extract domain hook
   • Moved `useChannelsData.js` → `src/hooks/channels/useChannelsData.js`
     – centralises state, API calls, pagination, filters, batch ops
     – now exports `setActivePage`, fixing tab / status switch errors

3. Update wiring
   • All sub-components consume data via `useChannelsData` props
   • Adjusted import paths after hook relocation

4. Clean legacy file
   • Legacy `components/table/ChannelsTable.js` now re-exports new module

5. Bug fixes
   • Tab switching, status filter & tag aggregation restored
   • Column selector & batch actions operate via unified hook

This commit completes the first phase of modularising the Channels feature, laying groundwork for consistent, maintainable table architecture across the app.

web/src/components/table/channels/index.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import CardPro from '../../common/ui/CardPro.js';
+import ChannelsTable from './ChannelsTable.jsx';
+import ChannelsActions from './ChannelsActions.jsx';
+import ChannelsFilters from './ChannelsFilters.jsx';
+import ChannelsTabs from './ChannelsTabs.jsx';
+import { useChannelsData } from '../../../hooks/channels/useChannelsData.js';
+import BatchTagModal from './modals/BatchTagModal.jsx';
+import ModelTestModal from './modals/ModelTestModal.jsx';
+import ColumnSelectorModal from './modals/ColumnSelectorModal.jsx';
+import EditChannel from '../../../pages/Channel/EditChannel.js';
+import EditTagModal from '../../../pages/Channel/EditTagModal.js';
+
+const ChannelsPage = () => {
+  const channelsData = useChannelsData();
+
+  return (
+    <>
+      {/* Modals */}
+      <ColumnSelectorModal {...channelsData} />
+      <EditTagModal
+        visible={channelsData.showEditTag}
+        tag={channelsData.editingTag}
+        handleClose={() => channelsData.setShowEditTag(false)}
+        refresh={channelsData.refresh}
+      />
+      <EditChannel
+        refresh={channelsData.refresh}
+        visible={channelsData.showEdit}
+        handleClose={channelsData.closeEdit}
+        editingChannel={channelsData.editingChannel}
+      />
+      <BatchTagModal {...channelsData} />
+      <ModelTestModal {...channelsData} />
+
+      {/* Main Content */}
+      <CardPro
+        type="type3"
+        tabsArea={<ChannelsTabs {...channelsData} />}
+        actionsArea={<ChannelsActions {...channelsData} />}
+        searchArea={<ChannelsFilters {...channelsData} />}
+      >
+        <ChannelsTable {...channelsData} />
+      </CardPro>
+    </>
+  );
+};
+
+export default ChannelsPage;