-
-
-
+
+
+
+ onTabClick("history")}
+ className="text-foreground"
+ >
+
+
+ History
+
+
+
+ onTabClick("explore")}
+ className="text-foreground"
+ >
+
+
+ Explore
+
+
+
+
+
- {!isBottomPanelCollapsed && (
-
+ {isBottomPanelCollapsed ? (
+
+
+
+ ) : (
+
+ {activeBottomPanelTab === "history" && (
+
+ )}
+
+
)}
@@ -99,40 +169,43 @@ export const BottomPanel = ({ order }: BottomPanelProps) => {
order={order}
id={"bottom-panel"}
>
- {!hasCodeNavEntitlement ? (
-
-
-
- Code navigation is not enabled for router.push(`/settings/license`)}>your plan.
-
-
-
- Learn more
-
-
- ) : !selectedSymbolInfo ? (
-
-
-
No symbol selected
-
- Learn more
-
-
+ {activeBottomPanelTab === "explore" ? (
+ !hasCodeNavEntitlement ? (
+
+
+
+ Code navigation is not enabled for router.push(`/settings/license`)}>your plan.
+
+
+
+ Learn more
+
+
+ ) : !selectedSymbolInfo ? (
+
+
+
No symbol selected
+
+ Learn more
+
+
+ ) : (
+
+ )
) : (
-
+
)}
)
}
-
diff --git a/packages/web/src/app/(app)/browse/components/commitAuthors.ts b/packages/web/src/app/(app)/browse/components/commitAuthors.ts
new file mode 100644
index 000000000..6a327095d
--- /dev/null
+++ b/packages/web/src/app/(app)/browse/components/commitAuthors.ts
@@ -0,0 +1,80 @@
+import type { Commit, CommitAuthor } from "@/features/git";
+
+export type Author = { name: string; email: string };
+
+export const parseCoAuthors = (body: string): Author[] => {
+ const coAuthors: Author[] = [];
+ const regex = /^co-authored-by:\s*(.+?)\s*<(.+?)>\s*$/gim;
+ let match: RegExpExecArray | null;
+ while ((match = regex.exec(body)) !== null) {
+ coAuthors.push({ name: match[1].trim(), email: match[2].trim() });
+ }
+ return coAuthors;
+};
+
+export const getCommitAuthors = (commit: Commit): Author[] => {
+ const all: Author[] = [
+ { name: commit.authorName, email: commit.authorEmail },
+ ...parseCoAuthors(commit.body),
+ ];
+ const seen = new Set
();
+ return all.filter((a) => {
+ const key = a.email.toLowerCase();
+ if (seen.has(key)) {
+ return false;
+ }
+ seen.add(key);
+ return true;
+ });
+};
+
+/**
+ * Collapses rows with the same lowercased email into a single entry.
+ * git shortlog groups by full author string (name + email), so one person
+ * who committed under multiple name spellings appears as multiple rows.
+ * The canonical name picked is the one with the most commits; counts are
+ * summed. Result is resorted by commitCount descending.
+ */
+export const dedupeCommitAuthorsByEmail = (authors: CommitAuthor[]): CommitAuthor[] => {
+ type Accum = CommitAuthor & { bestNameCount: number };
+ const byEmail = new Map();
+ for (const a of authors) {
+ const key = a.email.toLowerCase();
+ const existing = byEmail.get(key);
+ if (!existing) {
+ byEmail.set(key, { ...a, bestNameCount: a.commitCount });
+ } else {
+ existing.commitCount += a.commitCount;
+ if (a.commitCount > existing.bestNameCount) {
+ existing.name = a.name;
+ existing.email = a.email;
+ existing.bestNameCount = a.commitCount;
+ }
+ }
+ }
+ return Array.from(byEmail.values())
+ .map(({ name, email, commitCount }) => ({ name, email, commitCount }))
+ .sort((a, b) => b.commitCount - a.commitCount);
+};
+
+/**
+ * Escapes a literal string so it matches verbatim under git's default regex
+ * (POSIX BRE with GNU extensions, used by `git log --author` and `--grep`).
+ *
+ * BRE treats `. [ ] ^ $ *` as metacharacters; `+ ? | ( ) { }` are literal
+ * in BRE (their `\` forms are the GNU extensions with meta meaning), so we
+ * do NOT escape them here.
+ */
+export const escapeGitBreLiteral = (s: string): string =>
+ s.replace(/[.[\]^$*\\]/g, '\\$&');
+
+export const formatAuthorsText = (authors: Author[]): string => {
+ if (authors.length === 1) {
+ return authors[0].name;
+ }
+ if (authors.length === 2) {
+ return `${authors[0].name} and ${authors[1].name}`;
+ }
+ const others = authors.length - 2;
+ return `${authors[0].name}, ${authors[1].name}, and ${others} other${others > 1 ? "s" : ""}`;
+};
diff --git a/packages/web/src/app/(app)/browse/components/commitParts.tsx b/packages/web/src/app/(app)/browse/components/commitParts.tsx
new file mode 100644
index 000000000..bc7033acb
--- /dev/null
+++ b/packages/web/src/app/(app)/browse/components/commitParts.tsx
@@ -0,0 +1,89 @@
+import type { ReactNode } from "react";
+import Link from "next/link";
+import { MoreHorizontal } from "lucide-react";
+import { AvatarGroup, AvatarGroupCount } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { Toggle } from "@/components/ui/toggle";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { UserAvatar } from "@/components/userAvatar";
+import { cn } from "@/lib/utils";
+import type { Author } from "./commitAuthors";
+
+interface AuthorsAvatarGroupProps {
+ authors: Author[];
+ className?: string;
+}
+
+export const AuthorsAvatarGroup = ({ authors, className }: AuthorsAvatarGroupProps) => {
+ const displayed = authors.slice(0, 2);
+ const overflow = Math.max(0, authors.length - 2);
+
+ return (
+
+ {displayed.map((a) => (
+
+ ))}
+ {overflow > 0 && (
+
+ +{overflow}
+
+ )}
+
+ );
+};
+
+interface CommitBodyToggleProps {
+ pressed: boolean;
+ onPressedChange: (pressed: boolean) => void;
+}
+
+export const CommitBodyToggle = ({ pressed, onPressedChange }: CommitBodyToggleProps) => (
+
+
+
+
+
+
+ Open commit details
+
+);
+
+interface CommitBodyProps {
+ body: string;
+ className?: string;
+}
+
+export const CommitBody = ({ body, className }: CommitBodyProps) => (
+
+);
+
+interface CommitActionLinkProps {
+ href: string;
+ label: string;
+ icon: ReactNode;
+}
+
+export const CommitActionLink = ({ href, label, icon }: CommitActionLinkProps) => (
+
+
+
+
+ {label}
+
+);
diff --git a/packages/web/src/app/(app)/browse/components/historyPanel.tsx b/packages/web/src/app/(app)/browse/components/historyPanel.tsx
new file mode 100644
index 000000000..dc6ef318a
--- /dev/null
+++ b/packages/web/src/app/(app)/browse/components/historyPanel.tsx
@@ -0,0 +1,118 @@
+'use client';
+
+import { useEffect, useRef } from "react";
+import { Loader2 } from "lucide-react";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { listCommits } from "@/app/api/(client)/client";
+import { isServiceError } from "@/lib/utils";
+import type { ListCommitsResponse } from "@/features/git";
+import { useBrowseParams } from "../hooks/useBrowseParams";
+import { HistoryRow } from "./historyRow";
+
+const PER_PAGE = 25;
+
+type CommitsPage = ListCommitsResponse & { page: number };
+
+export const HistoryPanel = () => {
+ const { repoName, revisionName, path, pathType } = useBrowseParams();
+
+ const {
+ data,
+ fetchNextPage,
+ hasNextPage,
+ isFetchingNextPage,
+ status,
+ error,
+ } = useInfiniteQuery({
+ queryKey: ['historyPanelCommits', repoName, revisionName ?? null, path],
+ queryFn: async ({ pageParam }) => {
+ const page = pageParam as number;
+ const result = await listCommits({
+ repo: repoName,
+ ref: revisionName,
+ path: path || undefined,
+ page,
+ perPage: PER_PAGE,
+ });
+ if (isServiceError(result)) {
+ throw new Error(result.message);
+ }
+ return { ...result, page };
+ },
+ initialPageParam: 1,
+ getNextPageParam: (lastPage) => {
+ const seenSoFar = lastPage.page * PER_PAGE;
+ return seenSoFar < lastPage.totalCount ? lastPage.page + 1 : undefined;
+ },
+ });
+
+ const sentinelRef = useRef(null);
+
+ useEffect(() => {
+ const sentinel = sentinelRef.current;
+ if (!sentinel || !hasNextPage) {
+ return;
+ }
+ const observer = new IntersectionObserver(
+ (entries) => {
+ if (entries[0].isIntersecting && !isFetchingNextPage) {
+ fetchNextPage();
+ }
+ },
+ { rootMargin: '100px' },
+ );
+ observer.observe(sentinel);
+ return () => observer.disconnect();
+ }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
+
+ const allCommits = data?.pages.flatMap((p) => p.commits) ?? [];
+
+ return (
+
+
+ {status === 'pending' && (
+
+
+
+ )}
+ {status === 'error' && (
+
+ Failed to load commit history
+ {error instanceof Error && (
+ {error.message}
+ )}
+
+ )}
+ {status === 'success' && allCommits.length === 0 && (
+
+ No commits found
+
+ )}
+ {status === 'success' && allCommits.map((commit) => (
+
+ ))}
+ {hasNextPage && (
+
+ {isFetchingNextPage && (
+
+ )}
+
+ )}
+ {status === 'success' && !hasNextPage && allCommits.length > 0 && (
+
+ End of commit history
+
+ )}
+
+
+
+ {shortSha}
+
+
+ {commit.message}
+
+
+
a.name).join(", ")}
+ >
+ {formatAuthorsText(authors)}
+
+
+ {relativeDate}
+
+
+ {isBlobPath && (
+ }
+ />
+ )}
+ }
+ />
+
+
+
+
a.name).join(", ")}>
+ {formatAuthorsText(authors)}
+
+
+ {commit.message}
+
+
+ {relativeDate}
+
+
svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+export {
+ Avatar,
+ AvatarImage,
+ AvatarFallback,
+ AvatarBadge,
+ AvatarGroup,
+ AvatarGroupCount,
+}
diff --git a/packages/web/src/components/ui/calendar.tsx b/packages/web/src/components/ui/calendar.tsx
new file mode 100644
index 000000000..a623682da
--- /dev/null
+++ b/packages/web/src/components/ui/calendar.tsx
@@ -0,0 +1,213 @@
+"use client"
+
+import * as React from "react"
+import {
+ ChevronDownIcon,
+ ChevronLeftIcon,
+ ChevronRightIcon,
+} from "lucide-react"
+import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { Button, buttonVariants } from "@/components/ui/button"
+
+function Calendar({
+ className,
+ classNames,
+ showOutsideDays = true,
+ captionLayout = "label",
+ buttonVariant = "ghost",
+ formatters,
+ components,
+ ...props
+}: React.ComponentProps
& {
+ buttonVariant?: React.ComponentProps["variant"]
+}) {
+ const defaultClassNames = getDefaultClassNames()
+
+ return (
+ svg]:rotate-180`,
+ String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+ className
+ )}
+ captionLayout={captionLayout}
+ formatters={{
+ formatMonthDropdown: (date) =>
+ date.toLocaleString("default", { month: "short" }),
+ ...formatters,
+ }}
+ classNames={{
+ root: cn("w-fit", defaultClassNames.root),
+ months: cn(
+ "relative flex flex-col gap-4 md:flex-row",
+ defaultClassNames.months
+ ),
+ month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+ nav: cn(
+ "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+ defaultClassNames.nav
+ ),
+ button_previous: cn(
+ buttonVariants({ variant: buttonVariant }),
+ "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
+ defaultClassNames.button_previous
+ ),
+ button_next: cn(
+ buttonVariants({ variant: buttonVariant }),
+ "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
+ defaultClassNames.button_next
+ ),
+ month_caption: cn(
+ "flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]",
+ defaultClassNames.month_caption
+ ),
+ dropdowns: cn(
+ "flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium",
+ defaultClassNames.dropdowns
+ ),
+ dropdown_root: cn(
+ "has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border",
+ defaultClassNames.dropdown_root
+ ),
+ dropdown: cn(
+ "bg-popover absolute inset-0 opacity-0",
+ defaultClassNames.dropdown
+ ),
+ caption_label: cn(
+ "select-none font-medium",
+ captionLayout === "label"
+ ? "text-sm"
+ : "[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5",
+ defaultClassNames.caption_label
+ ),
+ table: "w-full border-collapse",
+ weekdays: cn("flex", defaultClassNames.weekdays),
+ weekday: cn(
+ "text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal",
+ defaultClassNames.weekday
+ ),
+ week: cn("mt-2 flex w-full", defaultClassNames.week),
+ week_number_header: cn(
+ "w-[--cell-size] select-none",
+ defaultClassNames.week_number_header
+ ),
+ week_number: cn(
+ "text-muted-foreground select-none text-[0.8rem]",
+ defaultClassNames.week_number
+ ),
+ day: cn(
+ "group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md",
+ defaultClassNames.day
+ ),
+ range_start: cn(
+ "bg-accent rounded-l-md",
+ defaultClassNames.range_start
+ ),
+ range_middle: cn("rounded-none", defaultClassNames.range_middle),
+ range_end: cn("bg-accent rounded-r-md", defaultClassNames.range_end),
+ today: cn(
+ "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+ defaultClassNames.today
+ ),
+ outside: cn(
+ "text-muted-foreground aria-selected:text-muted-foreground",
+ defaultClassNames.outside
+ ),
+ disabled: cn(
+ "text-muted-foreground opacity-50",
+ defaultClassNames.disabled
+ ),
+ hidden: cn("invisible", defaultClassNames.hidden),
+ ...classNames,
+ }}
+ components={{
+ Root: ({ className, rootRef, ...props }) => {
+ return (
+
+ )
+ },
+ Chevron: ({ className, orientation, ...props }) => {
+ if (orientation === "left") {
+ return (
+
+ )
+ }
+
+ if (orientation === "right") {
+ return (
+
+ )
+ }
+
+ return (
+
+ )
+ },
+ DayButton: CalendarDayButton,
+ WeekNumber: ({ children, ...props }) => {
+ return (
+
+
+ {children}
+
+ |
+ )
+ },
+ ...components,
+ }}
+ {...props}
+ />
+ )
+}
+
+function CalendarDayButton({
+ className,
+ day,
+ modifiers,
+ ...props
+}: React.ComponentProps) {
+ const defaultClassNames = getDefaultClassNames()
+
+ const ref = React.useRef(null)
+ React.useEffect(() => {
+ if (modifiers.focused) ref.current?.focus()
+ }, [modifiers.focused])
+
+ return (
+