feat: add notification channel selector

frontend/src/api/client.ts

@@ -43,6 +43,8 @@ export const api = {
 
   connect: (channelId: string) => post('/api/connect', { channel_id: channelId }),
   disconnect: () => post('/api/disconnect'),
+  setNotificationChannel: (channelId: string) =>
+    post('/api/notification_channel', { channel_id: channelId }),
 
   play: (query: string) => post('/api/play', { query }),
   playFile: (filename: string) => post('/api/play_file', { filename }),

frontend/src/components/VoiceChannelPanel.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
-import { LogIn, LogOut, Radio } from 'lucide-vue-next'
+import { Bell, LogIn, LogOut, Radio } from 'lucide-vue-next'
 import { api } from '@/api/client'
 import { useToasts } from '@/composables/useToasts'
 import type { BotStatus } from '@/types/status'
@@ -9,9 +9,12 @@ const props = defineProps<{ status: BotStatus | null }>()
 
 const { notify, run } = useToasts()
 const selected = ref('')
+const selectedNotification = ref('')
 
 const channels = computed(() => props.status?.voice_channels ?? [])
 const active = computed(() => props.status?.active_voice_channel ?? null)
+const notificationChannels = computed(() => props.status?.text_channels ?? [])
+const activeNotificationId = computed(() => props.status?.active_text_channel_id ?? null)
 
 // Wybór podąża za realnym połączeniem, a bez niego domyślnie wskazuje pierwszy kanał.
 watch(
@@ -26,6 +29,18 @@ watch(
   { immediate: true },
 )
 
+watch(
+  [activeNotificationId, notificationChannels],
+  ([activeChannel, available]) => {
+    if (activeChannel) {
+      selectedNotification.value = activeChannel
+    } else if (!available.some((channel) => channel.channel_id === selectedNotification.value)) {
+      selectedNotification.value = available[0]?.channel_id ?? ''
+    }
+  },
+  { immediate: true },
+)
+
 async function toggle() {
   if (active.value) {
     await run(() => api.disconnect(), 'Rozłączono z kanału głosowego', 'Błąd rozłączania')
@@ -37,6 +52,15 @@ async function toggle() {
   }
   await run(() => api.connect(selected.value), 'Połączono z kanałem głosowym!', 'Nie udało się połączyć')
 }
+
+async function setNotificationChannel() {
+  if (!selectedNotification.value) return
+  await run(
+    () => api.setNotificationChannel(selectedNotification.value),
+    'Ustawiono kanał logów',
+    'Nie udało się ustawić kanału logów',
+  )
+}
 </script>
 
 <template>
@@ -73,5 +97,50 @@ async function toggle() {
         {{ active ? 'Odłącz' : 'Połącz' }}
       </button>
     </div>
+    <div class="notification-channel-row">
+      <label for="notification-channel"><Bell /> Kanał logów</label>
+      <select
+        id="notification-channel"
+        v-model="selectedNotification"
+        class="premium-select"
+        :disabled="!notificationChannels.length"
+        @change="setNotificationChannel"
+      >
+        <option
+          v-if="!notificationChannels.length"
+          value=""
+        >
+          Brak dostępnych kanałów tekstowych
+        </option>
+        <option
+          v-for="channel in notificationChannels"
+          :key="channel.channel_id"
+          :value="channel.channel_id"
+        >
+          # {{ channel.channel_name }}
+        </option>
+      </select>
+    </div>
   </div>
 </template>
+
+<style scoped>
+.notification-channel-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 14px;
+}
+
+.notification-channel-row label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 130px;
+  color: var(--text-muted);
+}
+
+.notification-channel-row .premium-select {
+  flex: 1;
+}
+</style>