chore: carify Pomade login errors with actionable invalid vs network messaging

Co-authored-by: deveshanim3 <deveshsingh6986@gmail.com>
Co-committed-by: deveshanim3 <deveshsingh6986@gmail.com>

src/app/components/EventActions.svelte

@@ -42,7 +42,7 @@
   let popover: Instance | undefined = $state()
 </script>
 
-<Button class="join rounded-full">
+<div class="join items-center rounded-full">
   {#if ENABLE_ZAPS && !hideZap}
     <ZapButton {url} {event} class="btn join-item btn-neutral btn-xs">
       <Icon icon={Bolt} size={4} />
@@ -52,6 +52,7 @@
     <Icon icon={SmileCircle} size={4} />
   </EmojiButton>
   <Tippy
+    class="flex"
     bind:popover
     component={EventMenu}
     props={{url, noun, event, customActions, onClick: hidePopover}}
@@ -60,4 +61,4 @@
       <Icon icon={MenuDots} size={4} />
     </Button>
   </Tippy>
-</Button>
+</div>

src/app/components/LogInEmail.svelte

@@ -19,6 +19,7 @@
   import LogInOTP from "@app/components/LogInOTP.svelte"
   import LogInSelect from "@app/components/LogInSelect.svelte"
   import {deleteDeactivatedPomadeSessions, loginWithPomade} from "@app/util/pomade"
+  import {getPomadeLoginFailureMessage, POMADE_NETWORK_ERROR_MESSAGE} from "@app/util/pomadeErrors"
   import {pushModal, clearModals} from "@app/util/modal"
   import {setChecked} from "@app/util/notifications"
   import {pushToast} from "@app/util/toast"
@@ -44,7 +45,7 @@
 
         return pushToast({
           theme: "error",
-          message: "Sorry, we were unable to log you in.",
+          message: getPomadeLoginFailureMessage(messages),
         })
       }
 
@@ -64,10 +65,17 @@
 
           pushToast({
             theme: "error",
-            message: "Sorry, we were unable to log you in.",
+            message: getPomadeLoginFailureMessage(res.messages),
           })
         }
       }
+    } catch (error) {
+      console.error("Login error:", error)
+
+      pushToast({
+        theme: "error",
+        message: POMADE_NETWORK_ERROR_MESSAGE,
+      })
     } finally {
       loading = false
     }
@@ -90,7 +98,7 @@
       {#snippet input()}
         <label class="input input-bordered flex w-full items-center gap-2">
           <Icon icon={Letter} />
-          <input bind:value={email} />
+          <input type="email" bind:value={email} />
         </label>
       {/snippet}
     </FieldInline>

src/app/components/LogInOTP.svelte

@@ -15,6 +15,7 @@
   import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import LogInOTPConfirm from "@app/components/LogInOTPConfirm.svelte"
+  import {POMADE_NETWORK_ERROR_MESSAGE} from "@app/util/pomadeErrors"
   import {pushModal} from "@app/util/modal"
   import {pushToast} from "@app/util/toast"
 
@@ -35,11 +36,20 @@
       if (ok) {
         pushModal(LogInOTPConfirm, {email, peersByPrefix})
       } else {
+        console.error("Pomade challenge request failed during OTP login")
+
         pushToast({
           theme: "error",
-          message: "Sorry, we were unable to request a login code.",
+          message: POMADE_NETWORK_ERROR_MESSAGE,
         })
       }
+    } catch (error) {
+      console.error(error)
+
+      pushToast({
+        theme: "error",
+        message: POMADE_NETWORK_ERROR_MESSAGE,
+      })
     } finally {
       loading = false
     }
@@ -61,7 +71,7 @@
       {#snippet input()}
         <label class="input input-bordered flex w-full items-center gap-2">
           <Icon icon={Letter} />
-          <input bind:value={email} />
+          <input type="email" bind:value={email} />
         </label>
       {/snippet}
     </FieldInline>

src/app/components/LogInOTPConfirm.svelte

@@ -15,10 +15,11 @@
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import StringMultiInput from "@lib/components/StringMultiInput.svelte"
   import LogInSelect from "@app/components/LogInSelect.svelte"
-  import {pushToast} from "@app/util/toast"
-  import {setChecked} from "@app/util/notifications"
   import {pushModal, clearModals} from "@app/util/modal"
+  import {setChecked} from "@app/util/notifications"
   import {deleteDeactivatedPomadeSessions, loginWithPomade} from "@app/util/pomade"
+  import {getPomadeLoginFailureMessage, POMADE_NETWORK_ERROR_MESSAGE} from "@app/util/pomadeErrors"
+  import {pushToast} from "@app/util/toast"
 
   type Props = {
     email: string
@@ -44,7 +45,7 @@
 
         return pushToast({
           theme: "error",
-          message: "Sorry, we were unable to log you in.",
+          message: getPomadeLoginFailureMessage(messages),
         })
       }
 
@@ -64,10 +65,17 @@
 
           pushToast({
             theme: "error",
-            message: "Sorry, we were unable to log you in.",
+            message: getPomadeLoginFailureMessage(res.messages),
           })
         }
       }
