From 667638a9cee04d623175a563bf09b92281907915 Mon Sep 17 00:00:00 2001
From: imnyang <me@imnya.ng>
Date: Thu, 12 Mar 2026 18:44:16 +0900
Subject: [PATCH] improve frontend

---
 config.toml            |   2 +-
 src/assets/editor.html | 280 ++++++++++++++++++++++++++++++++++++++---
 2 files changed, 262 insertions(+), 20 deletions(-)
diff --git a/config.toml b/config.toml
index 8dc4573..054896a 100644
--- a/config.toml
+++ b/config.toml
@@ -11,5 +11,5 @@ port = 8000
 # b, kb, mb, gb, tb
 #    kib, mib, gib, tib
 max_size = "10MB"
-extension_whitelist = [".docx", ".md", ".json", ".rs"]
+# extension_whitelist = [".docx", ".md", ".json", ".rs"]
 block_binary = true
diff --git a/src/assets/editor.html b/src/assets/editor.html
index 1671280..21e9e77 100644
--- a/src/assets/editor.html
+++ b/src/assets/editor.html
@@ -4,6 +4,7 @@
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>paste</title>
     <style>
         @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap");
 
@@ -16,10 +17,12 @@
 
         .container {
             height: 100vh;
+            display: flex;
+            flex-direction: column;
         }
 
         #editor {
