various improvements

static/css/catppuccin.css

@@ -0,0 +1 @@
+code.hljs{color:#cad3f5;background:#24273a}code .hljs-keyword{color:#c6a0f6}code .hljs-built_in{color:#ed8796}code .hljs-type{color:#eed49f}code .hljs-literal{color:#f5a97f}code .hljs-number{color:#f5a97f}code .hljs-operator{color:#91d7e3}code .hljs-punctuation{color:#b8c0e0}code .hljs-property{color:#8bd5ca}code .hljs-regexp{color:#f5bde6}code .hljs-string{color:#a6da95}code .hljs-char.escape_{color:#a6da95}code .hljs-subst{color:#a5adcb}code .hljs-symbol{color:#f0c6c6}code .hljs-variable{color:#c6a0f6}code .hljs-variable.language_{color:#c6a0f6}code .hljs-variable.constant_{color:#f5a97f}code .hljs-title{color:#8aadf4}code .hljs-title.class_{color:#eed49f}code .hljs-title.function_{color:#8aadf4}code .hljs-params{color:#cad3f5}code .hljs-comment{color:#939ab7}code .hljs-doctag{color:#ed8796}code .hljs-meta{color:#f5a97f}code .hljs-section{color:#8aadf4}code .hljs-tag{color:#8bd5ca}code .hljs-name{color:#c6a0f6}code .hljs-attr{color:#8aadf4}code .hljs-attribute{color:#a6da95}code .hljs-bullet{color:#8bd5ca}code .hljs-code{color:#a6da95}code .hljs-emphasis{color:#ed8796;font-style:italic}code .hljs-strong{color:#ed8796;font-weight:bold}code .hljs-formula{color:#8bd5ca}code .hljs-link{color:#7dc4e4;font-style:italic}code .hljs-quote{color:#a6da95;font-style:italic}code .hljs-selector-tag{color:#eed49f}code .hljs-selector-id{color:#8aadf4}code .hljs-selector-class{color:#8bd5ca}code .hljs-selector-attr{color:#c6a0f6}code .hljs-selector-pseudo{color:#8bd5ca}code .hljs-template-tag{color:#f0c6c6}code .hljs-template-variable{color:#f0c6c6}code .hljs-addition{color:#a6da95;background:rgba(166,218,149,.15)}code .hljs-deletion{color:#ed8796;background:rgba(237,135,150,.15)}

static/css/chat.css

@@ -1,10 +1,36 @@
+@font-face {
+	font-family: "Comic Code";
+	src: url(fonts/ComicCode-Regular.ttf);
+	font-weight: normal;
+}
+
+@font-face {
+	font-family: "Comic Code";
+	src: url(fonts/ComicCode-Bold.ttf);
+	font-weight: 700;
+}
+
+@font-face {
+	font-family: "Comic Code";
+	src: url(fonts/ComicCode-Italic.ttf);
+	font-weight: normal;
+	font-style: italic;
+}
+
+@font-face {
+	font-family: "Comic Code";
+	src: url(fonts/ComicCode-BoldItalic.ttf);
+	font-weight: 700;
+	font-style: italic;
+}
+
 * {
 	box-sizing: border-box;
 }
 
 html,
 body {
-	font-family: "Nata Sans", sans-serif;
+	font-family: "Lato", sans-serif;
 	font-size: 15px;
 	background: #181926;
 	color: #cad3f5;
@@ -67,7 +93,10 @@ body {
 	max-width: 700px;
 	min-width: 200px;
 	width: max-content;
-	padding-top: 22px;
+	padding-top: 28px;
+	background: #363a4f;
+	overflow: hidden;
+	flex-shrink: 0;
 }
 
 .message.user {
@@ -80,9 +109,10 @@ body {
 
 .message .role {
 	position: absolute;
-	line-height: 12px;
+	font-family: "Comic Code", ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Ubuntu Mono", "Roboto Mono", Menlo, Monaco, Consolas, monospace;
 	font-size: 12px;
-	top: 6px;
+	line-height: 12px;
+	top: 8px;
 	left: 6px;
 	padding-left: 20px;
 }
@@ -108,11 +138,15 @@ body {
 	background-image: url(icons/assistant.svg);
 }
 
+.message.assistant {
+	max-width: 800px;
+}
+
 .message .reasoning,
 .message .text {
 	display: block;
 	background: transparent;
-	padding: 6px 12px;
+	padding: 10px 12px;
 	width: 100%;
 }
 
@@ -125,16 +159,31 @@ body {
 	display: none;
 }
 
+.message div.text {
+	background: #24273a;
+}
+
+.message textarea.text {
+	background: #181926;
+}
+
+.message .reasoning-text {
+	--height: auto;
+	height: calc(var(--height) + 20px);
+	background: #1e2030;
+	border-radius: 6px;
+	transition: 150ms;
+	padding: 10px 12px;
+}
+
 .message:not(.expanded) .reasoning-text {
 	height: 0;
+	padding: 0 12px;
 	overflow: hidden;
 }
 
 .message.expanded .reasoning-text {
-	padding: 10px 12px;
-	background: #1e2030;
 	margin-top: 10px;
-	border-radius: 6px;
 }
 
 .message:not(.has-reasoning) .reasoning {
@@ -172,45 +221,12 @@ body {
 	transform: rotate(180deg);
 }
 
-.markdown p {
-	margin: 0;
-	margin-bottom: 14px;
-}
-
-.markdown p:last-child {
-	margin-bottom: 0;
-}
-
-textarea {
-	border: none;
-	resize: none;
-	outline: none;
-	color: inherit;
-	font: inherit;
-}
-
-#chat {
-	display: flex;
-	position: relative;
-	justify-content: center;
-	padding: 0 12px;
-	height: 240px;
-}
-
-#message {
-	border-bottom-left-radius: 0px;
-	border-bottom-right-radius: 0px;
-	width: 100%;
-	height: 100%;
-	padding: 14px 16px;
-}
-
 .message .options {
 	display: flex;
 	gap: 4px;
 	position: absolute;
 	top: 4px;
-	right: 4px;
+	right: 6px;
 	opacity: 0;
 	pointer-events: none;
 	transition: 150ms;
@@ -241,6 +257,34 @@ textarea {
 	content: ". . .";
 }
 
+#chat {
+	display: flex;
+	position: relative;
+	justify-content: center;
+	padding: 0 12px;
+	height: 240px;
+}
+
+#chat::after {
+	content: "";
+	position: absolute;
+	bottom: 0;
+	left: 12px;
+	right: 12px;
+	height: 36px;
+	background: #24273a;
+}
+
+#message {
+	border-bottom-left-radius: 0px;
+	border-bottom-right-radius: 0px;
+	width: 100%;
+	height: 100%;
+	padding: 14px 16px;
+	padding-bottom: 30px;
+}
+
+textarea,
 button,
 input,
 select {
@@ -248,6 +292,11 @@ select {
 	font: inherit;
 	color: inherit;
 	outline: none;
+	margin: 0;
+}
+
+textarea {
+	resize: none;
 }
 
 button {
@@ -266,12 +315,13 @@ select {
 
 #chat .options {
 	position: absolute;
-	bottom: 4px;
+	bottom: 6px;
 	left: 20px;
 	width: max-content;
 	display: flex;
 	align-items: center;
 	gap: 12px;
+	z-index: 10;
 }
 
 #chat .option {
@@ -293,9 +343,11 @@ select {
 .reasoning .toggle::after,
 #bottom,
 .message .role::before,
+#scrolling,
 #clear,
 #add,
 #send,
+.pre-copy,
 .message .copy,
 .message .edit,
 .message .delete,
@@ -308,10 +360,12 @@ select {
 	background-repeat: no-repeat;
 }
 
+.pre-copy,
 .message .copy {
 	background-image: url(icons/copy.svg);
 }
 
+.pre-copy.copied,
 .message .copy.copied {
 	background-image: url(icons/check.svg);
 }
@@ -377,6 +431,7 @@ label[for="temperature"] {
 	width: 28px;
 	height: 28px;
 	background-image: url(icons/send.svg);
+	z-index: 10;
 }
 
 #add {
@@ -385,6 +440,15 @@ label[for="temperature"] {
 	background-image: url(icons/add.svg);
 }
 
+#scrolling {
+	position: unset !important;
+	background-image: url(icons/screen-slash.svg);
+}
+
+#scrolling.on {
+	background-image: url(icons/screen.svg);
+}
+
 #clear {
 	position: unset !important;
 	background-image: url(icons/trash.svg);

static/css/icons/screen-slash.svg

@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+
+<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
+<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>

static/css/icons/screen.svg

@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+
+<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
+<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>

static/css/markdown.css

@@ -0,0 +1,199 @@
+.markdown {
+	font-size: 15px;
+	line-height: 23px;
+	color: #CAD3F5;
+	font-family: system-ui, sans-serif;
+}
+
+.markdown h1,
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+	font-weight: 700;
+	margin-top: 28px;
+	margin-bottom: 8px;
+}
+
+.markdown h1 {
+	font-size: 28px;
+	line-height: 34px;
+	border-bottom: 1px solid rgba(202, 211, 245, 0.15);
+	padding-bottom: 6px;
+}
+
+.markdown h2 {
+	font-size: 24px;
+	line-height: 30px;
+	border-bottom: 1px solid rgba(202, 211, 245, 0.1);
+	padding-bottom: 4px;
+}
+
+.markdown h3 {
+	font-size: 20px;
+	line-height: 26px;
+}
+
+.markdown h4 {
+	font-size: 17px;
+	line-height: 23px;
+	font-weight: 600;
+}
+
+.markdown h5 {
+	font-size: 15px;
+	line-height: 21px;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.5px;
+	opacity: 0.85;
+}
+
+.markdown h6 {
+	font-size: 14px;
+	line-height: 20px;
+	font-weight: 500;
+	opacity: 0.7;
+}
+
+.markdown a {
+	color: #8AADF4;
+	text-decoration: none;
+	font-weight: 500;
+	transition: color 150ms ease, text-decoration-color 150ms ease;
+}
+
+.markdown a:hover,
+.markdown a:focus {
+	color: #B7BDF8;
+	text-decoration: underline;
+	text-decoration-color: rgba(183, 189, 248, 0.6);
+}
+
+.markdown .image {
+	max-width: 100%;
+	border-radius: 6px;
+	margin: 12px auto;
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
+	background-position: center;
+	background-size: cover;
+	background-repeat: no-repeat;
+}
+
+.markdown blockquote {
+	padding: 10px 16px;
+	border-left: 4px solid #8AADF4;
+	background: rgba(138, 173, 244, 0.05);
+	color: #CAD3F5;
+	font-style: italic;
+	border-radius: 4px;
+}
+
+.markdown table {
+	width: 100%;
+	border-collapse: collapse;
+	margin: 16px 0;
+	font-size: 14px;
+}
+
+.markdown th,
+.markdown td {
+	border: 1px solid rgba(165, 173, 203, 0.15);
+	padding: 8px 12px;
+	text-align: left;
+}
+
+.markdown th {
+	background: rgba(165, 173, 203, 0.07);
+	/* subtle neutral tint */
+	font-weight: 600;
+	color: #CAD3F5;
+}
+
+.markdown tr:nth-child(even) td {
+	background: rgba(165, 173, 203, 0.03);
+	/* very soft zebra */
+}
+
+.markdown tr:hover td {
+	background: rgba(165, 173, 203, 0.05);
+	/* gentle hover */
+}
+
+.markdown code,
+.markdown pre {
+	font-family: "Comic Code", ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Ubuntu Mono", "Roboto Mono", Menlo, Monaco, Consolas, monospace;
+	font-size: 13px;
+}
+
+.markdown code {
+	background: #363a4f;
+	padding: 1px 4px;
+	border-radius: 3px;
+	margin: 0 1px;
+}
+
+.markdown pre {
+	background: #1e2030;
+	white-space: pre-wrap;
+	padding: 10px 12px;
+	border-radius: 6px;
+	line-height: 18px;
+	overflow: hidden;
+}
+
+.markdown pre code {
+	background: transparent;
+	padding: 0;
+	margin: 0;
+}
+
+.markdown .pre-header {
+	position: relative;
+	background: #363a4f;
+	padding: 8px 12px;
+	margin: -10px -12px;
+	margin-bottom: 10px;
+	font-size: 12px;
+	line-height: 14px;
+}
+
+.markdown .pre-copy {
+	position: absolute;
+	top: 6px;
+	right: 10px;
+	width: 18px;
+	height: 18px;
+	opacity: 0;
+	transition: 150ms;
+}
+
+.markdown pre:hover .pre-copy {
+	opacity: 1;
+}
+
+.markdown hr {
+	color: #5F6386;
+	margin: 25px 0;
+}
+
+.markdown ul,
+.markdown ol {
+	padding-left: 28px;
+}
+
+.markdown blockquote>*,
+.markdown td>*,
+.markdown th>*,
+.markdown>* {
+	margin: 0;
+	margin-bottom: 14px;
+}
+
+.markdown blockquote>*:last-child,
+.markdown td>*:last-child,
+.markdown th>*:last-child,
+.markdown>*:last-child {
+	margin-bottom: 0;
+}

static/index.html

@@ -6,9 +6,11 @@
 
 		<link rel="preconnect" href="https://fonts.googleapis.com" />
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-		<link href="https://fonts.googleapis.com/css2?family=Nata+Sans:wght@100..900&display=swap" rel="stylesheet" />
+		<link href="https://fonts.googleapis.com/css2?family=Lato:wght@100..900&display=swap" rel="stylesheet" />
 
-		<link href="chat.css" rel="stylesheet" />
+		<link href="css/catppuccin.css" rel="stylesheet" />
+		<link href="css/markdown.css" rel="stylesheet" />
+		<link href="css/chat.css" rel="stylesheet" />
 
 		<title>chat</title>
 	</head>
@@ -18,7 +20,7 @@
 			<div id="chat">
 				<button id="bottom" class="hidden" title="Scroll to bottom"></button>
 
-				<textarea id="message" placeholder="Type something..."></textarea>
+				<textarea id="message" placeholder="Type something..." autocomplete="off"></textarea>
 
 				<button id="add" title="Add message"></button>
 				<button id="send" title="Add message and start completion"></button>
@@ -47,6 +49,9 @@
 						<label for="temperature" title="Temperature (0 - 1)"></label>
 						<input id="temperature" type="number" min="0" max="1" step="0.05" value="0.85" />
 					</div>
+					<div class="option">
+						<button id="scrolling" title="Turn on auto-scrolling"></button>
+					</div>
 					<div class="option">
 						<button id="clear" title="Clear the entire chat"></button>
 					</div>
@@ -54,8 +59,11 @@
 			</div>
 		</div>
 
-		<script src="purify.min.js"></script>
-		<script src="marked.min.js"></script>
-		<script src="chat.js"></script>
+		<script src="lib/highlight.min.js"></script>
+		<script src="lib/marked.min.js"></script>
+		<script src="js/lib.js"></script>
+		<script src="js/markdown.js"></script>
+		<script src="js/dropdown.js"></script>
+		<script src="js/chat.js"></script>
 	</body>
 </html>

static/js/chat.js

@@ -9,29 +9,18 @@
 		$temperature = document.getElementById("temperature"),
 		$add = document.getElementById("add"),
 		$send = document.getElementById("send"),
+		$scrolling = document.getElementById("scrolling"),
 		$clear = document.getElementById("clear");
 
 	const messages = [];
 
-	function uid() {
-		return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
-	}
+	let autoScrolling = false, interacted = false;
 
-	function make(tag, ...classes) {
-		const el = document.createElement(tag);
+	function scroll(force = false) {
+		if (!autoScrolling && !force) {
+			return;
+		}
 
-		el.classList.add(...classes);
-
-		return el;
-	}
-
-	function render(markdown) {
-		return marked.parse(DOMPurify.sanitize(markdown), {
-			gfm: true,
-		});
-	}
-
-	function scroll() {
 		$messages.scroll({
 			top: $messages.scrollHeight + 200,
 			behavior: "smooth",
@@ -112,6 +101,16 @@
 
 			this.#_message.appendChild(this.#_edit);
 
+			this.#_edit.addEventListener("keydown", (event) => {
+				if (event.ctrlKey && event.key === "Enter") {
+					this.toggleEdit();
+				} else if (event.key === "Escape") {
+					this.#_edit.value = this.#text;
+
+					this.toggleEdit();
+				}
+			});
+
 			// message options
 			const _opts = make("div", "options");
 
@@ -160,12 +159,13 @@
 				this.delete();
 			});
 
+			// add to dom
 			$messages.appendChild(this.#_message);
 
 			scroll();
 		}
 
-		#render(only = false) {
+		#render(only = false, noScroll = false) {
 			if (!only || only === "role") {
 				this.#_role.textContent = this.#role;
 			}
@@ -178,21 +178,27 @@
 				} else {
 					this.#_message.classList.remove("has-reasoning");
 				}
