From d821ce8bf4e01b623b07d9d4e6e2675a8ad66ece Mon Sep 17 00:00:00 2001
From: Jamil <jamilbk@users.noreply.github.com>
Date: Thu, 4 Aug 2022 09:30:42 -0700
Subject: [PATCH] Move page subheaders under titles; minor cleanup (#892)

---
 .../connectivity_check_live/index.html.heex   | 11 +--
 .../connectivity_check_live/index_live.ex     | 10 ++-
 .../live/device_live/admin/index.html.heex    |  4 +-
 .../live/device_live/admin/index_live.ex      |  8 +-
 .../device_live/unprivileged/index.html.heex  |  3 +-
 .../device_live/unprivileged/index_live.ex    |  8 +-
 .../fz_http_web/live/mfa_live/auth_live.ex    |  4 +-
 .../live/notifications_live/badge.ex          | 12 ++-
 .../live/notifications_live/badge.html.heex   |  2 +-
 .../live/notifications_live/index.html.heex   | 80 ++++++++++---------
 .../live/notifications_live/index_live.ex     |  5 +-
 .../live/rule_live/index.html.heex            |  4 +-
 .../fz_http_web/live/rule_live/index_live.ex  |  6 +-
 .../live/setting_live/account.html.heex       | 10 +--
 .../live/setting_live/account_live.ex         |  5 +-
 .../live/setting_live/customization.html.heex | 10 +--
 .../live/setting_live/customization_live.ex   |  5 +-
 .../live/setting_live/security.html.heex      | 10 +--
 .../live/setting_live/security_live.ex        |  6 +-
 .../live/setting_live/site.html.heex          | 10 +--
 .../live/setting_live/site_live.ex            |  6 +-
 .../unprivileged/account.html.heex            |  4 +-
 .../setting_live/unprivileged/account_live.ex |  5 +-
 .../fz_http_web/live/user_live/index_live.ex  |  4 +-
 .../templates/shared/heading.html.heex        | 20 +++--
 docker-compose.yml                            |  1 +
 26 files changed, 147 insertions(+), 106 deletions(-)

diff --git a/apps/fz_http/lib/fz_http_web/live/connectivity_check_live/index.html.heex b/apps/fz_http/lib/fz_http_web/live/connectivity_check_live/index.html.heex
index 15813f27e..965ec82d9 100644
--- a/apps/fz_http/lib/fz_http_web/live/connectivity_check_live/index.html.heex
+++ b/apps/fz_http/lib/fz_http_web/live/connectivity_check_live/index.html.heex
@@ -1,15 +1,10 @@
-<%= render FzHttpWeb.SharedView, "heading.html", page_title: @page_title %>
+<%= render(FzHttpWeb.SharedView, "heading.html",
+           page_subtitle: @page_subtitle,
+           page_title: @page_title) %>
 
 <section class="section is-main-section">
   <%= render FzHttpWeb.SharedView, "flash.html", assigns %>
 
-  <div class="block">
-    <p>
-      Firezone periodically checks for WAN connectivity to the Internet and logs
-      the result here. This is used to determine the public IP address of this
-      server for populating the default endpoint field in device configurations.
-    </p>
-  </div>
   <div class="block">
     <table class="table is-bordered is-hoverable is-striped is-fullwidth">
       <thead>
diff --git a/apps/fz_http/lib/fz_http_web/live/connectivity_check_live/index_live.ex b/apps/fz_http/lib/fz_http_web/live/connectivity_check_live/index_live.ex
index 95e44cd84..7fb4077d2 100644
--- a/apps/fz_http/lib/fz_http_web/live/connectivity_check_live/index_live.ex
+++ b/apps/fz_http/lib/fz_http_web/live/connectivity_check_live/index_live.ex
@@ -6,6 +6,13 @@ defmodule FzHttpWeb.ConnectivityCheckLive.Index do
 
   alias FzHttp.ConnectivityChecks
 
+  @page_title "WAN Connectivity Checks"
+  @page_subtitle """
+  Firezone periodically checks for WAN connectivity to the Internet and logs the result here. \
+  This is used to determine the public IP address of this server for populating the default \
+  endpoint field in device configurations.
+  """
+
   @impl Phoenix.LiveView
   def mount(_params, _session, socket) do
     connectivity_checks = ConnectivityChecks.list_connectivity_checks(limit: 20)
@@ -13,6 +20,7 @@ defmodule FzHttpWeb.ConnectivityCheckLive.Index do
     {:ok,
      socket
      |> assign(:connectivity_checks, connectivity_checks)
-     |> assign(:page_title, "WAN Connectivity Checks")}
+     |> assign(:page_subtitle, @page_subtitle)
+     |> assign(:page_title, @page_title)}
   end
 end
