From d299e864bf228d6864f9cac263b0c14e75dd6e6d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 29 Jul 2025 17:41:18 +0300
Subject: [PATCH 01/22] what's this doing here, begone

---
 .../notifications_fetcher/notifications_fetcher.service.js     | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/services/notifications_fetcher/notifications_fetcher.service.js b/src/services/notifications_fetcher/notifications_fetcher.service.js
index 89e000dd6..c7eed1858 100644
--- a/src/services/notifications_fetcher/notifications_fetcher.service.js
+++ b/src/services/notifications_fetcher/notifications_fetcher.service.js
@@ -18,8 +18,7 @@ const mastoApiNotificationTypes = new Set([
   'move',
   'poll',
   'pleroma:emoji_reaction',
-  'pleroma:report',
-  'test'
+  'pleroma:report'
 ])
 
 const fetchAndUpdate = ({ store, credentials, older = false, since }) => {

From 68c88677a0f4b0335a3635b85624ce9e79d38a72 Mon Sep 17 00:00:00 2001
From: Ekaterina Vaartis <vaartis@kotobank.ch>
Date: Sat, 2 Aug 2025 00:35:19 +0300
Subject: [PATCH 02/22] Correct the block expiration parameter name

---
 src/services/api/api.service.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 8e4be73eb..975b04c3e 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -323,7 +323,7 @@ const unmuteConversation = ({ id, credentials }) => {
 const blockUser = ({ id, expiresIn, credentials }) => {
   const payload = {}
   if (expiresIn) {
-    payload.expires_in = expiresIn
+    payload.duration = expiresIn
   }
 
   return promisedRequest({

From 3c2c5726612db1859f0ea96d466dc7b48a268ebf Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 3 Aug 2025 17:51:27 +0300
Subject: [PATCH 03/22] lint

---
 .../account_actions/account_actions.vue       |  2 +-
 src/components/user_card/user_card.vue        | 26 ++++++++++++++-----
 src/components/user_note/user_note.vue        |  6 ++---
 3 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index be281c5ae..cc00a735d 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -139,9 +139,9 @@
       </confirm-modal>
       <UserTimedFilterModal
         v-if="blockExpirationSupported"
+        ref="timedBlockDialog"
         :is-mute="false"
         :user="user"
-        ref="timedBlockDialog"
       />
     </teleport>
   </div>
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index c8673ae19..9c62359c9 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -3,7 +3,10 @@
     class="user-card"
     :class="classes"
   >
-    <div :class="onClose ? '' : 'panel-heading -flexible-height'" class="user-card-inner">
+    <div
+      :class="onClose ? '' : 'panel-heading -flexible-height'"
+      class="user-card-inner"
+    >
       <div class="user-info">
         <div class="user-identity">
           <div
@@ -238,7 +241,10 @@
         </div>
       </div>
     </div>
-    <div class="personal-marks" v-if="loggedIn && isOtherUser && (hasNote || !hideBio) && !mergedConfig.userCardHidePersonalMarks">
+    <div
+      v-if="loggedIn && isOtherUser && (hasNote || !hideBio) && !mergedConfig.userCardHidePersonalMarks"
+      class="personal-marks"
+    >
       <UserNote
         v-if="hasNote || (hasNoteEditor && supportsNote)"
         :user="user"
@@ -272,8 +278,8 @@
         <!-- id's need to be unique, otherwise vue confuses which user-card checkbox belongs to -->
         <ColorInput
           v-if="userHighlightType !== 'disabled'"
-          class="highlighter-color"
           v-model="userHighlightColor"
+          class="highlighter-color"
           :show-optional-checkbox="false"
           name="'userHighlightColorTx'+user.id"
           :unstyled="true"
@@ -317,15 +323,18 @@
         </dd>
       </dl>
     </div>
-    <div class="user-extras" v-if="!hideBio">
+    <div
+      v-if="!hideBio"
+      class="user-extras"
+    >
       <span
         v-if="!mergedConfig.hideUserStats"
         class="user-stats"
       >
         <dl
+          v-if="!mergedConfig.hideUserStats && !hideBio"
           class="user-count"
           @click.prevent="setProfileView('statuses')"
-          v-if="!mergedConfig.hideUserStats && !hideBio"
         >
           <dd>{{ user.statuses_count }}</dd>
           {{ ' ' }}
@@ -356,7 +365,10 @@
           <dt>{{ $t('user_card.followers') }}</dt>
         </dl>
       </span>
-      <div class="birthday" v-if="!hideBio && !!user.birthday">
+      <div
+        v-if="!hideBio && !!user.birthday"
+        class="birthday"
+      >
         <FAIcon
           class="fa-old-padding"
           icon="birthday-cake"
@@ -366,9 +378,9 @@
     </div>
     <teleport to="#modal">
       <UserTimedFilterModal
+        ref="timedMuteDialog"
         :user="user"
         :is-mute="true"
-        ref="timedMuteDialog"
       />
     </teleport>
   </div>
diff --git a/src/components/user_note/user_note.vue b/src/components/user_note/user_note.vue
index eca009e7b..8c4ec3662 100644
--- a/src/components/user_note/user_note.vue
+++ b/src/components/user_note/user_note.vue
@@ -8,14 +8,14 @@
       v-model="localNote"
       class="input note-text"
       :class="{ unstyled: !editing }"
-      @focus="startEditing"
-      @blur="finalizeEditing"
       rows="1"
       :placeholder="$t('user_card.note_blank_click')"
+      @focus="startEditing"
+      @blur="finalizeEditing"
     />
     <span
-      class="overlay"
       v-if="frozen"
+      class="overlay"
     >
       <PanelLoading />
     </span>

From 28422adc8c9846ca31e1f85a96963b59615e1752 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 3 Aug 2025 18:01:09 +0300
Subject: [PATCH 04/22] lint

---
 src/components/user_panel/user_panel.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/user_panel/user_panel.vue b/src/components/user_panel/user_panel.vue
index f13fb1216..7ac4d429c 100644
--- a/src/components/user_panel/user_panel.vue
+++ b/src/components/user_panel/user_panel.vue
@@ -29,7 +29,6 @@
   }
 
   .user-info {
-
     .Avatar {
       width: 5em;
       width: calc(min(5em, 20cqw));

From 51eb61180df191798cff395b09fd63bcd5b45b94 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 3 Aug 2025 18:32:18 +0300
Subject: [PATCH 05/22] fix missing computed in general tab

---
 src/components/settings_modal/tabs/general_tab.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index 879dfd1a3..21ccd2393 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -1,3 +1,5 @@
+import { mapState } from 'vuex'
+
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import ChoiceSetting from '../helpers/choice_setting.vue'
 import ScopeSelector from 'src/components/scope_selector/scope_selector.vue'
@@ -97,7 +99,10 @@ const GeneralTab = {
     },
     instanceShoutboxPresent () { return this.$store.state.instance.shoutAvailable },
     instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel },
-    ...SharedComputedObject()
+    ...SharedComputedObject(),
+    ...mapState({
+      blockExpirationSupported: state => state.instance.blockExpiration,
+    })
   },
   methods: {
     changeDefaultScope (value) {

From 2df895ab027f1ae84b5bc090220ea497924a7f3c Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 3 Aug 2025 21:56:45 +0300
Subject: [PATCH 06/22] editable meta and bdey

---
 src/components/emoji_input/emoji_input.vue    |   1 +
 .../settings_modal/tabs/profile_tab.js        |  10 +-
 .../settings_modal/tabs/profile_tab.scss      |   5 -
 .../settings_modal/tabs/profile_tab.vue       |  75 +-----
 src/components/user_card/user_card.js         | 109 ++++++++-
 src/components/user_card/user_card.scss       |  56 ++++-
 src/components/user_card/user_card.vue        | 222 ++++++++++++++----
 src/i18n/en.json                              |   1 +
 src/modules/instance.js                       |   1 +
 9 files changed, 343 insertions(+), 137 deletions(-)

diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index f9788d874..a7e98db95 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -115,6 +115,7 @@
   display: flex;
   flex-direction: column;
   position: relative;
+  display: flex;
 
   .emoji-picker-icon {
     position: absolute;
diff --git a/src/components/settings_modal/tabs/profile_tab.js b/src/components/settings_modal/tabs/profile_tab.js
index a549a8705..7de50dc4c 100644
--- a/src/components/settings_modal/tabs/profile_tab.js
+++ b/src/components/settings_modal/tabs/profile_tab.js
@@ -1,12 +1,12 @@
 import unescape from 'lodash/unescape'
 import merge from 'lodash/merge'
+import UserCard from 'src/components/user_card/user_card.vue'
 import ImageCropper from 'src/components/image_cropper/image_cropper.vue'
 import ScopeSelector from 'src/components/scope_selector/scope_selector.vue'
 import fileSizeFormatService from 'src/components/../services/file_size_format/file_size_format.js'
 import ProgressButton from 'src/components/progress_button/progress_button.vue'
 import EmojiInput from 'src/components/emoji_input/emoji_input.vue'
 import suggestor from 'src/components/emoji_input/suggestor.js'
-import Autosuggest from 'src/components/autosuggest/autosuggest.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
 import Select from 'src/components/select/select.vue'
@@ -53,10 +53,10 @@ const ProfileTab = {
     }
   },
   components: {
+    UserCard,
     ScopeSelector,
     ImageCropper,
     EmojiInput,
-    Autosuggest,
     ProgressButton,
     Checkbox,
     BooleanSetting,
@@ -88,12 +88,6 @@ const ProfileTab = {
     userSuggestor () {
       return suggestor({ store: this.$store })
     },
-    fieldsLimits () {
-      return this.$store.state.instance.fieldsLimits
-    },
-    maxFields () {
-      return this.fieldsLimits ? this.fieldsLimits.maxFields : 0
-    },
     defaultAvatar () {
       return this.$store.state.instance.server + this.$store.state.instance.defaultAvatar
     },
diff --git a/src/components/settings_modal/tabs/profile_tab.scss b/src/components/settings_modal/tabs/profile_tab.scss
index 7eda943b7..2588caf38 100644
--- a/src/components/settings_modal/tabs/profile_tab.scss
+++ b/src/components/settings_modal/tabs/profile_tab.scss
@@ -125,9 +125,4 @@
       padding: 0 0.5em;
     }
   }
-
-  .birthday-input {
-    display: block;
-    margin-bottom: 1em;
-  }
 }
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index 034034a12..4335a678e 100644
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@@ -2,6 +2,12 @@
   <div class="profile-tab">
     <div class="setting-item">
       <h2>{{ $t('settings.name_bio') }}</h2>
+      <UserCard
+        :user-id="user.id"
+        :editable="true"
+        :switcher="false"
+        rounded="top"
+      />
       <p>{{ $t('settings.name') }}</p>
       <EmojiInput
         v-model="newName"
@@ -41,75 +47,6 @@
           </template>
         </Checkbox>
       </p>
-      <div>
-        <p>{{ $t('settings.birthday.label') }}</p>
-        <input
-          id="birthday"
-          v-model="newBirthday"
-          type="date"
-          class="input birthday-input"
-        >
-        <Checkbox v-model="showBirthday">
-          {{ $t('settings.birthday.show_birthday') }}
-        </Checkbox>
-      </div>
-      <div v-if="maxFields > 0">
-        <p>{{ $t('settings.profile_fields.label') }}</p>
-        <div
-          v-for="(_, i) in newFields"
-          :key="i"
-          class="profile-fields"
-        >
-          <EmojiInput
-            v-model="newFields[i].name"
-            enable-emoji-picker
-            hide-emoji-button
-            :suggest="userSuggestor"
-          >
-            <template #default="inputProps">
-              <input
-                v-model="newFields[i].name"
-                :placeholder="$t('settings.profile_fields.name')"
-                v-bind="propsToNative(inputProps)"
-                class="input"
-              >
-            </template>
-          </EmojiInput>
-          <EmojiInput
-            v-model="newFields[i].value"
-            enable-emoji-picker
-            hide-emoji-button
-            :suggest="userSuggestor"
-          >
-            <template #default="inputProps">
-              <input
-                v-model="newFields[i].value"
-                :placeholder="$t('settings.profile_fields.value')"
-                v-bind="propsToNative(inputProps)"
-                class="input"
-              >
-            </template>
-          </EmojiInput>
-          <button
-            class="delete-field button-unstyled -hover-highlight"
-            @click="deleteField(i)"
-          >
-            <!-- TODO something is wrong with v-show here -->
-            <FAIcon
-              v-if="newFields.length > 1"
-              icon="times"
-            />
-          </button>
-        </div>
-        <button
-          v-if="newFields.length < maxFields"
-          class="add-field faint button-unstyled -hover-highlight"
-          @click="addField"
-        >
-          <FAIcon icon="plus" />
-          {{ $t("settings.profile_fields.add_field") }}
-        </button>
-      </div>
       <p>
         <label>
           {{ $t('settings.actor_type') }}
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index bb36c1255..11ffad439 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -1,3 +1,6 @@
+import merge from 'lodash/merge'
+import unescape from 'lodash/unescape'
+
 import ColorInput from 'src/components/color_input/color_input.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
 import RemoteFollow from '../remote_follow/remote_follow.vue'
@@ -10,11 +13,17 @@ import Select from '../select/select.vue'
 import UserLink from '../user_link/user_link.vue'
 import RichContent from 'src/components/rich_content/rich_content.jsx'
 import UserTimedFilterModal from 'src/components/user_timed_filter_modal/user_timed_filter_modal.vue'
+import Checkbox from 'src/components/checkbox/checkbox.vue'
+import EmojiInput from 'src/components/emoji_input/emoji_input.vue'
+
 import localeService from 'src/services/locale/locale.service.js'
+import suggestor from 'src/components/emoji_input/suggestor.js'
 
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 import { mapGetters } from 'vuex'
 import { usePostStatusStore } from 'src/stores/post_status'
+import { propsToNative } from 'src/services/attributes_helper/attributes_helper.service.js'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faBell,
@@ -24,13 +33,15 @@ import {
   faEdit,
   faTimes,
   faExpandAlt,
-  faBirthdayCake
+  faBirthdayCake,
+  faSave
 } from '@fortawesome/free-solid-svg-icons'
 
 import { useMediaViewerStore } from '../../stores/media_viewer'
 import { useInterfaceStore } from '../../stores/interface'
 
 library.add(
+  faSave,
   faRss,
   faBell,
   faSearchPlus,
@@ -43,6 +54,7 @@ library.add(
 
 export default {
   props: [
+    'editable',
     'userId',
     'switcher',
     'selected',
@@ -55,6 +67,7 @@ export default {
   ],
   components: {
     UserAvatar,
+    Checkbox,
     RemoteFollow,
     ModerationTools,
     AccountActions,
@@ -65,13 +78,27 @@ export default {
     UserLink,
     UserNote,
     UserTimedFilterModal,
-    ColorInput
+    ColorInput,
+    EmojiInput
   },
   data () {
+    const user = this.$store.state.users.currentUser
+
     return {
       followRequestInProgress: false,
       muteExpiryAmount: 0,
-      muteExpiryUnit: 'minutes'
+      muteExpiryUnit: 'minutes',
+
+      // Editable stuff
+      newName: user.name_unescaped,
+      newActorType: user.actor_type,
+      newBio: unescape(user.description),
+      newBirthday: user.birthday,
+      newShowBirthday: user.show_birthday,
+      newFields: user.fields.map(field => ({ name: field.name, value: field.value })),
+      editingFields: false,
+      newLocked: user.locked,
+      newShowRole: user.show_role,
     }
   },
   created () {
@@ -114,6 +141,13 @@ export default {
       const days = Math.ceil((new Date() - new Date(this.user.created_at)) / (60 * 60 * 24 * 1000))
       return Math.round(this.user.statuses_count / days)
     },
+    emoji () {
+      return this.$store.state.instance.customEmoji.map(e => ({
+        shortcode: e.displayText,
+        static_url: e.imageUrl,
+        url: e.imageUrl
+      }))
+    },
     userHighlightType: {
       get () {
         const data = this.$store.getters.mergedConfig.highlight[this.user.screen_name]
@@ -184,6 +218,31 @@ export default {
       const browserLocale = localeService.internalToBrowserLocale(this.$i18n.locale)
       return this.user.birthday && new Date(Date.parse(this.user.birthday)).toLocaleDateString(browserLocale, { timeZone: 'UTC', day: 'numeric', month: 'long', year: 'numeric' })
     },
+
+    // Editable stuff
+    fieldsLimits () {
+      return this.$store.state.instance.fieldsLimits
+    },
+    maxFields () {
+      return this.fieldsLimits ? this.fieldsLimits.maxFields : 0
+    },
+    emojiUserSuggestor () {
+      return suggestor({
+        emoji: [
+          ...this.$store.getters.standardEmojiList,
+          ...this.$store.state.instance.customEmoji
+        ],
+        store: this.$store
+      })
+    },
+    emojiSuggestor () {
+      return suggestor({
+        emoji: [
+          ...this.$store.getters.standardEmojiList,
+          ...this.$store.state.instance.customEmoji
+        ]
+      })
+    },
     ...mapGetters(['mergedConfig'])
   },
   methods: {
@@ -238,6 +297,48 @@ export default {
         e.preventDefault()
         this.onAvatarClick()
       }
-    }
+    },
+
+    // Editable stuff
+    addField () {
+      if (this.newFields.length < this.maxFields) {
+        this.newFields.push({ name: '', value: '' })
+        return true
+      }
+      return false
+    },
+    deleteField (index) {
+      this.newFields.splice(index, 1)
+    },
+    propsToNative (props) {
+      return propsToNative(props)
+    },
+    updateProfile () {
+      const params = {
+        note: this.newBio,
+        locked: this.newLocked,
+
+        // Backend notation.
+        display_name: this.newName,
+        fields_attributes: this.newFields.filter(el => el != null),
+        actor_type: this.actorType,
+        show_role: this.showRole,
+        birthday: this.newBirthday || '',
+        show_birthday: this.showBirthday
+      }
+
+      if (this.emailLanguage) {
+        params.language = localeService.internalToBackendLocaleMulti(this.emailLanguage)
+      }
+
+      this.$store.state.api.backendInteractor
+        .updateProfile({ params })
+        .then((user) => {
+          this.newFields.splice(user.fields.length)
+          merge(this.newFields, user.fields)
+          this.$store.commit('addNewUsers', [user])
+          this.$store.commit('setCurrentUser', user)
+        })
+    },
   }
 }
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index 53f885446..f06ac4c55 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -2,6 +2,17 @@
   position: relative;
   z-index: 1;
 
+  // editing headers
+  h4 {
+    line-height: 2;
+    display: flex;
+    padding: 0 1.0em;
+
+    span {
+      flex: 1;
+    }
+  }
+
   .user-card-inner {
     padding-bottom: 0;
   }
@@ -179,6 +190,10 @@
       padding: 0.6em;
       margin: -0.6em;
 
+      &.save-profile-button {
+        width: auto;
+      }
+
       &:hover .icon {
         color: var(--textFaint);
       }
@@ -400,37 +415,64 @@
 .user-profile-fields {
   margin: 0 0.5em;
 
+  --emoji-size: 1.8em;
+
   img {
     object-fit: contain;
     vertical-align: middle;
     max-width: 100%;
     max-height: 400px;
-
-    &.emoji {
-      width: 18px;
-      height: 18px;
-    }
   }
 
+  .user-profile-field-add,
   .user-profile-field {
     display: flex;
+    align-items: baseline;
     margin: 0.25em;
     border: 1px solid var(--border);
     border-radius: var(--roundness);
+    line-height: 2em;
+  }
+
+  .user-profile-field-add {
+    justify-content: center;
+  }
+
+  .user-profile-field {
+    .input {
+      text-align: inherit;
+      flex: 1;
+    }
+
+    .delete-field {
+      display: inline-block;
+      text-align: center;
+      width: 2em;
+    }
 
     .user-profile-field-name,
-    .user-profile-field-value {
+    .user-profile-field-value,
+    .user-profile-field-add {
       text-overflow: ellipsis;
       white-space: nowrap;
       overflow: hidden;
       box-sizing: border-box;
-      line-height: 2em;
+      display: inline-flex;
+
+      &.-edit {
+        padding: 0;
+
+        input {
+          font-weight: inherit;
+        }
+      }
     }
 
     .user-profile-field-name {
       flex: 0 1 50%;
       font-weight: 600;
       text-align: right;
+      justify-content: end;
       color: var(--lightText);
       min-width: 9em;
       border-right: 1px solid var(--border);
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 9c62359c9..5fbfee3c4 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -27,6 +27,19 @@
               />
             </div>
           </a>
+          <button
+            v-else-if="editable"
+            class="user-info-avatar button-unstyled -link"
+            @click="editAvatar"
+          >
+            <UserAvatar :user="user" />
+            <div class="user-info-avatar -link -overlay">
+              <FAIcon
+                class="fa-scale-110 fa-old-padding"
+                icon="pencil"
+              />
+            </div>
+          </button>
           <UserAvatar
             v-else-if="typeof avatarAction === 'function'"
             class="user-info-avatar"
@@ -42,9 +55,25 @@
           </router-link>
           <div class="user-summary">
             <div class="top-line">
-              <div class="other-actions">
+              <div
+                class="other-actions"
+              >
                 <button
-                  v-if="!isOtherUser && user.is_local"
+                  v-if="editable"
+                  :disabled="newName && newName.length === 0"
+                  class="btn button-unstyled save-profile-button"
+                  @click="updateProfile"
+                >
+                  {{ $t('settings.save') }}
+                  <FAIcon
+                    fixed-width
+                    class="icon"
+                    icon="save"
+                    :title="$t('user_card.edit_profile')"
+                  />
+                </button>
+                <button
+                  v-else-if="!editable && !isOtherUser && user.is_local"
                   class="button-unstyled edit-profile-button"
                   @click.stop="openProfileTab"
                 >
@@ -100,7 +129,7 @@
                 <RichContent
                   :title="user.name"
                   :html="user.name"
-                  :emoji="user.emoji"
+                  :emoji="editable ? emoji : user.emoji"
                 />
               </router-link>
             </div>
@@ -166,7 +195,7 @@
           </div>
         </div>
         <div
-          v-if="loggedIn && isOtherUser"
+          v-if="!editable && loggedIn && isOtherUser"
           class="user-interactions"
         >
           <div class="btn-group">
@@ -242,7 +271,7 @@
       </div>
     </div>
     <div
-      v-if="loggedIn && isOtherUser && (hasNote || !hideBio) && !mergedConfig.userCardHidePersonalMarks"
+      v-if="!editable && loggedIn && isOtherUser && (hasNote || !hideBio) && !mergedConfig.userCardHidePersonalMarks"
       class="personal-marks"
     >
       <UserNote
@@ -291,44 +320,127 @@
       class="user-card-bio"
       :class="{ '-justify-left': mergedConfig.userCardLeftJustify }"
       :html="user.description_html"
-      :emoji="user.emoji"
+      :emoji="editable ? emoji : user.emoji"
       :handle-links="true"
     />
-    <div
-      v-if="!hideBio && user.fields_html && user.fields_html.length > 0"
-      class="user-profile-fields"
-    >
-      <dl
-        v-for="(field, index) in user.fields_html"
-        :key="index"
-        class="user-profile-field"
+    <h4 v-if="editable">
+      <span>
+        {{ $t('settings.profile_fields.label') }}
+      </span>
+      <button
+        class="button-default"
+        @click="editingFields = !editingFields"
       >
-        <dt
-          :title="user.fields_text[index].name"
-          class="user-profile-field-name"
+        {{ $t('settings.toggle_edit') }}
+      </button>
+    </h4>
+    <template v-if="!editable || !editingFields">
+      <div
+        v-if="!hideBio && user.fields_html && user.fields_html.length > 0"
+        class="user-profile-fields"
+      >
+        <dl
+          v-for="(field, index) in newFields"
+          :key="index"
+          class="user-profile-field"
         >
-          <RichContent
-            :html="field.name"
-            :emoji="user.emoji"
-          />
-        </dt>
-        <dd
-          :title="user.fields_text[index].value"
-          class="user-profile-field-value"
+          <dt
+            :title="field.name"
+            class="user-profile-field-name"
+          >
+            <RichContent
+              :html="field.name"
+              :emoji="editable ? emoji : user.emoji"
+            />
+          </dt>
+          <dd
+            :title="field.value"
+            class="user-profile-field-value"
+          >
+            <RichContent
+              :html="field.value"
+              :emoji="editable ? emoji : user.emoji"
+            />
+          </dd>
+        </dl>
+      </div>
+    </template>
+    <template v-else-if="editingFields">
+      <div
+        v-if="maxFields > 0"
+        class="user-profile-fields"
+      >
+        <dl
+          v-for="(_, i) in newFields"
+          :key="i"
+          class="user-profile-field"
         >
-          <RichContent
-            :html="field.value"
-            :emoji="user.emoji"
-          />
-        </dd>
-      </dl>
-    </div>
+          <dt
+            class="user-profile-field-name -edit"
+          >
+            <EmojiInput
+              v-model="newFields[i].name"
+              enable-emoji-picker
+              :suggest="emojiSuggestor"
+            >
+              <template #default="inputProps">
+                <input
+                  v-model="newFields[i].name"
+                  :placeholder="$t('settings.profile_fields.name')"
+                  v-bind="propsToNative(inputProps)"
+                  class="input"
+                >
+              </template>
+            </EmojiInput>
+          </dt>
+          <dd
+            class="user-profile-field-value -edit"
+          >
+            <EmojiInput
+              v-model="newFields[i].value"
+              enable-emoji-picker
+              :suggest="emojiSuggestor"
+            >
+              <template #default="inputProps">
+                <input
+                  v-model="newFields[i].value"
+                  :placeholder="$t('settings.profile_fields.value')"
+                  v-bind="propsToNative(inputProps)"
+                  class="input input"
+                >
+              </template>
+            </EmojiInput>
+            <button
+              class="delete-field button-unstyled -hover-highlight"
+              @click="deleteField(i)"
+            >
+              <!-- TODO something is wrong with v-show here -->
+              <FAIcon
+                v-if="newFields.length > 1"
+                icon="times"
+              />
+            </button>
+          </dd>
+        </dl>
+        <p class="user-profile-field-add">
+          <button
+            v-if="newFields.length < maxFields"
+            class="add-field faint button-unstyled -hover-highlight"
+            @click="addField"
+          >
+            <FAIcon icon="plus" />
+            {{ ' ' }}
+            {{ $t("settings.profile_fields.add_field") }}
+          </button>
+        </p>
+      </div>
+    </template>
     <div
-      v-if="!hideBio"
       class="user-extras"
+      v-if="!hideBio"
     >
       <span
-        v-if="!mergedConfig.hideUserStats"
+        v-if="!editable && !mergedConfig.hideUserStats"
         class="user-stats"
       >
         <dl
@@ -365,16 +477,38 @@
           <dt>{{ $t('user_card.followers') }}</dt>
         </dl>
       </span>
-      <div
-        v-if="!hideBio && !!user.birthday"
-        class="birthday"
-      >
-        <FAIcon
-          class="fa-old-padding"
-          icon="birthday-cake"
-        />
-        {{ $t('user_card.birthday', { birthday: formattedBirthday }) }}
-      </div>
+      <template v-if="!hideBio">
+        <div
+          v-if="user.birthday && !editable"
+          class="birthday"
+        >
+          <FAIcon
+            class="fa-old-padding"
+            icon="birthday-cake"
+          />
+          {{ $t('user_card.birthday', { birthday: formattedBirthday }) }}
+        </div>
+        <div
+          v-else-if="editable"
+          class="birthday"
+        >
+          <FAIcon
+            class="fa-old-padding"
+            icon="birthday-cake"
+          />
+          <input
+            id="birthday"
+            v-model="newBirthday"
+            type="date"
+            class="input birthday-input"
+          >
+          <div>
+            <Checkbox v-model="showBirthday">
+              {{ $t('settings.birthday.show_birthday') }}
+            </Checkbox>
+          </div>
+        </div>
+      </template>
     </div>
     <teleport to="#modal">
       <UserTimedFilterModal
diff --git a/src/i18n/en.json b/src/i18n/en.json
index c83ba46ae..46424bf7d 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -394,6 +394,7 @@
     "expert_mode": "Show advanced",
     "save": "Save changes",
     "security": "Security",
+    "toggle_edit": "Toggle edit",
     "setting_changed": "Setting is different from default",
     "setting_server_side": "This setting is tied to your profile and affects all sessions and clients",
     "enter_current_password_to_confirm": "Enter your current password to confirm your identity",
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 93f81e4d8..ef27353eb 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -139,6 +139,7 @@ const defaultState = {
 
   // Nasty stuff
   customEmoji: [],
+  rawCustomEmoji: [],
   customEmojiFetched: false,
   emoji: {},
   emojiFetched: false,

From 20beb30fc3f94ef19cc45a2b9d23b377be50794f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 3 Aug 2025 23:05:16 +0300
Subject: [PATCH 07/22] bio editable

---
 src/components/emoji_input/emoji_input.js     | 16 +++----
 .../settings_modal/tabs/profile_tab.vue       | 15 ------
 src/components/user_card/user_card.js         |  1 +
 src/components/user_card/user_card.scss       | 10 ++++
 src/components/user_card/user_card.vue        | 47 +++++++++++++++----
 5 files changed, 57 insertions(+), 32 deletions(-)

diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js
index f3b6dfe9b..f6ba6e245 100644
--- a/src/components/emoji_input/emoji_input.js
+++ b/src/components/emoji_input/emoji_input.js
@@ -205,12 +205,6 @@ const EmojiInput = {
         return emoji.displayText
       }
     },
-    onInputScroll () {
-      this.$refs.hiddenOverlay.scrollTo({
-        top: this.input.scrollTop,
-        left: this.input.scrollLeft
-      })
-    },
     suggestionListId () {
       return `suggestions-${this.randomSeed}`
     },
@@ -239,7 +233,6 @@ const EmojiInput = {
     this.overlayStyle.fontSize = style.fontSize
     this.overlayStyle.wordWrap = style.wordWrap
     this.overlayStyle.whiteSpace = style.whiteSpace
-    this.resize()
     input.addEventListener('blur', this.onBlur)
     input.addEventListener('focus', this.onFocus)
     input.addEventListener('paste', this.onPaste)
@@ -302,6 +295,13 @@ const EmojiInput = {
     }
   },
   methods: {
+    onInputScroll (e) {
+      this.$refs.hiddenOverlay.scrollTo({
+        top: this.input.scrollTop,
+        left: this.input.scrollLeft
+      })
+      this.setCaret(e)
+    },
     triggerShowPicker () {
       this.$nextTick(() => {
         this.$refs.picker.showPicker()
@@ -561,8 +561,6 @@ const EmojiInput = {
         this.$refs.suggestorPopover.updateStyles()
       })
     },
-    resize () {
-    },
     autoCompleteItemLabel (suggestion) {
       if (suggestion.user) {
         return suggestion.displayText + ' ' + suggestion.detailText
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index 4335a678e..f25349b24 100644
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="profile-tab">
     <div class="setting-item">
-      <h2>{{ $t('settings.name_bio') }}</h2>
       <UserCard
         :user-id="user.id"
         :editable="true"
@@ -23,20 +22,6 @@
           >
         </template>
       </EmojiInput>
-      <p>{{ $t('settings.bio') }}</p>
-      <EmojiInput
-        v-model="newBio"
-        enable-emoji-picker
-        :suggest="emojiUserSuggestor"
-      >
-        <template #default="inputProps">
-          <textarea
-            v-model="newBio"
-            class="input bio resize-height"
-            v-bind="propsToNative(inputProps)"
-          />
-        </template>
-      </EmojiInput>
       <p v-if="role === 'admin' || role === 'moderator'">
         <Checkbox v-model="showRole">
           <template v-if="role === 'admin'">
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index 11ffad439..f7237a1d8 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -93,6 +93,7 @@ export default {
       newName: user.name_unescaped,
       newActorType: user.actor_type,
       newBio: unescape(user.description),
+      editingBio: false,
       newBirthday: user.birthday,
       newShowBirthday: user.show_birthday,
       newFields: user.fields.map(field => ({ name: field.name, value: field.value })),
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index f06ac4c55..52b5e4fea 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -13,11 +13,21 @@
     }
   }
 
+  .input.bio {
+    height: auto; // override settings default textarea size
+  }
+
   .user-card-inner {
     padding-bottom: 0;
   }
 
   .user-card-bio {
+    margin: 0.6em;
+
+    &, * {
+      line-height: 1.5;
+    }
+
     &.-justify-left {
       text-align: start;
     }
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 5fbfee3c4..498f51c54 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -315,14 +315,45 @@
         />
       </div>
     </div>
-    <RichContent
-      v-if="!hideBio"
-      class="user-card-bio"
-      :class="{ '-justify-left': mergedConfig.userCardLeftJustify }"
-      :html="user.description_html"
-      :emoji="editable ? emoji : user.emoji"
-      :handle-links="true"
-    />
+    <h4 v-if="editable">
+      <span>
+        {{ $t('settings.bio') }}
+      </span>
+      <button
+        class="button-default"
+        @click="editingBio = !editingBio"
+      >
+        {{ $t('settings.toggle_edit') }}
+      </button>
+    </h4>
+    <template v-if="!editable || !editingBio">
+      <RichContent
+        v-if="!hideBio"
+        class="user-card-bio"
+        :class="{ '-justify-left': mergedConfig.userCardLeftJustify }"
+        :html="user.description_html"
+        :emoji="editable ? emoji : user.emoji"
+        :handle-links="true"
+      />
+    </template>
+    <template v-else-if="editingBio">
+      <EmojiInput
+        v-model="newBio"
+        enable-emoji-picker
+        class="user-card-bio"
+        :class="{ '-justify-left': mergedConfig.userCardLeftJustify }"
+        :suggest="emojiUserSuggestor"
+      >
+        <template #default="inputProps">
+          <textarea
+            v-model="newBio"
+            class="input bio resize-height"
+            v-bind="propsToNative(inputProps)"
+            :rows="newBio.split(/\n/g).length"
+          />
+        </template>
+      </EmojiInput>
+    </template>
     <h4 v-if="editable">
       <span>
         {{ $t('settings.profile_fields.label') }}

From 50314fe253f850b7a450adcfc21c2d15babf29bf Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 3 Aug 2025 23:15:35 +0300
Subject: [PATCH 08/22] better fields

---
 src/components/user_card/user_card.scss |  3 +++
 src/components/user_card/user_card.vue  | 22 ++++++++++------------
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index 52b5e4fea..92dbd0315 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -424,6 +424,8 @@
 
 .user-profile-fields {
   margin: 0 0.5em;
+  display: flex;
+  flex-direction: column;
 
   --emoji-size: 1.8em;
 
@@ -446,6 +448,7 @@
 
   .user-profile-field-add {
     justify-content: center;
+    margin: 0.25em;
   }
 
   .user-profile-field {
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 498f51c54..2c0298c97 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -442,7 +442,7 @@
               </template>
             </EmojiInput>
             <button
-              class="delete-field button-unstyled -hover-highlight"
+              class="delete-field button-default -hover-highlight"
               @click="deleteField(i)"
             >
               <!-- TODO something is wrong with v-show here -->
@@ -453,17 +453,15 @@
             </button>
           </dd>
         </dl>
-        <p class="user-profile-field-add">
-          <button
-            v-if="newFields.length < maxFields"
-            class="add-field faint button-unstyled -hover-highlight"
-            @click="addField"
-          >
-            <FAIcon icon="plus" />
-            {{ ' ' }}
-            {{ $t("settings.profile_fields.add_field") }}
-          </button>
-        </p>
+        <button
+          v-if="newFields.length < maxFields"
+          class="user-profile-field-add add-field button-default -hover-highlight"
+          @click="addField"
+        >
+          <FAIcon icon="plus" />
+          {{ ' ' }}
+          {{ $t("settings.profile_fields.add_field") }}
+        </button>
       </div>
     </template>
     <div

From 60363e66fbed265d577f3e9005fa8b9e29df7f39 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 4 Aug 2025 00:14:34 +0300
Subject: [PATCH 09/22] editable name

---
 src/components/emoji_input/emoji_input.vue    | 10 ++--
 .../settings_modal/tabs/profile_tab.vue       | 15 ------
 src/components/user_card/user_card.js         |  1 +
 src/components/user_card/user_card.scss       | 34 +++++++++----
 src/components/user_card/user_card.vue        | 49 +++++++++++++++----
 5 files changed, 70 insertions(+), 39 deletions(-)

diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index a7e98db95..057e6aa5c 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -124,7 +124,7 @@
     margin: 0.2em 0.25em;
     font-size: 1.3em;
     cursor: pointer;
-    line-height: 24px;
+    line-height: 1.2em;
 
     &:hover i {
       color: var(--text);
@@ -134,7 +134,7 @@
   .emoji-picker-panel {
     position: absolute;
     z-index: 20;
-    margin-top: 2px;
+    margin-top: 0.2em;
 
     &.hide {
       display: none;
@@ -153,7 +153,7 @@
   }
 
   &.with-picker input {
-    padding-right: 30px;
+    padding-right: 2em;
   }
 
   .hidden-overlay {
@@ -216,8 +216,8 @@
       }
 
       .detailText {
-        font-size: 9px;
-        line-height: 9px;
+        font-size: 0.6em;
+        line-height: 0.6em;
       }
     }
   }
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index f25349b24..6300746ff 100644
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@@ -7,21 +7,6 @@
         :switcher="false"
         rounded="top"
       />
-      <p>{{ $t('settings.name') }}</p>
-      <EmojiInput
-        v-model="newName"
-        enable-emoji-picker
-        :suggest="emojiSuggestor"
-      >
-        <template #default="inputProps">
-          <input
-            id="username"
-            v-model="newName"
-            class="input name-changer"
-            v-bind="propsToNative(inputProps)"
-          >
-        </template>
-      </EmojiInput>
       <p v-if="role === 'admin' || role === 'moderator'">
         <Checkbox v-model="showRole">
           <template v-if="role === 'admin'">
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index f7237a1d8..148f93985 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -91,6 +91,7 @@ export default {
 
       // Editable stuff
       newName: user.name_unescaped,
+      editingName: true,
       newActorType: user.actor_type,
       newBio: unescape(user.description),
       editingBio: false,
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index 92dbd0315..7e26c005f 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -263,6 +263,31 @@
       --link: var(--text) !important;
     }
 
+    .name-wrapper {
+      display: flex;
+      align-items: baseline;
+
+      .edit-button {
+        width: 3em;
+        text-align: center;
+      }
+
+      .input,
+      .user-name {
+        flex: 1;
+        font-weight: 600;
+        line-height: 2;
+        margin-right: 1em;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+
+      .input {
+        margin: 0 -0.5em;
+        padding: 0 0.5em;
+      }
+    }
+
     .top-line {
       display: flex;
       flex-direction: column;
@@ -271,8 +296,6 @@
       // these two normalize position and height when custom emoji are used
       line-height: 2;
       margin-bottom: -0.2em;
-      font-weight: 600;
-      font-size: 110%;
       font-size: calc(max(110%, 4cqw));
     }
 
@@ -306,13 +329,6 @@
     }
   }
 
-  .user-name {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    margin-right: 1em;
-    font-size: 1.1em;
-  }
-
   .highlighter {
     margin: 5em;
     align-items: baseline;
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 2c0298c97..37b5015f5 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -122,16 +122,45 @@
                   />
                 </button>
               </div>
-              <router-link
-                :to="userProfileLink(user)"
-                class="user-name"
-              >
-                <RichContent
-                  :title="user.name"
-                  :html="user.name"
-                  :emoji="editable ? emoji : user.emoji"
-                />
-              </router-link>
+              <div class="name-wrapper">
+                <router-link
+                  v-if="!editable || !editingName"
+                  :to="userProfileLink(user)"
+                  class="user-name"
+                >
+                  <RichContent
+                    :title="newName"
+                    :html="newName"
+                    :emoji="editable ? emoji : user.emoji"
+                  />
+                </router-link>
+                <EmojiInput
+                  v-else-if="editingName"
+                  v-model="newName"
+                  enable-emoji-picker
+                  :suggest="emojiSuggestor"
+                >
+                  <template #default="inputProps">
+                    <input
+                      id="username"
+                      v-model="newName"
+                      class="input name-changer"
+                      v-bind="propsToNative(inputProps)"
+                    >
+                  </template>
+                </EmojiInput>
+                <button
+                  v-if="editable"
+                  class="button-unstyled edit-button"
+                  @click="editingName = !editingName"
+                  :title="$t('settings.toggle_edit')"
+                >
+                  <FAIcon
+                    class="icon"
+                    icon="pencil"
+                  />
+                </button>
+              </div>
             </div>
             <div class="bottom-line">
               <user-link

From 7d985bd4756836f445da9fe79596ecf6e37f7df3 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 4 Aug 2025 00:45:13 +0300
Subject: [PATCH 10/22] misc

---
 src/components/user_card/user_card.js   |  5 +++--
 src/components/user_card/user_card.scss | 24 +++++++++++++++++++++---
 src/components/user_card/user_card.vue  | 22 +++++++++++++++++++---
 src/i18n/en.json                        |  1 +
 4 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index 148f93985..8c747d026 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -91,12 +91,13 @@ export default {
 
       // Editable stuff
       newName: user.name_unescaped,
-      editingName: true,
+      editingName: false,
       newActorType: user.actor_type,
       newBio: unescape(user.description),
       editingBio: false,
       newBirthday: user.birthday,
       newShowBirthday: user.show_birthday,
+      newCoverPhoto: user.cover_photo,
       newFields: user.fields.map(field => ({ name: field.name, value: field.value })),
       editingFields: false,
       newLocked: user.locked,
@@ -125,7 +126,7 @@ export default {
       return {
         backgroundImage: [
           'linear-gradient(to bottom, var(--profileTint), var(--profileTint))',
-          `url(${this.user.cover_photo})`
+          `url(${this.newCoverPhoto})`
         ].join(', ')
       }
     },
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index 7e26c005f..5c7367607 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -200,7 +200,8 @@
       padding: 0.6em;
       margin: -0.6em;
 
-      &.save-profile-button {
+      &.save-profile-button,
+      &.edit-banner-button {
         width: auto;
       }
 
@@ -224,7 +225,6 @@
       inset: -0.6em;
       left: -0.6em;
       right: -1.2em;
-      background-color: rgb(0 0 0 / 30%);
       display: flex;
       justify-content: center;
       align-items: center;
@@ -234,11 +234,21 @@
 
       svg {
         color: #fff;
+        margin: 0.5em;
       }
     }
 
     &:hover &.-overlay {
       opacity: 1;
+      background-color: rgb(0 0 0 / 30%);
+    }
+  }
+
+  .user-info-avatar.-editable {
+    .-overlay {
+      opacity: 1;
+      place-items: start end;
+      justify-content: end;
     }
   }
 
@@ -455,11 +465,15 @@
   .user-profile-field-add,
   .user-profile-field {
     display: flex;
-    align-items: baseline;
+    align-items: center;
     margin: 0.25em;
     border: 1px solid var(--border);
     border-radius: var(--roundness);
     line-height: 2em;
+
+    .label {
+      margin-left: 0.5em;
+    }
   }
 
   .user-profile-field-add {
@@ -468,10 +482,14 @@
   }
 
   .user-profile-field {
+
+    /* stylelint-disable no-descending-specificity */
+    // input is a generic class
     .input {
       text-align: inherit;
       flex: 1;
     }
+    /* stylelint-enable no-descending-specificity */
 
     .delete-field {
       display: inline-block;
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 37b5015f5..21f766e26 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -30,6 +30,7 @@
           <button
             v-else-if="editable"
             class="user-info-avatar button-unstyled -link"
+            :class="{ '-editable': editable }"
             @click="editAvatar"
           >
             <UserAvatar :user="user" />
@@ -61,6 +62,20 @@
                 <button
                   v-if="editable"
                   :disabled="newName && newName.length === 0"
+                  class="btn button-unstyled edit-banner-button"
+                  @click="updateProfile"
+                >
+                  {{ $t('settings.change_banner') }}
+                  <FAIcon
+                    fixed-width
+                    class="icon"
+                    icon="pencil"
+                    :title="$t('user_card.change_banner')"
+                  />
+                </button>
+                <button
+                  v-if="editable"
+                  :disabled="somethingToSave"
                   class="btn button-unstyled save-profile-button"
                   @click="updateProfile"
                 >
@@ -487,9 +502,10 @@
           class="user-profile-field-add add-field button-default -hover-highlight"
           @click="addField"
         >
-          <FAIcon icon="plus" />
-          {{ ' ' }}
-          {{ $t("settings.profile_fields.add_field") }}
+          <FAIcon icon="plus" class="icon" />
+          <span class="label">
+            {{ $t("settings.profile_fields.add_field") }}
+          </span>
         </button>
       </div>
     </template>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 46424bf7d..e15735345 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -395,6 +395,7 @@
     "save": "Save changes",
     "security": "Security",
     "toggle_edit": "Toggle edit",
+    "change_banner": "Change banner",
     "setting_changed": "Setting is different from default",
     "setting_server_side": "This setting is tied to your profile and affects all sessions and clients",
     "enter_current_password_to_confirm": "Enter your current password to confirm your identity",

From b305748a920c1c0c0d262743a4a718b8348d3f05 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 4 Aug 2025 03:35:09 +0300
Subject: [PATCH 11/22] avatar upload works

---
 src/App.scss                                  |   6 --
 src/components/image_cropper/image_cropper.js |  43 +-------
 .../image_cropper/image_cropper.vue           |  47 ++------
 .../settings_modal/tabs/profile_tab.js        | 101 ------------------
 .../settings_modal/tabs/profile_tab.scss      |   4 -
 .../settings_modal/tabs/profile_tab.vue       |   1 +
 src/components/user_card/user_card.js         |  85 ++++++++++++++-
 src/components/user_card/user_card.scss       |  73 ++++++++++---
 src/components/user_card/user_card.vue        |  83 +++++++++++++-
 src/i18n/en.json                              |   3 +
 10 files changed, 239 insertions(+), 207 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 64c8b8b82..51f2c9af3 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -782,12 +782,6 @@ option {
   color: var(--text);
 }
 
-.visibility-notice {
-  padding: 0.5em;
-  border: 1px solid var(--textFaint);
-  border-radius: var(--roundness);
-}
-
 .notice-dismissible {
   padding-right: 4rem;
   position: relative;
diff --git a/src/components/image_cropper/image_cropper.js b/src/components/image_cropper/image_cropper.js
index 3cb4f6fd1..6d961e563 100644
--- a/src/components/image_cropper/image_cropper.js
+++ b/src/components/image_cropper/image_cropper.js
@@ -10,14 +10,6 @@ library.add(
 
 const ImageCropper = {
   props: {
-    trigger: {
-      type: [String, window.Element],
-      required: true
-    },
-    submitHandler: {
-      type: Function,
-      required: true
-    },
     mimes: {
       type: String,
       default: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon'
@@ -39,17 +31,7 @@ const ImageCropper = {
       submitting: false
     }
   },
-  computed: {
-    saveText () {
-      return this.saveButtonLabel || this.$t('image_cropper.save')
-    },
-    saveWithoutCroppingText () {
-      return this.saveWithoutCroppingButtonlabel || this.$t('image_cropper.save_without_cropping')
-    },
-    cancelText () {
-      return this.cancelButtonLabel || this.$t('image_cropper.cancel')
-    }
-  },
+  emits: ['submit'],
   methods: {
     destroy () {
       this.$refs.input.value = ''
@@ -65,20 +47,15 @@ const ImageCropper = {
       } else {
         cropperPromise = Promise.resolve()
       }
+
       cropperPromise.then(canvas => {
-        this.submitHandler(canvas, this.file)
-            .then(() => this.destroy())
-            .finally(() => {
-              this.submitting = false
-            })
+        this.$emit('submit', { canvas, file: this.file })
+        this.submitting = false
       })
     },
     pickImage () {
       this.$refs.input.click()
     },
-    getTriggerDOM () {
-      return typeof this.trigger === 'object' ? this.trigger : document.querySelector(this.trigger)
-    },
     readFile () {
       const fileInput = this.$refs.input
       if (fileInput.files != null && fileInput.files[0] != null) {
@@ -117,23 +94,11 @@ const ImageCropper = {
     }
   },
   mounted () {
-    // listen for click event on trigger
-    const trigger = this.getTriggerDOM()
-    if (!trigger) {
-      this.$emit('error', 'No image make trigger found.', 'user')
-    } else {
-      trigger.addEventListener('click', this.pickImage)
-    }
     // listen for input file changes
     const fileInput = this.$refs.input
     fileInput.addEventListener('change', this.readFile)
   },
   beforeUnmount: function () {
-    // remove the event listeners
-    const trigger = this.getTriggerDOM()
-    if (trigger) {
-      trigger.removeEventListener('click', this.pickImage)
-    }
     const fileInput = this.$refs.input
     fileInput.removeEventListener('change', this.readFile)
   }
diff --git a/src/components/image_cropper/image_cropper.vue b/src/components/image_cropper/image_cropper.vue
index 0122d1216..4ef077ef6 100644
--- a/src/components/image_cropper/image_cropper.vue
+++ b/src/components/image_cropper/image_cropper.vue
@@ -1,13 +1,14 @@
 <template>
   <div class="image-cropper">
-    <div v-if="dataUrl">
+    <div class="image">
       <cropper-canvas
         ref="cropperCanvas"
         background
         class="image-cropper-canvas"
-        height="25em"
+        height="100%"
       >
         <cropper-image
+          v-if="dataUrl"
           ref="cropperImage"
           :src="dataUrl"
           alt="Picture"
@@ -47,41 +48,13 @@
           <cropper-handle action="sw-resize" />
         </cropper-selection>
       </cropper-canvas>
-      <div class="image-cropper-buttons-wrapper">
-        <button
-          class="button-default btn"
-          type="button"
-          :disabled="submitting"
-          @click="submit()"
-          v-text="saveText"
-        />
-        <button
-          class="button-default btn"
-          type="button"
-          :disabled="submitting"
-          @click="destroy"
-          v-text="cancelText"
-        />
-        <button
-          class="button-default btn"
-          type="button"
-          :disabled="submitting"
-          @click="submit(false)"
-          v-text="saveWithoutCroppingText"
-        />
-        <FAIcon
-          v-if="submitting"
-          spin
-          icon="circle-notch"
-        />
-      </div>
     </div>
     <input
       ref="input"
       type="file"
       class="input image-cropper-img-input"
       :accept="mimes"
-    >
+    />
   </div>
 </template>
 
@@ -89,13 +62,15 @@
 
 <style lang="scss">
 .image-cropper {
-  &-img-input {
-    display: none;
+  display: flex;
+  flex-direction: column;
+
+  &-canvas, .image {
+    height: 100%;
   }
 
-  &-canvas {
-    height: 25em;
-    width: 25em;
+  & &-img-input {
+    display: none;
   }
 
   &-buttons-wrapper {
diff --git a/src/components/settings_modal/tabs/profile_tab.js b/src/components/settings_modal/tabs/profile_tab.js
index 7de50dc4c..965765327 100644
--- a/src/components/settings_modal/tabs/profile_tab.js
+++ b/src/components/settings_modal/tabs/profile_tab.js
@@ -42,7 +42,6 @@ const ProfileTab = {
       role: this.$store.state.users.currentUser.role,
       bot: this.$store.state.users.currentUser.bot,
       actorType: this.$store.state.users.currentUser.actor_type,
-      pickAvatarBtnVisible: true,
       bannerUploading: false,
       backgroundUploading: false,
       banner: null,
@@ -88,29 +87,6 @@ const ProfileTab = {
     userSuggestor () {
       return suggestor({ store: this.$store })
     },
-    defaultAvatar () {
-      return this.$store.state.instance.server + this.$store.state.instance.defaultAvatar
-    },
-    defaultBanner () {
-      return this.$store.state.instance.server + this.$store.state.instance.defaultBanner
-    },
-    isDefaultAvatar () {
-      const baseAvatar = this.$store.state.instance.defaultAvatar
-      return !(this.$store.state.users.currentUser.profile_image_url) ||
-      this.$store.state.users.currentUser.profile_image_url.includes(baseAvatar)
-    },
-    isDefaultBanner () {
-      const baseBanner = this.$store.state.instance.defaultBanner
-      return !(this.$store.state.users.currentUser.cover_photo) ||
-      this.$store.state.users.currentUser.cover_photo.includes(baseBanner)
-    },
-    isDefaultBackground () {
-      return !(this.$store.state.users.currentUser.background_image)
-    },
-    avatarImgSrc () {
-      const src = this.$store.state.users.currentUser.profile_image_url_original
-      return (!src) ? this.defaultAvatar : src
-    },
     bannerImgSrc () {
       const src = this.$store.state.users.currentUser.cover_photo
       return (!src) ? this.defaultBanner : src
@@ -153,16 +129,6 @@ const ProfileTab = {
     changeVis (visibility) {
       this.newDefaultScope = visibility
     },
-    addField () {
-      if (this.newFields.length < this.maxFields) {
-        this.newFields.push({ name: '', value: '' })
-        return true
-      }
-      return false
-    },
-    deleteField (index) {
-      this.newFields.splice(index, 1)
-    },
     uploadFile (slot, e) {
       const file = e.target.files[0]
       if (!file) { return }
@@ -192,73 +158,6 @@ const ProfileTab = {
       }
       reader.readAsDataURL(file)
     },
-    resetAvatar () {
-      const confirmed = window.confirm(this.$t('settings.reset_avatar_confirm'))
-      if (confirmed) {
-        this.submitAvatar(undefined, '')
-      }
-    },
-    resetBanner () {
-      const confirmed = window.confirm(this.$t('settings.reset_banner_confirm'))
-      if (confirmed) {
-        this.submitBanner('')
-      }
-    },
-    resetBackground () {
-      const confirmed = window.confirm(this.$t('settings.reset_background_confirm'))
-      if (confirmed) {
-        this.submitBackground('')
-      }
-    },
-    submitAvatar (canvas, file) {
-      const that = this
-      return new Promise((resolve, reject) => {
-        function updateAvatar (avatar, avatarName) {
-          that.$store.state.api.backendInteractor.updateProfileImages({ avatar, avatarName })
-            .then((user) => {
-              that.$store.commit('addNewUsers', [user])
-              that.$store.commit('setCurrentUser', user)
-              resolve()
-            })
-            .catch((error) => {
-              that.displayUploadError(error)
-              reject(error)
-            })
-        }
-
-        if (canvas) {
-          canvas.toBlob((data) => updateAvatar(data, file.name), file.type)
-        } else {
-          updateAvatar(file, file.name)
-        }
-      })
-    },
-    submitBanner (banner) {
-      if (!this.bannerPreview && banner !== '') { return }
-
-      this.bannerUploading = true
-      this.$store.state.api.backendInteractor.updateProfileImages({ banner })
-        .then((user) => {
-          this.$store.commit('addNewUsers', [user])
-          this.$store.commit('setCurrentUser', user)
-          this.bannerPreview = null
-        })
-        .catch(this.displayUploadError)
-        .finally(() => { this.bannerUploading = false })
-    },
-    submitBackground (background) {
-      if (!this.backgroundPreview && background !== '') { return }
-
-      this.backgroundUploading = true
-      this.$store.state.api.backendInteractor.updateProfileImages({ background })
-        .then((data) => {
-          this.$store.commit('addNewUsers', [data])
-          this.$store.commit('setCurrentUser', data)
-          this.backgroundPreview = null
-        })
-        .catch(this.displayUploadError)
-        .finally(() => { this.backgroundUploading = false })
-    },
     displayUploadError (error) {
       useInterfaceStore().pushGlobalNotice({
         messageKey: 'upload.error.message',
diff --git a/src/components/settings_modal/tabs/profile_tab.scss b/src/components/settings_modal/tabs/profile_tab.scss
index 2588caf38..7c30be8d2 100644
--- a/src/components/settings_modal/tabs/profile_tab.scss
+++ b/src/components/settings_modal/tabs/profile_tab.scss
@@ -3,10 +3,6 @@
     margin: 0;
   }
 
-  .visibility-tray {
-    padding-top: 5px;
-  }
-
   input[type="file"] {
     padding: 5px;
     height: auto;
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index 6300746ff..ae896e78d 100644
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@@ -7,6 +7,7 @@
         :switcher="false"
         rounded="top"
       />
+      <p>{{ $t('settings.name') }}</p>
       <p v-if="role === 'admin' || role === 'moderator'">
         <Checkbox v-model="showRole">
           <template v-if="role === 'admin'">
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index 8c747d026..a86298737 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -15,6 +15,8 @@ import RichContent from 'src/components/rich_content/rich_content.jsx'
 import UserTimedFilterModal from 'src/components/user_timed_filter_modal/user_timed_filter_modal.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import EmojiInput from 'src/components/emoji_input/emoji_input.vue'
+import Modal from 'src/components/modal/modal.vue'
+import ImageCropper from 'src/components/image_cropper/image_cropper.vue'
 
 import localeService from 'src/services/locale/locale.service.js'
 import suggestor from 'src/components/emoji_input/suggestor.js'
@@ -34,7 +36,8 @@ import {
   faTimes,
   faExpandAlt,
   faBirthdayCake,
-  faSave
+  faSave,
+  faChevronRight
 } from '@fortawesome/free-solid-svg-icons'
 
 import { useMediaViewerStore } from '../../stores/media_viewer'
@@ -49,7 +52,8 @@ library.add(
   faEdit,
   faTimes,
   faExpandAlt,
-  faBirthdayCake
+  faBirthdayCake,
+  faChevronRight
 )
 
 export default {
@@ -66,6 +70,7 @@ export default {
     'hasNoteEditor'
   ],
   components: {
+    Modal,
     UserAvatar,
     Checkbox,
     RemoteFollow,
@@ -79,7 +84,8 @@ export default {
     UserNote,
     UserTimedFilterModal,
     ColorInput,
-    EmojiInput
+    EmojiInput,
+    ImageCropper
   },
   data () {
     const user = this.$store.state.users.currentUser
@@ -93,6 +99,7 @@ export default {
       newName: user.name_unescaped,
       editingName: false,
       newActorType: user.actor_type,
+      editImage: false,
       newBio: unescape(user.description),
       editingBio: false,
       newBirthday: user.birthday,
@@ -223,6 +230,29 @@ export default {
     },
 
     // Editable stuff
+    defaultAvatar () {
+      return this.$store.state.instance.server + this.$store.state.instance.defaultAvatar
+    },
+    defaultBanner () {
+      return this.$store.state.instance.server + this.$store.state.instance.defaultBanner
+    },
+    isDefaultAvatar () {
+      const baseAvatar = this.$store.state.instance.defaultAvatar
+      return !(this.$store.state.users.currentUser.profile_image_url) ||
+      this.$store.state.users.currentUser.profile_image_url.includes(baseAvatar)
+    },
+    isDefaultBanner () {
+      const baseBanner = this.$store.state.instance.defaultBanner
+      return !(this.$store.state.users.currentUser.cover_photo) ||
+      this.$store.state.users.currentUser.cover_photo.includes(baseBanner)
+    },
+    isDefaultBackground () {
+      return !(this.$store.state.users.currentUser.background_image)
+    },
+    avatarImgSrc () {
+      const src = this.$store.state.users.currentUser.profile_image_url_original
+      return (!src) ? this.defaultAvatar : src
+    },
     fieldsLimits () {
       return this.$store.state.instance.fieldsLimits
     },
@@ -303,6 +333,52 @@ export default {
     },
 
     // Editable stuff
+    changeAvatar () {
+      this.editImage = 'avatar'
+    },
+    changeBanner () {
+      this.editImage = 'banner'
+    },
+    resetAvatar () {
+      const confirmed = window.confirm(this.$t('settings.reset_avatar_confirm'))
+      if (confirmed) {
+        this.submitAvatar(undefined, '')
+      }
+    },
+    resetBanner () {
+      const confirmed = window.confirm(this.$t('settings.reset_banner_confirm'))
+      if (confirmed) {
+        this.submitBanner('')
+      }
+    },
+    resetBackground () {
+      const confirmed = window.confirm(this.$t('settings.reset_background_confirm'))
+      if (confirmed) {
+        this.submitBackground('')
+      }
+    },
+    submitImage ({ canvas, file }) {
+      const reqData = {}
+      if (this.editImage === 'avatar') {
+        if (canvas) {
+          return canvas.toBlob((data) => this.submitImage({ canvas: null, file: data }))
+        }
+        reqData.avatar = file
+        reqData.avatarName = file.name
+      } else {
+        reqData.banner = file
+      }
+
+      return this.$store.state.api.backendInteractor.updateProfileImages(reqData)
+        .then((user) => {
+          this.$store.commit('addNewUsers', [user])
+          this.$store.commit('setCurrentUser', user)
+          this.editImage = false
+        })
+        .catch((error) => {
+          this.displayUploadError(error)
+        })
+    },
     addField () {
       if (this.newFields.length < this.maxFields) {
         this.newFields.push({ name: '', value: '' })
@@ -316,6 +392,9 @@ export default {
     propsToNative (props) {
       return propsToNative(props)
     },
+    cancelImageText () {
+      return
+    },
     updateProfile () {
       const params = {
         note: this.newBio,
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index 5c7367607..d4537a07d 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -21,6 +21,22 @@
     padding-bottom: 0;
   }
 
+  &-bio {
+    text-align: center;
+    color: var(--lightText);
+    display: block;
+    line-height: 1.3;
+    padding: 0.6em;
+    margin: 0 0.6em;
+
+    img {
+      object-fit: contain;
+      vertical-align: middle;
+      max-width: 100%;
+      max-height: 400px;
+    }
+  }
+
   .user-card-bio {
     margin: 0.6em;
 
@@ -101,22 +117,6 @@
     z-index: -2;
   }
 
-  &-bio {
-    text-align: center;
-    color: var(--lightText);
-    display: block;
-    line-height: 1.3;
-    padding: 0.6em;
-    margin: 0 0.6em;
-
-    img {
-      object-fit: contain;
-      vertical-align: middle;
-      max-width: 100%;
-      max-height: 400px;
-    }
-  }
-
   &.-rounded-t {
     border-top-left-radius: var(--roundness);
     border-top-right-radius: var(--roundness);
@@ -535,3 +535,44 @@
     }
   }
 }
+
+.edit-image {
+  .panel-body {
+    text-align: center;
+  }
+
+  .current-avatar {
+    object-fit: contain;
+  }
+
+  .images-container {
+    display: grid;
+    margin: 1em;
+    grid-template-columns: 1fr 5em 1fr;
+    grid-template-rows: 20em;
+    gap: 0.5em;
+
+    .new-image {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .cropper {
+      flex: 1;
+    }
+
+    > * {
+      flex: 1 0 10em;
+      max-height: 100%;
+      aspect-ratio: 1;
+    }
+
+    .separator {
+      min-width: 1.1em;
+      font-size: 500%;
+      align-self: center;
+      flex: 0 1 5em;
+      aspect-ratio: unset;
+    }
+  }
+}
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 21f766e26..d74754d9a 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -31,7 +31,7 @@
             v-else-if="editable"
             class="user-info-avatar button-unstyled -link"
             :class="{ '-editable': editable }"
-            @click="editAvatar"
+            @click="changeAvatar"
           >
             <UserAvatar :user="user" />
             <div class="user-info-avatar -link -overlay">
@@ -63,7 +63,7 @@
                   v-if="editable"
                   :disabled="newName && newName.length === 0"
                   class="btn button-unstyled edit-banner-button"
-                  @click="updateProfile"
+                  @click="changeBanner"
                 >
                   {{ $t('settings.change_banner') }}
                   <FAIcon
@@ -591,6 +591,85 @@
         :is-mute="true"
       />
     </teleport>
+    <teleport to="#modal">
+      <Modal
+        v-if="editImage"
+        :is-mute="true"
+        class="edit-image"
+        @backdrop-clicked="editImage = false"
+      >
+        <div class="panel">
+          <div class="panel-heading">
+            <h1 class="title">
+              {{ editImage === 'avatar' ? $t('settings.change_avatar') : $t('settings.change_banner') }}
+            </h1>
+          </div>
+          <div class="panel-body">
+            <div class="images-container">
+              <img
+                :src="editImage === 'avatar' ? user.profile_image_url_original : newBanner"
+                class="current-avatar"
+              />
+              <FAIcon
+                class="separator"
+                icon="chevron-right"
+              />
+              <image-cropper
+                ref="cropper"
+                class="cropper"
+                @submit="submitImage"
+              />
+            </div>
+            <button
+              id="pick-image"
+              class="button-default btn"
+              type="button"
+              @click="() => this.$refs.cropper.pickImage()"
+            >
+              {{ $t('settings.upload_picture') }}
+            </button>
+            <p class="visibility-notice">
+              {{ $t('settings.avatar_size_instruction') }}
+            </p>
+            <button
+              :title="editImage === 'avatar' ? $t('settings.reset_avatar') : $t('settings.reset_banner')"
+              class="button-unstyled reset-button"
+              @click="resetImage"
+            >
+            </button>
+            <div class="panel-footer">
+              <div/>
+              <button
+                class="button-default btn"
+                type="button"
+                @click="destroy"
+              >
+                {{ this.$t('image_cropper.cancel') }}
+              </button>
+              <button
+                class="button-default btn"
+                type="button"
+                @click="this.$refs.cropper.submit(true)"
+              >
+                {{ $t('image_cropper.save') }}
+              </button>
+              <button
+                class="button-default btn"
+                type="button"
+                @click="this.$refs.cropper.submit(false)"
+              >
+                {{ $t('image_cropper.save_without_cropping') }}
+              </button>
+              <FAIcon
+                v-if="submitting"
+                spin
+                icon="circle-notch"
+              />
+            </div>
+          </div>
+        </div>
+      </Modal>
+    </teleport>
   </div>
 </template>
 
diff --git a/src/i18n/en.json b/src/i18n/en.json
index e15735345..ee5301fb0 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -396,6 +396,7 @@
     "security": "Security",
     "toggle_edit": "Toggle edit",
     "change_banner": "Change banner",
+    "change_avatar": "Change avatar",
     "setting_changed": "Setting is different from default",
     "setting_server_side": "This setting is tied to your profile and affects all sessions and clients",
     "enter_current_password_to_confirm": "Enter your current password to confirm your identity",
@@ -726,6 +727,7 @@
     "set_new_profile_background": "Set new profile background",
     "set_new_profile_banner": "Set new profile banner",
     "reset_avatar": "Reset avatar",
+    "reset_banner": "Reset banner",
     "reset_profile_background": "Reset profile background",
     "reset_profile_banner": "Reset profile banner",
     "reset_avatar_confirm": "Do you really want to reset the avatar?",
@@ -778,6 +780,7 @@
     "tooltipRadius": "Tooltips/alerts",
     "type_domains_to_mute": "Search domains to mute",
     "upload_a_photo": "Upload a photo",
+    "upload_picture": "Upload picture",
     "user_settings": "User Settings",
     "values": {
       "false": "no",

From f79c61c4e7e2212f499b28432c6228d4d9d10152 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 4 Aug 2025 11:10:43 +0300
Subject: [PATCH 12/22] name/bio/avatar/banner edit support

---
 src/components/image_cropper/image_cropper.js |   3 +
 .../image_cropper/image_cropper.vue           |   4 +-
 .../settings_modal/tabs/profile_tab.js        |  24 +++-
 src/components/user_avatar/user_avatar.js     |   3 +-
 src/components/user_avatar/user_avatar.vue    |   2 +-
 src/components/user_card/user_card.js         | 122 +++++++++++++-----
 src/components/user_card/user_card.scss       |  35 ++++-
 src/components/user_card/user_card.vue        |  42 +++++-
 src/i18n/en.json                              |   1 +
 src/services/api/api.service.js               |  24 +++-
 10 files changed, 203 insertions(+), 57 deletions(-)

diff --git a/src/components/image_cropper/image_cropper.js b/src/components/image_cropper/image_cropper.js
index 6d961e563..32b615265 100644
--- a/src/components/image_cropper/image_cropper.js
+++ b/src/components/image_cropper/image_cropper.js
@@ -22,6 +22,9 @@ const ImageCropper = {
     },
     cancelButtonLabel: {
       type: String
+    },
+    aspectRatio: {
+      type: Number
     }
   },
   data () {
diff --git a/src/components/image_cropper/image_cropper.vue b/src/components/image_cropper/image_cropper.vue
index 4ef077ef6..9d8ecd173 100644
--- a/src/components/image_cropper/image_cropper.vue
+++ b/src/components/image_cropper/image_cropper.vue
@@ -23,8 +23,8 @@
         />
         <cropper-selection
           ref="cropperSelection"
-          initial-coverage="1"
-          aspect-ratio="1"
+          initial-coverage="0.9"
+          :aspect-ratio="aspectRatio"
           movable
           resizable
           @change="onCropperSelectionChange"
diff --git a/src/components/settings_modal/tabs/profile_tab.js b/src/components/settings_modal/tabs/profile_tab.js
index 965765327..55aef9a4f 100644
--- a/src/components/settings_modal/tabs/profile_tab.js
+++ b/src/components/settings_modal/tabs/profile_tab.js
@@ -158,12 +158,24 @@ const ProfileTab = {
       }
       reader.readAsDataURL(file)
     },
-    displayUploadError (error) {
-      useInterfaceStore().pushGlobalNotice({
-        messageKey: 'upload.error.message',
-        messageArgs: [error.message],
-        level: 'error'
-      })
+    resetBackground () {
+      const confirmed = window.confirm(this.$t('settings.reset_background_confirm'))
+      if (confirmed) {
+        this.submitBackground('')
+      }
+    },
+    submitBackground (background) {
+      if (!this.backgroundPreview && background !== '') { return }
+
+      this.backgroundUploading = true
+      this.$store.state.api.backendInteractor.updateProfileImages({ background })
+        .then((data) => {
+          this.$store.commit('addNewUsers', [data])
+          this.$store.commit('setCurrentUser', data)
+          this.backgroundPreview = null
+        })
+        .catch(this.displayUploadError)
+        .finally(() => { this.backgroundUploading = false })
     },
     propsToNative (props) {
       return propsToNative(props)
diff --git a/src/components/user_avatar/user_avatar.js b/src/components/user_avatar/user_avatar.js
index 09eadda61..855ea60e8 100644
--- a/src/components/user_avatar/user_avatar.js
+++ b/src/components/user_avatar/user_avatar.js
@@ -17,7 +17,8 @@ const UserAvatar = {
   props: [
     'user',
     'compact',
-    'showActorTypeIndicator'
+    'showActorTypeIndicator',
+    'url'
   ],
   data () {
     return {
diff --git a/src/components/user_avatar/user_avatar.vue b/src/components/user_avatar/user_avatar.vue
index 83608c505..e3398165c 100644
--- a/src/components/user_avatar/user_avatar.vue
+++ b/src/components/user_avatar/user_avatar.vue
@@ -8,7 +8,7 @@
       class="avatar"
       :alt="user.screen_name_ui"
       :title="user.screen_name_ui"
-      :src="imgSrc(user.profile_image_url_original)"
+      :src="url ? url : imgSrc(user.profile_image_url_original)"
       :image-load-error="imageLoadError"
       :class="{ '-compact': compact, '-better-shadow': betterShadow }"
     />
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index a86298737..e682fcb21 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -37,7 +37,9 @@ import {
   faExpandAlt,
   faBirthdayCake,
   faSave,
-  faChevronRight
+  faChevronRight,
+  faChevronDown,
+  faClockRotateLeft
 } from '@fortawesome/free-solid-svg-icons'
 
 import { useMediaViewerStore } from '../../stores/media_viewer'
@@ -53,7 +55,9 @@ library.add(
   faTimes,
   faExpandAlt,
   faBirthdayCake,
-  faChevronRight
+  faChevronRight,
+  faChevronDown,
+  faClockRotateLeft
 )
 
 export default {
@@ -98,8 +102,12 @@ export default {
       // Editable stuff
       newName: user.name_unescaped,
       editingName: false,
-      newActorType: user.actor_type,
       editImage: false,
+      newAvatar: '',
+      newAvatarFile: null,
+      newBanner: '',
+      newBannerFile: null,
+      newActorType: user.actor_type,
       newBio: unescape(user.description),
       editingBio: false,
       newBirthday: user.birthday,
@@ -133,7 +141,7 @@ export default {
       return {
         backgroundImage: [
           'linear-gradient(to bottom, var(--profileTint), var(--profileTint))',
-          `url(${this.newCoverPhoto})`
+          `url(${this.bannerImgSrc})`
         ].join(', ')
       }
     },
@@ -230,11 +238,25 @@ export default {
     },
 
     // Editable stuff
+    avatarImgSrc () {
+      const src = this.newAvatar
+      return (!src) ? this.defaultAvatar : src
+    },
+    bannerImgSrc () {
+      const src = this.newBanner
+      return (!src) ? this.defaultBanner : src
+    },
     defaultAvatar () {
-      return this.$store.state.instance.server + this.$store.state.instance.defaultAvatar
+      if (this.isDefaultAvatar) {
+        return this.$store.state.instance.server + this.$store.state.instance.defaultAvatar
+      }
+      return this.user.profile_image_url
     },
     defaultBanner () {
-      return this.$store.state.instance.server + this.$store.state.instance.defaultBanner
+      if (this.isDefaultBanner) {
+        return this.$store.state.instance.server + this.$store.state.instance.defaultBanner
+      }
+      return this.user.cover_photo
     },
     isDefaultAvatar () {
       const baseAvatar = this.$store.state.instance.defaultAvatar
@@ -249,10 +271,6 @@ export default {
     isDefaultBackground () {
       return !(this.$store.state.users.currentUser.background_image)
     },
-    avatarImgSrc () {
-      const src = this.$store.state.users.currentUser.profile_image_url_original
-      return (!src) ? this.defaultAvatar : src
-    },
     fieldsLimits () {
       return this.$store.state.instance.fieldsLimits
     },
@@ -358,26 +376,27 @@ export default {
       }
     },
     submitImage ({ canvas, file }) {
-      const reqData = {}
-      if (this.editImage === 'avatar') {
-        if (canvas) {
-          return canvas.toBlob((data) => this.submitImage({ canvas: null, file: data }))
-        }
-        reqData.avatar = file
-        reqData.avatarName = file.name
-      } else {
-        reqData.banner = file
+      if (canvas) {
+        return canvas.toBlob((data) => this.submitImage({ canvas: null, file: data }))
       }
 
-      return this.$store.state.api.backendInteractor.updateProfileImages(reqData)
-        .then((user) => {
-          this.$store.commit('addNewUsers', [user])
-          this.$store.commit('setCurrentUser', user)
-          this.editImage = false
-        })
-        .catch((error) => {
-          this.displayUploadError(error)
-        })
+      const reader = new window.FileReader()
+      reader.onload = (e) => {
+        const dataUrl = e.target.result
+
+        if (this.editImage === 'avatar') {
+          this.newAvatar = dataUrl
+          this.newAvatarFile = file
+        } else {
+          this.newBanner = dataUrl
+          this.newBannerFile = file
+        }
+
+        this.editImage = false
+      }
+
+      reader.readAsDataURL(file)
+
     },
     addField () {
       if (this.newFields.length < this.maxFields) {
@@ -395,6 +414,23 @@ export default {
     cancelImageText () {
       return
     },
+    resetNews () {
+      const user = this.$store.state.users.currentUser
+
+      this.newName = user.name_unescaped
+      this.newAvatar = ''
+      this.newAvatarFile = null
+      this.newBanner = ''
+      this.newBannerFile = null
+      this.newActorType = user.actor_type
+      this.newBio = unescape(user.description)
+      this.newBirthday = user.birthday
+      this.newShowBirthday = user.show_birthday
+      this.newCoverPhoto = user.cover_photo
+      this.newFields = user.fields.map(field => ({ name: field.name, value: field.value }))
+      this.newLocked = user.locked
+      this.newShowRole = user.show_role
+    },
     updateProfile () {
       const params = {
         note: this.newBio,
@@ -403,10 +439,21 @@ export default {
         // Backend notation.
         display_name: this.newName,
         fields_attributes: this.newFields.filter(el => el != null),
-        actor_type: this.actorType,
-        show_role: this.showRole,
+        show_role: !!this.showRole,
         birthday: this.newBirthday || '',
-        show_birthday: this.showBirthday
+        show_birthday: !!this.showBirthday,
+      }
+
+      if (this.actorType) {
+        params.actor_type = this.actorType
+      }
+
+      if (this.newAvatar) {
+        params.avatar = this.newAvatarFile
+      }
+
+      if (this.newBanner) {
+        params.header = this.newBannerFile
       }
 
       if (this.emailLanguage) {
@@ -416,11 +463,22 @@ export default {
       this.$store.state.api.backendInteractor
         .updateProfile({ params })
         .then((user) => {
-          this.newFields.splice(user.fields.length)
+          this.newFields.splice(this.newFields.length)
           merge(this.newFields, user.fields)
           this.$store.commit('addNewUsers', [user])
           this.$store.commit('setCurrentUser', user)
+          this.resetNews()
+        })
+        .catch((error) => {
+          this.displayUploadError(error)
         })
     },
+    displayUploadError (error) {
+      useInterfaceStore().pushGlobalNotice({
+        messageKey: 'upload.error.message',
+        messageArgs: [error.message],
+        level: 'error'
+      })
+    }
   }
 }
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index d4537a07d..dee45ab23 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -26,7 +26,7 @@
     color: var(--lightText);
     display: block;
     line-height: 1.3;
-    padding: 0.6em;
+    padding: 0 0.6em;
     margin: 0 0.6em;
 
     img {
@@ -38,8 +38,6 @@
   }
 
   .user-card-bio {
-    margin: 0.6em;
-
     &, * {
       line-height: 1.5;
     }
@@ -201,6 +199,7 @@
       margin: -0.6em;
 
       &.save-profile-button,
+      &.reset-profile-button,
       &.edit-banner-button {
         width: auto;
       }
@@ -280,6 +279,14 @@
       .edit-button {
         width: 3em;
         text-align: center;
+
+        &:hover .icon {
+          color: var(--textFaint);
+        }
+
+        &:not(:hover) .icon {
+          color: var(--lightText);
+        }
       }
 
       .input,
@@ -391,6 +398,7 @@
     grid-template-columns: repeat(auto-fit, minmax(7.5em, 20%));
     grid-gap: 0.6em;
     max-width: 98vw;
+    margin-bottom: 0.6em;
 
     .popover-trigger-button, .moderation-tools-button {
       width: 100%;
@@ -575,4 +583,25 @@
       aspect-ratio: unset;
     }
   }
+
+  &.-banner {
+    .images-container {
+      grid-template-rows: 20em 5em 20em;
+      grid-template-columns: 1fr;
+
+      > * {
+        flex: 1 0 10em;
+        width: 100%;
+        aspect-ratio: 3;
+      }
+    }
+
+    .separator {
+      min-height: 1.1em;
+      font-size: 500%;
+      justify-self: center;
+      flex: 0 1 5em;
+      aspect-ratio: unset;
+    }
+  }
 }
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index d74754d9a..6d856d285 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -19,7 +19,10 @@
             class="user-info-avatar -link"
             @click="zoomAvatar"
           >
-            <UserAvatar :user="user" />
+            <UserAvatar
+              :user="user"
+              :url="avatarImgSrc"
+            />
             <div class="user-info-avatar -link -overlay">
               <FAIcon
                 class="fa-scale-110 fa-old-padding"
@@ -73,6 +76,20 @@
                     :title="$t('user_card.change_banner')"
                   />
                 </button>
+                <button
+                  v-if="editable"
+                  :disabled="somethingToSave"
+                  class="btn button-unstyled reset-profile-button"
+                  @click="resetNews"
+                >
+                  {{ $t('settings.reset') }}
+                  <FAIcon
+                    fixed-width
+                    class="icon"
+                    icon="clock-rotate-left"
+                    :title="$t('user_card.edit_profile')"
+                  />
+                </button>
                 <button
                   v-if="editable"
                   :disabled="somethingToSave"
@@ -144,8 +161,8 @@
                   class="user-name"
                 >
                   <RichContent
-                    :title="newName"
-                    :html="newName"
+                    :title="editable ? newName : user.name_unescaped"
+                    :html="editable ? newName : user.name_unescaped"
                     :emoji="editable ? emoji : user.emoji"
                   />
                 </router-link>
@@ -314,6 +331,7 @@
         </div>
       </div>
     </div>
+    <slot />
     <div
       v-if="!editable && loggedIn && isOtherUser && (hasNote || !hideBio) && !mergedConfig.userCardHidePersonalMarks"
       class="personal-marks"
@@ -368,6 +386,10 @@
         @click="editingBio = !editingBio"
       >
         {{ $t('settings.toggle_edit') }}
+        <FAIcon
+          class="fa-scale-110 fa-old-padding"
+          icon="pencil"
+        />
       </button>
     </h4>
     <template v-if="!editable || !editingBio">
@@ -375,7 +397,7 @@
         v-if="!hideBio"
         class="user-card-bio"
         :class="{ '-justify-left': mergedConfig.userCardLeftJustify }"
-        :html="user.description_html"
+        :html="editable ? newBio.replace(/\n/g, '<br>') : user.description_html"
         :emoji="editable ? emoji : user.emoji"
         :handle-links="true"
       />
@@ -407,6 +429,10 @@
         @click="editingFields = !editingFields"
       >
         {{ $t('settings.toggle_edit') }}
+        <FAIcon
+          class="fa-scale-110 fa-old-padding"
+          icon="pencil"
+        />
       </button>
     </h4>
     <template v-if="!editable || !editingFields">
@@ -415,7 +441,7 @@
         class="user-profile-fields"
       >
         <dl
-          v-for="(field, index) in newFields"
+          v-for="(field, index) in (editable ? newFields : user.fields_html)"
           :key="index"
           class="user-profile-field"
         >
@@ -596,6 +622,7 @@
         v-if="editImage"
         :is-mute="true"
         class="edit-image"
+        :class="{ '-banner': editImage === 'banner' }"
         @backdrop-clicked="editImage = false"
       >
         <div class="panel">
@@ -607,16 +634,17 @@
           <div class="panel-body">
             <div class="images-container">
               <img
-                :src="editImage === 'avatar' ? user.profile_image_url_original : newBanner"
+                :src="editImage === 'avatar' ? avatarImgSrc : bannerImgSrc"
                 class="current-avatar"
               />
               <FAIcon
                 class="separator"
-                icon="chevron-right"
+                :icon="editImage === 'avatar' ? 'chevron-right' : 'chevron-down'"
               />
               <image-cropper
                 ref="cropper"
                 class="cropper"
+                :aspect-ratio="editImage === 'avatar' ? 1 : 3"
                 @submit="submitImage"
               />
             </div>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index ee5301fb0..fc57403e7 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -393,6 +393,7 @@
     "app_name": "App name",
     "expert_mode": "Show advanced",
     "save": "Save changes",
+    "reset": "Reset changes",
     "security": "Security",
     "toggle_edit": "Toggle edit",
     "change_banner": "Change banner",
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 975b04c3e..f3e1f6e0f 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -215,12 +215,26 @@ const updateProfileImages = ({ credentials, avatar = null, avatarName = null, ba
 }
 
 const updateProfile = ({ credentials, params }) => {
-  return promisedRequest({
-    url: MASTODON_PROFILE_UPDATE_URL,
+  const formData = new FormData();
+
+  for(const name in params) {
+    if (name === 'fields_attributes') {
+      params[name].forEach((param, i) => {
+        formData.append(name + `[${i}][name]`, param.name)
+        formData.append(name + `[${i}][value]`, param.value)
+      })
+    } else {
+      formData.append(name, params[name]);
+    }
+  }
+
+  return fetch(MASTODON_PROFILE_UPDATE_URL, {
+    headers: authHeaders(credentials),
     method: 'PATCH',
-    payload: params,
-    credentials
-  }).then((data) => parseUser(data))
+    body: formData
+  })
+    .then((data) => data.json())
+    .then((data) => parseUser(data))
 }
 
 // Params needed:

From 59de80639f72a06dc0bbb6542beb3933a65b64c0 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 4 Aug 2025 11:34:41 +0300
Subject: [PATCH 13/22] small updates

---
 .../settings_modal/tabs/profile_tab.vue       | 115 +++---------------
 src/components/user_card/user_card.scss       |   8 +-
 src/components/user_card/user_card.vue        |  11 +-
 src/i18n/en.json                              |   2 +
 4 files changed, 34 insertions(+), 102 deletions(-)

diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index ae896e78d..25a3f5482 100644
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="profile-tab">
-    <div class="setting-item">
-      <UserCard
-        :user-id="user.id"
-        :editable="true"
-        :switcher="false"
-        rounded="top"
-      />
-      <p>{{ $t('settings.name') }}</p>
-      <p v-if="role === 'admin' || role === 'moderator'">
+    <UserCard
+      :user-id="user.id"
+      :editable="true"
+      :switcher="false"
+      rounded="top"
+    >
+      <template v-if="role === 'admin' || role === 'moderator'">
+      <h4>{{ $t('settings.show_labels') }}</h4>
+      <p class="user-card-setting">
         <Checkbox v-model="showRole">
           <template v-if="role === 'admin'">
             {{ $t('settings.show_admin_badge') }}
@@ -18,7 +18,9 @@
           </template>
         </Checkbox>
       </p>
-      <p>
+      </template>
+      <h4>{{ $t('settings.user_type') }}</h4>
+      <p class="user-card-setting">
         <label>
           {{ $t('settings.actor_type') }}
           <Select v-model="actorType">
@@ -30,13 +32,15 @@
               {{ $t('settings.actor_type_' + option) }}
             </option>
           </Select>
+          <div v-if="groupActorAvailable">
+            <small>
+              {{ $t('settings.actor_type_description') }}
+            </small>
+          </div>
         </label>
       </p>
-      <div v-if="groupActorAvailable">
-        <small>
-          {{ $t('settings.actor_type_description') }}
-        </small>
-      </div>
+    </UserCard>
+    <div class="setting-item">
       <p>
         <interface-language-switcher
           :prompt-text="$t('settings.email_language')"
@@ -52,87 +56,6 @@
         {{ $t('settings.save') }}
       </button>
     </div>
-    <div class="setting-item">
-      <h2>{{ $t('settings.avatar') }}</h2>
-      <p class="visibility-notice">
-        {{ $t('settings.avatar_size_instruction') }}
-      </p>
-      <div class="current-avatar-container">
-        <img
-          :src="user.profile_image_url_original"
-          class="current-avatar"
-        >
-        <button
-          v-if="!isDefaultAvatar && pickAvatarBtnVisible"
-          :title="$t('settings.reset_avatar')"
-          class="button-unstyled reset-button"
-          @click="resetAvatar"
-        >
-          <FAIcon
-            icon="times"
-            type="button"
-          />
-        </button>
-      </div>
-      <p>{{ $t('settings.set_new_avatar') }}</p>
-      <button
-        v-show="pickAvatarBtnVisible"
-        id="pick-avatar"
-        class="button-default btn"
-        type="button"
-      >
-        {{ $t('settings.upload_a_photo') }}
-      </button>
-      <image-cropper
-        trigger="#pick-avatar"
-        :submit-handler="submitAvatar"
-        @open="pickAvatarBtnVisible=false"
-        @close="pickAvatarBtnVisible=true"
-      />
-    </div>
-    <div class="setting-item">
-      <h2>{{ $t('settings.profile_banner') }}</h2>
-      <div class="banner-background-preview">
-        <img :src="user.cover_photo">
-        <button
-          v-if="!isDefaultBanner"
-          class="button-unstyled reset-button"
-          :title="$t('settings.reset_profile_banner')"
-          @click="resetBanner"
-        >
-          <FAIcon
-            icon="times"
-            type="button"
-          />
-        </button>
-      </div>
-      <p>{{ $t('settings.set_new_profile_banner') }}</p>
-      <img
-        v-if="bannerPreview"
-        class="banner-background-preview"
-        :src="bannerPreview"
-      >
-      <div>
-        <input
-          type="file"
-          class="input"
-          @change="uploadFile('banner', $event)"
-        >
-      </div>
-      <FAIcon
-        v-if="bannerUploading"
-        class="uploading"
-        spin
-        icon="circle-notch"
-      />
-      <button
-        v-else-if="bannerPreview"
-        class="btn button-default"
-        @click="submitBanner(banner)"
-      >
-        {{ $t('settings.save') }}
-      </button>
-    </div>
     <div class="setting-item">
       <h2>{{ $t('settings.profile_background') }}</h2>
       <div class="banner-background-preview">
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index dee45ab23..af4fd9608 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -21,8 +21,8 @@
     padding-bottom: 0;
   }
 
+  &-setting,
   &-bio {
-    text-align: center;
     color: var(--lightText);
     display: block;
     line-height: 1.3;
@@ -38,6 +38,12 @@
   }
 
   .user-card-bio {
+    text-align: center;
+
+    &.input {
+      margin: 0 1em;
+    }
+
     &, * {
       line-height: 1.5;
     }
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 6d856d285..a85455d86 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -592,21 +592,22 @@
           v-else-if="editable"
           class="birthday"
         >
+          <div>
+            <Checkbox v-model="showBirthday">
+              {{ $t('settings.birthday.show_birthday') }}
+            </Checkbox>
+          </div>
           <FAIcon
             class="fa-old-padding"
             icon="birthday-cake"
           />
+          {{ $t('settings.birthday.label') }}
           <input
             id="birthday"
             v-model="newBirthday"
             type="date"
             class="input birthday-input"
           >
-          <div>
-            <Checkbox v-model="showBirthday">
-              {{ $t('settings.birthday.show_birthday') }}
-            </Checkbox>
-          </div>
         </div>
       </template>
     </div>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index fc57403e7..ba109f903 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -492,6 +492,8 @@
     "avatarRadius": "Avatars",
     "background": "Background",
     "bio": "Bio",
+    "user_type": "User type",
+    "show_labels": "User labels",
     "email_language": "Language for receiving emails from the server",
     "block_export": "Block export",
     "block_export_button": "Export your blocks to a csv file",

From 800ab90cf90aff7fedde3464b7f50537bb7f41be Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 4 Aug 2025 13:48:09 +0300
Subject: [PATCH 14/22] reorganization of some settings

---
 .../interface_language_switcher.vue           | 15 ++--
 .../settings_modal/tabs/general_tab.js        | 17 ++++-
 .../settings_modal/tabs/general_tab.vue       | 10 ++-
 .../settings_modal/tabs/profile_tab.js        | 73 ++++++-------------
 .../settings_modal/tabs/profile_tab.vue       | 59 +--------------
 src/components/user_card/user_card.js         | 12 ++-
 src/components/user_card/user_card.scss       |  7 +-
 src/components/user_card/user_card.vue        | 38 +++++++++-
 src/i18n/en.json                              |  3 +-
 9 files changed, 113 insertions(+), 121 deletions(-)

diff --git a/src/components/interface_language_switcher/interface_language_switcher.vue b/src/components/interface_language_switcher/interface_language_switcher.vue
index ad11589b0..46837b018 100644
--- a/src/components/interface_language_switcher/interface_language_switcher.vue
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@@ -2,6 +2,7 @@
   <div class="interface-language-switcher">
     <label>
       {{ promptText }}
+      <ProfileSettingIndicator :is-profile="profile" />
     </label>
     <ul class="setting-list">
       <li
@@ -46,12 +47,15 @@
 
 <script>
 import localeService from '../../services/locale/locale.service.js'
+
 import Select from '../select/select.vue'
+import ProfileSettingIndicator from 'src/components/settings_modal/helpers/profile_setting_indicator.vue'
 
 export default {
   components: {
     // eslint-disable-next-line vue/no-reserved-component-names
-    Select
+    Select,
+    ProfileSettingIndicator
   },
   props: {
     promptText: {
@@ -62,11 +66,12 @@ export default {
       type: [Array, String],
       required: true
     },
-    setLanguage: {
-      type: Function,
-      required: true
+    profile: {
+      type: Boolean,
+      default: false
     }
   },
+  emits: ['update'],
   computed: {
     languages () {
       return localeService.languages
@@ -77,7 +82,7 @@ export default {
         return Array.isArray(this.language) ? this.language : [this.language]
       },
       set: function (val) {
-        this.setLanguage(val)
+        this.$emit('update', val)
       }
     }
   },
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index 21ccd2393..7f5d99da5 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -10,8 +10,8 @@ import InterfaceLanguageSwitcher from 'src/components/interface_language_switche
 import Select from 'src/components/select/select.vue'
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
-import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
 
+import localeService from 'src/services/locale/locale.service.js'
 import { clearCache, cacheKey, emojiCacheKey } from 'src/services/sw/sw.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -77,7 +77,6 @@ const GeneralTab = {
     UnitSetting,
     InterfaceLanguageSwitcher,
     ScopeSelector,
-    ProfileSettingIndicator,
     Select
   },
   computed: {
@@ -122,7 +121,19 @@ const GeneralTab = {
     },
     clearEmojiCache () {
       this.clearCache(emojiCacheKey)
-    }
+    },
+    updateProfile () {
+      const params = {
+        language: localeService.internalToBackendLocaleMulti(this.emailLanguage)
+      }
+
+      this.$store.state.api.backendInteractor
+        .updateProfile({ params })
+        .then((user) => {
+          this.$store.commit('addNewUsers', [user])
+          this.$store.commit('setCurrentUser', user)
+        })
+    },
   }
 }
 
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 411fd8772..c8858f773 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -7,7 +7,15 @@
           <interface-language-switcher
             :prompt-text="$t('settings.interfaceLanguage')"
             :language="language"
-            :set-language="val => language = val"
+            @update="val => language = val"
+          />
+        </li>
+        <li>
+          <interface-language-switcher
+            :prompt-text="$t('settings.email_language')"
+            :language="emailLanguage"
+            :profile="true"
+            @update="val => { emailLanguage = val; updateProfile() }"
           />
         </li>
         <li v-if="instanceSpecificPanelPresent">
diff --git a/src/components/settings_modal/tabs/profile_tab.js b/src/components/settings_modal/tabs/profile_tab.js
index 55aef9a4f..2b5cf95bb 100644
--- a/src/components/settings_modal/tabs/profile_tab.js
+++ b/src/components/settings_modal/tabs/profile_tab.js
@@ -1,5 +1,3 @@
-import unescape from 'lodash/unescape'
-import merge from 'lodash/merge'
 import UserCard from 'src/components/user_card/user_card.vue'
 import ImageCropper from 'src/components/image_cropper/image_cropper.vue'
 import ScopeSelector from 'src/components/scope_selector/scope_selector.vue'
@@ -12,7 +10,8 @@ import InterfaceLanguageSwitcher from 'src/components/interface_language_switche
 import Select from 'src/components/select/select.vue'
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
-import localeService from 'src/services/locale/locale.service.js'
+import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
+
 import { propsToNative } from 'src/services/attributes_helper/attributes_helper.service.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -32,20 +31,8 @@ library.add(
 const ProfileTab = {
   data () {
     return {
-      newName: this.$store.state.users.currentUser.name_unescaped,
-      newBio: unescape(this.$store.state.users.currentUser.description),
-      newLocked: this.$store.state.users.currentUser.locked,
-      newBirthday: this.$store.state.users.currentUser.birthday,
-      showBirthday: this.$store.state.users.currentUser.show_birthday,
-      newFields: this.$store.state.users.currentUser.fields.map(field => ({ name: field.name, value: field.value })),
-      showRole: this.$store.state.users.currentUser.show_role,
-      role: this.$store.state.users.currentUser.role,
-      bot: this.$store.state.users.currentUser.bot,
-      actorType: this.$store.state.users.currentUser.actor_type,
-      bannerUploading: false,
+      locked: this.$store.state.users.currentUser.locked,
       backgroundUploading: false,
-      banner: null,
-      bannerPreview: null,
       background: null,
       backgroundPreview: null,
       emailLanguage: this.$store.state.users.currentUser.language || ['']
@@ -60,6 +47,7 @@ const ProfileTab = {
     Checkbox,
     BooleanSetting,
     InterfaceLanguageSwitcher,
+    ProfileSettingIndicator,
     Select
   },
   computed: {
@@ -91,41 +79,8 @@ const ProfileTab = {
       const src = this.$store.state.users.currentUser.cover_photo
       return (!src) ? this.defaultBanner : src
     },
-    groupActorAvailable () {
-      return this.$store.state.instance.groupActorAvailable
-    },
-    availableActorTypes () {
-      return this.groupActorAvailable ? ['Person', 'Service', 'Group'] : ['Person', 'Service']
-    }
   },
   methods: {
-    updateProfile () {
-      const params = {
-        note: this.newBio,
-        locked: this.newLocked,
-
-        // Backend notation.
-        display_name: this.newName,
-        fields_attributes: this.newFields.filter(el => el != null),
-        actor_type: this.actorType,
-        show_role: this.showRole,
-        birthday: this.newBirthday || '',
-        show_birthday: this.showBirthday
-      }
-
-      if (this.emailLanguage) {
-        params.language = localeService.internalToBackendLocaleMulti(this.emailLanguage)
-      }
-
-      this.$store.state.api.backendInteractor
-        .updateProfile({ params })
-        .then((user) => {
-          this.newFields.splice(user.fields.length)
-          merge(this.newFields, user.fields)
-          this.$store.commit('addNewUsers', [user])
-          this.$store.commit('setCurrentUser', user)
-        })
-    },
     changeVis (visibility) {
       this.newDefaultScope = visibility
     },
@@ -177,9 +132,29 @@ const ProfileTab = {
         .catch(this.displayUploadError)
         .finally(() => { this.backgroundUploading = false })
     },
+    updateProfile () {
+      const params = {
+        locked: this.locked
+      }
+
+      this.$store.state.api.backendInteractor
+        .updateProfile({ params })
+        .then((user) => {
+          this.$store.commit('addNewUsers', [user])
+          this.$store.commit('setCurrentUser', user)
+        })
+        .catch((error) => {
+          this.displayUploadError(error)
+        })
+    },
     propsToNative (props) {
       return propsToNative(props)
     }
+  },
+  watch: {
+    locked () {
+      this.updateProfile()
+    }
   }
 }
 
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index 25a3f5482..461882e32 100644
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@@ -5,57 +5,8 @@
       :editable="true"
       :switcher="false"
       rounded="top"
-    >
-      <template v-if="role === 'admin' || role === 'moderator'">
-      <h4>{{ $t('settings.show_labels') }}</h4>
-      <p class="user-card-setting">
-        <Checkbox v-model="showRole">
-          <template v-if="role === 'admin'">
-            {{ $t('settings.show_admin_badge') }}
-          </template>
-          <template v-if="role === 'moderator'">
-            {{ $t('settings.show_moderator_badge') }}
-          </template>
-        </Checkbox>
-      </p>
-      </template>
-      <h4>{{ $t('settings.user_type') }}</h4>
-      <p class="user-card-setting">
-        <label>
-          {{ $t('settings.actor_type') }}
-          <Select v-model="actorType">
-            <option
-              v-for="option in availableActorTypes"
-              :key="option"
-              :value="option"
-            >
-              {{ $t('settings.actor_type_' + option) }}
-            </option>
-          </Select>
-          <div v-if="groupActorAvailable">
-            <small>
-              {{ $t('settings.actor_type_description') }}
-            </small>
-          </div>
-        </label>
-      </p>
-    </UserCard>
-    <div class="setting-item">
-      <p>
-        <interface-language-switcher
-          :prompt-text="$t('settings.email_language')"
-          :language="emailLanguage"
-          :set-language="val => emailLanguage = val"
-        />
-      </p>
-      <button
-        :disabled="newName && newName.length === 0"
-        class="btn button-default"
-        @click="updateProfile"
       >
-        {{ $t('settings.save') }}
-      </button>
-    </div>
+    </UserCard>
     <div class="setting-item">
       <h2>{{ $t('settings.profile_background') }}</h2>
       <div class="banner-background-preview">
@@ -103,12 +54,10 @@
       <h2>{{ $t('settings.account_privacy') }}</h2>
       <ul class="setting-list">
         <li>
-          <BooleanSetting
-            source="profile"
-            path="locked"
-          >
+          <Checkbox v-model="locked">
             {{ $t('settings.lock_account_description') }}
-          </BooleanSetting>
+          </Checkbox>
+          <ProfileSettingIndicator :is-profile="true" />
         </li>
         <li>
           <BooleanSetting
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index e682fcb21..370904b71 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -115,7 +115,6 @@ export default {
       newCoverPhoto: user.cover_photo,
       newFields: user.fields.map(field => ({ name: field.name, value: field.value })),
       editingFields: false,
-      newLocked: user.locked,
       newShowRole: user.show_role,
     }
   },
@@ -123,9 +122,18 @@ export default {
     this.$store.dispatch('fetchUserRelationship', this.user.id)
   },
   computed: {
+    groupActorAvailable () {
+      return this.$store.state.instance.groupActorAvailable
+    },
+    availableActorTypes () {
+      return this.groupActorAvailable ? ['Person', 'Service', 'Group'] : ['Person', 'Service']
+    },
     user () {
       return this.$store.getters.findUser(this.userId)
     },
+    role () {
+      return this.user.role
+    },
     relationship () {
       return this.$store.getters.relationship(this.userId)
     },
@@ -428,13 +436,11 @@ export default {
       this.newShowBirthday = user.show_birthday
       this.newCoverPhoto = user.cover_photo
       this.newFields = user.fields.map(field => ({ name: field.name, value: field.value }))
-      this.newLocked = user.locked
       this.newShowRole = user.show_role
     },
     updateProfile () {
       const params = {
         note: this.newBio,
-        locked: this.newLocked,
 
         // Backend notation.
         display_name: this.newName,
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index af4fd9608..cc3a62915 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -27,7 +27,6 @@
     display: block;
     line-height: 1.3;
     padding: 0 0.6em;
-    margin: 0 0.6em;
 
     img {
       object-fit: contain;
@@ -37,8 +36,14 @@
     }
   }
 
+  .user-card-setting {
+    margin-left: 0.6em;
+    margin-right: 0.6em;
+  }
+
   .user-card-bio {
     text-align: center;
+    margin: 0 0.6em;
 
     &.input {
       margin: 0 1em;
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index a85455d86..27cd07fa1 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -331,7 +331,41 @@
         </div>
       </div>
     </div>
-    <slot />
+    <template v-if="editable">
+      <h4>{{ $t('settings.user_preferences') }}</h4>
+      <p
+        v-if="role === 'admin' || role === 'moderator'"
+        class="user-card-setting"
+      >
+        <Checkbox v-model="newShowRole">
+          <template v-if="role === 'admin'">
+            {{ $t('settings.show_admin_badge') }}
+          </template>
+          <template v-if="role === 'moderator'">
+            {{ $t('settings.show_moderator_badge') }}
+          </template>
+        </Checkbox>
+      </p>
+      <p class="user-card-setting">
+        <label>
+          {{ $t('settings.actor_type') }}
+          <Select v-model="newActorType">
+            <option
+              v-for="option in availableActorTypes"
+              :key="option"
+              :value="option"
+            >
+              {{ $t('settings.actor_type_' + option) }}
+            </option>
+          </Select>
+          <div v-if="groupActorAvailable">
+            <small>
+              {{ $t('settings.actor_type_description') }}
+            </small>
+          </div>
+        </label>
+      </p>
+    </template>
     <div
       v-if="!editable && loggedIn && isOtherUser && (hasNote || !hideBio) && !mergedConfig.userCardHidePersonalMarks"
       class="personal-marks"
@@ -671,7 +705,7 @@
               <button
                 class="button-default btn"
                 type="button"
-                @click="destroy"
+                @click="editImage = false"
               >
                 {{ this.$t('image_cropper.cancel') }}
               </button>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index ba109f903..d118ff595 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -492,8 +492,7 @@
     "avatarRadius": "Avatars",
     "background": "Background",
     "bio": "Bio",
-    "user_type": "User type",
-    "show_labels": "User labels",
+    "user_preferences": "User preferences",
     "email_language": "Language for receiving emails from the server",
     "block_export": "Block export",
     "block_export_button": "Export your blocks to a csv file",

From c8fa72c791accbd62efc53ce106c30a820920d7a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 4 Aug 2025 14:04:28 +0300
Subject: [PATCH 15/22] move background to appearance tab

---
 .../settings_modal/tabs/appearance_tab.js     |  56 ++++++++-
 .../settings_modal/tabs/appearance_tab.scss   |  40 +++++++
 .../settings_modal/tabs/appearance_tab.vue    |  43 +++++++
 .../settings_modal/tabs/profile_tab.js        |  54 ---------
 .../settings_modal/tabs/profile_tab.scss      | 110 ------------------
 .../settings_modal/tabs/profile_tab.vue       |  43 -------
 src/i18n/en.json                              |   1 +
 7 files changed, 138 insertions(+), 209 deletions(-)

diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js
index 838ac6d6c..77204850a 100644
--- a/src/components/settings_modal/tabs/appearance_tab.js
+++ b/src/components/settings_modal/tabs/appearance_tab.js
@@ -16,6 +16,7 @@ import {
 } from 'src/services/theme_data/css_utils.js'
 import { deserialize } from 'src/services/theme_data/iss_deserializer.js'
 import { createStyleSheet, adoptStyleSheets } from 'src/services/style_setter/style_setter.js'
+import fileSizeFormatService from 'src/components/../services/file_size_format/file_size_format.js'
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
@@ -72,7 +73,10 @@ const AppearanceTab = {
         key: mode,
         value: mode,
         label: this.$t(`settings.style.themes3.hacks.underlay_override_mode_${mode}`)
-      }))
+      })),
+      backgroundUploading: false,
+      background: null,
+      backgroundPreview: null,
     }
   },
   components: {
@@ -420,7 +424,55 @@ const AppearanceTab = {
       ].join(''))
       sheet.ready = true
       adoptStyleSheets()
-    }
+    },
+    uploadFile (slot, e) {
+      const file = e.target.files[0]
+      if (!file) { return }
+      if (file.size > this.$store.state.instance[slot + 'limit']) {
+        const filesize = fileSizeFormatService.fileSizeFormat(file.size)
+        const allowedsize = fileSizeFormatService.fileSizeFormat(this.$store.state.instance[slot + 'limit'])
+        useInterfaceStore().pushGlobalNotice({
+          messageKey: 'upload.error.message',
+          messageArgs: [
+            this.$t('upload.error.file_too_big', {
+              filesize: filesize.num,
+              filesizeunit: filesize.unit,
+              allowedsize: allowedsize.num,
+              allowedsizeunit: allowedsize.unit
+            })
+          ],
+          level: 'error'
+        })
+        return
+      }
+
+      const reader = new FileReader()
+      reader.onload = ({ target }) => {
+        const img = target.result
+        this[slot + 'Preview'] = img
+        this[slot] = file
+      }
+      reader.readAsDataURL(file)
+    },
+    resetBackground () {
+      const confirmed = window.confirm(this.$t('settings.reset_background_confirm'))
+      if (confirmed) {
+        this.submitBackground('')
+      }
+    },
+    submitBackground (background) {
+      if (!this.backgroundPreview && background !== '') { return }
+
+      this.backgroundUploading = true
+      this.$store.state.api.backendInteractor.updateProfileImages({ background })
+        .then((data) => {
+          this.$store.commit('addNewUsers', [data])
+          this.$store.commit('setCurrentUser', data)
+          this.backgroundPreview = null
+        })
+        .catch(this.displayUploadError)
+        .finally(() => { this.backgroundUploading = false })
+    },
   }
 }
 
diff --git a/src/components/settings_modal/tabs/appearance_tab.scss b/src/components/settings_modal/tabs/appearance_tab.scss
index ae8691f16..d786cfa38 100644
--- a/src/components/settings_modal/tabs/appearance_tab.scss
+++ b/src/components/settings_modal/tabs/appearance_tab.scss
@@ -24,6 +24,46 @@
     margin: 0.5em 0;
   }
 
+  input[type="file"] {
+    padding: 0.25em;
+    height: auto;
+  }
+
+  .banner-background-preview {
+    max-width: 100%;
+    width: 300px;
+    position: relative;
+
+    img {
+      width: 100%;
+    }
+  }
+
+  .reset-button {
+    position: absolute;
+    top: 0.2em;
+    right: 0.2em;
+    border-radius: var(--roundness);
+    background-color: rgb(0 0 0 / 60%);
+    opacity: 0.7;
+    width: 1.5em;
+    height: 1.5em;
+    text-align: center;
+    line-height: 1.5em;
+    font-size: 1.5em;
+    cursor: pointer;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    svg {
+      color: white;
+    }
+  }
+
+
+
   .palettes-container {
     height: 15em;
     overflow: hidden auto;
diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
index cbbb8ff9c..cd54e2c82 100644
--- a/src/components/settings_modal/tabs/appearance_tab.vue
+++ b/src/components/settings_modal/tabs/appearance_tab.vue
@@ -151,6 +151,49 @@
         </div>
       </div>
     </div>
+    <div class="setting-item">
+      <h2>{{ $t('settings.background') }}</h2>
+      <div class="banner-background-preview">
+        <img :src="user.background_image">
+        <button
+          v-if="!isDefaultBackground"
+          class="button-unstyled reset-button"
+          :title="$t('settings.reset_profile_background')"
+          @click="resetBackground"
+        >
+          <FAIcon
+            icon="times"
+            type="button"
+          />
+        </button>
+      </div>
+      <p>{{ $t('settings.set_new_background') }}</p>
+      <img
+        v-if="backgroundPreview"
+        class="banner-background-preview"
+        :src="backgroundPreview"
+      >
+      <div>
+        <input
+          type="file"
+          class="input"
+          @change="uploadFile('background', $event)"
+        >
+      </div>
+      <FAIcon
+        v-if="backgroundUploading"
+        class="uploading"
+        spin
+        icon="circle-notch"
+      />
+      <button
+        v-else-if="backgroundPreview"
+        class="btn button-default"
+        @click="submitBackground(background)"
+      >
+        {{ $t('settings.save') }}
+      </button>
+    </div>
     <div class="setting-item">
       <h2>{{ $t('settings.scale_and_layout') }}</h2>
       <div class="alert neutral theme-notice">
diff --git a/src/components/settings_modal/tabs/profile_tab.js b/src/components/settings_modal/tabs/profile_tab.js
index 2b5cf95bb..e6d3e6141 100644
--- a/src/components/settings_modal/tabs/profile_tab.js
+++ b/src/components/settings_modal/tabs/profile_tab.js
@@ -1,7 +1,6 @@
 import UserCard from 'src/components/user_card/user_card.vue'
 import ImageCropper from 'src/components/image_cropper/image_cropper.vue'
 import ScopeSelector from 'src/components/scope_selector/scope_selector.vue'
-import fileSizeFormatService from 'src/components/../services/file_size_format/file_size_format.js'
 import ProgressButton from 'src/components/progress_button/progress_button.vue'
 import EmojiInput from 'src/components/emoji_input/emoji_input.vue'
 import suggestor from 'src/components/emoji_input/suggestor.js'
@@ -20,7 +19,6 @@ import {
   faPlus,
   faCircleNotch
 } from '@fortawesome/free-solid-svg-icons'
-import { useInterfaceStore } from 'src/stores/interface'
 
 library.add(
   faTimes,
@@ -32,10 +30,6 @@ const ProfileTab = {
   data () {
     return {
       locked: this.$store.state.users.currentUser.locked,
-      backgroundUploading: false,
-      background: null,
-      backgroundPreview: null,
-      emailLanguage: this.$store.state.users.currentUser.language || ['']
     }
   },
   components: {
@@ -84,54 +78,6 @@ const ProfileTab = {
     changeVis (visibility) {
       this.newDefaultScope = visibility
     },
-    uploadFile (slot, e) {
-      const file = e.target.files[0]
-      if (!file) { return }
-      if (file.size > this.$store.state.instance[slot + 'limit']) {
-        const filesize = fileSizeFormatService.fileSizeFormat(file.size)
-        const allowedsize = fileSizeFormatService.fileSizeFormat(this.$store.state.instance[slot + 'limit'])
-        useInterfaceStore().pushGlobalNotice({
-          messageKey: 'upload.error.message',
-          messageArgs: [
-            this.$t('upload.error.file_too_big', {
-              filesize: filesize.num,
-              filesizeunit: filesize.unit,
-              allowedsize: allowedsize.num,
-              allowedsizeunit: allowedsize.unit
-            })
-          ],
-          level: 'error'
-        })
-        return
-      }
-
-      const reader = new FileReader()
-      reader.onload = ({ target }) => {
-        const img = target.result
-        this[slot + 'Preview'] = img
-        this[slot] = file
-      }
-      reader.readAsDataURL(file)
-    },
-    resetBackground () {
-      const confirmed = window.confirm(this.$t('settings.reset_background_confirm'))
-      if (confirmed) {
-        this.submitBackground('')
-      }
-    },
-    submitBackground (background) {
-      if (!this.backgroundPreview && background !== '') { return }
-
-      this.backgroundUploading = true
-      this.$store.state.api.backendInteractor.updateProfileImages({ background })
-        .then((data) => {
-          this.$store.commit('addNewUsers', [data])
-          this.$store.commit('setCurrentUser', data)
-          this.backgroundPreview = null
-        })
-        .catch(this.displayUploadError)
-        .finally(() => { this.backgroundUploading = false })
-    },
     updateProfile () {
       const params = {
         locked: this.locked
diff --git a/src/components/settings_modal/tabs/profile_tab.scss b/src/components/settings_modal/tabs/profile_tab.scss
index 7c30be8d2..8f0f7862a 100644
--- a/src/components/settings_modal/tabs/profile_tab.scss
+++ b/src/components/settings_modal/tabs/profile_tab.scss
@@ -3,122 +3,12 @@
     margin: 0;
   }
 
-  input[type="file"] {
-    padding: 5px;
-    height: auto;
-  }
-
-  .banner-background-preview {
-    max-width: 100%;
-    width: 300px;
-    position: relative;
-
-    img {
-      width: 100%;
-    }
-  }
-
   .uploading {
     font-size: 1.5em;
     margin: 0.25em;
   }
 
-  .name-changer {
-    width: 100%;
-  }
-
-  .current-avatar-container {
-    position: relative;
-    width: 150px;
-    height: 150px;
-  }
-
-  .current-avatar {
-    display: block;
-    width: 100%;
-    height: 100%;
-    border-radius: var(--roundness);
-  }
-
-  .reset-button {
-    position: absolute;
-    top: 0.2em;
-    right: 0.2em;
-    border-radius: var(--roundness);
-    background-color: rgb(0 0 0 / 60%);
-    opacity: 0.7;
-    width: 1.5em;
-    height: 1.5em;
-    text-align: center;
-    line-height: 1.5em;
-    font-size: 1.5em;
-    cursor: pointer;
-
-    &:hover {
-      opacity: 1;
-    }
-
-    svg {
-      color: white;
-    }
-  }
-
-  .oauth-tokens {
-    width: 100%;
-
-    th {
-      text-align: left;
-    }
-
-    .actions {
-      text-align: right;
-    }
-  }
-
-  &-usersearch-wrapper {
-    padding: 1em;
-  }
-
-  &-bulk-actions {
-    text-align: right;
-    padding: 0 1em;
-    min-height: 2em;
-
-    button {
-      width: 10em;
-    }
-  }
-
-  &-domain-mute-form {
-    padding: 1em;
-    display: flex;
-    flex-direction: column;
-
-    button {
-      align-self: flex-end;
-      margin-top: 1em;
-      width: 10em;
-    }
-  }
-
   .setting-subitem {
     margin-left: 1.75em;
   }
-
-  .profile-fields {
-    display: flex;
-
-    & > .emoji-input {
-      flex: 1 1 auto;
-      margin: 0 0.2em 0.5em;
-      min-width: 0;
-    }
-
-    .delete-field {
-      width: 20px;
-      align-self: center;
-      margin: 0 0.2em 0.5em;
-      padding: 0 0.5em;
-    }
-  }
 }
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index 461882e32..7be01d689 100644
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@@ -7,49 +7,6 @@
       rounded="top"
       >
     </UserCard>
-    <div class="setting-item">
-      <h2>{{ $t('settings.profile_background') }}</h2>
-      <div class="banner-background-preview">
-        <img :src="user.background_image">
-        <button
-          v-if="!isDefaultBackground"
-          class="button-unstyled reset-button"
-          :title="$t('settings.reset_profile_background')"
-          @click="resetBackground"
-        >
-          <FAIcon
-            icon="times"
-            type="button"
-          />
-        </button>
-      </div>
-      <p>{{ $t('settings.set_new_profile_background') }}</p>
-      <img
-        v-if="backgroundPreview"
-        class="banner-background-preview"
-        :src="backgroundPreview"
-      >
-      <div>
-        <input
-          type="file"
-          class="input"
-          @change="uploadFile('background', $event)"
-        >
-      </div>
-      <FAIcon
-        v-if="backgroundUploading"
-        class="uploading"
-        spin
-        icon="circle-notch"
-      />
-      <button
-        v-else-if="backgroundPreview"
-        class="btn button-default"
-        @click="submitBackground(background)"
-      >
-        {{ $t('settings.save') }}
-      </button>
-    </div>
     <div class="setting-item">
       <h2>{{ $t('settings.account_privacy') }}</h2>
       <ul class="setting-list">
diff --git a/src/i18n/en.json b/src/i18n/en.json
index d118ff595..39022866f 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -727,6 +727,7 @@
     "minimal_scopes_mode": "Minimize post scope selection options",
     "set_new_avatar": "Set new avatar",
     "set_new_profile_background": "Set new profile background",
+    "set_new_background": "Set new background",
     "set_new_profile_banner": "Set new profile banner",
     "reset_avatar": "Reset avatar",
     "reset_banner": "Reset banner",

From 41267a5d4356fb63be0e0aef0cb46db6e46dad20 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 4 Aug 2025 14:09:25 +0300
Subject: [PATCH 16/22] small fixes

---
 src/components/user_card/user_card.scss | 4 ++++
 src/i18n/en.json                        | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index cc3a62915..d8e6e82fb 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -47,6 +47,10 @@
 
     &.input {
       margin: 0 1em;
+
+      textarea {
+        text-align: inherit;
+      }
     }
 
     &, * {
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 39022866f..46bf9b31e 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -492,7 +492,7 @@
     "avatarRadius": "Avatars",
     "background": "Background",
     "bio": "Bio",
-    "user_preferences": "User preferences",
+    "user_preferences": "Profile settings",
     "email_language": "Language for receiving emails from the server",
     "block_export": "Block export",
     "block_export_button": "Export your blocks to a csv file",

From 86f8f46b95a35a33b41f7722fcc124b1b58cfeed Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 4 Aug 2025 14:22:20 +0300
Subject: [PATCH 17/22] i have no idea how this worked before, but now it does
 fr

---
 src/components/user_card/user_card.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index 370904b71..63dbc5c8e 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -92,7 +92,7 @@ export default {
     ImageCropper
   },
   data () {
-    const user = this.$store.state.users.currentUser
+    const user = this.$store.getters.findUser(this.userId)
 
     return {
       followRequestInProgress: false,
@@ -113,7 +113,7 @@ export default {
       newBirthday: user.birthday,
       newShowBirthday: user.show_birthday,
       newCoverPhoto: user.cover_photo,
-      newFields: user.fields.map(field => ({ name: field.name, value: field.value })),
+      newFields: user.fields?.map(field => ({ name: field.name, value: field.value })),
       editingFields: false,
       newShowRole: user.show_role,
     }
@@ -248,11 +248,11 @@ export default {
     // Editable stuff
     avatarImgSrc () {
       const src = this.newAvatar
-      return (!src) ? this.defaultAvatar : src
+      return (!src) ? (this.user.profile_image_url_original || this.defaultAvatar) : src
     },
     bannerImgSrc () {
       const src = this.newBanner
-      return (!src) ? this.defaultBanner : src
+      return (!src) ? (this.user.cover_photo || this.defaultBanner) : src
     },
     defaultAvatar () {
       if (this.isDefaultAvatar) {
@@ -445,7 +445,7 @@ export default {
         // Backend notation.
         display_name: this.newName,
         fields_attributes: this.newFields.filter(el => el != null),
-        show_role: !!this.showRole,
+        show_role: !!this.newShowRole,
         birthday: this.newBirthday || '',
         show_birthday: !!this.showBirthday,
       }

From a4802030bead68fd1b09eb4e77595ebe545a53ed Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 4 Aug 2025 14:25:14 +0300
Subject: [PATCH 18/22] visible role preview

---
 src/components/user_card/user_card.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index 63dbc5c8e..ca18cbfca 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -199,6 +199,7 @@ export default {
       }
     },
     visibleRole () {
+      if (!this.newShowRole) { return }
       const rights = this.user.rights
       if (!rights) { return }
       const validRole = rights.admin || rights.moderator

From d89f564b5e3e39c74875e4bdd575f7a2134a69f3 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 4 Aug 2025 23:15:26 +0300
Subject: [PATCH 19/22] proper resets, better upload dialog

---
 src/components/user_card/user_card.js   | 102 ++++----
 src/components/user_card/user_card.scss |  10 +-
 src/components/user_card/user_card.vue  | 310 +++++++++++-------------
 src/i18n/en.json                        |   4 +-
 4 files changed, 199 insertions(+), 227 deletions(-)

diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index ca18cbfca..e80ee91de 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -15,7 +15,7 @@ import RichContent from 'src/components/rich_content/rich_content.jsx'
 import UserTimedFilterModal from 'src/components/user_timed_filter_modal/user_timed_filter_modal.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import EmojiInput from 'src/components/emoji_input/emoji_input.vue'
-import Modal from 'src/components/modal/modal.vue'
+import DialogModal from 'src/components/dialog_modal/dialog_modal.vue'
 import ImageCropper from 'src/components/image_cropper/image_cropper.vue'
 
 import localeService from 'src/services/locale/locale.service.js'
@@ -37,8 +37,6 @@ import {
   faExpandAlt,
   faBirthdayCake,
   faSave,
-  faChevronRight,
-  faChevronDown,
   faClockRotateLeft
 } from '@fortawesome/free-solid-svg-icons'
 
@@ -55,8 +53,6 @@ library.add(
   faTimes,
   faExpandAlt,
   faBirthdayCake,
-  faChevronRight,
-  faChevronDown,
   faClockRotateLeft
 )
 
@@ -74,7 +70,7 @@ export default {
     'hasNoteEditor'
   ],
   components: {
-    Modal,
+    DialogModal,
     UserAvatar,
     Checkbox,
     RemoteFollow,
@@ -100,22 +96,27 @@ export default {
       muteExpiryUnit: 'minutes',
 
       // Editable stuff
+      editImage: false,
+
       newName: user.name_unescaped,
       editingName: false,
-      editImage: false,
-      newAvatar: '',
-      newAvatarFile: null,
-      newBanner: '',
-      newBannerFile: null,
-      newActorType: user.actor_type,
+
       newBio: unescape(user.description),
       editingBio: false,
+
+      newAvatar: null,
+      newAvatarFile: null,
+
+      newBanner: null,
+      newBannerFile: null,
+
+      newActorType: user.actor_type,
       newBirthday: user.birthday,
       newShowBirthday: user.show_birthday,
-      newCoverPhoto: user.cover_photo,
+      newShowRole: user.show_role,
+
       newFields: user.fields?.map(field => ({ name: field.name, value: field.value })),
       editingFields: false,
-      newShowRole: user.show_role,
     }
   },
   created () {
@@ -248,24 +249,20 @@ export default {
 
     // Editable stuff
     avatarImgSrc () {
-      const src = this.newAvatar
-      return (!src) ? (this.user.profile_image_url_original || this.defaultAvatar) : src
+      const currentUrl = this.user.profile_image_url_original || this.defaultAvatar
+      const newUrl = this.newAvatar === '' ? this.defaultAvatar : this.newAvatar
+      return (this.newAvatar === null) ? currentUrl : newUrl
     },
     bannerImgSrc () {
-      const src = this.newBanner
-      return (!src) ? (this.user.cover_photo || this.defaultBanner) : src
+      const currentUrl = this.user.cover_photo || this.defaultBanner
+      const newUrl = this.newBanner === '' ? this.defaultBanner : this.newBanner
+      return (this.newBanner === null) ? currentUrl : newUrl
     },
     defaultAvatar () {
-      if (this.isDefaultAvatar) {
-        return this.$store.state.instance.server + this.$store.state.instance.defaultAvatar
-      }
-      return this.user.profile_image_url
+      return this.$store.state.instance.server + this.$store.state.instance.defaultAvatar
     },
     defaultBanner () {
-      if (this.isDefaultBanner) {
-        return this.$store.state.instance.server + this.$store.state.instance.defaultBanner
-      }
-      return this.user.cover_photo
+      return this.$store.state.instance.server + this.$store.state.instance.defaultBanner
     },
     isDefaultAvatar () {
       const baseAvatar = this.$store.state.instance.defaultAvatar
@@ -366,24 +363,6 @@ export default {
     changeBanner () {
       this.editImage = 'banner'
     },
-    resetAvatar () {
-      const confirmed = window.confirm(this.$t('settings.reset_avatar_confirm'))
-      if (confirmed) {
-        this.submitAvatar(undefined, '')
-      }
-    },
-    resetBanner () {
-      const confirmed = window.confirm(this.$t('settings.reset_banner_confirm'))
-      if (confirmed) {
-        this.submitBanner('')
-      }
-    },
-    resetBackground () {
-      const confirmed = window.confirm(this.$t('settings.reset_background_confirm'))
-      if (confirmed) {
-        this.submitBackground('')
-      }
-    },
     submitImage ({ canvas, file }) {
       if (canvas) {
         return canvas.toBlob((data) => this.submitImage({ canvas: null, file: data }))
@@ -407,6 +386,16 @@ export default {
       reader.readAsDataURL(file)
 
     },
+    resetImage () {
+      if (this.editImage === 'avatar') {
+        this.newAvatar = ''
+        this.newAvatarFile = ''
+      } else {
+        this.newBanner = ''
+        this.newBannerFile = ''
+      }
+      this.editImage = false
+    },
     addField () {
       if (this.newFields.length < this.maxFields) {
         this.newFields.push({ name: '', value: '' })
@@ -423,21 +412,24 @@ export default {
     cancelImageText () {
       return
     },
-    resetNews () {
+    resetState () {
       const user = this.$store.state.users.currentUser
 
       this.newName = user.name_unescaped
-      this.newAvatar = ''
-      this.newAvatarFile = null
-      this.newBanner = ''
-      this.newBannerFile = null
-      this.newActorType = user.actor_type
       this.newBio = unescape(user.description)
+
+      this.newAvatar = null
+      this.newAvatarFile = null
+
+      this.newBanner = null
+      this.newBannerFile = null
+
+      this.newActorType = user.actor_type
       this.newBirthday = user.birthday
       this.newShowBirthday = user.show_birthday
-      this.newCoverPhoto = user.cover_photo
-      this.newFields = user.fields.map(field => ({ name: field.name, value: field.value }))
       this.newShowRole = user.show_role
+
+      this.newFields = user.fields.map(field => ({ name: field.name, value: field.value }))
     },
     updateProfile () {
       const params = {
@@ -455,11 +447,11 @@ export default {
         params.actor_type = this.actorType
       }
 
-      if (this.newAvatar) {
+      if (this.newAvatarFile !== null) {
         params.avatar = this.newAvatarFile
       }
 
-      if (this.newBanner) {
+      if (this.newBannerFile !== null) {
         params.header = this.newBannerFile
       }
 
@@ -474,7 +466,7 @@ export default {
           merge(this.newFields, user.fields)
           this.$store.commit('addNewUsers', [user])
           this.$store.commit('setCurrentUser', user)
-          this.resetNews()
+          this.resetState()
         })
         .catch((error) => {
           this.displayUploadError(error)
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index d8e6e82fb..84e103aec 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -410,7 +410,7 @@
   .user-interactions {
     position: relative;
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(7.5em, 20%));
+    grid-template-columns: repeat(auto-fit, minmax(5em, 40%));
     grid-gap: 0.6em;
     max-width: 98vw;
     margin-bottom: 0.6em;
@@ -568,11 +568,9 @@
     object-fit: contain;
   }
 
-  .images-container {
-    display: grid;
-    margin: 1em;
-    grid-template-columns: 1fr 5em 1fr;
-    grid-template-rows: 20em;
+  .image-container {
+    display: flex;
+    margin: 0 1em 0.5em;
     gap: 0.5em;
 
     .new-image {
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 27cd07fa1..4fe2905ec 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -19,10 +19,7 @@
             class="user-info-avatar -link"
             @click="zoomAvatar"
           >
-            <UserAvatar
-              :user="user"
-              :url="avatarImgSrc"
-            />
+            <UserAvatar :user="user" />
             <div class="user-info-avatar -link -overlay">
               <FAIcon
                 class="fa-scale-110 fa-old-padding"
@@ -36,7 +33,10 @@
             :class="{ '-editable': editable }"
             @click="changeAvatar"
           >
-            <UserAvatar :user="user" />
+            <UserAvatar
+              :user="user"
+              :url="avatarImgSrc"
+            />
             <div class="user-info-avatar -link -overlay">
               <FAIcon
                 class="fa-scale-110 fa-old-padding"
@@ -76,34 +76,6 @@
                     :title="$t('user_card.change_banner')"
                   />
                 </button>
-                <button
-                  v-if="editable"
-                  :disabled="somethingToSave"
-                  class="btn button-unstyled reset-profile-button"
-                  @click="resetNews"
-                >
-                  {{ $t('settings.reset') }}
-                  <FAIcon
-                    fixed-width
-                    class="icon"
-                    icon="clock-rotate-left"
-                    :title="$t('user_card.edit_profile')"
-                  />
-                </button>
-                <button
-                  v-if="editable"
-                  :disabled="somethingToSave"
-                  class="btn button-unstyled save-profile-button"
-                  @click="updateProfile"
-                >
-                  {{ $t('settings.save') }}
-                  <FAIcon
-                    fixed-width
-                    class="icon"
-                    icon="save"
-                    :title="$t('user_card.edit_profile')"
-                  />
-                </button>
                 <button
                   v-else-if="!editable && !isOtherUser && user.is_local"
                   class="button-unstyled edit-profile-button"
@@ -256,72 +228,102 @@
           </div>
         </div>
         <div
-          v-if="!editable && loggedIn && isOtherUser"
+          v-if="loggedIn"
           class="user-interactions"
         >
-          <div class="btn-group">
-            <FollowButton
-              :relationship="relationship"
+          <template v-if="isOtherUser">
+            <div class="btn-group">
+              <FollowButton
+                :relationship="relationship"
+                :user="user"
+              />
+              <template v-if="relationship.following">
+                <ProgressButton
+                  v-if="!relationship.notifying"
+                  class="btn button-default"
+                  :click="subscribeUser"
+                  :title="$t('user_card.subscribe')"
+                >
+                  <FAIcon icon="bell" />
+                </ProgressButton>
+                <ProgressButton
+                  v-else
+                  class="btn button-default toggled"
+                  :click="unsubscribeUser"
+                  :title="$t('user_card.unsubscribe')"
+                >
+                  <FALayers>
+                    <FAIcon
+                      icon="rss"
+                      transform="left-5 shrink-6 up-3 rotate-20"
+                      flip="horizontal"
+                    />
+                    <FAIcon
+                      icon="rss"
+                      transform="right-5 shrink-6 up-3 rotate-20"
+                    />
+                    <FAIcon icon="bell" />
+                  </FALayers>
+                </ProgressButton>
+              </template>
+            </div>
+            <button
+              v-if="relationship.muting"
+              class="btn button-default btn-mute toggled"
+              :disabled="user.deactivated"
+              @click="unmuteUser"
+            >
+              {{ $t('user_card.muted') }}
+            </button>
+            <button
+              v-else
+              class="btn button-default btn-mute"
+              :disabled="user.deactivated"
+              @click="muteUser"
+            >
+              {{ $t('user_card.mute') }}
+            </button>
+            <button
+              class="btn button-default btn-mention"
+              :disabled="user.deactivated"
+              @click="mentionUser"
+            >
+              {{ $t('user_card.mention') }}
+            </button>
+            <ModerationTools
+              v-if="showModerationMenu"
+              class="moderation-menu"
               :user="user"
             />
-            <template v-if="relationship.following">
-              <ProgressButton
-                v-if="!relationship.notifying"
-                class="btn button-default"
-                :click="subscribeUser"
-                :title="$t('user_card.subscribe')"
-              >
-                <FAIcon icon="bell" />
-              </ProgressButton>
-              <ProgressButton
-                v-else
-                class="btn button-default toggled"
-                :click="unsubscribeUser"
-                :title="$t('user_card.unsubscribe')"
-              >
-                <FALayers>
-                  <FAIcon
-                    icon="rss"
-                    transform="left-5 shrink-6 up-3 rotate-20"
-                    flip="horizontal"
-                  />
-                  <FAIcon
-                    icon="rss"
-                    transform="right-5 shrink-6 up-3 rotate-20"
-                  />
-                  <FAIcon icon="bell" />
-                </FALayers>
-              </ProgressButton>
-            </template>
-          </div>
+          </template>
           <button
-            v-if="relationship.muting"
-            class="btn button-default btn-mute toggled"
-            :disabled="user.deactivated"
-            @click="unmuteUser"
+            v-if="editable"
+            :disabled="somethingToSave"
+            class="btn button-default reset-profile-button"
+            @click="resetState"
           >
-            {{ $t('user_card.muted') }}
+            {{ $t('settings.reset') }}
+            <FAIcon
+              fixed-width
+              class="icon"
+              icon="clock-rotate-left"
+              :title="$t('user_card.edit_profile')"
+            />
           </button>
           <button
-            v-else
-            class="btn button-default btn-mute"
-            :disabled="user.deactivated"
-            @click="muteUser"
+            v-if="editable"
+            :disabled="somethingToSave"
+            class="btn button-default save-profile-button"
+            @click="updateProfile"
           >
-            {{ $t('user_card.mute') }}
+            {{ $t('settings.save') }}
+            <FAIcon
+              fixed-width
+              class="icon"
+              icon="save"
+              :title="$t('user_card.edit_profile')"
+            />
           </button>
-          <button
-            class="btn button-default btn-mention"
-            :disabled="user.deactivated"
-            @click="mentionUser"
-          >
-            {{ $t('user_card.mention') }}
-          </button>
-          <ModerationTools
-            v-if="showModerationMenu"
-            class="moderation-menu"
-            :user="user"
-          />
         </div>
         <div
           v-if="!loggedIn && user.is_local"
@@ -355,7 +357,7 @@
               :key="option"
               :value="option"
             >
-              {{ $t('settings.actor_type_' + option) }}
+              {{ $t('settings.actor_type_' + (option === 'Person' ? 'person_proper' : option)) }}
             </option>
           </Select>
           <div v-if="groupActorAvailable">
@@ -653,85 +655,63 @@
       />
     </teleport>
     <teleport to="#modal">
-      <Modal
+      <DialogModal
         v-if="editImage"
-        :is-mute="true"
         class="edit-image"
-        :class="{ '-banner': editImage === 'banner' }"
-        @backdrop-clicked="editImage = false"
       >
-        <div class="panel">
-          <div class="panel-heading">
-            <h1 class="title">
-              {{ editImage === 'avatar' ? $t('settings.change_avatar') : $t('settings.change_banner') }}
-            </h1>
-          </div>
-          <div class="panel-body">
-            <div class="images-container">
-              <img
-                :src="editImage === 'avatar' ? avatarImgSrc : bannerImgSrc"
-                class="current-avatar"
-              />
-              <FAIcon
-                class="separator"
-                :icon="editImage === 'avatar' ? 'chevron-right' : 'chevron-down'"
-              />
-              <image-cropper
-                ref="cropper"
-                class="cropper"
-                :aspect-ratio="editImage === 'avatar' ? 1 : 3"
-                @submit="submitImage"
-              />
-            </div>
-            <button
-              id="pick-image"
-              class="button-default btn"
-              type="button"
-              @click="() => this.$refs.cropper.pickImage()"
-            >
-              {{ $t('settings.upload_picture') }}
-            </button>
-            <p class="visibility-notice">
-              {{ $t('settings.avatar_size_instruction') }}
-            </p>
-            <button
-              :title="editImage === 'avatar' ? $t('settings.reset_avatar') : $t('settings.reset_banner')"
-              class="button-unstyled reset-button"
-              @click="resetImage"
-            >
-            </button>
-            <div class="panel-footer">
-              <div/>
-              <button
-                class="button-default btn"
-                type="button"
-                @click="editImage = false"
-              >
-                {{ this.$t('image_cropper.cancel') }}
-              </button>
-              <button
-                class="button-default btn"
-                type="button"
-                @click="this.$refs.cropper.submit(true)"
-              >
-                {{ $t('image_cropper.save') }}
-              </button>
-              <button
-                class="button-default btn"
-                type="button"
-                @click="this.$refs.cropper.submit(false)"
-              >
-                {{ $t('image_cropper.save_without_cropping') }}
-              </button>
-              <FAIcon
-                v-if="submitting"
-                spin
-                icon="circle-notch"
-              />
-            </div>
-          </div>
+        <template #header>
+          {{ editImage === 'avatar' ? $t('settings.change_avatar') : $t('settings.change_banner') }}
+        </template>
+        <div class="image-container">
+          <image-cropper
+            ref="cropper"
+            class="cropper"
+            :aspect-ratio="editImage === 'avatar' ? 1 : 3"
+            @submit="submitImage"
+          />
         </div>
-      </Modal>
+        <button
+          id="pick-image"
+          class="button-default btn"
+          type="button"
+          @click="() => this.$refs.cropper.pickImage()"
+        >
+          {{ $t('settings.upload_picture') }}
+        </button>
+        <p class="visibility-notice">
+          {{ editImage === 'avatar' ? $t('settings.avatar_size_instruction') : $t('settings.banner_size_instruction' )}}
+        </p>
+        <template #footer>
+          <button
+            class="button-default btn"
+            type="button"
+            @click="editImage = false"
+          >
+            {{ this.$t('image_cropper.cancel') }}
+          </button>
+          <button
+            :title="editImage === 'avatar' ? $t('settings.reset_avatar') : $t('settings.reset_banner')"
+            class="button-default btn reset-button"
+            @click="resetImage"
+          >
+            {{ editImage === 'avatar' ? $t('settings.reset_avatar') : $t('settings.reset_banner' )}}
+          </button>
+          <button
+            class="button-default btn"
+            type="button"
+            @click="this.$refs.cropper.submit(false)"
+          >
+            {{ $t('image_cropper.save_without_cropping') }}
+          </button>
+          <button
+            class="button-default btn"
+            type="button"
+            @click="this.$refs.cropper.submit(true)"
+          >
+            {{ $t('image_cropper.save') }}
+          </button>
+        </template>
+      </DialogModal>
     </teleport>
   </div>
 </template>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 46bf9b31e..f284cbedb 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -387,6 +387,7 @@
     "actor_type": "This account is:",
     "actor_type_description": "Marking your account as a group will make it automatically repeat statuses that mention it.",
     "actor_type_Person": "a normal user",
+    "actor_type_person_proper": "a person",
     "actor_type_Service": "a bot",
     "actor_type_Group": "a group",
     "mobile_center_dialog": "Vertically center dialogs on mobile",
@@ -568,7 +569,8 @@
     "move_account_error": "Error moving account: {error}",
     "discoverable": "Allow discovery of this account in search results and other services",
     "domain_mutes": "Domains",
-    "avatar_size_instruction": "The recommended minimum size for avatar images is 150x150 pixels.",
+    "avatar_size_instruction": "The recommended minimum size for avatar images is 150x150 pixels. Recommended aspect ratio is 1:1",
+    "banner_size_instruction": "The recommended minimum size for banner images is 450x150 pixels. Recommended aspect ratio is 3:1",
     "pad_emoji": "Pad emoji with spaces when adding from picker",
     "autocomplete_select_first": "Automatically select the first candidate when autocomplete results are available",
     "unsaved_post_action": "When you try to close an unsaved posting form",

From ea3e054c2191bad9388a1da575eaa3b5272b0437 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 4 Aug 2025 23:16:27 +0300
Subject: [PATCH 20/22] changelog

---
 changelog.d/user_profile_edit.change | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 changelog.d/user_profile_edit.change

diff --git a/changelog.d/user_profile_edit.change b/changelog.d/user_profile_edit.change
new file mode 100644
index 000000000..dd2260260
--- /dev/null
+++ b/changelog.d/user_profile_edit.change
@@ -0,0 +1 @@
+Profile editing change overhaul

From fc90a92ecfabee6c003d1126d1942f37782d8f35 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 5 Aug 2025 00:24:00 +0300
Subject: [PATCH 21/22] better interaction buttons. can't get them quite right
 - limitation of html?

---
 src/components/user_card/user_card.scss | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index 84e103aec..caa358daf 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -163,7 +163,7 @@
   position: relative;
   margin: 0.6em;
   margin-bottom: 0;
-  text-align: right;
+  text-align: left;
 
   .user-identity {
     position: relative;
@@ -409,11 +409,13 @@
 
   .user-interactions {
     position: relative;
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(5em, 40%));
-    grid-gap: 0.6em;
-    max-width: 98vw;
-    margin-bottom: 0.6em;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.6em;
+
+    > * {
+      flex: 0 0 10%;
+    }
 
     .popover-trigger-button, .moderation-tools-button {
       width: 100%;

From d34ce95d1732eb758b1a76c7f7e9b358c762efee Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 5 Aug 2025 00:27:20 +0300
Subject: [PATCH 22/22] scale bottom line too

---
 src/components/user_card/user_card.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index caa358daf..913589725 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -338,6 +338,7 @@
       white-space: normal;
       font-weight: 500;
       font-size: 0.9em;
+      font-size: calc(max(90%, 2.5cqw));
       line-height: 1.5;
     }