Web app improvements.

Author: cpojer

core/App.css

@@ -318,6 +318,22 @@ html[data-codiff-platform='darwin'] .plan-header {
   --mdx-editor-font-size: 14px;
   --mdx-editor-line-height: 1.55;
   --mdx-editor-padding: 8px 12px;
+  --plan-comment-highlight-0: light-dark(rgb(198 125 0 / 0.24), rgb(245 190 66 / 0.24));
+  --plan-comment-highlight-0-active: light-dark(rgb(198 125 0 / 0.4), rgb(245 190 66 / 0.4));
+  --plan-comment-highlight-1: light-dark(rgb(40 112 205 / 0.22), rgb(91 166 255 / 0.24));
+  --plan-comment-highlight-1-active: light-dark(rgb(40 112 205 / 0.38), rgb(91 166 255 / 0.4));
+  --plan-comment-highlight-2: light-dark(rgb(29 135 71 / 0.22), rgb(80 200 120 / 0.22));
+  --plan-comment-highlight-2-active: light-dark(rgb(29 135 71 / 0.38), rgb(80 200 120 / 0.38));
+  --plan-comment-highlight-3: light-dark(rgb(190 48 104 / 0.2), rgb(244 114 182 / 0.22));
+  --plan-comment-highlight-3-active: light-dark(rgb(190 48 104 / 0.36), rgb(244 114 182 / 0.38));
+  --plan-comment-highlight-4: light-dark(rgb(112 70 184 / 0.2), rgb(190 140 255 / 0.22));
+  --plan-comment-highlight-4-active: light-dark(rgb(112 70 184 / 0.36), rgb(190 140 255 / 0.38));
+  --plan-comment-highlight-5: light-dark(rgb(204 73 34 / 0.2), rgb(255 132 92 / 0.22));
+  --plan-comment-highlight-5-active: light-dark(rgb(204 73 34 / 0.36), rgb(255 132 92 / 0.38));
+  --plan-comment-highlight-6: light-dark(rgb(13 130 133 / 0.22), rgb(65 205 200 / 0.22));
+  --plan-comment-highlight-6-active: light-dark(rgb(13 130 133 / 0.38), rgb(65 205 200 / 0.38));
+  --plan-comment-highlight-7: light-dark(rgb(101 113 24 / 0.22), rgb(190 205 80 / 0.22));
+  --plan-comment-highlight-7-active: light-dark(rgb(101 113 24 / 0.38), rgb(190 205 80 / 0.38));
   display: block;
 }
 
@@ -327,6 +343,11 @@ html[data-codiff-platform='darwin'] .plan-header {
   border-radius: 0 0 var(--codiff-diff-radius) var(--codiff-diff-radius);
 }
 
