tenseleyflow/shithub / 2794493

Browse files

Polish new PR composer and diff preview

Authored by mfwolffe <wolffemf@dukes.jmu.edu>
SHA
2794493e895bf3aefc205829090b489a699c46cd
Parents
7c44705
Tree
59cf219

6 changed files

StatusFile+-
M internal/web/handlers/repo/comment_editor.go 51 0
M internal/web/handlers/repo/compare_ui.go 0 12
M internal/web/handlers/repo/pulls.go 1 1
M internal/web/static/css/shithub.css 34 4
M internal/web/static/js/comment-editor.js 1 1
M internal/web/templates/repo/pull_new.html 12 4
internal/web/handlers/repo/comment_editor.gomodified
@@ -180,3 +180,54 @@ func (h *Handlers) pullCommentEditorConfig(
180180
181181
 	return config
182182
 }
183
+
184
+func (h *Handlers) pullNewCommentEditorConfig(ctx context.Context, row reposdb.Repo, viewer middleware.CurrentUser) commentEditorConfig {
185
+	config := commentEditorConfig{}
186
+	if !viewer.IsAnonymous() && !strings.EqualFold(viewer.Username, "copilot") {
187
+		config.Mentions = append(config.Mentions, commentEditorMention{
188
+			Username:  viewer.Username,
189
+			AvatarURL: commentEditorAvatarURL(viewer.Username),
190
+		})
191
+	}
192
+
193
+	seenRefs := map[int64]struct{}{}
194
+	addRef := func(number int64, title, kind, state string) {
195
+		if number == 0 {
196
+			return
197
+		}
198
+		if _, ok := seenRefs[number]; ok {
199
+			return
200
+		}
201
+		seenRefs[number] = struct{}{}
202
+		config.References = append(config.References, commentEditorReference{
203
+			Number: number,
204
+			Title:  title,
205
+			Kind:   kind,
206
+			State:  state,
207
+		})
208
+	}
209
+	if prs, err := h.pq.ListPullRequestsByRepo(ctx, h.d.Pool, pullsdb.ListPullRequestsByRepoParams{
210
+		RepoID:      row.ID,
211
+		Limit:       8,
212
+		StateFilter: pgtype.Text{},
213
+		Draft:       pgtype.Bool{},
214
+	}); err == nil {
215
+		for _, item := range prs {
216
+			addRef(item.Number, item.Title, "pull request", string(item.State))
217
+		}
218
+	}
219
+	if issues, err := h.iq.ListIssues(ctx, h.d.Pool, issuesdb.ListIssuesParams{
220
+		RepoID:      row.ID,
221
+		Limit:       8,
222
+		StateFilter: pgtype.Text{},
223
+		Kind:        issuesdb.NullIssueKind{IssueKind: issuesdb.IssueKindIssue, Valid: true},
224
+	}); err == nil {
225
+		for _, item := range issues {
226
+			addRef(item.Number, item.Title, "issue", string(item.State))
227
+		}
228
+	}
229
+	if len(config.References) > 10 {
230
+		config.References = config.References[:10]
231
+	}
232
+	return config
233
+}
internal/web/handlers/repo/compare_ui.gomodified
@@ -347,15 +347,3 @@ func probeCompareMerge(ctx context.Context, gitDir, base, head string) compareMe
347347
 		Description: "These branches can be automatically merged.",
348348
 	}
349349
 }
