From 7dc22774532872fc99aa7768cf299ab623e9d155 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Mon, 9 Jan 2023 13:02:16 -0500
Subject: Use stylelint

---
 src/components/emoji_reactions/emoji_reactions.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

(limited to 'src/components/emoji_reactions/emoji_reactions.vue')

diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue
index 4eb22a65..a63daa97 100644
--- a/src/components/emoji_reactions/emoji_reactions.vue
+++ b/src/components/emoji_reactions/emoji_reactions.vue
@@ -28,7 +28,7 @@
 
 <script src="./emoji_reactions.js"></script>
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
 
 .EmojiReactions {
   display: flex;
@@ -55,6 +55,7 @@
 
     &.not-clickable {
       cursor: default;
+
       &:hover {
         box-shadow: $fallback--buttonShadow;
         box-shadow: var(--buttonShadow);
@@ -75,10 +76,10 @@
     display: flex;
     align-items: center;
     justify-content: center;
+
     &:hover {
       text-decoration: underline;
     }
   }
-
 }
 </style>
-- 
cgit v1.2.3-70-g09d2


From 998aa8f732bbf9d074abeb5916ceb5effd8afe5c Mon Sep 17 00:00:00 2001
From: Alexander Tumin <iamtakingiteasy@eientei.org>
Date: Sun, 18 Dec 2022 22:04:58 +0300
Subject: Allow custom emoji reactions

---
 src/components/emoji_reactions/emoji_reactions.vue |  27 +++++-
 src/components/notification/notification.vue       |  15 ++-
 src/components/notifications/notifications.scss    |   7 ++
 src/components/react_button/react_button.js        |  92 ++----------------
 src/components/react_button/react_button.vue       | 108 +++++++--------------
 .../entity_normalizer/entity_normalizer.service.js |   1 +
 6 files changed, 89 insertions(+), 161 deletions(-)

(limited to 'src/components/emoji_reactions/emoji_reactions.vue')

diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue
index a63daa97..12783114 100644
--- a/src/components/emoji_reactions/emoji_reactions.vue
+++ b/src/components/emoji_reactions/emoji_reactions.vue
@@ -2,7 +2,7 @@
   <div class="EmojiReactions">
     <UserListPopover
       v-for="(reaction) in emojiReactions"
-      :key="reaction.name"
+      :key="reaction.url || reaction.name"
       :users="accountsForEmoji[reaction.name]"
     >
       <button
@@ -11,7 +11,21 @@
         @click="emojiOnClick(reaction.name, $event)"
         @mouseenter="fetchEmojiReactionsByIfMissing()"
       >
-        <span class="reaction-emoji">{{ reaction.name }}</span>
+        <span
+          v-if="reaction.url"
+          class="reaction-emoji"
+        >
+          <img
+            :src="reaction.url"
+            :title="reaction.name"
+            class="reaction-emoji-content"
+            width="1em"
+          >
+        </span>
+        <span
+          v-else
+          class="reaction-emoji reaction-emoji-content"
+        >{{ reaction.name }}</span>
         <span>{{ reaction.count }}</span>
       </button>
     </UserListPopover>
@@ -46,9 +60,18 @@
 
     .reaction-emoji {
       width: 1.25em;
+      height: 1.25em;
       margin-right: 0.25em;
     }
 
+    .reaction-emoji-content {
+      max-width: 1.25em;
+      max-height: 1.25em;
+      width: auto;
+      height: auto;
+      overflow: hidden;
+    }
+
     &:focus {
       outline: none;
     }
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index e1ea42ad..4d801c5e 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -121,7 +121,16 @@
                   scope="global"
                   keypath="notifications.reacted_with"
                 >
-                  <span class="emoji-reaction-emoji">{{ notification.emoji }}</span>
+                  <img
+                    v-if="notification.emoji_url"
+                    class="emoji-reaction-emoji emoji-reaction-emoji-image"
+                    :src="notification.emoji_url"
+                    :name="notification.emoji"
+                  >
+                  <span
+                    v-else
+                    class="emoji-reaction-emoji"
+                  >{{ notification.emoji }}</span>
                 </i18n-t>
               </small>
             </span>
@@ -153,9 +162,9 @@
             </router-link>
             <button
               class="button-unstyled expand-icon"
-              @click.prevent="toggleStatusExpanded"
-              :title="$t('tool_tip.toggle_expand')"
               :aria-expanded="statusExpanded"
+              :title="$t('tool_tip.toggle_expand')"
+              @click.prevent="toggleStatusExpanded"
             >
               <FAIcon
                 class="fa-scale-110"
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 41cfcef0..61f7317e 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -129,6 +129,13 @@
 
   .emoji-reaction-emoji {
     font-size: 1.3em;
+    max-width: 1.25em;
+    height: 1.25em;
+    width: auto;
+  }
+
+  .emoji-reaction-emoji-image {
+    vertical-align: middle;
   }
 
   .notification-details {
diff --git a/src/components/react_button/react_button.js b/src/components/react_button/react_button.js
index 47a48623..11bee8b0 100644
--- a/src/components/react_button/react_button.js
+++ b/src/components/react_button/react_button.js
@@ -1,9 +1,8 @@
 import Popover from '../popover/popover.vue'
-import { ensureFinalFallback } from '../../i18n/languages.js'
+import EmojiPicker from '../emoji_picker/emoji_picker.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faPlus, faTimes } from '@fortawesome/free-solid-svg-icons'
 import { faSmileBeam } from '@fortawesome/free-regular-svg-icons'
-import { trim } from 'lodash'
 
 library.add(
   faPlus,
@@ -20,103 +19,32 @@ const ReactButton = {
     }
   },
   components: {
-    Popover
+    Popover,
+    EmojiPicker
   },
   methods: {
-    addReaction (event, emoji, close) {
+    addReaction (event) {
+      const emoji = event.insertion
       const existingReaction = this.status.emoji_reactions.find(r => r.name === emoji)
       if (existingReaction && existingReaction.me) {
         this.$store.dispatch('unreactWithEmoji', { id: this.status.id, emoji })
       } else {
         this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji })
       }
-      close()
+    },
+    show () {
+      if (!this.expanded) {
+        this.$refs.picker.showPicker()
+      }
     },
     onShow () {
       this.expanded = true
-      this.focusInput()
     },
     onClose () {
       this.expanded = false
-    },
-    focusInput () {
-      this.$nextTick(() => {
-        const input = document.querySelector('.reaction-picker-filter > input')
-        if (input) input.focus()
-      })
-    },
-    // Vaguely adjusted copypaste from emoji_input and emoji_picker!
-    maybeLocalizedEmojiNamesAndKeywords (emoji) {
-      const names = [emoji.displayText]
-      const keywords = []
-
-      if (emoji.displayTextI18n) {
-        names.push(this.$t(emoji.displayTextI18n.key, emoji.displayTextI18n.args))
-      }
-
-      if (emoji.annotations) {
-        this.languages.forEach(lang => {
-          names.push(emoji.annotations[lang]?.name)
-
-          keywords.push(...(emoji.annotations[lang]?.keywords || []))
-        })
-      }
-
-      return {
-        names: names.filter(k => k),
-        keywords: keywords.filter(k => k)
-      }
-    },
-    maybeLocalizedEmojiName (emoji) {
-      if (!emoji.annotations) {
-        return emoji.displayText
-      }
-
-      if (emoji.displayTextI18n) {
-        return this.$t(emoji.displayTextI18n.key, emoji.displayTextI18n.args)
-      }
-
-      for (const lang of this.languages) {
-        if (emoji.annotations[lang]?.name) {
-          return emoji.annotations[lang].name
-        }
-      }
-
-      return emoji.displayText
     }
   },
   computed: {
-    commonEmojis () {
-      const hardcodedSet = new Set(['👍', '😠', '👀', '😂', '🔥'])
-      return this.$store.getters.standardEmojiList.filter(emoji => hardcodedSet.has(emoji.replacement))
-    },
-    languages () {
-      return ensureFinalFallback(this.$store.getters.mergedConfig.interfaceLanguage)
-    },
-    emojis () {
-      if (this.filterWord !== '') {
-        const keywordLowercase = trim(this.filterWord.toLowerCase())
-
-        const orderedEmojiList = []
-        for (const emoji of this.$store.getters.standardEmojiList) {
-          const indices = this.maybeLocalizedEmojiNamesAndKeywords(emoji)
-            .keywords
-            .map(k => k.toLowerCase().indexOf(keywordLowercase))
-            .filter(k => k > -1)
-
-          const indexOfKeyword = indices.length ? Math.min(...indices) : -1
-
-          if (indexOfKeyword > -1) {
-            if (!Array.isArray(orderedEmojiList[indexOfKeyword])) {
-              orderedEmojiList[indexOfKeyword] = []
-            }
-            orderedEmojiList[indexOfKeyword].push(emoji)
-          }
-        }
-        return orderedEmojiList.flat()
-      }
-      return this.$store.getters.standardEmojiList || []
-    },
     mergedConfig () {
       return this.$store.getters.mergedConfig
     }
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index a813b6fd..de08dd4c 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -1,73 +1,38 @@
 <template>
-  <Popover
-    trigger="click"
-    class="ReactButton"
-    placement="top"
-    :offset="{ y: 5 }"
-    :bound-to="{ x: 'container' }"
-    remove-padding
-    popover-class="ReactButton popover-default"
-    @show="onShow"
-    @close="onClose"
-  >
-    <template #content="{close}">
-      <div class="reaction-picker-filter">
-        <input
-          v-model="filterWord"
-          size="1"
-          :placeholder="$t('emoji.search_emoji')"
-          @input="$event.target.composing = false"
-        >
-      </div>
-      <div class="reaction-picker">
-        <span
-          v-for="emoji in commonEmojis"
-          :key="emoji.replacement"
-          class="emoji-button"
-          :title="maybeLocalizedEmojiName(emoji)"
-          @click="addReaction($event, emoji.replacement, close)"
-        >
-          {{ emoji.replacement }}
-        </span>
-        <div class="reaction-picker-divider" />
-        <span
-          v-for="(emoji, key) in emojis"
-          :key="key"
-          class="emoji-button"
-          :title="maybeLocalizedEmojiName(emoji)"
-          @click="addReaction($event, emoji.replacement, close)"
-        >
-          {{ emoji.replacement }}
-        </span>
-        <div class="reaction-bottom-fader" />
-      </div>
-    </template>
-    <template #trigger>
-      <span
-        class="button-unstyled popover-trigger"
-        :title="$t('tool_tip.add_reaction')"
-      >
-        <FALayers>
-          <FAIcon
-            class="fa-scale-110 fa-old-padding"
-            :icon="['far', 'smile-beam']"
-          />
-          <FAIcon
-            v-show="!expanded"
-            class="focus-marker"
-            transform="shrink-6 up-9 right-17"
-            icon="plus"
-          />
-          <FAIcon
-            v-show="expanded"
-            class="focus-marker"
-            transform="shrink-6 up-9 right-17"
-            icon="times"
-          />
-        </FALayers>
-      </span>
-    </template>
-  </Popover>
+  <span class="ReactButton">
+    <EmojiPicker
+      ref="picker"
+      :enable-sticker-picker="enableStickerPicker"
+      class="emoji-picker-panel"
+      @emoji="addReaction"
+      @show="onShow"
+      @close="onClose"
+    />
+    <span
+      class="button-unstyled popover-trigger"
+      :title="$t('tool_tip.add_reaction')"
+      @click.stop.prevent="show"
+    >
+      <FALayers>
+        <FAIcon
+          class="fa-scale-110 fa-old-padding"
+          :icon="['far', 'smile-beam']"
+        />
+        <FAIcon
+          v-show="!expanded"
+          class="focus-marker"
+          transform="shrink-6 up-9 right-17"
+          icon="plus"
+        />
+        <FAIcon
+          v-show="expanded"
+          class="focus-marker"
+          transform="shrink-6 up-9 right-17"
+          icon="times"
+        />
+      </FALayers>
+    </span>
+  </span>
 </template>
 
 <script src="./react_button.js"></script>
@@ -135,11 +100,6 @@
       color: $fallback--text;
       color: var(--text, $fallback--text);
     }
-  }
-
-  .popover-trigger-button {
-    /* override of popover internal stuff */
-    width: auto;
 
     @include unfocused-style {
       .focus-marker {
diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index 53c3108c..adefc5a5 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -441,6 +441,7 @@ export const parseNotification = (data) => {
       : parseUser(data.target)
     output.from_profile = parseUser(data.account)
     output.emoji = data.emoji
+    output.emoji_url = data.emoji_url
     if (data.report) {
       output.report = data.report
       output.report.content = data.report.content
-- 
cgit v1.2.3-70-g09d2


From 3403f6a1ed5388291244487ae7eb3190d7c4353e Mon Sep 17 00:00:00 2001
From: Alexander Tumin <iamtakingiteasy@eientei.org>
Date: Fri, 17 Mar 2023 23:30:46 +0300
Subject: Allow custom emoji reactions: add option to scale reaction buttons

---
 src/components/emoji_reactions/emoji_reactions.vue | 27 ++++++++++++++--------
 src/components/settings_modal/tabs/general_tab.vue |  9 ++++++++
 src/i18n/en.json                                   |  1 +
 src/modules/config.js                              |  2 ++
 src/services/style_setter/style_setter.js          |  4 ++--
 5 files changed, 32 insertions(+), 11 deletions(-)

(limited to 'src/components/emoji_reactions/emoji_reactions.vue')

diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue
index 12783114..eb46018e 100644
--- a/src/components/emoji_reactions/emoji_reactions.vue
+++ b/src/components/emoji_reactions/emoji_reactions.vue
@@ -12,20 +12,20 @@
         @mouseenter="fetchEmojiReactionsByIfMissing()"
       >
         <span
-          v-if="reaction.url"
           class="reaction-emoji"
         >
           <img
+            v-if="reaction.url"
             :src="reaction.url"
             :title="reaction.name"
             class="reaction-emoji-content"
             width="1em"
           >
+          <span
+            v-else
+            class="reaction-emoji reaction-emoji-content"
+          >{{ reaction.name }}</span>
         </span>
-        <span
-          v-else
-          class="reaction-emoji reaction-emoji-content"
-        >{{ reaction.name }}</span>
         <span>{{ reaction.count }}</span>
       </button>
     </UserListPopover>
@@ -49,6 +49,8 @@
   margin-top: 0.25em;
   flex-wrap: wrap;
 
+  --emoji-size: calc(1.25em * var(--emojiReactionsScale, 1));
+
   .emoji-reaction {
     padding: 0 0.5em;
     margin-right: 0.5em;
@@ -59,17 +61,24 @@
     box-sizing: border-box;
 
     .reaction-emoji {
-      width: 1.25em;
-      height: 1.25em;
+      width: var(--emoji-size);
+      height: var(--emoji-size);
       margin-right: 0.25em;
+      line-height: var(--emoji-size);
+      display: flex;
+      justify-content: center;
+      align-items: center;
     }
 
     .reaction-emoji-content {
-      max-width: 1.25em;
-      max-height: 1.25em;
+      max-width: 100%;
+      max-height: 100%;
       width: auto;
       height: auto;
+      line-height: inherit;
       overflow: hidden;
+      font-size: calc(var(--emoji-size) * 0.8);
+      margin: 0;
     }
 
     &:focus {
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 65248ac1..17afc5ba 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -271,6 +271,15 @@
             {{ $t('settings.no_rich_text_description') }}
           </BooleanSetting>
         </li>
+        <li>
+          <IntegerSetting
+            v-if="user"
+            path="emojiReactionsScale"
+            expert="1"
+          >
+            {{ $t('settings.emoji_reactions_scale') }}
+          </IntegerSetting>
+        </li>
         <h3>{{ $t('settings.attachments') }}</h3>
         <li>
           <BooleanSetting
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 6c9bc8e2..10ba2ef8 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -467,6 +467,7 @@
     "pad_emoji": "Pad emoji with spaces when adding from picker",
     "autocomplete_select_first": "Automatically select the first candidate when autocomplete results are available",
     "emoji_reactions_on_timeline": "Show emoji reactions on timeline",
+    "emoji_reactions_scale": "Reactions scale factor",
     "export_theme": "Save preset",
     "filtering": "Filtering",
     "wordfilter": "Wordfilter",
diff --git a/src/modules/config.js b/src/modules/config.js
index 3d9cf591..7597886e 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -97,6 +97,7 @@ export const defaultState = {
   sidebarColumnWidth: '25rem',
   contentColumnWidth: '45rem',
   notifsColumnWidth: '25rem',
+  emojiReactionsScale: 1.0,
   navbarColumnStretch: false,
   greentext: undefined, // instance default
   useAtIcon: undefined, // instance default
@@ -185,6 +186,7 @@ const config = {
         case 'sidebarColumnWidth':
         case 'contentColumnWidth':
         case 'notifsColumnWidth':
+        case 'emojiReactionsScale':
           applyConfig(state)
           break
         case 'customTheme':
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index d6e973a1..43fe3c73 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -21,8 +21,8 @@ export const applyTheme = (input) => {
   body.classList.remove('hidden')
 }
 
-const configColumns = ({ sidebarColumnWidth, contentColumnWidth, notifsColumnWidth }) =>
-  ({ sidebarColumnWidth, contentColumnWidth, notifsColumnWidth })
+const configColumns = ({ sidebarColumnWidth, contentColumnWidth, notifsColumnWidth, emojiReactionsScale }) =>
+  ({ sidebarColumnWidth, contentColumnWidth, notifsColumnWidth, emojiReactionsScale })
 
 const defaultConfigColumns = configColumns(defaultState)
 
-- 
cgit v1.2.3-70-g09d2


From ed23f51838477dc04fb5daedb6bf1bdf96f2ca65 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Mon, 22 May 2023 22:02:22 -0400
Subject: Make reaction button accessible

---
 src/components/emoji_reactions/emoji_reactions.js  |  12 +++
 src/components/emoji_reactions/emoji_reactions.vue | 104 +++++++++++++++++++--
 2 files changed, 108 insertions(+), 8 deletions(-)

(limited to 'src/components/emoji_reactions/emoji_reactions.vue')

diff --git a/src/components/emoji_reactions/emoji_reactions.js b/src/components/emoji_reactions/emoji_reactions.js
index bb11b840..b3520a55 100644
--- a/src/components/emoji_reactions/emoji_reactions.js
+++ b/src/components/emoji_reactions/emoji_reactions.js
@@ -1,5 +1,17 @@
 import UserAvatar from '../user_avatar/user_avatar.vue'
 import UserListPopover from '../user_list_popover/user_list_popover.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faPlus,
+  faMinus,
+  faCheck
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faPlus,
+  faMinus,
+  faCheck
+)
 
 const EMOJI_REACTION_COUNT_CUTOFF = 12
 
diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue
index eb46018e..3171785b 100644
--- a/src/components/emoji_reactions/emoji_reactions.vue
+++ b/src/components/emoji_reactions/emoji_reactions.vue
@@ -1,15 +1,14 @@
 <template>
   <div class="EmojiReactions">
-    <UserListPopover
+    <span
       v-for="(reaction) in emojiReactions"
       :key="reaction.url || reaction.name"
-      :users="accountsForEmoji[reaction.name]"
+      class="emoji-reaction-container btn-group"
     >
       <button
         class="emoji-reaction btn button-default"
         :class="{ '-picked-reaction': reactedWith(reaction.name), 'not-clickable': !loggedIn }"
         @click="emojiOnClick(reaction.name, $event)"
-        @mouseenter="fetchEmojiReactionsByIfMissing()"
       >
         <span
           class="reaction-emoji"
@@ -26,9 +25,36 @@
             class="reaction-emoji reaction-emoji-content"
           >{{ reaction.name }}</span>
         </span>
-        <span>{{ reaction.count }}</span>
+        <FALayers>
+        <FAIcon
+          v-if="reactedWith(reaction.name)"
+          class="active-marker"
+          transform="shrink-6 up-9"
+          icon="check"
+        />
+        <FAIcon
+          v-if="!reactedWith(reaction.name)"
+          class="focus-marker"
+          transform="shrink-6 up-9"
+          icon="plus"
+        />
+        <FAIcon
+          v-else
+          class="focus-marker"
+          transform="shrink-6 up-9"
+          icon="minus"
+        />
+        </FALayers>
       </button>
+    <UserListPopover
+      :users="accountsForEmoji[reaction.name]"
+      class="emoji-reaction-popover"
+      @show="fetchEmojiReactionsByIfMissing()"
+      :trigger-attrs="{ class: ['btn', 'button-default', 'emoji-reaction-count-button', { '-picked-reaction': reactedWith(reaction.name) }] }"
+    >
+      <span class="emoji-reaction-counts">{{ reaction.count }}</span>
     </UserListPopover>
+    </span>
     <a
       v-if="tooManyReactions"
       class="emoji-reaction-expand faint"
@@ -43,6 +69,7 @@
 <script src="./emoji_reactions.js"></script>
 <style lang="scss">
 @import "../../variables";
+@import "../../mixins";
 
 .EmojiReactions {
   display: flex;
@@ -51,10 +78,36 @@
 
   --emoji-size: calc(1.25em * var(--emojiReactionsScale, 1));
 
-  .emoji-reaction {
-    padding: 0 0.5em;
-    margin-right: 0.5em;
+  .emoji-reaction-container {
+    display: flex;
+    align-items: stretch;
     margin-top: 0.5em;
+    margin-right: 0.5em;
+
+    .emoji-reaction-popover {
+      padding: 0;
+
+      .emoji-reaction-count-button {
+        background-color: var(--btn);
+        height: 100%;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        box-sizing: border-box;
+        min-width: 2em;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+
+        &.-picked-reaction {
+          border: 1px solid var(--accent, $fallback--link);
+          margin-right: -1px;
+        }
+      }
+    }
+  }
+
+  .emoji-reaction {
+    padding-left: 0.5em;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -97,7 +150,42 @@
     &.-picked-reaction {
       border: 1px solid var(--accent, $fallback--link);
       margin-left: -1px; // offset the border, can't use inset shadows either
-      margin-right: calc(0.5em - 1px);
+      margin-right: -1px;
+
+      .svg-inline--fa {
+        color: $fallback--link;
+        color: var(--accent, $fallback--link);
+      }
+    }
+
+    @include unfocused-style {
+      .svg-inline--fa {
+        color: $fallback--text;
+        color: var(--btnText, $fallback--text);
+      }
+
+      .focus-marker {
+        visibility: hidden;
+      }
+
+      .active-marker {
+        visibility: visible;
+      }
+    }
+
+    @include focused-style {
+      .svg-inline--fa {
+        color: $fallback--link;
+        color: var(--accent, $fallback--link);
+      }
+
+      .focus-marker {
+        visibility: visible;
+      }
+
+      .active-marker {
+        visibility: hidden;
+      }
     }
   }
 
-- 
cgit v1.2.3-70-g09d2


From 8a1074336c3cce8111a23281bbe71301b93c3420 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Mon, 22 May 2023 22:09:04 -0400
Subject: Make emoji reactions clickable when not logged in

---
 src/components/emoji_reactions/emoji_reactions.js  |  3 +++
 src/components/emoji_reactions/emoji_reactions.vue | 20 ++++++++------------
 2 files changed, 11 insertions(+), 12 deletions(-)

(limited to 'src/components/emoji_reactions/emoji_reactions.vue')

diff --git a/src/components/emoji_reactions/emoji_reactions.js b/src/components/emoji_reactions/emoji_reactions.js
index b3520a55..74cb844c 100644
--- a/src/components/emoji_reactions/emoji_reactions.js
+++ b/src/components/emoji_reactions/emoji_reactions.js
@@ -45,6 +45,9 @@ const EmojiReactions = {
     },
     loggedIn () {
       return !!this.$store.state.users.currentUser
+    },
+    remoteInteractionLink () {
+      return this.$store.getters.remoteInteractionLink({ statusId: this.status.id })
     }
   },
   methods: {
diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue
index 3171785b..f30afcb2 100644
--- a/src/components/emoji_reactions/emoji_reactions.vue
+++ b/src/components/emoji_reactions/emoji_reactions.vue
@@ -5,9 +5,12 @@
       :key="reaction.url || reaction.name"
       class="emoji-reaction-container btn-group"
     >
-      <button
+      <component
+        :is="loggedIn ? 'button' : 'a'"
+        v-bind="!loggedIn ? { href: remoteInteractionLink } : {}"
+        role="button"
         class="emoji-reaction btn button-default"
-        :class="{ '-picked-reaction': reactedWith(reaction.name), 'not-clickable': !loggedIn }"
+        :class="{ '-picked-reaction': reactedWith(reaction.name) }"
         @click="emojiOnClick(reaction.name, $event)"
       >
         <span
@@ -45,7 +48,7 @@
           icon="minus"
         />
         </FALayers>
-      </button>
+      </component>
     <UserListPopover
       :users="accountsForEmoji[reaction.name]"
       class="emoji-reaction-popover"
@@ -112,6 +115,8 @@
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
 
     .reaction-emoji {
       width: var(--emoji-size);
@@ -138,15 +143,6 @@
       outline: none;
     }
 
-    &.not-clickable {
-      cursor: default;
-
-      &:hover {
-        box-shadow: $fallback--buttonShadow;
-        box-shadow: var(--buttonShadow);
-      }
-    }
-
     &.-picked-reaction {
       border: 1px solid var(--accent, $fallback--link);
       margin-left: -1px; // offset the border, can't use inset shadows either
-- 
cgit v1.2.3-70-g09d2


From 0b2f676e50c5fb8da1d5e673ee6a2723ee7c9e1e Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Mon, 22 May 2023 22:14:44 -0400
Subject: Fix focus (unvisible) style

---
 src/components/emoji_reactions/emoji_reactions.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

(limited to 'src/components/emoji_reactions/emoji_reactions.vue')

diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue
index f30afcb2..3f76cdc6 100644
--- a/src/components/emoji_reactions/emoji_reactions.vue
+++ b/src/components/emoji_reactions/emoji_reactions.vue
@@ -143,6 +143,11 @@
       outline: none;
     }
 
+    .svg-inline--fa {
+      color: $fallback--text;
+      color: var(--btnText, $fallback--text);
+    }
+
     &.-picked-reaction {
       border: 1px solid var(--accent, $fallback--link);
       margin-left: -1px; // offset the border, can't use inset shadows either
@@ -155,11 +160,6 @@
     }
 
     @include unfocused-style {
-      .svg-inline--fa {
-        color: $fallback--text;
-        color: var(--btnText, $fallback--text);
-      }
-
       .focus-marker {
         visibility: hidden;
       }
-- 
cgit v1.2.3-70-g09d2


From 48ee11fea35123090762d98f5249168679f05e3a Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Mon, 22 May 2023 22:18:42 -0400
Subject: Add aria for react button

---
 src/components/emoji_reactions/emoji_reactions.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'src/components/emoji_reactions/emoji_reactions.vue')

diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue
index 3f76cdc6..1fdfb87b 100644
--- a/src/components/emoji_reactions/emoji_reactions.vue
+++ b/src/components/emoji_reactions/emoji_reactions.vue
@@ -11,6 +11,8 @@
         role="button"
         class="emoji-reaction btn button-default"
         :class="{ '-picked-reaction': reactedWith(reaction.name) }"
+        :title="reaction.url ? reaction.name : undefined"
+        :aria-pressed="reactedWith(reaction.name)"
         @click="emojiOnClick(reaction.name, $event)"
       >
         <span
@@ -19,7 +21,6 @@
           <img
             v-if="reaction.url"
             :src="reaction.url"
-            :title="reaction.name"
             class="reaction-emoji-content"
             width="1em"
           >
-- 
cgit v1.2.3-70-g09d2


From d3e251665f50c7d289066b0be0fdfa5b227c3b65 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Mon, 22 May 2023 22:20:09 -0400
Subject: Lint

---
 src/components/emoji_reactions/emoji_reactions.vue | 52 +++++++++++-----------
 1 file changed, 26 insertions(+), 26 deletions(-)

(limited to 'src/components/emoji_reactions/emoji_reactions.vue')

diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue
index 1fdfb87b..d475d5dc 100644
--- a/src/components/emoji_reactions/emoji_reactions.vue
+++ b/src/components/emoji_reactions/emoji_reactions.vue
@@ -30,34 +30,34 @@
           >{{ reaction.name }}</span>
         </span>
         <FALayers>
-        <FAIcon
-          v-if="reactedWith(reaction.name)"
-          class="active-marker"
-          transform="shrink-6 up-9"
-          icon="check"
-        />
-        <FAIcon
-          v-if="!reactedWith(reaction.name)"
-          class="focus-marker"
-          transform="shrink-6 up-9"
-          icon="plus"
-        />
-        <FAIcon
-          v-else
-          class="focus-marker"
-          transform="shrink-6 up-9"
-          icon="minus"
-        />
+          <FAIcon
+            v-if="reactedWith(reaction.name)"
+            class="active-marker"
+            transform="shrink-6 up-9"
+            icon="check"
+          />
+          <FAIcon
+            v-if="!reactedWith(reaction.name)"
+            class="focus-marker"
+            transform="shrink-6 up-9"
+            icon="plus"
+          />
+          <FAIcon
+            v-else
+            class="focus-marker"
+            transform="shrink-6 up-9"
+            icon="minus"
+          />
         </FALayers>
       </component>
-    <UserListPopover
-      :users="accountsForEmoji[reaction.name]"
-      class="emoji-reaction-popover"
-      @show="fetchEmojiReactionsByIfMissing()"
-      :trigger-attrs="{ class: ['btn', 'button-default', 'emoji-reaction-count-button', { '-picked-reaction': reactedWith(reaction.name) }] }"
-    >
-      <span class="emoji-reaction-counts">{{ reaction.count }}</span>
-    </UserListPopover>
+      <UserListPopover
+        :users="accountsForEmoji[reaction.name]"
+        class="emoji-reaction-popover"
+        :trigger-attrs="{ class: ['btn', 'button-default', 'emoji-reaction-count-button', { '-picked-reaction': reactedWith(reaction.name) }] }"
+        @show="fetchEmojiReactionsByIfMissing()"
+      >
+        <span class="emoji-reaction-counts">{{ reaction.count }}</span>
+      </UserListPopover>
     </span>
     <a
       v-if="tooManyReactions"
-- 
cgit v1.2.3-70-g09d2


From c67513002460f56901246c81a9e7b6dbad89be27 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Mon, 22 May 2023 22:30:54 -0400
Subject: Make reaction counter accessible

---
 src/components/emoji_reactions/emoji_reactions.js  | 11 +++++++++++
 src/components/emoji_reactions/emoji_reactions.vue |  2 +-
 src/i18n/en.json                                   |  3 ++-
 3 files changed, 14 insertions(+), 2 deletions(-)

(limited to 'src/components/emoji_reactions/emoji_reactions.vue')

diff --git a/src/components/emoji_reactions/emoji_reactions.js b/src/components/emoji_reactions/emoji_reactions.js
index 74cb844c..b4936424 100644
--- a/src/components/emoji_reactions/emoji_reactions.js
+++ b/src/components/emoji_reactions/emoji_reactions.js
@@ -77,6 +77,17 @@ const EmojiReactions = {
       } else {
         this.reactWith(emoji)
       }
+    },
+    counterTriggerAttrs (reaction) {
+      return {
+        class: [
+          'btn',
+          'button-default',
+          'emoji-reaction-count-button',
+          { '-picked-reaction': this.reactedWith(reaction.name) }
+        ],
+        'aria-label': this.$tc('status.reaction_count_label', reaction.count, { num: reaction.count })
+      }
     }
   }
 }
diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue
index d475d5dc..20a1f4a1 100644
--- a/src/components/emoji_reactions/emoji_reactions.vue
+++ b/src/components/emoji_reactions/emoji_reactions.vue
@@ -53,7 +53,7 @@
       <UserListPopover
         :users="accountsForEmoji[reaction.name]"
         class="emoji-reaction-popover"
-        :trigger-attrs="{ class: ['btn', 'button-default', 'emoji-reaction-count-button', { '-picked-reaction': reactedWith(reaction.name) }] }"
+        :trigger-attrs="counterTriggerAttrs(reaction)"
         @show="fetchEmojiReactionsByIfMissing()"
       >
         <span class="emoji-reaction-counts">{{ reaction.count }}</span>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index b051f088..01309d0e 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -933,7 +933,8 @@
     "show_all_conversation_with_icon": "{icon} {text}",
     "show_all_conversation": "Show full conversation ({numStatus} other status) | Show full conversation ({numStatus} other statuses)",
     "show_only_conversation_under_this": "Only show replies to this status",
-    "status_history": "Status history"
+    "status_history": "Status history",
+    "reaction_count_label": "{num} person reacted | {num} people reacted"
   },
   "user_card": {
     "approve": "Approve",
-- 
cgit v1.2.3-70-g09d2


From b82f2a3543b733eda9ce52d60d6b7aba60f787d0 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Mon, 22 May 2023 23:09:05 -0400
Subject: Use button text in reaction counter

---
 src/components/emoji_reactions/emoji_reactions.vue | 2 ++
 1 file changed, 2 insertions(+)

(limited to 'src/components/emoji_reactions/emoji_reactions.vue')

diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue
index 20a1f4a1..92fc58ca 100644
--- a/src/components/emoji_reactions/emoji_reactions.vue
+++ b/src/components/emoji_reactions/emoji_reactions.vue
@@ -101,6 +101,8 @@
         display: inline-flex;
         justify-content: center;
         align-items: center;
+        color: $fallback--text;
+        color: var(--btnText, $fallback--text);
 
         &.-picked-reaction {
           border: 1px solid var(--accent, $fallback--link);
-- 
cgit v1.2.3-70-g09d2


From 8cc6b213fb3581caa77637a45ee60ee20268218a Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Thu, 29 Jun 2023 10:27:02 -0400
Subject: Fix react button misalignment on safari ios

---
 changelog.d/react-button-safari.fix                | 1 +
 src/components/emoji_reactions/emoji_reactions.vue | 2 ++
 2 files changed, 3 insertions(+)
 create mode 100644 changelog.d/react-button-safari.fix

(limited to 'src/components/emoji_reactions/emoji_reactions.vue')

diff --git a/changelog.d/react-button-safari.fix b/changelog.d/react-button-safari.fix
new file mode 100644
index 00000000..9846d50d
--- /dev/null
+++ b/changelog.d/react-button-safari.fix
@@ -0,0 +1 @@
+Fix react button misalignment on safari ios
diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue
index 92fc58ca..c11b338e 100644
--- a/src/components/emoji_reactions/emoji_reactions.vue
+++ b/src/components/emoji_reactions/emoji_reactions.vue
@@ -93,6 +93,7 @@
 
       .emoji-reaction-count-button {
         background-color: var(--btn);
+        margin: 0;
         height: 100%;
         border-top-left-radius: 0;
         border-bottom-left-radius: 0;
@@ -120,6 +121,7 @@
     box-sizing: border-box;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
+    margin: 0;
 
     .reaction-emoji {
       width: var(--emoji-size);
-- 
cgit v1.2.3-70-g09d2