+
+				this.#_reasoning.style.setProperty(
+					"--height",
+					`${this.#_reasoning.scrollHeight}px`,
+				);
 			}
 
 			if (!only || only === "text") {
 				this.#_text.innerHTML = render(this.#text);
 			}
 
-			scroll();
+			if (!noScroll) {
+				scroll();
+			}
 		}
 
 		#save() {
-			const data = messages.map((message) => message.getData(true));
-
-			console.log("save", data);
-
-			localStorage.setItem("messages", JSON.stringify(data));
+			storeValue(
+				"messages",
+				messages.map((message) => message.getData(true)),
+			);
 		}
 
 		getData(includeReasoning = false) {
@@ -263,7 +269,7 @@
 
 				this.setState(false);
 
-				this.#render();
+				this.#render(false, true);
 				this.#save();
 			}
 		}
@@ -275,13 +281,13 @@
 				return;
 			}
 
-			console.log("delete", index);
+			this.#_message.remove();
 
 			messages.splice(index, 1);
 
-			this.#_message.remove();
-
 			this.#save();
+
+			$messages.dispatchEvent(new Event("scroll"));
 		}
 	}
 
@@ -371,7 +377,7 @@
 		if (!models) {
 			alert("Failed to load models.");
 
-			return;
+			return [];
 		}
 
 		models.sort((a, b) => a.name > b.name);