diff --git a/apps/fz_http/lib/fz_http_web/live/device_live/admin/index.html.heex b/apps/fz_http/lib/fz_http_web/live/device_live/admin/index.html.heex
index ee557cbfd..51980acb7 100644
--- a/apps/fz_http/lib/fz_http_web/live/device_live/admin/index.html.heex
+++ b/apps/fz_http/lib/fz_http_web/live/device_live/admin/index.html.heex
@@ -1,4 +1,6 @@
-<%= render FzHttpWeb.SharedView, "heading.html", page_title: @page_title %>
+<%= render(FzHttpWeb.SharedView, "heading.html",
+           page_subtitle: @page_subtitle,
+           page_title: @page_title) %>
 
 <section class="section is-main-section">
   <%= render FzHttpWeb.SharedView, "flash.html", assigns %>
diff --git a/apps/fz_http/lib/fz_http_web/live/device_live/admin/index_live.ex b/apps/fz_http/lib/fz_http_web/live/device_live/admin/index_live.ex
index 8c9b92297..1cdad0a9c 100644
--- a/apps/fz_http/lib/fz_http_web/live/device_live/admin/index_live.ex
+++ b/apps/fz_http/lib/fz_http_web/live/device_live/admin/index_live.ex
@@ -5,6 +5,11 @@ defmodule FzHttpWeb.DeviceLive.Admin.Index do
   use FzHttpWeb, :live_view
   alias FzHttp.{Devices, Repo}
 
+  @page_title "All Devices"
+  @page_subtitle """
+  Each device corresponds to a WireGuard configuration for connecting to this Firezone server.
+  """
+
   @impl Phoenix.LiveView
   def mount(_params, _session, socket) do
     devices =
@@ -15,7 +20,8 @@ defmodule FzHttpWeb.DeviceLive.Admin.Index do
     {:ok,
      socket
      |> assign(:devices, devices)
-     |> assign(:page_title, "All Devices")}
+     |> assign(:page_subtitle, @page_subtitle)
+     |> assign(:page_title, @page_title)}
   end
 
   @doc """
diff --git a/apps/fz_http/lib/fz_http_web/live/device_live/unprivileged/index.html.heex b/apps/fz_http/lib/fz_http_web/live/device_live/unprivileged/index.html.heex
index f803c8359..b2df60556 100644
--- a/apps/fz_http/lib/fz_http_web/live/device_live/unprivileged/index.html.heex
+++ b/apps/fz_http/lib/fz_http_web/live/device_live/unprivileged/index.html.heex
@@ -15,8 +15,7 @@
   <h4 class="title is-4"><%= @page_title %></h4>
 
   <div class="block">
-    Each device corresponds to a WireGuard configuration for connecting to this
-    Firezone server.
+    <%= @page_subtitle %>
   </div>
 
   <div class="block">
diff --git a/apps/fz_http/lib/fz_http_web/live/device_live/unprivileged/index_live.ex b/apps/fz_http/lib/fz_http_web/live/device_live/unprivileged/index_live.ex
index ab1a9c1b1..a9375064f 100644
--- a/apps/fz_http/lib/fz_http_web/live/device_live/unprivileged/index_live.ex
+++ b/apps/fz_http/lib/fz_http_web/live/device_live/unprivileged/index_live.ex
@@ -5,6 +5,11 @@ defmodule FzHttpWeb.DeviceLive.Unprivileged.Index do
   use FzHttpWeb, :live_view
   alias FzHttp.Devices
 
+  @page_title "Your Devices"
+  @page_subtitle """
+  Each device corresponds to a WireGuard configuration for connecting to this Firezone server.
+  """
+
   @impl Phoenix.LiveView
   def mount(_params, _session, socket) do
     user = socket.assigns.current_user
@@ -13,7 +18,8 @@ defmodule FzHttpWeb.DeviceLive.Unprivileged.Index do
      socket
      |> assign(:devices, Devices.list_devices(user.id))
      |> assign(:user, user)
-     |> assign(:page_title, "Your Devices")}
+     |> assign(:page_subtitle, @page_subtitle)
+     |> assign(:page_title, @page_title)}
   end
 
   @doc """
