readme file is now rendering in repo. can now view files and edit them. can switch between branches with dropdown menu
This commit is contained in:
+167
-58
@@ -1,68 +1,200 @@
|
||||
import { useEffect } from 'react'
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import { useParams, useSearchParams, Link } from 'react-router-dom'
|
||||
import { useRepo } from '../api/queries/repos'
|
||||
import ReactMarkdown from 'react-markdown'
|
||||
import remarkGfm from 'remark-gfm'
|
||||
import { useRepo, useRepoTree, useRepoBlob, useRepoBranches } from '../api/queries/repos'
|
||||
import { TreeBrowser } from '../components/repos/TreeBrowser'
|
||||
import { RepoListSkeleton } from '../ui/Skeleton'
|
||||
import { useRecentRepos } from '../hooks/useRecentRepos'
|
||||
|
||||
export default function RepoPage() {
|
||||
const { owner = '', repo: repoName = '' } = useParams<{ owner: string; repo: string }>()
|
||||
const [searchParams] = useSearchParams()
|
||||
const [searchParams, setSearchParams] = useSearchParams()
|
||||
const [showBranches, setShowBranches] = useState(false)
|
||||
const [showClone, setShowClone] = useState(false)
|
||||
const branchRef = useRef<HTMLDivElement>(null)
|
||||
const cloneRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
const path = searchParams.get('path') ?? ''
|
||||
const ref = searchParams.get('ref') ?? ''
|
||||
|
||||
const { data: repo, isLoading, isError } = useRepo(owner, repoName)
|
||||
const { data: branches } = useRepoBranches(owner, repoName)
|
||||
const { track } = useRecentRepos()
|
||||
useEffect(() => { if (owner && repoName) track(owner, repoName) }, [owner, repoName])
|
||||
|
||||
// Close dropdowns on outside click
|
||||
useEffect(() => {
|
||||
function handle(e: MouseEvent) {
|
||||
if (branchRef.current && !branchRef.current.contains(e.target as Node)) setShowBranches(false)
|
||||
if (cloneRef.current && !cloneRef.current.contains(e.target as Node)) setShowClone(false)
|
||||
}
|
||||
document.addEventListener('mousedown', handle)
|
||||
return () => document.removeEventListener('mousedown', handle)
|
||||
}, [])
|
||||
|
||||
if (isLoading) return <div className="p-6"><RepoListSkeleton /></div>
|
||||
if (isError || !repo) return <div className="p-6 text-sm text-[#DE350B]">Repository not found.</div>
|
||||
|
||||
const branch = ref || repo.defaultBranch
|
||||
const cloneUrl = `http://localhost:8080/${owner}/${repoName}.git`
|
||||
const cloneUrl = `${window.location.origin}/${owner}/${repoName}.git`
|
||||
|
||||
function switchBranch(b: string) {
|
||||
setSearchParams({ ref: b, ...(path ? { path } : {}) })
|
||||
setShowBranches(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-5xl mx-auto px-4 md:px-6 py-6 space-y-6">
|
||||
{/* Breadcrumb */}
|
||||
<div className="flex items-center gap-1 text-sm">
|
||||
<Link to="/repos" className="text-[#0052CC] hover:underline">Repositories</Link>
|
||||
<span className="text-[#5E6C84]">/</span>
|
||||
<span className="font-semibold text-[#172B4D]">{repo.name}</span>
|
||||
{repo.isPrivate && (
|
||||
<span className="text-[10px] font-medium px-1.5 py-0.5 rounded-full border border-[#DFE1E6] text-[#5E6C84] ml-1">
|
||||
Private
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="max-w-5xl mx-auto px-4 md:px-6 py-6 space-y-4">
|
||||
|
||||
{repo.description && (
|
||||
<p className="text-sm text-[#5E6C84]">{repo.description}</p>
|
||||
)}
|
||||
{/* Header row */}
|
||||
<div className="flex items-start justify-between gap-4 flex-wrap">
|
||||
<div>
|
||||
<div className="flex items-center gap-2 text-sm text-[#5E6C84] mb-1">
|
||||
<Link to="/repos" className="hover:text-[#0052CC]">Repositories</Link>
|
||||
<span>/</span>
|
||||
<span className="font-semibold text-[#172B4D]">{repo.name}</span>
|
||||
{repo.isPrivate && (
|
||||
<span className="text-[10px] font-medium px-1.5 py-0.5 rounded-full border border-[#DFE1E6] text-[#5E6C84]">
|
||||
Private
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{repo.description && (
|
||||
<p className="text-sm text-[#5E6C84]">{repo.description}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
<Link
|
||||
to={`/repos/${owner}/${repoName}/pulls`}
|
||||
className="px-3 py-1.5 border border-[#DFE1E6] rounded text-sm text-[#172B4D] hover:bg-[#F4F5F7] font-medium"
|
||||
>
|
||||
Pull requests
|
||||
</Link>
|
||||
|
||||
{/* Clone dropdown */}
|
||||
<div className="relative" ref={cloneRef}>
|
||||
<button
|
||||
onClick={() => setShowClone(s => !s)}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 rounded bg-[#0052CC] hover:bg-[#0065FF] text-white text-sm font-medium"
|
||||
>
|
||||
<svg width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75" />
|
||||
</svg>
|
||||
Clone
|
||||
<svg width="10" height="10" fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24" className="ml-0.5">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
|
||||
</svg>
|
||||
</button>
|
||||
{showClone && (
|
||||
<div className="absolute right-0 top-full mt-1 w-80 bg-white border border-[#DFE1E6] rounded-lg shadow-xl z-50 p-4">
|
||||
<p className="text-xs font-semibold text-[#5E6C84] uppercase tracking-wide mb-2">Clone over HTTP</p>
|
||||
<div className="flex items-center gap-2 bg-[#F4F5F7] border border-[#DFE1E6] rounded px-3 py-2">
|
||||
<code className="text-xs text-[#172B4D] flex-1 truncate">{cloneUrl}</code>
|
||||
<button
|
||||
onClick={() => navigator.clipboard.writeText(cloneUrl)}
|
||||
className="text-[10px] text-[#0052CC] hover:underline shrink-0"
|
||||
>
|
||||
Copy
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{repo.isEmpty ? (
|
||||
<GettingStarted repoName={repoName} branch={branch} cloneUrl={cloneUrl} />
|
||||
) : (
|
||||
<>
|
||||
{/* Branch pill + repo nav tabs */}
|
||||
<div className="flex items-center gap-3 flex-wrap">
|
||||
<div className="flex items-center gap-1.5 px-2.5 py-1.5 border border-[#DFE1E6] rounded text-sm text-[#172B4D]">
|
||||
<svg width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z" />
|
||||
</svg>
|
||||
{branch}
|
||||
{/* Branch selector */}
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<div className="relative" ref={branchRef}>
|
||||
<button
|
||||
onClick={() => setShowBranches(s => !s)}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 border border-[#DFE1E6] rounded text-sm text-[#172B4D] hover:bg-[#F4F5F7] font-medium bg-white"
|
||||
>
|
||||
<svg width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z" />
|
||||
</svg>
|
||||
{branch}
|
||||
<svg width="10" height="10" fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
|
||||
</svg>
|
||||
</button>
|
||||
{showBranches && (
|
||||
<div className="absolute left-0 top-full mt-1 w-56 bg-white border border-[#DFE1E6] rounded-lg shadow-xl z-50 overflow-hidden">
|
||||
<div className="px-3 py-2 border-b border-[#DFE1E6] bg-[#F4F5F7]">
|
||||
<p className="text-xs font-semibold text-[#5E6C84]">Switch branch</p>
|
||||
</div>
|
||||
<ul>
|
||||
{branches?.map(b => (
|
||||
<li key={b.name}>
|
||||
<button
|
||||
onClick={() => switchBranch(b.name)}
|
||||
className="w-full text-left px-3 py-2 text-sm hover:bg-[#F4F5F7] flex items-center gap-2"
|
||||
>
|
||||
{b.name === branch && (
|
||||
<svg width="12" height="12" fill="none" stroke="#0052CC" strokeWidth="2.5" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="m4.5 12.75 6 6 9-13.5" />
|
||||
</svg>
|
||||
)}
|
||||
<span className={b.name === branch ? 'text-[#0052CC] font-medium' : 'text-[#172B4D] ml-5'}>{b.name}</span>
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
{!branches?.length && (
|
||||
<li className="px-3 py-2 text-xs text-[#5E6C84]">No branches found</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Link to={`/repos/${owner}/${repoName}/issues`} className="text-sm text-[#0052CC] hover:underline">Issues</Link>
|
||||
<Link to={`/repos/${owner}/${repoName}/pulls`} className="text-sm text-[#0052CC] hover:underline">Pull requests</Link>
|
||||
<Link to={`/repos/${owner}/${repoName}/settings`} className="text-sm text-[#5E6C84] hover:text-[#172B4D] hover:underline ml-auto">Settings</Link>
|
||||
|
||||
{/* Nav links */}
|
||||
<Link to={`/repos/${owner}/${repoName}/commits`} className="text-sm text-[#5E6C84] hover:text-[#172B4D] px-2 py-1">Commits</Link>
|
||||
<Link to={`/repos/${owner}/${repoName}/branches`} className="text-sm text-[#5E6C84] hover:text-[#172B4D] px-2 py-1">Branches</Link>
|
||||
<Link to={`/repos/${owner}/${repoName}/issues`} className="text-sm text-[#5E6C84] hover:text-[#172B4D] px-2 py-1">Issues</Link>
|
||||
<Link to={`/repos/${owner}/${repoName}/settings`} className="text-sm text-[#5E6C84] hover:text-[#172B4D] px-2 py-1 ml-auto">Settings</Link>
|
||||
</div>
|
||||
|
||||
<TreeBrowser owner={owner} repo={repoName} ref={branch} path={path} />
|
||||
|
||||
{/* README preview — only at repo root */}
|
||||
{!path && <ReadmePreview owner={owner} repo={repoName} ref={branch} />}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function ReadmePreview({ owner, repo, ref }: { owner: string; repo: string; ref: string }) {
|
||||
const { data: entries } = useRepoTree(owner, repo, ref, '')
|
||||
const readmeEntry = entries?.find(e => e.name.toLowerCase() === 'readme.md')
|
||||
const { data: blob } = useRepoBlob(owner, repo, ref, readmeEntry?.name ?? '')
|
||||
|
||||
if (!readmeEntry || !blob) return null
|
||||
|
||||
return (
|
||||
<div className="border border-[#DFE1E6] rounded bg-white overflow-hidden">
|
||||
<div className="px-4 py-2.5 border-b border-[#DFE1E6] bg-[#FAFBFC] flex items-center gap-2">
|
||||
<svg width="14" height="14" fill="none" stroke="#5E6C84" strokeWidth="1.5" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
|
||||
</svg>
|
||||
<span className="text-sm font-semibold text-[#172B4D]">{readmeEntry.name}</span>
|
||||
</div>
|
||||
<div className="px-6 py-5 prose prose-sm max-w-none text-[#172B4D]
|
||||
prose-headings:text-[#172B4D] prose-headings:font-semibold prose-headings:border-b prose-headings:border-[#DFE1E6] prose-headings:pb-1
|
||||
prose-a:text-[#0052CC] prose-code:bg-[#F4F5F7] prose-code:px-1 prose-code:rounded prose-code:text-sm
|
||||
prose-pre:bg-[#F4F5F7] prose-pre:border prose-pre:border-[#DFE1E6] prose-pre:rounded">
|
||||
<ReactMarkdown remarkPlugins={[remarkGfm]}>{blob.content}</ReactMarkdown>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function GettingStarted({ repoName, branch, cloneUrl }: {
|
||||
repoName: string; branch: string; cloneUrl: string
|
||||
}) {
|
||||
@@ -70,42 +202,20 @@ function GettingStarted({ repoName, branch, cloneUrl }: {
|
||||
<div className="border border-[#DFE1E6] rounded-lg overflow-hidden">
|
||||
<div className="px-5 py-4 bg-[#FAFBFC] border-b border-[#DFE1E6]">
|
||||
<h2 className="text-sm font-semibold text-[#172B4D]">Getting started</h2>
|
||||
<p className="text-xs text-[#5E6C84] mt-0.5">
|
||||
This repository is empty. Push your first commit to get started.
|
||||
</p>
|
||||
<p className="text-xs text-[#5E6C84] mt-0.5">Push your first commit to get started.</p>
|
||||
</div>
|
||||
|
||||
<div className="px-5 py-5 space-y-6 text-sm">
|
||||
{/* Quick setup */}
|
||||
<div>
|
||||
<p className="text-xs font-semibold text-[#5E6C84] uppercase tracking-wide mb-2">
|
||||
Quick setup — clone over HTTP
|
||||
</p>
|
||||
<p className="text-xs font-semibold text-[#5E6C84] uppercase tracking-wide mb-2">Clone over HTTP</p>
|
||||
<CopyBlock value={cloneUrl} />
|
||||
</div>
|
||||
|
||||
{/* Push an existing repo */}
|
||||
<div>
|
||||
<p className="text-xs font-semibold text-[#5E6C84] uppercase tracking-wide mb-2">
|
||||
…or push an existing repository
|
||||
</p>
|
||||
<CopyBlock value={`git remote add origin ${cloneUrl}
|
||||
git branch -M ${branch}
|
||||
git push -u origin ${branch}`} multiline />
|
||||
<p className="text-xs font-semibold text-[#5E6C84] uppercase tracking-wide mb-2">…or push an existing repository</p>
|
||||
<CopyBlock value={`git remote add origin ${cloneUrl}\ngit branch -M ${branch}\ngit push -u origin ${branch}`} multiline />
|
||||
</div>
|
||||
|
||||
{/* Create new */}
|
||||
<div>
|
||||
<p className="text-xs font-semibold text-[#5E6C84] uppercase tracking-wide mb-2">
|
||||
…or create a new repository on the command line
|
||||
</p>
|
||||
<CopyBlock value={`echo "# ${repoName}" >> README.md
|
||||
git init
|
||||
git add README.md
|
||||
git commit -m "first commit"
|
||||
git branch -M ${branch}
|
||||
git remote add origin ${cloneUrl}
|
||||
git push -u origin ${branch}`} multiline />
|
||||
<p className="text-xs font-semibold text-[#5E6C84] uppercase tracking-wide mb-2">…or create a new repository on the command line</p>
|
||||
<CopyBlock value={`echo "# ${repoName}" >> README.md\ngit init\ngit add README.md\ngit commit -m "first commit"\ngit branch -M ${branch}\ngit remote add origin ${cloneUrl}\ngit push -u origin ${branch}`} multiline />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -114,7 +224,6 @@ git push -u origin ${branch}`} multiline />
|
||||
|
||||
function CopyBlock({ value, multiline }: { value: string; multiline?: boolean }) {
|
||||
const copy = () => navigator.clipboard.writeText(value).catch(() => {})
|
||||
|
||||
return (
|
||||
<div className="relative group">
|
||||
<pre className={`font-mono text-xs bg-[#F4F5F7] border border-[#DFE1E6] rounded px-4 py-3 overflow-x-auto text-[#172B4D] ${multiline ? 'whitespace-pre' : 'whitespace-nowrap'}`}>
|
||||
|
||||
Reference in New Issue
Block a user