headquarter/apps/web/src/components/features/workspace/workspace-git-panel.tsx

/** Git tab for the workspace detail page. */

import { useWorkspaceGit } from "../../../hooks/use-workspace-git";

interface WorkspaceGitPanelProps {
	workspaceId: string;
}

export function WorkspaceGitPanel({ workspaceId }: WorkspaceGitPanelProps) {
	const { history, branches, currentBranch, checkout, loading, error } =
		useWorkspaceGit(workspaceId);

	return (
		<div className="git-tab">
			<div className="git-tab-header">
				<select
					value={currentBranch}
					onChange={(e) => checkout(e.target.value)}
				>
					{branches.map((b) => (
						<option key={b} value={b}>
							{b}
						</option>
					))}
				</select>
			</div>
			{loading && <p className="muted">Loading history...</p>}
			{error && <p className="error-text">{error}</p>}
			<div className="commit-history">
				{history.map((commit) => (
					<div key={commit.hash} className="card card-sm commit-row">
						<span className="commit-hash">{commit.hash.slice(0, 7)}</span>
						<span className="commit-message">{commit.message}</span>
						<span className="commit-author">{commit.author}</span>
						<span className="commit-date">{commit.date}</span>
					</div>
				))}
			</div>
		</div>
	);
}