feat: add signs to the editor and hunk management

[Vinzent03]

• Add support for showing hunks for unstaged changes (no staged changes as sign currently though) close FR: GitSigns in the gutter #481

• Stage\unstage individual hunks close Support staging selected range #790

[Vinzent03]

In case someone wants to try it out: here is an already built main.js and styles.css
main.js
styles.css

(Or of course build it yourself)

[chrisgrieser]

will have to see whether problems occur in everyday use, but so far, works great! Maybe the signs could be a bit thicker?

Given the size (2700+ lines) and the huge number of feature obsidian-git is accumulating, I feel like the git signs could rather be its own plugin, also since people could want the gitsigns without the need for the rest of the plugin. But I guess making use of the shared code functionality is probably an argument for making it one plugin.

[chrisgrieser]

One visual issue I noticed is that the git signs appear to shift the whole content to the side, reducing the line width and also making the properties at the top not aligned anymore.

I personally would find it better if the gitsigns would appear to the left of the content instead of pushing all the content to the right.

[Vinzent03]

Yeah this feature adds quite amount of code, but the integration makes it worth to be one single plugin. You can disable pretty much every other feature so I think it's fine to install this plugin for signs only as well.

Increasing the width by one pixel might be a good idea, but I think more is too wide.

It might look a bit strange in your case, but the signs gutter itself is pretty narrow. The huge gab is caused by the gutter margin in general. You would see the same gab when you have line numbers enabled.

[chrisgrieser]

It might look a bit strange in your case, but the signs gutter itself is pretty narrow. The huge gab is caused by the gutter margin in general. You would see the same gab when you have line numbers enabled.

true, but most people have line numbers disabled and have no other gutter plugins, resulting in that weird spacing.

I tried this css snippet, and the alignment looks much nicer imo.

.cm-gutters.cm-gutters-before:not(:has(> .cm-lineNumbers)) {
	margin-inline-end: 0;
	.signs-gutter-container {
		margin-inline-start: -1rem;
	}
}

(using default theme for reference)

without signs before	with signs before

without signs after	with signs after

[chrisgrieser]

Onto a different subject, while there are a lot of utility commands like previewing or resetting the hunk, one common command that is not implemented is "go to next/previous hunk".

I find it extremely useful, and my most used command from any gitsigns plugin, as it effectively allows you to navigate between your hunks. In my opinion, it would also make to add it here, since it synergizes so well with the visual git signs.

[chrisgrieser]

Another suggestion: a statusline item for the number of changes.

Not a game changer, but imo nice-to-have is an indicator for the number of changes in the current file (+ for additions, ~ for changes, – for deletions). Here is what it looks like in my editor:

Even though the coloring is useful, the statusbar items in obsidian are usually uncolored, thus the decision whether to display the changes with color or not should probably be a toggle on the user end.

[chrisgrieser]

A minor bug with the gitsigns implementation:

When staging hunks via the git plugin's commands, the gitsigns do disappear (as they should), but if the hunks / the file is staged via different means (e.g. a cronjob running every 30 minutes), the gitsigns stay, i.e., they become outdated.

[Vinzent03]

Thanks for your amount of suggestions and opinion!

• I've now altered the margin of the gutter if signs is the only gutter.
• I'm using the next hunk command all the time in Neovim as well, so I added it as well
• The status bar is a great idea. I've also added the option for it to be with or without color.

To the staging outside of Obsidian: Do you some the following settings enabled?

With these, as soon as you edit a file, it should refresh the cached index version. So it currently depends on the refresh of the source control view, which I get is not optimal.

main.js
styles.css

[chrisgrieser]

great, thank you!

hunk navigation, statusbar, and sign alignment now all work as expected.

The soruce control view setting seems to do the trick, though I guess the setting should be renamed / put into a different section, since it's not apparent that a source control sidebar setting, which I do not use, affects the git signs.

---

A small suggestion for the css:

Rather than hard-coding height/width via px, it probably makes more sense to have them follow the font size the user has set, e.g. via rem. Also, the ~ from change-deletions looks much too thin.

Adding something like this as css should do it:

.git-gutter-marker.git-change {
	width: 0.2rem;
}
.git-gutter-marker.git-add {
	width: 0.2rem;
}
.git-gutter-marker.git-delete {
	height: 0.2rem;
}
.git-gutter-marker.git-changedelete {
	font-weight: var(--font-bold);
	font-size: 1rem;
}

[chrisgrieser]

Another styling suggestion:

the colored status bar can have, somewhat insufficient contrast. Especially yellow tends to have bad contrast on bright backgrounds such as the light theme. One possible solution to this would be to use a very light text shadow.

.status-bar-item.git-changes-status-bar-colored {
	text-shadow: 0.4px 0.4px 0 var(--text-muted);
}

Though this has the minor drawback that it looks a bit inconsistent to have one status bar items with text shadow and the rest without, so I am not fully happy with this solution myself.

[chrisgrieser]

regarding the status bar:

When there are no additions/changes/deletions, the statusbar item still displays 0, e.g. +0. This is adds minor noice.

In contrast, lualine.nvim simply leaves out additions/changes/deletions when there are none of them, for example just displaying ~1 -1 if there are no additions instead of displaying +0 ~1 -1.

[Vinzent03]

Yeah the refreshing should definitely not depend on the source control view. It now always refreshes the active editor every 10 seconds.

Thanks for the rem instead of px suggestion. Should be fixed now.

You're right the contrast can be a bit low with the yellow, but adding the shader looks much stranger to me, since it differs from the other entries.

I now only show the numbers greater than zero in the status bar.

main.js
styles.css

[chrisgrieser]

Thanks, looking good!

As of right now, I cannot think of any issues or much to improve. Only potential issue is that with a larger amount of hunks, Obsidian feels slightly laggy, but not sure if that's related to this plugin or not.

[Vinzent03]

Ok thanks for the feedback. I took some measurements, and it sometimes takes longer than I expected. It now falls back to debouncing the diff if the change is big or a diff took longer than 16ms. If many diffs are faster again it re-enables instant diff computation. I hope this strategy handles performance issues well enough.
(I also found a bug in the codemirror extension, which is solved now)
main.js
styles.css