Merge remote-tracking branch 'origin/develop' into akkoma-support-part-2

src/App.scss

@@ -2,6 +2,9 @@
 /* stylelint-disable no-descending-specificity */
 @use "panel";
 
+@import '@fortawesome/fontawesome-svg-core/styles.css';
+@import '@floatingghost/pinch-zoom-element/dist/pinch-zoom.css';
+
 :root {
   --status-margin: 0.75em;
   --post-line-height: 1.4;
@@ -30,6 +33,7 @@ body {
   font-family: sans-serif;
   font-family: var(--font);
   margin: 0;
+  padding: 0;
   color: var(--text);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

src/boot/after_store.js

@@ -6,6 +6,8 @@ import VueVirtualScroller from 'vue-virtual-scroller'
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 
 import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome'
+import { config } from '@fortawesome/fontawesome-svg-core';
+config.autoAddCss = false
 
 import App from '../App.vue'
 import routes from './routes'

src/components/pinch_zoom/pinch_zoom.js

@@ -1,4 +1,4 @@
-import PinchZoom from '@kazvmoe-infra/pinch-zoom-element'
+import PinchZoom from '@floatingghost/pinch-zoom-element'
 
 export default {
   methods: {

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/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/services/style_setter/style_setter.js

@@ -234,20 +234,14 @@ export const applyConfig = (input) => {
     return
   }
 
-  const head = document.head
-
   const rules = Object
     .entries(config)
     .filter(([, v]) => v)
     .map(([k, v]) => `--${k}: ${v}`).join(';')
 
-  document.getElementById('style-config')?.remove()
   const styleEl = document.getElementById('theme-holder')
-  styleEl.id = 'style-config'
-  head.appendChild(styleEl)
   const styleSheet = styleEl.sheet
 
-  styleSheet.toString()
   styleSheet.insertRule(`:root { ${rules} }`, 'index-max')
 
   // TODO find a way to make this not apply to theme previews