From 94765dfce12fdaa57e4359326d0f848699e8590d Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Fri, 15 May 2026 11:02:32 +0200
Subject: [PATCH] appview/{starBtn,forkBtn}: style 'split' buttons properly

this change makes the fork and star buttons use the .btn and
.btn-group css classes for ease of maintenance and visual
constistency
---
 appview/pages/templates/fragments/starBtn.html         | 10 +++++-----
 appview/pages/templates/layouts/repobase.html          |  6 +++---
 .../pages/templates/timeline/fragments/timeline.html   |  4 ++--
 appview/pages/templates/user/fragments/repoCard.html   |  2 +-
 input.css                                              |  3 ++-
 5 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/appview/pages/templates/fragments/starBtn.html b/appview/pages/templates/fragments/starBtn.html
index 2f2998e8..af5542e3 100644
--- a/appview/pages/templates/fragments/starBtn.html
+++ b/appview/pages/templates/fragments/starBtn.html
@@ -2,12 +2,12 @@
     {{/* NOTE: this fragment is always replaced with hx-swap-oob */}}
     <div
         id="starBtn"
-        class="flex w-full min-h-[30px] items-stretch overflow-hidden rounded border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-sm"
+        class="btn-group w-full"
         data-star-subject-at="{{ .SubjectAt }}"
         {{ if .HxSwapOob }}hx-swap-oob='outerHTML:#starBtn[data-star-subject-at="{{ .SubjectAt }}"]'{{ end }}
     >
         <button
-            class="flex flex-1 justify-center gap-2 items-center px-2 group disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50 dark:hover:bg-gray-700"
+            class="btn-group-item active flex-1 group"
             {{ if .IsStarred }}
                 hx-delete="/star?subject={{ .SubjectAt }}&countHint={{ .StarCount }}&repoName={{ .RepoName }}"
             {{ else }}
@@ -22,19 +22,19 @@
                 {{ i "star" "w-4 h-4 inline group-[.htmx-request]:hidden" }}
             {{ end }}
             {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
-            <span class="text-sm group-[.htmx-request]:hidden">{{ if .IsStarred }}unstar{{ else }}star{{ end }}</span>
+            <span class="group-[.htmx-request]:hidden">{{ if .IsStarred }}unstar{{ else }}star{{ end }}</span>
         </button>
         {{ if .RepoName }}
             {{ $did := .SubjectAt.Authority | string }}
             <a
                 href="/{{ resolve $did }}/{{ .RepoName }}/stars"
-                class="flex items-center px-2 text-sm no-underline hover:no-underline border-l border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700"
+                class="btn-group-item"
                 title="Starred by"
             >
                 {{ .StarCount }}
             </a>
         {{ else }}
-            <span class="flex items-center px-2 text-sm border-l border-gray-200 dark:border-gray-700">
+            <span class="btn-group-item cursor-default">
                 {{ .StarCount }}
             </span>
         {{ end }}
diff --git a/appview/pages/templates/layouts/repobase.html b/appview/pages/templates/layouts/repobase.html
index ee39192b..34aa76ad 100644
--- a/appview/pages/templates/layouts/repobase.html
+++ b/appview/pages/templates/layouts/repobase.html
@@ -117,9 +117,9 @@
             "IsStarred" .RepoInfo.IsStarred
             "StarCount" .RepoInfo.Stats.StarCount
             "RepoName" .RepoInfo.Name) }}
-      <div class="flex w-full min-h-[30px] items-stretch overflow-hidden rounded border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-sm">
+      <div class="btn-group w-full">
         <a
-          class="flex flex-1 justify-center gap-2 items-center px-2 text-sm no-underline hover:no-underline group hover:bg-gray-50 dark:hover:bg-gray-700"
+          class="btn-group-item active flex-1 group"
           hx-boost="true"
           href="/{{ .RepoInfo.FullName }}/fork"
         >
@@ -129,7 +129,7 @@
         </a>
         <a
           href="/{{ .RepoInfo.FullName }}/forks"
-          class="flex items-center px-2 text-sm no-underline hover:no-underline border-l border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700"
+          class="btn-group-item"
           title="Forked by"
         >
           {{ .RepoInfo.Stats.ForkCount }}
diff --git a/appview/pages/templates/timeline/fragments/timeline.html b/appview/pages/templates/timeline/fragments/timeline.html
index acf533b2..d076a109 100644
--- a/appview/pages/templates/timeline/fragments/timeline.html
+++ b/appview/pages/templates/timeline/fragments/timeline.html
@@ -53,7 +53,7 @@
       <span class="text-gray-700 dark:text-gray-400 text-xs">{{ template "repo/fragments/time" $repo.Created }}</span>
     </div>
   {{ with $repo }}
-    {{ template "user/fragments/repoCard" (list $root . true true (dict "IsStarred" $event.IsStarred "SubjectAt" .RepoAt "StarCount" $event.StarCount)) }}
+    {{ template "user/fragments/repoCard" (list $root . true true (dict "IsStarred" $event.IsStarred "SubjectAt" .RepoAt "StarCount" $event.StarCount "RepoName" .Slug)) }}
   {{ end }}
 {{ end }}
 
@@ -80,7 +80,7 @@
         <span class="text-gray-700 dark:text-gray-400 text-xs">{{ template "repo/fragments/time" .Created }}</span>
     </div>
     {{ with .Repo }}
-      {{ template "user/fragments/repoCard" (list $root . true true (dict "IsStarred" $event.IsStarred "SubjectAt" .RepoAt "StarCount" $event.StarCount)) }}
+      {{ template "user/fragments/repoCard" (list $root . true true (dict "IsStarred" $event.IsStarred "SubjectAt" .RepoAt "StarCount" $event.StarCount "RepoName" .Slug)) }}
     {{ end }}
   {{ end }}
 {{ end }}
diff --git a/appview/pages/templates/user/fragments/repoCard.html b/appview/pages/templates/user/fragments/repoCard.html
index 04a48f34..5ff88745 100644
--- a/appview/pages/templates/user/fragments/repoCard.html
+++ b/appview/pages/templates/user/fragments/repoCard.html
@@ -1,5 +1,5 @@
 {{ define "user/fragments/repoCard" }}
-  {{/* root, repo, fullName [,starButton [,starData]] */}}
+  {{/* root, repo, fullName [,starButton [,starData{IsStarred,SubjectAt,StarCount,RepoName} [,compact]]] */}}
   {{ $root := index . 0 }}
   {{ $repo := index . 1 }}
   {{ $fullName := index . 2 }}
diff --git a/input.css b/input.css
index 1482c752..82e7b347 100644
--- a/input.css
+++ b/input.css
@@ -249,7 +249,7 @@
     }
 
     .btn-group {
-      @apply inline-flex items-center
+      @apply inline-flex items-stretch
           max-h-[32px]
           rounded border border-gray-200 dark:border-gray-700
           divide-x divide-gray-200 dark:divide-gray-700
@@ -260,6 +260,7 @@
       @apply btn-flat min-h-[30px] gap-1.5
           bg-gray-50 dark:bg-gray-900
           border-y-0
+          no-underline hover:no-underline
           hover:text-gray-600 dark:hover:text-gray-400;
     }
 
-- 
2.51.2