add blocks and placeholders for where stuff will go later

app/lib/prymn_web/components/core_components.ex

@@ -473,11 +473,7 @@ defmodule PrymnWeb.CoreComponents do
             <th :for={col <- @col} class="p-0 pr-6 pb-4 font-normal"><%= col[:label] %></th>
             <th class="relative p-0 pb-4">
               <span class="sr-only">
-                <%= if @gettext do %>
-                  <%= gettext("Actions") %>
-                <% else %>
                 Actions
-                <% end %>
               </span>
             </th>
           </tr>

app/lib/prymn_web/components/layouts/app.html.heex

@@ -1,43 +1,39 @@
-<header class="px-4 sm:px-6 lg:px-8">
+<header>
   <a
     href="#main"
     class="absolute left-0 -translate-y-full bg-black p-2 text-white transition-transform focus:transform-none"
   >
     <%= gettext("Skip to content") %>
   </a>
-  <div class="flex items-center justify-between border-b border-zinc-100 py-3 text-sm">
+  <div class="flex items-stretch justify-between border-b border-zinc-300 bg-gray-100 px-4 text-sm sm:px-6 lg:px-8">
-    <div class="flex items-center gap-4">
+    <div class="my-auto leading-tight">
-      <a href="/">
+      <p class="text-[9px]">codename</p>
-        <img src={~p"/images/logo.svg"} width="36" />
+      <a href="/" class="text-lg font-medium">
+        Prymn
       </a>
-      <p class="bg-brand/5 text-brand rounded-full px-2 font-medium leading-6">
+      <p class="inline text-xs">
-        v<%= Application.spec(:phoenix, :vsn) %>
+        v<%= Application.spec(:prymn, :vsn) %>
       </p>
     </div>
-    <div class="flex items-center gap-4 font-semibold leading-6 text-zinc-900">
+    <div class="flex items-center border-r border-l border-zinc-300 text-zinc-900 hover:bg-white">
-      <a href="https://twitter.com/elixirphoenix" class="hover:text-zinc-700">
+      <.link class="px-3 py-4" href={~p"/users/settings"}>
-        @elixirphoenix
+        <.icon name="hero-user" />
-      </a>
+        <.icon name="hero-chevron-down" />
-      <a href="https://github.com/phoenixframework/phoenix" class="hover:text-zinc-700">
-        GitHub
-      </a>
-      <a
-        href="https://hexdocs.pm/phoenix/overview.html"
-        class="rounded-lg bg-zinc-100 px-2 py-1 hover:bg-zinc-200/80"
-      >
-        Get Started <span aria-hidden="true">&rarr;</span>
-      </a>
-      <.link href={~p"/users/settings"} class="hover:text-zinc-700">
-        <%= @current_user.email %>
-      </.link>
-      <.link href={~p"/auth/log_out"} method="delete" class="hover:text-zinc-700">
-        Log out
       </.link>
     </div>
   </div>
 </header>
-<main id="main" class="px-4 py-20 sm:px-6 lg:px-8">
+<main id="main" class="px-4 sm:px-6 lg:px-10">
-  <div class="mx-auto max-w-2xl">
+  <div class="mb-8 border-b border-zinc-900 pt-10 pb-2 font-medium">
+    <ul class="flex gap-4">
+      <li>Projects</li>
+      <li>Usage</li>
+      <li>Activities</li>
+      <li>Limits</li>
+      <li>Support</li>
+    </ul>
+  </div>
+  <div class="pb-20">
     <.flash_group flash={@flash} />
     <%= @inner_content %>
   </div>

app/lib/prymn_web/components/layouts/root.html.heex

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="csrf-token" content={get_csrf_token()} />
-    <.live_title suffix=" · Phoenix Framework">
+    <.live_title suffix="｜Prymn">
       <%= assigns[:page_title] || "Prymn" %>
     </.live_title>
     <link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />

app/lib/prymn_web/controllers/page_html/home.html.heex

