From fb12a139bc8e3922deea813f6a6b8acbefb2ea16 Mon Sep 17 00:00:00 2001
From: Max <maxharz@gmail.com>
Date: Mon, 14 Apr 2025 19:56:29 +0200
Subject: [PATCH] fix(webapp): better settings ux (#8347)

* Scroll to notification settings when opened (for mobile)

* scroll to settings content when clicking on menu entry

* Scroll to settings content on mobile and fix weird loading state

* Add fail-safety

* Fix linting
---
 webapp/pages/settings.vue                     | 29 ++++++++++++++++---
 webapp/pages/settings/blocked-users.vue       |  2 ++
 webapp/pages/settings/data-download.vue       |  2 ++
 webapp/pages/settings/delete-account.vue      |  2 ++
 webapp/pages/settings/embeds.vue              |  2 ++
 webapp/pages/settings/index.vue               |  2 ++
 webapp/pages/settings/invites.vue             |  2 ++
 webapp/pages/settings/languages.vue           |  2 ++
 webapp/pages/settings/muted-users.vue         |  2 ++
 .../pages/settings/my-email-address/index.vue |  2 ++
 webapp/pages/settings/my-organizations.vue    |  2 ++
 webapp/pages/settings/my-social-media.vue     |  2 ++
 webapp/pages/settings/notifications.vue       |  2 ++
 webapp/pages/settings/privacy.vue             |  2 ++
 webapp/pages/settings/scroll-to-content.js    | 13 +++++++++
 webapp/pages/settings/security.vue            |  2 ++
 16 files changed, 66 insertions(+), 4 deletions(-)
 create mode 100644 webapp/pages/settings/scroll-to-content.js

diff --git a/webapp/pages/settings.vue b/webapp/pages/settings.vue
index 1fce64d8f..5d526c3cc 100644
--- a/webapp/pages/settings.vue
+++ b/webapp/pages/settings.vue
@@ -5,14 +5,14 @@
     </ds-space>
     <ds-space margin="large" />
     <ds-flex gutter="small">
-      <ds-flex-item :width="{ base: '100%', md: '200px' }">
+      <div class="menu-container">
         <ds-menu :routes="routes" :is-exact="() => true" />
-      </ds-flex-item>
-      <ds-flex-item :width="{ base: '100%', md: 1 }">
+      </div>
+      <div class="settings-content" id="settings-content">
         <transition name="slide-up" appear>
           <nuxt-child />
         </transition>
-      </ds-flex-item>
+      </div>
     </ds-flex>
   </div>
 </template>
@@ -87,3 +87,24 @@ export default {
   },
 }
 </script>
+
+<style scoped>
+.menu-container {
+  width: 100%;
+}
+.settings-content {
+  flex: 1;
+  padding: 0 24px;
+  margin-top: 32px;
+}
+
+@media screen and (min-width: 600px) {
+  .settings-content {
+    margin-top: 0;
+  }
+
+  .menu-container {
+    width: 200px;
+  }
+}
+</style>
diff --git a/webapp/pages/settings/blocked-users.vue b/webapp/pages/settings/blocked-users.vue
index 90519452f..0eed6d370 100644
--- a/webapp/pages/settings/blocked-users.vue
+++ b/webapp/pages/settings/blocked-users.vue
@@ -75,8 +75,10 @@
 <script>
 import { blockedUsers, unblockUser } from '~/graphql/settings/BlockedUsers'
 import ProfileAvatar from '~/components/_new/generic/ProfileAvatar/ProfileAvatar'