+    } catch (error) {
+      console.error("Login error:", error)
+
+      pushToast({
+        theme: "error",
+        message: POMADE_NETWORK_ERROR_MESSAGE,
+      })
     } finally {
       loading = false
     }

src/app/components/LogInSelect.svelte

@@ -14,6 +14,7 @@
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import Profile from "@app/components/Profile.svelte"
   import {deleteDeactivatedPomadeSessions, loginWithPomade} from "@app/util/pomade"
+  import {getPomadeLoginFailureMessage, POMADE_NETWORK_ERROR_MESSAGE} from "@app/util/pomadeErrors"
   import {setChecked} from "@app/util/notifications"
   import {clearModals} from "@app/util/modal"
   import {pushToast} from "@app/util/toast"
@@ -46,9 +47,16 @@
 
         pushToast({
           theme: "error",
-          message: "Sorry, we were unable to log you in.",
+          message: getPomadeLoginFailureMessage(res.messages),
         })
       }
+    } catch (error) {
+      console.error("Login error:", error)
+
+      pushToast({
+        theme: "error",
+        message: POMADE_NETWORK_ERROR_MESSAGE,
+      })
     } finally {
       loading = false
     }

src/app/components/SignUpEmail.svelte

@@ -120,7 +120,7 @@
       {#snippet input()}
         <label class="input input-bordered flex w-full items-center gap-2">
           <Icon icon={Letter} />
-          <input bind:value={email} />
+          <input type="email" bind:value={email} />
         </label>
       {/snippet}
     </FieldInline>
@@ -134,6 +134,9 @@
           <input type="password" bind:value={password} />
         </label>
       {/snippet}
+      {#snippet info()}
+        Must be at least 12 characters long.
+      {/snippet}
     </FieldInline>
   </ModalBody>
   <ModalFooter>

src/app/components/SpaceInvite.svelte

@@ -25,6 +25,16 @@
   const {url} = $props()
 
   const authError = deriveRelayAuthError(url)
+  let networkError = $state(false)
+  const isExplicitAuthError = $derived(
+    $authError &&
+      !(
+        $authError.toLowerCase().includes("failed") ||
+        $authError.toLowerCase().includes("timeout") ||
+        $authError.toLowerCase().includes("network")
+      ),
+  )
+  const isGenericError = $derived(networkError || ($authError && !isExplicitAuthError))
 
   const back = () => history.back()
   const copyInvite = () => clip(invite)
@@ -70,8 +80,14 @@
       ])
 
       claim = getTagValue("claim", event?.tags || []) || ""
-    } catch {
+    } catch (err) {
       claim = ""
+      if (
+        (err instanceof Error && (err.name === "AbortError" || err.name === "TimeoutError")) ||
+        !navigator.onLine
+      ) {
+        networkError = true
+      }
     } finally {
       loading = false
     }
@@ -92,7 +108,11 @@
         <p class="center">
           <Spinner {loading}>Requesting an invite link...</Spinner>
         </p>
-      {:else if $authError}
+      {:else if isGenericError}
+        <p class="center text-center">
+          Unable to reach the relay. Please check your connection and try again.
+        </p>
+      {:else if isExplicitAuthError}
         <p class="center">Oops! It looks like you're not a member of this relay.</p>
       {:else}
         <div class="flex flex-col items-center gap-6">

src/app/components/SpaceRelayStatus.svelte

