fix connection message

src/Views/connectionStatusView.tsx

@@ -1,5 +1,6 @@
 import * as React from "bloatless-react";
 
+import { connectionMessage } from "../model";
 import { translation } from "../translations";
 
 export function ConnectionStatusView() {
@@ -9,7 +10,7 @@ export function ConnectionStatusView() {
         <b>{translation.connectionStatus}</b>
         <span
           class="success connected-only"
-          subscribe:innerText={translation.connectedTo}
+          subscribe:innerText={connectionMessage}
         ></span>
         <span class="error disconnected-only">{translation.disconnected}</span>
       </div>

src/model.ts

@@ -45,6 +45,9 @@ export class Message implements React.Identifiable {
 export const currentAddress = new React.State("");
 export const serverAddress = React.restoreState("socket-address", "");
 export const isConnected = new React.State(false);
+export const connectionMessage = React.createProxyState([serverAddress], () =>
+  translation.connectedTo(serverAddress.value)
+);
 
 export const cannotConnect = React.createProxyState(
   [serverAddress, currentAddress, isConnected],

src/translations.ts

@@ -6,10 +6,7 @@ const englishTranslations = {
   // general
   setInput: "Set",
   connectionStatus: "Connection status",
-  connectedTo: React.createProxyState(
-    [],
-    () => `Connected to ${currentAddress}`
-  ),
+  connectedTo: (server: string) => `Connected to "${server}"`,
   disconnected: "Disconnected",
 
   // settings