diff --git a/package-lock.json b/package-lock.json index b295f1acb..2d31a9c43 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,8 @@ "license": "GPL-3.0-only", "dependencies": { "@floating-ui/dom": "^1.7.6", + "@pierre/diffs": "1.3.0-beta.9", + "@pierre/trees": "1.0.0-beta.5", "@tauri-apps/api": "^2.11.0", "@tauri-apps/plugin-clipboard-manager": "^2.3.2", "@tauri-apps/plugin-dialog": "^2.7.1", @@ -464,6 +466,79 @@ "url": "https://github.com/sponsors/Boshen" } }, + "node_modules/@pierre/diffs": { + "version": "1.3.0-beta.9", + "resolved": "https://registry.npmjs.org/@pierre/diffs/-/diffs-1.3.0-beta.9.tgz", + "integrity": "sha512-XoSLsyHA9UjNb/5UGQoKN1Bqma+ecHHaaM2T2edYdeJ67iS27qivWNoKq+uWjKhRzZEB4JQQRzlXxKy79UvY9A==", + "license": "apache-2.0", + "dependencies": { + "@pierre/theme": "1.1.0", + "@pierre/theming": "0.0.2", + "@shikijs/transformers": "^3.0.0 || ^4.0.0", + "diff": "9.0.0", + "hast-util-to-html": "9.0.5", + "lru_map": "0.4.1", + "shiki": "^3.0.0 || ^4.0.0" + }, + "peerDependencies": { + "react": "^18.3.1 || ^19.0.0", + "react-dom": "^18.3.1 || ^19.0.0" + } + }, + "node_modules/@pierre/theme": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@pierre/theme/-/theme-1.1.0.tgz", + "integrity": "sha512-GC2OWTAfTIIWWYhPCygwG8t2EtePQkRfON4MI2rwIkJylmiyqIttJID2dCL8sUD8cNdEvYkEyfEHHKMeCiDLoQ==", + "license": "MIT", + "engines": { + "vscode": "^1.0.0" + } + }, + "node_modules/@pierre/theming": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/@pierre/theming/-/theming-0.0.2.tgz", + "integrity": "sha512-QM1M4stXfnzfaE8I8YbjXSApV8c+2dBsXJj8eYg9WTpBR/cTmCZIcfGnN4p13iRrYu2Br/R/OJfEL7uR8Qjctw==", + "license": "apache-2.0", + "peerDependencies": { + "@pierre/theme": "^1.1.0", + "@shikijs/themes": "^3.0.0 || ^4.0.0", + "react": "^18.3.1 || ^19.0.0", + "react-dom": "^18.3.1 || ^19.0.0", + "shiki": "^3.0.0 || ^4.0.0" + }, + "peerDependenciesMeta": { + "@pierre/theme": { + "optional": true + }, + "@shikijs/themes": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + }, + "shiki": { + "optional": true + } + } + }, + "node_modules/@pierre/trees": { + "version": "1.0.0-beta.5", + "resolved": "https://registry.npmjs.org/@pierre/trees/-/trees-1.0.0-beta.5.tgz", + "integrity": "sha512-IzxkB9qv6GLbeEXObhlAD205LfYHiLeRwJdnaIdX0f5keTZF4X9EfiuEQ3QiyxOxouVVmUX3rX7m6a8zNMo/wA==", + "license": "apache-2.0", + "dependencies": { + "@pierre/theming": "0.0.2", + "preact": "11.0.0-beta.0", + "preact-render-to-string": "6.6.5" + }, + "peerDependencies": { + "react": "^18.3.1 || ^19.0.0", + "react-dom": "^18.3.1 || ^19.0.0" + } + }, "node_modules/@playwright/test": { "version": "1.60.0", "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.60.0.tgz", @@ -769,6 +844,119 @@ "dev": true, "license": "MIT" }, + "node_modules/@shikijs/core": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-4.3.0.tgz", + "integrity": "sha512-EooU3i9F6IAE8kEu+AnGf9DFZWkQBZ+hJn3tLVbsH+61mtQiva5biai66fAA6nvFPXkLgvrh7BrR7YcJU83xQQ==", + "license": "MIT", + "dependencies": { + "@shikijs/primitive": "4.3.0", + "@shikijs/types": "4.3.0", + "@shikijs/vscode-textmate": "^10.0.2", + "@types/hast": "^3.0.4", + "hast-util-to-html": "^9.0.5" + }, + "engines": { + "node": ">=20" + } + }, + "node_modules/@shikijs/engine-javascript": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-4.3.0.tgz", + "integrity": "sha512-hTv/KiFf2tpiqlACPiztGGurEARWIutB8YUhcrA1pUC7VzzwKO+g5crUocrLztrZ5ro5Z4hbXg7bYclETn3gSQ==", + "license": "MIT", + "dependencies": { + "@shikijs/types": "4.3.0", + "@shikijs/vscode-textmate": "^10.0.2", + "oniguruma-to-es": "^4.3.6" + }, + "engines": { + "node": ">=20" + } + }, + "node_modules/@shikijs/engine-oniguruma": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-4.3.0.tgz", + "integrity": "sha512-1vMdN3gHfnKfLYwecUI2ITJI4RhHt96xEaJumVn7Heb0IlJ8WQMIH0Voak+2j22BpSNKdnOfB/pCTPnPm2gq7A==", + "license": "MIT", + "dependencies": { + "@shikijs/types": "4.3.0", + "@shikijs/vscode-textmate": "^10.0.2" + }, + "engines": { + "node": ">=20" + } + }, + "node_modules/@shikijs/langs": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@shikijs/langs/-/langs-4.3.0.tgz", + "integrity": "sha512-rnlqFbBRSys9bT4gl/5rw9RnS0W/I84ZldXPkO7cvlEMoV85TyF/aU01N7/NbSR776RNLjrJKjfFUXJR6wN1Cg==", + "license": "MIT", + "dependencies": { + "@shikijs/types": "4.3.0" + }, + "engines": { + "node": ">=20" + } + }, + "node_modules/@shikijs/primitive": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@shikijs/primitive/-/primitive-4.3.0.tgz", + "integrity": "sha512-CPkz64PTa5diRW1ggzMZH9VM/du4RNChYgVtgqrFcgruvIybmCvySv8GkiHSczUHXYuuR8TdKEwFx+UnZMpgdg==", + "license": "MIT", + "dependencies": { + "@shikijs/types": "4.3.0", + "@shikijs/vscode-textmate": "^10.0.2", + "@types/hast": "^3.0.4" + }, + "engines": { + "node": ">=20" + } + }, + "node_modules/@shikijs/themes": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@shikijs/themes/-/themes-4.3.0.tgz", + "integrity": "sha512-Avgt05YiT+Y3prjIc9lmQxhJzHBcCfR6cjiFW4OyaMBbt2A6trX5rfjUzx+Vj/mE9qpArYjatnqo9XPjQNW/AQ==", + "license": "MIT", + "dependencies": { + "@shikijs/types": "4.3.0" + }, + "engines": { + "node": ">=20" + } + }, + "node_modules/@shikijs/transformers": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@shikijs/transformers/-/transformers-4.3.0.tgz", + "integrity": "sha512-5/elhJEcUrxdyQ95SSx0HzrnbzVPuipk6TYiXZL67tHhw8J+4N5shzmrTYyCaudiSnpuuwPdpaVtciwRFwSA7A==", + "license": "MIT", + "dependencies": { + "@shikijs/core": "4.3.0", + "@shikijs/types": "4.3.0" + }, + "engines": { + "node": ">=20" + } + }, + "node_modules/@shikijs/types": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-4.3.0.tgz", + "integrity": "sha512-oc8b9U2SYvofKZk8e/737nIX0qwf6eV2vHFATeObAu7r+mUVpLs8Re0BmVkIjAWAYgkmG/CzLNo7rzuBzRu/wQ==", + "license": "MIT", + "dependencies": { + "@shikijs/vscode-textmate": "^10.0.2", + "@types/hast": "^3.0.4" + }, + "engines": { + "node": ">=20" + } + }, + "node_modules/@shikijs/vscode-textmate": { + "version": "10.0.2", + "resolved": "https://registry.npmjs.org/@shikijs/vscode-textmate/-/vscode-textmate-10.0.2.tgz", + "integrity": "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==", + "license": "MIT" + }, "node_modules/@sindresorhus/merge-streams": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-4.0.0.tgz", @@ -2092,6 +2280,15 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/diff": { + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/diff/-/diff-9.0.0.tgz", + "integrity": "sha512-svtcdpS8CgJyqAjEQIXdb3OjhFVVYjzGAPO8WGCmRbrml64SPw/jJD4GoE98aR7r25A0XcgrK3F02yw9R/vhQw==", + "license": "BSD-3-Clause", + "engines": { + "node": ">=0.3.1" + } + }, "node_modules/dompurify": { "version": "3.4.11", "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.4.11.tgz", @@ -3565,6 +3762,12 @@ "dev": true, "license": "MIT" }, + "node_modules/lru_map": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/lru_map/-/lru_map-0.4.1.tgz", + "integrity": "sha512-I+lBvqMMFfqaV8CJCISjI3wbjmwVu/VyOoU7+qtu9d7ioW5klMgsTTiUOUp+DJvfTTzKXoPbyC6YfgkNcyPSOg==", + "license": "MIT" + }, "node_modules/lru-cache": { "version": "11.3.6", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.3.6.tgz", @@ -3907,6 +4110,23 @@ ], "license": "MIT" }, + "node_modules/oniguruma-parser": { + "version": "0.12.2", + "resolved": "https://registry.npmjs.org/oniguruma-parser/-/oniguruma-parser-0.12.2.tgz", + "integrity": "sha512-6HVa5oIrgMC6aA6WF6XyyqbhRPJrKR02L20+2+zpDtO5QAzGHAUGw5TKQvwi5vctNnRHkJYmjAhRVQF2EKdTQw==", + "license": "MIT" + }, + "node_modules/oniguruma-to-es": { + "version": "4.3.6", + "resolved": "https://registry.npmjs.org/oniguruma-to-es/-/oniguruma-to-es-4.3.6.tgz", + "integrity": "sha512-csuQ9x3Yr0cEIs/Zgx/OEt9iBw9vqIunAPQkx19R/fiMq2oGVTgcMqO/V3Ybqefr1TBvosI6jU539ksaBULJyA==", + "license": "MIT", + "dependencies": { + "oniguruma-parser": "^0.12.2", + "regex": "^6.1.0", + "regex-recursion": "^6.0.2" + } + }, "node_modules/optionator": { "version": "0.9.4", "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz", @@ -4202,6 +4422,25 @@ "node": ">=4" } }, + "node_modules/preact": { + "version": "11.0.0-beta.0", + "resolved": "https://registry.npmjs.org/preact/-/preact-11.0.0-beta.0.tgz", + "integrity": "sha512-IcODoASASYwJ9kxz7+MJeiJhvLriwSb4y4mHIyxdgaRZp6kPUud7xytrk/6GZw8U3y6EFJaRb5wi9SrEK+8+lg==", + "license": "MIT", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/preact" + } + }, + "node_modules/preact-render-to-string": { + "version": "6.6.5", + "resolved": "https://registry.npmjs.org/preact-render-to-string/-/preact-render-to-string-6.6.5.tgz", + "integrity": "sha512-O6MHzYNIKYaiSX3bOw0gGZfEbOmlIDtDfWwN1JJdc/T3ihzRT6tGGSEWE088dWrEDGa1u7101q+6fzQnO9XCPA==", + "license": "MIT", + "peerDependencies": { + "preact": ">=10 || >= 11.0.0-0" + } + }, "node_modules/prelude-ls": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", @@ -4285,6 +4524,29 @@ "node": ">=6" } }, + "node_modules/react": { + "version": "19.2.7", + "resolved": "https://registry.npmjs.org/react/-/react-19.2.7.tgz", + "integrity": "sha512-HNe9WslTbXmFK8o8cmwgAeJFSBvt1bPdHCVKtaaV+WlAN36mpT4hcRpwbf3fY56ar2oIXzsBpOAiIRHAdY0OlQ==", + "license": "MIT", + "peer": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/react-dom": { + "version": "19.2.7", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.7.tgz", + "integrity": "sha512-t0BRVXvbiE/o20Hfw669rLbMCDWtYZLvmJigy2f0MxsXF+71pxhR3xOkspmsO8h3ZlNzyibAmtCa3l4lYKk6gQ==", + "license": "MIT", + "peer": true, + "dependencies": { + "scheduler": "^0.27.0" + }, + "peerDependencies": { + "react": "^19.2.7" + } + }, "node_modules/readdirp": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz", @@ -4299,6 +4561,30 @@ "url": "https://paulmillr.com/funding/" } }, + "node_modules/regex": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/regex/-/regex-6.1.0.tgz", + "integrity": "sha512-6VwtthbV4o/7+OaAF9I5L5V3llLEsoPyq9P1JVXkedTP33c7MfCG0/5NOPcSJn0TzXcG9YUrR0gQSWioew3LDg==", + "license": "MIT", + "dependencies": { + "regex-utilities": "^2.3.0" + } + }, + "node_modules/regex-recursion": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/regex-recursion/-/regex-recursion-6.0.2.tgz", + "integrity": "sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg==", + "license": "MIT", + "dependencies": { + "regex-utilities": "^2.3.0" + } + }, + "node_modules/regex-utilities": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/regex-utilities/-/regex-utilities-2.3.0.tgz", + "integrity": "sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==", + "license": "MIT" + }, "node_modules/rolldown": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.1.3.tgz", @@ -4356,6 +4642,13 @@ "node": ">=6" } }, + "node_modules/scheduler": { + "version": "0.27.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz", + "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==", + "license": "MIT", + "peer": true + }, "node_modules/semver": { "version": "7.8.0", "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.0.tgz", @@ -4391,6 +4684,25 @@ "node": ">=8" } }, + "node_modules/shiki": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/shiki/-/shiki-4.3.0.tgz", + "integrity": "sha512-NKKjWzR6LIGL3sXBrWDw9sDS9cxx42/DkysaNqJEeOWE8Kix5gpak0bc00OfDVEO4oyXSyz8+aRaqKoBD1yo7A==", + "license": "MIT", + "dependencies": { + "@shikijs/core": "4.3.0", + "@shikijs/engine-javascript": "4.3.0", + "@shikijs/engine-oniguruma": "4.3.0", + "@shikijs/langs": "4.3.0", + "@shikijs/themes": "4.3.0", + "@shikijs/types": "4.3.0", + "@shikijs/vscode-textmate": "^10.0.2", + "@types/hast": "^3.0.4" + }, + "engines": { + "node": ">=20" + } + }, "node_modules/siginfo": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz", diff --git a/package.json b/package.json index d2cae3a93..ba558e2d8 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,8 @@ "license": "GPL-3.0-only", "dependencies": { "@floating-ui/dom": "^1.7.6", + "@pierre/diffs": "1.3.0-beta.9", + "@pierre/trees": "1.0.0-beta.5", "@tauri-apps/api": "^2.11.0", "@tauri-apps/plugin-clipboard-manager": "^2.3.2", "@tauri-apps/plugin-dialog": "^2.7.1", diff --git a/public/typography.css b/public/typography.css index 6fbb61acf..1d1d172f1 100644 --- a/public/typography.css +++ b/public/typography.css @@ -75,12 +75,14 @@ } [data-codefont="system"] { + --font-family-code: monospace; --txt-code-small: 400 0.75rem/1rem monospace; --txt-code-regular: 400 0.875rem/1.25rem monospace; --txt-code-semibold: 600 0.875rem/1.25rem monospace; } [data-codefont="jetbrains"] { + --font-family-code: "JetBrains Mono"; --txt-code-small: 400 0.75rem/1rem "JetBrains Mono"; --txt-code-regular: 400 0.875rem/1.25rem "JetBrains Mono"; --txt-code-semibold: 600 0.875rem/1.25rem "JetBrains Mono"; @@ -90,7 +92,8 @@ html { -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; - font-family: Booton, sans-serif; + --font-family-ui: Booton, sans-serif; + font-family: var(--font-family-ui); /* The root element font size has to be set in px, * otherwise Safari breaks. */ font-size: var(--font-size); diff --git a/src/components/DiffActions.svelte b/src/components/DiffActions.svelte index ddbb5b590..43f4af817 100644 --- a/src/components/DiffActions.svelte +++ b/src/components/DiffActions.svelte @@ -3,15 +3,15 @@ import { saveToDisk, writeToClipboard } from "@app/lib/invoke"; + import Button from "@app/components/Button.svelte"; import DropdownList from "@app/components/DropdownList.svelte"; import DropdownListItem from "@app/components/DropdownListItem.svelte"; import Icon from "@app/components/Icon.svelte"; import Popover, { closeFocused } from "@app/components/Popover.svelte"; interface Props { - // Fetched lazily so diff text isn't generated until an action runs. + // A thunk so the diff text isn't generated until an action runs. text: () => Promise; - // Default filename offered when saving to disk. fileName: string; title?: string; } @@ -49,42 +49,27 @@ } - - {#snippet toggle(onclick)} - + {/snippet} {#snippet popover()} -
+
{#snippet item(action)} + import type { DiffFileHeaderState } from "./diffFileHeaderState.svelte"; + + import Button from "@app/components/Button.svelte"; + import DiffActions from "@app/components/DiffActions.svelte"; + import Icon from "@app/components/Icon.svelte"; + import Path from "@app/components/Path.svelte"; + + interface Props { + state: DiffFileHeaderState; + } + + const { state }: Props = $props(); + + const name = $derived(state.fileDiff?.name ?? ""); + const prevName = $derived(state.fileDiff?.prevName); + const isRename = $derived( + state.status === "moved" || state.status === "copied", + ); + + const stats = $derived.by(() => { + let additions = 0; + let deletions = 0; + for (const hunk of state.fileDiff?.hunks ?? []) { + additions += hunk.additionLines; + deletions += hunk.deletionLines; + } + return { additions, deletions }; + }); + + const fileName = $derived(`${name.split("/").pop() || "file"}.diff`); + const text = $derived(state.text); + + const statusLabel = $derived( + state.status === "added" + ? "Added" + : state.status === "deleted" + ? "Deleted" + : state.status === "moved" + ? "Moved" + : state.status === "copied" + ? "Copied" + : undefined, + ); + + + + +
+ {#if state.note === "binary"} + + {:else if state.note === "empty"} + + {:else} + + {/if} + + {#if isRename && prevName} + + → + + {:else} + + {/if} + + {#if statusLabel} + {statusLabel} + {/if} + + + {#if !state.note && stats.additions + stats.deletions > 0} + +{stats.additions} + -{stats.deletions} + {/if} + + + {#if text !== undefined} + + {/if} +
diff --git a/src/components/DiffOptionsButton.svelte b/src/components/DiffOptionsButton.svelte new file mode 100644 index 000000000..f8a9c85a6 --- /dev/null +++ b/src/components/DiffOptionsButton.svelte @@ -0,0 +1,154 @@ + + + + + + +{#snippet boolSwitch(checked: boolean, onchange: (value: boolean) => void)} +
+ + +
+{/snippet} + + + {#snippet toggle(onclick)} + + {/snippet} + + {#snippet popover()} +
+
+ Word wrap + {@render boolSwitch( + diffOptions.wordWrap, + value => (diffOptions.wordWrap = value), + )} +
+
+ Indicator style +
+ {#each indicatorOptions as option, index} + + {/each} +
+
+
+ Word diff +
+ {#each wordDiffOptions as option, index} + + {/each} +
+
+
+ {/snippet} + diff --git a/src/components/Icon.svelte b/src/components/Icon.svelte index 397ebb88e..4372b9622 100644 --- a/src/components/Icon.svelte +++ b/src/components/Icon.svelte @@ -41,6 +41,10 @@ | "dashboard" | "device" | "diff" + | "diff-bars" + | "diff-classic" + | "diff-split" + | "diff-unified" | "disconnect" | "document" | "download" @@ -339,6 +343,22 @@ {:else if name === "diff"} + {:else if name === "diff-bars"} + + + + + + + {:else if name === "diff-classic"} + + + {:else if name === "diff-split"} + + + {:else if name === "diff-unified"} + + {:else if name === "disconnect"} diff --git a/src/components/PierreDiff.svelte b/src/components/PierreDiff.svelte new file mode 100644 index 000000000..a7540b7fb --- /dev/null +++ b/src/components/PierreDiff.svelte @@ -0,0 +1,639 @@ + + + + + + +
+ {#if header} +
+ {@render header()} +
+ {/if} +
diff --git a/src/components/PierreTree.svelte b/src/components/PierreTree.svelte new file mode 100644 index 000000000..778c69c0d --- /dev/null +++ b/src/components/PierreTree.svelte @@ -0,0 +1,177 @@ + + + + + + +
diff --git a/src/components/Popover.svelte b/src/components/Popover.svelte index dc0322c30..0849c12da 100644 --- a/src/components/Popover.svelte +++ b/src/components/Popover.svelte @@ -94,6 +94,7 @@ } .popover { box-shadow: var(--elevation-low); + border-radius: var(--border-radius-md); position: fixed; top: 0; left: 0; diff --git a/src/components/diffFileHeaderState.svelte.ts b/src/components/diffFileHeaderState.svelte.ts new file mode 100644 index 000000000..8176499ab --- /dev/null +++ b/src/components/diffFileHeaderState.svelte.ts @@ -0,0 +1,21 @@ +import type { FileDiffMetadata } from "@pierre/diffs"; + +export type FileStatus = "added" | "deleted" | "modified" | "moved" | "copied"; +export type FileNote = "binary" | "empty"; + +// Reactive state for a single `DiffFileHeader`. One instance is created per +// pooled CodeView item element and mutated in place as the element is recycled +// for different files while scrolling (see `PierreDiff.svelte`), so the header +// updates without remounting. +export class DiffFileHeaderState { + fileDiff = $state.raw(undefined); + status = $state(undefined); + note = $state(undefined); + collapsed = $state(false); + // `undefined` hides the actions menu. + text = $state<(() => Promise) | undefined>(undefined); + // Not `$state`: read only at click time. Set per file in `syncHeaderSlots`. + onToggleCollapse: () => void = () => { + // Replaced per file. + }; +} diff --git a/src/lib/diffOptions.svelte.ts b/src/lib/diffOptions.svelte.ts new file mode 100644 index 000000000..5cf1fdce5 --- /dev/null +++ b/src/lib/diffOptions.svelte.ts @@ -0,0 +1,50 @@ +import { z } from "zod"; + +// User-configurable diff/view preferences, persisted to localStorage and shared +// across all commit views so they survive navigation between commits. +export const diffOptionsSchema = z.object({ + showTree: z.boolean(), + diffStyle: z.enum(["unified", "split"]), + wordWrap: z.boolean(), + indicators: z.enum(["classic", "bars", "none"]), + lineDiffType: z.enum(["word-alt", "word", "char", "none"]), +}); + +export type DiffOptions = z.infer; + +const KEY = "diffOptions"; + +const defaults: DiffOptions = { + showTree: true, + diffStyle: "unified", + wordWrap: false, + indicators: "bars", + lineDiffType: "word-alt", +}; + +function load(): DiffOptions { + const raw = globalThis.localStorage?.getItem(KEY); + if (!raw) { + return { ...defaults }; + } + try { + // Merge over defaults so a blob written by an older schema still loads. + const parsed = diffOptionsSchema.partial().safeParse(JSON.parse(raw)); + if (parsed.success) { + return { ...defaults, ...parsed.data }; + } + } catch { + // Ignore malformed storage. + } + return { ...defaults }; +} + +export const diffOptions = $state(load()); + +// Persist on any change. A detached root effect keeps this alive for the whole +// session (the store is a module singleton, so it is never torn down). +$effect.root(() => { + $effect(() => { + globalThis.localStorage?.setItem(KEY, JSON.stringify(diffOptions)); + }); +}); diff --git a/src/lib/invoke.ts b/src/lib/invoke.ts index 51f575b07..5690dce1c 100644 --- a/src/lib/invoke.ts +++ b/src/lib/invoke.ts @@ -178,6 +178,16 @@ export async function getDiffText( }); } +// Commits and patch revisions are immutable, so the same (base, head, unified, +// path) always yields the same patch text — safe to cache. Capped since a +// commit's full patch can be sizeable. +export const cachedGetDiffText = cached( + getDiffText, + (...[rid, base, head, unified, path]) => + `get_diff_text:${rid}:${base}:${head}:${unified}:${path}`, + { max: 100 }, +); + async function getCommitDiff( rid: string, sha: string, diff --git a/src/lib/pierreParse.ts b/src/lib/pierreParse.ts new file mode 100644 index 000000000..28526a916 --- /dev/null +++ b/src/lib/pierreParse.ts @@ -0,0 +1,103 @@ +import type { FileDiffMetadata } from "@pierre/diffs"; + +import { processPatch } from "@pierre/diffs"; + +import type { ParseRequest, ParseResponse } from "@app/lib/pierreParse.worker"; +import PierreParseWorker from "@app/lib/pierreParse.worker?worker"; + +// Parse a unified patch into per-file (partial) diffs off the main thread so +// large diffs do not stutter. Falls back to synchronous main-thread parsing if +// the worker cannot be created. + +let parseWorker: Worker | undefined | null; +let parseSeq = 0; +const pending = new Map< + number, + { + resolve: (response: ParseResponse) => void; + reject: (error: unknown) => void; + } +>(); + +function getParseWorker(): Worker | undefined { + if (parseWorker !== undefined) { + return parseWorker ?? undefined; + } + try { + const worker = new PierreParseWorker(); + worker.onmessage = (event: MessageEvent) => { + const data = event.data; + const entry = pending.get(data.id); + if (!entry) { + return; + } + pending.delete(data.id); + if ("error" in data) { + entry.reject(new Error(data.error)); + } else { + entry.resolve(data); + } + }; + // If the worker dies, in-flight requests would otherwise hang forever. + // Reject them and drop the worker (`null` = permanent fallback) so this and + // future parses run on the main thread instead. + worker.onerror = event => { + const error = new Error(event.message || "parse worker crashed"); + for (const entry of pending.values()) { + entry.reject(error); + } + pending.clear(); + parseWorker = null; + }; + parseWorker = worker; + } catch (error) { + console.error( + "PierreDiff: parse worker unavailable; parsing on the main thread", + error, + ); + parseWorker = null; + } + return parseWorker ?? undefined; +} + +function send( + worker: Worker, + patch: string, + cacheKeyPrefix: string | undefined, +): Promise { + const id = ++parseSeq; + return new Promise((resolve, reject) => { + pending.set(id, { resolve, reject }); + worker.postMessage({ id, patch, cacheKeyPrefix } satisfies ParseRequest); + }); +} + +// Parse a unified patch into per-file (partial) diffs. +// +// `cacheKeyPrefix` must be unique per diff (e.g. the commit or revision id): it +// becomes each file's `cacheKey` (`-`), which the worker pool +// uses to cache highlight results. Without it Pierre keys the cache by file +// path alone, so the same path across two commits collides and the shared pool +// serves a stale, differently-sized highlight — the walk then overruns it and +// the file renders blank. +export async function parsePatch( + patch: string, + cacheKeyPrefix?: string, +): Promise { + const worker = getParseWorker(); + if (!worker) { + return processPatch(patch, cacheKeyPrefix).files; + } + try { + const response = await send(worker, patch, cacheKeyPrefix); + return "files" in response ? response.files : []; + } catch (error) { + // Worker crash or a parse error inside it — fall back to the main thread so + // the diff still renders (a genuinely unparseable patch throws again here). + console.error( + "PierreDiff: parse worker failed; parsing on the main thread", + error, + ); + return processPatch(patch, cacheKeyPrefix).files; + } +} diff --git a/src/lib/pierreParse.worker.ts b/src/lib/pierreParse.worker.ts new file mode 100644 index 000000000..767bbb253 --- /dev/null +++ b/src/lib/pierreParse.worker.ts @@ -0,0 +1,38 @@ +import type { FileDiffMetadata } from "@pierre/diffs"; + +import { processPatch } from "@pierre/diffs"; + +// Parsing a unified patch into per-file `FileDiffMetadata` (partial — only the +// patch's own context) is CPU-heavy and touches no DOM, so it runs here off the +// main thread. Results are plain data and post back via structured clone. +// (Full-file hydration for context expansion is handled by Pierre itself via +// the `loadDiffFiles` option, so it does not go through this worker.) + +export type ParseRequest = { + id: number; + patch: string; + cacheKeyPrefix?: string; +}; + +export type ParseResponse = + | { id: number; files: FileDiffMetadata[] } + | { id: number; error: string }; + +// `self` is typed against the DOM lib here, so narrow to the worker surface we +// actually use to avoid the `Window.postMessage` signature. +const ctx = self as unknown as { + onmessage: ((event: MessageEvent) => void) | null; + postMessage: (message: ParseResponse) => void; +}; + +ctx.onmessage = (event: MessageEvent) => { + const request = event.data; + try { + ctx.postMessage({ + id: request.id, + files: processPatch(request.patch, request.cacheKeyPrefix).files, + }); + } catch (error) { + ctx.postMessage({ id: request.id, error: String(error) }); + } +}; diff --git a/src/views/repo/RepoCommit.svelte b/src/views/repo/RepoCommit.svelte index 674f47f23..45e886446 100644 --- a/src/views/repo/RepoCommit.svelte +++ b/src/views/repo/RepoCommit.svelte @@ -1,9 +1,17 @@ +{#snippet commitMeta()} +
+
+
+
+ {#if !commit.summary} + No commit message + {:else} + {commit.summary} + {/if} +
+
+ + + {commit.author.name} + + committed + + + {formatTimestamp(commit.committer.time * 1000)} + + +
+
+ + {commit.parents.length === 1 ? "parent" : "parents"} + + {#if commit.parents.length === 0} + Initial commit + {:else} + {#each commit.parents as parent} + + {/each} + {/if} +
+ 
{commit.message
+            .replace(commit.summary, "")
+            .trim()}
+
+
+
+ {diff.stats.filesChanged} + {pluralize("file", diff.stats.filesChanged)} changed +
+ + Promise.resolve(patch)} + fileName={`${formatOid(commit.id)}.diff`} + title="Diff actions" /> +
+
+
+{/snippet} +
+
+
+ + + +
- - - {#snippet header()} -
-
-
-
- {#if !commit.summary} - No commit message - {:else} - {commit.summary} - {/if} -
-
- - - {commit.author.name} - - committed - - - {formatTimestamp(commit.committer.time * 1000)} - - -
-
- - {commit.parents.length === 1 ? "parent" : "parents"} - - {#if commit.parents.length === 0} - Initial commit - {:else} - {#each commit.parents as parent} - - {/each} - {/if} -
- 
{commit.message
-                    .replace(commit.summary, "")
-                    .trim()}
-
-
-
- {diff.stats.filesChanged} - {pluralize("file", diff.stats.filesChanged)} changed -
- - getDiffText(repo.rid, undefined, commit.id, 3)} - fileName={`${formatOid(commit.id)}.diff`} - title="Diff actions" /> -
-
-
- {/snippet} - - +
+ {#if diffOptions.showTree} +
+ diffView?.scrollToFile(path)} /> +
+ {/if} + + + getDiffText(repo.rid, undefined, commit.id, 3, path)} + cacheKeyPrefix={commit.id} + header={commitMeta} /> +
diff --git a/src/views/repo/router.ts b/src/views/repo/router.ts index 85eb69bf3..bbe22150b 100644 --- a/src/views/repo/router.ts +++ b/src/views/repo/router.ts @@ -16,7 +16,11 @@ import type { Tree } from "@bindings/source/Tree"; import type { DraftReview } from "@app/lib/draftReviewStorage"; import { draftReviewStorage } from "@app/lib/draftReviewStorage"; -import { cachedGetCommitDiff, invoke } from "@app/lib/invoke"; +import { + cachedGetCommitDiff, + cachedGetDiffText, + invoke, +} from "@app/lib/invoke"; import type { SidebarData } from "@app/lib/router/definitions"; import { loadSidebarData } from "@app/lib/router/definitions"; import { didFromPublicKey, unreachable } from "@app/lib/utils"; @@ -88,6 +92,7 @@ export interface LoadedRepoCommitRoute { repo: RepoInfo; commit: Commit; diff: Diff; + patch: string; sidebarData: SidebarData; }; } @@ -345,7 +350,7 @@ export async function loadRepoCommits( export async function loadRepoCommit( route: RepoCommitRoute, ): Promise { - const [sidebarData, repo, commit, diff] = await Promise.all([ + const [sidebarData, repo, commit, diff, patch] = await Promise.all([ loadSidebarData(), invoke("repo_by_id", { rid: route.rid, @@ -354,12 +359,19 @@ export async function loadRepoCommit( rid: route.rid, sha: route.commit, }), - cachedGetCommitDiff(route.rid, route.commit, 3, true), + // @pierre/diffs highlights client-side from the patch text, so we skip the + // server-side tree-sitter pass (highlight=false). The structured diff still + // drives the file tree, per-file binary/empty notes and status labels, the + // stats badge, and the expansion blob lookup. + cachedGetCommitDiff(route.rid, route.commit, 3, false), + // Patch text that feeds the rendered diff; fetched in parallel so it isn't a + // serial round-trip, and cached since a commit's patch is immutable. + cachedGetDiffText(route.rid, undefined, route.commit, 3), ]); return { resource: "repo.commit", - params: { sidebarData, repo, commit, diff }, + params: { sidebarData, repo, commit, diff, patch }, }; }