From dc2647977ce8e5f4ed376347c026c6293dee29fc Mon Sep 17 00:00:00 2001
From: Jonathan Miller <jmiller-moko@noreply.git.mokoconsulting.tech>
Date: Sat, 30 May 2026 23:21:42 -0500
Subject: [PATCH] fix(ui): use HTML details/summary for package create toggle

Replace broken JavaScript onclick toggle with native HTML
<details>/<summary> element. Works without JS, accessible,
and styled as a Fomantic UI button.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 templates/org/licenses.tmpl  | 73 ++++++++++++++++++------------------
 templates/repo/licenses.tmpl | 70 +++++++++++++++++-----------------
 2 files changed, 72 insertions(+), 71 deletions(-)

diff --git a/templates/org/licenses.tmpl b/templates/org/licenses.tmpl
index 03d3f12f23..e76059b082 100644
--- a/templates/org/licenses.tmpl
+++ b/templates/org/licenses.tmpl
@@ -19,49 +19,48 @@
 			</div>
 		{{end}}
 
-		<h4 class="ui top attached header tw-flex tw-justify-between tw-items-center">
-			<span>{{svg "octicon-key" 16}} {{ctx.Locale.Tr "repo.licenses.packages"}}</span>
-			{{if .IsRepoAdmin}}
-				<a class="ui small primary button" href="#new-package-form" onclick="this.parentElement.parentElement.nextElementSibling.querySelector('#new-package-form').style.display='block'; return false;">
-					{{ctx.Locale.Tr "repo.licenses.new_package"}}
-				</a>
-			{{end}}
+		<h4 class="ui top attached header">
+			{{svg "octicon-key" 16}} {{ctx.Locale.Tr "repo.licenses.packages"}}
 		</h4>
 		<div class="ui attached segment">
 			{{if .IsRepoAdmin}}
-				<div id="new-package-form" style="display: none;" class="tw-mb-4">
-					<form class="ui form" method="post" action="{{$.Org.HomeLink}}/-/licenses/packages">
-						{{.CsrfTokenHtml}}
-						<div class="two fields">
-							<div class="required field">
-								<label>{{ctx.Locale.Tr "repo.licenses.package_name"}}</label>
-								<input name="name" required placeholder="Pro Annual">
+				<details class="tw-mb-4">
+					<summary class="ui primary button">{{svg "octicon-plus" 14}} {{ctx.Locale.Tr "repo.licenses.new_package"}}</summary>
+					<div class="tw-mt-4">
+						<form class="ui form" method="post" action="{{$.Org.HomeLink}}/-/licenses/packages">
+							{{.CsrfTokenHtml}}
+							<div class="two fields">
+								<div class="required field">
+									<label>{{ctx.Locale.Tr "repo.licenses.package_name"}}</label>
+									<input name="name" required placeholder="e.g. Pro Annual, Basic Monthly">
+								</div>
+								<div class="field">
+									<label>{{ctx.Locale.Tr "repo.licenses.description"}}</label>
+									<input name="description" placeholder="e.g. Annual pro subscription">
+								</div>
 							</div>
-							<div class="field">
-								<label>{{ctx.Locale.Tr "repo.licenses.description"}}</label>
-								<input name="description" placeholder="Annual pro subscription">
+							<div class="three fields">
+								<div class="field">
+									<label>{{ctx.Locale.Tr "repo.licenses.duration"}} ({{ctx.Locale.Tr "repo.licenses.days"}})</label>
+									<input name="duration_days" type="number" value="0" min="0">
+									<p class="help">0 = {{ctx.Locale.Tr "repo.licenses.lifetime"}}</p>
+								</div>
+								<div class="field">
+									<label>{{ctx.Locale.Tr "repo.licenses.max_sites"}}</label>
+									<input name="max_sites" type="number" value="0" min="0">
+									<p class="help">0 = unlimited</p>
+								</div>
+								<div class="field">
+									<label>{{ctx.Locale.Tr "repo.licenses.channels"}}</label>
+									<input name="allowed_channels" placeholder="stable,release-candidate">
+									<p class="help">{{ctx.Locale.Tr "repo.licenses.channels_help"}}</p>
+								</div>
 							</div>
-						</div>
-						<div class="three fields">
-							<div class="field">
-								<label>{{ctx.Locale.Tr "repo.licenses.duration"}} ({{ctx.Locale.Tr "repo.licenses.days"}})</label>
-								<input name="duration_days" type="number" value="0" min="0">
-							</div>
-							<div class="field">
-								<label>{{ctx.Locale.Tr "repo.licenses.max_sites"}}</label>
-								<input name="max_sites" type="number" value="0" min="0">
-							</div>
-							<div class="field">
-								<label>{{ctx.Locale.Tr "repo.licenses.channels"}}</label>
-								<input name="allowed_channels" placeholder="stable,release-candidate">
-							</div>
-						</div>
-						<button class="ui primary button" type="submit">{{ctx.Locale.Tr "repo.licenses.create_package"}}</button>
-					</form>
-					<div class="divider"></div>
-				</div>
+							<button class="ui primary button" type="submit">{{ctx.Locale.Tr "repo.licenses.create_package"}}</button>
+						</form>
+					</div>
+				</details>
 			{{end}}
