appview/pages: add sidebar to issues with labels and participants list

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

appview/pages/templates/repo/issues/issue.html

···
 {{ end }}
 
 {{ define "repoContentLayout" }}
-  <div class="grid grid-cols-1 md:grid-cols-4 gap-4 w-full">
-    <div class="col-span-1 md:col-span-3">
+  <div class="grid grid-cols-1 md:grid-cols-10 gap-4 w-full">
+    <div class="col-span-1 md:col-span-8">
       <section class="bg-white dark:bg-gray-800 p-6 rounded relative w-full mx-auto dark:text-white">
         {{ block "repoContent" . }}{{ end }}
       </section>
       {{ block "repoAfter" . }}{{ end }}
     </div>
-    <div class="col-span-1 flex flex-col gap-6">
+    <div class="col-span-1 md:col-span-2 flex flex-col gap-6">
       {{ template "issueLabels" . }}
       {{ template "issueParticipants" . }}
     </div>
···
   {{ if .Issue.Body }}
     <article id="body" class="mt-4 prose dark:prose-invert">{{ .Issue.Body | markdown }}</article>
   {{ end }}
-  <div class="flex flex-wrap gap-2 items-stretch">
+  <div class="flex flex-wrap gap-2 items-stretch mt-4">
     {{ template "issueReactions" . }}
-    {{ template "issueLabels" . }}
   </div>
 </section>
 {{ end }}
···
 {{ end }}
 
 {{ define "issueLabels" }}
-  {{ range $k, $valset := $.Issue.Labels.Inner }}
-    {{ $d := index $.LabelDefs $k }}
-    {{ range $v, $s := $valset }}
-      {{ template "labels/fragments/label" (dict "def" $d "val" $v) }}
-    {{ end }}
-  {{ end }}
+  <div>
+    <div class="text-sm py-1 flex items-center gap-2 font-bold text-gray-500 dark:text-gray-400 capitalize">
+      Labels
+      <button
+        class="inline-flex text-gray-500 dark:text-gray-400 {{ if not (or .RepoInfo.Roles.IsOwner .RepoInfo.Roles.IsCollaborator) }}hidden{{ end }}"
+        popovertarget="add-label-modal"
+        popovertargetaction="toggle">
+        {{ i "plus" "size-4" }}
+      </button>
+    </div>
+    <div class="flex gap-1 items-center flex-wrap">
+      {{ range $k, $valset := $.Issue.Labels.Inner }}
+        {{ $d := index $.LabelDefs $k }}
+        {{ range $v, $s := $valset }}
+          {{ template "labels/fragments/label" (dict "def" $d "val" $v) }}
+        {{ end }}
+      {{ else }}
+        <p class="text-gray-500 dark:text-gray-400 ">No labels yet.</p>
+      {{ end }}
 
-  <button
-    class="btn text-gray-500 dark:text-gray-400"
-    popovertarget="add-label-modal"
-    {{ if not (or .RepoInfo.Roles.IsOwner .RepoInfo.Roles.IsCollaborator) }}disabled{{ end }}
-    popovertargetaction="toggle">
-    {{ i "plus" "size-4" }}
-  </button>
-  <div
-    id="add-label-modal"
-    popover
-    class="bg-white w-full sm:w-96 dark:bg-gray-800 p-6 rounded border border-gray-200 dark:border-gray-700 drop-shadow dark:text-white backdrop:bg-gray-400/50 dark:backdrop:bg-gray-800/50">
-    {{ template "repo/fragments/addLabelModal" (dict "root" $ "subject" $.Issue.AtUri.String "state" $.Issue.Labels) }}
+      <div
+        id="add-label-modal"
+        popover
+        class="bg-white w-full sm:w-[30rem] dark:bg-gray-800 p-6 rounded border border-gray-200 dark:border-gray-700 drop-shadow dark:text-white backdrop:bg-gray-400/50 dark:backdrop:bg-gray-800/50">
+        {{ template "repo/fragments/addLabelModal" (dict "root" $ "subject" $.Issue.AtUri.String "state" $.Issue.Labels) }}
+      </div>
+    </div>
+  </div>
+{{ end }}
+
+{{ define "issueParticipants" }}
+  {{ $all := .Issue.Participants }}
+  {{ $ps := take $all 5 }}
+  <div>
+    <div class="py-1 flex items-center text-sm">
+      <span class="font-bold text-gray-500 dark:text-gray-400 capitalize">Participants</span>
+      <span class="bg-gray-200 dark:bg-gray-700 rounded py-1/2 px-1 ml-1">{{ len $all }}</span>
+    </div>
+    <div class="flex items-center -space-x-2 mt-2">
+      {{ $c := "z-50 z-40 z-30 z-20 z-10" }}
+      {{ range $i, $p := $ps }}
+        <img
+            src="{{ tinyAvatar . }}"
+            alt=""
+            class="rounded-full h-8 w-8 mr-1 border-2 border-gray-300 dark:border-gray-700 z-{{sub 5 $i}}0"
+        />
+      {{ end }}
+
+      {{ if gt (len $all) 5 }}
+        <span class="pl-4 text-gray-500 dark:text-gray-400 text-sm">
+          +{{ sub (len $all) 5 }}
+        </span>
+      {{ end }}
+    </div>
   </div>
 {{ end }}
 
···
   }}
 
   {{ template "repo/issues/fragments/newComment" . }}
-  <div>
+  </div>
 {{ end }}