Add help button to primary toolbar

The keyboard shortcuts modal was only accessible via the ? key with no
visual indication it existed. Added a help dropdown to the toolbar that
links to documentation and opens the shortcuts modal.

Author: sorentwo

lib/oban/web/components/layouts/live.html.heex

@@ -18,6 +18,7 @@
       <.live_component module={Oban.Web.ConnectivityComponent} id="connectivity" conf={@conf} />
       <.live_component module={Oban.Web.ThemeComponent} id="theme" theme={@theme} />
       <.live_component module={Oban.Web.RefreshComponent} id="refresh" refresh={@refresh} />
+      <.live_component module={Oban.Web.HelpComponent} id="help" />
       <.live_component
         module={Oban.Web.InstancesComponent}
         id="instances"

lib/oban/web/live/help_component.ex

@@ -0,0 +1,55 @@
+defmodule Oban.Web.HelpComponent do
+  use Oban.Web, :live_component
+
+  @impl Phoenix.LiveComponent
+  def render(assigns) do
+    ~H"""
+    <div class="relative" id="help-selector">
+      <button
+        aria-expanded="true"
+        aria-haspopup="listbox"
+        class="cursor-pointer text-gray-500 dark:text-gray-400 focus:outline-none hover:text-gray-700 dark:hover:text-gray-200 hidden md:block"
+        data-title="Help"
+        id="help-menu-toggle"
+        phx-hook="Tippy"
+        phx-click={JS.toggle(to: "#help-menu")}
+        type="button"
+      >
+        <Icons.question_mark_circle />
+      </button>
+
+      <ul
+        class="hidden absolute z-50 top-full right-0 mt-2 py-2 w-48 overflow-hidden rounded-md shadow-lg text-sm font-semibold bg-white dark:bg-gray-800 focus:outline-none"
+        id="help-menu"
+        role="listbox"
+        tabindex="-1"
+      >
+        <li
+          class="block w-full py-1 px-2 flex items-center cursor-pointer space-x-2 text-gray-500 dark:text-gray-400 hover:bg-gray-50 hover:dark:bg-gray-600/30"
+          phx-click-away={JS.hide(to: "#help-menu")}
+          role="option"
+        >
+          <a
+            href="https://hexdocs.pm/oban_web"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="flex items-center space-x-2 w-full"
+          >
+            <Icons.arrow_top_right_on_square class="w-5 h-5" />
+            <span class="text-gray-800 dark:text-gray-200">Documentation</span>
+          </a>
+        </li>
+        <li
+          class="block w-full py-1 px-2 flex items-center cursor-pointer space-x-2 text-gray-500 dark:text-gray-400 hover:bg-gray-50 hover:dark:bg-gray-600/30"
+          phx-click-away={JS.hide(to: "#help-menu")}
+          phx-click={JS.hide(to: "#help-menu") |> JS.exec("data-shortcut", to: "#shortcuts")}
+          role="option"
+        >
+          <Icons.command_line class="w-5 h-5" />
+          <span class="text-gray-800 dark:text-gray-200">Keyboard shortcuts</span>
+        </li>
+      </ul>
+    </div>
+    """
+  end
+end

lib/oban/web/live/instances_component.ex

@@ -38,7 +38,7 @@ defmodule Oban.Web.InstancesComponent do
       <button
         aria-expanded="true"
         aria-haspopup="listbox"
-        class="rounded-md px-3 py-2 text-sm text-gray-600 dark:text-gray-300
+        class="cursor-pointer rounded-md px-3 py-2 text-sm text-gray-600 dark:text-gray-300
         hover:text-gray-800 dark:hover:text-gray-200
         hover:bg-black/5 dark:hover:bg-white/5
         ring-1 ring-inset ring-gray-400 dark:ring-gray-700
@@ -53,7 +53,7 @@ defmodule Oban.Web.InstancesComponent do
       </button>
 
       <ul
-        class="hidden absolute z-10 top-full right-0 mt-2 text-sm font-semibold overflow-auto rounded-md bg-white dark:bg-gray-800 shadow-lg ring-1 ring-black/5"
+        class="hidden absolute z-10 top-full right-0 mt-2 py-2 text-sm font-semibold overflow-auto rounded-md bg-white dark:bg-gray-800 shadow-lg ring-1 ring-black/5"
         id="instance-select-menu"
       >
         <li

lib/oban/web/live/refresh_component.ex

@@ -29,7 +29,7 @@ defmodule Oban.Web.RefreshComponent do
         aria-haspopup="listbox"
         aria-expanded="true"
         aria-labelledby="listbox-label"
-        class="text-gray-500 dark:text-gray-400 focus:outline-none hover:text-gray-600 dark:hover:text-gray-200 hidden md:flex"
+        class="cursor-pointer text-gray-500 dark:text-gray-400 focus:outline-none hover:text-gray-700 dark:hover:text-gray-200 hidden md:flex"
         data-title="Change refresh rate"
         id="refresh-menu-toggle"
         phx-hook="Tippy"
@@ -41,7 +41,7 @@ defmodule Oban.Web.RefreshComponent do
       </button>
 
       <ul
-        class="hidden absolute z-50 top-full right-0 mt-2 w-18 overflow-hidden rounded-md shadow-lg text-sm font-semibold bg-white dark:bg-gray-800 focus:outline-none"
+        class="hidden absolute z-50 top-full right-0 mt-2 py-2 w-18 overflow-hidden rounded-md shadow-lg text-sm font-semibold bg-white dark:bg-gray-800 focus:outline-none"
         id="refresh-menu"
         role="listbox"
         tabindex="-1"

lib/oban/web/live/theme_component.ex

@@ -13,7 +13,7 @@ defmodule Oban.Web.ThemeComponent do
       <button
         aria-expanded="true"
         aria-haspopup="listbox"
-        class="text-gray-500 dark:text-gray-400 focus:outline-none hover:text-gray-600 dark:hover:text-gray-200 hidden md:block"
+        class="cursor-pointer text-gray-500 dark:text-gray-400 focus:outline-none hover:text-gray-700 dark:hover:text-gray-200 hidden md:block"
         data-title="Change theme"
         id="theme-menu-toggle"
         phx-hook="Tippy"
@@ -24,7 +24,7 @@ defmodule Oban.Web.ThemeComponent do
       </button>
 
       <ul
-        class="hidden absolute z-50 top-full right-0 mt-2 w-32 overflow-hidden rounded-md shadow-lg text-sm font-semibold bg-white dark:bg-gray-800 focus:outline-none"
+        class="hidden absolute z-50 top-full right-0 mt-2 py-2 w-32 overflow-hidden rounded-md shadow-lg text-sm font-semibold bg-white dark:bg-gray-800 focus:outline-none"
         id="theme-menu"
         role="listbox"
         tabindex="-1"