From 8f30793c58307c8229f5133e19f8ddbc3f07ca28 Mon Sep 17 00:00:00 2001
From: Sander Hahn <sanderhahn@gmail.com>
Date: Fri, 16 Aug 2019 19:02:40 +0200
Subject: [PATCH 1/4] Access repl archive in console

---
 .../_components/AppControls/UserMenu.svelte   |  6 +++
 .../[id]/_components/AppControls/index.svelte | 54 ++++++++++++++++++-
 site/src/routes/repl/archive.json.js          | 20 +++++++
 3 files changed, 79 insertions(+), 1 deletion(-)
 create mode 100644 site/src/routes/repl/archive.json.js

diff --git a/site/src/routes/repl/[id]/_components/AppControls/UserMenu.svelte b/site/src/routes/repl/[id]/_components/AppControls/UserMenu.svelte
index 1404c1d5fc..245ea70eae 100644
--- a/site/src/routes/repl/[id]/_components/AppControls/UserMenu.svelte
+++ b/site/src/routes/repl/[id]/_components/AppControls/UserMenu.svelte
@@ -1,6 +1,8 @@
 <script>
 	import { user, logout } from '../../../../../user.js';
 
+	export let load;
+
 	let showMenu = false;
 	let name;
 
@@ -13,6 +15,7 @@
 
 	{#if showMenu}
 		<div class="menu">
+			<button on:click={load}>Archive</button>
 			<button on:click={logout}>Log out</button>
 		</div>
 	{/if}
@@ -72,6 +75,8 @@
 		z-index: 99;
 		text-align: left;
 		border-radius: 0.4rem;
+		display: flex;
+		flex-direction: column;
 	}
 
 	.menu button {
@@ -79,6 +84,7 @@
 		font-family: var(--font);
 		font-size: 1.6rem;
 		/* opacity: 0.7; */
+		padding: 0.4rem 0;
 	}
 
 	.menu button:hover {
diff --git a/site/src/routes/repl/[id]/_components/AppControls/index.svelte b/site/src/routes/repl/[id]/_components/AppControls/index.svelte
index 7770972474..71e79074d5 100644
--- a/site/src/routes/repl/[id]/_components/AppControls/index.svelte
+++ b/site/src/routes/repl/[id]/_components/AppControls/index.svelte
@@ -142,6 +142,58 @@
 		saving = false;
 	}
 
