V0.3.2: Improved admin UI and performance galore

This commit fixes a plethora of bugs related to the admin UI, as well as
dramatically improving the performance of in-place editing. Furthermore,
several server bugs and misc bugs have been fixed. The admin UI is now
entirely client side when adding, deleting, or editng a category or
link. Other internal improvements hasve also been made.

.github/workflows/docker-publish.yml

@@ -27,6 +27,13 @@ jobs:
           username: ${{ github.actor }}
           password: ${{ env.OCI_TOKEN }}
 
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        id: buildx
+        uses: docker/setup-buildx-action@v3
+
       - name: Extract Docker metadata
         id: meta
         uses: docker/metadata-action@v5
@@ -40,3 +47,4 @@ jobs:
           push: true
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
+          platforms: linux/amd64,linux/arm64

.prettierrc

@@ -0,0 +1,19 @@
+{
+  "tabWidth": 4,
+  "useTabs": false,
+  "singleQuote": false,
+  "semi": true,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "bracketSameLine": false,
+  "arrowParens": "always",
+  "endOfLine": "lf",
+  "printWidth": 80,
+  "proseWrap": "preserve",
+  "quoteProps": "as-needed",
+  "requirePragma": false,
+  "embeddedLanguageFormatting": "auto",
+  "vueIndentScriptAndStyle": false,
+  "htmlWhitespaceSensitivity": "css",
+  "insertPragma": false
+}

Dockerfile

@@ -3,21 +3,33 @@ FROM golang:1.25 AS builder
 # build dependencies
 RUN apt update && apt install -y upx
 
-RUN curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/download/v4.1.13/tailwindcss-linux-x64
-RUN chmod +x tailwindcss-linux-x64
-RUN mv tailwindcss-linux-x64 /usr/local/bin/tailwindcss
+ARG TARGETARCH
+RUN set -eux; \
+    echo "Building for architecture: ${TARGETARCH}"; \
+    case "${TARGETARCH}" in \
+        "amd64") \
+            arch_suffix='x64' ;; \
+        "arm64") \
+            arch_suffix='arm64' ;; \
+        *) \
+            echo "Unsupported architecture: ${TARGETARCH}" && exit 1 ;; \
+    esac; \
+    curl -sLO "https://github.com/tailwindlabs/tailwindcss/releases/download/v4.1.13/tailwindcss-linux-${arch_suffix}"; \
+    mv "tailwindcss-linux-${arch_suffix}" /usr/local/bin/tailwindcss; \
+    chmod +x /usr/local/bin/tailwindcss;
+    
 
 RUN go install github.com/juls0730/zqdgr@latest
 
 WORKDIR /app
 
-ENV CGO_ENABLED=0 GOOS=linux GOARCH=amd64
+ARG TARGETARCH
+ENV CGO_ENABLED=0 GOOS=linux GOARCH=${TARGETARCH}
 
 COPY go.mod go.sum ./
 RUN go mod download
 COPY . .
 
-
 RUN zqdgr build
 RUN upx passport
 

go.mod

