CSS class migrations for ticket page: tabs, visibility, markdown preview, uploads

- Switch tab show/hide from style.display to .tab-content.active CSS class
- Convert visibilityGroupsField, markdownPreview, uploadProgress to use .is-hidden class
- Replace comment text div style.display with classList.add/remove('is-hidden')
- Add .is-hidden utility class to ticket.css

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

assets/css/ticket.css

@@ -991,6 +991,7 @@ textarea.editable {
 }
 
 .animate-fadein  { animation: fadeIn 0.3s ease; }
+.is-hidden { display: none !important; }
 .animate-fadeout { animation: fadeIn 0.2s ease reverse; }
 .comment--deleting { opacity: 0; transform: translateX(-20px); transition: opacity 0.3s, transform 0.3s; }
 

assets/js/ticket.js

@@ -5,7 +5,7 @@ function toggleVisibilityGroupsEdit() {
     const visibility = document.getElementById('visibilitySelect')?.value;
     const groupsField = document.getElementById('visibilityGroupsField');
     if (groupsField) {
-        groupsField.style.display = visibility === 'internal' ? 'block' : 'none';
+        groupsField.classList.toggle('is-hidden', visibility !== 'internal');
     }
 }
 
@@ -201,7 +201,7 @@ function togglePreview() {
     if (!preview || !textarea || !toggleEl) return;
 
     const isPreviewEnabled = toggleEl.checked;
-    preview.style.display = isPreviewEnabled ? 'block' : 'none';
+    preview.classList.toggle('is-hidden', !isPreviewEnabled);
 
     if (isPreviewEnabled) {
         preview.innerHTML = parseMarkdown(textarea.value);
@@ -222,9 +222,9 @@ function updatePreview() {
 
     if (isMarkdownEnabled && commentText.trim()) {
         previewDiv.innerHTML = parseMarkdown(commentText);
-        previewDiv.style.display = 'block';
+        previewDiv.classList.remove('is-hidden');
     } else {
-        previewDiv.style.display = 'none';
+        previewDiv.classList.add('is-hidden');
     }
 }
 
@@ -238,7 +238,7 @@ function toggleMarkdownMode() {
     if (!isMasterEnabled) {
         previewToggle.checked = false;
         const preview = document.getElementById('markdownPreview');
-        if (preview) preview.style.display = 'none';
+        if (preview) preview.classList.add('is-hidden');
     }
 }
 
@@ -450,17 +450,7 @@ function showTab(tabName) {
     }
 
     // Hide all tabs
-    descriptionTab.style.display = 'none';
+    document.querySelectorAll('.tab-content').forEach(tab => tab.classList.remove('active'));
-    commentsTab.style.display = 'none';
-    if (attachmentsTab) {
-        attachmentsTab.style.display = 'none';
-    }
-    if (dependenciesTab) {
-        dependenciesTab.style.display = 'none';
-    }
-    if (activityTab) {
-        activityTab.style.display = 'none';
-    }
 
     // Remove active class and aria-selected from all buttons
     document.querySelectorAll('.tab-btn').forEach(btn => {
@@ -470,7 +460,7 @@ function showTab(tabName) {
 
     // Show selected tab and activate its button
     const tabEl = document.getElementById(`${tabName}-tab`);
-    if (tabEl) tabEl.style.display = 'block';
+    if (tabEl) tabEl.classList.add('active');
     const activeBtn = document.querySelector(`.tab-btn[data-tab="${tabName}"]`);
     if (activeBtn) {
         activeBtn.classList.add('active');
@@ -713,7 +703,7 @@ function handleFileUpload(files) {
     let uploadedCount = 0;
     const totalFiles = files.length;
 
-    progressDiv.style.display = 'block';
+    progressDiv.classList.remove('is-hidden');
     statusText.textContent = `Uploading 0 of ${totalFiles} files...`;
     progressFill.style.width = '0%';
 
@@ -779,7 +769,7 @@ function resetUploadUI() {
     const progressDiv = document.getElementById('uploadProgress');
     const fileInput = document.getElementById('fileInput');
 
-    progressDiv.style.display = 'none';
+    progressDiv.classList.add('is-hidden');
     if (fileInput) {
         fileInput.value = '';
     }
@@ -1181,7 +1171,7 @@ function editComment(commentId) {
     `;
 
     // Hide original text, show edit form
-    textDiv.style.display = 'none';
+    textDiv.classList.add('is-hidden');
     textDiv.after(editForm);
     commentDiv.classList.add('editing');
 
@@ -1248,7 +1238,7 @@ function saveEditComment(commentId) {
 
             // Remove edit form and show text
             if (editForm) editForm.remove();
-            textDiv.style.display = '';
+            textDiv.classList.remove('is-hidden');
             commentDiv.classList.remove('editing');
 
             lt.toast.success('Comment updated successfully');
@@ -1270,7 +1260,7 @@ function cancelEditComment(commentId) {
     const editForm = document.getElementById(`comment-edit-form-${commentId}`);
 
     if (editForm) editForm.remove();
-    if (textDiv) textDiv.style.display = '';
+    if (textDiv) textDiv.classList.remove('is-hidden');
     if (commentDiv) commentDiv.classList.remove('editing');
 }
 

views/TicketView.php

@@ -222,7 +222,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
                                             <option value="confidential" <?php echo $currentVisibility == 'confidential' ? 'selected' : ''; ?>>Confidential</option>
                                         </select>
                                     </div>
-                                    <div class="metadata-field" id="visibilityGroupsField" <?php echo $currentVisibility !== 'internal' ? 'style="display: none;"' : ''; ?>>
+                                    <div class="metadata-field<?php echo $currentVisibility !== 'internal' ? ' is-hidden' : ''; ?>" id="visibilityGroupsField">
                                         <label class="metadata-label metadata-label-cyan">Allowed Groups:</label>
                                         <div class="visibility-groups-edit">
                                             <?php foreach ($allAvailableGroups as $group):
@@ -326,7 +326,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
                             </div>
                             <button id="addCommentBtn" class="btn">ADD COMMENT</button>
                         </div>
-                        <div id="markdownPreview" class="markdown-preview" style="display: none;"></div>
+                        <div id="markdownPreview" class="markdown-preview is-hidden"></div>
                                 </div>
                             </div>
 
@@ -430,7 +430,7 @@ $nonce = SecurityHeadersMiddleware::getNonce();
                                         <button type="button" id="browseFilesBtn" class="btn upload-browse-btn">BROWSE FILES</button>
                                     </div>
                                 </div>
-                                <div id="uploadProgress" class="upload-progress" style="display: none;">
+                                <div id="uploadProgress" class="upload-progress is-hidden">
                                     <div class="progress-bar">
                                         <div class="progress-fill" id="progressFill"></div>
                                     </div>