Merge branch 'akkoma-support-part-2' into shigusegubu-themes3

changelog.d/action-button-extra-counter.add

@@ -0,0 +1 @@
+Display counter for status action buttons when they are on the menu

changelog.d/bookmark-button-align.fix

@@ -0,0 +1 @@
+Fix bookmark button alignment in the extra actions menu

src/components/popover/popover.scss

@@ -60,11 +60,14 @@
     }
 
     .extra-button {
-      border-left: 1px solid var(--icon);
+      border-left: 1px solid;
+      border-image-source: linear-gradient(to bottom, transparent 0%, var(--icon) var(--__horizontal-gap) calc(100% - var(--__horizontal-gap)), transparent 100%);
+      border-image-slice: 1;
       padding-left: calc(var(--__horizontal-gap) - 1px);
-      border-right: var(--__horizontal-gap) solid transparent;
-      border-top: var(--__horizontal-gap) solid transparent;
-      border-bottom: var(--__horizontal-gap) solid transparent;
+      padding-right: var(--__horizontal-gap);
+      padding-top: var(--__horizontal-gap);
+      padding-bottom: var(--__horizontal-gap);
+      max-width: fit-content;
     }
 
     .main-button {

src/components/settings_modal/tabs/appearance_tab.js

@@ -12,8 +12,7 @@ import { newImporter } from 'src/services/export_import/export_import.js'
 import { convertTheme2To3 } from 'src/services/theme_data/theme2_to_theme3.js'
 import { init } from 'src/services/theme_data/theme_data_3.service.js'
 import {
-  getCssRules,
-  getScopedVersion
+  getCssRules
 } from 'src/services/theme_data/css_utils.js'
 import { deserialize } from 'src/services/theme_data/iss_deserializer.js'
 
@@ -155,19 +154,23 @@ const AppearanceTab = {
       }))
     })
 
+    this.previewTheme('stock', 'v3')
+
     if (window.IntersectionObserver) {
       this.intersectionObserver = new IntersectionObserver((entries, observer) => {
         entries.forEach(({ target, isIntersecting }) => {
           if (!isIntersecting) return
           const theme = this.availableStyles.find(x => x.key === target.dataset.themeKey)
           this.$nextTick(() => {
-            if (theme) theme.ready = true
+            if (theme) this.previewTheme(theme.key, theme.version, theme.data)
           })
           observer.unobserve(target)
         })
       }, {
         root: this.$refs.themeList
       })
+    } else {
+      this.availableStyles.forEach(theme => this.previewTheme(theme.key, theme.version, theme.data))
     }
   },
   updated () {
@@ -391,7 +394,6 @@ const AppearanceTab = {
             inputRuleset: [...input, paletteRule].filter(x => x),
             ultimateBackgroundColor: '#000000',
             liteMode: true,
-            debug: true,
             onlyNormalState: true
           })
         }
@@ -400,7 +402,6 @@ const AppearanceTab = {
           inputRuleset: [],
           ultimateBackgroundColor: '#000000',
           liteMode: true,
-          debug: true,
           onlyNormalState: true
         })
       }
@@ -409,10 +410,16 @@ const AppearanceTab = {
         this.compilationCache[key] = theme3
       }
 
-      return getScopedVersion(
-        getCssRules(theme3.eager),
-        '#theme-preview-' + key
-      ).join('\n')
+      const styleEl = document.getElementById('theme-holder')
+      const styleSheet = styleEl.sheet
+      styleSheet.insertRule([
+        '#theme-preview-',
+        key,
+        ' {\n',
+        getCssRules(theme3.eager).join('\n'),
+        '\n}'
+      ].join(''), 'index-max')
+
     }
   }
 }

src/components/settings_modal/tabs/appearance_tab.vue

@@ -16,14 +16,6 @@
           :disabled="switchInProgress"
           @click="resetTheming"
         >
