Prevent from scrolling to top on modal open (#129)

* Render modal components at the end of live views

* Add error pages

* Restructure web module

* Update lib/livebook_web/templates/error/500.html.eex

Co-authored-by: José Valim <jose.valim@dashbit.co>

* Update lib/livebook_web/templates/error/500.html.eex

Co-authored-by: José Valim <jose.valim@dashbit.co>

* Update lib/livebook_web/views/error_view.ex

Co-authored-by: José Valim <jose.valim@dashbit.co>

Co-authored-by: José Valim <jose.valim@dashbit.co>

config/config.exs

@@ -5,9 +5,7 @@ config :livebook, LivebookWeb.Endpoint,
   url: [host: "localhost"],
   secret_key_base: "9hHHeOiAA8wrivUfuS//jQMurHxoMYUtF788BQMx2KO7mYUE8rVrGGG09djBNQq7",
   pubsub_server: Livebook.PubSub,
-  live_view: [signing_salt: "mAPgPEM4"],
-  # We are always in debug mode since we are executing code anyway
-  debug_errors: true
+  live_view: [signing_salt: "mAPgPEM4"]
 
 # Configures Elixir's Logger
 config :logger, :console,

config/dev.exs

@@ -10,6 +10,7 @@ config :livebook, LivebookWeb.Endpoint,
   # Change to `ip: {0, 0, 0, 0}` to allow access from other machines.
   http: [ip: {127, 0, 0, 1}, port: 4000],
   code_reloader: true,
+  debug_errors: true,
   check_origin: false,
   watchers: [
     node: [

lib/livebook_web/live/home_live.ex

@@ -17,13 +17,6 @@ defmodule LivebookWeb.HomeLive do
   @impl true
   def render(assigns) do
     ~L"""
-    <%= if @live_action == :delete_session do %>
-      <%= live_modal @socket, LivebookWeb.DeleteSessionComponent,
-            id: :delete_session_modal,
-            return_to: Routes.home_path(@socket, :page),
-            session_summary: @session_summary %>
-    <% end %>
-
     <div class="flex flex-grow h-full">
       <div class="flex flex-col items-center space-y-6 px-3 py-8 bg-gray-900">
         <%= live_patch to: Routes.home_path(@socket, :page) do %>
@@ -92,7 +85,7 @@ defmodule LivebookWeb.HomeLive do
                 </div>
               </div>
             <% else %>
-              <%= live_component @socket, LivebookWeb.SessionsComponent,
+              <%= live_component @socket, LivebookWeb.SessionLive.SessionsComponent,
                 id: "sessions_list",
                 session_summaries: @session_summaries %>
             <% end %>
@@ -100,6 +93,13 @@ defmodule LivebookWeb.HomeLive do
         </div>
       </div>
     </div>
+
+    <%= if @live_action == :delete_session do %>
+      <%= live_modal @socket, LivebookWeb.SessionLive.DeleteSessionComponent,
+            id: :delete_session_modal,
+            return_to: Routes.home_path(@socket, :page),
+            session_summary: @session_summary %>
+    <% end %>
     """
   end
 

lib/livebook_web/live/home_live/delete_session_component.ex

@@ -1,4 +1,4 @@
-defmodule LivebookWeb.DeleteSessionComponent do
+defmodule LivebookWeb.SessionLive.DeleteSessionComponent do
   use LivebookWeb, :live_component
 
   alias Livebook.SessionSupervisor

lib/livebook_web/live/home_live/sessions_component.ex

@@ -1,4 +1,4 @@
-defmodule LivebookWeb.SessionsComponent do
+defmodule LivebookWeb.SessionLive.SessionsComponent do
   use LivebookWeb, :live_component
 
   @impl true

lib/livebook_web/live/session_live.ex

@@ -47,30 +47,6 @@ defmodule LivebookWeb.SessionLive do
   @impl true
   def render(assigns) do
     ~L"""
-    <%= if @live_action == :settings do %>
-      <%= live_modal @socket, LivebookWeb.SessionLive.SettingsComponent,
-            id: :settings_modal,
-            return_to: Routes.session_path(@socket, :page, @session_id),
-            tab: @tab,
-            session_id: @session_id,
-            data_view: @data_view %>
-    <% end %>
-
-    <%= if @live_action == :shortcuts do %>
-      <%= live_modal @socket, LivebookWeb.SessionLive.ShortcutsComponent,
-            id: :shortcuts_modal,
-            platform: @platform,
-            return_to: Routes.session_path(@socket, :page, @session_id) %>
-    <% end %>
-
-    <%= if @live_action == :cell_settings do %>
-      <%= live_modal @socket, LivebookWeb.SessionLive.CellSettingsComponent,
-            id: :cell_settings_modal,
-            session_id: @session_id,
-            cell: @cell,
-            return_to: Routes.session_path(@socket, :page, @session_id) %>
-    <% end %>
-
     <div class="flex flex-grow h-full"
       id="session"
       data-element="session"
@@ -141,7 +117,7 @@ defmodule LivebookWeb.SessionLive do
               </div>
             <% end %>
             <%= for {section_view, index} <- Enum.with_index(@data_view.section_views) do %>
-              <%= live_component @socket, LivebookWeb.SectionComponent,
+              <%= live_component @socket, LivebookWeb.SessionLive.SectionComponent,
                     id: section_view.id,
                     index: index,
                     session_id: @session_id,
@@ -157,6 +133,30 @@ defmodule LivebookWeb.SessionLive do
               data_view: @data_view %>
       </div>
     </div>
+
+    <%= if @live_action == :settings do %>
+      <%= live_modal @socket, LivebookWeb.SessionLive.SettingsComponent,
+            id: :settings_modal,
+            return_to: Routes.session_path(@socket, :page, @session_id),
+            tab: @tab,
+            session_id: @session_id,
+            data_view: @data_view %>
+    <% end %>
+
+    <%= if @live_action == :shortcuts do %>
+      <%= live_modal @socket, LivebookWeb.SessionLive.ShortcutsComponent,
+            id: :shortcuts_modal,
+            platform: @platform,
+            return_to: Routes.session_path(@socket, :page, @session_id) %>
+    <% end %>
+
+    <%= if @live_action == :cell_settings do %>
+      <%= live_modal @socket, LivebookWeb.SessionLive.CellSettingsComponent,
+            id: :cell_settings_modal,
+            session_id: @session_id,
+            cell: @cell,
+            return_to: Routes.session_path(@socket, :page, @session_id) %>
+    <% end %>
     """
   end
 

lib/livebook_web/live/session_live/cell_component.ex

@@ -1,4 +1,4 @@
-defmodule LivebookWeb.CellComponent do
+defmodule LivebookWeb.SessionLive.CellComponent do
   use LivebookWeb, :live_component
 
   def render(assigns) do

lib/livebook_web/live/session_live/insert_buttons_component.ex

@@ -1,4 +1,4 @@
-defmodule LivebookWeb.InsertButtonsComponent do
+defmodule LivebookWeb.SessionLive.InsertButtonsComponent do
   use LivebookWeb, :live_component
 
   def render(assigns) do

lib/livebook_web/live/session_live/section_component.ex

@@ -1,4 +1,4 @@
-defmodule LivebookWeb.SectionComponent do
+defmodule LivebookWeb.SessionLive.SectionComponent do
   use LivebookWeb, :live_component
 
   def render(assigns) do
@@ -27,18 +27,18 @@ defmodule LivebookWeb.SectionComponent do
       <div class="container">
         <div class="flex flex-col space-y-1">
           <%= for {cell_view, index} <- Enum.with_index(@section_view.cell_views) do %>
-            <%= live_component @socket, LivebookWeb.InsertButtonsComponent,
+            <%= live_component @socket, LivebookWeb.SessionLive.InsertButtonsComponent,
                   id: "#{@section_view.id}:#{index}",
                   persistent: false,
                   section_id: @section_view.id,
                   insert_cell_index: index,
                   insert_section_index: nil %>
-            <%= live_component @socket, LivebookWeb.CellComponent,
+            <%= live_component @socket, LivebookWeb.SessionLive.CellComponent,
                   id: cell_view.id,
                   session_id: @session_id,
                   cell_view: cell_view %>
           <% end %>
-          <%= live_component @socket, LivebookWeb.InsertButtonsComponent,
+          <%= live_component @socket, LivebookWeb.SessionLive.InsertButtonsComponent,
                 id: "#{@section_view.id}:last",
                 persistent: @section_view.cell_views == [],
                 section_id: @section_view.id,

lib/livebook_web/templates/error/404.html.eex

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <%= live_title_tag "Livebook" %>
+    <link phx-track-static rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
+  </head>
+  <body>
+    <div class="h-screen flex items-center justify-center bg-gray-900">
+      <div class="flex flex-col space-y-4 items-center">
+        <a href="/">
+          <img src="/logo.png" height="128" width="128" alt="livebook" />
+        </a>
+        <div class="text-2xl text-gray-50">
+          No Numbats here!
+        </div>
+      </div>
+    </div>
+  </body>
+</html>

lib/livebook_web/templates/error/500.html.eex

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <%= live_title_tag "Livebook" %>
+    <link phx-track-static rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
+  </head>
+  <body>
+    <div class="h-screen flex items-center justify-center bg-gray-900">
+      <div class="flex flex-col space-y-4 items-center">
+        <a href="/">
+          <img src="/logo.png" height="128" width="128" alt="livebook" />
+        </a>
+        <div class="text-2xl text-gray-50">
+          Something went wrong.
+        </div>
+        <div class="text-lg text-gray-50">
+          Check out the console for logs for more information.
+        </div>
+      </div>
+    </div>
+  </body>
+</html>

lib/livebook_web/views/error_view.ex

@@ -0,0 +1,7 @@
+defmodule LivebookWeb.ErrorView do
+  use LivebookWeb, :view
+
+  def template_not_found(_template, assigns) do
+    render("500.html", assigns)
+  end
+end