Add file explorer chrome, README edit/outline buttons, hover cards, mobile responsive

- Add file button in explorer toolbar
- README header with outline + edit pencil buttons
- Avatar hover card component
- Mobile responsive header (hide search/dashboard text on small screens)
- Fix TypeScript errors in hover card

Author: aidenybai

src/app/[owner]/[repo]/[[...segments]]/page.tsx

@@ -327,7 +327,7 @@ export default function RepoPage() {
               onCommitsClick={() => navigate(`${base}/commits`)}
               onGoToFile={() => setShowFileFinder(true)}
             />
-            {readme && <ReadmeViewer html={readme} />}
+            {readme && <ReadmeViewer html={readme} owner={owner} repo={repo} />}
           </>
         );
     }

src/app/[owner]/[repo]/file-explorer.tsx

@@ -126,10 +126,13 @@ export function FileExplorer({
           Commits
         </button>
 
-        <div className="ml-auto flex items-center gap-2">
+        <div className="ml-auto flex flex-wrap items-center gap-2">
           <Button size="small" leadingVisual={SearchIcon} onClick={onGoToFile}>
             Go to file
           </Button>
+          <Button size="small">
+            Add file
+          </Button>
           <div className="relative">
             <Button
               size="small"

src/app/[owner]/[repo]/readme.tsx

@@ -1,15 +1,41 @@
 "use client";
 
-import { FileIcon } from "@primer/octicons-react";
+import { FileIcon, PencilIcon, ListUnorderedIcon } from "@primer/octicons-react";
 
-export function ReadmeViewer({ html }: { html: string }) {
+interface ReadmeViewerProps {
+  html: string;
+  owner?: string;
+  repo?: string;
+}
+
+export function ReadmeViewer({ html, owner, repo }: ReadmeViewerProps) {
   return (
-    <div className="mt-4 border border-[var(--borderColor-default)] rounded-md overflow-hidden">
-      <div className="flex items-center gap-2 px-4 py-3 border-b border-[var(--borderColor-default)] bg-[var(--bgColor-muted)]">
+    <div className="mt-4 overflow-hidden rounded-md border border-[var(--borderColor-default)]">
+      <div className="flex items-center gap-2 border-b border-[var(--borderColor-default)] bg-[var(--bgColor-muted)] px-4 py-3">
         <span style={{ color: "var(--fgColor-muted)" }}>
           <FileIcon size={16} />
         </span>
         <span className="text-sm font-semibold">README.md</span>
+
+        <div className="ml-auto flex items-center gap-1">
+          <button
+            className="rounded p-1 text-[var(--fgColor-muted)] hover:bg-[var(--bgColor-neutral-muted)] hover:text-[var(--fgColor-default)]"
+            title="Outline"
+          >
+            <ListUnorderedIcon size={16} />
+          </button>
+          {owner && repo && (
+            <a
+              href={`https://github.com/${owner}/${repo}/edit/main/README.md`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="rounded p-1 text-[var(--fgColor-muted)] hover:bg-[var(--bgColor-neutral-muted)] hover:text-[var(--fgColor-default)]"
+              title="Edit this file"
+            >
+              <PencilIcon size={16} />
+            </a>
+          )}
+        </div>
       </div>
       <div
         className="markdown-body p-6"

src/components/hover-card.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { useState, useRef } from "react";
+import { Avatar } from "@primer/react";
+
+interface HoverCardProps {
+  login: string;
+  avatar_url: string;
+  children: React.ReactNode;
+}
+
+export function HoverCard({ login, avatar_url, children }: HoverCardProps) {
+  const [show, setShow] = useState(false);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const handleEnter = () => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(() => setShow(true), 500);
+  };
+
+  const handleLeave = () => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(() => setShow(false), 200);
+  };
+
+  return (
+    <span
+      className="relative inline-block"
+      onMouseEnter={handleEnter}
+      onMouseLeave={handleLeave}
+    >
+      {children}
+      {show && (
+        <div
+          className="absolute bottom-full left-0 z-30 mb-2 w-[300px] rounded-lg border border-[var(--borderColor-default)] bg-[var(--bgColor-default)] p-4 shadow-xl"
+          onMouseEnter={() => { if (timeoutRef.current) clearTimeout(timeoutRef.current); }}
+          onMouseLeave={handleLeave}
+        >
+          <div className="flex items-start gap-3">
+            <Avatar src={avatar_url} size={48} alt={login} />
+            <div>
+              <p className="text-sm font-semibold text-[var(--fgColor-accent)]">
+                {login}
+              </p>
+            </div>
+          </div>
+        </div>
+      )}
+    </span>
+  );
+}