feat: introduce CHANNEL_SELECTION_REQUIRES_ADMIN option

frontend/src/App.tsx

@@ -34,7 +34,7 @@ function AppContent() {
   const [isPlaylistDropdownOpen, setIsPlaylistDropdownOpen] = useState(false);
   const [isGroupDropdownOpen, setIsGroupDropdownOpen] = useState(false);
 
-  const { isAdmin, isAdminEnabled, setIsAdminEnabled } = useAdmin();
+  const { isAdmin, isAdminEnabled, setIsAdminEnabled, channelSelectRequiresAdmin, setChannelSelectRequiresAdmin } = useAdmin();
   const { addToast } = useContext(ToastContext);
 
   // Get unique playlists from channels
@@ -73,8 +73,11 @@ function AppContent() {
   useEffect(() => {
     // Check if admin mode is enabled on the server
     apiService
-      .request<{ enabled: boolean }>('/auth/admin-status', 'GET')
-      .then((data) => setIsAdminEnabled(data.enabled))
+      .request<{ enabled: boolean; channelSelectionRequiresAdmin: boolean }>('/auth/admin-status', 'GET')
+      .then((data) => {
+        setIsAdminEnabled(data.enabled);
+        setChannelSelectRequiresAdmin(data.channelSelectionRequiresAdmin);
+      })
       .catch((error) => console.error('Error checking admin status:', error));
 
     apiService
@@ -345,6 +348,13 @@ function AppContent() {
                 selectedChannel={selectedChannel}
                 setSearchQuery={setSearchQuery}
                 onEditChannel={handleEditChannel}
+                onChannelSelectCheckPermission={() => {
+                  if (isAdminEnabled && channelSelectRequiresAdmin && !isAdmin) {
+                    setIsAdminModalOpen(true);
+                    return false;
+                  }
+                  return true;
+                }}
               />
             </div>
 

frontend/src/components/ChannelList.tsx

@@ -7,6 +7,7 @@ interface ChannelListProps {
   selectedChannel: Channel | null;
   setSearchQuery: React.Dispatch<React.SetStateAction<string>>;
   onEditChannel: (channel: Channel) => void;
+  onChannelSelectCheckPermission: () => boolean;
 }
 
 function ChannelList({
@@ -14,10 +15,13 @@ function ChannelList({
   selectedChannel,
   setSearchQuery,
   onEditChannel,
+  onChannelSelectCheckPermission,
 }: ChannelListProps) {
+
   const onSelectChannel = (channel: Channel) => {
     setSearchQuery("");
     if (channel.id === selectedChannel?.id) return;
+    if (!onChannelSelectCheckPermission()) return;
     socketService.setCurrentChannel(channel.id);
   };
 

frontend/src/components/admin/AdminContext.tsx

@@ -9,10 +9,12 @@ import { jwtDecode } from 'jwt-decode';
 import socketService from '../../services/SocketService';
 
 interface AdminContextType {
-  isAdmin: boolean;
+  isAdmin: boolean | null;
   setIsAdmin: (value: boolean) => void;
   isAdminEnabled: boolean;
   setIsAdminEnabled: (value: boolean) => void;
+  channelSelectRequiresAdmin: boolean;
+  setChannelSelectRequiresAdmin: (value: boolean) => void;
   adminToken: string | null;
 }
 
@@ -21,6 +23,8 @@ const AdminContext = createContext<AdminContextType>({
   setIsAdmin: () => {},
   isAdminEnabled: false,
   setIsAdminEnabled: () => {},
+  channelSelectRequiresAdmin: false,
+  setChannelSelectRequiresAdmin: () => {},
   adminToken: null,
 });
 
@@ -42,21 +46,22 @@ const isTokenValid = (token: string): boolean => {
 };
 
 export const AdminProvider: React.FC<AdminProviderProps> = ({ children }) => {
-  const [isAdmin, setIsAdmin] = useState(false);
+  const [isAdmin, setIsAdmin] = useState<boolean | null>(null);
   const [isAdminEnabled, setIsAdminEnabled] = useState(false);
+  const [channelSelectRequiresAdmin, setChannelSelectRequiresAdmin] = useState(false);
   const [adminToken, setAdminToken] = useState<string | null>(null);
 
   // Effect to handle token changes
   useEffect(() => {
     // When admin status changes, update socket connection
-    if (isAdmin) {
+    if (isAdmin === true) {
       // Small delay to ensure token is saved before reconnecting
       setTimeout(() => {
         socketService.updateAuthToken();
       }, 100);
-    } else {
+    } else if (isAdmin === false) {
       // Reset token and reconnect
-      localStorage.removeItem('admin_token');
+      localStorage.removeItem("admin_token");
       setAdminToken(null);
       socketService.updateAuthToken();
     }
@@ -72,7 +77,7 @@ export const AdminProvider: React.FC<AdminProviderProps> = ({ children }) => {
       setAdminToken(token);
     } else if (token) {
       // Clear invalid token
-      localStorage.removeItem('admin_token');
+      setIsAdmin(false);
     }
   }, []);
 
@@ -83,6 +88,8 @@ export const AdminProvider: React.FC<AdminProviderProps> = ({ children }) => {
         setIsAdmin,
         isAdminEnabled,
         setIsAdminEnabled,
+        channelSelectRequiresAdmin,
+        setChannelSelectRequiresAdmin,
         adminToken,
       }}
     >