A bunch of fixes

Author: kylecarbs

src/browser/components/file-header.tsx

@@ -1,4 +1,4 @@
-import { Check, FileCode } from "lucide-react";
+import { Check, FileCode, ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "../cn";
 import { Keycap } from "../ui/keycap";
 import type { PullRequestFile } from "@/api/types";
@@ -8,12 +8,20 @@ interface FileHeaderProps {
   file: PullRequestFile;
   isViewed: boolean;
   onToggleViewed: () => void;
+  currentIndex?: number;
+  totalFiles?: number;
+  onPrevFile?: () => void;
+  onNextFile?: () => void;
 }
 
 export const FileHeader = memo(function FileHeader({
   file,
   isViewed,
   onToggleViewed,
+  currentIndex,
+  totalFiles,
+  onPrevFile,
+  onNextFile,
 }: FileHeaderProps) {
   const fileStatusBadge = (() => {
     switch (file.status) {
@@ -40,22 +48,52 @@ export const FileHeader = memo(function FileHeader({
     }
   })();
 
+  const showNavigation = currentIndex !== undefined && totalFiles !== undefined;
+
   return (
     <div className="flex items-center justify-between">
-      <div className="flex items-center gap-3">
-        <FileCode className="w-4 h-4 text-muted-foreground" />
-        <span className="font-mono text-sm font-medium">{file.filename}</span>
+      <div className="flex items-center gap-3 min-w-0 flex-1">
+        <FileCode className="w-4 h-4 text-muted-foreground shrink-0" />
+        <span className="font-mono text-sm font-medium truncate">{file.filename}</span>
         {fileStatusBadge}
-        <span className="text-xs text-muted-foreground">
+        <span className="text-xs text-muted-foreground shrink-0">
           <span className="text-green-500">+{file.additions}</span>{" "}
           <span className="text-red-500">−{file.deletions}</span>
         </span>
+        {/* Navigation buttons */}
+        {showNavigation && (
+          <div className="flex items-center gap-1 shrink-0 ml-2">
+            <button
+              onClick={onPrevFile}
+              className="flex items-center gap-0.5 px-1.5 py-0.5 text-xs rounded hover:bg-muted transition-colors text-muted-foreground hover:text-foreground"
+              title="Previous unreviewed file (k)"
+            >
+              <ChevronLeft className="w-3.5 h-3.5" />
+              <kbd className="hidden sm:inline-block px-1 py-0.5 bg-muted/60 rounded text-[9px] font-mono">
+                k
+              </kbd>
+            </button>
+            <span className="text-xs text-muted-foreground tabular-nums px-1">
+              {currentIndex + 1}/{totalFiles}
+            </span>
+            <button
+              onClick={onNextFile}
+              className="flex items-center gap-0.5 px-1.5 py-0.5 text-xs rounded hover:bg-muted transition-colors text-muted-foreground hover:text-foreground"
+              title="Next unreviewed file (j)"
+            >
+              <kbd className="hidden sm:inline-block px-1 py-0.5 bg-muted/60 rounded text-[9px] font-mono">
+                j
+              </kbd>
+              <ChevronRight className="w-3.5 h-3.5" />
+            </button>
+          </div>
+        )}
       </div>
 
       <button
         onClick={onToggleViewed}
         className={cn(
-          "flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-md transition-colors",
+          "flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-md transition-colors shrink-0",
           isViewed
             ? "bg-green-500/20 text-green-500 hover:bg-green-500/30"
             : "bg-muted hover:bg-muted/80 text-muted-foreground"

src/browser/components/home.tsx

@@ -18,6 +18,7 @@ import {
   Circle,
   CheckCircle2,
   XCircle,
+  AlertCircle,
   MessageSquare,
 } from "lucide-react";
 import { cn } from "../cn";
@@ -611,13 +612,22 @@ export function Home() {
                   setOpenRepoDropdown(null);
                 }}
                 className={cn(
-                  "flex items-center gap-1.5 px-2 py-1 rounded-md border transition-colors text-xs",
-                  showAddRepo
-                    ? "bg-muted border-border text-foreground"
-                    : "border-dashed border-border hover:bg-muted/50 hover:border-solid text-muted-foreground hover:text-foreground"
+                  "group relative flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200",
+                  "bg-gradient-to-r from-emerald-500/10 via-green-500/10 to-teal-500/10",
+                  "border border-emerald-500/20 hover:border-emerald-500/40",
+                  "text-emerald-400 hover:text-emerald-300",
+                  "hover:shadow-[0_0_20px_rgba(16,185,129,0.15)]",
+                  "hover:from-emerald-500/15 hover:via-green-500/15 hover:to-teal-500/15",
+                  showAddRepo && "border-emerald-500/50 shadow-[0_0_20px_rgba(16,185,129,0.2)] from-emerald-500/20 via-green-500/20 to-teal-500/20"
                 )}
               >
-                <Plus className="w-3.5 h-3.5" />
+                <span className={cn(
+                  "flex items-center justify-center w-4 h-4 rounded-md transition-all duration-200",
+                  "bg-emerald-500/20 group-hover:bg-emerald-500/30 group-hover:scale-110",
+                  showAddRepo && "bg-emerald-500/30 rotate-45"
+                )}>
+                  <Plus className="w-3 h-3" />
+                </span>
                 <span>Add Repo</span>
               </button>
 
@@ -938,7 +948,9 @@ function PRListItem({ pr, onSelect }: PRListItemProps) {
         ? "Passed"
         : pr.ciStatus === "failure"
           ? "Failed"
-          : "Running");
+          : pr.ciStatus === "action_required"
+            ? "Approval needed"
+            : "Running");
 
     switch (pr.ciStatus) {
       case "success":
@@ -998,6 +1010,18 @@ function PRListItem({ pr, onSelect }: PRListItemProps) {
             </span>
           </span>
         );
+      case "action_required":
+        return (
+          <span
+            title="Workflow approval required from a maintainer"
+            className="shrink-0 inline-flex items-center gap-1 px-1.5 py-0.5 text-[10px] font-medium rounded bg-yellow-500/15 text-yellow-500 border border-yellow-500/30"
+          >
+            <AlertCircle className="w-3 h-3" />
+            <span className="hidden sm:inline max-w-[100px] truncate">
+              {summary}
+            </span>
+          </span>
+        );
       default:
         return null;
     }

src/browser/components/pr-header.tsx

@@ -6,7 +6,7 @@ import {
   Check,
   Menu,
 } from "lucide-react";
-import { memo, useState, useCallback } from "react";
+import { memo, useState, useCallback, type ReactNode } from "react";
 import { cn } from "../cn";
 import { UserHoverCard } from "../ui/user-hover-card";
 import type { PullRequest } from "@/api/types";
@@ -16,13 +16,15 @@ interface PRHeaderProps {
   owner: string;
   repo: string;
   onToggleSidebar?: () => void;
+  rightContent?: ReactNode;
 }
 
 export const PRHeader = memo(function PRHeader({
   pr,
   owner,
   repo,
   onToggleSidebar,
+  rightContent,
 }: PRHeaderProps) {
   const stateIcon = pr.merged ? (
     <GitMerge className="w-3.5 h-3.5" />
@@ -88,6 +90,16 @@ export const PRHeader = memo(function PRHeader({
           <span>{pr.title}</span>
           <span className="text-muted-foreground ml-1.5">#{pr.number}</span>
         </span>
+        {/* External Link - moved here next to title */}
+        <a
+          href={`https://github.com/${owner}/${repo}/pull/${pr.number}`}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-muted-foreground hover:text-blue-400 transition-colors shrink-0"
+          title="View on GitHub"
+        >
+          <ExternalLink className="w-4 h-4" />
+        </a>
         {/* Author */}
         <UserHoverCard login={pr.user.login}>
           <div className="flex items-center gap-1.5 text-xs text-muted-foreground cursor-pointer hover:text-foreground transition-colors shrink-0">
@@ -115,16 +127,8 @@ export const PRHeader = memo(function PRHeader({
           <span className="text-red-500">−{pr.deletions}</span>
         </span>
 
-        {/* External Link */}
-        <a
-          href={`https://github.com/${owner}/${repo}/pull/${pr.number}`}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="text-muted-foreground hover:text-blue-400 transition-colors"
-          title="View on GitHub"
-        >
-          <ExternalLink className="w-4 h-4" />
-        </a>
+        {/* Right content slot (e.g., Submit Review button) */}
+        {rightContent}
       </div>
     </header>
   );