feat: make checkbox column in member view sticky

test/mv_web/components/core_components_table_test.exs

@@ -9,7 +9,7 @@ defmodule MvWeb.Components.CoreComponentsTableTest do
   alias MvWeb.CoreComponents
 
   describe "table row_click styling" do
-    test "when row_click is set, table rows have hover and focus-within ring classes" do
+    test "when row_click is set, rows are marked interactive and omit ring hover classes" do
       rows = [%{id: "1", name: "Alice"}, %{id: "2", name: "Bob"}]
 
       assigns = %{
@@ -31,12 +31,12 @@ defmodule MvWeb.Components.CoreComponentsTableTest do
 
       html = render_component(&CoreComponents.table/1, assigns)
 
-      assert html =~ "hover:ring-2"
-      assert html =~ "focus-within:ring-2"
-      assert html =~ "hover:ring-base-content/10"
+      assert html =~ ~s(data-row-interactive="true")
+      refute html =~ "hover:ring-2"
+      refute html =~ "focus-within:ring-2"
     end
 
-    test "when row_click is nil, table rows do not have hover ring classes" do
+    test "when row_click is nil, rows are not marked interactive" do
       rows = [%{id: "1", name: "Alice"}]
 
       assigns = %{
@@ -58,8 +58,7 @@ defmodule MvWeb.Components.CoreComponentsTableTest do
 
       html = render_component(&CoreComponents.table/1, assigns)
 
-      refute html =~ "hover:ring-2"
-      refute html =~ "focus-within:ring-2"
+      refute html =~ ~s(data-row-interactive="true")
     end
   end
 
@@ -233,4 +232,101 @@ defmodule MvWeb.Components.CoreComponentsTableTest do
       refute html =~ ~s(class="overflow-x-auto")
     end
   end
+
+  describe "sticky first column contract" do
+    test "when sticky_first_col is enabled, first header and body cells render sticky-left classes" do
+      rows = [%{id: "1", selected: true, name: "Alice"}]
+
+      assigns = %{
+        id: "test-table",
+        rows: rows,
+        row_id: fn r -> "row-#{r.id}" end,
+        row_click: nil,
+        sticky_first_col: true,
+        row_item: &Function.identity/1,
+        col: [
+          %{
+            __slot__: :col,
+            label: "Select",
+            inner_block: fn _socket, item -> [if(item[:selected], do: "x", else: "")] end
+          },
+          %{
+            __slot__: :col,
+            label: "Name",
+            inner_block: fn _socket, item -> [item[:name] || ""] end
+          }
+        ],
+        dynamic_cols: [],
+        action: []
+      }
+
+      html = render_component(&CoreComponents.table/1, assigns)
+
+      assert html =~ "sticky"
+      assert html =~ "left-0"
+      assert html =~ "z-20"
+      assert html =~ "z-30"
+    end
+
+    test "sticky first column marks wrapper and uses CSS row backgrounds instead of row ring classes" do
+      rows = [%{id: "1", name: "Alice"}]
+
+      assigns = %{
+        id: "test-table",
+        rows: rows,
+        row_id: fn r -> "row-#{r.id}" end,
+        row_click: fn _ -> nil end,
+        sticky_first_col: true,
+        row_item: &Function.identity/1,
+        col: [
+          %{
+            __slot__: :col,
+            label: "Select",
+            inner_block: fn _socket, _item -> ["x"] end
+          },
+          %{
+            __slot__: :col,
+            label: "Name",
+            inner_block: fn _socket, item -> [item[:name] || ""] end
+          }
+        ],
+        dynamic_cols: [],
+        action: []
+      }
+
+      html = render_component(&CoreComponents.table/1, assigns)
+
+      assert html =~ ~s(data-sticky-first-col-rows="true")
+      assert html =~ "sticky-first-col-cell"
+      refute html =~ "hover:ring-2"
+    end
+
+    test "sticky first column with selection sets data-selected without ring-primary" do
+      rows = [%{id: "one", name: "Alice"}, %{id: "two", name: "Bob"}]
+
+      assigns = %{
+        id: "test-table",
+        rows: rows,
+        row_id: fn r -> "row-#{r.id}" end,
+        row_click: fn _ -> nil end,
+        sticky_first_col: true,
+        selected_row_id: "two",
+        row_item: &Function.identity/1,
+        col: [
+          %{
+            __slot__: :col,
+            label: "Name",
+            inner_block: fn _socket, item -> [item[:name] || ""] end
+          }
+        ],
+        dynamic_cols: [],
+        action: []
+      }
+
+      html = render_component(&CoreComponents.table/1, assigns)
+
+      assert html =~ ~s(data-selected="true")
+      refute html =~ "ring-primary"
+    end
+  end
 end

test/mv_web/member_live/index_test.exs

@@ -90,6 +90,25 @@ defmodule MvWeb.MemberLive.IndexTest do
       refute html =~ ~s(id="members-keyboard" class="overflow-x-auto")
       refute html =~ ~s(id="members-keyboard" class="overflow-auto")
     end
+
+    test "members table keeps checkbox column sticky while horizontally scrolling", %{conn: conn} do
+      system_actor = SystemActor.get_system_actor()
+
+      {:ok, _member} =
+        Membership.create_member(
+          %{first_name: "Sticky", last_name: "Column", email: "sticky-column@example.com"},
+          actor: system_actor
+        )
+
+      conn = conn_with_oidc_user(conn)
+      {:ok, _view, html} = live(conn, ~p"/members")
+
+      # Contract: first column (select-all header + row checkbox cells) is sticky on the left
+      assert html =~ "left-0"
+      assert html =~ "sticky"
+      assert html =~ "z-30"
+      assert html =~ "z-20"
+    end
   end
 
   describe "translations" do
@@ -351,10 +370,12 @@ defmodule MvWeb.MemberLive.IndexTest do
     assert_redirect(view, ~p"/members/#{member}")
   end
 
-  describe "table row outline (hover and selected)" do
+  describe "table row highlight (hover and selected)" do
     @describetag :ui
 
-    test "clickable rows have hover and focus-within ring classes", %{conn: conn} do
+    test "clickable rows with sticky first column use hover/focus background highlight", %{
+      conn: conn
+    } do
       system_actor = SystemActor.get_system_actor()
 
       {:ok, _member} =
@@ -366,10 +387,9 @@ defmodule MvWeb.MemberLive.IndexTest do
       conn = conn_with_oidc_user(conn)
       {:ok, _view, html} = live(conn, "/members")
 
-      # CoreComponents table adds hover and focus-within ring when row_click is set
-      assert html =~ "hover:ring-2"
-      assert html =~ "focus-within:ring-2"
-      assert html =~ "hover:ring-base-content/10"
+      # Sticky-first-column tables: hover/focus fills live in CSS; wrapper is marked for tests.
+      assert html =~ ~s(data-sticky-first-col-rows="true")
+      refute html =~ "hover:ring-2"
     end
 
     test "selected outline only from checkbox selection, not from highlight param", %{conn: conn} do