Use base classes for message types

This avoids unnecessary duplication of code for "avatar", "sender" etc in the general layout of messages.

src/components/messages/MessageIncomingFile.vue

@@ -1,12 +1,5 @@
 <template>
-  <div :class="messageClasses">
-    <v-avatar class="avatar" size="32" color="#ededed">
-      <img v-if="messageEventAvatar(event)" :src="messageEventAvatar(event)" />
-      <span v-else class="white--text headline">{{
-        messageEventDisplayName(event).substring(0, 1).toUpperCase()
-      }}</span>
-    </v-avatar>
-    <QuickReactions :event="event" :reactions="reactions" />
+  <message-incoming v-bind="{...$props, ...$attrs}">
     <div class="bubble">
       <div class="original-message" v-if="inReplyToText">
         <div class="original-message-sender">
@@ -28,27 +21,16 @@
           >(edited)</span
         >
       </div>
-      <!-- <div>{{ JSON.stringify(event) }}</div> -->
     </div>
-    <div class="op-button" ref="opbutton">
-      <v-btn icon @click.stop="showContextMenu($refs.opbutton)"
-        ><v-icon>more_vert</v-icon></v-btn
-      >
-    </div>
-    <div v-if="showSenderAndTime" class="senderAndTime">
-      <div class="sender">{{ messageEventDisplayName(event) }}</div>
-      <div class="time">
-        {{ formatTime(event.event.origin_server_ts) }}
-      </div>
-    </div>
-  </div>
+  </message-incoming>
 </template>
 
 <script>
-import messageMixin from "./messageMixin";
+import MessageIncoming from "./MessageIncoming.vue";
 
 export default {
-  mixins: [messageMixin],
+  extends: MessageIncoming,
+  components: { MessageIncoming }
 };
 </script>