@@ -386,24 +392,27 @@
 
 			$model.appendChild(el);
 		}
+
+		dropdown($model);
+
+		return models;
 	}
 
 	function restore(models) {
-		$role.value = localStorage.getItem("role") || "user";
-		$model.value = localStorage.getItem("model") || models[0].id;
-		$prompt.value = localStorage.getItem("prompt") || "normal";
-		$temperature.value = localStorage.getItem("temperature") || 0.85;
+		$role.value = loadValue("role", "user");
+		$model.value = loadValue("model", models[0].id);
+		$prompt.value = loadValue("prompt", "normal");
+		$temperature.value = loadValue("temperature", 0.85);
 
-		try {
-			JSON.parse(localStorage.getItem("messages") || "[]").forEach(
-				(message) =>
-					new Message(
-						message.role,
-						message.reasoning,
-						message.text,
-					),
-			);
-		} catch {}
+		if (loadValue("scrolling")) {
+			$scrolling.click();
+		}
+
+		loadValue("messages", []).forEach(
+			(message) => new Message(message.role, message.reasoning, message.text),
+		);
+
+		scroll(true);
 	}
 
 	function pushMessage() {
@@ -430,10 +439,9 @@
 	});
 
 	$bottom.addEventListener("click", () => {
-		$messages.scroll({
-			top: $messages.scrollHeight,
-			behavior: "smooth",
-		});
+		interacted = true;
+
+		scroll(true);
 	});
 
 	$role.addEventListener("change", () => {
@@ -457,6 +465,8 @@
 	});
 
 	$add.addEventListener("click", () => {
+		interacted = true;
+
 		pushMessage();
 	});
 
