Merge branch 'fixes-roundup4' into 'develop'

Fixes roundup 4

See merge request pleroma/pleroma-fe!2040

build/dev-server.js

@@ -53,7 +53,8 @@ Object.keys(proxyTable).forEach(function (context) {
   if (typeof options === 'string') {
     options = { target: options }
   }
-  app.use(proxyMiddleware.createProxyMiddleware(context, options))
+  options.pathFilter = context
+  app.use(proxyMiddleware.createProxyMiddleware(options))
 })
 
 // handle fallback for HTML5 history API

package.json

@@ -36,7 +36,6 @@
     "hash-sum": "^2.0.0",
     "js-cookie": "3.0.5",
     "localforage": "1.10.0",
-    "pako": "^2.1.0",
     "parse-link-header": "2.0.0",
     "phoenix": "1.7.19",
     "pinia": "^2.0.33",

src/App.scss

@@ -1,6 +1,6 @@
 // stylelint-disable rscss/class-format
 /* stylelint-disable no-descending-specificity */
-@import "./panel";
+@use "panel";
 
 :root {
   --status-margin: 0.75em;
@@ -762,12 +762,6 @@ option {
     margin-left: 0.7em;
     margin-top: -1em;
   }
-
-  &.-neutral {
-    background-color: var(--badgeNeutral);
-    color: white;
-    color: var(--badgeNeutralText, white);
-  }
 }
 
 .alert {
@@ -1100,3 +1094,8 @@ option {
     }
   }
 }
+
+@property --shadow {
+  syntax: "*";
+  inherits: false;
+}

src/components/attachment/attachment.style.js

