heavylifting

breaking the trend to say that i fully let AI do the work here im not touching Shit

lowk idek how this thing works. There was an initial different style for the paste pad,

 but idk man thats what you get for AI works. you dont know everything.
 You dont need to.

static/js/pastepad.js

@@ -0,0 +1,198 @@
+document.addEventListener("DOMContentLoaded", () => {
+  // --- DOM Elements ---
+  const elements = {
+    nameInput: document.getElementById("n"),
+    contentInput: document.getElementById("pc"),
+    saveBtn: document.getElementById("s"),
+    listDiv: document.getElementById("list"),
+  };
+
+  // --- State Management ---
+  const state = {
+    isEditMode: false,
+  };
+
+  // --- API Interactions ---
+  const api = {
+    async getPastes() {
+      const res = await fetch("/api/pastepad");
+      if (!res.ok) throw new Error("Failed to fetch pastes");
+      return res.json();
+    },
+
+    async getPaste(name) {
+      const res = await fetch(`/api/pastepad/${name}`);
+      if (!res.ok) throw new Error("Failed to fetch paste");
+      return res.json();
+    },
+
+    async createPaste(payload) {
+      const res = await fetch("/api/pastepad", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload),
+      });
+      if (!res.ok) {
+        const err = await res.json();
+        throw new Error(err.detail || "Failed to create paste");
+      }
+      return res.json();
+    },
+
+    async updatePaste(name, payload) {
+      const res = await fetch(`/api/pastepad/${name}`, {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload),
+      });
+      if (!res.ok) {
+        const err = await res.json();
+        throw new Error(err.detail || "Failed to update paste");
+      }
+      return res.json();
+    },
+
+    async deletePaste(name) {
+      const res = await fetch(`/api/pastepad/${name}`, { method: "DELETE" });
+      if (!res.ok) throw new Error("Failed to delete paste");
+    },
+  };
+
+  // --- UI Functions ---
+  function escapeHtml(text) {
+    if (!text) return text;
+    return text
+      .replace(/&/g, "&")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;")
+      .replace(/'/g, "&#039;");
+  }
+
+  function renderPasteItem(p) {
+    const safeName = escapeHtml(p.name);
+    const safeContent = escapeHtml(p.content);
+    return `
+            <div class="paste-item card">
+                <div class="paste-header">
+                    <strong>${safeName}</strong>
+                    <div class="actions">
+                        <button onclick="editPaste('${safeName}')" class="btn-sm">Edit</button>
+                        <a href="/api/pastepad/${safeName}/raw" target="_blank" class="btn-sm">Raw</a>
+                        <button onclick="deletePaste('${safeName}')" class="btn-sm btn-danger">Delete</button>
+                    </div>
+                </div>
+                <pre>${safeContent}</pre>
+            </div>
+        `;
+  }
+
+  async function loadPastes() {
+    try {
+      const pastes = await api.getPastes();
+      elements.listDiv.innerHTML = pastes.map(renderPasteItem).join("");
+    } catch (e) {
+      console.error(e);
+      elements.listDiv.innerHTML = `<p style="color: var(--error-color)">Error loading pastes: ${e.message}</p>`;
+    }
+  }
+
+  function setEditMode(isEdit) {
+    state.isEditMode = isEdit;
+    const { nameInput, contentInput, saveBtn } = elements;
+
+    if (isEdit) {
+      nameInput.readOnly = true;
+      nameInput.classList.add("disabled");
+      saveBtn.textContent = "Update Paste";
+      saveBtn.dataset.mode = "update";
+
+      if (!document.getElementById("cancelBtn")) {
+        const cancelBtn = document.createElement("button");
+        cancelBtn.id = "cancelBtn";
+        cancelBtn.textContent = "Cancel";
+        cancelBtn.className = "btn btn-secondary";
+        cancelBtn.onclick = resetForm;
+        saveBtn.after(cancelBtn);
+      }
+    } else {
+      nameInput.value = "";
+      contentInput.value = "";
+      nameInput.readOnly = false;
+      nameInput.classList.remove("disabled");
+      saveBtn.textContent = "Save Paste";
+      saveBtn.dataset.mode = "create";
+      const c = document.getElementById("cancelBtn");
+      if (c) c.remove();
+    }
+  }
+
+  function resetForm() {
+    setEditMode(false);
+    const url = new URL(window.location);
+    url.searchParams.delete("name");
+    window.history.pushState({}, "", url);
+  }
+
+  async function handleSave() {
+    const content = elements.contentInput.value;
+    if (!content) return;
+
+    const name = elements.nameInput.value;
+    const payload = { content };
+    if (name) payload.name = name;
+
+    try {
+      if (state.isEditMode) {
+        await api.updatePaste(name, payload);
+      } else {
+        await api.createPaste(payload);
+      }
+      resetForm();
+      loadPastes();
+    } catch (e) {
+      alert("Error: " + e.message);
+    }
+  }
+
+  // --- Initialization & Event Listeners ---
+  elements.saveBtn.addEventListener("click", handleSave);
+
+  // Global handlers for inline onclicks
+  window.editPaste = async (name) => {
+    const url = new URL(window.location);
+    url.searchParams.set("name", name);
+    window.history.pushState({}, "", url);
+
+    try {
+      const data = await api.getPaste(name);
+      elements.nameInput.value = data.name;
+      elements.contentInput.value = data.content;
+      setEditMode(true);
+      window.scrollTo({ top: 0, behavior: "smooth" });
+    } catch (e) {
+      console.error(e);
+      alert("Could not load paste for editing");
+    }
+  };
+
+  window.deletePaste = async (name) => {
+    if (!confirm("Delete " + name + "?")) return;
+    try {
+      await api.deletePaste(name);
+      loadPastes();
+      if (elements.nameInput.value === name) resetForm();
+    } catch (e) {
+      alert("Error deleting paste: " + e.message);
+    }
+  };
+
+  // Check URL for edit mode on load
+  const params = new URLSearchParams(window.location.search);
+  const nameToEdit = params.get("name");
+  if (nameToEdit) {
+    window.editPaste(nameToEdit);
+  }
+
+  loadPastes();
+});