Skip to content

Commit 9f5f39a

Browse files
PavelLaptevPavelLaptev
authored
UI fixes 114 (#9458)
* feat: improve unassigned file selection and cleanup file list props - Don’t unselect file on second click (don’t toggle) - Clear selection if click not on the list * rewrap commit message: rewrite logic a bit to handle more cases - like single and double line breaks * fix(desktop): update AsyncButton icon to undo-small for clarity * fix(stackview): clear idSelection on assigned changes in order to close the selection preview * style (new branch): remove alignment * fix (branch header): background should be "active" if branch is in focus * feat: add active class to CommitRow for focused styling * for cy test fix in commitActions * ux-chage: don't close unassigned preview on file drag
1 parent affe0b3 commit 9f5f39a

11 files changed

+93
-99
lines changed

‎apps/desktop/src/components/BranchHeader.svelte

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -60,12 +60,12 @@
6060
role="button"
6161
class="branch-header"
6262
class:selected
63+
class:active
6364
class:draft
6465
class:commiting={isCommitting}
6566
{onclick}
6667
onkeypress={onclick}
6768
tabindex="0"
68-
class:active
6969
>
7070
{#if selected && !draft}
7171
<div
@@ -132,14 +132,17 @@
132132
background-color: var(--branch-selected-bg);
133133
134134
/* Selected but NOT in focus */
135-
&:hover,
135+
&:hover {
136+
--branch-selected-bg: var(--clr-bg-1-muted);
137+
}
138+
136139
&:focus-within,
137-
&.selected {
140+
&:not(:focus-within).selected {
138141
--branch-selected-bg: var(--clr-selected-not-in-focus-bg);
139142
}
140143
141144
/* Selected in focus */
142-
&:focus-within.selected {
145+
&.active.selected {
143146
--branch-selected-bg: var(--clr-selected-in-focus-bg);
144147
--branch-selected-element-bg: var(--clr-selected-in-focus-element);
145148
}
@@ -166,6 +169,7 @@
166169
border-radius: 0 var(--radius-ml) var(--radius-ml) 0;
167170
background-color: var(--branch-selected-element-bg);
168171
transition: transform var(--transition-fast);
172+
169173
&.active {
170174
background-color: var(--clr-selected-in-focus-element);
171175
}

‎apps/desktop/src/components/BranchView.svelte

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -195,7 +195,6 @@
195195
flex-direction: column;
196196
justify-content: center;
197197
max-width: 540px;
198-
margin: 0 auto;
199198
padding: 30px;
200199
}
201200

‎apps/desktop/src/components/CommitDetails.svelte

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -85,8 +85,8 @@
8585
</Tooltip>
8686
</div>
8787

88-
{#if description}
89-
<div
88+
{#if description && description.trim()}
89+
<p
9090
class="description"
9191
class:expanded
9292
style:--commit-message-font={$rewrapCommitMessage
@@ -109,7 +109,7 @@
109109
{/if}
110110
</button>
111111
{/if}
112-
</div>
112+
</p>
113113
{/if}
114114
</div>
115115

‎apps/desktop/src/components/CommitRow.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@
8787
class:menu-shown={isOpen}
8888
class:first
8989
class:selected
90+
class:active
9091
style:opacity
9192
class:border-top={borderTop || first}
9293
class:last={lastCommit}
@@ -148,12 +149,11 @@
148149
border-bottom: 1px solid var(--clr-border-2);
149150
}
150151
151-
&:focus-within,
152152
&.selected {
153153
background-color: var(--clr-selected-not-in-focus-bg);
154154
}
155155
156-
&:focus-within.selected {
156+
&.active.selected {
157157
background-color: var(--clr-selected-in-focus-bg);
158158
}
159159
}

‎apps/desktop/src/components/FileList.svelte

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@
2828
active?: boolean;
2929
conflictEntries?: ConflictEntriesObj;
3030
draggableFiles?: boolean;
31-
allowUnselect?: boolean;
3231
onselect?: () => void;
3332
};
3433
@@ -42,7 +41,6 @@
4241
stackId,
4342
conflictEntries,
4443
draggableFiles,
45-
allowUnselect,
4644
onselect
4745
}: Props = $props();
4846
@@ -186,7 +184,8 @@
186184
isLast={idx === visibleFiles.length - 1}
187185
selected={idSelection.has(change.path, selectionId)}
188186
onclick={(e) => {
189-
selectFilesInList(e, change, changes, idSelection, true, idx, selectionId, allowUnselect);
187+
e.stopPropagation();
188+
selectFilesInList(e, change, changes, idSelection, true, idx, selectionId);
190189
onselect?.();
191190
}}
192191
{conflictEntries}

‎apps/desktop/src/components/NotOnGitButlerBranch.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@
153153
<div class="switchrepo__actions">
154154
<AsyncButton
155155
style="pop"
156-
icon="arrow-left"
156+
icon="undo-small"
157157
reversedDirection
158158
loading={targetBranchSwitch.current.isLoading}
159159
action={initSwithToWorkspace}

‎apps/desktop/src/components/StackView.svelte

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -262,6 +262,7 @@
262262
{projectId}
263263
selectionId={{ ...assignedKey, type: 'worktree', stackId }}
264264
onclose={() => {
265+
idSelection.clear({ type: 'worktree', stackId: stack.id });
265266
intelligentScrollingService.show(projectId, stack.id, 'stack');
266267
}}
267268
draggableFiles

‎apps/desktop/src/components/UnassignedView.svelte

Lines changed: 44 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
import { workspaceRulesEnabled } from '$lib/config/uiFeatureFlags';
88
import { DefinedFocusable } from '$lib/focus/focusManager.svelte';
99
import { IntelligentScrollingService } from '$lib/intelligentScrolling/service';
10+
import { IdSelection } from '$lib/selection/idSelection.svelte';
1011
import { UncommittedService } from '$lib/selection/uncommittedService.svelte';
1112
import { UiState } from '$lib/state/uiState.svelte';
1213
import { TestId } from '$lib/testing/testIds';
@@ -25,10 +26,11 @@
2526
2627
const selectionId = { type: 'worktree', stackId: undefined } as SelectionId;
2728
28-
const [uiState, uncommittedService, intelligentScrollingService] = inject(
29+
const [uiState, uncommittedService, intelligentScrollingService, idSelection] = inject(
2930
UiState,
3031
UncommittedService,
31-
IntelligentScrollingService
32+
IntelligentScrollingService,
33+
IdSelection
3234
);
3335
const projectState = $derived(uiState.project(projectId));
3436
const unassignedSidebaFolded = $derived(uiState.global.unassignedSidebaFolded);
@@ -45,6 +47,10 @@
4547
unassignedSidebaFolded.set(false);
4648
}
4749
50+
function unselectFiles() {
51+
idSelection.clear(selectionId);
52+
}
53+
4854
$effect(() => {
4955
if (isCommitting && changesToCommit) {
5056
unassignedSidebaFolded.set(false);
@@ -54,34 +60,36 @@
5460

5561
{#if !unassignedSidebaFolded.current}
5662
<div class="unassigned">
57-
<WorktreeChanges
58-
title="Unassigned"
59-
{projectId}
60-
stackId={undefined}
61-
active={selectionId.type === 'worktree' &&
62-
selectionId.stackId === undefined &&
63-
focus === DefinedFocusable.ViewportLeft}
64-
onscrollexists={(exists: boolean) => {
65-
isScrollable = exists;
66-
}}
67-
overflow
68-
onselect={() => {
69-
intelligentScrollingService.unassignedFileClicked(projectId);
70-
}}
71-
>
72-
{#snippet emptyPlaceholder()}
73-
<div class="unassigned__empty">
74-
<div class="unassigned__empty__placeholder">
75-
{@html noChanges}
76-
<p class="text-13 text-body unassigned__empty__placeholder-text">
77-
You're all caught up!<br />
78-
No files need committing
79-
</p>
63+
<div role="presentation" class="unassigned__files" onclick={unselectFiles}>
64+
<WorktreeChanges
65+
title="Unassigned"
66+
{projectId}
67+
stackId={undefined}
68+
active={selectionId.type === 'worktree' &&
69+
selectionId.stackId === undefined &&
70+
focus === DefinedFocusable.ViewportLeft}
71+
onscrollexists={(exists: boolean) => {
72+
isScrollable = exists;
73+
}}
74+
overflow
75+
onselect={() => {
76+
intelligentScrollingService.unassignedFileClicked(projectId);
77+
}}
78+
>
79+
{#snippet emptyPlaceholder()}
80+
<div class="unassigned__empty">
81+
<div class="unassigned__empty__placeholder">
82+
{@html noChanges}
83+
<p class="text-13 text-body unassigned__empty__placeholder-text">
84+
You're all caught up!<br />
85+
No files need committing
86+
</p>
87+
</div>
88+
<WorktreeTipsFooter />
8089
</div>
81-
<WorktreeTipsFooter />
82-
</div>
83-
{/snippet}
84-
</WorktreeChanges>
90+
{/snippet}
91+
</WorktreeChanges>
92+
</div>
8593

8694
{#if changesToCommit}
8795
<div class="create-new" class:sticked-bottom={isScrollable}>
@@ -197,6 +205,13 @@
197205
transform: rotate(-90deg);
198206
}
199207
208+
.unassigned__files {
209+
display: flex;
210+
flex: 1;
211+
flex-direction: column;
212+
overflow: hidden;
213+
}
214+
200215
/* MODIFIERS */
201216
.sticked-bottom {
202217
border-top: 1px solid var(--clr-border-2);

‎apps/desktop/src/components/WorkspaceView.svelte

Lines changed: 7 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
import SelectionView from '$components/SelectionView.svelte';
88
import UnassignedView from '$components/UnassignedView.svelte';
99
import { SettingsService } from '$lib/config/appSettingsV2';
10-
import { DragStateService } from '$lib/dragging/dragStateService.svelte';
1110
import {
1211
DefinedFocusable,
1312
FocusManager,
@@ -29,8 +28,13 @@
2928
3029
const { projectId }: Props = $props();
3130
32-
const [stackService, focusManager, idSelection, uiState, settingsService, dragStateService] =
33-
inject(StackService, FocusManager, IdSelection, UiState, SettingsService, DragStateService);
31+
const [stackService, focusManager, idSelection, uiState, settingsService] = inject(
32+
StackService,
33+
FocusManager,
34+
IdSelection,
35+
UiState,
36+
SettingsService
37+
);
3438
const worktreeSelection = $derived(idSelection.getById({ type: 'worktree' }));
3539
const stacksResult = $derived(stackService.stacks(projectId));
3640
const projectState = $derived(uiState.project(projectId));
@@ -75,17 +79,6 @@
7579
const lastAdded = $derived(worktreeSelection.lastAdded);
7680
const previewOpen = $derived(!!$lastAdded?.key);
7781
78-
// Close preview when dragging starts (without clearing file selections)
79-
$effect(() => {
80-
const unsubscribe = dragStateService.isDragging.subscribe((isDragging) => {
81-
if (isDragging) {
82-
// Only clear the lastAdded to close preview, keep file selections intact
83-
worktreeSelection.lastAdded.set(undefined);
84-
}
85-
});
86-
return unsubscribe;
87-
});
88-
8982
// Ensures that the exclusive action is still valid.
9083
$effect(() => {
9184
if (exclusiveAction?.type === 'commit') {

‎apps/desktop/src/components/WorktreeChanges.svelte

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,6 @@
108108
<div data-testid={TestId.UncommittedChanges_FileList} class="uncommitted-changes">
109109
<FileList
110110
draggableFiles
111-
allowUnselect
112111
selectionId={{ type: 'worktree', stackId }}
113112
showCheckboxes={isCommitting}
114113
changes={changes.current}

0 commit comments

Comments
 (0)