fix: more cleanup of liveview

Co-authored-by: Copilot <copilot@github.com>

lib/bds/desktop/shell_live.ex

@@ -83,6 +83,17 @@ defmodule BDS.Desktop.ShellLive do
     {:noreply, reload_shell(socket, workbench)}
   end
 
+  def handle_event("close_tab", %{"type" => type, "id" => id}, socket) do
+    type_atom = String.to_existing_atom(type)
+    workbench = Workbench.close_tab(socket.assigns.workbench, type_atom, id)
+    tab_meta = Map.delete(socket.assigns.tab_meta, {type_atom, id})
+
+    {:noreply,
+     socket
+     |> assign(:tab_meta, tab_meta)
+     |> reload_shell(workbench)}
+  end
+
   def handle_event("toggle_offline_mode", _params, socket) do
     socket = assign(socket, :offline_mode, not socket.assigns.offline_mode)
     {:noreply, reload_shell(socket, socket.assigns.workbench)}

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

@@ -112,10 +112,13 @@
         <% else %>
           <div class="tab-bar-tabs">
             <%= for tab <- @workbench.tabs do %>
-              <button
+              <div
                 class={["tab", if(@workbench.active_tab == {tab.type, tab.id}, do: "active"), if(tab.is_transient, do: "transient")]}
                 data-tab-type={tab.type}
                 data-tab-id={tab.id}
+              >
+                <button
+                  class="tab-select"
                   type="button"
                   phx-click="select_tab"
                   phx-value-type={tab.type}
@@ -123,8 +126,22 @@
                 >
                   <span class="tab-icon"><%= raw(ShellData.activity_icon(tab_icon_id(tab))) %></span>
                   <span class="tab-title"><%= tab_title(tab, @tab_meta) %></span>
-                <span class="tab-close" aria-hidden="true">×</span>
                 </button>
+                <button
+                  class="tab-close"
+                  data-testid="tab-close"
+                  data-tab-type={tab.type}
+                  data-tab-id={tab.id}
+                  type="button"
+                  phx-click="close_tab"
+                  phx-value-type={tab.type}
+                  phx-value-id={tab.id}
+                  aria-label={translated("Close tab")}
+                  title={translated("Close tab")}
+                >
+                  ×
+                </button>
+              </div>
             <% end %>
           </div>
         <% end %>

priv/ui/app.css

@@ -498,7 +498,7 @@ button {
   display: flex;
   align-items: center;
   gap: 4px;
-  padding: 0 10px;
+  padding: 0 6px 0 10px;
   height: 100%;
   min-width: 100px;
   max-width: 180px;
@@ -513,6 +513,21 @@ button {
   flex-shrink: 0;
 }
 
+.tab-select {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  flex: 1;
+  height: 100%;
+  padding: 0;
+  background: transparent;
+  border: none;
+  color: inherit;
+  font: inherit;
+  cursor: inherit;
+}
+
 .tab:hover {
   background-color: var(--vscode-list-hoverBackground);
 }
@@ -564,6 +579,9 @@ button {
   border-radius: 4px;
   cursor: pointer;
   flex-shrink: 0;
+  border: none;
+  background: transparent;
+  padding: 0;
 }
 
 .tab-close:hover {

test/bds/desktop/shell_live_test.exs

@@ -55,5 +55,13 @@ defmodule BDS.Desktop.ShellLiveTest do
 
     assert html =~ ~s(data-tab-type="settings")
     assert html =~ ">Settings<"
+
+    html =
+      view
+      |> element("[data-testid='tab-close'][data-tab-type='settings'][data-tab-id='settings']")
+      |> render_click()
+
+    refute html =~ ~s(data-tab-type="settings")
+    assert html =~ ~s(class="tab-bar-empty")
   end
 end