From 2ebf2b40b6c3c78025604e81a01fb3f5caf75385 Mon Sep 17 00:00:00 2001
From: Yuichiro Yamashita <xydybaseball@gmail.com>
Date: Sun, 3 Oct 2021 23:48:22 +0900
Subject: [PATCH] improve repl title appearance.

---
 .../repl/[id]/_components/AppControls/index.svelte  | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/site/src/routes/repl/[id]/_components/AppControls/index.svelte b/site/src/routes/repl/[id]/_components/AppControls/index.svelte
index 55a1d24e28..d483eca77a 100644
--- a/site/src/routes/repl/[id]/_components/AppControls/index.svelte
+++ b/site/src/routes/repl/[id]/_components/AppControls/index.svelte
@@ -21,6 +21,7 @@
 	let downloading = false;
 	let justSaved = false;
 	let justForked = false;
+	let title_input;
 
 	function wait(ms) {
 		return new Promise(f => setTimeout(f, ms));
@@ -167,7 +168,11 @@ export default app;` });
 <svelte:window on:keydown={handleKeydown} />
 
 <div class="app-controls">
+	<button class="icon" on:click="{() => title_input.focus()}">
+		<Icon name="edit" />
+	</button>
 	<input
+		bind:this={title_input}
 		bind:value={name}
 		on:focus="{e => e.target.select()}"
 		use:enter="{e => e.target.blur()}"
@@ -260,9 +265,17 @@ export default app;` });
 		opacity: 0.7;
 		outline: none;
 		flex: 1;
+		margin: 0 0.2em 0 .4rem;
+		padding-top: 0.2em;
+		border-bottom: 1px solid transparent;
 	}
 
+	input:hover {
+		border-bottom: 1px solid currentColor;
+		opacity: 1;
+	}
 	input:focus {
+		border-bottom: 1px solid currentColor;
 		opacity: 1;
 	}