fix: more alignment

lib/bds/desktop/shell_live.ex

@@ -6,6 +6,7 @@ defmodule BDS.Desktop.ShellLive do
   import Phoenix.HTML
 
   alias BDS.Desktop.{FolderPicker, ShellCommands, ShellData}
+  alias BDS.Desktop.MenuBar, as: DesktopMenuBar
   alias BDS.Git
   alias BDS.Media.Media
   alias BDS.PostLinks
@@ -46,6 +47,9 @@ defmodule BDS.Desktop.ShellLive do
      |> assign(:page_language, ShellData.ui_language())
       |> assign(:client_shortcuts, Commands.client_shortcuts())
      |> assign(:offline_mode, true)
+    |> assign(:is_mac_ui, mac_ui?())
+    |> assign(:menu_groups, titlebar_menu_groups())
+    |> assign(:titlebar_menu_group, nil)
      |> assign(:tab_meta, %{})
       |> assign(:project_menu_open, false)
       |> assign(:sidebar_filters_by_view, %{})
@@ -337,6 +341,33 @@ defmodule BDS.Desktop.ShellLive do
     {:noreply, handle_native_menu_action(socket, action)}
   end
 
+  def handle_event("toggle_titlebar_menu", %{"group" => group}, socket) do
+    next_group = if socket.assigns.titlebar_menu_group == group, do: nil, else: group
+    {:noreply, assign(socket, :titlebar_menu_group, next_group)}
+  end
+
+  def handle_event("hover_titlebar_menu", %{"group" => group}, socket) do
+    socket =
+      if socket.assigns.titlebar_menu_group do
+        assign(socket, :titlebar_menu_group, group)
+      else
+        socket
+      end
+
+    {:noreply, socket}
+  end
+
+  def handle_event("close_titlebar_menu", _params, socket) do
+    {:noreply, assign(socket, :titlebar_menu_group, nil)}
+  end
+
+  def handle_event("titlebar_menu_action", %{"action" => action}, socket) do
+    {:noreply,
+     socket
+     |> assign(:titlebar_menu_group, nil)
+     |> handle_native_menu_action(action)}
+  end
+
   @impl true
   def handle_info(:refresh_task_status, socket) do
     task_status = BDS.Tasks.status_snapshot()
@@ -395,6 +426,7 @@ defmodule BDS.Desktop.ShellLive do
     |> assign(:activity_buttons, activity_buttons)
     |> assign(:panel_tabs, ShellData.panel_tabs(workbench))
     |> assign(:supported_ui_languages, ShellData.supported_ui_languages())
+    |> assign(:menu_groups, socket.assigns[:menu_groups] || titlebar_menu_groups())
     |> assign(:current_tab, current_tab(workbench))
   end
 
@@ -1349,6 +1381,21 @@ defmodule BDS.Desktop.ShellLive do
     |> Enum.map_join(" ", &String.capitalize/1)
   end
 
+  defp titlebar_menu_groups do
+    DesktopMenuBar.groups(dev_mode?: Application.get_env(:bds, :dev_routes, false))
+  end
+
+  defp active_titlebar_menu_group(assigns) do
+    Enum.find(assigns.menu_groups || [], fn group -> Atom.to_string(group.id) == assigns.titlebar_menu_group end)
+  end
+
+  defp mac_ui? do
+    case Application.get_env(:bds, :shell_platform) do
+      nil -> match?({:unix, :darwin}, :os.type())
+      platform -> match?({:unix, :darwin}, platform)
+    end
+  end
+
   defp post_link_entries(assigns) do
     case assigns.current_tab do
       %{type: :post, id: post_id} ->

lib/bds/desktop/shell_live/index.html.heex

@@ -1,12 +1,29 @@
 <div class="app" id="bds-shell-app" phx-hook="AppShell" data-shortcuts={encoded_shortcuts(@client_shortcuts)}>
-  <div class="window-titlebar" data-region="title-bar">
-    <div class="window-titlebar-menu-bar is-hidden">
-      <button class="window-titlebar-menu-button" type="button">File</button>
-      <button class="window-titlebar-menu-button" type="button">Edit</button>
-      <button class="window-titlebar-menu-button" type="button">View</button>
-      <button class="window-titlebar-menu-button" type="button">Blog</button>
-      <button class="window-titlebar-menu-button" type="button">Help</button>
-    </div>
+  <div
+    class={["window-titlebar", if(@is_mac_ui, do: "is-mac")]}
+    data-region="title-bar"
+    data-testid="window-titlebar"
+    data-open-menu-group={@titlebar_menu_group || ""}
+  >
+    <%= unless @is_mac_ui do %>
+      <div class="window-titlebar-menu-bar" data-testid="window-titlebar-menu-bar">
+        <%= for group <- @menu_groups do %>
+          <button
+            class={[
+              "window-titlebar-menu-button",
+              if(@titlebar_menu_group == Atom.to_string(group.id), do: "is-active")
+            ]}
+            data-testid="window-titlebar-menu-button"
+            data-menu-group={group.id}
+            type="button"
+            phx-click="toggle_titlebar_menu"
+            phx-mouseenter="hover_titlebar_menu"
+            phx-value-group={group.id}
+            aria-label={group.label}
+          ><%= group.label %></button>
+        <% end %>
+      </div>
+    <% end %>
     <div class="window-titlebar-drag-region"></div>
     <div class="window-titlebar-title" data-testid="window-title"><%= @page_title %></div>
     <div class="window-titlebar-actions">
@@ -47,6 +64,36 @@
         </span>
       </button>
     </div>
+    <%= if not @is_mac_ui do %>
+      <%= if group = active_titlebar_menu_group(assigns) do %>
+        <div
+          class="window-titlebar-menu-dropdown"
+          data-testid="window-titlebar-menu-dropdown"
+          phx-click-away="close_titlebar_menu"
+        >
+          <%= for item <- group.items do %>
+            <%= if item.separator do %>
+              <div class="window-titlebar-menu-separator"></div>
+            <% else %>
+              <button
+                class="window-titlebar-menu-item"
+                data-testid="window-titlebar-menu-item"
+                data-menu-action={item.id}
+                type="button"
+                phx-click="titlebar_menu_action"
+                phx-value-action={item.id}
+                aria-label={item.label}
+              >
+                <span class="window-titlebar-menu-item-label"><%= item.label %></span>
+                <%= if item.shortcut do %>
+                  <span class="window-titlebar-menu-item-accelerator"><%= item.shortcut %></span>
+                <% end %>
+              </button>
+            <% end %>
+          <% end %>
+        </div>
+      <% end %>
+    <% end %>
   </div>
 
   <div class="app-main">