Display connection status

Author: sebromero

ui/arduino/main.css

@@ -273,7 +273,7 @@ button.small .icon {
 }
 
 #panel #drag-handle {
-  width: 100%;
+  flex-grow: 2;
   height: 100%;
   cursor: grab;
 }
@@ -293,6 +293,19 @@ button.small .icon {
   background: #008184;
 }
 
+.panel-bar #connection-status {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: white;
+}
+
+.panel-bar #connection-status img {
+  width: 1.25em;
+  height: 1.25em;
+  filter: invert(1);
+}
+
 .panel-bar .term-operations {
   transition: opacity 0.15s;
   display: flex;

ui/arduino/views/components/repl-panel.js

@@ -13,6 +13,10 @@ function ReplPanel(state, emit) {
   return html`
     <div id="panel" style="height: ${state.panelHeight}px">
       <div class="panel-bar">
+        <div id="connection-status" style="visibility:${state.isConnected ? 'visible' : 'hidden'};">
+          <img src="media/connect.svg" />
+          <div>${state.isConnected ? 'Connected to ' + state.connectedPort : ''}</div>
+        </div>
         <div id="drag-handle"
           onmousedown=${() => emit('start-resizing-panel')}
           onmouseup=${() => emit('stop-resizing-panel')}