Merge branch 'customizable-post-actions' into shigusegubu-themes3

Update dependency eslint-config-standard to v17.1.0

See merge request pleroma/pleroma-fe!1994

.gitlab-ci.yml

@@ -1,7 +1,7 @@
 # This file is a template, and might need editing before it works on your project.
 # Official framework image. Look for the different tagged releases at:
 # https://hub.docker.com/r/library/node/tags/
-image: node:16
+image: node:18
 
 stages:
   - check-changelog

package.json

@@ -18,10 +18,10 @@
   "dependencies": {
     "@babel/runtime": "7.26.0",
     "@chenfengyuan/vue-qrcode": "2.0.0",
-    "@fortawesome/fontawesome-svg-core": "6.4.0",
-    "@fortawesome/free-regular-svg-icons": "6.4.0",
-    "@fortawesome/free-solid-svg-icons": "6.4.0",
-    "@fortawesome/vue-fontawesome": "3.0.3",
+    "@fortawesome/fontawesome-svg-core": "6.7.2",
+    "@fortawesome/free-regular-svg-icons": "6.7.2",
+    "@fortawesome/free-solid-svg-icons": "6.7.2",
+    "@fortawesome/vue-fontawesome": "3.0.8",
     "@kazvmoe-infra/pinch-zoom-element": "1.2.0",
     "@kazvmoe-infra/unicode-emoji-json": "0.4.0",
     "@ruffle-rs/ruffle": "0.1.0-nightly.2025.1.13",
@@ -74,9 +74,9 @@
     "css-minimizer-webpack-plugin": "4.2.2",
     "custom-event-polyfill": "1.0.7",
     "eslint": "8.57.1",
-    "eslint-config-standard": "17.0.0",
+    "eslint-config-standard": "17.1.0",
     "eslint-formatter-friendly": "7.0.0",
-    "eslint-plugin-import": "2.27.5",
+    "eslint-plugin-import": "2.31.0",
     "eslint-plugin-n": "15.6.1",
     "eslint-plugin-promise": "6.1.1",
     "eslint-plugin-vue": "9.9.0",
@@ -96,7 +96,7 @@
     "karma-sinon-chai": "2.0.2",
     "karma-sourcemap-loader": "0.3.8",
     "karma-spec-reporter": "0.0.36",
-    "karma-webpack": "5.0.0",
+    "karma-webpack": "5.0.1",
     "lodash": "4.17.21",
     "mini-css-extract-plugin": "2.7.6",
     "mocha": "10.2.0",

src/components/confirm_modal/mute_confirm.vue

@@ -18,7 +18,10 @@
         <span v-text="user.screen_name_ui" />
       </template>
     </i18n-t>
-    <div class="mute-expiry" v-if="type !== 'domain'">
+    <div
+      v-if="type !== 'domain'"
+      class="mute-expiry"
+    >
       <p>
         <label>
           {{ $t('user_card.mute_duration_prompt') }}
@@ -39,7 +42,7 @@
             v-for="unit in muteExpiryUnits"
             :key="unit"
             :value="unit"
-            >
+          >
             {{ $t(`time.unit.${unit}_short`, ['']) }}
           </option>
         </Select>

src/components/draft/draft.vue

@@ -34,7 +34,10 @@
             </i>
           </p>
           <p v-if="draft.status">{{ draft.status }}</p>
-          <p v-else class="faint">{{ $t('drafts.empty') }}</p>
+          <p
+            v-else
+            class="faint"
+          >{{ $t('drafts.empty') }}</p>
         </span>
         <gallery
           v-if="draft.files?.length !== 0"

src/components/font_control/font_control.vue

@@ -10,8 +10,8 @@
     {{ ' ' }}
     <Checkbox
       v-if="typeof fallback !== 'undefined'"
-      class="font-checkbox"
       :id="name + '-o'"
+      class="font-checkbox"
       :model-value="present"
       @change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
     >

src/components/media_upload/media_upload.js

@@ -80,7 +80,7 @@ const mediaUpload = {
 
           canvas.toBlob((blob) => {
             resolve(new File([blob], newFileName, {
-              type: type,
+              type,
               lastModified: Date.now()
             }))
           }, type, 0.85)

src/components/moderation_tools/moderation_tools.vue

@@ -64,11 +64,11 @@
               <button
                 class="main-button"
                 @click="toggleTag(tags.FORCE_NSFW)"
-                >
+              >
                 <span
                   class="input menu-checkbox"
                   :class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_NSFW) }"
