appview/pages: support grouping in homepage too · willdot.net/tangled-fork@e95b8a0

+20

appview/pages/templates/timeline/fragments/othersBadge.html

··· 1 + {{ define "timeline/fragments/othersBadge" }} 2 + {{ $group := . }} 3 + <span class="relative group inline-flex items-center cursor-pointer" tabindex="0" 4 + >and <span class="underline decoration-dotted decoration-gray-400">{{ $group.OthersCount }} other{{ if ne $group.OthersCount 1 }}s{{ end }}</span 5 + ><div class="absolute left-0 top-full pt-1 z-10 hidden group-hover:block group-focus-within:block"> 6 + <div class="min-w-48 max-w-xs bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded shadow-lg p-2 cursor-default"> 7 + <ul class="flex flex-col gap-1"> 8 + {{ range $other := $group.Others }} 9 + <li class="flex items-center gap-2 text-sm cursor-pointer"> 10 + {{ if $other.RepoStar }} 11 + {{ template "user/fragments/picHandleLink" $other.RepoStar.Did }} 12 + {{ else if $other.Follow }} 13 + {{ template "user/fragments/picHandleLink" $other.Follow.UserDid }} 14 + {{ end }} 15 + </li> 16 + {{ end }} 17 + </ul> 18 + </div> 19 + </div></span> 20 + {{ end }}

+30 -11

appview/pages/templates/timeline/fragments/preview.html

··· 63 63 64 64 {{ define "eventCard" }} 65 65 {{ $root := index . 0 }} 66 - {{ $e := index . 1 }} 66 + {{ $g := index . 1 }} 67 + {{ $e := $g.Primary }} 67 68 {{ with $e }} 68 69 <div class="flex flex-col divide-y divide-gray-200 dark:divide-gray-700 border border-gray-200 dark:border-gray-700 rounded-sm bg-white dark:bg-gray-800 drop-shadow-sm"> 69 70 {{ if .Repo }} 70 - {{ template "repoEvent" (list $root .) }} 71 + {{ template "repoEvent" (list $root $g) }} 71 72 {{ else if .RepoStar }} 72 - {{ template "starEvent" (list $root .) }} 73 + {{ template "starEvent" (list $root $g) }} 73 74 {{ else if .Follow }} 74 - {{ template "followEvent" (list $root .) }} 75 + {{ template "followEvent" (list $root $g) }} 75 76 {{ end }} 76 77 </div> 77 78 {{ end }} ··· 79 80 80 81 {{ define "timelineEvent" }} 81 82 {{ $i := index . 0 }} 82 - {{ $e := index . 1 }} 83 + {{ $g := index . 1 }} 84 + {{ $e := $g.Primary }} 83 85 {{ $variance := randInt 10 }} 84 86 {{ $offset := add (index . 2) $variance }} 85 87 {{ $left := mul $i 175 }} ··· 87 89 class="absolute left-0" 88 90 style="bottom: {{ $offset }}px; left: {{ $left }}px; transform: translateX(-50%); z-index: 5;" 89 91 > 90 - {{ template "eventCard" (list $ $e) }} 92 + {{ template "eventCard" (list $ $g) }} 91 93 </div> 92 94 93 95  ··· 105 107 106 108 {{ define "repoEvent" }} 107 109 {{ $root := index . 0 }} 108 - {{ $event := index . 1 }} 110 + {{ $group := index . 1 }} 111 + {{ $event := $group.Primary }} 109 112 {{ $repo := $event.Repo }} 110 113 {{ $source := $event.Source }} 111 114 {{ $userHandle := resolve $repo.Did }} ··· 135 138 136 139 {{ define "starEvent" }} 137 140 {{ $root := index . 0 }} 138 - {{ $event := index . 1 }} 141 + {{ $group := index . 1 }} 142 + {{ $event := $group.Primary }} 139 143 {{ $star := $event.RepoStar }} 140 144 {{ with $star }} 141 145 {{ $starrerHandle := resolve .Did }} ··· 146 150 </div> 147 151 <div class="px-4 flex items-center gap-2"> 148 152 {{ template "user/fragments/picHandleLink" $starrerHandle }} 149 - starred 153 + {{ if $group.IsCollapsed }} 154 + <span class="inline-flex items-center gap-1.5"> 155 + {{ template "timeline/fragments/othersBadge" $group }} 156 + starred 157 + </span> 158 + {{ else }} 159 + starred 160 + {{ end }} 150 161 {{ template "user/fragments/pic" (list $repoOwnerHandle "size-6") }} 151 162 <a href="/{{ $repoOwnerHandle }}/{{ .Repo.Name }}" class="no-underline hover:underline"> 152 163 {{ $repoOwnerHandle | truncateAt30 }}/{{ .Repo.Name }} ··· 158 169 159 170 {{ define "followEvent" }} 160 171 {{ $root := index . 0 }} 161 - {{ $event := index . 1 }} 172 + {{ $group := index . 1 }} 173 + {{ $event := $group.Primary }} 162 174 {{ $follow := $event.Follow }} 163 175 {{ $profile := $event.Profile }} 164 176 {{ $followStats := $event.FollowStats }} ··· 172 184 </div> 173 185 <div class="px-4 flex items-center gap-2"> 174 186 {{ template "user/fragments/picHandleLink" $userHandle }} 175 - followed 187 + {{ if $group.IsCollapsed }} 188 + <span class="inline-flex items-center gap-1.5"> 189 + {{ template "timeline/fragments/othersBadge" $group }} 190 + followed 191 + </span> 192 + {{ else }} 193 + followed 194 + {{ end }} 176 195 {{ template "user/fragments/picHandleLink" $subjectHandle }} 177 196 </div> 178 197 </div>

