fix: Improve toggle switch placement in settings screen (#208) (#232)

Co-authored-by: Pratyush Mohanty <prat_09@noreply.coracle.social>
Co-committed-by: Pratyush Mohanty <prat_09@noreply.coracle.social>

src/lib/components/FieldInline.svelte

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

src/lib/components/InputList.svelte

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

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

@@ -5,6 +5,7 @@
   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"
@@ -63,40 +64,64 @@
       <!-- pass -->
     {:then { isSupported }}
       {#if isSupported}
-        <div class="flex justify-between">
-          <p>Show badge for unread alerts</p>
-          <input type="checkbox" class="toggle toggle-primary" bind:checked={settings.badge} />
-        </div>
+        <FieldInline>
+          {#snippet label()}
+            <p>Show badge for unread alerts</p>
+          {/snippet}
+          {#snippet input()}
+            <input type="checkbox" class="toggle toggle-primary" bind:checked={settings.badge} />
+          {/snippet}
+        </FieldInline>
       {/if}
     {/await}
     {#if !Capacitor.isNativePlatform()}
-      <div class="flex justify-between">
-        <p>Play sound for new activity</p>
-        <input type="checkbox" class="toggle toggle-primary" bind:checked={settings.sound} />
-      </div>
+      <FieldInline>
+        {#snippet label()}
+          <p>Play sound for new activity</p>
+        {/snippet}
+        {#snippet input()}
+          <input type="checkbox" class="toggle toggle-primary" bind:checked={settings.sound} />
+        {/snippet}
+      </FieldInline>
     {/if}
-    <div class="flex justify-between">
-      <p>Enable push notifications</p>
-      <input type="checkbox" class="toggle toggle-primary" bind:checked={settings.push} />
-    </div>
+    <FieldInline>
+      {#snippet label()}
+        <p>Enable push notifications</p>
+      {/snippet}
+      {#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>
-    <div class="flex justify-between">
-      <p>Notify me about new activity</p>
-      <input type="checkbox" class="toggle toggle-primary" bind:checked={settings.spaces} />
-    </div>
-    <div class="flex justify-between">
-      <p>Always notify me when mentioned</p>
-      <input type="checkbox" class="toggle toggle-primary" checked={settings.mentions} />
-    </div>
-    <div class="flex justify-between">
-      <p>Notify me about new messages</p>
-      <input type="checkbox" class="toggle toggle-primary" bind:checked={settings.messages} />
-    </div>
+    <FieldInline>
+      {#snippet label()}
+        <p>Notify me about new activity</p>
+      {/snippet}
+      {#snippet input()}
+        <input type="checkbox" class="toggle toggle-primary" bind:checked={settings.spaces} />
+      {/snippet}
+    </FieldInline>
+    <FieldInline>
+      {#snippet label()}
+        <p>Always notify me when mentioned</p>
+      {/snippet}
+      {#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,6 +11,7 @@
   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"
@@ -28,6 +29,10 @@
     blossomServers = getTagValues("server", getListTags($userBlossomServerList))
   }
 
+  const addServer = () => {
+    blossomServers = [...blossomServers, ""]
+  }
+
   const onsubmit = preventDefault(async () => {
     await publishSettings($state.snapshot(settings))
 
@@ -104,7 +109,7 @@
       {/snippet}
       {#snippet input()}
         <input
-          class="range range-primary"
+          class="range range-primary w-full"
           type="range"
           min="0.8"
           max="1.3"
@@ -115,13 +120,13 @@
   </div>
   <div class="card2 bg-alt col-4 shadow-md">
     <strong class="text-lg">Editor Settings</strong>
-    <FieldInline>
+    <Field>
       {#snippet label()}
         <p>Send Delay</p>
       {/snippet}
       {#snippet input()}
         <input
-          class="range range-primary"
+          class="range range-primary w-full"
           type="range"
           min="0"
           max="10000"
@@ -134,17 +139,21 @@
           {settings.send_delay === 1000 ? "second" : "seconds"}.
         </p>
       {/snippet}
-    </FieldInline>
+    </Field>
     <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 bind:value={blossomServers}>
-          {#snippet addLabel()}
-            Add Server
-          {/snippet}
-        </InputList>
+        <InputList allowAdd={false} bind:value={blossomServers} />
       {/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,6 +1,7 @@
 <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"
@@ -30,31 +31,46 @@
       <Icon icon={ShieldMinimalistic} />
       Privacy Settings
     </strong>
-    <div class="grid grid-cols-2 gap-2">
-      <p>Authenticate with unknown relays?</p>
-      <input
-        type="checkbox"
-        class="toggle toggle-primary"
-        onchange={onAuthModeChange}
-        checked={settings.auth_mode === RelayAuthMode.Aggressive} />
-      <p class="col-span-2 text-sm opacity-70">
-        Controls whether {PLATFORM_NAME} will identify you to relays not in your lists.
-      </p>
-    </div>
-    <div class="grid grid-cols-2 gap-2">
-      <p>Report errors?</p>
-      <input type="checkbox" class="toggle toggle-primary" bind:checked={settings.report_errors} />
-      <p class="col-span-2 text-sm opacity-70">
-        Allow {PLATFORM_NAME} to send error reports to help improve the app.
-      </p>
-    </div>
-    <div class="grid grid-cols-2 gap-2">
-      <p>Report usage?</p>
-      <input type="checkbox" class="toggle toggle-primary" bind:checked={settings.report_usage} />
-      <p class="col-span-2 text-sm opacity-70">
-        Allow {PLATFORM_NAME} to collect anonymous usage data.
-      </p>
-    </div>
+    <FieldInline>
+      {#snippet label()}
+        <p>Authenticate with unknown relays?</p>
+      {/snippet}
+      {#snippet input()}
+        <input
+          type="checkbox"
+          class="toggle toggle-primary"
+          onchange={onAuthModeChange}
+          checked={settings.auth_mode === RelayAuthMode.Aggressive} />
+      {/snippet}
+      {#snippet info()}
+        <p>Controls whether {PLATFORM_NAME} will identify you to relays not in your lists.</p>
+      {/snippet}
+    </FieldInline>
+    <FieldInline>
+      {#snippet label()}
+        <p>Report errors?</p>
+      {/snippet}
+      {#snippet input()}
+        <input
+          type="checkbox"
+          class="toggle toggle-primary"
+          bind:checked={settings.report_errors} />
+      {/snippet}
+      {#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">