✨ Channel establish

src/layouts/master.vue

@@ -34,13 +34,18 @@
         </div>
       </v-toolbar>
 
-      <div class="flex-grow-1">
+      <v-list class="flex-grow-1" :opened="drawerMini ? [] : expanded" @update:opened="(val) => expanded = val">
+        <channel-list />
+        <v-divider class="border-opacity-75 my-2" />
         <realm-list />
-      </div>
+      </v-list>
 
       <!-- User info -->
-      <v-list class="border-opacity-15 h-[64px]" style="border-top-width: thin"
-              :style="`margin-bottom: ${safeAreaBottom}`">
+      <v-list
+        class="border-opacity-15 h-[64px]"
+        style="border-top-width: thin"
+        :style="`margin-bottom: ${safeAreaBottom}`"
+      >
         <v-list-item :subtitle="username" :title="nickname">
           <template #prepend>
             <v-avatar icon="mdi-account-circle" :image="id.userinfo.data?.picture" />
@@ -52,8 +57,12 @@
               </template>
 
               <v-list density="compact">
-                <v-list-item title="Solarpass" prepend-icon="mdi-passport-biometric" target="_blank"
-                             :href="passportUrl" />
+                <v-list-item
+                  title="Solarpass"
+                  prepend-icon="mdi-passport-biometric"
+                  target="_blank"
+                  :href="passportUrl"
+                />
               </v-list>
             </v-menu>
 
@@ -87,16 +96,15 @@
 
 <script setup lang="ts">
 import { computed, ref } from "vue"
-import { useEditor } from "@/stores/editor"
 import { useUserinfo } from "@/stores/userinfo"
 import { useWellKnown } from "@/stores/wellKnown"
 import { useUI } from "@/stores/ui"
-import PostTools from "@/components/publish/PostTools.vue"
-import RealmTools from "@/components/realms/RealmTools.vue"
 import RealmList from "@/components/realms/RealmList.vue"
 import NotificationList from "@/components/NotificationList.vue"
+import ChannelList from "@/components/chat/channels/ChannelList.vue"
 
 const ui = useUI()
+const expanded = ref<string[]>(["channels"])
 
 const safeAreaTop = computed(() => {
   return `${ui.safeArea.top}px`

src/layouts/plaza.vue

@@ -37,14 +37,12 @@
   </v-fab>
 
   <post-tools />
-  <realm-tools />
 </template>
 
 <script setup lang="ts">
-import PostTools from "@/components/publish/PostTools.vue"
-import RealmTools from "@/components/realms/RealmTools.vue"
 import { useEditor } from "@/stores/editor"
 import { useUserinfo } from "@/stores/userinfo"
+import PostTools from "@/components/publish/PostTools.vue"
 
 const id = useUserinfo()
 const editor = useEditor()