From 5ee4af70ab7983d707ecb3a268b97fecc2395e7e Mon Sep 17 00:00:00 2001
From: Troplo <troplo@troplo.com>
Date: Sun, 31 Jul 2022 19:53:52 +1000
Subject: [PATCH] 1.0.10

---
 frontend/package.json                         |  4 +-
 frontend/src/assets/styles.css                |  9 ++-
 frontend/src/components/Message.vue           | 64 ++++++++-----------
 frontend/src/main.js                          |  3 +
 .../Communications/CommunicationsChat.vue     | 37 ++++++++++-
 frontend/yarn.lock                            | 12 ++++
 6 files changed, 88 insertions(+), 41 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 90f2312..fe09004 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "colubrina-chat",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "private": true,
   "author": "Troplo <troplo@troplo.com>",
   "license": "GPL-3.0",
@@ -22,8 +22,10 @@
     "glob-parent": "^5.1.2",
     "graphql": "^16.3.0",
     "graphql-tag": "^2.12.6",
+    "highlight.js": "^11.6.0",
     "markdown-it": "^13.0.1",
     "markdown-it-emoji": "git+https://github.com/Troplo/markdown-it-unicode-emoji",
+    "markdown-it-highlightjs": "^4.0.1",
     "node-ipc": "git+https://git.troplo.com/Troplo/node-ipc",
     "nth-check": "^2.0.1",
     "patch-package": "^6.4.7",
