From 0373c1d7a4d6240e0ed81efaae9a477103d5b3b8 Mon Sep 17 00:00:00 2001
From: Christian <christian@blaahund.dk>
Date: Sun, 1 Feb 2026 00:25:02 +0100
Subject: [PATCH] feat(tag-picker): Enhance keyboard shortcut context handling
 and logging

---
 app/modules/hardware/templates/detail.html |  5 +++
 app/modules/sag/templates/detail.html      |  6 +++-
 app/modules/sag/templates/index.html       |  2 +-
 app/shared/frontend/base.html              |  2 +-
 static/js/tag-picker.js                    | 38 ++++++++++++++++++++--
 5 files changed, 47 insertions(+), 6 deletions(-)

diff --git a/app/modules/hardware/templates/detail.html b/app/modules/hardware/templates/detail.html
index 471f029..4d8e7d8 100644
--- a/app/modules/hardware/templates/detail.html
+++ b/app/modules/hardware/templates/detail.html
@@ -728,6 +728,11 @@
         if (window.renderEntityTags) {
             window.renderEntityTags('hardware', {{ hardware.id }}, 'hardware-tags');
         }
+        
+        // Set default context for keyboard shortcuts (Option+Shift+T)
+        if (window.setTagPickerContext) {
+            window.setTagPickerContext('hardware', {{ hardware.id }}, () => window.renderEntityTags('hardware', {{ hardware.id }}, 'hardware-tags'));
+        }
     });
 </script>
 {% endblock %}
\ No newline at end of file
diff --git a/app/modules/sag/templates/detail.html b/app/modules/sag/templates/detail.html
index 7c88c50..e016d05 100644
--- a/app/modules/sag/templates/detail.html
+++ b/app/modules/sag/templates/detail.html
@@ -450,7 +450,6 @@
         </div>
     </div>
 
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
     <script>
         const caseId = {{ case.id }};
         let contactSearchTimeout;
@@ -765,6 +764,11 @@
             if (window.renderEntityTags) {
                 window.renderEntityTags('case', {{ case.id }}, 'case-tags');
             }
+
+            // Set default context for keyboard shortcuts (Option+Shift+T)
+            if (window.setTagPickerContext) {
+                window.setTagPickerContext('case', {{ case.id }}, () => window.renderEntityTags('case', {{ case.id }}, 'case-tags'));
+            }
             
             // Load Hardware & Locations
             loadCaseHardware();
diff --git a/app/modules/sag/templates/index.html b/app/modules/sag/templates/index.html
index b2c16aa..7517d43 100644
--- a/app/modules/sag/templates/index.html
+++ b/app/modules/sag/templates/index.html
@@ -261,7 +261,7 @@
                     {% endif %}
                     <div class="sag-meta">
                         <span class="status-badge status-{{ sag.status }}">{{ sag.status }}</span>
-                        <span style="color: var(--text-secondary);">{{ sag.created_at[:10] }}</span>
+                        <span style="color: var(--text-secondary);">{{ sag.created_at.strftime('%Y-%m-%d') if sag.created_at else '' }}</span>
                     </div>
                 </div>
                 <div style="position: absolute; top: 1rem; right: 1rem; display: flex; gap: 0.5rem;">
diff --git a/app/shared/frontend/base.html b/app/shared/frontend/base.html
index 3b3117b..5c79048 100644
--- a/app/shared/frontend/base.html
+++ b/app/shared/frontend/base.html
@@ -515,7 +515,7 @@
 {% endblock %}
 
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
-<script src="/static/js/tag-picker.js"></script>
+<script src="/static/js/tag-picker.js?v=2.0"></script>
 <script>
     // Dark Mode Toggle Logic
     const darkModeToggle = document.getElementById('darkModeToggle');
diff --git a/static/js/tag-picker.js b/static/js/tag-picker.js
index e6cd370..e53630f 100644
--- a/static/js/tag-picker.js
+++ b/static/js/tag-picker.js
@@ -15,6 +15,11 @@ class TagPicker {
         this.contextType = null; // 'ticket', 'customer', 'time_entry', etc.
         this.contextId = null;
         
+        // Page level defaults (for keyboard shortcut)
+        this.defaultContextType = null;
+        this.defaultContextId = null;
+        this.defaultOnSelectCallback = null;
+
         this.init();
     }
 
@@ -243,6 +248,8 @@ class TagPicker {
 
     async selectTag(tag) {
         if (!tag) return;
+        
+        console.log(`🏷️ Selecting tag ${tag.name} for context: ${this.contextType} #${this.contextId}`);
 
         // If context provided, add tag to entity
         if (this.contextType && this.contextId) {
@@ -284,9 +291,13 @@ class TagPicker {
     }
 
     show(contextType = null, contextId = null, onSelect = null) {
-        this.contextType = contextType;
-        this.contextId = contextId;
-        this.onSelectCallback = onSelect;
+        // Use provided context OR fall back to page defaults
+        // Note: arguments are undefined if not passed, so check for null/undefined
+        this.contextType = (contextType !== null && contextType !== undefined) ? contextType : this.defaultContextType;
+        this.contextId = (contextId !== null && contextId !== undefined) ? contextId : this.defaultContextId;
+        this.onSelectCallback = onSelect || this.defaultOnSelectCallback;
+        
+        console.log(`🏷️ Showing Tag Picker. Context: ${this.contextType} #${this.contextId}`);
         
         const modalInstance = new bootstrap.Modal(this.modal);
         modalInstance.show();
@@ -297,6 +308,13 @@ class TagPicker {
         }, { once: true });
     }
 
+    setPageContext(contextType, contextId, onSelect = null) {
+        console.log(`🏷️ Tag Picker: Setting page context to ${contextType} #${contextId}`);
+        this.defaultContextType = contextType;
+        this.defaultContextId = contextId;
+        this.defaultOnSelectCallback = onSelect;
+    }
+
     hide() {
         const modalInstance = bootstrap.Modal.getInstance(this.modal);
         if (modalInstance) {
@@ -335,6 +353,20 @@ window.showTagPicker = function(entityType, entityId, onSelect = null) {
     window.tagPicker.show(entityType, entityId, onSelect);
 };
 
+// Helper to set default context (for keyboard shortcuts)
+window.setTagPickerContext = function(entityType, entityId, onSelect = null) {
+    if (window.tagPicker) {
+        window.tagPicker.setPageContext(entityType, entityId, onSelect);
+    } else {
+        // Retry if not initialized yet
+        document.addEventListener('DOMContentLoaded', () => {
+            if (window.tagPicker) {
+                window.tagPicker.setPageContext(entityType, entityId, onSelect);
+            }
+        });
+    }
+};
+
 // Helper function to render tags for an entity
 window.renderEntityTags = async function(entityType, entityId, containerId) {
     try {