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

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

changelog.d/bookmark-button-align.fix

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

src/components/popover/popover.scss

@@ -60,14 +60,11 @@
     }
 
     .extra-button {
-      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;
+      border-left: 1px solid var(--icon);
       padding-left: calc(var(--__horizontal-gap) - 1px);
-      padding-right: var(--__horizontal-gap);
-      padding-top: var(--__horizontal-gap);
-      padding-bottom: var(--__horizontal-gap);
-      max-width: fit-content;
+      border-right: var(--__horizontal-gap) solid transparent;
+      border-top: var(--__horizontal-gap) solid transparent;
+      border-bottom: var(--__horizontal-gap) solid transparent;
     }
 
     .main-button {

src/components/settings_modal/tabs/appearance_tab.js

@@ -12,7 +12,8 @@ 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
+  getCssRules,
+  getScopedVersion
 } from 'src/services/theme_data/css_utils.js'
 import { deserialize } from 'src/services/theme_data/iss_deserializer.js'
 
@@ -154,23 +155,19 @@ 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) this.previewTheme(theme.key, theme.version, theme.data)
+            if (theme) theme.ready = true
           })
           observer.unobserve(target)
         })
       }, {
         root: this.$refs.themeList
       })
-    } else {
-      this.availableStyles.forEach(theme => this.previewTheme(theme.key, theme.version, theme.data))
     }
   },
   updated () {
@@ -394,6 +391,7 @@ const AppearanceTab = {
             inputRuleset: [...input, paletteRule].filter(x => x),
             ultimateBackgroundColor: '#000000',
             liteMode: true,
+            debug: true,
             onlyNormalState: true
           })
         }
@@ -402,6 +400,7 @@ const AppearanceTab = {
           inputRuleset: [],
           ultimateBackgroundColor: '#000000',
           liteMode: true,
+          debug: true,
           onlyNormalState: true
         })
       }
@@ -410,16 +409,10 @@ const AppearanceTab = {
         this.compilationCache[key] = theme3
       }
 
-      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')
-
+      return getScopedVersion(
+        getCssRules(theme3.eager),
+        '#theme-preview-' + key
+      ).join('\n')
     }
   }
 }

src/components/settings_modal/tabs/appearance_tab.vue

@@ -16,6 +16,14 @@
           :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') }}
@@ -53,6 +61,16 @@
           :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,20 +102,4 @@
       }
     }
   }
-
-  &.-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="button.counter?.(funcArg) > 0"
+      v-if="!extra && 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 scrobblesSupport = state.pleromaScrobblesAvailable
-  if (!scrobblesSupport) return
+  const scrobbles = state.pleromaScrobblesAvailable
+  if (!scrobbles) return
 
   if (state.scrobblesNextFetch[user.id] && state.scrobblesNextFetch[user.id] > Date.now()) {
     return
   }
 
   state.scrobblesNextFetch[user.id] = Date.now() + 24 * 60 * 60 * 1000
-  if (!scrobblesSupport) return
+  if (!scrobbles) return
   apiService.fetchScrobbles({ accountId: user.id }).then((scrobbles) => {
-    if (scrobbles?.error) {
+    if (scrobbles?.error?.status === 501) {
       state.pleromaScrobblesAvailable = false
       return
     }

src/services/notifications_fetcher/notifications_fetcher.service.js

@@ -14,6 +14,7 @@ const mastoApiNotificationTypes = [
   'move',
   'poll',
   'pleroma:emoji_reaction',
+  'pleroma:chat_mention',
   'pleroma:report'
 ]
 
@@ -28,10 +29,6 @@ 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,7 +18,6 @@ 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))