non-square emoji

src/App.js

@@ -67,6 +67,11 @@ export default {
   data: () => ({
     mobileActivePanel: 'timeline',
   }),
+  provide() {
+    return {
+      allowNonSquareEmoji: useMergedConfigStore().mergedConfig.nonSquareEmoji,
+    }
+  },
   watch: {
     themeApplied() {
       this.removeSplash()

src/components/basic_user_card/basic_user_card.js

@@ -24,6 +24,11 @@ const BasicUserCard = {
       )
     },
   },
+  computed: {
+    allowNonSquareEmoji() {
+      return useMergedConfigStore().mergedConfig.nonSquareEmoji
+    },
+  }
 }
 
 export default BasicUserCard

src/components/basic_user_card/basic_user_card.vue

@@ -27,6 +27,7 @@
           class="basic-user-card-user-name-value"
           :html="user.name"
           :emoji="user.emoji"
+          :allow-non-square-emoji="allowNonSquareEmoji"
         />
       </div>
       <div>

src/components/chat_title/chat_title.js

@@ -20,5 +20,8 @@ export default {
     htmlTitle() {
       return this.user ? this.user.name_html : ''
     },
+    allowNonSquareEmoji() {
+      return useMergedConfigStore().mergedConfig.nonSquareEmoji
+    },
   },
 }

src/components/chat_title/chat_title.vue

@@ -19,6 +19,7 @@
       :title="'@'+(user && user.screen_name_ui)"
       :html="htmlTitle"
       :emoji="user.emoji || []"
+      :allow-non-square-emoji="allowNonSquareEmoji"
       :is-local="user.is_local"
     />
   </div>

src/components/notification/notification.js

@@ -210,6 +210,9 @@ const Notification = {
     mergedConfig() {
       return useMergedConfigStore().mergedConfig
     },
+    allowNonSquareEmoji() {
+      return this.mergedConfig.nonSquareEmoji
+    },
     shouldConfirmApprove() {
       return this.mergedConfig.modalOnApproveFollow
     },

src/components/notification/notification.vue

@@ -71,6 +71,7 @@
                 :title="'@'+notification.from_profile.screen_name_ui"
                 :html="notification.from_profile.name_html"
                 :emoji="notification.from_profile.emoji"
+                :allow-non-square-emoji="allowNonSquareEmoji"
                 :is-local="notification.from_profile.is_local"
               />
             </bdi>

src/components/poll/poll.js

@@ -55,6 +55,9 @@ export default {
         return this.expired ? 'polls.expired' : 'polls.expires_in'
       }
     },
+    allowNonSquareEmoji() {
+      return useMergedConfigStore().mergedConfig.nonSquareEmoji
+    },
     loggedIn() {
       return this.$store.state.users.currentUser
     },

src/components/poll/poll.vue

@@ -24,6 +24,7 @@
               :html="option.title_html"
               :handle-links="false"
               :emoji="emoji"
+              :allow-non-square-emoji="allowNonSquareEmoji"
             />
           </div>
           <div

src/components/rich_content/rich_content.jsx

@@ -112,6 +112,12 @@ export default {
       type: Boolean,
       default: true,
     },
