dirty state

src/components/user_card/user_card.js

@@ -1,4 +1,5 @@
 import merge from 'lodash/merge'
+import isEqual from 'lodash/isEqual'
 import unescape from 'lodash/unescape'
 
 import ColorInput from 'src/components/color_input/color_input.vue'
@@ -116,6 +117,7 @@ export default {
       newShowRole: user.show_role,
 
       newFields: user.fields?.map(field => ({ name: field.name, value: field.value })),
+
       editingFields: false,
     }
   },
@@ -123,6 +125,21 @@ export default {
     this.$store.dispatch('fetchUserRelationship', this.user.id)
   },
   computed: {
+    somethingToSave () {
+      if (this.newName !== this.user.name_unescaped) return true
+      if (this.newBio !== unescape(this.user.description)) return true
+      if (this.newAvatar !== null) return true
+      if (this.newBanner !== null) return true
+      if (this.newActorType !== this.user.actor_type) return true
+      if (this.newBirthday !== this.user.birthday) return true
+      if (this.newShowBirthday !== this.user.show_birthday) return true
+      if (this.newShowRole !== this.user.show_role) return true
+      if (!isEqual(
+        this.newFields,
+        this.user.fields?.map(field => ({ name: field.name, value: field.value }))
+      )) return true
+      return false
+    },
     groupActorAvailable () {
       return this.$store.state.instance.groupActorAvailable
     },

src/components/user_card/user_card.scss

@@ -153,6 +153,11 @@
     border-style: solid;
     border-color: var(--border);
   }
+
+  .bottom-buttons {
+    display: flex;
+    gap: 0.5em;
+  }
 }
 
 .user-info {

src/components/user_card/user_card.vue

@@ -293,34 +293,6 @@
               :user="user"
             />
           </template>
-          <button
-            v-if="editable"
-            :disabled="somethingToSave"
-            class="btn button-default reset-profile-button"
-            @click="resetState"
-          >
-            {{ $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-default save-profile-button"
-            @click="updateProfile"
-          >
-            {{ $t('settings.save') }}
-            <FAIcon
-              fixed-width
-              class="icon"
-              icon="save"
-              :title="$t('user_card.edit_profile')"
-            />
-          </button>
         </div>
         <div
           v-if="!loggedIn && user.is_local"
@@ -645,6 +617,36 @@
           </div>
         </label>
       </p>
+      <div class="bottom-buttons">
+        <button
+          v-if="editable"
+          :disabled="!somethingToSave"
+          class="btn button-default reset-profile-button"
+          @click="resetState"
+        >
+          {{ $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-default save-profile-button"
+          @click="updateProfile"
+        >
+          {{ $t('settings.save') }}
+          <FAIcon
+            fixed-width
+            class="icon"
+            icon="save"
+            :title="$t('user_card.edit_profile')"
+          />
+        </button>
+      </div>
     </template>
     <teleport to="#modal">
       <UserTimedFilterModal