From 61db78035f0914e90fe3bb366ae6bee8fe69bb18 Mon Sep 17 00:00:00 2001
From: Clifton McIntosh <cliff.mcintosh@gmail.com>
Date: Mon, 11 May 2026 10:34:22 -0500
Subject: [PATCH 1/7] feat(#6503): add Columns button and panel HTML for case
 contact table

Adds the Columns toolbar button with a (6/6) badge, the slide-down
panel with Bootstrap toggle switches for the 6 user-configurable
columns, and the CaseContact::TOGGLEABLE_COLUMNS constant that drives
the panel. Date and Case columns are intentionally fixed (always
visible).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/models/case_contact.rb                    |  9 ++++
 .../case_contacts_new_design/index.html.erb   | 41 +++++++++++++++++--
 .../case_contacts_new_design_spec.rb          | 25 +++++++++++
 3 files changed, 71 insertions(+), 4 deletions(-)

diff --git a/app/models/case_contact.rb b/app/models/case_contact.rb
index 54933056b5..3e73ea490e 100644
--- a/app/models/case_contact.rb
+++ b/app/models/case_contact.rb
@@ -191,6 +191,15 @@ def active_or_notes?
   LETTER = "letter".freeze
   CONTACT_MEDIUMS = [IN_PERSON, TEXT_EMAIL, VIDEO, VOICE_ONLY, LETTER].freeze
 
+  TOGGLEABLE_COLUMNS = [
+    {key: "relationship", label: "Relationship", index: 4},
+    {key: "medium", label: "Medium", index: 5},
+    {key: "created_by", label: "Created By", index: 6},
+    {key: "contacted", label: "Contacted", index: 7},
+    {key: "topics", label: "Topics", index: 8},
+    {key: "draft", label: "Draft", index: 9}
+  ].freeze
+
   def update_cleaning_contact_types(args)
     transaction do
       contact_types.clear
diff --git a/app/views/case_contacts/case_contacts_new_design/index.html.erb b/app/views/case_contacts/case_contacts_new_design/index.html.erb
index 48f7076004..76a4ecf836 100644
--- a/app/views/case_contacts/case_contacts_new_design/index.html.erb
+++ b/app/views/case_contacts/case_contacts_new_design/index.html.erb
@@ -2,10 +2,17 @@
   <h1 class="mb-20">Case Contacts</h1>
 
   <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3" id="cc-filter-toolbar">
-    <button type="button" id="cc-filter-toggle" class="main-btn secondary-btn btn-sm btn-hover">
-      <i class="lni lni-funnel mr-5" aria-hidden="true"></i>
-      Filter
-    </button>
+    <div class="d-flex gap-2">
+      <button type="button" id="cc-filter-toggle" class="main-btn secondary-btn btn-sm btn-hover">
+        <i class="lni lni-funnel mr-5" aria-hidden="true"></i>
+        Filter
+      </button>
+
+      <button type="button" id="cc-columns-toggle" class="main-btn secondary-btn btn-sm btn-hover">
+        <i class="lni lni-list mr-5" aria-hidden="true"></i>
+        Columns <span id="cc-columns-count">(6/6)</span>
+      </button>
+    </div>
 
     <%= link_to new_case_contact_path, class: "main-btn primary-btn btn-sm btn-hover" do %>
       <i class="lni lni-plus mr-10" aria-hidden="true"></i>
@@ -13,6 +20,32 @@
     <% end %>
   </div>
 
+  <div id="cc-columns-panel" class="card-style mb-3" style="display: none;">
+    <div class="card-content">
+      <div class="row mb-3">
+        <% CaseContact::TOGGLEABLE_COLUMNS.each do |col| %>
+          <div class="col-md-4">
+            <div class="form-check form-switch">
+              <input type="checkbox"
+                     class="form-check-input cc-column-toggle"
+                     id="cc-col-<%= col[:key] %>"
+                     data-column-index="<%= col[:index] %>"
+                     role="switch"
+                     checked>
+              <label class="form-check-label" for="cc-col-<%= col[:key] %>">
+                <%= col[:label] %>
+              </label>
+            </div>
+          </div>
+        <% end %>
+      </div>
+      <div class="d-flex gap-2">
+        <button type="button" id="cc-columns-update" class="main-btn primary-btn btn-sm btn-hover">Update View</button>
+        <button type="button" id="cc-columns-show-all" class="main-btn dark-btn-outline btn-sm btn-hover">Show All</button>
+      </div>
+    </div>
+  </div>
+
   <div id="cc-filter-panel" class="card-style mb-3" style="display: none;">
     <div class="card-content">
       <div class="row mb-3">
diff --git a/spec/system/case_contacts/case_contacts_new_design_spec.rb b/spec/system/case_contacts/case_contacts_new_design_spec.rb
index 158263a4ae..874ea1ac3a 100644
--- a/spec/system/case_contacts/case_contacts_new_design_spec.rb
+++ b/spec/system/case_contacts/case_contacts_new_design_spec.rb
@@ -25,6 +25,31 @@
     end
   end
 
+  describe "columns panel" do
+    include_context "signed in as admin"
+
+    it "shows a Columns button in the toolbar" do
+      expect(page).to have_button("Columns")
+    end
+
+    it "shows a visible count badge on the Columns button" do
+      expect(page).to have_button(text: /Columns\s*\(6\/6\)/)
+    end
+
+    it "hides the columns panel by default" do
+      expect(page).not_to have_css("#cc-columns-panel", visible: true)
+    end
+
+    it "lists all 6 toggleable columns with toggle switches, all on by default" do
+      %w[Relationship Medium Contacted Topics Draft].each do |label|
+        expect(page).to have_css("#cc-columns-panel .form-switch", text: label, visible: :all)
+        expect(page).to have_field(label, checked: true, visible: :all)
+      end
+      expect(page).to have_css("#cc-columns-panel .form-switch", text: "Created By", visible: :all)
+      expect(page).to have_field("Created By", checked: true, visible: :all)
+    end
+  end
+
   describe "filter panel" do
     let!(:in_person_contact) do
       create(:case_contact, :active, casa_case: casa_case,

From f0aa4ea327b5cb71d48c8a18c7764769363fc82e Mon Sep 17 00:00:00 2001
From: Clifton McIntosh <cliff.mcintosh@gmail.com>
Date: Mon, 11 May 2026 10:38:09 -0500
Subject: [PATCH 2/7] feat(#6503): wire up Columns panel toggle

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/javascript/src/dashboard.js                       |  4 ++++
 .../case_contacts/case_contacts_new_design_spec.rb    | 11 +++++++++++
 2 files changed, 15 insertions(+)

diff --git a/app/javascript/src/dashboard.js b/app/javascript/src/dashboard.js
index d15f36986a..97ea12c941 100644
--- a/app/javascript/src/dashboard.js
+++ b/app/javascript/src/dashboard.js
@@ -256,6 +256,10 @@ const defineCaseContactsTable = function () {
     })
   })
 
