fix: Auto scroll settings from settings home

packages/shared/components/SettingsMenu.svelte

@@ -8,7 +8,7 @@
     export let iconColor
     export let title
     export let description
-    export let onClick = () => {}
+    export let onClick = (setting) => {}
 </script>
 
 <div class="flex-1">
@@ -17,7 +17,7 @@
     <Text type="p" classes="mb-4" secondary>{description}</Text>
     {#each Object.values(settings) as setting}
         <button
-            on:click={() => onClick()}
+            on:click={() => onClick(setting)}
             class="group flex flex-row justify-start items-center hover:bg-blue-50 py-2 rounded-lg w-3/4 text-left">
             <Icon icon={icons[setting]} classes="text-gray-500 ml-1 mr-3 group-hover:text-blue-500" />
             <Text type="p" secondary classes="group-hover:text-blue-500">{locale(`views.settings.${setting}.title`)}</Text>

packages/shared/lib/router.ts

@@ -70,6 +70,11 @@ export const accountRoute = writable<AccountRoutes>(AccountRoutes.Init)
  */
 export const settingsRoute = writable<SettingsRoutes>(SettingsRoutes.Init)
 
+/**
+ * Settings child route
+ */
+ export const settingsChildRoute = writable<string>(null)
+
 /**
  * Navigate to initial route
  */

packages/shared/routes/dashboard/settings/Settings.svelte

@@ -1,7 +1,7 @@
 <script lang="typescript">
     import { deepLinkRequestActive } from 'shared/lib/deepLinking'
     import { activeProfile } from 'shared/lib/profile'
-    import { settingsRoute } from 'shared/lib/router'
+    import { settingsChildRoute, settingsRoute } from 'shared/lib/router'
     import { SettingsRoutes } from 'shared/lib/typings/routes'
     import { createEventDispatcher, onDestroy } from 'svelte'
     import { get } from 'svelte/store'
@@ -25,6 +25,7 @@
 
     onDestroy(() => {
         settingsRoute.set(SettingsRoutes.Init)
+        settingsChildRoute.set(null)
     })
 </script>
 

packages/shared/routes/dashboard/settings/views/SettingsHome.svelte

@@ -2,7 +2,7 @@
     import { SettingsRoutes, GeneralSettings, SecuritySettings, AdvancedSettings, HelpAndInfo } from 'shared/lib/typings/routes'
     import { SettingsIcons } from 'shared/lib/typings/icons'
     import { Text, SettingsMenu } from 'shared/components'
-    import { settingsRoute } from 'shared/lib/router';
+    import { settingsChildRoute, settingsRoute } from 'shared/lib/router';
 
     export let locale
     export let mobile
@@ -21,7 +21,10 @@
                 settings={GeneralSettings}
                 title={locale('views.settings.generalSettings.title')}
                 description={locale('views.settings.generalSettings.description')}
-                onClick={() => settingsRoute.set(SettingsRoutes.GeneralSettings)}
+                onClick={(setting) => {
+                    settingsRoute.set(SettingsRoutes.GeneralSettings)
+                    settingsChildRoute.set(setting)
+                }}
                 {locale} />
             <SettingsMenu
                 icon="security"
@@ -30,7 +33,10 @@
                 settings={SecuritySettings}
                 title={locale('views.settings.security.title')}
                 description={locale('views.settings.security.description')}
-                onClick={() => settingsRoute.set(SettingsRoutes.Security)}
+                onClick={(setting) => {
+                    settingsRoute.set(SettingsRoutes.Security)
+                    settingsChildRoute.set(setting)
+                }}
                 {locale} />
             <SettingsMenu
                 icon="tools"
@@ -39,7 +45,10 @@
                 settings={AdvancedSettings}
                 title={locale('views.settings.advancedSettings.title')}
                 description={locale('views.settings.advancedSettings.description')}
-                onClick={() => settingsRoute.set(SettingsRoutes.AdvancedSettings)}
+                onClick={(setting) => {
+                    settingsRoute.set(SettingsRoutes.AdvancedSettings)
+                    settingsChildRoute.set(setting)
+                }}
                 {locale} />
             <SettingsMenu
                 icon="info"
@@ -48,7 +57,10 @@
                 settings={HelpAndInfo}
                 title={locale('views.settings.helpAndInfo.title')}
                 description={locale('views.settings.helpAndInfo.description')}
-                onClick={() => settingsRoute.set(SettingsRoutes.HelpAndInfo)}
+                onClick={(setting) => {
+                    settingsRoute.set(SettingsRoutes.HelpAndInfo)
+                    settingsChildRoute.set(setting)
+                }}
                 {locale} />
         </div>
     </div>

packages/shared/routes/dashboard/settings/views/SettingsViewer.svelte

@@ -1,9 +1,11 @@
 <script lang="typescript">
     import { Icon, Scroller, SettingsNavigator, Text } from 'shared/components'
-    import { settingsRoute } from 'shared/lib/router'
+    import { settingsChildRoute, settingsRoute } from 'shared/lib/router'
     import { SettingsIcons } from 'shared/lib/typings/icons'
     import { AdvancedSettings, GeneralSettings, HelpAndInfo, SecuritySettings, SettingsRoutes } from 'shared/lib/typings/routes'
+    import { onMount } from 'svelte'
     import { Advanced, General, Security } from './'
+
     export let locale
     export let mobile
 
@@ -21,11 +23,11 @@
         helpAndInfo: HelpAndInfo,
     }
 
-    function scrollIntoView(id) {
+    function scrollIntoView(id, options = null) {
         if (id) {
             const elem = document.getElementById(id)
             if (elem) {
-                elem.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'nearest' })
+                elem.scrollIntoView(options ?? { behavior: 'smooth' })
             } else {
                 console.error(`Element with id "${id}" missing in scrollIntoView`)
             }
@@ -34,6 +36,13 @@
     function goToSettingsHome() {
         settingsRoute.set(SettingsRoutes.Init)
     }
+    onMount(() => {
+        const child = $settingsChildRoute
+        settingsChildRoute.set(null)
+        if (child) {
+            scrollIntoView(child, { behavior: 'auto' })
+        }
+    })
 </script>
 
 {#if mobile}