From 0d91b61bd060effab11d19f0ed0f78f28e768ac4 Mon Sep 17 00:00:00 2001
From: Nick Yeoman <c@nickyeoman.com>
Date: Mon, 22 Dec 2025 18:32:35 -0800
Subject: [PATCH] control panel head changes

---
 .../novaconium/public/js/tabs.js              | 155 +++++++++---------
 twig/cp/control-panel.html.twig               |   4 +-
 twig/cp/head.html.twig                        |  60 +++++++
 twig/head.html.twig                           |  17 +-
 4 files changed, 136 insertions(+), 100 deletions(-)
 rename twig/javascript/page-edit.html.twig => skeleton/novaconium/public/js/tabs.js (59%)
 create mode 100644 twig/cp/head.html.twig

diff --git a/twig/javascript/page-edit.html.twig b/skeleton/novaconium/public/js/tabs.js
similarity index 59%
rename from twig/javascript/page-edit.html.twig
rename to skeleton/novaconium/public/js/tabs.js
index a44b722..58a5e5e 100644
--- a/twig/javascript/page-edit.html.twig
+++ b/skeleton/novaconium/public/js/tabs.js
@@ -1,15 +1,16 @@
-<script>
-// Tab switching JS (unchanged)
+// /js/tabs.js
+
+// Tab switching
 function switchTab(tabId, button) {
     const contents = document.querySelectorAll('.tab-content');
     contents.forEach(content => content.classList.remove('active'));
-  
+
     const buttons = document.querySelectorAll('.tab-button');
     buttons.forEach(b => b.classList.remove('active'));
-  
+
     document.getElementById(tabId).classList.add('active');
     button.classList.add('active');
-   
+
     if (tabId === 'content6') {
         setTimeout(initTags, 0);
     }
@@ -17,21 +18,22 @@ function switchTab(tabId, button) {
 
 // Tags Init (with custom dropdown autocomplete)
 let tagsListeners = [];
+
 function initTags() {
     const tagsInput = document.getElementById('tags-input');
     const tagsField = document.getElementById('tags');
     const hiddenTags = document.getElementById('tags_json');
     const dropdown = document.getElementById('tags-dropdown');
-  
+
     if (!tagsInput || !tagsField || !hiddenTags || !dropdown) {
         console.warn('Tags elements missing');
         return;
     }
-  
-    // Clean old listeners
+
+    // Remove old listeners
     tagsListeners.forEach(ls => ls());
     tagsListeners = [];
-  
+
     let tags = [];
     let existingTags = [];
     try {
@@ -39,13 +41,10 @@ function initTags() {
         existingTags = JSON.parse(tagsInput.dataset.existingTags || '[]');
     } catch (e) {
         console.warn('JSON error:', e);
-        tags = [];
-        existingTags = [];
     }
-  
-    let selectedIndex = -1;  // For keyboard nav
-  
-    // Render chips (unchanged)
+
+    let selectedIndex = -1;
+
     function renderTags() {
         tagsInput.innerHTML = '';
         tags.forEach((tag, index) => {
@@ -60,23 +59,22 @@ function initTags() {
             tagsInput.appendChild(chip);
         });
         tagsInput.appendChild(tagsField);
-        tagsInput.appendChild(dropdown);  // Re-add dropdown
+        tagsInput.appendChild(dropdown);
         hiddenTags.value = JSON.stringify(tags);
     }
-  
-    // Filter and render dropdown
+
     function updateDropdown() {
         const value = tagsField.value.toLowerCase().trim();
         dropdown.innerHTML = '';
         dropdown.setAttribute('aria-expanded', value ? 'true' : 'false');
         selectedIndex = -1;
-        
+
         if (!value) return;
-        
-        const matches = existingTags.filter(tag => 
-            tag.toLowerCase().startsWith(value) && !tags.includes(tag.toLowerCase())
-        ).slice(0, 10);  // Top 10 matches, exclude existing
-        
+
+        const matches = existingTags
+            .filter(tag => tag.toLowerCase().startsWith(value) && !tags.includes(tag.toLowerCase()))
+            .slice(0, 10);
+
         matches.forEach((tag, index) => {
             const li = document.createElement('li');
             li.textContent = tag;
@@ -85,26 +83,23 @@ function initTags() {
             li.onmouseover = () => { selectedIndex = index; updateHighlight(); };
             dropdown.appendChild(li);
         });
-        
+
         if (matches.length) dropdown.parentElement.classList.add('has-dropdown');
         else dropdown.parentElement.classList.remove('has-dropdown');
     }
-  
-    // Highlight selected in dropdown
+
     function updateHighlight() {
         dropdown.querySelectorAll('li').forEach((li, index) => {
             li.classList.toggle('selected', index === selectedIndex);
         });
     }
-  
-    // Select tag from dropdown
+
     function selectTag(tag) {
-        addTag(tag, true);  // Add as chip, refocus
-        tagsField.value = '';  // Clear input
+        addTag(tag, true);
+        tagsField.value = '';
         dropdown.setAttribute('aria-expanded', 'false');
     }
-  
-    // Add tag (unchanged)
+
     function addTag(inputValue, refocus = false) {
         const tag = inputValue.trim().toLowerCase().replace(/[^\w-]/g, '');
         if (tag && tag.length > 0 && tag.length <= 50 && !tags.includes(tag)) {
@@ -113,70 +108,66 @@ function initTags() {
             if (refocus) tagsField.focus();
         }
         tagsField.value = '';
-        updateDropdown();  // Hide dropdown after add
+        updateDropdown();
     }
-  
-    // Events: Enter/comma/TAB adds tag (no form submit)
-const keydownListener = (e) => {
-    console.log('Keydown:', e.key, 'Value:', tagsField.value, 'Selected:', selectedIndex);
-    if (dropdown.getAttribute('aria-expanded') === 'true') {
-        if (e.key === 'ArrowDown') {
-            e.preventDefault();
-            selectedIndex = Math.min(selectedIndex + 1, dropdown.querySelectorAll('li').length - 1);
-            updateHighlight();
-            dropdown.querySelector(`li:nth-child(${selectedIndex + 1})`).scrollIntoView({ block: 'nearest' });
-        } else if (e.key === 'ArrowUp') {
-            e.preventDefault();
-            selectedIndex = Math.max(selectedIndex - 1, 0);
-            updateHighlight();
-            dropdown.querySelector(`li:nth-child(${selectedIndex + 1})`).scrollIntoView({ block: 'nearest' });
-        } else if ((e.key === 'Enter' || e.key === 'Tab') && selectedIndex >= 0) {
-            e.preventDefault();
-            const selected = dropdown.querySelector(`li:nth-child(${selectedIndex + 1})`).textContent;
-            selectTag(selected);  // Adds chip, refocuses
-        } else if (e.key === 'Escape') {
-            e.preventDefault();
-            tagsField.blur();
+
+    const keydownListener = (e) => {
+        if (dropdown.getAttribute('aria-expanded') === 'true') {
+            if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                selectedIndex = Math.min(selectedIndex + 1, dropdown.querySelectorAll('li').length - 1);
+                updateHighlight();
+                dropdown.querySelector(`li:nth-child(${selectedIndex + 1})`)?.scrollIntoView({ block: 'nearest' });
+            } else if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                selectedIndex = Math.max(selectedIndex - 1, 0);
+                updateHighlight();
+                dropdown.querySelector(`li:nth-child(${selectedIndex + 1})`)?.scrollIntoView({ block: 'nearest' });
+            } else if ((e.key === 'Enter' || e.key === 'Tab') && selectedIndex >= 0) {
+                e.preventDefault();
+                const selected = dropdown.querySelector(`li:nth-child(${selectedIndex + 1})`)?.textContent;
+                if (selected) selectTag(selected);
+            } else if (e.key === 'Escape') {
+                e.preventDefault();
+                tagsField.blur();
+            }
         }
-    }
-    
-    // Fallback for no dropdown or non-selected Tab/Enter
-    if (!dropdown.getAttribute('aria-expanded') === 'true' || selectedIndex < 0) {
-        if (e.key === 'Enter' || e.key === ',') {
-            e.preventDefault();
-            addTag(tagsField.value, true);
-        } else if (e.key === 'Tab') {
-            e.preventDefault();
-            if (tagsField.value.trim()) addTag(tagsField.value, true);  // Add typed value, refocus
+
+        if (!dropdown.getAttribute('aria-expanded') === 'true' || selectedIndex < 0) {
+            if (e.key === 'Enter' || e.key === ',') {
+                e.preventDefault();
+                addTag(tagsField.value, true);
+            } else if (e.key === 'Tab') {
+                e.preventDefault();
+                if (tagsField.value.trim()) addTag(tagsField.value, true);
+            }
         }
-    }
-};
-tagsField.addEventListener('keydown', keydownListener);
-tagsListeners.push(() => tagsField.removeEventListener('keydown', keydownListener));
-  
+    };
+
+    tagsField.addEventListener('keydown', keydownListener);
+    tagsListeners.push(() => tagsField.removeEventListener('keydown', keydownListener));
+
     const inputListener = () => updateDropdown();
     tagsField.addEventListener('input', inputListener);
     tagsListeners.push(() => tagsField.removeEventListener('input', inputListener));
-  
+
     const blurListener = () => {
-        setTimeout(() => dropdown.setAttribute('aria-expanded', 'false'), 150);  // Hide after blur
+        setTimeout(() => dropdown.setAttribute('aria-expanded', 'false'), 150);
         if (tagsField.value.trim()) addTag(tagsField.value);
     };
     tagsField.addEventListener('blur', blurListener);
     tagsListeners.push(() => tagsField.removeEventListener('blur', blurListener));
-  
-    // Initial render
+
     renderTags();
-    console.log('Tags ready with autocomplete, loaded:', tags.length, 'tags');
 }
 
-// Init on load + observe (unchanged)
-document.addEventListener('DOMContentLoaded', function() {
+// Init on load and observe tab changes
+document.addEventListener('DOMContentLoaded', () => {
     const tagsTab = document.getElementById('content6');
-    if (tagsTab && tagsTab.classList.contains('active')) {
+    if (tagsTab?.classList.contains('active')) {
         initTags();
     }
-    
+
     const observer = new MutationObserver((mutations) => {
         mutations.forEach((mutation) => {
             if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
@@ -189,4 +180,6 @@ document.addEventListener('DOMContentLoaded', function() {
     });
     observer.observe(document.body, { subtree: true, attributes: true });
 });
-</script>
\ No newline at end of file
+
+// Export switchTab for external use if needed
+window.switchTab = switchTab;
diff --git a/twig/cp/control-panel.html.twig b/twig/cp/control-panel.html.twig
index d186915..2a9ca7f 100644
--- a/twig/cp/control-panel.html.twig
+++ b/twig/cp/control-panel.html.twig
@@ -2,7 +2,7 @@
 <html class="no-js" lang="en">
 
 <head>
-  {% include ['@override/head.html.twig', '@novaconium/head.html.twig'] %}
+  {% include ['@novaconium/cp/head.html.twig'] %}
 </head>
 
 <body id="{{ pageid | default('pageid') }}" class="{{ pageclass | default('pageclass') }}" >
@@ -27,8 +27,6 @@
     <footer>
       <div class="copyright">&copy; {{ 'now' | date('Y') }} Novaconium</div>
     </footer>
-    
-    {% include '@novaconium/javascript/page-edit.html.twig' %}
 
     {% if editor == 'ace' %}
     {% include '@novaconium/javascript/ace.html.twig' %}
diff --git a/twig/cp/head.html.twig b/twig/cp/head.html.twig
new file mode 100644
index 0000000..ce68163
--- /dev/null
+++ b/twig/cp/head.html.twig
@@ -0,0 +1,60 @@
+{# =============================================================================
+   <HEAD>
+   =============================================================================
+#}
+
+<meta charset="utf-8">
+
+<title>{{ title | default('Welcome To Novaconium') }}</title>
+
+<meta name="viewport" content="width=device-width, initial-scale=1">
+
+{# SEO & METADATA #}
+<meta name="generator" content="Novaconium" />
+<meta name="description" content="{{ description | default('No description given') }}">
+<meta name="keywords" content="{{ keywords | default('website') }}">
+<meta name="author" content="{{ author | default('anonymous') }}">
+
+{# DARK MODE & THEME HINTS #}
+<meta name="color-scheme" content="dark">
+<meta name="theme-color" content="#000000">
+
+{# OPEN GRAPH (OG) FOR SOCIAL SHARING #}
+<meta property="og:title" content="{{ title | default('Welcome') }}">
+<meta property="og:type" content="website">
+<meta property="og:url" content="{{ app_url | default(request.scheme ~ '://' ~ request.host) }}">
+<meta property="og:image" content="{{ og_image | default('/icon.png') }}">
+
+{# PWA & FAVICONS #}
+<link rel="manifest" href="site.webmanifest">
+<link rel="apple-touch-icon" href="/icon.png">
+<link rel="icon" type="image/x-icon" href="/favicon.ico">
+
+{# GOOGLE FONTS (CDN VIA PRECONNECT) #}
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link
+  href="{{ fonts | default('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=Roboto+Mono&family=Source+Code+Pro&family=Lato&family=Poppins&family=Material+Icons&family=Material+Icons+Outlined&family=VT323:wght@400&family=Fira+Code:wght@400;500&display=swap') }}"
+  rel="stylesheet"
+>
+
+{% if editor == 'ace' %}
+<!-- ACE Editor -->
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ace/1.35.2/ace.min.css">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.35.2/ace.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.35.2/mode-html.min.js"></script>  {# HTML syntax #}
+<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.35.2/theme-tomorrow_night.min.js"></script>  {# Dark theme #}
+<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.35.2/ext-language_tools.min.js"></script>  {# Autocomplete #}
+<!-- END ACE Editor -->
+{% endif %}
+
+{# highlight.js #}
+<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+<script>hljs.highlightAll();</script>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/ir-black.min.css">
+
+<script src="/js/tabs.js"></script>
+
+{# STYLESHEET #}
+<link rel="stylesheet" href="/css/novaconium.css">
\ No newline at end of file
diff --git a/twig/head.html.twig b/twig/head.html.twig
index 1088b1b..2d18d14 100644
--- a/twig/head.html.twig
+++ b/twig/head.html.twig
@@ -39,22 +39,7 @@
 >
 
 {# STYLESHEET #}
-{% if pageclass == "novaconium" %}
-  <link rel="stylesheet" href="/css/novaconium.css">
-{% else %}
-  <link rel="stylesheet" href="/css/main.css">
-{% endif %}
-
-
-{% if editor == 'ace' %}
-<!-- ACE Editor -->
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ace/1.35.2/ace.min.css">
-<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.35.2/ace.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.35.2/mode-html.min.js"></script>  {# HTML syntax #}
-<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.35.2/theme-tomorrow_night.min.js"></script>  {# Dark theme #}
-<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.35.2/ext-language_tools.min.js"></script>  {# Autocomplete #}
-<!-- END ACE Editor -->
-{% endif %}
+<link rel="stylesheet" href="/css/main.css">
 
 {# highlight.js #}
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>