cherrypick-interactive 1.10.1 → 1.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cherrypick-interactive",
-  "version": "1.10.1",
+  "version": "1.12.0",
   "description": "Interactively cherry-pick commits that are in dev but not in main, using subject-based comparison.",
   "main": "cli.js",
   "bin": "cli.js",
@@ -15,7 +15,11 @@
     "check": "biome check .",
     "fix": "biome check --write .",
     "release": "npm publish --access public",
-    "test": "node --test test/**/*.test.js"
+    "test": "node --test test/**/*.test.js",
+    "prepare": "simple-git-hooks"
+  },
+  "simple-git-hooks": {
+    "pre-push": "yarn test"
   },
   "engines": {
     "node": ">=20"
@@ -33,7 +37,8 @@
     "yargs": "^18.0.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "^1.9.4"
+    "@biomejs/biome": "^1.9.4",
+    "simple-git-hooks": "^2.13.1"
   },
   "keywords": [
     "git",

package/src/tui/App.js

@@ -14,6 +14,7 @@ export function App({ commits, gitRawFn, devBranch, mainBranch, since, onDone })
     const [filterText, setFilterText] = useState('');
     const [isSearching, setIsSearching] = useState(false);
     const [searchInput, setSearchInput] = useState('');
+    const [showPreview, setShowPreview] = useState(true);
     const [showDiff, setShowDiff] = useState(false);
     const [diffText, setDiffText] = useState('');
     const [confirmQuit, setConfirmQuit] = useState(false);
@@ -28,7 +29,7 @@ export function App({ commits, gitRawFn, devBranch, mainBranch, since, onDone })
     useEffect(() => {
         if (!currentCommit) return;
         let cancelled = false;
-        gitRawFn(['show', '--stat', '--format=', currentCommit.hash]).then((text) => {
+        gitRawFn(['show', '--stat', '--format=', '--color=always', currentCommit.hash]).then((text) => {
             if (!cancelled) setPreviewText(text.trim());
         }).catch(() => {
             if (!cancelled) setPreviewText('(unable to load preview)');
@@ -114,7 +115,7 @@ export function App({ commits, gitRawFn, devBranch, mainBranch, since, onDone })
             if (currentCommit) {
                 setShowDiff(true);
                 setDiffText('Loading...');
-                gitRawFn(['show', '--stat', '-p', currentCommit.hash]).then((text) => {
+                gitRawFn(['show', '--stat', '-p', '--color=always', currentCommit.hash]).then((text) => {
                     setDiffText(text.trim());
                 }).catch(() => {
                     setDiffText('(unable to load diff)');
@@ -122,6 +123,11 @@ export function App({ commits, gitRawFn, devBranch, mainBranch, since, onDone })
             }
         }
 
+        // Toggle preview
+        else if (input === 'p') {
+            setShowPreview((v) => !v);
+        }
+
         // Confirm
         else if (key.return) {
             const selectedHashes = [...selected];
@@ -185,10 +191,12 @@ export function App({ commits, gitRawFn, devBranch, mainBranch, since, onDone })
                 isSearching=${isSearching}
                 selectedCount=${selected.size}
             />
-            <${Preview}
-                previewText=${previewText}
-                hash=${currentCommit?.hash}
-            />
+            ${showPreview ? html`
+                <${Preview}
+                    previewText=${previewText}
+                    hash=${currentCommit?.hash}
+                />
+            ` : null}
         </${Box}>
     `;
 }

package/src/tui/CommitRow.js

@@ -1,21 +1,31 @@
-import { Text, Box, Spacer } from 'ink';
+import { Text, Box } from 'ink';
 import { html } from './html.js';
 
 export function CommitRow({ hash, subject, date, isSelected, isCursor }) {
     const checkbox = isSelected ? '☑' : '☐';
     const checkColor = isSelected ? 'green' : 'gray';
     const cursor = isCursor ? '>' : ' ';
-    const cursorColor = isCursor ? 'cyan' : undefined;
-    const subjectColor = isCursor ? 'white' : 'gray';
+
+    let subjectColor = 'gray';
+    let hashColor = 'dim';
+    let dateColor = 'dim';
+    if (isCursor) {
+        subjectColor = 'white';
+        hashColor = 'cyan';
+        dateColor = 'gray';
+    } else if (isSelected) {
+        subjectColor = 'green';
+        hashColor = 'green';
+        dateColor = 'green';
+    }
 
     return html`
         <${Box}>
-            <${Text} color=${cursorColor}>${cursor} </${Text}>
+            <${Text} color=${isCursor ? 'cyan' : undefined}>${cursor} </${Text}>
             <${Text} color=${checkColor}>${checkbox} </${Text}>
-            <${Text} color="dim">${hash.slice(0, 7)}  </${Text}>
-            <${Text} color=${subjectColor} wrap="truncate">${subject}</${Text}>
-            <${Spacer} />
-            <${Text} color="dim">${date}</${Text}>
+            <${Text} color=${hashColor}>${hash.slice(0, 7)}  </${Text}>
+            <${Text} color=${subjectColor}>${subject}</${Text}>
+            <${Text} color=${dateColor}>${date ? `  (${date})` : ''}</${Text}>
         </${Box}>
     `;
 }

package/src/tui/KeyBar.js

@@ -13,7 +13,7 @@ export function KeyBar({ isSearching, selectedCount }) {
     return html`
         <${Box} paddingX=${1}>
             <${Text} color="dim">
-                [space] toggle  [a] all  [n] none  [/] search  [d] diff  [enter] confirm (${selectedCount})  [q] quit
+                [space] toggle  [a] all  [n] none  [/] search  [d] diff  [p] preview  [enter] confirm (${selectedCount})  [q] quit
             </${Text}>
         </${Box}>
     `;