274 lines
17 KiB
TypeScript
274 lines
17 KiB
TypeScript
/* Shared icons, FileIcon, GitPanel, FileTree */
|
|
import React, { Fragment } from 'react'
|
|
import type { Change, DiffSide, FileNode, GitStatus } from './types'
|
|
import { HL } from './highlight'
|
|
|
|
type SvgProps = React.SVGProps<SVGSVGElement>
|
|
|
|
/* ---- minimal geometric icons ---- */
|
|
export const Icon: Record<string, (p?: SvgProps) => React.ReactElement> = {
|
|
search: (p) => (<svg width="13" height="13" viewBox="0 0 16 16" fill="none" {...p}><circle cx="7" cy="7" r="4.5" stroke="currentColor" strokeWidth="1.4" /><line x1="10.5" y1="10.5" x2="14" y2="14" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" /></svg>),
|
|
branch: (p) => (<svg width="13" height="13" viewBox="0 0 16 16" fill="none" {...p}><circle cx="4" cy="3.5" r="1.8" stroke="currentColor" strokeWidth="1.3" /><circle cx="4" cy="12.5" r="1.8" stroke="currentColor" strokeWidth="1.3" /><circle cx="12" cy="5" r="1.8" stroke="currentColor" strokeWidth="1.3" /><path d="M4 5.3v5.4M5.8 5C9 5 10 6.2 10 9v0" stroke="currentColor" strokeWidth="1.3" fill="none" /></svg>),
|
|
close: (p) => (<svg width="11" height="11" viewBox="0 0 12 12" fill="none" {...p}><path d="M3 3l6 6M9 3l-6 6" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" /></svg>),
|
|
copy: (p) => (<svg width="13" height="13" viewBox="0 0 16 16" fill="none" {...p}><rect x="5" y="5" width="8" height="9" rx="1.5" stroke="currentColor" strokeWidth="1.3" /><path d="M3 11V3a1 1 0 0 1 1-1h6" stroke="currentColor" strokeWidth="1.3" fill="none" /></svg>),
|
|
terminal: (p) => (<svg width="13" height="13" viewBox="0 0 16 16" fill="none" {...p}><path d="M3 4l3 3-3 3M8 11h5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" /></svg>),
|
|
paste: (p) => (<svg width="13" height="13" viewBox="0 0 16 16" fill="none" {...p}><rect x="3" y="3" width="10" height="11" rx="1.5" stroke="currentColor" strokeWidth="1.3" /><path d="M6 3V2.2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1V3" stroke="currentColor" strokeWidth="1.3" fill="none" /></svg>),
|
|
spark: (p) => (<svg width="13" height="13" viewBox="0 0 16 16" fill="none" {...p}><path d="M8 1.5l1.6 4.9L14.5 8l-4.9 1.6L8 14.5 6.4 9.6 1.5 8l4.9-1.6L8 1.5z" stroke="currentColor" strokeWidth="1.1" fill="none" strokeLinejoin="round" /></svg>),
|
|
file: (p) => (<svg width="13" height="13" viewBox="0 0 16 16" fill="none" {...p}><path d="M4 2h5l3 3v9H4V2z" stroke="currentColor" strokeWidth="1.2" fill="none" /><path d="M9 2v3h3" stroke="currentColor" strokeWidth="1.2" fill="none" /></svg>),
|
|
reveal: (p) => (<svg width="13" height="13" viewBox="0 0 16 16" fill="none" {...p}><path d="M2 4.5h4l1.3 1.5H14V13H2V4.5z" stroke="currentColor" strokeWidth="1.2" fill="none" /></svg>),
|
|
folder: (p) => (<svg width="13" height="13" viewBox="0 0 16 16" fill="none" {...p}><path d="M2 4.5h4l1.3 1.5H14V13H2V4.5z" stroke="currentColor" strokeWidth="1.2" fill="none" strokeLinejoin="round" /></svg>),
|
|
diff: (p) => (<svg width="13" height="13" viewBox="0 0 16 16" fill="none" {...p}><path d="M4 2v8M4 12.5v1.5M2 4h4M2 8h4" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" /><path d="M12 14V6M12 3.5V2M10 12h4M10 8h4" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" /></svg>),
|
|
plus: (p) => (<svg width="13" height="13" viewBox="0 0 14 14" fill="none" {...p}><path d="M7 2.5v9M2.5 7h9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /></svg>),
|
|
minus: (p) => (<svg width="13" height="13" viewBox="0 0 14 14" fill="none" {...p}><path d="M2.5 7h9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /></svg>),
|
|
check: (p) => (<svg width="13" height="13" viewBox="0 0 14 14" fill="none" {...p}><path d="M2.5 7.5l2.8 3L11.5 3.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /></svg>),
|
|
discard: (p) => (<svg width="13" height="13" viewBox="0 0 16 16" fill="none" {...p}><path d="M12.5 5.5A5 5 0 1 0 13 9" stroke="currentColor" strokeWidth="1.3" fill="none" strokeLinecap="round" /><path d="M12.5 2.5v3h-3" stroke="currentColor" strokeWidth="1.3" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>),
|
|
layout: (p) => (<svg width="13" height="13" viewBox="0 0 16 16" fill="none" {...p}><rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" strokeWidth="1.3" /><path d="M6 3v10M10 3v10" stroke="currentColor" strokeWidth="1.3" /></svg>),
|
|
note: (p) => (<svg width="14" height="14" viewBox="0 0 16 16" fill="none" {...p}><path d="M3.5 2.5h9v11h-9v-11z" stroke="currentColor" strokeWidth="1.2" fill="none" /><path d="M5.5 5.5h5M5.5 8h5M5.5 10.5h3" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" /></svg>),
|
|
help: (p) => (<svg width="14" height="14" viewBox="0 0 16 16" fill="none" {...p}><circle cx="8" cy="8" r="6.2" stroke="currentColor" strokeWidth="1.3" /><path d="M6.3 6.2a1.7 1.7 0 1 1 2.3 1.6c-.5.25-.8.6-.8 1.2v.3" stroke="currentColor" strokeWidth="1.3" fill="none" strokeLinecap="round" /><circle cx="8" cy="11.4" r=".75" fill="currentColor" /></svg>),
|
|
trash: (p) => (<svg width="13" height="13" viewBox="0 0 16 16" fill="none" {...p}><path d="M3 4.5h10M6.5 4.5V3h3v1.5M4.5 4.5l.6 8.5h5.8l.6-8.5" stroke="currentColor" strokeWidth="1.2" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>),
|
|
pencil: (p) => (<svg width="13" height="13" viewBox="0 0 16 16" fill="none" {...p}><path d="M2.5 11.2 11 2.7a1.6 1.6 0 0 1 2.3 2.3l-8.5 8.5-3 .7.7-3z" stroke="currentColor" strokeWidth="1.2" fill="none" strokeLinejoin="round" /><path d="M9.6 4.1l2.3 2.3" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" /></svg>),
|
|
finder: (p) => (<svg width="13" height="13" viewBox="0 0 16 16" fill="none" {...p}><rect x="2" y="3.5" width="12" height="9" rx="1.5" stroke="currentColor" strokeWidth="1.2" /><path d="M9 7l3-3M12 4v2.6M12 4H9.4" stroke="currentColor" strokeWidth="1.2" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>),
|
|
eye: (p) => (<svg width="13" height="13" viewBox="0 0 16 16" fill="none" {...p}><path d="M1.5 8S4 3.5 8 3.5 14.5 8 14.5 8 12 12.5 8 12.5 1.5 8 1.5 8z" stroke="currentColor" strokeWidth="1.2" fill="none" /><circle cx="8" cy="8" r="2" stroke="currentColor" strokeWidth="1.2" /></svg>),
|
|
push: (p) => (<svg width="13" height="13" viewBox="0 0 16 16" fill="none" {...p}><path d="M8 13V4M8 4 4.5 7.5M8 4l3.5 3.5M3.5 2.5h9" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>),
|
|
}
|
|
|
|
export const Chevron = ({ open }: { open: boolean }): React.ReactElement => (
|
|
<svg width="9" height="9" viewBox="0 0 10 10" style={{ transform: open ? 'rotate(90deg)' : 'none', transition: 'transform .12s' }}>
|
|
<path d="M3.5 2l3.5 3-3.5 3" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round" />
|
|
</svg>
|
|
)
|
|
|
|
export const FolderIcon = ({ open }: { open: boolean }): React.ReactElement => (
|
|
<svg className="folder-ic" width="14" height="14" viewBox="0 0 16 16" fill="none">
|
|
{open ? (
|
|
<Fragment>
|
|
<path d="M2 12.5V4.5h3.6l1.2 1.4h6.7V7.4" fill="rgba(122,131,140,.16)" stroke="currentColor" strokeWidth="1.1" strokeLinejoin="round" />
|
|
<path d="M1.4 12.6l1.9-5.1h11.4l-1.9 5.1H1.4z" fill="rgba(122,131,140,.22)" stroke="currentColor" strokeWidth="1.1" strokeLinejoin="round" />
|
|
</Fragment>
|
|
) : (
|
|
<path d="M1.5 4.5h4l1.2 1.4H14V13H1.5V4.5z" fill="rgba(122,131,140,.12)" stroke="currentColor" strokeWidth="1.1" strokeLinejoin="round" />
|
|
)}
|
|
</svg>
|
|
)
|
|
|
|
export function FileIcon({ path }: { path: string }): React.ReactElement {
|
|
const ic = HL.iconFor(path)
|
|
return <span className="ficon" style={{ background: ic.c }}><span>{ic.t}</span></span>
|
|
}
|
|
|
|
/* Shared callback signatures used across panels. */
|
|
export type OpenFile = (path: string, opts?: { diff?: boolean; line?: number; side?: DiffSide }) => void
|
|
export interface ContextTarget {
|
|
path: string
|
|
/** 'root' = the empty space under the tree, i.e. the project folder itself. */
|
|
kind: 'editor' | 'dir' | 'file' | 'git' | 'root'
|
|
staged?: boolean
|
|
sel?: { start: number; end: number }
|
|
line?: number
|
|
code?: string
|
|
}
|
|
export type OnContext = (e: React.MouseEvent, target: ContextTarget) => void
|
|
|
|
/* ============ Git / Source Control panel ============ */
|
|
|
|
/** True for files under the project root's `tests/` folder. The git list dims these. */
|
|
function isTestFile(path: string): boolean {
|
|
return path.startsWith('tests/')
|
|
}
|
|
|
|
function GitRow({ c, activePath, activeSide, ctxPath, kbdId, showDir, onOpen, onContext, onToggleStage }: {
|
|
c: Change
|
|
activePath: string | null
|
|
/** Which half the open tab is showing, so only that row lights up. */
|
|
activeSide: DiffSide | null
|
|
ctxPath: string | null
|
|
kbdId: string | null
|
|
showDir: boolean
|
|
onOpen: OpenFile
|
|
onContext: OnContext
|
|
onToggleStage: (path: string) => void
|
|
}): React.ReactElement {
|
|
const staged = c.staged
|
|
const side: DiffSide = staged ? 'staged' : 'unstaged'
|
|
const name = c.path.split('/').pop()
|
|
const dir = c.path.split('/').slice(0, -1).join('/')
|
|
const dirShown = showDir && !!dir
|
|
const isActive = activePath === c.path && (!activeSide || activeSide === side)
|
|
return (
|
|
<div className={'git-row' + (isActive ? ' active' : '') + (ctxPath === c.path ? ' ctx' : '') + (kbdId === c.id ? ' kbd' : '') + (isTestFile(c.path) ? ' test' : '')}
|
|
data-row-id={c.id}
|
|
onClick={() => onOpen(c.path, { diff: true, side })}
|
|
onContextMenu={(e) => onContext(e, { path: c.path, kind: 'git', staged })}
|
|
title={c.path}>
|
|
<span className={'git-stat ' + c.status}>{c.status}</span>
|
|
<FileIcon path={c.path} />
|
|
<span className={'git-name' + (c.deleted ? ' del' : '')}>{name}</span>
|
|
{dirShown && <span className="git-dir">{dir}/</span>}
|
|
<button className={'git-act' + (dirShown ? '' : ' push')} title={staged ? 'Unstage changes' : 'Stage changes'}
|
|
onClick={(e) => { e.stopPropagation(); onToggleStage(c.path) }}>
|
|
{staged ? Icon.minus() : Icon.plus()}
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function GitPanel({ branch, changes, committed, commitMsg, setCommitMsg, onStage, onUnstage, onStageAll, onUnstageAll, onCommit, onPush, onOpen, onContext, activePath, activeSide, ctxPath, kbdId, showDir }: {
|
|
branch: string
|
|
changes: Change[]
|
|
committed: Set<string>
|
|
commitMsg: string
|
|
setCommitMsg: (v: string) => void
|
|
onStage: (path: string) => void
|
|
onUnstage: (path: string) => void
|
|
onStageAll: () => void
|
|
onUnstageAll: () => void
|
|
onCommit: () => void
|
|
onPush: () => void
|
|
onOpen: OpenFile
|
|
onContext: OnContext
|
|
activePath: string | null
|
|
activeSide: DiffSide | null
|
|
ctxPath: string | null
|
|
kbdId: string | null
|
|
showDir: boolean
|
|
}): React.ReactElement {
|
|
const visible = changes.filter((c) => !committed.has(c.path))
|
|
const stagedList = visible.filter((c) => c.staged)
|
|
const changesList = visible.filter((c) => !c.staged)
|
|
const totals = visible.reduce((a, c) => ({ add: a.add + c.add, del: a.del + c.del }), { add: 0, del: 0 })
|
|
const canCommit = stagedList.length > 0 && commitMsg.trim().length > 0
|
|
|
|
return (
|
|
<Fragment>
|
|
<div className="commit-box">
|
|
<textarea className="commit-input" rows={1} value={commitMsg} spellCheck={false}
|
|
placeholder="Shift+Enter to commit"
|
|
onChange={(e) => setCommitMsg(e.target.value)}
|
|
onKeyDown={(e) => { if (e.key === 'Enter' && (e.shiftKey || e.metaKey || e.ctrlKey) && canCommit) { e.preventDefault(); onCommit() } }} />
|
|
<button className="push-btn" title="Push to remote (⌘P)" onClick={onPush}>{Icon.push()}</button>
|
|
</div>
|
|
|
|
<div className="git-body">
|
|
{visible.length === 0 ? (
|
|
<div className="git-empty">{Icon.check({ width: 20, height: 20 })}<span>No changes — working tree clean</span></div>
|
|
) : (
|
|
<Fragment>
|
|
<div className="git-group">
|
|
Staged Changes <span className="gc">{stagedList.length}</span>
|
|
{stagedList.length > 0 && <button className="grp-act" title="Unstage all" onClick={onUnstageAll}>{Icon.minus()}</button>}
|
|
</div>
|
|
{stagedList.length > 0 ? stagedList.map((c) => (
|
|
<GitRow key={c.id} c={c} activePath={activePath} activeSide={activeSide} ctxPath={ctxPath} kbdId={kbdId} showDir={showDir}
|
|
onOpen={onOpen} onContext={onContext} onToggleStage={onUnstage} />
|
|
)) : (
|
|
<div className="git-none">Nothing staged — use <span className="key">+</span> to stage a file</div>
|
|
)}
|
|
|
|
<div className="git-divider" />
|
|
|
|
<div className="git-group">
|
|
Changes <span className="gc">{changesList.length}</span>
|
|
{changesList.length > 0 && <button className="grp-act" title="Stage all" onClick={onStageAll}>{Icon.plus()}</button>}
|
|
</div>
|
|
{changesList.length > 0 ? changesList.map((c) => (
|
|
<GitRow key={c.id} c={c} activePath={activePath} activeSide={activeSide} ctxPath={ctxPath} kbdId={kbdId} showDir={showDir}
|
|
onOpen={onOpen} onContext={onContext} onToggleStage={onStage} />
|
|
)) : (
|
|
<div className="git-none">All changes staged</div>
|
|
)}
|
|
</Fragment>
|
|
)}
|
|
</div>
|
|
|
|
<div className="git-foot">
|
|
<span className="branch-chip">{Icon.branch()}<b>{branch}</b></span>
|
|
<span style={{ marginLeft: 'auto', fontFamily: 'var(--mono)' }}>
|
|
<span className="a" style={{ color: 'var(--add)' }}>+{totals.add}</span>{' '}
|
|
<span className="d" style={{ color: 'var(--del)' }}>-{totals.del}</span>
|
|
</span>
|
|
</div>
|
|
</Fragment>
|
|
)
|
|
}
|
|
|
|
/* ============ File Tree ============ */
|
|
function TreeNode({ node, depth, openDirs, toggleDir, onOpen, onContext, activePath, ctxPath, kbdPath, changeMap, committed, showHidden }: {
|
|
node: FileNode
|
|
depth: number
|
|
openDirs: Set<string>
|
|
toggleDir: (path: string) => void
|
|
onOpen: OpenFile
|
|
onContext: OnContext
|
|
activePath: string | null
|
|
ctxPath: string | null
|
|
kbdPath: string | null
|
|
changeMap: Record<string, GitStatus>
|
|
committed: Set<string>
|
|
showHidden: boolean
|
|
}): React.ReactElement {
|
|
const pad = 10 + depth * 13
|
|
if (node.type === 'dir') {
|
|
const isOpen = openDirs.has(node.path) || node.path === ''
|
|
return (
|
|
<Fragment>
|
|
{node.path !== '' && (
|
|
<div className={'tree-row folder' + (ctxPath === node.path ? ' ctx' : '') + (kbdPath === node.path ? ' kbd' : '')} style={{ paddingLeft: pad }}
|
|
data-row-path={node.path}
|
|
onClick={() => toggleDir(node.path)}
|
|
onContextMenu={(e) => onContext(e, { path: node.path, kind: 'dir' })}>
|
|
<span className="tw"><Chevron open={isOpen} /></span>
|
|
<FolderIcon open={isOpen} />
|
|
<span className="tree-label">{node.name}</span>
|
|
</div>
|
|
)}
|
|
{isOpen && (node.children || [])
|
|
.filter((c) => showHidden || !c.name.startsWith('.'))
|
|
.map((c) => (
|
|
<TreeNode key={c.path} node={c} depth={node.path === '' ? 0 : depth + 1}
|
|
openDirs={openDirs} toggleDir={toggleDir} onOpen={onOpen}
|
|
onContext={onContext} activePath={activePath} ctxPath={ctxPath} kbdPath={kbdPath} changeMap={changeMap} committed={committed} showHidden={showHidden} />
|
|
))}
|
|
</Fragment>
|
|
)
|
|
}
|
|
const status = committed && committed.has(node.path) ? null : changeMap[node.path]
|
|
return (
|
|
<div className={'tree-row' + (activePath === node.path ? ' active' : '') + (ctxPath === node.path ? ' ctx' : '') + (kbdPath === node.path ? ' kbd' : '')}
|
|
style={{ paddingLeft: pad + 2 }}
|
|
data-row-path={node.path}
|
|
onClick={() => onOpen(node.path)}
|
|
onContextMenu={(e) => onContext(e, { path: node.path, kind: 'file' })}
|
|
title={node.path}>
|
|
<span className="tw" />
|
|
<FileIcon path={node.path} />
|
|
<span className="tree-label" style={status === 'D' ? { textDecoration: 'line-through', color: 'var(--fg-3)' } : undefined}>{node.name}</span>
|
|
{status && <span className={'tree-badge ' + status}>{status}</span>}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function FileTree({ tree, openDirs, toggleDir, onOpen, onContext, activePath, ctxPath, kbdPath, changeMap, committed, showHidden }: {
|
|
tree: FileNode
|
|
openDirs: Set<string>
|
|
toggleDir: (path: string) => void
|
|
onOpen: OpenFile
|
|
onContext: OnContext
|
|
activePath: string | null
|
|
ctxPath: string | null
|
|
kbdPath: string | null
|
|
changeMap: Record<string, GitStatus>
|
|
committed: Set<string>
|
|
showHidden: boolean
|
|
}): React.ReactElement {
|
|
return (
|
|
<Fragment>
|
|
{/* Right-clicking the empty space under the rows targets the project root.
|
|
Row menus stop propagation, so this only fires on the bare background. */}
|
|
<div className="tree-body" onContextMenu={(e) => onContext(e, { path: '', kind: 'root' })}>
|
|
<TreeNode node={tree} depth={0} openDirs={openDirs} toggleDir={toggleDir}
|
|
onOpen={onOpen} onContext={onContext} activePath={activePath} ctxPath={ctxPath} kbdPath={kbdPath} changeMap={changeMap} committed={committed} showHidden={showHidden} />
|
|
</div>
|
|
</Fragment>
|
|
)
|
|
}
|