| @@ -2,45 +2,51 @@ |
| 2 | <div class="max-w-2xl mx-auto"> | 2 | <div class="max-w-2xl mx-auto"> |
| 3 | <div class="bg-spot-surface rounded-xl p-6 mb-6"> | 3 | <div class="bg-spot-surface rounded-xl p-6 mb-6"> |
| 4 | <div class="flex items-center gap-4"> | 4 | <div class="flex items-center gap-4"> |
| 5 | - {{if .ProfileUser.AvatarURL.Valid}}<img src="{{.ProfileUser.AvatarURL.String}}" class="w-16 h-16 rounded-full">{{end}} | 5 | + {{if .ProfileUser.AvatarURL.Valid}}<img src="{{.ProfileUser.AvatarURL.String}}" class="w-20 h-20 rounded-full ring-2 ring-spot-divider">{{else}}<div class="w-20 h-20 rounded-full bg-spot-hover flex items-center justify-center text-spot-muted"><svg class="w-10 h-10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 4-7 8-7s8 3 8 7"/></svg></div>{{end}} |
| 6 | - <div> | 6 | + <div class="min-w-0 flex-1"> |
| 7 | - <h1 class="text-2xl font-bold text-spot-text"> | 7 | + <h1 class="text-2xl font-bold text-spot-text truncate"> |
| 8 | {{if .ProfileUser.DisplayName.Valid}}{{.ProfileUser.DisplayName.String}}{{end}} | 8 | {{if .ProfileUser.DisplayName.Valid}}{{.ProfileUser.DisplayName.String}}{{end}} |
| 9 | </h1> | 9 | </h1> |
| 10 | <p class="text-spot-secondary">@{{.ProfileUser.Handle}}</p> | 10 | <p class="text-spot-secondary">@{{.ProfileUser.Handle}}</p> |
| | 11 | + <div class="flex gap-4 mt-3"> |
| | 12 | + <div> |
| | 13 | + <span class="text-lg font-bold text-spot-text">{{.SubscriptionCount}}</span> |
| | 14 | + <span class="text-sm text-spot-secondary ml-1">feeds</span> |
| | 15 | + </div> |
| | 16 | + <div class="border-l border-spot-divider pl-4"> |
| | 17 | + <span class="text-lg font-bold text-spot-text">{{.AnnotationCount}}</span> |
| | 18 | + <span class="text-sm text-spot-secondary ml-1">annotations</span> |
| | 19 | + </div> |
| | 20 | + </div> |
| 11 | </div> | 21 | </div> |
| 12 | </div> | 22 | </div> |
| 13 | </div> | 23 | </div> |
| 14 | | 24 | |
| 15 | - <div class="grid grid-cols-2 gap-4 mb-6"> | 25 | + <h2 class="text-sm font-bold text-spot-text uppercase tracking-wide mb-3">Feeds</h2> |
| 16 | - <div class="bg-spot-surface rounded-xl p-4 text-center"> | | |
| 17 | - <div class="text-2xl font-bold text-spot-text">{{.SubscriptionCount}}</div> | | |
| 18 | - <div class="text-sm text-spot-secondary">Feeds</div> | | |
| 19 | - </div> | | |
| 20 | - <div class="bg-spot-surface rounded-xl p-4 text-center"> | | |
| 21 | - <div class="text-2xl font-bold text-spot-text">{{.AnnotationCount}}</div> | | |
| 22 | - <div class="text-sm text-spot-secondary">Annotations</div> | | |
| 23 | - </div> | | |
| 24 | - </div> | | |
| 25 | - | | |
| 26 | - <h2 class="text-lg font-semibold text-spot-text mb-3">Feeds</h2> | | |
| 27 | <div class="bg-spot-surface rounded-xl divide-y divide-spot-divider mb-6"> | 26 | <div class="bg-spot-surface rounded-xl divide-y divide-spot-divider mb-6"> |
| 28 | {{range .Subscriptions}} | 27 | {{range .Subscriptions}} |
| 29 | - <div class="px-5 py-3 hover:bg-spot-hover-50 transition rounded-xl"> | 28 | + <a href="/articles?feed={{.FeedURL}}" class="flex items-center gap-3 px-5 py-3 hover:bg-spot-hover-50 transition first:rounded-t-xl last:rounded-b-xl"> |
| 30 | - <div class="font-bold text-spot-text">{{if .FeedTitle}}{{.FeedTitle}}{{else}}{{.FeedURL}}{{end}}</div> | 29 | + {{if .FaviconURL.Valid}}<img src="{{.FaviconURL.String}}" class="w-5 h-5 rounded shrink-0" loading="lazy">{{else}}<span class="shrink-0 w-5 h-5 flex items-center justify-center text-spot-muted"><svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">{{template "icon-globe"}}</svg></span>{{end}} |
| 31 | - {{if .Category.Valid}}<span class="text-xs text-spot-secondary">{{.Category.String}}</span>{{end}} | 30 | + <div class="min-w-0 flex-1"> |
| 32 | - </div> | 31 | + <div class="flex items-center gap-2 flex-wrap"> |
| | 32 | + <span class="font-bold text-spot-text truncate">{{if .FeedTitle}}{{.FeedTitle}}{{else}}{{.FeedURL}}{{end}}</span> |
| | 33 | + {{if .Category.Valid}}<span class="text-xs bg-spot-hover text-spot-secondary px-2 py-0.5 rounded-full shrink-0">{{.Category.String}}</span>{{end}} |
| | 34 | + </div> |
| | 35 | + <div class="text-xs text-spot-muted truncate mt-0.5">{{.FeedURL}}</div> |
| | 36 | + </div> |
| | 37 | + <svg class="w-4 h-4 text-spot-muted shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg> |
| | 38 | + </a> |
| 33 | {{else}} | 39 | {{else}} |
| 34 | <div class="px-4 py-6 text-center text-spot-secondary text-sm">No public feeds.</div> | 40 | <div class="px-4 py-6 text-center text-spot-secondary text-sm">No public feeds.</div> |
| 35 | {{end}} | 41 | {{end}} |
| 36 | </div> | 42 | </div> |
| 37 | | 43 | |
| 38 | - <h2 class="text-lg font-semibold text-spot-text mb-3">Recent annotations</h2> | 44 | + <h2 class="text-sm font-bold text-spot-text uppercase tracking-wide mb-3">Recent annotations</h2> |
| 39 | <div class="space-y-3"> | 45 | <div class="space-y-3"> |
| 40 | {{range .Annotations}} | 46 | {{range .Annotations}} |
| 41 | {{template "annotation-card.html" dict "annotation" . "userDID" $.CurrentUserDID}} | 47 | {{template "annotation-card.html" dict "annotation" . "userDID" $.CurrentUserDID}} |
| 42 | {{else}} | 48 | {{else}} |
| 43 | - <p class="text-sm text-spot-secondary">No public annotations.</p> | 49 | + <p class="text-sm text-spot-secondary text-center py-4">No public annotations.</p> |
| 44 | {{end}} | 50 | {{end}} |
| 45 | </div> | 51 | </div> |
| 46 | </div> | 52 | </div> |