-21

appview/pages/templates/timeline/fragments/timeline.html

··· 117 117 "FollowersCount" $followStats.Followers 118 118 "FollowingCount" $followStats.Following) }} 119 119 {{ end }} 120 - 121 - {{ define "timeline/fragments/othersBadge" }} 122 - {{ $group := . }} 123 - <span class="relative group inline-flex items-center cursor-pointer" tabindex="0" 124 - >and <span class="underline decoration-dotted decoration-gray-400">{{ $group.OthersCount }} other{{ if ne $group.OthersCount 1 }}s{{ end }}</span 125 - ><div class="absolute left-0 top-full pt-1 z-10 hidden group-hover:block group-focus-within:block"> 126 - <div class="min-w-48 max-w-xs bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded shadow-lg p-2 cursor-default"> 127 - <ul class="flex flex-col gap-1"> 128 - {{ range $other := $group.Others }} 129 - <li class="flex items-center gap-2 text-sm cursor-pointer"> 130 - {{ if $other.RepoStar }} 131 - {{ template "user/fragments/picHandleLink" $other.RepoStar.Did }} 132 - {{ else if $other.Follow }} 133 - {{ template "user/fragments/picHandleLink" $other.Follow.UserDid }} 134 - {{ end }} 135 - </li> 136 - {{ end }} 137 - </ul> 138 - </div> 139 - </div></span> 140 - {{ end }}

+3 -2

appview/state/timeline.go

··· 1 1 package state 2 2 3 3 import ( 4 + "fmt" 4 5 "net/http" 5 6 6 7 "github.com/bluesky-social/indigo/atproto/syntax" ··· 29 30 s.logger.Error("failed to get bluesky posts", "err", err) 30 31 } 31 32 32 - s.pages.Home(w, pages.TimelineParams{ 33 + fmt.Println(s.pages.Home(w, pages.TimelineParams{ 33 34 LoggedInUser: user, 34 35 Timeline: timeline, 35 36 BlueskyPosts: blueskyPosts, 36 37 ShowNewsletter: s.showNewsletter(user), 37 - }) 38 + })) 38 39 } 39 40 func (s *State) HomeOrTimeline(w http.ResponseWriter, r *http.Request) { 40 41 if s.oauth.GetMultiAccountUser(r) != nil {

Configure Feed

Configure Feed