start building UI for saved REPLs

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) {

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" />

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);
+}

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>