@@ -46,7 +46,7 @@
         </div>
       {/if}
       {#if Array.isArray(supported_nips)}
-        <p class="badge badge-neutral">
+        <p class="badge badge-neutral text-wrap h-auto">
           <span class="ellipsize">Supported NIPs: {supported_nips.join(", ")}</span>
         </p>
       {/if}

src/app/util/pomadeErrors.ts

@@ -0,0 +1,11 @@
+export const POMADE_INVALID_LOGIN_MESSAGE = "Invalid login information"
+export const POMADE_NETWORK_ERROR_MESSAGE = "Network error, please try again"
+
+type PomadeMessage = {
+  res?: unknown
+}
+
+export const getPomadeLoginFailureMessage = (messages: PomadeMessage[]) =>
+  messages.some(message => message.res !== undefined)
+    ? POMADE_INVALID_LOGIN_MESSAGE
+    : POMADE_NETWORK_ERROR_MESSAGE

src/lib/components/EmojiButton.svelte

@@ -31,6 +31,7 @@
 <svelte:document onmousemove={onMouseMove} />
 
 <Tippy
+  class="flex"
   bind:popover
   component={EmojiPicker}
   props={{onClick}}

src/routes/settings/profile/+page.svelte

@@ -27,6 +27,7 @@
   import PasswordReset from "@app/components/PasswordReset.svelte"
   import InfoKeys from "@app/components/InfoKeys.svelte"
   import {pushModal} from "@app/util/modal"
+  import {POMADE_NETWORK_ERROR_MESSAGE} from "@app/util/pomadeErrors"
   import {clip, pushToast} from "@app/util/toast"
 
   const npub = nip19.npubEncode($pubkey!)
@@ -48,13 +49,24 @@
       const {ok, peersByPrefix} = await Client.requestChallenge($session!.email)
 
       if (!ok) {
+        console.error("Pomade challenge request failed during password reset initiation")
+
         pushToast({
           theme: "error",
-          message: "Failed to initiate password reset!",
+          message: POMADE_NETWORK_ERROR_MESSAGE,
         })
+
+        return
       }
 
       pushModal(PasswordReset, {peersByPrefix})
+    } catch (error) {
+      console.error(error)
+
+      pushToast({
+        theme: "error",
+        message: POMADE_NETWORK_ERROR_MESSAGE,
+      })
     } finally {
       loading = false
     }

src/routes/spaces/[relay]/[h]/+page.svelte

@@ -4,6 +4,7 @@
   import {page} from "$app/stores"
   import {goto} from "$app/navigation"
   import type {Readable} from "svelte/store"
+  import {debounce} from "throttle-debounce"
   import {pubkey, publishThunk, waitForThunkError, joinRoom, leaveRoom} from "@welshman/app"
   import {now, ifLet, int, formatTimestampAsDate, ago, MINUTE} from "@welshman/lib"
   import type {MakeNonOptional} from "@welshman/lib"
@@ -244,6 +245,8 @@
   const onScroll = () => {
     if (!isProgrammaticScroll) {
       userHasScrolled = true
+      isUserScrolling = true
+      clearIsUserScrolling()
       manageScrollPosition()
     }
 
@@ -265,6 +268,7 @@
   let leaving = $state(false)
   let userHasScrolled = $state(false)
   let isProgrammaticScroll = $state(false)
+  let isUserScrolling = $state(false)
   let loadingBackward = $state(true)
   let loadingForward = $state(true)
   let share = $state(popKey<TrustedEvent | undefined>("share"))
@@ -278,6 +282,10 @@
   let compose: RoomCompose | undefined = $state()
   let eventToEdit: TrustedEvent | undefined = $state()
 
+  const clearIsUserScrolling = debounce(150, () => {
+    isUserScrolling = false
+  })
+
   const elements = $derived.by(() => {
     const elements = []
     const seen = new Set()
@@ -351,7 +359,7 @@
   })
 
   $effect(() => {
-    if (elements.length > 0) {
+    if (elements.length > 0 && !isUserScrolling) {
       requestAnimationFrame(manageScrollPosition)
     }
   })

src/routes/spaces/[relay]/chat/+page.svelte

@@ -4,6 +4,7 @@
   import {goto} from "$app/navigation"
   import type {Readable} from "svelte/store"
   import {readable} from "svelte/store"
+  import {debounce} from "throttle-debounce"
   import {now, int, ifLet, formatTimestampAsDate, MINUTE, ago} from "@welshman/lib"
   import type {TrustedEvent, EventContent} from "@welshman/util"
   import {makeEvent, MESSAGE, RELAY_ADD_MEMBER} from "@welshman/util"
@@ -139,6 +140,8 @@
   const onScroll = () => {
     if (!isProgrammaticScroll) {
       userHasScrolled = true
+      isUserScrolling = true
+      clearIsUserScrolling()
       manageScrollPosition()
     }
 
@@ -160,6 +163,7 @@
   let loadingForward = $state(true)
   let userHasScrolled = $state(false)
   let isProgrammaticScroll = $state(false)
+  let isUserScrolling = $state(false)
   let share = $state(popKey<TrustedEvent | undefined>("share"))
   let parent: TrustedEvent | undefined = $state()
   let element: HTMLElement | undefined = $state()
@@ -171,6 +175,10 @@
   let compose: RoomCompose | undefined = $state()
   let eventToEdit: TrustedEvent | undefined = $state()
 
+  const clearIsUserScrolling = debounce(150, () => {
+    isUserScrolling = false
+  })
+
   const elements = $derived.by(() => {
     const elements = []
     const seen = new Set()
@@ -244,7 +252,7 @@
   })
 
   $effect(() => {
-    if (elements.length > 0) {
+    if (elements.length > 0 && !isUserScrolling) {
       requestAnimationFrame(manageScrollPosition)
     }
   })