-                  />
+                />
                 {{ $t('user_card.admin_menu.force_nsfw') }}
               </button>
             </div>

src/components/palette_editor/palette_editor.vue

@@ -29,9 +29,9 @@
     <button
       v-if="apply"
       class="btn button-default palette-apply-button"
-      @click="applyPalette"
       :disabled="disabled"
       :class="{ disabled }"
+      @click="applyPalette"
     >
       {{ $t('settings.style.themes3.palette.apply') }}
     </button>

src/components/post_status_form/post_status_form.vue

@@ -335,8 +335,8 @@
                 role="menu"
               >
                 <button
-                  class="menu-item dropdown-item"
                   v-if="!hideDraft || !disableDraft"
+                  class="menu-item dropdown-item"
                   role="menu"
                   :disabled="!safeToSaveDraft && saveable"
                   :class="{ disabled: !safeToSaveDraft }"

src/components/quick_filter_settings/quick_filter_settings.vue

@@ -132,16 +132,22 @@
             role="menuitem"
             @click="openTab('filtering')"
           >
-            <FAIcon fixed-width icon="font" />{{ $t('settings.word_filter_and_more') }}
+            <FAIcon
+              fixed-width
+              icon="font"
+            />{{ $t('settings.word_filter_and_more') }}
           </button>
         </div>
       </div>
     </template>
     <template #trigger>
       <div :class="mobileLayout ? 'main-button' : ''">
-        <FAIcon icon="filter" :fixed-width="nested"/>
+        <FAIcon
+          icon="filter"
+          :fixed-width="nested"
+        />
         <template v-if="nested">
-          {{$t('timeline.filter_settings')}}
+          {{ $t('timeline.filter_settings') }}
         </template>
         <FAIcon
           v-if="nested"

src/components/settings_modal/admin_tabs/frontends_tab.vue

@@ -182,9 +182,9 @@
                   <template #content="{close}">
                     <div class="dropdown-menu">
                       <div
-                        class="menu-item dropdown-item"
                         v-for="ref in frontend.installedRefs || frontend.refs"
                         :key="ref"
+                        class="menu-item dropdown-item"
                       >
                         <button
                           class="main-button"

src/components/settings_modal/tabs/appearance_tab.vue

@@ -12,9 +12,9 @@
         <button
           class="button-default theme-preview"
           data-theme-key="stock"
-          @click="resetTheming"
           :class="{ toggled: isStyleActive('stock'), disabled: switchInProgress }"
           :disabled="switchInProgress"
+          @click="resetTheming"
         >
           <!-- eslint-disable vue/no-v-text-v-html-on-component -->
           <!-- eslint-disable vue/no-v-html -->
@@ -58,8 +58,8 @@
           :data-theme-key="style.key"
           class="button-default theme-preview"
           :class="{ toggled: isThemeActive(style.key), disabled: switchInProgress }"
-          @click="style.version === 'v2' ? setTheme(style.key) : setStyle(style.key)"
           :disabled="switchInProgress"
+          @click="style.version === 'v2' ? setTheme(style.key) : setStyle(style.key)"
         >
           <!-- eslint-disable vue/no-v-text-v-html-on-component -->
           <!-- eslint-disable vue/no-v-html -->
@@ -81,9 +81,9 @@
       <div class="import-file-container">
         <button
           class="btn button-default"
-          @click="importFile"
           :class="{ disabled: switchInProgress }"
           :disabled="switchInProgress"
+          @click="importFile"
         >
           <FAIcon icon="folder-open" />
           {{ $t('settings.style.themes3.editor.load_style') }}
@@ -157,8 +157,8 @@
               class="userPalette"
               :compact="true"
               :apply="true"
-              @applyPalette="data => setPaletteCustom(data)"
               :disabled="switchInProgress"
+              @applyPalette="data => setPaletteCustom(data)"
             />
           </template>
           <template v-else-if="customThemeVersion === 'v2'">

src/components/status/status.vue

