Use type=email for signup/login email inputs (#225) (#228)

Co-authored-by: Priyanshubhartistm <bhartipriyanshustm@gmail.com>
Co-committed-by: Priyanshubhartistm <bhartipriyanshustm@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

@@ -90,7 +90,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

@@ -61,7 +61,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/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>

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/lib/components/EmojiButton.svelte

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

src/lib/components/FieldInline.svelte

@@ -9,22 +9,16 @@
   const {...props}: Props = $props()
 </script>
 
-<div class="flex flex-col gap-2 {props.class}">
+<div class="grid grid-cols-1 gap-2 lg:gap-6 lg:grid-cols-3 {props.class}">
-  <div class="flex items-center justify-between w-full gap-2">
+  <label class="flex items-center gap-2 font-bold">
-    {#if props.label}
+    {@render props.label?.()}
-      <label class="flex items-center gap-2 max-w-[80%] md:max-w-none">
+  </label>
-        {@render props.label()}
+  <div class="col-span-2 flex items-center gap-2">
-      </label>
+    {@render props.input?.()}
-    {/if}
-    <div class="flex items-center gap-2 justify-end shrink-0">
-      {#if props.input}
-        {@render props.input()}
-      {/if}
-    </div>
   </div>
-  {#if props.info}
+  <p class="flex-end text-sm opacity-50 lg:col-span-3">
-    <p class="text-sm opacity-50">
+    {#if props.info}
-      {@render props.info()}
+      {@render props.info?.()}
-    </p>
+    {/if}
-  {/if}
+  </p>
 </div>

src/lib/components/InputList.svelte

@@ -13,12 +13,7 @@
     placeholder?: string
   }
 
-  let {
+  let {value = $bindable(), addLabel, placeholder = "Enter text..."}: Props = $props()
-    value = $bindable(),
-    addLabel,
-    placeholder = "Enter text...",
-    allowAdd = true,
-  }: Props & {allowAdd?: boolean} = $props()
   let draggedIndex: number | null = $state(null)
 
   const onChange = (newValue: string[]) => {
@@ -77,14 +72,12 @@
       </div>
     </div>
   {/each}
-  {#if allowAdd}
+  <Button onclick={addItem} class="btn btn-link w-fit px-0">
-    <Button onclick={addItem} class="btn btn-link w-fit px-0">
+    <Icon icon={AddCircle} size={5} />
-      <Icon icon={AddCircle} size={5} />
+    {#if addLabel}
-      {#if addLabel}
+      {@render addLabel?.()}
-        {@render addLabel?.()}
+    {:else}
-      {:else}
+      Add Item
-        Add Item
+    {/if}
-      {/if}
+  </Button>
-    </Button>
-  {/if}
 </div>

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

@@ -5,7 +5,6 @@
   import {Badge} from "@capawesome/capacitor-badge"
   import Bell from "@assets/icons/bell.svg?dataurl"
   import {preventDefault} from "@lib/html"
-  import FieldInline from "@lib/components/FieldInline.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -64,64 +63,40 @@
       <!-- pass -->
     {:then { isSupported }}
       {#if isSupported}
-        <FieldInline>
+        <div class="flex justify-between">
-          {#snippet label()}
+          <p>Show badge for unread alerts</p>
-            <p>Show badge for unread alerts</p>
+          <input type="checkbox" class="toggle toggle-primary" bind:checked={settings.badge} />
-          {/snippet}
+        </div>
-          {#snippet input()}
-            <input type="checkbox" class="toggle toggle-primary" bind:checked={settings.badge} />
-          {/snippet}
-        </FieldInline>
       {/if}
     {/await}
     {#if !Capacitor.isNativePlatform()}
-      <FieldInline>
+      <div class="flex justify-between">
-        {#snippet label()}
+        <p>Play sound for new activity</p>
-          <p>Play sound for new activity</p>
+        <input type="checkbox" class="toggle toggle-primary" bind:checked={settings.sound} />
-        {/snippet}
+      </div>
-        {#snippet input()}
-          <input type="checkbox" class="toggle toggle-primary" bind:checked={settings.sound} />
-        {/snippet}
-      </FieldInline>
     {/if}
-    <FieldInline>
+    <div class="flex justify-between">
-      {#snippet label()}
+      <p>Enable push notifications</p>
-        <p>Enable push notifications</p>
+      <input type="checkbox" class="toggle toggle-primary" bind:checked={settings.push} />
-      {/snippet}
+    </div>
-      {#snippet input()}
-        <input type="checkbox" class="toggle toggle-primary" bind:checked={settings.push} />
-      {/snippet}
-    </FieldInline>
   </div>
   <div
     class={cx("card2 bg-alt col-4 shadow-md", {
       "pointer-events-none opacity-50": !settings.badge && !settings.sound && !settings.push,
     })}>
     <strong class="text-lg">Alert Types</strong>
-    <FieldInline>
+    <div class="flex justify-between">
-      {#snippet label()}
+      <p>Notify me about new activity</p>
-        <p>Notify me about new activity</p>
+      <input type="checkbox" class="toggle toggle-primary" bind:checked={settings.spaces} />
-      {/snippet}
+    </div>
-      {#snippet input()}
+    <div class="flex justify-between">
-        <input type="checkbox" class="toggle toggle-primary" bind:checked={settings.spaces} />
+      <p>Always notify me when mentioned</p>
-      {/snippet}
+      <input type="checkbox" class="toggle toggle-primary" checked={settings.mentions} />
-    </FieldInline>
+    </div>
-    <FieldInline>
+    <div class="flex justify-between">
-      {#snippet label()}
+      <p>Notify me about new messages</p>
-        <p>Always notify me when mentioned</p>
+      <input type="checkbox" class="toggle toggle-primary" bind:checked={settings.messages} />
-      {/snippet}
+    </div>
-      {#snippet input()}
-        <input type="checkbox" class="toggle toggle-primary" checked={settings.mentions} />
-      {/snippet}
-    </FieldInline>
-    <FieldInline>
-      {#snippet label()}
-        <p>Notify me about new messages</p>
-      {/snippet}
-      {#snippet input()}
-        <input type="checkbox" class="toggle toggle-primary" bind:checked={settings.messages} />
-      {/snippet}
-    </FieldInline>
   </div>
   <div
     class="card2 bg-alt sticky -bottom-3 shadow-md flex flex-row items-center justify-between gap-4">

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

@@ -11,7 +11,6 @@
   import {Router} from "@welshman/router"
   import {userMuteList, tagPubkey, publishThunk, userBlossomServerList} from "@welshman/app"
   import NotesMinimalistic from "@assets/icons/notes-minimalistic.svg?dataurl"
-  import AddCircle from "@assets/icons/add-circle.svg?dataurl"
   import {preventDefault} from "@lib/html"
   import Field from "@lib/components/Field.svelte"
   import FieldInline from "@lib/components/FieldInline.svelte"
@@ -29,10 +28,6 @@
     blossomServers = getTagValues("server", getListTags($userBlossomServerList))
   }
 
-  const addServer = () => {
-    blossomServers = [...blossomServers, ""]
-  }
-
   const onsubmit = preventDefault(async () => {
     await publishSettings($state.snapshot(settings))
 
@@ -109,7 +104,7 @@
       {/snippet}
       {#snippet input()}
         <input
-          class="range range-primary w-full"
+          class="range range-primary"
           type="range"
           min="0.8"
           max="1.3"
@@ -120,13 +115,13 @@
   </div>
   <div class="card2 bg-alt col-4 shadow-md">
     <strong class="text-lg">Editor Settings</strong>
-    <Field>
+    <FieldInline>
       {#snippet label()}
         <p>Send Delay</p>
       {/snippet}
       {#snippet input()}
         <input
-          class="range range-primary w-full"
+          class="range range-primary"
           type="range"
           min="0"
           max="10000"
@@ -139,21 +134,17 @@
           {settings.send_delay === 1000 ? "second" : "seconds"}.
         </p>
       {/snippet}
-    </Field>
+    </FieldInline>
     <Field>
       {#snippet label()}
         <p>Media Server</p>
       {/snippet}
-      {#snippet secondary()}
-        <Button
-          class="btn btn-link w-fit px-0 decoration-solid underline text-[#7161ff] h-auto min-h-0 flex items-center gap-[5px]"
-          onclick={addServer}>
-          <Icon icon={AddCircle} size={4} />
-          Add Server
-        </Button>
-      {/snippet}
       {#snippet input()}
-        <InputList allowAdd={false} bind:value={blossomServers} />
+        <InputList bind:value={blossomServers}>
+          {#snippet addLabel()}
+            Add Server
+          {/snippet}
+        </InputList>
       {/snippet}
       {#snippet info()}
         <p>Choose a media server type and url for files you upload to {PLATFORM_NAME}.</p>

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

@@ -1,7 +1,6 @@
 <script lang="ts">
   import ShieldMinimalistic from "@assets/icons/shield-minimalistic.svg?dataurl"
   import {preventDefault} from "@lib/html"
-  import FieldInline from "@lib/components/FieldInline.svelte"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import {pushToast} from "@app/util/toast"
@@ -31,46 +30,31 @@
       <Icon icon={ShieldMinimalistic} />
       Privacy Settings
     </strong>
-    <FieldInline>
+    <div class="grid grid-cols-2 gap-2">
-      {#snippet label()}
+      <p>Authenticate with unknown relays?</p>
-        <p>Authenticate with unknown relays?</p>
+      <input
-      {/snippet}
+        type="checkbox"
-      {#snippet input()}
+        class="toggle toggle-primary"
-        <input
+        onchange={onAuthModeChange}
-          type="checkbox"
+        checked={settings.auth_mode === RelayAuthMode.Aggressive} />
-          class="toggle toggle-primary"
+      <p class="col-span-2 text-sm opacity-70">
-          onchange={onAuthModeChange}
+        Controls whether {PLATFORM_NAME} will identify you to relays not in your lists.
-          checked={settings.auth_mode === RelayAuthMode.Aggressive} />
+      </p>
-      {/snippet}
+    </div>
-      {#snippet info()}
+    <div class="grid grid-cols-2 gap-2">
-        <p>Controls whether {PLATFORM_NAME} will identify you to relays not in your lists.</p>
+      <p>Report errors?</p>
-      {/snippet}
+      <input type="checkbox" class="toggle toggle-primary" bind:checked={settings.report_errors} />
-    </FieldInline>
+      <p class="col-span-2 text-sm opacity-70">
-    <FieldInline>
+        Allow {PLATFORM_NAME} to send error reports to help improve the app.
-      {#snippet label()}
+      </p>
-        <p>Report errors?</p>
+    </div>
-      {/snippet}
+    <div class="grid grid-cols-2 gap-2">
-      {#snippet input()}
+      <p>Report usage?</p>
-        <input
+      <input type="checkbox" class="toggle toggle-primary" bind:checked={settings.report_usage} />
-          type="checkbox"
+      <p class="col-span-2 text-sm opacity-70">
-          class="toggle toggle-primary"
+        Allow {PLATFORM_NAME} to collect anonymous usage data.
-          bind:checked={settings.report_errors} />
+      </p>
-      {/snippet}
+    </div>
-      {#snippet info()}
-        <p>Allow {PLATFORM_NAME} to send error reports to help improve the app.</p>
-      {/snippet}
-    </FieldInline>
-    <FieldInline>
-      {#snippet label()}
-        <p>Report usage?</p>
-      {/snippet}
-      {#snippet input()}
-        <input type="checkbox" class="toggle toggle-primary" bind:checked={settings.report_usage} />
-      {/snippet}
-      {#snippet info()}
-        <p>Allow {PLATFORM_NAME} to collect anonymous usage data.</p>
-      {/snippet}
-    </FieldInline>
   </div>
   <div
     class="card2 bg-alt sticky -bottom-3 shadow-md flex flex-row items-center justify-between gap-4">