skills/nilbuild__diffity
1
0
Fork 0
mirror of https://github.com/nilbuild/diffity.git synced 2026-09-19 07:26:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: loading direction in hunk

Browse Source
This commit is contained in:
Kamran Ahmed
2026-03-17 00:30:29 +00:00
parent 24a8aa6978
commit 6e9fe4edff
7 changed files with 77 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/README.md
+53 -6
View File
@@ -1,8 +1,55 @@
# Changesets
# Releasing
Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
with multi-package repos, or single-package repos to help you version and publish your code. You can
find the full documentation for it [in our repository](https://github.com/changesets/changesets).
We use [changesets](https://github.com/changesets/changesets) to manage versioning and publishing. Only the `diffity` CLI package (in `packages/cli`) is published to npm. All other packages (`@diffity/git`, `@diffity/parser`, `@diffity/ui`) are private workspace packages bundled into the CLI.
We have a quick list of common questions to get you started engaging with this project in
[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md).
## Creating a Changeset
After making changes that should be released, create a changeset:
```bash
npm run changeset
```
This will prompt you to:
1. Select which packages changed (choose `diffity`)
2. Pick a semver bump type (patch / minor / major)
3. Write a summary of the changes
A markdown file is created in `.changeset/` — commit it with your changes.
### When to use each bump type
- **patch** — bug fixes, internal refactors, dependency updates
- **minor** — new features, new CLI flags, non-breaking UI changes
- **major** — breaking changes to CLI arguments or behavior
## Release Process
```bash
# 1. Consume changesets — bumps version in package.json, generates CHANGELOG.md
npm run version
# 2. Review and commit the version bump
git add -A && git commit -m "chore: bump version"
# 3. Build all packages and publish to npm
npm run release
# 4. Push the commit and tag
git push && git push --tags
```
## Verifying a Release
After publishing, verify the package works:
```bash
npm install -g diffity@latest
diffity --version
```
## Notes
- `npm run release` runs a full build before publishing, so you don't need to build separately.
- Changesets automatically creates a git tag for each release (e.g. `diffity@0.2.0`).
- If a publish fails, fix the issue and run `npm run release` again — changesets won't re-bump the version.
README.md
+1 -1
View File
@@ -2,7 +2,7 @@
# diffity
[Diffity](https://diffity.com) is an agent-agnostic, GitHub-style diff viewer and code review tool.
Diffity is an agent-agnostic, GitHub-style diff viewer and code review tool.
```bash
npm install -g diffity
packages/cli/CHANGELOG.md
+6
View File
@@ -1,5 +1,11 @@
# diffity
## 0.1.4
### Patch Changes
- Fix chunk loading indicator
## 0.1.3
### Patch Changes
packages/cli/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "diffity",
"version": "0.1.3",
"version": "0.1.4",
"description": "GitHub-style git diff viewer in the browser",
"type": "module",
"bin": {
packages/ui/src/components/file-block.tsx
+4 -4
View File
@@ -80,7 +80,7 @@ export function FileBlock(props: FileBlockProps) {
const [largeDiffExpanded, setLargeDiffExpanded] = useState(false);
const [expansions, setExpansions] = useState<Map<string, GapExpansion>>(new Map());
const [loadingGap, setLoadingGap] = useState<string | null>(null);
const [loadingGap, setLoadingGap] = useState<{ id: string; direction: 'up' | 'down' | 'all' } | null>(null);
const filePath = getFilePath(file);
const showRename = file.status === 'renamed' && file.oldPath !== file.newPath;
@@ -231,7 +231,7 @@ export function FileBlock(props: FileBlockProps) {
}, [gaps]);
const handleExpand = useCallback(async (gap: ExpandableGap, direction: 'up' | 'down' | 'all') => {
setLoadingGap(gap.id);
setLoadingGap({ id: gap.id, direction });
const lines = await queryClient.ensureQueryData(
fileContentOptions(fileContentPath, true, baseRef)
@@ -313,7 +313,7 @@ export function FileBlock(props: FileBlockProps) {
remainingLines: remaining.total,
remainingUp: remaining.up,
remainingDown: remaining.down,
loading: loadingGap === gap.id,
loadingDirection: loadingGap?.id === gap.id ? loadingGap.direction : null,
wasExpanded,
onExpand: (dir: 'up' | 'down' | 'all') => handleExpand(gap, dir),
};
@@ -510,7 +510,7 @@ export function FileBlock(props: FileBlockProps) {
<ExpandRow
position="bottom"
remainingLines={bottomRemaining}
loading={loadingGap === 'bottom'}
loading={loadingGap?.id === 'bottom'}
onExpand={(dir) => handleExpand(bottomGap, dir)}
/>
{bottomExpansion?.linesFromBottom && bottomExpansion.linesFromBottom.length > 0 &&
packages/ui/src/components/hunk-header.tsx
+12 -10
View File
@@ -9,7 +9,7 @@ export interface ExpandControls {
remainingLines: number;
remainingUp: number;
remainingDown: number;
loading: boolean;
loadingDirection: 'up' | 'down' | 'all' | null;
wasExpanded: boolean;
onExpand: (direction: 'up' | 'down' | 'all') => void;
}
@@ -56,7 +56,7 @@ export function HunkHeader(props: HunkHeaderProps) {
);
}
const { position, remainingLines, remainingUp, remainingDown, loading, wasExpanded, onExpand } = expandControls;
const { position, remainingLines, remainingUp, remainingDown, loadingDirection, wasExpanded, onExpand } = expandControls;
if (remainingLines <= 0) {
if (wasExpanded) {
@@ -78,7 +78,7 @@ export function HunkHeader(props: HunkHeaderProps) {
if (position === 'top') {
return (
<tr className="bg-diff-hunk-bg group/hunk">
{loading ? <SpinnerCell /> : (
{loadingDirection ? <SpinnerCell /> : (
<td className={gutterCell}>
<button className={expandBtn} onClick={() => onExpand('up')} title={`Expand ${Math.min(remainingLines, 20)} lines`}>
<ArrowUpIcon />
@@ -95,7 +95,7 @@ export function HunkHeader(props: HunkHeaderProps) {
if (isSmallGap || (!showUp && showDown) || (showUp && !showDown)) {
return (
<tr className="bg-diff-hunk-bg group/hunk">
{loading ? <SpinnerCell /> : (
{loadingDirection ? <SpinnerCell /> : (
<td className={gutterCell}>
<button
className={expandBtn}
@@ -116,7 +116,7 @@ export function HunkHeader(props: HunkHeaderProps) {
return (
<>
<tr className={expandRow}>
{loading ? <SpinnerCell /> : (
{loadingDirection === 'down' ? <SpinnerCell /> : (
<td className={gutterCell}>
<button className={expandBtn} onClick={() => onExpand('down')} title="Expand down">
<ArrowDownIcon />
@@ -132,11 +132,13 @@ export function HunkHeader(props: HunkHeaderProps) {
</td>
</tr>
<tr className={expandRow}>
<td className={gutterCell}>
<button className={expandBtn} onClick={() => onExpand('up')} title="Expand up">
<ArrowUpIcon />
</button>
</td>
{loadingDirection === 'up' ? <SpinnerCell /> : (
<td className={gutterCell}>
<button className={expandBtn} onClick={() => onExpand('up')} title="Expand up">
<ArrowUpIcon />
</button>
</td>
)}
<td colSpan={3} />
</tr>
</>
releasing.md
-57
View File
@@ -1,57 +0,0 @@
# Releasing
## Overview
We use [changesets](https://github.com/changesets/changesets) to manage versioning and publishing. Only the `diffity` CLI package (in `packages/cli`) is published to npm. All other packages (`@diffity/git`, `@diffity/parser`, `@diffity/ui`) are private workspace packages bundled into the CLI.
## Creating a Changeset
After making changes that should be released, create a changeset:
```bash
npm run changeset
```
This will prompt you to:
1. Select which packages changed (choose `diffity`)
2. Pick a semver bump type (patch / minor / major)
3. Write a summary of the changes
A markdown file is created in `.changeset/` — commit it with your changes.
### When to use each bump type
- **patch** — bug fixes, internal refactors, dependency updates
- **minor** — new features, new CLI flags, non-breaking UI changes
- **major** — breaking changes to CLI arguments or behavior
## Release Process
```bash
# 1. Consume changesets — bumps version in package.json, generates CHANGELOG.md
npm run version
# 2. Review and commit the version bump
git add -A && git commit -m "chore: bump version"
# 3. Build all packages and publish to npm
npm run release
# 4. Push the commit and tag
git push && git push --tags
```
## Verifying a Release
After publishing, verify the package works:
```bash
npm install -g diffity@latest
diffity --version
```
## Notes
- `npm run release` runs a full build before publishing, so you don't need to build separately.
- Changesets automatically creates a git tag for each release (e.g. `diffity@0.2.0`).
- If a publish fails, fix the issue and run `npm run release` again — changesets won't re-bump the version.