chore: fix server selection ux [skip e2e]

Author: moughxyz

packages/snjs/lib/Services/Sync/SyncService.ts

@@ -940,7 +940,7 @@ export class SyncService
       return
     }
 
-    if (options.checkIntegrity) {
+    if (options.checkIntegrity && online) {
       await this.notifyEventSync(SyncEvent.SyncRequestsIntegrityCheck, {
         source: options.source as SyncSource,
       })

packages/web/src/javascripts/Application/Device/DesktopManager.ts

@@ -50,12 +50,7 @@ export class DesktopManager
     void this.backups.importWatchedDirectoryChanges(changes)
   }
 
-  async handleHomeServerStarted(serverUrl: string): Promise<void> {
-    const userIsSignedIn = this.application.sessions.isSignedIn()
-    if (!userIsSignedIn) {
-      await this.application.setCustomHost(serverUrl)
-    }
-  }
+  async handleHomeServerStarted(_serverUrl: string): Promise<void> {}
 
   beginTextBackupsTimer() {
     if (this.textBackupsInterval) {

packages/web/src/javascripts/Components/AccountMenu/AdvancedOptions.tsx

@@ -5,6 +5,7 @@ import DecoratedInput from '@/Components/Input/DecoratedInput'
 import Icon from '@/Components/Icon/Icon'
 import { useApplication } from '../ApplicationProvider'
 import ServerPicker from './ServerPicker/ServerPicker'
+import { DefaultHost } from '@standardnotes/snjs'
 
 type Props = {
   disabled?: boolean
@@ -23,8 +24,9 @@ const AdvancedOptions: FunctionComponent<Props> = ({
 }) => {
   const application = useApplication()
 
-  const { server, setServer } = application.accountMenuController
-  const [showAdvanced, setShowAdvanced] = useState(false)
+  const { server } = application.accountMenuController
+
+  const [showAdvanced, setShowAdvanced] = useState(server !== DefaultHost.Api)
 
   const [isPrivateUsername, setIsPrivateUsername] = useState(false)
   const [privateUsername, setPrivateUsername] = useState('')
@@ -34,6 +36,14 @@ const AdvancedOptions: FunctionComponent<Props> = ({
 
   const [isStrictSignin, setIsStrictSignin] = useState(false)
 
+  useEffect(() => {
+    void application.homeServer?.isHomeServerRunning().then((isRunning) => {
+      if (isRunning) {
+        setShowAdvanced(true)
+      }
+    })
+  }, [application.homeServer])
+
   useEffect(() => {
     const recomputePrivateUsername = async () => {
       const identifier = await application.computePrivateUsername(privateUsername)
@@ -85,14 +95,6 @@ const AdvancedOptions: FunctionComponent<Props> = ({
     [onRecoveryCodesChange],
   )
 
-  const handleSyncServerChange = useCallback(
-    (server: string, websocketUrl?: string) => {
-      setServer(server)
-      application.setCustomHost(server, websocketUrl).catch(console.error)
-    },
-    [application, setServer],
-  )
-
   const handleStrictSigninChange = useCallback(() => {
     const newValue = !isStrictSignin
     setIsStrictSignin(newValue)
@@ -194,7 +196,7 @@ const AdvancedOptions: FunctionComponent<Props> = ({
               </>
             )}
           </div>
-          <ServerPicker customServerAddress={server} handleCustomServerAddressChange={handleSyncServerChange} />
+          <ServerPicker />
         </>
       ) : null}
     </>

packages/web/src/javascripts/Components/AccountMenu/ServerPicker/ServerPicker.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { ServerType } from './ServerType'
 import DecoratedInput from '@/Components/Input/DecoratedInput'
 import Icon from '@/Components/Icon/Icon'
@@ -8,22 +8,45 @@ import RadioButtonGroup from '@/Components/RadioButtonGroup/RadioButtonGroup'
 import { DefaultHost } from '@standardnotes/snjs'
 
 type Props = {
-  customServerAddress?: string
-  handleCustomServerAddressChange: (value: string, websocketUrl?: string) => void
   className?: string
 }
 
-const ServerPicker = ({ className, customServerAddress, handleCustomServerAddressChange }: Props) => {
+const ServerPicker = ({ className }: Props) => {
   const application = useApplication()
 
   const [currentType, setCurrentType] = useState<ServerType>('standard')
 
+  const { server, setServer } = application.accountMenuController
+
+  const determineServerType = useCallback(async () => {
+    const homeServerUrl = await application.homeServer?.getHomeServerUrl()
+    if (homeServerUrl && server === homeServerUrl) {
+      setCurrentType('home server')
+    } else if (server === DefaultHost.Api) {
+      setCurrentType('standard')
+    } else {
+      setCurrentType('custom')
+    }
+  }, [application.homeServer, server])
+
+  const handleSyncServerChange = useCallback(
+    (server: string, websocketUrl?: string) => {
+      setServer(server)
+      void determineServerType()
+      application.setCustomHost(server, websocketUrl).catch(console.error)
+    },
+    [application, setServer, determineServerType],
+  )
+
+  useEffect(() => {
+    void determineServerType()
+  }, [application, server, determineServerType])
+
   const selectTab = async (type: ServerType) => {
     setCurrentType(type)
     if (type === 'standard') {
-      handleCustomServerAddressChange(DefaultHost.Api, DefaultHost.WebSocket)
-    }
-    if (type === 'home server') {
+      handleSyncServerChange(DefaultHost.Api, DefaultHost.WebSocket)
+    } else if (type === 'home server') {
       if (!application.homeServer) {
         application.alerts
           .alert('Home server is not running. Please open the prefences and home server tab to start it.')
@@ -41,7 +64,7 @@ const ServerPicker = ({ className, customServerAddress, handleCustomServerAddres
         return
       }
 
-      handleCustomServerAddressChange(homeServerUrl)
+      handleSyncServerChange(homeServerUrl)
     }
   }
 
@@ -69,8 +92,8 @@ const ServerPicker = ({ className, customServerAddress, handleCustomServerAddres
           type="text"
           left={[<Icon type="server" className="text-neutral" />]}
           placeholder={DefaultHost.Api}
-          value={customServerAddress}
-          onChange={handleCustomServerAddressChange}
+          value={server}
+          onChange={handleSyncServerChange}
         />
       )}
     </div>