logo is now svg, updated futoji, donation button

2026-06-15 20:41:08 +00:00 · 2019-03-31 17:39:26 +01:00 · 2019-03-31 17:39:26 +01:00 · 7bcb6c9c12
commit 7bcb6c9c12
parent 584edb8e65
26 changed files with 330 additions and 54 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -5416,9 +5416,9 @@
      "dev": true
    },
    "futoji": {
-      "version": "0.2.4",
-      "resolved": "https://registry.npmjs.org/futoji/-/futoji-0.2.4.tgz",
-      "integrity": "sha512-m1xTItJgMgy6lJhYIkpZuL5H7Pu+bydzpryrbU4Md2LqSWGyKpOphx7bfjJhgaj8ioVsn25TNy/wOS+mLrld/g=="
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/futoji/-/futoji-0.5.0.tgz",
+      "integrity": "sha512-JxJKKnuj76wauNGA2WPMmvamgavHrY+e2fMG5PtrBOYY0DmWfMnCAst9jNglC5sIQoRdKqBrQp/HNZ3gXxmTAQ=="
    },
    "get-caller-file": {
      "version": "1.0.3",
--- a/package.json
+++ b/package.json
@ -10,7 +10,7 @@
  "dependencies": {
    "axios": "^0.18.0",
    "filesize": "^4.1.2",
-    "futoji": "^0.2.4",
+    "futoji": "^0.5.0",
    "jquery": "^3.3.1",
    "match-sorter": "^2.3.0",
    "socket.io": "^2.2.0",
--- a/public/android-chrome-192x192.png
+++ b/public/android-chrome-192x192.png
--- a/public/android-chrome-384x384.png
+++ b/public/android-chrome-384x384.png
--- a/public/apple-touch-icon.png
+++ b/public/apple-touch-icon.png
--- a/public/favicon-16x16.png
+++ b/public/favicon-16x16.png
--- a/public/favicon-32x32.png
+++ b/public/favicon-32x32.png
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@ -6,30 +6,36 @@
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">

+
  <link rel="apple-touch-icon" sizes="180x180" href="<%= BASE_URL %>apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="<%= BASE_URL %>favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="<%= BASE_URL %>favicon-16x16.png">
  <link rel="manifest" href="<%= BASE_URL %>site.webmanifest">
+  <link rel="mask-icon" href="<%= BASE_URL %>safari-pinned-tab.svg" color="#5bbad5">
  <meta name="msapplication-TileColor" content="#da532c">
  <meta name="theme-color" content="#ffffff">

+
+
+
+
  <!-- Preview meta tags -->
  <!-- Search Tags -->
  <title>Nertivia - Chat Client</title>
-  <meta name="description" content="The best chat client that won’t sell your data. ">
+  <meta name="description" content="The best chat client that wont restrict you from important and fun features.">
  <meta name="robots" content="follow, index">

  <!-- FB Open Graph data -->
  <meta property="og:title" content="Nertivia - Chat Client">
  <meta property="og:type" content="website">
  <meta property="og:image" content="https://nertivia.supertiger.tk/img/logo.3287e62d.png">
-  <meta property="og:description" content="The best chat client that won’t sell your data. ">
+  <meta property="og:description" content="The best chat client that wont restrict you from important and fun features.">
  <meta property="og:url" content="https://nertivia.tk/">

  <!-- Twitter Card data -->
  <meta name="twitter:card" content="app">
  <meta name="twitter:title" content="Nertivia - Chat Client">
-  <meta name="twitter:description" content="The best chat client that won’t sell your data. ">
+  <meta name="twitter:description" content="The best chat client that wont restrict you from important and fun features.">
  <meta name="twitter:image" content="https://nertivia.supertiger.tk/img/logo.3287e62d.png">
  <meta name="twitter:url" content="https://nertivia.tk/">

--- a/public/mstile-150x150.png
+++ b/public/mstile-150x150.png
--- a/public/safari-pinned-tab.svg
+++ b/public/safari-pinned-tab.svg
@ -0,0 +1,77 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="500.000000pt" height="500.000000pt" viewBox="0 0 500.000000 500.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,500.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M2269 4985 c-6 -6 -74 -16 -116 -17 -18 -1 -33 -4 -33 -7 0 -4 -15
+-7 -32 -8 -71 -4 -104 -9 -118 -18 -8 -5 -21 -10 -30 -11 -65 -9 -131 -25
+-162 -38 -9 -4 -21 -5 -26 -2 -6 3 -12 0 -15 -8 -3 -8 -32 -20 -64 -26 -31 -7
+-73 -21 -93 -31 -19 -11 -38 -19 -43 -19 -13 0 -179 -82 -264 -131 -45 -26
+-84 -44 -87 -41 -4 3 -6 0 -6 -6 0 -7 -5 -12 -10 -12 -6 0 -16 -5 -23 -10 -40
+-34 -107 -80 -116 -80 -6 0 -11 -4 -11 -10 0 -5 -6 -10 -14 -10 -8 0 -16 -3
+-18 -7 -1 -5 -28 -28 -58 -53 -30 -25 -75 -64 -100 -87 -25 -23 -57 -51 -73
+-63 -15 -12 -25 -25 -22 -30 3 -5 -3 -11 -14 -15 -11 -3 -31 -21 -46 -40 -14
+-20 -42 -50 -61 -69 -18 -18 -34 -36 -34 -40 0 -3 -8 -14 -17 -24 -35 -37 -62
+-72 -113 -146 -28 -42 -56 -78 -61 -82 -5 -3 -7 -9 -5 -13 3 -4 -4 -17 -14
+-29 -11 -12 -20 -23 -20 -26 0 -3 -13 -28 -30 -56 -16 -28 -30 -57 -30 -65 0
+-8 -3 -15 -8 -15 -8 0 -42 -73 -42 -90 0 -6 -4 -10 -10 -10 -5 0 -10 -4 -10
+-9 0 -5 -5 -22 -12 -38 -6 -15 -12 -30 -13 -33 -1 -3 -10 -23 -20 -45 -10 -22
+-17 -44 -16 -49 1 -4 -4 -14 -10 -22 -6 -8 -8 -14 -4 -14 4 0 2 -7 -5 -15 -7
+-8 -9 -15 -6 -15 4 0 1 -10 -6 -22 -7 -13 -13 -27 -14 -33 0 -5 -2 -13 -4 -17
+-1 -5 -4 -12 -5 -18 -1 -5 -4 -11 -5 -12 -1 -2 -4 -12 -6 -23 -1 -11 -5 -31
+-9 -45 -3 -14 -8 -36 -11 -50 -8 -35 -10 -43 -17 -60 -3 -8 -6 -22 -6 -30 -1
+-8 -9 -69 -20 -135 -28 -181 -28 -506 -1 -696 12 -79 23 -153 25 -164 8 -44
+37 -161 43 -175 3 -8 7 -19 8 -25 2 -14 2 -13 28 -90 13 -38 22 -73 19 -77 -2
+-5 0 -8 6 -8 8 0 26 -37 23 -50 -1 -3 5 -14 12 -25 7 -11 16 -32 20 -47 3 -16
+11 -28 16 -28 6 0 10 -6 10 -13 0 -18 81 -180 94 -189 6 -4 7 -8 3 -8 -4 0 -3
+-6 2 -13 6 -6 39 -55 73 -107 83 -128 193 -264 298 -369 109 -110 190 -184
+190 -176 0 4 12 -7 26 -24 14 -17 30 -31 34 -31 5 0 24 -14 42 -30 18 -16 37
+-30 43 -30 7 0 22 -11 35 -25 12 -13 27 -22 32 -19 4 3 11 -2 14 -10 3 -9 10
+-14 14 -11 5 3 11 1 15 -4 7 -13 118 -76 128 -73 4 1 7 -2 7 -6 0 -4 35 -25
+78 -46 42 -21 89 -45 104 -52 15 -8 44 -21 65 -29 21 -7 63 -23 93 -34 30 -12
+63 -21 72 -21 10 0 18 -5 18 -12 0 -6 3 -8 6 -5 4 3 16 1 28 -5 11 -7 24 -11
+28 -10 4 1 23 -5 43 -14 20 -8 40 -12 45 -9 6 4 16 3 23 -2 6 -4 20 -8 30 -9
+9 -1 19 -3 22 -4 3 -1 10 -4 15 -5 6 -1 13 -4 18 -5 4 -1 12 -3 17 -5 6 -1 12
+-3 15 -5 3 -1 19 -3 35 -5 17 -2 53 -6 80 -10 28 -3 66 -8 85 -10 19 -2 35 -4
+35 -6 0 -7 110 -12 255 -12 195 0 290 4 290 12 0 4 19 7 43 8 38 1 104 7 165
+16 13 2 27 8 30 13 4 5 18 10 32 12 52 6 66 8 100 20 19 6 47 13 61 14 15 2
+33 9 40 15 8 5 25 13 39 16 80 19 120 31 120 38 0 4 24 15 52 25 29 9 59 23
+66 31 7 7 22 13 32 13 10 0 21 4 24 9 3 4 19 11 36 15 18 3 29 10 25 16 -3 5
+3 10 14 10 11 0 22 4 25 9 3 5 18 12 33 16 15 3 32 14 39 23 7 9 17 18 23 18
+6 1 14 2 19 3 4 0 18 11 32 24 14 12 42 30 62 40 20 9 38 21 40 25 2 4 30 27
+63 51 60 45 86 66 132 109 13 12 27 22 32 22 4 0 20 14 34 30 15 17 31 30 35
+30 4 0 16 14 26 30 9 17 22 28 27 25 5 -4 9 -2 9 4 0 5 14 22 30 38 17 15 30
+33 30 39 0 7 16 24 35 38 19 15 35 33 35 41 0 7 9 16 20 20 11 3 19 10 17 14
+-2 7 43 68 74 101 8 9 14 21 12 27 -2 6 5 14 16 18 12 3 21 15 21 25 0 11 6
+23 13 27 7 4 21 27 32 50 11 24 24 43 28 43 5 0 6 4 3 9 -3 5 0 11 8 14 8 3
+17 19 21 36 5 22 11 28 22 24 13 -5 14 -3 3 17 -7 12 -8 20 -2 16 9 -5 20 10
+27 37 2 4 4 10 5 15 1 4 2 10 1 14 0 5 4 8 10 8 5 0 8 4 5 8 -3 5 4 16 15 26
+12 9 18 24 15 31 -3 8 -1 17 5 20 5 4 7 11 4 16 -4 5 -1 9 5 9 7 0 10 7 6 15
+-3 9 0 15 8 15 9 0 20 26 31 70 9 39 22 70 27 70 6 0 8 9 5 20 -3 11 -2 20 2
+20 8 0 41 144 41 178 0 12 4 22 9 22 11 0 21 47 28 130 3 36 9 67 13 70 9 6
+11 690 2 705 -4 5 -7 21 -8 35 -3 31 -12 104 -20 148 -4 17 -10 32 -15 32 -5
+0 -9 8 -9 18 0 29 -33 162 -41 162 -4 0 -5 9 -2 20 3 11 0 20 -6 20 -6 0 -11
+7 -11 15 0 24 -24 95 -32 95 -4 0 -5 7 -2 15 4 8 2 15 -3 15 -5 0 -14 20 -21
+45 -7 25 -17 45 -23 45 -5 0 -7 5 -4 10 3 6 1 10 -4 10 -6 0 -11 8 -11 18 0
+10 -3 22 -7 26 -5 4 -8 11 -8 14 -1 4 -8 21 -18 38 -9 17 -14 34 -11 37 3 3
+-3 10 -14 16 -11 6 -23 22 -26 36 -4 14 -11 25 -16 25 -5 0 -7 7 -4 15 4 8 1
+15 -5 15 -7 0 -19 16 -27 35 -8 19 -18 35 -22 35 -5 0 -16 16 -25 35 -9 19
+-22 35 -28 35 -6 0 -8 9 -4 21 5 14 3 19 -3 15 -11 -6 -38 32 -34 47 1 4 -4 7
+-12 7 -17 0 -48 39 -40 51 2 4 -5 10 -16 14 -11 3 -23 17 -26 31 -3 13 -9 24
+-13 24 -12 0 -101 89 -101 100 0 14 -71 80 -87 80 -7 0 -13 7 -13 15 0 8 -4
+15 -9 15 -5 0 -24 16 -42 35 -19 19 -38 35 -43 35 -5 0 -18 9 -30 20 -43 42
+-89 80 -95 80 -3 0 -24 15 -46 34 -22 19 -42 33 -46 30 -4 -2 -18 7 -33 21
+-15 13 -30 25 -34 26 -15 2 -62 34 -62 42 0 4 -4 5 -10 2 -5 -3 -10 -2 -10 3
+0 5 -18 15 -40 22 -21 7 -37 16 -35 20 3 4 -25 18 -62 30 -37 12 -72 28 -79
+34 -6 7 -31 18 -55 26 -24 8 -46 17 -49 20 -3 4 -32 14 -65 24 -33 10 -64 23
+-70 30 -5 6 -19 12 -30 14 -26 3 -54 9 -82 16 -41 11 -68 17 -93 22 -13 3 -29
+9 -35 13 -11 9 -19 10 -87 14 -27 1 -48 5 -48 8 0 4 -15 7 -32 7 -18 0 -35 1
+-38 2 -33 16 -520 25 -520 11 0 -7 -9 -7 -26 -1 -29 12 -29 11 -35 5z"/>
+</g>
+</svg>
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/assets/logo.svg
+++ b/src/assets/logo.svg
--- a/src/components/app/GDriveLinkMenu.vue
+++ b/src/components/app/GDriveLinkMenu.vue
@ -9,7 +9,9 @@
        <div class="arrow">></div>
        <div class="image nertivia-img"></div>
      </div>
+      <div class="text">If you would like to see Nertivia grow, and have its own storage CDN, donations would be appriciated.</div>
      <div class="buttons">
+        <div class="button donate" @click="donateButton">Donate</div>
        <div class="button deny" @click="closeMenu">No thanks</div>
        <div class="button" @click="link">Link me</div>
      </div>
@ -54,6 +56,9 @@ export default {
          await settingsService.GDriveAuth(code);
        };
      }
+    },
+    donateButton() {
+      window.open('https://www.patreon.com/nertivia', '_blank');
    }
  }
 };