@@ -465,12 +475,32 @@
 			return;
 		}
 
-		for (const message of messages) {
-			message.delete();
+		interacted = true;
+
+		for (let x = messages.length - 1; x >= 0; x--) {
+			messages[x].delete();
 		}
 	});
 
+	$scrolling.addEventListener("click", () => {
+		interacted = true;
+
+		autoScrolling = !autoScrolling;
+
+		if (autoScrolling) {
+			$scrolling.title = "Turn off auto-scrolling";
+			$scrolling.classList.add("on");
+		} else {
+			$scrolling.title = "Turn on auto-scrolling";
+			$scrolling.classList.remove("on");
+		}
+
+		storeValue("scrolling", autoScrolling);
+	});
+
 	$send.addEventListener("click", () => {
+		interacted = true;
+
 		if (controller) {
 			controller.abort();
 
@@ -521,7 +551,7 @@
 					return;
 				}
 
-				console.log(chunk);
+				console.debug(chunk);
 
 				switch (chunk.type) {
 					case "reason":
@@ -547,5 +577,13 @@
 		$send.click();
 	});
 
+	addEventListener("wheel", () => {
+		interacted = true;
+	});
+
+	addEventListener("image-loaded", () => {
+		scroll(!interacted);
+	});
+
 	loadModels().then(restore);
 })();

