✨ Channel manage

src/components/NotificationList.vue

@@ -1,7 +1,7 @@
 <template>
   <v-menu eager :close-on-content-click="false">
     <template #activator="{ props }">
-      <v-btn v-bind="props" stacked rounded="circle" size="small" variant="text" :loading="loading">
+      <v-btn v-bind="props" icon rounded="circle" size="small" variant="text" :loading="loading">
         <v-badge v-if="pagination.total > 0" color="error" :content="pagination.total">
           <v-icon icon="mdi-bell" />
         </v-badge>

src/components/chat/channels/ChannelAction.vue

@@ -0,0 +1,36 @@
+<template>
+  <v-menu>
+    <template #activator="{ props }">
+      <v-btn v-bind="props" icon="mdi-cog" variant="text" />
+    </template>
+
+    <v-list density="compact" lines="one">
+      <v-list-item disabled append-icon="mdi-flag" title="Report" />
+      <v-list-item v-if="isOwned" append-icon="mdi-pencil" title="Edit" @click="editChannel" />
+      <v-list-item v-if="isOwned" append-icon="mdi-delete" title="Delete" @click="deleteChannel" />
+    </v-list>
+  </v-menu>
+</template>
+
+<script setup lang="ts">
+import { useUserinfo } from "@/stores/userinfo"
+import { useChannels } from "@/stores/channels"
+import { computed } from "vue"
+
+const id = useUserinfo()
+const channels = useChannels()
+
+const props = defineProps<{ item: any }>()
+
+const isOwned = computed(() => props.item?.account_id === id.userinfo.idSet?.messaging)
+
+function editChannel() {
+  channels.related.edit_to = props.item
+  channels.show.editor = true
+}
+
+function deleteChannel() {
+  channels.related.delete_to = props.item
+  channels.show.delete = true
+}
+</script>

src/components/realms/RealmAction.vue

@@ -22,7 +22,7 @@ const realms = useRealms()
 
 const props = defineProps<{ item: any }>()
 
-const isOwned = computed(() => props.item?.account_id === id.userinfo.data.id)
+const isOwned = computed(() => props.item?.account_id === id.userinfo.idSet?.interactive)
 
 function editRealm() {
   realms.related.edit_to = props.item

src/layouts/chat.vue

@@ -4,8 +4,13 @@
       <v-app-bar-nav-icon icon="mdi-chat" :loading="loading" />
 
       <h2 class="ml-2 text-lg font-500">{{ channels.current?.name }}</h2>
-
       <p class="ml-3 text-xs opacity-80">{{ channels.current?.description }}</p>
+
+      <v-spacer />
+
+      <div v-if="channels.current">
+        <channel-action :item="channels.current" />
+      </div>
     </div>
   </v-app-bar>
 
@@ -20,6 +25,7 @@ import { request } from "@/scripts/request"
 import { useRoute } from "vue-router"
 import { ref, watch } from "vue"
 import { useChannels } from "@/stores/channels"
+import ChannelAction from "@/components/chat/channels/ChannelAction.vue"
 
 const route = useRoute()
 const channels = useChannels()
@@ -47,4 +53,13 @@ watch(
   },
   { immediate: true }
 )
+
+watch(() => channels.done, (val) => {
+  if (val) {
+    readMetadata().then(() => {
+      channels.messages = []
+      channels.done = false
+    })
+  }
+}, { immediate: true })
 </script>

src/stores/userinfo.ts

@@ -9,6 +9,7 @@ export interface Userinfo {
   isReady: boolean
   isLoggedIn: boolean
   displayName: string
+  idSet: { [id: string]: number }
   data: any
 }
 
@@ -16,6 +17,7 @@ const defaultUserinfo: Userinfo = {
   isReady: false,
   isLoggedIn: false,
   displayName: "Citizen",
+  idSet: {},
   data: null
 }
 
@@ -47,17 +49,29 @@ export const useUserinfo = defineStore("userinfo", () => {
     const res = await request("identity", "/api/users/me", {
       headers: { Authorization: `Bearer ${await getAtk()}` }
     })
-
     if (res.status !== 200) {
       return
     }
 
     const data = await res.json()
 
+    const federationResp = await Promise.all([
+      request("interactive", "/api/users/me", {
+        headers: { Authorization: `Bearer ${await getAtk()}` }
+      }),
+      request("messaging", "/api/users/me", {
+        headers: { Authorization: `Bearer ${await getAtk()}` }
+      })
+    ])
+
     userinfo.value = {
       isReady: true,
       isLoggedIn: true,
       displayName: data["nick"],
+      idSet: {
+        interactive: (await federationResp[0].json())["id"],
+        messaging: (await federationResp[1].json())["id"]
+      },
       data: data
     }
 

src/views/chat/page.vue

@@ -73,10 +73,14 @@ async function readMore({ done }: any) {
 }
 
 watch(() => channels.current, (val) => {
-  if (val) {
+    if (val) {
-    readHistory()
+      pagination.page = 1
-  }
+      pagination.total = 0
-}, { immediate: true })
+      readHistory()
+    }
+  },
+  { immediate: true }
+)
 
 function scrollTop() {
   window.scroll({ top: 0 })

src/views/realms/page.vue

@@ -105,6 +105,8 @@ watch(
   () => route.params.realmId,
   () => {
     posts.value = []
+    pagination.page = 1
+    pagination.total = 0
     readMetadata()
     readPosts()
   },