onOpen(c.path, { diff: true, side })}
onContextMenu={(e) => onContext(e, { path: c.path, kind: 'git', staged })}
@@ -103,8 +125,7 @@ function GitRow({ c, activePath, activeSide, ctxPath, kbdId, showDir, onOpen, on
{c.status}
{name}
- {dirShown &&
{dir}/ }
-
{ e.stopPropagation(); onToggleStage(c.path) }}>
{staged ? Icon.minus() : Icon.plus()}
@@ -112,7 +133,45 @@ function GitRow({ c, activePath, activeSide, ctxPath, kbdId, showDir, onOpen, on
)
}
-export function GitPanel({ branch, changes, committed, commitMsg, setCommitMsg, onStage, onUnstage, onStageAll, onUnstageAll, onCommit, onPush, onOpen, onContext, activePath, activeSide, ctxPath, kbdId, showDir }: {
+/** Split a change list into folder groups, keeping the incoming order. The
+ * keyboard cursor walks the same order, so App must flatten with this too. */
+export function groupByDir(list: Change[]): { dir: string; rows: Change[] }[] {
+ const out: { dir: string; rows: Change[] }[] = []
+ for (const c of list) {
+ const dir = c.path.split('/').slice(0, -1).join('/')
+ const last = out[out.length - 1]
+ if (last && last.dir === dir) last.rows.push(c)
+ else out.push({ dir, rows: [c] })
+ }
+ return out
+}
+
+function GitList({ list, ...row }: {
+ list: Change[]
+ activePath: string | null
+ activeSide: DiffSide | null
+ ctxPath: string | null
+ kbdId: string | null
+ onOpen: OpenFile
+ onContext: OnContext
+ onToggleStage: (path: string) => void
+}): React.ReactElement {
+ return (
+
+ {groupByDir(list).map((g) => (
+
+
+ {g.dir || '.'}
+
+ {g.rows.map((c) =>
+ ))}
+
+ )
+}
+
+export function GitPanel({ branch, changes, committed, commitMsg, setCommitMsg, onStage, onUnstage, onStageAll, onUnstageAll, onCommit, onPush, onOpen, onContext, activePath, activeSide, ctxPath, kbdId }: {
branch: string
changes: Change[]
committed: Set
@@ -130,12 +189,10 @@ export function GitPanel({ branch, changes, committed, commitMsg, setCommitMsg,
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 (
@@ -150,42 +207,41 @@ export function GitPanel({ branch, changes, committed, commitMsg, setCommitMsg,
{visible.length === 0 ? (
-
{Icon.check({ width: 20, height: 20 })}No changes — working tree clean
+
— No changes. The working tree is clean.
) : (
- Staged Changes {stagedList.length}
+ Staged Changes
{stagedList.length > 0 && {Icon.minus()} }
+ {stagedList.length}
- {stagedList.length > 0 ? stagedList.map((c) => (
- 0 ? (
+ Nothing staged — use + to stage a file
+ ) : (
+ — Nothing staged.
)}
- Changes {changesList.length}
+ Changes
{changesList.length > 0 && {Icon.plus()} }
+ {changesList.length}
- {changesList.length > 0 ? changesList.map((c) => (
- 0 ? (
+ All changes staged
+ ) : (
+ — All changes are staged.
)}
)}
- {Icon.branch()}{branch}
-
- +{totals.add} {' '}
- -{totals.del}
-
+ {stagedList.length} staged · {changesList.length} unstaged
)
@@ -206,13 +262,13 @@ function TreeNode({ node, depth, openDirs, toggleDir, onOpen, onContext, activeP
committed: Set
showHidden: boolean
}): React.ReactElement {
- const pad = 10 + depth * 13
+ const pad = 12 + depth * 16
if (node.type === 'dir') {
const isOpen = openDirs.has(node.path) || node.path === ''
return (
{node.path !== '' && (
- toggleDir(node.path)}
onContextMenu={(e) => onContext(e, { path: node.path, kind: 'dir' })}>
@@ -234,7 +290,7 @@ function TreeNode({ node, depth, openDirs, toggleDir, onOpen, onContext, activeP
const status = committed && committed.has(node.path) ? null : changeMap[node.path]
return (
onOpen(node.path)}
onContextMenu={(e) => onContext(e, { path: node.path, kind: 'file' })}
diff --git a/src/renderer/src/highlight.ts b/src/renderer/src/highlight.ts
index 93d5d25..d159318 100644
--- a/src/renderer/src/highlight.ts
+++ b/src/renderer/src/highlight.ts
@@ -106,37 +106,50 @@ function hlText(text: string, lang: string | null): string {
// ---- file-type icon: colored monogram chip --------------------------
interface IconMeta { c: string; t: string }
+// Four fills only, taken from the syntax palette: purple, amber-soft, teal and
+// the neutral grey. The text is the extension, in ink on the fill.
+const PURPLE = '#C3A6CE'
+const AMBER = '#F0B476'
+const TEAL = '#8FBFB4'
+const GREY = '#BAC0C0'
+
const ICONS: Record
= {
- php: { c: '#a78bdb', t: 'php' },
- js: { c: '#e6c860', t: 'js' },
- mjs: { c: '#e6c860', t: 'js' },
- ts: { c: '#5a9bd6', t: 'ts' },
- tsx: { c: '#5a9bd6', t: 'ts' },
- jsx: { c: '#5a9bd6', t: 'jsx' },
- py: { c: '#5fa8d6', t: 'py' },
- html: { c: '#e08b6a', t: '<>' },
- css: { c: '#5a9bd6', t: '{}' },
- scss: { c: '#d6699e', t: '{}' },
- json: { c: '#d8a85c', t: '{}' },
- md: { c: '#9aa0a8', t: 'md' },
- env: { c: '#7fc6a0', t: '$' },
- sh: { c: '#7fc6a0', t: '$' },
- yml: { c: '#cf7a6a', t: 'yml' },
- yaml: { c: '#cf7a6a', t: 'yml' },
- lock: { c: '#8a8f98', t: 'lk' },
+ php: { c: PURPLE, t: 'php' },
+ blade: { c: PURPLE, t: 'php' },
+ ts: { c: PURPLE, t: 'ts' },
+ tsx: { c: PURPLE, t: 'tsx' },
+ vue: { c: PURPLE, t: 'vue' },
+ js: { c: AMBER, t: 'js' },
+ mjs: { c: AMBER, t: 'js' },
+ cjs: { c: AMBER, t: 'js' },
+ jsx: { c: AMBER, t: 'jsx' },
+ json: { c: AMBER, t: 'json' },
+ yml: { c: AMBER, t: 'yml' },
+ yaml: { c: AMBER, t: 'yml' },
+ css: { c: TEAL, t: 'css' },
+ scss: { c: TEAL, t: 'scss' },
+ pcss: { c: TEAL, t: 'css' },
+ html: { c: TEAL, t: 'html' },
+ sh: { c: TEAL, t: 'sh' },
+ env: { c: TEAL, t: 'env' },
+ py: { c: TEAL, t: 'py' },
+ sql: { c: TEAL, t: 'sql' },
+ md: { c: GREY, t: 'md' },
+ txt: { c: GREY, t: 'txt' },
+ lock: { c: GREY, t: 'lock' },
+ svg: { c: GREY, t: 'svg' },
}
const NAME_ICONS: Record = {
- 'composer.json': { c: '#a78bdb', t: 'co' },
- 'package.json': { c: '#cf7a6a', t: 'pk' },
- 'README.md': { c: '#5a9bd6', t: 'md' },
- '.env': { c: '#7fc6a0', t: '$' },
+ 'composer.json': { c: PURPLE, t: 'json' },
+ 'package.json': { c: AMBER, t: 'json' },
+ '.env': { c: TEAL, t: 'env' },
}
function iconFor(path: string): IconMeta {
const base = path.split('/').pop() || ''
if (NAME_ICONS[base]) return NAME_ICONS[base]
- return ICONS[ext(path)] || { c: '#7d838c', t: base.slice(0, 2) || '·' }
+ return ICONS[ext(path)] || { c: GREY, t: ext(path).slice(0, 4) || '·' }
}
export const HL = { ext, langFor, langLabel, isImage, hlLine, hlText, iconFor, escapeHtml }
diff --git a/src/renderer/src/launcher.tsx b/src/renderer/src/launcher.tsx
index e727146..8cd1e94 100644
--- a/src/renderer/src/launcher.tsx
+++ b/src/renderer/src/launcher.tsx
@@ -43,15 +43,15 @@ export function ProjectLauncher({ recents, onOpenNew, onOpenPath }: {
- {Icon.spark({ width: 22, height: 22, style: { color: 'var(--accent)' } })}
-
Helder Open a project to begin
+
{Icon.spark({ width: 16, height: 16 })}
+
helder. Open a project to begin
setSel(0)} onClick={() => activate(0)}>
{Icon.plus()}
-
Open new project… Choose a folder
-
↵
+
Open new project…
+
↵
{recents.length > 0 &&
Recent
}
{recents.map((p, i) => {
@@ -65,7 +65,7 @@ export function ProjectLauncher({ recents, onOpenNew, onOpenPath }: {
)
})}
-
⌘↓ ⌘↑ navigate · ↵ open
+
⌘↑↓ navigate · ↵ open
)
diff --git a/src/renderer/src/main.tsx b/src/renderer/src/main.tsx
index c179849..cc7efb9 100644
--- a/src/renderer/src/main.tsx
+++ b/src/renderer/src/main.tsx
@@ -2,10 +2,16 @@ import React from 'react'
import { createRoot } from 'react-dom/client'
// Bundled locally (no Google Fonts CDN in Electron). Weights used by the UI.
-import '@fontsource/jetbrains-mono/400.css'
-import '@fontsource/jetbrains-mono/500.css'
-import '@fontsource/jetbrains-mono/600.css'
-import '@fontsource/jetbrains-mono/700.css'
+import '@fontsource/ibm-plex-mono/400.css'
+import '@fontsource/ibm-plex-mono/500.css'
+import '@fontsource/ibm-plex-mono/600.css'
+import '@fontsource/ibm-plex-mono/700.css'
+import '@fontsource/ibm-plex-mono/400-italic.css'
+import '@fontsource/ibm-plex-sans/400.css'
+import '@fontsource/ibm-plex-sans/500.css'
+import '@fontsource/ibm-plex-sans/600.css'
+import '@fontsource/ibm-plex-sans/700.css'
+import '@fontsource/ibm-plex-sans/400-italic.css'
// Initialises Prism + all grammars (correct php load order) as a side effect.
import './highlight'
diff --git a/src/renderer/src/overlays.tsx b/src/renderer/src/overlays.tsx
index 524474d..e5c28bd 100644
--- a/src/renderer/src/overlays.tsx
+++ b/src/renderer/src/overlays.tsx
@@ -12,6 +12,8 @@ import type { SymbolDef, SymbolLookup } from './types'
export interface MenuItem {
sep?: boolean
primary?: boolean
+ /** Destructive item (delete, discard). Reads in amber-deep. */
+ danger?: boolean
icon?: React.ReactElement
label?: string
kbd?: string
@@ -261,10 +263,9 @@ export function SearchModal({ initialQuery, onOpen, onOpenAt, onClose, changeSet
{(activePath as string).split('/').pop()}
{inFile.length > 0 &&
{inFile.length} }
-
⌘←
Type to search this file
}
- {term.length >= 1 && inFile.length === 0 && No matches in this file
}
+ {term.length < 1 && Type to search this file.
}
+ {term.length >= 1 && inFile.length === 0 && No matches in this file.
}
{inFile.slice(0, 200).map((h, i) => (
{ setCol('infile'); setInFileSel(i) }}
@@ -276,9 +277,9 @@ export function SearchModal({ initialQuery, onOpen, onOpenAt, onClose, changeSet
)}
-
Project {totalHits > 0 && {totalHits} } {!hasInFile && ⌘← }
- {term.length < 2 &&
Type at least 2 characters
}
- {term.length >= 2 && visibleContent.length === 0 &&
No content matches
}
+
Project {totalHits > 0 && {totalHits} }
+ {term.length < 2 &&
Type at least two characters.
}
+ {term.length >= 2 && visibleContent.length === 0 &&
No content matches.
}
{visibleContent.map((g) => (
onOpenAt(g.path, g.hits[0].no)}>
@@ -302,9 +303,9 @@ export function SearchModal({ initialQuery, onOpen, onOpenAt, onClose, changeSet
))}
-
Files {files.length > 0 && {files.length} } ⌘→
- {!term &&
Start typing…
}
- {term && files.length === 0 &&
No file names match
}
+
Files {files.length}
+ {!term &&
Type to search file names.
}
+ {term && files.length === 0 &&
No file names match.
}
{files.slice(0, 40).map((r, i) => {
const name = r.path.split('/').pop() as string
const dir = r.path.split('/').slice(0, -1).join('/')
@@ -323,6 +324,13 @@ export function SearchModal({ initialQuery, onOpen, onOpenAt, onClose, changeSet
})}
+ ⌘← / ⌘→ column⌘↑ / ⌘↓ row↵ openesc
+