-          <!-- eslint-disable vue/no-v-text-v-html-on-component -->
-          <!-- eslint-disable vue/no-v-html -->
-          <component
-            :is="'style'"
-            v-html="previewTheme('stock', 'v3')"
-          />
-          <!-- eslint-enable vue/no-v-html -->
-          <!-- eslint-enable vue/no-v-text-v-html-on-component -->
           <preview id="theme-preview-stock" />
           <h4 class="theme-name">
             {{ $t('settings.style.stock_theme_used') }}
@@ -61,16 +53,6 @@
           :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 -->
-          <div v-if="style.ready || noIntersectionObserver">
-            <component
-              :is="'style'"
-              v-html="previewTheme(style.key, style.version, style.data)"
-            />
-          </div>
-          <!-- eslint-enable vue/no-v-html -->
-          <!-- eslint-enable vue/no-v-text-v-html-on-component -->
           <preview :id="'theme-preview-' + style.key" />
           <h4 class="theme-name">
             {{ style.name }}

src/components/status_action_buttons/action_button.scss

@@ -102,4 +102,20 @@
       }
     }
   }
+
+  &.-extra {
+    .action-counter {
+      justify-self: end;
+      margin-right: 1em;
+    }
+
+    .chevron-icon {
+      justify-self: end;
+    }
+
+    .extra-button {
+      justify-self: end;
+      justify-content: end;
+    }
+  }
 }

src/components/status_action_buttons/action_button.vue

@@ -60,7 +60,7 @@
       />
     </component>
     <span
-      v-if="!extra && button.counter?.(funcArg) > 0"
+      v-if="button.counter?.(funcArg) > 0"
       class="action-counter"
     >
       {{ button.counter?.(funcArg) }}

src/modules/statuses.js

@@ -110,17 +110,17 @@ const sortTimeline = (timeline) => {
 }
 
 const getLatestScrobble = (state, user) => {
-  const scrobbles = state.pleromaScrobblesAvailable
-  if (!scrobbles) return
+  const scrobblesSupport = state.pleromaScrobblesAvailable
+  if (!scrobblesSupport) return
 
   if (state.scrobblesNextFetch[user.id] && state.scrobblesNextFetch[user.id] > Date.now()) {
     return
   }
 
   state.scrobblesNextFetch[user.id] = Date.now() + 24 * 60 * 60 * 1000
-  if (!scrobbles) return
+  if (!scrobblesSupport) return
   apiService.fetchScrobbles({ accountId: user.id }).then((scrobbles) => {
-    if (scrobbles?.error?.status === 501) {
+    if (scrobbles?.error) {
       state.pleromaScrobblesAvailable = false
       return
     }

src/services/notifications_fetcher/notifications_fetcher.service.js

@@ -14,7 +14,6 @@ const mastoApiNotificationTypes = [
   'move',
   'poll',
   'pleroma:emoji_reaction',
-  'pleroma:chat_mention',
   'pleroma:report'
 ]
 
@@ -29,6 +28,10 @@ const fetchAndUpdate = ({ store, credentials, older = false, since }) => {
   const timelineData = rootState.notifications
   const hideMutedPosts = getters.mergedConfig.hideMutedPosts
 
+  if (store.rootState.instance.pleromaChatMessagesAvailable) {
+    mastoApiNotificationTypes.push('pleroma:chat_mention')
+  }
+
   args.includeTypes = mastoApiNotificationTypes
   args.withMuted = !hideMutedPosts
 

src/services/sw/sw.js

@@ -18,6 +18,7 @@ function isPushSupported () {
 }
 
 function getOrCreateServiceWorker () {
+  if (!isSWSupported()) return
   const swType = process.env.HAS_MODULE_SERVICE_WORKER ? 'module' : 'classic'
   return navigator.serviceWorker.register('/sw-pleroma.js', { type: swType })
     .catch((err) => console.error('Unable to get or create a service worker.', err))