Merge branch 'main' of gitlab.com:keanuapp/keanuapp-weblite into main

src/App.vue

@@ -12,7 +12,16 @@ import config from "./assets/config";
 export default {
   name: "App",
   mounted() {
-    if (window.location.protocol == "http" && !window.location.hostname.endsWith('.onion')) {
+    // Set RTL mode if flag given in config. TODO: this should be based on language, not a global setting.
+    //
+    if (config.rtl) {
+      this.$vuetify.rtl = true;
+      document.documentElement.setAttribute("dir", "rtl");
+    }
+    if (
+      window.location.protocol == "http" &&
+      !window.location.hostname.endsWith(".onion")
+    ) {
       // Redirect to HTTPS
       window.location.href = window.location.href.replace("http:", "https:");
       return;

src/assets/config.json

@@ -4,6 +4,7 @@
     "productLink": "letsconvene.im",
     "defaultServer": "https://neo.keanu.im",
     "useShortCodeStickers": false,
+    "rtl": false,
     "analytics": {
         "enabled": true,
         "config": {

src/assets/css/chat.scss

@@ -51,6 +51,7 @@ $admin-fg: white;
     position: absolute;
     top: 10px;
     left: 40px;
+    right: initial;
     color: white;
     background-color: black;
     font-size: 10px;
@@ -61,6 +62,10 @@ $admin-fg: white;
     text-align: center;
     padding-left: 4px;
     padding-right: 4px;
+    [dir="rtl"] & {
+        right: 40px;
+        left: initial;
+    }
 }
 
 .chat-root {
@@ -138,6 +143,9 @@ $admin-fg: white;
             overflow-x: hidden;
             overflow-y: auto;
             padding: 0 0 0px 20px;
+            [dir="rtl"] & {
+                padding: 0 20px 0px 0px;
+            }
             margin: 6px 0;
             font-family: "Inter", sans-serif;
             font-weight: 300;
@@ -181,10 +189,16 @@ $admin-fg: white;
 .messageIn {
     margin: 8px;
     text-align: left;
+    [dir="rtl"] & {
+        text-align: right;
+    }
     position: relative;
     .bubble {
         background-color: #eeeeee;
         border-radius: 0px 10px 10px 10px;
+        [dir="rtl"] & {
+            border-radius: 10px 0px 10px 0px;
+        }
         padding: 8px;
         border-width: 1px !important;
         border-style: solid !important;
@@ -220,6 +234,10 @@ $admin-fg: white;
         display: inline-block;
         vertical-align: top !important;
         margin-right: 10px;
+        [dir="rtl"] & {
+            margin-right: initial;
+            margin-left: 10px;
+        }
         top: 0;
         border: 2px solid white;
     }
@@ -234,6 +252,10 @@ $admin-fg: white;
         color: rgba(#000000, 0.6);
         margin-left: 40px;
         margin-right: 8px;
+        [dir="rtl"] & {
+            margin-left: 8px;
+            margin-right: 40px;
+        }
         display: inline-block;
     }
     .time {
@@ -252,10 +274,16 @@ $admin-fg: white;
 .messageOut {
     margin: 8px;
     text-align: right;
+    [dir="rtl"] & {
+        text-align: left;
+    }
     position: relative;
     .bubble {
         background-color: #e5e5e5;
         border-radius: 10px 10px 0 10px;
+        [dir="rtl"] & {
+            border-radius: 10px 10px 10px 0px;
+        }
         padding: 8px;
         display: inline-block;
         position: relative;
@@ -264,6 +292,9 @@ $admin-fg: white;
     .audio-bubble {
         background-color: #e5e5e5;
         border-radius: 10px 10px 0 10px;
+        [dir="rtl"] & {
+            border-radius: 10px 10px 10px 0px;
+        }
         padding: 8px;
         display: inline-block;
         position: relative;
@@ -274,6 +305,9 @@ $admin-fg: white;
     .video2-bubble {
         background-color: #e5e5e5;
         border-radius: 10px 10px 0 10px;
+        [dir="rtl"] & {
+            border-radius: 10px 10px 10px 0px;
+        }
     }
     .bubble.image-bubble {
         padding: 0px;
@@ -283,6 +317,9 @@ $admin-fg: white;
         .v-image,
         video {
             border-radius: 10px 10px 0 10px;
+            [dir="rtl"] & {
+                border-radius: 10px 10px 10px 0px;
+            }
         }
     }
     .bubble.sticker-bubble {
@@ -296,6 +333,10 @@ $admin-fg: white;
         display: inline-block;
         vertical-align: bottom !important;
         margin-left: 10px;
+        [dir="rtl"] & {
+            margin-left: initial;
+            margin-right: 10px;
+        }
         bottom: 0;
         border: 2px solid white;
     }
@@ -311,6 +352,10 @@ $admin-fg: white;
         display: inline-block;
         margin-left: 40px;
         margin-right: 8px;
+        [dir="rtl"] & {
+            margin-left: 8px;
+            margin-right: 40px;
+        }
     }
     .time {
         font-family: "Inter", sans-serif;
@@ -438,6 +483,7 @@ $admin-fg: white;
 .avatar-operations-strut {
     position: relative;
     height: 0px;
+
     z-index: 1;
 }
 
@@ -445,7 +491,7 @@ $admin-fg: white;
     position: absolute;
     width: fit-content;
     background-color: white;
-    height: 40px;
+    height: 45px;
     border-radius: 20px;
     box-shadow: 4px 4px 8px #888888;
     // &.incoming {
@@ -566,6 +612,9 @@ $admin-fg: white;
         top: -4px;
         background: white;
         transform: translate(-50%, 0);
+        [dir="rtl"] & {
+            transform: translate(50%, 0);
+        }
         padding-left: 4px;
         padding-right: 4px;
         content: attr(title);
@@ -595,6 +644,9 @@ $admin-fg: white;
         top: -8px;
         background: white;
         transform: translate(-50%, 0);
+        [dir="rtl"] & {
+            transform: translate(50%, 0);
+        }
         padding-left: 10px;
         padding-right: 10px;
         content: attr(title);
@@ -684,6 +736,11 @@ $admin-fg: white;
         font-size: 14 * $chat-text-size;
         font-weight: bold;
         margin-left: 10px;
+        [dir="rtl"] & {
+            margin-left: initial;
+            margin-right: 10px;
+        }
+
         text-decoration: underline;
     }
 }
@@ -695,12 +752,24 @@ $admin-fg: white;
     margin: 10px 0px;
     font-weight: bold;
     font-size: 12 * $chat-text-size;
+    [dir="rtl"] & {
+        right: 0px;
+        left: unset;
+        .v-icon {
+            // Mirror the icon
+            transform: scale(-1, 1);
+        }
+    }
 }
 
 .header-button-right {
     position: absolute;
     top: 0px;
     right: 0px;
+    [dir="rtl"] & {
+        left: 0px;
+        right: unset;
+    }
     margin: 10px 0px;
     font-weight: bold;
     font-size: 12 * $chat-text-size;
@@ -729,6 +798,10 @@ $admin-fg: white;
         font-size: 14 * $chat-text-size;
         font-weight: bold;
         margin-left: 10px;
+        [dir="rtl"] & {
+            margin-left: initial;
+            margin-right: 10px;
+        }
     }
 }
 
@@ -881,7 +954,7 @@ $admin-fg: white;
     left: 20%;
     right: 20%;
     background-color: #888888;
-    height: 50px;
+    height: 40px;
     border-radius: 25px;
     color: white;
     text-align: center;
@@ -917,3 +990,7 @@ $admin-fg: white;
         text-decoration: none !important;
     }
 }
+
+.recent-emoji {
+    color: black;
+}

src/assets/translations/bo.json

@@ -0,0 +1,186 @@
+{
+    "fallbacks": {
+        "download_name": "ཕབ་ལེན།",
+        "original_text": "<མ་ཡིག>",
+        "audio_file": "སྒྲ་ཟློས་ཡིག་ཆ།",
+        "video_file": "བརྙན་ཟློས་ཡིག་ཆ།"
+    },
+    "room_info": {
+        "title": "གནས་ཚུལ།",
+        "version_info": "གྷར་ཌིན་ལས་འཆར་གྱིས་ནུས་ཤུགས་བསྩལ། ཐོན་རིམ། : {version}",
+        "leave_room_info": "གསལ་བཤད། གོ་རིམ་འདི་ཕྱིར་ཟློག་ཐབས་མེད། ཁྱེད་རང་ཕྱིར་ཐོན་རྒྱུ་ཡིན་མིན་དང་གླེང་མོལ་ཁག་གཏན་དུ་གསུབ་རྒྱུ་ཡིན་མིན་ཁག་ཐེག་བྱོས།",
+        "leave_room": "ཚོགས་པ་ནས་ཕྱིར་ཐོན།",
+        "view_profile": "ལྟ་ཞིབ།",
+        "identity_temporary": "ཁྱེད་ཀྱི་ངོ་བོ {displayName} འདི་གནས་སྐབས་ཙམ་ཡིན། ཁྱེད་ཀྱིས་སོ་སོའི་མིང་དང་གསང་ཚིག་བརྗེས་ཏེ་འདི་ཉར་ཚགས་བྱེད་ཆོག",
+        "identity": "ཁྱེད་རང་{displayName} མིང་ཐོག་ནས་ནང་འཛུལ་བྱེད་བཞིན་འདུག",
+        "my_profile": "ངའི་ཡིག་ཆ།",
+        "show_all": "ཚང་མ་སྟོན།",
+        "hide_all": "སྦེད།",
+        "user_you": "{user} (ཁྱེད་རང་།)",
+        "user": "{user}",
+        "members": "ཚོགས་མི་ཁག",
+        "purge": "ཁ་བརྡ་ཁང་གཏོར།",
+        "link_copied": "འབྲེལ་ཐག་པར་བཤུས་བརྒྱབ་ཚར།",
+        "join_public": "འབྲེལ་ཐག་ཡོད་པའི་མི་གང་རུང་འཛུལ་ཆོག",
+        "join_invite": "གདན་ཞུ་ཁོ་ན་བརྒྱུད་དེ་མ་གཏོགས་ཁ་བརྡ་ཁང་ནང་དུ་འཛུལ་མི་ཐུབ།",
+        "permissions": "ཆོག་མཆན་ཁག",
+        "created_by": "{user} བཟོས།"
+    },
+    "invite": {
+        "done": "ཚར་སོང་།",
+        "status_error": "གྲོགས་གཅིག་གམ་དེ་ལས་མང་བ་གདན་ཞུ་གནང་ཐུབ་མ་སོང་།",
+        "status_inviting": "གྲོགས་གདན་ཞུ་གནང་བཞིན་པ། {count} ཡི་{index}",
+        "send_invites_to": "གདན་ཞུ་ཐོངས།",
+        "title": "གྲོགས་པོ་ཁ་སྣོན།"
+    },
+    "login": {
+        "login": "ནང་འཛུལ།",
+        "password": "གསང་ཚིག",
+        "username": "སྤྱོད་མིང།",
+        "title": "ནང་འཛུལ།",
+        "password_required": "གསང་ཚིག་དགོས་ཀྱི་ཡོད།",
+        "username_required": "སྤྱོད་མིང་དགོས་ཀྱི་ཡོད།"
+    },
+    "new_room": {
+        "next": "རྗེས་མ།",
+        "done": "ཚར་སོང་།",
+        "status_avatar": "པར་མགོ་ཡར་འཇུག་བྱེད་བཞིན་པ།: {count}",
+        "status_avatar_total": "པར་མགོ་ཡར་འཇུག་བྱེད་བཞིན་པ། {total} ཡི་{count}",
+        "status_creating": "ཁ་བརྡ་ཁང་བཟོ་བཞིན་པ།",
+        "invite_description": "ཐོ་ཁོངས་ID བརྒྱུད་ནས། འཚོལ་བཤེར་རམ་ཐོ་གཞུང་གི་ཁོངས་ནས་འདེམས།",
+        "invite_info": "ཁ་སྣོན་བྱས་པའི་མི་རྣམས་ཁོ་ན།",
+        "public_description": "བརྒྱུད་སྐུར་བྱེད་པར་འབྲེལ་ཐག་ཅིག་རག་པར་བྱོས།",
+        "public_info": "འབྲེལ་ཐག་ཡོད་པའི་མི་གང་རུང་།",
+        "link_copied": "འབྲེལ་ཐག་པར་བཤུས་བརྒྱབ་ཚར།",
+        "add_people": "མི་ཁ་སྣོན།",
+        "get_link": "འབྲེལ་ཐག་རག་པར་བྱོས།",
+        "join_permissions_info": "ཆོག་མཆན་འདི་དག་གིས་ཚོགས་པའི་ནང་མི་ཇི་ལྟར་འཛུལ་ཐུབ་མིན་དང་། མི་གཞན་དག་ཇི་ལྟར་ལས་སླ་པོའི་ཐོག་ནས་གདན་ཞུ་བྱེད་ཐུབ་མིན་སོགས་ཐག་གཅོད་བྱེད་ཀྱི་ཡོད། ཆོག་མཆན་དེ་དག་ག་དུས་ཡིན་ཡང་འགྱུར་བ་གཏོང་ཆོག",
+        "set_join_permissions": "ནང་འཛུལ་གྱི་ཆོག་མཆན་སྒྲིག་འགོད་བྱོས།",
+        "join_permissions": "ནང་འཛུལ་གྱི་ཆོག་མཆན་ཁག",
+        "new_room": "ཚོགས་པ་གསར་པ།",
+        "name_room": "ཚོགས་པར་མིང་ཐོགས།"
+    },
+    "menu": {
+        "logout": "ཕྱིར་ཐོན།",
+        "login": "ནང་འཛུལ།",
+        "download": "ཕབ་ལེན།",
+        "delete": "སུབས།",
+        "edit": "ཕྱོགས་སྒྲིག",
+        "ok": "Ok",
+        "send": "ཐོངས།",
+        "back": "ཕྱིར་ལོག",
+        "cancel": "ཕྱིར་འཐེན།",
+        "reply": "ལན་འདེབས། ཡ་ལན།",
+        "start_private_chat": "སྤྱོད་མཁན་འདི་སྒེར་ལ་ཁ་བརྡ་བྱོས།"
+    },
+    "profile": {
+        "change_password": "གསང་ཚིག་རྗེས།",
+        "password_new": "གསང་ཚིག་གསར་པ།",
+        "password_old": "གསང་ཚིག་རྙིང་པ།",
+        "set_password": "གསང་ཚིག་བཟོས།",
+        "password_repeat": "གསང་ཚིག་གསར་པ་བསྐྱར་དུ་གཏགས།",
+        "change_name": "མིང་རྗེས།",
+        "temporary_identity": "ངོ་བོ་འདི་གནས་སྐབས་ཙམ་ཡིན། དེ་བསྐྱར་དུ་བཀོལ་བར་གསང་ཚིག་ཅིག་བཟོས།",
+        "title": "ངའི་ཡིག་ཆ།",
+        "display_name": "འཆར་མིང་།"
+    },
+    "device_list": {
+        "not_verified": "ར་སྤྲོད་བྱས་མི་འདུག",
+        "verified": "ར་སྤྲོད་བྱས་ཟིན།",
+        "blocked": "བཀག་ཚར།",
+        "title": "ཡོ་ཆས་ཁག"
+    },
+    "room_welcome": {
+        "info_permissions": "ཁྱེད་ཀྱིས་ག་དུས་ཡིན་ཡང་ཚོགས་པའི་སྒྲིག་བཀོད་ཀྱི་ནང་ནས་'ནང་འཛུལ་གྱི་ཆོག་མཆན' དང 'ཁ་བརྡའི་ཟིན་ཐོར'འགྱུར་བ་གཏོང་ཆོག",
+        "join_invite": "ཁྱེད་ཀྱིས་གདན་ཞུ་གནང་བའི་མི་ཁོ་ན་མ་གཏོགས་འཛུལ་མི་ཐུབ།",
+        "join_public": "སུ་ཡིན་རུང་འབྲེལ་ཐག་འདིའི་ཐོག་ལ་མནན་ཏེ་འཛུལ་ཆོག: {link}",
+        "info": "འདིར་ཁྱེད་ཀྱི་ཚོགས་པའི་སྐོར་ལ་ཤེས་དགོས་པའི་དོན་དག་འགའ་ཡོད།:",
+        "welcome": "དགའ་བསུ་ཞུ།",
+        "got_it": "ཧ་གོ་སོང་།"
+    },
+    "room": {
+        "leave": "ཕྱིར་ཐོན།",
+        "members": "ཚོགས་མི་མི་འདུག| ཚོགས་མི༡| ཚོགས་མིའི {count}"
+    },
+    "message": {
+        "users_are_typing": "{count} ཚོགས་མི་ཡིས་གཏགས་བཞིན་འདུག",
+        "user_is_typing": "{user}གཏགས་བཞིན་འདུག",
+        "scale_image": "པར་རིས་རྐྱོང་སྐུམ།",
+        "your_message": "ཁྱེད་ཀྱི་བརྡ་ལན།...",
+        "replying_to_event": "དོན་རྐྱེན་ལ་ལན་འདེབས།: {message}",
+        "unread_messages": "བཀླགས་མེད་པའི་འཕྲིན་ཐུང་ཁག",
+        "user_changed_room_topic": "{user} ཁ་བརྡ་ཁང་གི་བརྗོད་གཞི་{topic} ལ་བརྗེ་སོང་།",
+        "user_changed_room_name": "{user} ཁ་བརྡ་ཁང་གི་མིང་ {name} ལ་བརྗེས་སོང་།",
+        "room_joinrule_public": "ཡོངས་ཁྱབ།",
+        "user_changed_room_history": "{user} ཁ་བརྡ་ཁང་གི་ཟིན་ཐོ་བཟོས་སོང་། {type}",
+        "room_joinrule_invite": "གདན་ཞུ་ཁོ་ན།",
+        "user_changed_join_rules": "{user} ཁ་བརྡ་ཁང་བཟོས་སོང་། {type}",
+        "room_history_joined": "ཚོགས་མི་ཁ་བརྡ་ཁང་དུ་ཞུགས་པའི་དུས་ནས་ཀློག་ཐུབ།",
+        "room_history_invited": "ཚོགས་མི་ཁ་བརྡ་ཁང་དུ་གདན་ཞུ་གནང་བའི་དུས་ནས་ཀློག་ཐུབ།",
+        "room_history_shared": "ཁ་བརྡ་ཁང་ནང་གི་ཚོགས་མི་ཚང་མས་ཀློག་ཐུབ།",
+        "room_history_world_readable": "སུས་ཀྱང་ཀློག་ཐུབ།",
+        "upload_progress_with_total": "ཡར་འཇུག་བྱས་ཚར་བའི་{total} ཡི་{count}",
+        "upload_progress": "ཡར་འཇུག {count}",
+        "download_progress": "ཕབ་ལེན་གྲུབ་ཚར་བའི་བརྒྱ་ཆ།{percentage}%",
+        "edited": "(བཅོས་སྒྲིག་བྱས།)",
+        "file_prefix": "ཡིག་ཆ། ",
+        "user_said": "{user} བཤད་རྒྱུར།:",
+        "user_left": "{user} ཁ་བརྡའི་ཁོངས་ནས་ཕྱིར་ཐོན་སོང་།",
+        "user_joined": "{user} ཁ་བརྡ་བྱེད་པར་སླེབས་སོང་།",
+        "user_was_invited": "{user} ཁ་བརྡ་ཁང་ལ་གདན་ཞུ་གནང་ཡོད།",
+        "user_encrypted_room": "{user} ཁ་བརྡ་ཁང་ལ་གསང་སྡོམ་བསྐྲུན་སོང་།",
+        "user_changed_room_avatar": "{user} ཁ་བརྡ་ཁང་གི་པར་མགོ་བརྗེ་སོང་།",
+        "user_changed_avatar": "{user} མགོ་པར་བརྗེ་སོང་།",
+        "user_changed_display_name": "{user} འཆར་མིང་ {displayName} ལ་བསྒྱུར་སོང་།",
+        "user_aliased_room": "{user} ཁ་བརྡ་ཁང་ལ་མིང་ཞིག་བཏགས་སོང་། {alias}",
+        "user_created_room": "{user} ཁ་བརྡ་བྱ་སའི་ཁང་པ་བཟོས་སོང་།",
+        "you": "ཁྱེད་རང་།",
+        "user_powerlevel_change_from_to": "{powerOld} ཡི{user} ནས {powerNew}་ལ།",
+        "room_powerlevel_change": "{user} {changes} ཡི་སྟོབས་ཤུགས་གནས་རིམ་བརྗེས་སོང་།"
+    },
+    "Keanu Weblite": "ཀེ་ཨ་ནུ་དྲ་གནས།",
+    "power_level": {
+        "moderator": "མདོ་འཛིན་པ།",
+        "restricted": "དམ་བསྒྲགས།",
+        "custom": "སྒེར་གྱི་རྣམ་པ། ({level})",
+        "default": "སོར་བཞག",
+        "admin": "དོ་དམ་པ།"
+    },
+    "voice_recorder": {
+        "not_supported_text": "སྟབས་མ་ལེགས་པ་ཞིག་ལ། དྲ་རྒྱ་བཤེར་ཆས་འདིས་སྒྲ་ཡར་འཇུག་ལ་རྒྱབ་སྐྱོར་མི་བྱེད།",
+        "not_supported_title": "རྒྱབ་སྐྱོར་མི་བྱེད།",
+        "failed_to_record": "སྒྲ་འཇུག་བྱེད་ཐུབ་མ་སོང་།",
+        "release_to_cancel": "གློད་ནས་སུབས།",
+        "swipe_to_cancel": "ཤུད་འདེད་བྱས་ཏེ་སུབས།"
+    },
+    "room_info_sheet": {
+        "create_room": "ཚོགས་པ་བཟོས།",
+        "view_details": "ཞིབ་ཕྲར་གཟིགས།",
+        "this_room": "ཚོགས་པ་འདི།"
+    },
+    "purge_room": {
+        "button": "ཁ་བརྡ་ཁང་གཏོར།",
+        "info": "བྱེད་ལས་འདིས་ཚོགས་མི་ཚང་མ་ཡོད་པའི་ཚོགས་པ་འདི་སྒོ་རྒྱག་ངེས། དེ་ཕྱིར་ལྡོག་ཐབས་མེད།",
+        "title": "ཁ་བརྡ་ཁང་གཏོར་རྒྱུ་ཡིན་ནམ།"
+    },
+    "leave": {
+        "leave": "ཕྱིར་ཐོན།",
+        "go_back": "ཕྱིར་ལོག",
+        "create_account": "ཁ་བྱང་ཞིག་བཟོས།",
+        "text_invite": "ཚོགས་པ་འདིར་ཟྭ་བརྒྱབ་འདུག དམིགས་བསལ་གྱི་ཆོག་མཆན་མེད་པར། ཁྱེད་རང་བསྐྱར་དུ་འཛུལ་མི་ཐུབ།",
+        "title_invite": "ཁྱེད་རང་ཕྱིར་ཐོན་རྒྱུ་གཏན་འཁེལ་བ་ཡིན་ནམ།",
+        "text_public_lastroom": "ཁྱེད་རང་ཚོགས་པ་འདིའི་ནང་དུ་བསྐྱར་དུ་འཛུལ་འདོད་ཚེ། ངོ་བོ་གསར་བ་ཞིག་གི་མིང་ཐོག་ནས་འཛུལ་ཆོག {user}་ཉར་བར། {action}",
+        "text_public": "གལ་ཏེ་ཁྱེད་ཀྱིས་འབྲེལ་ཐག་དེ་ཧ་གོ་ཚེ། ག་དུས་ཡིན་ཡང་། ཁ་བརྡ་ཁང་དུ་འཛུལ་ཆོག",
+        "title_public": "{user} ག་ལེེར་ཕེབས།"
+    },
+    "join": {
+        "status_joining": "ཁ་བརྡ་ཁང་དུ་འཛུལ་བཞིན་པ།...",
+        "status_logging_in": "ནང་འཛུལ་བྱེད་བཞིན་པ།...",
+        "join_guest": "སྐུ་མགྲོན་གྱི་མིང་ཐོག་ནས་ཞུགས།",
+        "join": "ཁ་བརྡ་ཁང་དུ་འཛུལ།",
+        "joining_as": "ཁྱེད་རང་ཞུགས་བཞིན་པ།:",
+        "shared_computer": "མཉམ་སྤྱོད་བྱས་པའི་རྩིས་འཕྲུལ་ཞིག་བཀོལ་བཞིན་པ།",
+        "user_name_label": "སྤྱོད་མིང་།",
+        "title": "{roomName} ནང་དུ་ཕེབས་པར་དགའ་བསུ་ཞུ།"
+    }
+}

src/assets/translations/es.json

@@ -0,0 +1,186 @@
+{
+    "room_info": {
+        "identity": "Has iniciado sesión como {displayName}.",
+        "my_profile": "Mi perfil",
+        "show_all": "Mostrar todos",
+        "hide_all": "Ocultar",
+        "user_you": "{user} (you)",
+        "user": "{user}",
+        "members": "Miembros",
+        "purge": "Purgar la Sala",
+        "link_copied": "¡Liga copiada!",
+        "join_public": "Cualquiera con la liga se puede unir",
+        "join_invite": "Solo st puedes unir a la sala mediante una invitación",
+        "permissions": "Permisos",
+        "created_by": "Creado por {user}",
+        "title": "Información",
+        "version_info": "Creado por Guardian Project. Version: {version}",
+        "leave_room_info": "Nota: este paso no se puede deshacer. Asegúrate de que deseas cerrar la sesión y eliminar el chat para siempre.",
+        "leave_room": "Salir del grupo",
+        "view_profile": "Vista",
+        "identity_temporary": "Tu identidad {displayName} es temporal. Puedes cambiar tu nombre o establecer una contraseña para conservarla."
+    },
+    "purge_room": {
+        "button": "Purgar la sala",
+        "info": "Esta operación cerrará la sala para todos los miembros. No se puede deshacer.",
+        "title": "¿Purgar la sala?"
+    },
+    "leave": {
+        "leave": "Salir",
+        "go_back": "Regresar",
+        "create_account": "crea una cuenta",
+        "text_invite": "Este grupo está bloqueado. No puedes volver a unirte sin un permiso especial.",
+        "title_invite": "Estas seguro que deseeas salir?",
+        "text_public_lastroom": "Si desea unirse a este grupo nuevamente, puede unirse con una nueva identidad. Para mantener {user}, {action}.",
+        "text_public": "Siempre puedes volver a unirte a esta sala si conoces el enlace.",
+        "title_public": "Adios, [user}"
+    },
+    "invite": {
+        "status_error": "No se pudo invitar a uno o más amigos!",
+        "status_inviting": "Invitando amigo {index} de {count}",
+        "send_invites_to": "Enviar invitaciones a",
+        "done": "Listo",
+        "title": "Agregar Amigos"
+    },
+    "join": {
+        "status_joining": "Uniendose a la sala...",
+        "status_logging_in": "Iniciando sesión...",
+        "join_guest": "Unirse como invitado",
+        "join": "Unirse a la sala",
+        "joining_as": "Te estas uniendo como:",
+        "shared_computer": "Usando una computadora compartida",
+        "user_name_label": "Nombre de usuario",
+        "title": "Bienvenido a {roomName}"
+    },
+    "profile": {
+        "display_name": "Nombre para mostrar",
+        "password_repeat": "Repite la nueva contraseña",
+        "password_new": "Nueva contraseña",
+        "password_old": "Vieja contraseña",
+        "change_password": "Cambia la contraseña",
+        "change_name": "Cambia el nombre",
+        "set_password": "Crea una contraseña",
+        "temporary_identity": "Esta identidad es temporal. Establezca una contraseña para usarla nuevamente",
+        "title": "Mi perfil"
+    },
+    "login": {
+        "login": "Iniciar sesión",
+        "password_required": "Contraseña es necesaria",
+        "username_required": "Nombre de usuario es necesario",
+        "password": "Contraseña",
+        "username": "Nombre de Usuario",
+        "title": "Iniciar sesión"
+    },
+    "device_list": {
+        "not_verified": "No ha sido Verificado",
+        "verified": "Verificado",
+        "blocked": "Bloqueado",
+        "title": "DISPOSITIVOS"
+    },
+    "new_room": {
+        "status_avatar": "Subiendo avatar: {count}",
+        "status_avatar_total": "Subiendo Avatar: {count} de {total}",
+        "status_creating": "Creando Sala",
+        "invite_description": "Escoge de una lista o busca por ID de cuenta",
+        "invite_info": "Solo personas agregadas",
+        "public_description": "Obten la liga para compartirla",
+        "public_info": "Cualquiera con la liga",
+        "link_copied": "Liga copiada!",
+        "add_people": "Agregar personas",
+        "get_link": "Obtener la liga",
+        "join_permissions_info": "Estos permisos determinan cómo las personas pueden unirse al grupo y con qué facilidad se puede invitar a otras personas. Pueden cambiarse en cualquier momento.",
+        "set_join_permissions": "Establecer permisos para unirse",
+        "join_permissions": "Permisos para unirse",
+        "name_room": "Nombra el Grupo",
+        "next": "Siguiente",
+        "done": "Listo",
+        "new_room": "Nuevo Grupo"
+    },
+    "room_welcome": {
+        "join_public": "Cualquiera puede unirse abriendo esta liga: {link}",
+        "got_it": "Entiendo",
+        "info_permissions": "Puedes cambiar los 'permisos de participación' y el 'historial de mensajes' en cualquier momento en la configuración del grupo.",
+        "join_invite": "Solo personas que invitas se pueden unir.",
+        "info": "Aquí estan algunas cosas acerca de tu grupo:",
+        "welcome": "Bienvenido!"
+    },
+    "room": {
+        "leave": "Salir",
+        "members": "no miembros | 1 miembro| {count} miembros"
+    },
+    "message": {
+        "user_powerlevel_change_from_to": "{user} de {powerOld} a {powerNew}",
+        "room_powerlevel_change": "{user} cambio el powerlevel de {changes}",
+        "users_are_typing": "{count} miembros estan escribiendo",
+        "user_is_typing": "{user} esta escribiendo",
+        "scale_image": "Escala de imagen",
+        "your_message": "Tu mensaje...",
+        "replying_to_event": "RESPONDIENDO A UN EVENTO: {message}",
+        "unread_messages": "Mensajes no leídos",
+        "user_changed_room_name": "{user} cambió el nombre de la sala {name}",
+        "user_changed_room_topic": "{user} cambió el tema de la sala a {topic}",
+        "room_joinrule_public": "público",
+        "room_joinrule_invite": "sólo con invitación",
+        "user_changed_join_rules": "{user} creo la sala {type}",
+        "room_history_joined": "Todos los miembros de la sala pueden leerlo desde el momento en que se unieron",
+        "room_history_invited": "Puede ser leido por todos los miembros de la sala desde que fueron invitados",
+        "room_history_shared": "Todos los miembros de la sala pueden leerlo",
+        "room_history_world_readable": "cualquiera puede leerlo",
+        "user_changed_room_history": "{user} Hizo historia en la habitación {type}",
+        "upload_progress_with_total": "Subido {count} de {total}",
+        "upload_progress": "Subido {count}",
+        "download_progress": "{percentage}% descargado",
+        "edited": "(editado)",
+        "file_prefix": "Archivo: ",
+        "user_said": "{user} dijo:",
+        "user_left": "{user} abandono el chat",
+        "user_joined": "{user} se unio al chat",
+        "user_was_invited": "{user} fue invitado al chat...",
+        "user_encrypted_room": "{user} hizo la habitación encriptada",
+        "user_changed_room_avatar": "{user} cambio el avatar de la sala",
+        "user_changed_avatar": "{user} cambio su avatar",
+        "user_created_room": "{user} creo la sala",
+        "user_aliased_room": "{user} hizo el alias de la sala {alias}",
+        "user_changed_display_name": "{user}cambio su nombre para mostrar a {displayName}",
+        "you": "Tú"
+    },
+    "menu": {
+        "login": "Iniciar sesión",
+        "logout": "Cerrar sesión",
+        "back": "Regresar",
+        "send": "Enviar",
+        "cancel": "Cancelar",
+        "ok": "OK",
+        "download": "Descargar",
+        "delete": "Eliminar",
+        "reply": "Responder",
+        "start_private_chat": "Chat privado con este usuario",
+        "edit": "Editar"
+    },
+    "Keanu Weblite": "Keanu Weblite",
+    "fallbacks": {
+        "download_name": "Descargar",
+        "original_text": "<original text>",
+        "video_file": "Archivo de video",
+        "audio_file": "Archivo de audio"
+    },
+    "power_level": {
+        "restricted": "Restringido",
+        "custom": "personalizado ({level})",
+        "default": "predeterminado",
+        "moderator": "Moderador",
+        "admin": "Administrador"
+    },
+    "voice_recorder": {
+        "not_supported_text": "Desafortunadamente, este navegador no admite la grabación de audio.",
+        "not_supported_title": "No esta permitido",
+        "failed_to_record": "No se pudo grabar el audio",
+        "release_to_cancel": "Suelta para cancelar",
+        "swipe_to_cancel": "Desliza para cancelar"
+    },
+    "room_info_sheet": {
+        "create_room": "Crear Grupo",
+        "view_details": "Ver detalles",
+        "this_room": "Este grupo"
+    }
+}

src/assets/translations/ug.json

@@ -0,0 +1,9 @@
+{
+    "menu": {
+        "ok": "تامام",
+        "download": "چۈشۈرۈش",
+        "delete": "ئۆچۈرۈش",
+        "edit": "تەھرىر"
+    },
+    "Keanu Weblite": "Keanu Weblite"
+}

src/assets/translations/zh_Hans.json

@@ -0,0 +1,186 @@
+{
+    "fallbacks": {
+        "download_name": "下载",
+        "original_text": "<原文>",
+        "video_file": "视频文件",
+        "audio_file": "音频文件"
+    },
+    "room_info": {
+        "hide_all": "隐藏",
+        "title": "信息",
+        "version_info": "由守护者计划提供支持.版本：{version}",
+        "leave_room_info": "注意：此步骤无法撤消。 确保您要注销并永久删除聊天记录。",
+        "leave_room": "离开群组",
+        "view_profile": "查看",
+        "identity_temporary": "您的身份 {displayName} 是临时的。 您可以更改您的姓名或设置密码来保留它。",
+        "identity": "您以 {displayName} 的身份登录。",
+        "my_profile": "我的简历",
+        "show_all": "显示所有",
+        "user_you": "{user} (你)",
+        "user": "{user}",
+        "members": "成员",
+        "purge": "删除聊天室",
+        "link_copied": "链接已复制!",
+        "join_public": "知道链接的任何人都可以加入",
+        "join_invite": "聊天室只能通过邀请加入",
+        "permissions": "权限",
+        "created_by": "由 {user} 创建"
+    },
+    "leave": {
+        "leave": "离开",
+        "go_back": "返回",
+        "create_account": "创建一个帐户",
+        "text_invite": "此群组已锁定。未经特别许可，您不能重新加入。",
+        "title_invite": "你确定要离开吗？",
+        "text_public_lastroom": "如果您想再次加入此群组，您可以以新身份加入。 要保留{user}，{action}。",
+        "text_public": "如果您知道链接，您可以随时再次加入此聊天室。",
+        "title_public": "再见，{user}"
+    },
+    "login": {
+        "login": "登录",
+        "password": "密码",
+        "title": "登录",
+        "password_required": "需要密码",
+        "username_required": "需要用户名",
+        "username": "用户名"
+    },
+    "device_list": {
+        "title": "设备",
+        "not_verified": "未验证",
+        "verified": "已验证",
+        "blocked": "被封锁"
+    },
+    "room": {
+        "leave": "离开",
+        "members": "无成员 | 1 名成员 | {count} 名成员"
+    },
+    "message": {
+        "you": "你",
+        "user_aliased_room": "{user} 把聊天室别名设为 {alias}",
+        "user_created_room": "{user} 创建了聊天室",
+        "user_changed_room_topic": "{user} 把聊天室的话题更改为{topic}",
+        "user_changed_room_name": "{user} 把聊天室的名更改为 {name}",
+        "room_joinrule_public": "公开",
+        "room_joinrule_invite": "只邀请",
+        "user_changed_join_rules": "{user} 已创建了聊天室 {type}",
+        "room_history_joined": "成员从加入时就可以阅读",
+        "room_history_invited": "成员从被邀请的那刻起可以阅读",
+        "room_history_shared": "聊天室里的所有成员都可以阅读",
+        "room_history_world_readable": "任何人都可读",
+        "user_changed_room_history": "{user} 创建了聊天室的历史 {type}",
+        "upload_progress_with_total": "已上传 {total} 的 {count}",
+        "upload_progress": "已上传 {count}",
+        "download_progress": "{percentage}% 已下载",
+        "edited": "(已编辑)",
+        "file_prefix": "文件： ",
+        "user_said": "{user} 说:",
+        "user_left": "{user} 已退出聊天",
+        "user_joined": "{user} 已加入聊天",
+        "user_was_invited": "{user} 被邀请加入聊天...",
+        "user_encrypted_room": "{user} 把聊天室加密了",
+        "user_changed_room_avatar": "{user} 更改了聊天室的头像",
+        "user_changed_avatar": "{user} 更改了头像",
+        "user_changed_display_name": "{user} 把显示名更改为 {displayName}",
+        "unread_messages": "未读消息",
+        "user_powerlevel_change_from_to": "{user} 从 {powerOld} 到 {powerNew}",
+        "room_powerlevel_change": "{user}更改了{changes} 的能量等级",
+        "users_are_typing": "{count} 成员正在输入",
+        "user_is_typing": "{user} 正在输入",
+        "scale_image": "缩放图像",
+        "your_message": "你的信息...",
+        "replying_to_event": "回复事件：{message}"
+    },
+    "menu": {
+        "login": "登录",
+        "send": "发送",
+        "cancel": "取消",
+        "download": "下载",
+        "delete": "删除",
+        "edit": "编辑",
+        "start_private_chat": "与该用户私人聊天",
+        "logout": "退出",
+        "ok": "好的",
+        "reply": "回复",
+        "back": "返回"
+    },
+    "Keanu Weblite": "网络灯",
+    "power_level": {
+        "restricted": "被限制",
+        "custom": "自定义({level})",
+        "default": "默认",
+        "moderator": "版主",
+        "admin": "行政人员"
+    },
+    "voice_recorder": {
+        "not_supported_text": "很遗憾，此浏览器不支持录音。",
+        "not_supported_title": "不支持",
+        "failed_to_record": "无法录制音频",
+        "release_to_cancel": "释放取消",
+        "swipe_to_cancel": "滑动取消"
+    },
+    "room_info_sheet": {
+        "create_room": "创建群组",
+        "view_details": "查看详情",
+        "this_room": "这个群组"
+    },
+    "purge_room": {
+        "button": "删除聊天室",
+        "title": "删除聊天室?",
+        "info": "此操作将会关闭所有成员的聊天室。 它无法撤消。"
+    },
+    "invite": {
+        "title": "添加好友",
+        "status_inviting": "正在邀请好友{index} 的 {count}",
+        "status_error": "邀请一位或多位好友失败！",
+        "send_invites_to": "发送邀请至",
+        "done": "完毕"
+    },
+    "join": {
+        "status_joining": "正在加入聊天室...",
+        "status_logging_in": "正在登录中...",
+        "join_guest": "以访客身份加入",
+        "join": "加入聊天室",
+        "joining_as": "您以以下身份加入：",
+        "shared_computer": "正在使用一台共享的电脑",
+        "user_name_label": "用户名",
+        "title": "欢迎来到 {roomName}"
+    },
+    "profile": {
+        "display_name": "显示名称",
+        "password_repeat": "重复新密码",
+        "password_new": "新的密码",
+        "password_old": "旧密码",
+        "change_password": "更改密码",
+        "change_name": "更改名称",
+        "set_password": "设置密码",
+        "temporary_identity": "这个身份是暂时的。为了再次使用这个暂时身份，请设置密码",
+        "title": "我的简历"
+    },
+    "new_room": {
+        "status_avatar": "正在上传头像：{count}",
+        "status_avatar_total": "正在上传头像：{total}的 {count}",
+        "status_creating": "创建聊天室",
+        "invite_description": "从列表中选择或者按帐户 ID 搜索",
+        "invite_info": "仅添加人员",
+        "public_description": "获取链接以分享",
+        "public_info": "有链接的任何人",
+        "link_copied": "链接已复制！",
+        "add_people": "添加人员",
+        "get_link": "获取链接",
+        "join_permissions_info": "这些权限决定加入群组的方式以及邀请他人有多容易. 那些权限随时可以更改。",
+        "set_join_permissions": "设置加入权限",
+        "join_permissions": "加入权限",
+        "name_room": "为群组命名",
+        "next": "下一步",
+        "done": "完毕",
+        "new_room": "新的群组"
+    },
+    "room_welcome": {
+        "got_it": "知道了",
+        "info_permissions": "在群组设置中，您随时可以更改“加入权限”和“消息历史”。",
+        "info": "关于您的群组，您需要了解以下几点：",
+        "join_invite": "只有您邀请的人可以加入。",
+        "join_public": "任何人都可以加入通过打开此链接: {link}",
+        "welcome": "欢迎！"
+    }
+}

src/components/ActionRow.vue

@@ -1,6 +1,11 @@
 <template>
-  <v-row class="action-row ma-0 pa-0" no-gutters align-content="center" v-on="$listeners">
+  <v-row
-    <v-col cols="auto" class="mr-2">
+    class="action-row ma-0 pa-0"
+    no-gutters
+    align-content="center"
+    v-on="$listeners"
+  >
+    <v-col cols="auto" class="me-2">
       <v-icon size="22">{{ icon }}</v-icon>
     </v-col>
     <v-col>{{ text }}</v-col>

src/components/Chat.vue

@@ -355,7 +355,10 @@
       </v-dialog>
     </div>
 
-    <MessageOperationsBottomSheet ref="messageOperationsSheet">
+    <MessageOperationsBottomSheet
+      ref="messageOperationsSheet"
+      style="background-color: #f776777"
+    >
       <MessageOperationsPicker
         v-on:close="showEmojiPicker = false"
         v-if="selectedEvent"
@@ -369,7 +372,7 @@
       />
       <VEmojiPicker
         ref="emojiPicker"
-        style="width: 100%"
+        style="width: 100%; background-color: #ffffff"
         @select="emojiSelected"
       />
     </MessageOperationsBottomSheet>
@@ -406,8 +409,11 @@
       width="80%"
     >
       <v-card>
-        <v-card-title>{{ $t("voice_recorder.not_supported_title") }}</v-card-title>
+        <v-card-title>{{
-        <v-card-text>{{ $t("voice_recorder.not_supported_text") }}
+          $t("voice_recorder.not_supported_title")
+        }}</v-card-title>
+        <v-card-text
+          >{{ $t("voice_recorder.not_supported_text") }}
         </v-card-text>
         <v-divider></v-divider>
         <v-card-actions>
@@ -691,7 +697,8 @@ export default {
       if (ref && ref[0]) {
         if (this.showContextMenuAnchor) {
           var rectAnchor = this.showContextMenuAnchor.getBoundingClientRect();
-          var rectChat = this.$refs.messageOperationsStrut.getBoundingClientRect();
+          var rectChat =
+            this.$refs.messageOperationsStrut.getBoundingClientRect();
           top = rectAnchor.top - rectChat.top;
           left = rectAnchor.left - rectChat.left;
           if (left + 250 > rectChat.right) {
@@ -710,7 +717,8 @@ export default {
       if (ref && ref[0]) {
         if (this.showAvatarMenuAnchor) {
           var rectAnchor = this.showAvatarMenuAnchor.getBoundingClientRect();
-          var rectChat = this.$refs.avatarOperationsStrut.getBoundingClientRect();
+          var rectChat =
+            this.$refs.avatarOperationsStrut.getBoundingClientRect();
           top = rectAnchor.top - rectChat.top;
           left = rectAnchor.left - rectChat.left;
           // if (left + 250 > rectChat.right) {
@@ -1663,6 +1671,12 @@ export default {
     updateRecentEmojis() {
       if (this.$refs.emojiPicker) {
         this.recentEmojis = this.$refs.emojiPicker.mapEmojis["Frequently"];
+        if (this.recentEmojis.length < 20) {
+          let peoples = this.$refs.emojiPicker.mapEmojis["Peoples"];
+          for (var p of peoples) {
+            this.recentEmojis.push(p);
+          }
+        }
         return;
       }
       this.recentEmojis = [];

src/components/ChatHeader.vue

@@ -4,56 +4,75 @@
       <v-col
         cols="auto"
         class="chat-header-members text-start ma-0 pa-0"
-        style="overflow:hidden;cursor:pointer" @click.stop="onHeaderClicked"
+        style="overflow: hidden; cursor: pointer"
+        @click.stop="onHeaderClicked"
       >
-        <v-avatar size="40" class="mr-2">
+        <v-avatar size="40" class="me-2">
           <v-img :src="room.avatar" />
         </v-avatar>
       </v-col>
 
-      <v-col class="ma-0 pa-0 flex-shrink-1 flex-nowrap" style="overflow:hidden;cursor:pointer" @click.stop="onHeaderClicked">
+      <v-col
-        <div class="d-flex flex-nowrap room-name-inline">{{ room.summary.info.title }} <!--<v-icon>expand_more</v-icon>--></div>
+        class="ma-0 pa-0 flex-shrink-1 flex-nowrap"
-        <div class="num-members">{{ $tc('room.members', memberCount) }}</div>
+        style="overflow: hidden; cursor: pointer"
+        @click.stop="onHeaderClicked"
+      >
+        <div class="d-flex flex-nowrap room-name-inline">
+          {{ room.summary.info.title }}
+          <!--<v-icon>expand_more</v-icon>-->
+        </div>
+        <div class="num-members">{{ $tc("room.members", memberCount) }}</div>
       </v-col>
       <v-col cols="auto" class="text-end ma-0 pa-0">
-        <v-btn text class="leave-button" @click.stop="leaveRoom">{{$t('room.leave')}}</v-btn>
+        <v-btn text class="leave-button" @click.stop="leaveRoom">{{
+          $t("room.leave")
+        }}</v-btn>
       </v-col>
-      <v-col cols="auto" class="text-end ma-0 pa-0 ml-2">
+      <v-col cols="auto" class="text-end ma-0 pa-0 ms-2">
-        <v-avatar class="avatar-32 clickable" size="32" color="#e0e0e0" @click.stop="showProfileInfo = true">
+        <v-avatar
+          class="avatar-32 clickable"
+          size="32"
+          color="#e0e0e0"
+          @click.stop="showProfileInfo = true"
+        >
           <img v-if="userAvatar" :src="userAvatar" />
-            <span v-else class="white--text">{{
+          <span v-else class="white--text">{{ userAvatarLetter }}</span>
-              userAvatarLetter
-            }}</span>
         </v-avatar>
       </v-col>
     </v-row>
 
     <!-- "REALLY LEAVE?" dialog -->
-    <LeaveRoomDialog :show="showLeaveConfirmation" :room="room" @close="showLeaveConfirmation = false" />
+    <LeaveRoomDialog
+      :show="showLeaveConfirmation"
+      :room="room"
+      @close="showLeaveConfirmation = false"
+    />
 
     <!-- PROFILE INFO POPUP -->
-    <ProfileInfoPopup :show="showProfileInfo" @close="showProfileInfo = false" />
+    <ProfileInfoPopup
-
+      :show="showProfileInfo"
+      @close="showProfileInfo = false"
+    />
   </v-container>
 </template>
 
 <script>
-import LeaveRoomDialog from '../components/LeaveRoomDialog';
+import LeaveRoomDialog from "../components/LeaveRoomDialog";
-import ProfileInfoPopup from '../components/ProfileInfoPopup';
+import ProfileInfoPopup from "../components/ProfileInfoPopup";
-import profileInfoMixin from '../components/profileInfoMixin';
+import profileInfoMixin from "../components/profileInfoMixin";
 
 export default {
   name: "ChatHeader",
   mixins: [profileInfoMixin],
   components: {
     LeaveRoomDialog,
-    ProfileInfoPopup
+    ProfileInfoPopup,
   },
   data() {
     return {
       memberCount: null,
       showLeaveConfirmation: false,
-      showProfileInfo: false
+      showProfileInfo: false,
     };
   },
   mounted() {
@@ -94,7 +113,7 @@ export default {
     },
 
     onHeaderClicked() {
-      this.$emit("header-click", {event: this.event});
+      this.$emit("header-click", { event: this.event });
     },
 
     updateMemberCount() {

src/components/CreateRoom.vue

@@ -63,7 +63,7 @@
               <v-avatar size="32">
                 <v-img :src="data.item.image" />
               </v-avatar>
-              <div class="ml-2">{{ data.item.name }}</div>
+              <div class="ms-2">{{ data.item.name }}</div>
             </template>
           </v-select>
           <v-switch
@@ -108,7 +108,7 @@
             class="filled-button"
             @click.stop="next"
             :disabled="roomName.length == 0"
-              >{{$t('new_room.create')}}</v-btn
+            >{{ $t("new_room.create") }}</v-btn
           >
         </v-col>
       </v-row>
@@ -171,7 +171,7 @@
           depressed
           class="outlined-button"
           @click.stop="getPublicLink"
-          ><v-icon class="mr-2">link</v-icon
+          ><v-icon class="me-2">link</v-icon
           >{{ $t("new_room.get_link") }}</v-btn
         >
         <v-btn
@@ -180,7 +180,7 @@
           depressed
           class="outlined-button"
           @click.stop="addPeople"
-          ><v-icon class="mr-2">person_add</v-icon
+          ><v-icon class="me-2">person_add</v-icon
           >{{ $t("new_room.add_people") }}</v-btn
         >
 

src/components/Join.vue

@@ -8,7 +8,7 @@
         @click.stop="handleLogin"
         :loading="loading"
         v-if="!currentUser"
-        >{{$t('menu.login')}}</v-btn
+        >{{ $t("menu.login") }}</v-btn
       >
 
       <v-avatar class="join-avatar">
@@ -17,7 +17,9 @@
           roomName.substring(0, 1).toUpperCase()
         }}</span>
       </v-avatar>
-      <div class="join-title">{{$t('join.title', {roomName: roomName})}}</div>
+      <div class="join-title">
+        {{ $t("join.title", { roomName: roomName }) }}
+      </div>
       <div class="join-message">
         <!-- Join the group chat in a web browser or with the Keanu app. -->
       </div>
@@ -57,15 +59,18 @@
                 <v-avatar size="32">
                   <v-img :src="data.item.image" />
                 </v-avatar>
-                <div class="ml-2">{{ data.item.name }}</div>
+                <div class="ms-2">{{ data.item.name }}</div>
               </template>
             </v-select>
-            <v-switch v-model="sharedComputer" :label="$t('join.shared_computer')" />
+            <v-switch
+              v-model="sharedComputer"
+              :label="$t('join.shared_computer')"
+            />
           </v-col>
         </v-row>
         <v-row v-else>
           <v-col>
-            {{$t('join.joining_as')}}
+            {{ $t("join.joining_as") }}
             <div style="display: inline-block">
               <v-avatar color="#e0e0e0" style="">
                 <v-img v-if="userAvatar" :src="userAvatar" />
@@ -97,7 +102,7 @@
         @click.stop="handleJoin"
         :loading="loading"
         v-if="!currentUser"
-        >{{$t('join.join_guest')}}</v-btn
+        >{{ $t("join.join_guest") }}</v-btn
       >
       <v-btn
         class="btn-dark"
@@ -106,7 +111,7 @@
         @click.stop="handleJoin"
         :loading="loading"
         v-else
-        >{{$t('join.join')}}</v-btn
+        >{{ $t("join.join") }}</v-btn
       >
 
       <!-- <div class="join-privacy">
@@ -138,9 +143,11 @@ export default {
   mounted() {
     this.$matrix.on("Room.myMembership", this.onMyMembership);
     this.availableAvatars = util.getDefaultAvatars();
-    this.selectAvatar(this.availableAvatars[
+    this.selectAvatar(
+      this.availableAvatars[
         Math.floor(Math.random() * this.availableAvatars.length)
-    ]);
+      ]
+    );
   },
   destroyed() {
     this.$matrix.off("Room.myMembership", this.onMyMembership);
@@ -194,7 +201,9 @@ export default {
       if (!this.currentUser || !this.currentUser.userId) {
         return null;
       }
-      return (this.currentUserDisplayName || this.currentUser.userId.substring(1))
+      return (
+        this.currentUserDisplayName || this.currentUser.userId.substring(1)
+      )
         .substring(0, 1)
         .toUpperCase();
     },
@@ -203,9 +212,9 @@ export default {
         return !this.$store.state.useLocalStorage;
       },
       set: function (sharedComputer) {
-        this.$store.commit('setUseLocalStorage', !sharedComputer);
+        this.$store.commit("setUseLocalStorage", !sharedComputer);
+      },
     },
-    }
   },
   watch: {
     roomId: {
@@ -223,7 +232,8 @@ export default {
         const self = this;
         this.waitingForMembership = true;
         if (this.currentUser) {
-          this.$matrix.getLoginPromise()
+          this.$matrix
+            .getLoginPromise()
             .then(() => {
               self.$matrix.setCurrentRoomId(self.roomAliasOrId); // Go to this room, now or when joined.
               const room = self.$matrix.getRoom(self.roomAliasOrId);
@@ -244,8 +254,8 @@ export default {
                 return;
               }
             })
-          .catch(err => {
+            .catch((err) => {
-            console.log("Error logging in: ", err)
+              console.log("Error logging in: ", err);
             })
             .finally(() => {
               this.waitingForMembership = false;
@@ -255,7 +265,7 @@ export default {
           this.waitingForMembership = false;
           this.getRoomInfo();
         }
-      }
+      },
     },
   },
 
@@ -300,7 +310,7 @@ export default {
     },
 
     handleLogin() {
-      this.$navigation.push({path: "/login"}, 1);
+      this.$navigation.push({ path: "/login" }, 1);
     },
 
     handleOpenApp() {
@@ -309,10 +319,11 @@ export default {
 
     handleJoin() {
       this.loading = true;
-      this.loadingMessage = this.$t('join.status_logging_in');
+      this.loadingMessage = this.$t("join.status_logging_in");
       const hasUser = this.currentUser ? true : false;
       var setProfileData = false;
-      return this.$matrix.getLoginPromise()
+      return this.$matrix
+        .getLoginPromise()
         .then(
           function (user) {
             if (user.is_guest && !hasUser) {
@@ -322,15 +333,24 @@ export default {
               setProfileData = true;
 
               // Set display name and avatar directly on the matrix object.
-              if (this.selectedProfile.name && this.selectedProfile.name.length > 0) {
+              if (
+                this.selectedProfile.name &&
+                this.selectedProfile.name.length > 0
+              ) {
                 this.$matrix.userDisplayName = this.selectedProfile.name;
               }
             }
 
-            if (!setProfileData || !this.selectedProfile.name || this.selectedProfile.name.length == 0) {
+            if (
+              !setProfileData ||
+              !this.selectedProfile.name ||
+              this.selectedProfile.name.length == 0
+            ) {
               return Promise.resolve(user);
             } else {
-              console.log("Join: Set display name to: " + this.selectedProfile.name);
+              console.log(
+                "Join: Set display name to: " + this.selectedProfile.name
+              );
               return this.$matrix.matrixClient.setDisplayName(
                 this.selectedProfile.name,
                 undefined
@@ -358,7 +378,7 @@ export default {
         .then(
           function (ignoreduser) {
             console.log("Join: joining room");
-            this.loadingMessage = this.$t('join.status_joining');
+            this.loadingMessage = this.$t("join.status_joining");
             return this.$matrix.matrixClient.joinRoom(this.roomId);
           }.bind(this)
         )

src/components/MessageOperationsBottomSheet.vue

@@ -10,7 +10,7 @@
           left: 0;
           bottom: 0;
           right: 0;
-          background-color: rgba(0, 0, 0, 0.3);
+          background-color: rgba(0, 0, 0, 0.15);
         "
       />
     </v-fade-transition>

src/components/ProfileInfoPopup.vue

@@ -41,20 +41,36 @@
         </v-container>
 
         <v-container class="mt-4 pa-0">
-          <ActionRow @click="viewProfile" :icon="'account_circle'" :text="$t('profile_info_popup.edit_profile')" />
+          <ActionRow
-          <ActionRow @click="logout" :icon="'logout'" :text="$t('profile_info_popup.logout')" />
+            @click="viewProfile"
+            :icon="'account_circle'"
+            :text="$t('profile_info_popup.edit_profile')"
+          />
+          <ActionRow
+            @click="logout"
+            :icon="'logout'"
+            :text="$t('profile_info_popup.logout')"
+          />
         </v-container>
 
         <div class="more-container">
-          <div class="want_more">🙌 {{$t('profile_info_popup.want_more')}}</div>
+          <div class="want_more">
+            🙌 {{ $t("profile_info_popup.want_more") }}
+          </div>
           <i18n path="profile_info_popup.powered_by" tag="div">
             <template v-slot:product>{{ product }}</template>
             <template v-slot:productLink>
               <a :href="productLink">{{ productLink }}</a>
             </template>
           </i18n>
-          <div style="position:relative;width:100%;height: 40px">
+          <div
-            <v-btn class="new_room" right absolute text @click="createRoom">{{ $t('profile_info_popup.new_room') }}</v-btn></div>
+            style="position: relative; width: 100%; height: 40px"
+            class="text-end"
+          >
+            <v-btn class="new_room" text @click="createRoom">{{
+              $t("profile_info_popup.new_room")
+            }}</v-btn>
+          </div>
         </div>
       </v-card-text>
     </v-card>
@@ -69,7 +85,7 @@ export default {
   name: "ProfileInfoPopup",
   mixins: [profileInfoMixin],
   components: {
-    ActionRow
+    ActionRow,
   },
   props: {
     show: {
@@ -90,7 +106,7 @@ export default {
     },
     productLink() {
       return config.productLink;
-    }
+    },
   },
   watch: {
     show: {
@@ -113,7 +129,7 @@ export default {
     createRoom() {
       this.showDialog = false;
       this.$navigation.push({ name: "CreateRoom" });
-    }
+    },
   },
 };
 </script>
@@ -127,12 +143,20 @@ export default {
   margin: 0px;
   top: 70px;
   right: 10px;
+  [dir="rtl"] & {
+    right: inherit;
+    left: 10px;
+  }
   border-radius: 40px;
   &::before {
-        content: '▲';
+    content: "▲";
     position: fixed;
     top: 57px;
     right: 22px;
+    [dir="rtl"] & {
+      left: 22px;
+      right: inherit;
+    }
     color: white;
   }
   .you-are {

src/components/RoomInfo.vue

@@ -15,7 +15,7 @@
         <v-btn
           color="black"
           depressed
-          class="header-button-right filled-button mr-3"
+          class="header-button-right filled-button me-3"
           @click.stop="showLeaveConfirmation = true"
           >👋 {{ $t("room_info.leave_room") }}</v-btn
         >
@@ -83,7 +83,7 @@
           item-value="id"
         >
           <template v-slot:selection="{ item }">
-            <v-icon color="black" class="mr-2">{{ item.icon }}</v-icon>
+            <v-icon color="black" class="me-2">{{ item.icon }}</v-icon>
             {{ item.text }}
           </template>
           <template v-slot:item="{ item, attrs, on }">

src/components/RoomList.vue

@@ -49,6 +49,7 @@
         v-for="room in $matrix.joinedRooms"
         :key="room.roomId"
         :value="room.roomId"
+        style="position: relative"
       >
         <v-list-item-avatar size="40" color="#e0e0e0">
           <v-img :src="room.avatar" />

src/components/messages/MessageOperations.vue

@@ -1,14 +1,14 @@
 <template>
   <div :class="{'message-operations':true,'incoming':incoming,'outgoing':!incoming}">
     <template v-for="(item,index) in emojis">
-      <v-btn v-if="index < maxRecents" :key="item.data" icon @click.stop="addQuickReaction(item.data)" class="ma-0 pa-0">
+      <v-btn v-if="index < maxRecents" :key="item.data" icon @click.stop="addQuickReaction(item.data)" class="ma-0 pa-0" dense>
-        <span class="recent-emoji" >{{ item.data }}</span>
+        <span class="recent-emoji">{{ item.data }}</span>
       </v-btn>
     </template>
-    <v-btn v-if="incoming" icon @click.stop="addReply" class="ma-0 pa-0">
+    <v-btn v-if="incoming" icon @click.stop="addReply" class="ma-0 pa-0" large>
       <v-icon>reply</v-icon>
     </v-btn>
-    <v-btn icon @click.stop="more" class="ma-0 pa-0">
+    <v-btn icon @click.stop="more" class="ma-0 pa-0" large>
       <v-icon>more_horiz</v-icon>
     </v-btn>  </div>
 </template>
@@ -46,9 +46,4 @@ export default {
 
 <style lang="scss">
 @import "@/assets/css/chat.scss";
-
-// .recent-emoji {
-//   width: 30px;
-// }
-
 </style>

vue.config.js

@@ -15,6 +15,10 @@ module.exports = {
     })
   },
 
+  configureWebpack: {
+    devtool: 'source-map'
+  },
+
   devServer: {
     //https: true
   },