fix: persist form state across mobile app switches

lib/algora_web/components/core_components.ex

@@ -671,7 +671,7 @@ defmodule AlgoraWeb.CoreComponents do
   attr :class, :string, default: nil, doc: "the class to apply to the form"
 
   attr :rest, :global,
-    include: ~w(autocomplete name rel action enctype method novalidate target),
+    include: ~w(autocomplete name rel action enctype method novalidate target phx-debounce),
     doc: "the arbitrary HTML attributes to apply to the form tag"
 
   slot :inner_block, required: true

lib/algora_web/live/onboarding/dev.ex

@@ -97,6 +97,7 @@ defmodule AlgoraWeb.Onboarding.DevLive do
       class="w-screen h-screen fixed inset-0 bg-background z-[100]"
       phx-hook="LocalStateStore"
       id="onboarding-dev-page"
+      data-storage="localStorage"
     >
       <div class="flex items-center justify-center h-full">
         <svg
@@ -122,7 +123,7 @@ defmodule AlgoraWeb.Onboarding.DevLive do
   @impl true
   def render(assigns) do
     ~H"""
-    <div class="min-h-screen bg-card" phx-hook="LocalStateStore" id="onboarding-dev-page">
+    <div class="min-h-screen bg-card" phx-hook="LocalStateStore" id="onboarding-dev-page" data-storage="localStorage">
       <div class="flex flex-col lg:flex-row flex-1">
         <div class="flex-grow px-8 py-16">
           <div class="mx-auto max-w-3xl">

lib/algora_web/live/org/dashboard_live.ex

@@ -205,7 +205,7 @@ defmodule AlgoraWeb.Org.DashboardLive do
   @impl true
   def render(assigns) do
     ~H"""
-    <div class="lg:pr-96" id="org-dashboard" phx-hook="LocalStateStore">
+    <div class="lg:pr-96" id="org-dashboard" phx-hook="LocalStateStore" data-storage="localStorage">
       <div class="container mx-auto max-w-7xl space-y-8 xl:space-y-16 p-4 sm:p-6 lg:p-8">
         <.section :if={@payable_bounties != %{}}>
           <.card>

lib/algora_web/live/sign_in_live.ex

@@ -14,7 +14,7 @@ defmodule AlgoraWeb.SignInLive do
   @impl true
   def render(assigns) do
     ~H"""
-    <div class="flex min-h-[100svh] bg-[#111113]" id="sign-in-page" phx-hook="LocalStateStore">
+    <div class="flex min-h-[100svh] bg-[#111113]" id="sign-in-page" phx-hook="LocalStateStore" data-storage="localStorage">
       <div class="relative flex flex-1 flex-col justify-center px-4 py-16 sm:px-6 lg:flex-none lg:px-20 xl:px-24 lg:border-r lg:border-border">
         <.wordmark class="h-10 w-auto absolute top-4 left-4 sm:top-8 sm:left-8" />
         <div class="mx-auto w-full max-w-sm lg:w-96 h-auto flex flex-col min-h-[426px]">

lib/algora_web/live/user/dashboard_live.ex

@@ -206,6 +206,7 @@ defmodule AlgoraWeb.User.DashboardLive do
           id="availability-form"
           phx-change="validate_availability"
           phx-submit="save_availability"
+          phx-debounce="blur"
           class="grid grid-cols-1 lg:grid-cols-2 gap-4"
         >
           <.input
@@ -405,8 +406,21 @@ defmodule AlgoraWeb.User.DashboardLive do
 
   @impl true
   def handle_event("validate_availability", %{"availability_form" => params}, socket) do
-    changeset = AvailabilityForm.changeset(socket.assigns.availability_form.source, params)
-    {:noreply, assign(socket, availability_form: to_form(changeset))}
+    changeset =
+      socket.assigns.availability_form.source
+      |> AvailabilityForm.changeset(params)
+      |> Map.put(:action, :validate)
+
+    socket = assign(socket, availability_form: to_form(changeset))
+
+    if changeset.valid? do
+      case Accounts.update_settings(socket.assigns.current_user, params) do
+        {:ok, user} -> {:noreply, assign(socket, :current_user, user)}
+        {:error, save_changeset} -> {:noreply, assign(socket, availability_form: to_form(save_changeset))}
+      end
+    else
+      {:noreply, socket}
+    end
   end
 
   @impl true

lib/algora_web/live/user/settings_live.ex

@@ -18,7 +18,7 @@ defmodule AlgoraWeb.User.SettingsLive do
           <.card_title>Account</.card_title>
         </.card_header>
         <.card_content>
-          <.simple_form for={@form} phx-change="validate" phx-submit="save">
+          <.simple_form for={@form} phx-change="validate" phx-submit="save" phx-debounce="blur">
             <div class="flex flex-col gap-6">
               <div class="flex flex-col gap-2">
                 <.input field={@form[:handle]} label="Handle" />
@@ -45,7 +45,7 @@ defmodule AlgoraWeb.User.SettingsLive do
           <.card_title>Public Profile</.card_title>
         </.card_header>
         <.card_content>
-          <.simple_form for={@form} phx-change="validate" phx-submit="save">
+          <.simple_form for={@form} phx-change="validate" phx-submit="save" phx-debounce="blur">
             <div class="flex flex-col gap-6">
               <.input field={@form[:display_name]} label="Name" />
               <.input field={@form[:bio]} type="textarea" label="Bio" />
@@ -83,7 +83,16 @@ defmodule AlgoraWeb.User.SettingsLive do
       |> User.settings_changeset(params)
       |> Map.put(:action, :validate)
 
-    {:noreply, assign_form(socket, changeset)}
+    socket = assign_form(socket, changeset)
+
+    if changeset.valid? do
+      case Accounts.update_settings(socket.assigns.current_user, params) do
+        {:ok, user} -> {:noreply, assign(socket, current_user: user)}
+        {:error, save_changeset} -> {:noreply, assign_form(socket, save_changeset)}
+      end
+    else
+      {:noreply, socket}
+    end
   end
 
   def handle_event("save", %{"user" => params}, socket) do