Improve UI

src/lib/index.ts

···
-// place files you want to import through the `$lib` alias in this folder.

src/routes/+layout.svelte

···
 </svelte:head>
 
 {@render children?.()}
+
+<style>
+	:global {
+		@import "~/styles/reset.css";
+		@import "~/styles/theme.css";
+	}
+</style>

src/routes/~/+layout.svelte

···
 </script>
 
 <header class="header">
-	<h1><a href="/~/">hello, {data.name}</a></h1>
-	<button onclick={logOut}>log out</button>
+	<h1><a href="/~/">athost</a></h1>
+	<button popovertarget="menu">menu</button>
+	<div id="menu" class="menu" popover>
+		<p>hello, {data.name}</p>
+		<button onclick={logOut}>log out</button>
+	</div>
 </header>
 
 <div class="body">

src/routes/~/+layout.ts

···
 export const load: LayoutLoad = async () => {
 	try {
 		const did = localStorage.getItem("did") as any;
-		const session = await getSession(did, { allowStale: true });
+		const session = await getSession(did);
 
 		const handler = new OAuthUserAgent(session);
 		const rpc = new Client({ handler });
···
 
 		if (isXRPCErrorPayload(data)) throw new Error("couldn't load profile");
 
-		return { session, did, name: data.displayName };
+		return { session, pds: session.info.aud, did, name: data.displayName };
 	} catch (e) {
 		console.error(e);
 		redirect(303, "/");

src/routes/~/+page.svelte

···
 		const form = e.currentTarget;
 		const formdata = new FormData(e.currentTarget);
 
-		const name = formdata.get("name");
-		if (typeof name !== "string") throw new Error("invalid name");
+		const rkey = formdata.get("rkey");
+		if (typeof rkey !== "string") throw new Error("invalid rkey");
 
 		const record = {
 			assets: [],
···
 		};
 
 		await rpc.post("com.atproto.repo.createRecord", {
-			input: { repo: data.did, collection: "com.jakelazaroff.test", rkey: name, record },
+			input: { repo: data.did, collection: "com.jakelazaroff.test", rkey, record },
 		});
 		await invalidate("collection:com.jakelazaroff.test");
 		form.reset();
···
 </script>
 
 <form onsubmit={createWebsite}>
-	<input type="text" name="name" minlength={1} maxlength={512} pattern="[A-Za-z0-9.\-]+" />
+	<input type="text" name="rkey" minlength={1} maxlength={512} pattern="[A-Za-z0-9.\-]+" />
 	<button>create</button>
 </form>
 

src/routes/~/sites/[name]/+page.svelte

···
 <script lang="ts">
-	import { invalidate } from "$app/navigation";
+	import { goto, invalidate } from "$app/navigation";
 
 	import type {} from "@atcute/atproto";
 	import { isXRPCErrorPayload } from "@atcute/client";
···
 
 	const rpc = client(data.session);
 
-	async function deleteWebsite(rkey: string) {
+	async function deleteBundle(e: SubmitEvent & { currentTarget: HTMLFormElement }) {
+		e.preventDefault();
+		const form = e.currentTarget;
+		const formdata = new FormData(form);
+
+		const rkey = formdata.get("rkey");
+		if (typeof rkey !== "string") throw new Error("invalid rkey");
+
 		await rpc.post("com.atproto.repo.deleteRecord", {
 			input: { repo: data.did, collection: "com.jakelazaroff.test", rkey },
 		});
+		goto("/~/");
 	}
 
 	async function deployBundle(e: SubmitEvent & { currentTarget: HTMLFormElement }) {
···
 		const form = e.currentTarget;
 		const formdata = new FormData(form);
 
-		const name = formdata.get("name");
-		if (typeof name !== "string") throw new Error("invalid name");
+		const rkey = formdata.get("rkey");
+		if (typeof rkey !== "string") throw new Error("invalid rkey");
+
+		let description = formdata.get("description");
+		if (typeof description !== "string" || !description) description = "Uploaded on website";
 
 		const files = formdata.getAll("files");
 		const assets: { path: string; file: any }[] = [];
···
 			});
 		}
 
-		const record = { assets, createdAt: new Date().toISOString() };
+		const record = { description, assets, createdAt: new Date().toISOString() };
 		await rpc.post("com.atproto.repo.putRecord", {
-			input: { repo: data.did, collection: "com.jakelazaroff.test", rkey: name, record },
+			input: { repo: data.did, collection: "com.jakelazaroff.test", rkey, record },
 		});
 		if (isXRPCErrorPayload(data)) throw new Error("couldn't deploy");
+
+		invalidate(`rkey:${rkey}`);
 	}
 </script>
 
 <header class="header">
 	<h2>{params.name}</h2>
-	<button onclick={() => deleteWebsite(params.name)}>delete</button>
 </header>
 
-<ul>
-	{#each data.record.value.assets as asset}
-		<li>{asset.path}</li>
-	{/each}
-</ul>
+<details>
+	<summary>
+		<span>{data.record.value.description || data.record.cid}</span>
+		<time>{data.record.value.createdAt}</time>
+	</summary>
+	<ul>
+		{#each data.record.value.assets as asset}
+			<li>
+				<span>{asset.path}</span>
+				<a
+					target="_blank"
+					href="{data.pds}xrpc/com.atproto.sync.getBlob?did={data.did}&cid={asset.file.ref.$link}"
+					>open</a
+				>
+			</li>
+		{/each}
+	</ul>
+</details>
 
 <form onsubmit={deployBundle}>
-	<input type="hidden" name="name" value={params.name} />
+	<input type="hidden" name="rkey" value={params.name} />
+	<input name="description" />
 	<input type="file" name="files" />
 	<button>upload</button>
 </form>
+
+<form onsubmit={deleteBundle}>
+	<input name="rkey" pattern={params.name.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")} />
+	<button>delete</button>
+</form>

src/routes/~/sites/[name]/+page.ts

···
 configure();
 
 export const load: PageLoad = async ({ parent, params, depends }) => {
-	depends("collection:com.jakelazaroff.test");
+	depends(`rkey:${params.name}`);
 
 	try {
 		const { did, session } = await parent();

src/styles/reset.css

···
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+
+* {
+	margin: 0;
+	padding: 0;
+}
+
+html {
+	scrollbar-gutter: stable;
+}
+
+body {
+	line-height: 1.5;
+}
+
+:where(img, picture, video, canvas, svg) {
+	display: block;
+	max-inline-size: 100%;
+}
+
+:where(input, button, textarea, select) {
+	font: inherit;
+	letter-spacing: inherit;
+	word-spacing: inherit;
+	color: currentColor;
+}
+
+:where(p, h1, h2, h3, h4, h5, h6) {
+	overflow-wrap: break-word;
+}
+
+:where(ol, ul) {
+	list-style: none;
+}
+
+:not([class]) {
+	&:where(h1, h2, h3, h4, h5, h6) {
+		margin-block: 0.75em;
+		line-height: 1.25;
+		text-wrap: balance;
+		letter-spacing: -0.05ch;
+	}
+
+	&:where(p, ol, ul) {
+		margin-block: 1em;
+	}
+
+	&:where(ol, ul) {
+		padding-inline-start: 1.5em;
+		list-style: revert;
+	}
+
+	&:where(li) {
+		margin-block: 0.5em;
+	}
+}

src/styles/theme.css

···
+@font-face {
+	font-family: "Supreme";
+	src: url("./supreme-variable.woff2") format("woff2");
+	font-weight: 100 1000;
+}
+
+:root {
+	font-family: "Supreme", sans-serif;
+}