Add shutdown button (#862)

The button only appears on interactive mode because
we assume embedded mode is running inside a release
or similar.

lib/livebook_web/live/explore_live.ex

@@ -12,7 +12,9 @@ defmodule LivebookWeb.ExploreLive do
     [lead_notebook_info | notebook_infos] = Explore.visible_notebook_infos()
 
     {:ok,
-     assign(socket,
+     socket
+     |> SidebarHelpers.shared_home_handlers()
+     |> assign(
        lead_notebook_info: lead_notebook_info,
        notebook_infos: notebook_infos,
        page_title: "Livebook - Explore"
@@ -25,13 +27,10 @@ defmodule LivebookWeb.ExploreLive do
     <div class="flex grow h-full">
       <SidebarHelpers.sidebar>
         <SidebarHelpers.logo_item socket={@socket} />
-        <SidebarHelpers.break_item />
-        <SidebarHelpers.link_item
-          icon="settings-3-fill"
-          label="Settings"
-          path={Routes.settings_path(@socket, :page)}
-          active={false} />
-        <SidebarHelpers.user_item current_user={@current_user} path={Routes.explore_path(@socket, :user)} />
+        <SidebarHelpers.shared_home_footer
+          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">

lib/livebook_web/live/home_live.ex

@@ -17,7 +17,9 @@ defmodule LivebookWeb.HomeLive do
     notebook_infos = Notebook.Explore.visible_notebook_infos() |> Enum.take(3)
 
     {:ok,
-     assign(socket,
+     socket
+     |> SidebarHelpers.shared_home_handlers()
+     |> assign(
        file: Livebook.Config.default_dir(),
        file_info: %{exists: true, access: :read_write},
        sessions: sessions,
@@ -31,13 +33,10 @@ defmodule LivebookWeb.HomeLive do
     ~H"""
     <div class="flex grow h-full">
       <SidebarHelpers.sidebar>
-        <SidebarHelpers.break_item />
-        <SidebarHelpers.link_item
-          icon="settings-3-fill"
-          label="Settings"
-          path={Routes.settings_path(@socket, :page)}
-          active={false} />
-        <SidebarHelpers.user_item current_user={@current_user} path={Routes.home_path(@socket, :user)} />
+        <SidebarHelpers.shared_home_footer
+          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">

lib/livebook_web/live/settings_live.ex

@@ -11,7 +11,9 @@ defmodule LivebookWeb.SettingsLive do
     file_systems_env = Livebook.Config.file_systems_as_env(file_systems)
 
     {:ok,
-     assign(socket,
+     socket
+     |> SidebarHelpers.shared_home_handlers()
+     |> assign(
        file_systems: file_systems,
        file_systems_env: file_systems_env,
        page_title: "Livebook - Settings"
@@ -24,13 +26,10 @@ defmodule LivebookWeb.SettingsLive do
     <div class="flex grow h-full">
       <SidebarHelpers.sidebar>
         <SidebarHelpers.logo_item socket={@socket} />
-        <SidebarHelpers.break_item />
-        <SidebarHelpers.link_item
-          icon="settings-3-fill"
-          label="Settings"
-          path={Routes.settings_path(@socket, :page)}
-          active={false} />
-        <SidebarHelpers.user_item current_user={@current_user} path={Routes.settings_path(@socket, :user)} />
+        <SidebarHelpers.shared_home_footer
+          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">

lib/livebook_web/live/sidebar_helpers.ex

@@ -14,7 +14,7 @@ defmodule LivebookWeb.SidebarHelpers do
   """
   def sidebar(assigns) do
     ~H"""
-    <nav class="w-16 flex flex-col items-center space-y-5 px-3 py-7 bg-gray-900">
+    <nav class="w-16 flex flex-col items-center space-y-4 px-3 py-7 bg-gray-900">
       <%= render_slot(@inner_block) %>
     </nav>
     """
@@ -54,6 +54,24 @@ defmodule LivebookWeb.SidebarHelpers do
     """
   end
 
+  def shutdown_item(assigns) do
+    if :code.get_mode() == :interactive do
+      ~H"""
+      <span class="tooltip right distant" data-tooltip="Shutdown">
+        <button class="text-2xl text-gray-400 hover:text-gray-50 focus:text-gray-50 rounded-xl h-10 w-10 flex items-center justify-center"
+          aria-label="shutdown"
+          phx-click="shutdown"
+          data-confirm="Are you sure you want to shutdown Livebook?">
+            <.remix_icon icon="shut-down-line" />
+        </button>
+      </span>
+      """
+    else
+      ~H"""
+      """
+    end
+  end
+
   def break_item(assigns) do
     ~H"""
     <div class="grow"></div>
@@ -64,11 +82,42 @@ defmodule LivebookWeb.SidebarHelpers do
     ~H"""
     <span class="tooltip right distant" data-tooltip="User profile">
       <%= live_patch to: @path,
-            class: "text-gray-400 rounded-xl h-8 w-8 flex items-center justify-center",
+            class: "text-gray-400 rounded-xl h-8 w-8 flex items-center justify-center mt-2",
             aria_label: "user profile" do %>
         <.user_avatar user={@current_user} text_class="text-xs" />
       <% end %>
     </span>
     """
   end
+
+  ## Shared home functionality
+
+  @doc """
+  A footer shared across home, settings, explore, etc.
+
+  Note you must call `shared_home_handlers` on mount/3.
+  """
+  def shared_home_footer(assigns) do
+    ~H"""
+    <.break_item />
+    <.shutdown_item />
+    <.link_item
+      icon="settings-3-fill"
+      label="Settings"
+      path={Routes.settings_path(@socket, :page)}
+      active={false} />
+    <.user_item current_user={@current_user} path={@user_path} />
+    """
+  end
+
+  def shared_home_handlers(socket) do
+    attach_hook(socket, :shutdown, :handle_event, fn
+      "shutdown", _params, socket ->
+        System.stop()
+        {:halt, put_flash(socket, :info, "Livebook is shutting down. You can close this page.")}
+
+      _event, _params, socket ->
+        {:cont, socket}
+    end)
+  end
 end