Add disable attribute for no permission buttons and shorten query param names

web-app/src/lib/components/MarkdownEditor.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import { deserialize, applyAction } from "$app/forms";
   import { textareaScrollTop, previewContent } from "$lib/runes.svelte";
+  import LoadingSpinner from "$lib/components/LoadingSpinner.svelte";
+  import { LOADING_DELAY } from "$lib/utils";
 
   const {
     apiPrefix,
@@ -10,6 +12,8 @@
   }: { apiPrefix: string; label: string; name: string; content: string } = $props();
 
   let mainContentTextarea: HTMLTextAreaElement;
+  let loadingDelay: number;
+  let pasting = $state(false);
 
   const updateScrollPercentage = () => {
     const { scrollTop, scrollHeight, clientHeight } = mainContentTextarea;
@@ -28,6 +32,8 @@
 
     if (!fileObject) return;
 
+    loadingDelay = window.setTimeout(() => (pasting = true), LOADING_DELAY);
+
     const formData = new FormData();
     formData.append("file", fileObject);
 
@@ -48,20 +54,29 @@
       const target = event.target as HTMLTextAreaElement;
       const markdownToInsert = `![](${fileUrl})`;
       const cursorPosition = target.selectionStart;
-      const newContent = target.value.slice(0, target.selectionStart) + markdownToInsert;
-      target.value.slice(target.selectionStart);
+      const newContent =
+        target.value.slice(0, cursorPosition) +
+        markdownToInsert +
+        target.value.slice(cursorPosition);
 
+      target.value = newContent;
       previewContent.value = newContent;
 
       const newCursorPosition = cursorPosition + markdownToInsert.length;
       target.setSelectionRange(newCursorPosition, newCursorPosition);
       target.focus();
-    } else {
-      return;
     }
+
+    window.clearTimeout(loadingDelay);
+    pasting = false;
+    return;
   };
 </script>
 
+{#if pasting}
+  <LoadingSpinner />
+{/if}
+
 <label>
   {label}:
   <textarea

web-app/src/lib/components/SuccessOrError.svelte

@@ -3,11 +3,39 @@
 </script>
 
 {#if success}
-  <p class="toast success">{message}</p>
+  <p class="toast success">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 20 20"
+      fill="currentColor"
+      width="20"
+      height="20"
+    >
+      <path
+        fill-rule="evenodd"
+        d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
+        clip-rule="evenodd"
+      ></path>
+    </svg>
+    {message}
+  </p>
 {/if}
 
 {#if success === false}
-  <p class="toast error">{message}</p>
+  <p class="toast error">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 20 20"
+      fill="currentColor"
+      width="20"
+      height="20"
+    >
+      <path
+        d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"
+      ></path>
+    </svg>
+    {message}
+  </p>
 {/if}
 
 <style>