feat: Change cli page

- New styles and strcture
- Add event listeners
- Add function to resize prompt according to input
- Append prompts to history element

source/screens/demo/examples/ui/cli.njk

@@ -4,7 +4,6 @@ tags:
 	- ui
 ---
 {% set pageId = page.fileSlug %}
-{% set pageClass = "h_full_view" %}
 {% set bodyClass = "body_frame" %}
 
 {% extends "hippie/_app.njk" %}
@@ -25,10 +24,52 @@ tags:
 
 {% block body %}
 	{{ io.frameHeader('title-bar') }}
-	<p>Previous return</p>
+	<div id="cli">
-	<textarea name="prompt" id="prompt"></textarea>
+		<div id="history">
+			<pre>Previous prompt</pre>
+		</div>
+		<div id="line">
+			<textarea name="prefix" id="prefix" rows="1" cols="1" readonly>&gt;</textarea>
+			<textarea name="prompt" id="prompt" rows="1" autofocus></textarea>
+		</div>
+	</div>
 {% endblock %}
 
 {%- block script %}
 	{{ super() }}
+	<script>
+		function resizeTextArea(textarea) {
+			const {style, value} = textarea;
+
+			style.height = style.minHeight = 'auto';
+			style.minHeight = `${Math.min(textarea.scrollHeight + 4, parseInt(textarea.style.maxHeight))}px`;
+			style.height = `${textarea.scrollHeight}px`;
+		}
+
+		const textarea = document.getElementById('prompt');
+
+		document.body.addEventListener('click', () => {
+			textarea.focus();
+		});
+
+		textarea.addEventListener('input', () => {
+			resizeTextArea(textarea);
+		});
+
+		window.addEventListener("keydown", (event) => {
+			if (event.key === 'Enter' && !event.shiftKey) {
+				event.preventDefault();
+
+				const p = document.createElement("pre");
+
+				p.textContent = event.target.value;
+				document
+					.getElementById("history")
+					.appendChild(p);
+				// window.scrollTo(0, document.body.scrollHeight);
+
+				event.target.value = '';
+			}
+		});
+	</script>
 {% endblock %}

source/style/modules/ui/_frame_module.scss

@@ -4,6 +4,38 @@
 	}
 }
 
+#cli {
+	@extend %flex-column;
+
+	background-color: black;
+
+	#line {
+		@extend %flex-row;
+	}
+
+	#prompt {
+		flex: 1;
+	}
+
+	pre {
+		margin: .5em 0;
+		color: white;
+	}
+
+	textarea {
+		resize: none;
+		max-height: 128px;
+		margin: $margin_io;
+		border: 0;
+		padding: $space_half;
+		// color: $color_text_io;
+		color: white;
+		// background-color: $color_back_io;
+		background-color: transparent;
+		line-height: 1.2;
+	}
+}
+
 .body_frame {
 	@extend %flex-column;
 	@extend .body_ui;