use cards

appview/pages/templates/user/profile.html

···
         {{ block "collaboratingRepos" . }}{{ end }}
     </div>
     <div class="md:col-span-2 order-3 md:order-3">
-        {{ block "profileTimeline2" . }}{{ end }}
+        {{ block "profileTimeline" . }}{{ end }}
     </div>
 </div>
 {{ end }}
 
-{{ define "profileTimeline2" }}
+{{ define "profileTimeline" }}
   <p class="text-sm font-bold py-2 dark:text-white">ACTIVITY</p>
   <div class="flex flex-col gap-6 relative">
     {{ with .ProfileTimeline }}
       {{ range $idx, $byMonth := .ByMonth }}
         {{ with $byMonth }}
-        <div>
+        <div class="bg-white dark:bg-gray-800 px-6 py-4 rounded drop-shadow-sm">
           {{ if eq $idx 0 }}
           <p class="text-sm font-bold py-2 dark:text-white">This month</p>
           {{ else }}
···
     <details open>
       <summary class="list-none cursor-pointer">
         <div class="flex items-center gap-2">
-          {{ i "unfold-vertical" "w-4 h-4" }}
-          created {{ len $items }} repositories
+          created {{ len $items }} {{if eq (len $items) 1 }}repository{{else}}repositories{{end}}
         </div>
       </summary>
-      <div class="p-2 pl-8 text-sm flex flex-col gap-3">
+      <div class="p-2 text-sm flex flex-col gap-3">
         {{ range $items }}
           <div class="flex flex-wrap items-center gap-2">
             <span class="text-gray-500 dark:text-gray-400">
···
     <details open>
       <summary class="list-none cursor-pointer">
         <div class="flex items-center gap-2">
-          {{ i "unfold-vertical" "w-4 h-4" }}
           <span>
-            created {{ len $items }} issues 
+            created {{ len $items }} {{if eq (len $items) 1 }}issue{{else}}issues{{end}} 
           </span>
           <span class="px-2 py-1/2 text-sm rounded-sm text-white bg-green-600 dark:bg-green-700">
             {{$stats.Open}} open
···
           </span>
         </div>
       </summary>
-      <div class="p-2 pl-8 text-sm flex flex-col gap-3">
+      <div class="p-2 text-sm flex flex-col gap-3">
         {{ range $items }}
           {{ $repoOwner := index $handleMap .Metadata.Repo.Did }}
           {{ $repoName := .Metadata.Repo.Name }}
···
     <details open>
       <summary class="list-none cursor-pointer">
         <div class="flex items-center gap-2">
-          {{ i "unfold-vertical" "w-4 h-4" }}
           <span>
-            created {{ len $items }} pull requests 
+            created {{ len $items }} {{if eq (len $items) 1 }}pull request{{else}}pull requests{{end}} 
           </span>
           <span class="px-2 py-1/2 text-sm rounded-sm text-white bg-green-600 dark:bg-green-700">
             {{$stats.Open}} open
···
           </span>
         </div>
       </summary>
-      <div class="p-2 pl-8 text-sm flex flex-col gap-3">
+      <div class="p-2 text-sm flex flex-col gap-3">
         {{ range $items }}
           {{ $repoOwner := index $handleMap .Repo.Did }}
           {{ $repoName := .Repo.Name }}
···
       </div>
     </details>
   {{ end }}