-
 			{{if .LicensePackages}}
 				<table class="ui table">
 					<thead>
diff --git a/templates/repo/licenses.tmpl b/templates/repo/licenses.tmpl
index 4fd62a88eb..c4fa9207b3 100644
--- a/templates/repo/licenses.tmpl
+++ b/templates/repo/licenses.tmpl
@@ -81,41 +81,43 @@
 
 		{{/* ── Create New License Package ── */}}
 		{{if .IsRepoAdmin}}
-			<h4 class="ui top attached header tw-mt-4">
-				{{svg "octicon-plus" 16}} {{ctx.Locale.Tr "repo.licenses.create_new_package"}}
-			</h4>
-			<div class="ui attached segment">
-				<form class="ui form" method="post" action="{{.RepoLink}}/licenses/packages">
-					{{.CsrfTokenHtml}}
-					<div class="two fields">
-						<div class="required field">
-							<label>{{ctx.Locale.Tr "repo.licenses.package_name"}}</label>
-							<input name="name" required placeholder="e.g. Pro Annual, Basic Monthly">
-						</div>
-						<div class="field">
-							<label>{{ctx.Locale.Tr "repo.licenses.description"}}</label>
-							<input name="description" placeholder="e.g. Annual pro subscription with all channels">
-						</div>
+			<div class="tw-mt-4">
+				<details>
+					<summary class="ui primary button">{{svg "octicon-plus" 14}} {{ctx.Locale.Tr "repo.licenses.new_package"}}</summary>
+					<div class="ui segment tw-mt-2">
+						<form class="ui form" method="post" action="{{.RepoLink}}/licenses/packages">
+							{{.CsrfTokenHtml}}
+							<div class="two fields">
+								<div class="required field">
+									<label>{{ctx.Locale.Tr "repo.licenses.package_name"}}</label>
+									<input name="name" required placeholder="e.g. Pro Annual, Basic Monthly">
+								</div>
+								<div class="field">
+									<label>{{ctx.Locale.Tr "repo.licenses.description"}}</label>
+									<input name="description" placeholder="e.g. Annual pro subscription with all channels">
+								</div>
+							</div>
+							<div class="three fields">
+								<div class="field">
+									<label>{{ctx.Locale.Tr "repo.licenses.duration"}} ({{ctx.Locale.Tr "repo.licenses.days"}})</label>
+									<input name="duration_days" type="number" value="0" min="0">
+									<p class="help">0 = {{ctx.Locale.Tr "repo.licenses.lifetime"}}</p>
+								</div>
+								<div class="field">
+									<label>{{ctx.Locale.Tr "repo.licenses.max_sites"}}</label>
+									<input name="max_sites" type="number" value="0" min="0">
+									<p class="help">0 = unlimited</p>
+								</div>
+								<div class="field">
+									<label>{{ctx.Locale.Tr "repo.licenses.channels"}}</label>
+									<input name="allowed_channels" placeholder="stable,release-candidate">
+									<p class="help">{{ctx.Locale.Tr "repo.licenses.channels_help"}}</p>
+								</div>
+							</div>
+							<button class="ui primary button" type="submit">{{ctx.Locale.Tr "repo.licenses.create_package"}}</button>
+						</form>
 					</div>
-					<div class="three fields">
-						<div class="field">
-							<label>{{ctx.Locale.Tr "repo.licenses.duration"}} ({{ctx.Locale.Tr "repo.licenses.days"}})</label>
-							<input name="duration_days" type="number" value="0" min="0">
-							<p class="help">0 = {{ctx.Locale.Tr "repo.licenses.lifetime"}}</p>
-						</div>
-						<div class="field">
-							<label>{{ctx.Locale.Tr "repo.licenses.max_sites"}}</label>
-							<input name="max_sites" type="number" value="0" min="0">
-							<p class="help">0 = unlimited</p>
-						</div>
-						<div class="field">
-							<label>{{ctx.Locale.Tr "repo.licenses.channels"}}</label>
-							<input name="allowed_channels" placeholder="stable,release-candidate">
-							<p class="help">{{ctx.Locale.Tr "repo.licenses.channels_help"}}</p>
-						</div>
-					</div>
-					<button class="ui primary button" type="submit">{{ctx.Locale.Tr "repo.licenses.create_package"}}</button>
-				</form>
+				</details>
 			</div>
 		{{end}}
 
-- 
2.52.0