@ -90,6 +95,7 @@ export default {
  padding-right: 10px;
  user-select: none;
 }
+
 .images {
  display: flex;
  margin: auto;
@ -132,9 +138,16 @@ export default {
  margin-left: 10px;
  margin-right: 10px;
 }
+.donate {
+  background: rgb(218, 179, 6);
+}
+
 .button:hover {
  background: rgb(58, 134, 255);
 }
+.donate:hover {
+  background: rgb(199, 164, 6);
+}
 .button.deny {
  background: rgb(255, 32, 32);
 }
--- a/src/components/app/LeftPanel.vue
+++ b/src/components/app/LeftPanel.vue
@ -63,7 +63,7 @@ export default {
  display: flex;
  color: white;
  flex-shrink: 0;
-  margin-top: 20px;
+  margin-top: 10px;
  position: relative;
 }
 .tab{
@ -77,9 +77,14 @@ export default {
  background: rgba(0, 0, 0, 0.171);
  margin-left: 1px;
  margin-right: 1px;
+  border-radius: 5px;
+  transition: 0.3s;
+}
+.tab:hover{
+  background: rgba(255, 255, 255, 0.096);
 }
 .selector {
-  background: rgba(255, 255, 255, 0.137);
+  background: rgba(255, 255, 255, 0.322);
  width: 148px;
  height: 39px;
  top: 0;
@ -87,6 +92,7 @@ export default {
  position: absolute;
  z-index: -1;
  transition: 0.3s;
+  border-radius: 5px;
 }
 .right{
  left: 151px;
--- a/src/components/app/MessageTemplate.vue
+++ b/src/components/app/MessageTemplate.vue
@ -27,7 +27,7 @@
        <img :src="getImage" @click="imageClicked">
      </div>
    </div>
-    <div class="sending-status">{{statusMessage}}</div>
+    <div class="sending-status" v-html="statusMessage"></div>
  </div>
 </template>

@ -39,7 +39,6 @@ import config from "@/config.js";
 import friendlyDate from "@/utils/date";
 import path from "path";

-
 export default {
  components: {
    ProfilePicture
@ -94,11 +93,11 @@ export default {
      let status = this.$props.status;

      if (status == 0) {
-        return "Sending";
+        return `<i class="material-icons">hourglass_full</i>`;
      } else if (status == 1) {
-        return "Sent";
+        return `<i class="material-icons">done</i>`;
      } else if (status == 2) {
-        return "Failed";
+        return `<i class="material-icons">close</i> Failed`;
      } else {
        return "";
      }
@ -263,29 +262,33 @@ export default {
 .message .sending-status {
  display: flex;
  justify-content: flex-end;
-  flex-direction: column;
  padding-bottom: 5px;
-  margin-left: 10px;
  font-size: 15px;
  color: white;
-  align-self: normal;
+  margin: auto;
+  margin-left: 4px;
+  margin-bottom: 0;
  user-select: none;
  transition: 0.5;
+  align-content: center;
 }
 </style>

 <style>
+.message .sending-status .material-icons {
+  font-size: 15px;
+  color: rgb(306, 306, 306);
+  display: block;
+}
 .codeblock {
  background-color: rgba(0, 0, 0, 0.397);
  padding: 5px;
  border-radius: 5px;
 }
-</style>
-<style>
 img.emoji {
-   height: 1.7em;
-   width: auto;
-   margin: 0 .05em 0 .1em;
-   vertical-align: -0.1em;
+  height: 1.7em;
+  width: auto;
+  margin: 0 0.05em 0 0.1em;
+  vertical-align: -0.1em;
 }
 </style>
--- a/src/components/app/MyMiniInformation.vue
+++ b/src/components/app/MyMiniInformation.vue
@ -139,6 +139,7 @@ export default {
  padding-top: 1px;
  padding-left: 5px;
  margin-left: 10px;
+  margin-top: -2px;
  transition: 0.3s;
  user-select: none;
  border-radius: 10px;
--- a/src/components/app/News.vue
+++ b/src/components/app/News.vue
@ -54,10 +54,11 @@ export default {
 <style scoped>
 .news {
  display: flex;
-  flex: 1;
-  margin: 20px;
+  width: 100%;
+  height: 100%;
  color: white;
  overflow: auto;
+  background: rgba(0, 0, 0, 0.486);
 }
 .news-title {
  display: inline-block;
--- a/src/components/app/RightPanel.vue
+++ b/src/components/app/RightPanel.vue
@ -32,7 +32,10 @@
        <uploadsQueue v-if="uploadQueue !== undefined" :queue="uploadQueue"/>
      </div>
    </div>
-    <news v-if="!selectedChannelID "/>
+    <div class="no-channel-selected" v-if="!selectedChannelID ">
+      <div class="material-icons">chat</div>
+      <div class="message">Select a person to message!</div>
+    </div>
    <div class="chat-input-area" v-if="selectedChannelID">

      <div style="position: relative;" >
@ -88,7 +91,6 @@ import typingService from "@/services/TypingService";
 import { bus } from "../../main";
 import JQuery from "jquery";
 let $ = JQuery;
-import News from "../../components/app/News.vue";
 import Message from "../../components/app/MessageTemplate.vue";
 import Spinner from "@/components/Spinner.vue";
 import TypingStatus from "@/components/app/TypingStatus.vue";
@ -102,7 +104,6 @@ export default {
  components: {
    Message,
    Spinner,
-    News,
    TypingStatus,
    uploadsQueue,
    emojiSuggestions,
@ -451,6 +452,25 @@ export default {

 <style scoped>

+
+.no-channel-selected{
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 20px;
+
+}
+.no-channel-selected .message{
+  margin-top: 20px;
+}
+.no-channel-selected .material-icons{
+  font-size: 50px;
+}
 .channel-selected{
  display: flex;
  align-items: center;
--- a/src/components/app/emojiPanel.vue
+++ b/src/components/app/emojiPanel.vue
@ -55,6 +55,10 @@
          <i class="material-icons">history</i>
          <div class="tooltip">Recent</div>
        </div>
+        <div class="tab" @click="scrollToCategory(1)">
+          <i class="material-icons">face</i>
+          <div class="tooltip">Custom Emojis</div>
+        </div>
        <div
          class="tab"
          v-for="(emoji, index) in groupUnicodes"
@ -479,8 +483,8 @@ export default {
 .tab {
  background: rgba(59, 59, 59, 0.521);
  border-radius: 5px;
-  margin-left: 5px;
-  margin-right: 5px;
+  margin-left: 3px;
+  margin-right: 3px;
  display: flex;
  flex-direction: column;
  transition: 0.1s;
--- a/src/components/app/relationships/AddFriendPanel.vue
+++ b/src/components/app/relationships/AddFriendPanel.vue
@ -99,10 +99,11 @@ export default {
  background: rgba(0, 0, 0, 0.123);
  display: flex;
  flex-direction: column;
+  border-radius: 5px;
 }

 .add-friend{
-  background: rgba(0, 0, 0, 0.13);
+  background: rgba(0, 0, 0, 0);
  flex: 1;
  height: 230px;
  display: flex;
@ -157,6 +158,7 @@ form {
  user-select: none;
  display: flex;
  transition: 0.3s;
+  border-radius: 5px;
 }
 .panel-title:hover{
  background: rgba(0, 0, 0, 0.445);
--- a/src/components/homePage/RightPanel.vue
+++ b/src/components/homePage/RightPanel.vue
@ -1,7 +1,7 @@
 <template>
  <div class="right-panel-home">
    <div class="right-panel-inner">
-        <div class="logo"></div>
+        <img class="logo" src="./../../assets/logo.svg"></img>
        <div class="title">Nertivia</div>
        <spinner :msg="spinnerMessage" v-if="previouslyLoggedIn && user == null && tokenExists" />
        
@ -129,9 +129,6 @@ export default {
 .logo {
  height: 150px;
  width: 150px;
-  background: url(./../../assets/logo.png);
-  background-size: 105%;
-  background-position: center;
  border-radius: 50%;
  box-shadow: 0px 0px 96px -4px rgba(69,212,255,1);
  margin: auto;
--- a/src/utils/changelog.js
+++ b/src/utils/changelog.js
@ -1,4 +1,17 @@
 const config = [
+  {
+    version: 1,
+    title: 'Make your own guild',
+    shortTitle: 'Make your guild',
+    date: '31/03/2019',
+    headColor: "rgba(39, 14, 204, 0.77)",
+    new: [
+      'You can now make your own guild.',
+      "Tabs have been added at the top of the screen.",
+    ],
+    fix: ["Some formatting issues with custom emojis have been fixed."],
+    next: ['link previews.']
+  },
  {
    title: 'Custom emojis!',
    shortTitle: 'Custom emojis!',
--- a/src/utils/messageFormatter.js
+++ b/src/utils/messageFormatter.js
@ -1,19 +1,37 @@
-import futoji from 'futoji'
+import Formatter from 'futoji'
 import twemoji from 'twemoji'
 import emojiParser from '@/utils/emojiParser';
 import config from "@/config.js";

+const futoji = new Formatter();
+const emojiFormatter = new Formatter();
+
+emojiFormatter.addTransformer({
+	name:'customEmoji2',
+	symbol: ':',
+	padding: false,
+	recursive: false,
+	validate: text => /.+?&(.+?)/.test(text),
+	transformer: owo
+})
+
+function owo (text) {
+	const split = text.split('&');
+	if (!split || split.length <= 1) return `:${text}:`;
+	const url = split[split.length - 1].slice(4);
+	return `<img class="emoji" draggable="false" alt=":${split[0]}:" src="${config.domain + "/files/" + url}">`
+}

-// not working well (: :pepe: :pepe: : doesnt work) (:pepe::pepe: doesnt work)
 futoji.addTransformer({
 	name: 'custom emoji',
 	symbol: ':',
+	padding: false,
 	recursive: false,
+	validate: text => /.+?&(.+?)/.test(text),
 	transformer: text => {
-		const split = text.split('&');
-		if (!split || split.length <= 1) return `:${text}:`;
-		const url = split[split.length - 1].slice(4);
-		return `<img class="emoji" draggable="false" alt=":${split[0]}:" src="${config.domain + "/files/" + url}">`
+		const formattedInner = emojiFormatter.format(text);
+		return owo(formattedInner);
+
 	}
 })

--- a/src/views/App.vue
+++ b/src/views/App.vue
@ -5,15 +5,39 @@
    <transition name="fade-between-two" appear>
      <ConnectingScreen v-if="!loggedIn"/>
      <div class="box" v-if="loggedIn">
+        <div class="tabs">
+
+          <div :class="`tab ${currentTab === 0 ? 'selected' : ''}`" @click="switchTab(0)">
+            <i class="material-icons">list_alt</i>
+            Changelog
+          </div>
+
+          <div :class="`tab ${currentTab === 1 ? 'selected' : ''}`" @click="switchTab(1)">
+            <i class="material-icons">chat</i>
+            Direct Message
+          </div>
+
+          <div :class="`tab ${currentTab === 2 ? 'selected' : ''}`" @click="switchTab(2)">
+            <i class="material-icons">forum</i>
+            Servers
+          </div>
+          <div :class="`tab ${currentTab === 3 ? 'selected' : ''}`" @click="switchTab(3)">
+            <i class="material-icons">rss_feed</i>
+            Server Browser
+          </div>
+        </div>
        <div class="panel-layout">
-          <transition name="slidein">
-            <LeftPanel
-              class="left-panel"
-              v-click-outside="hideLeftPanel"
-              v-show="$mq === 'mobile' && showLeftPanel || $mq === 'desktop'"
-            ></LeftPanel>
-          </transition>
-          <RightPanel/>
+          <news v-if="currentTab == 0" />
+          <span class="direct-message-tab" v-if="currentTab == 1">
+            <transition name="slidein">
+              <LeftPanel
+                class="left-panel"
+                v-click-outside="hideLeftPanel"
+                v-show="$mq === 'mobile' && showLeftPanel || $mq === 'desktop'"
+              ></LeftPanel>
+            </transition>
+            <RightPanel/>
+          </span>
        </div>
      </div>
    </transition>
@ -26,19 +50,22 @@ import { bus } from "../main";
 import Popouts from "@/components/app/Popouts.vue";
 import LeftPanel from "./../components/app/LeftPanel.vue";
 import RightPanel from "./../components/app/RightPanel.vue";
+import News from "./../components/app/News.vue";
+import changelog from '@/utils/changelog.js';
 import ConnectingScreen from "./../components/app/ConnectingScreen.vue";

-
 export default {
  name: "app",
  components: {
    LeftPanel,
    RightPanel,
    ConnectingScreen,
-    Popouts
+    Popouts,
+    News
  },
  data() {
    return {
+      currentTab: localStorage.getItem('currentTab') || 0,
      showLeftPanel: false,
      title: "Nertivia"
    };
@ -50,9 +77,22 @@ export default {
          this.showLeftPanel = false;
        }
      }
+    },
+    switchTab(index) {
+      localStorage.setItem("currentTab", index);
+      this.currentTab = index;
    }
  },
  mounted() {
+
+    // check if changelog is updated
+    const seenVersion = localStorage.getItem('changelog-version-seen');
+    if (!seenVersion || seenVersion < changelog[0].version) {
+      this.currentTab = 0;
+      localStorage.setItem('currentTab', 0)
+    }
+    localStorage.setItem('changelog-version-seen', changelog[0].version)
+
    bus.$on("toggleLeftMenu", () => {
      this.showLeftPanel = !this.showLeftPanel;
    });
@ -74,6 +114,45 @@ export default {


 <style scoped>
+
+.direct-message-tab{
+  display: flex;
+  width: 100%;
+  height: 100%;
+}
+
+
+.tabs {
+  display: flex;
+}
+
+.tab {
+  margin: auto;
+  margin-right: 1px;
+  margin-left: 1px;
+  margin-bottom: 0;
+  background: rgba(0, 0, 0, 0.63);
+  color: white;
+  padding: 5px;
+  border-top-right-radius: 5px;
+  border-top-left-radius: 5px;
+  cursor: default;
+  user-select: none;
+  transition: 0.3s;
+}
+.tab.selected{
+  background: rgba(71, 71, 71, 0.637);
+}
+
+.tab:hover{
+  background: rgba(71, 71, 71, 0.637);
+}
+
+.tab .material-icons {
+  font-size: 15px;
+  vertical-align: -2px;
+}
+
 .slidein-enter-active,
 .slidein-leave-active {
  transition: 0.5s;
@ -130,6 +209,8 @@ body {
  height: 100%;
 }
 .box {
+  display: flex;
+  flex-direction: column;
  height: 100%;
  width: 100%;
 }
@ -168,13 +249,13 @@ body {
 /* Handle */
 ::-webkit-scrollbar-thumb {
  background: #f5f5f559;
-    border-radius: 10px;
+  border-radius: 10px;
 }

 /* Handle on hover */
 ::-webkit-scrollbar-thumb:hover {
  background: #f5f5f59e;
-    border-radius: 10px;
+  border-radius: 10px;
 }
 </style>

--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@ -15,7 +15,7 @@
    <div class="panels">
        <div class="left-panel">

-          <div class="title">The best chat client that won’t sell your data.</div>
+          <div class="title">The best chat client that wont restrict you from important and fun features.</div>
          <img src="../assets/graphics/HomeGraphics.png" class="graphic-app" />
          <div class="change-log-mini" @click="showChangeLog = true">
            <div class="change-title">Change log <span style="font-size: 15px; color: rgba(211, 211, 211, 0.774);">Click for details</span></div>