xP: make the prompt look more xC-like

2 files changed, 36 insertions, 16 deletions

diff --git a/xP/public/xP.css b/xP/public/xP.css
index 96d6525..041eb63 100644
--- a/xP/public/xP.css
+++ b/xP/public/xP.css
@@ -186,16 +186,30 @@ button {
 	column-gap: .6em;
 	overflow-x: auto;
 }
-
+.input {
+	flex-shrink: 0;
+	border: 2px inset #eee;
+	overflow: hidden;
+	resize: vertical;
+	display: flex;
+}
+.input:focus-within {
+	border-color: #ff5f00;
+}
+.prompt {
+	padding: .05em .3em;
+	border-right: 1px solid #ccc;
+	background: #f8f8f8;
+	font-weight: bold;
+}
 textarea {
 	font: inherit;
 	padding: .05em .3em;
 	margin: 0;
-	border: 2px inset #eee;
-	flex-shrink: 0;
-	resize: vertical;
+	border: 0;
+	flex-grow: 1;
+	resize: none;
 }
 textarea:focus {
 	outline: none;
-	border-color: #ff5f00;
 }
diff --git a/xP/public/xP.js b/xP/public/xP.js
index dbba7e2..93fe642 100644
--- a/xP/public/xP.js
+++ b/xP/public/xP.js
@@ -687,18 +687,24 @@ let Status = {
 		let status = `${bufferCurrent}`
 		if (b.hideUnimportant)
 			status += `<H>`
+		return m('.status', {}, status)
+	},
+}
 
+let Prompt = {
+	view: vnode => {
 		// This should be handled differently, so don't mind the lookup.
-		if (b.server !== undefined) {
-			let state = b.server.state
-			for (const s in Relay.ServerState)
-				if (Relay.ServerState[s] == b.server.state) {
-					state = s
-					break
-				}
-			status += ` (${state})`
-		}
-		return m('.status', {}, status)
+		let b = buffers.get(bufferCurrent)
+		if (b === undefined || b.server === undefined)
+			return
+
+		let state = b.server.state
+		for (const s in Relay.ServerState)
+			if (Relay.ServerState[s] == b.server.state) {
+				state = s
+				break
+			}
+		return m('.prompt', {}, `(${state})`)
 	},
 }
 
@@ -934,7 +940,7 @@ let Main = {
 			m('.title', {}, [`xP`, m(Toolbar)]),
 			m('.middle', {}, [m(BufferList), m(BufferContainer)]),
 			m(Status),
-			m(Input),
+			m('.input', {}, [m(Prompt), m(Input)]),
 		])
 	},
 }