diff --git a/apps/fz_http/lib/fz_http_web/live/mfa_live/auth_live.ex b/apps/fz_http/lib/fz_http_web/live/mfa_live/auth_live.ex
index 96d470592..81a5ad4c8 100644
--- a/apps/fz_http/lib/fz_http_web/live/mfa_live/auth_live.ex
+++ b/apps/fz_http/lib/fz_http_web/live/mfa_live/auth_live.ex
@@ -7,9 +7,11 @@ defmodule FzHttpWeb.MFALive.Auth do
   import FzHttpWeb.ControllerHelpers
   alias FzHttp.MFA
 
+  @page_title "Multi-factor Authentication"
+
   @impl Phoenix.LiveView
   def mount(_params, _session, socket) do
-    {:ok, socket |> assign(:page_title, "Multi-factor Authentication")}
+    {:ok, socket |> assign(:page_title, @page_title)}
   end
 
   @impl Phoenix.LiveView
diff --git a/apps/fz_http/lib/fz_http_web/live/notifications_live/badge.ex b/apps/fz_http/lib/fz_http_web/live/notifications_live/badge.ex
index cb33d07cc..6bf23e218 100644
--- a/apps/fz_http/lib/fz_http_web/live/notifications_live/badge.ex
+++ b/apps/fz_http/lib/fz_http_web/live/notifications_live/badge.ex
@@ -16,13 +16,21 @@ defmodule FzHttpWeb.NotificationsLive.Badge do
 
     {:ok,
      socket
-     |> assign(:count, length(Notifications.current()))}
+     |> assign(assigns(Notifications.current()))}
   end
 
   @impl Phoenix.LiveView
   def handle_info({:notifications, notifications}, socket) do
     {:noreply,
      socket
-     |> assign(:count, length(notifications))}
+     |> assign(assigns(notifications))}
   end
+
+  defp assigns(notifications) do
+    count = length(notifications)
+    %{title: title(count), count: count}
+  end
+
+  defp title(0), do: "No Notifications"
+  defp title(n), do: "#{n} Notifications"
 end
diff --git a/apps/fz_http/lib/fz_http_web/live/notifications_live/badge.html.heex b/apps/fz_http/lib/fz_http_web/live/notifications_live/badge.html.heex
index 9d7927df5..8f140c6d9 100644
--- a/apps/fz_http/lib/fz_http_web/live/notifications_live/badge.html.heex
+++ b/apps/fz_http/lib/fz_http_web/live/notifications_live/badge.html.heex
@@ -1,6 +1,6 @@
 <%= live_redirect(
       to: Routes.notifications_index_path(FzHttpWeb.Endpoint, :index),
-      title: "Notifications",
+      title: @title,
       class: "navbar-item has-divider is-desktop-icon-only",
       style: "height: 100%"
     ) do %>
