spacehub

surshar / claude-code

Claude Code is an agentic coding tool that lives in your terminal, understands your codebase, and helps you code faster by executing routine tasks, explaining complex code, and handling git workflows - all through natural language commands.

Built by Anthropic · github.com/anthropics

claude-code / mods / diff / hooks / views / sections / header-view.tsx
42 lines · 1.2 KBRaw
1/* @jsxRuntime classic */
2/* @jsx h */
3/* @jsxFrag Fragment */
4import type { RenderElement } from 'claude-code'
5
6import type PaneState from '../../pane-state'
7import type { Kit } from '../kit'
8import Layout from '../layout'
9import { closeButton } from './close-button'
10import { diffStat } from './diff-stat'
11
12/**
13 * The pane's first line (ReplDiffSidebar's header row): `N files changed
14 * +A -R`, or nothing over an empty state, and the close `✕` at the right
15 * edge either way.
16 *
17 * @param kit the drawing's kit; its elements draw the line
18 * @param totals the header's counts, or null when there is nothing to count
19 * @returns the line
20 */
21export function headerView(
22 kit: Kit,
23 totals: PaneState.HeaderTotals | null,
24): RenderElement {
25 const { Box, Text } = kit.ui
26 const counts =
27 totals === null
28 ? []
29 : [
30 <Text wrap="truncate-end">
31 <Text bold>{Layout.plural(totals.filesCount, 'file')}</Text>
32 {' changed '}
33 {diffStat(kit, totals.linesAdded, totals.linesRemoved)}
34 </Text>,
35 ]
36
37 return (
38 <Box flexDirection="row">
39 {[...counts, <Box flexGrow={1} />, closeButton(kit)]}
40 </Box>
41 )
42}