+  $('#cc-columns-toggle').on('click', function () {
+    $('#cc-columns-panel').toggle()
+  })
+
   $('#cc-filter-toggle').on('click', function () {
     $('#cc-filter-panel').toggle()
   })
diff --git a/spec/system/case_contacts/case_contacts_new_design_spec.rb b/spec/system/case_contacts/case_contacts_new_design_spec.rb
index 874ea1ac3a..2b42075d7e 100644
--- a/spec/system/case_contacts/case_contacts_new_design_spec.rb
+++ b/spec/system/case_contacts/case_contacts_new_design_spec.rb
@@ -40,6 +40,17 @@
       expect(page).not_to have_css("#cc-columns-panel", visible: true)
     end
 
+    it "opens the columns panel when the Columns button is clicked" do
+      click_button "Columns"
+      expect(page).to have_css("#cc-columns-panel", visible: true)
+    end
+
+    it "closes the columns panel when the Columns button is clicked again" do
+      click_button "Columns"
+      click_button "Columns"
+      expect(page).not_to have_css("#cc-columns-panel", visible: true)
+    end
+
     it "lists all 6 toggleable columns with toggle switches, all on by default" do
       %w[Relationship Medium Contacted Topics Draft].each do |label|
         expect(page).to have_css("#cc-columns-panel .form-switch", text: label, visible: :all)

