Refactor web app code and add background color setting

web-app/src/routes/(authenticated)/account/+page.svelte

@@ -4,16 +4,15 @@
   import SuccessOrError from "$lib/components/SuccessOrError.svelte";
   import LoadingSpinner from "$lib/components/LoadingSpinner.svelte";
   import type { ActionData, PageServerData } from "./$types";
+  import { enhanceForm } from "$lib/utils";
+  import { sending } from "$lib/runes.svelte";
 
   const { data, form }: { data: PageServerData; form: ActionData } = $props();
-
-  let sending = $state(false);
-  let loadingDelay: number;
 </script>
 
 <SuccessOrError success={form?.success} message={form?.message} />
 
-{#if sending}
+{#if sending.value}
   <LoadingSpinner />
 {/if}
 
@@ -39,18 +38,7 @@
     <a href="#logout">Logout</a>
   </h2>
 
-  <form
-    method="POST"
-    action="?/logout"
-    use:enhance={() => {
-      loadingDelay = window.setTimeout(() => (sending = true), 500);
-      return async ({ update }) => {
-        await update();
-        window.clearTimeout(loadingDelay);
-        sending = false;
-      };
-    }}
-  >
+  <form method="POST" action="?/logout" use:enhance={enhanceForm()}>
     <button type="submit">Logout</button>
   </form>
 </section>
@@ -68,19 +56,7 @@
       Deleting your account will irretrievably erase all data.
     </p>
 
-    <form
-      method="POST"
-      action="?/deleteAccount"
-      use:enhance={() => {
-        loadingDelay = window.setTimeout(() => (sending = true), 500);
-        return async ({ update }) => {
-          await update();
-          window.clearTimeout(loadingDelay);
-          window.location.hash = "!";
-          sending = false;
-        };
-      }}
-    >
+    <form method="POST" action="?/deleteAccount" use:enhance={enhanceForm({ closeModal: true })}>
       <label>
         Password:
         <input type="password" name="password" required />