From 7d0414a43f6aec693ec27a765937acabba91b821 Mon Sep 17 00:00:00 2001
From: Andy Bunce <bunce.andy@gmail.com>
Date: Tue, 9 Dec 2025 11:47:59 +0000
Subject: [PATCH] [fix] connected indictor

---
 webapp/static/clients/codemirror/grail.css |  1 -
 webapp/static/clients/codemirror/script.js | 26 ++++++----
 webapp/static/clients/codemirror/wa.css    | 32 ------------
 webapp/static/clients/codemirror/wa.html   | 60 ++++++++++------------
 4 files changed, 43 insertions(+), 76 deletions(-)

diff --git a/webapp/static/clients/codemirror/grail.css b/webapp/static/clients/codemirror/grail.css
index 697f367..cd36601 100644
--- a/webapp/static/clients/codemirror/grail.css
+++ b/webapp/static/clients/codemirror/grail.css
@@ -103,7 +103,6 @@ form header {
 
 .page-nav {
   grid-column: 2 / 3;
-  background: red;
 
 }
 
diff --git a/webapp/static/clients/codemirror/script.js b/webapp/static/clients/codemirror/script.js
index 04332e8..1bb975e 100644
--- a/webapp/static/clients/codemirror/script.js
+++ b/webapp/static/clients/codemirror/script.js
@@ -133,7 +133,7 @@ $("popUrl").onsubmit = e => {
 $("bnDebug").onclick = e => { debugger; };
 
 
-$("tConnect").addEventListener('quiet-change', e => {
+$("bConnect").addEventListener('click', e => {
     e.preventDefault();
     $("popConnect").showPopover()
 });
@@ -142,10 +142,10 @@ $("msgIcon").onclick = e => {
     alert("NOT YET")
 };
 $("samples").addEventListener('wa-selection-change', e => {
-    const sel=e.detail.selection;
-    const href=sel[0].getAttribute("data-href")
-    if(!href) return;
-   $("popUrl").querySelector('wa-input[name="url"]').value=href;
+    const sel = e.detail.selection;
+    const href = sel[0].getAttribute("data-href")
+    if (!href) return;
+    $("popUrl").querySelector('wa-input[name="url"]').value = href;
 });
 
 function updateSettings(event) {
@@ -176,8 +176,7 @@ function connect() {
             client = new lsp.LSPClient({ extensions: lsp.languageServerExtensions() });
             client.connect(transport);
             $("popConnect").hidePopover();
-            $("tConnect").checked = true;
-            $("tipConnect").innerText = server;
+            connectState(server, true)
             const extLsp = client.plugin(file, "xquery");
 
             view.dispatch({
@@ -188,12 +187,19 @@ function connect() {
         })
         .catch(e => {
             console.log(e);
-            $("tConnect").checked = false;
+            connectState(server, false)
             alert("connection failed: " + server)
         });
 
 };
 
+//  set ui state for connection
+function connectState(server, bConn) {
+    $("bConnect").setAttribute("variant", bConn ? "success" : "danger")
+    $("tipConnect").innerText = bConn ? server : "Not connected";
+    $("bConnect").querySelector('wa-icon').setAttribute("name",  bConn ? "network" : "network-off");
+};
+
 // change active doc
 function docSwitch(text, urlNew) {
     const urlOld = $("iFile").value;
@@ -214,8 +220,8 @@ function treeAdd(tree, txt) {
     const treeItem = document.createElement('wa-tree-item');
     treeItem.innerText = txt;
     tree.querySelectorAll('wa-tree-item').forEach(item => (item.selected = false));
-    tree.insertBefore(treeItem,tree.firstChild);
-    treeItem.selected=true;
+    tree.insertBefore(treeItem, tree.firstChild);
+    treeItem.selected = true;
 };
 function incoming(msg) {
     const rpc = JSON.parse(msg);
diff --git a/webapp/static/clients/codemirror/wa.css b/webapp/static/clients/codemirror/wa.css
index 4d04d32..ef0e2a5 100644
--- a/webapp/static/clients/codemirror/wa.css
+++ b/webapp/static/clients/codemirror/wa.css
@@ -83,7 +83,6 @@ details[open]::details-content {
   grid-column: 1 / -1;
   display: flex;
   justify-content: space-between;
-  background: red;
 }
 
 .page-sidebar {
@@ -118,34 +117,3 @@ details[open]::details-content {
   justify-content: space-between;
   padding: 2px;
 }
-
-wa-button.pink::part(base) {
-  border-radius: 6px;
-  border: solid 2px;
-  background: #ff1493;
-  border-top-color: #ff7ac1;
-  border-left-color: #ff7ac1;
-  border-bottom-color: #ad005c;
-  border-right-color: #ad005c;
-  color: white;
-  font-size: 1.125rem;
-  box-shadow: 0 2px 10px #0002;
-  transition: all var(--wa-transition-slow) var(--wa-transition-easing);
-}
-
-wa-button.pink::part(base):hover {
-  transform: scale(1.05);
-}
-
-wa-button.pink::part(base):active {
-  border-top-color: #ad005c;
-  border-right-color: #ff7ac1;
-  border-bottom-color: #ff7ac1;
-  border-left-color: #ad005c;
-  transform: translateY(1px);
-}
-
-wa-button.pink::part(base):focus-visible {
-  outline: dashed 2px deeppink;
-  outline-offset: 4px;
-}
\ No newline at end of file
diff --git a/webapp/static/clients/codemirror/wa.html b/webapp/static/clients/codemirror/wa.html
index c966de3..883763f 100644
--- a/webapp/static/clients/codemirror/wa.html
+++ b/webapp/static/clients/codemirror/wa.html
@@ -37,14 +37,11 @@
 
             <div>
                 <span class="h4">XQuery 4.0 LSP client</span>
-                <quiet-toggle-icon id="tConnect" label="Connection status" size="lg"
-                    style="--checked-color: green;--unchecked-color: red;">
-                    <wa-icon slot="unchecked" library="tabler" name="network-off" family="outline"></wa-icon>
-                    <wa-icon slot="checked" library="tabler" name="network" family="outline"></wa-icon>
-                </quiet-toggle-icon>
-                <wa-tooltip id="tipConnect" for="tConnect">I'm a tooltip</wa-tooltip>
-
-
+                
+                <wa-button id="bConnect" variant="danger">
+                    <wa-icon library="tabler" name="network-off"></wa-icon>
+                </wa-button>
+                <wa-tooltip id="tipConnect" for="bConnect">Not connected</wa-tooltip>
             </div>
 
 
@@ -99,7 +96,7 @@
                         <wa-icon library="codicon" name="record-keys"></wa-icon>
                     </wa-button>
 
-                    <wa-button  id="popover__settings" title="Settings">
+                    <wa-button id="popover__settings" title="Settings">
                         <wa-icon library="codicon" name="settings"></wa-icon>
                     </wa-button>
 
@@ -137,9 +134,11 @@
                 <summary class='bg-info'>WORKSPACE
                     <wa-icon library="codicon" name="kebab-vertical" style="float:right"></wa-icon>
                 </summary>
-              <wa-tree id="workspace" selection="single">
-                <wa-tree-item >file:///some/file.xqm</wa-tree-item>
-              </wa-tree>
+                <div style="overflow: scroll;">
+                    <wa-tree id="workspace" selection="single">
+                        <wa-tree-item>file:///some/file.xqm</wa-tree-item>
+                    </wa-tree>
+                </div>
 
             </details>
 
@@ -187,12 +186,7 @@
                 <option value="xquery">xquery</option>
                 <option value="xml">xml</option>
             </select>
-            <wa-button>
-                aaaaa
-            </wa-button>
-            <button>
-                ddddd
-            </button>
+
         </footer>
     </div>
 
@@ -202,16 +196,16 @@
         <div style="display:flex;background: #ffecb3;">
             <div style="flex: 1 1 auto;">Load a document from the web</div>
             <wa-button icon-label="Close" appearance="text" data-popover="close">
-                <wa-icon name="circle-xmark" library="system" ></wa-icon>
+                <wa-icon name="circle-xmark" library="system"></wa-icon>
             </wa-button>
         </div>
 
         <form id="popUrl">
             <wa-input type="url" name="url" label="URL to fetch" placeholder="http://..." with-clear required
                 style="width: 20em;">
-               
+
                 <datalist>
-                    
+
                     <option
                         value="https://raw.githubusercontent.com/Quodatum/xqdoca/refs/heads/master/src/main/lib/model.xqm">
                         model.xqm (Quodatum/xqdoca)</option>
@@ -227,15 +221,15 @@
                         generator.xquery</option>
                 </datalist>
             </wa-input>
-             <wa-button type="submit" variant="primary">Fetch</wa-button>  
-             <hr/>
+            <wa-button type="submit" variant="primary">Fetch</wa-button>
+            <hr />
             <wa-tree id="samples" selection="leaf">
                 <wa-tree-item>
                     XQuery 3.1
-                    <wa-tree-item 
-                    data-href="https://raw.githubusercontent.com/expkg-zone58/pdfbox/refs/heads/main/src/Pdfbox3.xqm"
-                    >Pdfbox3.xqm (expkg-zone58/pdfbox)</wa-tree-item>
-                    <wa-tree-item 
+                    <wa-tree-item
+                        data-href="https://raw.githubusercontent.com/expkg-zone58/pdfbox/refs/heads/main/src/Pdfbox3.xqm">Pdfbox3.xqm
+                        (expkg-zone58/pdfbox)</wa-tree-item>
+                    <wa-tree-item
                         data-href="https://raw.githubusercontent.com/Quodatum/xqdoca/refs/heads/master/src/main/lib/model.xqm">
                         model.xqm (Quodatum/xqdoca)</option></wa-tree-item>
                     <wa-tree-item>Item X</wa-tree-item>
@@ -249,7 +243,7 @@
                 <wa-tree-item>Item 3</wa-tree-item>
             </wa-tree>
 
-          
+
         </form>
 
     </wa-popover>
@@ -327,11 +321,11 @@
                 <button type="submit" class="btn btn-primary">Apply</button>
             </div>
         </form>
-        </wa-popover>
-        <!-- CodeMirror 6 -->
-        <script src="./lsp.bundle.js"></script>
-        <script src="./script.js"></script>
-        <script src="./wc-qd-list.js"></script>
+    </wa-popover>
+    <!-- CodeMirror 6 -->
+    <script src="./lsp.bundle.js"></script>
+    <script src="./script.js"></script>
+    <script src="./wc-qd-list.js"></script>
 
 </body>