Show more detailed message when no apps are running (#1737)

lib/livebook_web/live/apps_live.ex

@@ -31,18 +31,34 @@ defmodule LivebookWeb.AppsLive do
       current_user={@current_user}
       saved_hubs={@saved_hubs}
     >
-      <div class="p-4 md:px-12 md:py-7 max-w-screen-lg mx-auto space-y-4">
+      <div class="p-4 md:px-12 md:py-7 max-w-screen-lg mx-auto">
-        <div>
         <LayoutHelpers.title text="Apps" />
-          <p class="mt-4 mb-8 text-gray-700">
+        <.app_list sessions={@sessions} />
-            <%= if @sessions == [] do %>
-              No apps currently running.
-            <% else %>
-              These apps are currently running.
-            <% end %>
-          </p>
       </div>
-        <div class="flex flex-col space-y-6">
+    </LayoutHelpers.layout>
+    """
+  end
+
+  defp app_list(%{sessions: []} = assigns) do
+    ~H"""
+    <div class="mt-8 p-5 flex space-x-4 items-center border border-gray-200 rounded-lg">
+      <div>
+        <.remix_icon icon="windy-line" class="text-gray-400 text-xl" />
+      </div>
+      <div class="grow flex items-center justify-between">
+        <div class="text-gray-600">
+          You do not have any apps running. <br />
+          You can deploy new apps by opening a notebook and clicking
+          <.remix_icon icon="rocket-line" class="align-sub text-lg" /> in the sidebar.
+        </div>
+      </div>
+    </div>
+    """
+  end
+
+  defp app_list(assigns) do
+    ~H"""
+    <div class="mt-8 flex flex-col space-y-8">
       <div :for={{slug, sessions} <- group_apps(@sessions)}>
         <div class="mb-2 text-gray-800 font-medium text-lg">
           <%= "/" <> slug %>
@@ -55,8 +71,6 @@ defmodule LivebookWeb.AppsLive do
         </div>
       </div>
     </div>
-      </div>
-    </LayoutHelpers.layout>
     """
   end