+.codiff-plan-editor .mdx-editor-content::selection,
+.codiff-plan-editor .mdx-editor-content *::selection {
+  background-color: var(--plan-comment-selection, var(--mdx-editor-selection));
+}
+
 .plan-comment-affordance {
   background: transparent;
   height: 24px;
@@ -400,6 +421,24 @@ html[data-codiff-platform='darwin'] .plan-header {
   padding: 0;
 }
 
+.plan-comment-composer {
+  overflow: visible;
+}
+
+.plan-comment-thread > .plan-comment-composer.review-comment-thread {
+  padding: 0;
+}
+
+.plan-comment-composer .review-comment-body,
+.plan-comment-composer .review-comment-input {
+  min-inline-size: 0;
+  width: 100%;
+}
+
+.plan-comment-input.review-comment-input {
+  padding: 8px 12px;
+}
+
 .plan-comment-thread .review-comment-body {
   background: var(--code-bg);
 }
@@ -409,6 +448,11 @@ html[data-codiff-platform='darwin'] .plan-header {
   box-shadow: 0 0 0 1px color-mix(in srgb, var(--sidebar-ref) 18%, transparent);
 }
 
+.plan-comment-message.editing > .review-comment-body {
+  border-color: color-mix(in srgb, var(--sidebar-ref) 48%, var(--file-border));
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sidebar-ref) 18%, transparent);
+}
+
 .plan-comment-thread.resolved {
   color: var(--muted);
   opacity: 0.72;
@@ -428,6 +472,10 @@ html[data-codiff-platform='darwin'] .plan-header {
   padding-right: 0;
 }
 
+.plan-comment-header .review-comment-action {
+  height: 26px;
+}
+
 .plan-comment-heading {
   align-items: baseline;
   display: flex;
@@ -1109,6 +1157,11 @@ html[data-codiff-platform='darwin'] .sidebar {
   padding: 4px 8px;
 }
 
+.sidebar-settings-line-count {
+  font: 600 11px/1 var(--font-mono);
+  margin-left: auto;
+}
+
 .sidebar-search {
   -webkit-app-region: no-drag;
   background: rgb(127 127 127 / 0.1);
@@ -1855,6 +1908,12 @@ html[data-codiff-platform='darwin'] .sidebar {
   min-width: 0;
 }
 
+.general-comment-sign-in {
+  display: flex;
+  justify-content: center;
+  padding: 12px;
+}
+
 .general-comment-card.review-comment,
 .general-comment-composer .review-comment {
   padding-right: min(48px, 4vw);
@@ -2540,6 +2599,12 @@ html[data-codiff-platform='darwin'] .sidebar {
   color: var(--viewed);
 }
 
+.codiff-open-button.plan-download-button {
+  height: 30px;
+  padding: 0;
+  width: 30px;
+}
+
 .codiff-copy-path-icon {
   display: block;
   flex: none;
@@ -2749,7 +2814,7 @@ html[data-codiff-platform='darwin'] .sidebar {
   transform: scale(1.05);
 }
 
-.codiff-open-button:active:not(:disabled) {
+.codiff-open-button:active:not(:disabled):not(:has(.review-submit-toggle:active)) {
   transform: scale(0.95);
 }
 
@@ -3257,6 +3322,88 @@ diffs-container .review-comment-thread {
   color: var(--text);
 }
 
+.review-submit-action {
+  flex: none;
+  position: relative;
+}
+
+.codiff-source-description-header:has(.review-submit-popover) {
+  position: relative;
+  z-index: 13;
+}
+
+.review-submit-button:not(.close) {
+  cursor: default;
+  gap: 0;
+  padding: 0;
+}
+
+.review-submit-primary,
+.review-submit-toggle {
+  align-items: center;
+  align-self: stretch;
+  background: transparent;
+  border: 0;
+  color: inherit;
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  justify-content: center;
+  min-height: 28px;
+  padding: 0;
+}
+
+.review-submit-primary {
+  gap: 7px;
+  padding: 0 9px 0 11px;
+}
+
+.review-submit-toggle {
+  width: 28px;
+}
+
+.review-submit-primary:focus-visible,
+.review-submit-toggle:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--tree-selection-focus) 70%, transparent);
+  outline-offset: -2px;
+}
+
+.review-submit-divider {
+  color: color-mix(in srgb, currentColor 32%, transparent);
+  display: block;
+  font-weight: 400;
+  line-height: 1;
+  user-select: none;
+}
+
+.review-submit-chevron {
+  display: block;
+  transition: transform 160ms ease;
+}
+
+.review-submit-chevron.expanded {
+  transform: rotate(180deg);
+}
+
+.review-submit-button[data-disabled='true'] {
+  cursor: default;
+  opacity: 0.58;
+}
+
+.review-submit-button[data-disabled='true']:hover {
+  background: transparent;
+  box-shadow:
+    0 0 0 1px rgb(255 255 255 / 0) inset,
+    0 10px 32px -24px rgb(0 0 0 / 0),
+    0 8px 20px -16px rgb(0 0 0 / 0);
+  transform: none;
+}
+
+.review-submit-primary:disabled,
+.review-submit-toggle:disabled {
+  cursor: default;
+}
+
 .review-submit-button.approve {
   color: var(--viewed);
 }
@@ -3265,6 +3412,46 @@ diffs-container .review-comment-thread {
   color: var(--text);
 }
 
+.review-submit-popover {
+  background: var(--code-bg);
+  border: 1px solid var(--file-border);
+  border-radius: 18px;
+  box-shadow:
+    0 24px 72px -34px rgb(0 0 0 / 0.72),
+    0 12px 28px -18px rgb(0 0 0 / 0.54);
+  color: var(--text);
+  corner-shape: squircle;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: absolute;
+  right: 0;
+  top: calc(100% + 8px);
+  width: min(380px, calc(100vw - 24px));
+  z-index: 80;
+}
+
+.review-submit-popover-editor.review-comment-markdown-editor,
+.review-submit-popover-editor.review-comment-markdown-editor .mdx-editor-content {
+  min-height: 116px;
+}
+
+.review-submit-popover-editor .review-comment-input {
+  padding: 12px;
+}
+
+.review-submit-popover-footer {
+  align-items: center;
+  border-top: 1px solid var(--file-border);
+  display: flex;
+  justify-content: flex-end;
+  padding: 8px;
+}
+
+.review-submit-popover-submit.approve {
+  color: var(--viewed);
+}
+
 .copy-comments-button:hover {
   box-shadow:
     0 0 0 1px var(--file-border),

core/App.tsx

@@ -2306,7 +2306,7 @@ export default function App() {
   );
 
   const submitPullRequestReview = useCallback(
-    (event: PullRequestReviewEvent) => {
+    (event: PullRequestReviewEvent, body?: string) => {
       const currentState = stateRef.current;
       if (
         currentState?.source.type !== 'pull-request' ||
@@ -2323,6 +2323,7 @@ export default function App() {
       setPullRequestReviewSubmitting(event);
       void window.codiff
         .submitPullRequestReview({
+          ...(body ? { body } : {}),
           comments: pendingComments.map(toPullRequestReviewComment),
           event,
           source: currentState.source,