✨ Channel establish

src/components/chat/channels/ChannelDeletion.vue

@@ -0,0 +1,61 @@
+<template>
+  <v-card title="Delete a realm" class="min-h-[540px]" :loading="loading">
+    <template #text>
+      You are deleting a channel
+      <b>{{ channels.related.delete_to?.name }}</b> <br />
+      All messaging belonging to this channel will be deleted and never appear again. Are you confirm?
+    </template>
+    <template #actions>
+      <div class="w-full flex justify-end">
+        <v-btn color="grey-darken-3" @click="channels.show.delete = false">Not really</v-btn>
+        <v-btn color="error" :disabled="loading" @click="deletePost">Yes</v-btn>
+      </div>
+    </template>
+  </v-card>
+
+  <v-snackbar v-model="success" :timeout="3000">The realm has been deleted.</v-snackbar>
+
+  <!-- @vue-ignore -->
+  <v-snackbar v-model="error" :timeout="5000">Something went wrong... {{ error }}</v-snackbar>
+</template>
+
+<script setup lang="ts">
+import { request } from "@/scripts/request"
+import { getAtk } from "@/stores/userinfo"
+import { useChannels } from "@/stores/channels"
+import { useRoute, useRouter } from "vue-router"
+import { ref } from "vue"
+
+const route = useRoute()
+const router = useRouter()
+const channels = useChannels()
+
+const emits = defineEmits(["relist"])
+
+const error = ref<string | null>(null)
+const success = ref(false)
+const loading = ref(false)
+
+async function deletePost() {
+  const target = channels.related.delete_to
+  const url = `/api/channels/${target.id}`
+
+  loading.value = true
+  const res = await request("messaging", url, {
+    method: "DELETE",
+    headers: { Authorization: `Bearer ${await getAtk()}` }
+  })
+  if (res.status !== 200) {
+    error.value = await res.text()
+  } else {
+    success.value = true
+    channels.show.delete = false
+    channels.related.delete_to = null
+    emits("relist")
+    if (route.name?.toString()?.startsWith("realm")) {
+      router.push({ name: "explore" })
+    }
+  }
+  loading.value = false
+}
+</script>

src/components/chat/channels/ChannelEditor.vue

@@ -0,0 +1,77 @@
+<template>
+  <v-card title="Establish a channel" prepend-icon="mdi-pound-box" class="min-h-[540px]" :loading="loading">
+    <v-form @submit.prevent="submit">
+      <v-card-text>
+        <v-text-field label="Alias" variant="outlined" density="comfortable" hint="Must be unique"
+                      v-model="data.alias" />
+        <v-text-field label="Name" variant="outlined" density="comfortable" v-model="data.name" />
+        <v-textarea label="Description" variant="outlined" density="comfortable" v-model="data.description" />
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+
+        <v-btn type="reset" color="grey-darken-3" @click="channels.show.editor = false">Cancel</v-btn>
+        <v-btn type="submit" :disabled="loading">Save</v-btn>
+      </v-card-actions>
+    </v-form>
+  </v-card>
+
+  <!-- @vue-ignore -->
+  <v-snackbar v-model="error" :timeout="5000">Something went wrong... {{ error }}</v-snackbar>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "vue"
+import { getAtk } from "@/stores/userinfo"
+import { request } from "@/scripts/request"
+import { useChannels } from "@/stores/channels"
+
+const emits = defineEmits(["relist"])
+
+const channels = useChannels()
+
+const error = ref<null | string>(null)
+const loading = ref(false)
+
+const data = ref({
+  alias: "",
+  name: "",
+  description: ""
+})
+
+async function submit(evt: SubmitEvent) {
+  const form = evt.target as HTMLFormElement
+  const payload = data.value
+  if (!payload.name) return
+
+  const url = channels.related.edit_to ? `/api/channels/${channels.related.edit_to?.id}` : "/api/channels"
+  const method = channels.related.edit_to ? "PUT" : "POST"
+
+  loading.value = true
+  const res = await request("messaging", url, {
+    method: method,
+    headers: { "Content-Type": "application/json", Authorization: `Bearer ${await getAtk()}` },
+    body: JSON.stringify(payload)
+  })
+  if (res.status !== 200) {
+    error.value = await res.text()
+  } else {
+    emits("relist")
+    form.reset()
+    channels.done = true
+    channels.show.editor = false
+    channels.related.edit_to = null
+  }
+  loading.value = false
+}
+
+watch(
+  channels.related,
+  (val) => {
+    if (val.edit_to) {
+      data.value = JSON.parse(JSON.stringify(val.edit_to))
+    }
+  },
+  { immediate: true }
+)
+</script>

src/components/chat/channels/ChannelList.vue

@@ -0,0 +1,42 @@
+<template>
+  <v-list-group value="channels">
+    <template #activator="{ props }">
+      <v-list-item
+        v-bind="props"
+        prepend-icon="mdi-chat"
+        title="Channels"
+      />
+    </template>
+
+    <v-list-item
+      v-for="item in channels.available"
+      exact
+      append-icon="mdi-pound-box"
+      :to="{ name: 'chat.channel', params: { channel: item.alias } }"
+      :title="item.name"
+    />
+
+    <v-list-item
+      append-icon="mdi-plus"
+      title="Create a channel"
+      variant="plain"
+      :disabled="!id.userinfo.isLoggedIn"
+      @click="createChannel"
+    />
+  </v-list-group>
+</template>
+
+<script setup lang="ts">
+import { useUserinfo } from "@/stores/userinfo"
+import { useRealms } from "@/stores/realms"
+import { useChannels } from "@/stores/channels"
+
+const id = useUserinfo()
+const channels = useChannels()
+
+function createChannel() {
+  channels.related.edit_to = null
+  channels.related.delete_to = null
+  channels.show.editor = true
+}
+</script>

src/components/chat/channels/ChannelTools.vue

@@ -0,0 +1,16 @@
+<template>
+  <v-bottom-sheet class="max-w-[480px]" v-model="channels.show.editor">
+    <channel-editor @relist="channels.list" />
+  </v-bottom-sheet>
+  <v-bottom-sheet class="max-w-[480px]" v-model="channels.show.delete">
+    <channel-deletion @relist="channels.list" />
+  </v-bottom-sheet>
+</template>
+
+<script setup lang="ts">
+import { useChannels } from "@/stores/channels"
+import ChannelEditor from "@/components/chat/channels/ChannelEditor.vue"
+import ChannelDeletion from "@/components/chat/channels/ChannelDeletion.vue"
+
+const channels = useChannels()
+</script>