From bde99dc242e0efb7ee07cb978dc14586de375f0d Mon Sep 17 00:00:00 2001
From: N-Pex <npexdev@gmail.com>
Date: Mon, 12 May 2025 12:39:48 +0200
Subject: [PATCH] fill-height is now a class, dense is a density and fix all
 v-selects

---
 src/App.vue                                   |  3 +-
 src/components/Chat.vue                       |  2 +-
 src/components/CreateRoom.vue                 | 47 +++++++++++----
 src/components/DeviceList.vue                 |  2 +-
 src/components/Home.vue                       |  3 +-
 src/components/Join.vue                       | 58 ++++++++++++++-----
 src/components/RoomExport.vue                 |  2 +-
 src/components/RoomInfo.vue                   | 14 +++--
 src/components/RoomTypeSelector.vue           | 39 -------------
 src/components/SelectLanguageDialog.vue       |  4 +-
 src/components/VoiceRecorder.vue              | 10 ++--
 src/components/messages/MessageOperations.vue |  2 +-
 .../channel/MessageOperationsChannel.vue      |  2 +-
 src/plugins/utils.js                          | 11 +++-
 14 files changed, 109 insertions(+), 90 deletions(-)
 delete mode 100644 src/components/RoomTypeSelector.vue

diff --git a/src/App.vue b/src/App.vue
index 37a518e..c880269 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,9 +6,8 @@
       <!-- Loading indicator -->
       <v-container
         fluid
-        fill-height
         v-if="showLoadingScreen"
-        class="loading-container"
+        class="loading-container fill-height"
       >
         <v-row align="center" justify="center">
           <v-col class="text-center">
diff --git a/src/components/Chat.vue b/src/components/Chat.vue
index 317e6b9..5043b48 100644
--- a/src/components/Chat.vue
+++ b/src/components/Chat.vue
@@ -311,7 +311,7 @@
     <StickerPickerBottomSheet ref="stickerPickerSheet" v-on:selectSticker="sendSticker" />
 
     <!-- Loading indicator -->
-    <v-container fluid class="loading-indicator" fill-height v-if="!initialLoadDone || loading">
+    <v-container fluid class="loading-indicator fill-height" v-if="!initialLoadDone || loading">
       <v-row align="center" justify="center">
         <v-col class="text-center">
           <v-progress-circular indeterminate color="primary"></v-progress-circular>
diff --git a/src/components/CreateRoom.vue b/src/components/CreateRoom.vue
index 31370fc..02ce134 100644
--- a/src/components/CreateRoom.vue
+++ b/src/components/CreateRoom.vue
@@ -76,18 +76,39 @@
           <v-row class="align-center">
             <v-col class="py-0">
               <div class="text-start font-weight-bold">{{ $t("join.choose_name") }}</div>
-              <v-select ref="avatar" :items="availableAvatars" variant="outlined" dense @change="selectAvatar"
-                :value="selectedProfile">
+              <v-select ref="avatar" 
+                :items="availableAvatars" 
+                variant="outlined" 
+                density="compact" 
+                @update:modelValue="selectAvatar"
+                :modelValue="selectedProfile"
+                item-props
+                item-value="id"
+                return-object
+                single-line
+                class="avatar-select-control"
+                >
                 <template v-slot:selection>
-                  <v-text-field background-color="transparent" variant="solo" flat hide-details
+                  <v-text-field 
+                    background-color="transparent" 
+                    variant="solo" 
+                    flat
+                    density="compact"
+                    hide-details
+                    @keydown="$event.stopPropagation()"
+                    @keypress="$event.stopPropagation()"
+                    @keyup="$event.stopPropagation()"
                     @click.stop="(event) => event.target.focus()" @focus="$event.target.select()"
                     v-model="selectedProfile.name"></v-text-field>
                 </template>
-                <template v-slot:item="data">
-                  <v-avatar size="32">
-                    <v-img :src="data.item.image" />
-                  </v-avatar>
-                  <div class="ms-2">{{ data.item.name }}</div>
+                 <template v-slot:item="{ props }">
+                  <v-list-item v-bind="props">
+                    <template v-slot:prepend>
+                      <v-avatar size="32">
+                        <v-img :src="props.image" />
+                      </v-avatar>
+                    </template>
+                  </v-list-item>
                 </template>
               </v-select>
             </v-col>
@@ -106,7 +127,7 @@
           <v-row class="mt-0">
             <v-col class="py-0">
               <v-checkbox id="chk-accept-ua" class="mt-0" v-model="acceptUA">
