From 970734c5dfa4d604d8036c93db4f181286ba8dab Mon Sep 17 00:00:00 2001
From: dekzter <kappa118@gmail.com>
Date: Thu, 3 Apr 2025 10:42:09 -0400
Subject: [PATCH] handle if currently selected profile is deleted, slight ui
 changes to channels form

---
 frontend/src/components/forms/Channel.jsx     |  22 ++--
 .../src/components/tables/StreamsTable.jsx    | 109 +++++++++++-------
 frontend/src/store/channels.jsx               |  17 ++-
 3 files changed, 92 insertions(+), 56 deletions(-)

diff --git a/frontend/src/components/forms/Channel.jsx b/frontend/src/components/forms/Channel.jsx
index d40aacf1..b5f18c56 100644
--- a/frontend/src/components/forms/Channel.jsx
+++ b/frontend/src/components/forms/Channel.jsx
@@ -380,7 +380,7 @@ const Channel = ({ channel = null, isOpen, onClose }) => {
             <Divider size="sm" orientation="vertical" />
 
             <Stack justify="flex-start" style={{ flex: 1 }}>
-              <Flex gap="sm">
+              <Group justify="space-between">
                 <Select
                   id="logo_id"
                   name="logo_id"
@@ -399,17 +399,15 @@ const Channel = ({ channel = null, isOpen, onClose }) => {
                   renderOption={renderLogoOption}
                   comboboxProps={{ width: 75, position: 'bottom-start' }}
                 />
-                <Flex align="flex-end" style={{ marginTop: 10 }}>
-                  <img
-                    src={
-                      logos[formik.values.logo_id]
-                        ? logos[formik.values.logo_id].url
-                        : logo
-                    }
-                    height="40"
-                  />
-                </Flex>
-              </Flex>
+                <img
+                  src={
+                    logos[formik.values.logo_id]
+                      ? logos[formik.values.logo_id].url
+                      : logo
+                  }
+                  height="40"
+                />
+              </Group>
 
               <Group>
                 <Divider size="xs" style={{ flex: 1 }} />
diff --git a/frontend/src/components/tables/StreamsTable.jsx b/frontend/src/components/tables/StreamsTable.jsx
index 8cc05efa..17567732 100644
--- a/frontend/src/components/tables/StreamsTable.jsx
+++ b/frontend/src/components/tables/StreamsTable.jsx
@@ -652,51 +652,74 @@ const StreamsTable = ({}) => {
         }}
       >
         {/* Top toolbar with Remove, Assign, Auto-match, and Add buttons */}
-        <Box
-          style={{
-            display: 'flex',
-            justifyContent: 'flex-end',
-            padding: 10,
-          }}
-        >
-          <Flex gap={6}>
-            <Button
-              leftSection={<SquareMinus size={18} />}
-              variant="default"
-              size="xs"
-              onClick={deleteStreams}
-              disabled={rowSelection.length === 0}
-            >
-              Remove
-            </Button>
+        <Group justify="space-between" style={{ paddingLeft: 10 }}>
+          <Box>
+            {selectedStreamIds.length > 0 && (
+              <Button
+                leftSection={<IconSquarePlus size={18} />}
+                variant="light"
+                size="xs"
+                onClick={addStreamsToChannel}
+                p={5}
+                color={theme.tailwind.green[5]}
+                style={{
+                  borderWidth: '1px',
+                  borderColor: theme.tailwind.green[5],
+                  color: 'white',
+                }}
+              >
+                Add Streams to Channel
+              </Button>
+            )}
+          </Box>
 
-            <Button
-              leftSection={<IconSquarePlus size={18} />}
-              variant="default"
-              size="xs"
-              onClick={createChannelsFromStreams}
-              p={5}
-            >
-              Create Channels
-            </Button>
+          <Box
+            style={{
+              display: 'flex',
+              justifyContent: 'flex-end',
+              padding: 10,
+            }}
+          >
+            <Flex gap={6}>
+              <Button
+                leftSection={<SquareMinus size={18} />}
+                variant="default"
+                size="xs"
+                onClick={deleteStreams}
+                disabled={selectedStreamIds.length == 0}
+              >
+                Remove
+              </Button>
 
-            <Button
-              leftSection={<IconSquarePlus size={18} />}
-              variant="light"
-              size="xs"
-              onClick={() => editStream()}
-              p={5}
-              color={theme.tailwind.green[5]}
-              style={{
-                borderWidth: '1px',
-                borderColor: theme.tailwind.green[5],
-                color: 'white',
-              }}
-            >
-              Add Stream
-            </Button>
-          </Flex>
-        </Box>
+              <Button
+                leftSection={<IconSquarePlus size={18} />}
+                variant="default"
+                size="xs"
+                onClick={createChannelsFromStreams}
+                p={5}
+                disabled={selectedStreamIds.length == 0}
+              >
+                Create Channels
+              </Button>
+
+              <Button
+                leftSection={<IconSquarePlus size={18} />}
+                variant="light"
+                size="xs"
+                onClick={() => editStream()}
+                p={5}
+                color={theme.tailwind.green[5]}
+                style={{
+                  borderWidth: '1px',
+                  borderColor: theme.tailwind.green[5],
+                  color: 'white',
+                }}
+              >
+                Create Stream
+              </Button>
+            </Flex>
+          </Box>
+        </Group>
 
         {initialDataCount === 0 && (
           <Center style={{ paddingTop: 20 }}>
diff --git a/frontend/src/store/channels.jsx b/frontend/src/store/channels.jsx
index b8ca53b5..b413d6de 100644
--- a/frontend/src/store/channels.jsx
+++ b/frontend/src/store/channels.jsx
@@ -240,7 +240,22 @@ const useChannelsStore = create((set, get) => ({
         delete updatedProfiles[id];
       }
 
-      return { profiles: updatedProfiles };
+      let additionalUpdates = {};
+      if (profileIds.includes(state.selectedProfileId)) {
+        additionalUpdates = {
+          selectedProfileId: '0',
+          selectedProfileChannels: [],
+          selectedProfile: {},
+        };
+      }
+
+      return {
+        profiles: updatedProfiles,
+        selectedProfileId: profileIds.includes(state.selectedProfileId)
+          ? '0'
+          : state.selectedProfileId,
+        ...additionalUpdates,
+      };
     }),
 
   updateProfileChannel: (channelId, profileId, enabled) =>