Monorepo for Tangled tangled.org
4

Configure Feed

Select the types of activity you want to include in your feed.

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

author
eti
committer
Tangled
date (May 15, 2026, 3:09 PM +0300) commit 94765dfc parent 82b6fd55
+13 -12
+5 -5
appview/pages/templates/fragments/starBtn.html
··· 2 2 {{/* NOTE: this fragment is always replaced with hx-swap-oob */}} 3 3 <div 4 4 id="starBtn" 5 - 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" 5 + class="btn-group w-full" 6 6 data-star-subject-at="{{ .SubjectAt }}" 7 7 {{ if .HxSwapOob }}hx-swap-oob='outerHTML:#starBtn[data-star-subject-at="{{ .SubjectAt }}"]'{{ end }} 8 8 > 9 9 <button 10 - 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" 10 + class="btn-group-item active flex-1 group" 11 11 {{ if .IsStarred }} 12 12 hx-delete="/star?subject={{ .SubjectAt }}&countHint={{ .StarCount }}&repoName={{ .RepoName }}" 13 13 {{ else }} ··· 22 22 {{ i "star" "w-4 h-4 inline group-[.htmx-request]:hidden" }} 23 23 {{ end }} 24 24 {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }} 25 - <span class="text-sm group-[.htmx-request]:hidden">{{ if .IsStarred }}unstar{{ else }}star{{ end }}</span> 25 + <span class="group-[.htmx-request]:hidden">{{ if .IsStarred }}unstar{{ else }}star{{ end }}</span> 26 26 </button> 27 27 {{ if .RepoName }} 28 28 {{ $did := .SubjectAt.Authority | string }} 29 29 <a 30 30 href="/{{ resolve $did }}/{{ .RepoName }}/stars" 31 - 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" 31 + class="btn-group-item" 32 32 title="Starred by" 33 33 > 34 34 {{ .StarCount }} 35 35 </a> 36 36 {{ else }} 37 - <span class="flex items-center px-2 text-sm border-l border-gray-200 dark:border-gray-700"> 37 + <span class="btn-group-item cursor-default"> 38 38 {{ .StarCount }} 39 39 </span> 40 40 {{ end }}
+3 -3
appview/pages/templates/layouts/repobase.html
··· 117 117 "IsStarred" .RepoInfo.IsStarred 118 118 "StarCount" .RepoInfo.Stats.StarCount 119 119 "RepoName" .RepoInfo.Name) }} 120 - <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"> 120 + <div class="btn-group w-full"> 121 121 <a 122 - 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" 122 + class="btn-group-item active flex-1 group" 123 123 hx-boost="true" 124 124 href="/{{ .RepoInfo.FullName }}/fork" 125 125 > ··· 129 129 </a> 130 130 <a 131 131 href="/{{ .RepoInfo.FullName }}/forks" 132 - 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" 132 + class="btn-group-item" 133 133 title="Forked by" 134 134 > 135 135 {{ .RepoInfo.Stats.ForkCount }}
+2 -2
appview/pages/templates/timeline/fragments/timeline.html
··· 53 53 <span class="text-gray-700 dark:text-gray-400 text-xs">{{ template "repo/fragments/time" $repo.Created }}</span> 54 54 </div> 55 55 {{ with $repo }} 56 - {{ template "user/fragments/repoCard" (list $root . true true (dict "IsStarred" $event.IsStarred "SubjectAt" .RepoAt "StarCount" $event.StarCount)) }} 56 + {{ template "user/fragments/repoCard" (list $root . true true (dict "IsStarred" $event.IsStarred "SubjectAt" .RepoAt "StarCount" $event.StarCount "RepoName" .Slug)) }} 57 57 {{ end }} 58 58 {{ end }} 59 59 ··· 80 80 <span class="text-gray-700 dark:text-gray-400 text-xs">{{ template "repo/fragments/time" .Created }}</span> 81 81 </div> 82 82 {{ with .Repo }} 83 - {{ template "user/fragments/repoCard" (list $root . true true (dict "IsStarred" $event.IsStarred "SubjectAt" .RepoAt "StarCount" $event.StarCount)) }} 83 + {{ template "user/fragments/repoCard" (list $root . true true (dict "IsStarred" $event.IsStarred "SubjectAt" .RepoAt "StarCount" $event.StarCount "RepoName" .Slug)) }} 84 84 {{ end }} 85 85 {{ end }} 86 86 {{ end }}
+1 -1
appview/pages/templates/user/fragments/repoCard.html
··· 1 1 {{ define "user/fragments/repoCard" }} 2 - {{/* root, repo, fullName [,starButton [,starData]] */}} 2 + {{/* root, repo, fullName [,starButton [,starData{IsStarred,SubjectAt,StarCount,RepoName} [,compact]]] */}} 3 3 {{ $root := index . 0 }} 4 4 {{ $repo := index . 1 }} 5 5 {{ $fullName := index . 2 }}
+2 -1
input.css
··· 249 249 } 250 250 251 251 .btn-group { 252 - @apply inline-flex items-center 252 + @apply inline-flex items-stretch 253 253 max-h-[32px] 254 254 rounded border border-gray-200 dark:border-gray-700 255 255 divide-x divide-gray-200 dark:divide-gray-700 ··· 260 260 @apply btn-flat min-h-[30px] gap-1.5 261 261 bg-gray-50 dark:bg-gray-900 262 262 border-y-0 263 + no-underline hover:no-underline 263 264 hover:text-gray-600 dark:hover:text-gray-400; 264 265 } 265 266