chore: open and focus download limit preference on "Change limit" press

packages/web/src/javascripts/Components/FilePreview/FilePreview.tsx

@@ -17,6 +17,7 @@ import { ProtectedIllustration } from '@standardnotes/icons'
 import { ImageZoomLevelProps } from './ImageZoomLevelProps'
 import { useLocalPreference } from '../../Hooks/usePreference'
 import { formatSizeToReadableString } from '@standardnotes/filepicker'
+import { ElementIds } from '@/Constants/ElementIDs'
 
 type Props = {
   application: WebApplication
@@ -147,7 +148,35 @@ const FilePreview = ({ file, application, isEmbeddedInSuper = false, imageZoomLe
           </Button>
           <Button
             onClick={() => {
-              /* open preferences */
+              const preferences = application.preferencesController
+              preferences.openPreferences('general')
+              setTimeout(() => {
+                const prefElement = document.getElementById(ElementIds.AutoDownloadLimitPreference)
+                if (prefElement) {
+                  prefElement.scrollIntoView({
+                    block: 'center',
+                  })
+                  prefElement.querySelector('button')?.focus()
+                  setTimeout(() => {
+                    prefElement.animate(
+                      [
+                        {
+                          transform: 'scale(1)',
+                        },
+                        {
+                          transform: 'scale(1.05)',
+                        },
+                        {
+                          transform: 'scale(1)',
+                        },
+                      ],
+                      {
+                        duration: 350,
+                      },
+                    )
+                  }, 100)
+                }
+              }, 50)
             }}
           >
             Change limit

packages/web/src/javascripts/Components/Preferences/Controller/PreferencesSessionController.ts

@@ -1,4 +1,4 @@
-import { action, makeAutoObservable, observable } from 'mobx'
+import { action, autorun, makeAutoObservable, observable } from 'mobx'
 import { WebApplication } from '@/Application/WebApplication'
 import { PackageProvider } from '../Panes/Plugins/PackageProvider'
 import { securityPrefsHasBubble } from '../Panes/Security/securityPrefsHasBubble'
@@ -59,6 +59,10 @@ export class PreferencesSessionController {
         this.updateMenuBubbleCounts()
       }
     })
+
+    autorun(() => {
+      this.selectPane(application.preferencesController.currentPane)
+    })
   }
 
   private updateMenuBubbleCounts(): void {

packages/web/src/javascripts/Components/Preferences/Panes/General/SuperNotes.tsx

@@ -9,6 +9,7 @@ import { WebApplication } from '../../../../Application/WebApplication'
 import HorizontalSeparator from '../../../Shared/HorizontalSeparator'
 import Dropdown from '../../../Dropdown/Dropdown'
 import { useMemo } from 'react'
+import { ElementIds } from '@/Constants/ElementIDs'
 
 const SuperNotes = ({ application }: { application: WebApplication }) => {
   const isMobile = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.sm)
@@ -103,7 +104,7 @@ const SuperNotes = ({ application }: { application: WebApplication }) => {
           />
         </div>
         <HorizontalSeparator classes="my-4" />
-        <div>
+        <div id={ElementIds.AutoDownloadLimitPreference}>
           <Subtitle>Auto-download limit for embedded files</Subtitle>
           <Text>Only embedded files below the set limit be automatically downloaded</Text>
           <div className="mt-2">

packages/web/src/javascripts/Components/Preferences/PreferencesView.tsx

@@ -17,10 +17,6 @@ const PreferencesView: FunctionComponent<PreferencesProps> = ({ application, clo
     [application],
   )
 
-  useEffect(() => {
-    menu.selectPane(application.preferencesController.currentPane)
-  }, [menu, application.preferencesController.currentPane])
-
   const isMobileScreen = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.sm)
 
   const addAndroidBackHandler = useAndroidBackHandler()

packages/web/src/javascripts/Constants/ElementIDs.ts

@@ -15,4 +15,5 @@ export const ElementIds = {
   SearchBar: 'search-bar',
   ConflictResolutionButton: 'conflict-resolution-button',
   SuperEditor: 'super-editor',
+  AutoDownloadLimitPreference: 'auto-download-limit-pref',
 } as const