Skip to content

Commit 258a056

Browse files
authored
Merge pull request #13188 from gitbutlerapp/lite-misc
Lite: misc
2 parents 620bf9f + 01c1dcc commit 258a056

17 files changed

Lines changed: 975 additions & 862 deletions

apps/lite/ui/src/global.css

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,29 +13,29 @@
1313

1414
--color-bg: var(--color-white);
1515
--color-button-bg: var(--color-gray-50);
16-
--color-button-hover-bg: var(--color-gray-100);
1716
--color-button-disabled-fg: var(--color-gray-700);
17+
--color-button-hover-bg: var(--color-gray-100);
1818
--color-dialog-backdrop: light-dark(rgb(0 0 0 / 0.35), rgb(0 0 0 / 0.65));
1919
--color-drag-over-outline: var(--color-black);
2020
--color-file-selected-bg: var(--color-gray-200);
2121
--color-input-bg: var(--color-gray-50);
2222
--color-item-action-hover-bg: var(--color-gray-200);
2323
--color-item-highlighted-bg: #63cdc7;
24-
--color-item-hover-bg: var(--color-gray-100);
2524
--color-item-selected-action-hover-bg: var(--color-gray-900);
2625
--color-item-selected-bg: var(--color-black);
2726
--color-item-selected-fg: var(--color-white);
2827
--color-menu-item-highlighted-bg: var(--color-gray-50);
2928
--color-move-indicator: var(--color-black);
29+
--color-row-hover-bg: var(--color-gray-100);
3030
--color-section-selected-bg: var(--color-gray-50);
3131
--color-separator: var(--color-gray-400);
3232
--color-text-secondary-inverse: var(--color-gray-400);
3333
--color-text-secondary: var(--color-gray-700);
3434
--color-text: var(--color-black);
35-
--item-block-padding: 4px;
36-
--item-inline-padding: 8px;
37-
--item-line-height: 19px;
3835
--panel-padding: 16px;
36+
--row-block-padding: 4px;
37+
--row-inline-padding: 8px;
38+
--row-line-height: 19px;
3939
}
4040

