Vuetify updates

src/App.vue

@@ -22,7 +22,7 @@
       </v-container>
 
       <v-skeleton-loader
-        type="list-item-avatar-two-line, divider, list-item-three-line, card-heading"
+        type="list-item-avatar-two-line,divider,list-item-three-line,heading"
         v-if="showLoadingScreen"
       ></v-skeleton-loader>
       <unsupported-browser-alert />
@@ -227,7 +227,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import '~vuetify/src/styles/settings/_variables.scss';
+@import 'vuetify/settings';
 @import '@/assets/css/variables';
 
 .copyright {

src/assets/css/chat.scss

@@ -1,4 +1,4 @@
-@import "~vuetify/src/styles/settings/_variables.scss";
+@import "vuetify/settings";
 @import "@/assets/css/main.scss";
 @import "@/assets/css/vendors/v-emoji-picker";
 @import "@/assets/css/filedrop.scss";

src/assets/css/join.scss

@@ -1,4 +1,4 @@
-@import "~vuetify/src/styles/settings/_variables.scss";
+@import "vuetify/settings";
 @import "@/assets/css/main.scss";
 
 .v-btn.btn-light {

src/components/AudioLayout.vue

@@ -9,7 +9,7 @@
       <transition-group name="list" tag="div">
         <v-avatar v-for="(member) in recordingMembersExceptMe" :key="member.userId" class="typing-user" size="32" color="grey">
           <AuthedImage v-if="memberAvatar(member)" :src="memberAvatar(member)" />
-          <span v-else class="white--text headline">{{
+          <span v-else class="text-white headline">{{
             member.name.substring(0, 1).toUpperCase()
           }}</span>
         </v-avatar>
@@ -23,7 +23,7 @@
       <v-avatar v-if="currentAudioEvent" class="avatar" ref="avatar" size="32" color="#ededed"
         @click.stop="otherAvatarClicked($refs.avatar.$el)">
         <img v-if="messageEventAvatar(currentAudioEvent)" :src="messageEventAvatar(currentAudioEvent)" />
-        <span v-else class="white--text headline">{{
+        <span v-else class="text-white headline">{{
           eventSenderDisplayName(currentAudioEvent).substring(0, 1).toUpperCase()
         }}</span>
       </v-avatar>
@@ -34,7 +34,7 @@
       <transition-group name="list" tag="div">
         <v-avatar v-for="reaction in reactions" :key="reaction.member.userId" class="typing-user" size="32" color="grey">
           <AuthedImage v-if="memberAvatar(reaction.member)" :src="memberAvatar(reaction.member)" />
-          <span v-else class="white--text headline">{{
+          <span v-else class="text-white headline">{{
             reaction.member.name.substring(0, 1).toUpperCase()
           }}</span>
           <div class="reaction-emoji">{{ reaction.emoji }}</div>

src/components/BottomSheet.vue

@@ -163,7 +163,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '~vuetify/src/styles/settings/_variables.scss';
+@import 'vuetify/settings';
 @import '@/assets/css/variables';
 .sheetContent {
   position:absolute;

src/components/Chat.vue

@@ -238,7 +238,7 @@
                 accept="image/*,audio/*,video/*,.mp3,.mp4,.wav,.m4a,.pdf,application/pdf,.apk,application/vnd.android.package-archive,.ipa,.zip,application/zip,application/x-zip-compressed,multipart/x-zip" class="d-none" multiple/>
 
     <div v-if="currentFileInputsDialog && !useFileModeNonAdmin">
-      <v-dialog v-model="currentFileInputsDialog" class="ma-0 pa-0" :width="$vuetify.breakpoint.smAndUp ? '50%' : '85%'" persistent scrollable>
+      <v-dialog v-model="currentFileInputsDialog" class="ma-0 pa-0" :width="$vuetify.display.smAndUp ? '50%' : '85%'" persistent scrollable>
         <v-card class="ma-0 pa-0">
           <v-card-text v-if="!currentFileInputs.length">
             {{ this.$t("message.preparing_to_upload")}}
@@ -249,7 +249,7 @@
           </v-card-text>
           <template v-else>
             <v-card-title>
-              <div v-if="currentSendErrorExceededFile" class="red--text">{{ currentSendErrorExceededFile }}</div>
+              <div v-if="currentSendErrorExceededFile" class="text-red">{{ currentSendErrorExceededFile }}</div>
               <span v-else> {{ $t('message.send_attachements_dialog_title') }} </span>
             </v-card-title>
             <v-divider></v-divider>

src/components/ChatHeader.vue

@@ -7,7 +7,7 @@
       >
         <v-avatar size="48" class="clickable me-2 chat-header-avatar" color="grey" @click.stop="onAvatarClicked">
           <AuthedImage v-if="roomAvatar" :src="roomAvatar" />
-          <span v-else class="white--text headline">{{
+          <span v-else class="text-white headline">{{
             room.name.substring(0, 1).toUpperCase()
           }}</span>
         </v-avatar>
@@ -34,7 +34,7 @@
         <v-avatar :class="{ 'avatar-32': true, 'clickable': true, 'popup-open': showProfileInfo }" size="26"
           color="#e0e0e0" @click.stop="showProfileInfo = true">
           <AuthedImage v-if="userAvatar" :src="userAvatar" />
-          <span v-else class="white--text">{{ userAvatarLetter }}</span>
+          <span v-else class="text-white">{{ userAvatarLetter }}</span>
         </v-avatar>
       </v-col>
       <v-col cols="auto" class="text-end ma-0 pa-0 ms-1">

src/components/ChatHeaderPrivate.vue

@@ -7,7 +7,7 @@
       >
         <v-avatar size="48" class="clickable me-2 chat-header-avatar rounded-circle" color="grey" @click.stop="onAvatarClicked">
           <v-img v-if="privatePartyAvatar(40)" :src="privatePartyAvatar(40)" />
-          <span v-else class="white--text headline">{{
+          <span v-else class="text-white headline">{{
             privateParty.name.substring(0, 1).toUpperCase()
           }}</span>
         </v-avatar>
@@ -38,7 +38,7 @@
         <v-avatar :class="{ 'avatar-32': true, 'clickable': true, 'popup-open': showProfileInfo }" size="26"
           color="#e0e0e0" @click.stop="showProfileInfo = true">
           <AuthedImage v-if="userAvatar" :src="userAvatar" />
-          <span v-else class="white--text">{{ userAvatarLetter }}</span>
+          <span v-else class="text-white">{{ userAvatarLetter }}</span>
         </v-avatar>
       </v-col>
 

src/components/CreateChannel.vue

@@ -18,7 +18,7 @@
           <v-text-field v-model="roomTopic" :label="$t('createchannel.channel_topic')"
             v-bind="{ ...roomTopicInputFields }" v-on="{ ...roomTopicInputListeners }"></v-text-field>
           <div class="caption-2 text-center mt-2 mb-8">{{ $t('createchannel.channel_topic_label') }}</div>
-          <div class="error--text" v-if="errorMessage != null">{{ this.errorMessage }}</div>
+          <div class="text-red" v-if="errorMessage != null">{{ this.errorMessage }}</div>
 
           <interactive-auth ref="interactiveAuth" />
 

src/components/CreateFileDrop.vue

@@ -16,7 +16,7 @@
           <v-text-field v-model="roomName" :label="$t('createfiledrop.filedrop_name')"
             v-bind="{ ...roomNameInputFields }" v-on="{ ...roomNameInputListeners }"></v-text-field>
 
-          <div class="error--text" v-if="errorMessage != null">{{ this.errorMessage }}</div>
+          <div class="text-red" v-if="errorMessage != null">{{ this.errorMessage }}</div>
 
           <interactive-auth ref="interactiveAuth" />
 

src/components/CreatePollDialog.vue

@@ -4,7 +4,7 @@
     v-show="room"
     scrollable
     class="ma-0 pa-0"
-    :width="$vuetify.breakpoint.smAndUp ? '940px' : '95%'"
+    :width="$vuetify.display.smAndUp ? '940px' : '95%'"
   >
   <v-card>
     <v-card-title>

src/components/CreateRoom.vue

@@ -48,7 +48,7 @@
           </v-card>
 
 
-          <div class="error--text" v-if="errorMessage != null">{{ this.errorMessage }}</div>
+          <div class="text-red" v-if="errorMessage != null">{{ this.errorMessage }}</div>
 
           <!-- Create button -->
           <v-btn :disabled="!formIsValid || creatingRoom" color="#6360F0" depressed @click.stop="onCreate"
@@ -70,7 +70,7 @@
     <input id="user-avatar-picker" ref="useravatar" type="file" name="user-avatar"
       @change="handlePickedUserAvatar($event)" accept="image/*" class="d-none" />
 
-    <v-dialog v-model="enterRoomDialog" :width="$vuetify.breakpoint.smAndUp ? '50%' : '90%'">
+    <v-dialog v-model="enterRoomDialog" :width="$vuetify.display.smAndUp ? '50%' : '90%'">
       <v-card>
         <v-container v-if="canEditProfile" class="pa-10">
           <v-row class="align-center">

src/components/DeviceList.vue

@@ -1,6 +1,5 @@
 <template>
-  <v-list dense @click.native.stop="nullEvent">
+  <v-list dense @click.stop="nullEvent" color="primary">
-    <v-list-item-group color="primary">
       <v-list-item
         v-for="device in devices"
         :key="device.deviceId"
@@ -27,7 +26,6 @@
           </v-list-item-action>
         </template>
       </v-list-item>
-    </v-list-item-group>
   </v-list>
 </template>
 

src/components/GetLink.vue

@@ -11,9 +11,9 @@
             :error-messages="userErrorMessage" required v-on:keyup.enter="onUsernameEnter"
             v-on:keydown="hasError = false"></v-text-field>
 
-          <!-- <div class="error--text" v-if="loadingLoginFlows">Loading login flows...</div> -->
+          <!-- <div class="text-red" v-if="loadingLoginFlows">Loading login flows...</div> -->
 
-          <div class="error--text" v-if="hasError">{{ this.message }}</div>
+          <div class="text-red" v-if="hasError">{{ this.message }}</div>
 
           <interactive-auth ref="interactiveAuth" />
 

src/components/Invite.vue

@@ -29,20 +29,21 @@
     </div>
 
     <div class="flex-grow-1 flex-shrink-1">
-      <v-list class="member ma-2">
+      <v-list class="member ma-2" v-model:selected="selectedMembers">
-        <v-list-item-group multiple v-model="selectedMembers">
           <v-list-item
             v-for="member in $matrix.getAllFriends()"
             :key="member.userId"
             :value="member"
           >
-            <template v-slot:default="{ active }">
+            <template v-slot:prepend>
-              <v-list-item-avatar color="grey">
+              <v-avatar color="grey">
                 <AuthedImage v-if="memberAvatar(member)" :src="memberAvatar(member)" />
-                <span v-else class="white--text headline">{{
+                <span v-else class="text-white headline">{{
                   member.name.substring(0, 1).toUpperCase()
                 }}</span>
-              </v-list-item-avatar>
+              </v-avatar>
+            </template>
+            <template v-slot:default="{ active }">
                 <v-list-item-title>{{ memberName(member) }}</v-list-item-title>
               <v-list-item-subtitle
                 v-text="member.userId"
@@ -54,7 +55,6 @@
               </v-list-item-action>
             </template>
           </v-list-item>
-        </v-list-item-group>
       </v-list>
     </div>
   </div>

src/components/Join.vue

@@ -5,7 +5,7 @@
         <div class="text-center">
           <v-avatar class="join-avatar">
             <AuthedImage v-if="roomAvatar" :src="roomAvatar" />
-            <span v-else class="white--text headline">
+            <span v-else class="text-white headline">
               {{ roomName.substring(0, 1).toUpperCase() }}
             </span>
           </v-avatar>
@@ -51,7 +51,7 @@
             <div class="d-inline-block">
               <v-avatar color="#e0e0e0">
                 <AuthedImage v-if="userAvatar" :src="userAvatar" />
-                <span v-else class="white--text headline">{{ userAvatarLetter }}</span>
+                <span v-else class="text-white headline">{{ userAvatarLetter }}</span>
               </v-avatar>
             </div>
             {{ userDisplayName }}

src/components/LeaveRoomDialog.vue

@@ -3,7 +3,7 @@
     v-model="showDialog"
     v-show="room"
     class="ma-0 pa-0"
-    :width="$vuetify.breakpoint.smAndUp ? '688px' : '95%'"
+    :width="$vuetify.display.smAndUp ? '688px' : '95%'"
   >
     <div class="dialog-content text-center">
       <template v-if="roomJoinRule == 'public'">

src/components/Login.vue

@@ -42,7 +42,7 @@
           v-on:blur="onUsernameBlur"
         ></v-text-field>
 
-        <div class="error--text" v-if="loadingLoginFlows">Loading login flows...</div>
+        <div class="text-red" v-if="loadingLoginFlows">Loading login flows...</div>
 
         <v-text-field
           v-show="showPasswordField"
@@ -67,7 +67,7 @@
             }
           "
         ></v-text-field>
-        <div class="error--text" v-if="hasError">{{ this.message }}</div>
+        <div class="text-red" v-if="hasError">{{ this.message }}</div>
         <v-checkbox
           id="chk-remember-me"
           class="mt-0"

src/components/LogoutRoomDialog.vue

@@ -2,7 +2,7 @@
   <v-dialog
     :value="showLogoutPopup"
     class="ma-0 pa-0"
-    :width="$vuetify.breakpoint.smAndUp ? '688px' : '95%'"
+    :width="$vuetify.display.smAndUp ? '688px' : '95%'"
     @click:outside="$emit('onOutsideLogoutPopupClicked')"
   >
     <div class="dialog-content text-center">

src/components/MessageRetentionDialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-dialog v-model="showDialog" v-show="room" class="ma-0 pa-0" :width="$vuetify.breakpoint.smAndUp ? '688px' : '95%'">
+  <v-dialog v-model="showDialog" v-show="room" class="ma-0 pa-0" :width="$vuetify.display.smAndUp ? '688px' : '95%'">
     <div class="dialog-content text-center">
       <template>
         <h2>{{ $t("room_info.message_retention") }}</h2>

src/components/MoreMenuPopup.vue

@@ -11,7 +11,7 @@
             <v-col cols="auto" class="me-2">
               <v-avatar class="avatar-32" size="32" color="#e0e0e0" @click.stop="viewProfile">
                 <AuthedImage v-if="userAvatar" :src="userAvatar" />
-                <span v-else class="white--text">{{ userAvatarLetter }}</span>
+                <span v-else class="text-white">{{ userAvatarLetter }}</span>
               </v-avatar>
             </v-col>
             <v-col>
@@ -84,7 +84,7 @@ export default {
 
 <style lang="scss">
 @import "@/assets/css/chat.scss";
-@import '~vuetify/src/styles/settings/_variables.scss';
+@import 'vuetify/settings';
 
 .popup-wrapper {
   width: fit-content;

src/components/Profile.vue

@@ -26,7 +26,7 @@
             v-if="isAvatarLoaded"
           >
             <AuthedImage v-if="userAvatar" :src="userAvatar" />
-            <span v-else class="white--text">{{ userAvatarLetter }}</span>
+            <span v-else class="text-white">{{ userAvatarLetter }}</span>
             <input
               id="avatar-picker"
               ref="avatar"
@@ -111,7 +111,7 @@
     <v-dialog
       v-model="showEditPasswordDialog"
       class="ma-0 pa-0"
-      :width="$vuetify.breakpoint.smAndUp ? '940px' : '80%'"
+      :width="$vuetify.display.smAndUp ? '940px' : '80%'"
     >
       <v-card :disabled="settingPassword">
         <v-card-title>{{ $matrix.currentUser.is_guest ? $t("profile.set_password") : $t("profile.change_password") }}</v-card-title>
@@ -144,7 +144,7 @@
             :type="showPassword2 ? 'text' : 'password'"
             @click:append="showPassword2 = !showPassword2"
           />
-          <div class="red--text" v-if="passwordErrorMessage">
+          <div class="text-red" v-if="passwordErrorMessage">
             {{ passwordErrorMessage }}
           </div>
         </v-card-text>
@@ -177,7 +177,7 @@
     <v-dialog
       v-model="showEditDisplaynameDialog"
       class="ma-0 pa-0"
-      :width="$vuetify.breakpoint.smAndUp ? '940px' : '80%'"
+      :width="$vuetify.display.smAndUp ? '940px' : '80%'"
     >
       <v-card>
         <v-card-title>{{ $t("profile.display_name") }}</v-card-title>
@@ -218,7 +218,7 @@
       v-model="notificationDialog"
       persistent
       class="ma-0 pa-0"
-      :width="$vuetify.breakpoint.smAndUp ? '688px' : '95%'"
+      :width="$vuetify.display.smAndUp ? '688px' : '95%'"
     >
       <div class="dialog-content text-center">
         <v-icon  size="30">notifications_active</v-icon>

src/components/ProfileInfoPopup.vue

@@ -34,7 +34,7 @@
             <v-col cols="auto" class="pa-2">
               <v-avatar class="avatar-32" size="32" color="#e0e0e0" @click.stop="viewProfile">
                 <AuthedImage v-if="userAvatar" :src="userAvatar" />
-                <span v-else class="white--text">{{ userAvatarLetter }}</span>
+                <span v-else class="text-white">{{ userAvatarLetter }}</span>
               </v-avatar>
             </v-col>
           </v-row>
@@ -120,7 +120,7 @@ export default {
 
 <style lang="scss">
 @import "@/assets/css/chat.scss";
-@import '~vuetify/src/styles/settings/_variables.scss';
+@import 'vuetify/settings';
 
 .profile-info-popup {
   font-family: "Inter", sans-serif !important;

src/components/PurgeRoomDialog.vue

@@ -3,7 +3,7 @@
     persistent
     v-model="showDialog"
     v-show="room" class="ma-0 pa-0"
-    :width="$vuetify.breakpoint.smAndUp ? '688px' : '95%'"
+    :width="$vuetify.display.smAndUp ? '688px' : '95%'"
   >
     <div v-if="timeout == -1" class="dialog-content text-center">
       <template>

src/components/QRCodePopup.vue

@@ -2,7 +2,7 @@
   <v-dialog
     v-model="showDialog"
     class="ma-0 pa-0"
-    :width="$vuetify.breakpoint.smAndUp ? '940px' : '95%'"
+    :width="$vuetify.display.smAndUp ? '940px' : '95%'"
   >
     <div class="dialog-content text-center" ref="qrContainer">
       <div class="d-flex justify-center">

src/components/QuoteView.vue

@@ -8,11 +8,11 @@
         <div v-if="roomWasPurged">
           <v-img src="@/assets/icons/trash.svg" />
         </div>
-        <h2 v-if="roomWasPurged" class="white--text mt-2 mb-8">
+        <h2 v-if="roomWasPurged" class="text-white mt-2 mb-8">
           {{ $t("goodbye.room_deleted") }}
         </h2>
-        <div class="quote white--text">{{ quote }}</div>
+        <div class="quote text-white">{{ quote }}</div>
-        <div class="author white--text mt-4">- {{ author }}</div>
+        <div class="author text-white mt-4">- {{ author }}</div>
 
         <v-btn
           v-if="joinedToAnyRoom"
@@ -42,13 +42,13 @@
         class="goodbye-profile clickable"
         @click.stop="viewOtherRooms"
       >
-        <div class="d-inline-block me-2 white--text">
+        <div class="d-inline-block me-2 text-white">
           {{ $t("profile_info_popup.you_are") }}
         </div>
 
         <div
           v-if="$matrix.currentUser.is_guest"
-          class="d-inline-block me-2 white--text"
+          class="d-inline-block me-2 text-white"
         >
           <i18n-t keypath="profile_info_popup.identity_temporary" tag="span">
             <template v-slot:displayName>
@@ -56,7 +56,7 @@
             </template>
           </i18n-t>
         </div>
-        <div v-else class="d-inline-block me-2 white--text">
+        <div v-else class="d-inline-block me-2 text-white">
           <i18n-t keypath="profile_info_popup.identity" tag="span">
             <template v-slot:displayName>
               <b>{{ displayName }}</b>
@@ -69,7 +69,7 @@
           color="#e0e0e0"
         >
           <AuthedImage v-if="userAvatar" :src="userAvatar" />
-          <span v-else class="white--text">{{ userAvatarLetter }}</span>
+          <span v-else class="text-white">{{ userAvatarLetter }}</span>
         </v-avatar>
       </div>
     </transition>

src/components/ReportRoomDialog.vue

@@ -3,7 +3,7 @@
     v-model="showDialog"
     v-show="room"
     class="ma-0 pa-0"
-    :width="$vuetify.breakpoint.smAndUp ? '688px' : '95%'"
+    :width="$vuetify.display.smAndUp ? '688px' : '95%'"
   >
     <div class="dialog-content text-center">
       <h2 class="dialog-title">{{ $t("room_info.report") }}</h2>

src/components/RoomAvatarPicker.vue

@@ -1,7 +1,7 @@
 <template>
   <v-avatar :class="{'room-avatar':true, 'cursor-pointer':userCanPurgeRoom}" @click="userCanPurgeRoom?showRoomAvatarPicker():null" v-if="isRoomAvatarLoaded">
     <AuthedImage v-if="roomAvatar" :src="roomAvatar"/>
-    <span v-else class="white--text headline">{{
+    <span v-else class="text-white headline">{{
       roomName.substring(0, 1).toUpperCase()
     }}</span>
       <input

src/components/RoomInfo.vue

@@ -109,9 +109,11 @@
           </template>
           <template v-slot:item="{ item, attrs, on }">
             <v-list-item v-on="on" v-bind="attrs" #default="{ active }">
-              <v-list-item-avatar>
+              <template v-slot:prepend>
-                <v-icon color="black">{{ item.icon }}</v-icon>
+                <v-avatar color="grey">
-              </v-list-item-avatar>
+                  <v-icon color="black">{{ item.icon }}</v-icon>
+                </v-avatar>
+              </template>
               <v-list-item-title v-text="item.text"></v-list-item-title>
               <v-list-item-action>
                 <v-btn icon v-if="active">
@@ -141,14 +143,17 @@
       <v-card-text v-if="canViewRetentionPolicy">
         <v-list v-if="canChangeRetentionPolicy">
           <v-list-item link v-on:click="showMessageRetentionDialog = true" class="px-0 pb-0">
-            <v-list-item-avatar class="mr-0 pb-0 mb-0">
+            <template v-slot:prepend>
-              <v-img
+              <v-avatar class="mr-0 pb-0 mb-0">
-                contain
+                <v-img
-                width="24"
+                  contain
-                height="24"
+                  width="24"
-                src="@/assets/icons/timer.svg"
+                  height="24"
-              />
+                  src="@/assets/icons/timer.svg"
-            </v-list-item-avatar>
+                />
+              </v-avatar>
+            </template>
+
             {{ messageRetentionDisplay }}
 
             <v-list-item-action class="pb-0 mb-0">
@@ -197,10 +202,8 @@
         <div>{{ members.length }}</div></v-card-title
       >
       <v-list>
-        <v-list-item-group>
+          <template  v-for="(member, index) in members" :key="member.userId">
-          <template  v-for="(member, index) in members" >
             <v-list-item
-              :key="member.userId"
               class="member"
               v-show="showAllMembers || index < SHOW_MEMBER_LIMIT"
               @click="onListItemClick(member)"
@@ -209,7 +212,7 @@
                 <div class="user-icon-with-badge">
                   <v-avatar class="avatar" size="32" color="grey">
                     <AuthedImage v-if="memberAvatar(member)" :src="memberAvatar(member)" />
-                    <span v-else class="white--text headline">{{
+                    <span v-else class="text-white headline">{{
                       member.name.substring(0, 1).toUpperCase()
                     }}</span>
                   </v-avatar>
@@ -241,7 +244,6 @@
               :key="index"
             ></v-divider>
           </template>
-        </v-list-item-group>
       </v-list>
       <div class="show-all p-2" @click="showAllMembers = !showAllMembers" v-if="members.length > SHOW_MEMBER_LIMIT">
         {{ showAllMembers ? $t("room_info.hide_all") : $t("room_info.show_all") }}

src/components/RoomList.vue

@@ -1,54 +1,61 @@
 <template>
   <v-list dense class="room-list">
-    <v-list-item-group @change="roomChange" color="primary">
+    <v-list-item v-if="showCreate" @click.stop="$emit('newroom')" class="room-list-room" :value="null">
-
+      <template v-slot:prepend>
-      <v-list-item v-if="showCreate" @click.stop="$emit('newroom')" class="room-list-room" :value="null">
+        <v-avatar class="round" size="42" color="#d9d9d9">
-        <v-list-item-avatar class="round" size="42" color="#d9d9d9">
           <v-icon size="11">$vuetify.icons.ic_new_room</v-icon>
-        </v-list-item-avatar>
+        </v-avatar>
-          <v-list-item-title class="room-list-new-room">{{
+      </template>
-            $t("menu.new_room")
-          }}</v-list-item-title>
-      </v-list-item>
 
-      <!-- invites -->
+      <v-list-item-title class="room-list-new-room">{{
-      <v-list-item :disabled="roomsProcessing[room.roomId]" v-for="room in invitedRooms" :key="room.roomId"
+        $t("menu.new_room")
-        :value="room" class="room-list-room">
+      }}</v-list-item-title>
-        <v-list-item-avatar size="42" color="#d9d9d9">
+    </v-list-item>
+
+    <!-- invites -->
+    <v-list-item :disabled="roomsProcessing[room.roomId]" v-for="room in invitedRooms" :key="room.roomId"
+      :value="room.roomId" class="room-list-room">
+      <template v-slot:prepend>
+        <v-avatar size="42" color="#d9d9d9">
           <AuthedImage v-if="roomAvatar(room)" :src="roomAvatar(room)" />
-          <span v-else class="white--text headline">{{
+          <span v-else class="text-white headline">{{
             room.name.substring(0, 1).toUpperCase()
           }}</span>
-        </v-list-item-avatar>
+        </v-avatar>
-          <v-list-item-title class="room-list-name">{{ room.name }}</v-list-item-title>
+      </template>
-          <v-list-item-subtitle>{{ room.topic }}</v-list-item-subtitle>
+
-        <v-list-item-action>
+      <v-list-item-title class="room-list-name">{{ room.name }}</v-list-item-title>
-          <v-btn id="btn-accept" class="filled-button" depressed color="black" @click.stop="acceptInvitation(room)">{{
+      <v-list-item-subtitle>{{ room.topic }}</v-list-item-subtitle>
-            $t("menu.join") }}</v-btn>
+      <v-list-item-action>
-          <v-btn v-if="!room.isServiceNoticeRoom" id="btn-reject" class="filled-button" color="black" @click.stop="rejectInvitation(room)" text>{{
+        <v-btn id="btn-accept" class="filled-button" depressed color="black" @click.stop="acceptInvitation(room)">{{
+          $t("menu.join") }}</v-btn>
+        <v-btn v-if="!room.isServiceNoticeRoom" id="btn-reject" class="filled-button" color="black"
+          @click.stop="rejectInvitation(room)" text>{{
             $t("menu.ignore") }}</v-btn>
-        </v-list-item-action>
+      </v-list-item-action>
-      </v-list-item>
+    </v-list-item>
 
-      <v-list-item v-for="room in joinedRooms" :key="room.roomId" :value="room" class="room-list-room">
+    <v-list-item v-for="room in joinedRooms" :key="room.roomId" :value="room.roomId"
-        <v-list-item-avatar size="42" color="#d9d9d9" :class="[{'rounded-circle': isDirect(room)}]">
+      @click="currentRoomId = room.roomId" class="room-list-room">
+      <template v-slot:prepend>
+        <v-avatar size="42" color="#d9d9d9" :class="[{ 'rounded-circle': isDirect(room) }]">
           <AuthedImage v-if="roomAvatar(room)" :src="roomAvatar(room)" />
-          <span v-else class="white--text headline">{{
+          <span v-else class="text-white headline">{{
             room.name.substring(0, 1).toUpperCase()
           }}</span>
-        </v-list-item-avatar>
+        </v-avatar>
-          <v-list-item-title class="room-list-name">{{ room.name }}
+      </template>
-            <!-- <v-icon class="ml-2 mb-1" size="10" v-if="isPublic(room)">$vuetify.icons.ic_public</v-icon> -->
+      <v-list-item-title class="room-list-name">{{ room.name }}
-          </v-list-item-title>
+        <!-- <v-icon class="ml-2 mb-1" size="10" v-if="isPublic(room)">$vuetify.icons.ic_public</v-icon> -->
-          <v-list-item-subtitle class="room-list-new-messages" v-if="notificationCount(room) > 0">
+      </v-list-item-title>
-            {{ $t("room.room_list_new_messages", { count: notificationCount(room) }) }}
+      <v-list-item-subtitle class="room-list-new-messages" v-if="notificationCount(room) > 0">
-          </v-list-item-subtitle>
+        {{ $t("room.room_list_new_messages", { count: notificationCount(room) }) }}
-        <v-list-item-action>
+      </v-list-item-subtitle>
-          <v-icon size="16" v-if="room.roomId == $matrix.currentRoomId">$vuetify.icons.ic_circle_filled</v-icon>
+      <v-list-item-action>
-          <v-icon size="16" v-else>$vuetify.icons.ic_circle</v-icon>
+        <v-icon size="16" v-if="room.roomId == $matrix.currentRoomId">$vuetify.icons.ic_circle_filled</v-icon>
-        </v-list-item-action>
+        <v-icon size="16" v-else>$vuetify.icons.ic_circle</v-icon>
-      </v-list-item>
+      </v-list-item-action>
-    </v-list-item-group>
+    </v-list-item>
   </v-list>
 </template>
 
@@ -75,6 +82,8 @@ export default {
   },
 
   data: () => ({
+    currentRoomId: null,
+
     /** A list of rooms currently processing some operation, like "join" or "reject" */
     roomsProcessing: {},
   }),
@@ -181,25 +190,25 @@ export default {
     isDirect(room) {
       return this.$matrix.isDirectRoom(room);
     },
+  },
 
-    roomChange(room) {
+  watch: {
-      if (room == null || room == undefined || room == 0) {
+    currentRoomId() {
+      if (this.currentRoomId == null || this.currentRoomId == undefined) {
         // Ignore, this is caused by "new room" etc.
         return;
       }
-      if (room.isServiceNoticeRoom && room.selfMembership === "invite") {
-        return; // Nothing should happen when click on invite to server notices room, just the "join" button is enabled.
-      }
       this.$emit("close");
       this.$navigation.push(
         {
           name: "Chat",
-          params: { roomId: util.sanitizeRoomId(room.roomId) },
+          params: { roomId: util.sanitizeRoomId(this.currentRoomId) },
         },
         -1
       );
-  }
+    },
   },
+
 };
 </script>
 

src/components/SelectLanguageDialog.vue

@@ -3,7 +3,7 @@
     class="ma-0 pa-0"
     v-bind="{ ...$props, ...$attrs }"
     v-on="$listeners"
-    :width="$vuetify.breakpoint.smAndUp ? '940px' : '90%'"
+    :width="$vuetify.display.smAndUp ? '940px' : '90%'"
   >
     <v-card class="dialog-card">
       <v-card-title class="dialog-title d-block">

src/components/UnsupportedBrowserAlert.vue

@@ -3,7 +3,7 @@
     class="ma-0 pa-0"
     v-model="isUnSupportedBrowser"
     persistent
-    :width="$vuetify.breakpoint.smAndUp ? '50%' : '90%'"
+    :width="$vuetify.display.smAndUp ? '50%' : '90%'"
   >
     <div class="dialog-content text-center">
       <h2 class="dialog-title">{{ $t("global.different_browser_title") }}</h2>

src/components/UserProfileDialog.vue

@@ -4,13 +4,13 @@
     v-model="showDialog"
     v-show="room"
     class="ma-0 pa-0"
-    :width="$vuetify.breakpoint.smAndUp ? '688px' : '95%'"
+    :width="$vuetify.display.smAndUp ? '688px' : '95%'"
   >
     <div class="dialog-content text-center member-action-dialog">
       <div class="pt-4">
         <v-avatar class="avatar" size="56" color="grey">
           <AuthedImage v-if="memberAvatarComp" :src="memberAvatarComp" />
-          <span v-else class="white--text headline">{{ firstLetterUserName }}</span>
+          <span v-else class="text-white headline">{{ firstLetterUserName }}</span>
         </v-avatar>
         <div>
           <span class="user-name">

src/components/YouAre.vue

@@ -23,7 +23,7 @@
       </span>
       <v-avatar color="#e0e0e0" right @click.stop="viewProfile">
         <AuthedImage v-if="userAvatar" :src="userAvatar" />
-        <span v-else class="white--text">{{ userAvatarLetter }}</span>
+        <span v-else class="text-white">{{ userAvatarLetter }}</span>
       </v-avatar>
     </v-chip>
   </div>

src/components/messages/MessageIncoming.vue

@@ -9,7 +9,7 @@
     </div>
     <v-avatar class="avatar" ref="avatar" size="32" color="#ededed" @click.stop="otherAvatarClicked($refs.avatar.$el)">
       <img v-if="messageEventAvatar(event)" :src="messageEventAvatar(event)" onerror="this.style.display='none'" />
-      <span v-else class="white--text headline">{{
+      <span v-else class="text-white headline">{{
         eventSenderDisplayName(event).substring(0, 1).toUpperCase()
       }}</span>
     </v-avatar>

src/components/messages/MessageIncomingImage.vue

@@ -11,7 +11,7 @@
     </div>
     <v-dialog
       v-model="dialog"
-      :width="$vuetify.breakpoint.smAndUp ? '940px' : '90%'"
+      :width="$vuetify.display.smAndUp ? '940px' : '90%'"
     >
       <v-img :src="src"/>
     </v-dialog>

src/components/messages/MessageOutgoing.vue

@@ -27,7 +27,7 @@
       @click.stop="ownAvatarClicked"
     >
       <AuthedImage v-if="userAvatar" :src="userAvatar" />
-      <span v-else class="white--text headline">{{ userAvatarLetter }}</span>
+      <span v-else class="text-white headline">{{ userAvatarLetter }}</span>
     </v-avatar>
     <QuickReactionsChannel v-if="room.displayType == ROOM_TYPE_CHANNEL" :event="eventForReactions" :timelineSet="timelineSet" v-on="$listeners"/>
     <QuickReactions v-else :event="eventForReactions" :timelineSet="timelineSet" v-on="$listeners"/>

src/components/messages/MessageOutgoingImage.vue

@@ -11,7 +11,7 @@
     </div>
     <v-dialog
       v-model="dialog"
-      :width="$vuetify.breakpoint.smAndUp ? '940px' : '90%'"
+      :width="$vuetify.display.smAndUp ? '940px' : '90%'"
     >
       <v-img :src="src"/>
     </v-dialog>

src/components/messages/SeenBy.vue

@@ -9,7 +9,7 @@
               <v-avatar v-for="(member, index) in seenBy" :key="member.roomMember.userId" class="seen-by-user" size="16" color="grey"
                 v-show="index < SHOW_LIMIT" @click="open">
                 <AuthedImage v-if="memberAvatar(member.roomMember)" :src="memberAvatar(member.roomMember)" />
-                <span v-else class="white--text headline">{{
+                <span v-else class="text-white headline">{{
                   member.roomMember.name.substring(0, 1).toUpperCase()
                 }}</span>
               </v-avatar>
@@ -29,7 +29,7 @@
           <v-list-item-icon>
             <v-avatar size="40" color="grey">
               <AuthedImage v-if="memberAvatar(member.roomMember)" :src="memberAvatar(member.roomMember)" />
-              <span v-else class="white--text headline">{{
+              <span v-else class="text-white headline">{{
                 member.roomMember.name.substring(0, 1).toUpperCase()
               }}</span>
             </v-avatar>

src/main.js

@@ -13,7 +13,7 @@ import VueResize from 'vue3-resize';
 import 'vue3-resize/dist/vue3-resize.css';
 import VueClipboard from 'vue-clipboard2'
 import Vue3Sanitize from "vue-3-sanitize";
-import createVuetify from './plugins/vuetify';
+import vuetify from './plugins/vuetify';
 import { Buffer } from 'buffer/'
 import { createApp, h } from 'vue';
 globalThis.Buffer = Buffer;
@@ -41,8 +41,6 @@ app.use(analytics);
 app.use(VueClipboard);
 app.use(audioPlayer);
 
-const vuetify = createVuetify(config);
-
 // Add bubble functionality to custom events.
 // From here: https://stackoverflow.com/questions/41993508/vuejs-bubbling-custom-events
 app.use((instance) => {

src/plugins/vuetify.js

@@ -1,30 +1,69 @@
-import {createVuetify } from "vuetify";
+import { createVuetify } from "vuetify";
+import * as components from "vuetify/components";
+import * as directives from "vuetify/directives";
+import { aliases, md } from "vuetify/iconsets/md";
+import { h } from "vue";
 
 // Import all .vue icons and process them, so they can be used
 // as $vuetify.icons.<iconname>
-var icons = {}
+var icons = {};
-const modules = import.meta.glob('@/assets/icons/*.vue', {eager: true});
+var customAliases = {};
-Object.keys(modules).map(path => {
+const modules = import.meta.glob("@/assets/icons/*.vue", { eager: true });
+Object.keys(modules).map((path) => {
   // Remove"./"
   const parts = path.split("/");
   const iconName = parts[parts.length - 1].split(".")[0];
-  icons[iconName] = { component: modules[path].default }
+  icons[iconName] = { component: modules[path].default };
+  customAliases["vuetify.icons." + iconName] = "custom:" + iconName;
 });
 
-export default function(ignoredconfig) {
+const custom = {
-    return createVuetify({
+  component: (props) => {
+    const {
+      icon,
+      ...rest
+    } = props;
+    const stringIcon = icon;
+    if (icons[stringIcon]) {
+      return h(props.tag, rest, [h(icons[stringIcon].component)]);
+    }
+    return md.component(props);
+  }
+}
+
+export default {
+  install(app, ignoredOptions) {
+    const options = {
+      components,
+      directives,
       icons: {
-        iconfont: 'md',
+        defaultSet: "md",
-        values: icons,
+        aliases: {
+          ...aliases,
+          ...customAliases,
+        },
+        sets: {
+          md, custom,
+        },
       },
-      options: {
+      defaults: {
-        customProperties: true
+        global: {
+          density: "comfortable",
+        },
+        VBtn: {
+          variant: "flat",
+        },
       },
       theme: {
         options: {
           customProperties: true,
         },
         dark: false,
-      }
+      },
-    });
+    };
-}
+    const vuetify = createVuetify(options);
+    app.use(vuetify);
+    app.config.globalProperties.$vuetify = vuetify;
+    app.$vuetify = vuetify;
+  },
+};

src/services/matrix.service.js

@@ -251,6 +251,8 @@ export default {
             // if (user.is_guest) {
             //     this.matrixClient.setGuest(true);
             // }
+            console.log("MATRIX CLIENT", this.matrixClient);
+            
             return this.matrixClient
               .initCrypto()
               .then(() => {

vite.config.mjs

@@ -15,7 +15,7 @@ function VuetifyResolver() {
     resolve: (name) => {
       console.log("rESOLVE", name);
       if (name.match(/^V[A-Z]/) && !name.includes("VEmojiPicker"))
-        return { name, from: './node_modules/vuetify/lib/components' }
+        return { name, from: './node_modules/vuetify/components' }
     },
   }
 }
@@ -59,7 +59,6 @@ export default defineConfig(({mode}) => ({
     alias: [
       { find: "@", replacement: fileURLToPath(new URL("./src", import.meta.url)) },
       { find: "~@", replacement: fileURLToPath(new URL("./src", import.meta.url)) },
-      { find: "~vuetify/src", replacement: fileURLToPath(new URL("./node_modules/vuetify/lib", import.meta.url)) },
       { find: "vue", replacement: fileURLToPath(new URL("./node_modules/vue/dist/vue.esm-bundler.js", import.meta.url)) }, 
     ],
   },