static/js/dropdown.js

@@ -0,0 +1,123 @@
+(() => {
+	class Dropdown {
+		#_select;
+		#_dropdown;
+		#_selected;
+
+		#selected = false;
+		#options = [];
+
+		constructor(el) {
+			this.#_select = el;
+
+			this.#_select.querySelectorAll("option").forEach((option) => {
+				this.#options.push({
+					value: option.value,
+					label: option.textContent.trim(),
+				});
+			});
+
+			this.#build();
+
+			if (this.#options.length) {
+				this.#set(this.#options[0].value);
+			}
+		}
+
+		#build() {
+			// prepare and hide original select
+			this.#_select.style.display = "none";
+
+			const descriptor = Object.getOwnPropertyDescriptor(
+				HTMLSelectElement.prototype,
+				"value",
+			);
+
+			Object.defineProperty(this.#_select, "value", {
+				get: () => {
+					return descriptor.get.call(this.#_select);
+				},
+				set: (value) => {
+					descriptor.set.call(this.#_select, value);
+
+					this.#set(value);
+				},
+			});
+
+			// dropdown
+			this.#_dropdown = make("div", "dropdown");
+
+			this.#_dropdown.addEventListener("click", () => {
+				this.#_dropdown.classList.add("open");
+			});
+
+			// selected item
+			this.#_selected = make("div", "selected");
+
+			this.#_dropdown.appendChild(this.#_selected);
+
+			// option wrapper
+			const _options = make("div", "options");
+
+			this.#_dropdown.appendChild(_options);
+
+			// options
+			for (const option of this.#options) {
+				const _opt = make("div", "option");
+
+				_opt.textContent = option.label;
+
+				_opt.addEventListener("click", () => {
+					this.#set(option.value);
+				});
+
+				option.el = _opt;
+			}
+
+			// add to dom
+			this.#_select.after(this.#_dropdown);
+
+			this.#render();
+		}
+
+		#render() {
+			if (this.#selected === false) {
+				this.#_selected.textContent = "";
+
+				return;
+			}
+
+			const selection = this.#options[this.#selected];
+
+			this.#_selected.textContent = selection.label;
+		}
+
+		#set(value) {
+			console.log("value", value);
+
+			const index = this.#options.findIndex((option) => option.value === value);
+
+			if (this.#selected === index) {
+				return;
+			}
+
+			this.#selected = index !== -1 ? index : false;
+
+			this.#render();
+		}
+	}
+
+	document.body.addEventListener("click", (event) => {
+		const clicked = event.target.closest(".dropdown");
+
+		document.querySelectorAll(".dropdown").forEach((element) => {
+			if (element === clicked) {
+				return;
+			}
+
+			element.classList.remove("open");
+		});
+	});
+
+	window.dropdown = (el) => new Dropdown(el);
+})();

