Merge pull request #1130 from zeedif/feat/setup-wizard-ux

feat(setup-wizard): improve E2EE dialog UX and password field

src/modules/services/LiveSyncUI/components/Password.svelte

@@ -18,6 +18,7 @@
     let showPassword = $state(false);
     const type = $derived.by(() => (showPassword ? "text" : "password"));
     const translatedPlaceholder = $derived.by(() => translate(placeholder));
+    const toggleLabel = $derived.by(() => translate(showPassword ? "Hide password" : "Show password"));
 </script>
 
 <input
@@ -31,4 +32,36 @@
     autocorrect="off"
     autocapitalize="off"
 />
-<input type="checkbox" bind:checked={showPassword} />
+<button
+    type="button"
+    class="sls-password-toggle"
+    aria-label={toggleLabel}
+    title={toggleLabel}
+    aria-pressed={showPassword}
+    {disabled}
+    onclick={() => (showPassword = !showPassword)}
+>
+    👁️
+</button>
+
+<style>
+    .sls-password-toggle {
+        display: inline-flex;
+        flex: 0 0 auto;
+        align-items: center;
+        justify-content: center;
+        padding: 4px;
+        margin-left: 4px;
+        background: transparent;
+        border: none;
+        box-shadow: none;
+        line-height: 1;
+        cursor: pointer;
+    }
+    .sls-password-toggle:hover {
+        background: var(--background-modifier-hover);
+    }
+    :global(body.is-mobile) .sls-password-toggle {
+        min-width: 44px;
+    }
+</style>