🤖 Review: Move Files Changed to top and remove prefix subtraction

- Position file tree on top/left instead of bottom/right
- Remove common prefix extraction logic
- Show full directory structure without automatic prefix subtraction
- Users can now collapse/expand the entire tree hierarchy

In wide layout, file tree now appears on the left side.
In narrow layout, file tree appears at the top.
Changed border from border-left to border-right to match new layout.

Net -43 LoC (55 deletions, 12 insertions)

Author: ammar-agent

src/components/RightSidebar/CodeReview/FileTree.tsx

@@ -132,15 +132,6 @@ const TreeHeader = styled.div`
   gap: 8px;
 `;
 
-const CommonPrefix = styled.div`
-  padding: 6px 12px;
-  background: #1e1e1e;
-  border-bottom: 1px solid #3e3e42;
-  font-size: 11px;
-  color: #888;
-  font-family: var(--font-monospace);
-`;
-
 const EmptyState = styled.div`
   padding: 20px;
   color: #888;
@@ -194,7 +185,6 @@ const TreeNodeContent: React.FC<{
   depth: number;
   selectedPath: string | null;
   onSelectFile: (path: string | null) => void;
-  commonPrefix: string | null;
   getFileReadStatus?: (filePath: string) => { total: number; read: number } | null;
   expandStateMap: Record<string, boolean>;
   setExpandStateMap: (
@@ -205,7 +195,6 @@ const TreeNodeContent: React.FC<{
   depth,
   selectedPath,
   onSelectFile,
-  commonPrefix,
   getFileReadStatus,
   expandStateMap,
   setExpandStateMap,
@@ -317,7 +306,6 @@ const TreeNodeContent: React.FC<{
             depth={depth + 1}
             selectedPath={selectedPath}
             onSelectFile={onSelectFile}
-            commonPrefix={commonPrefix}
             getFileReadStatus={getFileReadStatus}
             expandStateMap={expandStateMap}
             setExpandStateMap={setExpandStateMap}
@@ -332,7 +320,6 @@ interface FileTreeExternalProps {
   selectedPath: string | null;
   onSelectFile: (path: string | null) => void;
   isLoading?: boolean;
-  commonPrefix?: string | null;
   getFileReadStatus?: (filePath: string) => { total: number; read: number } | null;
   workspaceId: string;
 }
@@ -342,7 +329,6 @@ export const FileTree: React.FC<FileTreeExternalProps> = ({
   selectedPath,
   onSelectFile,
   isLoading = false,
-  commonPrefix = null,
   getFileReadStatus,
   workspaceId,
 }) => {
@@ -353,42 +339,23 @@ export const FileTree: React.FC<FileTreeExternalProps> = ({
     { listener: true }
   );
 
-  // Find the node at the common prefix path to start rendering from
-  const startNode = React.useMemo(() => {
-    if (!commonPrefix || !root) return root;
-
-    // Navigate to the node at the common prefix path
-    const parts = commonPrefix.split("/");
-    let current = root;
-
-    for (const part of parts) {
-      const child = current.children.find((c) => c.name === part);
-      if (!child) return root; // Fallback if path not found
-      current = child;
-    }
-
-    return current;
-  }, [root, commonPrefix]);
-
   return (
     <>
       <TreeHeader>
         <span>Files Changed</span>
         {selectedPath && <ClearButton onClick={() => onSelectFile(null)}>Clear filter</ClearButton>}
       </TreeHeader>
-      {commonPrefix && <CommonPrefix>{commonPrefix}/</CommonPrefix>}
       <TreeContainer>
-        {isLoading && !startNode ? (
+        {isLoading && !root ? (
           <EmptyState>Loading file tree...</EmptyState>
-        ) : startNode ? (
-          startNode.children.map((child) => (
+        ) : root ? (
+          root.children.map((child) => (
             <TreeNodeContent
               key={child.path}
               node={child}
               depth={0}
               selectedPath={selectedPath}
               onSelectFile={onSelectFile}
-              commonPrefix={commonPrefix}
               getFileReadStatus={getFileReadStatus}
               expandStateMap={expandStateMap}
               setExpandStateMap={setExpandStateMap}

src/components/RightSidebar/CodeReview/ReviewPanel.tsx

@@ -32,12 +32,7 @@ import { useReviewState } from "@/hooks/useReviewState";
 import { parseDiff, extractAllHunks } from "@/utils/git/diffParser";
 import { getReviewSearchStateKey } from "@/constants/storage";
 import { Tooltip, TooltipWrapper } from "@/components/Tooltip";
-import {
-  parseNumstat,
-  buildFileTree,
-  extractNewPath,
-  extractCommonPrefix,
-} from "@/utils/git/numstatParser";
+import { parseNumstat, buildFileTree, extractNewPath } from "@/utils/git/numstatParser";
 import type { DiffHunk, ReviewFilters as ReviewFiltersType } from "@/types/review";
 import type { FileTreeNode } from "@/utils/git/numstatParser";
 import { matchesKeybind, KEYBINDS, formatKeybind } from "@/utils/ui/keybinds";
@@ -79,15 +74,10 @@ const PanelContainer = styled.div`
 
 const ContentContainer = styled.div`
   display: flex;
-  flex-direction: row; /* Default: wide layout */
+  flex-direction: column; /* Always vertical - file tree on top */
   flex: 1;
   min-height: 0;
   overflow: hidden;
-
-  /* Switch to vertical layout when container is narrow */
-  @container review-panel (max-width: 800px) {
-    flex-direction: column;
-  }
 `;
 
 const HunksSection = styled.div`
@@ -97,7 +87,7 @@ const HunksSection = styled.div`
   flex-direction: column;
   overflow: hidden;
   min-width: 0;