@@ -558,12 +558,6 @@
           <div class="deleted-text">
             {{ $t('status.status_deleted') }}
           </div>
-          <reply-button
-            v-if="replying"
-            :replying="replying"
-            :status="status"
-            @toggle="toggleReplying"
-          />
         </div>
       </div>
       <div

src/components/status_action_buttons/action_button.js

@@ -102,6 +102,9 @@ export default {
           disabled: this.button.interactive ? !this.button.interactive(this.funcArg) : false
         }
       ]
+    },
+    remoteInteractionLink () {
+      return this.$store.getters.remoteInteractionLink({ statusId: this.status.id })
     }
   },
   methods: {

src/components/status_action_buttons/action_button.vue

@@ -12,15 +12,15 @@
       target="_blank"
       :tabindex="0"
       :disabled="buttonClass.disabled"
-      :href="getComponent(button) == 'a' ? button.link?.(funcArg) || getRemoteInteractionLink : undefined"
+      :href="getComponent(button) == 'a' ? button.link?.(funcArg) || remoteInteractionLink : undefined"
       @click="doActionWrap(button, close)"
     >
       <FALayers>
         <FAIcon
           class="fa-scale-110"
           :icon="button.icon(funcArg)"
-          :spin="!extra && button.animated?.() && animationState"
-          style="--fa-animation-duration: 750ms;"
+          :spin="!extra && getComponent(button) == 'button' && button.animated?.() && animationState"
+          :style="{ '--fa-animation-duration': '750ms' }"
           fixed-width
         />
         <template v-if="!buttonClass.disabled && button.toggleable?.(funcArg) && button.active">
@@ -67,13 +67,13 @@
     <span
       v-if="!extra && button.name === 'bookmark'"
       class="separator"
-    >
-    </span>
+    />
     <Popover
+      v-if="button.name === 'bookmark'"
       trigger="hover"
       :placement="extra ? 'right' : 'top'"
+      :offset="{ y: 5 }"
       :trigger-attrs="{ class: 'extra-button' }"
-      v-if="button.name === 'bookmark'"
     >
       <template #trigger>
         <FAIcon
@@ -84,13 +84,16 @@
         />
       </template>
       <template #content>
-        <StatusBookmarkFolderMenu v-if="button.name === 'bookmark'" :status="status" />
+        <StatusBookmarkFolderMenu
+          v-if="button.name === 'bookmark'"
+          :status="status"
+        />
       </template>
     </Popover>
 
     <EmojiPicker
-      ref="picker"
       v-if="button.name === 'emoji'"
+      ref="picker"
       :enable-sticker-picker="false"
       :hide-custom-emoji="hideCustomEmoji"
       class="emoji-picker-panel"
@@ -99,6 +102,6 @@
   </div>
 </template>
 
-<script src="./action_button.js"/>
+<script src="./action_button.js" />
 
-<style lang="scss" src="./action_button.scss"/>
+<style lang="scss" src="./action_button.scss" />

src/components/status_action_buttons/action_button_container.vue

@@ -1,9 +1,10 @@
 <template>
   <div>
     <Popover
-      trigger="hover"
-      :placement="$attrs.extra ? 'right' : 'top'"
       v-if="button.dropdown?.()"
+      trigger="hover"
+      :offset="{ y: 5 }"
+      :placement="$attrs.extra ? 'right' : 'top'"
     >
       <template #trigger>
         <ActionButton
@@ -15,8 +16,8 @@
       <template #content>
         <div
           v-if="button.name === 'mute'"
-          class="dropdown-menu"
           :id="`popup-menu-${randomSeed}`"
+          class="dropdown-menu"
           role="menu"
         >
           <div class="menu-item dropdown-item extra-action -icon">
@@ -24,7 +25,10 @@
               class="main-button"
               @click="toggleUserMute"
             >
-              <FAIcon icon="user" fixed-width />
+              <FAIcon
+                icon="user"
+                fixed-width
+              />
               <template v-if="userIsMuted">
                 {{ $t('status.unmute_user') }}
               </template>
@@ -38,7 +42,10 @@
               class="main-button"
               @click="toggleUserMute"
             >
-              <FAIcon icon="folder-tree" fixed-width />
+              <FAIcon
+                icon="folder-tree"
+                fixed-width
+              />
               <template v-if="threadIsMuted">
                 {{ $t('status.unmute_conversation') }}
               </template>
@@ -52,7 +59,10 @@
               class="main-button"
               @click="toggleDomainMute"
             >
-              <FAIcon icon="globe" fixed-width />
+              <FAIcon
+                icon="globe"
+                fixed-width
+              />
               <template v-if="domainIsMuted">
                 {{ $t('status.unmute_domain') }}
               </template>
@@ -72,22 +82,22 @@
     />
     <teleport to="#modal">
       <mute-confirm
-        type="conversation"
-        :status="this.status"
         ref="confirmConversation"
+        type="conversation"
+        :status="status"
       />
       <mute-confirm
-        type="domain"
-        :user="this.user"
         ref="confirmDomain"
+        type="domain"
+        :user="user"
       />
       <mute-confirm
-        type="user"
-        :user="this.user"
         ref="confirmUser"
+        type="user"
+        :user="user"
       />
     </teleport>
   </div>
 </template>
 
-<script src="./action_button_container.js"/>
+<script src="./action_button_container.js" />

src/components/status_action_buttons/status_action_buttons.js

@@ -129,9 +129,6 @@ const StatusActionButtons = {
         '-dropdown': button.dropdown?.(),
         '-active': button.active?.(this.funcArg)
       }
-    },
-    getRemoteInteractionLink () {
-      return this.$store.getters.remoteInteractionLink({ statusId: this.status.id })
     }
   }
 }

