add: taken slug check

app/public/app.js

@@ -137,3 +137,34 @@ globalThis.tab_preview = async () => {
     document.getElementById("editor_tab_button").classList.add("camo");
     document.getElementById("preview_tab_button").classList.remove("camo");
 };
+
+let exists_timeout = null;
+globalThis.check_exists_input = (e) => {
+    if (exists_timeout) {
+        clearTimeout(exists_timeout);
+    }
+
+    exists_timeout = setTimeout(async () => {
+        if (e.target.value.length < 2 || e.target.value.length > 32) {
+            e.target.setCustomValidity("");
+            e.target.removeAttribute("data-invalid");
+            e.target.reportValidity();
+            return;
+        }
+
+        const exists = (
+            await (await fetch(`/api/v1/entries/${e.target.value}`)).json()
+        ).payload;
+
+        console.log(exists);
+        if (exists) {
+            e.target.setCustomValidity("Slug is already in use");
+            e.target.setAttribute("data-invalid", "true");
+        } else {
+            e.target.setCustomValidity("");
+            e.target.removeAttribute("data-invalid");
+        }
+
+        e.target.reportValidity();
+    }, 1000);
+};

app/public/style.css

@@ -158,7 +158,7 @@ video {
 
 /* button */
 .button {
-    --h: 35.2px;
+    --h: 36px;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -171,11 +171,11 @@ video {
     border: none;
     width: max-content;
     height: var(--h);
-    min-height: var(--h);
-    max-height: var(--h);
+    line-height: var(--h);
     transition: background 0.15s;
     text-decoration: none !important;
     user-select: none;
+    appearance: none;
 }
 
 .button:hover {
@@ -193,17 +193,19 @@ video {
 
 /* input */
 input {
-    --h: 35.2px;
+    --h: 36px;
     padding: var(--pad-2) var(--pad-4);
     background: var(--color-raised);
     color: var(--color-text);
     outline: none;
     border: none;
     width: max-content;
-    transition: background 0.15s;
+    transition:
+        background 0.15s,
+        border 0.15s;
     height: var(--h);
-    min-height: var(--h);
-    max-height: var(--h);
+    line-height: var(--h);
+    border-left: solid 0px transparent;
 }
 
 input:focus {
@@ -212,6 +214,11 @@ input:focus {
     background: var(--color-super-raised);
 }
 
+input:user-invalid,
+input[data-invalid] {
+    border-left: inset 5px var(--color-red);
+}
+
 /* typo */
 p {
     margin-bottom: var(--pad-4);

app/templates_src/edit.lisp

@@ -46,6 +46,7 @@
             ("type" "text")
             ("minlength" "2")
             ("name" "new_slug")
+            ("oninput" "check_exists_input(event)")
             ("placeholder" "New url")))
     (div
         ("class" "w-full flex justify-between gap-2")

app/templates_src/index.lisp

@@ -43,6 +43,7 @@
             ("minlength" "2")
             ("maxlength" "32")
             ("name" "slug")
+            ("oninput" "check_exists_input(event)")
             ("placeholder" "Custom url"))))
 (text "{{ components::footer() }}")