From 3311c676ad38f22a45b99a2a65f037c1fcafe268 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 5 Aug 2025 14:43:37 +0300
Subject: [PATCH] better layout & wording

---
 .../settings_modal/tabs/profile_tab.scss      | 14 ++++
 .../settings_modal/tabs/profile_tab.vue       | 17 +++--
 src/components/user_card/user_card.scss       |  1 +
 src/components/user_card/user_card.vue        | 70 +++++++++----------
 src/i18n/en.json                              |  3 +-
 5 files changed, 62 insertions(+), 43 deletions(-)

diff --git a/src/components/settings_modal/tabs/profile_tab.scss b/src/components/settings_modal/tabs/profile_tab.scss
index 8f0f7862a..33a7c5ed0 100644
--- a/src/components/settings_modal/tabs/profile_tab.scss
+++ b/src/components/settings_modal/tabs/profile_tab.scss
@@ -1,4 +1,18 @@
 .profile-tab {
+  // overriding global for better look
+  div.profile-edit {
+    margin: 0;
+
+    h2 {
+      margin-left: 1rem;
+    }
+
+    .user-card {
+      padding: 1.2em;
+      overflow: hidden;
+    }
+  }
+
   .bio {
     margin: 0;
   }
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index 7be01d689..e3e5cc0a2 100644
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@@ -1,12 +1,15 @@
 <template>
   <div class="profile-tab">
-    <UserCard
-      :user-id="user.id"
-      :editable="true"
-      :switcher="false"
-      rounded="top"
-      >
-    </UserCard>
+    <div class="setting-item profile-edit">
+      <h2>{{ $t('settings.account_profile_edit') }}</h2>
+      <UserCard
+        :user-id="user.id"
+        :editable="true"
+        :switcher="false"
+        rounded="top"
+        >
+      </UserCard>
+    </div>
     <div class="setting-item">
       <h2>{{ $t('settings.account_privacy') }}</h2>
       <ul class="setting-list">
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index 1d5017d61..8b224efb6 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -426,6 +426,7 @@
 
 .user-profile-fields {
   margin: 0 0.5em;
+  padding: 0 0.5em;
   display: flex;
   flex-direction: column;
 
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 1e70ea4db..5bb21c838 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -330,41 +330,6 @@
         </div>
       </div>
     </div>
-    <template v-if="editable">
-      <h3>{{ $t('settings.user_preferences') }}</h3>
-      <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 === 'Person' ? 'person_proper' : 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"
@@ -646,6 +611,41 @@
         </div>
       </template>
     </div>
+    <template v-if="editable">
+      <h3>{{ $t('settings.profile_other') }}</h3>
+      <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 === 'Person' ? 'person_proper' : option)) }}
+            </option>
+          </Select>
+          <div v-if="groupActorAvailable">
+            <small>
+              {{ $t('settings.actor_type_description') }}
+            </small>
+          </div>
+        </label>
+      </p>
+    </template>
     <teleport to="#modal">
       <UserTimedFilterModal
         ref="timedMuteDialog"
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 91f6cc868..c38d18c36 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -493,7 +493,7 @@
     "avatarRadius": "Avatars",
     "background": "Background",
     "bio": "Bio",
-    "user_preferences": "Profile settings",
+    "profile_other": "Other",
     "email_language": "Language for receiving emails from the server",
     "block_export": "Block export",
     "block_export_button": "Export your blocks to a csv file",
@@ -664,6 +664,7 @@
       "label": "Birthday",
       "show_birthday": "Show my birthday"
     },
+    "account_profile_edit": "Edit Profile",
     "account_privacy": "Privacy",
     "use_contain_fit": "Don't crop the attachment in thumbnails",
     "name": "Name",