-                <template slot="label">
+                <template v-slot:label>
                   <i18n-t keypath="join.accept_ua" tag="span">
                     <template v-slot:agreement>
                       <a href="./ua.html" target="_blank" @click.stop>{{ $t("join.ua") }}</a>
@@ -151,7 +172,8 @@ export default {
       selectedProfile: {
         id: "",
         image: "",
-        name: ""
+        name: "",
+        title: "",
       },
       enterRoomDialog: false,
       selectRetentionDialog: false,
@@ -335,6 +357,7 @@ export default {
     },
 
     selectAvatar(value) {
+      console.log("SELECT AVATAR", value);
       this.selectedProfile = Object.assign({}, value); // Make a copy, so editing does not destroy data
     },
 
@@ -372,4 +395,8 @@ export default {
 
 <style lang="scss">
 @import "@/assets/css/create.scss";
+
+.avatar-select-control .v-select__selection {
+  flex-basis: 100%;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/DeviceList.vue b/src/components/DeviceList.vue
index ab305e8..3777504 100644
--- a/src/components/DeviceList.vue
+++ b/src/components/DeviceList.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-list dense @click.stop="nullEvent" color="primary">
+  <v-list density="compact" @click.stop="nullEvent" color="primary">
       <v-list-item
         v-for="device in devices"
         :key="device.deviceId"
diff --git a/src/components/Home.vue b/src/components/Home.vue
index 6969a24..d152d87 100644
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -26,9 +26,8 @@
     <!-- Loading indicator -->
     <v-container
       fluid
-      fill-height
       v-if="loading"
-      class="loading-indicator"
+      class="loading-indicator transparent fill-height"
     >
       <v-row align="center" justify="center">
         <v-col class="text-center">
diff --git a/src/components/Join.vue b/src/components/Join.vue
index 466c8f7..3fc2787 100644
--- a/src/components/Join.vue
+++ b/src/components/Join.vue
@@ -22,20 +22,41 @@
 
         <v-row v-if="canEditProfile">
           <v-col cols="10" sm="7" class="py-0">
-            <v-select ref="avatar" :items="availableAvatars" variant="outlined" dense @change="selectAvatar"
-              :value="selectedProfile" single-line autofocus>
-              <template v-slot:selection>
-                <v-text-field background-color="transparent" variant="solo" flat hide-details
-                  @click.stop="(event) => event.target.focus()" @focus="$event.target.select()"
-                  v-model="selectedProfile.name"></v-text-field>
-              </template>
-              <template v-slot:item="data">
-                <v-avatar size="32">
-                  <v-img :src="data.item.image" />
-                </v-avatar>
-                <div class="ms-2">{{ data.item.name }}</div>
-              </template>
-            </v-select>
+              <v-select ref="avatar" 
+                :items="availableAvatars" 
+                variant="outlined" 
+                density="compact" 
+                @update:modelValue="selectAvatar"
+                :modelValue="selectedProfile"
+                item-props
+                item-value="id"
+                return-object
+                single-line
+                class="avatar-select-control"
+                >
+                <template v-slot:selection>
+                  <v-text-field 
+                    background-color="transparent" 
+                    variant="solo" 
+                    flat
+                    density="compact"
+                    hide-details
+                    @keydown="$event.stopPropagation()"
+                    @keypress="$event.stopPropagation()"
+                    @keyup="$event.stopPropagation()"
+                    @click.stop="(event) => event.target.focus()" @focus="$event.target.select()"
+                    v-model="selectedProfile.name"></v-text-field>
+                </template>
+                 <template v-slot:item="{ props }">
+                  <v-list-item v-bind="props">
+                    <template v-slot:prepend>
+                      <v-avatar size="32">
+                        <v-img :src="props.image" />
+                      </v-avatar>
+                    </template>
+                  </v-list-item>
+                </template>
+              </v-select>
             <v-checkbox id="chk-remember-me" class="mt-0" v-model="rememberMe" :label="$t('join.remember_me')"
               @change="onRememberMe" />
           </v-col>
@@ -59,7 +80,7 @@
         </v-row>
 
         <v-checkbox id="chk-accept-ua" class="mt-0" v-model="acceptUA">
-          <template slot="label">
+          <template v-slot:label>
             <i18n-t keypath="join.accept_ua" tag="span">
               <template v-slot:agreement>
                 <a href="./ua.html" target="_blank" @click.stop>{{ $t("join.ua") }}</a>
@@ -117,7 +138,7 @@
   </div>
 
   <!-- Loading indicator -->
-  <v-container v-else fluid fill-height class="loading-indicator transparent">
+  <v-container v-else fluid class="loading-indicator transparent fill-height">
     <v-row align="center" justify="center">
       <v-col class="text-center">
         <interactive-auth ref="interactiveAuth" v-if="waitingForRoomCreation" />
@@ -454,4 +475,9 @@ export default {
 
 <style lang="scss">
 @import "@/assets/css/join.scss";
+
+.avatar-select-control .v-select__selection {
+  flex-basis: 100%;
+}
+
 </style>
diff --git a/src/components/RoomExport.vue b/src/components/RoomExport.vue
index 7baa287..614d6da 100644
--- a/src/components/RoomExport.vue
+++ b/src/components/RoomExport.vue
@@ -38,7 +38,7 @@
     </div>
 
     <!-- Loading indicator -->
-    <v-container fluid fill-height class="exporting-indicator">
+    <v-container fluid class="exporting-indicator fill-height">
       <v-row align="center" justify="center">
         <v-col class="text-center">
           <v-progress-circular indeterminate color="primary"></v-progress-circular>
diff --git a/src/components/RoomInfo.vue b/src/components/RoomInfo.vue
index 73cbafd..68a9ff6 100644
--- a/src/components/RoomInfo.vue
+++ b/src/components/RoomInfo.vue
@@ -101,20 +101,22 @@
           :items="joinRules"
           class="mt-4"
           v-model="roomJoinRule"
+          item-title="text"
           item-value="id"
+          item-props
+          return-object
         >
           <template v-slot:selection="{ item }">
-            <v-icon color="black" class="me-2">{{ item.icon }}</v-icon>
-            {{ item.text }}
+            <v-icon color="black" class="me-2">{{ item.props.icon }}</v-icon>
+            {{ item.props.text }}
           </template>
-          <template v-slot:item="{ item, attrs, on }">
-            <v-list-item v-on="on" v-bind="attrs">
+          <template v-slot:item="{ props }">
+            <v-list-item v-bind="props">
               <template v-slot:prepend>
                 <v-avatar color="grey">
-                  <v-icon color="black">{{ item.icon }}</v-icon>
+                  <v-icon color="black">{{ props.icon }}</v-icon>
                 </v-avatar>
               </template>
-              <v-list-item-title>{{ item.text }}</v-list-item-title>
               <template v-slot:append="{ isActive }">
                 <v-list-item-action>  
                   <v-btn icon v-if="isActive">
diff --git a/src/components/RoomTypeSelector.vue b/src/components/RoomTypeSelector.vue
deleted file mode 100644
index cd32844..0000000
--- a/src/components/RoomTypeSelector.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-  <v-select variant="outlined" dense :items="availableRoomTypes" 
-    :value="modelValue"
-    @change="$emit('update:modelValue', $event)" 
-    :reduce="(obj) => obj.value">
-    <template v-slot:selection="{ item }">{{ item.title }}</template>
-    <template v-slot:item="{ item, attrs, on }">
-      <v-list-item v-on="on" v-bind="attrs" #default="{}">
-        <v-list-item-title>{{ item.title }}</v-list-item-title>
-        <v-list-item-subtitle>{{ item.description }}</v-list-item-subtitle>
-      </v-list-item>
-    </template>
-  </v-select>
-</template>
-
-<script>
-import roomTypeMixin from "./roomTypeMixin";
-
-export default {
-  name: "RoomTypeSelector",
-  mixins: [roomTypeMixin],
-  model: {
-    prop: "modelValue",
-    event: "update:modelValue",
-  },
-  props: {
-    modelValue: {
-      type: String,
-      default: function () {
-        return null;
-      },
-    },
-  }
-};
-</script>
-
-<style lang="scss">
-@import "@/assets/css/chat.scss";
-</style>
diff --git a/src/components/SelectLanguageDialog.vue b/src/components/SelectLanguageDialog.vue
index d6e4224..85535c7 100644
--- a/src/components/SelectLanguageDialog.vue
+++ b/src/components/SelectLanguageDialog.vue
@@ -15,11 +15,11 @@
       </v-card-title>
       <v-card-text>
         <v-select
-          :model-value="$i18n.locale"
+          :modelValue="$i18n.locale"
           :items="languages"
           :menu-props="{ auto: true }"
           :label="$t('profile.select_language')"
-          @update:model-value="(lang) => updateLanguage(lang)"
+          @update:modelValue="updateLanguage"
           hide-details
           prepend-icon="language"
           single-line
diff --git a/src/components/VoiceRecorder.vue b/src/components/VoiceRecorder.vue
index e252308..3adfdb4 100644
--- a/src/components/VoiceRecorder.vue
+++ b/src/components/VoiceRecorder.vue
@@ -5,7 +5,7 @@
       :class="{ 'voice-recorder': true, ptt: usePTT, row: !usePTT }"
       ref="vrroot"
     >
-      <v-container v-if="!usePTT" fluid fill-height>
+      <v-container v-if="!usePTT" fluid class="fill-height">
         <v-row align="center" class="mt-3">
           <v-col cols="4" align="center">
             <v-btn v-show="state == states.RECORDED" icon @click.stop="redo">
@@ -70,7 +70,7 @@
         </v-row>
       </v-container>
 
-      <v-container fluid fill-height>
+      <v-container fluid class="fill-height">
         <v-row align="center">
           <v-col cols="3">
             <div class="recording-time">
@@ -89,7 +89,7 @@
           v-if="willCancel"
           class="will-cancel"
         >
-          <v-container fluid fill-height>
+          <v-container fluid class="fill-height">
             <v-row align="center">
               <v-col cols="3">
                 <v-icon color="white">delete_outline</v-icon>
@@ -109,7 +109,7 @@
           v-if="recordingLocked"
           class="locked"
         >
-          <v-container fluid fill-height>
+          <v-container fluid class="fill-height">
             <v-row align="center">
               <v-col cols="3">
                 <div class="recording-time">
@@ -135,7 +135,7 @@
         v-if="state == states.ERROR"
         class="error"
       >
-        <v-container fluid fill-height>
+        <v-container fluid class="fill-height">
           <v-row align="center">
             <v-col>
               <div class="swipe-info">
diff --git a/src/components/messages/MessageOperations.vue b/src/components/messages/MessageOperations.vue
index 7bb93e5..3c9f3c8 100644
--- a/src/components/messages/MessageOperations.vue
+++ b/src/components/messages/MessageOperations.vue
@@ -1,7 +1,7 @@
 <template>
   <div :class="{'message-operations':true,'incoming':incoming,'outgoing':!incoming}">
     <template v-for="(item,index) in getEmojis" :key="item.data">
-      <v-btn v-if="userCanSendReactionAndAnswerPoll && index < maxRecents" id="btn-quick-reaction" icon @click.stop="addQuickReaction(item.data)" class="ma-0 pa-0" dense>
+      <v-btn v-if="userCanSendReactionAndAnswerPoll && index < maxRecents" id="btn-quick-reaction" icon @click.stop="addQuickReaction(item.data)" class="ma-0 pa-0" density="compact">
         <span class="recent-emoji">{{ item.data }}</span>
       </v-btn>
     </template>
diff --git a/src/components/messages/channel/MessageOperationsChannel.vue b/src/components/messages/channel/MessageOperationsChannel.vue
index 7a0c924..668400b 100644
--- a/src/components/messages/channel/MessageOperationsChannel.vue
+++ b/src/components/messages/channel/MessageOperationsChannel.vue
@@ -1,6 +1,6 @@
 <template>
   <div :class="{ 'message-operations': true, 'incoming': incoming, 'outgoing': !incoming }">
-    <v-list dense>
+    <v-list density="compact">
       <v-list-item key="edit" v-if="isEditable" @click.stop="edit">
         <template v-slot:prepend><v-icon>$vuetify.icons.ic_edit</v-icon></template>
         <v-list-item-title>{{ $t("menu.edit") }}</v-list-item-title>
diff --git a/src/plugins/utils.js b/src/plugins/utils.js
index 3cf846d..011b27e 100644
--- a/src/plugins/utils.js
+++ b/src/plugins/utils.js
@@ -782,14 +782,19 @@ class Util {
 
   getDefaultAvatars() {
     var images = [];
-    const modules = import.meta.glob("../assets/avatars/*.(jpeg|jpg|png)", { eager: true });
+    const modules = import.meta.glob("@/assets/avatars/*.{jpeg,jpg,png}", { 
+      query: '?url',
+      import: 'default',
+      eager: true
+    });
     Object.keys(modules).map((path) => {
       var name = path.split("_")[1];
       name = name.slice(0, name.indexOf("."));
       name = name.charAt(0).toUpperCase() + name.slice(1);
-      const image = modules[path].default;
+      const image = modules[path];
       const randomNumber = parseInt(this.randomString(4, "0123456789")).toFixed();
-      images.push({ id: path, image: image, name: "Guest " + name + " " + randomNumber });
+      const title = "Guest " + name + " " + randomNumber;
+      images.push({ id: path, image: image, name: title, title: title });
     });
     return images;
   }