350
-
351
-func pullNewCommentEditorConfig(viewer middleware.CurrentUser) commentEditorConfig {
352
-	if viewer.IsAnonymous() || strings.EqualFold(viewer.Username, "copilot") {
353
-		return commentEditorConfig{}
354
-	}
355
-	return commentEditorConfig{
356
-		Mentions: []commentEditorMention{{
357
-			Username:  viewer.Username,
358
-			AvatarURL: commentEditorAvatarURL(viewer.Username),
359
-		}},
360
-	}
361
-}
internal/web/handlers/repo/pulls.gomodified
@@ -243,7 +243,7 @@ func (h *Handlers) renderPullNewForm(w http.ResponseWriter, r *http.Request, own
243243
 			"Title":               "Open a pull request · " + row.Name,
244244
 			"UseCompareJS":        true,
245245
 			"UseCommentEditor":    true,
246
-			"CommentEditorConfig": commentEditorConfigJSON(pullNewCommentEditorConfig(viewer)),
246
+			"CommentEditorConfig": commentEditorConfigJSON(h.pullNewCommentEditorConfig(r.Context(), row, viewer)),
247247
 			"Viewer":              viewer,
248248
 			"ViewerAvatarURL":     commentEditorAvatarURL(viewer.Username),
249249
 			"Error":               opts.Error,
internal/web/static/css/shithub.cssmodified
@@ -7809,7 +7809,9 @@ button.shithub-repo-action {
78097809
   margin-top: 1rem;
78107810
   border: 1px solid var(--border-default);
78117811
   border-radius: 6px;
7812
-  overflow: hidden;
7812
+  overflow-x: auto;
7813
+  overflow-y: hidden;
7814
+  background: var(--canvas-default);
78137815
 }
78147816
 .shithub-diff-file-head {
78157817
   display: flex;
@@ -7830,22 +7832,24 @@ button.shithub-repo-action {
78307832
 .shithub-diff-file-toolarge { padding: 0.5rem 0.75rem; }
78317833
 .shithub-diff-file-toolarge > summary { cursor: pointer; color: var(--fg-muted); }
78327834
 .shithub-diff-table {
7833
-  width: 100%;
7835
+  width: max-content;
7836
+  min-width: 100%;
78347837
   border-collapse: collapse;
78357838
   font-family: monospace;
78367839
   font-size: 0.85rem;
7837
-  table-layout: fixed;
7840
+  table-layout: auto;
78387841
 }
78397842
 .shithub-diff-table td { padding: 0 0.5rem; vertical-align: top; }
78407843
 .shithub-diff-table pre { margin: 0; white-space: pre; }
78417844
 .shithub-diff-lineno {
78427845
   width: 50px;
7846
+  min-width: 50px;
78437847
   text-align: right;
78447848
   color: var(--fg-muted);
78457849
   user-select: none;
78467850
   background: var(--canvas-subtle);
78477851
 }
7848
-.shithub-diff-content { width: auto; }
7852
+.shithub-diff-content { min-width: 18rem; width: auto; }
78497853
 .shithub-diff-add { background: rgba(46, 160, 67, 0.10); }
78507854
 .shithub-diff-del { background: rgba(248, 81, 73, 0.10); }
78517855
 .shithub-diff-add .shithub-diff-content { background: rgba(46, 160, 67, 0.05); }
@@ -8318,6 +8322,32 @@ button.shithub-repo-action {
83188322
 .shithub-pull-new-sidebar p {
83198323
   margin: 0;
83208324
 }
8325
+.shithub-pull-new-diff-section {
8326
+  margin-top: 1.5rem;
8327
+}
8328
+.shithub-pull-new-diff-head {
8329
+  display: flex;
8330
+  align-items: center;
8331
+  justify-content: space-between;
8332
+  gap: 1rem;
8333
+  padding-bottom: 0.5rem;
8334
+  border-bottom: 1px solid var(--border-default);
8335
+}
8336
+.shithub-pull-new-diff-head h2 {
8337
+  margin: 0;
8338
+  font-size: 1rem;
8339
+}
8340
+.shithub-pull-new-diff-head p {
8341
+  margin: 0.2rem 0 0;
8342
+  color: var(--fg-muted);
8343
+  font-size: 0.9rem;
8344
+}
8345
+.shithub-pull-new-diff-body {
8346
+  margin-top: 0;
8347
+}
8348
+.shithub-pull-new-diff-body .shithub-diff-file:first-child {
8349
+  margin-top: 0.75rem;
8350
+}
83218351
 @media (max-width: 760px) {
83228352
   .shithub-range-create {
83238353
     margin-left: 0;
internal/web/static/js/comment-editor.jsmodified
@@ -32,7 +32,7 @@
3232
   ];
3333
3434
   function initEditor(root) {
35
-    const form = root.querySelector("form");
35
+    const form = root.querySelector("form") || root.closest("form");
3636
     const box = root.querySelector(".shithub-comment-editor-box");
3737
     const textarea = root.querySelector("[data-comment-textarea]");
3838
     const writePane = root.querySelector("[data-comment-write-pane]");
internal/web/templates/repo/pull_new.htmlmodified
@@ -40,7 +40,7 @@
4040
     {{ end }}
4141
4242
     <div class="shithub-pull-new-layout">
43
-      <form method="post" action="/{{ .Owner }}/{{ .Repo.Name }}/pulls" class="shithub-pull-new-form">
43
+      <form method="post" action="/{{ .Owner }}/{{ .Repo.Name }}/pulls" class="shithub-pull-new-form" data-comment-editor data-preview-url="/{{ .Owner }}/{{ .Repo.Name }}/markdown-preview" data-preview-ref="{{ .Base }}">
4444
         <input type="hidden" name="csrf_token" value="{{ .CSRFToken }}">
4545
         <input type="hidden" name="base" value="{{ .Base }}">
4646
         <input type="hidden" name="head" value="{{ .Head }}">
@@ -55,7 +55,7 @@
5555
           </label>
5656
         </div>
5757
58
-        <div class="shithub-pull-new-description" data-comment-editor data-preview-url="/{{ .Owner }}/{{ .Repo.Name }}/markdown-preview" data-preview-ref="{{ .Base }}">
58
+        <div class="shithub-pull-new-description">
5959
           <script type="application/json" data-comment-editor-config>{{ jsField . "CommentEditorConfig" }}</script>
6060
           <label class="shithub-pull-new-description-label" for="pull-new-body">Add a description</label>
6161
           <div class="shithub-comment-editor-box">
@@ -197,8 +197,16 @@
197197
     {{ end }}
198198
199199
     {{ if .DiffHTML }}
200
-    <section class="shithub-diff-body" aria-label="Diff">
201
-      {{ safeHTML .DiffHTML }}
200
+    <section class="shithub-pull-new-diff-section" aria-label="Files changed">
201
+      <header class="shithub-pull-new-diff-head">
202
+        <div>
203
+          <h2>Files changed</h2>
204
+          <p>Showing {{ .Stats.FileCount }} changed {{ pluralize .Stats.FileCount "file" "files" }} with {{ .Stats.CommitCount }} {{ pluralize .Stats.CommitCount "commit" "commits" }}.</p>
205
+        </div>
206
+      </header>
207
+      <div class="shithub-diff-body shithub-pull-new-diff-body">
208
+        {{ safeHTML .DiffHTML }}
209
+      </div>
202210
     </section>
203211
     {{ end }}
204212
     {{ end }}