static/js/lib.js

@@ -0,0 +1,150 @@
+(() => {
+	const timeouts = new WeakMap(),
+		images = {};
+
+	marked.use({
+		async: false,
+		breaks: false,
+		gfm: true,
+		pedantic: false,
+
+		walkTokens: (token) => {
+			const { type, lang, text } = token;
+
+			if (type !== "code") {
+				return;
+			}
+
+			let code;
+
+			if (lang && hljs.getLanguage(lang)) {
+				code = hljs.highlight(text, {
+					language: lang,
+				});
+			} else {
+				code = hljs.highlightAuto(text);
+			}
+
+			token.escaped = true;
+			token.text = code.value;
+		},
+
+		renderer: {
+			code(code) {
+				const header = `<div class="pre-header">${escapeHtml(code.lang)}<button class="pre-copy" title="Copy code contents"></button></div>`;
+
+				return `<pre>${header}<code>${code.text}</code></pre>`;
+			},
+
+			image(image) {
+				const { href } = image;
+
+				const id = `i_${btoa(href).replace(/=/g, "")}`,
+					style = prepareImage(id, href) || "";
+
+				return `<div class="image ${id}" style="${style}"></div>`;
+			},
+		},
+	});
+
+	function prepareImage(id, href) {
+		if (href in images) {
+			return images[href];
+		}
+
+		images[href] = false;
+
+		const image = new Image();
+
+		image.addEventListener("load", () => {
+			const style = `aspect-ratio:${image.naturalWidth}/${image.naturalHeight};width:${image.naturalWidth}px;background-image:url(${href})`;
+
+			images[href] = style;
+
+			document.querySelectorAll(`.image.${id}`).forEach((img) => {
+				img.setAttribute("style", style);
+			});
+		});
+
+		image.addEventListener("error", () => {
+			console.error(`Failed to load image: ${href}`);
+		});
+
+		image.src = href;
+
+		return false;
+	}
+
+	document.body.addEventListener("click", (event) => {
+		const button = event.target,
+			header = button.closest(".pre-header"),
+			pre = header?.closest("pre"),
+			code = pre?.querySelector("code");
+
+		if (!code) {
+			return;
+		}
+
+		clearTimeout(timeouts.get(pre));
+
+		navigator.clipboard.writeText(code.textContent.trim());
+
+		button.classList.add("copied");
+
+		timeouts.set(
+			pre,
+			setTimeout(() => {
+				button.classList.remove("copied");
+			}, 1000),
+		);
+	});
+})();
+
+function storeValue(key, value) {
+	if (!value) {
+		localStorage.removeItem(key);
+
+		return;
+	}
+
+	localStorage.setItem(key, JSON.stringify(value));
+}
+
+function loadValue(key, fallback = false) {
+	const raw = localStorage.getItem(key);
+
+	if (!raw) {
+		return fallback;
+	}
+
+	try {
+		const value = JSON.parse(raw);
+
+		if (!value) {
+			throw new Error("no value");
+		}
+
+		return value;
+	} catch {}
+
+	return fallback;
+}
+
+function uid() {
+	return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+}
+
+function make(tag, ...classes) {
+	const el = document.createElement(tag);
+
+	el.classList.add(...classes);
+
+	return el;
+}
+
+function escapeHtml(text) {
+	return text
+		.replace(/&/g, "&amp;")
+		.replace(/</g, "&lt;")
+		.replace(/>/g, "&gt;");
+}

