V0.3.3: Even more optimization

In this realease, I have further optimized Passport. The css that
Passport now uses is entirely handrolled and build via postcss (sadly).
Several bugs have also been fixed in this release, as well as a few
performance improvements relating to the admin UI.

src/templates/partials/category-grid.hbs

@@ -0,0 +1,111 @@
+<section class="card-section">
+    <div>
+        {{#each Categories}}
+        <div class="category-header" id="{{this.ID}}_category">
+            <div>
+                <img width="32" height="32" draggable="false" alt="{{this.Name}}" src="{{this.Icon}}" />
+            </div>
+            <h2 class="capitalize break-all">{{this.Name}}</h2>
+            {{#if IsAdmin}}
+            <div>
+                <div class="action-container">
+                    <button aria-label="Edit category" onclick="editCategory(this)" class="action-button">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+                            <use href="#edit-icon" />
+                        </svg>
+                    </button>
+                    <button aria-label="Delete category" onclick="deleteCategory(this)"
+                        class="text-error action-button">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+                            <use href="#trash-icon" />
+                        </svg>
+                    </button>
+                </div>
+            </div>
+            {{/if}}
+        </div>
+        <div class="link-grid">
+            {{#each this.Links}}
+
+            {{#if IsAdmin}}<div data-card id="{{this.ID}}_link" {{else}} <a href="{{this.URL}}" draggable="false"
+                target="_blank" rel="noreferrer" {{/if}}>
+
+                <div>
+                    <img width="64" height="64" draggable="false" src="{{this.Icon}}" alt="{{this.Name}}" />
+                </div>
+                <div>
+                    <h3>{{this.Name}}</h3>
+                    <p>{{this.Description}}</p>
+                </div>
+                {{#if IsAdmin}}
+                <div>
+                    <div class="action-container">
+                        <button aria-label="Edit link" onclick="editLink(this)" class="action-button">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+                                <use href="#edit-icon" />
+                            </svg>
+                        </button>
+                        <button aria-label="Delete link" onclick="deleteLink(this)" class="text-error action-button">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+                                <use href="#trash-icon" />
+                            </svg>
+                        </button>
+                    </div>
+                </div>
+                {{/if}}
+
+                {{#if IsAdmin}}
+            </div {{else}} </a {{/if}}>
+
+            {{else}}
+            {{#unless IsAdmin}}
+            <p class="text-subtle">No links here, add one!</p>
+            {{/unless}}
+            {{/each}}
+
+            {{#if IsAdmin}}
+            <div onclick="openModal('link', {{this.ID}})" class="new-link-card link-card admin">
+                <svg 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>
+            {{/if }}
+        </div>
+        {{/each}}
+
+        {{#if IsAdmin}}
+        <div class="add-category-button" id="add-category-button">
+            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" 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>
+            <h2 onclick="openModal('category')">
+                Add a new category
+            </h2>
+        </div>
+        {{/if}}
+    </div>
+</section>
+
+<!-- store the svg icons here so that they can be reused -->
+{{#if IsAdmin}}
+<div class="hidden">
+    <svg id="edit-icon" 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>
+
+    <svg id="trash-icon" 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>
+</div>
+{{/if}}

src/templates/partials/modals/category-form.hbs

@@ -1,7 +1,6 @@
 <div id="category-contents" class="hidden">
     <h3>Create A category</h3>
-    <form id="category-form" action="/api/categories" method="post"
-        class="flex flex-col gap-y-3 my-2 [&>div]:flex [&>div]:flex-col [&>div]:gap-1">
+    <form id="category-form" action="/api/categories" method="post" class="modal-form">
         <div>
             <label for="categoryName">Name</label>
             <input required type="text" name="name" id="categoryName" maxlength="50" />
@@ -10,7 +9,7 @@
             <label for="linkIcon">Icon</label>
             <input type="file" name="icon" id="linkIcon" accept=".svg" required />
         </div>
-        <button class="px-4 py-2 rounded-md w-full bg-accent text-white border-0" type="submit">Create
+        <button type="submit">Create
             category</button>
     </form>
     <span id="category-message"></span>

src/templates/partials/modals/delete-category.hbs

@@ -1,13 +1,11 @@
-<div id="category-delete-contents" class="hidden text-center">
+<div id="category-delete-contents" class="hidden delete-modal">
     <h3>Are you sure you want to delete this category?</h3>
-    <p class="mb-3">You are about to delete the category <strong id="category-name"></strong>. This action cannot be
+    <p>You are about to delete the category <strong id="category-name"></strong>. This action cannot be
         undone.
         All links associated with this category will also be deleted. Are you sure you want to continue?</p>
-    <div class="flex justify-end flex-col gap-y-2">
-        <button class="px-4 py-2 rounded-md w-full bg-error text-white border-0"
-            onclick="confirmDeleteCategory()">Delete
+    <div>
+        <button onclick="confirmDeleteCategory()">Delete
             category</button>
-        <button class="px-4 py-2 rounded-md w-full bg-overlay border border-highlight text-white"
-            onclick="closeModal()">Cancel</button>
+        <button onclick="closeModal()">Cancel</button>
     </div>
 </div>

src/templates/partials/modals/delete-link.hbs

@@ -1,12 +1,11 @@
-<div id="link-delete-contents" class="hidden text-center">
+<div id="link-delete-contents" class="hidden delete-modal">
     <h3>Are you sure you want to delete this link?</h3>
-    <p class="mb-3">You are about to delete the link <strong id="link-name"></strong>. This action cannot be undone. Are
+    <p>You are about to delete the link <strong id="link-name"></strong>. This action cannot be undone. Are
         you sure you
         want to continue?</p>
-    <div class="flex justify-end flex-col gap-y-2">
-        <button class="px-4 py-2 rounded-md w-full bg-error text-white border-0" onclick="confirmDeleteLink()">Delete
+    <div>
+        <button onclick="confirmDeleteLink()">Delete
             link</button>
-        <button class="px-4 py-2 rounded-md w-full bg-overlay border border-highlight text-white"
-            onclick="closeModal()">Cancel</button>
+        <button onclick="closeModal()">Cancel</button>
     </div>
 </div>

src/templates/partials/modals/link-form.hbs

@@ -1,7 +1,6 @@
 <div id="link-contents" class="hidden">
     <h3>Add A link</h3>
-    <form id="link-form" action="/api/links" method="post"
-        class="flex flex-col gap-y-3 my-2 [&>div]:flex [&>div]:flex-col [&>div]:gap-1">
+    <form id="link-form" action="/api/links" method="post" class="modal-form">
         <div>
             <label for="linkName">Name</label>
             <input required type="text" name="name" id="linkName" maxlength="50" />
@@ -18,7 +17,7 @@
             <label for="linkIcon">Icon</label>
             <input required type="file" name="icon" id="linkIcon" accept="image/*" />
         </div>
-        <button class="px-4 py-2 rounded-md w-full bg-accent text-white border-0" type="submit">Add
+        <button type="submit">Add
             link</button>
     </form>
     <span id="link-message"></span>