appview: refactor top starred repos

Signed-off-by: oppiliappan <[e-mail]>

appview/pages/pages.go

···
 type TimelineParams struct {
 	LoggedInUser *oauth.User
 	Timeline     []db.TimelineEvent
+	Repos        []db.Repo
 }
 
 func (p *Pages) Timeline(w io.Writer, params TimelineParams) error {
 	return p.execute("timeline/timeline", w, params)
-}
-
-type TopStarredReposLastWeekParams struct {
-	LoggedInUser *oauth.User
-	Repos        []db.Repo
-}
-
-func (p *Pages) TopStarredReposLastWeek(w io.Writer, params TopStarredReposLastWeekParams) error {
-	return p.executePlain("timeline/fragments/topStarredRepos", w, params)
 }
 
 type SettingsParams struct {

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

···
-{{ define "timeline/fragments/topStarredRepos" }}
-<div class="w-full md:mx-0">
-    <div class="p-6">
-        <h3 class="font-bold text-xl text-gray-900 dark:text-white flex items-center gap-2 mb-3">
-            Trending
-            {{ i "trending-up" "size-4 flex-shrink-0" }}
-        </h3>
-    </div>
-    <div class="flex gap-3 overflow-x-auto pb-4 px-4 scrollbar-hide">
-        {{ range $index, $repo := .Repos }}
-            <div class="flex-none w-72 relative h-full">
-                <div class="relative h-full items-stretch border border-gray-200 dark:border-gray-700 rounded-sm">
-                    {{ template "user/fragments/repoCard" (list $ $repo true) }}
-                </div>
-            </div>
-        {{ else }}
-            <div class="py-8 px-6 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-sm">
-                <div class="text-sm text-gray-500 dark:text-gray-400 text-center">
-                    No trending repositories this week
-                </div>
-            </div>
-        {{ end }}
-    </div>
-</div>
-{{ end }}

appview/pages/templates/timeline/timeline.html

···
     <meta property="og:description" content="tightly-knit social coding" />
 {{ end }}
 
-
-
-
 {{ define "content" }}
-    {{ with .LoggedInUser }}
-        {{ block "trending" . }}{{ end }}
-        {{ block "timeline" $ }}{{ end }}
+    {{ if .LoggedInUser }}
     {{ else }}
         {{ block "hero" $ }}{{ end }}
-        {{ block "trending" . }}{{ end }}
-        {{ block "timeline" $ }}{{ end }}
     {{ end }}
-{{ end }}
-
-{{ define "trending" }}
 
-    <div
-        hx-get="/timeline/trending"
-        hx-trigger="load"
-        hx-indicator="#starred-loading"
-    >
-        <!-- Loading spinner -->
-        <div id="starred-loading" class="htmx-indicator">
-            <div class="p-6">
-                <h3 class="font-bold text-xl  text-gray-900 dark:text-white flex items-center gap-2 mb-3">
-                    Trending
-                    {{ i "trending-up" "size-4 flex-shrink-0" }}
-                </h3>
-            </div>
-            <div class="flex items-center justify-center py-8">
-                <div class="animate-spin rounded-full h-6 w-6 border-b-2 border-gray-900 dark:border-white"></div>
-                <span class="ml-2 text-sm text-gray-500 dark:text-gray-400">Loading...</span>
-            </div>
-        </div>
-    </div>
+    {{ block "trending" $ }}{{ end }}
+    {{ block "timeline" $ }}{{ end }}
 {{ end }}
 
 {{ define "hero" }}
···
     </div>
 {{ end }}
 
+{{ define "trending" }}
+  <div class="w-full md:mx-0 py-4">
+      <div class="px-6 pb-4">
+        <h3 class="text-xl font-bold dark:text-white flex items-center gap-2">
+            Trending
+            {{ i "trending-up" "size-4 flex-shrink-0" }}
+        </h3>
+      </div>
+      <div class="flex gap-4 overflow-x-auto scrollbar-hide items-stretch">
+          {{ range $index, $repo := .Repos }}
+            <div class="flex-none h-full border border-gray-200 dark:border-gray-700 rounded-sm w-96">
+              {{ template "user/fragments/repoCard" (list $ $repo true) }}
+            </div>
+          {{ else }}
+              <div class="py-8 px-6 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-sm">
+                  <div class="text-sm text-gray-500 dark:text-gray-400 text-center">
+                      No trending repositories this week
+                  </div>
+              </div>
+          {{ end }}
+      </div>
+  </div>
+{{ end }}
+
 {{ define "timeline" }}
-    <div>
-        <div class="p-6">
+    <div class="py-4">
+        <div class="px-6 pb-4">
             <p class="text-xl font-bold dark:text-white">Timeline</p>
         </div>
 

appview/pages/templates/user/fragments/repoCard.html

···
   {{ $fullName := index . 2 }}
 
   {{ with $repo }}
-    <div class="py-4 px-6 gap-2 flex flex-col drop-shadow-sm rounded bg-white dark:bg-gray-800">
+    <div class="py-4 px-6 gap-1 flex flex-col drop-shadow-sm rounded bg-white dark:bg-gray-800 min-h-32">
       <div class="font-medium dark:text-white flex items-center">
         {{ if .Source }}
           {{ i "git-fork" "w-4 h-4 mr-1.5 shrink-0" }}
···
         {{- end -}}
       </div>
       {{ with .Description }}
-        <div class="text-gray-600 dark:text-gray-300 text-sm">
+        <div class="text-gray-600 dark:text-gray-300 text-sm line-clamp-2">
           {{ . | description }}
         </div>
       {{ end }}

appview/state/router.go

···
 	r.Handle("/static/*", s.pages.Static())
 
 	r.Get("/", s.Timeline)
-	r.Get("/timeline/trending", s.TopStarredReposLastWeek)
 
 	r.Route("/repo", func(r chi.Router) {
 		r.Route("/new", func(r chi.Router) {

appview/state/state.go

···
 		s.pages.Notice(w, "timeline", "Uh oh! Failed to load timeline.")
 	}
 
-	s.pages.Timeline(w, pages.TimelineParams{
-		LoggedInUser: user,
-		Timeline:     timeline,
-	})
-}
-
-func (s *State) TopStarredReposLastWeek(w http.ResponseWriter, r *http.Request) {
 	repos, err := db.GetTopStarredReposLastWeek(s.db)
 	if err != nil {
 		log.Println(err)
···
 		return
 	}
 
-	s.pages.TopStarredReposLastWeek(w, pages.TopStarredReposLastWeekParams{
-		Repos: repos,
+	s.pages.Timeline(w, pages.TimelineParams{
+		LoggedInUser: user,
+		Timeline:     timeline,
+		Repos:        repos,
 	})
 }