UserList stuff

irchad-web/src/components/UserCard.vue

@@ -4,9 +4,10 @@ import { useIRCStore } from "@/stores/irc";
 import { storeToRefs } from "pinia";
 
 const { selfAvatar } = storeToRefs(useIRCStore());
-const { clientInfo, setAvatar, setNick } = useIRCStore();
+const { clientInfo, setAvatar, setNick, setBio } = useIRCStore();
 const avatarDialog = ref(false);
 const newNick = ref();
+const newBio = ref();
 
 function changeAvatar() {
   newNick.value = clientInfo.nick;
@@ -19,6 +20,9 @@ function submitAvatar() {
   if (newNick.value && clientInfo.nick !== newNick.value) {
     setNick(newNick.value);
   }
+  if (newBio.value) {
+    setBio(newBio.value);
+  }
 }
 </script>
 
@@ -28,6 +32,7 @@ function submitAvatar() {
       <v-card-text>
         <v-text-field v-model="selfAvatar" label="Avatar URL" />
         <v-text-field v-model="newNick" label="Nick" />
+        <v-text-field v-model="newBio" label="Bio" />
       </v-card-text>
       <v-card-actions>
         <v-btn text="OK" @click="submitAvatar" />

irchad-web/src/components/UserList.vue

@@ -1,15 +1,34 @@
 <script setup>
 import { useIRCStore } from "@/stores/irc";
+import { computed } from "vue";
 const props = defineProps(["users"]);
 const store = useIRCStore();
+
+const sortedUsers = computed(() => {
+  if (!props.users) return [];
+  const u = [...props.users];
+  u.sort((a, b) => a.nick.localeCompare(b.nick));
+  return u;
+});
 </script>
 <template>
   <v-list density="compact">
     <v-list-item
-      v-for="user in users"
+      v-for="user in sortedUsers"
       :prepend-avatar="store.getMetadata(user.nick, 'avatar')"
+      :title="user.nick"
     >
-      {{ user.nick }}
+      <v-menu activator="parent">
+        <v-card :title="user.nick">
+          <v-card-text>
+            <p v-text="store.metadata[user.nick]?.bio"></p>
+          </v-card-text>
+          <v-list density="compact">
+            <v-list-item title="Ident"> {{ user.ident }}</v-list-item>
+            <v-list-item title="Hostname"> {{ user.hostname }}</v-list-item>
+          </v-list>
+        </v-card>
+      </v-menu>
     </v-list-item>
   </v-list>
 </template>