src/components/status_action_buttons/status_action_buttons.vue

@@ -2,17 +2,17 @@
   <div class="StatusActionButtons">
     <span class="quick-action-buttons">
       <span
-        class="quick-action"
-        :class="{ '-pin': showPin, '-toggle': button.dropdown?.() }"
         v-for="button in quickButtons"
         :key="button.name"
+        class="quick-action"
+        :class="{ '-pin': showPin, '-toggle': button.dropdown?.() }"
       >
         <ActionButtonContainer
           :class="{ '-pin': showPin }"
           :button="button"
           :status="status"
           :extra="false"
-          :funcArg="funcArg"
+          :func-arg="funcArg"
           :get-class="getClass"
           :get-component="getComponent"
           :close="() => {}"
@@ -55,7 +55,10 @@
             class="dropdown-menu extra-action-buttons"
             role="menu"
           >
-            <div class="menu-item dropdown-item extra-action -icon">
+            <div
+              v-if="currentUser"
+              class="menu-item dropdown-item extra-action -icon"
+            >
               <button
                 class="main-button"
                 role="menuitem"
@@ -80,7 +83,7 @@
                 :button="button"
                 :status="status"
                 :extra="true"
-                :funcArg="funcArg"
+                :func-arg="funcArg"
                 :get-class="getClass"
                 :get-component="getComponent"
                 :close="close"

src/components/timeline/timeline.vue

@@ -76,8 +76,8 @@
         </div>
       </template>
       <QuickFilterSettings
-        class="rightside-button"
         v-if="!mobileLayout"
+        class="rightside-button"
       />
       <QuickViewSettings
         class="rightside-button"

src/components/user_card/user_card.vue

@@ -312,9 +312,9 @@
     </div>
     <teleport to="#modal">
       <mute-confirm
-        type="user"
-        :user="this.user"
         ref="confirmation"
+        type="user"
+        :user="user"
       />
     </teleport>
   </div>

src/components/video_attachment/video_attachment.js

@@ -1,4 +1,3 @@
-
 const VideoAttachment = {
   props: ['attachment', 'controls'],
   data () {

src/services/gesture_service/gesture_service.js

@@ -1,4 +1,3 @@
-
 const DIRECTION_LEFT = [-1, 0]
 const DIRECTION_RIGHT = [1, 0]
 const DIRECTION_UP = [0, -1]

src/services/promise_interval/promise_interval.js

@@ -1,4 +1,3 @@
-
 // promiseInterval - replacement for setInterval for promises, starts counting
 // the interval only after a promise is done instead of immediately.
 // - promiseCall is a function that returns a promise, it's called the first

src/services/window_utils/window_utils.js

@@ -1,4 +1,3 @@
-
 export const windowWidth = () =>
   window.innerWidth ||
   document.documentElement.clientWidth ||