✨ Channel establish

src/components/realms/RealmList.vue

@@ -1,27 +1,29 @@
 <template>
-  <v-list density="comfortable">
-    <v-list-subheader>
-      Realms
-      <v-badge color="warning" content="Alpha" inline />
-    </v-list-subheader>
+  <v-list-group value="realms">
+    <template #activator="{ props }">
+      <v-list-item
+        v-bind="props"
+        prepend-icon="mdi-account-box-multiple"
+        title="Realms"
+      />
+    </template>
 
     <v-list-item
       v-for="item in realms.available"
       exact
-      prepend-icon="mdi-account-multiple"
+      append-icon="mdi-account-multiple"
       :to="{ name: 'realms.page', params: { realmId: item.id } }"
       :title="item.name"
     />
 
-    <v-divider v-if="realms.available.length > 0" class="border-opacity-75 my-2" />
-
     <v-list-item
-      prepend-icon="mdi-plus"
+      append-icon="mdi-plus"
       title="Create a realm"
+      variant="plain"
       :disabled="!id.userinfo.isLoggedIn"
       @click="createRealm"
     />
-  </v-list>
+  </v-list-group>
 </template>
 
 <script setup lang="ts">