+	async function load() {
+		const periodFormatter = new Intl.DateTimeFormat(undefined, {
+			year: "numeric",
+			month: "long",
+		});
+
+		function sections(gists) {
+			const grouped = gists.reduce((agg, gist) => {
+				const key = periodFormatter.format(new Date(gist.updated_at));
+				if (!agg.hasOwnProperty(key)) {
+					agg[key] = [];
+				}
+				agg[key].push(gist);
+				return agg;
+			}, {});
+			return Object.entries(grouped).map(([title, archive]) => {
+				return {
+					title,
+					archive,
+				};
+			});
+		}
+
+		try {
+			const r = await fetch(`../repl/archive.json`, {
+				method: 'GET',
+				headers: { Authorization },
+			});
+
+			if (r.status < 200 || r.status >= 300) {
+				const { error } = await r.json();
+				throw new Error(`Received an HTTP ${r.status} response: ${error}`);
+			}
+
+			const gists = await r.json();
+			for (const section of sections(gists)) {
+				console.log(section.title);
+				for (const repl of section.archive) {
+					console.log("  " + repl.name);
+					console.log("  " + location.origin + "/repl/" + repl.uid);
+				}
+			}
+
+		} catch (err) {
+			if (navigator.onLine) {
+				alert(err.message);
+			} else {
+				alert(`It looks like you're offline! Find the internet and try again`);
+			}
+		}
+	}
+
 	async function download() {
 		downloading = true;
 
@@ -216,7 +268,7 @@ export default app;` });
 		</button>
 
 		{#if $user}
-			<UserMenu />
+			<UserMenu {load} />
 		{:else}
 			<button class="icon" on:click={login}>
 				<Icon name="log-in" />
diff --git a/site/src/routes/repl/archive.json.js b/site/src/routes/repl/archive.json.js
new file mode 100644
index 0000000000..7c64b345cb
--- /dev/null
+++ b/site/src/routes/repl/archive.json.js
@@ -0,0 +1,20 @@
+import send from '@polka/send';
+import { query } from '../../utils/db';
+import { isUser } from '../../backend/auth';
+
+export async function get(req, res) {
+	const user = await isUser(req, res);
+	if (!user) return; // response already sent
+
+	const offset = req.params.offset || 0;
+	const rows = await query(`
+		select g.uid, g.name, coalesce(g.updated_at, g.created_at) as updated_at
+		from gists g
+		where g.user_id = $1
+		order by g.updated_at desc, g.created_at desc
+		limit 100
+		offset $2
+	`, [user.id, offset]);
+
+	send(res, 200, rows);
+}

From 419b4150dd38e10aab0d5b74594557d6152899f0 Mon Sep 17 00:00:00 2001
From: Richard Harris <richard.a.harris@gmail.com>
Date: Fri, 16 Aug 2019 23:30:47 -0400
Subject: [PATCH 2/4] start building UI for saved REPLs

---
 .../_components/AppControls/UserMenu.svelte   | 17 +++---
 .../[id]/_components/AppControls/index.svelte | 54 +------------------
 site/src/routes/repls/index.json.js           | 20 +++++++
 site/src/routes/repls/index.svelte            | 15 ++++++
 4 files changed, 46 insertions(+), 60 deletions(-)
 create mode 100644 site/src/routes/repls/index.json.js
 create mode 100644 site/src/routes/repls/index.svelte

diff --git a/site/src/routes/repl/[id]/_components/AppControls/UserMenu.svelte b/site/src/routes/repl/[id]/_components/AppControls/UserMenu.svelte
index 245ea70eae..0cedfff91a 100644
--- a/site/src/routes/repl/[id]/_components/AppControls/UserMenu.svelte
+++ b/site/src/routes/repl/[id]/_components/AppControls/UserMenu.svelte
@@ -1,8 +1,6 @@
 <script>
 	import { user, logout } from '../../../../../user.js';
 
-	export let load;
-
 	let showMenu = false;
 	let name;
 
@@ -15,7 +13,7 @@
 
 	{#if showMenu}
 		<div class="menu">
-			<button on:click={load}>Archive</button>
+			<a href="repls/saved">Your saved REPLs</a>
 			<button on:click={logout}>Log out</button>
 		</div>
 	{/if}
@@ -67,7 +65,7 @@
 	.menu {
 		position: absolute;
 		width: calc(100% + 1.6rem);
-		min-width: 6em;
+		min-width: 10em;
 		top: 3rem;
 		right: -1.6rem;
 		background-color: var(--second);
@@ -79,16 +77,21 @@
 		flex-direction: column;
 	}
 
-	.menu button {
+	.menu button, .menu a {
 		background-color: transparent;
 		font-family: var(--font);
 		font-size: 1.6rem;
-		/* opacity: 0.7; */
+		opacity: 0.7;
 		padding: 0.4rem 0;
+		text-decoration: none;
+		text-align: left;
+		border: none;
+		color: inherit;
 	}
 
-	.menu button:hover {
+	.menu button:hover, .menu a:hover {
 		opacity: 1;
+		color: inherit;
 	}
 
 	@media (min-width: 600px) {
diff --git a/site/src/routes/repl/[id]/_components/AppControls/index.svelte b/site/src/routes/repl/[id]/_components/AppControls/index.svelte
index 71e79074d5..7770972474 100644
--- a/site/src/routes/repl/[id]/_components/AppControls/index.svelte
+++ b/site/src/routes/repl/[id]/_components/AppControls/index.svelte
@@ -142,58 +142,6 @@
 		saving = false;
 	}
 
-	async function load() {
-		const periodFormatter = new Intl.DateTimeFormat(undefined, {
-			year: "numeric",
-			month: "long",
-		});
-
-		function sections(gists) {
-			const grouped = gists.reduce((agg, gist) => {
-				const key = periodFormatter.format(new Date(gist.updated_at));
-				if (!agg.hasOwnProperty(key)) {
-					agg[key] = [];
-				}
-				agg[key].push(gist);
-				return agg;
-			}, {});
-			return Object.entries(grouped).map(([title, archive]) => {
-				return {
-					title,
-					archive,
-				};
-			});
-		}
-
-		try {
-			const r = await fetch(`../repl/archive.json`, {
-				method: 'GET',
-				headers: { Authorization },
-			});
-
-			if (r.status < 200 || r.status >= 300) {
-				const { error } = await r.json();
-				throw new Error(`Received an HTTP ${r.status} response: ${error}`);
-			}
-
-			const gists = await r.json();
-			for (const section of sections(gists)) {
-				console.log(section.title);
-				for (const repl of section.archive) {
-					console.log("  " + repl.name);
-					console.log("  " + location.origin + "/repl/" + repl.uid);
-				}
-			}
-
-		} catch (err) {
-			if (navigator.onLine) {
-				alert(err.message);
-			} else {
-				alert(`It looks like you're offline! Find the internet and try again`);
-			}
-		}
-	}
-
 	async function download() {
 		downloading = true;
 
@@ -268,7 +216,7 @@ export default app;` });
 		</button>
 
 		{#if $user}
-			<UserMenu {load} />
+			<UserMenu />
 		{:else}
 			<button class="icon" on:click={login}>
 				<Icon name="log-in" />
diff --git a/site/src/routes/repls/index.json.js b/site/src/routes/repls/index.json.js
new file mode 100644
index 0000000000..7c64b345cb
--- /dev/null
+++ b/site/src/routes/repls/index.json.js
@@ -0,0 +1,20 @@
+import send from '@polka/send';
+import { query } from '../../utils/db';
+import { isUser } from '../../backend/auth';
+
+export async function get(req, res) {
+	const user = await isUser(req, res);
+	if (!user) return; // response already sent
+
+	const offset = req.params.offset || 0;
+	const rows = await query(`
+		select g.uid, g.name, coalesce(g.updated_at, g.created_at) as updated_at
+		from gists g
+		where g.user_id = $1
+		order by g.updated_at desc, g.created_at desc
+		limit 100
+		offset $2
+	`, [user.id, offset]);
+
+	send(res, 200, rows);
+}
diff --git a/site/src/routes/repls/index.svelte b/site/src/routes/repls/index.svelte
new file mode 100644
index 0000000000..7a64787c8e
--- /dev/null
+++ b/site/src/routes/repls/index.svelte
@@ -0,0 +1,15 @@
+<!-- TODO we need to be able to fetch the data in preload -->
+
+<script context="module">
+	export async function preload() {
+		const r = await this.fetch('repls.json');
+
+		return {
+			list: await r.json()
+		};
+	}
+</script>
+
+<script>
+	export let list;
+</script>
\ No newline at end of file

From bd5f69ded4591f568e820b69dc1c36b24b3c834b Mon Sep 17 00:00:00 2001
From: Richard Harris <richard.a.harris@gmail.com>
Date: Sun, 18 Aug 2019 15:29:42 -0400
Subject: [PATCH 3/4] show list of apps belonging to user

---
 site/src/routes/_layout.svelte                |  25 +++-
 site/src/routes/apps/index.json.js            |  20 +++
 site/src/routes/apps/index.svelte             | 130 ++++++++++++++++++
 .../_components/AppControls/UserMenu.svelte   |  11 +-
 .../[id]/_components/AppControls/index.svelte |  18 +--
 site/src/routes/repl/archive.json.js          |  20 ---
 site/src/routes/repls/index.json.js           |  20 ---
 site/src/routes/repls/index.svelte            |  15 --
 8 files changed, 179 insertions(+), 80 deletions(-)
 create mode 100644 site/src/routes/apps/index.json.js
 create mode 100644 site/src/routes/apps/index.svelte
 delete mode 100644 site/src/routes/repl/archive.json.js
 delete mode 100644 site/src/routes/repls/index.json.js
 delete mode 100644 site/src/routes/repls/index.svelte

diff --git a/site/src/routes/_layout.svelte b/site/src/routes/_layout.svelte
index 4adbb9b0dc..55f4861880 100644
--- a/site/src/routes/_layout.svelte
+++ b/site/src/routes/_layout.svelte
@@ -1,11 +1,32 @@
 <script>
+	import { setContext } from 'svelte';
 	import { stores } from '@sapper/app';
 	import { Icon, Icons, Nav, NavItem } from '@sveltejs/site-kit';
 	import PreloadingIndicator from '../components/PreloadingIndicator.svelte';
 
-	const { page, preloading } = stores();
-
 	export let segment;
+
+	const { page, preloading, session } = stores();
+
+	setContext('app', {
+		login: () => {
+			const login_window = window.open(`${window.location.origin}/auth/login`, 'login', 'width=600,height=400');
+
+			window.addEventListener('message', function handler(event) {
+				login_window.close();
+				window.removeEventListener('message', handler);
+				$session.user = event.data.user;
+			});
+		},
+
+		logout: async () => {
+			const r = await fetch(`/auth/logout`, {
+				credentials: 'include'
+			});
+
+			if (r.ok) $session.user = null;
+		}
+	});
 </script>
 
 <Icons/>
diff --git a/site/src/routes/apps/index.json.js b/site/src/routes/apps/index.json.js
new file mode 100644
index 0000000000..5c7b233975
--- /dev/null
+++ b/site/src/routes/apps/index.json.js
@@ -0,0 +1,20 @@
+import send from '@polka/send';
+import { query } from '../../utils/db';
+
+export async function get(req, res) {
+	if (req.user) {
+		const offset = req.params.offset || 0;
+		const rows = await query(`
+			select g.uid, g.name, coalesce(g.updated_at, g.created_at) as updated_at
+			from gists g
+			where g.user_id = $1
+			order by updated_at desc
+			limit 100
+			offset $2
+		`, [req.user.id, offset]);
+
+		send(res, 200, rows);
+	} else {
+		send(res, 401);
+	}
+}
diff --git a/site/src/routes/apps/index.svelte b/site/src/routes/apps/index.svelte
new file mode 100644
index 0000000000..bbbe7d6391
--- /dev/null
+++ b/site/src/routes/apps/index.svelte
@@ -0,0 +1,130 @@
+<script context="module">
+	export async function preload(page, { user }) {
+		let apps;
+
+		if (user) {
+			const r = await this.fetch('apps.json', {
+				credentials: 'include'
+			});
+			if (!r.ok) return this.error(r.status, await r.text());
+
+			apps = await r.json();
+		}
+
+		return { user, apps };
+	}
+</script>
+
+<script>
+	import { getContext } from 'svelte';
+
+	export let user;
+	export let apps;
+
+	const { login, logout } = getContext('app');
+
+	const formatter = new Intl.DateTimeFormat(undefined, {
+		year: 'numeric',
+		month: 'short',
+		day: 'numeric',
+		hour: 'numeric',
+		minute: '2-digit'
+	});
+
+	const format = str => formatter.format(new Date(str));
+</script>
+
+<svelte:head>
+	<title>Your apps • Svelte</title>
+</svelte:head>
+
+<div class="apps">
+	{#if user}
+		<header>
+			<h1>Your apps</h1>
+
+			<div class="user">
+				<img class="avatar" alt="{user.name} avatar" src="{user.avatar}">
+				<span>
+					{user.name}
+					(<a on:click|preventDefault={logout} href="auth/logout">log out</a>)
+				</span>
+			</div>
+		</header>
+
+		<ul>
+			{#each apps as app}
+				<li>
+					<a href="repl/{app.uid}">
+						<h2>{app.name}</h2>
+						<span>updated {format(app.updated_at)}</span>
+					</a>
+				</li>
+			{/each}
+		</ul>
+	{:else}
+		<p>Please <a on:click|preventDefault={login} href="auth/login">log in</a> to see your saved apps.</p>
+	{/if}
+</div>
+
+<style>
+	.apps {
+		padding: var(--top-offset) var(--side-nav) 6rem var(--side-nav);
+		max-width: var(--main-width);
+		margin: 0 auto;
+	}
+
+	header {
+		margin: 0 0 1em 0;
+	}
+
+	h1 {
+		font-size: 4rem;
+		font-weight: 400;
+	}
+
+	.user {
+		display: flex;
+		padding: 0 0 0 3.2rem;
+		position: relative;
+		margin: 1rem 0 5rem 0;
+		color: var(--text);
+	}
+
+	.avatar {
+		position: absolute;
+		left: 0;
+		top: 0.1rem;
+		width: 2.4rem;
+		height: 2.4rem;
+		border: 1px solid rgba(0,0,0,0.3);
+		border-radius: 0.2rem;
+	}
+
+	ul {
+		list-style: none;
+	}
+
+	li {
+		margin: 0 0 1em 0;
+	}
+
+	h2 {
+		color: var(--text);
+		font-size: var(--h3);
+		font-weight: 400;
+	}
+
+	li a {
+		border: none;
+	}
+
+	li a:hover h2 {
+		color: var(--flash);
+	}
+
+	li span {
+		font-size: 14px;
+		color: #999;
+	}
+</style>
\ No newline at end of file
diff --git a/site/src/routes/repl/[id]/_components/AppControls/UserMenu.svelte b/site/src/routes/repl/[id]/_components/AppControls/UserMenu.svelte
index 437c0db420..de400cbf29 100644
--- a/site/src/routes/repl/[id]/_components/AppControls/UserMenu.svelte
+++ b/site/src/routes/repl/[id]/_components/AppControls/UserMenu.svelte
@@ -1,14 +1,9 @@
 <script>
+	import { getContext } from 'svelte';
 	import { stores } from '@sapper/app';
 	const { session } = stores();
 
-	const logout = async () => {
-		const r = await fetch(`/auth/logout`, {
-			credentials: 'include'
-		});
-
-		if (r.ok) $session.user = null;
-	}
+	const { logout } = getContext('app');
 
 	let showMenu = false;
 	let name;
@@ -22,7 +17,7 @@
 
 	{#if showMenu}
 		<div class="menu">
-			<a href="repls/saved">Your saved REPLs</a>
+			<a href="apps">Your saved apps</a>
 			<button on:click={logout}>Log out</button>
 		</div>
 	{/if}
diff --git a/site/src/routes/repl/[id]/_components/AppControls/index.svelte b/site/src/routes/repl/[id]/_components/AppControls/index.svelte
index 6bd02324cc..4cfd5d43b2 100644
--- a/site/src/routes/repl/[id]/_components/AppControls/index.svelte
+++ b/site/src/routes/repl/[id]/_components/AppControls/index.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { createEventDispatcher } from 'svelte';
+	import { createEventDispatcher, getContext } from 'svelte';
 	import { stores } from '@sapper/app';
 	import UserMenu from './UserMenu.svelte';
 	import { Icon } from '@sveltejs/site-kit';
@@ -10,6 +10,7 @@
 
 	const dispatch = createEventDispatcher();
 	const { session } = stores();
+	const { login } = getContext('app');
 
 	export let repl;
 	export let gist;
@@ -35,19 +36,6 @@
 		}
 	}
 
-	function login(event) {
-		event.preventDefault();
-		const loginWindow = window.open(`${window.location.origin}/auth/login`, 'login', 'width=600,height=400');
-
-		const handleLogin = event => {
-			loginWindow.close();
-			$session.user = event.data.user;
-			window.removeEventListener('message', handleLogin);
-		};
-
-		window.addEventListener('message', handleLogin);
-	}
-
 	async function fork(intentWasSave) {
 		saving = true;
 
@@ -218,7 +206,7 @@ export default app;` });
 		{#if $session.user}
 			<UserMenu/>
 		{:else}
-			<button class="icon" on:click={login}>
+			<button class="icon" on:click|preventDefault={login}>
 				<Icon name="log-in" />
 				<span>&nbsp;Log in to save</span>
 			</button>
diff --git a/site/src/routes/repl/archive.json.js b/site/src/routes/repl/archive.json.js
deleted file mode 100644
index 7c64b345cb..0000000000
--- a/site/src/routes/repl/archive.json.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import send from '@polka/send';
-import { query } from '../../utils/db';
-import { isUser } from '../../backend/auth';
-
-export async function get(req, res) {
-	const user = await isUser(req, res);
-	if (!user) return; // response already sent
-
-	const offset = req.params.offset || 0;
-	const rows = await query(`
-		select g.uid, g.name, coalesce(g.updated_at, g.created_at) as updated_at
-		from gists g
-		where g.user_id = $1
-		order by g.updated_at desc, g.created_at desc
-		limit 100
-		offset $2
-	`, [user.id, offset]);
-
-	send(res, 200, rows);
-}
diff --git a/site/src/routes/repls/index.json.js b/site/src/routes/repls/index.json.js
deleted file mode 100644
index 7c64b345cb..0000000000
--- a/site/src/routes/repls/index.json.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import send from '@polka/send';
-import { query } from '../../utils/db';
-import { isUser } from '../../backend/auth';
-
-export async function get(req, res) {
-	const user = await isUser(req, res);
-	if (!user) return; // response already sent
-
-	const offset = req.params.offset || 0;
-	const rows = await query(`
-		select g.uid, g.name, coalesce(g.updated_at, g.created_at) as updated_at
-		from gists g
-		where g.user_id = $1
-		order by g.updated_at desc, g.created_at desc
-		limit 100
-		offset $2
-	`, [user.id, offset]);
-
-	send(res, 200, rows);
-}
diff --git a/site/src/routes/repls/index.svelte b/site/src/routes/repls/index.svelte
deleted file mode 100644
index 7a64787c8e..0000000000
--- a/site/src/routes/repls/index.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<!-- TODO we need to be able to fetch the data in preload -->
-
-<script context="module">
-	export async function preload() {
-		const r = await this.fetch('repls.json');
-
-		return {
-			list: await r.json()
-		};
-	}
-</script>
-
-<script>
-	export let list;
-</script>
\ No newline at end of file

From b4509c755f046c53202c4f0f38209b5d5dcabcc3 Mon Sep 17 00:00:00 2001
From: Richard Harris <richard.a.harris@gmail.com>
Date: Mon, 19 Aug 2019 08:18:05 -0400
Subject: [PATCH 4/4] remove hyphens from UIDs

---
 site/src/routes/apps/index.json.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/site/src/routes/apps/index.json.js b/site/src/routes/apps/index.json.js
index 5c7b233975..dcc2205ee9 100644
--- a/site/src/routes/apps/index.json.js
+++ b/site/src/routes/apps/index.json.js
@@ -13,6 +13,10 @@ export async function get(req, res) {
 			offset $2
 		`, [req.user.id, offset]);
 
+		rows.forEach(row => {
+			row.uid = row.uid.replace(/-/g, '');
+		});
+
 		send(res, 200, rows);
 	} else {
 		send(res, 401);