diff --git a/apps/fz_http/lib/fz_http_web/live/notifications_live/index.html.heex b/apps/fz_http/lib/fz_http_web/live/notifications_live/index.html.heex
index ec721d972..20d57eaf0 100644
--- a/apps/fz_http/lib/fz_http_web/live/notifications_live/index.html.heex
+++ b/apps/fz_http/lib/fz_http_web/live/notifications_live/index.html.heex
@@ -1,44 +1,50 @@
-<%= render FzHttpWeb.SharedView, "heading.html", page_title: @page_title %>
+<%= render(FzHttpWeb.SharedView, "heading.html",
+           page_subtitle: @page_subtitle,
+           page_title: @page_title) %>
 
 <section class="section is-main-section">
   <div class="block">
-    <table class="table is-hoverable is-bordered is-striped is-fullwidth">
-      <thead>
-        <tr>
-          <th></th>
-          <th>Time</th>
-          <th>User</th>
-          <th>Notification</th>
-          <th>Clear</th>
-        </tr>
-      </thead>
-      <tbody>
-        <%= for {notification, index} <- Enum.with_index(@notifications) do %>
+    <%= if Enum.any?(@notifications) do %>
+      <table class="table is-hoverable is-bordered is-striped is-fullwidth">
+        <thead>
           <tr>
-            <td class="has-text-centered is-vcentered">
-              <%= icon(notification.type, assigns) %>
-            </td>
-            <td
-              class="has-text-centered is-vcentered"
-              style="width: 15%"
-              id={"notification-time-#{index}"}
-              phx-hook="FormatTimestamp"
-              data-timestamp={notification.timestamp}>
-              ...
-            </td>
-            <td class="has-text-centered is-vcentered"><%= notification.user %></td>
-            <td class="is-vcentered"><%= notification.message %></td>
-            <td class="has-text-centered is-vcentered">
-              <button
-                title="Dissmiss notification"
-                class="delete is-medium"
-                phx-click="clear_notification"
-                phx-value-index={index}>
-              </button>
-            </td>
+            <th></th>
+            <th>Time</th>
+            <th>User</th>
+            <th>Notification</th>
+            <th>Clear</th>
           </tr>
-        <% end %>
-      </tbody>
-    </table>
+        </thead>
+        <tbody>
+          <%= for {notification, index} <- Enum.with_index(@notifications) do %>
+            <tr>
+              <td class="has-text-centered is-vcentered">
+                <%= icon(notification.type, assigns) %>
+              </td>
+              <td
+                class="has-text-centered is-vcentered"
+                style="width: 15%"
+                id={"notification-time-#{index}"}
+                phx-hook="FormatTimestamp"
+                data-timestamp={notification.timestamp}>
+                ...
+              </td>
+              <td class="has-text-centered is-vcentered"><%= notification.user %></td>
+              <td class="is-vcentered"><%= notification.message %></td>
+              <td class="has-text-centered is-vcentered">
+                <button
+                  title="Dissmiss notification"
+                  class="delete is-medium"
+                  phx-click="clear_notification"
+                  phx-value-index={index}>
+                </button>
+              </td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+    <% else %>
+      No notifications to display.
+    <% end %>
   </div>
 </section>
diff --git a/apps/fz_http/lib/fz_http_web/live/notifications_live/index_live.ex b/apps/fz_http/lib/fz_http_web/live/notifications_live/index_live.ex
index 9b4748c88..496e95251 100644
--- a/apps/fz_http/lib/fz_http_web/live/notifications_live/index_live.ex
+++ b/apps/fz_http/lib/fz_http_web/live/notifications_live/index_live.ex
@@ -10,6 +10,8 @@ defmodule FzHttpWeb.NotificationsLive.Index do
   require Logger
 
   @topic "notifications_live"
+  @page_title "Notifications"
+  @page_subtitle "Persisted notifications will appear below."
 
   def topic, do: @topic
 