@@ -4,6 +4,7 @@ go 1.25.0
 
 require (
 	github.com/HugoSmits86/nativewebp v1.2.0
+	github.com/NarmadaWeb/gonify/v3 v3.0.0-beta
 	github.com/caarlos0/env/v11 v11.3.1
 	github.com/disintegration/imaging v1.6.2
 	github.com/rwcarlsen/goexif v0.0.0-20190401172101-9e8deecbddbd
@@ -19,6 +20,7 @@ require (
 	github.com/philhofer/fwd v1.2.0 // indirect
 	github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec // indirect
 	github.com/sirupsen/logrus v1.8.1 // indirect
+	github.com/tdewolff/parse/v2 v2.8.3 // indirect
 	github.com/tinylib/msgp v1.4.0 // indirect
 	golang.org/x/crypto v0.42.0 // indirect
 	golang.org/x/exp v0.0.0-20250620022241-b7579e27df2b // indirect
@@ -44,6 +46,7 @@ require (
 	github.com/mattn/go-isatty v0.0.20 // indirect
 	github.com/mattn/go-runewidth v0.0.15 // indirect
 	github.com/rivo/uniseg v0.2.0 // indirect
+	github.com/tdewolff/minify/v2 v2.24.3 // indirect
 	github.com/valyala/bytebufferpool v1.0.0 // indirect
 	github.com/valyala/fasthttp v1.66.0 // indirect
 	golang.org/x/sys v0.36.0 // indirect

go.sum

@@ -1,5 +1,7 @@
 github.com/HugoSmits86/nativewebp v1.2.0 h1:XJtXeTg7FsOi9VB1elQYZy3n6VjYLqofSr3gGRLUOp4=
 github.com/HugoSmits86/nativewebp v1.2.0/go.mod h1:YNQuWenlVmSUUASVNhTDwf4d7FwYQGbGhklC8p72Vr8=
+github.com/NarmadaWeb/gonify/v3 v3.0.0-beta h1:tNj6Rq9S3UUnF2800h6Ns7wmx+q7MwoZBVD24fPCSlo=
+github.com/NarmadaWeb/gonify/v3 v3.0.0-beta/go.mod h1:AoLhZCGC/9XGqOE+0amArp/dFIZSfZSvbyPI/IbQ7Q0=
 github.com/andybalholm/brotli v1.2.0 h1:ukwgCxwYrmACq68yiUqwIWnGY0cTPox/M94sVwToPjQ=
 github.com/andybalholm/brotli v1.2.0/go.mod h1:rzTDkvFWvIrjDXZHkuS16NPggd91W3kUSvPlQ1pLaKY=
 github.com/caarlos0/env/v11 v11.3.1 h1:cArPWC15hWmEt+gWk7YBi7lEXTXCvpaSdCiZE2X5mCA=
@@ -64,6 +66,12 @@ github.com/stretchr/testify v1.2.2/go.mod h1:a8OnRcib4nhh0OaRAV+Yts87kKdq0PP7pXf
 github.com/stretchr/testify v1.7.0/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
 github.com/stretchr/testify v1.11.0 h1:ib4sjIrwZKxE5u/Japgo/7SJV3PvgjGiRNAvTVGqQl8=
 github.com/stretchr/testify v1.11.0/go.mod h1:wZwfW3scLgRK+23gO65QZefKpKQRnfz6sD981Nm4B6U=
+github.com/tdewolff/minify/v2 v2.24.3 h1:BaKgWSFLKbKDiUskbeRgbe2n5d1Ci1x3cN/eXna8zOA=
+github.com/tdewolff/minify/v2 v2.24.3/go.mod h1:1JrCtoZXaDbqioQZfk3Jdmr0GPJKiU7c1Apmb+7tCeE=
+github.com/tdewolff/parse/v2 v2.8.3 h1:5VbvtJ83cfb289A1HzRA9sf02iT8YyUwN84ezjkdY1I=
+github.com/tdewolff/parse/v2 v2.8.3/go.mod h1:Hwlni2tiVNKyzR1o6nUs4FOF07URA+JLBLd6dlIXYqo=
+github.com/tdewolff/test v1.0.11 h1:FdLbwQVHxqG16SlkGveC0JVyrJN62COWTRyUFzfbtBE=
+github.com/tdewolff/test v1.0.11/go.mod h1:XPuWBzvdUzhCuxWO1ojpXsyzsA5bFoS3tO/Q3kFuTG8=
 github.com/tinylib/msgp v1.4.0 h1:SYOeDRiydzOw9kSiwdYp9UcBgPFtLU2WDHaJXyHruf8=
 github.com/tinylib/msgp v1.4.0/go.mod h1:cvjFkb4RiC8qSBOPMGPSzSAx47nAsfhLVTCZZNuHv5o=
 github.com/valyala/bytebufferpool v1.0.0 h1:GqA5TC/0021Y/b9FG4Oi9Mr3q7XYx6KllzawFIhcdPw=

src/main.go

@@ -26,9 +26,11 @@ import (
 	"time"
 
 	"github.com/HugoSmits86/nativewebp"
+	"github.com/NarmadaWeb/gonify/v3"
 	"github.com/caarlos0/env/v11"
 	"github.com/disintegration/imaging"
 	"github.com/gofiber/fiber/v3"
+	"github.com/gofiber/fiber/v3/middleware/compress"
 	"github.com/gofiber/fiber/v3/middleware/helmet"
 	"github.com/gofiber/fiber/v3/middleware/static"
 	"github.com/gofiber/template/handlebars/v2"
@@ -42,7 +44,7 @@ import (
 	_ "modernc.org/sqlite"
 )
 
-//go:embed assets/** templates/** schema.sql
+//go:embed assets/** templates/** schema.sql scripts/**.js styles/**.css
 var embeddedAssets embed.FS
 
 var devContent = `<script>
@@ -277,7 +279,14 @@ func CropToCenter(img image.Image, outputSize int) (image.Image, error) {
 	return outputImg, nil
 }
 
-func UploadFile(file *multipart.FileHeader, fileName, contentType string, c fiber.Ctx) (string, error) {
+func UploadFile(file *multipart.FileHeader, contentType string, c fiber.Ctx) (string, error) {
+	fileId, err := uuid.NewV7()
+	if err != nil {
+		return "", err
+	}
+
+	fileName := fmt.Sprintf("%s.%s", fileId.String(), filepath.Ext(file.Filename))
+
 	srcFile, err := file.Open()
 	if err != nil {
 		return "", err
@@ -312,25 +321,23 @@ 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 {
-				return "", fmt.Errorf("failed to get orientation: %v", err)
-			}
+			if err == nil {
+				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)
+					}
 
-			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)
-				}
+					slog.Debug("Orientation tag found", "orientation", orientation)
 
-				slog.Debug("Orientation tag found", "orientation", orientation)
-
-				switch orientation {
-				case 3:
-					img = imaging.Rotate180(img)
-				case 6:
-					img = imaging.Rotate270(img)
-				case 8:
-					img = imaging.Rotate90(img)
+					switch orientation {
+					case 3:
+						img = imaging.Rotate180(img)
+					case 6:
+						img = imaging.Rotate270(img)
+					case 8:
+						img = imaging.Rotate90(img)
+					}
 				}
 			}
 		}
@@ -699,16 +706,23 @@ func main() {
 		log.Fatal(err)
 	}
 
-	css, err := fs.ReadFile(embeddedAssets, "assets/tailwind.css")
-
-	if err != nil {
-		log.Fatal(err)
-	}
-
 	engine := handlebars.NewFileSystem(http.FS(templatesDir), ".hbs")
 
-	engine.AddFunc("inlineCSS", func() string {
-		return string(css)
+	engine.AddFunc("embedFile", func(fileToEmbed string) string {
+		content, err := fs.ReadFile(embeddedAssets, fileToEmbed)
+		if err != nil {
+			return ""
+		}
+
+		fileExtension := filepath.Ext(fileToEmbed)
+		switch fileExtension {
+		case ".js":
+			return fmt.Sprintf("<script>%s</script>", content)
+		case ".css":
+			return fmt.Sprintf("<style>%s</style>", content)
+		default:
+			return string(content)
+		}
 	})
 
 	engine.AddFunc("devContent", func() string {
@@ -718,10 +732,6 @@ func main() {
 		return ""
 	})
 
-	engine.AddFunc("eq", func(a, b any) bool {
-		return a == b
-	})
-
 	router := fiber.New(fiber.Config{
 		Views: engine,
 	})
@@ -733,6 +743,17 @@ func main() {
 		return c.Redirect().To("/assets/favicon.ico")
 	})
 
+	router.Use(compress.New(compress.Config{
+		Level: compress.LevelBestSpeed,
+	}))
+
+	router.Use(gonify.New(gonify.Config{
+		MinifySVG:  !app.DevMode,
+		MinifyCSS:  !app.DevMode,
+		MinifyJS:   !app.DevMode,
+		MinifyHTML: !app.DevMode,
+	}))
+
 	router.Use("/", static.New("./public", static.Config{
 		Browse: false,
 		MaxAge: 31536000,
@@ -823,7 +844,7 @@ func main() {
 
 		return c.Render("views/admin/index", fiber.Map{
 			"Categories": app.CategoryManager.GetCategories(),
-		}, "layouts/main")
+		}, "layouts/admin")
 	})
 
 	api := router.Group("/api")
@@ -880,9 +901,7 @@ func main() {
 				})
 			}
 
-			filename := fmt.Sprintf("%d_%s.svg", time.Now().Unix(), strings.ReplaceAll(req.Name[:min(10, len(req.Name))], " ", "_"))
-
-			iconPath, err := UploadFile(file, filename, contentType, c)
+			iconPath, err := UploadFile(file, contentType, c)
 			if err != nil {
 				return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{
 					"message": "Failed to upload file, please try again!",
@@ -975,9 +994,7 @@ func main() {
 				})
 			}
 
-			filename := fmt.Sprintf("%d_%s.webp", time.Now().Unix(), strings.ReplaceAll(req.Name[:min(10, len(req.Name))], " ", "_"))
-
-			iconPath, err := UploadFile(file, filename, contentType, c)
+			iconPath, err := UploadFile(file, contentType, c)
 			if err != nil {
 				slog.Error("Failed to upload file", "error", err)
 				return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{
@@ -1069,9 +1086,7 @@ func main() {
 
 				oldIconPath := category.Icon
 
-				filename := fmt.Sprintf("%d_%s.svg", time.Now().Unix(), strings.ReplaceAll(req.Name[:min(10, len(req.Name))], " ", "_"))
-
-				iconPath, err := UploadFile(file, filename, contentType, c)
+				iconPath, err := UploadFile(file, contentType, c)
 				if err != nil {
 					slog.Error("Failed to upload file", "error", err)
 					return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{
@@ -1189,9 +1204,7 @@ func main() {
 
 				oldIconPath := link.Icon
 
-				filename := fmt.Sprintf("%d_%s.webp", time.Now().Unix(), strings.ReplaceAll(req.Name[:min(10, len(req.Name))], " ", "_"))
-
-				iconPath, err := UploadFile(file, filename, contentType, c)
+				iconPath, err := UploadFile(file, contentType, c)
 				if err != nil {
 					slog.Error("Failed to upload file", "error", err)
 					return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{

src/styles/adminUi.css

@@ -0,0 +1,70 @@
+.modal-bg {
+    visibility: hidden;
+    opacity: 0;
+}
+
+.modal-bg.is-visible {
+    visibility: visible;
+    opacity: 1;
+}
+
+.modal {
+    opacity: 0;
+}
+
+.modal.is-visible {
+    opacity: 1;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    .modal-bg {
+        visibility: hidden;
+        opacity: 0;
+
+        transition: opacity 0.3s ease, visibility 0s 0.3s;
+        transition-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
+    }
+
+    .modal-bg.is-visible {
+        visibility: visible;
+        opacity: 1;
+        transition-delay: 0s;
+    }
+
+    .modal {
+        opacity: 0;
+        transform: translateY(20px) scale(0.95);
+
+        transition: opacity 0.3s ease, transform 0.3s ease;
+        transition-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
+    }
+
+    .modal.is-visible {
+        opacity: 1;
+        visibility: visible;
+        transform: translateY(0) scale(1);
+        transition-delay: 0s;
+    }
+}
+
+.action-button {
+    display: flex;
+    width: fit-content;
+    height: fit-content;
+    padding: 0.25rem;
+    background-color: var(--color-highlight-sm);
+    border: 1px solid color-mix(in srgb, var(--color-highlight) 70%, #0000);
+    border-radius: 9999px;
+    box-shadow: var(--shadow-sm);
+    cursor: pointer;
+    transition: filter 0.15s cubic-bezier(0.45, 0, 0.55, 1);
+    contain: layout style paint;
+
+    &:hover {
+        filter: brightness(125%);
+    }
+
+    &:active {
+        filter: brightness(95%);
+    }
+}

src/styles/main.scss

@@ -1,12 +1,11 @@
 @import "tailwindcss";
 
-
 @theme {
     --color-accent: oklch(57.93% 0.258 294.12);
     --color-success: oklch(70.19% 0.158 160.44);
     --color-error: oklch(53% 0.251 28.48);
 
-    --color-base: oklch(11% .007 285);
+    --color-base: oklch(11% 0.007 285);
     --color-surface: oklch(19% 0.007 285.66);
     --color-overlay: oklch(26% 0.008 285.66);
 
@@ -15,18 +14,21 @@
     --color-text: oklch(87% 0.015 286);
 
     --color-highlight-sm: oklch(30.67% 0.007 286);
-    --color-highlight: oklch(39.26% 0.010 286);
+    --color-highlight: oklch(39.26% 0.01 286);
     --color-highlight-lg: oklch(47.72% 0.011 286);
 }
 
 @font-face {
     font-family: "Instrument Sans";
-    src: url("/assets/fonts/InstrumentSans-VariableFont_wdth,wght.woff2") format("woff2");
+    src: url("/assets/fonts/InstrumentSans-VariableFont_wdth,wght.woff2")
+        format("woff2");
     font-display: swap;
 }
 
 :root {
-    --default-font-family: "Instrument Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    --default-font-family: "Instrument Sans", ui-sans-serif, system-ui,
+        sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+        "Noto Color Emoji";
 }
 
 html {
@@ -35,25 +37,27 @@ html {
     color: var(--color-text);
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-    @apply font-semibold;
-}
+@layer base {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        font-weight: 600;
+    }
 
-h1 {
-    font-size: clamp(42px, 10vw, 64px);
-}
+    h1 {
+        font-size: clamp(42px, 10vw, 64px);
+    }
 
-h2 {
-    font-size: clamp(30px, 6vw, 36px);
-}
+    h2 {
+        font-size: clamp(30px, 6vw, 36px);
+    }
 
-h3 {
-    font-size: 1.25rem;
+    h3 {
+        font-size: 1.25rem;
+    }
 }
 
 button {
@@ -62,7 +66,7 @@ button {
 
 input:not(.search) {
     @apply px-4 py-2 rounded-md w-full bg-surface border border-highlight/70 placeholder:text-highlight text-text focus-visible:outline-none transition-colors duration-300 ease-out overflow-hidden;
-    
+
     &[type="file"] {
         @apply p-0 cursor-pointer;
 
@@ -84,10 +88,12 @@ 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 {
-            box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+            box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
+                0 4px 6px -4px rgb(0 0 0 / 0.1);
             transform: translateY(-4px);
         }
 
@@ -113,12 +119,12 @@ input:not(.search) {
 }
 
 /* Div that holds the image */
-.link-card div:has(img):first-child {
+.link-card div[data-img-container] {
     flex-shrink: 0;
-    margin-right: 0.5rem;
+    padding-right: 0.5rem;
 }
 
-.link-card div:first-child img {
+.link-card div[data-img-container] img {
     user-select: none;
     border-radius: 0.375rem;
     aspect-ratio: 1/1;
@@ -126,10 +132,64 @@ input:not(.search) {
 }
 
 /* Div that holds the text */
-.link-card div:nth-child(2) {
+.link-card div[data-text-container] {
+    display: flex;
+    flex-grow: 1;
+    flex-direction: column;
+    row-gap: 1px;
+    overflow: hidden;
     word-break: break-all;
 }
 
-.link-card div:nth-child(2) p {
+.link-card div[data-text-container] p {
     color: var(--color-subtle);
-}
+    white-space: pre-wrap;
+    border: 1px solid #0000;
+    min-height: 22px;
+}
+
+.new-link-card {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 0.625rem;
+    border: 0.125rem dashed var(--color-subtle);
+    border-radius: 1rem;
+    transition: box-shadow, transofrm 150ms cubic-bezier(0.45, 0, 0.55, 1);
+    cursor: pointer;
+    user-select: none;
+
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
+.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;
+}
+
+.link-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
+    gap: 0.5rem;
+    padding: 0.625rem;
+    contain: layout style paint;
+}

src/templates/layouts/admin.hbs

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Passport</title>
+    <link rel="favicon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preload" as="font" type="font/woff2" crossorigin="anonymous"
+        href="/assets/fonts/InstrumentSans-VariableFont_wdth,wght.woff2" />
+    {{{embedFile "assets/tailwind.css"}}}
+    {{{embedFile "styles/adminUi.css"}}}
+</head>
+
+<body class="bg-surface text-text">
+    {{embed}}
+</body>
+
+{{{devContent}}}
+
+</html>

src/templates/layouts/main.hbs

@@ -3,14 +3,17 @@
 
 <head>
     <title>Passport</title>
-    <link rel="favicon" href="/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
-    <link rel="preload" as="font" type="font/woff2" crossorigin="anonymous" href="/assets/fonts/InstrumentSans-VariableFont_wdth,wght.woff2">
-    <style>{{{inlineCSS}}}</style>
+    <link rel="favicon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preload" as="font" type="font/woff2" crossorigin="anonymous"
+        href="/assets/fonts/InstrumentSans-VariableFont_wdth,wght.woff2" />
+    {{{embedFile "assets/tailwind.css"}}}
 </head>
 
 <body class="bg-surface text-text">
     {{embed}}
 </body>
+
 {{{devContent}}}
+
 </html>

src/templates/views/admin/index.hbs

@@ -17,25 +17,14 @@
     <section class="flex justify-center w-full">
         <div class="w-full sm:w-4/5 p-2.5">
             {{#each Categories}}
-            <div class="flex items-center" key="category-{{this.ID}}">
-                <div class="shrink-0 relative mr-2 h-full flex items-center justify-center">
-                    <img class="object-contain select-none" width="32" height="32" draggable="false" alt="{{this.Name}}"
-                        src="{{this.Icon}}" />
-                    <button onclick="selectIcon()"
-                        class="absolute inset-0 bg-highlight/80 hidden rounded-md text-base items-center justify-center"
-                        draggable="false">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28"
-                            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 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2M7 9l5-5l5 5m-5-5v12" />
-                        </svg>
-                    </button>
+            <div class="flex items-center category-header" id="{{this.ID}}_category">
+                <div class="category-img" data-img-container>
+                    <img width="32" height="32" draggable="false" alt="{{this.Name}}" src="{{this.Icon}}" />
                 </div>
-                <h2 class="capitalize break-all border border-transparent">{{this.Name}}</h2>
-                <div class="ml-2" data-edit-actions>
-                    <div class="flex flex-row gap-2">
-                        <button aria-label="Edit category" onclick="editCategory({{this.ID}})"
-                            class="w-fit h-fit flex p-1 bg-highlight-sm shadow-sm border border-highlight/70 rounded-full hover:filter hover:brightness-125 active:brightness-95 cursor-pointer transition-[filter] ease-[cubic-bezier(0.45,0,0.55,1)] duration-150">
+                <h2 data-placeholder="Enter title...">{{~ this.Name ~}}</h2>
+                <div class="pl-2" data-edit-actions>
+                    <div class="flex flex-row gap-2" data-primary-actions>
+                        <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"><!-- 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"
@@ -45,8 +34,8 @@
                                 </g>
                             </svg>
                         </button>
-                        <button aria-label="Delete category" onclick="deleteCategory({{this.ID}})"
-                            class="text-error w-fit h-fit flex p-1 bg-highlight-sm shadow-sm border border-highlight/70 rounded-full hover:filter hover:brightness-125 active:brightness-95 cursor-pointer transition-[filter] ease-[cubic-bezier(0.45,0,0.55,1)] duration-150">
+                        <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"><!-- 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"
@@ -55,51 +44,26 @@
                             </svg>
                         </button>
                     </div>
-                    <div class="hidden flex-row gap-2">
-                        <button aria-label="Confirm category edit" onclick="confirmCategoryEdit({{this.ID}})"
-                            class="w-fit h-fit flex p-1 bg-highlight-sm shadow-sm border border-highlight/70 rounded-full hover:filter hover:brightness-125 active:brightness-95 cursor-pointer transition-[filter] ease-[cubic-bezier(0.45,0,0.55,1)] duration-150 text-success">
-                            <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="m5 12l5 5L20 7" />
-                            </svg>
-                        </button>
-                        <button aria-label="Cancel category edit" onclick="cancelCategoryEdit({{this.ID}})"
-                            class="w-fit h-fit flex p-1 bg-highlight-sm shadow-sm border border-highlight/70 rounded-full hover:filter hover:brightness-125 active:brightness-95 cursor-pointer transition-[filter] ease-[cubic-bezier(0.45,0,0.55,1)] duration-150 text-error">
-                            <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="M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0m15.364-6.364L5.636 18.364" />
-                            </svg>
-                        </button>
-                    </div>
                 </div>
             </div>
-            <div class="p-2.5 grid grid-cols-[repeat(auto-fill,_minmax(min(330px,_100%),_1fr))] gap-2">
+            <div class="link-grid">
                 {{#each this.Links}}
-                <div key="link-{{this.ID}}" class="link-card relative admin">
-                    <div class="relative">
+                <div id="{{this.ID}}_link" class="link-card relative admin">
+                    <div class="relative" data-img-container>
                         <img width="64" height="64" draggable="false" src="{{this.Icon}}" alt="{{this.Name}}" />
-                        <button onclick="selectIcon()"
-                            class="absolute inset-0 bg-highlight/80 hidden rounded-md text-base items-center justify-center"
-                            draggable="false">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28"
-                                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 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2M7 9l5-5l5 5m-5-5v12" />
-                            </svg>
-                        </button>
                     </div>
-                    <div class="flex-grow">
-                        <h3 class="border border-transparent">{{this.Name}}</h3>
-                        <p class="min-h-5">{{this.Description}}</p>
+                    <div data-text-container>
+                        <h3 class="border border-transparent" data-placeholder="Enter title...">
+                            {{~ this.Name ~}}
+                        </h3>
+                        <!-- add 2 to the height to account for the border -->
+                        <p data-placeholder="Enter description...">
+                            {{~ this.Description ~}}
+                        </p>
                     </div>
                     <div class="absolute right-1 top-1" data-edit-actions>
-                        <div class="flex flex-row gap-2">
-                            <button aria-label="Edit link" onclick="editLink({{this.ID}}, {{this.CategoryID}})"
-                                class="w-fit h-fit flex p-1 bg-highlight-sm shadow-sm border border-highlight/70 rounded-full hover:filter hover:brightness-125 active:brightness-95 cursor-pointer transition-[filter] ease-[cubic-bezier(0.45,0,0.55,1)] duration-150">
+                        <div class="flex flex-row gap-2" data-primary-actions>
+                            <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"><!-- 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"
@@ -109,8 +73,8 @@
                                     </g>
                                 </svg>
                             </button>
-                            <button aria-label="Delete link" onclick="deleteLink({{this.ID}}, {{this.CategoryID}})"
-                                class="text-error w-fit h-fit flex p-1 bg-highlight-sm shadow-sm border border-highlight/70 rounded-full hover:filter hover:brightness-125 active:brightness-95 cursor-pointer transition-[filter] ease-[cubic-bezier(0.45,0,0.55,1)] duration-150">
+                            <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"><!-- Icon from Tabler Icons by Paweł Kuna - https://github.com/tabler/tabler-icons/blob/master/LICENSE -->
                                     <path fill="none" stroke="currentColor" stroke-linecap="round"
@@ -119,32 +83,10 @@
                                 </svg>
                             </button>
                         </div>
-                        <div class="hidden flex-row gap-2">
-                            <button aria-label="Confirm link edit"
-                                onclick="confirmLinkEdit({{this.ID}}, {{this.CategoryID}})"
-                                class="w-fit h-fit flex p-1 bg-highlight-sm shadow-sm border border-highlight/70 rounded-full hover:filter hover:brightness-125 active:brightness-95 cursor-pointer transition-[filter] ease-[cubic-bezier(0.45,0,0.55,1)] duration-150 text-success">
-                                <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="m5 12l5 5L20 7" />
-                                </svg>
-                            </button>
-                            <button aria-label="Cancel link edit"
-                                onclick="cancelLinkEdit({{this.ID}}, {{this.CategoryID}})"
-                                class="w-fit h-fit flex p-1 bg-highlight-sm shadow-sm border border-highlight/70 rounded-full hover:filter hover:brightness-125 active:brightness-95 cursor-pointer transition-[filter] ease-[cubic-bezier(0.45,0,0.55,1)] duration-150 text-error">
-                                <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="M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0m15.364-6.364L5.636 18.364" />
-                                </svg>
-                            </button>
-                        </div>
                     </div>
                 </div>
                 {{/each}}
-                <div onclick="openModal('link', {{this.ID}})"
-                    class="rounded-2xl border border-dashed border-subtle p-2.5 flex flex-row items-center hover:underline transition-[box-shadow,transform] ease-[cubic-bezier(0.45,0,0.55,1)] duration-150 pointer-cursor select-none cursor-pointer">
+                <div onclick="openModal('link', {{this.ID}})" class="new-link-card">
                     <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" />
@@ -155,7 +97,7 @@
                 </div>
             </div>
             {{/each}}
-            <div class="flex items-center">
+            <div class="flex items-center" id="add-category-button">
                 <svg class="mr-2" 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" />
@@ -170,7 +112,7 @@
 
 <input type="file" id="icon-upload" accept="image/*" style="display: none;" />
 <div id="modal-container" role="dialog" aria-modal="true"
-    class="flex modal-bg fixed top-0 left-0 bottom-0 right-0 bg-black/45 justify-center items-center">
+    class="modal-bg fixed top-0 left-0 bottom-0 right-0 bg-black/45 justify-center items-center hidden">
     <div class="bg-overlay rounded-xl overflow-hidden w-full p-4 modal max-w-sm">
         {{> 'partials/modals/category-form' }}
         {{> 'partials/modals/link-form' }}
@@ -179,681 +121,88 @@
     </div>
 </div>
 
-<script>
-    // idfk what this variable capitalization is, it's a mess
-    let modalContainer = document.getElementById("modal-container");
-    let modal = modalContainer.querySelector("div");
-    let pageElement = document.getElementById("blur-target");
-    let iconUploader = document.getElementById("icon-upload");
-    let targetCategoryID = null;
-    let activeModal = null;
-
-    // errpr check the form and add the invalid class if it's invalid
-
-    /**
-    * Submits a form to the given URL
-    * @param {Event} event - The event that triggered the function
-    * @param {string} url - The URL to submit the form to
-    * @param {"category" | "link"} target - The target to close the modal for
-    * @returns {Promise<void>}
-    */
-    async function submitRequest(event, url, target) {
-        event.preventDefault();
-        let data = new FormData(event.target);
-
-        let res = await fetch(url, {
-            method: "POST",
-            body: data
-        });
-
-        if (res.status === 201) {
-            closeModal(target);
-            document.getElementById(`${target}-form`).reset();
-            location.reload();
-        } else {
-            let json = await res.json();
-            document.getElementById(`${target}-message`).innerText = json.message;
-        }
-    }
-
-    /**
-    * Initializes the form for the given form
-    * @param {"category" | "link"} form - The form to initialize
-    * @returns {void}
-    */
-    function addErrorListener(form) {
-        document.getElementById(`${form}-form`).querySelector("button").addEventListener("click", (event) => {
-            document.getElementById(`${form}-form`).querySelectorAll("[required]").forEach((el) => {
-                el.classList.add("invalid:border-[#861024]!");
-            });
-        });
-    }
-
-    addErrorListener("link");
-    document.getElementById("link-form").addEventListener("submit", async (event) => {
-        await submitRequest(event, `/api/category/${targetCategoryID}/link`, "link");
-    });
-
-    addErrorListener("category");
-    document.getElementById("category-form").addEventListener("submit", async (event) => {
-        await submitRequest(event, `/api/category`, "category");
-    });
-
-    // when the background is clicked, close the modal
-    modalContainer.addEventListener("click", (event) => {
-        if (event.target === modalContainer) {
-            closeModal();
-        }
-    });
-
-    function selectIcon() {
-        iconUploader.click();
-    }
-
-    /**
-    * Processes a file and returns a data URL.
-    * @param {File} file The file to process.
-    */
-    async function processFile(file) {
-        let reader = new FileReader();
-        return new Promise((resolve, reject) => {
-
-            if (file.type === "image/svg+xml") {
-                reader.addEventListener("load", async (event) => {
-                    let svgString = event.target.result;
-
-                    console.log(svgString);
-
-                    svgString = svgString.replaceAll("currentColor", "oklch(87% 0.015 286)");
-
-                    console.log(svgString);
-
-                    // turn svgString into a data URL
-                    resolve("data:image/svg+xml;base64," + btoa(unescape(encodeURIComponent(svgString))));
-                })
-
-                reader.readAsText(file);
-            } else {
-
-                // these should be jpg, png, or webp
-                // make a DataURL out of it
-                reader.addEventListener("load", async (event) => {
-                    resolve(event.target.result);
-                });
-
-                reader.readAsDataURL(file);
-            }
-        });
-    }
-
-    let targetedImageElement = null;
-    iconUploader.addEventListener("change", async (event) => {
-        let file = event.target.files[0];
-        if (file === null) {
-            return;
-        }
-
-        if (targetedImageElement === null) {
-            throw new Error("icon upload element was clicked, but no target image element was set");
-        }
-
-        console.log(file);
-
-        let dataURL = await processFile(file);
-        targetedImageElement.src = dataURL;
-    });
-
-    function openModal(modalKind, categoryID) {
-        activeModal = modalKind;
-        targetCategoryID = categoryID;
-
-        pageElement.style.filter = "blur(20px)";
-        document.getElementById(modalKind + "-contents").classList.remove("hidden");
-
-        modalContainer.classList.add("is-visible");
-        modal.classList.add("is-visible");
-
-        if (document.getElementById(modalKind + "-form") !== null) {
-            document.getElementById(modalKind + "-form").reset();
-        }
-    }
-
-    function closeModal() {
-        pageElement.style.filter = "";
-
-        modalContainer.classList.remove("is-visible");
-        modal.classList.remove("is-visible");
-
-        setTimeout(() => {
-            document.getElementById(activeModal + "-contents").classList.add("hidden");
-            activeModal = null;
-        }, 300)
-
-        if (document.getElementById(activeModal + "-form") !== null) {
-            document.getElementById(activeModal + "-form").querySelectorAll("[required]").forEach((el) => {
-                el.classList.remove("invalid:border-[#861024]!");
-            });
-        }
-
-        targetCategoryID = null;
-    }
-
-    let currentlyEditingLink = {
-        ID: null,
-        categoryID: null,
-        originalText: null,
-        originalDescription: null,
-        icon: null,
-    };
-
-    async function editLink(linkID, categoryID) {
-        if (currentlyEditingLink.ID !== null) {
-            // cancel the edit if it's already in progress
-            cancelLinkEdit(currentlyEditingLink.ID, currentlyEditingCategory.categoryID);
-        }
-
-        let linkEl = document.querySelector(`[key=link-${linkID}]`);
-        let linkImg = linkEl.querySelector("div:first-child img");
-        let fileUploaderOverlay = linkImg.nextElementSibling;
-        let linkName = linkEl.querySelector("div:nth-child(2) h3");
-        let linkDesc = linkEl.querySelector("div:nth-child(2) p");
-        let editActions = linkEl.querySelector("[data-edit-actions]");
-
-        currentlyEditingLink.ID = linkID;
-        currentlyEditingCategory.categoryID = categoryID;
-        currentlyEditingLink.originalText = linkName.textContent;
-        currentlyEditingLink.originalDescription = linkDesc.textContent;
-        currentlyEditingLink.icon = linkImg.src;
-
-        console.log(currentlyEditingLink)
-
-        iconUploader.accept = "image/*";
-        targetedImageElement = linkImg;
-
-        editActions.querySelector("div").classList.add("hidden");
-        editActions.querySelector("div").classList.remove("flex");
-
-        editActions.querySelector("div:nth-child(2)").classList.remove("hidden");
-        editActions.querySelector("div:nth-child(2)").classList.add("flex");
-
-        fileUploaderOverlay.classList.remove("hidden");
-        fileUploaderOverlay.classList.add("flex");
-
-        replaceWithResizableInput(linkName);
-        replaceWithResizableTextarea(linkDesc);
-    }
-
-    async function confirmLinkEdit(linkID, categoryID) {
-        let linkEl = document.querySelector(`[key=link-${linkID}]`);
-        let linkImg = linkEl.querySelector("div:first-child img");
-        let fileUploaderOverlay = linkImg.nextElementSibling;
-        let linkNameInput = linkEl.querySelector("input");
-        let linkDescInput = linkEl.querySelector("textarea");
-        let editActions = linkEl.querySelector("[data-edit-actions]");
-
-        linkNameInput.value = linkNameInput.value.trim();
-        linkDescInput.value = linkDescInput.value.trim();
-        console.log(linkNameInput.value);
-        if (linkNameInput.value === "") {
-            return;
-        }
-
-        let formData = new FormData();
-        if (linkNameInput.value !== currentlyEditingLink.originalText) {
-            formData.append("name", linkNameInput.value)
-        }
-
-        if (linkDescInput.value !== currentlyEditingLink.originalDescription) {
-            formData.append("description", linkDescInput.value)
-        }
-
-        if (iconUploader.files.length > 0) {
-            formData.append("icon", iconUploader.files[0]);
-        }
-
-        // nothing to update
-        if (formData.get("name") === null && formData.get("description") === null && formData.get("icon") === null) {
-            return;
-        }
-
-        let res = await fetch(`/api/category/${categoryID}/link/${linkID}`, {
-            method: "PATCH",
-            body: formData
-        });
-
-        if (res.status === 200) {
-
-            iconUploader.value = "";
-
-            currentlyEditingLink.icon = null;
-
-            cancelLinkEdit(currentlyEditingLink.ID, currentlyEditingCategory.categoryID, linkNameInput.value || currentlyEditingLink.originalText, linkDescInput.value || currentlyEditingLink.originalDescription);
-            currentlyEditingLink.originalText = null;
-            currentlyEditingLink.originalDescription = null;
-
-            currentlyEditingLink.ID = null;
-        } else {
-            console.error("Failed to edit category");
-        }
-    }
-
-    async function cancelLinkEdit(linkID, categoryID, text = undefined, description = undefined) {
-        let linkEl = document.querySelector(`[key=link-${linkID}]`);
-        let linkInput = linkEl.querySelector("input");
-        let linkTextarea = linkEl.querySelector("textarea");
-        let linkImg = linkEl.querySelector("div:first-child img");
-        let fileUploaderOverlay = linkImg.nextElementSibling;
-        let editActions = linkEl.querySelector("[data-edit-actions]");
-
-        console.log(linkInput);
-        console.log(editActions);
-
-        if (currentlyEditingLink.icon !== null) {
-            linkImg.src = currentlyEditingLink.icon;
-        }
-
-        editActions.querySelector("div").classList.remove("hidden");
-        editActions.querySelector("div").classList.add("flex");
-
-        editActions.querySelector("div:nth-child(2)").classList.add("hidden");
-        editActions.querySelector("div:nth-child(2)").classList.remove("flex");
-
-        fileUploaderOverlay.classList.add("hidden");
-        fileUploaderOverlay.classList.remove("flex");
-
-        if (text === undefined) {
-            text = currentlyEditingLink.originalText;
-        }
-
-        if (description === undefined) {
-            description = currentlyEditingLink.originalDescription;
-        }
-
-        restoreElementFromInput(linkInput, text);
-        restoreElementFromInput(linkTextarea, description);
-
-        currentlyEditingLink.ID = null;
-        targetedImageElement = null;
-    }
-
-    let currentlyDeletingLink = {
-        ID: null,
-        categoryID: null,
-    };
-
-    async function deleteLink(linkID, categoryID) {
-        currentlyDeletingLink.ID = linkID;
-        currentlyDeletingLink.categoryID = categoryID;
-
-        let linkNameSpan = document.getElementById("link-name");
-        linkNameSpan.textContent = document.querySelector(`[key=link-${linkID}] h3`).textContent;
-
-        openModal("link-delete");
-    }
-
-    async function confirmDeleteLink() {
-        let res = await fetch(`/api/category/${currentlyDeletingLink.categoryID}/link/${currentlyDeletingLink.ID}`, {
-            method: "DELETE"
-        });
-
-        if (res.status === 200) {
-            let linkEl = document.querySelector(`[key="link-${currentlyDeletingLink.ID}"]`);
-            linkEl.remove();
-
-            closeModal();
-        }
-    }
-
-    let currentlyEditingCategory = {
-        ID: null,
-        originalText: null,
-        icon: null,
-    };
-
-    async function editCategory(categoryID) {
-        if (currentlyEditingCategory.ID !== null) {
-            // cancel the edit if it's already in progress
-            cancelCategoryEdit(currentlyEditingCategory.ID);
-        }
-
-        currentlyEditingCategory.ID = categoryID;
-
-        let categoryEl = document.querySelector(`[key=category-${categoryID}]`);
-        let categoryName = categoryEl.querySelector("h2");
-        let categoryIcon = categoryEl.querySelector("div img");
-        let fileUploaderOverlay = categoryIcon.nextElementSibling;
-        let editActions = categoryEl.querySelector("[data-edit-actions]");
-
-        currentlyEditingCategory.originalText = categoryName.textContent;
-        currentlyEditingCategory.icon = categoryIcon.src;
-
-        iconUploader.accept = "image/svg+xml";
-        targetedImageElement = categoryIcon;
-
-        editActions.querySelector("div").classList.add("hidden");
-        editActions.querySelector("div").classList.remove("flex");
-
-        editActions.querySelector("div:nth-child(2)").classList.remove("hidden");
-        editActions.querySelector("div:nth-child(2)").classList.add("flex");
-
-        fileUploaderOverlay.classList.remove("hidden");
-        fileUploaderOverlay.classList.add("flex");
-
-        replaceWithResizableInput(categoryName);
-    }
-
-    async function confirmCategoryEdit(categoryID) {
-        let categoryEl = document.querySelector(`[key=category-${categoryID}]`);
-        let categoryInput = categoryEl.querySelector("input");
-        let categoryIcon = categoryEl.querySelector("div img");
-        let fileUploaderOverlay = categoryIcon.nextElementSibling;
-        let editActions = categoryEl.querySelector("[data-edit-actions]");
-
-        if (categoryInput.value === "") {
-            return;
-        }
-
-        categoryInput.value = categoryInput.value.trim();
-
-        let formData = new FormData();
-        if (categoryInput.value !== currentlyEditingCategory.originalText) {
-            formData.append("name", categoryInput.value)
-        }
-
-        if (iconUploader.files.length > 0) {
-            formData.append("icon", iconUploader.files[0]);
-        }
-
-        // nothing to update
-        if (formData.get("name") === null && formData.get("icon") === null) {
-            return;
-        }
-
-        let res = await fetch(`/api/category/${categoryID}`, {
-            method: "PATCH",
-            body: formData
-        });
-
-        if (res.status === 200) {
-
-            iconUploader.value = "";
-
-            cancelCategoryEdit(categoryID, categoryInput.value || currentlyEditingCategory.originalText);
-
-            currentlyEditingCategory.icon = null;
-            currentlyEditingCategory.originalText = null;
-
-            currentlyEditingCategory.ID = null;
-        } else {
-            console.error("Failed to edit category");
-        }
-    }
-
-    async function cancelCategoryEdit(categoryID, text = undefined) {
-        let categoryEl = document.querySelector(`[key=category-${categoryID}]`);
-        let categoryInput = categoryEl.querySelector("input");
-        let categoryIcon = categoryEl.querySelector("div img");
-        let fileUploaderOverlay = categoryIcon.nextElementSibling;
-        let editActions = categoryEl.querySelector("[data-edit-actions]");
-
-        console.log(categoryInput);
-        console.log(editActions);
-
-        if (currentlyEditingCategory.icon !== null) {
-            categoryIcon.src = currentlyEditingCategory.icon;
-        }
-
-        editActions.querySelector("div").classList.remove("hidden");
-        editActions.querySelector("div").classList.add("flex");
-
-        editActions.querySelector("div:nth-child(2)").classList.add("hidden");
-        editActions.querySelector("div:nth-child(2)").classList.remove("flex");
-
-        fileUploaderOverlay.classList.remove("flex");
-        fileUploaderOverlay.classList.add("hidden");
-
-        restoreElementFromInput(categoryInput, text || currentlyEditingCategory.originalText);
-
-        currentlyEditingCategory.ID = null;
-        targetedImageElement = null;
-    }
-
-    let currentlyDeletingCategory = {
-        ID: null,
-    };
-
-    async function deleteCategory(categoryID) {
-        currentlyDeletingCategory.ID = categoryID;
-
-        let categoryNameSpan = document.getElementById("category-name");
-        categoryNameSpan.textContent = document.querySelector(`[key=category-${categoryID}] h2`).textContent;
-
-        openModal("category-delete");
-    }
-
-    async function confirmDeleteCategory() {
-        let res = await fetch(`/api/category/${currentlyDeletingCategory.ID}`, {
-            method: "DELETE"
-        });
-
-        if (res.status === 200) {
-            let categoryEl = document.querySelector(`[key="category-${currentlyDeletingCategory.ID}"]`);
-            // get the next element and remove it (its the link grid)
-            let nextEl = categoryEl.nextElementSibling;
-            nextEl.remove();
-            categoryEl.remove();
-
-            closeModal();
-        }
-    }
-
-    /**
-    * Replaces an H2 element with a resizable input field that matches its initial text and styling.
-    * @param {HTMLElement} targetEl The element to replace.
-    */
-    function replaceWithResizableInput(targetEl) {
-        const originalText = targetEl.textContent;
-        const computedStyle = window.getComputedStyle(targetEl);
-
-        const inputElement = document.createElement('input');
-        inputElement.type = 'text';
-        inputElement.value = originalText;
-        inputElement.className = 'resizable-input';
-        inputElement.placeholder = 'Enter title...';
-        inputElement.dataset.originalElementType = targetEl.tagName;
-        inputElement.dataset.originalClassName = targetEl.className;
-
-        const stylesToCopy = [
-            'font-family', 'font-size', 'font-weight', 'font-style', 'color',
-            'line-height', 'letter-spacing', 'text-transform', 'text-align',
-            'padding-top', 'padding-right', 'padding-bottom', 'padding-left',
-            'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width',
-            'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style',
-            'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color',
-            'border-radius', 'box-sizing',
-            'margin-top', 'margin-right', 'margin-bottom', 'margin-left',
-            'height'
-        ];
-
-        stylesToCopy.forEach(prop => {
-            inputElement.style[prop] = computedStyle[prop];
-        });
-
-        inputElement.style.display = 'inline-block';
-        inputElement.style.backgroundColor = 'var(--color-base)';
-        inputElement.style.border = '1px solid var(--color-highlight-sm)';
-        inputElement.style.borderRadius = '0.375rem';
-        inputElement.maxLength = 50;
-
-        /**
-         * Function to measure the text width accurately and apply it to the input.
-         * @param {HTMLInputElement} inputEl The input element to resize.
-         */
-        const resizeInput = (inputEl) => {
-            const tempSpan = document.createElement('span');
-            const currentInputComputedStyle = window.getComputedStyle(inputEl);
-
-            const textStylesToCopy = [
-                'font-family', 'font-size', 'font-weight', 'font-style', 'letter-spacing',
-                'text-transform', 'line-height'
-            ];
-            textStylesToCopy.forEach(prop => {
-                tempSpan.style[prop] = currentInputComputedStyle[prop];
-            });
-
-            tempSpan.style.position = 'absolute';
-            tempSpan.style.visibility = 'hidden';
-            tempSpan.style.whiteSpace = 'nowrap';
-            tempSpan.textContent = inputEl.value === '' ? inputEl.placeholder || 'W' : inputEl.value;
-
-            document.body.appendChild(tempSpan);
-            let measuredTextWidth = tempSpan.offsetWidth;
-            document.body.removeChild(tempSpan);
-
-            // Add a small buffer for the caret and a bit of extra space
-            const caretBuffer = 10;
-            let finalWidth = measuredTextWidth + caretBuffer;
-
-            const minWidth = 100;
-            finalWidth = Math.max(finalWidth, minWidth);
-
-            if (currentInputComputedStyle.boxSizing === 'border-box') {
-                const hPadding = parseFloat(currentInputComputedStyle.paddingLeft) + parseFloat(currentInputComputedStyle.paddingRight);
-                const hBorder = parseFloat(currentInputComputedStyle.borderLeftWidth) + parseFloat(currentInputComputedStyle.borderRightWidth);
-                inputEl.style.width = (finalWidth + hPadding + hBorder) + 'px';
-            } else {
-                inputEl.style.width = finalWidth + 'px';
-            }
-        };
-
-        setTimeout(() => resizeInput(inputElement), 0);
-        inputElement.addEventListener('input', () => resizeInput(inputElement));
-        targetEl.parentNode.replaceChild(inputElement, targetEl);
-
-        inputElement.focus();
-    }
-
-    function replaceWithResizableTextarea(targetEl) {
-        const originalText = targetEl.textContent;
-        const computedStyle = window.getComputedStyle(targetEl);
-
-        const inputElement = document.createElement('textarea');
-        inputElement.value = originalText;
-        inputElement.className = 'resizable-input';
-        inputElement.placeholder = 'Enter title...';
-        inputElement.dataset.originalElementType = targetEl.tagName;
-        inputElement.dataset.originalClassName = targetEl.className;
-
-        const stylesToCopy = [
-            'font-family', 'font-size', 'font-weight', 'font-style', 'color',
-            'line-height', 'letter-spacing', 'text-transform', 'text-align',
-            'padding-top', 'padding-right', 'padding-bottom', 'padding-left',
-            'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width',
-            'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style',
-            'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color',
-            'border-radius', 'box-sizing',
-            'margin-top', 'margin-right', 'margin-bottom', 'margin-left',
-            'height'
-        ];
-
-        stylesToCopy.forEach(prop => {
-            inputElement.style[prop] = computedStyle[prop];
-        });
-
-        inputElement.style.backgroundColor = 'var(--color-base)';
-        inputElement.style.border = '1px solid var(--color-highlight-sm)';
-        inputElement.style.borderRadius = '0.375rem';
-        inputElement.style.resize = 'none';
-        inputElement.style.overflow = 'hidden';
-        inputElement.style.width = '100%';
-        inputElement.style.outline = 'none';
-        inputElement.maxLength = 150;
-
-        function resize() {
-            inputElement.style.height = "0px";
-            inputElement.style.height = inputElement.scrollHeight + "px";
-        }
-
-        setTimeout(() => resize(), 0);
-        inputElement.addEventListener('input', () => resize());
-        targetEl.parentNode.replaceChild(inputElement, targetEl);
-
-        inputElement.focus();
-    }
-
-    function restoreElementFromInput(inputEl, originalText) {
-        const computedStyle = window.getComputedStyle(inputEl);
-
-        let elementType = inputEl.dataset.originalElementType;
-        const newElement = document.createElement(elementType);
-        newElement.textContent = originalText;
-        newElement.className = inputEl.dataset.originalClassName;
-
-        newElement.style.border = '1px solid #0000';
-
-        const stylesToCopy = [
-            'font-family', 'font-size', 'font-weight', 'font-style', 'color',
-            'line-height', 'letter-spacing', 'text-transform', 'text-align',
-            'padding-top', 'padding-right', 'padding-bottom', 'padding-left', 'box-sizing',
-            'margin-top', 'margin-right', 'margin-bottom', 'margin-left',
-            'height'
-        ];
-
-        stylesToCopy.forEach(prop => {
-            newElement.style[prop] = computedStyle[prop];
-        });
-
-        inputEl.parentNode.replaceChild(newElement, inputEl);
-    }
-</script>
-
-<style>
-    .modal-bg {
-        visibility: hidden;
-        opacity: 0;
-    }
-
-    .modal-bg.is-visible {
-        visibility: visible;
-        opacity: 1;
-    }
-
-    .modal {
-        opacity: 0;
-    }
-
-    .modal.is-visible {
-        opacity: 1;
-    }
-
-    @media (prefers-reduced-motion: no-preference) {
-        .modal-bg {
-            visibility: hidden;
-            opacity: 0;
-
-            transition: opacity 0.3s ease, visibility 0s 0.3s;
-            transition-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
-        }
-
-        .modal-bg.is-visible {
-            visibility: visible;
-            opacity: 1;
-            transition-delay: 0s;
-        }
-
-        .modal {
-            opacity: 0;
-            transform: translateY(20px) scale(0.95);
-
-            transition: opacity 0.3s ease, transform 0.3s ease;
-            transition-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
-        }
-
-        .modal.is-visible {
-            opacity: 1;
-            visibility: visible;
-            transform: translateY(0) scale(1);
-            transition-delay: 0s;
-        }
-    }
-</style>
+<!-- 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 class="relative" data-img-container>
+        <img width="64" height="64" draggable="false" />
+    </div>
+    <div class="flex-grow flex flex-col gap-y-px overflow-hidden" data-text-container>
+        <h3 class="border border-transparent"></h3>
+        <!-- add 2 to the height to account for the border -->
+        <p class="min-h-[22px] border border-transparent"></p>
+    </div>
+</div>
+
+<div id="template-category" class="hidden">
+    <div class="flex items-center category-header">
+        <div class="category-img" data-img-container>
+            <img width="32" height="32" draggable="false" />
+        </div>
+        <h2></h2>
+    </div>
+    <div class="link-grid">
+        <div class="new-link-card">
+            <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 id="template-edit-actions" class="hidden" data-edit-actions>
+    <div class="flex flex-row gap-2" data-primary-actions>
+        <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 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="flex flex-row gap-2" data-confirm-actions id="confirm-actions">
+        <button class="action-button text-success" onclick="confirmEdit()">
+            <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="m5 12l5 5L20 7" />
+            </svg>
+        </button>
+        <button class="action-button text-error" onclick="cancelEdit()">
+            <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="M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0m15.364-6.364L5.636 18.364" />
+            </svg>
+        </button>
+    </div>
+
+    <!-- This is the element that appears on top of the icon when the user is editing it that allows for changing the icon -->
+    <button id="select-icon-button" onclick="selectIcon()"
+        class="flex absolute inset-0 bg-highlight/80 rounded-md text-base items-center justify-center"
+        draggable="false">
+        <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28"
+            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 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2M7 9l5-5l5 5m-5-5v12" />
+        </svg>
+    </button>
+</div>
+
+{{{embedFile "scripts/admin.js"}}}

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" width="32" height="32" draggable="false" alt="{{this.Name}}"
-                src="{{this.Icon}}" />
+            <img class="object-contain mr-2 select-none size-8" width="32" height="32" draggable="false"
+                alt="{{this.Name}}" 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>
+        <div class="link-grid">
+            {{#each this.Links}}
+            <a href="{{this.URL}}" class="link-card" draggable="false" target="_blank" rel="noopener noreferrer">
+                <div data-img-container>
                     <img width="64" height="64" draggable="false" src="{{this.Icon}}" alt="{{this.Name}}" />
                 </div>
-                <div>
+                <div data-text-container>
                     <h3>{{this.Name}}</h3>
                     <p class="min-h-5">{{this.Description}}</p>
                 </div>

zqdgr.config.json

@@ -1,6 +1,6 @@
 {
     "name": "passport",
-    "version": "0.2.0",
+    "version": "0.3.2",
     "description": "Passport is a simple, lightweight, and fast dashboard/new tab page for your browser.",
     "author": "juls0730",
     "license": "BSL-1.0",
@@ -11,8 +11,8 @@
     },
     "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"
+        "build": "go generate ./src/ && go build -tags netgo,prod -ldflags=\"-w -s\" -o passport src/main.go"
     },
-    "pattern": "src/**/*.{go,hbs,scss,svg,png,jpg,jpeg,webp,woff2,ico,webp}",
+    "pattern": "src/**/*.{go,hbs,js,css,scss,svg,png,jpg,jpeg,webp,woff2,ico,webp}",
     "shutdown_signal": "SIGINT"
 }