[mod] move icons into list wc

webapp/lsp/position.xqm

@@ -57,7 +57,7 @@ as xs:integer
 };
 
 (:~  format position for text display :)
-declare function pos:ln-col($pos as lspt:Position,$offset as xs:integer:=1)
+declare function pos:ln-col($pos as lspt:Position,$offset as xs:integer:=0)
 {
   `Ln { $pos?line + $offset}, Col { $pos?character + $offset}`
 }; 

webapp/static/clients/codemirror/grail.css

@@ -64,7 +64,6 @@ form header {
   }
 
 details[open]::details-content {
-  color: dodgerblue;
   padding: 0.1em;
   border: thin solid grey;
   overflow:auto;

webapp/static/clients/codemirror/grail.html

@@ -26,7 +26,7 @@
                             <a class="nav-link active" aria-current="page" href="#">Editor</a>
                         </li>
                         <li class="nav-item">
-                            <a class="nav-link" href="/app/home"  target="lsp">LSP Manager</a>
+                            <a class="nav-link" href="/app/home" target="lsp">LSP Manager</a>
                         </li>
                         <li class="nav-item">
                             <a class="nav-link" href="/dba/logs" target="dba">Dba</a>
@@ -57,7 +57,7 @@
                                 generator.xquery</option>
                         </optgroup>
                     </select>
-                    <button popovertarget="popAbout" type="button"  class="btn btn-light">
+                    <button popovertarget="popAbout" type="button" class="btn btn-light">
                         <i class="codicon codicon-info"></i>
                     </button>
                 </div>
@@ -90,24 +90,23 @@
                     <button id="sync" title="Sync changes to server" type="button" class="btn btn-light">
                         <i class="codicon codicon-sync"></i>
                     </button>
-                    <button id="fullscreen" title="Full screen editor" type="button" class="btn btn-light">
-                        <i class="codicon codicon-screen-full"></i>
-                    </button>
 
+                    <button id="cmdList" type="button" class="btn btn-light" title="Command and key mapping help">
+                        <i class="codicon codicon-record-keys"></i>
+                    </button>
                     <button type="button" class="btn btn-light" popovertarget="popSettings" title="Settings">
                         <i class="codicon codicon-settings"></i></button>
                 </div>
                 <div class="btn-group" role="group" aria-label="Third group">
-
+                    <button id="fullscreen" title="Full screen editor" type="button" class="btn btn-light">
+                        <i class="codicon codicon-screen-full"></i>
+                    </button>
                     <button id="syntax" type="button" class="btn btn-light" title="Unused"><i
                             class="codicon codicon-comment"></i></button>
 
-
-
                     <button id="wordAt" type="button" class="btn btn-light" title="word at">
                         <i>1</i></button>
 
-
                     <button id="unused3" type="button" class="btn btn-light" title="unused3">
                         <i>3</i></button>
                 </div>
@@ -122,7 +121,7 @@
         <aside class="page-sidebar">
 
             <details id="workspacePanel" open="open">
-                <summary class='bg-info'>Workspace <b>0</b></summary>
+                <summary class='bg-info'>Workspace <i  class='codicon codicon-kebab-vertical' style="float:right"></i></summary>
 
 
                 <ul id="traffic" style="overflow: scroll;">
@@ -131,12 +130,14 @@
             </details>
 
             <details id="symPanel">
-                <summary>OutLine <b>0</b></summary>
+                <summary>OutLine <i  class='codicon codicon-kebab-vertical' style="float:right"></i></summary>
                 <qd-list id="symList" style="flex-grow:1;"></qd-list>
             </details>
 
             <details id="msgPanel">
-                <summary>Messages <b>0</b></summary>
+                <summary>Messages 
+                    <i  id="msgIcon" class='codicon codicon-kebab-vertical' style="float:right"></i>
+                </summary>
                 <div id="msg">(msgs)<i class='codicon codicon-symbol-method'></i></div>
             </details>
         </aside>
@@ -149,9 +150,7 @@
                 <option value="xml">xml</option>
             </select>
 
-            <button id="cmdList" type="button" class="btn btn-light" title="Command and key mapping help">
+
-                <i class="codicon codicon-record-keys"></i>
-            </button>
         </footer>
     </div>
     <!-- Popovers -->
@@ -189,7 +188,7 @@
         <form>
             <header>Help</header>
             <div class="modal-body" style="height: 50vh;overflow:scroll;">
-                 <p>TODO help info</p>
+                <p>TODO help info</p>
             </div>
             <div class="modal-footer">
 

webapp/static/clients/codemirror/script.js

@@ -53,35 +53,8 @@ $("symbols2").onclick = e => {
         .then(r => {
             console.log("symbols", r)
             $("symPanel").open = true;
-            const icons = [
+          
-                'symbol-file',
+            $("symList").setData(r);
-                'symbol-class',
-                'symbol-namespace',
-                'symbol-structure',
-                'symbol-class',
-                'symbol-method',
-                'symbol-property',
-                'symbol-field',
-                'symbol-method-arrow',
-                'symbol-enum',
-                'symbol-interface',
-                'symbol-method',
-                'symbol-variable',
-                'symbol-constant',
-                'symbol-string',
-                'symbol-numeric',
-                'symbol-boolean',
-                'symbol-array',
-                'symbol-structure',
-                'symbol-key',
-                'dash',
-                'symbol-enum-member',
-                'symbol-misc',
-                'symbol-event',
-                'symbol-operator',
-                'symbol-parameter'
-            ];
-            $("symList").setData(r, icons);
         });
 };
 
@@ -134,6 +107,11 @@ $("load").onchange = e => {
     $("load").value = "";
 };
 
+$("msgIcon").onclick=e=>{
+    e.preventDefault();
+    alert("NOT YET")
+};
+
 function updateSettings(event) {
     event.preventDefault();
 

webapp/static/clients/codemirror/wc-qd-list.js

@@ -1,4 +1,7 @@
-/* Define the web component for settable list
+/* Define a web component providing a settable and selectable list
+ $("symList").setData(r, append = false);
+ where r is array of objects with properties name,details,kind
+
 https://stackoverflow.com/questions/50404970/web-components-pass-data-to-and-from
 https://www.w3schools.com/howto/howto_js_treeview.asp
 */
@@ -10,16 +13,44 @@ class ListComponent extends HTMLElement {
         super();
         this.#shadow = this.attachShadow({ mode: "open", delegatesFocus: true });
         this.#data = [];
-        this.#iconKinds = [];
+        // codicons kind 
+        this.#iconKinds = [
+                'symbol-file',
+                'symbol-class',
+                'symbol-namespace',
+                'symbol-structure',
+                'symbol-class',
+                'symbol-method',
+                'symbol-property',
+                'symbol-field',
+                'symbol-method-arrow',
+                'symbol-enum',
+                'symbol-interface',
+                'symbol-method',
+                'symbol-variable',
+                'symbol-constant',
+                'symbol-string',
+                'symbol-numeric',
+                'symbol-boolean',
+                'symbol-array',
+                'symbol-structure',
+                'symbol-key',
+                'dash',
+                'symbol-enum-member',
+                'symbol-misc',
+                'symbol-event',
+                'symbol-operator',
+                'symbol-parameter'
+            ];
         this.render();
     }
 
-    setData(newData, icons, append = false) {
+    setData(newData,  append = false) {
         if (!Array.isArray(newData)) {
             console.warn("Invalid format, expected an array.");
             return;
         }
-        this.#iconKinds = icons;
+       
         this.#data = append ? this.#data.concat(newData) : structuredClone(newData);
         this.render();
     }
@@ -34,7 +65,7 @@ class ListComponent extends HTMLElement {
     /* Render the list items #data */
     render() {
         const list = document.createElement('ul');
-        list.style = "max-height:45cqh;overflow: auto;";
+        list.style = "overflow: auto;";
 
         const select = e => {
             if(e.type ==="keyup" && !(e.key==="Enter" )) return;
@@ -51,9 +82,11 @@ class ListComponent extends HTMLElement {
         };
         this.#data.forEach((item, index) => {
             const listItem = document.createElement('li');
+            const icon=this.#iconKinds[item.kind];
             listItem.setAttribute("tabindex", "0")
             listItem.setAttribute("data-index", index)
-            listItem.innerHTML = `<i  class='codicon codicon-${this.#iconKinds[item.kind]}'></i>
+            listItem.innerHTML = `<i  class='codicon codicon-${icon}' 
+            title='${icon}'></i>
             <span >${item.name} - ${item.detail}</span>`;
 
             listItem.addEventListener('click', select);
@@ -97,12 +130,11 @@ class PanelComponent extends HTMLElement {
         this.render();
     }
 
-    setData(newData, icons, append = false) {
+    setData(newData, append = false) {
         if (!Array.isArray(newData)) {
             console.warn("Invalid format, expected an array.");
             return;
         }
-        this.#iconKinds = icons;
         this.#data = append ? this.#data.concat(newData) : structuredClone(newData);
         this.render();
     }
@@ -134,9 +166,10 @@ class PanelComponent extends HTMLElement {
         };
         this.#data.forEach((item, index) => {
             const listItem = document.createElement('li');
+            const icon=this.#iconKinds[item.kind];
             listItem.setAttribute("tabindex", "0")
             listItem.setAttribute("data-index", index)
-            listItem.innerHTML = `<i  class='codicon codicon-${this.#iconKinds[item.kind]}'></i>
+            listItem.innerHTML = `<span title='A ${icon}'>XX<i  class='codicon codicon-${icon}' >*</i></span>
             <span >${item.name} - ${item.detail}</span>`;
 
             listItem.addEventListener('click', select);