Add sticky submit buttons to settings pages

src/app/components/ModalContainer.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import {onMount, mount, unmount, createRawSnippet} from "svelte"
+  import {onMount, mount, unmount} from "svelte"
   import Drawer from "@lib/components/Drawer.svelte"
   import Dialog from "@lib/components/Dialog.svelte"
   import {modal, clearModals} from "@app/util/modal"

src/app/components/RoomDetail.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import cx from "classnames"
   import {goto} from "$app/navigation"
   import type {RoomMeta} from "@welshman/util"
   import {displayRelayUrl, makeRoomMeta} from "@welshman/util"
@@ -16,7 +15,6 @@
   import Microphone from "@assets/icons/microphone.svg?dataurl"
   import Bookmark from "@assets/icons/bookmark.svg?dataurl"
   import VolumeLoud from "@assets/icons/volume-loud.svg?dataurl"
-  import VolumeCross from "@assets/icons/volume-cross.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Confirm from "@lib/components/Confirm.svelte"
@@ -34,7 +32,6 @@
     deriveUserIsRoomAdmin,
     deriveUserRoomMembershipStatus,
     deriveUserRooms,
-    userSettingsValues,
     deriveIsMuted,
     MembershipStatus,
   } from "@app/core/state"

src/app/components/SpaceAccessRequest.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import {displayUrl} from "@welshman/lib"
-  import {AuthStatus} from "@welshman/net"
   import {preventDefault} from "@lib/html"
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -14,9 +13,8 @@
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import {pushToast} from "@app/util/toast"
-  import {pushModal} from "@app/util/modal"
   import {attemptRelayAccess} from "@app/core/commands"
