Use notice component on detail page via notice-open

Split notice into notice-open (outputs wrapper + icon) and notice
(adds Content span). Complex content like the detail page untagged
warning uses notice-open directly with inline template content.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: retlehs

internal/http/templates/components.html

@@ -8,14 +8,18 @@
 </div>
 {{end}}
 
-{{define "notice"}}
-<div class="inline-flex items-start gap-2 rounded-lg border px-4 py-2 text-sm {{if eq .Variant "caution"}}border-red-200 bg-red-50 text-red-900{{else if eq .Variant "warning"}}border-amber-200 bg-amber-50 text-amber-900{{else if eq .Variant "tip"}}border-green-200 bg-green-50 text-green-900{{else if eq .Variant "important"}}border-purple-200 bg-purple-50 text-purple-900{{else}}border-blue-200 bg-blue-50 text-blue-900{{end}}{{with .Class}} {{.}}{{end}}">
+{{define "notice-open"}}
+<div class="flex items-start gap-2 rounded-lg border px-4 py-2 text-sm {{if eq .Variant "caution"}}border-red-200 bg-red-50 text-red-900{{else if eq .Variant "warning"}}border-amber-200 bg-amber-50 text-amber-900{{else if eq .Variant "tip"}}border-green-200 bg-green-50 text-green-900{{else if eq .Variant "important"}}border-purple-200 bg-purple-50 text-purple-900{{else}}border-blue-200 bg-blue-50 text-blue-900{{end}}{{with .Class}} {{.}}{{end}}">
 {{if eq .Variant "caution"}}<svg class="w-5 h-5 text-red-600 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9.75v6.75m0 0a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-9.303-3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126Z"/></svg>
 {{else if eq .Variant "warning"}}<svg class="w-5 h-5 text-amber-600 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"/></svg>
 {{else if eq .Variant "tip"}}<svg class="w-5 h-5 text-green-600 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 18v-5.25m0 0a6.01 6.01 0 0 0 1.5-.189m-1.5.189a6.01 6.01 0 0 1-1.5-.189m3.75 7.478a12.06 12.06 0 0 1-4.5 0m3.75 2.383a14.406 14.406 0 0 1-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 1 0-7.517 0c.85.493 1.509 1.333 1.509 2.316V18"/></svg>
 {{else if eq .Variant "important"}}<svg class="w-5 h-5 text-purple-600 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"/></svg>
 {{else}}<svg class="w-5 h-5 text-blue-600 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"/></svg>
-{{end}}<span class="text-balance">{{.Content}}</span>
+{{end}}
+{{end}}
+
+{{define "notice"}}
+{{template "notice-open" .}}<span class="text-balance">{{.Content}}</span>
 </div>
 {{end}}
 

internal/http/templates/detail.html

@@ -24,9 +24,8 @@
 <span class="text-gray-900 font-medium truncate">{{if .Package.DisplayName}}{{.Package.DisplayName}}{{else}}{{.Package.Name}}{{end}}</span>
 </nav>
 {{if .Untagged}}
-<div class="rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 mb-6 flex items-start gap-3 overflow-hidden">
-<svg class="w-5 h-5 text-amber-600 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"/></svg>
-<div class="text-sm text-amber-900 min-w-0">
+{{template "notice-open" dict "Variant" "warning" "Class" "mb-6"}}
+<div class="min-w-0">
 {{if .TrunkOnly}}<p class="font-medium">No tagged releases in SVN</p>
 <p class="mt-1">This plugin releases exclusively via SVN trunk. Install with <code class="text-xs font-mono bg-amber-100 px-1 py-0.5 rounded">dev-trunk</code> &mdash; Composer will pin to a specific SVN revision in your lock file. <button onclick="openTagRequest('{{.Package.Name}}')" class="font-medium underline underline-offset-2 hover:no-underline cursor-pointer">Ask the author to tag their releases</button> or see <a href="/untagged" class="font-medium underline underline-offset-2 hover:no-underline">all untagged plugins</a>.</p>
 {{else}}<p class="font-medium">Latest version not tagged in SVN</p>