-            height: 100%;
+            flex: 1;
         }
 
         .cm-editor {
@@ -29,6 +32,8 @@
         header {
             display: flex;
             align-items: center;
+            justify-content: space-between;
+            padding: 4px 8px;
         }
 
         header ul {
@@ -37,6 +42,20 @@
             gap: 10px;
             margin: 0;
             padding: 0;
+            align-items: center;
+            flex-wrap: wrap;
+        }
+
+        header li {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+
+        header button,
+        header select,
+        header input {
+            font: inherit;
         }
 
         header button {
@@ -47,6 +66,31 @@
             -moz-user-select: none;
             -webkit-user-select: none;
         }
+
+        header button:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        header select,
+        header input {
+            border: none;
+            outline: none;
+            background: transparent;
+            min-width: 0;
+        }
+
+        header input {
+            width: 4ch;
+        }
+
+        footer {
+            padding: 0 8px 8px;
+        }
+
+        footer p {
+            margin: 0;
+        }
     </style>
 </head>
 
@@ -54,8 +98,33 @@
     <div class="container">
         <header>
             <ul>
-                <li><button>[ new ]</button></li>
-                <li><button>[ save ]</button></li>
+                <li><button id="new-button" type="button">[ new ]</button></li>
+                <li><button id="save-button" type="button">[ save ]</button></li>
+            </ul>
+            <ul>
+                <li>
+                    <label for="language-select">[ lang ]</label>
+                    <select id="language-select">
+                        <option value="plain">plain text</option>
+                        <option value="markdown">markdown</option>
+                        <option value="rust">rust</option>
+                        <option value="javascript">javascript</option>
+                        <option value="typescript">typescript</option>
+                        <option value="json">json</option>
+                        <option value="html">html</option>
+                        <option value="css">css</option>
+                        <option value="python">python</option>
+                        <option value="sql">sql</option>
+                        <option value="yaml">yaml</option>
+                        <option value="toml">toml</option>
+                    </select>
+                </li>
+                <li>
+                    <label for="extension-input">[ ext ]</label>
+                    <span>.</span>
+                    <input id="extension-input" type="text" inputmode="text" autocomplete="off" spellcheck="false"
+                        placeholder="txt" />
+                </li>
             </ul>
         </header>
         <div id="editor"></div>
@@ -67,63 +136,236 @@
     <script id="initial-data" type="text/plain">$%{defaultText}%$</script>
     <script type="module">
         import { basicSetup, EditorView } from "https://esm.sh/codemirror";
+        import { Compartment } from "https://esm.sh/@codemirror/state";
+        import { StreamLanguage } from "https://esm.sh/@codemirror/language";
+        import { markdown } from "https://esm.sh/@codemirror/lang-markdown";
+        import { javascript } from "https://esm.sh/@codemirror/lang-javascript";
+        import { json } from "https://esm.sh/@codemirror/lang-json";
+        import { html } from "https://esm.sh/@codemirror/lang-html";
+        import { css } from "https://esm.sh/@codemirror/lang-css";
+        import { python } from "https://esm.sh/@codemirror/lang-python";
+        import { rust } from "https://esm.sh/@codemirror/lang-rust";
+        import { sql } from "https://esm.sh/@codemirror/lang-sql";
+        import { yaml } from "https://esm.sh/@codemirror/lang-yaml";
+        import { toml } from "https://esm.sh/@codemirror/legacy-modes/mode/toml";
         import {
-            CodeMirror,
             vim,
             Vim,
-            getCM,
         } from "https://esm.sh/@replit/codemirror-vim";
 
-        let initialDoc =
-            document.getElementById("initial-data").textContent;
+        const initialData = document.getElementById("initial-data");
+        const languageSelect = document.getElementById("language-select");
+        const extensionInput = document.getElementById("extension-input");
+        const saveButton = document.getElementById("save-button");
+        const newButton = document.getElementById("new-button");
+
+        const languageCompartment = new Compartment();
+
+        const LANGUAGE_PRESETS = {
+            plain: {
+                extension: ".txt",
+                language: () => [],
+            },
+            markdown: {
+                extension: ".md",
+                language: () => markdown(),
+            },
+            rust: {
+                extension: ".rs",
+                language: () => rust(),
+            },
+            javascript: {
+                extension: ".js",
+                language: () => javascript(),
+            },
+            typescript: {
+                extension: ".ts",
+                language: () => javascript({ typescript: true }),
+            },
+            json: {
+                extension: ".json",
+                language: () => json(),
+            },
+            html: {
+                extension: ".html",
+                language: () => html(),
+            },
+            css: {
+                extension: ".css",
+                language: () => css(),
+            },
+            python: {
+                extension: ".py",
+                language: () => python(),
+            },
+            sql: {
+                extension: ".sql",
+                language: () => sql(),
+            },
+            yaml: {
+                extension: ".yml",
+                language: () => yaml(),
+            },
+            toml: {
+                extension: ".toml",
+                language: () => StreamLanguage.define(toml),
+            },
+        };
+
+        const EXTENSION_LANGUAGE_MAP = new Map([
+            [".txt", "plain"],
+            [".md", "markdown"],
+            [".markdown", "markdown"],
+            [".rs", "rust"],
+            [".js", "javascript"],
+            [".ts", "typescript"],
+            [".json", "json"],
+            [".html", "html"],
+            [".htm", "html"],
+            [".css", "css"],
+            [".py", "python"],
+            [".sql", "sql"],
+            [".yaml", "yaml"],
+            [".yml", "yaml"],
+            [".toml", "toml"],
+        ]);
+
+        let initialDoc = initialData.textContent;
+        let initialExtension = ".txt";
+        let lastSuggestedExtension = ".txt";
+
+        function normalizeExtension(value, fallback = ".txt") {
+            const cleaned = value
+                .trim()
+                .toLowerCase()
+                .replace(/^\.+/, "")
+                .replace(/[^a-z0-9_+-]/g, "");
+
+            if (!cleaned) {
+                return fallback;
+            }
+
+            return `.${cleaned}`;
+        }
+
+        function getPathExtension() {
+            const path = decodeURIComponent(window.location.pathname || "/");
+            const trimmed = path.replace(/^\/+/, "");
+            const match = trimmed.match(/(\.[^.\/]+)$/);
+
+            return match ? match[1].toLowerCase() : "";
+        }
+
+        function isDirty() {
+            const currentContent = editor.state.doc.toString();
+            const currentExtension = normalizeExtension(extensionInput.value);
+            return currentContent !== initialDoc || currentExtension !== initialExtension;
+        }
+
+        function refreshSaveState() {
+            saveButton.disabled = !isDirty();
+        }
+
+        function applyLanguagePreset(languageKey) {
+            const preset = LANGUAGE_PRESETS[languageKey] ?? LANGUAGE_PRESETS.plain;
+            const currentExtension = normalizeExtension(extensionInput.value, "");
+
+            editor.dispatch({
+                effects: languageCompartment.reconfigure(preset.language()),
+            });
+
+            if (!currentExtension || currentExtension === lastSuggestedExtension) {
+                extensionInput.value = preset.extension.slice(1);
+            }
+
+            lastSuggestedExtension = preset.extension;
+            refreshSaveState();
+        }
 
         let editor = new EditorView({
             doc: initialDoc,
             extensions: [
+                languageCompartment.of([]),
                 vim({ status: true }),
                 basicSetup,
+                EditorView.updateListener.of((update) => {
+                    if (update.docChanged) {
+                        refreshSaveState();
+                    }
+                }),
             ],
             parent: document.querySelector("#editor"),
         });
 
+        const inferredExtension = getPathExtension() || ".txt";
+        const inferredLanguage = EXTENSION_LANGUAGE_MAP.get(inferredExtension) ?? "plain";
+
+        languageSelect.value = inferredLanguage;
+        extensionInput.value = inferredExtension.slice(1);
+        initialExtension = inferredExtension;
+        lastSuggestedExtension = inferredExtension;
+        applyLanguagePreset(inferredLanguage);
+
         async function saveFile() {
             const currentContent = editor.state.doc.toString();
+            const currentExtension = normalizeExtension(extensionInput.value);
 
-            if (currentContent === initialDoc) {
-                console.log("No changes detected.");
+            if (currentContent === initialDoc && currentExtension === initialExtension) {
                 return;
             }
 
             try {
-                const response = await fetch("/paste.txt", {
+                saveButton.disabled = true;
+
+                const response = await fetch(`/paste${currentExtension}`, {
                     method: "PUT",
                     body: currentContent,
                 });
 
                 if (response.ok) {
                     const resultText = await response.text();
-                    console.log("Server returned path:", resultText);
-                    window.history.pushState({}, "", resultText);
+                    const savedUrl = new URL(resultText, window.location.origin);
+
+                    window.history.pushState({}, "", `${savedUrl.pathname}${savedUrl.search}${savedUrl.hash}`);
                     initialDoc = currentContent;
+                    initialExtension = currentExtension;
                 } else {
-                    alert("Failed to save! Status: " + response.status);
+                    console.error("Save failed with status:", response.status);
                 }
             } catch (error) {
                 console.error("Save error:", error);
+            } finally {
+                refreshSaveState();
             }
         }
-        document.querySelectorAll("button").forEach((btn) => {
-            if (btn.textContent.includes("save")) {
-                btn.onclick = saveFile;
-            }
-            if (btn.textContent.includes("new")) {
-                btn.onclick = () => (window.location.href = "/");
+
+        saveButton.onclick = saveFile;
+        newButton.onclick = () => (window.location.href = "/");
+
+        languageSelect.addEventListener("change", (event) => {
+            applyLanguagePreset(event.target.value);
+        });
+
+        extensionInput.addEventListener("input", () => {
+            extensionInput.value = extensionInput.value
+                .toLowerCase()
+                .replace(/^\.+/, "")
+                .replace(/[^a-z0-9_+-]/g, "");
+            refreshSaveState();
+        });
+
+        window.addEventListener("keydown", (event) => {
+            if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "s") {
+                event.preventDefault();
+                saveFile();
             }
         });
 
         Vim.defineEx("write", "w", () => {
             saveFile();
         });
+
+        refreshSaveState();
     </script>
 </body>
 