4141
body {

apps/lite/ui/src/routes/project/$id/-ProjectPreviewLayout.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { ProjectStateContext } from "#ui/routes/project/$id/-ProjectState.tsx";
77
import { ShortcutsBarPortalContext } from "#ui/routes/project/$id/-ShortcutsBar.tsx";
88
import { assert } from "#ui/routes/project/$id/-shared.tsx";
99
import uiStyles from "#ui/ui.module.css";
10-
import { closeFullscreenPreviewBinding } from "./workspace/-WorkspaceShortcuts.ts";
10+
import { closePreviewBinding } from "./workspace/-WorkspaceShortcuts.ts";
1111
import sharedStyles from "./-shared.module.css";
1212

1313
export const ProjectPreviewLayout: FC<{
@@ -74,12 +74,12 @@ export const ProjectPreviewLayout: FC<{
7474
<Dialog.Popup aria-label="Preview" className={sharedStyles.previewDialogPopup}>
7575
<div className={sharedStyles.previewDialogBody}>
7676
<ShortcutButton
77-
binding={closeFullscreenPreviewBinding}
77+
binding={closePreviewBinding}
7878
type="button"
7979
className={uiStyles.button}
80-
onClick={() => dispatchProjectState({ _tag: "CloseFullscreenPreview" })}
80+
onClick={() => dispatchProjectState({ _tag: "ClosePreview" })}
8181
>
82-
{closeFullscreenPreviewBinding.description}
82+
{closePreviewBinding.description}
8383
</ShortcutButton>
8484
{preview}
8585
</div>

apps/lite/ui/src/routes/project/$id/-shared.module.css

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -43,28 +43,28 @@
4343
width: 500px;
4444
}
4545

46-
.item {
46+
.row {
4747
display: flex;
4848
align-items: start;
4949

5050
&:where(:hover) {
51-
background-color: var(--color-item-hover-bg);
51+
background-color: var(--color-row-hover-bg);
5252
}
5353
}
5454

55-
.itemEmpty {
56-
padding-inline: var(--item-inline-padding);
57-
padding-block: var(--item-block-padding);
55+
.rowEmpty {
56+
padding-inline: var(--row-inline-padding);
57+
padding-block: var(--row-block-padding);
5858
color: var(--color-text-secondary);
59-
line-height: var(--item-line-height);
59+
line-height: var(--row-line-height);
6060
}
6161

62-
.selected {
62+
.itemSelected {
6363
background-color: var(--color-item-selected-bg);
6464
color: var(--color-item-selected-fg);
6565
}
6666

67-
.highlighted {
67+
.itemHighlighted {
6868
background-color: var(--color-item-highlighted-bg);
6969
color: var(--color-text);
7070
}
@@ -73,29 +73,29 @@
7373
background-color: var(--color-section-selected-bg);
7474
}
7575

76-
.itemAction {
76+
.rowAction {
7777
display: grid;
7878
visibility: hidden;
79-
padding-inline: var(--item-inline-padding);
80-
padding-block: var(--item-block-padding);
79+
padding-inline: var(--row-inline-padding);
80+
padding-block: var(--row-block-padding);
8181

8282
&:enabled:hover {
8383
background-color: var(--color-item-action-hover-bg);
8484

85-
.item.selected & {
85+
.rowSelected & {
8686
background-color: var(--color-item-selected-action-hover-bg);
8787
}
8888
}
8989

9090
svg {
91-
width: var(--item-line-height);
92-
height: var(--item-line-height);
91+
width: var(--row-line-height);
92+
height: var(--row-line-height);
9393
}
9494

95-
.item:hover &,
96-
.item:focus-within &,
97-
.item:has(.itemAction[aria-expanded="true"]) &,
98-
.item.selected & {
95+
.row:hover &,
96+
.row:focus-within &,
97+
.row:has(.rowAction[aria-expanded="true"]) &,
98+
.rowSelected & {
9999
visibility: visible;
100100
}
101101

@@ -110,10 +110,10 @@
110110

111111
.commitButton {
112112
flex-grow: 1;
113-
padding-inline: var(--item-inline-padding);
114-
padding-block: var(--item-block-padding);
113+
padding-inline: var(--row-inline-padding);
114+
padding-block: var(--row-block-padding);
115115
overflow: hidden;
116-
line-height: var(--item-line-height);
116+
line-height: var(--row-line-height);
117117
text-overflow: ellipsis;
118118
white-space: nowrap;
119119
}
@@ -124,10 +124,10 @@
124124

125125
.fileButton {
126126
flex-grow: 1;
127-
padding-inline: var(--item-inline-padding);
128-
padding-block: var(--item-block-padding);
127+
padding-inline: var(--row-inline-padding);
128+
padding-block: var(--row-block-padding);
129129
overflow: hidden;
130-
line-height: var(--item-line-height);
130+
line-height: var(--row-line-height);
131131
text-overflow: ellipsis;
132132
white-space: nowrap;
133133
}
@@ -136,7 +136,7 @@
136136
padding-left: 8px;
137137
}
138138

139-
.selectedFile {
139+
.fileSelected {
140140
background-color: var(--color-file-selected-bg);
141141
}
142142

apps/lite/ui/src/routes/project/$id/-shared.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,7 @@ export const CommitDetails: FC<{
143143
: [];
144144

145145
if (conflictedPaths.length === 0 && data.changes.length === 0)
146-
return <div className={styles.itemEmpty}>No file changes.</div>;
146+
return <div className={styles.rowEmpty}>No file changes.</div>;
147147

148148
return (
149149
<>

apps/lite/ui/src/routes/project/$id/-state/layout.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export type ProjectLayoutState = {
1212
export type ProjectLayoutAction =
1313
| { _tag: "FocusPrimary" }
1414
| { _tag: "FocusPreview" }
15+
| { _tag: "ClosePreview" }
1516
| { _tag: "TogglePreview" }
1617
| { _tag: "OpenFullscreenPreview" }
1718
| { _tag: "CloseFullscreenPreview" }
@@ -43,6 +44,16 @@ export const projectLayoutReducer = (
4344
...state,
4445
panelLayout: { _tag: "Split", focus: "preview" },
4546
},
47+
ClosePreview: (): ProjectLayoutState =>
48+
state.isFullscreenPreviewOpen
49+
? {
50+
...state,
51+
isFullscreenPreviewOpen: false,
52+
}
53+
: {
54+
...state,
55+
panelLayout: { _tag: "Primary" },
56+
},
4657
TogglePreview: (): ProjectLayoutState => ({
4758
...state,
4859
panelLayout:

apps/lite/ui/src/routes/project/$id/-state/project.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,10 @@ export const projectStateReducer = (
3434
layout: projectLayoutReducer(state.layout, { _tag: "FocusPrimary" }),
3535
workspaceSelection: workspaceSelectionReducer(state.workspaceSelection, action),
3636
}),
37+
SelectFile: (action): ProjectState => ({
38+
layout: projectLayoutReducer(state.layout, { _tag: "FocusPrimary" }),
39+
workspaceSelection: workspaceSelectionReducer(state.workspaceSelection, action),
40+
}),
3741
SelectHunk: (action): ProjectState => ({
3842
layout: projectLayoutReducer(state.layout, { _tag: "FocusPreview" }),
3943
workspaceSelection: workspaceSelectionReducer(state.workspaceSelection, action),

apps/lite/ui/src/routes/project/$id/-state/selection.ts

Lines changed: 80 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,22 @@
1+
import { getCommonBaseCommitId } from "#ui/domain/RefInfo.ts";
12
import { type RefInfo, type WorktreeChanges } from "@gitbutler/but-sdk";
23
import { Match } from "effect";
3-
import { changesSummaryItem, normalizeItem, type Item } from "../workspace/-Item.ts";
4+
import { type Item } from "../workspace/-Item.ts";
45

56
export type WorkspaceSelectionState = {
67
item: Item | null;
8+
file: string | null;
79
hunk: string | null;
810
};
911

1012
export type WorkspaceSelectionAction =
1113
| { _tag: "SelectItem"; item: Item | null }
14+
| { _tag: "SelectFile"; file: string | null }
1215
| { _tag: "SelectHunk"; hunk: string | null };
1316

1417
export const initialWorkspaceSelectionState: WorkspaceSelectionState = {
1518
item: null,
19+
file: null,
1620
hunk: null,
1721
};
1822

@@ -24,6 +28,12 @@ export const workspaceSelectionReducer = (
2428
Match.tagsExhaustive({
2529
SelectItem: ({ item }): WorkspaceSelectionState => ({
2630
item,
31+
file: null,
32+
hunk: null,
33+
}),
34+
SelectFile: ({ file }): WorkspaceSelectionState => ({
35+
...state,
36+
file,
2737
hunk: null,
2838
}),
2939
SelectHunk: ({ hunk }): WorkspaceSelectionState => ({
@@ -33,15 +43,80 @@ export const workspaceSelectionReducer = (
3343
}),
3444
);
3545

46+
const normalizeSelectedItem = (
47+
item: Item,
48+
headInfo: RefInfo,
49+
worktreeChanges: WorktreeChanges,
50+
): Item | null =>
51+
Match.value(item).pipe(
52+
Match.tag("Changes", (item) => item),
53+
Match.tag("Change", (item) => {
54+
if (!worktreeChanges.changes.find((change) => change.path === item.path)) return null;
55+
if (
56+
!worktreeChanges.assignments.find(
57+
(assignment) => assignment.stackId === item.stackId && assignment.path === item.path,
58+
)
59+
)
60+
return null;
61+
return item;
62+
}),
63+
Match.tag("Segment", (item) => {
64+
const stack = headInfo.stacks.find((stack) => stack.id !== null && stack.id === item.stackId);
65+
if (!stack) return null;
66+
const segment = stack.segments[item.segmentIndex];
67+
if (!segment) return null;
68+
const branchName = segment.refName?.displayName ?? null;
69+
if (branchName !== item.branchName) return null;
70+
return item;
71+
}),
72+
Match.tag("Commit", (item) => {
73+
const stack = headInfo.stacks.find((stack) => stack.id !== null && stack.id === item.stackId);
74+
if (!stack) return null;
75+
const segment = stack.segments[item.segmentIndex];
76+
if (!segment) return null;
77+
if (!segment.commits.some((commit) => commit.id === item.commitId)) return null;
78+
return item;
79+
}),
80+
Match.tag("BaseCommit", (item) => {
81+
const commonBaseCommitId = getCommonBaseCommitId(headInfo);
82+
return commonBaseCommitId === item.commitId ? item : null;
83+
}),
84+
Match.exhaustive,
85+
);
86+
3687
export const resolveSelectedWorkspaceItem = ({
3788
workspaceSelection,
38-
headInfo,
3989
worktreeChanges,
90+
headInfo,
91+
defaultItem,
4092
}: {
4193
workspaceSelection: WorkspaceSelectionState;
42-
headInfo: RefInfo;
4394
worktreeChanges: WorktreeChanges;
95+
headInfo: RefInfo;
96+
defaultItem: Item;
4497
}): Item =>
4598
(workspaceSelection.item
46-
? normalizeItem(workspaceSelection.item, headInfo, worktreeChanges)
47-
: null) ?? changesSummaryItem(null);
99+
? normalizeSelectedItem(workspaceSelection.item, headInfo, worktreeChanges)
100+
: null) ?? defaultItem;
101+
102+
export const normalizeSelectedFile = ({
103+
paths,
104+
selectedFile,
105+
}: {
106+
paths: Array<string>;
107+
selectedFile: string | null | undefined;
108+
}): string | undefined => {
109+
if (selectedFile != null && paths.includes(selectedFile)) return selectedFile;
110+
return paths[0];
111+
};
112+
113+
export const normalizeSelectedHunk = ({
114+
hunkKeys,
115+
selectedHunk,
116+
}: {
117+
hunkKeys: Array<string>;
118+
selectedHunk: string | null;
119+
}): string | undefined => {
120+
if (selectedHunk !== null && hunkKeys.includes(selectedHunk)) return selectedHunk;
121+
return hunkKeys[0];
122+
};

apps/lite/ui/src/routes/project/$id/branches/route.module.css

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@
1010

1111
.branchButton {
1212
flex-grow: 1;
13-
padding-inline: var(--item-inline-padding);
14-
padding-block: var(--item-block-padding);
15-
line-height: var(--item-line-height);
13+
padding-inline: var(--row-inline-padding);
14+
padding-block: var(--row-block-padding);
15+
line-height: var(--row-line-height);
1616
}
1717

1818
.branchApplyToggleDefaultIcon {

0 commit comments

Comments
 (0)