Skip to content

Commit 53bd17f

Browse files
aidenybaiaidenybai
committed
Add functional branch switcher with search, branches/tags tabs
- Branch switcher dropdown with search filter - Branches and Tags tabs - Fetches branches and tags from GitHub API - Shows current branch with check mark - Integrated into file explorer toolbar
1 parent e850804 commit 53bd17f

4 files changed

Lines changed: 190 additions & 13 deletions

File tree

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -340,6 +340,7 @@ export default function RepoPage() {
340340
return (
341341
<>
342342
<FileExplorer
343+
token={token}
343344
owner={owner}
344345
repo={repo}
345346
defaultBranch={branch}

‎src/app/[owner]/[repo]/branch-switcher.tsx‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
"use client";
2+
3+
import { useState, useEffect, useRef } from "react";
4+
import { Spinner } from "@primer/react";
5+
import {
6+
GitBranchIcon,
7+
TagIcon,
8+
CheckIcon,
9+
XIcon,
10+
} from "@primer/octicons-react";
11+
import { fetchBranches, fetchTags } from "@/lib/github";
12+
13+
interface BranchSwitcherProps {
14+
token: string;
15+
owner: string;
16+
repo: string;
17+
currentBranch: string;
18+
onSwitch: (branch: string) => void;
19+
}
20+
21+
export function BranchSwitcher({
22+
token,
23+
owner,
24+
repo,
25+
currentBranch,
26+
onSwitch,
27+
}: BranchSwitcherProps) {
28+
const [open, setOpen] = useState(false);
29+
const [tab, setTab] = useState<"branches" | "tags">("branches");
30+
const [branches, setBranches] = useState<{ name: string; protected: boolean }[]>([]);
31+
const [tags, setTags] = useState<{ name: string }[]>([]);
32+
const [loading, setLoading] = useState(false);
33+
const [search, setSearch] = useState("");
34+
const inputRef = useRef<HTMLInputElement>(null);
35+
36+
useEffect(() => {
37+
if (!open) return;
38+
setLoading(true);
39+
Promise.all([
40+
fetchBranches(token, owner, repo),
41+
fetchTags(token, owner, repo),
42+
]).then(([b, t]) => {
43+
setBranches(b);
44+
setTags(t);
45+
setLoading(false);
46+
});
47+
setTimeout(() => inputRef.current?.focus(), 100);
48+
}, [open, token, owner, repo]);
49+
50+
const items =
51+
tab === "branches"
52+
? branches.filter((b) => b.name.toLowerCase().includes(search.toLowerCase()))
53+
: tags.filter((t) => t.name.toLowerCase().includes(search.toLowerCase()));
54+
55+
return (
56+
<div className="relative">
57+
<button
58+
onClick={() => setOpen(!open)}
59+
className="flex items-center gap-1.5 rounded-md border border-[var(--borderColor-default)] bg-[var(--bgColor-default)] px-3 py-1 text-sm hover:bg-[var(--bgColor-muted)]"
60+
>
61+
<GitBranchIcon size={16} />
62+
<span className="font-semibold">{currentBranch}</span>
63+
<svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" className="opacity-60">
64+
<path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z" />
65+
</svg>
66+
</button>
67+
68+
{open && (
69+
<>
70+
<div className="fixed inset-0 z-10" onClick={() => setOpen(false)} />
71+
<div className="absolute left-0 top-full z-20 mt-1 w-[300px] overflow-hidden rounded-lg border border-[var(--borderColor-default)] bg-[var(--bgColor-default)] shadow-lg">
72+
{/* Header */}
73+
<div className="flex items-center justify-between border-b border-[var(--borderColor-default)] px-3 py-2">
74+
<span className="text-sm font-semibold">Switch branches/tags</span>
75+
<button onClick={() => setOpen(false)} className="text-[var(--fgColor-muted)]">
76+
<XIcon size={16} />
77+
</button>
78+
</div>
79+
80+
{/* Search */}
81+
<div className="border-b border-[var(--borderColor-default)] px-3 py-2">
82+
<input
83+
ref={inputRef}
84+
type="text"
85+
placeholder="Filter branches/tags"
86+
value={search}
87+
onChange={(e) => setSearch(e.target.value)}
88+
className="w-full rounded-md border border-[var(--borderColor-default)] bg-[var(--bgColor-default)] px-2 py-1 text-sm text-[var(--fgColor-default)] placeholder-[var(--fgColor-muted)] outline-none"
89+
/>
90+
</div>
91+
92+
{/* Tabs */}
93+
<div className="flex border-b border-[var(--borderColor-default)]">
94+
<button
95+
onClick={() => setTab("branches")}
96+
className={`flex-1 px-3 py-1.5 text-sm ${tab === "branches" ? "border-b-2 border-[var(--underlineNav-borderColor-active,#f78166)] font-semibold" : "text-[var(--fgColor-muted)]"}`}
97+
>
98+
<GitBranchIcon size={14} className="mr-1 inline" />
99+
Branches
100+
</button>
101+
<button
102+
onClick={() => setTab("tags")}
103+
className={`flex-1 px-3 py-1.5 text-sm ${tab === "tags" ? "border-b-2 border-[var(--underlineNav-borderColor-active,#f78166)] font-semibold" : "text-[var(--fgColor-muted)]"}`}
104+
>
105+
<TagIcon size={14} className="mr-1 inline" />
106+
Tags
107+
</button>
108+
</div>
109+
110+
{/* List */}
111+
<div className="max-h-[300px] overflow-y-auto">
112+
{loading ? (
113+
<div className="flex items-center justify-center py-4">
114+
<Spinner size="small" />
115+
</div>
116+
) : items.length === 0 ? (
117+
<div className="px-3 py-4 text-center text-sm text-[var(--fgColor-muted)]">
118+
Nothing to show
119+
</div>
120+
) : (
121+
items.map((item) => {
122+
const name = item.name;
123+
const isCurrent = name === currentBranch;
124+
return (
125+
<button
126+
key={name}
127+
onClick={() => {
128+
onSwitch(name);
129+
setOpen(false);
130+
}}
131+
className="flex w-full items-center gap-2 px-3 py-2 text-left text-sm hover:bg-[var(--bgColor-muted)]"
132+
>
133+
{isCurrent ? (
134+
<CheckIcon size={16} className="text-[var(--fgColor-accent)]" />
135+
) : (
136+
<span className="w-4" />
137+
)}
138+
<span className={isCurrent ? "font-semibold" : ""}>
139+
{name}
140+
</span>
141+
</button>
142+
);
143+
})
144+
)}
145+
</div>
146+
</div>
147+
</>
148+
)}
149+
</div>
150+
);
151+
}

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

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
timeAgo,
99
} from "@/lib/github";
1010
import { Avatar, Button } from "@primer/react";
11+
import { BranchSwitcher } from "./branch-switcher";
1112
import {
1213
FileDirectoryFillIcon,
1314
FileIcon,
@@ -20,6 +21,7 @@ import {
2021
} from "@primer/octicons-react";
2122

2223
interface FileExplorerProps {
24+
token: string;
2325
owner: string;
2426
repo: string;
2527
defaultBranch: string;
@@ -73,6 +75,7 @@ function FileItemIcon({ type }: { type: string }) {
7375
}
7476

7577
export function FileExplorer({
78+
token,
7679
owner,
7780
repo,
7881
defaultBranch,
@@ -102,19 +105,15 @@ export function FileExplorer({
102105
{/* Branch bar + actions */}
103106
<div className="flex flex-col gap-2 bg-[var(--bgColor-muted)] px-4 py-2 sm:flex-row sm:items-center">
104107
<div className="flex items-center gap-2">
105-
<button className="flex items-center gap-1.5 rounded-md border border-[var(--borderColor-default)] bg-[var(--bgColor-default)] px-3 py-1 text-sm hover:bg-[var(--bgColor-muted)]">
106-
<GitBranchIcon size={16} />
107-
<span className="font-semibold">{defaultBranch}</span>
108-
<svg
109-
width="12"
110-
height="12"
111-
viewBox="0 0 16 16"
112-
fill="currentColor"
113-
className="opacity-60"
114-
>
115-
<path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z" />
116-
</svg>
117-
</button>
108+
<BranchSwitcher
109+
token={token}
110+
owner={owner}
111+
repo={repo}
112+
currentBranch={defaultBranch}
113+
onSwitch={() => {
114+
// For now just reload — branch switching would need URL/state update
115+
}}
116+
/>
118117

119118
<button
120119
onClick={onCommitsClick}

‎src/lib/github.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -398,6 +398,32 @@ export async function searchCode(
398398
return res.json();
399399
}
400400

401+
export async function fetchBranches(
402+
token: string,
403+
owner: string,
404+
repo: string,
405+
) {
406+
const res = await fetch(
407+
`${API}/repos/${owner}/${repo}/branches?per_page=30`,
408+
{ headers: authHeaders(token) },
409+
);
410+
if (!res.ok) return [];
411+
return res.json() as Promise<{ name: string; protected: boolean }[]>;
412+
}
413+
414+
export async function fetchTags(
415+
token: string,
416+
owner: string,
417+
repo: string,
418+
) {
419+
const res = await fetch(
420+
`${API}/repos/${owner}/${repo}/tags?per_page=30`,
421+
{ headers: authHeaders(token) },
422+
);
423+
if (!res.ok) return [];
424+
return res.json() as Promise<{ name: string }[]>;
425+
}
426+
401427
export interface GitHubTreeItem {
402428
path: string;
403429
type: "blob" | "tree";

0 commit comments

Comments
 (0)