Vastly overhaul admin UI

Admin UI now has the ability to edit links that exist. Deleting items is
more accessible and asks for a confirmation before deleting. Link and
Category names as well as link descriptions now have a length limit
(todo: make it configurable?). Small bug fixes related to image saving
are also included in this commit.

src/main.go

@@ -17,7 +17,6 @@ import (
 	"log/slog"
 	"mime/multipart"
 	"net/http"
-	"net/url"
 	"os"
 	"os/signal"
 	"path/filepath"
@@ -313,23 +312,25 @@ func UploadFile(file *multipart.FileHeader, fileName, contentType string, c fibe
 		// if there *is* exif, parse it
 		if err == nil {
 			tag, err := x.Get(exif.Orientation)
-			if err == nil {
+			if err != nil {
-				if tag.Count == 1 && tag.Format() == tiff.IntVal {
+				return "", fmt.Errorf("failed to get orientation: %v", err)
-					orientation, err := tag.Int(0)
+			}
-					if err != nil {
-						return "", fmt.Errorf("failed to get orientation: %v", err)
-					}
 
-					slog.Debug("Orientation tag found", "orientation", orientation)
+			if tag.Count == 1 && tag.Format() == tiff.IntVal {
+				orientation, err := tag.Int(0)
+				if err != nil {
+					return "", fmt.Errorf("failed to get orientation: %v", err)
+				}
 
-					switch orientation {
+				slog.Debug("Orientation tag found", "orientation", orientation)
-					case 3:
+
-						img = imaging.Rotate180(img)
+				switch orientation {
-					case 6:
+				case 3:
-						img = imaging.Rotate270(img)
+					img = imaging.Rotate180(img)
-					case 8:
+				case 6:
-						img = imaging.Rotate90(img)
+					img = imaging.Rotate270(img)
-					}
+				case 8:
+					img = imaging.Rotate90(img)
 				}
 			}
 		}
@@ -380,7 +381,7 @@ func UploadFile(file *multipart.FileHeader, fileName, contentType string, c fibe
 		}
 	}
 
-	iconPath = "/uploads/" + url.PathEscape(fileName)
+	iconPath = "/uploads/" + fileName
 
 	return iconPath, nil
 }

src/styles/main.scss

@@ -84,7 +84,6 @@ input:not(.search) {
     transition-duration: 150ms;
     transition-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
     box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-    contain: layout style paint;
 
     &:not(.admin) {
         &:hover {
@@ -114,12 +113,12 @@ input:not(.search) {
 }
 
 /* Div that holds the image */
-.link-card div[data-img-container] {
+.link-card div:has(img):first-child {
     flex-shrink: 0;
     margin-right: 0.5rem;
 }
 
-.link-card div[data-img-container] img {
+.link-card div:first-child img {
     user-select: none;
     border-radius: 0.375rem;
     aspect-ratio: 1/1;
@@ -127,33 +126,10 @@ input:not(.search) {
 }
 
 /* Div that holds the text */
-.link-card div[data-text-container] {
+.link-card div:nth-child(2) {
     word-break: break-all;
 }
 
-.link-card div[data-text-container] p {
+.link-card div:nth-child(2) p {
     color: var(--color-subtle);
 }
-
-
-.categoy-header {
-    display: flex;
-    align-items: center;
-}
-
-.category-header div[data-img-container] {
-    @apply shrink-0 relative mr-2 h-full flex items-center justify-center size-8;
-}
-
-.categoy-header div[data-img-container] img {
-    user-select: none;
-    object-fit: cover;
-    aspect-ratio: 1/1;
-}
-
-.category-header h2 {
-    text-transform: capitalize;
-    word-break: break-all;
-    border-width: 1px;
-    border-color: #0000;
-}

src/templates/views/index.hbs

@@ -76,17 +76,17 @@
     <div class="w-full sm:w-4/5 p-2.5">
         {{#each Categories}}
         <div class="flex items-center mt-2 first:mt-0">
-            <img class="object-contain mr-2 select-none size-8" width="32" height="32" draggable="false"
+            <img class="object-contain mr-2 select-none" width="32" height="32" draggable="false" alt="{{this.Name}}"
-                alt="{{this.Name}}" src="{{this.Icon}}" />
+                src="{{this.Icon}}" />
             <h2 class="capitalize break-all">{{this.Name}}</h2>
         </div>
         <div class="p-2.5 grid grid-cols-[repeat(auto-fill,_minmax(min(330px,_100%),_1fr))] gap-2">
             {{#each this.Links}} <a href="{{this.URL}}" class="link-card" draggable="false" target="_blank"
                 rel="noopener noreferrer">
-                <div data-img-container>
+                <div>
                     <img width="64" height="64" draggable="false" src="{{this.Icon}}" alt="{{this.Name}}" />
                 </div>
-                <div data-text-container>
+                <div>
                     <h3>{{this.Name}}</h3>
                     <p class="min-h-5">{{this.Description}}</p>
                 </div>

zqdgr.config.json

@@ -1,6 +1,6 @@
 {
     "name": "passport",
-    "version": "0.3.1",
+    "version": "0.2.0",
     "description": "Passport is a simple, lightweight, and fast dashboard/new tab page for your browser.",
     "author": "juls0730",
     "license": "BSL-1.0",
@@ -11,7 +11,7 @@
     },
     "scripts": {
         "dev": "go generate ./src/; PASSPORT_DEV_MODE=true go run src/main.go",
-        "build": "go generate ./src/ && go build -tags netgo,prod -ldflags=\"-w -s\" -o passport src/main.go"
+        "build": "go generate ./src/ && go build -tags netgo,prod -ldflags=\"-w -s\" -o passport"
     },
     "pattern": "src/**/*.{go,hbs,scss,svg,png,jpg,jpeg,webp,woff2,ico,webp}",
     "shutdown_signal": "SIGINT"