static/js/markdown.js

@@ -0,0 +1,107 @@
+(() => {
+	const timeouts = new WeakMap(),
+		images = {};
+
+	marked.use({
+		async: false,
+		breaks: false,
+		gfm: true,
+		pedantic: false,
+
+		walkTokens: (token) => {
+			const { type, lang, text } = token;
+
+			if (type !== "code") {
+				return;
+			}
+
+			let code;
+
+			if (lang && hljs.getLanguage(lang)) {
+				code = hljs.highlight(text, {
+					language: lang,
+				});
+			} else {
+				code = hljs.highlightAuto(text);
+			}
+
+			token.escaped = true;
+			token.text = code.value;
+		},
+
+		renderer: {
+			code(code) {
+				const header = `<div class="pre-header">${escapeHtml(code.lang)}<button class="pre-copy" title="Copy code contents"></button></div>`;
+
+				return `<pre>${header}<code>${code.text}</code></pre>`;
+			},
+
+			image(image) {
+				const { href } = image;
+
+				const id = `i_${btoa(href).replace(/=/g, "")}`,
+					style = prepareImage(id, href) || "";
+
+				return `<div class="image ${id}" style="${style}"></div>`;
+			},
+		},
+	});
+
+	function prepareImage(id, href) {
+		if (href in images) {
+			return images[href];
+		}
+
+		images[href] = false;
+
+		const image = new Image();
+
+		image.addEventListener("load", () => {
+			const style = `aspect-ratio:${image.naturalWidth}/${image.naturalHeight};width:${image.naturalWidth}px;background-image:url(${href})`;
+
+			images[href] = style;
+
+			document.querySelectorAll(`.image.${id}`).forEach((img) => {
+				img.setAttribute("style", style);
+			});
+
+			window.dispatchEvent(new Event("image-loaded"));
+		});
+
+		image.addEventListener("error", () => {
+			console.error(`Failed to load image: ${href}`);
+		});
+
+		image.src = href;
+
+		return false;
+	}
+
+	document.body.addEventListener("click", (event) => {
+		const button = event.target,
+			header = button.closest(".pre-header"),
+			pre = header?.closest("pre"),
+			code = pre?.querySelector("code");
+
+		if (!code) {
+			return;
+		}
+
+		clearTimeout(timeouts.get(pre));
+
+		navigator.clipboard.writeText(code.textContent.trim());
+
+		button.classList.add("copied");
+
+		timeouts.set(
+			pre,
+			setTimeout(() => {
+				button.classList.remove("copied");
+			}, 1000),
+		);
+	});
+
+	window.render = (markdown) => {
+		return marked.parse(markdown);
+	};
+})();