Better handling for notifying of groups needing to be edited.

frontend/src/WebSocket.jsx

@@ -12,7 +12,7 @@ import { notifications } from '@mantine/notifications';
 import useChannelsStore from './store/channels';
 import usePlaylistsStore from './store/playlists';
 import useEPGsStore from './store/epgs';
-import { Box, Button, Stack, Alert } from '@mantine/core';
+import { Box, Button, Stack, Alert, Group } from '@mantine/core';
 import API from './api';
 import useSettingsStore from './store/settings';
 
@@ -160,32 +160,6 @@ export const WebsocketProvider = ({ children }) => {
               });
               break;
 
-            case 'm3u_group_refresh':
-              fetchChannelGroups();
-              fetchPlaylists();
-
-              notifications.show({
-                title: 'Group processing finished!',
-                autoClose: 5000,
-                message: (
-                  <Stack>
-                    Refresh M3U or filter out groups to pull in streams.
-                    <Button
-                      size="xs"
-                      variant="default"
-                      onClick={() => {
-                        API.refreshPlaylist(parsedEvent.data.account);
-                        setRefreshProgress(parsedEvent.data.account, 0);
-                      }}
-                    >
-                      Refresh Now
-                    </Button>
-                  </Stack>
-                ),
-                color: 'green.5',
-              });
-              break;
-
             case 'm3u_refresh':
               // Update the store with progress information
               setRefreshProgress(parsedEvent.data);

frontend/src/components/M3URefreshNotification.jsx

@@ -6,6 +6,8 @@ import { IconCheck } from '@tabler/icons-react';
 import useStreamsStore from '../store/streams';
 import useChannelsStore from '../store/channels';
 import useEPGsStore from '../store/epgs';
+import { Stack, Button, Group } from '@mantine/core';
+import API from '../api';
 
 export default function M3URefreshNotification() {
   const playlists = usePlaylistsStore((s) => s.playlists);
@@ -37,9 +39,37 @@ export default function M3URefreshNotification() {
 
     // Special handling for pending setup status
     if (data.status === "pending_setup") {
+      fetchChannelGroups();
+      fetchPlaylists();
+
       notifications.show({
         title: `M3U Setup: ${playlist.name}`,
-        message: data.message || "M3U groups loaded. Please select groups or refresh M3U to complete setup.",
+        message: (
+          <Stack>
+            {data.message || "M3U groups loaded. Please select groups or refresh M3U to complete setup."}
+            <Group grow>
+              <Button
+                size="xs"
+                variant="default"
+                onClick={() => {
+                  API.refreshPlaylist(data.account);
+                }}
+              >
+                Refresh Now
+              </Button>
+              <Button
+                size="xs"
+                variant="outline"
+                onClick={() => {
+                  // Open the M3U edit modal for this account
+                  usePlaylistsStore.getState().setEditPlaylistId(data.account);
+                }}
+              >
+                Edit Groups
+              </Button>
+            </Group>
+          </Stack>
+        ),
         color: 'orange.5',
         autoClose: 5000,  // Keep visible a bit longer
       });

frontend/src/components/tables/M3UsTable.jsx

@@ -62,6 +62,8 @@ const M3UTable = () => {
   const playlists = usePlaylistsStore((s) => s.playlists);
   const refreshProgress = usePlaylistsStore((s) => s.refreshProgress);
   const setRefreshProgress = usePlaylistsStore((s) => s.setRefreshProgress);
+  const editPlaylistId = usePlaylistsStore((s) => s.editPlaylistId);
+  const setEditPlaylistId = usePlaylistsStore((s) => s.setEditPlaylistId);
 
   const theme = useMantineTheme();
   const [tableSize] = useLocalStorage('table-size', 'default');
@@ -491,6 +493,18 @@ const M3UTable = () => {
     }
   }, [sorting]);
 
+  // Listen for edit playlist requests from notifications
+  useEffect(() => {
+    if (editPlaylistId) {
+      const playlistToEdit = playlists.find(p => p.id === editPlaylistId);
+      if (playlistToEdit) {
+        editPlaylist(playlistToEdit);
+        // Reset the ID after handling
+        setEditPlaylistId(null);
+      }
+    }
+  }, [editPlaylistId, playlists]);
+
   const tableDensity = tableSize === 'compact' ? 'xs' : tableSize === 'large' ? 'xl' : 'md';
 
   const table = useMantineReactTable({

frontend/src/store/playlists.jsx

@@ -11,6 +11,14 @@ const usePlaylistsStore = create((set) => ({
   profileSearchPreview: '',
   profileResult: '',
 
+  // Add a state variable to trigger M3U editing
+  editPlaylistId: null,
+
+  setEditPlaylistId: (id) =>
+    set((state) => ({
+      editPlaylistId: id,
+    })),
+
   fetchPlaylists: async () => {
     set({ isLoading: true, error: null });
     try {