Search all logos instead of just channel assignable.

frontend/src/components/forms/Channel.jsx

@@ -9,6 +9,7 @@ import ChannelGroupForm from './ChannelGroup';
 import usePlaylistsStore from '../../store/playlists';
 import logo from '../../images/logo.png';
 import { useChannelLogoSelection } from '../../hooks/useSmartLogos';
+import useLogosStore from '../../store/logos';
 import LazyLogo from '../LazyLogo';
 import {
   Box,
@@ -56,6 +57,9 @@ const ChannelForm = ({ channel = null, isOpen, onClose }) => {
     isLoading: logosLoading,
   } = useChannelLogoSelection();
 
+  // Import the full logos store for duplicate checking
+  const allLogos = useLogosStore((s) => s.logos);
+
   // Ensure logos are loaded when component mounts
   useEffect(() => {
     ensureLogosLoaded();
@@ -217,8 +221,8 @@ const ChannelForm = ({ channel = null, isOpen, onClose }) => {
     }
 
     try {
-      // Try to find a logo that matches the EPG icon URL
-      let matchingLogo = Object.values(logos).find(
+      // Try to find a logo that matches the EPG icon URL - check ALL logos to avoid duplicates
+      let matchingLogo = Object.values(allLogos).find(
         (logo) => logo.url === tvg.icon_url
       );
 

frontend/src/store/logos.jsx

@@ -3,7 +3,7 @@ import api from '../api';
 
 const useLogosStore = create((set, get) => ({
   logos: {},
-  channelLogos: {}, // Separate state for channel-assignable logos
+  channelLogos: {}, // Keep this for simplicity, but we'll be more careful about when we populate it
   isLoading: false,
   backgroundLoading: false,
   hasLoadedAll: false, // Track if we've loaded all logos
@@ -21,12 +21,29 @@ const useLogosStore = create((set, get) => ({
   },
 
   addLogo: (newLogo) =>
-    set((state) => ({
-      logos: {
+    set((state) => {
+      // Add to main logos store always
+      const newLogos = {
         ...state.logos,
         [newLogo.id]: { ...newLogo },
-      },
-    })),
+      };
+      
+      // Add to channelLogos if the user has loaded channel-assignable logos
+      // This means they're using channel forms and the new logo should be available there
+      // Newly created logos are channel-assignable (they start unused)
+      let newChannelLogos = state.channelLogos;
+      if (state.hasLoadedChannelLogos) {
+        newChannelLogos = {
+          ...state.channelLogos,
+          [newLogo.id]: { ...newLogo },
+        };
+      }
+
+      return {
+        logos: newLogos,
+        channelLogos: newChannelLogos,
+      };
+    }),
 
   updateLogo: (logo) =>
     set((state) => ({
@@ -34,13 +51,25 @@ const useLogosStore = create((set, get) => ({
         ...state.logos,
         [logo.id]: { ...logo },
       },
+      // Update in channelLogos if it exists there
+      channelLogos: state.channelLogos[logo.id]
+        ? {
+            ...state.channelLogos,
+            [logo.id]: { ...logo },
+          }
+        : state.channelLogos,
     })),
 
   removeLogo: (logoId) =>
     set((state) => {
       const newLogos = { ...state.logos };
+      const newChannelLogos = { ...state.channelLogos };
       delete newLogos[logoId];
-      return { logos: newLogos };
+      delete newChannelLogos[logoId];
+      return {
+        logos: newLogos,
+        channelLogos: newChannelLogos,
+      };
     }),
 
   // Smart loading methods
@@ -155,8 +184,15 @@ const useLogosStore = create((set, get) => ({
 
       console.log(`Fetched ${logos.length} channel-assignable logos`);
 
-      // Store in separate channelLogos state
+      // Store in both places, but this is intentional and only when specifically requested
       set({
+        logos: {
+          ...get().logos, // Keep existing logos
+          ...logos.reduce((acc, logo) => {
+            acc[logo.id] = { ...logo };
+            return acc;
+          }, {}),
+        },
         channelLogos: logos.reduce((acc, logo) => {
           acc[logo.id] = { ...logo };
           return acc;