Add settings

src/components/channelSettings/ConfiguredChannels.vue

@@ -0,0 +1,36 @@
+<template>
+<h3>Channels</h3>
+<table class="table mb-5">
+  <thead>
+    <th scope="col">Name</th>
+    <th scope="col">Key</th>
+    <th scope="col">Remember</th>
+    <th scope="col" class="text-end">Delete</th>
+  </thead>
+  <tbody>
+    <tr v-for="channel in channelStore.channels" :key="channel.id">
+      <td class="w-25">{{ channel.name }}</td>
+      <td class="w-25"><Key :channel="channel" /></td>
+      <td class="w-25">
+        <div class="form-check form-switch">
+          <input v-if="channel.name === 'Default'" class="form-check-input" type="checkbox" checked disabled>
+        </div>
+      </td>
+      <td class="w-25 text-end"><i v-if="channel.name !== 'Default'" class="text-danger text-end bi bi-trash-fill"></i></td>
+    </tr>
+  </tbody>
+</table>
+</template>
+
+<script setup>
+import { useChannelStore } from '../../stores/channelStore'
+import Key from '../common/Key.vue'
+
+const channelStore = useChannelStore()
+</script>
+
+<style scope>
+i {
+  cursor: pointer;
+}
+</style>