@@ -20,7 +22,8 @@ defmodule FzHttpWeb.NotificationsLive.Index do
     {:ok,
      socket
      |> assign(:notifications, Notifications.current())
-     |> assign(:page_title, "Notifications")}
+     |> assign(:page_subtitle, @page_subtitle)
+     |> assign(:page_title, @page_title)}
   end
 
   @impl Phoenix.LiveView
diff --git a/apps/fz_http/lib/fz_http_web/live/rule_live/index.html.heex b/apps/fz_http/lib/fz_http_web/live/rule_live/index.html.heex
index b2684600d..9e310e267 100644
--- a/apps/fz_http/lib/fz_http_web/live/rule_live/index.html.heex
+++ b/apps/fz_http/lib/fz_http_web/live/rule_live/index.html.heex
@@ -1,4 +1,6 @@
-<%= render FzHttpWeb.SharedView, "heading.html", page_title: @page_title %>
+<%= render(FzHttpWeb.SharedView, "heading.html",
+           page_subtitle: @page_subtitle,
+           page_title: @page_title) %>
 
 <section class="section is-main-section">
   <div class="block">
diff --git a/apps/fz_http/lib/fz_http_web/live/rule_live/index_live.ex b/apps/fz_http/lib/fz_http_web/live/rule_live/index_live.ex
index c30086432..7aad0351b 100644
--- a/apps/fz_http/lib/fz_http_web/live/rule_live/index_live.ex
+++ b/apps/fz_http/lib/fz_http_web/live/rule_live/index_live.ex
@@ -4,9 +4,13 @@ defmodule FzHttpWeb.RuleLive.Index do
   """
   use FzHttpWeb, :live_view
 
+  @page_title "Egress Rules"
+  @page_subtitle "Firewall rules to apply to the kernel's forward chain."
+
   def mount(_params, _session, socket) do
     {:ok,
      socket
-     |> assign(:page_title, "Egress Rules")}
+     |> assign(:page_subtitle, @page_subtitle)
+     |> assign(:page_title, @page_title)}
   end
 end
diff --git a/apps/fz_http/lib/fz_http_web/live/setting_live/account.html.heex b/apps/fz_http/lib/fz_http_web/live/setting_live/account.html.heex
index 11ca4cf03..0a79a8596 100644
--- a/apps/fz_http/lib/fz_http_web/live/setting_live/account.html.heex
+++ b/apps/fz_http/lib/fz_http_web/live/setting_live/account.html.heex
@@ -16,17 +16,13 @@
       return_to={Routes.setting_account_path(@socket, :show)} />
 <% end %>
 
-<%= render FzHttpWeb.SharedView, "heading.html", page_title: @page_title %>
+<%= render(FzHttpWeb.SharedView, "heading.html",
+           page_subtitle: @page_subtitle,
+           page_title: @page_title) %>
 
 <section class="section is-main-section">
   <%= render FzHttpWeb.SharedView, "flash.html", assigns %>
 
-  <div class="block">
-    <p>
-      Configure account settings.
-    </p>
-  </div>
-
   <div class="level">
     <div class="level-left">
       <h4 class="title is-4">Details</h4>
diff --git a/apps/fz_http/lib/fz_http_web/live/setting_live/account_live.ex b/apps/fz_http/lib/fz_http_web/live/setting_live/account_live.ex
index 4a79ecf58..10ae8077e 100644
--- a/apps/fz_http/lib/fz_http_web/live/setting_live/account_live.ex
+++ b/apps/fz_http/lib/fz_http_web/live/setting_live/account_live.ex
@@ -8,6 +8,8 @@ defmodule FzHttpWeb.SettingLive.Account do
   alias FzHttpWeb.{Endpoint, Presence}
 
   @live_sessions_topic "notification:session"
+  @page_title "Account Settings"
+  @page_subtitle "Configure settings related to your Firezone web portal account."
 
   @impl Phoenix.LiveView
   def mount(_params, _session, socket) do
@@ -17,7 +19,8 @@ defmodule FzHttpWeb.SettingLive.Account do
      socket
      |> assign(:changeset, Users.change_user(socket.assigns.current_user))
      |> assign(:methods, MFA.list_methods(socket.assigns.current_user))
-     |> assign(:page_title, "Account Settings")
+     |> assign(:page_title, @page_title)
+     |> assign(:page_subtitle, @page_subtitle)
      |> assign(:rules_path, Routes.rule_index_path(socket, :index))
      |> assign(
        :metas,
diff --git a/apps/fz_http/lib/fz_http_web/live/setting_live/customization.html.heex b/apps/fz_http/lib/fz_http_web/live/setting_live/customization.html.heex
index 5a563b99f..e571bce26 100644
--- a/apps/fz_http/lib/fz_http_web/live/setting_live/customization.html.heex
+++ b/apps/fz_http/lib/fz_http_web/live/setting_live/customization.html.heex
@@ -1,14 +1,10 @@
-<%= render FzHttpWeb.SharedView, "heading.html", page_title: @page_title %>
+<%= render(FzHttpWeb.SharedView, "heading.html",
+           page_subtitle: @page_subtitle,
+           page_title: @page_title) %>
 
 <section class="section is-main-section">
   <%= render FzHttpWeb.SharedView, "flash.html", assigns %>
 
-  <div class="block">
-    <p>
-      Customize your web portal.
-    </p>
-  </div>
-
   <h4 class="title is-4">Logo</h4>
 
   <div class="block">
diff --git a/apps/fz_http/lib/fz_http_web/live/setting_live/customization_live.ex b/apps/fz_http/lib/fz_http_web/live/setting_live/customization_live.ex
index 22b25e1b9..44a78c6b6 100644
--- a/apps/fz_http/lib/fz_http_web/live/setting_live/customization_live.ex
+++ b/apps/fz_http/lib/fz_http_web/live/setting_live/customization_live.ex
@@ -7,6 +7,8 @@ defmodule FzHttpWeb.SettingLive.Customization do
   alias FzHttp.Conf
 
   @max_logo_size 1024 ** 2
+  @page_title "Customization"
+  @page_subtitle "Customize the look and feel of your Firezone web portal."
 
   @impl Phoenix.LiveView
   def mount(_params, _session, socket) do
@@ -15,7 +17,8 @@ defmodule FzHttpWeb.SettingLive.Customization do
 
     {:ok,
      socket
-     |> assign(:page_title, "Customization")
+     |> assign(:page_title, @page_title)
+     |> assign(:page_subtitle, @page_subtitle)
      |> assign(:logo, logo)
      |> assign(:logo_type, logo_type)
      |> allow_upload(:logo,
diff --git a/apps/fz_http/lib/fz_http_web/live/setting_live/security.html.heex b/apps/fz_http/lib/fz_http_web/live/setting_live/security.html.heex
index 5e2bc1346..816722360 100644
--- a/apps/fz_http/lib/fz_http_web/live/setting_live/security.html.heex
+++ b/apps/fz_http/lib/fz_http_web/live/setting_live/security.html.heex
@@ -1,14 +1,10 @@
-<%= render FzHttpWeb.SharedView, "heading.html", page_title: @page_title %>
+<%= render(FzHttpWeb.SharedView, "heading.html",
+           page_subtitle: @page_subtitle,
+           page_title: @page_title) %>
 
 <section class="section is-main-section">
   <%= render FzHttpWeb.SharedView, "flash.html", assigns %>
 
-  <div class="block">
-    <p>
-      Configure security-related settings.
-    </p>
-  </div>
-
   <h4 class="title is-4">Authentication</h4>
 
   <div class="block">
diff --git a/apps/fz_http/lib/fz_http_web/live/setting_live/security_live.ex b/apps/fz_http/lib/fz_http_web/live/setting_live/security_live.ex
index de52fb74d..ffc285939 100644
--- a/apps/fz_http/lib/fz_http_web/live/setting_live/security_live.ex
+++ b/apps/fz_http/lib/fz_http_web/live/setting_live/security_live.ex
@@ -8,6 +8,9 @@ defmodule FzHttpWeb.SettingLive.Security do
 
   alias FzHttp.{Conf, Sites, Sites.Site}
 
+  @page_title "Security Settings"
+  @page_subtitle "Configure security-related settings."
+
   @impl Phoenix.LiveView
   def mount(_params, _session, socket) do
     config_changeset = Conf.change_configuration()
@@ -18,7 +21,8 @@ defmodule FzHttpWeb.SettingLive.Security do
      |> assign(:session_duration_options, session_duration_options())
      |> assign(:site_changeset, site_changeset())
      |> assign(:config_changeset, config_changeset)
-     |> assign(:page_title, "Security Settings")}
+     |> assign(:page_subtitle, @page_subtitle)
+     |> assign(:page_title, @page_title)}
   end
 
   @impl Phoenix.LiveView
diff --git a/apps/fz_http/lib/fz_http_web/live/setting_live/site.html.heex b/apps/fz_http/lib/fz_http_web/live/setting_live/site.html.heex
index d4fc0acf1..94b7e58a8 100644
--- a/apps/fz_http/lib/fz_http_web/live/setting_live/site.html.heex
+++ b/apps/fz_http/lib/fz_http_web/live/setting_live/site.html.heex
@@ -1,14 +1,10 @@
-<%= render FzHttpWeb.SharedView, "heading.html", page_title: @page_title %>
+<%= render(FzHttpWeb.SharedView, "heading.html",
+           page_subtitle: @page_subtitle,
+           page_title: @page_title) %>
 
 <section class="section is-main-section">
   <%= render FzHttpWeb.SharedView, "flash.html", assigns %>
 
-  <div class="block">
-    <p>
-      Configure default WireGuard settings for this site.
-    </p>
-  </div>
-
   <h4 class="title is-4">Site Defaults</h4>
 
   <div class="block">
diff --git a/apps/fz_http/lib/fz_http_web/live/setting_live/site_live.ex b/apps/fz_http/lib/fz_http_web/live/setting_live/site_live.ex
index de2e94ea3..0d038c734 100644
--- a/apps/fz_http/lib/fz_http_web/live/setting_live/site_live.ex
+++ b/apps/fz_http/lib/fz_http_web/live/setting_live/site_live.ex
@@ -6,13 +6,17 @@ defmodule FzHttpWeb.SettingLive.Site do
 
   alias FzHttp.{ConnectivityChecks, Sites}
 
+  @page_title "Site Settings"
+  @page_subtitle "Configure default WireGuard settings for this site."
+
   @impl Phoenix.LiveView
   def mount(_params, _session, socket) do
     {:ok,
      socket
      |> assign(:changeset, changeset())
      |> assign(:placeholders, placeholders())
-     |> assign(:page_title, "Site Settings")}
+     |> assign(:page_subtitle, @page_subtitle)
+     |> assign(:page_title, @page_title)}
   end
 
   defp endpoint_placeholder do
diff --git a/apps/fz_http/lib/fz_http_web/live/setting_live/unprivileged/account.html.heex b/apps/fz_http/lib/fz_http_web/live/setting_live/unprivileged/account.html.heex
index 17e97d99a..b0f5edeaa 100644
--- a/apps/fz_http/lib/fz_http_web/live/setting_live/unprivileged/account.html.heex
+++ b/apps/fz_http/lib/fz_http_web/live/setting_live/unprivileged/account.html.heex
@@ -23,9 +23,7 @@
   <%= render FzHttpWeb.SharedView, "flash.html", assigns %>
 
   <div class="block">
-    <p>
-      Configure account settings.
-    </p>
+    <%= @page_subtitle %>
   </div>
 
   <div class="level">
diff --git a/apps/fz_http/lib/fz_http_web/live/setting_live/unprivileged/account_live.ex b/apps/fz_http/lib/fz_http_web/live/setting_live/unprivileged/account_live.ex
index f859f9a2b..8dce183b4 100644
--- a/apps/fz_http/lib/fz_http_web/live/setting_live/unprivileged/account_live.ex
+++ b/apps/fz_http/lib/fz_http_web/live/setting_live/unprivileged/account_live.ex
@@ -12,6 +12,8 @@ defmodule FzHttpWeb.SettingLive.Unprivileged.Account do
   alias FzHttpWeb.{Endpoint, Presence}
 
   @live_sessions_topic "notification:session"
+  @page_title "Account Settings"
+  @page_subtitle "Configure account settings."
 
   @impl Phoenix.LiveView
   def mount(_params, _session, socket) do
@@ -22,7 +24,8 @@ defmodule FzHttpWeb.SettingLive.Unprivileged.Account do
      |> assign(:local_auth_enabled, FzHttp.Conf.get(:local_auth_enabled))
      |> assign(:changeset, Users.change_user(socket.assigns.current_user))
      |> assign(:methods, MFA.list_methods(socket.assigns.current_user))
-     |> assign(:page_title, "Account Settings")
+     |> assign(:page_title, @page_title)
+     |> assign(:page_subtitle, @page_subtitle)
      |> assign(
        :metas,
        get_metas(Presence.list(@live_sessions_topic), socket.assigns.current_user.id)
diff --git a/apps/fz_http/lib/fz_http_web/live/user_live/index_live.ex b/apps/fz_http/lib/fz_http_web/live/user_live/index_live.ex
index 5d65d9587..a27da6af2 100644
--- a/apps/fz_http/lib/fz_http_web/live/user_live/index_live.ex
+++ b/apps/fz_http/lib/fz_http_web/live/user_live/index_live.ex
@@ -6,13 +6,15 @@ defmodule FzHttpWeb.UserLive.Index do
 
   alias FzHttp.Users
 
+  @page_title "Users"
+
   @impl Phoenix.LiveView
   def mount(_params, _session, socket) do
     {:ok,
      socket
      |> assign(:users, Users.list_users(:with_device_counts))
      |> assign(:changeset, Users.new_user())
-     |> assign(:page_title, "Users")}
+     |> assign(:page_title, @page_title)}
   end
 
   @impl Phoenix.LiveView
diff --git a/apps/fz_http/lib/fz_http_web/templates/shared/heading.html.heex b/apps/fz_http/lib/fz_http_web/templates/shared/heading.html.heex
index a2b07d96a..7638969bf 100644
--- a/apps/fz_http/lib/fz_http_web/templates/shared/heading.html.heex
+++ b/apps/fz_http/lib/fz_http_web/templates/shared/heading.html.heex
@@ -1,16 +1,14 @@
 <section class="hero is-hero-bar">
   <div class="hero-body">
-    <div class="level">
-      <div class="level-left">
-        <div class="level-item">
-          <h1 class="title">
-            <%= @page_title %>
-          </h1>
-        </div>
-      </div>
-      <div class="level-right" style="display: none;">
-        <div class="level-item"></div>
-      </div>
+    <div class="block">
+        <h1 class="title">
+          <%= @page_title %>
+        </h1>
     </div>
+    <%= if assigns[:page_subtitle] do %>
+      <div class="block">
+        <p><%= @page_subtitle %></p>
+      </div>
+    <% end %>
   </div>
 </section>
diff --git a/docker-compose.yml b/docker-compose.yml
index fe43a3507..681b0b029 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -31,6 +31,7 @@ services:
       # doesn't match the platform under which Docker Engine is running. e.g.
       # WSL, Docker for Mac, etc.
       - /var/app/apps/fz_http/assets/node_modules
+      - /var/app/_build
     ports:
       - 51820:51820/udp
     environment: