From ad8d13cb699aa9821d00645c7eb4b412a649b50b Mon Sep 17 00:00:00 2001
From: Chili Palmer <hugoms@me.com>
Date: Sun, 26 Apr 2026 06:34:07 +0200
Subject: [PATCH] fix: more cleanup of liveview

Co-authored-by: Copilot <copilot@github.com>
---
 lib/bds/desktop/shell_live.ex              | 11 +++++++
 lib/bds/desktop/shell_live/index.html.heex | 35 ++++++++++++++++------
 priv/ui/app.css                            | 20 ++++++++++++-
 test/bds/desktop/shell_live_test.exs       |  8 +++++
 4 files changed, 64 insertions(+), 10 deletions(-)

diff --git a/lib/bds/desktop/shell_live.ex b/lib/bds/desktop/shell_live.ex
index f0fca01..8941e7d 100644
--- a/lib/bds/desktop/shell_live.ex
+++ b/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)}
diff --git a/lib/bds/desktop/shell_live/index.html.heex b/lib/bds/desktop/shell_live/index.html.heex
index ce87e24..4dd9661 100644
--- a/lib/bds/desktop/shell_live/index.html.heex
+++ b/lib/bds/desktop/shell_live/index.html.heex
@@ -112,19 +112,36 @@
         <% 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}
-                type="button"
-                phx-click="select_tab"
-                phx-value-type={tab.type}
-                phx-value-id={tab.id}
               >
-                <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-select"
+                  type="button"
+                  phx-click="select_tab"
+                  phx-value-type={tab.type}
+                  phx-value-id={tab.id}
+                >
+                  <span class="tab-icon"><%= raw(ShellData.activity_icon(tab_icon_id(tab))) %></span>
+                  <span class="tab-title"><%= tab_title(tab, @tab_meta) %></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 %>
diff --git a/priv/ui/app.css b/priv/ui/app.css
index 26f783f..eb6c974 100644
--- a/priv/ui/app.css
+++ b/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 {
diff --git a/test/bds/desktop/shell_live_test.exs b/test/bds/desktop/shell_live_test.exs
index 5998fa2..af8d378 100644
--- a/test/bds/desktop/shell_live_test.exs
+++ b/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