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>

Author: cliftonmcintosh

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 () {

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>
 

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)