V0.3.4: Many admin UI bug fixes and improvements

This commit includes many bug fixes and improvements to the admin UI.
More errors are caught and displayed to the user. Submit buttons now
display a loading state while the request is being processed. Several
inconsistencies and style issues in the admin UI have been fixed. Image
upload inputs now have an accurate accept attribute, so tat users cannot
upload images that are unsupported. Finally, in development mode, the
page is outlined in dashed yello to help me not go insane when I forget
that I'm using the deployed site and thats why my changes arent doing
anything, and the API returns 400 errors when images are unsupported
formats.

src/templates/views/admin/index.hbs

@@ -40,65 +40,85 @@
         </div>
     </div>
 
-    <!-- store a blank link card so that if we add a new link we can clone it to make the editing experience easier -->
-    <div id="template-link-card" class="hidden">
-        <div>
-            <img width="64" height="64" draggable="false" />
-        </div>
-        <div>
-            <h3></h3>
-            <!-- add 2 to the height to account for the border -->
-            <p></p>
-        </div>
-    </div>
+    <template id="template-loading-spinner">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+            <!-- Icon from SVG Spinners by Utkarsh Verma - https://github.com/n3r4zzurr0/svg-spinners/blob/main/LICENSE
+            -->
+            <path fill="#EAEAEA" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
+                opacity=".25" />
+            <path fill="#EAEAEA"
+                d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z">
+                <animateTransform attributeName="transform" dur="0.75s" repeatCount="indefinite" type="rotate" values="0
+                12 12;360 12 12" />
+            </path>
+        </svg>
+    </template>
 
-    <div id="template-category" class="hidden">
-        <div class="category-header">
+    <!-- store a blank link card so that if we add a new link we can clone it to make the editing experience easier -->
+    <template id="template-link-card">
+        <div data-card>
             <div>
-                <img width="32" height="32" draggable="false" />
+                <img width="64" height="64" draggable="false" />
+            </div>
+            <div>
+                <h3></h3>
+                <!-- add 2 to the height to account for the border -->
+                <p></p>
             </div>
-            <h2></h2>
         </div>
-        <div class="link-grid">
-            <div class="new-link-card link-card admin">
-                <svg class="mr-2" xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24">
-                    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-                        stroke-width="2" d="M12 5v14m-7-7h14" />
-                </svg>
+    </template>
+
+    <template id="template-category">
+        <div>
+            <div class="category-header">
                 <div>
-                    <h3>Add a link</h3>
+                    <img width="32" height="32" draggable="false" />
+                </div>
+                <h2></h2>
+            </div>
+            <div class="link-grid">
+                <div class="new-link-card link-card admin">
+                    <svg class="mr-2" xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24">
+                        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                            stroke-width="2" d="M12 5v14m-7-7h14" />
+                    </svg>
+                    <div>
+                        <h3>Add a link</h3>
+                    </div>
                 </div>
             </div>
         </div>
-    </div>
+    </template>
 
-    <div id="template-edit-actions" class="hidden">
-        <div class="flex flex-row gap-2">
-            <button class="action-button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
-                    viewBox="0 0 24 24"><!-- Icon from Tabler Icons by Paweł Kuna - https://github.com/tabler/tabler-icons/blob/master/LICENSE -->
-                    <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-                        stroke-width="2">
-                        <path d="M7 7H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2v-1" />
-                        <path d="M20.385 6.585a2.1 2.1 0 0 0-2.97-2.97L9 12v3h3zM16 5l3 3" />
-                    </g>
-                </svg>
-            </button>
-            <button class="text-error action-button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
-                    viewBox="0 0 24 24"><!-- Icon from Tabler Icons by Paweł Kuna - https://github.com/tabler/tabler-icons/blob/master/LICENSE -->
-                    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-                        stroke-width="2"
-                        d="M4 7h16m-10 4v6m4-6v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3" />
-                </svg>
-            </button>
+    <template id="template-edit-actions">
+        <div>
+            <div class="action-container">
+                <button class="action-button">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+                        viewBox="0 0 24 24"><!-- Icon from Tabler Icons by Paweł Kuna - https://github.com/tabler/tabler-icons/blob/master/LICENSE -->
+                        <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                            stroke-width="2">
+                            <path d="M7 7H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2v-1" />
+                            <path d="M20.385 6.585a2.1 2.1 0 0 0-2.97-2.97L9 12v3h3zM16 5l3 3" />
+                        </g>
+                    </svg>
+                </button>
+                <button class="text-error action-button">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+                        viewBox="0 0 24 24"><!-- Icon from Tabler Icons by Paweł Kuna - https://github.com/tabler/tabler-icons/blob/master/LICENSE -->
+                        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M4 7h16m-10 4v6m4-6v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3" />
+                    </svg>
+                </button>
+            </div>
         </div>
-    </div>
+    </template>
 
     <div id="teleport-storage" class="absolute -top-full -left-full hidden">
         <!-- These are the elements that appear when the user enters edit mode, they allow for the cancelation/confirmation of the edit -->
         <div class="action-container" id="confirm-actions">
-            <button class="action-button text-success" onclick="confirmEdit()">
+            <button class="action-button text-success" onclick="confirmEdit(event)">
                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                     viewBox="0 0 24 24"><!-- Icon from Tabler Icons by Paweł Kuna - https://github.com/tabler/tabler-icons/blob/master/LICENSE -->
                     <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"