From 95aed988b6a0bfa9639287502a2c255d4fee53bf Mon Sep 17 00:00:00 2001
From: Andy Bunce <bunce.andy@gmail.com>
Date: Sun, 21 Sep 2025 22:02:55 +0100
Subject: [PATCH] [mod] symlist

---
 webapp/static/clients/codemirror/grail.html | 21 +++--
 webapp/static/clients/codemirror/list.js    | 95 +++++++++++----------
 webapp/static/clients/codemirror/script.js  |  3 +-
 3 files changed, 67 insertions(+), 52 deletions(-)

diff --git a/webapp/static/clients/codemirror/grail.html b/webapp/static/clients/codemirror/grail.html
index ae19aeb..599bb5a 100644
--- a/webapp/static/clients/codemirror/grail.html
+++ b/webapp/static/clients/codemirror/grail.html
@@ -17,7 +17,10 @@
             <nav class="navbar bg-body-tertiary">
                 <div class="container-fluid">
                     <a id="help" class="navbar-brand">XQuery 4.0 LSP client
-                        <button popovertarget="popHelp"><i class="bi bi-info-circle"></i></button></a>
+                        <button id="popcon" popovertarget="popConnect" class="btn btn-danger">
+                            <i class="bi bi-router"></i>
+                        </button>
+                    </a>
                     <ul class="nav nav-pills">
                         <li class="nav-item">
                             <a class="nav-link active" aria-current="page" href="#">Editor</a>
@@ -32,9 +35,7 @@
                             <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                         </li>
                     </ul>
-                    <button id="popcon" popovertarget="popConnect" class="btn btn-danger">
-                        <i class="bi bi-router"></i>
-                    </button>
+
                 </div>
             </nav>
         </header>
@@ -96,8 +97,7 @@
 
         <aside class="page-sidebar">
             <div id="msg">(msgs)</div>
-            <div class="bg-info">OutLine</div>
-            <json-list  id="symList" style="display:block; overflow:scroll; height: 10em;"></json-list>
+
             <select id="load">
                 <option selected value="">load..</option>
                 <optgroup label="XQuery3">
@@ -125,6 +125,12 @@
             <ul id="traffic" style="overflow: scroll;">
                 <li>-</li>
             </ul>
+
+            <details style="padding:5px;">
+                <summary  class="bg-info">OutLine <b>0</b></summary>
+                <json-list id="symList" style="display:block; overflow:scroll; height: 10em;"></json-list>
+            </details>
+
         </aside>
 
         <footer class="page-footer">
@@ -134,6 +140,7 @@
                 <option value="xquery">xquery</option>
                 <option value="xml">xml</option>
             </select>
+            <button popovertarget="popHelp"><i class="bi bi-info-circle"></i></button></a>
         </footer>
     </div>
     <!-- Popovers -->
@@ -168,7 +175,7 @@
     <script src="./lsp.bundle.js"></script>
     <script src="./script.js"></script>
     <script src="./list.js"></script>
-  
+
 </body>
 
 </html>
\ No newline at end of file
diff --git a/webapp/static/clients/codemirror/list.js b/webapp/static/clients/codemirror/list.js
index 73e5de0..1e278b5 100644
--- a/webapp/static/clients/codemirror/list.js
+++ b/webapp/static/clients/codemirror/list.js
@@ -4,59 +4,66 @@ https://stackoverflow.com/questions/50404970/web-components-pass-data-to-and-fro
 class JsonListComponent extends HTMLElement {
     #shadow;
     #data;
-    #selected;
     constructor() {
-      super();
-    this.#shadow = this.attachShadow({ mode: "open" });
-    this.#data = [];
-    this.render();
+        super();
+        this.#shadow = this.attachShadow({ mode: "open" });
+        this.#data = [];
+        this.render();
     }
 
-   setData(newData, append = false) {
-    if (!Array.isArray(newData)) {
-      console.warn("Invalid format, expected an array.");
-      return;
+    setData(newData, append = false) {
+        if (!Array.isArray(newData)) {
+            console.warn("Invalid format, expected an array.");
+            return;
+        }
+        this.#data = append ? this.#data.concat(newData) : structuredClone(newData);
+        this.render();
     }
 
-    this.#data = append ? this.#data.concat(newData) : structuredClone(newData);
-    this.render();
-  }
+    set data(value) {
+        this.setData(value, false);
+    }
+    get data() {
+        return this.#data;
+    }
 
-  set data(value) {
-    this.setData(value, false);
-  }
-  get data() {
-    return this.#data;
-  }
-
-    /* Render the list items using the fetched JSON data */
-   render() {
-    const list = document.createElement('ul');
-    this.#data.forEach(item => {
-        const listItem = document.createElement('li');
-        listItem.textContent = `${item.name} - ${item.description}`;
-        // Adding a click event listener for user interaction
-        listItem.addEventListener('click', () => {
-            console.log('Item clicked:', item);
-            // You can dispatch a custom event here if needed.
-            this.dispatchEvent(new CustomEvent('itemSelected', { 
-                detail: item, 
-                bubbles: true, 
-                composed: true 
-            }));
+    /* Render the list items #data */
+    render() {
+        const list = document.createElement('ul');
+        const shad=this.#shadow;
+        this.#data.forEach((item, index) => {
+            const listItem = document.createElement('li');
+            listItem.textContent = `${item.name} - ${item.description}`;
+            // Adding a click event listener for user interaction
+            listItem.addEventListener('click', () => {
+                console.log('Item clicked:', item, listItem);
+                // You can dispatch a custom event here if needed.
+                this.dispatchEvent(new CustomEvent('itemSelected', {
+                    detail: item,
+                    bubbles: true,
+                    composed: true
+                }));
+            });
+            list.addEventListener('click', function (e) {
+                if (e.target.tagName === 'LI') {
+                    shad.querySelectorAll('li.selected').forEach(item=>{item.className = '';});
+                    e.target.className = 'selected';
+                }
+            });
+            list.appendChild(listItem);
         });
-        list.appendChild(listItem);
-    });
-    this.#shadow.innerHTML = '';
-    const style = document.createElement('style');
-    style.textContent = `
+
+        this.#shadow.innerHTML = '';
+        const style = document.createElement('style');
+        style.textContent = `
       ul { list-style-type: none; padding: 0; margin: 0; }
-      li { padding: 10px; border-bottom: 1px solid #ccc; cursor: pointer; }
-      li:hover { background: #f0f0f0; }
+      li { padding: 1px; border-bottom: 1px solid #ccc; cursor: pointer; }
+      li :not(.selected) :hover { background:  #ccc; }
+      .selected {  background: lightgreen;}
     `;
-    this.#shadow.appendChild(style);
-    this.#shadow.appendChild(list);
-}
+        this.#shadow.appendChild(style);
+        this.#shadow.appendChild(list);
+    }
 
     /* Render an error message if JSON fetching fails */
     renderError(error) {
diff --git a/webapp/static/clients/codemirror/script.js b/webapp/static/clients/codemirror/script.js
index 1371005..d695895 100644
--- a/webapp/static/clients/codemirror/script.js
+++ b/webapp/static/clients/codemirror/script.js
@@ -88,8 +88,9 @@ $("cmd").onclick = e => {
 };
 
 $("symList").onclick = e => {
-    alert("Sym click");
+    console.log("SYM CLICK");
 };
+
 $("lint").onclick = async e => {
     console.log("word", view.state.wordAt(1));
     lsp.openLintPanel(view);