Create LayoutHelpers to encapsulate the whole home layout instead of sidebar (#1352)

lib/livebook_web/live/explore_live.ex

@@ -2,9 +2,8 @@ defmodule LivebookWeb.ExploreLive do
   use LivebookWeb, :live_view
 
   import LivebookWeb.SessionHelpers
-  import LivebookWeb.UserHelpers
 
-  alias LivebookWeb.{SidebarHelpers, ExploreHelpers, PageHelpers}
+  alias LivebookWeb.{LayoutHelpers, ExploreHelpers, PageHelpers}
   alias Livebook.Notebook.Explore
 
   on_mount LivebookWeb.SidebarHook
@@ -24,15 +23,12 @@ defmodule LivebookWeb.ExploreLive do
   @impl true
   def render(assigns) do
     ~H"""
-    <div class="flex grow h-full">
+    <LayoutHelpers.layout
-      <SidebarHelpers.sidebar
       socket={@socket}
       current_page={Routes.explore_path(@socket, :page)}
       current_user={@current_user}
       saved_hubs={@saved_hubs}
-      />
+    >
-      <div class="grow overflow-y-auto">
-        <SidebarHelpers.toggle socket={@socket} />
       <div class="px-4 sm:px-8 md:px-16 pt-4 sm:py-7 max-w-screen-md mx-auto space-y-8">
         <div>
           <PageHelpers.title text="Explore" />
@@ -57,12 +53,7 @@ defmodule LivebookWeb.ExploreLive do
             </div>
           </div>
           <div class="grow hidden md:flex flex items-center justify-center">
-              <img
+            <img src={@lead_notebook_info.details.cover_url} height="120" width="120" alt="livebook" />
-                src={@lead_notebook_info.details.cover_url}
-                height="120"
-                width="120"
-                alt="livebook"
-              />
           </div>
         </div>
         <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -76,10 +67,7 @@ defmodule LivebookWeb.ExploreLive do
           <.notebook_group group_info={group_info} socket={@socket} />
         <% end %>
       </div>
-      </div>
+    </LayoutHelpers.layout>
-    </div>
-
-    <.current_user_modal current_user={@current_user} />
     """
   end
 

lib/livebook_web/live/home_live.ex

@@ -2,9 +2,8 @@ defmodule LivebookWeb.HomeLive do
   use LivebookWeb, :live_view
 
   import LivebookWeb.SessionHelpers
-  import LivebookWeb.UserHelpers
 
-  alias LivebookWeb.{ExploreHelpers, PageHelpers, SidebarHelpers}
+  alias LivebookWeb.{ExploreHelpers, PageHelpers, LayoutHelpers}
   alias Livebook.{Sessions, Session, LiveMarkdown, Notebook, FileSystem}
 
   on_mount LivebookWeb.SidebarHook
@@ -37,21 +36,18 @@ defmodule LivebookWeb.HomeLive do
   @impl true
   def render(assigns) do
     ~H"""
-    <div class="flex grow h-full">
+    <LayoutHelpers.layout
-      <.live_region role="alert" />
-      <SidebarHelpers.sidebar
       socket={@socket}
       current_page={Routes.home_path(@socket, :page)}
       current_user={@current_user}
       saved_hubs={@saved_hubs}
-      />
+    >
-      <div class="grow overflow-y-auto">
+      <:topbar_action>
-        <SidebarHelpers.toggle socket={@socket}>
         <a aria-label="new-notebook" class="flex items-center" phx-click="new">
           <.remix_icon icon="add-line" />
           <span class="pl-2">New notebook</span>
         </a>
-        </SidebarHelpers.toggle>
+      </:topbar_action>
       <.update_notification version={@new_version} instructions_url={@update_instructions_url} />
       <.memory_notification memory={@memory} app_service_url={@app_service_url} />
       <div class="px-4 sm:px-8 md:px-16 pt-4 sm:py-7 max-w-screen-lg mx-auto space-y-4">
@@ -133,10 +129,7 @@ defmodule LivebookWeb.HomeLive do
           />
         </div>
       </div>
-      </div>
+    </LayoutHelpers.layout>
-    </div>
-
-    <.current_user_modal current_user={@current_user} />
 
     <%= 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/hub_live.ex

@@ -1,11 +1,9 @@
 defmodule LivebookWeb.HubLive do
   use LivebookWeb, :live_view
 
-  import LivebookWeb.UserHelpers
-
   alias Livebook.Hubs
   alias Livebook.Hubs.Provider
-  alias LivebookWeb.{PageHelpers, SidebarHelpers}
+  alias LivebookWeb.{PageHelpers, LayoutHelpers}
   alias Phoenix.LiveView.JS
 
   on_mount LivebookWeb.SidebarHook
@@ -23,19 +21,18 @@ defmodule LivebookWeb.HubLive do
   @impl true
   def render(assigns) do
     ~H"""
-    <div class="flex grow h-full">
+    <LayoutHelpers.layout
-      <.live_region role="alert" />
-      <SidebarHelpers.sidebar
       socket={@socket}
+      current_page={@current_page}
       current_user={@current_user}
-        current_page=""
       saved_hubs={@saved_hubs}
-      />
+    >
-
+      <div class="px-4 sm:px-8 md:px-16 pt-4 sm:py-7 max-w-screen-md mx-auto space-y-8">
-      <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">
         <div>
-            <PageHelpers.title text="Hub" socket={@socket} />
+          <PageHelpers.title
+            text={if @operation == :new, do: "Add Hub", else: "Edit Hub"}
+            socket={@socket}
+          />
           <p class="mt-4 text-gray-700">
             Manage your Livebooks in the cloud with Hubs.
           </p>
@@ -65,7 +62,7 @@ defmodule LivebookWeb.HubLive do
                 />
               </:logo>
               <:headline>
-                  Control access, manage secrets, and deploy notebooks within your team and company.
+                Control access, manage secrets, and deploy notebooks within your team.
               </:headline>
             </.card_item>
           </div>
@@ -98,10 +95,7 @@ defmodule LivebookWeb.HubLive do
           </div>
         <% end %>
       </div>
-      </div>
+    </LayoutHelpers.layout>
-
-      <.current_user_modal current_user={@current_user} />
-    </div>
     """
   end
 
@@ -136,11 +130,17 @@ defmodule LivebookWeb.HubLive do
     hub = Hubs.fetch_hub!(id)
     provider = Provider.type(hub)
 
-    {:noreply, assign(socket, operation: :edit, hub: hub, selected_provider: provider)}
+    {:noreply,
+     assign(socket,
+       operation: :edit,
+       hub: hub,
+       selected_provider: provider,
+       current_page: Routes.hub_path(socket, :edit, hub.id)
+     )}
   end
 
   def handle_params(_params, _url, socket) do
-    {:noreply, assign(socket, operation: :new)}
+    {:noreply, assign(socket, operation: :new, current_page: Routes.hub_path(socket, :new))}
   end
 
   @impl true

lib/livebook_web/live/layout_helpers.ex

@@ -1,4 +1,4 @@
-defmodule LivebookWeb.SidebarHelpers do
+defmodule LivebookWeb.LayoutHelpers do
   use Phoenix.Component
 
   import LivebookWeb.LiveHelpers
@@ -8,13 +8,48 @@ defmodule LivebookWeb.SidebarHelpers do
   alias LivebookWeb.Router.Helpers, as: Routes
 
   @doc """
-  Renders the mobile toggle for the sidebar.
+  The layout used in the non-session pages.
   """
-  def toggle(assigns) do
+  def layout(assigns) do
-    assigns = assign_new(assigns, :inner_block, fn -> [] end)
+    assigns = assign_new(assigns, :topbar_action, fn -> [] end)
 
     ~H"""
+    <div class="flex grow h-full">
+      <.live_region role="alert" />
+      <.sidebar
+        socket={@socket}
+        current_page={@current_page}
+        current_user={@current_user}
+        saved_hubs={@saved_hubs}
+      />
+      <div class="grow overflow-y-auto">
         <div class="flex sm:hidden items-center justify-between sticky sm:pt-1 px-2 top-0 left-0 right-0 z-[500] bg-white border-b border-gray-200">
+          <.topbar_sidebar_toggle />
+          <div
+            class="hidden items-center justify-end p-2 text-gray-400 hover:text-gray-600 focus:text-gray-600"
+            data-el-toggle-sidebar
+          >
+            <% # TODO: Use render_slot(@topbar_action) || default() on LiveView 0.18 %>
+            <%= if @topbar_action == [] do %>
+              <%= live_redirect to: Routes.home_path(@socket, :page), class: "flex items-center", aria: [label: "go to home"] do %>
+                <.remix_icon icon="home-6-line" />
+                <span class="pl-2">Home</span>
+              <% end %>
+            <% else %>
+              <%= render_slot(@topbar_action) %>
+            <% end %>
+          </div>
+        </div>
+        <%= render_slot(@inner_block) %>
+      </div>
+    </div>
+
+    <.current_user_modal current_user={@current_user} />
+    """
+  end
+
+  defp topbar_sidebar_toggle(assigns) do
+    ~H"""
     <div class="my-2 text-2xl text-gray-400 hover:text-gray-600 focus:text-gray-600 rounded-xl h-10 w-10 flex items-center justify-center">
       <button
         aria-label="hide sidebar"
@@ -38,28 +73,10 @@ defmodule LivebookWeb.SidebarHelpers do
         <.remix_icon icon="menu-unfold-line" />
       </button>
     </div>
-      <div
-        class="hidden items-center justify-end p-2 text-gray-400 hover:text-gray-600 focus:text-gray-600"
-        data-el-toggle-sidebar
-      >
-        <% # TODO: Use render_slot(@inner_block) || default() on LiveView 0.18 %>
-        <%= if @inner_block == [] do %>
-          <%= live_redirect to: Routes.home_path(@socket, :page), class: "flex items-center", aria: [label: "go to home"] do %>
-            <.remix_icon icon="home-6-line" />
-            <span class="pl-2">Home</span>
-          <% end %>
-        <% else %>
-          <%= render_slot(@inner_block) %>
-        <% end %>
-      </div>
-    </div>
     """
   end
 
-  @doc """
+  defp sidebar(assigns) do
-  Renders sidebar container.
-  """
-  def sidebar(assigns) do
     ~H"""
     <nav
       class="w-[18.75rem] min-w-[14rem] flex flex-col justify-between py-1 sm:py-7 bg-gray-900"
@@ -104,7 +121,7 @@ defmodule LivebookWeb.SidebarHelpers do
             current={@current_page}
           />
         </div>
-        <.hub_section socket={@socket} hubs={@saved_hubs} />
+        <.hub_section socket={@socket} hubs={@saved_hubs} current_page={@current_page} />
       </div>
       <div class="flex flex-col">
         <%= if Livebook.Config.shutdown_enabled?() do %>
@@ -149,9 +166,15 @@ defmodule LivebookWeb.SidebarHelpers do
   end
 
   defp sidebar_link(assigns) do
+    assigns = assign_new(assigns, :icon_style, fn -> nil end)
+
     ~H"""
     <%= live_redirect to: @to, class: "h-7 flex items-center hover:text-white #{sidebar_link_text_color(@to, @current)} border-l-4 #{sidebar_link_border_color(@to, @current)} hover:border-white" do %>
-      <.remix_icon icon={@icon} class="text-lg leading-6 w-[56px] flex justify-center" />
+      <.remix_icon
+        icon={@icon}
+        class="text-lg leading-6 w-[56px] flex justify-center"
+        style={@icon_style}
+      />
       <span class="text-sm font-medium">
         <%= @title %>
       </span>
@@ -165,41 +188,25 @@ defmodule LivebookWeb.SidebarHelpers do
       <div id="hubs" class="flex flex-col mt-12">
         <div class="space-y-1">
           <div class="grid grid-cols-1 md:grid-cols-2 relative leading-6 mb-2">
-            <div class="flex flex-col">
+            <small class="ml-5 font-medium text-gray-300 cursor-default">HUBS</small>
-              <small class="ml-5 font-medium text-white">HUBS</small>
-            </div>
-            <div class="flex flex-col">
-              <%= live_redirect to: Routes.hub_path(@socket, :page),
-                              class: "flex absolute right-5 items-center justify-center
-                                      text-gray-400 hover:text-white hover:border-white" do %>
-                <.remix_icon icon="add-line" />
-              <% end %>
-            </div>
           </div>
 
           <%= for hub <- @hubs do %>
-            <%= live_redirect to: Routes.hub_path(@socket, :edit, hub.id), class: "h-7 flex items-center cursor-pointer text-gray-400 hover:text-white" do %>
+            <.sidebar_link
-              <.remix_icon
+              title={hub.name}
-                class="text-lg leading-6 w-[56px] flex justify-center"
               icon="checkbox-blank-circle-fill"
-                style={"color: #{hub.color}"}
+              icon_style={"color: #{hub.color}"}
+              to={Routes.hub_path(@socket, :edit, hub.id)}
+              current={@current_page}
             />
-
-              <span class="text-sm font-medium">
-                <%= hub.name %>
-              </span>
-            <% end %>
           <% end %>
 
-          <div class="h-7 flex items-center cursor-pointer text-gray-400 hover:text-white mt-2">
+          <.sidebar_link
-            <%= live_redirect to: Routes.hub_path(@socket, :page), class: "h-7 flex items-center cursor-pointer text-gray-400 hover:text-white" do %>
+            title="Add Hub"
-              <.remix_icon class="text-lg leading-6 w-[56px] flex justify-center" icon="add-line" />
+            icon="add-line"
-
+            to={Routes.hub_path(@socket, :new)}
-              <span class="text-sm font-medium">
+            current={@current_page}
-                Add Hub
+          />
-              </span>
-            <% end %>
-          </div>
         </div>
       </div>
     <% end %>

lib/livebook_web/live/settings_live.ex

@@ -1,9 +1,7 @@
 defmodule LivebookWeb.SettingsLive do
   use LivebookWeb, :live_view
 
-  import LivebookWeb.UserHelpers
+  alias LivebookWeb.{LayoutHelpers, PageHelpers}
-
-  alias LivebookWeb.{SidebarHelpers, PageHelpers}
 
   on_mount LivebookWeb.SidebarHook
 
@@ -24,15 +22,12 @@ defmodule LivebookWeb.SettingsLive do
   @impl true
   def render(assigns) do
     ~H"""
-    <div class="flex grow h-full">
+    <LayoutHelpers.layout
-      <SidebarHelpers.sidebar
       socket={@socket}
       current_page={Routes.settings_path(@socket, :page)}
       current_user={@current_user}
       saved_hubs={@saved_hubs}
-      />
+    >
-      <div class="grow overflow-y-auto">
-        <SidebarHelpers.toggle socket={@socket} />
       <div class="px-4 sm:px-8 md:px-16 pt-4 sm:py-7 max-w-screen-md mx-auto space-y-8">
         <!-- System settings section -->
         <div class="flex flex-col space-y-10">
@@ -163,10 +158,7 @@ defmodule LivebookWeb.SettingsLive do
           </div>
         </div>
       </div>
-      </div>
+    </LayoutHelpers.layout>
-    </div>
-
-    <.current_user_modal current_user={@current_user} />
 
     <%= if @live_action == :add_file_system do %>
       <.modal

lib/livebook_web/router.ex

@@ -56,7 +56,7 @@ defmodule LivebookWeb.Router do
       live "/explore/notebooks/:slug", ExploreLive, :notebook
 
       if Application.compile_env(:livebook, :feature_flags)[:hub] do
-        live "/hub", HubLive, :page
+        live "/hub", HubLive, :new
         live "/hub/:id", HubLive, :edit
       end