Simplify user modals (#1034)

* Simplify user modals

* Naming

lib/livebook_web/live/explore_live.ex

@@ -27,10 +27,7 @@ defmodule LivebookWeb.ExploreLive do
     <div class="flex grow h-full">
       <SidebarHelpers.sidebar>
         <SidebarHelpers.logo_item socket={@socket} />
-        <SidebarHelpers.shared_home_footer
+        <SidebarHelpers.shared_home_footer socket={@socket} current_user={@current_user} />
-          socket={@socket}
-          current_user={@current_user}
-          user_path={Routes.explore_path(@socket, :user)} />
       </SidebarHelpers.sidebar>
       <div class="grow px-6 py-8 overflow-y-auto">
         <div class="max-w-screen-md w-full mx-auto px-4 pb-8 space-y-8">
@@ -73,11 +70,7 @@ defmodule LivebookWeb.ExploreLive do
       </div>
     </div>
 
-    <%= if @live_action == :user do %>
+    <.current_user_modal current_user={@current_user} />
-      <.current_user_modal
-        return_to={Routes.explore_path(@socket, :page)}
-        current_user={@current_user} />
-    <% end %>
     """
   end
 

lib/livebook_web/live/home_live.ex

@@ -35,10 +35,7 @@ defmodule LivebookWeb.HomeLive do
     <div class="flex grow h-full">
       <.live_region role="alert" />
       <SidebarHelpers.sidebar>
-        <SidebarHelpers.shared_home_footer
+        <SidebarHelpers.shared_home_footer socket={@socket} current_user={@current_user} />
-          socket={@socket}
-          current_user={@current_user}
-          user_path={Routes.home_path(@socket, :user)} />
       </SidebarHelpers.sidebar>
       <div class="grow px-6 py-8 overflow-y-auto">
         <div class="max-w-screen-lg w-full mx-auto px-4 pb-8 space-y-4">
@@ -116,11 +113,7 @@ defmodule LivebookWeb.HomeLive do
       </div>
     </div>
 
-    <%= if @live_action == :user do %>
+    <.current_user_modal current_user={@current_user} />
-      <.current_user_modal
-        return_to={@self_path}
-        current_user={@current_user} />
-    <% end %>
 
     <%= if @live_action == :close_session do %>
       <.modal id="close-session-modal" show class="w-full max-w-xl" patch={@self_path}>

lib/livebook_web/live/session_live.ex

@@ -120,9 +120,7 @@ defmodule LivebookWeb.SessionLive do
           label="Keyboard shortcuts (?)"
           path={Routes.session_path(@socket, :shortcuts, @session.id)}
           active={@live_action == :shortcuts} />
-        <SidebarHelpers.user_item
+        <SidebarHelpers.user_item current_user={@current_user} />
-          current_user={@current_user}
-          path={Routes.session_path(@socket, :user, @session.id)} />
       </SidebarHelpers.sidebar>
       <div class="flex flex-col h-full w-full max-w-xs absolute z-30 top-0 left-[64px] overflow-y-auto shadow-xl md:static md:shadow-none bg-gray-50 border-r border-gray-100 px-6 py-10"
         data-element="side-panel">
@@ -226,11 +224,7 @@ defmodule LivebookWeb.SessionLive do
       </div>
     </div>
 
-    <%= if @live_action == :user do %>
+    <.current_user_modal return_to={@self_path} current_user={@current_user} />
-      <.current_user_modal
-        return_to={@self_path}
-        current_user={@current_user} />
-    <% end %>
 
     <%= if @live_action == :runtime_settings do %>
       <.modal id="runtime-settings-modal" show class="w-full max-w-4xl" patch={@self_path}>

lib/livebook_web/live/settings_live.ex

@@ -24,10 +24,7 @@ defmodule LivebookWeb.SettingsLive do
     <div class="flex grow h-full">
       <SidebarHelpers.sidebar>
         <SidebarHelpers.logo_item socket={@socket} />
-        <SidebarHelpers.shared_home_footer
+        <SidebarHelpers.shared_home_footer socket={@socket} current_user={@current_user} />
-          socket={@socket}
-          current_user={@current_user}
-          user_path={Routes.settings_path(@socket, :user)} />
       </SidebarHelpers.sidebar>
       <div class="grow px-6 py-8 overflow-y-auto">
         <div class="max-w-screen-md w-full mx-auto px-4 pb-8 space-y-16">
@@ -115,11 +112,7 @@ defmodule LivebookWeb.SettingsLive do
       </div>
     </div>
 
-    <%= if @live_action == :user do %>
+    <.current_user_modal current_user={@current_user} />
-      <.current_user_modal
-        return_to={Routes.settings_path(@socket, :page)}
-        current_user={@current_user} />
-    <% end %>
 
     <%= if @live_action == :add_file_system do %>
       <.modal id="add-file-system-modal" show class="w-full max-w-3xl" patch={Routes.settings_path(@socket, :page)}>

lib/livebook_web/live/sidebar_helpers.ex

@@ -89,11 +89,11 @@ defmodule LivebookWeb.SidebarHelpers do
   def user_item(assigns) do
     ~H"""
     <span class="tooltip right distant" data-tooltip="User profile">
-      <%= live_patch to: @path,
+      <button class="text-gray-400 rounded-xl h-8 w-8 flex items-center justify-center mt-2"
-            class: "text-gray-400 rounded-xl h-8 w-8 flex items-center justify-center mt-2",
+        aria_label="user profile"
-            aria_label: "user profile" do %>
+        phx-click={show_current_user_modal()}>
         <.user_avatar user={@current_user} text_class="text-xs" />
-      <% end %>
+      </button>
     </span>
     """
   end
@@ -114,7 +114,7 @@ defmodule LivebookWeb.SidebarHelpers do
       label="Settings"
       path={Routes.settings_path(@socket, :page)}
       active={false} />
-    <.user_item current_user={@current_user} path={@user_path} />
+    <.user_item current_user={@current_user} />
     """
   end
 

lib/livebook_web/live/user_component.ex

@@ -28,7 +28,7 @@ defmodule LivebookWeb.UserComponent do
         <.user_avatar user={@preview_user} class="h-20 w-20" text_class="text-3xl" />
       </div>
       <.form let={f} for={:data}
-        phx-submit="save"
+        phx-submit={@on_save |> JS.push("save")}
         phx-change="validate"
         phx-target={@myself}
         id="user_form"
@@ -95,6 +95,6 @@ defmodule LivebookWeb.UserComponent do
   def handle_event("save", %{"data" => data}, socket) do
     {:ok, user} = User.change(socket.assigns.user, data)
     Livebook.Users.broadcast_change(user)
-    {:noreply, push_patch(socket, to: socket.assigns.return_to)}
+    {:noreply, socket}
   end
 end

lib/livebook_web/live/user_helpers.ex

@@ -1,6 +1,10 @@
 defmodule LivebookWeb.UserHelpers do
   use Phoenix.Component
 
+  import LivebookWeb.Helpers
+
+  alias Phoenix.LiveView.JS
+
   @doc """
   Renders user avatar.
 
@@ -43,16 +47,20 @@ defmodule LivebookWeb.UserHelpers do
 
   ## Examples
 
-      <.current_user_modal return_to={...} current_user={@current_user} />
+      <.current_user_modal current_user={@current_user} />
   """
   def current_user_modal(assigns) do
     ~H"""
-    <LivebookWeb.Helpers.modal id="user-modal" show class="w-full max-w-sm" patch={@return_to}>
+    <.modal id="user-modal" class="w-full max-w-sm">
       <.live_component module={LivebookWeb.UserComponent}
         id="user"
-        return_to={@return_to}
+        user={@current_user}
-        user={@current_user} />
+        on_save={hide_current_user_modal()} />
-    </LivebookWeb.Helpers.modal>
+    </.modal>
     """
   end
+
+  def show_current_user_modal(js \\ %JS{}), do: show_modal(js, "user-modal")
+
+  def hide_current_user_modal(js \\ %JS{}), do: hide_modal(js, "user-modal")
 end

lib/livebook_web/router.ex

@@ -44,21 +44,17 @@ defmodule LivebookWeb.Router do
       pipe_through [:browser, :auth]
 
       live "/", HomeLive, :page
-      live "/home/user-profile", HomeLive, :user
       live "/home/import/:tab", HomeLive, :import
       live "/home/sessions/:session_id/close", HomeLive, :close_session
       live "/home/sessions/edit_sessions/:action", HomeLive, :edit_sessions
 
       live "/settings", SettingsLive, :page
-      live "/settings/user-profile", SettingsLive, :user
       live "/settings/add-file-system", SettingsLive, :add_file_system
 
       live "/explore", ExploreLive, :page
-      live "/explore/user-profile", ExploreLive, :user
       live "/explore/notebooks/:slug", ExploreLive, :notebook
 
       live "/sessions/:id", SessionLive, :page
-      live "/sessions/:id/user-profile", SessionLive, :user
       live "/sessions/:id/shortcuts", SessionLive, :shortcuts
       live "/sessions/:id/settings/runtime", SessionLive, :runtime_settings
       live "/sessions/:id/settings/file", SessionLive, :file_settings