[mod] symlist

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 -->

webapp/static/clients/codemirror/list.js

@@ -4,7 +4,6 @@ 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" });
@@ -17,7 +16,6 @@ class JsonListComponent extends HTMLElement {
             console.warn("Invalid format, expected an array.");
             return;
         }
-
         this.#data = append ? this.#data.concat(newData) : structuredClone(newData);
         this.render();
     }
@@ -29,15 +27,16 @@ class JsonListComponent extends HTMLElement {
         return this.#data;
     }
 
-    /* Render the list items using the fetched JSON data */
+    /* Render the list items #data */
     render() {
         const list = document.createElement('ul');
-    this.#data.forEach(item => {
+        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);
+                console.log('Item clicked:', item, listItem);
                 // You can dispatch a custom event here if needed.
                 this.dispatchEvent(new CustomEvent('itemSelected', {
                     detail: item,
@@ -45,14 +44,22 @@ class JsonListComponent extends HTMLElement {
                     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);
         });
+
         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);

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);