`aa6b691`

Align issue timeline flow

Authored by

espadonne 4 days ago

SHA: aa6b691cafa7b419935221bf2c0eed19deb77d89
Parents: 0129845
Tree: 459dc40

6 changed files

Status	File	+	-
M	`internal/issues/issues.go`	23	2
M	`internal/issues/issues_test.go`	39	0
M	`internal/web/handlers/repo/issues.go`	237	39
M	`internal/web/render/octicons.go`	18	0
M	`internal/web/static/css/shithub.css`	97	8
M	`internal/web/templates/repo/issue_view.html`	158	74

internal/issues/issues.gomodified

  	"errors"
  	"fmt"
  	"log/slog"
++	"strconv"
  	"strings"
  	"time"
  	ErrEmptyTitle        = errors.New("issues: title is required")
  	ErrTitleTooLong      = errors.New("issues: title too long (max 256)")
  	ErrBodyTooLong       = errors.New("issues: body too long")
++	ErrEmptyComment      = errors.New("issues: comment body is required")
  	ErrCommentTooLong    = errors.New("issues: comment too long")
  	ErrIssueLocked       = errors.New("issues: issue is locked")
  	ErrCommentRateLimit  = errors.New("issues: comment rate limit exceeded")
  // and indexes references. Returns the fresh comment.
  func AddComment(ctx context.Context, deps Deps, p CommentCreateParams) (issuesdb.IssueComment, error) {
  	body := strings.TrimSpace(p.Body)
--	if body == "" || len(body) > 65535 {
++	if body == "" {
++		return issuesdb.IssueComment{}, ErrEmptyComment
++	}
++	if len(body) > 65535 {
  		return issuesdb.IssueComment{}, ErrCommentTooLong
  	}
  	if deps.Limiter != nil && p.AuthorUserID != 0 {
  // SetState closes or reopens an issue and emits an `closed` /
  // `reopened` event.
  func SetState(ctx context.Context, deps Deps, actorUserID, issueID int64, newState, reason string) error {
++	return setState(ctx, deps, actorUserID, issueID, newState, reason, 0)
++}
++
++// SetStateWithComment is used by the issue comment form when the submit
++// button both creates a comment and changes state. The timeline event stores
++// the comment id so the UI can keep the state badge adjacent to the comment
++// that caused it.
++func SetStateWithComment(ctx context.Context, deps Deps, actorUserID, issueID int64, newState, reason string, commentID int64) error {
++	return setState(ctx, deps, actorUserID, issueID, newState, reason, commentID)
++}
++
++func setState(ctx context.Context, deps Deps, actorUserID, issueID int64, newState, reason string, commentID int64) error {
  	if newState != "open" && newState != "closed" {
  		return errors.New("issues: state must be open or closed")
  	}
  	if newState == "open" {
  		kind = "reopened"
  	}
++	meta := emptyMeta
++	if commentID != 0 {
++		meta = []byte(`{"comment_id":` + strconv.FormatInt(commentID, 10) + `}`)
++	}
  	if _, err := q.InsertIssueEvent(ctx, tx, issuesdb.InsertIssueEventParams{
  		IssueID:     issueID,
  		ActorUserID: pgtype.Int8{Int64: actorUserID, Valid: actorUserID != 0},
  		Kind:        kind,
--		Meta:        emptyMeta,
++		Meta:        meta,
  	}); err != nil {
  		return err
  	}

internal/issues/issues_test.gomodified

  import (
  	"context"
++	"encoding/json"
  	"io"
  	"log/slog"
  	"strings"
+ 	}
+ }
++func TestSetStateWithComment_LinksTimelineEvent(t *testing.T) {
++	pool, deps, uid, rid := setup(t)
++	ctx := context.Background()
++	row, err := issues.Create(ctx, deps, issues.CreateParams{
++		RepoID: rid, AuthorUserID: uid, Title: "close-with-comment", Body: "",
++	})
++	if err != nil {
++		t.Fatalf("Create: %v", err)
++	}
++	comment, err := issues.AddComment(ctx, deps, issues.CommentCreateParams{
++		IssueID: row.ID, AuthorUserID: uid, Body: "closing this out", IsCollab: true,
++	})
++	if err != nil {
++		t.Fatalf("AddComment: %v", err)
++	}
++	if err := issues.SetStateWithComment(ctx, deps, uid, row.ID, "closed", "", comment.ID); err != nil {
++		t.Fatalf("SetStateWithComment: %v", err)
++	}
++	iq := issuesdb.New()
++	events, err := iq.ListIssueEvents(ctx, pool, row.ID)
++	if err != nil {
++		t.Fatalf("ListIssueEvents: %v", err)
++	}
++	if len(events) != 1 {
++		t.Fatalf("got %d events, want 1", len(events))
++	}
++	if events[0].Kind != "closed" {
++		t.Fatalf("kind = %q, want closed", events[0].Kind)
++	}
++	var meta map[string]int64
++	if err := json.Unmarshal(events[0].Meta, &meta); err != nil {
++		t.Fatalf("meta json: %v", err)
++	}
++	if meta["comment_id"] != comment.ID {
++		t.Fatalf("comment_id = %d, want %d", meta["comment_id"], comment.ID)
++	}
++}
++
  func TestCreate_CrossReferenceCreatesEventOnTarget(t *testing.T) {
  	pool, deps, uid, rid := setup(t)
  	ctx := context.Background()

internal/web/handlers/repo/issues.gomodified

  package repo
  import (
++	"encoding/json"
  	"errors"
  	"net/http"
++	"sort"
  	"strconv"
  	"strings"
++	"time"
  	"github.com/go-chi/chi/v5"
  	"github.com/jackc/pgx/v5"
  	allLabels, _ := h.iq.ListLabels(r.Context(), h.d.Pool, row.ID)
  	milestones, _ := h.iq.ListMilestones(r.Context(), h.d.Pool, row.ID)
--	// Resolve usernames for comment authors.
++	usernames := map[int64]string{}
--	type commentRow struct {
++	usernameFor := func(id int64) string {
--		C          issuesdb.IssueComment
++		if id == 0 {
--		AuthorName string
++			return ""
--	}
++		}
--	cs := make([]commentRow, 0, len(comments))
++		if name, ok := usernames[id]; ok {
--	for _, c := range comments {
++			return name
--		cr := commentRow{C: c}
--		if c.AuthorUserID.Valid {
--			if u, err := h.uq.GetUserByID(r.Context(), h.d.Pool, c.AuthorUserID.Int64); err == nil {
--				cr.AuthorName = u.Username
--			}
+ 		}
--		cs = append(cs, cr)
++		if u, err := h.uq.GetUserByID(r.Context(), h.d.Pool, id); err == nil {
++			usernames[id] = u.Username
++			return u.Username
++		}
++		return ""
+ 	}
--	// Author username on the issue itself.
++
  	authorName := ""
  	if issue.AuthorUserID.Valid {
--		if u, err := h.uq.GetUserByID(r.Context(), h.d.Pool, issue.AuthorUserID.Int64); err == nil {
++		authorName = usernameFor(issue.AuthorUserID.Int64)
--			authorName = u.Username
--		}
+ 	}
  	viewer := middleware.CurrentUserFromContext(r.Context())
  	actor := policy.UserActor(viewer.ID, viewer.Username, viewer.IsSuspended, false)
  	pdeps := policy.Deps{Pool: h.d.Pool}
  	repoRef := policy.NewRepoRefFromRepo(row)
--	stateRef := repoRef
++	stateRef := issueStateRepoRef(row, issue)
--	if issue.AuthorUserID.Valid {
--		stateRef.AuthorUserID = issue.AuthorUserID.Int64
--	}
  	canCommentAction := policy.Can(r.Context(), pdeps, actor, policy.ActionIssueComment, repoRef).Allow
  	canCommentThroughLock := policy.HasRoleAtLeast(r.Context(), pdeps, actor, repoRef, policy.RoleTriage)
++	canSetIssueState := policy.Can(r.Context(), pdeps, actor, policy.ActionIssueClose, stateRef).Allow
++	timeline := h.issueTimelineRows(comments, events, allLabels, milestones, usernameFor)
++	viewerAssigned := false
++	participants := map[string]struct{}{}
++	if authorName != "" {
++		participants[authorName] = struct{}{}
++	}
++	for _, c := range comments {
++		if c.AuthorUserID.Valid {
++			if name := usernameFor(c.AuthorUserID.Int64); name != "" {
++				participants[name] = struct{}{}
++			}
++		}
++	}
++	for _, a := range assignees {
++		participants[a.Username] = struct{}{}
++		if a.UserID == viewer.ID {
++			viewerAssigned = true
++		}
++	}
++	participantNames := make([]string, 0, len(participants))
++	for name := range participants {
++		participantNames = append(participantNames, name)
++	}
++	sort.Strings(participantNames)
  	w.Header().Set("Content-Type", "text/html; charset=utf-8")
  	_ = h.d.Render.RenderPage(w, r, "repo/issue_view", map[string]any{
  		"Repo":                  row,
  		"Issue":                 issue,
  		"AuthorName":            authorName,
--		"Comments":              cs,
++		"CommentCount":          len(comments),
--		"Events":                events,
++		"Timeline":              timeline,
  		"Labels":                labels,
  		"Assignees":             assignees,
++		"Participants":          participantNames,
++		"ViewerAssigned":        viewerAssigned,
  		"AllLabels":             allLabels,
  		"Milestones":            milestones,
  		"CanComment":            canCommentAction && (!issue.Locked || canCommentThroughLock),
--		"CanSetIssueState":      policy.Can(r.Context(), pdeps, actor, policy.ActionIssueClose, stateRef).Allow,
++		"CanSetIssueState":      canSetIssueState,
  		"CanEditIssueLabels":    policy.Can(r.Context(), pdeps, actor, policy.ActionIssueLabel, repoRef).Allow,
  		"CanEditIssueAssignees": policy.Can(r.Context(), pdeps, actor, policy.ActionIssueAssign, repoRef).Allow,
  		"CanEditIssueMilestone": policy.Can(r.Context(), pdeps, actor, policy.ActionIssueLabel, repoRef).Allow,
  	})
+ }
++type issueTimelineRow struct {
++	Type        string
++	C           issuesdb.IssueComment
++	E           issuesdb.IssueEvent
++	CreatedAt   time.Time
++	AuthorName  string
++	ActorName   string
++	Message     string
++	LabelName   string
++	LabelColor  string
++	CommentID   int64
++	LinkedState bool
++}
++
++func (h *Handlers) issueTimelineRows(
++	comments []issuesdb.IssueComment,
++	events []issuesdb.IssueEvent,
++	labels []issuesdb.Label,
++	milestones []issuesdb.Milestone,
++	usernameFor func(int64) string,
++) []issueTimelineRow {
++	labelByID := map[int64]issuesdb.Label{}
++	for _, l := range labels {
++		labelByID[l.ID] = l
++	}
++	milestoneByID := map[int64]issuesdb.Milestone{}
++	for _, m := range milestones {
++		milestoneByID[m.ID] = m
++	}
++	rows := make([]issueTimelineRow, 0, len(comments)+len(events))
++	for _, c := range comments {
++		row := issueTimelineRow{Type: "comment", C: c, CreatedAt: c.CreatedAt.Time}
++		if c.AuthorUserID.Valid {
++			row.AuthorName = usernameFor(c.AuthorUserID.Int64)
++		}
++		rows = append(rows, row)
++	}
++	for _, e := range events {
++		row := issueTimelineRow{
++			Type:      "event",
++			E:         e,
++			CreatedAt: e.CreatedAt.Time,
++			Message:   issueEventMessage(e.Kind),
++		}
++		if e.ActorUserID.Valid {
++			row.ActorName = usernameFor(e.ActorUserID.Int64)
++		}
++		meta := issueEventMeta(e.Meta)
++		if id := metaInt64(meta, "comment_id"); id != 0 {
++			row.CommentID = id
++			row.LinkedState = e.Kind == "closed" || e.Kind == "reopened"
++		}
++		if id := metaInt64(meta, "label_id"); id != 0 {
++			if l, ok := labelByID[id]; ok {
++				row.LabelName = l.Name
++				row.LabelColor = l.Color
++			}
++		}
++		if id := metaInt64(meta, "milestone_id"); id != 0 {
++			if m, ok := milestoneByID[id]; ok {
++				switch e.Kind {
++				case "milestoned":
++					row.Message = "added this to the " + m.Title + " milestone"
++				case "demilestoned":
++					row.Message = "removed this from the " + m.Title + " milestone"
++				}
++			}
++		}
++		if id := metaInt64(meta, "user_id"); id != 0 {
++			if name := usernameFor(id); name != "" {
++				switch e.Kind {
++				case "assigned":
++					row.Message = "assigned " + name
++				case "unassigned":
++					row.Message = "unassigned " + name
++				}
++			}
++		}
++		rows = append(rows, row)
++	}
++	sort.SliceStable(rows, func(i, j int) bool {
++		return rows[i].CreatedAt.Before(rows[j].CreatedAt)
++	})
++	return rows
++}
++
++func issueEventMeta(raw []byte) map[string]any {
++	var out map[string]any
++	if len(raw) == 0 {
++		return nil
++	}
++	if err := json.Unmarshal(raw, &out); err != nil {
++		return nil
++	}
++	return out
++}
++
++func metaInt64(meta map[string]any, key string) int64 {
++	if meta == nil {
++		return 0
++	}
++	switch v := meta[key].(type) {
++	case float64:
++		return int64(v)
++	case string:
++		n, _ := strconv.ParseInt(v, 10, 64)
++		return n
++	default:
++		return 0
++	}
++}
++
++func issueEventMessage(kind string) string {
++	switch kind {
++	case "closed":
++		return "closed this issue"
++	case "reopened":
++		return "reopened this issue"
++	case "locked":
++		return "locked this conversation"
++	case "unlocked":
++		return "unlocked this conversation"
++	case "labeled":
++		return "added a label"
++	case "unlabeled":
++		return "removed a label"
++	case "milestoned":
++		return "added this to a milestone"
++	case "demilestoned":
++		return "removed this from a milestone"
++	case "assigned":
++		return "assigned a user"
++	case "unassigned":
++		return "unassigned a user"
++	case "referenced":
++		return "referenced this issue"
++	default:
++		return kind
++	}
++}
++
++func issueStateRepoRef(row reposdb.Repo, issue issuesdb.Issue) policy.RepoRef {
++	ref := policy.NewRepoRefFromRepo(row)
++	if issue.AuthorUserID.Valid {
++		ref.AuthorUserID = issue.AuthorUserID.Int64
++	}
++	return ref
++}
++
  func (h *Handlers) loadIssueByNumber(w http.ResponseWriter, r *http.Request, repo reposdb.Repo) (issuesdb.Issue, bool) {
  	num, err := strconv.ParseInt(chi.URLParam(r, "number"), 10, 64)
  	if err != nil {
  		return
+ 	}
  	viewer := middleware.CurrentUserFromContext(r.Context())
--	body := r.PostFormValue("body")
++	body := strings.TrimSpace(r.PostFormValue("body"))
++	state := strings.TrimSpace(r.PostFormValue("state"))
++	reason := strings.TrimSpace(r.PostFormValue("reason"))
  	// IsCollab is the locked-issue bypass: triage+ on the repo can comment
  	// past a `locked=true` flag (the gate exists to silence drive-by
  	actor := policy.UserActor(viewer.ID, viewer.Username, viewer.IsSuspended, false)
  	isCollab := policy.HasRoleAtLeast(r.Context(), policy.Deps{Pool: h.d.Pool}, actor, policy.NewRepoRefFromRepo(row), policy.RoleTriage)
--	_, err := issues.AddComment(r.Context(), h.issuesDeps(), issues.CommentCreateParams{
++	var commentID int64
--		IssueID:      issue.ID,
++	if body != "" {
--		AuthorUserID: viewer.ID,
++		c, err := issues.AddComment(r.Context(), h.issuesDeps(), issues.CommentCreateParams{
--		Body:         body,
++			IssueID:      issue.ID,
--		IsCollab:     isCollab,
++			AuthorUserID: viewer.ID,
--	})
++			Body:         body,
--	if err != nil {
++			IsCollab:     isCollab,
--		h.handleIssueWriteError(w, r, owner.Username, row, issue, err)
++		})
++		if err != nil {
++			h.handleIssueWriteError(w, r, owner.Username, row, issue, err)
++			return
++		}
++		commentID = c.ID
++	} else if state == "" {
++		h.handleIssueWriteError(w, r, owner.Username, row, issue, issues.ErrEmptyComment)
  		return
+ 	}
++	if state != "" {
++		stateRef := issueStateRepoRef(row, issue)
++		if dec := policy.Can(r.Context(), policy.Deps{Pool: h.d.Pool}, actor, policy.ActionIssueClose, stateRef); !dec.Allow {
++			h.d.Render.HTTPError(w, r, policy.Maybe404(dec, stateRef, actor), "")
++			return
++		}
++		var err error
++		if commentID != 0 {
++			err = issues.SetStateWithComment(r.Context(), h.issuesDeps(), viewer.ID, issue.ID, state, reason, commentID)
++		} else {
++			err = issues.SetState(r.Context(), h.issuesDeps(), viewer.ID, issue.ID, state, reason)
++		}
++		if err != nil {
++			h.handleIssueWriteError(w, r, owner.Username, row, issue, err)
++			return
++		}
++	}
  	// Auto-watch on first involvement (S26).
  	_ = social.AutoWatchOnInvolvement(r.Context(), h.socialDeps(), viewer.ID, row.ID)
  	h.redirectIssue(w, r, owner.Username, row.Name, issue.Number)
+ 	}
  	viewer := middleware.CurrentUserFromContext(r.Context())
  	actor := policy.UserActor(viewer.ID, viewer.Username, viewer.IsSuspended, false)
--	repoRef := policy.NewRepoRefFromRepo(row)
++	stateRef := issueStateRepoRef(row, issue)
--	if issue.AuthorUserID.Valid {
++	if dec := policy.Can(r.Context(), policy.Deps{Pool: h.d.Pool}, actor, policy.ActionIssueClose, stateRef); !dec.Allow {
--		repoRef.AuthorUserID = issue.AuthorUserID.Int64
++		h.d.Render.HTTPError(w, r, policy.Maybe404(dec, stateRef, actor), "")
--	}
--	if dec := policy.Can(r.Context(), policy.Deps{Pool: h.d.Pool}, actor, policy.ActionIssueClose, repoRef); !dec.Allow {
--		h.d.Render.HTTPError(w, r, policy.Maybe404(dec, repoRef, actor), "")
  		return
+ 	}
  	state := strings.TrimSpace(r.PostFormValue("state"))
  		h.d.Render.HTTPError(w, r, http.StatusLocked, "issue is locked")
  	case errors.Is(err, issues.ErrCommentRateLimit):
  		h.d.Render.HTTPError(w, r, http.StatusTooManyRequests, "rate limit")
++	case errors.Is(err, issues.ErrEmptyComment):
++		h.d.Render.HTTPError(w, r, http.StatusBadRequest, "comment body required")
  	case errors.Is(err, issues.ErrCommentTooLong):
  		h.d.Render.HTTPError(w, r, http.StatusBadRequest, "comment too long")
  	default:

internal/web/render/octicons.gomodified

  			`><path d="M9.598 1.591a.75.75 0 0 1 .785-.175 7 7 0 1 1-8.967 8.967.75.75 0 0 1 .961-.96 5.5 5.5 0 0 0 7.046-7.046.75.75 0 0 1 .175-.786z"/></svg>`),
  		"alert": trustedSVG(`<svg xmlns="http://www.w3.org/2000/svg" ` + cls +
  			`><path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575zM8 5a.75.75 0 0 0-.75.75v2.5a.75.75 0 0 0 1.5 0v-2.5A.75.75 0 0 0 8 5zm1 6a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/></svg>`),
++		"issue-opened": trustedSVG(`<svg xmlns="http://www.w3.org/2000/svg" ` + cls +
++			`><path d="M8 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-3.25a.75.75 0 0 1 .75.75v2.75a.75.75 0 0 1-1.5 0V5.5A.75.75 0 0 1 8 4.75ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"/></svg>`),
++		"issue-closed": trustedSVG(`<svg xmlns="http://www.w3.org/2000/svg" ` + cls +
++			`><path d="M8 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm11.03-1.78a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.97 8.78a.75.75 0 0 1 1.06-1.06l1.22 1.22 2.72-2.72a.75.75 0 0 1 1.06 0Z"/></svg>`),
++		"comment": trustedSVG(`<svg xmlns="http://www.w3.org/2000/svg" ` + cls +
++			`><path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v6.5A1.75 1.75 0 0 1 13.25 11H8.06l-3.31 2.48A.75.75 0 0 1 3.5 12.88V11h-.75A1.75 1.75 0 0 1 1 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v6.5c0 .138.112.25.25.25h1.5a.75.75 0 0 1 .75.75v1.13l2.36-1.77a.75.75 0 0 1 .45-.15h5.44a.25.25 0 0 0 .25-.25v-6.5a.25.25 0 0 0-.25-.25Z"/></svg>`),
++		"gear": trustedSVG(`<svg xmlns="http://www.w3.org/2000/svg" ` + cls +
++			`><path d="M8 0a1.5 1.5 0 0 1 1.45 1.13l.21.83c.23.08.45.18.66.3l.75-.44a1.5 1.5 0 0 1 1.93.3l.88.88a1.5 1.5 0 0 1 .3 1.93l-.44.75c.12.21.22.43.3.66l.83.21A1.5 1.5 0 0 1 16 8a1.5 1.5 0 0 1-1.13 1.45l-.83.21c-.08.23-.18.45-.3.66l.44.75a1.5 1.5 0 0 1-.3 1.93l-.88.88a1.5 1.5 0 0 1-1.93.3l-.75-.44c-.21.12-.43.22-.66.3l-.21.83A1.5 1.5 0 0 1 8 16a1.5 1.5 0 0 1-1.45-1.13l-.21-.83a5.36 5.36 0 0 1-.66-.3l-.75.44a1.5 1.5 0 0 1-1.93-.3L2.12 13a1.5 1.5 0 0 1-.3-1.93l.44-.75a5.36 5.36 0 0 1-.3-.66l-.83-.21A1.5 1.5 0 0 1 0 8c0-.69.47-1.29 1.13-1.45l.83-.21c.08-.23.18-.45.3-.66l-.44-.75a1.5 1.5 0 0 1 .3-1.93L3 2.12a1.5 1.5 0 0 1 1.93-.3l.75.44c.21-.12.43-.22.66-.3l.21-.83A1.5 1.5 0 0 1 8 0Zm0 5a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z"/></svg>`),
++		"lock": trustedSVG(`<svg xmlns="http://www.w3.org/2000/svg" ` + cls +
++			`><path d="M4.5 6V4a3.5 3.5 0 1 1 7 0v2h.75c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 12.25 15h-8.5A1.75 1.75 0 0 1 2 13.25v-5.5C2 6.784 2.784 6 3.75 6Zm1.5 0h4V4a2 2 0 1 0-4 0Zm-2.25 1.5a.25.25 0 0 0-.25.25v5.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-5.5a.25.25 0 0 0-.25-.25Z"/></svg>`),
++		"unlock": trustedSVG(`<svg xmlns="http://www.w3.org/2000/svg" ` + cls +
++			`><path d="M8 1.5A2.5 2.5 0 0 0 5.5 4v2h6.75c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 12.25 15h-8.5A1.75 1.75 0 0 1 2 13.25v-5.5C2 6.784 2.784 6 3.75 6H4V4a4 4 0 0 1 7.8-1.26.75.75 0 0 1-1.42.47A2.5 2.5 0 0 0 8 1.5ZM3.75 7.5a.25.25 0 0 0-.25.25v5.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-5.5a.25.25 0 0 0-.25-.25Z"/></svg>`),
++		"tag": trustedSVG(`<svg xmlns="http://www.w3.org/2000/svg" ` + cls +
++			`><path d="M1 2.75C1 1.784 1.784 1 2.75 1h4.586c.464 0 .909.184 1.237.513l5.914 5.914a1.75 1.75 0 0 1 0 2.475l-4.585 4.585a1.75 1.75 0 0 1-2.475 0L1.513 8.573A1.75 1.75 0 0 1 1 7.336Zm1.75-.25a.25.25 0 0 0-.25.25v4.586c0 .066.026.13.073.177l5.914 5.914a.25.25 0 0 0 .353 0l4.587-4.587a.25.25 0 0 0 0-.353L7.513 2.573a.25.25 0 0 0-.177-.073Zm2.25 4a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Z"/></svg>`),
++		"person": trustedSVG(`<svg xmlns="http://www.w3.org/2000/svg" ` + cls +
++			`><path d="M10.5 5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Zm1.5 0a4 4 0 1 0-8 0 4 4 0 0 0 8 0ZM2 14.25C2 11.35 4.686 9 8 9s6 2.35 6 5.25a.75.75 0 0 1-1.5 0c0-2.02-2.01-3.75-4.5-3.75s-4.5 1.73-4.5 3.75a.75.75 0 0 1-1.5 0Z"/></svg>`),
++		"milestone": trustedSVG(`<svg xmlns="http://www.w3.org/2000/svg" ` + cls +
++			`><path d="M8 0a.75.75 0 0 1 .75.75V2h3.5c.414 0 .75.336.75.75v4.5a.75.75 0 0 1-.75.75h-3.5v1h4.5c.414 0 .75.336.75.75v4.5a.75.75 0 0 1-.75.75h-5v.25a.75.75 0 0 1-1.5 0V.75A.75.75 0 0 1 8 0ZM8.75 3.5v3h2.75v-3Zm0 7v3h3.75v-3Z"/></svg>`),
  		// S29: notification bell for the top-bar inbox link.
  		"bell": trustedSVG(`<svg xmlns="http://www.w3.org/2000/svg" ` + cls +
  			`><path d="M8 16a2 2 0 0 0 1.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 0 0 8 16zM3 5a5 5 0 0 1 10 0v2.947c0 .05.015.098.042.139l1.703 2.555A1.519 1.519 0 0 1 13.482 13H2.518a1.519 1.519 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947zm5-3.5A3.5 3.5 0 0 0 4.5 5v2.947c0 .346-.102.683-.294.97l-1.703 2.556a.018.018 0 0 0-.003.01.017.017 0 0 0 .002.012.017.017 0 0 0 .015.005h10.964a.017.017 0 0 0 .016-.005.018.018 0 0 0 0-.022l-1.703-2.555a1.749 1.749 0 0 1-.294-.97V5A3.5 3.5 0 0 0 8 1.5z"/></svg>`),

internal/web/static/css/shithub.cssmodified

  .shithub-issues-assignees { font-size: 0.85rem; }
  .shithub-issues-empty { color: var(--fg-muted); padding: 2rem; text-align: center; border: 1px dashed var(--border-default); border-radius: 6px; }
  .shithub-issue-num { color: var(--fg-muted); font-weight: 400; margin-left: 0.5rem; }
--.shithub-issue-title { display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; }
++.shithub-issue-title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; border-bottom: 1px solid var(--border-default); padding-bottom: 0.75rem; }
--.shithub-issue-meta { color: var(--fg-muted); margin: 0.5rem 0 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
++.shithub-issue-title { display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; margin: 0; }
--.shithub-issue-grid { display: grid; grid-template-columns: 1fr 16rem; gap: 1.5rem; }
++.shithub-issue-head-actions { display: flex; gap: 0.5rem; flex: 0 0 auto; }
--@media (max-width: 768px) { .shithub-issue-grid { grid-template-columns: 1fr; } }
++.shithub-issue-meta { color: var(--fg-muted); margin: 0.75rem 0 1.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
++.shithub-issue-meta .shithub-pill, .shithub-comment-form .shithub-button, .shithub-sidebar-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem; }
++.shithub-issue-grid { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 1.5rem; }
++@media (max-width: 900px) { .shithub-issue-grid { grid-template-columns: 1fr; } }
  .shithub-comment {
    border: 1px solid var(--border-default);
    border-radius: 6px;
    color: var(--fg-muted);
+ }
  .shithub-comment-body { padding: 0.75rem; }
--.shithub-event { color: var(--fg-muted); font-size: 0.85rem; padding: 0.4rem 0.75rem; border-left: 2px solid var(--border-default); margin-left: 0.75rem; }
++.shithub-event {
--.shithub-event-kind { text-transform: lowercase; }
++  color: var(--fg-muted);
++  font-size: 0.85rem;
++  display: flex;
++  align-items: center;
++  gap: 0.5rem;
++  padding: 0.55rem 0;
++  margin: 0 0 1rem 1.2rem;
++  position: relative;
++}
++.shithub-event::before {
++  content: "";
++  position: absolute;
++  top: -1rem;
++  bottom: -1rem;
++  left: 0.6rem;
++  border-left: 2px solid var(--border-default);
++  z-index: 0;
++}
++.shithub-event-icon {
++  width: 1.3rem;
++  height: 1.3rem;
++  border: 1px solid var(--border-default);
++  border-radius: 50%;
++  background: var(--canvas-default);
++  color: var(--fg-muted);
++  display: inline-flex;
++  align-items: center;
++  justify-content: center;
++  position: relative;
++  z-index: 1;
++  flex: 0 0 auto;
++}
++.shithub-event-icon svg { width: 0.8rem; height: 0.8rem; }
++.shithub-event-linked .shithub-event-icon { color: var(--fg-muted); }
++.shithub-event a { font-weight: 600; }
  .shithub-comment-form { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; }
  .shithub-comment-form textarea, .shithub-issue-form textarea, .shithub-issue-form input[type=text] {
    font: inherit; padding: 0.5rem; border: 1px solid var(--border-default); border-radius: 6px; width: 100%;
  .shithub-form-row { display: flex; flex-direction: column; gap: 0.25rem; }
  .shithub-form-row span { font-weight: 600; font-size: 0.9rem; }
  .shithub-form-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }
--.shithub-issue-sidebar section { padding: 0.75rem 0; border-bottom: 1px solid var(--border-default); }
++.shithub-form-actions-start { justify-content: flex-start; }
--.shithub-issue-sidebar h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-muted); margin: 0 0 0.5rem; }
++.shithub-issue-sidebar section { padding: 0.75rem 0; border-bottom: 1px solid var(--border-default); position: relative; }
++.shithub-sidebar-heading { display: flex; justify-content: space-between; gap: 0.75rem; align-items: center; margin-bottom: 0.5rem; }
++.shithub-issue-sidebar h3 { font-size: 0.85rem; color: var(--fg-muted); margin: 0; }
++.shithub-sidebar-icon, .shithub-sidebar-editor > summary {
++  color: var(--fg-muted);
++  display: inline-flex;
++  align-items: center;
++  justify-content: center;
++  width: 1.25rem;
++  height: 1.25rem;
++  cursor: pointer;
++}
++.shithub-sidebar-editor > summary { list-style: none; }
++.shithub-sidebar-editor > summary::-webkit-details-marker { display: none; }
++.shithub-popover {
++  position: absolute;
++  right: 0;
++  top: 2rem;
++  z-index: 20;
++  min-width: 17rem;
++  display: flex;
++  flex-direction: column;
++  gap: 0.55rem;
++  padding: 0.75rem;
++  background: var(--canvas-default);
++  border: 1px solid var(--border-default);
++  border-radius: 8px;
++  box-shadow: 0 8px 24px rgba(140, 149, 159, 0.2);
++}
++.shithub-popover input[type=text], .shithub-popover select {
++  font: inherit;
++  width: 100%;
++  padding: 0.45rem 0.5rem;
++  border: 1px solid var(--border-default);
++  border-radius: 6px;
++  background: var(--canvas-default);
++  color: var(--fg-default);
++}
++.shithub-inline-form { display: inline; }
++.shithub-link-button {
++  border: 0;
++  padding: 0;
++  background: transparent;
++  color: var(--accent-emphasis, #0969da);
++  font: inherit;
++  cursor: pointer;
++  display: inline-flex;
++  gap: 0.35rem;
++  align-items: center;
++}
++.shithub-sidebar-button { width: 100%; }
++.shithub-participant { display: inline-block; margin: 0 0.35rem 0.35rem 0; }
++.shithub-issue-actions form { margin: 0.25rem 0; }
  .shithub-issue-signedout { color: var(--fg-muted); padding: 1rem; text-align: center; border: 1px dashed var(--border-default); border-radius: 6px; }
  .shithub-label {
    display: inline-block;

internal/web/templates/repo/issue_view.htmlmodified

  {{ define "page" -}}
  <section class="shithub-issue-view">
    <header class="shithub-issue-view-head">
--    <h1 class="shithub-issue-title">
++    <div class="shithub-issue-title-row">
--      <span>{{ .Issue.Title }}</span>
++      <h1 class="shithub-issue-title">
--      <span class="shithub-issue-num">#{{ .Issue.Number }}</span>
++        <span>{{ .Issue.Title }}</span>
--    </h1>
++        <span class="shithub-issue-num">#{{ .Issue.Number }}</span>
++      </h1>
++      <div class="shithub-issue-head-actions">
++        <a href="/{{ .Owner }}/{{ .Repo.Name }}/issues/new" class="shithub-button shithub-button-primary">New issue</a>
++      </div>
++    </div>
      <div class="shithub-issue-meta">
        <span class="shithub-pill shithub-issues-state-{{ printf "%s" .Issue.State }}">
--        {{ if eq (printf "%s" .Issue.State) "open" }}● Open{{ else }}✓ Closed{{ end }}
++        {{ if eq (printf "%s" .Issue.State) "open" }}{{ octicon "issue-opened" }} Open{{ else }}{{ octicon "issue-closed" }} Closed{{ end }}
        </span>
        {{ if .AuthorName }}<a href="/{{ .AuthorName }}">{{ .AuthorName }}</a>{{ end }}
        opened this issue
        <time datetime="{{ .Issue.CreatedAt.Time.Format "2006-01-02T15:04:05Z" }}">{{ relativeTime .Issue.CreatedAt.Time }}</time>
--      · {{ len .Comments }} comment{{ if ne (len .Comments) 1 }}s{{ end }}
++      · {{ .CommentCount }} comment{{ if ne .CommentCount 1 }}s{{ end }}
--      {{ if .Issue.Locked }}<span class="shithub-pill">locked</span>{{ end }}
++      {{ if .Issue.Locked }}<span class="shithub-pill">{{ octicon "lock" }} locked</span>{{ end }}
      </div>
    </header>
    <div class="shithub-issue-grid">
      <article class="shithub-issue-thread">
--      <div class="shithub-comment">
++      <div class="shithub-comment shithub-issue-body-comment">
          <div class="shithub-comment-head">
            {{ if .AuthorName }}<a href="/{{ .AuthorName }}">{{ .AuthorName }}</a>{{ end }}
++          opened
            <time datetime="{{ .Issue.CreatedAt.Time.Format "2006-01-02T15:04:05Z" }}">{{ relativeTime .Issue.CreatedAt.Time }}</time>
          </div>
          <div class="shithub-comment-body markdown-body">
          </div>
        </div>
--      {{ range .Comments }}
++      {{ range .Timeline }}
--      <div class="shithub-comment">
++        {{ if eq .Type "comment" }}
--        <div class="shithub-comment-head">
++        <div class="shithub-comment">
--          {{ if .AuthorName }}<a href="/{{ .AuthorName }}">{{ .AuthorName }}</a>{{ end }}
++          <div class="shithub-comment-head">
--          commented
++            {{ if .AuthorName }}<a href="/{{ .AuthorName }}">{{ .AuthorName }}</a>{{ end }}
--          <time datetime="{{ .C.CreatedAt.Time.Format "2006-01-02T15:04:05Z" }}">{{ relativeTime .C.CreatedAt.Time }}</time>
++            commented
++            <time datetime="{{ .CreatedAt.Format "2006-01-02T15:04:05Z" }}">{{ relativeTime .CreatedAt }}</time>
++          </div>
++          <div class="shithub-comment-body markdown-body">
++            {{ if .C.BodyHtmlCached.Valid }}{{ safeHTML .C.BodyHtmlCached.String }}{{ else }}<p>{{ .C.Body }}</p>{{ end }}
++          </div>
          </div>
--        <div class="shithub-comment-body markdown-body">
++        {{ else }}
--          {{ if .C.BodyHtmlCached.Valid }}{{ safeHTML .C.BodyHtmlCached.String }}{{ else }}<p>{{ .C.Body }}</p>{{ end }}
++        <div class="shithub-event {{ if .LinkedState }}shithub-event-linked{{ end }}">
++          <span class="shithub-event-icon" aria-hidden="true">
++            {{ if eq .E.Kind "closed" }}{{ octicon "issue-closed" }}
++            {{ else if eq .E.Kind "reopened" }}{{ octicon "issue-opened" }}
++            {{ else if eq .E.Kind "locked" }}{{ octicon "lock" }}
++            {{ else if eq .E.Kind "unlocked" }}{{ octicon "unlock" }}
++            {{ else if or (eq .E.Kind "labeled") (eq .E.Kind "unlabeled") }}{{ octicon "tag" }}
++            {{ else if or (eq .E.Kind "assigned") (eq .E.Kind "unassigned") }}{{ octicon "person" }}
++            {{ else if or (eq .E.Kind "milestoned") (eq .E.Kind "demilestoned") }}{{ octicon "milestone" }}
++            {{ else }}{{ octicon "comment" }}{{ end }}
++          </span>
++          <span>
++            {{ if .ActorName }}<a href="/{{ .ActorName }}">{{ .ActorName }}</a>{{ else }}Someone{{ end }}
++            {{ if .LabelName }}
++              {{ if eq .E.Kind "labeled" }}added the{{ else }}removed the{{ end }}
++              <span class="shithub-label" style="background-color: #{{ .LabelColor }}">{{ .LabelName }}</span>
++              label
++            {{ else }}
++              {{ .Message }}
++            {{ end }}
++            <time datetime="{{ .CreatedAt.Format "2006-01-02T15:04:05Z" }}">{{ relativeTime .CreatedAt }}</time>
++          </span>
          </div>
--      </div>
++        {{ end }}
--      {{ end }}
--
--      {{ range .Events }}
--      <div class="shithub-event">
--        <span class="shithub-event-kind">{{ .Kind }}</span>
--        <time datetime="{{ .CreatedAt.Time.Format "2006-01-02T15:04:05Z" }}">{{ relativeTime .CreatedAt.Time }}</time>
--      </div>
        {{ end }}
        {{ if .CanComment }}
          <input type="hidden" name="csrf_token" value="{{ .CSRFToken }}">
          <label>
            <span>Add a comment</span>
--          <textarea name="body" rows="6" maxlength="65535" required></textarea>
++          <textarea name="body" rows="6" maxlength="65535" placeholder="Leave a comment"></textarea>
          </label>
          <div class="shithub-form-actions">
            {{ if .CanSetIssueState }}
            {{ if eq (printf "%s" .Issue.State) "open" }}
--          <button type="submit" formaction="/{{ .Owner }}/{{ .Repo.Name }}/issues/{{ .Issue.Number }}/state" name="state" value="closed" class="shithub-button">Close issue</button>
++          <button type="submit" name="state" value="closed" class="shithub-button">Close issue</button>
            {{ else }}
--          <button type="submit" formaction="/{{ .Owner }}/{{ .Repo.Name }}/issues/{{ .Issue.Number }}/state" name="state" value="open" class="shithub-button">Reopen issue</button>
++          <button type="submit" name="state" value="open" class="shithub-button">Reopen issue</button>
            {{ end }}
            {{ end }}
            <button type="submit" class="shithub-button shithub-button-primary">Comment</button>
      <aside class="shithub-issue-sidebar">
        <section>
--        <h3>Labels</h3>
++        <div class="shithub-sidebar-heading">
--        {{ if .Labels }}
++          <h3>Assignees</h3>
--          {{ range .Labels }}<span class="shithub-label" style="background-color: #{{ .Color }}">{{ .Name }}</span>{{ end }}
++          {{ if .CanEditIssueAssignees }}
--        {{ else }}<p class="shithub-muted">None yet</p>{{ end }}
++          <details class="shithub-sidebar-editor">
--        {{ if .CanEditIssueLabels }}
++            <summary aria-label="Edit assignees">{{ octicon "gear" }}</summary>
--        <details>
++            <form method="post" action="/{{ .Owner }}/{{ .Repo.Name }}/issues/{{ .Issue.Number }}/assignees" class="shithub-popover">
--          <summary>Edit labels</summary>
++              <strong>Select assignees</strong>
--          <form method="post" action="/{{ .Owner }}/{{ .Repo.Name }}/issues/{{ .Issue.Number }}/labels">
++              <input type="hidden" name="csrf_token" value="{{ .CSRFToken }}">
--            <input type="hidden" name="csrf_token" value="{{ .CSRFToken }}">
++              <input type="text" name="username" placeholder="Filter assignees" required>
--            {{ $current := .Labels }}
++              <div class="shithub-form-actions shithub-form-actions-start">
--            {{ range .AllLabels }}
++                <button type="submit" name="mode" value="add" class="shithub-button">Add</button>
--              {{ $id := .ID }}
++                <button type="submit" name="mode" value="remove" class="shithub-button">Remove</button>
--              <label class="shithub-label-pick">
++              </div>
--                <input type="checkbox" name="label_ids" value="{{ .ID }}"
++            </form>
--                  {{ range $current }}{{ if eq .ID $id }}checked{{ end }}{{ end }}>
++          </details>
--                <span class="shithub-label" style="background-color: #{{ .Color }}">{{ .Name }}</span>
++          {{ end }}
--              </label>
++        </div>
++        {{ if .Assignees }}
++          {{ range .Assignees }}<a href="/{{ .Username }}">@{{ .Username }}</a>{{ end }}
++        {{ else }}
++          <p class="shithub-muted">No one</p>
++          {{ if and .CanEditIssueAssignees .Viewer.ID }}
++            {{ if not .ViewerAssigned }}
++            <form method="post" action="/{{ .Owner }}/{{ .Repo.Name }}/issues/{{ .Issue.Number }}/assignees" class="shithub-inline-form">
++              <input type="hidden" name="csrf_token" value="{{ .CSRFToken }}">
++              <input type="hidden" name="username" value="{{ .Viewer.Username }}">
++              <button type="submit" name="mode" value="add" class="shithub-link-button">Assign yourself</button>
++            </form>
              {{ end }}
--            <button type="submit" class="shithub-button">Apply</button>
++          {{ end }}
--          </form>
--        </details>
          {{ end }}
        </section>
        <section>
--        <h3>Assignees</h3>
++        <div class="shithub-sidebar-heading">
--        {{ if .Assignees }}
++          <h3>Labels</h3>
--          {{ range .Assignees }}<a href="/{{ .Username }}">@{{ .Username }}</a>{{ end }}
++          {{ if .CanEditIssueLabels }}
--        {{ else }}<p class="shithub-muted">No one assigned</p>{{ end }}
++          <details class="shithub-sidebar-editor">
--        {{ if .CanEditIssueAssignees }}
++            <summary aria-label="Edit labels">{{ octicon "gear" }}</summary>
--        <form method="post" action="/{{ .Owner }}/{{ .Repo.Name }}/issues/{{ .Issue.Number }}/assignees" class="shithub-assignee-form">
++            <form method="post" action="/{{ .Owner }}/{{ .Repo.Name }}/issues/{{ .Issue.Number }}/labels" class="shithub-popover">
--          <input type="hidden" name="csrf_token" value="{{ .CSRFToken }}">
++              <strong>Select labels</strong>
--          <input type="text" name="username" placeholder="username" required>
++              <input type="hidden" name="csrf_token" value="{{ .CSRFToken }}">
--          <button type="submit" name="mode" value="add" class="shithub-button">Add</button>
++              {{ $current := .Labels }}
--          <button type="submit" name="mode" value="remove" class="shithub-button">Remove</button>
++              {{ range .AllLabels }}
--        </form>
++                {{ $id := .ID }}
--        {{ end }}
++                <label class="shithub-label-pick">
++                  <input type="checkbox" name="label_ids" value="{{ .ID }}"
++                    {{ range $current }}{{ if eq .ID $id }}checked{{ end }}{{ end }}>
++                  <span class="shithub-label" style="background-color: #{{ .Color }}">{{ .Name }}</span>
++                </label>
++              {{ end }}
++              <button type="submit" class="shithub-button">Apply</button>
++            </form>
++          </details>
++          {{ end }}
++        </div>
++        {{ if .Labels }}
++          {{ range .Labels }}<span class="shithub-label" style="background-color: #{{ .Color }}">{{ .Name }}</span>{{ end }}
++        {{ else }}<p class="shithub-muted">No labels</p>{{ end }}
++      </section>
++
++      <section>
++        <div class="shithub-sidebar-heading"><h3>Type</h3><span class="shithub-sidebar-icon">{{ octicon "gear" }}</span></div>
++        <p class="shithub-muted">No type</p>
++      </section>
++
++      <section>
++        <div class="shithub-sidebar-heading"><h3>Projects</h3><span class="shithub-sidebar-icon">{{ octicon "gear" }}</span></div>
++        <p class="shithub-muted">No projects</p>
        </section>
        <section>
--        <h3>Milestone</h3>
++        <div class="shithub-sidebar-heading">
++          <h3>Milestone</h3>
++          {{ if .CanEditIssueMilestone }}
++          <details class="shithub-sidebar-editor">
++            <summary aria-label="Edit milestone">{{ octicon "gear" }}</summary>
++            <form method="post" action="/{{ .Owner }}/{{ .Repo.Name }}/issues/{{ .Issue.Number }}/milestone" class="shithub-popover">
++              <strong>Select milestone</strong>
++              <input type="hidden" name="csrf_token" value="{{ .CSRFToken }}">
++              <select name="milestone_id">
++                <option value="0">No milestone</option>
++                {{ range .Milestones }}<option value="{{ .ID }}">{{ .Title }}</option>{{ end }}
++              </select>
++              <button type="submit" class="shithub-button">Apply</button>
++            </form>
++          </details>
++          {{ end }}
++        </div>
          {{ if .Issue.MilestoneID.Valid }}
            {{ $mid := .Issue.MilestoneID.Int64 }}
            {{ range .Milestones }}{{ if eq .ID $mid }}<a href="/{{ $.Owner }}/{{ $.Repo.Name }}/milestones">{{ .Title }}</a>{{ end }}{{ end }}
          {{ else }}<p class="shithub-muted">No milestone</p>{{ end }}
--        {{ if .CanEditIssueMilestone }}
--        <form method="post" action="/{{ .Owner }}/{{ .Repo.Name }}/issues/{{ .Issue.Number }}/milestone">
--          <input type="hidden" name="csrf_token" value="{{ .CSRFToken }}">
--          <select name="milestone_id">
--            <option value="0">— None —</option>
--            {{ range .Milestones }}<option value="{{ .ID }}">{{ .Title }}</option>{{ end }}
--          </select>
--          <button type="submit" class="shithub-button">Set</button>
--        </form>
--        {{ end }}
        </section>
--      {{ if .CanLockIssue }}
        <section>
--        <h3>Lock</h3>
++        <div class="shithub-sidebar-heading"><h3>Relationships</h3><span class="shithub-sidebar-icon">{{ octicon "gear" }}</span></div>
++        <p class="shithub-muted">None yet</p>
++      </section>
++
++      <section>
++        <div class="shithub-sidebar-heading"><h3>Development</h3><span class="shithub-sidebar-icon">{{ octicon "gear" }}</span></div>
++        <p><a href="#">Create a branch</a> for this issue or link a pull request.</p>
++      </section>
++
++      <section>
++        <div class="shithub-sidebar-heading"><h3>Notifications</h3><a href="#" class="shithub-muted">Customize</a></div>
++        <button type="button" class="shithub-button shithub-sidebar-button">{{ octicon "bell" }} Unsubscribe</button>
++      </section>
++
++      <section>
++        <h3>Participants</h3>
++        {{ if .Participants }}
++          {{ range .Participants }}<a href="/{{ . }}" class="shithub-participant">@{{ . }}</a>{{ end }}
++        {{ else }}<p class="shithub-muted">None yet</p>{{ end }}
++      </section>
++
++      {{ if .CanLockIssue }}
++      <section class="shithub-issue-actions">
          <form method="post" action="/{{ .Owner }}/{{ .Repo.Name }}/issues/{{ .Issue.Number }}/lock">
            <input type="hidden" name="csrf_token" value="{{ .CSRFToken }}">
            {{ if .Issue.Locked }}
--          <button type="submit" name="lock" value="false" class="shithub-button">Unlock</button>
++          <button type="submit" name="lock" value="false" class="shithub-link-button">{{ octicon "unlock" }} Unlock conversation</button>
            {{ else }}
--          <button type="submit" name="lock" value="true" class="shithub-button">Lock conversation</button>
++          <button type="submit" name="lock" value="true" class="shithub-link-button">{{ octicon "lock" }} Lock conversation</button>
            {{ end }}
          </form>
        </section>