-{{ end }}
-
-{{ define "profileTimeline" }}
-    <div class="flex flex-col gap-3 relative">
-        <p class="px-6 text-sm font-bold py-2 dark:text-white">ACTIVITY</p>
-        {{ range .ProfileTimeline }}
-          {{ if eq .Type "issue" }}
-          <div class="px-6 py-2 bg-white dark:bg-gray-800 rounded drop-shadow-sm w-fit max-w-full flex items-center gap-2">
-              {{ $textColor := "text-gray-800 dark:text-gray-400" }}
-              {{ $icon := "ban" }}
-              {{ if .Issue.Open }}
-                  {{ $textColor = "text-green-600 dark:text-green-500" }}
-                  {{ $icon = "circle-dot" }}
-              {{ end }}
-            <div class="p-1 {{ $textColor }}">
-                {{ i $icon "w-5 h-5" }}
-            </div>
-            <div>
-              <p class="text-gray-600 dark:text-gray-300">
-              <a href="/{{ index $.DidHandleMap .Repo.Did }}/{{ .Repo.Name }}/issues/{{ .Issue.IssueId }}" class="no-underline hover:underline">{{ .Issue.Title }} <span class="text-gray-500 dark:text-gray-400">#{{ .Issue.IssueId }}</span></a>
-              on 
-              <a href="/{{ index $.DidHandleMap .Repo.Did }}/{{ .Repo.Name }}" class="no-underline hover:underline">{{ index $.DidHandleMap .Repo.Did }}<span class="select-none">/</span>{{ .Repo.Name }}</a>
-              <time class="text-gray-700 dark:text-gray-400 text-xs ml-2">{{ .Issue.Created | shortTimeFmt }}</time>
-              </p>
-            </div>
-          </div>
-          {{ else if eq .Type "pull" }}
-          <div class="px-6 py-2 bg-white dark:bg-gray-800 rounded drop-shadow-sm w-fit flex items-center gap-3">
-            {{ $textColor := "text-gray-800 dark:text-gray-400" }}
-            {{ $icon := "git-pull-request-closed" }}
-            {{ if .Pull.State.IsOpen }}
-                {{ $textColor = "text-green-600 dark:text-green-500" }}
-                {{ $icon = "git-pull-request" }}
-            {{ else if .Pull.State.IsMerged }}
-                {{ $textColor = "text-purple-600 dark:text-purple-500" }}
-                {{ $icon = "git-merge" }}
-            {{ end }}
-            <div class="{{ $textColor }} p-1">
-                {{ i $icon "w-5 h-5" }}
-            </div>
-            <div>
-              <p class="text-gray-600 dark:text-gray-300">
-              <a href="/{{ index $.DidHandleMap .Repo.Did }}/{{ .Repo.Name }}/pulls/{{ .Pull.PullId }}" class="no-underline hover:underline">{{ .Pull.Title }} <span class="text-gray-500 dark:text-gray-400">#{{ .Pull.PullId }}</span></a>
-              on
-              <a href="/{{ index $.DidHandleMap .Repo.Did }}/{{ .Repo.Name }}" class="no-underline hover:underline">
-                  {{ index $.DidHandleMap .Repo.Did }}<span class="select-none">/</span>{{ .Repo.Name }}</a>
-              <time class="text-gray-700 dark:text-gray-400 text-xs ml-2">{{ .Pull.Created | shortTimeFmt }}</time>
-              </p>
-            </div>
-          </div>
-          {{ else if eq .Type "repo" }}
-          <div class="px-6 py-2 bg-white dark:bg-gray-800 rounded drop-shadow-sm w-fit flex items-center gap-3">
-            {{ if .Source }}
-            <div class="text-gray-800 dark:text-gray-400 p-1">
-              {{ i "git-fork" "w-5 h-5" }}
-            </div>
-            {{ else }}
-            <div class="text-gray-800 dark:text-gray-400 p-1">
-              {{ i "book-plus" "w-5 h-5" }}
-            </div>
-            {{ end }}
-            <div>
-              <p class="text-gray-600 dark:text-gray-300">
-
-              {{ if .Source }}
-                forked
-                <a href="/{{ index $.DidHandleMap .Source.Did }}/{{ .Source.Name }}" class="no-underline hover:underline">
-                  {{ index $.DidHandleMap .Source.Did }}/{{ .Source.Name }}
-                </a>
-                to
-                <a href="/{{ didOrHandle $.UserHandle $.UserDid }}/{{ .Repo.Name }}" class="no-underline hover:underline">{{ .Repo.Name }}</a>
-              {{ else }}
-                created
-                <a href="/{{ index $.DidHandleMap .Repo.Did }}/{{ .Repo.Name }}" class="no-underline hover:underline">{{ .Repo.Name }}</a>
-              {{ end }}
-              <time class="text-gray-700 dark:text-gray-400 text-xs ml-2">{{ .Repo.Created | shortTimeFmt }}</time>
-              </p>
-            </div>
-          </div>
-          {{ end }}
-        {{ else }}
-            <p class="px-6 dark:text-white">This user does not have any activity yet.</p>
-        {{ end }}
-      </div>
 {{ end }}
 
 {{ define "profileCard" }}