git-reviewer 2.0.0

package/public/style.css

@@ -0,0 +1,990 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  background: #f5f7fa;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.hidden {
+  display: none !important;
+}
+
+/* Header */
+.app-header {
+  background: white;
+  border-bottom: 1px solid #e1e4e8;
+  padding: 16px 24px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  max-width: 100%;
+}
+
+.app-header h1 {
+  font-size: 20px;
+  font-weight: 600;
+  color: #24292e;
+  margin: 0;
+  white-space: nowrap;
+  margin-right: 24px;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+  max-width: 800px;
+}
+
+#repoPath {
+  flex: 1;
+  padding: 8px 12px;
+  font-size: 14px;
+  border: 1px solid #d1d5da;
+  border-radius: 6px;
+  background: #fafbfc;
+  transition: all 0.2s;
+}
+
+#repoPath:focus {
+  outline: none;
+  border-color: #0366d6;
+  background: white;
+  box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.1);
+}
+
+button {
+  padding: 8px 16px;
+  font-size: 14px;
+  font-weight: 500;
+  background: #0366d6;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s;
+  white-space: nowrap;
+}
+
+button:hover {
+  background: #0256c5;
+}
+
+button:active {
+  transform: scale(0.98);
+}
+
+button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.submit-btn {
+  background: #28a745;
+}
+
+.submit-btn:hover {
+  background: #239239;
+}
+
+.status {
+  margin-top: 8px;
+  padding: 8px 12px;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.status.success {
+  background: #d4edda;
+  color: #155724;
+  border-left: 3px solid #28a745;
+}
+
+.status.error {
+  background: #f8d7da;
+  color: #721c24;
+  border-left: 3px solid #dc3545;
+}
+
+.status.loading {
+  background: #d1ecf1;
+  color: #0c5460;
+  border-left: 3px solid #17a2b8;
+}
+
+/* Main Container */
+.main-container {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+
+/* Sidebar */
+.sidebar {
+  width: 320px;
+  min-width: 200px;
+  max-width: 600px;
+  background: white;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.sidebar-header {
+  padding: 16px 20px;
+  border-bottom: 1px solid #e1e4e8;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.sidebar-header h2 {
+  font-size: 16px;
+  font-weight: 600;
+  color: #24292e;
+}
+
+.file-count {
+  font-size: 12px;
+  color: #586069;
+  background: #f1f8ff;
+  padding: 4px 8px;
+  border-radius: 12px;
+}
+
+.files-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px;
+}
+
+.file-item {
+  padding: 10px 12px;
+  margin-bottom: 4px;
+  background: #fafbfc;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-size: 13px;
+  color: #24292e;
+  border-left: 3px solid transparent;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.file-item .filename {
+  color: #24292e;
+}
+
+.file-path-text {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  direction: rtl;
+  text-align: left;
+  color: #6a737d;
+}
+
+.file-status {
+  font-size: 10px;
+  font-weight: 600;
+  padding: 2px 6px;
+  border-radius: 3px;
+  text-align: center;
+  min-width: 16px;
+  flex-shrink: 0;
+}
+
+.file-status-added {
+  background: #28a745;
+  color: white;
+}
+
+.file-status-modified {
+  background: #0366d6;
+  color: white;
+}
+
+.file-item:hover {
+  background: #f3f4f6;
+  border-left-color: #0366d6;
+}
+
+.file-item.active {
+  background: #f1f8ff;
+  border-left-color: #0366d6;
+  color: #0366d6;
+  font-weight: 500;
+}
+
+/* Resize Handle */
+.resize-handle {
+  width: 4px;
+  background: #e1e4e8;
+  cursor: col-resize;
+  transition: background 0.2s;
+  flex-shrink: 0;
+}
+
+.resize-handle:hover {
+  background: #0366d6;
+}
+
+.resize-handle.resizing {
+  background: #0366d6;
+}
+
+/* Comments Sidebar */
+.comments-sidebar {
+  width: 350px;
+  min-width: 250px;
+  max-width: 600px;
+  background: white;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.comments-sidebar-header {
+  padding: 16px 20px;
+  border-bottom: 1px solid #e1e4e8;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.comments-sidebar-header h2 {
+  font-size: 16px;
+  font-weight: 600;
+  color: #24292e;
+}
+
+.comments-count {
+  font-size: 12px;
+  color: #586069;
+  background: #fff5b1;
+  padding: 4px 8px;
+  border-radius: 12px;
+  font-weight: 600;
+}
+
+.comments-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px;
+}
+
+.comment-item {
+  background: #f6f8fa;
+  border-radius: 6px;
+  padding: 12px;
+  margin-bottom: 12px;
+  border-left: 3px solid #f9c513;
+  transition: all 0.2s;
+  position: relative;
+}
+
+.comment-item:hover {
+  background: #e1e4e8;
+  border-left-color: #0366d6;
+}
+
+.comment-item-content {
+  cursor: pointer;
+}
+
+.comment-item-delete {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  background: #dc3545;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-size: 16px;
+  line-height: 1;
+  padding: 0;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.comment-item:hover .comment-item-delete {
+  opacity: 1;
+}
+
+.comment-item-delete:hover {
+  background: #c82333;
+}
+
+.comment-item-file {
+  font-size: 11px;
+  color: #0366d6;
+  font-weight: 600;
+  margin-bottom: 6px;
+  font-family: 'Monaco', 'Courier New', monospace;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  direction: rtl;
+  text-align: left;
+}
+
+.comment-item-line {
+  font-size: 11px;
+  color: #586069;
+  margin-bottom: 8px;
+}
+
+.comment-item-text {
+  font-size: 13px;
+  color: #24292e;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  line-height: 1.4;
+}
+
+.comment-item-selected {
+  margin-top: 8px;
+  padding: 6px 8px;
+  background: white;
+  border-radius: 3px;
+  font-size: 11px;
+  font-family: 'Monaco', 'Courier New', monospace;
+  color: #586069;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  border: 1px solid #e1e4e8;
+}
+
+/* Code Section */
+.code-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: #fafbfc;
+}
+
+.code-header {
+  padding: 16px 24px;
+  background: white;
+  border-bottom: 1px solid #e1e4e8;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.code-header h2 {
+  font-size: 14px;
+  font-weight: 600;
+  color: #24292e;
+  font-family: 'Monaco', 'Courier New', monospace;
+  flex: 1;
+}
+
+.full-context-btn {
+  background: transparent;
+  border: 1px solid #d1d5da;
+  padding: 6px 12px;
+  font-size: 13px;
+  color: #24292e;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  border-radius: 6px;
+}
+
+.full-context-btn:hover {
+  background: #f6f8fa;
+  border-color: #0366d6;
+  color: #0366d6;
+}
+
+.code-viewer {
+  flex: 1;
+  overflow-y: auto;
+  background: #ffffff;
+  padding-bottom: 50vh;
+}
+
+.line {
+  display: flex;
+  align-items: flex-start;
+  transition: background 0.1s;
+  position: relative;
+  border-left: 3px solid transparent;
+}
+
+.line:hover {
+  background: rgba(0, 0, 0, 0.03);
+}
+
+/* Diff-specific styling */
+.diff-add {
+  background: #e6ffed;
+}
+
+.diff-add:hover {
+  background: #d1f5e0;
+}
+
+.diff-delete {
+  background: #ffebe9;
+}
+
+.diff-delete:hover {
+  background: #ffd7d5;
+}
+
+.diff-unchanged {
+  background: #ffffff;
+}
+
+/* Line numbers container */
+.line-numbers {
+  display: flex;
+  flex-shrink: 0;
+  background: #fafbfc;
+  border-right: 1px solid #e1e4e8;
+  font-family: 'Monaco', 'Courier New', monospace;
+  font-size: 12px;
+  user-select: none;
+}
+
+.old-line-number,
+.new-line-number {
+  width: 45px;
+  text-align: right;
+  padding: 4px 8px;
+  color: rgba(27, 31, 35, 0.3);
+  min-width: 45px;
+}
+
+.new-line-number {
+  border-left: 1px solid #e1e4e8;
+}
+
+.new-line-number:hover,
+.old-line-number:hover {
+  color: #0366d6;
+}
+
+.diff-delete .old-line-number {
+  cursor: pointer;
+}
+
+.diff-add .new-line-number,
+.diff-unchanged .new-line-number {
+  cursor: pointer;
+}
+
+.diff-add .old-line-number {
+  background: #cdffd8;
+}
+
+.diff-add .new-line-number {
+  background: #cdffd8;
+  color: #24292e;
+}
+
+.diff-delete .old-line-number {
+  background: #ffc1bc;
+  color: #24292e;
+}
+
+.diff-delete .new-line-number {
+  background: #ffc1bc;
+}
+
+.line-content {
+  flex: 1;
+  padding: 4px 16px;
+  color: #24292e;
+  font-family: 'Monaco', 'Courier New', monospace;
+  font-size: 12px;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+.line.commented {
+  border-left-color: #f9c513;
+}
+
+.diff-add.commented {
+  background: #daf5e2;
+}
+
+.diff-delete.commented {
+  background: #ffddd9;
+}
+
+.diff-unchanged.commented {
+  background: #fffbdd;
+}
+
+.comment-indicator {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 6px;
+  height: 6px;
+  background: #f9c513;
+  border-radius: 50%;
+}
+
+/*
+ * The body of a comment is a vertical stack: the fuzzy-match warning, the
+ * comment text, its follow-ups, and any open reply box. Laying this out as a
+ * flex *row* made every block after the first compete with the text for
+ * width, which collapsed a commented line into a narrow column as soon as it
+ * had a single reply. The action buttons sit outside that flow, pinned to the
+ * top-right, with padding reserving their space.
+ */
+.comment-box {
+  background: #fffbdd;
+  padding: 12px 210px 12px 16px;
+  margin: 0 90px 0 93px;
+  border-left: 3px solid #f9c513;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  border-radius: 0 0 4px 4px;
+  position: relative;
+}
+
+.comment-text {
+  color: #735c0f;
+  font-size: 13px;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+.comment-actions {
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+  position: absolute;
+  top: 12px;
+  right: 16px;
+}
+
+.comment-edit {
+  background: #0366d6;
+  padding: 4px 12px;
+  font-size: 12px;
+}
+
+.comment-edit:hover {
+  background: #0256c5;
+}
+
+.comment-delete {
+  background: #dc3545;
+  padding: 4px 12px;
+  font-size: 12px;
+}
+
+.comment-reply {
+  background: #6f42c1;
+  padding: 4px 12px;
+  font-size: 12px;
+}
+
+.comment-reply:hover {
+  background: #5a32a3;
+}
+
+/* Follow-ups */
+.comment-followups {
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.comment-followup-item {
+  margin-bottom: 8px;
+  padding: 8px 12px;
+  background: rgba(255, 255, 255, 0.5);
+  border-radius: 4px;
+  border-left: 2px solid #6f42c1;
+}
+
+.followup-text {
+  display: block;
+  font-size: 12px;
+  color: #24292e;
+  margin-bottom: 4px;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+.followup-timestamp {
+  display: block;
+  font-size: 10px;
+  color: #6a737d;
+  font-style: italic;
+}
+
+/* Follow-up input box */
+.followup-input-box {
+  margin-top: 12px;
+  padding: 12px;
+  background: #f0f4ff;
+  border-left: 3px solid #6f42c1;
+  border-radius: 4px;
+}
+
+.followup-input-box textarea {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid #d1d5da;
+  border-radius: 4px;
+  font-family: inherit;
+  font-size: 13px;
+  resize: none;
+  overflow: hidden;
+  min-height: 50px;
+  background: white;
+}
+
+.followup-input-box textarea:focus {
+  outline: none;
+  border-color: #6f42c1;
+  box-shadow: 0 0 0 3px rgba(111, 66, 193, 0.1);
+}
+
+.followup-input-box .actions {
+  margin-top: 8px;
+  display: flex;
+  gap: 8px;
+}
+
+.followup-input-box button {
+  padding: 6px 14px;
+  font-size: 13px;
+}
+
+.comment-input-box {
+  margin: 0 90px 0 93px;
+  padding: 12px;
+  background: #f6f8fa;
+  border-left: 3px solid #0366d6;
+  border-radius: 0 0 4px 4px;
+}
+
+.selected-text-preview {
+  margin-bottom: 12px;
+  padding: 12px;
+  background: white;
+  border-radius: 4px;
+  border: 1px solid #e1e4e8;
+}
+
+.selected-text-preview strong {
+  display: block;
+  margin-bottom: 6px;
+  color: #0366d6;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.selected-text-preview pre {
+  margin: 0;
+  padding: 8px;
+  background: #f6f8fa;
+  border-radius: 3px;
+  font-family: 'Monaco', 'Courier New', monospace;
+  font-size: 12px;
+  color: #24292e;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  border: 1px solid #e1e4e8;
+}
+
+.comment-input-box textarea {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid #d1d5da;
+  border-radius: 4px;
+  font-family: inherit;
+  font-size: 13px;
+  resize: none;
+  overflow: hidden;
+  min-height: 60px;
+  background: white;
+}
+
+.comment-input-box textarea:focus {
+  outline: none;
+  border-color: #0366d6;
+  box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.1);
+}
+
+.comment-input-box .actions {
+  margin-top: 8px;
+  display: flex;
+  gap: 8px;
+}
+
+.comment-input-box button {
+  padding: 6px 14px;
+  font-size: 13px;
+}
+
+.cancel-btn {
+  background: #6c757d;
+}
+
+.cancel-btn:hover {
+  background: #5a6268;
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+
+/* Review Modal */
+.review-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 20px;
+}
+
+.review-modal-content {
+  background: white;
+  border-radius: 8px;
+  max-width: 900px;
+  width: 100%;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+}
+
+.review-modal-header {
+  padding: 20px 24px;
+  border-bottom: 1px solid #e1e4e8;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.review-modal-header h2 {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 600;
+  color: #24292e;
+}
+
+.close-modal {
+  background: transparent;
+  border: none;
+  font-size: 32px;
+  color: #586069;
+  cursor: pointer;
+  padding: 0;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+}
+
+.close-modal:hover {
+  background: #f6f8fa;
+  color: #24292e;
+}
+
+.review-modal-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px 24px;
+  background: #f6f8fa;
+}
+
+.review-text {
+  background: white;
+  padding: 16px;
+  border-radius: 6px;
+  border: 1px solid #e1e4e8;
+  font-family: 'Monaco', 'Courier New', monospace;
+  font-size: 13px;
+  color: #24292e;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  margin: 0;
+  line-height: 1.6;
+}
+
+.review-modal-footer {
+  padding: 16px 24px;
+  border-top: 1px solid #e1e4e8;
+  display: flex;
+  gap: 12px;
+  justify-content: flex-end;
+}
+
+.review-modal-footer button {
+  padding: 10px 20px;
+}
+
+/* Fuzzy matched comments */
+.comment-box-fuzzy {
+  background: #fff9e6 !important;
+  border-left-color: #ffa500 !important;
+}
+
+.comment-fuzzy-warning {
+  font-size: 12px;
+  color: #856404;
+  background: #fff3cd;
+  padding: 6px 10px;
+  border-radius: 3px;
+  margin-bottom: 8px;
+  border: 1px solid #ffeaa7;
+}
+
+.comment-original-code {
+  margin-top: 6px;
+  font-size: 11px;
+  color: #6c757d;
+}
+
+.comment-original-code code {
+  background: white;
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-family: 'Monaco', 'Courier New', monospace;
+  border: 1px solid #e1e4e8;
+}
+
+/* Unmatched comments section */
+.unmatched-comments-section {
+  margin: 20px 90px 20px 93px;
+  padding: 16px;
+  background: #fff5f5;
+  border-left: 3px solid #dc3545;
+  border-radius: 4px;
+}
+
+.unmatched-comment-item {
+  background: white;
+  border-radius: 6px;
+  margin-bottom: 12px;
+  border: 1px solid #f5c6cb;
+  overflow: hidden;
+}
+
+.unmatched-comment-header {
+  padding: 12px 16px;
+  background: #f8d7da;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  transition: background 0.2s;
+}
+
+.unmatched-comment-header:hover {
+  background: #f1b0b7;
+}
+
+.unmatched-comment-icon {
+  font-size: 16px;
+}
+
+.unmatched-comment-title {
+  flex: 1;
+  font-size: 13px;
+  font-weight: 600;
+  color: #721c24;
+}
+
+.unmatched-comment-toggle {
+  font-size: 12px;
+  color: #721c24;
+  transition: transform 0.2s;
+}
+
+.unmatched-comment-body {
+  padding: 16px;
+  display: block;
+}
+
+.unmatched-comment-item.collapsed .unmatched-comment-body {
+  display: none;
+}
+
+.unmatched-comment-original {
+  margin-bottom: 12px;
+  padding: 10px;
+  background: #f8f9fa;
+  border-radius: 4px;
+  border: 1px solid #e1e4e8;
+}
+
+.unmatched-comment-original strong {
+  display: block;
+  margin-bottom: 6px;
+  font-size: 12px;
+  color: #6c757d;
+}
+
+.unmatched-comment-original code {
+  display: block;
+  padding: 6px 8px;
+  background: white;
+  border-radius: 3px;
+  font-family: 'Monaco', 'Courier New', monospace;
+  font-size: 12px;
+  color: #24292e;
+  border: 1px solid #e1e4e8;
+}