From fca885e665094b8efcbc65a3f4ec9ba31679c4c2 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 25 Apr 2021 13:23:16 +0300
Subject: resolve TODO VUE3

---
 src/components/emoji_input/emoji_input.js | 23 +++++++++++------------
 1 file changed, 11 insertions(+), 12 deletions(-)

(limited to 'src/components/emoji_input')

diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js
index c4d235c0..389b6787 100644
--- a/src/components/emoji_input/emoji_input.js
+++ b/src/components/emoji_input/emoji_input.js
@@ -57,8 +57,7 @@ const EmojiInput = {
       required: true,
       type: Function
     },
-    // TODO VUE3: change to modelValue, change 'input' event to 'input'
-    value: {
+    modelValue: {
       /**
        * Used for v-model
        */
@@ -137,8 +136,8 @@ const EmojiInput = {
       return (this.wordAtCaret || {}).word || ''
     },
     wordAtCaret () {
-      if (this.value && this.caret) {
-        const word = Completion.wordAtPosition(this.value, this.caret - 1) || {}
+      if (this.modelValue && this.caret) {
+        const word = Completion.wordAtPosition(this.modelValue, this.caret - 1) || {}
         return word
       }
     }
@@ -225,13 +224,13 @@ const EmojiInput = {
       }
     },
     replace (replacement) {
-      const newValue = Completion.replaceWord(this.value, this.wordAtCaret, replacement)
-      this.$emit('input', newValue)
+      const newValue = Completion.replaceWord(this.modelValue, this.wordAtCaret, replacement)
+      this.$emit('update:modelValue', newValue)
       this.caret = 0
     },
     insert ({ insertion, keepOpen, surroundingSpace = true }) {
-      const before = this.value.substring(0, this.caret) || ''
-      const after = this.value.substring(this.caret) || ''
+      const before = this.modelValue.substring(0, this.caret) || ''
+      const after = this.modelValue.substring(this.caret) || ''
 
       /* Using a bit more smart approach to padding emojis with spaces:
        * - put a space before cursor if there isn't one already, unless we
@@ -259,7 +258,7 @@ const EmojiInput = {
         after
       ].join('')
       this.keepOpen = keepOpen
-      this.$emit('input', newValue)
+      this.$emit('update:modelValue', newValue)
       const position = this.caret + (insertion + spaceAfter + spaceBefore).length
       if (!keepOpen) {
         this.input.focus()
@@ -278,8 +277,8 @@ const EmojiInput = {
       if (len > 0 || suggestion) {
         const chosenSuggestion = suggestion || this.suggestions[this.highlighted]
         const replacement = chosenSuggestion.replacement
-        const newValue = Completion.replaceWord(this.value, this.wordAtCaret, replacement)
-        this.$emit('input', newValue)
+        const newValue = Completion.replaceWord(this.modelValue, this.wordAtCaret, replacement)
+        this.$emit('update:modelValue', newValue)
         this.highlighted = 0
         const position = this.wordAtCaret.start + replacement.length
 
@@ -455,7 +454,7 @@ const EmojiInput = {
       this.showPicker = false
       this.setCaret(e)
       this.resize()
-      this.$emit('input', e.target.value)
+      this.$emit('update:modelValue', e.target.value)
     },
     onClickInput (e) {
       this.showPicker = false
-- 
cgit v1.2.3-70-g09d2


From 051d51bcd92530e5aff0c3e47f26b26695af7843 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 17 Mar 2022 09:28:19 +0200
Subject: fix suggest not working

---
 package.json                              |  2 +-
 src/boot/after_store.js                   | 11 ++++++++---
 src/components/emoji_input/emoji_input.js |  1 +
 yarn.lock                                 | 10 +++++-----
 4 files changed, 15 insertions(+), 9 deletions(-)

(limited to 'src/components/emoji_input')

diff --git a/package.json b/package.json
index 4f494324..4bcd4853 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
     "portal-vue": "2.1.7",
     "punycode.js": "2.1.0",
     "ruffle-mirror": "2021.4.11",
-    "v-click-outside": "2.1.5",
+    "click-outside-vue3": "4.0.1",
     "vue": "^3.1.0",
     "@vue/compat": "^3.1.0",
     "vue-i18n": "9.1.9",
diff --git a/src/boot/after_store.js b/src/boot/after_store.js
index e0d7aa0f..5ddc7465 100644
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@@ -1,6 +1,6 @@
-import { createApp } from 'vue'
+import { createApp, configureCompat } from 'vue'
 import { createRouter, createWebHistory } from 'vue-router'
-import VueClickOutside from 'v-click-outside'
+import vClickOutside from 'click-outside-vue3'
 
 import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome'
 
@@ -15,6 +15,11 @@ import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js'
 import { applyTheme } from '../services/style_setter/style_setter.js'
 import FaviconService from '../services/favicon_service/favicon_service.js'
 
+// disable compat for certain features
+configureCompat({
+  COMPONENT_V_MODEL: false
+})
+
 let staticInitialResults = null
 
 const parsedInitialResults = () => {
@@ -390,7 +395,7 @@ const afterStoreSetup = async ({ store, i18n }) => {
   app.use(store)
   app.use(i18n)
 
-  app.use(VueClickOutside)
+  app.use(vClickOutside)
   app.use(VBodyScrollLock)
 
   app.component('FAIcon', FontAwesomeIcon)
diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js
index c836317a..5b51da18 100644
--- a/src/components/emoji_input/emoji_input.js
+++ b/src/components/emoji_input/emoji_input.js
@@ -31,6 +31,7 @@ library.add(
  */
 
 const EmojiInput = {
+  emits: ['update:modelValue'],
   props: {
     suggest: {
       /**
diff --git a/yarn.lock b/yarn.lock
index bcd8d06f..4af18daa 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2731,6 +2731,11 @@ cli-width@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639"
 
+click-outside-vue3@4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/click-outside-vue3/-/click-outside-vue3-4.0.1.tgz#81a6ac01696b301764b42db6fdbdf28e7cd8ef95"
+  integrity sha512-sbplNecrup5oGqA3o4bo8XmvHRT6q9fvw21Z67aDbTqB9M6LF7CuYLTlLvNtOgKU6W3zst5H5zJuEh4auqA34g==
+
 cliui@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-6.0.0.tgz#511d702c0c4e41ca156d7d0e96021f23e13225b1"
@@ -9639,11 +9644,6 @@ uuid@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.2.tgz#1b4af4955eb3077c501c23872fc6513811587131"
 
-v-click-outside@2.1.5:
-  version "2.1.5"
-  resolved "https://registry.yarnpkg.com/v-click-outside/-/v-click-outside-2.1.5.tgz#aa69172fb41fcc79b26b9a4bc72a30ccf03f7a3c"
-  integrity sha512-VPNCOTZK6WZy73lcWc+R7IW1uaBFEO3/Csrs5CzWVOdvE30V8Y1+BE/BtTlcEmeDGx0eqdE7bSCg55Jj37PMJg==
-
 v8-compile-cache@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.1.1.tgz#54bc3cdd43317bca91e35dcaf305b1a7237de745"
-- 
cgit v1.2.3-70-g09d2


From 9d7a7e2019601dd1f7877d8fce2a07c5e459941e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 22 Mar 2022 18:14:56 +0200
Subject: fix emoji input tests

---
 src/components/emoji_input/emoji_input.js      |  7 ++-
 test/unit/specs/components/emoji_input.spec.js | 78 ++++++++++++++------------
 2 files changed, 48 insertions(+), 37 deletions(-)

(limited to 'src/components/emoji_input')

diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js
index 5b51da18..e772bf75 100644
--- a/src/components/emoji_input/emoji_input.js
+++ b/src/components/emoji_input/emoji_input.js
@@ -189,8 +189,11 @@ const EmojiInput = {
           img: imageUrl || ''
         }))
     },
-    suggestions (newValue) {
-      this.$nextTick(this.resize)
+    suggestions: {
+      handler (newValue) {
+        this.$nextTick(this.resize)
+      },
+      deep: true
     }
   },
   methods: {
diff --git a/test/unit/specs/components/emoji_input.spec.js b/test/unit/specs/components/emoji_input.spec.js
index 045b47fd..6188308e 100644
--- a/test/unit/specs/components/emoji_input.spec.js
+++ b/test/unit/specs/components/emoji_input.spec.js
@@ -1,108 +1,116 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils'
+import { h } from 'vue'
+import { shallowMount } from '@vue/test-utils'
 import EmojiInput from 'src/components/emoji_input/emoji_input.vue'
+import vClickOutside from 'click-outside-vue3'
 
 const generateInput = (value, padEmoji = true) => {
-  const localVue = createLocalVue()
-  localVue.directive('click-outside', () => {})
   const wrapper = shallowMount(EmojiInput, {
-    propsData: {
-      suggest: () => [],
-      enableEmojiPicker: true,
-      value
-    },
-    mocks: {
-      $store: {
-        getters: {
-          mergedConfig: {
-            padEmoji
+    global: {
+      renderStubDefaultSlot: true,
+      mocks: {
+        $store: {
+          getters: {
+            mergedConfig: {
+              padEmoji
+            }
           }
         }
+      },
+      stubs: {
+        FAIcon: true
+      },
+      directives: {
+        'click-outside': vClickOutside
       }
     },
-    slots: {
-      default: '<input />'
+    props: {
+      suggest: () => [],
+      enableEmojiPicker: true,
+      modelValue: value
     },
-    localVue
+    slots: {
+      'default': () => h('input', '')
+    }
   })
-  return [wrapper, localVue]
+  return wrapper
 }
 
 describe('EmojiInput', () => {
   describe('insertion mechanism', () => {
     it('inserts string at the end with trailing space', () => {
       const initialString = 'Testing'
-      const [wrapper] = generateInput(initialString)
+      const wrapper = generateInput(initialString)
       const input = wrapper.find('input')
       input.setValue(initialString)
       wrapper.setData({ caret: initialString.length })
       wrapper.vm.insert({ insertion: '(test)', keepOpen: false })
-      const inputEvents = wrapper.emitted().input
+      const inputEvents = wrapper.emitted()['update:modelValue']
       expect(inputEvents[inputEvents.length - 1][0]).to.eql('Testing (test) ')
     })
 
     it('inserts string at the end with trailing space (source has a trailing space)', () => {
       const initialString = 'Testing '
-      const [wrapper] = generateInput(initialString)
+      const wrapper = generateInput(initialString)
       const input = wrapper.find('input')
       input.setValue(initialString)
       wrapper.setData({ caret: initialString.length })
       wrapper.vm.insert({ insertion: '(test)', keepOpen: false })
-      const inputEvents = wrapper.emitted().input
+      const inputEvents = wrapper.emitted()['update:modelValue']
       expect(inputEvents[inputEvents.length - 1][0]).to.eql('Testing (test) ')
     })
 
     it('inserts string at the begginning without leading space', () => {
       const initialString = 'Testing'
-      const [wrapper] = generateInput(initialString)
+      const wrapper = generateInput(initialString)
       const input = wrapper.find('input')
       input.setValue(initialString)
       wrapper.setData({ caret: 0 })
       wrapper.vm.insert({ insertion: '(test)', keepOpen: false })
-      const inputEvents = wrapper.emitted().input
+      const inputEvents = wrapper.emitted()['update:modelValue']
       expect(inputEvents[inputEvents.length - 1][0]).to.eql('(test) Testing')
     })
 
     it('inserts string between words without creating extra spaces', () => {
       const initialString = 'Spurdo Sparde'
-      const [wrapper] = generateInput(initialString)
+      const wrapper = generateInput(initialString)
       const input = wrapper.find('input')
       input.setValue(initialString)
       wrapper.setData({ caret: 6 })
       wrapper.vm.insert({ insertion: ':ebin:', keepOpen: false })
-      const inputEvents = wrapper.emitted().input
+      const inputEvents = wrapper.emitted()['update:modelValue']
       expect(inputEvents[inputEvents.length - 1][0]).to.eql('Spurdo :ebin: Sparde')
     })
 
     it('inserts string between words without creating extra spaces (other caret)', () => {
       const initialString = 'Spurdo Sparde'
-      const [wrapper] = generateInput(initialString)
+      const wrapper = generateInput(initialString)
       const input = wrapper.find('input')
       input.setValue(initialString)
       wrapper.setData({ caret: 7 })
       wrapper.vm.insert({ insertion: ':ebin:', keepOpen: false })
-      const inputEvents = wrapper.emitted().input
+      const inputEvents = wrapper.emitted()['update:modelValue']
       expect(inputEvents[inputEvents.length - 1][0]).to.eql('Spurdo :ebin: Sparde')
     })
 
     it('inserts string without any padding if padEmoji setting is set to false', () => {
       const initialString = 'Eat some spam!'
-      const [wrapper] = generateInput(initialString, false)
+      const wrapper = generateInput(initialString, false)
       const input = wrapper.find('input')
       input.setValue(initialString)
       wrapper.setData({ caret: initialString.length, keepOpen: false })
       wrapper.vm.insert({ insertion: ':spam:' })
-      const inputEvents = wrapper.emitted().input
+      const inputEvents = wrapper.emitted()['update:modelValue']
       expect(inputEvents[inputEvents.length - 1][0]).to.eql('Eat some spam!:spam:')
     })
 
     it('correctly sets caret after insertion at beginning', (done) => {
       const initialString = '1234'
-      const [wrapper, vue] = generateInput(initialString)
+      const wrapper = generateInput(initialString)
       const input = wrapper.find('input')
       input.setValue(initialString)
       wrapper.setData({ caret: 0 })
       wrapper.vm.insert({ insertion: '1234', keepOpen: false })
-      vue.nextTick(() => {
+      wrapper.vm.$nextTick(() => {
         expect(wrapper.vm.caret).to.eql(5)
         done()
       })
@@ -110,12 +118,12 @@ describe('EmojiInput', () => {
 
     it('correctly sets caret after insertion at end', (done) => {
       const initialString = '1234'
-      const [wrapper, vue] = generateInput(initialString)
+      const wrapper = generateInput(initialString)
       const input = wrapper.find('input')
       input.setValue(initialString)
       wrapper.setData({ caret: initialString.length })
       wrapper.vm.insert({ insertion: '1234', keepOpen: false })
-      vue.nextTick(() => {
+      wrapper.vm.$nextTick(() => {
         expect(wrapper.vm.caret).to.eql(10)
         done()
       })
@@ -123,12 +131,12 @@ describe('EmojiInput', () => {
 
     it('correctly sets caret after insertion if padEmoji setting is set to false', (done) => {
       const initialString = '1234'
-      const [wrapper, vue] = generateInput(initialString, false)
+      const wrapper = generateInput(initialString, false)
       const input = wrapper.find('input')
       input.setValue(initialString)
       wrapper.setData({ caret: initialString.length })
       wrapper.vm.insert({ insertion: '1234', keepOpen: false })
-      vue.nextTick(() => {
+      wrapper.vm.$nextTick(() => {
         expect(wrapper.vm.caret).to.eql(8)
         done()
       })
-- 
cgit v1.2.3-70-g09d2


From c3690b456e66585598f05d71643089a5e9770af7 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 30 Mar 2022 01:24:53 +0300
Subject: fix emoji input warning spam

---
 src/components/emoji_input/emoji_input.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components/emoji_input')

diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js
index e772bf75..391cc5b5 100644
--- a/src/components/emoji_input/emoji_input.js
+++ b/src/components/emoji_input/emoji_input.js
@@ -31,7 +31,7 @@ library.add(
  */
 
 const EmojiInput = {
-  emits: ['update:modelValue'],
+  emits: ['update:modelValue', 'shown'],
   props: {
     suggest: {
       /**
-- 
cgit v1.2.3-70-g09d2


From 7f513fe46fbf631190445b21b7cb4b7cb431d019 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 20 Apr 2022 23:44:33 +0300
Subject: more em-sized fonts

---
 src/components/emoji_input/emoji_input.vue             | 2 +-
 src/components/emoji_picker/emoji_picker.scss          | 6 ++++--
 src/components/link-preview/link-preview.vue           | 2 +-
 src/components/notifications/notifications.scss        | 8 ++++----
 src/components/registration/registration.vue           | 2 +-
 src/components/status/status.scss                      | 9 ++++-----
 src/components/still-image/still-image.vue             | 8 ++++----
 src/components/user_card/user_card.scss                | 5 ++---
 src/components/user_list_popover/user_list_popover.vue | 2 +-
 9 files changed, 22 insertions(+), 22 deletions(-)

(limited to 'src/components/emoji_input')

diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index aa2950ce..7d95ab7e 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -78,7 +78,7 @@
     top: 0;
     right: 0;
     margin: .2em .25em;
-    font-size: 16px;
+    font-size: 1.3em;
     cursor: pointer;
     line-height: 24px;
 
diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index 1a696584..2055e02e 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -73,12 +73,13 @@
     &-item {
       padding: 0 7px;
       cursor: pointer;
-      font-size: 24px;
+      font-size: 1.85em;
 
       &.disabled {
         opacity: 0.5;
         pointer-events: none;
       }
+
       &.active {
         border-bottom: 4px solid;
 
@@ -151,9 +152,10 @@
       justify-content: left;
 
       &-title {
-        font-size: 12px;
+        font-size: 0.85em;
         width: 100%;
         margin: 0;
+
         &.disabled {
           display: none;
         }
diff --git a/src/components/link-preview/link-preview.vue b/src/components/link-preview/link-preview.vue
index d3ca39b8..220527f2 100644
--- a/src/components/link-preview/link-preview.vue
+++ b/src/components/link-preview/link-preview.vue
@@ -63,7 +63,7 @@
   }
 
   .card-host {
-    font-size: 12px;
+    font-size: 0.85em;
   }
 
   .card-description {
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index a285027d..aa4ae346 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -113,13 +113,13 @@
   }
 
   .emoji-reaction-emoji {
-    font-size: 16px;
+    font-size: 1.3em;
   }
 
   .notification-details {
-    min-width: 0px;
+    min-width: 0;
     word-wrap: break-word;
-    line-height:18px;
+    line-height: 1.4;
     position: relative;
     overflow: hidden;
     width: 100%;
@@ -142,7 +142,7 @@
     }
 
     .timeago {
-      margin-right: .2em;
+      margin-right: 0.2em;
     }
 
     .status-content {
diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
index 1c83a47e..c3fee6f8 100644
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@@ -318,7 +318,7 @@ $validations-cRed: #f04124;
     text-align: left;
 
     span {
-      font-size: 12px;
+      font-size: 0.85em;
     }
   }
 
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index e38e2a53..36a2cca1 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -82,7 +82,6 @@
 
   .status-username {
     white-space: nowrap;
-    font-size: 14px;
     overflow: hidden;
     max-width: 85%;
     font-weight: bold;
@@ -160,7 +159,7 @@
   & .heading-reply-row {
     position: relative;
     align-content: baseline;
-    font-size: 12px;
+    font-size: 0.85em;
     margin-top: 0.2em;
     line-height: 130%;
     max-width: 100%;
@@ -229,7 +228,7 @@
   .replies {
     margin-top: 0.25em;
     line-height: 18px;
-    font-size: 12px;
+    font-size: 0.85em;
     display: flex;
     flex-wrap: wrap;
 
@@ -389,14 +388,14 @@
 
     .stat-title {
       color: var(--faint, $fallback--faint);
-      font-size: 12px;
+      font-size: 0.85em;
       text-transform: uppercase;
       position: relative;
     }
 
     .stat-number {
       font-weight: bolder;
-      font-size: 16px;
+      font-size: 1.1em;
       line-height: 1em;
     }
 
diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue
index e939b532..ab3080c8 100644
--- a/src/components/still-image/still-image.vue
+++ b/src/components/still-image/still-image.vue
@@ -58,10 +58,10 @@
       zoom: var(--_still_image-label-scale, 1);
       content: 'gif';
       position: absolute;
-      line-height: 10px;
-      font-size: 10px;
-      top: 5px;
-      left: 5px;
+      line-height: 1;
+      font-size: 0.7em;
+      top: 0.5em;
+      left: 0.5em;
       background: rgba(127, 127, 127, 0.5);
       color: #fff;
       display: block;
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index 4dabafa2..44657bdf 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -189,12 +189,12 @@
     overflow: hidden;
     flex: 1 1 auto;
     margin-right: 1em;
-    font-size: 15px;
+    font-size: 1.1em;
   }
 
   .bottom-line {
     font-weight: light;
-    font-size: 15px;
+    font-size: 1.1em;
     align-items: baseline;
 
     .lock-icon {
@@ -232,7 +232,6 @@
     margin-bottom: .15em;
     display: flex;
     align-items: baseline;
-    font-size: 14px;
     line-height: 22px;
     flex-wrap: wrap;
 
diff --git a/src/components/user_list_popover/user_list_popover.vue b/src/components/user_list_popover/user_list_popover.vue
index 8706d0ff..bdc3aa92 100644
--- a/src/components/user_list_popover/user_list_popover.vue
+++ b/src/components/user_list_popover/user_list_popover.vue
@@ -73,7 +73,7 @@
     }
 
     .user-list-screen-name {
-      font-size: 9px;
+      font-size: 0.65em;
     }
   }
 }
-- 
cgit v1.2.3-70-g09d2