style app controls

site/src/components/icon.html

@@ -9,19 +9,21 @@
 <script>
 	export let clas = '';
 	export let name;
+
+	let size = 20;
 </script>
 
 <!-- style="--color: {color ? color : 'currentColor'}" -->
-<svg class="{'icon ' + clas}">
+<svg class="{'icon ' + clas}" width={size} height={size}>
 	<use xlink:href='#{name}' />
 </svg>
 
 <style>
-	:global(.icon) {
+	.icon {
 		position: relative;
-	  width: 1.2em;
+		/* width: 1.2em;
 		height: 1.2em;
-	  top: -0.123em;
+		top: -0.123em; */
 		overflow: hidden;
 		vertical-align: middle;
 		-o-object-fit: contain;

site/src/components/inline-svg.html

@@ -40,7 +40,7 @@
 	</symbol>
 
 	<symbol id='download' class='icon' viewBox='0 0 24 24'>
-		<path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4' />
+		<path d='M21 15V19A2 2 0 0 1 19 21H5A2 2 0 0 1 3 19V15' />
 		<polyline points='7 10 12 15 17 10' />
 		<line x1='12' y1='15' x2='12' y2='3' />
 	</symbol>
@@ -62,7 +62,7 @@
 	</symbol>
 
 	<symbol id='log-in' class='icon' viewBox='0 0 24 24'>
-		<path d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4' />
+		<path d='M15 3H19A2 2 0 0 1 21 5V19A2 2 0 0 1 19 21H15' />
 		<polyline points='10 17 15 12 10 7' />
 		<line x1='15' y1='12' x2='3' y2='12' />
 	</symbol>

site/src/routes/repl/_components/AppControls/ExampleSelector.html

@@ -1,9 +1,7 @@
 <script>
 	import { createEventDispatcher } from 'svelte';
-	import { enter } from '../events.js';
 
 	export let examples;
-	export let name;
 
 	const dispatch = createEventDispatcher();
 </script>
@@ -20,11 +18,6 @@
 			</optgroup>
 		{/each}
 	</select>
-
-	<div class='visible'>
-		<span class='widther'>{name}</span>
-		<input bind:value={name} on:focus="{e => e.target.select()}" use:enter="{e => e.target.blur()}">
-	</div>
 </div>
 
 <style>

site/src/routes/repl/_components/AppControls/index.html

@@ -6,6 +6,7 @@
 	import * as doNotZip from 'do-not-zip';
 	import downloadBlob from '../../_utils/downloadBlob.js';
 	import { user } from '../../../../user.js';
+	import { enter } from '../events.js';
 
 	const dispatch = createEventDispatcher();
 
@@ -198,22 +199,37 @@ export default app;` });
 <svelte:window on:keydown={handleKeydown} />
 
 <div class="app-controls">
-	<div class="icon" style="position: relative; width: 3.2rem; margin-top:-.5rem">
+	<div>
+		<div class="icon" style="position: relative; width: 3.2rem; top: -.2rem">
 			<Icon name="menu" />
+
+			<select
+				class="hidden-select"
+				on:change="{e => dispatch('select', { slug: e.target.value })}"
+			>
+				<option value={null} disabled>Select an example</option>
+
+				{#each examples as group}
+					<optgroup label={group.name}>
+						{#each group.examples as example}
+							<option value={example.slug}>{example.title}</option>
+						{/each}
+					</optgroup>
+				{/each}
+			</select>
 		</div>
 
-	<ExampleSelector {examples} bind:name on:select />
+		<ExampleSelector {examples} on:select />
 
-	<div style="flex: 1 0 auto" />
+		<input
-	<div style="text-align: right; margin-right:.8rem">
+			bind:value={name}
-		{#if $user}
+			on:focus="{e => e.target.select()}"
-			<UserMenu />
+			use:enter="{e => e.target.blur()}"
-		{:else}
+		>
-			<a class="icon" on:click={login} href="auth/login" title="Login to save">
+	</div>
-				<Icon name="log-in" />
-			</a>
-		{/if}
 
+	<div style="flex: 1 0 auto" />
+	<div style="text-align: right; margin-right:.4rem">
 		<button class="icon" on:click="{() => zen_mode = !zen_mode}" title="fullscreen editor">
 			{#if zen_mode}
 				<Icon name="close" />
@@ -249,6 +265,15 @@ export default app;` });
 				<Icon name="save" />
 			</a>
 		{/if}
+
+		{#if $user}
+			<UserMenu />
+		{:else}
+			<button class="icon" on:click={login}>
+				<Icon name="log-in" />
+				&nbsp;Log in to save
+			</button>
+		{/if}
 	</div>
 </div>
 
@@ -267,10 +292,26 @@ export default app;` });
 		color: white;
 	}
 
+	.hidden-select {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		opacity: 0.0001;
+		top: 0;
+		left: 0;
+	}
+
 	.icon {
-		padding: 0 .8rem;
+		display: inline-block;
-		opacity: .5;
+		padding: 0.2em;
+		opacity: .7;
 		transition: opacity .3s;
+		font-family: var(--font-ui);
+		font-size: 1.3rem;
+		/* width: 1.6em;
+		height: 1.6em; */
+		line-height: 1;
+		margin: 0 0 0 0.4em;
 	}
 
 	.icon:hover    { opacity: 1 }
@@ -278,6 +319,20 @@ export default app;` });
 
 	.icon[title^='fullscreen'] { display: none }
 
+	input {
+		background: transparent;
+		border: none;
+		color: currentColor;
+		font-family: var(--font-ui);
+		font-size: 1.3rem;
+		opacity: 0.7;
+		outline: none;
+	}
+
+	input:focus {
+		opacity: 1;
+	}
+
 	@media (min-width: 768px) {
 		.icon[title^='fullscreen'] { display: inline }
 	}