From 88df0c4ae566918d64cdbb127cce19d4767a6e02 Mon Sep 17 00:00:00 2001
From: Evan Jarrett <evan@evanjarrett.com>
Date: Mon, 24 Nov 2025 13:51:00 -0600
Subject: [PATCH] fix tag deletion in UI

---
 pkg/appview/templates/pages/repository.html |  4 ++--
 pkg/appview/ui.go                           |  7 +++++--
 pkg/appview/ui_test.go                      | 15 +++++++++++++++
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/pkg/appview/templates/pages/repository.html b/pkg/appview/templates/pages/repository.html
index cabdaef..ae407a6 100644
--- a/pkg/appview/templates/pages/repository.html
+++ b/pkg/appview/templates/pages/repository.html
@@ -109,7 +109,7 @@
                 {{ if .Tags }}
                     <div class="tags-list">
                         {{ range .Tags }}
-                        <div class="tag-item" id="tag-{{ .Tag.Tag }}">
+                        <div class="tag-item" id="tag-{{ sanitizeID .Tag.Tag }}">
                             <div class="tag-item-header">
                                 <div>
                                     <span class="tag-name-large">{{ .Tag.Tag }}</span>
@@ -125,7 +125,7 @@
                                     <button class="delete-btn"
                                             hx-delete="/api/images/{{ $.Repository.Name }}/tags/{{ .Tag.Tag }}"
                                             hx-confirm="Delete tag {{ .Tag.Tag }}?"
-                                            hx-target="#tag-{{ .Tag.Tag }}"
+                                            hx-target="#tag-{{ sanitizeID .Tag.Tag }}"
                                             hx-swap="outerHTML">
                                         <i data-lucide="trash-2"></i>
                                     </button>
diff --git a/pkg/appview/ui.go b/pkg/appview/ui.go
index 3dab4d3..ef2d625 100644
--- a/pkg/appview/ui.go
+++ b/pkg/appview/ui.go
@@ -85,9 +85,12 @@ func Templates() (*template.Template, error) {
 		},
 
 		"sanitizeID": func(s string) string {
-			// Replace colons with dashes to make valid CSS selectors
+			// Replace special CSS selector characters with dashes
 			// e.g., "sha256:abc123" becomes "sha256-abc123"
-			return strings.ReplaceAll(s, ":", "-")
+			// e.g., "v0.0.2" becomes "v0-0-2"
+			s = strings.ReplaceAll(s, ":", "-")
+			s = strings.ReplaceAll(s, ".", "-")
+			return s
 		},
 
 		"parseLicenses": func(licensesStr string) []licenses.LicenseInfo {
diff --git a/pkg/appview/ui_test.go b/pkg/appview/ui_test.go
index e812215..6efa756 100644
--- a/pkg/appview/ui_test.go
+++ b/pkg/appview/ui_test.go
@@ -483,6 +483,21 @@ func TestSanitizeID(t *testing.T) {
 			input:    "abc:",
 			expected: "abc-",
 		},
+		{
+			name:     "version tag with periods",
+			input:    "v0.0.2",
+			expected: "v0-0-2",
+		},
+		{
+			name:     "colons and periods",
+			input:    "sha256:abc.def",
+			expected: "sha256-abc-def",
+		},
+		{
+			name:     "only period",
+			input:    ".",
+			expected: "-",
+		},
 	}
 
 	for _, tt := range tests {