feat: make list/table view addressable, add quick filter for candidate sessions (if enabled)

app/views/assignments/by_user.html.erb

 <div class="container mx-auto px-4 py-8">
   <div class="max-w-full">
-    <div class="flex items-center mb-6">
+    <div class="flex items-center justify-between mb-6">
+      <div class="flex items-center">
         <h1 class="text-2xl font-bold dark:text-gray-200">
           Assignments for
           <%= link_to @user.name, user_assignments_path(@user), class: "text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300" %>
@@ -9,6 +10,16 @@
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 24" fill="currentColor" aria-hidden="true" class="size-5 inline-block mr-1"><path fill-rule="evenodd" d="M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z" clip-rule="evenodd"></path></svg> iCal
         <% end %>
       </div>
+      <% if @active_candidates %>
+        <div class="flex items-center">
+          <label class="inline-flex items-center cursor-pointer">
+            <input type="checkbox" id="showCandidates" class="sr-only peer" checked>
+            <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
+            <span class="ms-3 text-sm font-medium text-gray-900 dark:text-gray-300">Show unconfirmed sessions</span>
+          </label>
+        </div>
+      <% end %>
+    </div>
     <% now = Time.now %>
     
     <!-- Tab Navigation -->
@@ -130,10 +141,14 @@
   document.addEventListener('turbo:load', function() {
     const tabButtons = document.querySelectorAll('[data-tabs-target]');
     const tabContents = document.querySelectorAll('[role="tabpanel"]');
+    const showCandidatesCheckbox = document.getElementById('showCandidates');
 
-    tabButtons.forEach(button => {
-      button.addEventListener('click', () => {
-        const target = document.querySelector(button.dataset.tabsTarget);
+    // Function to switch tabs
+    function switchTab(targetId) {
+      const target = document.querySelector(targetId);
+      const button = document.querySelector(`[data-tabs-target="${targetId}"]`);
+      
+      if (!target || !button) return;
       
       // Hide all tabs
       tabContents.forEach(content => {
@@ -156,7 +171,75 @@
       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
+      const viewName = targetId === '#listViewTab' ? 'list' : 'table';
+      window.history.replaceState(null, null, `#${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
+        const candidateTableRows = document.querySelectorAll('tr.bg-yellow-50');
+        candidateTableRows.forEach(row => {
+          if (show) {
+            row.style.display = '';
+          } else {
+            row.style.display = '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';
+            }
+          }
+        });
+        
+        // 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 = '';
+            }
+          }
+        });
+      }
+
+      // Initial state
+      toggleCandidates(showCandidatesCheckbox.checked);
+
+      // Handle checkbox changes
+      showCandidatesCheckbox.addEventListener('change', function() {
+        toggleCandidates(this.checked);
+      });
+    }
   });
 </script>