+    // Allow wide emoji (max 3:1 ratio)
+    allowNonSquareEmoji: {
+      required: false,
+      type: Boolean,
+      default: false,
+    },
   },
   // NEVER EVER TOUCH DATA INSIDE RENDER
   render() {
@@ -322,7 +328,7 @@ export default {
     // slots updated -> rerender -> emit -> update up the tree -> rerender -> ...
     // at least until vue3?
     const result = (
-      <span class={['RichContent', this.faint ? '-faint' : '']}>
+      <span class={['RichContent', this.faint ? '-faint' : '', this.allowNonSquareEmoji ? '-allow-non-square-emoji' : '']}>
         {this.collapse
           ? pass2.map((x) => {
               if (!Array.isArray(x)) return x.replace(/\n/g, ' ')

src/components/rich_content/rich_content.scss

@@ -77,6 +77,14 @@
     height: var(--emoji-size, 32px);
   }
 
+  &.-allow-non-square-emoji {
+    .emoji {
+      width: auto;
+      max-width: calc(var(--emoji-size, 32px) * 3);
+      min-width: var(--emoji-size, 32px);
+    }
+  }
+
   .img,
   video {
     max-width: 100%;

src/components/settings_modal/tabs/posts_tab.vue

@@ -169,6 +169,11 @@
             {{ $t('settings.stop_gifs') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting path="nonSquareEmoji">
+            {{ $t('settings.non_square_emoji') }}
+          </BooleanSetting>
+        </li>
         <li>
           <BooleanSetting
             :local="true"

src/components/status/status.js

@@ -188,6 +188,9 @@ const Status = {
         !this.inConversation
       )
     },
+    allowNonSquareEmoji() {
+      return this.mergedConfig.nonSquareEmoji
+    },
     repeaterClass() {
       const user = this.statusoid.user
       return highlightClass(user)

src/components/status/status.vue

@@ -80,6 +80,7 @@
               <RichContent
                 :html="retweeterHtml"
                 :emoji="retweeterUser.emoji"
+                :allow-non-square-emoji="allowNonSquareEmoji"
                 :is-local="retweeterUser.is_local"
               />
             </router-link>
@@ -153,6 +154,7 @@
                   <RichContent
                     :html="status.user.name"
                     :emoji="status.user.emoji"
+                    :allow-non-square-emoji="allowNonSquareEmoji"
                     :is-local="status.user.is_local"
                   />
                 </h4>

src/components/status_body/status_body.js

@@ -43,6 +43,9 @@ const StatusBody = {
     localCollapseSubjectDefault() {
       return this.mergedConfig.collapseMessageWithSubject
     },
+    allowNonSquareEmoji() {
+      return this.mergedConfig.nonSquareEmoji
+    },
     // This is a bit hacky, but we want to approximate post height before rendering
     // so we count newlines (masto uses <p> for paragraphs, GS uses <br> between them)
     // as well as approximate line count by counting characters and approximating ~80

src/components/status_body/status_body.vue

@@ -15,6 +15,7 @@
           :html="status.summary_raw_html"
           :emoji="status.emojis"
           :is-local="status.isLocal"
+          :allow-non-square-emoji="allowNonSquareEmoji"
         />
         <button
           v-show="longSubject && showingLongSubject"
@@ -47,6 +48,7 @@
           :greentext="mergedConfig.greentext"
           :attentions="status.attentions"
           :is-local="status.is_local"
+          :allow-non-square-emoji="allowNonSquareEmoji"
           @parse-ready="onParseReady"
         />
         <div

src/components/user_card/user_card.js

@@ -400,6 +400,9 @@ export default {
         ],
       })
     },
+    allowNonSquareEmoji() {
+      return this.mergedConfig.nonSquareEmoji
+    },
     ...mapState(useMergedConfigStore, ['mergedConfig']),
   },
   methods: {

src/components/user_card/user_card.vue

@@ -140,6 +140,7 @@
                     :title="editable ? newName : user.name_unescaped"
                     :html="editable ? newName : user.name_unescaped"
                     :emoji="editable ? emoji : user.emoji"
+                    :allow-non-square-emoji="allowNonSquareEmoji"
                   />
                 </router-link>
                 <EmojiInput
@@ -369,6 +370,7 @@
         :class="{ '-justify-left': mergedConfig.userCardLeftJustify }"
         :html="editable ? escapedNewBio : user.description_html"
         :emoji="editable ? emoji : user.emoji"
+        :allow-non-square-emoji="allowNonSquareEmoji"
         :handle-links="true"
       />
     </template>
@@ -423,6 +425,7 @@
             <RichContent
               :html="field.name"
               :emoji="editable ? emoji : user.emoji"
+              :allow-non-square-emoji="allowNonSquareEmoji"
             />
           </dt>
           <dd
@@ -432,6 +435,7 @@
             <RichContent
               :html="field.value"
               :emoji="editable ? emoji : user.emoji"
+              :allow-non-square-emoji="allowNonSquareEmoji"
             />
           </dd>
         </dl>

src/components/user_list_popover/user_list_popover.js

@@ -23,6 +23,9 @@ const UserListPopover = {
     usersCapped() {
       return this.users.slice(0, 16)
     },
+    allowNonSquareEmoji() {
+      return useMergedConfigStore().mergedConfig.nonSquareEmoji
+    },
   },
 }
 

src/components/user_list_popover/user_list_popover.vue

@@ -27,6 +27,7 @@
                 :title="'@'+user.screen_name_ui"
                 :html="user.name_html"
                 :emoji="user.emoji"
+                :allow-non-square-emoji="allowNonSquareEmoji"
               />
               <!-- eslint-enable vue/no-v-html -->
               <span class="user-list-screen-name">{{ user.screen_name_ui }}</span><UnicodeDomainIndicator :user="user" />

src/i18n/en.json

@@ -794,6 +794,7 @@
     "default_post_status_content_type": "Default post status content type",
     "sensitive_by_default": "Mark posts as sensitive by default",
     "stop_gifs": "Pause animated images until you hover on them",
+    "non_square_emoji": "Allow non-square emoji",
     "streaming": "Automatically show new posts when scrolled to the top",
     "auto_update": "Show new posts automatically",
     "user_mutes": "Users",

src/modules/default_config_state.js

@@ -229,6 +229,10 @@ export const INSTANCE_DEFAULT_CONFIG_DEFINITIONS = {
     description: 'Play animated gifs on hover only',
     default: true,
   },
+  nonSquareEmoji: {
+    description: 'Allow emoji to be non-square (max 3:1 aspect)',
+    default: true,
+  },
   replyVisibility: {
     description: 'Type of replies to show',
     default: 'all',

src/services/notification_utils/notification_utils.js

@@ -113,7 +113,6 @@ export const unseenNotificationsFromStore = (
 ) => {
   return filteredNotificationsFromStore(store, notificationVisibility).filter(
     ({ seen, type }) => {
-      console.log(ignoreInactionableSeen)
       if (!ignoreInactionableSeen) return !seen
       if (seen) return false
       return ACTIONABLE_NOTIFICATION_TYPES.has(type)