From d6f64de95ec4599ded407ef263cf9e8d68a79bd2 Mon Sep 17 00:00:00 2001
From: Troplo <troplo@troplo.com>
Date: Wed, 31 Aug 2022 21:41:59 +1000
Subject: [PATCH] 1.0.27

Usability improvements, fix Firefox message hovering.
---
 backend/routes/communications.js    |   23 +-
 frontend/package.json               |    2 +-
 frontend/src/App.vue                |    2 +
 frontend/src/assets/styles.css      |   15 +-
 frontend/src/components/Header.vue  |   30 +-
 frontend/src/components/Message.vue | 1319 +++++++++++----------------
 6 files changed, 594 insertions(+), 797 deletions(-)

diff --git a/backend/routes/communications.js b/backend/routes/communications.js
index 3df59c8..e40b8c0 100644
--- a/backend/routes/communications.js
+++ b/backend/routes/communications.js
@@ -992,13 +992,24 @@ router.delete("/:id/message/:mId", auth, async (req, res, next) => {
       ]
     })
     if (chat) {
-      const message = await Message.findOne({
-        where: {
-          id: req.params.mId,
-          chatId: chat.chat.id,
-          userId: req.user.id
+      let options
+      if (chat.rank === "admin") {
+        options = {
+          where: {
+            id: req.params.mId,
+            chatId: chat.chat.id
+          }
         }
-      })
+      } else {
+        options = {
+          where: {
+            id: req.params.mId,
+            chatId: chat.chat.id,
+            userId: req.user.id
+          }
+        }
+      }
+      const message = await Message.findOne(options)
       if (message) {
         await message.destroy()
         chat.chat.users.forEach((user) => {
diff --git a/frontend/package.json b/frontend/package.json
index 1164d3d..4bb8910 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "colubrina",
-  "version": "1.0.26",
+  "version": "1.0.27",
   "description": "Simple instant communication.",
   "private": true,
   "author": "Troplo <troplo@troplo.com>",
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index a9b05ce..938f14f 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -753,6 +753,8 @@ export default {
     }
   },
   async mounted() {
+    if (localStorage.getItem("forceEnableDevMode"))
+      this.$store.state.release = "dev"
     await this.$store.dispatch("doInit")
     if (this.$vuetify.breakpoint.mobile) {
       this.$store.state.drawer = false
diff --git a/frontend/src/assets/styles.css b/frontend/src/assets/styles.css
index d5cc112..aaafb27 100644
--- a/frontend/src/assets/styles.css
+++ b/frontend/src/assets/styles.css
@@ -15,6 +15,7 @@
   right: 0;
   margin-top: -15px;
   margin-right: 5px;
+  visibility: hidden;
 }
 /* large codeblock */
 code {
@@ -23,13 +24,25 @@ code {
   display: block;
   padding: 20px;
 }
-.message-hover {
+.message:hover {
   background-color: var(--v-bg-lighten1);
   border-radius: 5px;
 }
 .message-toast {
   background-color: rgba(47, 47, 47, 0.9) !important;
 }
+.message-date {
+  visibility: hidden;
+}
+.message:hover .message-date {
+  visibility: visible;
+}
+.message:hover .message-action-card {
+  visibility: visible;
+}
+.message:hover .hide-on-hover {
+  visibility: hidden;
+}
 img.emoji {
   /* Since we are using SVGs, you have to change the width using CSS */
   height: 1.4em;
diff --git a/frontend/src/components/Header.vue b/frontend/src/components/Header.vue
index d4db8a1..a8c12a6 100644
--- a/frontend/src/components/Header.vue
+++ b/frontend/src/components/Header.vue
@@ -601,9 +601,27 @@
         </v-tooltip>
       </template>
       <template v-else>
-        <v-toolbar-title>
-          {{ $route.name }}
-        </v-toolbar-title>
+        <v-toolbar-title
+          v-if="!$vuetify.breakpoint.mobile"
+          id="bettercompass-title"
+          :style="
+            'color: ' +
+            $vuetify.theme.themes[$vuetify.theme.dark ? 'dark' : 'light']
+              .primary
+          "
+          class="troplo-title"
+          @click="$router.push('/')"
+          style="cursor: pointer"
+          >{{ $store.state.site.name }}</v-toolbar-title
+        ><v-app-bar-nav-icon
+          v-if="
+            !$vuetify.breakpoint.mobile &&
+            $store.state.site.release !== 'stable'
+          "
+          style="z-index: 1000"
+          disabled
+          >{{ $store.state.site.release }}</v-app-bar-nav-icon
+        >
         <v-spacer></v-spacer>
         <v-tooltip bottom>
           <template v-slot:activator="{ on }">
@@ -954,6 +972,12 @@ export default {
   },
   methods: {
     goToRoute() {
+      if (this.route.value === "forceEnableDevMode") {
+        this.$store.state.site.release = "dev"
+        localStorage.setItem("forceEnableDevMode", "true")
+        this.$toast.success("OK")
+        return
+      }
       this.$router.push(this.route.value)
       this.route.modal = false
       this.route.value = ""
diff --git a/frontend/src/components/Message.vue b/frontend/src/components/Message.vue
index de270cd..47994fc 100644
--- a/frontend/src/components/Message.vue
+++ b/frontend/src/components/Message.vue
@@ -1,405 +1,231 @@
 <template>
   <div>
-    <v-hover v-slot="{ hover }">
-      <span>
-        <template v-if="!message.type">
-          <v-toolbar
-            @click="jumpToMessage(message.replyId)"
-            :key="message.keyId + '-reply-toolbar'"
-            elevation="0"
-            height="40"
-            color="card"
-            v-if="message.reply"
-            style="cursor: pointer"
+    <template>
+      <v-toolbar
+        @click="jumpToMessage(message.replyId)"
+        :key="message.keyId + '-reply-toolbar'"
+        elevation="0"
+        height="40"
+        color="card"
+        v-if="message.reply"
+        style="cursor: pointer"
+      >
+        <v-icon class="mr-2">mdi-reply</v-icon>
+        <v-avatar size="24" class="mr-2">
+          <v-img
+            :src="
+              $store.state.baseURL + '/usercontent/' + message.reply.user.avatar
+            "
+            v-if="message.reply.user.avatar"
+            class="elevation-1"
+          />
+          <v-icon v-else class="elevation-1"> mdi-account </v-icon>
+        </v-avatar>
+        <template v-if="message.reply.attachments.length">
+          <v-icon class="mr-2">mdi-file-image</v-icon>
+        </template>
+        <template
+          v-if="!message.reply.content && message.reply.attachments.length"
+        >
+          Click to view attachment
+        </template>
+        {{ message.reply.content.substring(0, 100) }}
+      </v-toolbar>
+      <v-list-item
+        :key="message.keyId"
+        :class="{
+          'pa-0': $vuetify.breakpoint.mobile,
+          'mentioned-message': mentioned
+        }"
+        class="message"
+        :dense="lastMessage"
+        :id="'message-' + index"
+        @contextmenu="show($event, 'message', message)"
+        :style="lastMessage ? 'margin-bottom: -5px; margin-top: -5px;' : ''"
+      >
+        <v-avatar
+          size="45"
+          class="mr-2"
+          v-if="!lastMessage"
+          :class="{ 'hide-on-hover': message.type }"
+        >
+          <v-img
+            :src="$store.state.baseURL + '/usercontent/' + message.user.avatar"
+            v-if="message.user.avatar && !message.type"
+            class="elevation-1"
+          />
+          <v-icon class="elevation-1" v-else-if="!message.type">
+            mdi-account
+          </v-icon>
+          <v-icon
+            v-else-if="message.type === 'leave'"
+            color="red"
+            class="mr-2 ml-1"
+            size="32"
           >
-            <v-icon class="mr-2">mdi-reply</v-icon>
-            <v-avatar size="24" class="mr-2">
-              <v-img
-                :src="
-                  $store.state.baseURL +
-                  '/usercontent/' +
-                  message.reply.user.avatar
-                "
-                v-if="message.reply.user.avatar"
-                class="elevation-1"
-              />
-              <v-icon v-else class="elevation-1"> mdi-account </v-icon>
-            </v-avatar>
-            <template v-if="message.reply.attachments.length">
-              <v-icon class="mr-2">mdi-file-image</v-icon>
-            </template>
-            <template
-              v-if="!message.reply.content && message.reply.attachments.length"
-            >
-              Click to view attachment
-            </template>
-            {{ message.reply.content.substring(0, 100) }}
-          </v-toolbar>
-          <v-list-item
-            :key="message.keyId"
-            :class="{
-              'message-hover': hover,
-              'pa-0': $vuetify.breakpoint.mobile,
-              'mentioned-message': mentioned
-            }"
-            :dense="lastMessage"
-            :id="'message-' + index"
-            @contextmenu="show($event, 'message', message)"
-            :style="lastMessage ? 'margin-bottom: -5px; margin-top: -5px;' : ''"
+            mdi-arrow-left
+          </v-icon>
+          <v-icon
+            v-else-if="message.type === 'join'"
+            size="32"
+            color="success"
+            class="mr-2 ml-1"
           >
-            <v-avatar size="45" class="mr-2" v-if="!lastMessage">
-              <v-img
-                :src="
-                  $store.state.baseURL + '/usercontent/' + message.user.avatar
-                "
-                v-if="message.user.avatar"
-                class="elevation-1"
-              />
-              <v-icon v-else class="elevation-1"> mdi-account </v-icon>
-            </v-avatar>
+            mdi-arrow-right
+          </v-icon>
+          <v-icon
+            v-else-if="message.type === 'pin'"
+            size="32"
+            color="grey"
+            class="mr-2 ml-1"
+          >
+            mdi-pin-outline
+          </v-icon>
+          <v-icon v-else size="32" color="grey" class="mr-2 ml-1">
+            mdi-pencil
+          </v-icon>
+        </v-avatar>
+        <v-tooltip top style="z-index: 15">
+          <template v-slot:activator="{ on }">
             <small
+              v-on="on"
               style="font-size: 9px; position: absolute"
-              class="grey--text"
-              v-if="lastMessage && hover"
+              class="grey--text message-date"
+              v-if="lastMessage || message.type"
             >
               {{ $date(message.createdAt).format("hh:mm A") }}
             </small>
-            <v-list-item-content :class="{ 'offset-message': lastMessage }">
-              <v-list-item-subtitle v-if="!lastMessage">
-                {{ getName(message.user) }}
-                <v-chip
-                  v-if="message.user.bot"
-                  color="calendarNormalActivity"
-                  small
-                >
-                  <v-icon small>mdi-robot</v-icon>&nbsp;
-                </v-chip>
-                <small>
-                  {{ $date(message.createdAt).format("hh:mm A, DD/MM/YYYY") }}
-                </small>
-                <v-tooltip top v-if="message.edited">
-                  <template v-slot:activator="{ on, attrs }">
-                    <span v-on="on" v-bind="attrs">
-                      <v-icon
-                        color="grey"
-                        small
-                        style="
-                          margin-bottom: 2px;
-                          margin-left: 4px;
-                          position: absolute;
-                        "
-                      >
-                        mdi-pencil
-                      </v-icon>
-                    </span>
-                  </template>
-                  <span>
-                    {{
-                      $date(message.editedAt).format("DD/MM/YYYY hh:mm:ss A")
-                    }}
-                  </span>
-                </v-tooltip>
-              </v-list-item-subtitle>
-              <span
-                v-if="edit.id !== message.id"
-                style="overflow-wrap: anywhere"
-              >
-                <span v-markdown>
-                  {{ message.content }}
+          </template>
+          <span>
+            {{
+              $date(message.createdAt).format("DD/MM/YYYY, hh:mm:ss A")
+            }}</span
+          >
+        </v-tooltip>
+        <v-list-item-content :class="{ 'offset-message': lastMessage }">
+          <v-list-item-subtitle v-if="!lastMessage && !message.type">
+            {{ getName(message.user) }}
+            <v-chip
+              v-if="message.user.bot"
+              color="calendarNormalActivity"
+              small
+            >
+              <v-icon small>mdi-robot</v-icon>&nbsp;
+            </v-chip>
+            <small>
+              {{ $date(message.createdAt).format("hh:mm A, DD/MM/YYYY") }}
+            </small>
+            <v-tooltip top v-if="message.edited">
+              <template v-slot:activator="{ on, attrs }">
+                <span v-on="on" v-bind="attrs">
+                  <v-icon
+                    color="grey"
+                    small
+                    style="
+                      margin-bottom: 2px;
+                      margin-left: 4px;
+                      position: absolute;
+                    "
+                  >
+                    mdi-pencil
+                  </v-icon>
                 </span>
-                <v-tooltip top v-if="message.edited && lastMessage">
-                  <template v-slot:activator="{ on }">
-                    <v-icon color="grey" small v-on="on" style="">
-                      mdi-pencil
-                    </v-icon>
-                  </template>
-                  <span>
-                    {{
-                      $date(message.editedAt).format("DD/MM/YYYY hh:mm:ss A")
-                    }}
-                  </span>
-                </v-tooltip>
-              </span>
-
-              <template v-if="edit.id !== message.id">
-                <v-row
-                  v-for="(embed, index) in message.embeds"
-                  :key="index"
-                  :id="'embed-' + index"
-                  no-gutters
-                >
-                  <v-card
-                    :min-width="!$vuetify.breakpoint.mobile ? 400 : 0"
-                    elevation="0"
-                    color="card"
-                    v-if="embed.type === 'image'"
-                  >
-                    <v-hover v-slot="{ hover }">
-                      <div>
-                        <v-img
-                          @click="setImagePreview(embed)"
-                          contain
-                          :max-width="500"
-                          :max-height="500"
-                          :src="$store.state.baseURL + embed.mediaProxyLink"
-                        >
-                          <template v-slot:placeholder>
-                            <v-row
-                              class="fill-height ma-0"
-                              align="center"
-                              justify="center"
-                            >
-                              <v-progress-circular
-                                indeterminate
-                                width="500"
-                                height="500"
-                                color="grey lighten-5"
-                              ></v-progress-circular>
-                            </v-row>
-                          </template>
-                          <template v-slot:default>
-                            <v-fade-transition v-if="hover">
-                              <v-overlay absolute>
-                                <v-icon large>mdi-arrow-expand-all</v-icon>
-                              </v-overlay>
-                            </v-fade-transition>
-                          </template>
-                        </v-img>
-                      </div>
-                    </v-hover>
-                  </v-card>
-                  <v-card
-                    v-if="embed.type !== 'image'"
-                    elevation="0"
-                    :color="
-                      embed.type === 'embed-v1' ? embed.backgroundColor : 'bg'
-                    "
-                    :max-width="400"
-                    :min-width="!$vuetify.breakpoint.mobile ? 300 : 0"
-                    class="ml-1 rounded-xl mb-1 mr-1"
-                  >
-                    <v-container fluid>
-                      <v-row v-if="embed.type === 'openGraph'">
-                        <v-col
-                          cols="12"
-                          class="text-xs-center"
-                          v-if="embed.openGraph.ogImage"
-                        >
-                          <v-img
-                            :src="
-                              embed.openGraph.ogImage?.url ||
-                              embed.openGraph.ogImage[0]?.url
-                            "
-                            class="elevation-1"
-                            contain
-                            :aspect-ratio="16 / 9"
-                          >
-                            <template v-slot:placeholder>
-                              <v-row
-                                class="fill-height ma-0"
-                                align="center"
-                                justify="center"
-                              >
-                                <v-progress-circular
-                                  indeterminate
-                                  color="grey lighten-5"
-                                ></v-progress-circular>
-                              </v-row>
-                            </template>
-                          </v-img>
-                        </v-col>
-                        <v-col cols="12" class="text-xs-center">
-                          <h4>
-                            {{ embed.openGraph.ogSiteName }}
-                          </h4>
-                          <a
-                            :href="embed.link"
-                            target="_blank"
-                            style="text-decoration: none"
-                          >
-                            <h3>
-                              {{ embed.openGraph.ogTitle }}
-                            </h3>
-                          </a>
-                          <p v-if="embed.openGraph.ogDescription">
-                            {{ embed.openGraph.ogDescription }}
-                          </p>
-                        </v-col>
-                      </v-row>
-                      <v-row v-else-if="embed.type === 'embed-v1'">
-                        <v-col
-                          cols="12"
-                          class="text-xs-center"
-                          v-if="embed.headerImage"
-                        >
-                          <v-img
-                            :src="
-                              embed.openGraph.headerImage?.url ||
-                              embed.openGraph.headerImage[0]?.url
-                            "
-                            class="elevation-1"
-                            contain
-                            :aspect-ratio="16 / 9"
-                          >
-                            <template v-slot:placeholder>
-                              <v-row
-                                class="fill-height ma-0"
-                                align="center"
-                                justify="center"
-                              >
-                                <v-progress-circular
-                                  indeterminate
-                                  color="grey lighten-5"
-                                ></v-progress-circular>
-                              </v-row>
-                            </template>
-                          </v-img>
-                        </v-col>
-                        <v-col cols="12" class="text-xs-center">
-                          <h4 v-if="embed.title">
-                            {{ embed.title }}
-                          </h4>
-                          <p v-if="embed.description">
-                            {{ embed.description }}
-                          </p>
-                          <v-row
-                            v-for="(graph, index) in embed.graphs"
-                            :key="'graph-' + index"
-                          >
-                            <v-col cols="12" class="text-xs-center">
-                              <h3>
-                                {{ graph.name }}
-                              </h3>
-                              <Chart
-                                :chart-data="graph.data"
-                                v-if="graph.data"
-                                :options="graphOptions"
-                              ></Chart>
-                              <p v-else>Chart data could not be loaded.</p>
-                            </v-col>
-                          </v-row>
-                          <v-row
-                            v-for="(field, index) in embed.fields"
-                            :key="'field-' + index"
-                            :id="'field-' + index"
-                            class="mt-1"
-                          >
-                            <v-col
-                              cols="12"
-                              class="text-xs-center"
-                              style="white-space: pre-wrap"
-                            >
-                              <h4>{{ field.name }}</h4>
-                              <p>{{ field.value }}</p>
-                            </v-col>
-                          </v-row>
-                          <a
-                            :href="embed.link.url"
-                            v-if="embed.link"
-                            target="_blank"
-                            style="text-decoration: none"
-                          >
-                            <h3>
-                              {{ embed.link.title }}
-                            </h3>
-                          </a>
-                          <small v-if="embed.footer">
-                            {{ embed.footer }}
-                          </small>
-                        </v-col>
-                      </v-row>
-                      <v-row v-else>
-                        <v-container>
-                          <h4>You must update Colubrina to see this embed.</h4>
-                        </v-container>
-                      </v-row>
-                    </v-container>
-                  </v-card>
-                </v-row>
-                <v-row v-if="message.poll" no-gutters>
-                  <v-card
-                    elevation="0"
-                    :max-width="500"
-                    :min-width="!$vuetify.breakpoint.mobile ? 400 : 200"
-                    class="ml-1 mb-1 mr-1 rounded-l"
-                    color="card lighten-1"
-                  >
-                    <v-toolbar color="toolbar" height="45">
-                      <v-toolbar-title>
-                        Poll: {{ message.poll.title }}
-                      </v-toolbar-title>
-                    </v-toolbar>
-                    <v-card-text>
-                      {{ message.poll.description }}
-                      <v-progress-linear
-                        v-for="option in message.poll.options"
-                        :key="option.id"
-                        block
-                        class="mb-1 rounded-xl"
-                        height="30"
-                        text
-                        :value="
-                          percentageVotes.find(
-                            (percentage) => percentage.id === option.id
-                          ).percentage
-                        "
-                        color="success darken-1"
-                        background-opacity="0.2"
-                        outlined
-                        style="text-transform: none; cursor: pointer"
-                        @click="votePoll(option.id)"
-                      >
-                        <span style="float: left !important">
-                          <v-icon v-if="option.id === myVote?.answer">
-                            mdi-check-circle
-                          </v-icon>
-                          {{ option.value }} ({{
-                            percentageVotes.find(
-                              (percentage) => percentage.id === option.id
-                            ).percentage
-                          }}% /
-                          {{
-                            message.poll.answers.filter(
-                              (answer) => answer.answer === option.id
-                            )?.length || 0
-                          }})
-                        </span>
-                      </v-progress-linear>
-                      {{ message.poll.answers.length }} votes
-                    </v-card-text>
-                  </v-card>
-                </v-row>
               </template>
-              <template v-if="edit.id !== message.id">
-                <v-card
-                  v-for="(attachment, index) in message.attachments"
-                  :key="attachment.id"
-                  :id="'attachment-' + index"
-                  :max-width="500"
-                  :min-width="!$vuetify.breakpoint.mobile ? 400 : 0"
-                  elevation="0"
-                  color="card"
-                >
-                  <v-hover
-                    v-slot="{ hover }"
-                    v-if="
-                      attachment.extension === 'jpg' ||
-                      attachment.extension === 'png' ||
-                      attachment.extension === 'jpeg' ||
-                      attachment.extension === 'gif'
-                    "
-                  >
-                    <div>
+              <span>
+                {{ $date(message.editedAt).format("DD/MM/YYYY hh:mm:ss A") }}
+              </span>
+            </v-tooltip>
+          </v-list-item-subtitle>
+          <span v-if="edit.id !== message.id" style="overflow-wrap: anywhere">
+            <span v-markdown>
+              {{ message.content }}
+            </span>
+            <v-tooltip top v-if="message.edited && lastMessage">
+              <template v-slot:activator="{ on }">
+                <v-icon color="grey" small v-on="on" style="">
+                  mdi-pencil
+                </v-icon>
+              </template>
+              <span>
+                {{ $date(message.editedAt).format("DD/MM/YYYY hh:mm:ss A") }}
+              </span>
+            </v-tooltip>
+          </span>
+
+          <template v-if="edit.id !== message.id">
+            <v-row
+              v-for="(embed, index) in message.embeds"
+              :key="index"
+              :id="'embed-' + index"
+              no-gutters
+            >
+              <v-card
+                :min-width="!$vuetify.breakpoint.mobile ? 400 : 0"
+                elevation="0"
+                color="card"
+                v-if="embed.type === 'image'"
+              >
+                <v-hover v-slot="{ hover }">
+                  <div>
+                    <v-img
+                      @click="setImagePreview(embed)"
+                      contain
+                      :max-width="500"
+                      :max-height="500"
+                      :min-height="250"
+                      :min-width="250"
+                      :src="$store.state.baseURL + embed.mediaProxyLink"
+                    >
+                      <template v-slot:placeholder>
+                        <v-row
+                          class="fill-height ma-0"
+                          align="center"
+                          justify="center"
+                        >
+                          <v-progress-circular
+                            indeterminate
+                            width="500"
+                            height="500"
+                            color="grey lighten-5"
+                          ></v-progress-circular>
+                        </v-row>
+                      </template>
+                      <template v-slot:default>
+                        <v-fade-transition v-if="hover">
+                          <v-overlay absolute>
+                            <v-icon large>mdi-arrow-expand-all</v-icon>
+                          </v-overlay>
+                        </v-fade-transition>
+                      </template>
+                    </v-img>
+                  </div>
+                </v-hover>
+              </v-card>
+              <v-card
+                v-if="embed.type !== 'image'"
+                elevation="0"
+                :color="
+                  embed.type === 'embed-v1' ? embed.backgroundColor : 'bg'
+                "
+                :max-width="400"
+                :min-width="!$vuetify.breakpoint.mobile ? 300 : 0"
+                class="ml-1 rounded-xl mb-1 mr-1"
+              >
+                <v-container fluid>
+                  <v-row v-if="embed.type === 'openGraph'">
+                    <v-col
+                      cols="12"
+                      class="text-xs-center"
+                      v-if="embed.openGraph.ogImage"
+                    >
                       <v-img
-                        @click="setImagePreview(attachment)"
-                        contain
-                        :max-width="500"
-                        :max-height="500"
                         :src="
-                          $store.state.baseURL +
-                          '/usercontent/' +
-                          attachment.attachment
+                          embed.openGraph.ogImage?.url ||
+                          embed.openGraph.ogImage[0]?.url
                         "
+                        class="elevation-1"
+                        contain
+                        :aspect-ratio="16 / 9"
                       >
                         <template v-slot:placeholder>
                           <v-row
@@ -409,189 +235,301 @@
                           >
                             <v-progress-circular
                               indeterminate
-                              width="500"
-                              height="500"
                               color="grey lighten-5"
                             ></v-progress-circular>
                           </v-row>
                         </template>
-                        <template v-slot:default>
-                          <v-fade-transition v-if="hover">
-                            <v-overlay absolute>
-                              <v-icon large>mdi-arrow-expand-all</v-icon>
-                            </v-overlay>
-                          </v-fade-transition>
+                      </v-img>
+                    </v-col>
+                    <v-col cols="12" class="text-xs-center">
+                      <h4>
+                        {{ embed.openGraph.ogSiteName }}
+                      </h4>
+                      <a
+                        :href="embed.link"
+                        target="_blank"
+                        style="text-decoration: none"
+                      >
+                        <h3>
+                          {{ embed.openGraph.ogTitle }}
+                        </h3>
+                      </a>
+                      <p v-if="embed.openGraph.ogDescription">
+                        {{ embed.openGraph.ogDescription }}
+                      </p>
+                    </v-col>
+                  </v-row>
+                  <v-row v-else-if="embed.type === 'embed-v1'">
+                    <v-col
+                      cols="12"
+                      class="text-xs-center"
+                      v-if="embed.headerImage"
+                    >
+                      <v-img
+                        :src="
+                          embed.openGraph.headerImage?.url ||
+                          embed.openGraph.headerImage[0]?.url
+                        "
+                        class="elevation-1"
+                        contain
+                        :aspect-ratio="16 / 9"
+                      >
+                        <template v-slot:placeholder>
+                          <v-row
+                            class="fill-height ma-0"
+                            align="center"
+                            justify="center"
+                          >
+                            <v-progress-circular
+                              indeterminate
+                              color="grey lighten-5"
+                            ></v-progress-circular>
+                          </v-row>
                         </template>
                       </v-img>
-                    </div>
-                  </v-hover>
-                  <v-card-text v-else>
-                    <v-icon class="mr-2" :size="48">
-                      {{ fileTypes[attachment.extension] || "mdi-file" }}
-                    </v-icon>
-                    <span>
-                      {{ attachment.name }}
-                    </span>
-                  </v-card-text>
-                  <v-card-actions
-                    v-if="
-                      attachment.extension !== 'jpg' &&
-                      attachment.extension !== 'png' &&
-                      attachment.extension !== 'jpeg' &&
-                      attachment.extension !== 'gif'
+                    </v-col>
+                    <v-col cols="12" class="text-xs-center">
+                      <h4 v-if="embed.title">
+                        {{ embed.title }}
+                      </h4>
+                      <p v-if="embed.description">
+                        {{ embed.description }}
+                      </p>
+                      <v-row
+                        v-for="(graph, index) in embed.graphs"
+                        :key="'graph-' + index"
+                      >
+                        <v-col cols="12" class="text-xs-center">
+                          <h3>
+                            {{ graph.name }}
+                          </h3>
+                          <Chart
+                            :chart-data="graph.data"
+                            v-if="graph.data"
+                            :options="graphOptions"
+                          ></Chart>
+                          <p v-else>Chart data could not be loaded.</p>
+                        </v-col>
+                      </v-row>
+                      <v-row
+                        v-for="(field, index) in embed.fields"
+                        :key="'field-' + index"
+                        :id="'field-' + index"
+                        class="mt-1"
+                      >
+                        <v-col
+                          cols="12"
+                          class="text-xs-center"
+                          style="white-space: pre-wrap"
+                        >
+                          <h4>{{ field.name }}</h4>
+                          <p>{{ field.value }}</p>
+                        </v-col>
+                      </v-row>
+                      <a
+                        :href="embed.link.url"
+                        v-if="embed.link"
+                        target="_blank"
+                        style="text-decoration: none"
+                      >
+                        <h3>
+                          {{ embed.link.title }}
+                        </h3>
+                      </a>
+                      <small v-if="embed.footer">
+                        {{ embed.footer }}
+                      </small>
+                    </v-col>
+                  </v-row>
+                  <v-row v-else>
+                    <v-container>
+                      <h4>You must update Colubrina to see this embed.</h4>
+                    </v-container>
+                  </v-row>
+                </v-container>
+              </v-card>
+            </v-row>
+            <v-row v-if="message.poll" no-gutters>
+              <v-card
+                elevation="0"
+                :max-width="500"
+                :min-width="!$vuetify.breakpoint.mobile ? 400 : 200"
+                class="ml-1 mb-1 mr-1 rounded-l"
+                color="card lighten-1"
+              >
+                <v-toolbar color="toolbar" height="45">
+                  <v-toolbar-title>
+                    Poll: {{ message.poll.title }}
+                  </v-toolbar-title>
+                </v-toolbar>
+                <v-card-text>
+                  {{ message.poll.description }}
+                  <v-progress-linear
+                    v-for="option in message.poll.options"
+                    :key="option.id"
+                    block
+                    class="mb-1 rounded-xl"
+                    height="30"
+                    text
+                    :value="
+                      percentageVotes.find(
+                        (percentage) => percentage.id === option.id
+                      ).percentage
                     "
+                    color="success darken-1"
+                    background-opacity="0.2"
+                    outlined
+                    style="text-transform: none; cursor: pointer"
+                    @click="votePoll(option.id)"
                   >
-                    {{ attachment.name }} -
-                    {{ friendlySize(attachment.size) }}
-                    <v-spacer />
-                    <v-btn
-                      text
-                      icon
-                      :href="
-                        $store.state.baseURL +
-                        '/usercontent/' +
-                        attachment.attachment
-                      "
-                      target="_blank"
-                    >
-                      <v-icon> mdi-download </v-icon>
-                    </v-btn>
-                  </v-card-actions>
-                </v-card>
-              </template>
-              <CommsInput
-                :edit="edit"
-                :chat="chat"
-                :auto-scroll="autoScroll"
-                :end-edit="endEdit"
-                v-if="edit.id === message.id"
-              ></CommsInput>
-            </v-list-item-content>
+                    <span style="float: left !important">
+                      <v-icon v-if="option.id === myVote?.answer">
+                        mdi-check-circle
+                      </v-icon>
+                      {{ option.value }} ({{
+                        percentageVotes.find(
+                          (percentage) => percentage.id === option.id
+                        ).percentage
+                      }}% /
+                      {{
+                        message.poll.answers.filter(
+                          (answer) => answer.answer === option.id
+                        )?.length || 0
+                      }})
+                    </span>
+                  </v-progress-linear>
+                  {{ message.poll.answers.length }} votes
+                </v-card-text>
+              </v-card>
+            </v-row>
+          </template>
+          <template v-if="edit.id !== message.id">
             <v-card
-              elevation="8"
+              v-for="(attachment, index) in message.attachments"
+              :key="attachment.id"
+              :id="'attachment-' + index"
+              :max-width="500"
+              :min-width="!$vuetify.breakpoint.mobile ? 400 : 0"
+              elevation="0"
               color="card"
-              class="message-action-card"
-              v-if="!$vuetify.breakpoint.mobile && hover"
             >
-              <v-tooltip top>
-                <template v-slot:activator="{ on }">
-                  <span v-on="on">
-                    <v-btn
-                      icon
-                      v-on="on"
-                      v-if="message.userId === $store.state.user.id"
-                      @click="deleteMessage(message)"
-                    >
-                      <v-icon> mdi-delete </v-icon>
-                    </v-btn>
-                  </span>
-                </template>
-                <span> Delete </span>
-              </v-tooltip>
-              <v-tooltip top>
-                <template v-slot:activator="{ on }">
-                  <span v-on="on">
-                    <v-btn
-                      icon
-                      v-on="on"
-                      @click="
-                        edit.content = message.content
-                        edit.editing = true
-                        edit.id = message.id
-                      "
-                      v-if="
-                        message.userId === $store.state.user.id &&
-                        edit.id !== message.id
-                      "
-                    >
-                      <v-icon> mdi-pencil </v-icon>
-                    </v-btn>
-                  </span>
-                </template>
-                <span> Edit </span>
-              </v-tooltip>
-              <v-tooltip top>
-                <template v-slot:activator="{ on }">
-                  <span v-on="on">
-                    <v-btn
-                      v-on="on"
-                      icon
-                      @click="
-                        edit.content = ''
-                        edit.editing = false
-                        edit.id = null
-                      "
-                      v-if="
-                        message.userId === $store.state.user.id &&
-                        edit.id === message.id
-                      "
-                    >
-                      <v-icon> mdi-close </v-icon>
-                    </v-btn>
-                  </span>
-                </template>
-                <span> Discard Edits </span>
-              </v-tooltip>
-              <v-tooltip top>
-                <template v-slot:activator="{ on }">
-                  <span v-on="on">
-                    <v-btn
-                      icon
-                      @click="
-                        replying(message)
-                        focusInput()
-                      "
-                      v-on="on"
-                    >
-                      <v-icon> mdi-reply </v-icon>
-                    </v-btn>
-                  </span>
-                </template>
-                <span> Reply </span>
-              </v-tooltip>
-              <v-tooltip top>
-                <template v-slot:activator="{ on }">
-                  <span v-on="on">
-                    <v-btn
-                      v-on="on"
-                      icon
-                      v-if="
-                        chat.rank === 'admin' || chat.chat.type === 'direct'
-                      "
-                      @click="
-                        pinMessage()
-                        focusInput()
-                      "
-                    >
-                      <v-icon> mdi-pin </v-icon>
-                    </v-btn>
-                  </span>
-                </template>
-                <span> Pin to Chat </span>
-              </v-tooltip>
+              <v-hover
+                v-slot="{ hover }"
+                v-if="
+                  attachment.extension === 'jpg' ||
+                  attachment.extension === 'png' ||
+                  attachment.extension === 'jpeg' ||
+                  attachment.extension === 'gif'
+                "
+              >
+                <div>
+                  <v-img
+                    @click="setImagePreview(attachment)"
+                    contain
+                    :max-width="500"
+                    :max-height="500"
+                    :src="
+                      $store.state.baseURL +
+                      '/usercontent/' +
+                      attachment.attachment
+                    "
+                    :min-height="250"
+                    :min-width="250"
+                  >
+                    <template v-slot:placeholder>
+                      <v-row
+                        class="fill-height ma-0"
+                        align="center"
+                        justify="center"
+                      >
+                        <v-progress-circular
+                          indeterminate
+                          color="grey lighten-5"
+                        ></v-progress-circular>
+                      </v-row>
+                    </template>
+                    <template v-slot:default>
+                      <v-fade-transition v-if="hover">
+                        <v-overlay absolute>
+                          <v-icon large>mdi-arrow-expand-all</v-icon>
+                        </v-overlay>
+                      </v-fade-transition>
+                    </template>
+                  </v-img>
+                </div>
+              </v-hover>
+              <v-card-text v-else>
+                <v-icon class="mr-2" :size="48">
+                  {{ fileTypes[attachment.extension] || "mdi-file" }}
+                </v-icon>
+                <span>
+                  {{ attachment.name }}
+                </span>
+              </v-card-text>
+              <v-card-actions
+                v-if="
+                  attachment.extension !== 'jpg' &&
+                  attachment.extension !== 'png' &&
+                  attachment.extension !== 'jpeg' &&
+                  attachment.extension !== 'gif'
+                "
+              >
+                {{ attachment.name }} -
+                {{ friendlySize(attachment.size) }}
+                <v-spacer />
+                <v-btn
+                  text
+                  icon
+                  :href="
+                    $store.state.baseURL +
+                    '/usercontent/' +
+                    attachment.attachment
+                  "
+                  target="_blank"
+                >
+                  <v-icon> mdi-download </v-icon>
+                </v-btn>
+              </v-card-actions>
             </v-card>
-          </v-list-item>
-        </template>
-        <template v-else-if="message.type === 'leave'">
-          <v-list-item :key="message.keyId" :id="'message-' + index">
-            <v-icon color="red" class="mr-2 ml-1"> mdi-arrow-left </v-icon>
-            <v-list-item-content>
-              {{ message.content }}
-            </v-list-item-content>
-            <v-list-item-action>
-              <v-list-item-subtitle>
-                {{ $date(message.createdAt).format("DD/MM/YYYY hh:mm A") }}
-              </v-list-item-subtitle>
-              <v-list-item-subtitle>
+          </template>
+          <CommsInput
+            :edit="edit"
+            :chat="chat"
+            :auto-scroll="autoScroll"
+            :end-edit="endEdit"
+            v-if="edit.id === message.id"
+          ></CommsInput>
+        </v-list-item-content>
+        <v-card
+          elevation="8"
+          color="card"
+          class="message-action-card"
+          v-if="!$vuetify.breakpoint.mobile"
+        >
+          <v-tooltip top>
+            <template v-slot:activator="{ on }">
+              <span v-on="on">
                 <v-btn
                   icon
-                  v-if="message.userId === $store.state.user.id"
+                  v-on="on"
+                  v-if="
+                    message.userId === $store.state.user.id ||
+                    chat.rank === 'admin'
+                  "
                   @click="deleteMessage(message)"
                 >
                   <v-icon> mdi-delete </v-icon>
                 </v-btn>
+              </span>
+            </template>
+            <span> Delete </span>
+          </v-tooltip>
+          <v-tooltip top>
+            <template v-slot:activator="{ on }">
+              <span v-on="on">
                 <v-btn
                   icon
+                  v-on="on"
                   @click="
                     edit.content = message.content
                     edit.editing = true
@@ -604,7 +542,15 @@
                 >
                   <v-icon> mdi-pencil </v-icon>
                 </v-btn>
+              </span>
+            </template>
+            <span> Edit </span>
+          </v-tooltip>
+          <v-tooltip top>
+            <template v-slot:activator="{ on }">
+              <span v-on="on">
                 <v-btn
+                  v-on="on"
                   icon
                   @click="
                     edit.content = ''
@@ -618,257 +564,58 @@
                 >
                   <v-icon> mdi-close </v-icon>
                 </v-btn>
+              </span>
+            </template>
+            <span> Discard Edits </span>
+          </v-tooltip>
+          <v-tooltip top>
+            <template v-slot:activator="{ on }">
+              <span v-on="on">
                 <v-btn
                   icon
                   @click="
                     replying(message)
                     focusInput()
                   "
+                  v-on="on"
                 >
                   <v-icon> mdi-reply </v-icon>
                 </v-btn>
-              </v-list-item-subtitle>
-            </v-list-item-action>
-          </v-list-item>
-        </template>
-        <template v-else-if="message.type === 'join'">
-          <v-list-item :key="message.keyId" :id="'message-' + index">
-            <v-icon color="success" class="mr-2 ml-1"> mdi-arrow-right </v-icon>
-            <v-list-item-content>
-              {{ message.content }}
-            </v-list-item-content>
-            <v-list-item-action>
-              <v-list-item-subtitle>
-                {{ $date(message.createdAt).format("DD/MM/YYYY hh:mm A") }}
-              </v-list-item-subtitle>
-              <v-list-item-subtitle>
-                <v-btn
-                  icon
-                  v-if="message.userId === $store.state.user.id"
-                  @click="deleteMessage(message)"
-                >
-                  <v-icon> mdi-delete </v-icon>
-                </v-btn>
+              </span>
+            </template>
+            <span> Reply </span>
+          </v-tooltip>
+          <v-tooltip top>
+            <template v-slot:activator="{ on }">
+              <span v-on="on">
                 <v-btn
+                  v-on="on"
                   icon
+                  v-if="chat.rank === 'admin' || chat.chat.type === 'direct'"
                   @click="
-                    edit.content = message.content
-                    edit.editing = true
-                    edit.id = message.id
-                  "
-                  v-if="
-                    message.userId === $store.state.user.id &&
-                    edit.id !== message.id
-                  "
-                >
-                  <v-icon> mdi-pencil </v-icon>
-                </v-btn>
-                <v-btn
-                  icon
-                  @click="
-                    edit.content = ''
-                    edit.editing = false
-                    edit.id = null
-                  "
-                  v-if="
-                    message.userId === $store.state.user.id &&
-                    edit.id === message.id
-                  "
-                >
-                  <v-icon> mdi-close </v-icon>
-                </v-btn>
-                <v-btn
-                  icon
-                  @click="
-                    replying(message)
+                    pinMessage()
                     focusInput()
                   "
                 >
-                  <v-icon> mdi-reply </v-icon>
+                  <v-icon> mdi-pin </v-icon>
                 </v-btn>
-              </v-list-item-subtitle>
-            </v-list-item-action>
-          </v-list-item>
-        </template>
-        <template v-else-if="message.type === 'rename'">
-          <v-list-item :key="message.keyId" :id="'message-' + index">
-            <v-icon color="grey" class="mr-2 ml-1"> mdi-pencil </v-icon>
-            <v-list-item-content>
-              {{ message.content }}
-            </v-list-item-content>
-            <v-list-item-action>
-              <v-list-item-subtitle>
-                {{ $date(message.createdAt).format("DD/MM/YYYY hh:mm A") }}
-              </v-list-item-subtitle>
-              <v-list-item-subtitle>
-                <v-btn
-                  icon
-                  v-if="message.userId === $store.state.user.id"
-                  @click="deleteMessage(message)"
-                >
-                  <v-icon> mdi-delete </v-icon>
-                </v-btn>
-                <v-btn
-                  icon
-                  @click="
-                    edit.content = message.content
-                    edit.editing = true
-                    edit.id = message.id
-                  "
-                  v-if="
-                    message.userId === $store.state.user.id &&
-                    edit.id !== message.id
-                  "
-                >
-                  <v-icon> mdi-pencil </v-icon>
-                </v-btn>
-                <v-btn
-                  icon
-                  @click="
-                    edit.content = ''
-                    edit.editing = false
-                    edit.id = null
-                  "
-                  v-if="
-                    message.userId === $store.state.user.id &&
-                    edit.id === message.id
-                  "
-                >
-                  <v-icon> mdi-close </v-icon>
-                </v-btn>
-                <v-btn
-                  icon
-                  @click="
-                    replying(message)
-                    focusInput()
-                  "
-                >
-                  <v-icon> mdi-reply </v-icon>
-                </v-btn>
-              </v-list-item-subtitle>
-            </v-list-item-action>
-          </v-list-item>
-        </template>
-        <template v-else-if="message.type === 'pin'">
-          <v-list-item :key="message.keyId" :id="'message-' + index">
-            <v-icon color="grey" class="mr-2 ml-1"> mdi-pin-outline </v-icon>
-            <v-list-item-content>
-              {{ message.content }}
-            </v-list-item-content>
-            <v-list-item-action>
-              <v-list-item-subtitle>
-                {{ $date(message.createdAt).format("DD/MM/YYYY hh:mm A") }}
-              </v-list-item-subtitle>
-              <v-list-item-subtitle>
-                <v-btn
-                  icon
-                  v-if="message.userId === $store.state.user.id"
-                  @click="deleteMessage(message)"
-                >
-                  <v-icon> mdi-delete </v-icon>
-                </v-btn>
-                <v-btn
-                  icon
-                  @click="
-                    edit.content = message.content
-                    edit.editing = true
-                    edit.id = message.id
-                  "
-                  v-if="
-                    message.userId === $store.state.user.id &&
-                    edit.id !== message.id
-                  "
-                >
-                  <v-icon> mdi-pencil </v-icon>
-                </v-btn>
-                <v-btn
-                  icon
-                  @click="
-                    edit.content = ''
-                    edit.editing = false
-                    edit.id = null
-                  "
-                  v-if="
-                    message.userId === $store.state.user.id &&
-                    edit.id === message.id
-                  "
-                >
-                  <v-icon> mdi-close </v-icon>
-                </v-btn>
-                <v-btn
-                  icon
-                  @click="
-                    replying(message)
-                    focusInput()
-                  "
-                >
-                  <v-icon> mdi-reply </v-icon>
-                </v-btn>
-              </v-list-item-subtitle>
-            </v-list-item-action>
-          </v-list-item>
-        </template>
-        <template v-else>
-          <v-list-item :key="message.keyId" :id="'message-' + index">
-            <v-icon color="grey" class="mr-2 ml-1"> mdi-pencil </v-icon>
-            <v-list-item-content>
-              {{ message.content }}
-            </v-list-item-content>
-            <v-list-item-action>
-              <v-list-item-subtitle>
-                {{ $date(message.createdAt).format("DD/MM/YYYY hh:mm A") }}
-              </v-list-item-subtitle>
-              <v-list-item-subtitle>
-                <v-btn
-                  icon
-                  v-if="message.userId === $store.state.user.id"
-                  @click="deleteMessage(message)"
-                >
-                  <v-icon> mdi-delete </v-icon>
-                </v-btn>
-                <v-btn
-                  icon
-                  @click="
-                    edit.content = message.content
-                    edit.editing = true
-                    edit.id = message.id
-                  "
-                  v-if="
-                    message.userId === $store.state.user.id &&
-                    edit.id !== message.id
-                  "
-                >
-                  <v-icon> mdi-pencil </v-icon>
-                </v-btn>
-                <v-btn
-                  icon
-                  @click="
-                    edit.content = ''
-                    edit.editing = false
-                    edit.id = null
-                  "
-                  v-if="
-                    message.userId === $store.state.user.id &&
-                    edit.id === message.id
-                  "
-                >
-                  <v-icon> mdi-close </v-icon>
-                </v-btn>
-                <v-btn
-                  icon
-                  @click="
-                    replying(message)
-                    focusInput()
-                  "
-                >
-                  <v-icon> mdi-reply </v-icon>
-                </v-btn>
-              </v-list-item-subtitle>
-            </v-list-item-action>
-          </v-list-item>
-        </template>
-      </span>
-    </v-hover>
+              </span>
+            </template>
+            <span> Pin to Chat </span>
+          </v-tooltip>
+          <v-menu offset-y v-if="$store.state.site.release === 'dev'">
+            <template v-slot:activator="{ on, attrs }">
+              <v-btn v-on="on" icon v-bind="attrs">
+                <v-icon> mdi-dots-horizontal </v-icon>
+              </v-btn>
+            </template>
+            <v-list>
+              <v-list-item><v-icon>mdi-delete</v-icon> Delete </v-list-item>
+            </v-list>
+          </v-menu>
+        </v-card>
+      </v-list-item>
+    </template>
   </div>
 </template>