feat(vcs): diff preview in the Git window's Local Changes tab (#714)

The Local Changes tab of the Git tool window showed only the changes tree; a file's diff was visible only after opening a diff tab.

It now previews the selected file's working-tree diff beside the tree when the window is docked at the bottom and below it when docked on a side. The preview follows the selection (arrow keys included), shows a placeholder for no or multiple selection, and can be turned off with View Options › Show Diff Preview (persisted; the selection is kept when toggling).

The preview reuses the diff editor, whose toolbar did not fit a side-docked window: the editor is now a size container, the whitespace and highlighting pickers move to the settings menu below 640px and the separators go below 380px, buttons no longer shrink and the differences counter truncates.

Fixes #710.

Co-authored-by: a-rookie-of-C-language <[email protected]>

src/features/vcs/DiffEditor.module.css

@@ -1,5 +1,6 @@
 .root {
   position: relative;
+  container: diff-editor / inline-size;
   flex: 1;
   height: 100%;
   min-height: 0;
@@ -16,19 +17,37 @@
   padding: 0 6px;
   border-bottom: 1px solid var(--border);
 }
+.toolbar > * {
+  flex-shrink: 0;
+}
 .sep {
   width: 1px;
   height: 14px;
   margin: 0 4px;
   background: var(--border-strong);
 }
-.count {
+.toolbar > .count {
+  flex-shrink: 1;
+  min-width: 0;
   margin-left: auto;
   padding: 0 6px;
+  overflow: hidden;
+  text-overflow: ellipsis;
   color: var(--fg-subtle);
   font-size: var(--fs-small);
   white-space: nowrap;
 }
+/* Narrow (a side-docked preview): the whitespace / highlighting pickers stay in the gear menu. */
+@container diff-editor (max-width: 640px) {
+  .select {
+    display: none;
+  }
+}
+@container diff-editor (max-width: 380px) {
+  .toolbar > .sep {
+    display: none;
+  }
+}
 .labels {
   flex: none;
   display: flex;