Merge branch 'themes-3-1' into shigusegubu-themes3

Add a way to upload new packs from URL/ZIP file

See merge request pleroma/pleroma-fe!1999

changelog.d/emoji-upload.-zip.add

@@ -0,0 +1 @@
+Added a way to upload new packs from a URL or ZIP file via the admin-fe

changelog.d/weight-loss.change

@@ -0,0 +1 @@
+Reduced time taken processing theme by half

package.json

@@ -17,7 +17,7 @@
     "lint-fix": "eslint --fix src test/unit/specs test/e2e/specs"
   },
   "dependencies": {
-    "@babel/runtime": "7.27.1",
+    "@babel/runtime": "7.28.2",
     "@chenfengyuan/vue-qrcode": "2.0.0",
     "@fortawesome/fontawesome-svg-core": "6.7.2",
     "@fortawesome/free-regular-svg-icons": "6.7.2",
@@ -54,10 +54,10 @@
     "vuex": "4.1.0"
   },
   "devDependencies": {
-    "@babel/core": "7.27.1",
+    "@babel/core": "7.28.0",
-    "@babel/eslint-parser": "7.27.1",
+    "@babel/eslint-parser": "7.28.0",
-    "@babel/plugin-transform-runtime": "7.27.1",
+    "@babel/plugin-transform-runtime": "7.28.0",
-    "@babel/preset-env": "7.27.2",
+    "@babel/preset-env": "7.28.0",
     "@babel/register": "7.27.1",
     "@ungap/event-target": "0.2.4",
     "@vitejs/plugin-vue": "^5.2.1",
@@ -70,13 +70,13 @@
     "@vue/test-utils": "2.4.6",
     "autoprefixer": "10.4.21",
     "babel-plugin-lodash": "3.3.4",
-    "chai": "5.2.0",
+    "chai": "5.2.1",
     "chalk": "5.4.1",
     "chromedriver": "135.0.4",
     "connect-history-api-fallback": "2.0.0",
     "cross-spawn": "7.0.6",
     "custom-event-polyfill": "1.0.7",
-    "eslint": "9.26.0",
+    "eslint": "9.33.0",
     "vue-eslint-parser": "10.1.3",
     "eslint-config-standard": "17.1.0",
     "eslint-formatter-friendly": "7.0.0",
@@ -91,9 +91,9 @@
     "iso-639-1": "3.1.5",
     "lodash": "4.17.21",
     "msw": "2.10.2",
-    "nightwatch": "3.12.1",
+    "nightwatch": "3.12.2",
     "playwright": "1.52.0",
-    "postcss": "8.5.3",
+    "postcss": "8.5.6",
     "postcss-html": "^1.5.0",
     "postcss-scss": "^4.0.6",
     "sass": "1.89.2",

src/components/attachment/attachment.style.js

@@ -1,27 +0,0 @@
-export default {
-  name: 'Attachment',
-  selector: '.Attachment',
-  notEditable: true,
-  validInnerComponents: [
-    'Border',
-    'Button',
-    'Input'
-  ],
-  defaultRules: [
-    {
-      directives: {
-        roundness: 3
-      }
-    },
-    {
-      component: 'Button',
-      parent: {
-        component: 'Attachment'
-      },
-      directives: {
-        background: '#FFFFFF',
-        opacity: 0.5
-      }
-    }
-  ]
-}

src/components/chat_message/chat_message.style.js

@@ -8,9 +8,6 @@ export default {
     'Text',
     'Icon',
     'Border',
-    'Button',
-    'RichContent',
-    'Attachment',
     'PollGraph'
   ],
   defaultRules: [

src/components/list/list_item.style.js

@@ -1,48 +0,0 @@
-export default {
-  name: 'ListItem',
-  selector: '.list-item',
-  states: {
-    active: '.-active',
-    hover: ':is(:hover, :focus-visible, :has(:focus-visible)):not(.-non-interactive)'
-  },
-  validInnerComponents: [
-    'Text',
-    'Link',
-    'Icon',
-    'Border',
-    'Button',
-    'ButtonUnstyled',
-    'RichContent',
-    'Input',
-    'Avatar'
-  ],
-  defaultRules: [
-    {
-      directives: {
-        background: '--bg',
-        opacity: 0
-      }
-    },
-    {
-      state: ['active'],
-      directives: {
-        background: '--inheritedBackground, 10',
-        opacity: 1
-      }
-    },
-    {
-      state: ['hover'],
-      directives: {
-        background: '--inheritedBackground, 10',
-        opacity: 1
-      }
-    },
-    {
-      state: ['hover', 'active'],
-      directives: {
-        background: '--inheritedBackground, 20',
-        opacity: 1
-      }
-    }
-  ]
-}

src/components/menu_item.style.js

@@ -4,11 +4,7 @@ export default {
   validInnerComponents: [
     'Text',
     'Icon',
-    'Input',
+    'Border'
-    'Border',
-    'ButtonUnstyled',
-    'Badge',
-    'Avatar'
   ],
   states: {
     hover: ':is(:hover, :focus-visible, :has(:focus-visible)):not(.disabled)',

src/components/mobile_drawer.style.js

@@ -2,18 +2,7 @@ export default {
   name: 'MobileDrawer',
   selector: '.mobile-drawer',
   validInnerComponents: [
-    'Text',
+    'MenuItem'
-    'Link',
-    'Icon',
-    'Border',
-    'Button',
-    'ButtonUnstyled',
-    'Input',
-    'PanelHeader',
-    'MenuItem',
-    'Notification',
-    'Alert',
-    'UserCard'
   ],
   defaultRules: [
     {
@@ -21,21 +10,6 @@ export default {
         background: '--bg',
         backgroundNoCssColor: 'yes'
       }
-    },
-    {
-      component: 'PanelHeader',
-      parent: { component: 'MobileDrawer' },
-      directives: {
-        background: '--fg',
-        shadow: [{
-          x: 0,
-          y: 0,
-          blur: 4,
-          spread: 0,
-          color: '#000000',
-          alpha: 0.6
-        }]
-      }
     }
   ]
 }

src/components/notification/notification.style.js

@@ -6,12 +6,7 @@ export default {
     'Link',
     'Icon',
     'Border',
-    'Button',
-    'ButtonUnstyled',
-    'RichContent',
-    'Input',
     'Avatar',
-    'Attachment',
     'PollGraph'
   ],
   defaultRules: []

src/components/panel.style.js

@@ -6,29 +6,17 @@ export default {
     'Link',
     'Icon',
     'Border',
-    'Button',
-    'ButtonUnstyled',
-    'Input',
     'PanelHeader',
-    'MenuItem',
     'Post',
     'Notification',
-    'Alert',
+    'MenuItem'
-    'UserCard',
-    'Chat',
-    'Attachment',
-    'Tab',
-    'ListItem'
   ],
   validInnerComponentsLite: [
     'Text',
     'Link',
     'Icon',
     'Border',
-    'Button',
+    'PanelHeader'
-    'Input',
-    'PanelHeader',
-    'Alert'
   ],
   defaultRules: [
     {

src/components/panel_header.style.js

@@ -7,9 +7,7 @@ export default {
     'Icon',
     'Button',
     'ButtonUnstyled',
-    'Badge',
+    'Alert'
-    'Alert',
-    'Avatar'
   ],
   defaultRules: [
     {

src/components/popover.style.js

@@ -6,16 +6,7 @@ export default {
     modal: '.modal'
   },
   validInnerComponents: [
-    'Text',
+    'MenuItem'
-    'Link',
-    'Icon',
-    'Border',
-    'Button',
-    'ButtonUnstyled',
-    'Input',
-    'MenuItem',
-    'Post',
-    'UserCard'
   ],
   defaultRules: [
     {

src/components/rich_content/rich_content.scss

@@ -2,6 +2,7 @@
   font-family: var(--font);
 
   &.-faint {
+    color: var(--text);
     /* stylelint-disable declaration-no-important */
     --text: var(--textFaint) !important;
     --link: var(--linkFaint) !important;

src/components/rich_content/rich_content.style.js

@@ -1,20 +0,0 @@
-export default {
-  name: 'RichContent',
-  selector: '.RichContent',
-  notEditable: true,
-  transparent: true,
-  validInnerComponents: [
-    'Text',
-    'FunText',
-    'Link'
-  ],
-  defaultRules: [
-    {
-      directives: {
-        '--font': 'generic | inherit',
-        '--monoFont': 'generic | monospace',
-        textNoCssColor: 'yes'
-      }
-    }
-  ]
-}

src/components/settings_modal/admin_tabs/emoji_tab.js

@@ -32,7 +32,10 @@ const EmojiTab = {
       newPackName: '',
       deleteModalVisible: false,
       remotePackInstance: '',
-      remotePackDownloadAs: ''
+      remotePackDownloadAs: '',
+
+      remotePackURL: '',
+      remotePackFile: null
     }
   },
 
@@ -220,7 +223,7 @@ const EmojiTab = {
         .then(data => data.json())
         .then(resp => {
           if (resp === 'ok') {
-            this.$refs.dlPackPopover.hidePopover()
+            this.$refs.downloadPackPopover.hidePopover()
 
             return this.refreshPackList()
           } else {
@@ -232,6 +235,47 @@ const EmojiTab = {
           this.remotePackDownloadAs = ''
         })
     },
+    downloadRemoteURLPack () {
+      this.$store.state.api.backendInteractor.downloadRemoteEmojiPackZIP({
+        url: this.remotePackURL, packName: this.newPackName
+      })
+        .then(data => data.json())
+        .then(resp => {
+          if (resp === 'ok') {
+            this.$refs.additionalRemotePopover.hidePopover()
+
+            return this.refreshPackList()
+          } else {
+            this.displayError(resp.error)
+            return Promise.reject(resp)
+          }
+        }).then(() => {
+          this.packName = this.newPackName
+          this.newPackName = ''
+          this.remotePackURL = ''
+        })
+    },
+    downloadRemoteFilePack () {
+      this.$store.state.api.backendInteractor.downloadRemoteEmojiPackZIP({
+        file: this.remotePackFile[0], packName: this.newPackName
+      })
+        .then(data => data.json())
+        .then(resp => {
+          if (resp === 'ok') {
+            this.$refs.additionalRemotePopover.hidePopover()
+
+            return this.refreshPackList()
+          } else {
+            this.displayError(resp.error)
+            return Promise.reject(resp)
+          }
+        }).then(() => {
+          this.packName = this.newPackName
+          this.newPackName = ''
+          this.remotePackURL = ''
+        })
+    },
+
     displayError (msg) {
       useInterfaceStore().pushGlobalNotice({
         messageKey: 'admin_dash.emoji.error',

src/components/settings_modal/admin_tabs/emoji_tab.vue

@@ -62,6 +62,64 @@
               </template>
             </Popover>
           </button>
+          <button
+            class="button button-default emoji-panel-additional-actions"
+            @click="$refs.additionalRemotePopover.showPopover"
+          >
+            <FAIcon
+              icon="chevron-down"
+            />
+
+            <Popover
+              ref="additionalRemotePopover"
+              popover-class="emoji-tab-edit-popover popover-default"
+              trigger="click"
+              placement="bottom"
+              bound-to-selector=".emoji-tab"
+              :bound-to="{ x: 'container' }"
+              :offset="{ y: 5 }"
+            >
+              <template #content>
+                <div class="emoji-tab-popover-input">
+                  <h3>{{ $t('admin_dash.emoji.new_pack_name') }}</h3>
+                  <input
+                    v-model="newPackName"
+                    :placeholder="$t('admin_dash.emoji.new_pack_name')"
+                    class="input"
+                  >
+                  <h3>Import pack from URL</h3>
+                  <input
+                    v-model="remotePackURL"
+                    class="input"
+                    placeholder="Pack .zip URL"
+                  >
+                  <button
+                    class="button button-default btn emoji-tab-popover-button"
+                    type="button"
+                    :disabled="newPackName.trim() === '' || remotePackURL.trim() === ''"
+                    @click="downloadRemoteURLPack"
+                  >
+                    Import
+                  </button>
+                  <h3>Import pack from a file</h3>
+                  <input
+                    type="file"
+                    accept="application/zip"
+                    class="emoji-tab-popover-file input"
+                    @change="remotePackFile = $event.target.files"
+                  >
+                  <button
+                    class="button button-default btn emoji-tab-popover-button"
+                    type="button"
+                    :disabled="newPackName.trim() === '' || remotePackFile === null || remotePackFile.length === 0"
+                    @click="downloadRemoteFilePack"
+                  >
+                    Import
+                  </button>
+                </div>
+              </template>
+            </Popover>
+          </button>
         </li>
 
         <h3>{{ $t('admin_dash.emoji.emoji_packs') }}</h3>
@@ -240,12 +298,12 @@
                 v-if="pack.remote !== undefined"
                 class="button button-default btn"
                 type="button"
-                @click="$refs.dlPackPopover.showPopover"
+                @click="$refs.downloadPackPopover.showPopover"
               >
                 {{ $t('admin_dash.emoji.download_pack') }}
 
                 <Popover
-                  ref="dlPackPopover"
+                  ref="downloadPackPopover"
                   trigger="click"
                   placement="bottom"
                   bound-to-selector=".emoji-tab"

src/components/status/post.style.js

@@ -9,23 +9,9 @@ export default {
     'Link',
     'Icon',
     'Border',
-    'Button',
-    'ButtonUnstyled',
-    'RichContent',
-    'Input',
     'Avatar',
-    'Attachment',
     'PollGraph'
   ],
-  validInnerComponentsLite: [
-    'Text',
-    'Link',
-    'Icon',
-    'Border',
-    'ButtonUnstyled',
-    'RichContent',
-    'Avatar'
-  ],
   defaultRules: [
     {
       directives: {

src/components/top_bar.style.js

@@ -5,6 +5,7 @@ export default {
     'Link',
     'Text',
     'Icon',
+    // Optimization: don't put heavy components unless needed
     'Button',
     'ButtonUnstyled',
     'Input',

src/components/user_card/user_card.scss

@@ -111,15 +111,20 @@
     }
   }
 
-  .banner-overlay,
+  .header-overlay {
-  .banner-image {
     position: absolute;
     inset: 0;
     right: -1.2em;
     left: -1.2em;
     top: -1.4em;
-    padding: 0;
     mask: linear-gradient(to top, transparent 0, white 5em) bottom no-repeat;
+  }
+
+  .banner-overlay,
+  .banner-image {
+    position: absolute;
+    inset: 0;
+    padding: 0;
     border-top-left-radius: calc(var(--roundness) - 1px);
     border-top-right-radius: calc(var(--roundness) - 1px);
   }
@@ -136,6 +141,7 @@
 
   .banner-overlay {
     background-color: var(--profileTint);
+    opacity: 0.5;
     pointer-events: none; // let user copy bg url
     z-index: -1;
   }
@@ -423,11 +429,6 @@
 
   --emoji-size: 1.8em;
 
-  img {
-    object-fit: contain;
-    vertical-align: middle;
-  }
-
   .user-profile-field-add,
   .user-profile-field {
     display: flex;

src/components/user_card/user_card.style.js

@@ -2,40 +2,10 @@ export default {
   name: 'UserCard',
   selector: '.user-card',
   notEditable: true,
-  validInnerComponents: [
-    'Text',
-    'Link',
-    'Icon',
-    'Button',
-    'ButtonUnstyled',
-    'Input',
-    'RichContent',
-    'Alert'
-  ],
   defaultRules: [
     {
       directives: {
-        background: '--bg',
+        '--profileTint': 'color | $alpha(--background 1)'
-        opacity: 0,
-        roundness: 3,
-        shadow: [{
-          x: 1,
-          y: 1,
-          blur: 4,
-          spread: 0,
-          color: '#000000',
-          alpha: 0.6
-        }],
-        '--profileTint': 'color | $alpha(--background 0.5)'
-      }
-    },
-    {
-      parent: {
-        component: 'UserCard'
-      },
-      component: 'RichContent',
-      directives: {
-        opacity: 0
       }
     }
   ]

src/components/user_card/user_card.vue

@@ -3,16 +3,18 @@
     <div class="user-card-inner">
       <div class="user-info">
         <div class="user-identity">
-          <div class="banner-image">
+          <div class="header-overlay">
-            <img
+            <div class="banner-image">
-              :src="bannerImgSrc"
+              <img
+                :src="bannerImgSrc"
+                :class="{ 'hide-bio': hideBio }"
+              >
+            </div>
+            <div
+              class="banner-overlay"
               :class="{ 'hide-bio': hideBio }"
-            >
+            />
           </div>
-          <div
-            class="banner-overlay"
-            :class="{ 'hide-bio': hideBio }"
-          />
           <a
             v-if="avatarAction === 'zoom'"
             class="user-info-avatar -link"
@@ -458,7 +460,8 @@
             >
               <template #default="inputProps">
                 <input
-                  v-model="newFields[i].name" :placeholder="$t('settings.profile_fields.name')"
+                  v-model="newFields[i].name"
+                  :placeholder="$t('settings.profile_fields.name')"
                   v-bind="propsToNative(inputProps)"
                   class="input"
                 >

src/services/api/api.service.js

@@ -122,6 +122,7 @@ const PLEROMA_EMOJI_IMPORT_FS_URL = '/api/pleroma/emoji/packs/import'
 const PLEROMA_EMOJI_PACKS_URL = (page, pageSize) => `/api/v1/pleroma/emoji/packs?page=${page}&page_size=${pageSize}`
 const PLEROMA_EMOJI_PACK_URL = (name) => `/api/v1/pleroma/emoji/pack?name=${name}`
 const PLEROMA_EMOJI_PACKS_DL_REMOTE_URL = '/api/v1/pleroma/emoji/packs/download'
+const PLEROMA_EMOJI_PACKS_DL_REMOTE_ZIP_URL = '/api/v1/pleroma/emoji/packs/download_zip'
 const PLEROMA_EMOJI_PACKS_LS_REMOTE_URL =
   (url, page, pageSize) => `/api/v1/pleroma/emoji/packs/remote?url=${url}&page=${page}&page_size=${pageSize}`
 const PLEROMA_EMOJI_UPDATE_FILE_URL = (name) => `/api/v1/pleroma/emoji/packs/files?name=${name}`
@@ -224,6 +225,9 @@ const updateProfile = ({ credentials, params }) => {
         formData.append(name + `[${i}][value]`, param.value)
       })
     } else {
+      if (typeof params[name] === 'object') {
+        console.warning('Object detected in updateProfile API call. This will not work, use updateProfileJSON instead.')
+      }
       formData.append(name, params[name]);
     }
   }
@@ -237,6 +241,17 @@ const updateProfile = ({ credentials, params }) => {
     .then((data) => parseUser(data))
 }
 
+const updateProfileJSON = ({ credentials, params }) => {
+  return promisedRequest({
+    url: MASTODON_PROFILE_UPDATE_URL,
+    credentials,
+    payload: params ,
+    method: 'PATCH'
+  })
+    .then((data) => data.json())
+    .then((data) => parseUser(data))
+}
+
 // Params needed:
 // nickname
 // email
@@ -1932,6 +1947,18 @@ const downloadRemoteEmojiPack = ({ instance, packName, as }) => {
   )
 }
 
+const downloadRemoteEmojiPackZIP = ({ url, packName, file }) => {
+  const data = new FormData()
+  if (file) data.set('file', file)
+  if (url) data.set('url', url)
+  data.set('name', packName)
+
+  return fetch(
+    PLEROMA_EMOJI_PACKS_DL_REMOTE_ZIP_URL,
+    { method: 'POST', body: data }
+  )
+}
+
 const saveEmojiPackMetadata = ({ name, newData }) => {
   return fetch(
     PLEROMA_EMOJI_PACK_URL(name),
@@ -2060,6 +2087,7 @@ const apiService = {
   getCaptcha,
   updateProfileImages,
   updateProfile,
+  updateProfileJSON,
   importMutes,
   importBlocks,
   importFollows,
@@ -2137,6 +2165,7 @@ const apiService = {
   deleteEmojiFile,
   listRemoteEmojiPacks,
   downloadRemoteEmojiPack,
+  downloadRemoteEmojiPackZIP,
   fetchBookmarkFolders,
   createBookmarkFolder,
   updateBookmarkFolder,

src/services/style_setter/style_setter.js

@@ -86,7 +86,7 @@ export const generateTheme = (inputRuleset, callbacks, debug) => {
 
   const themes3 = init({
     inputRuleset,
-    debug
+    debug: true
   })
 
   getCssRules(themes3.eager, debug).forEach(rule => {

src/services/theme_data/theme2_to_theme3.js

@@ -244,9 +244,6 @@ export const convertTheme2To3 = (data) => {
         case 'tooltip':
           rule.component = 'Popover'
           break
-        case 'attachment':
-          rule.component = 'Attachment'
-          break
         case 'ChatMessage':
           rule.component = 'Button'
           break

src/services/theme_data/theme_data_3.service.js

@@ -33,7 +33,6 @@ const components = {
   Icon: null,
   Border: null,
   PanelHeader: null,
-  Attachment: null,
   Panel: null,
   Chat: null,
   ChatMessage: null,

src/stores/serverSideStorage.js

@@ -508,7 +508,7 @@ export const useServerSideStorageStore = defineStore('serverSideStorage', {
       this.updateCache({ username: window.vuex.state.users.currentUser.fqn })
       const params = { pleroma_settings_store: { 'pleroma-fe': this.cache } }
       window.vuex.state.api.backendInteractor
-        .updateProfile({ params })
+        .updateProfileJSON({ params })
         .then((user) => {
           this.setServerSideStorage(user)
           this.dirty = false