@@ -4,7 +4,7 @@ export default {
   notEditable: true,
   validInnerComponents: [
     'Border',
-    'ButtonUnstyled',
+    'Button',
     'Input'
   ],
   defaultRules: [
@@ -14,7 +14,7 @@ export default {
       }
     },
     {
-      component: 'ButtonUnstyled',
+      component: 'Button',
       parent: { component: 'Attachment' },
       directives: {
         background: '#FFFFFF',

src/components/attachment/attachment.vue

@@ -1,7 +1,7 @@
 <template>
   <button
     v-if="usePlaceholder"
-    class="Attachment -placeholder button-unstyled"
+    class="Attachment -placeholder button-default"
     :class="classNames"
     @click="openModal"
   >
@@ -23,7 +23,7 @@
     >
       <button
         v-if="remove"
-        class="button-unstyled attachment-button"
+        class="button-default attachment-button"
         @click.prevent="onRemove"
       >
         <FAIcon icon="trash-alt" />
@@ -81,7 +81,7 @@
       >
         <button
           v-if="type === 'flash' && flashLoaded"
-          class="button-unstyled attachment-button"
+          class="button-default attachment-button"
           :title="$t('status.attachment_stop_flash')"
           @click.prevent="stopFlash"
         >
@@ -89,7 +89,7 @@
         </button>
         <button
           v-if="attachment.description && size !== 'small' && !edit && type !== 'unknown'"
-          class="button-unstyled attachment-button"
+          class="button-default attachment-button"
           :title="$t('status.show_attachment_description')"
           @click.prevent="toggleDescription"
         >
@@ -97,7 +97,7 @@
         </button>
         <button
           v-if="!useModal && type !== 'unknown'"
-          class="button-unstyled attachment-button"
+          class="button-default attachment-button"
           :title="$t('status.show_attachment_in_modal')"
           @click.prevent="openModalForce"
         >
@@ -105,7 +105,7 @@
         </button>
         <button
           v-if="nsfw && hideNsfwLocal"
-          class="button-unstyled attachment-button"
+          class="button-default attachment-button"
           :title="$t('status.hide_attachment')"
           @click.prevent="toggleHidden"
         >
@@ -113,7 +113,7 @@
         </button>
         <button
           v-if="shiftUp"
-          class="button-unstyled attachment-button"
+          class="button-default attachment-button"
           :title="$t('status.move_up')"
           @click.prevent="onShiftUp"
         >
@@ -121,7 +121,7 @@
         </button>
         <button
           v-if="shiftDn"
-          class="button-unstyled attachment-button"
+          class="button-default attachment-button"
           :title="$t('status.move_down')"
           @click.prevent="onShiftDn"
         >
@@ -129,7 +129,7 @@
         </button>
         <button
           v-if="remove"
-          class="button-unstyled attachment-button"
+          class="button-default attachment-button"
           :title="$t('status.remove_attachment')"
           @click.prevent="onRemove"
         >

src/components/button_unstyled.style.js

@@ -2,6 +2,7 @@ export default {
   name: 'ButtonUnstyled',
   selector: '.button-unstyled',
   notEditable: true,
+  transparent: true,
   states: {
     toggled: '.toggled',
     disabled: ':disabled',

src/components/chat/chat.vue

@@ -95,6 +95,4 @@
 </template>
 
 <script src="./chat.js"></script>
-<style lang="scss">
+<style src="./chat.scss" lang="scss" />
-@import "./chat";
-</style>

src/components/chat_list_item/chat_list_item.vue

@@ -47,6 +47,4 @@
 
 <script src="./chat_list_item.js"></script>
 
-<style lang="scss">
+<style src="./chat_list_item.scss" lang="scss" />
-@import "./chat_list_item";
-</style>

src/components/chat_message/chat_message.vue

@@ -98,7 +98,5 @@
 </template>
 
 <script src="./chat_message.js"></script>
-<style lang="scss">
-@import "./chat_message";
 
-</style>
+<style src="./chat_message.scss" lang="scss" />

src/components/chat_new/chat_new.vue

@@ -47,6 +47,5 @@
 </template>
 
 <script src="./chat_new.js"></script>
-<style lang="scss">
+
-@import "./chat_new";
+<style src="./chat_new.scss" lang="scss" />
-</style>

src/components/checkbox/checkbox.vue

@@ -63,8 +63,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../../mixins";
-
 .checkbox {
   position: relative;
   display: inline-block;
@@ -85,6 +83,8 @@ export default {
     width: 1.2em;
     height: 1.2em;
     box-shadow: none;
+
+    --_shadow: var(--shadow);
   }
 
   &-indicator::before {
@@ -96,7 +96,7 @@ export default {
     width: 1.1em;
     height: 1.1em;
     border-radius: var(--roundness);
-    box-shadow: var(--shadow);
+    box-shadow: var(--_shadow);
     background-color: var(--background);
     vertical-align: top;
     text-align: center;

src/components/confirm_modal/confirm_modal.js

@@ -22,6 +22,7 @@ const ConfirmModal = {
       type: String
     }
   },
+  emits: ['cancelled', 'accepted'],
   computed: {
   },
   methods: {

src/components/confirm_modal/confirm_modal.vue

@@ -1,8 +1,8 @@
 <template>
-  <dialog-modal
+  <DialogModal
     v-body-scroll-lock="true"
     class="confirm-modal"
-    :on-cancel="onCancel"
+    @cancel="onCancel"
   >
     <template #header>
       <span v-text="title" />
@@ -23,7 +23,7 @@
         v-text="cancelText"
       />
     </template>
-  </dialog-modal>
+  </DialogModal>
 </template>
 
 <script src="./confirm_modal.js"></script>

src/components/emoji_reactions/emoji_reactions.scss

@@ -0,0 +1,121 @@
+@use "../../mixins";
+
+.EmojiReactions {
+  display: flex;
+  margin-top: 0.25em;
+  flex-wrap: wrap;
+
+  --emoji-size: calc(var(--emojiSize, 1.25em) * var(--emojiReactionsScale, 1));
+
+  .emoji-reaction-container {
+    display: flex;
+    align-items: stretch;
+    margin-top: 0.5em;
+    margin-right: 0.5em;
+
+    .emoji-reaction-popover {
+      padding: 0;
+
+      .emoji-reaction-count-button {
+        margin: 0;
+        height: 100%;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        box-sizing: border-box;
+        min-width: 2em;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+  }
+
+  .emoji-reaction {
+    padding-left: 0.5em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    margin: 0;
+
+    .reaction-emoji {
+      width: var(--emoji-size);
+      height: var(--emoji-size);
+      margin-right: 0.25em;
+      line-height: var(--emoji-size);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      --_still_image-label-scale: 0.3;
+    }
+
+    .reaction-emoji-content {
+      max-width: 100%;
+      max-height: 100%;
+      width: var(--emoji-size);
+      height: var(--emoji-size);
+      line-height: inherit;
+      overflow: hidden;
+      font-size: calc(var(--emoji-size) * 0.8);
+      margin: 0;
+
+      img {
+        object-fit: contain;
+      }
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    .svg-inline--fa {
+      color: var(--text);
+    }
+
+    &.-picked-reaction {
+      .svg-inline--fa {
+        color: var(--accent);
+      }
+    }
+
+    @include mixins.unfocused-style {
+      .focus-marker {
+        visibility: hidden;
+      }
+
+      .active-marker {
+        visibility: visible;
+      }
+    }
+
+    @include mixins.focused-style {
+      .svg-inline--fa {
+        color: var(--accent);
+      }
+
+      .focus-marker {
+        visibility: visible;
+      }
+
+      .active-marker {
+        visibility: hidden;
+      }
+    }
+  }
+
+  .emoji-reaction-expand {
+    padding: 0 0.5em;
+    margin-right: 0.5em;
+    margin-top: 0.5em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}

src/components/emoji_reactions/emoji_reactions.vue

@@ -70,126 +70,5 @@
 </template>
 
 <script src="./emoji_reactions.js"></script>
-<style lang="scss">
-@import "../../mixins";
 
-.EmojiReactions {
+<style src="./emoji_reactions.scss" lang="scss" />
-  display: flex;
-  margin-top: 0.25em;
-  flex-wrap: wrap;
-
-  --emoji-size: calc(var(--emojiSize, 1.25em) * var(--emojiReactionsScale, 1));
-
-  .emoji-reaction-container {
-    display: flex;
-    align-items: stretch;
-    margin-top: 0.5em;
-    margin-right: 0.5em;
-
-    .emoji-reaction-popover {
-      padding: 0;
-
-      .emoji-reaction-count-button {
-        margin: 0;
-        height: 100%;
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-        box-sizing: border-box;
-        min-width: 2em;
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-      }
-    }
-  }
-
-  .emoji-reaction {
-    padding-left: 0.5em;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    margin: 0;
-
-    .reaction-emoji {
-      width: var(--emoji-size);
-      height: var(--emoji-size);
-      margin-right: 0.25em;
-      line-height: var(--emoji-size);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      --_still_image-label-scale: 0.3;
-    }
-
-    .reaction-emoji-content {
-      max-width: 100%;
-      max-height: 100%;
-      width: var(--emoji-size);
-      height: var(--emoji-size);
-      line-height: inherit;
-      overflow: hidden;
-      font-size: calc(var(--emoji-size) * 0.8);
-      margin: 0;
-
-      img {
-        object-fit: contain;
-      }
-    }
-
-    &:focus {
-      outline: none;
-    }
-
-    .svg-inline--fa {
-      color: var(--text);
-    }
-
-    &.-picked-reaction {
-      .svg-inline--fa {
-        color: var(--accent);
-      }
-    }
-
-    @include unfocused-style {
-      .focus-marker {
-        visibility: hidden;
-      }
-
-      .active-marker {
-        visibility: visible;
-      }
-    }
-
-    @include focused-style {
-      .svg-inline--fa {
-        color: var(--accent);
-      }
-
-      .focus-marker {
-        visibility: visible;
-      }
-
-      .active-marker {
-        visibility: hidden;
-      }
-    }
-  }
-
-  .emoji-reaction-expand {
-    padding: 0 0.5em;
-    margin-right: 0.5em;
-    margin-top: 0.5em;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-}
-</style>

src/components/mention_link/mention_link.js

@@ -117,9 +117,6 @@ const MentionLink = {
         this.highlightType
       ]
     },
-    useAtIcon () {
-      return this.mergedConfig.useAtIcon
-    },
     isRemote () {
       return this.userName !== this.userNameFull
     },

src/components/mention_link/mention_link.vue

@@ -34,12 +34,7 @@
             :user="user"
           /><span
             class="shortName"
-          ><FAIcon
+          >@<span
-            v-if="useAtIcon"
-            size="sm"
-            icon="at"
-            class="at"
-          />{{ !useAtIcon ? '@' : '' }}<span
             class="userName"
             v-html="userName"
           /><span

src/components/mobile_post_status_button/mobile_post_status_button.js

@@ -3,7 +3,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faPen
 } from '@fortawesome/free-solid-svg-icons'
-import { usePostStatusStore } from 'src/stores/postStatus'
+import { usePostStatusStore } from 'src/stores/post_status'
 
 library.add(
   faPen

src/components/mrf_transparency_panel/mrf_transparency_panel.vue

@@ -238,6 +238,4 @@
 
 <script src="./mrf_transparency_panel.js"></script>
 
-<style lang="scss">
+<style src="./mrf_transparency_panel.scss" lang="scss"/>
-@import "./mrf_transparency_panel";
-</style>

src/components/popover/popover.scss

@@ -7,7 +7,8 @@
   position: fixed;
   min-width: 0;
   max-width: calc(100vw - 20px);
-  box-shadow: var(--shadow);
+
+  --_shadow: var(--shadow);
 }
 
 .popover-default {
@@ -19,7 +20,7 @@
     left: -1px;
     right: -1px;
     z-index: -1px;
-    box-shadow: var(--shadow);
+    box-shadow: var(--_shadow);
     pointer-events: none;
   }
 
@@ -54,6 +55,7 @@
     grid-template-columns: 1fr;
     grid-auto-flow: column;
     grid-auto-columns: auto;
+    grid-gap: 0.5em;
 
     .popover-wrapper {
       box-sizing: border-box;

src/components/post_status_form/post_status_form.js

@@ -363,6 +363,12 @@ const PostStatusForm = {
       }
     },
     safeToSaveDraft () {
+      console.log('safe', (
+        this.newStatus.status ||
+        this.newStatus.spoilerText ||
+        this.newStatus.files?.length ||
+        this.newStatus.hasPoll
+      ) && this.saveable)
       return (
         this.newStatus.status ||
         this.newStatus.spoilerText ||

src/components/post_status_form/post_status_form.vue

@@ -334,22 +334,26 @@
                 class="dropdown-menu"
                 role="menu"
               >
-                <button
+                <div
-                  v-if="!hideDraft || !disableDraft"
                   class="menu-item dropdown-item"
-                  role="menu"
-                  :disabled="!safeToSaveDraft && saveable"
                   :class="{ disabled: !safeToSaveDraft }"
-                  @click.prevent="saveDraft"
-                  @click="close"
                 >
-                  <template v-if="closeable">
+                  <button
-                    {{ $t('post_status.save_to_drafts_and_close_button') }}
+                    v-if="!hideDraft || !disableDraft"
-                  </template>
+                    class="main-button"
-                  <template v-else>
+                    role="menu"
-                    {{ $t('post_status.save_to_drafts_button') }}
+                    :disabled="!safeToSaveDraft"
-                  </template>
+                    @click.prevent="saveDraft"
-                </button>
+                    @click="close"
+                  >
+                    <template v-if="closeable">
+                      {{ $t('post_status.save_to_drafts_and_close_button') }}
+                    </template>
+                    <template v-else>
+                      {{ $t('post_status.save_to_drafts_button') }}
+                    </template>
+                  </button>
+                </div>
               </div>
             </template>
           </Popover>

src/components/post_status_modal/post_status_modal.js

@@ -1,7 +1,7 @@
 import PostStatusForm from '../post_status_form/post_status_form.vue'
 import Modal from '../modal/modal.vue'
 import get from 'lodash/get'
-import { usePostStatusStore } from 'src/stores/postStatus'
+import { usePostStatusStore } from 'src/stores/post_status'
 
 const PostStatusModal = {
   components: {

src/components/rich_content/rich_content.style.js

@@ -2,6 +2,7 @@ export default {
   name: 'RichContent',
   selector: '.RichContent',
   notEditable: true,
+  transparent: true,
   validInnerComponents: [
     'Text',
     'FunText',

src/components/root.style.js

@@ -2,27 +2,6 @@ export default {
   name: 'Root',
   selector: ':root',
   notEditable: true,
-  validInnerComponents: [
-    // These are purely for --parent--text et such to work
-    'Text',
-    'Link',
-    'Border',
-
-    'Underlay',
-    'Modals',
-    'Popover',
-    'TopBar',
-    'Scrollbar',
-    'ScrollbarElement',
-    'MobileDrawer',
-    'Alert',
-    'Button' // mobile post button
-  ],
-  validInnerComponentsLite: [
-    'Underlay',
-    'Scrollbar',
-    'ScrollbarElement'
-  ],
   defaultRules: [
     {
       directives: {

src/components/settings_modal/settings_modal.js

@@ -7,7 +7,7 @@ import Checkbox from 'src/components/checkbox/checkbox.vue'
 import ConfirmModal from 'src/components/confirm_modal/confirm_modal.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { cloneDeep, isEqual } from 'lodash'
-import { mapState as mapPiniaState } from 'pinia'
+import { mapState, mapActions } from 'pinia'
 import {
   newImporter,
   newExporter
@@ -165,11 +165,12 @@ const SettingsModal = {
     },
     pushAdminDraft () {
       this.$store.dispatch('pushAdminDraft')
-    }
+    },
+    ...mapActions(useInterfaceStore, ['temporaryChangesRevert', 'temporaryChangesConfirm'])
   },
   computed: {
-    ...mapPiniaState(useInterfaceStore, {
+    ...mapState(useInterfaceStore, {
-      temporaryChangesTimeoutId: store => store.layoutType === 'mobile',
+      temporaryChangesTimeoutId: store => store.temporaryChangesTimeoutId,
       currentSaveStateNotice: store => store.settings.currentSaveStateNotice,
       modalActivated: store => store.settingsModalState !== 'hidden',
       modalMode: store => store.settingsModalMode,

src/components/settings_modal/settings_modal.vue

@@ -162,8 +162,8 @@
         :title="$t('settings.confirm_new_setting')"
         :cancel-text="$t('settings.revert')"
         :confirm-text="$t('settings.confirm')"
-        @cancelled="$store.state.interface.temporaryChangesRevert"
+        @cancelled="temporaryChangesRevert"
-        @accepted="$store.state.interface.temporaryChangesConfirm"
+        @accepted="temporaryChangesConfirm"
       >
         {{ $t('settings.confirm_new_question') }}
       </ConfirmModal>

src/components/settings_modal/tabs/general_tab.vue

@@ -269,14 +269,17 @@
             {{ $t('settings.image_compression') }}
           </BooleanSetting>
         </li>
-        <li>
+        <ul class="setting-list suboptions">
-          <BooleanSetting
+          <li>
-            path="alwaysUseJpeg"
+            <BooleanSetting
-            expert="1"
+              path="alwaysUseJpeg"
-          >
+              expert="1"
-            {{ $t('settings.always_use_jpeg') }}
+              parent-path="imageCompression"
-          </BooleanSetting>
+            >
-        </li>
+              {{ $t('settings.always_use_jpeg') }}
+            </BooleanSetting>
+          </li>
+        </ul>
         <li>
           <BooleanSetting
             path="useContainFit"
@@ -362,14 +365,6 @@
             {{ $t('settings.mention_link_use_tooltip') }}
           </BooleanSetting>
         </li>
-        <li>
-          <BooleanSetting
-            path="useAtIcon"
-            expert="1"
-          >
-            {{ $t('settings.use_at_icon') }}
-          </BooleanSetting>
-        </li>
         <li>
           <BooleanSetting path="mentionLinkShowAvatar">
             {{ $t('settings.mention_link_show_avatar') }}

src/components/status_action_buttons/action_button.js

@@ -65,7 +65,7 @@ export default {
     'getClass',
     'getComponent',
     'doAction',
-    'close'
+    'outerClose'
   ],
   components: {
     StatusBookmarkFolderMenu,

src/components/status_action_buttons/action_button.scss

@@ -1,4 +1,4 @@
-@import "../../mixins";
+@use "../../mixins";
 /* stylelint-disable declaration-no-important */
 
 .quick-action {
@@ -52,7 +52,7 @@
     grid-auto-columns: max-content;
     align-items: center;
 
-    @include unfocused-style {
+    @include mixins.unfocused-style {
       .focus-marker {
         visibility: hidden;
       }
@@ -62,7 +62,7 @@
       }
     }
 
-    @include focused-style {
+    @include mixins.focused-style {
       .focus-marker {
         visibility: visible;
       }

src/components/status_action_buttons/action_button.vue

@@ -14,7 +14,7 @@
       :tabindex="0"
       :disabled="buttonClass.disabled"
       :href="getComponent(button) == 'a' ? button.link?.(funcArg) || remoteInteractionLink : undefined"
-      @click="doActionWrap(button, close)"
+      @click="doActionWrap(button, outerClose)"
     >
       <FALayers>
         <FAIcon
@@ -84,10 +84,11 @@
           fixed-width
         />
       </template>
-      <template #content>
+      <template #content="{close}">
         <StatusBookmarkFolderMenu
           v-if="button.name === 'bookmark'"
           :status="status"
+          :close="() => { close(); outerClose() }"
         />
       </template>
     </Popover>

src/components/status_action_buttons/buttons_definitions.js

@@ -1,3 +1,4 @@
+import { useEditStatusStore } from 'src/stores/editStatus.js'
 const PRIVATE_SCOPES = new Set(['private', 'direct'])
 const PUBLIC_SCOPES = new Set(['public', 'unlisted'])
 export const BUTTONS = [{
@@ -111,9 +112,9 @@ export const BUTTONS = [{
   },
   action ({ status, dispatch }) {
     if (status.pinned) {
-      return dispatch('unpinStatus', { id: status.id })
+      return dispatch('unpinStatus', status.id)
     } else {
-      return dispatch('pinStatus', { id: status.id })
+      return dispatch('pinStatus', status.id)
     }
   }
 }, {
@@ -151,7 +152,7 @@ export const BUTTONS = [{
   },
   action ({ dispatch, status }) {
     return dispatch('fetchStatusSource', { id: status.id })
-      .then(data => dispatch('openEditStatusModal', {
+      .then(data => useEditStatusStore().openEditStatusModal({
         statusId: status.id,
         subject: data.spoiler_text,
         statusText: data.text,

src/components/status_action_buttons/status_action_buttons.scss

@@ -1,4 +1,4 @@
-@import "../../mixins";
+@use "../../mixins";
 
 .StatusActionButtons {
   .quick-action-buttons {

src/components/status_action_buttons/status_action_buttons.vue

@@ -86,7 +86,7 @@
                 :func-arg="funcArg"
                 :get-class="getClass"
                 :get-component="getComponent"
-                :close="close"
+                :outerClose="close"
                 :do-action="doAction"
               />
               <button

src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.js

@@ -2,19 +2,22 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import { faChevronRight, faFolder } from '@fortawesome/free-solid-svg-icons'
 import { mapState } from 'vuex'
 
-import Popover from '../popover/popover.vue'
+import Popover from 'src/components/popover/popover.vue'
+import StillImage from 'src/components/still-image/still-image.vue'
 
 library.add(faChevronRight, faFolder)
 
 const StatusBookmarkFolderMenu = {
   props: [
-    'status'
+    'status',
+    'close'
   ],
   data () {
     return {}
   },
   components: {
-    Popover
+    Popover,
+    StillImage
   },
   computed: {
     ...mapState({

src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.scss

@@ -0,0 +1,9 @@
+.bookmark-folder-menu {
+  --__horizontal-gap: 0.5em;
+  --_still-image-label-visibility: hidden;
+
+  .emoji {
+    width: var(--__line-height);
+    height: var(--__line-height);
+  }
+}

src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.vue

@@ -1,22 +1,25 @@
 <template>
-  <div class="dropdown-menu">
+  <div class="dropdown-menu bookmark-folder-menu">
     <div
       v-for="folder in folders"
       :key="folder.id"
-      class="menu-item dropdown-item -icon"
+      class="menu-item dropdown-item -icon-double"
     >
       <button
         class="main-button"
         @click="toggleFolder(folder.id)"
+        @click.stop="close"
       >
         <span
           class="input menu-checkbox -radio"
           :class="{ 'menu-checkbox-checked': status.bookmark_folder_id == folder.id }"
         />
-        {{ folder.name }}
+        <StillImage :src="folder.emoji_url" class="emoji" />
+        {{ ' ' + folder.name }}
       </button>
     </div>
   </div>
 </template>
 
 <script src="./status_bookmark_folder_menu.js"></script>
+<stlye src="./status_bookmark_folder_menu.scss" />

src/components/user_card/user_card.js

@@ -11,7 +11,7 @@ import RichContent from 'src/components/rich_content/rich_content.jsx'
 import MuteConfirm from '../confirm_modal/mute_confirm.vue'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 import { mapGetters } from 'vuex'
-import { usePostStatusStore } from 'src/stores/postStatus'
+import { usePostStatusStore } from 'src/stores/post_status'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faBell,

src/modules/default_config_state.js

@@ -129,7 +129,6 @@ export const defaultState = {
   forcedRoundness: undefined, // instance default
   navbarColumnStretch: false,
   greentext: undefined, // instance default
-  useAtIcon: undefined, // instance default
   mentionLinkDisplay: undefined, // instance default
   mentionLinkShowTooltip: undefined, // instance default
   mentionLinkShowAvatar: undefined, // instance default

src/modules/instance.js

@@ -57,7 +57,6 @@ const defaultState = {
   embeddedToS: true,
   collapseMessageWithSubject: false,
   greentext: false,
-  useAtIcon: false,
   mentionLinkDisplay: 'short',
   mentionLinkShowTooltip: true,
   mentionLinkShowAvatar: false,

src/panel.scss

@@ -2,6 +2,7 @@
 .panel {
   --__panel-background: var(--background);
   --__panel-backdrop-filter: var(--backdrop-filter);
+  --_shadow: var(--shadow);
 
   .tab-switcher .tabs {
     background: var(--__panel-background);
@@ -29,7 +30,7 @@
     left: 0;
     right: 0;
     z-index: 5;
-    box-shadow: var(--shadow);
+    box-shadow: var(--_shadow);
     pointer-events: none;
   }
 }
@@ -154,11 +155,13 @@
     linear-gradient(to bottom, var(--background), var(--background)),
     linear-gradient(to bottom, var(--__panel-background), var(--__panel-background));
 
+  --_shadow: var(--shadow);
+
   &::after {
     background-color: var(--background);
     z-index: -2;
     border-radius: var(--roundness) var(--roundness) 0 0;
-    box-shadow: var(--shadow);
+    box-shadow: var(--_shadow);
   }
 
   &:not(.-flexible-height) {

src/services/style_setter/style_setter.js

@@ -2,11 +2,8 @@ import { init, getEngineChecksum } from '../theme_data/theme_data_3.service.js'
 import { getCssRules } from '../theme_data/css_utils.js'
 import { defaultState } from 'src/modules/default_config_state.js'
 import { chunk } from 'lodash'
-import pako from 'pako'
 import localforage from 'localforage'
 
-console.log('CONFIG', defaultState)
-
 // On platforms where this is not supported, it will return undefined
 // Otherwise it will return an array
 const supportsAdoptedStyleSheets = !!document.adoptedStyleSheets
@@ -93,32 +90,28 @@ export const generateTheme = (inputRuleset, callbacks, debug) => {
 
 export const tryLoadCache = async () => {
   console.info('Trying to load compiled theme data from cache')
-  const data = await localforage.getItem('pleromafe-theme-cache')
+  const cache = await localforage.getItem('pleromafe-theme-cache')
-  if (!data) return null
+  if (!cache) return null
-  let cache
   try {
-    const inflated = pako.inflate(data)
+    if (cache.engineChecksum === getEngineChecksum()) {
-    const decoded = new TextDecoder().decode(inflated)
+      const eagerStyles = createStyleSheet(EAGER_STYLE_ID)
-    cache = JSON.parse(decoded)
+      const lazyStyles = createStyleSheet(LAZY_STYLE_ID)
-    console.info(`Loaded theme from cache, compressed=${Math.ceil(data.length / 1024)}kiB size=${Math.ceil(inflated.length / 1024)}kiB`)
+
+      cache.data[0].forEach(rule => eagerStyles.sheet.insertRule(rule, 'index-max'))
+      cache.data[1].forEach(rule => lazyStyles.sheet.insertRule(rule, 'index-max'))
+
+      adoptStyleSheets([eagerStyles, lazyStyles])
+
+      console.info(`Loaded theme from cache`)
+      return true
+    } else {
+      console.warn('Engine checksum doesn\'t match, cache not usable, clearing')
+      localStorage.removeItem('pleroma-fe-theme-cache')
+    }
   } catch (e) {
-    console.error('Failed to decode theme cache:', e)
+    console.error('Failed to load theme cache:', e)
     return false
   }
-  if (cache.engineChecksum === getEngineChecksum()) {
-    const eagerStyles = createStyleSheet(EAGER_STYLE_ID)
-    const lazyStyles = createStyleSheet(LAZY_STYLE_ID)
-
-    cache.data[0].forEach(rule => eagerStyles.sheet.insertRule(rule, 'index-max'))
-    cache.data[1].forEach(rule => lazyStyles.sheet.insertRule(rule, 'index-max'))
-
-    adoptStyleSheets([eagerStyles, lazyStyles])
-
-    return true
-  } else {
-    console.warn('Engine checksum doesn\'t match, cache not usable, clearing')
-    localStorage.removeItem('pleroma-fe-theme-cache')
-  }
 }
 
 export const applyTheme = (
@@ -157,15 +150,14 @@ export const applyTheme = (
       onEagerFinished () {
         adoptStyleSheets([eagerStyles])
         onEagerFinish()
+        console.info('Eager part of theme finished, waiting for lazy part to finish to store cache')
       },
       onLazyFinished () {
         adoptStyleSheets([eagerStyles, lazyStyles])
         const cache = { engineChecksum: getEngineChecksum(), data: [eagerStyles.rules, lazyStyles.rules] }
         onFinish(cache)
-        const compress = (js) => {
+        localforage.setItem('pleromafe-theme-cache', cache)
-          return pako.deflate(JSON.stringify(js))
+        console.info('Theme cache stored')
-        }
-        localforage.setItem('pleromafe-theme-cache', compress(cache))
       }
     },
     debug
@@ -214,7 +206,6 @@ const extractStyleConfig = ({
   return result
 }
 
-console.log(defaultState)
 const defaultStyleConfig = extractStyleConfig(defaultState)
 
 export const applyConfig = (input) => {

src/services/theme_data/pleromafe.t3.js

@@ -1,2 +0,0 @@
-export const sampleRules = [
-]

src/services/theme_data/theme_data_3.service.js

@@ -32,9 +32,12 @@ const components = {
   Link: null,
   Icon: null,
   Border: null,
+  PanelHeader: null,
+  Attachment: null,
   Panel: null,
   Chat: null,
-  ChatMessage: null
+  ChatMessage: null,
+  Button: null
 }
 
 export const findShadow = (shadows, { dynamicVars, staticVars }) => {
@@ -152,6 +155,25 @@ componentsContext.keys().forEach(key => {
   components[component.name] = component
 })
 
+Object.keys(components).forEach(key => {
+  if (key === 'Root') return
+  components.Root.validInnerComponents = components.Root.validInnerComponents || []
+  components.Root.validInnerComponents.push(key)
+})
+
+Object.keys(components).forEach(key => {
+  const component = components[key]
+  const { validInnerComponents = [] } = component
+  validInnerComponents.forEach(inner => {
+    const child = components[inner]
+    component.possibleChildren = component.possibleChildren || []
+    component.possibleChildren.push(child)
+    child.possibleParents = child.possibleParents || []
+    child.possibleParents.push(component)
+  })
+})
+
+
 const engineChecksum = sum(components)
 
 const ruleToSelector = genericRuleToSelector(components)
@@ -244,7 +266,21 @@ export const init = ({
   }
 
   const virtualComponents = new Set(Object.values(components).filter(c => c.virtual).map(c => c.name))
+  const transparentComponents = new Set(Object.values(components).filter(c => c.transparent).map(c => c.name))
   const nonEditableComponents = new Set(Object.values(components).filter(c => c.notEditable).map(c => c.name))
+  const extraCompileComponents = new Set([])
+
+  Object.values(components).forEach(component => {
+    const relevantRules = ruleset.filter(r => r.component === component.name)
+    const backgrounds = relevantRules.map(r => r.directives.background).filter(x => x)
+    const opacities = relevantRules.map(r => r.directives.opacity).filter(x => x)
+    if (
+      backgrounds.some(x => x.match(/--parent/)) ||
+        opacities.some(x => x != null && x < 1))
+    {
+      extraCompileComponents.add(component.name)
+    }
+  })
 
   const processCombination = (combination) => {
     try {
@@ -473,11 +509,21 @@ export const init = ({
     let validInnerComponents
     if (editMode) {
       const temp = (component.validInnerComponentsLite || component.validInnerComponents || [])
-      validInnerComponents = temp.filter(c => virtualComponents.has(c) && !nonEditableComponents.has(c))
+      validInnerComponents = temp
+        .filter(c => virtualComponents.has(c) && !nonEditableComponents.has(c))
     } else if (liteMode) {
       validInnerComponents = (component.validInnerComponentsLite || component.validInnerComponents || [])
-    } else {
+    } else if (component.name === 'Root') {
       validInnerComponents = component.validInnerComponents || []
+    } else {
+      validInnerComponents = component
+        .validInnerComponents
+          ?.filter(
+            c => virtualComponents.has(c)
+              || transparentComponents.has(c)
+              || extraCompileComponents.has(c)
+          )
+          || []
     }
 
     // Normalizing states and variants to always include "normal"
@@ -491,7 +537,7 @@ export const init = ({
 
     // Optimization: we only really need combinations without "normal" because all states implicitly have it
     const permutationStateKeys = Object.keys(states).filter(s => s !== 'normal')
-    const stateCombinations = onlyNormalState
+    const stateCombinations = (onlyNormalState && !virtualComponents.has(component.name))
       ? [
           ['normal']
         ]
@@ -524,6 +570,16 @@ export const init = ({
         combination.lazy = true
       }
 
+      if (
+        !liteMode &&
+        parent?.component !== 'Root' &&
+          !virtualComponents.has(component.name) &&
+          !transparentComponents.has(component.name) &&
+          extraCompileComponents.has(component.name)
+      ) {
+        combination.lazy = true
+      }
+
       combinations.push(combination)
 
       innerComponents.forEach(innerComponent => {

src/stores/post_status.js

@@ -12,6 +12,9 @@ export const usePostStatusStore = defineStore('postStatus', {
     },
     closePostStatusModal () {
       this.modalActivated = false
+    },
+    resetPostStatusModal () {
+      this.params = null
     }
   }
 })

static/styles/Redmond DX.iss

@@ -167,3 +167,12 @@ Tab:hover:active {
 TopBar Link {
   textColor: #ffffff
 }
+
+MenuItem:hover {
+  background: --fg
+}
+
+Popover {
+  shadow: --buttonDefaultBevel, 5 5 0 0 #000000 / 0.2;
+  roundness: 0
+}

test/unit/specs/services/theme_data/theme_data3.spec.js

@@ -1,4 +1,3 @@
-// import { topoSort } from 'src/services/theme_data/theme_data.service.js'
 import {
   getAllPossibleCombinations
 } from 'src/services/theme_data/iss_utils.js'
@@ -120,6 +119,7 @@ describe('Theme Data 3', () => {
             opacity: 0.5
           }
         }],
+        onlyNormalState: true,
         ultimateBackgroundColor: '#DEADAF'
       })
 
@@ -142,9 +142,9 @@ describe('Theme Data 3', () => {
 
       */
 
-      expect(panelRule).to.have.nested.deep.property('dynamicVars.stacked.r').that.is.closeTo(88.8, 0.01)
+      expect(panelRule).to.have.nested.deep.property('dynamicVars.stacked.r').that.is.closeTo(111, 0.01)
-      expect(panelRule).to.have.nested.deep.property('dynamicVars.stacked.g').that.is.closeTo(133.2, 0.01)
+      expect(panelRule).to.have.nested.deep.property('dynamicVars.stacked.g').that.is.closeTo(150.5, 0.01)
-      expect(panelRule).to.have.nested.deep.property('dynamicVars.stacked.b').that.is.closeTo(134, 0.01)
+      expect(panelRule).to.have.nested.deep.property('dynamicVars.stacked.b').that.is.closeTo(151.5, 0.01)
     })
   })
 })

yarn.lock

@@ -6614,11 +6614,6 @@ package-json-from-dist@^1.0.0:
   resolved "https://registry.yarnpkg.com/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz#4f1471a010827a86f94cfd9b0727e36d267de505"
   integrity sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==
 
-pako@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/pako/-/pako-2.1.0.tgz#266cc37f98c7d883545d11335c00fbd4062c9a86"
-  integrity sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==
-
 pako@~1.0.2:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"