xP: make non-connected states more apparent

xP/public/xP.css

@@ -13,6 +13,16 @@ body {
 	height: 100dvh;
 }
 
+.overlay {
+	padding: .6em .9em;
+	background: #eee;
+	border: 1px outset #eee;
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+	text-align: center;
+}
 .title, .status {
 	padding: .05em .3em;
 	background: #eee;

xP/public/xP.js

@@ -41,7 +41,7 @@ class RelayRpc extends EventTarget {
 		}
 		this.ws.onclose = event => {
 			let message = "Connection closed: " +
-				event.code + " (" + event.reason + ")"
+				event.reason + " (" + event.code + ")"
 			for (const seq in this.promised)
 				this.promised[seq].reject(message)
 
@@ -811,14 +811,18 @@ let Input = {
 
 let Main = {
 	view: vnode => {
-		let state = "Connected"
+		let overlay = undefined
 		if (connecting)
-			state = "Connecting..."
+			overlay = m('.overlay', {}, "Connecting...")
 		else if (rpc.ws === undefined)
-			state = "Disconnected"
+			overlay = m('.overlay', {}, [
+				m('', {}, "Disconnected"),
+				m('', {}, m('small', {}, "Reload page to reconnect.")),
+			])
 
 		return m('.xP', {}, [
-			m('.title', {}, [`xP (${state})`, m(Toolbar)]),
+			overlay,
+			m('.title', {}, [`xP`, m(Toolbar)]),
 			m('.middle', {}, [m(BufferList), m(BufferContainer)]),
 			m(Status),
 			m(Input),