From ecd51a3987bcf2a2fa48f3972387dd686390a0ad Mon Sep 17 00:00:00 2001
From: mawkone <mark@getacquired.com>
Date: Sun, 14 Jun 2026 13:50:07 -0700
Subject: [PATCH] fix(codebase): add top bar header frame to file viewer
 loading states

---
 .../components/project/gitea-file-viewer.tsx  | 60 +++++++++++++++----
 1 file changed, 48 insertions(+), 12 deletions(-)

diff --git a/vibn-frontend/components/project/gitea-file-viewer.tsx b/vibn-frontend/components/project/gitea-file-viewer.tsx
index 941cc720..7f659055 100644
--- a/vibn-frontend/components/project/gitea-file-viewer.tsx
+++ b/vibn-frontend/components/project/gitea-file-viewer.tsx
@@ -80,7 +80,7 @@ export function GiteaFileViewer({ projectId, path }: GiteaFileViewerProps) {
 
   if (!path) {
     return (
-      <Centered>
+      <Centered path={path}>
         <FileText size={18} style={{ color: THEME.muted }} />
         <span>Pick a file from the codebase to preview it here.</span>
       </Centered>
@@ -89,7 +89,7 @@ export function GiteaFileViewer({ projectId, path }: GiteaFileViewerProps) {
 
   if (loading) {
     return (
-      <Centered>
+      <Centered path={path}>
         <Loader2
           size={14}
           className="animate-spin"
@@ -102,7 +102,7 @@ export function GiteaFileViewer({ projectId, path }: GiteaFileViewerProps) {
 
   if (error) {
     return (
-      <Centered>
+      <Centered path={path}>
         <AlertCircle size={14} style={{ color: THEME.danger }} />
         <span style={{ color: THEME.danger }}>{error}</span>
       </Centered>
@@ -245,22 +245,58 @@ function basename(p: string) {
   return p.split("/").pop() || p;
 }
 
-function Centered({ children }: { children: React.ReactNode }) {
+function Centered({
+  children,
+  path,
+}: {
+  children: React.ReactNode;
+  path: string | null;
+}) {
   return (
     <div
       style={{
         flex: 1,
         display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        gap: 10,
-        color: THEME.mid,
-        fontSize: "0.85rem",
-        padding: "32px 16px",
-        textAlign: "center",
+        flexDirection: "column",
+        minHeight: 0,
+        background: THEME.cardBg,
       }}
     >
-      {children}
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          padding: "10px 16px",
+          background: THEME.subtleBg,
+          borderBottom: `1px solid ${THEME.borderSoft}`,
+        }}
+      >
+        <div
+          style={{
+            fontSize: "0.85rem",
+            color: THEME.mid,
+            fontWeight: 500,
+          }}
+        >
+          {path || "Select a file"}
+        </div>
+      </div>
+      <div
+        style={{
+          flex: 1,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: 10,
+          color: THEME.mid,
+          fontSize: "0.85rem",
+          padding: "32px 16px",
+          textAlign: "center",
+        }}
+      >
+        {children}
+      </div>
     </div>
   );
 }