+import scrollToContent from './scroll-to-content.js'
 
 export default {
+  mixins: [scrollToContent],
   components: {
     ProfileAvatar,
   },
diff --git a/webapp/pages/settings/data-download.vue b/webapp/pages/settings/data-download.vue
index ca6755bd5..c3710dbd7 100644
--- a/webapp/pages/settings/data-download.vue
+++ b/webapp/pages/settings/data-download.vue
@@ -26,8 +26,10 @@ import { mapGetters } from 'vuex'
 import { userDataQuery } from '~/graphql/User'
 import BaseButton from '~/components/_new/generic/BaseButton/BaseButton.vue'
 import isEmpty from 'lodash/isEmpty'
+import scrollToContent from './scroll-to-content.js'
 
 export default {
+  mixins: [scrollToContent],
   components: {
     BaseButton,
   },
diff --git a/webapp/pages/settings/delete-account.vue b/webapp/pages/settings/delete-account.vue
index e1872bf4c..e3d29d6d7 100644
--- a/webapp/pages/settings/delete-account.vue
+++ b/webapp/pages/settings/delete-account.vue
@@ -4,8 +4,10 @@
 
 <script>
 import DeleteData from '~/components/DeleteData/DeleteData.vue'
+import scrollToContent from './scroll-to-content.js'
 
 export default {
+  mixins: [scrollToContent],
   components: {
     DeleteData,
   },
diff --git a/webapp/pages/settings/embeds.vue b/webapp/pages/settings/embeds.vue
index 4b0ef95d7..53db65e5e 100644
--- a/webapp/pages/settings/embeds.vue
+++ b/webapp/pages/settings/embeds.vue
@@ -39,8 +39,10 @@
 import axios from 'axios'
 import { mapGetters, mapMutations } from 'vuex'
 import { updateUserMutation } from '~/graphql/User.js'
+import scrollToContent from './scroll-to-content.js'
 
 export default {
+  mixins: [scrollToContent],
   head() {
     return {
       title: this.$t('settings.embeds.name'),
diff --git a/webapp/pages/settings/index.vue b/webapp/pages/settings/index.vue
index 6cae7e44c..5c66eb3cf 100644
--- a/webapp/pages/settings/index.vue
+++ b/webapp/pages/settings/index.vue
@@ -47,10 +47,12 @@ import { mapGetters, mapMutations } from 'vuex'
 import UniqueSlugForm from '~/components/utils/UniqueSlugForm'
 import { updateUserMutation } from '~/graphql/User'
 import { queryLocations } from '~/graphql/location'
+import scrollToContent from './scroll-to-content.js'
 
 let timeout
 
 export default {
+  mixins: [scrollToContent],
   name: 'NewsFeed',
   data() {
     return {
diff --git a/webapp/pages/settings/invites.vue b/webapp/pages/settings/invites.vue
index 0871084e3..9ec276a36 100644
--- a/webapp/pages/settings/invites.vue
+++ b/webapp/pages/settings/invites.vue
@@ -7,8 +7,10 @@
 
 <script>
 import HcEmpty from '~/components/Empty/Empty'
+import scrollToContent from './scroll-to-content.js'
 
 export default {
+  mixins: [scrollToContent],
   components: {
     HcEmpty,
   },
diff --git a/webapp/pages/settings/languages.vue b/webapp/pages/settings/languages.vue
index e60cc456a..15889f4c3 100644
--- a/webapp/pages/settings/languages.vue
+++ b/webapp/pages/settings/languages.vue
@@ -7,8 +7,10 @@
 
 <script>
 import HcEmpty from '~/components/Empty/Empty'
+import scrollToContent from './scroll-to-content.js'
 
 export default {
+  mixins: [scrollToContent],
   components: {
     HcEmpty,
   },
diff --git a/webapp/pages/settings/muted-users.vue b/webapp/pages/settings/muted-users.vue
index d314d31d4..bb0314672 100644
--- a/webapp/pages/settings/muted-users.vue
+++ b/webapp/pages/settings/muted-users.vue
@@ -72,8 +72,10 @@
 <script>
 import { mutedUsers, unmuteUser } from '~/graphql/settings/MutedUsers'
 import ProfileAvatar from '~/components/_new/generic/ProfileAvatar/ProfileAvatar'
+import scrollToContent from './scroll-to-content.js'
 
 export default {
+  mixins: [scrollToContent],
   components: {
     ProfileAvatar,
   },
diff --git a/webapp/pages/settings/my-email-address/index.vue b/webapp/pages/settings/my-email-address/index.vue
index 2d2cc406f..e46746e62 100644
--- a/webapp/pages/settings/my-email-address/index.vue
+++ b/webapp/pages/settings/my-email-address/index.vue
@@ -31,8 +31,10 @@ import { mapGetters } from 'vuex'
 import { AddEmailAddressMutation } from '~/graphql/EmailAddress.js'
 import { SweetalertIcon } from 'vue-sweetalert-icons'
 import normalizeEmail from '~/components/utils/NormalizeEmail'
+import scrollToContent from '../scroll-to-content.js'
 
 export default {
+  mixins: [scrollToContent],
   components: {
     SweetalertIcon,
   },
diff --git a/webapp/pages/settings/my-organizations.vue b/webapp/pages/settings/my-organizations.vue
index 194fa3f7e..12b852cf2 100644
--- a/webapp/pages/settings/my-organizations.vue
+++ b/webapp/pages/settings/my-organizations.vue
@@ -7,8 +7,10 @@
 
 <script>
 import HcEmpty from '~/components/Empty/Empty'
+import scrollToContent from './scroll-to-content.js'
 
 export default {
+  mixins: [scrollToContent],
   components: {
     HcEmpty,
   },
diff --git a/webapp/pages/settings/my-social-media.vue b/webapp/pages/settings/my-social-media.vue
index aa303e74c..b1d4f3be5 100644
--- a/webapp/pages/settings/my-social-media.vue
+++ b/webapp/pages/settings/my-social-media.vue
@@ -35,8 +35,10 @@ import {
 } from '~/graphql/SocialMedia.js'
 import MySomethingList from '~/components/_new/features/MySomethingList/MySomethingList.vue'
 import SocialMediaListItem from '~/components/_new/features/SocialMedia/SocialMediaListItem.vue'
+import scrollToContent from './scroll-to-content.js'
 
 export default {
+  mixins: [scrollToContent],
   components: {
     MySomethingList,
     SocialMediaListItem,
diff --git a/webapp/pages/settings/notifications.vue b/webapp/pages/settings/notifications.vue
index 35249a37d..36e0d9081 100644
--- a/webapp/pages/settings/notifications.vue
+++ b/webapp/pages/settings/notifications.vue
@@ -29,8 +29,10 @@
 <script>
 import { mapGetters, mapMutations } from 'vuex'
 import { updateUserMutation } from '~/graphql/User'
+import scrollToContent from './scroll-to-content.js'
 
 export default {
+  mixins: [scrollToContent],
   data() {
     return {
       emailNotificationSettings: [],
diff --git a/webapp/pages/settings/privacy.vue b/webapp/pages/settings/privacy.vue
index 71fd31946..d824933ec 100644
--- a/webapp/pages/settings/privacy.vue
+++ b/webapp/pages/settings/privacy.vue
@@ -12,8 +12,10 @@
 <script>
 import { mapGetters, mapMutations } from 'vuex'
 import { updateUserMutation } from '~/graphql/User'
+import scrollToContent from './scroll-to-content.js'
 
 export default {
+  mixins: [scrollToContent],
   data() {
     return {
       shoutsAllowed: false,
diff --git a/webapp/pages/settings/scroll-to-content.js b/webapp/pages/settings/scroll-to-content.js
new file mode 100644
index 000000000..32bf71e1c
--- /dev/null
+++ b/webapp/pages/settings/scroll-to-content.js
@@ -0,0 +1,13 @@
+export default {
+  mounted() {
+    if (document.documentElement.clientWidth >= 600) return
+
+    const content = document.getElementById('settings-content')
+
+    if (!content) return
+
+    content.scrollIntoView({
+      behavior: 'smooth',
+    })
+  },
+}
diff --git a/webapp/pages/settings/security.vue b/webapp/pages/settings/security.vue
index e8754ada9..f3e4f065c 100644
--- a/webapp/pages/settings/security.vue
+++ b/webapp/pages/settings/security.vue
@@ -7,8 +7,10 @@
 
 <script>
 import ChangePassword from '~/components/Password/Change'
+import scrollToContent from './scroll-to-content.js'
 
 export default {
+  mixins: [scrollToContent],
   components: {
     ChangePassword,
   },