@@ -1,27 +0,0 @@
-<div class="px-4 py-10 sm:px-6 sm:py-28 lg:px-8 xl:px-28 xl:py-32">
-  <div class="mx-auto max-w-xl lg:mx-0">
-    <svg viewBox="0 0 71 48" class="h-12" aria-hidden="true">
-      <path
-        d="m26.371 33.477-.552-.1c-3.92-.729-6.397-3.1-7.57-6.829-.733-2.324.597-4.035 3.035-4.148 1.995-.092 3.362 1.055 4.57 2.39 1.557 1.72 2.984 3.558 4.514 5.305 2.202 2.515 4.797 4.134 8.347 3.634 3.183-.448 5.958-1.725 8.371-3.828.363-.316.761-.592 1.144-.886l-.241-.284c-2.027.63-4.093.841-6.205.735-3.195-.16-6.24-.828-8.964-2.582-2.486-1.601-4.319-3.746-5.19-6.611-.704-2.315.736-3.934 3.135-3.6.948.133 1.746.56 2.463 1.165.583.493 1.143 1.015 1.738 1.493 2.8 2.25 6.712 2.375 10.265-.068-5.842-.026-9.817-3.24-13.308-7.313-1.366-1.594-2.7-3.216-4.095-4.785-2.698-3.036-5.692-5.71-9.79-6.623C12.8-.623 7.745.14 2.893 2.361 1.926 2.804.997 3.319 0 4.149c.494 0 .763.006 1.032 0 2.446-.064 4.28 1.023 5.602 3.024.962 1.457 1.415 3.104 1.761 4.798.513 2.515.247 5.078.544 7.605.761 6.494 4.08 11.026 10.26 13.346 2.267.852 4.591 1.135 7.172.555ZM10.751 3.852c-.976.246-1.756-.148-2.56-.962 1.377-.343 2.592-.476 3.897-.528-.107.848-.607 1.306-1.336 1.49Zm32.002 37.924c-.085-.626-.62-.901-1.04-1.228-1.857-1.446-4.03-1.958-6.333-2-1.375-.026-2.735-.128-4.031-.61-.595-.22-1.26-.505-1.244-1.272.015-.78.693-1 1.31-1.184.505-.15 1.026-.247 1.6-.382-1.46-.936-2.886-1.065-4.787-.3-2.993 1.202-5.943 1.06-8.926-.017-1.684-.608-3.179-1.563-4.735-2.408l-.043.03a2.96 2.96 0 0 0 .04-.029c-.038-.117-.107-.12-.197-.054l.122.107c1.29 2.115 3.034 3.817 5.004 5.271 3.793 2.8 7.936 4.471 12.784 3.73A66.714 66.714 0 0 1 37 40.877c1.98-.16 3.866.398 5.753.899Zm-9.14-30.345c-.105-.076-.206-.266-.42-.069 1.745 2.36 3.985 4.098 6.683 5.193 4.354 1.767 8.773 2.07 13.293.51 3.51-1.21 6.033-.028 7.343 3.38.19-3.955-2.137-6.837-5.843-7.401-2.084-.318-4.01.373-5.962.94-5.434 1.575-10.485.798-15.094-2.553Zm27.085 15.425c.708.059 1.416.123 2.124.185-1.6-1.405-3.55-1.517-5.523-1.404-3.003.17-5.167 1.903-7.14 3.972-1.739 1.824-3.31 3.87-5.903 4.604.043.078.054.117.066.117.35.005.699.021 1.047.005 3.768-.17 7.317-.965 10.14-3.7.89-.86 1.685-1.817 2.544-2.71.716-.746 1.584-1.159 2.645-1.07Zm-8.753-4.67c-2.812.246-5.254 1.409-7.548 2.943-1.766 1.18-3.654 1.738-5.776 1.37-.374-.066-.75-.114-1.124-.17l-.013.156c.135.07.265.151.405.207.354.14.702.308 1.07.395 4.083.971 7.992.474 11.516-1.803 2.221-1.435 4.521-1.707 7.013-1.336.252.038.503.083.756.107.234.022.479.255.795.003-2.179-1.574-4.526-2.096-7.094-1.872Zm-10.049-9.544c1.475.051 2.943-.142 4.486-1.059-.452.04-.643.04-.827.076-2.126.424-4.033-.04-5.733-1.383-.623-.493-1.257-.974-1.889-1.457-2.503-1.914-5.374-2.555-8.514-2.5.05.154.054.26.108.315 3.417 3.455 7.371 5.836 12.369 6.008Zm24.727 17.731c-2.114-2.097-4.952-2.367-7.578-.537 1.738.078 3.043.632 4.101 1.728.374.388.763.768 1.182 1.106 1.6 1.29 4.311 1.352 5.896.155-1.861-.726-1.861-.726-3.601-2.452Zm-21.058 16.06c-1.858-3.46-4.981-4.24-8.59-4.008a9.667 9.667 0 0 1 2.977 1.39c.84.586 1.547 1.311 2.243 2.055 1.38 1.473 3.534 2.376 4.962 2.07-.656-.412-1.238-.848-1.592-1.507Zm17.29-19.32c0-.023.001-.045.003-.068l-.006.006.006-.006-.036-.004.021.018.012.053Zm-20 14.744a7.61 7.61 0 0 0-.072-.041.127.127 0 0 0 .015.043c.005.008.038 0 .058-.002Zm-.072-.041-.008-.034-.008.01.008-.01-.022-.006.005.026.024.014Z"
-        fill="#FD4F00"
-      />
-    </svg>
-    <h1 class="text-brand mt-10 flex items-center text-sm font-semibold leading-6">
-      Phoenix Framework
-      <small class="bg-brand/5 text-[0.8125rem] ml-3 rounded-full px-2 font-medium leading-6">
-        v<%= Application.spec(:phoenix, :vsn) %>
-      </small>
-    </h1>
-    <p class="text-[2rem] mt-4 font-semibold leading-10 tracking-tighter text-zinc-900">
-      Welcome
-    </p>
-    <p class="mt-4 text-base leading-7 text-zinc-600">
-      Create your server or your site
-    </p>
-    <div class="my-9 flex flex-col gap-5 text-center">
-      <.link navigate={~p"/servers"} class="block rounded bg-black px-4 py-2 text-white">
-        Servers
-      </.link>
-    </div>
-  </div>
-</div>

