feat: persist UI state in my assignments better

app/views/assignments/by_user.html.erb

@@ -193,103 +193,121 @@
     const tabContents = document.querySelectorAll('[role="tabpanel"]');
     const showCandidatesCheckbox = document.getElementById('showCandidates');
 
+    // Helper function to parse URL hash into an object
+    function getHashParams() {
+      const hash = window.location.hash.substring(1);
+      const params = {};
+      if (hash) {
+        hash.split('&').forEach(part => {
+          const [key, value] = part.split('=');
+          if (key) {
+            params[key] = value === undefined ? true : decodeURIComponent(value);
+          }
+        });
+      }
+      return params;
+    }
+
+    // Helper function to update URL hash from an object
+    function updateUrlHash(newParams) {
+      const currentParams = getHashParams();
+      const updatedParams = { ...currentParams, ...newParams };
+      
+      const hashParts = [];
+      for (const key in updatedParams) {
+        if (updatedParams[key] !== undefined && updatedParams[key] !== null) {
+          hashParts.push(`${encodeURIComponent(key)}=${encodeURIComponent(updatedParams[key])}`);
+        }
+      }
+      const newHash = hashParts.join('&');
+      window.history.replaceState(null, null, newHash ? `#${newHash}` : window.location.pathname + window.location.search);
+    }
+
     // Function to switch tabs
-    function switchTab(targetId) {
+    function switchTab(targetId, preserveHash = false) {
       const target = document.querySelector(targetId);
       const button = document.querySelector(`[data-tabs-target="${targetId}"]`);
       
       if (!target || !button) return;
       
-      // Hide all tabs
       tabContents.forEach(content => {
         content.classList.add('hidden');
         content.classList.remove('block');
       });
       
-      // Remove active state from all buttons
       tabButtons.forEach(btn => {
         btn.classList.remove('text-blue-600', 'dark:text-blue-500', 'border-blue-600', 'dark:border-blue-500', 'active');
         btn.classList.add('text-gray-500', 'dark:text-gray-400', 'border-transparent');
         btn.setAttribute('aria-selected', 'false');
       });
       
-      // Show the selected tab
       target.classList.remove('hidden');
       target.classList.add('block');
       
-      // Set active state on clicked button
       button.classList.remove('text-gray-500', 'dark:text-gray-400', 'border-transparent');
       button.classList.add('text-blue-600', 'dark:text-blue-500', 'border-blue-600', 'dark:border-blue-500', 'active');
       button.setAttribute('aria-selected', 'true');
       
-      // Update URL hash
+      if (!preserveHash) {
         const viewName = targetId === '#listViewTab' ? 'list' : 'table';
-      window.history.replaceState(null, null, `#${viewName}`);
+        updateUrlHash({ view: viewName });
       }
-
-    // Handle tab clicks
-    tabButtons.forEach(button => {
-      button.addEventListener('click', () => {
-        switchTab(button.dataset.tabsTarget);
-      });
-    });
-
-    // Handle initial load based on URL hash
-    const hash = window.location.hash;
-    if (hash === '#table') {
-      switchTab('#tableViewTab');
-    } else if (hash === '#list' || !hash) {
-      switchTab('#listViewTab');
     }
 
-    // Handle candidate filter
-    if (showCandidatesCheckbox) {
     // Function to toggle candidate visibility
-      function toggleCandidates(show) {
-        // For table view - find rows with yellow background
+    function toggleCandidatesVisibility(show) {
       const candidateTableRows = document.querySelectorAll('tr.bg-yellow-50');
       candidateTableRows.forEach(row => {
-          if (show) {
-            row.style.display = '';
-          } else {
-            row.style.display = 'none';
-          }
+        row.style.display = show ? '' : 'none';
       });
       
-        // For list view - find list items that contain the CANDIDATE badge
       const listItems = document.querySelectorAll('#listViewTab li');
       listItems.forEach(item => {
         const hasCandidate = item.querySelector('.bg-yellow-100');
         if (hasCandidate) {
-            if (show) {
-              item.style.display = '';
-            } else {
-              item.style.display = 'none';
-            }
+          item.style.display = show ? '' : 'none';
         }
       });
       
-        // Also hide/show date headers if all items in that date are hidden
       document.querySelectorAll('#listViewTab .mb-6').forEach(dateGroup => {
-          const listItems = dateGroup.querySelectorAll('li');
-          if (listItems.length > 0) {
-            const visibleItems = Array.from(listItems).filter(item => item.style.display !== 'none');
-            if (visibleItems.length === 0) {
-              dateGroup.style.display = 'none';
-            } else {
-              dateGroup.style.display = '';
-            }
+        const groupListItems = dateGroup.querySelectorAll('li');
+        if (groupListItems.length > 0) {
+          const visibleItems = Array.from(groupListItems).filter(item => item.style.display !== 'none');
+          dateGroup.style.display = visibleItems.length === 0 ? 'none' : '';
         }
       });
     }
 
-      // Initial state
-      toggleCandidates(showCandidatesCheckbox.checked);
+    // Handle tab clicks
+    tabButtons.forEach(button => {
+      button.addEventListener('click', () => {
+        switchTab(button.dataset.tabsTarget);
+      });
+    });
 
-      // Handle checkbox changes
+    // Handle candidate filter
+    if (showCandidatesCheckbox) {
       showCandidatesCheckbox.addEventListener('change', function() {
-        toggleCandidates(this.checked);
+        toggleCandidatesVisibility(this.checked);
+        updateUrlHash({ candidates: this.checked.toString() });
       });
     }
+
+    // Initial load based on URL hash
+    const initialParams = getHashParams();
+
+    // Set initial tab view
+    if (initialParams.view === 'table') {
+      switchTab('#tableViewTab', true); // true to preserve other hash parts
+    } else { // Default to list view
+      switchTab('#listViewTab', true);
+    }
+
+    // Set initial candidate visibility
+    if (showCandidatesCheckbox) {
+      const showCandidates = initialParams.candidates === 'true';
+      showCandidatesCheckbox.checked = showCandidates;
+      toggleCandidatesVisibility(showCandidates);
+    }
   });
 </script>