feat: mobile layout and XEP detection

assets/_sizes.scss

@@ -11,3 +11,5 @@ $chat-search-results-width: 400px;
 
 $exit-button-size: 2.5rem;
 $exit-button-left-margin: 28px;
+
+$menu-content-elevation: 0;

assets/reset.scss

@@ -1,6 +1,6 @@
 // Remove default outlines that draw sometimes on selects
 * {
-  outline: none !important;
+  outline: none;
 }
 
 .reset-link {
@@ -31,18 +31,55 @@
 .hide-horizontal { overflow-x: hidden !important; }
 
 /** Scrollbar **/
-.os-scrollbar-track, .os-scrollbar-track:hover, .os-scrollbar-track.active {
-  background-color: transparentize(map-get($black, "base"), .7) !important;
+// Default is 50% transparent and #000
+.simplebar-scrollbar:before {
+  opacity: 1;
+  background-color: map-get($black, "darken");
 }
 
-.wide-scrollbar .os-scrollbar-vertical {
-  width: .7em !important;
+.narrow-scrollbar .simplebar-track {
+  width: 8px !important;
 }
-
-.narrow-scrollbar .os-scrollbar-vertical {
+.wide-scrollbar .simplebar-track {
   width: 8px !important;
+  background: transparentize(map-get($greys, "100"), 0.5) !important;
+  border-radius: .7em;
+  & .simplebar-scrollbar:before {
+    left: 0 !important;
+    right: 0 !important;
+    top: 0 !important;
+    bottom: 0 !important;
+  }
 }
 
 b {
   font-weight: 600 !important;
 }
+
+[data-simplebar] {
+  min-height: 0;
+}
+
+.simplebar-horizontal {
+  display: none;
+}
+
+.simplebar-x .simplebar-horizontal {
+  display: initial;
+}
+
+.simplebar-vertical {
+  margin-top: 4px !important;
+  margin-bottom: 4px !important;
+  .simplebar-no-gutter & {
+    margin-right: 4px;
+  }
+  .wide-scrollbar & {
+    margin-top: 10px !important;
+    margin-bottom: 10px !important;
+  }
+}
+.simplebar-horizontal {
+  margin-left: 4px !important;
+  margin-right: 4px !important;
+}

assets/settings/menuList.js

@@ -11,6 +11,11 @@ export default [
     },
     {
         content: [
+            {
+                title: "Supported XEPs",
+                type: "submenu",
+                to: "XEPs"
+            },
             {
                 title: "About",
                 type: "submenu",

assets/xeps/server/checks.js

@@ -0,0 +1,83 @@
+/**
+ * Server feature discovery data gets collected once,
+ * and is then passed to these checks to check their respective extension.
+ *
+ * See the Service Discovery XEP for more info, and each individual XEP on how to detect it
+ *
+ * The data looks like this:
+ * {
+ *     // disco info on own bare JID
+ *     self: {
+ *         extensions: [],
+ *         features:   [],
+ *         identities: [],
+ *     },
+ *
+ *     info: {
+ *         extensions: [],
+ *         features:   [],
+ *         identities: [],
+ *     },
+ *     items: [{
+ *         jid: "", name: "Natural Language Name",
+ *
+ *         // The respective disco info for the JID
+ *         info: {
+ *             extensions: [],
+ *             features:   [],
+ *             identities: [],
+ *         }
+ *     }],
+ *     services: [{
+ *         host, port, transport, type, username?, password?
+ *     }]
+ * }
+ */
+export default new Map([
+    // ["RFC 6121", ({info: {features}}) => features.includes("jabber:iq:roster")],
+
+    ["XEP-0045", ({info: {features}, items}) =>
+        features.includes("http://jabber.org/protocol/muc")
+        || items.some(i => i.info.features.includes("http://jabber.org/protocol/muc"))],
+
+    ["XEP-0163", ({info: {identities}}) =>
+        identities.some(i => i.category.toLocaleLowerCase() === 'pubsub'
+            && i.type.toLocaleLowerCase() === 'pep')],
+
+    // Latest XEP revision (as of May 20, 2021) says to suffix with :2, but :0, :1 are still in the wild
+    ["XEP-0313", ({info: {features}}) => features.some(str => str.startsWith("urn:xmpp:mam"))],
+
+    ["XEP-0363", ({info: {features}, items}) => features.includes("urn:xmpp:http:upload")
+        || items.some(i => i.info.features.includes("urn:xmpp:http:upload"))],
+
+    ["XEP-0411", ({self: {features}}) => features.includes("urn:xmpp:bookmarks-conversion:0")],
+
+    ["XEP-0215", ({info: {features}}) => features.includes("urn:xmpp:extdisco:1")
+        || features.includes("urn:xmpp:extdisco:2")],
+
+    ["XEP-0065", ({info: {identities}, items}) =>
+        (identities.some(i => i.category.toLocaleLowerCase() === 'proxy'
+            && i.type.toLocaleLowerCase() === 'bytestreams'))
+    || (items.identities.some(i => i.category.toLocaleLowerCase() === 'proxy'
+        && i.type.toLocaleLowerCase() === 'bytestreams'))],
+
+    ["XEP-0191", ({info: {features}}) => features.includes("urn:xmpp:blocking")],
+
+
+    ["TURN", ({services}) => services.some(s => s.type.toLocaleLowerCase() === "turn")],
+    ["STUN", ({services}) => services.some(s => s.type.toLocaleLowerCase() === "stun")],
+
+
+    // ["XEP-0115", ({features}) => {}],
+
+    // ["XEP-0198", ({features}) => {}],
+
+    ["XEP-0352", ({features}) => {
+        // TODO: to detect this, we need to check for a <csi xmlns='urn:xmpp:csi:0'/> in <stream:features/> when connecting. Stanza doesn't support atm.
+    }],
+
+    ["XEP-0280", ({info: {features}}) => features.includes("urn:xmpp:carbons:1")
+        || features.includes("urn:xmpp:carbons:2")],
+
+    ["XEP-0357", ({self: {features}}) => features.includes("urn:xmpp:push:0")],
+]);

assets/xeps/server/data.js

@@ -0,0 +1,71 @@
+export default new Map([
+    ["RFC 6121", {
+        name: "Roster Versioning",
+        desc: "Efficient roster updating by versioning and exchanging only the changed parts of roster."
+    }],
+    ["XEP-0030", {
+        name: "Service Discovery",
+        desc: "Protocol for discovering what the server supports. Nearly all other XEPs are discovered through this!"
+    }],
+    ["XEP-0045", {
+        name: "Multi-User Chat",
+        desc: "Support for rooms, moderation, roles, bans, and invites for multi-user chat rooms."
+    }],
+    ["XEP-0163", {
+        name: "Personal Eventing Protocol",
+        desc: "Lets users send events to people in their roster. Used for avatars and enabling OMEMO encryption"
+    }],
+    ["XEP-0313", {
+        name: "Message Archive Management",
+        desc: "Mechanism for querying and controlling messages archived on the server. This will be used to sync messages on first login, and subsequently as fallback if <b>Message Carbons</b> aren't supported"
+    }],
+    ["XEP-0363", {
+        name: "HTTP File Upload",
+        desc: "Allows for a way to transfer files between users by uploading the file to an intermediary HTTP server"
+    }],
+    ["XEP-0411", {
+        name: "Bookmarks Conversion",
+        desc: "Converts between <b>Private XMP-</b> and <b>PEP-based bookmarks</b>"
+    }],
+    ["XEP-0215", {
+        name: "External Service Discovery",
+        desc: "Lets clients discover services external to the XMPP network."
+    }],
+    ["XEP-0065", {
+        name: "SOCKS5 Bytestreams Proxy",
+        desc: "Provides a way for clients to stream binary data between themselves, directly or mediated. Used for things such as file transfer. This check passes if the server can act as a proxy between clients."
+    }],
+    ["XEP-0191", {
+        name: "Blocking Command",
+        desc: "Easy to implement, server-side user blocking."
+    }],
+    ["TURN", {
+        name: "TURN Service",
+        desc: "The server has a TURN service discoverable through <b>XEP-0215 External Service Discovery.</b>"
+    }],
+    ["STUN", {
+        name: "STUN Service",
+        desc: "The server has a STUN service discoverable through <b>XEP-0215 External Service Discovery.</b>"
+    }],
+    ["XEP-0115", {
+        name: "Entity Capabilities",
+        desc: "A robust, scalable way for exchanging info about capabilities supported by clients."
+    }],
+    ["XEP-0198", {
+        name: "Stream Management",
+        desc: "Improves network reliability by resuming interrupted streams, as well as delivery status."
+    }],
+    ["XEP-0352", {
+        name: "Client State Indication",
+        desc: "Lets a client tell the server when it's (in)active, so that the server can optimize traffic.",
+        warning: "Currently isn't detected, even when present."
+    }],
+    ["XEP-0280", {
+        name: "Message Carbons",
+        desc: "Send carbon copies of messages to all of your devices, keeping them up-to-date."
+    }],
+    ["XEP-0357", {
+        name: "Push Notifications",
+        desc: "The server knows how and when to send you push notifications."
+    }],
+]);

components/Avatar.vue

@@ -1,6 +1,6 @@
 <template>
-  <v-img v-if="avatar" :width="size" :height="size" :src="avatar" class="rounded-circle" eager :transition="false"/>
-  <default-avatar :size="size" :color="color" v-else/>
+  <v-img v-if="avatar" :width="size" :height="size" :src="avatar" class="rounded-circle" eager :transition="false" @click="$emit('click', $event)"/>
+  <default-avatar :size="size" :color="color" v-else @click="$emit('click', $event)"/>
 </template>
 
 <script>

components/Badge.vue

@@ -1,5 +1,5 @@
 <template functional>
-  <div class="badge-container">
+  <div class="badge-container" :class="[data.class, data.staticClass]" @click="listeners.click && listeners.click($event)">
     <slot/>
     <div class="badge-wrapper w-100 h-100">
       <div class="badge" :class="{dot: !$slots.badge}">

components/BadgedAvatar.vue

@@ -1,8 +1,8 @@
 <template functional>
-  <badge :color="props.color" :border-color="props.borderColor" bordered>
-    <avatar :size="props.size" :jid="props.jid"/>
+  <badge :color="props.color" :border-color="props.borderColor" bordered :class="[data.class, data.staticClass]" @click="listeners.click && listeners.click($event)">
+    <avatar :size="props.size" :jid="props.jid" @click="listeners.click && listeners.click($event)"/>
     <template #badge>
-      <slot/>
+      <slot @click="listeners.click && listeners.click($event)"/>
     </template>
   </badge>
 </template>
@@ -11,7 +11,10 @@
   export default {
     name: "BadgedAvatar",
     props: {
-      size: Number,
+      size: {
+        type: Number,
+        default: 36
+      },
       jid: String,
       color: String,
       borderColor: String,

components/BottomSheet.vue

@@ -0,0 +1,58 @@
+<template>
+  <vue-bottom-sheet max-width="100vw" max-height="85vh" overlay click-to-close ref="mobileDialog">
+    <v-list tile subheader color="transparent" class="mb-6">
+
+      <template v-for="(item, i) in items">
+        <v-list-item ripple :key="i" @click="click(item)($event)"
+                     :nuxt="!!item.to" :to="item.to"
+                     :href="item.href" v-if="!item.divider">
+          <v-icon v-if="item.icon" :color="item.color || 'white'" :size="iconSize" class="mr-2">{{item.icon}}</v-icon>
+          <v-list-item-title :class="(item.color || 'white') + '--text'">{{item.title}}</v-list-item-title>
+        </v-list-item>
+        <v-divider v-else class="mx-4 my-2"/>
+      </template>
+
+      <slot/>
+
+    </v-list>
+  </vue-bottom-sheet>
+</template>
+
+<script>
+export default {
+  name: "BottomSheet",
+  props: {
+    // [{icon?, color?, title, handler? | to? | href?}]
+    items: Array,
+    divider: {
+      type: Boolean,
+      default: true,
+    },
+    iconSize: {
+      type: Number | String,
+      default: "1.5em",
+    }
+  },
+  methods: {
+    open()  { this.$refs.mobileDialog.open();  },
+    close() { this.$refs.mobileDialog.close(); },
+    click(item) {
+      const handler = item.handler || (()=>{});
+      return e => {
+        handler(e);
+        this.close()
+      };
+    }
+  },
+}
+</script>
+
+<style scoped lang="scss">
+*::v-deep .bottom-sheet__card {
+  background: map-get($greys, "200") !important;
+}
+
+*::v-deep .bottom-sheet__bar {
+  background: map-get($white, "base") !important;
+}
+</style>

components/Chat/ChatMessageForm.vue

@@ -102,4 +102,12 @@
       display: inline;
     }
   }
+
+  *::v-deep .v-text-field__slot {
+    & textarea::placeholder {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
 </style>

components/Chat/Message/message.scss

@@ -22,20 +22,6 @@
   overflow: hidden;
 }
 
-.highlight {
-  animation-name: highlight;
-  animation-duration: 1.0s;
-}
-
-@keyframes highlight {
-  25%, 75% {
-    background: map-get($greys, "300");
-  }
-  0%, 100% {
-    background: default;
-  }
-}
-
 .darken-on-hover {
   @include darken-on-hover(map-get($greys, "200"));
 }

components/Chat/MessageGroup.vue

@@ -1,10 +1,8 @@
 <template functional>
   <div class="mb-2">
-    <div v-for="(message, i) in props.group" :key="i">
-      <span :id="`msg:${message.timestamp}`"/>
-      <message :heading="i === 0" darken-on-hover
-        :from="message.from" :body="message.body" :timestamp="message.timestamp"/>
-    </div>
+    <message v-for="(message, i) in props.group" :key="i"
+             :heading="i === 0" darken-on-hover
+             :from="message.from" :body="message.body" :timestamp="message.timestamp"/>
   </div>
 </template>