From 34133a2dbfcf29ef95f70535b40fe9f0362e889f Mon Sep 17 00:00:00 2001
From: Clifton McIntosh <cliff.mcintosh@gmail.com>
Date: Mon, 11 May 2026 11:24:02 -0500
Subject: [PATCH 3/7] feat(#6503): implement column visibility toggle and badge
 count

Update View applies current toggle state and updates the (X/6) badge.
Show All restores all columns, resets the badge, and closes the panel.
Removes DataTables scrollX in favour of CSS overflow-x on the wrapper,
which fixes header/body misalignment when columns are hidden.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/javascript/src/dashboard.js               | 25 ++++++++++-
 .../case_contacts_new_design/index.html.erb   |  4 +-
 .../case_contacts_new_design_spec.rb          | 43 +++++++++++++++++++
 3 files changed, 69 insertions(+), 3 deletions(-)

diff --git a/app/javascript/src/dashboard.js b/app/javascript/src/dashboard.js
index 97ea12c941..438094c6dc 100644
--- a/app/javascript/src/dashboard.js
+++ b/app/javascript/src/dashboard.js
@@ -36,7 +36,7 @@ function buildExpandedContent (data) {
 
 const defineCaseContactsTable = function () {
   const table = $('table#case_contacts').DataTable({
-    scrollX: true,
+    autoWidth: false,
     searching: true,
     processing: true,
     serverSide: true,
@@ -256,10 +256,33 @@ const defineCaseContactsTable = function () {
     })
   })
 
+  function updateColumnsButtonBadge () {
+    const total = $('.cc-column-toggle').length
+    const visible = $('.cc-column-toggle:checked').length
+    $('#cc-columns-count').text(`(${visible}/${total})`)
+  }
+
   $('#cc-columns-toggle').on('click', function () {
     $('#cc-columns-panel').toggle()
   })
 
+  $('#cc-columns-update').on('click', function () {
+    $('.cc-column-toggle').each(function () {
+      table.column($(this).data('column-index')).visible($(this).is(':checked'))
+    })
+    updateColumnsButtonBadge()
+    $('#cc-columns-panel').hide()
+  })
+
+  $('#cc-columns-show-all').on('click', function () {
+    $('.cc-column-toggle').prop('checked', true)
+    $('.cc-column-toggle').each(function () {
+      table.column($(this).data('column-index')).visible(true)
+    })
+    updateColumnsButtonBadge()
+    $('#cc-columns-panel').hide()
+  })
+
   $('#cc-filter-toggle').on('click', function () {
     $('#cc-filter-panel').toggle()
   })
diff --git a/app/views/case_contacts/case_contacts_new_design/index.html.erb b/app/views/case_contacts/case_contacts_new_design/index.html.erb
index 76a4ecf836..27f1b05372 100644
--- a/app/views/case_contacts/case_contacts_new_design/index.html.erb
+++ b/app/views/case_contacts/case_contacts_new_design/index.html.erb
@@ -10,7 +10,7 @@
 
       <button type="button" id="cc-columns-toggle" class="main-btn secondary-btn btn-sm btn-hover">
         <i class="lni lni-list mr-5" aria-hidden="true"></i>
-        Columns <span id="cc-columns-count">(6/6)</span>
+        Columns <span id="cc-columns-count">(<%= CaseContact::TOGGLEABLE_COLUMNS.length %>/<%= CaseContact::TOGGLEABLE_COLUMNS.length %>)</span>
       </button>
     </div>
 
@@ -136,7 +136,7 @@
 </div>
 
 <div class="card-style mb-30">
-  <div class="table-wrapper">
+  <div class="table-wrapper" style="overflow-x: auto">
     <table
       id="case_contacts"
       class="table"
diff --git a/spec/system/case_contacts/case_contacts_new_design_spec.rb b/spec/system/case_contacts/case_contacts_new_design_spec.rb
index 2b42075d7e..05844f58f9 100644
--- a/spec/system/case_contacts/case_contacts_new_design_spec.rb
+++ b/spec/system/case_contacts/case_contacts_new_design_spec.rb
@@ -51,6 +51,49 @@
       expect(page).not_to have_css("#cc-columns-panel", visible: true)
     end
 
+    it "hides a column when its toggle is switched off and Update View is clicked" do
+      click_button "Columns"
+      uncheck "Medium"
+      click_button "Update View"
+
+      expect(page).not_to have_css("th", text: "Medium")
+    end
+
+    it "shows a column again when its toggle is switched back on and Update View is clicked" do
+      click_button "Columns"
+      uncheck "Medium"
+      click_button "Update View"
+
+      click_button "Columns"
+      check "Medium"
+      click_button "Update View"
+
+      expect(page).to have_css("th", text: "Medium")
+    end
+
+    it "updates the badge count when a column is hidden" do
+      click_button "Columns"
+      uncheck "Medium"
+      click_button "Update View"
+
+      expect(page).to have_button(text: /Columns\s*\(5\/6\)/)
+    end
+
+    it "shows all columns and closes the panel when Show All is clicked" do
+      click_button "Columns"
+      uncheck "Medium"
+      uncheck "Topics"
+      click_button "Update View"
+
+      click_button "Columns"
+      click_button "Show All"
+
+      expect(page).to have_css("th", text: "Medium")
+      expect(page).to have_css("th", text: "Topics")
+      expect(page).to have_button(text: /Columns\s*\(6\/6\)/)
+      expect(page).not_to have_css("#cc-columns-panel", visible: true)
+    end
+
     it "lists all 6 toggleable columns with toggle switches, all on by default" do
       %w[Relationship Medium Contacted Topics Draft].each do |label|
         expect(page).to have_css("#cc-columns-panel .form-switch", text: label, visible: :all)

From cd00906904393c097d9da0739439c68810c71548 Mon Sep 17 00:00:00 2001
From: Clifton McIntosh <cliff.mcintosh@gmail.com>
Date: Mon, 11 May 2026 11:47:05 -0500
Subject: [PATCH 4/7] feat(#6503): persist column visibility across page
 reloads

Adds DataTables stateSave with server-side callbacks posting to
PreferenceSet#table_state under key "case_contacts_table". The
initComplete callback syncs toggle switch state and the badge count
from the loaded state, since stateLoadCallback is async.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/javascript/src/dashboard.js               | 32 ++++++++++++++++++-
 .../case_contacts_new_design/index.html.erb   |  2 +-
 .../case_contacts_new_design_spec.rb          | 11 +++++++
 3 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/app/javascript/src/dashboard.js b/app/javascript/src/dashboard.js
index 438094c6dc..ac54bb765d 100644
--- a/app/javascript/src/dashboard.js
+++ b/app/javascript/src/dashboard.js
@@ -37,6 +37,36 @@ function buildExpandedContent (data) {
 const defineCaseContactsTable = function () {
   const table = $('table#case_contacts').DataTable({
     autoWidth: false,
+    stateSave: true,
+    stateSaveCallback: function (settings, data) {
+      $.ajax({
+        url: '/preference_sets/table_state_update/' + settings.nTable.id + '_table',
+        data: { table_state: JSON.stringify(data) },
+        dataType: 'json',
+        type: 'POST',
+        error: function (jqXHR, textStatus, errorMessage) {
+          console.error(errorMessage)
+        }
+      })
+    },
+    stateSaveParams: function (settings, data) {
+      data.search.search = ''
+      return data
+    },
+    stateLoadCallback: function (settings, callback) {
+      $.ajax({
+        url: '/preference_sets/table_state/' + settings.nTable.id + '_table',
+        dataType: 'json',
+        type: 'GET',
+        success: function (json) { callback(json) }
+      })
+    },
+    initComplete: function () {
+      $('.cc-column-toggle').each(function () {
+        $(this).prop('checked', table.column($(this).data('column-index')).visible())
+      })
+      updateColumnsButtonBadge()
+    },
     searching: true,
     processing: true,
     serverSide: true,
@@ -259,7 +289,7 @@ const defineCaseContactsTable = function () {
   function updateColumnsButtonBadge () {
     const total = $('.cc-column-toggle').length
     const visible = $('.cc-column-toggle:checked').length
-    $('#cc-columns-count').text(`(${visible}/${total})`)
+    $('#cc-columns-count').text(`(${visible}/${total})`).css('visibility', 'visible')
   }
 
   $('#cc-columns-toggle').on('click', function () {
diff --git a/app/views/case_contacts/case_contacts_new_design/index.html.erb b/app/views/case_contacts/case_contacts_new_design/index.html.erb
index 27f1b05372..86545f7bcc 100644
--- a/app/views/case_contacts/case_contacts_new_design/index.html.erb
+++ b/app/views/case_contacts/case_contacts_new_design/index.html.erb
@@ -10,7 +10,7 @@
 
       <button type="button" id="cc-columns-toggle" class="main-btn secondary-btn btn-sm btn-hover">
         <i class="lni lni-list mr-5" aria-hidden="true"></i>
-        Columns <span id="cc-columns-count">(<%= CaseContact::TOGGLEABLE_COLUMNS.length %>/<%= CaseContact::TOGGLEABLE_COLUMNS.length %>)</span>
+        Columns <span id="cc-columns-count" style="visibility: hidden">(<%= CaseContact::TOGGLEABLE_COLUMNS.length %>/<%= CaseContact::TOGGLEABLE_COLUMNS.length %>)</span>
       </button>
     </div>
 
diff --git a/spec/system/case_contacts/case_contacts_new_design_spec.rb b/spec/system/case_contacts/case_contacts_new_design_spec.rb
index 05844f58f9..d36fde06d5 100644
--- a/spec/system/case_contacts/case_contacts_new_design_spec.rb
+++ b/spec/system/case_contacts/case_contacts_new_design_spec.rb
@@ -94,6 +94,17 @@
       expect(page).not_to have_css("#cc-columns-panel", visible: true)
     end
 
+    it "persists hidden columns across page reloads" do
+      click_button "Columns"
+      uncheck "Medium"
+      click_button "Update View"
+
+      visit case_contacts_new_design_path
+
+      expect(page).not_to have_css("th", text: "Medium")
+      expect(page).to have_button(text: /Columns\s*\(5\/6\)/)
+    end
+
     it "lists all 6 toggleable columns with toggle switches, all on by default" do
       %w[Relationship Medium Contacted Topics Draft].each do |label|
         expect(page).to have_css("#cc-columns-panel .form-switch", text: label, visible: :all)

From 3e74ddf941bb52b40d246e0b1343966c329b00ca Mon Sep 17 00:00:00 2001
From: Clifton McIntosh <cliff.mcintosh@gmail.com>
Date: Mon, 11 May 2026 16:33:33 -0500
Subject: [PATCH 5/7] fix(tests): update dashboard jest tests to reflect
 removal of scrollX

---
 app/javascript/__tests__/dashboard.test.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/app/javascript/__tests__/dashboard.test.js b/app/javascript/__tests__/dashboard.test.js
index 7a19aa0f77..3803cc4052 100644
--- a/app/javascript/__tests__/dashboard.test.js
+++ b/app/javascript/__tests__/dashboard.test.js
@@ -69,12 +69,13 @@ describe('defineCaseContactsTable', () => {
       expect(config.searching).toBe(true)
     })
 
-    it('configures scrollX for horizontal scrolling', () => {
+    it('disables autoWidth so columns do not expand to oversized fixed widths', () => {
       defineCaseContactsTable()
 
       const config = mockDataTable.mock.calls[0][0]
 
-      expect(config.scrollX).toBe(true)
+      expect(config.autoWidth).toBe(false)
+      expect(config.scrollX).toBeUndefined()
     })
 
     it('sets default sort to Date column descending', () => {
@@ -674,7 +675,7 @@ describe('defineCaseContactsTable', () => {
       const config = mockDataTable.mock.calls[0][0]
 
       // Verify all critical config options are present
-      expect(config).toHaveProperty('scrollX')
+      expect(config).toHaveProperty('autoWidth')
       expect(config).toHaveProperty('searching')
       expect(config).toHaveProperty('processing')
       expect(config).toHaveProperty('serverSide')

From 672e87280ac4f82ce9b96c9b6c3c5ee8621eb3d5 Mon Sep 17 00:00:00 2001
From: Clifton McIntosh <cliff.mcintosh@gmail.com>
Date: Mon, 11 May 2026 16:48:42 -0500
Subject: [PATCH 6/7] fix: render filter panel above columns panel to match
 toolbar order

---
 .../case_contacts_new_design/index.html.erb   | 52 +++++++++----------
 1 file changed, 26 insertions(+), 26 deletions(-)

diff --git a/app/views/case_contacts/case_contacts_new_design/index.html.erb b/app/views/case_contacts/case_contacts_new_design/index.html.erb
index 86545f7bcc..4b2213b081 100644
--- a/app/views/case_contacts/case_contacts_new_design/index.html.erb
+++ b/app/views/case_contacts/case_contacts_new_design/index.html.erb
@@ -20,32 +20,6 @@
     <% end %>
   </div>
 
-  <div id="cc-columns-panel" class="card-style mb-3" style="display: none;">
-    <div class="card-content">
-      <div class="row mb-3">
-        <% CaseContact::TOGGLEABLE_COLUMNS.each do |col| %>
-          <div class="col-md-4">
-            <div class="form-check form-switch">
-              <input type="checkbox"
-                     class="form-check-input cc-column-toggle"
-                     id="cc-col-<%= col[:key] %>"
-                     data-column-index="<%= col[:index] %>"
-                     role="switch"
-                     checked>
-              <label class="form-check-label" for="cc-col-<%= col[:key] %>">
-                <%= col[:label] %>
-              </label>
-            </div>
-          </div>
-        <% end %>
-      </div>
-      <div class="d-flex gap-2">
-        <button type="button" id="cc-columns-update" class="main-btn primary-btn btn-sm btn-hover">Update View</button>
-        <button type="button" id="cc-columns-show-all" class="main-btn dark-btn-outline btn-sm btn-hover">Show All</button>
-      </div>
-    </div>
-  </div>
-
   <div id="cc-filter-panel" class="card-style mb-3" style="display: none;">
     <div class="card-content">
       <div class="row mb-3">
@@ -133,6 +107,32 @@
       </div>
     </div>
   </div>
+
+  <div id="cc-columns-panel" class="card-style mb-3" style="display: none;">
+    <div class="card-content">
+      <div class="row mb-3">
+        <% CaseContact::TOGGLEABLE_COLUMNS.each do |col| %>
+          <div class="col-md-4">
+            <div class="form-check form-switch">
+              <input type="checkbox"
+                     class="form-check-input cc-column-toggle"
+                     id="cc-col-<%= col[:key] %>"
+                     data-column-index="<%= col[:index] %>"
+                     role="switch"
+                     checked>
+              <label class="form-check-label" for="cc-col-<%= col[:key] %>">
+                <%= col[:label] %>
+              </label>
+            </div>
+          </div>
+        <% end %>
+      </div>
+      <div class="d-flex gap-2">
+        <button type="button" id="cc-columns-update" class="main-btn primary-btn btn-sm btn-hover">Update View</button>
+        <button type="button" id="cc-columns-show-all" class="main-btn dark-btn-outline btn-sm btn-hover">Show All</button>
+      </div>
+    </div>
+  </div>
 </div>
 
 <div class="card-style mb-30">

From 9a23f499199be17b00788826bec93527a6938ac1 Mon Sep 17 00:00:00 2001
From: Clifton McIntosh <cliff.mcintosh@gmail.com>
Date: Wed, 13 May 2026 14:59:56 -0500
Subject: [PATCH 7/7] Make Medium not orderable (for now)

---
 app/javascript/src/dashboard.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/javascript/src/dashboard.js b/app/javascript/src/dashboard.js
index ac54bb765d..62cc6dee77 100644
--- a/app/javascript/src/dashboard.js
+++ b/app/javascript/src/dashboard.js
@@ -129,6 +129,7 @@ const defineCaseContactsTable = function () {
       },
       { // Medium column (index 5)
         data: 'medium_type',
+        orderable: false,
         render: (data) => data || ''
       },
       { // Created By column (index 6)