Add composer install commands to version list

Author: retlehs

internal/http/templates/detail.html

@@ -56,17 +56,20 @@ <h1 class="text-2xl font-bold text-gray-900">{{if .Package.DisplayName}}{{.Packa
 {{if .Versions}}
 <ol class="rounded-xl border border-gray-200/60 overflow-hidden divide-y divide-gray-200/40 list-none m-0 p-0">
 {{range $i, $v := .Versions}}
-<li class="ver-row flex items-center justify-between py-3 px-4 text-sm hover:bg-gray-50/50 transition-colors{{if ge $i 10}} hidden{{end}}">
+<li class="ver-row py-3 px-4 text-sm hover:bg-gray-50/50 transition-colors{{if ge $i 5}} hidden{{end}}">
+<div class="flex items-center gap-2">
 <span class="font-mono text-gray-900">{{$v.Version}}</span>
 {{if $v.IsLatest}}<span class="inline-flex items-center rounded-md bg-brand-primary px-2 py-0.5 text-[10px] font-medium text-white">latest</span>{{end}}
+</div>
+<code class="inline-flex items-center gap-1.5 mt-1 text-xs font-mono text-gray-400 cursor-pointer hover:text-gray-600 transition-colors" onclick="navigator.clipboard.writeText('composer require wp-{{$.Package.Type}}/{{$.Package.Name}}:{{$v.Version}}')"><span>composer require wp-{{$.Package.Type}}/{{$.Package.Name}}:{{$v.Version}}</span><svg class="w-3.5 h-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9.75a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184"/></svg></code>
 </li>
 {{end}}
 </ol>
-{{if gt (len .Versions) 10}}
+{{if gt (len .Versions) 5}}
 <button id="versions-toggle" class="mt-3 text-sm font-medium text-brand-primary hover:underline" onclick="
 const rows = document.querySelectorAll('.ver-row');
 const showing = this.dataset.expanded === '1';
-for (let i = 10; i < rows.length; i++) {
+for (let i = 5; i < rows.length; i++) {
   rows[i].classList.toggle('hidden', showing);
 }
 this.dataset.expanded = showing ? '0' : '1';