app/lib/prymn_web/live/dashboard_live.ex

@@ -0,0 +1,47 @@
+defmodule PrymnWeb.DashboardLive do
+  use PrymnWeb, :live_view
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <div class="mx-auto max-w-4xl">
+      <div class="mb-5">
+        <h1 class="text-3xl font-bold leading-snug">Good morning, <%= @current_user.email %>!</h1>
+        <h2 class="text-lg font-medium">Your overview</h2>
+      </div>
+
+      <div class="flex gap-2">
+        <div class="basis-6/12 rounded-lg p-3 shadow-md">
+          <span class="text-7xl font-medium">0</span>
+          <h2 class="mt-5 font-medium leading-snug text-gray-600">Total Servers</h2>
+          <.link class="text-sm text-blue-600" navigate={~p"/servers"}>
+            <.icon class="h-3 w-4" name="hero-arrow-right" /> View your servers
+          </.link>
+        </div>
+        <div class="basis-6/12 rounded-lg p-3 shadow-md">
+          <span class="text-7xl font-medium">0</span>
+          <h2 class="mt-5 font-medium leading-snug text-gray-600">Apps</h2>
+          <.link class="text-sm text-blue-600">
+            <.icon class="h-3 w-4" name="hero-arrow-right" /> View your apps
+          </.link>
+        </div>
+      </div>
+    </div>
+
+    <div class="mx-auto mt-7 max-w-6xl">
+      <div class="flex items-center justify-between">
+        <div class="space-x-6 text-sm text-blue-600">
+          <button>24 Hours</button>
+          <button>7 Days</button>
+          <button>30 Days</button>
+        </div>
+        <p>15 November &mdash; 16 November</p>
+      </div>
+      <div class="h-[150px] mt-3 w-full shrink-0 bg-slate-200"></div>
+      <div class="h-[150px] mt-3 w-full shrink-0 bg-slate-200"></div>
+      <div class="h-[150px] mt-3 w-full shrink-0 bg-slate-200"></div>
+      <div class="h-[150px] mt-3 w-full shrink-0 bg-slate-200"></div>
+    </div>
+    """
+  end
+end

app/lib/prymn_web/live/server_live/index.html.heex

@@ -1,4 +1,5 @@
-<.header>
+<div class="mx-auto max-w-2xl">
+  <.header>
     Your servers
     <small class="block">
       <%= "#{Enum.count(@servers)} servers" %>
@@ -6,9 +7,9 @@
     <:actions>
       <.button type="link" patch={~p"/servers/new"}>Connect a Server</.button>
     </:actions>
-</.header>
+  </.header>
 
-<div class="space-y-5" phx-update="replace" id="servers">
+  <div class="space-y-5" phx-update="replace" id="servers">
     <.link
       :for={server <- @servers}
       navigate={~p"/servers/#{server}"}
@@ -31,8 +32,9 @@
         </span>
       </div>
     </.link>
-</div>
+  </div>
 
-<.modal :if={@live_action == :new} id="server-modal" show on_cancel={JS.patch(~p"/servers")}>
+  <.modal :if={@live_action == :new} id="server-modal" show on_cancel={JS.patch(~p"/servers")}>
     <.live_component module={PrymnWeb.ServerLive.NewServer} id={:new} patch={~p"/servers"} />
-</.modal>
+  </.modal>
+</div>

app/lib/prymn_web/live/server_live/show.ex

@@ -23,7 +23,7 @@ defmodule PrymnWeb.ServerLive.Show do
 
     {:noreply,
      socket
-     |> assign(:health, health || %{message: "Connecting..."})
+     |> assign(:health, health || %{message: "Connecting...", tasks: []})
      |> assign(:page_title, server.name)
      |> assign(:server, server)
      |> assign(:dry_run, false)

app/lib/prymn_web/live/server_live/show.html.heex

@@ -1,6 +1,13 @@
-<.header>
+<div class="mx-auto max-w-2xl">
+  <.header>
     <span class="relative flex items-center">
+      <button>
         Server <%= @server.name %>
+        <.icon name="hero-chevron-down" />
+      </button>
+      <button class="ml-4">
+        <.icon class="h-3 w-3" name="hero-pencil" />
+      </button>
       <span
         role="tooltip"
         class={[
@@ -26,16 +33,20 @@
     <:subtitle>
       <%= @server.public_ip %>
     </:subtitle>
-</.header>
+    <:actions>
-
+      <.button>+ New App</.button>
-<div class="my-3 text-sm text-slate-700">
+      <.button class="border border-black bg-transparent text-black hover:text-white">
+        Quick actions <.icon name="hero-chevron-down" />
+      </.button>
+    </:actions>
+  </.header>
+  <div class="my-3 text-sm text-slate-700">
     <%= for {name, task} <- @health.tasks do %>
       Background task in progress: <%= name %>
       <p><%= task.progress %> complete</p>
     <% end %>
-</div>
+  </div>
-
+  <div :if={@server.status == :unregistered} class="my-10">
-<div :if={@server.status == :unregistered} class="my-10">
     <p class="mb-9">
       Connect to your server using root credentials and execute the following command:
     </p>
@@ -53,9 +64,8 @@
         />
       </button>
     </div>
-</div>
+  </div>
-
+  <div :if={@server.status == :registered && @sys_info} class="my-10">
-<div :if={@server.status == :registered && @sys_info} class="my-10">
     <section class="flex justify-between rounded bg-gray-800 p-5 text-white">
       <div>
         <p class="text-xl"><%= @sys_info.uptime || "" %>s</p>
@@ -86,13 +96,11 @@
         <p class="text-sm">Used Disk</p>
       </div>
     </section>
-
     <section class="mt-4">
       <form phx-change="change_dry_run">
         <.input type="checkbox" name="dry_run" value={@dry_run} label="Enable dry-run operations" />
       </form>
     </section>
-
     <section class="mt-4">
       <h2 class="border-b border-solid border-gray-500 pb-1 text-2xl font-medium">System</h2>
       <p class="mt-4">
@@ -105,6 +113,33 @@
         </p>
       </p>
     </section>
+    <section class="mt-4">
+      <h2 class="border-b border-solid border-gray-500 pb-1 text-2xl font-medium">
+        Backups
+      </h2>
+      <.table id="backups" rows={[%{date: "2023-10-11"}, %{date: "2023-10-10"}]}>
+        <:col :let={backup} label="Date"><%= backup.date %></:col>
+        <:action>
+          <.button>Restore</.button>
+        </:action>
+      </.table>
+    </section>
+    <section class="mt-4">
+      <h2 class="border-b border-solid border-gray-500 pb-1 text-2xl font-medium">
+        Manage Services
+      </h2>
+      <.table
+        id="services"
+        rows={[%{name: "mariadb", status: "Active"}, %{name: "php8.0", status: "Disabled"}]}
+      >
+        <:col :let={service} label="Service"><%= service.name %></:col>
+        <:col :let={service} label="Status"><%= service.status %></:col>
+        <:action>
+          <.button>Activate</.button>
+          <.button>Deactivate</.button>
+        </:action>
+      </.table>
+    </section>
+  </div>
+  <.back navigate={~p"/servers"}>Back to servers</.back>
 </div>
-
-<.back navigate={~p"/servers"}>Back to servers</.back>

app/lib/prymn_web/router.ex

@@ -27,10 +27,10 @@ defmodule PrymnWeb.Router do
   scope "/", PrymnWeb do
     pipe_through [:browser, :require_authenticated_user]
 
-    get "/", PageController, :home
-
     live_session :require_authenticated_user,
       on_mount: [{PrymnWeb.UserAuth, :ensure_authenticated}] do
+      live "/", DashboardLive
+
       live "/users/settings", UserSettingsLive
       live "/users/settings/confirm_email/:token", UserSettingsLive