add throbber, room search, room preview

public/sym/throbber.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width='200px' height='200px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-ring-alt">
+<rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect>
+<circle cx="50" cy="50" r="40" stroke="#d9d9d9" fill="none" stroke-width="10" stroke-linecap="round"></circle>
+<circle cx="50" cy="50" r="40" stroke="#009eff" fill="none" stroke-width="10" stroke-linecap="round">
+<animate attributeName="stroke-dashoffset" dur="2s" repeatCount="indefinite" from="502" to="0"></animate>
+<animate attributeName="stroke-dasharray" dur="2s" repeatCount="indefinite" values="125.5 125.5;1 250;125.5 125.5"></animate>
+</circle>
+</svg>

src/components/throbber.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="box">
+    <img class="icon" :src="'./sym/throbber.svg'" alt="[animation]"/>
+    <div class="text">{{text}}</div>
+  </div>
+</template>
+
+<script>
+export default {
+name: "throbber",
+  props:{
+    text: String
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .box{
+    position: absolute;
+    height: 8rem;
+    width: 8rem;
+    background-color: #1d1d1d;
+    box-shadow: 6px 6px 20px #111;
+    border-radius: 2rem;
+    .icon{
+      position: absolute;
+      top: 15%;
+      left: 25%;
+      height: 50%;
+      width: 50%;
+    }
+    .text{
+      position: absolute;
+      bottom: 1rem;
+      width: 100%;
+      text-align: center;
+    }
+  }
+</style>

src/views/rooms.vue

@@ -1,18 +1,22 @@
 <template>
   <div v-if="matrix.loading">
-    loading...
+    <throbber class="throbber" text="loading"/>
   </div>
   <div v-else>
     <div id="roomList" class="roomList">
       <h1>[chat]</h1>
-      <div v-for="room in matrix.rooms" :key="room.roomId" @click="openChat(room)" class="roomListElement">
-        <userThumbnail
-          class="roomImg"
-          :mxcURL="getUrl(room)"
-          :fallback="room.roomId"
-          :size="3"
-        />
-        <div class="roomListName">{{room.name}}</div>
+      <input v-model="search" class="input" type="text" maxlength="50" placeholder="search"><br>
+      <div v-for="room in matrix.rooms" :key="room" @click="openChat(room)" >
+        <div v-if="!search || room.name.toLowerCase().includes(search.toLowerCase())" class="roomListElement">
+          <userThumbnail
+            class="roomImg"
+            :mxcURL="getUrl(room)"
+            :fallback="room.roomId"
+            :size="3"
+          />
+          <div class="roomListName">{{room.name}}</div>
+          <div class="preview">{{getPreviewString(room)}}</div>
+        </div>
       </div>
     </div>
     <chat
@@ -46,10 +50,13 @@ import chatInformation from "@/components/chatInformation";
 import userThumbnail from "@/components/userThumbnail";
 import {matrix} from "@/main";
 import sdk from "matrix-js-sdk";
+import {getTime} from "@/lib/getTimeStrings";
+import throbber from "@/components/throbber";
 
 export default {
   name: "rooms",
   components:{
+    throbber,
     chat,
     chatInformation,
     userThumbnail
@@ -64,13 +71,31 @@ export default {
     getUrl(room){
       let avatarState = room.getLiveTimeline().getState(sdk.EventTimeline.FORWARDS).getStateEvents("m.room.avatar");
       return avatarState.length>0?avatarState[avatarState.length-1].getContent().url:undefined;
+    },
+    getLatestEvent(room){
+      if (!room.timeline[room.timeline.length-1]) return undefined;
+      return room.timeline[room.timeline.length-1].event;
+    },
+    getPreviewString(room){
+      let event = this.getLatestEvent(room);
+      if (!event) return '';
+      let text = event.content.body
+        ? event.content.body.length>20?event.content.body.substr(0,19)+'…':event.content.body
+        : 'unknown event';
+      return `${this.calcUserName(event.sender)}: ${text} ${getTime(event.origin_server_ts)}`;
+
+    },
+    calcUserName(userId) {
+      if (matrix.user === userId) return 'you';
+      return matrix.client.getUser(userId).displayName || userId;
     }
   },
   data(){
     return {
       matrix,
       currentRoom: undefined,
-      showChatInfo: false
+      showChatInfo: false,
+      search: ''
     }
   },
   mounted() {
@@ -108,9 +133,15 @@ export default {
 }
 .roomListName{
   position: absolute;
-  left: 4.5rem;
-  top: 1rem;
-  color: #fff;
+  left: 4rem;
+  top: 0.25rem;
+}
+.preview{
+  position: absolute;
+  top: 1.5rem;
+  left: 4rem;
+  font-size: 0.8rem;
+  text-align: left;
 }
 .roomListSmall{
   position: absolute;
@@ -154,6 +185,27 @@ export default {
 .roomImg.small{
   margin-left: calc(50% - 2rem);
 }
+.throbber{
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+input{
+  padding: 0 2rem 0 2rem;
+  height: 2.5rem;
+  width: calc(100% - 6rem);
+  left: 1rem;
+  color: #fff;
+  background-color: #1d1d1d;
+  border-radius: 1.25rem;
+  border: 1px solid #fff;
+  text-align: center;
+  font-size: 1.1rem;
+  margin: 0.5rem;
+  appearance: none;
+  outline: none;
+}
 
 @media (max-width: 48rem) {
   .roomList{