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
| 1 | /* @jsxRuntime classic */ |
| 2 | /* @jsx h */ |
| 3 | /* @jsxFrag Fragment */ |
| 4 | import type { RenderElement } from 'claude-code' |
| 5 | |
| 6 | import { keptOf } from '../../kept-of' |
| 7 | import type PaneState from '../../pane-state' |
| 8 | import Body from '../body' |
| 9 | import DialogPane from '../dialog-pane' |
| 10 | import type { Kit } from '../kit' |
| 11 | import { preludeOf } from '../prelude-of' |
| 12 | import Sections from '../sections' |
| 13 | |
| 14 | /** |
| 15 | * The docked pane (ReplDiffSidebarBody): header, base or turn line, todo |
| 16 | * bar and list pinned; beneath them the window over every file's hunks. |
| 17 | * |
| 18 | * An empty Button in the header carries the built-in's base chord. The |
| 19 | * window starts at the row the person scrolled to; with nothing to list |
| 20 | * and the pre-session section shut, messagePaneOf centers the empty state. |
| 21 | * |
| 22 | * @param kit the elements, the handlers, the width, the rows |
| 23 | * @param model the pane's state |
| 24 | * @returns the pane's tree |
| 25 | */ |
| 26 | export function sidebarPane( |
| 27 | kit: Kit, |
| 28 | model: PaneState.PaneModel, |
| 29 | ): RenderElement { |
| 30 | const { Box, Button } = kit.ui |
| 31 | const prelude = preludeOf(kit, model) |
| 32 | |
| 33 | if (prelude) { |
| 34 | return prelude |
| 35 | } |
| 36 | |
| 37 | const plan = Body.dockPlanOf(model) |
| 38 | const isListed = plan.message.length === 0 |
| 39 | |
| 40 | const isCentered = |
| 41 | !isListed && !(model.isPreSessionShown && plan.earlier.length > 0) |
| 42 | |
| 43 | const rows = Body.listBlockOf(kit, model, plan) |
| 44 | const onPress = kit.actions.togglePreSession |
| 45 | const hasListRows = rows.length > 0 |
| 46 | |
| 47 | const top = Sections.present([ |
| 48 | Sections.headerView( |
| 49 | kit, |
| 50 | plan.empty ? null : plan.totals, |
| 51 | <Box flexDirection="row"> |
| 52 | {Sections.present([ |
| 53 | Sections.sourcePicker(kit, model), |
| 54 | <Button |
| 55 | key="base" |
| 56 | plain |
| 57 | action="app:cycleDiffBase" |
| 58 | onPress={kit.actions.cycleBase} |
| 59 | > |
| 60 | {''} |
| 61 | </Button>, |
| 62 | ])} |
| 63 | </Box>, |
| 64 | ), |
| 65 | plan.line === null ? null : Sections.dimNote(kit, plan.line), |
| 66 | Sections.todoBar(kit, model), |
| 67 | ]) |
| 68 | |
| 69 | if (isCentered) { |
| 70 | return DialogPane.messagePaneOf(kit, { |
| 71 | top: [...top, ...rows], |
| 72 | message: plan.message, |
| 73 | controls: null, |
| 74 | earlier: |
| 75 | keptOf([plan.earlierLabel]).map(label => |
| 76 | Sections.toggleRow(kit, 'presession', { label, onPress }), |
| 77 | )[0] ?? null, |
| 78 | rest: [], |
| 79 | }) |
| 80 | } |
| 81 | |
| 82 | const listOf = (): RenderElement => |
| 83 | hasListRows ? ( |
| 84 | <Box flexDirection="column" marginTop={1} marginBottom={1}> |
| 85 | {rows} |
| 86 | </Box> |
| 87 | ) : ( |
| 88 | <Box height={1} /> |
| 89 | ) |
| 90 | |
| 91 | return ( |
| 92 | <Box flexDirection="column"> |
| 93 | {[ |
| 94 | ...top, |
| 95 | ...(isListed ? [listOf()] : []), |
| 96 | ...Body.drawWindow( |
| 97 | kit, |
| 98 | Body.bodyLayoutOf(model, plan), |
| 99 | model.place.top, |
| 100 | ), |
| 101 | ]} |
| 102 | </Box> |
| 103 | ) |
| 104 | } |