-  import {deriveSocket, parseInviteLink} from "@app/core/state"
+  import {parseInviteLink} from "@app/core/state"
 
   type Props = {
     url: string
@@ -27,8 +25,6 @@
 
   const back = () => history.back()
 
-  const socket = deriveSocket(url)
-
   const join = async () => {
     loading = true
 

src/app/components/SpaceInviteAccept.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-  import type {Snippet} from "svelte"
   import {dissoc} from "@welshman/lib"
-  import {Pool, AuthStatus} from "@welshman/net"
   import {goto} from "$app/navigation"
   import {preventDefault} from "@lib/html"
   import {slideAndFade} from "@lib/transition"
@@ -17,9 +15,7 @@
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import RelaySummary from "@app/components/RelaySummary.svelte"
-  import SpaceJoin from "@app/components/SpaceJoin.svelte"
   import {pushToast} from "@app/util/toast"
-  import {pushModal} from "@app/util/modal"
   import {makeSpacePath} from "@app/util/routes"
   import {relaysMostlyRestricted, parseInviteLink} from "@app/core/state"
   import {attemptRelayAccess, addSpaceMembership, broadcastUserData} from "@app/core/commands"

src/app/components/SpaceJoin.svelte

@@ -1,10 +1,7 @@
 <script lang="ts">
   import {onMount} from "svelte"
   import {goto} from "$app/navigation"
-  import {sleep, dissoc} from "@welshman/lib"
+  import {dissoc} from "@welshman/lib"
-  import {Pool, AuthStatus, SocketStatus} from "@welshman/net"
-  import {deriveRelay} from "@welshman/app"
-  import {displayRelayUrl} from "@welshman/util"
   import {preventDefault} from "@lib/html"
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
   import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
@@ -15,7 +12,6 @@
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
-  import FieldInline from "@lib/components/FieldInline.svelte"
   import StatusIndicator from "@lib/components/StatusIndicator.svelte"
   import RelaySummary from "@app/components/RelaySummary.svelte"
   import SocketStatusIndicator from "@app/components/SocketStatusIndicator.svelte"
@@ -26,7 +22,7 @@
     broadcastUserData,
     setSpaceNotifications,
   } from "@app/core/commands"
-  import {relaysMostlyRestricted, deriveSpaceMembers, notificationSettings} from "@app/core/state"
+  import {relaysMostlyRestricted, notificationSettings} from "@app/core/state"
   import {pushModal} from "@app/util/modal"
   import {pushToast} from "@app/util/toast"
   import {makeSpacePath} from "@app/util/routes"
@@ -38,9 +34,6 @@
 
   const {url}: Props = $props()
 
-  const relay = deriveRelay(url)
-  const members = deriveSpaceMembers(url)
-
   const back = () => history.back()
 
   const join = async () => {

src/app/components/SpaceMenu.svelte

@@ -48,7 +48,6 @@
     deriveUserCanCreateRoom,
     deriveUserIsSpaceAdmin,
     deriveEventsForUrl,
-    userSettingsValues,
     notificationSettings,
     deriveIsMuted,
   } from "@app/core/state"

src/app/components/SpaceMenuRoomItem.svelte

@@ -6,7 +6,7 @@
   import RoomNameWithImage from "@app/components/RoomNameWithImage.svelte"
   import {makeRoomPath} from "@app/util/routes"
   import {notifications} from "@app/util/notifications"
-  import {userSettingsValues, deriveIsMuted} from "@app/core/state"
+  import {deriveIsMuted} from "@app/core/state"
 
   interface Props {
     url: any

src/app/util/notifications.ts

@@ -31,8 +31,6 @@ import {
   identity,
   now,
   groupBy,
-  nth,
-  nthEq,
   maybe,
   throttle,
 } from "@welshman/lib"
@@ -64,7 +62,6 @@ import {
   getEventPath,
   goToEvent,
 } from "@app/util/routes"
-import type {SpaceNotificationSettings} from "@app/core/state"
 import {
   DM_KINDS,
   CONTENT_KINDS,
@@ -75,15 +72,12 @@ import {
   notificationState,
   chatsById,
   hasNip29,
-  getSettings,
   userSettingsValues,
   userGroupList,
   getSpaceUrlsFromGroupList,
   getSpaceRoomsFromGroupList,
   makeCommentFilter,
   userSpaceUrls,
-  splitRoomId,
-  makeRoomId,
   isMuted,
   device,
 } from "@app/core/state"
@@ -284,7 +278,6 @@ export const onNotification = call(() => {
     if (!unsubscribe) {
       unsubscribe = on(repository, "update", ({added}) => {
         const $pubkey = pubkey.get()
-        const {alerts} = getSettings()
 
         for (const event of added) {
           if (event.pubkey == $pubkey) {

src/lib/components/Dialog.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import type {Component} from "svelte"
   import cx from "classnames"
-  import {onMount} from "svelte"
   import {noop} from "@welshman/lib"
   import {fade, fly} from "@lib/transition"
 

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

@@ -1,28 +1,19 @@
 <script lang="ts">
   import cx from "classnames"
-  import {sleep, equals, remove} from "@welshman/lib"
+  import {sleep} from "@welshman/lib"
-  import {displayRelayUrl} from "@welshman/util"
   import {Capacitor} from "@capacitor/core"
   import {Badge} from "@capawesome/capacitor-badge"
-  import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
   import {preventDefault} from "@lib/html"
-  import Icon from "@lib/components/Icon.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
-  import RoomName from "@app/components/RoomName.svelte"
   import {pushToast} from "@app/util/toast"
   import {Push, clearBadges} from "@app/util/notifications"
-  import {notificationSettings, userSettingsValues, splitRoomId} from "@app/core/state"
+  import {notificationSettings} from "@app/core/state"
-  import {publishSettings} from "@app/core/commands"
 
   const reset = () => {
     settings = {...notificationSettings.get()}
   }
 
-  const removeMutedRoom = (id: string) => {
-    muted_rooms = remove(id, muted_rooms)
-  }
-
   const onsubmit = preventDefault(async () => {
     loading = true
 
@@ -46,10 +37,6 @@
         }
       }
 
-      if (!equals(muted_rooms, $userSettingsValues.muted_rooms)) {
-        publishSettings($state.snapshot({...$userSettingsValues, muted_rooms}))
-      }
-
       notificationSettings.set(settings)
 
       pushToast({message: "Your settings have been saved!"})
@@ -60,7 +47,6 @@
 
   let loading = $state(false)
   let settings = $state({...notificationSettings.get()})
-  let muted_rooms = $state($userSettingsValues.muted_rooms)
 </script>
 
 <form class="content column gap-4" {onsubmit}>
@@ -105,7 +91,8 @@
       <input type="checkbox" class="toggle toggle-primary" bind:checked={settings.messages} />
     </div>
   </div>
-  <div class="mt-4 flex flex-row items-center justify-between gap-4">
+  <div
+    class="card2 bg-alt sticky -bottom-3 shadow-md flex flex-row items-center justify-between gap-4">
     <Button class="btn btn-neutral" onclick={reset} disabled={loading}>Discard Changes</Button>
     <Button type="submit" class="btn btn-primary" disabled={loading}>
       <Spinner {loading}>Save Changes</Spinner>

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

@@ -87,6 +87,28 @@
         </div>
       {/snippet}
     </Field>
+  </div>
+  <div class="card2 bg-alt col-4 shadow-md">
+    <strong class="text-lg">Accessibility</strong>
+    <Field>
+      {#snippet label()}
+        <p>Font size</p>
+      {/snippet}
+      {#snippet secondary()}
+        <p>{Math.round(settings.font_size * 100)}%</p>
+      {/snippet}
+      {#snippet input()}
+        <input
+          class="range range-primary"
+          type="range"
+          min="0.8"
+          max="1.3"
+          step="0.05"
+          bind:value={settings.font_size} />
+      {/snippet}
+    </Field>
+  </div>
+  <div class="card2 bg-alt col-4 shadow-md">
     <strong class="text-lg">Editor Settings</strong>
     <FieldInline>
       {#snippet label()}
@@ -123,27 +145,10 @@
         <p>Choose a media server type and url for files you upload to {PLATFORM_NAME}.</p>
       {/snippet}
     </Field>
-    <strong class="text-lg">Accessibility</strong>
+  </div>
-    <Field>
+  <div
-      {#snippet label()}
+    class="card2 bg-alt sticky -bottom-3 shadow-md flex flex-row items-center justify-between gap-4">
-        <p>Font size</p>
+    <Button class="btn btn-neutral" onclick={reset}>Discard Changes</Button>
-      {/snippet}
+    <Button type="submit" class="btn btn-primary">Save Changes</Button>
-      {#snippet secondary()}
-        <p>{Math.round(settings.font_size * 100)}%</p>
-      {/snippet}
-      {#snippet input()}
-        <input
-          class="range range-primary"
-          type="range"
-          min="0.8"
-          max="1.3"
-          step="0.05"
-          bind:value={settings.font_size} />
-      {/snippet}
-    </Field>
-    <div class="mt-4 flex flex-row items-center justify-between gap-4">
-      <Button class="btn btn-neutral" onclick={reset}>Discard Changes</Button>
-      <Button type="submit" class="btn btn-primary">Save Changes</Button>
-    </div>
   </div>
 </form>

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

@@ -50,9 +50,10 @@
         Allow {PLATFORM_NAME} to collect anonymous usage data.
       </p>
     </div>
-    <div class="mt-4 flex flex-row items-center justify-between gap-4">
+  </div>
-      <Button class="btn btn-neutral" onclick={reset}>Discard Changes</Button>
+  <div
-      <Button type="submit" class="btn btn-primary">Save Changes</Button>
+    class="card2 bg-alt sticky -bottom-3 shadow-md flex flex-row items-center justify-between gap-4">
-    </div>
+    <Button class="btn btn-neutral" onclick={reset}>Discard Changes</Button>
+    <Button type="submit" class="btn btn-primary">Save Changes</Button>
   </div>
 </form>

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

@@ -1,12 +1,11 @@
 <script lang="ts">
-  import {readable, derived as _derived} from "svelte/store"
+  import {readable} from "svelte/store"
   import {onMount, onDestroy} from "svelte"
   import {page} from "$app/stores"
   import type {Readable} from "svelte/store"
   import type {MakeNonOptional} from "@welshman/lib"
-  import {now, int, append, remove, formatTimestampAsDate, ago, MINUTE} from "@welshman/lib"
+  import {now, int, formatTimestampAsDate, ago, MINUTE} from "@welshman/lib"
   import type {TrustedEvent, EventContent} from "@welshman/util"
-  import {throttled} from "@welshman/store"
   import {
     makeEvent,
     makeRoomMeta,