-  order: 1; /* Stay in middle regardless of layout */
+  order: 2; /* Come after FileTreeSection */
 `;
 
 // Search bar styling - unified component approach
@@ -195,25 +185,16 @@ const HunkList = styled.div`
 `;
 
 const FileTreeSection = styled.div`
-  /* Default: Wide layout - fixed width on right side */
-  width: 300px;
-  flex-shrink: 0;
-  border-left: 1px solid #3e3e42;
+  /* Always on top, full width, scrolls away with content */
+  width: 100%;
+  flex: 0 1 auto; /* Can shrink but doesn't grow */
+  max-height: 400px; /* Limit height so it doesn't dominate viewport */
   display: flex;
   flex-direction: column;
   overflow: hidden;
   min-height: 0;
-  order: 2; /* Come after HunksSection in wide mode */
-
-  /* Narrow layout: full width, grow to fit full tree, above hunks */
-  @container review-panel (max-width: 800px) {
-    width: 100%;
-    height: auto; /* Let it grow to show full tree */
-    flex: 0 0 auto; /* Fixed size based on content */
-    border-left: none;
-    border-bottom: 1px solid #3e3e42;
-    order: 0; /* Come before HunksSection in narrow mode */
-  }
+  order: 1; /* Always come before HunksSection */
+  border-bottom: 1px solid #3e3e42;
 `;
 
 const EmptyState = styled.div`
@@ -426,7 +407,6 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
   const [isPanelFocused, setIsPanelFocused] = useState(false);
   const [refreshTrigger, setRefreshTrigger] = useState(0);
   const [fileTree, setFileTree] = useState<FileTreeNode | null>(null);
-  const [commonPrefix, setCommonPrefix] = useState<string | null>(null);
   // Map of hunkId -> toggle function for expand/collapse
   const toggleExpandFnsRef = useRef<Map<string, () => void>>(new Map());
 
@@ -509,13 +489,9 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
           const numstatOutput = numstatResult.data.output ?? "";
           const fileStats = parseNumstat(numstatOutput);
 
-          // Extract common prefix for display (don't modify paths)
-          const prefix = extractCommonPrefix(fileStats);
-
           // Build tree with original paths (needed for git commands)
           const tree = buildFileTree(fileStats);
           setFileTree(tree);
-          setCommonPrefix(prefix);
         }
       } catch (err) {
         console.error("Failed to load file tree:", err);
@@ -971,7 +947,6 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
                 selectedPath={selectedFilePath}
                 onSelectFile={setSelectedFilePath}
                 isLoading={isLoadingTree}
-                commonPrefix={commonPrefix}
                 getFileReadStatus={getFileReadStatus}
                 workspaceId={workspaceId}
               />