appview/issues: rework issues to be better (tm)

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

appview/issues/issues.go

···
 		}
 
 		// rkey is optional, it was introduced later
-		if comment.Rkey != "" {
+		if newComment.Rkey != "" {
 			// update the record on pds
-			ex, err := client.RepoGetRecord(r.Context(), "", tangled.RepoIssueCommentNSID, user.Did, rkey)
+			ex, err := client.RepoGetRecord(r.Context(), "", tangled.RepoIssueCommentNSID, user.Did, comment.Rkey)
 			if err != nil {
-				// failed to get record
-				log.Println(err, rkey)
+				log.Println("failed to get record", "err", err, "did", newComment.Did, "rkey", newComment.Rkey)
 				rp.pages.Notice(w, fmt.Sprintf("comment-%s-status", commentId), "Failed to update description, no record found on PDS.")
 				return
 			}
-			value, _ := ex.Value.MarshalJSON() // we just did get record; it is valid json
-			record, _ := data.UnmarshalJSON(value)
-
-			repoAt := record["repo"].(string)
-			issueAt := record["issue"].(string)
-			createdAt := record["createdAt"].(string)
 
 			_, err = client.RepoPutRecord(r.Context(), &comatproto.RepoPutRecord_Input{
 				Collection: tangled.RepoIssueCommentNSID,
 				Repo:       user.Did,
-				Rkey:       rkey,
+				Rkey:       newComment.Rkey,
 				SwapRecord: ex.Cid,
 				Record: &lexutil.LexiconTypeDecoder{
-					Val: &tangled.RepoIssueComment{
-						Repo:      &repoAt,
-						Issue:     issueAt,
-						Owner:     &comment.OwnerDid,
-						Body:      newBody,
-						CreatedAt: createdAt,
-					},
+					Val: &record,
 				},
 			})
 			if err != nil {
-				log.Println(err)
+				l.Error("failed to update record on PDS", "err", err)
 			}
 		}
 
-		// optimistic update for htmx
-		comment.Body = newBody
-		comment.Edited = &edited
-
 		// return new comment body with htmx
-		rp.pages.SingleIssueCommentFragment(w, pages.SingleIssueCommentParams{
+		rp.pages.IssueCommentBodyFragment(w, pages.IssueCommentBodyParams{
 			LoggedInUser: user,
 			RepoInfo:     f.RepoInfo(user),
 			Issue:        issue,
-			Comment:      comment,
+			Comment:      &newComment,
 		})
-		return
-
 	}
+}
 
 func (rp *Issues) ReplyIssueCommentPlaceholder(w http.ResponseWriter, r *http.Request) {
 	l := rp.logger.With("handler", "ReplyIssueCommentPlaceholder")
···
 	user := rp.oauth.GetUser(r)
 	f, err := rp.repoResolver.Resolve(r)
 	if err != nil {
-		return
-	}
-
-	issueId := chi.URLParam(r, "issue")
-	issueIdInt, err := strconv.Atoi(issueId)
-	if err != nil {
-		http.Error(w, "bad issue id", http.StatusBadRequest)
-		log.Println("failed to parse issue id", err)
+		l.Error("failed to get repo and knot", "err", err)
 		return
 	}
 
-	issue, err := db.GetIssue(rp.db, f.RepoAt(), issueIdInt)
-	if err != nil {
-		log.Println("failed to get issue", err)
-		rp.pages.Notice(w, "issues", "Failed to load issue. Try again later.")
+	issue, ok := r.Context().Value("issue").(*db.Issue)
+	if !ok {
+		l.Error("failed to get issue")
+		rp.pages.Error404(w)
 		return
 	}
 
-	commentId := chi.URLParam(r, "comment_id")
-	commentIdInt, err := strconv.Atoi(commentId)
+	commentId := chi.URLParam(r, "commentId")
+	comments, err := db.GetIssueComments(
+		rp.db,
+		db.FilterEq("id", commentId),
+	)
 	if err != nil {
-		http.Error(w, "bad comment id", http.StatusBadRequest)
-		log.Println("failed to parse issue id", err)
+		l.Error("failed to fetch comment", "id", commentId)
+		http.Error(w, "failed to fetch comment id", http.StatusBadRequest)
 		return
 	}
-
-	comment, err := db.GetComment(rp.db, f.RepoAt(), issueIdInt, commentIdInt)
-	if err != nil {
-		http.Error(w, "bad comment id", http.StatusBadRequest)
+	if len(comments) != 1 {
+		l.Error("incorrect number of comments returned", "id", commentId, "len(comments)", len(comments))
+		http.Error(w, "invalid comment id", http.StatusBadRequest)
 		return
 	}
+	comment := comments[0]
 
-	if comment.OwnerDid != user.Did {
+	if comment.Did != user.Did {
+		l.Error("unauthorized action", "expectedDid", comment.Did, "gotDid", user.Did)
 		http.Error(w, "you are not the author of this comment", http.StatusUnauthorized)
 		return
 	}
···
 
 	// optimistic deletion
 	deleted := time.Now()
-	err = db.DeleteComment(rp.db, f.RepoAt(), issueIdInt, commentIdInt)
+	err = db.DeleteIssueComments(rp.db, db.FilterEq("id", comment.Id))
 	if err != nil {
-		log.Println("failed to delete comment")
+		l.Error("failed to delete comment", "err", err)
 		rp.pages.Notice(w, fmt.Sprintf("comment-%s-status", commentId), "failed to delete comment")
 		return
 	}
···
 	comment.Deleted = &deleted
 
 	// htmx fragment of comment after deletion
-	rp.pages.SingleIssueCommentFragment(w, pages.SingleIssueCommentParams{
+	rp.pages.IssueCommentBodyFragment(w, pages.IssueCommentBodyParams{
 		LoggedInUser: user,
 		RepoInfo:     f.RepoInfo(user),
 		Issue:        issue,
-		Comment:      comment,
+		Comment:      &comment,
 	})
 }
 
···
 		return
 	}
 
-	issues, err := db.GetIssuesPaginated(rp.db, f.RepoAt(), isOpen, page)
+	openVal := 0
+	if isOpen {
+		openVal = 1
+	}
+	issues, err := db.GetIssuesPaginated(
+		rp.db,
+		page,
+		db.FilterEq("repo_at", f.RepoAt()),
+		db.FilterEq("open", openVal),
+	)
 	if err != nil {
 		log.Println("failed to get issues", err)
 		rp.pages.Notice(w, "issues", "Failed to load issues. Try again later.")
···
 }
 
 func (rp *Issues) NewIssue(w http.ResponseWriter, r *http.Request) {
+	l := rp.logger.With("handler", "NewIssue")
 	user := rp.oauth.GetUser(r)
 
 	f, err := rp.repoResolver.Resolve(r)
 	if err != nil {
-		log.Println("failed to get repo and knot", err)
+		l.Error("failed to get repo and knot", "err", err)
 		return
 	}
 
···
 			return
 		}
 
-		tx, err := rp.db.BeginTx(r.Context(), nil)
-		if err != nil {
-			rp.pages.Notice(w, "issues", "Failed to create issue, try again later")
-			return
-		}
-
 		issue := &db.Issue{
-			RepoAt:   f.RepoAt(),
-			Rkey:     tid.TID(),
-			Title:    title,
-			Body:     body,
-			OwnerDid: user.Did,
-		}
-		err = db.NewIssue(tx, issue)
-		if err != nil {
-			log.Println("failed to create issue", err)
-			rp.pages.Notice(w, "issues", "Failed to create issue.")
-			return
+			RepoAt:  f.RepoAt(),
+			Rkey:    tid.TID(),
+			Title:   title,
+			Body:    body,
+			Did:     user.Did,
+			Created: time.Now(),
 		}
+		record := issue.AsRecord()
 
+		// create an atproto record
 		client, err := rp.oauth.AuthorizedClient(r)
 		if err != nil {
-			log.Println("failed to get authorized client", err)
+			l.Error("failed to get authorized client", "err", err)
 			rp.pages.Notice(w, "issues", "Failed to create issue.")
 			return
 		}
-		atUri := f.RepoAt().String()
-		_, err = client.RepoPutRecord(r.Context(), &comatproto.RepoPutRecord_Input{
+		resp, err := client.RepoPutRecord(r.Context(), &comatproto.RepoPutRecord_Input{
 			Collection: tangled.RepoIssueNSID,
 			Repo:       user.Did,
 			Rkey:       issue.Rkey,
 			Record: &lexutil.LexiconTypeDecoder{
-				Val: &tangled.RepoIssue{
-					Repo:  atUri,
-					Title: title,
-					Body:  &body,
-				},
+				Val: &record,
 			},
 		})
 		if err != nil {
+			l.Error("failed to create issue", "err", err)
+			rp.pages.Notice(w, "issues", "Failed to create issue.")
+			return
+		}
+		atUri := resp.Uri
+
+		tx, err := rp.db.BeginTx(r.Context(), nil)
+		if err != nil {
+			rp.pages.Notice(w, "issues", "Failed to create issue, try again later")
+			return
+		}
+		rollback := func() {
+			err1 := tx.Rollback()
+			err2 := rollbackRecord(context.Background(), atUri, client)
+
+			if errors.Is(err1, sql.ErrTxDone) {
+				err1 = nil
+			}
+
+			if err := errors.Join(err1, err2); err != nil {
+				l.Error("failed to rollback txn", "err", err)
+			}
+		}
+		defer rollback()
+
+		err = db.NewIssue(tx, issue)
+		if err != nil {
 			log.Println("failed to create issue", err)
 			rp.pages.Notice(w, "issues", "Failed to create issue.")
 			return
 		}
 
+		if err = tx.Commit(); err != nil {
+			log.Println("failed to create issue", err)
+			rp.pages.Notice(w, "issues", "Failed to create issue.")
+			return
+		}
+
+		// everything is successful, do not rollback the atproto record
+		atUri = ""
 		rp.notifier.NewIssue(r.Context(), issue)
-
 		rp.pages.HxLocation(w, fmt.Sprintf("/%s/issues/%d", f.OwnerSlashRepo(), issue.IssueId))
 		return
 	}
 }
+
+// this is used to rollback changes made to the PDS
+//
+// it is a no-op if the provided ATURI is empty
+func rollbackRecord(ctx context.Context, aturi string, xrpcc *xrpcclient.Client) error {
+	if aturi == "" {
+		return nil
+	}
+
+	parsed := syntax.ATURI(aturi)
+
+	collection := parsed.Collection().String()
+	repo := parsed.Authority().String()
+	rkey := parsed.RecordKey().String()
+
+	_, err := xrpcc.RepoDeleteRecord(ctx, &comatproto.RepoDeleteRecord_Input{
+		Collection: collection,
+		Repo:       repo,
+		Rkey:       rkey,
+	})
+	return err
+}

appview/pages/pages.go

···
 	RepoInfo         repoinfo.RepoInfo
 	Active           string
 	Issue            *db.Issue
-	Comments         []db.Comment
+	CommentList      []db.CommentListItem
 	IssueOwnerHandle string
 
 	OrderedReactionKinds []db.ReactionKind
···
 	LoggedInUser *oauth.User
 	RepoInfo     repoinfo.RepoInfo
 	Issue        *db.Issue
-	Comment      *db.Comment
+	Comment      *db.IssueComment
 }
 
 func (p *Pages) EditIssueCommentFragment(w io.Writer, params EditIssueCommentParams) error {
 	return p.executePlain("repo/issues/fragments/editIssueComment", w, params)
 }
 
-type SingleIssueCommentParams struct {
+type ReplyIssueCommentPlaceholderParams struct {
 	LoggedInUser *oauth.User
 	RepoInfo     repoinfo.RepoInfo
 	Issue        *db.Issue
-	Comment      *db.Comment
+	Comment      *db.IssueComment
 }
 
-func (p *Pages) SingleIssueCommentFragment(w io.Writer, params SingleIssueCommentParams) error {
-	return p.executePlain("repo/issues/fragments/issueComment", w, params)
+func (p *Pages) ReplyIssueCommentPlaceholderFragment(w io.Writer, params ReplyIssueCommentPlaceholderParams) error {
+	return p.executePlain("repo/issues/fragments/replyIssueCommentPlaceholder", w, params)
+}
+
+type ReplyIssueCommentParams struct {
+	LoggedInUser *oauth.User
+	RepoInfo     repoinfo.RepoInfo
+	Issue        *db.Issue
+	Comment      *db.IssueComment
+}
+
+func (p *Pages) ReplyIssueCommentFragment(w io.Writer, params ReplyIssueCommentParams) error {
+	return p.executePlain("repo/issues/fragments/replyComment", w, params)
+}
+
+type IssueCommentBodyParams struct {
+	LoggedInUser *oauth.User
+	RepoInfo     repoinfo.RepoInfo
+	Issue        *db.Issue
+	Comment      *db.IssueComment
+}
+
+func (p *Pages) IssueCommentBodyFragment(w io.Writer, params IssueCommentBodyParams) error {
+	return p.executePlain("repo/issues/fragments/issueCommentBody", w, params)
 }
 
 type RepoNewPullParams struct {

appview/pages/templates/repo/issues/fragments/issueCommentActions.html

···
+{{ define "repo/issues/fragments/issueCommentActions" }}
+  {{ $isCommentOwner := and .LoggedInUser (eq .LoggedInUser.Did .Comment.Did) }}
+  {{ if and $isCommentOwner (not .Comment.Deleted) }}
+    <div class="flex flex-wrap items-center gap-4 text-gray-500 dark:text-gray-400 text-sm pt-2">
+      {{ template "edit" . }}
+      {{ template "delete" . }}
+    </div>
+  {{ end }}
+{{ end }}
+
+{{ define "edit" }}
+  <a
+    class="text-gray-500 dark:text-gray-400 flex gap-1 items-center group"
+    hx-get="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.Id }}/comment/{{ .Comment.Id }}/edit"
+    hx-swap="outerHTML"
+    hx-target="#comment-body-{{.Comment.Id}}">
+    {{ i "pencil" "size-3" }}
+    edit
+  </a>
+{{ end }}
+
+{{ define "delete" }}
+  <a
+    class="text-gray-500 dark:text-gray-400 flex gap-1 items-center group"
+    hx-delete="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.Id }}/comment/{{ .Comment.Id }}/"
+    hx-confirm="Are you sure you want to delete your comment?"
+    hx-swap="outerHTML"
+    hx-target="#comment-body-{{.Comment.Id}}"
+    >
+    {{ i "trash-2" "size-3" }}
+    delete
+    {{ i "loader-circle" "size-3 animate-spin hidden group-[.htmx-request]:inline" }}
+  </a>
+{{ end }}

appview/pages/templates/repo/issues/fragments/replyComment.html

···
+{{ define "repo/issues/fragments/replyComment" }}
+  <form
+      class="p-2 group w-full border-t border-gray-200 dark:border-gray-700 flex flex-col gap-2"
+      id="reply-form-{{ .Comment.Id }}"
+      hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/comment"
+      hx-on::after-request="if(event.detail.successful) this.reset()"
+  >
+      {{ template "user/fragments/picHandleLink" .LoggedInUser.Did }}
+      <textarea
+        id="reply-{{.Comment.Id}}-textarea"
+        name="body"
+        class="w-full p-2"
+        placeholder="Leave a reply..."
+        autofocus
+        rows="3"></textarea>
+
+      <input
+          type="text"
+          id="reply-to"
+          name="reply-to"
+          required
+          value="{{ .Comment.AtUri }}"
+          class="hidden"
+          />
+      {{ template "replyActions" . }}
+  </form>
+{{ end }}
+
+{{ define "replyActions" }}
+  <div class="flex flex-wrap items-stretch justify-end gap-2 text-gray-500 dark:text-gray-400 text-sm">
+    {{ template "cancel" . }}
+    {{ template "reply" . }}
+  </div>
+{{ end }}
+
+{{ define "cancel" }}
+  <button
+    class="btn text-red-500 dark:text-red-400 flex gap-2 items-center group"
+    hx-get="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/comment/{{ .Comment.Id }}/replyPlaceholder"
+    hx-target="#reply-form-{{ .Comment.Id }}"
+    hx-swap="outerHTML">
+    {{ i "x" "size-4" }}
+    cancel
+  </button>
+{{ end }}
+
+{{ define "reply" }}
+  <button
+      id="reply-{{ .Comment.Id }}"
+      type="submit"
+      hx-disabled-elt="#reply-{{ .Comment.Id }}"
+      class="btn-create flex items-center gap-2 no-underline hover:no-underline">
+      {{ i "reply" "w-4 h-4 inline group-[.htmx-request]:hidden" }}
+      {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
+      reply
+  </button>
+{{ end }}

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

···
             </div>
             <span class="text-gray-500 dark:text-gray-400 text-sm flex flex-wrap items-center gap-1">
                 opened by
-                {{ $owner := didOrHandle .Issue.OwnerDid .IssueOwnerHandle }}
-                {{ template "user/fragments/picHandleLink" $owner }}
+                {{ template "user/fragments/picHandleLink" .Issue.Did }}
                <span class="select-none before:content-['\00B7']"></span>
                 {{ template "repo/fragments/time" .Issue.Created }}
             </span>
···
 {{ end }}
 
 {{ define "repoAfter" }}
-    <section id="comments" class="my-2 mt-2 space-y-2 relative">
-        {{ range $index, $comment := .Comments }}
-            <div
-                id="comment-{{ .CommentId }}"
-                class="bg-white dark:bg-gray-800 rounded drop-shadow-sm py-2 px-4 relative w-full md:max-w-3/5 md:w-fit">
-                {{ if gt $index 0 }}
-                <div class="absolute left-8 -top-2 w-px h-2 bg-gray-300 dark:bg-gray-600"></div>
-                {{ end }}
-                {{ template "repo/issues/fragments/issueComment" (dict "RepoInfo" $.RepoInfo "LoggedInUser" $.LoggedInUser "Issue" $.Issue "Comment" .)}}
-            </div>
-        {{ end }}
-    </section>
+  <div class="flex flex-col gap-4 mt-4">
+  {{
+    template "repo/issues/fragments/commentList"
+    (dict
+      "RepoInfo" $.RepoInfo
+      "LoggedInUser" $.LoggedInUser
+      "Issue" $.Issue
+      "CommentList" $.Issue.CommentList)
+  }}
 
-    {{ block "newComment" . }} {{ end }}
-
+  {{ template "repo/issues/fragments/newComment" . }}
+  <div>
 {{ end }}
 
-{{ define "newComment" }}
-  {{ if .LoggedInUser }}
-  <form
-      id="comment-form"
-      hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/comment"
-      hx-on::after-request="if(event.detail.successful) this.reset()"
-  >
-    <div class="bg-white dark:bg-gray-800 rounded drop-shadow-sm py-4 px-4 relative w-full md:w-3/5">
-      <div class="text-sm pb-2 text-gray-500 dark:text-gray-400">
-        {{ template "user/fragments/picHandleLink" (didOrHandle .LoggedInUser.Did .LoggedInUser.Handle) }}
-      </div>
-          <textarea
-              id="comment-textarea"
-              name="body"
-              class="w-full p-2 rounded border border-gray-200 dark:border-gray-700"
-              placeholder="Add to the discussion. Markdown is supported."
-              onkeyup="updateCommentForm()"
-          ></textarea>
-          <div id="issue-comment"></div>
-      <div id="issue-action" class="error"></div>
-    </div>
-
-    <div class="flex gap-2 mt-2">
-        <button
-            id="comment-button"
-            hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/comment"
-            type="submit"
-            hx-disabled-elt="#comment-button"
-            class="btn p-2 flex items-center gap-2 no-underline hover:no-underline group"
-            disabled
-        >
-            {{ i "message-square-plus" "w-4 h-4" }}
-            comment
-            {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
-        </button>
-
-        {{ $isIssueAuthor := and .LoggedInUser (eq .LoggedInUser.Did .Issue.OwnerDid) }}
-        {{ $isRepoCollaborator := .RepoInfo.Roles.IsCollaborator }}
-        {{ $isRepoOwner := .RepoInfo.Roles.IsOwner }}
-        {{ if and (or $isIssueAuthor $isRepoCollaborator $isRepoOwner) (eq .State "open") }}
-        <button
-            id="close-button"
-            type="button"
-            class="btn flex items-center gap-2"
-            hx-indicator="#close-spinner"
-            hx-trigger="click"
-        >
-            {{ i "ban" "w-4 h-4" }}
-            close
-            <span id="close-spinner" class="group">
-                {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
-            </span>
-        </button>
-        <div
-            id="close-with-comment"
-            hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/comment"
-            hx-trigger="click from:#close-button"
-            hx-disabled-elt="#close-with-comment"
-            hx-target="#issue-comment"
-            hx-indicator="#close-spinner"
-            hx-vals="js:{body: document.getElementById('comment-textarea').value.trim() !== '' ? document.getElementById('comment-textarea').value : ''}"
-            hx-swap="none"
-        >
-        </div>
-        <div
-            id="close-issue"
-            hx-disabled-elt="#close-issue"
-            hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/close"
-            hx-trigger="click from:#close-button"
-            hx-target="#issue-action"
-            hx-indicator="#close-spinner"
-            hx-swap="none"
-        >
-        </div>
-        <script>
-            document.addEventListener('htmx:configRequest', function(evt) {
-                if (evt.target.id === 'close-with-comment') {
-                    const commentText = document.getElementById('comment-textarea').value.trim();
-                    if (commentText === '') {
-                        evt.detail.parameters = {};
-                        evt.preventDefault();
-                    }
-                }
-            });
-        </script>
-        {{ else if and (or $isIssueAuthor $isRepoCollaborator $isRepoOwner) (eq .State "closed") }}
-        <button
-            type="button"
-            class="btn flex items-center gap-2"
-            hx-post="/{{ .RepoInfo.FullName }}/issues/{{ .Issue.IssueId }}/reopen"
-            hx-indicator="#reopen-spinner"
-            hx-swap="none"
-        >
-            {{ i "refresh-ccw-dot" "w-4 h-4" }}
-            reopen
-            <span id="reopen-spinner" class="group">
-              {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
-            </span>
-        </button>
-        {{ end }}
-
-        <script>
-        function updateCommentForm() {
-            const textarea = document.getElementById('comment-textarea');
-            const commentButton = document.getElementById('comment-button');
-            const closeButton = document.getElementById('close-button');
-
-            if (textarea.value.trim() !== '') {
-                commentButton.removeAttribute('disabled');
-            } else {
-                commentButton.setAttribute('disabled', '');
-            }
-
-            if (closeButton) {
-                if (textarea.value.trim() !== '') {
-                    closeButton.innerHTML = `
-{{ i "ban" "w-4 h-4" }}
-<span>close with comment</span>
-<span id="close-spinner" class="group">
-    {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
-</span>`;
-                } else {
-                    closeButton.innerHTML = `
-{{ i "ban" "w-4 h-4" }}
-<span>close</span>
-<span id="close-spinner" class="group">
-    {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
-</span>`;
-                }
-            }
-        }
-
-        document.addEventListener('DOMContentLoaded', function() {
-            updateCommentForm();
-        });
-        </script>
-    </div>
-  </form>
-  {{ else }}
-    <div class="bg-white dark:bg-gray-800 rounded drop-shadow-sm py-4 px-4 relative w-fit">
-      <a href="/login" class="underline">login</a> to join the discussion
-    </div>
-  {{ end }}
-{{ end }}

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

···
 {{ end }}
 
 {{ define "repoAfter" }}
-<div class="flex flex-col gap-2 mt-2">
-  {{ range .Issues }}
-  <div class="rounded drop-shadow-sm bg-white px-6 py-4 dark:bg-gray-800 dark:border-gray-700">
-    <div class="pb-2">
-      <a
-          href="/{{ $.RepoInfo.FullName }}/issues/{{ .IssueId }}"
-          class="no-underline hover:underline"
-          >
-          {{ .Title | description }}
-          <span class="text-gray-500">#{{ .IssueId }}</span>
-      </a>
-    </div>
-    <p class="text-sm text-gray-500 dark:text-gray-400 flex flex-wrap items-center gap-1">
-      {{ $bgColor := "bg-gray-800 dark:bg-gray-700" }}
-      {{ $icon := "ban" }}
-      {{ $state := "closed" }}
-      {{ if .Open }}
-          {{ $bgColor = "bg-green-600 dark:bg-green-700" }}
-          {{ $icon = "circle-dot" }}
-          {{ $state = "open" }}
-      {{ end }}
+  <div class="flex flex-col gap-2 mt-2">
+    {{ range .Issues }}
+    <div class="rounded drop-shadow-sm bg-white px-6 py-4 dark:bg-gray-800 dark:border-gray-700">
+      <div class="pb-2">
+        <a
+            href="/{{ $.RepoInfo.FullName }}/issues/{{ .IssueId }}"
+            class="no-underline hover:underline"
+            >
+            {{ .Title | description }}
+            <span class="text-gray-500">#{{ .IssueId }}</span>
+        </a>
+      </div>
+      <p class="text-sm text-gray-500 dark:text-gray-400 flex flex-wrap items-center gap-1">
+        {{ $bgColor := "bg-gray-800 dark:bg-gray-700" }}
+        {{ $icon := "ban" }}
+        {{ $state := "closed" }}
+        {{ if .Open }}
+            {{ $bgColor = "bg-green-600 dark:bg-green-700" }}
+            {{ $icon = "circle-dot" }}
+            {{ $state = "open" }}
+        {{ end }}
 
-      <span class="inline-flex items-center rounded px-2 py-[5px] {{ $bgColor }} text-sm">
-          {{ i $icon "w-3 h-3 mr-1.5 text-white dark:text-white" }}
-          <span class="text-white dark:text-white">{{ $state }}</span>
-      </span>
+        <span class="inline-flex items-center rounded px-2 py-[5px] {{ $bgColor }} text-sm">
+            {{ i $icon "w-3 h-3 mr-1.5 text-white dark:text-white" }}
+            <span class="text-white dark:text-white">{{ $state }}</span>
+        </span>
 
-      <span class="ml-1">
-          {{ template "user/fragments/picHandleLink" .OwnerDid }}
-      </span>
+        <span class="ml-1">
+            {{ template "user/fragments/picHandleLink" .Did }}
+        </span>
 
-      <span class="before:content-['·']">
-        {{ template "repo/fragments/time" .Created }}
-      </span>
+        <span class="before:content-['·']">
+          {{ template "repo/fragments/time" .Created }}
+        </span>
 
-      <span class="before:content-['·']">
-        {{ $s := "s" }}
-        {{ if eq .Metadata.CommentCount 1 }}
-        {{ $s = "" }}
-        {{ end }}
-        <a href="/{{ $.RepoInfo.FullName }}/issues/{{ .IssueId }}" class="text-gray-500 dark:text-gray-400">{{ .Metadata.CommentCount }} comment{{$s}}</a>
-      </span>
-    </p>
+        <span class="before:content-['·']">
+          {{ $s := "s" }}
+          {{ if eq (len .Comments) 1 }}
+          {{ $s = "" }}
+          {{ end }}
+          <a href="/{{ $.RepoInfo.FullName }}/issues/{{ .IssueId }}" class="text-gray-500 dark:text-gray-400">{{ len .Comments }} comment{{$s}}</a>
+        </span>
+      </p>
+    </div>
+    {{ end }}
   </div>
-  {{ end }}
-</div>
-
-{{ block "pagination" . }} {{ end }}
-
+  {{ block "pagination" . }} {{ end }}
 {{ end }}
 
 {{ define "pagination" }}

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

···
 {{ define "repoContent" }}
     <form
         hx-post="/{{ .RepoInfo.FullName }}/issues/new"
-        class="mt-6 space-y-6"
+        class="space-y-6"
         hx-swap="none"
         hx-indicator="#spinner"
     >
···
                 <button type="submit" class="btn-create flex items-center gap-2">
                     {{ i "circle-plus" "w-4 h-4" }}
                     create issue
-                    <span id="create-pull-spinner" class="group">
+                    <span id="spinner" class="group">
                         {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
                     </span>
                 </button>