diff --git a/frontend/src/assets/styles.css b/frontend/src/assets/styles.css
index 880e701..27d6d4f 100644
--- a/frontend/src/assets/styles.css
+++ b/frontend/src/assets/styles.css
@@ -1,5 +1,12 @@
+/* large codeblock */
+code {
+  background-color: var(--v-bg-base) !important;
+  border: 2px solid var(--v-bg-lighten1);
+  display: block;
+  padding: 20px;
+}
 .message-hover {
-    background-color: var(--v-bg-lighten1);
+  background-color: var(--v-bg-lighten1);
   border-radius: 5px;
 }
 .message-toast {
diff --git a/frontend/src/components/Message.vue b/frontend/src/components/Message.vue
index 0a81603..f13b41b 100644
--- a/frontend/src/components/Message.vue
+++ b/frontend/src/components/Message.vue
@@ -160,42 +160,33 @@
                       </v-row>
                       <template v-else-if="embed.type === 'image'">
                         <v-hover v-slot="{ hover }">
-                          <div>
-                            <v-img
-                              @click="setImagePreview(embed)"
-                              contain
-                              :aspect-ratio="16 / 9"
-                              :src="embed.mediaProxyLink"
-                            >
-                              <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-img
+                            @click="setImagePreview(embed)"
+                            contain
+                            :aspect-ratio="16 / 9"
+                            :src="embed.mediaProxyLink"
+                          >
+                            <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>
                         </v-hover>
-                        <v-card-actions>
-                          MediaProxy Image
-                          <v-spacer />
-                          <v-btn text icon :href="embed.url" target="_blank">
-                            <v-icon> mdi-download </v-icon>
-                          </v-btn>
-                        </v-card-actions>
                       </template>
                       <v-row v-else-if="embed.type === 'embed-v1'">
                         <v-col
@@ -293,7 +284,8 @@
                   v-for="(attachment, index) in message.attachments"
                   :key="attachment.id"
                   :id="'attachment-' + index"
-                  max-width="40%"
+                  :max-width="500"
+                  :min-width="!$vuetify.breakpoint.mobile ? 400 : 0"
                   elevaion="0"
                   color="card"
                 >
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 34f4506..839f6fe 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -14,6 +14,7 @@ import "./plugins/dayjs"
 import SocketIO from "socket.io-client"
 import twemoji from "twemoji"
 import VueNativeNotification from "vue-native-notification"
+import "highlight.js/styles/github.css"
 const md = require("markdown-it")({
   html: false, // Enable HTML tags in source
   xhtmlOut: false, // Use '/' to close single tags (<br />).
@@ -48,6 +49,8 @@ const defaultRender =
     return self.renderToken(tokens, idx, options)
   }
 md.use(emoji)
+const hljs = require("highlight.js/lib/core")
+md.use(require("markdown-it-highlightjs"), { hljs })
 md.renderer.rules.emoji = function (token, idx) {
   return twemoji.parse(token[idx].content, {
     folder: "svg",
diff --git a/frontend/src/views/Communications/CommunicationsChat.vue b/frontend/src/views/Communications/CommunicationsChat.vue
index bbb08bf..644de50 100644
--- a/frontend/src/views/Communications/CommunicationsChat.vue
+++ b/frontend/src/views/Communications/CommunicationsChat.vue
@@ -222,7 +222,10 @@
                   :key="association.id"
                   top
                 >
-                  <template v-slot:activator="{ on }">
+                  <template
+                    v-slot:activator="{ on }"
+                    v-if="association.user.id !== $store.state.user.id"
+                  >
                     <v-btn
                       icon
                       small
@@ -249,10 +252,38 @@
                     {{ association.user.username }} has read up to this point.
                   </span>
                 </v-tooltip>
-                <br />
-                <br v-if="index + 1 <= messages.length" />
+                <br v-if="index + 1 > messages.length" />
+                <br v-if="index + 1 > messages.length" />
               </div>
             </template>
+            <v-tooltip top>
+              <template v-slot:activator="{ on }">
+                <v-btn
+                  icon
+                  small
+                  fab
+                  width="20"
+                  height="20"
+                  class="ml-2 mt-2"
+                  style="float: right"
+                  @click="openUserPanel($store.state.user)"
+                >
+                  <v-avatar size="20" v-on="on" color="primary">
+                    <img
+                      v-if="$store.state.user.avatar"
+                      :src="'/usercontent/' + $store.state.user.avatar"
+                      alt="avatar"
+                    />
+                    <span v-else>{{
+                      $store.state.user.username[0].toUpperCase()
+                    }}</span>
+                  </v-avatar>
+                </v-btn>
+              </template>
+              <span>
+                {{ $store.state.user.username }} has read up to this point.
+              </span>
+            </v-tooltip>
           </v-card-text>
           <v-card-text>
             <v-toolbar
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index e33ca8f..41f2eb3 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -4705,6 +4705,11 @@ highlight.js@^10.7.1:
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.7.3.tgz#697272e3991356e40c3cac566a74eef681756531"
   integrity sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==
 
+highlight.js@^11.5.1, highlight.js@^11.6.0:
+  version "11.6.0"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.6.0.tgz#a50e9da05763f1bb0c1322c8f4f755242cff3f5a"
+  integrity sha512-ig1eqDzJaB0pqEvlPVIpSSyMaO92bH1N2rJpLMN/nX396wTpDA4Eq0uK+7I/2XG17pFaaKE0kjV/XPeGt7Evjw==
+
 hmac-drbg@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -5827,6 +5832,13 @@ map-visit@^1.0.0:
   optionalDependencies:
     emojione "2.1.0"
 
+markdown-it-highlightjs@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/markdown-it-highlightjs/-/markdown-it-highlightjs-4.0.1.tgz#6b8eb6a3b971ed592db1ff160cfa5ce9f2e44232"
+  integrity sha512-EPXwFEN6P5nqR3G4KjT20r20xbGYKMMA/360hhSYFmeoGXTE6hsLtJAiB/8ID8slVH4CWHHEL7GX0YenyIstVQ==
+  dependencies:
+    highlight.js "^11.5.1"
+
 markdown-it@^13.0.1:
   version "13.0.1"
   resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-13.0.1.tgz#c6ecc431cacf1a5da531423fc6a42807814af430"