[ new ] Event for when the connection status in panel is clicked

Author: banacorn

lib/js/src/State/State__Command.bs.js

@@ -386,6 +386,7 @@ let rec dispatchCommand = async (state: State.t, command): unit => {
       } else {
         await State__View.Panel.interruptPrompt(state)
       }
+    | ConnectionStatusClicked => Js.log("Connection status clicked")
     | JumpToTarget(link) =>
       Editor.focus(state.document)
       let path = state.document->VSCode.TextDocument.fileName->Parser.filepath

lib/js/src/View/Panel/Header.bs.js

@@ -1,12 +1,19 @@
 open React
 
 @react.component
-let make = (~header: View.Header.t, ~connectionStatus: string) => {
-  let connectionStatus = <div className="agda-mode-header-connection-status"> {string(connectionStatus)} </div>
+let make = (~header: View.Header.t, ~connectionStatus: string, ~onConnectionStatusClick: unit => unit) => {
+  let connectionStatusElement = 
+    <div 
+      className="agda-mode-header-connection-status clickable" 
+      onClick={_ => onConnectionStatusClick()}
+      title="Click to switch Agda version"
+    > 
+      {string(connectionStatus)} 
+    </div>
   switch header {
-  | Plain(text) => <div className="agda-mode-header"> {string(text)} {connectionStatus} </div>
-  | Success(text) => <div className="agda-mode-header success"> {string(text)} {connectionStatus} </div>
-  | Warning(text) => <div className="agda-mode-header warning"> {string(text)} {connectionStatus} </div>
-  | Error(text) => <div className="agda-mode-header error"> {string(text)} {connectionStatus} </div>
+  | Plain(text) => <div className="agda-mode-header"> {string(text)} {connectionStatusElement} </div>
+  | Success(text) => <div className="agda-mode-header success"> {string(text)} {connectionStatusElement} </div>
+  | Warning(text) => <div className="agda-mode-header warning"> {string(text)} {connectionStatusElement} </div>
+  | Error(text) => <div className="agda-mode-header error"> {string(text)} {connectionStatusElement} </div>
   }
 }

lib/js/src/View/Panel/Panel.bs.js

@@ -117,7 +117,7 @@ let make = (
     <View.EventFromView.Provider value=onEventFromView>
       <section className="agda-mode native-key-bindings" tabIndex={-1}>
         <div className="agda-mode-header-container">
-          <Header header connectionStatus />
+          <Header header connectionStatus onConnectionStatusClick={() => onEventFromView->Chan.emit(ConnectionStatusClicked)} />
           <Prompt
             inputMethodActivated={Option.isSome(inputMethodState)} prompt onUpdatePromptIM onSubmit
           />

lib/js/src/View/View.bs.js

@@ -341,6 +341,7 @@ module EventFromView = {
     | InputMethod(InputMethod.t)
     | PromptIMUpdate(PromptIMUpdate.t)
     | JumpToTarget(Link.t)
+    | ConnectionStatusClicked
 
   let toString = x =>
     switch x {
@@ -349,6 +350,7 @@ module EventFromView = {
     | InputMethod(_) => "InputMethod"
     | PromptIMUpdate(_) => "PromptIMUpdate"
     | JumpToTarget(_) => "JumpToTarget"
+    | ConnectionStatusClicked => "ConnectionStatusClicked"
     }
 
   let chan: Chan.t<t> = Chan.make()
@@ -373,6 +375,7 @@ module EventFromView = {
       | "InputMethod" => Payload(InputMethod.decode->map(payload => InputMethod(payload)))
       | "PromptIMUpdate" => Payload(PromptIMUpdate.decode->map(payload => PromptIMUpdate(payload)))
       | "JumpToTarget" => Payload(Link.decode->map(link => JumpToTarget(link)))
+      | "ConnectionStatusClicked" => TagOnly(ConnectionStatusClicked)
       | tag => raise(DecodeError("[EventFromView] Unknown constructor: " ++ tag))
       }
     })
@@ -386,6 +389,7 @@ module EventFromView = {
       | InputMethod(action) => Payload("InputMethod", InputMethod.encode(action))
       | PromptIMUpdate(action) => Payload("PromptIMUpdate", PromptIMUpdate.encode(action))
       | JumpToTarget(link) => Payload("JumpToTarget", Link.encode(link))
+      | ConnectionStatusClicked => TagOnly("ConnectionStatusClicked")
       }
     , ...)
   }