Skip to content

Commit 3bec449

Browse files
robertpiosikrobertpiosik
committed
Refactor ResponsePreview component styles and logic to properly handle mixed file and text items in the preview list
1 parent 454d92b commit 3bec449

3 files changed

Lines changed: 98 additions & 83 deletions

File tree

‎packages/ui/src/components/editor/panel/ResponsePreview/ResponsePreview.module.scss‎

Lines changed: 68 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
display: flex;
33
flex-direction: column;
44
padding-top: var(--padding-4px);
5+
gap: var(--padding-8px);
56
}
67

78
.info {
@@ -24,7 +25,7 @@
2425
padding: var(--padding-5px) var(--padding-7px);
2526
color: var(--vscode-descriptionForeground);
2627
border: 1px solid var(--vscode-sideBarSectionHeader-border);
27-
margin: 0 var(--padding-12px) var(--padding-8px) var(--padding-12px);
28+
margin: 0 var(--padding-12px);
2829
border-radius: var(--border-radius-5px);
2930
word-wrap: break-word;
3031
overflow: hidden;
@@ -43,91 +44,93 @@
4344
}
4445
}
4546

46-
.textItem {
47-
padding: var(--padding-5px) var(--padding-12px);
48-
margin: 0 var(--padding-12px) var(--padding-8px) var(--padding-12px);
49-
color: var(--vscode-descriptionForeground);
50-
white-space: pre-wrap;
51-
word-wrap: break-word;
52-
border: 1px solid var(--vscode-sideBarSectionHeader-border);
53-
border-radius: var(--border-radius-5px);
54-
}
55-
5647
.list {
57-
padding: 0 var(--spacing-s);
58-
}
48+
display: block;
5949

60-
.item {
61-
display: flex;
62-
align-items: center;
63-
justify-content: space-between;
64-
gap: var(--padding-8px);
65-
padding: 0 var(--padding-12px);
66-
height: var(--list-item-height);
67-
&:hover {
68-
background-color: var(--vscode-list-hoverBackground);
69-
70-
.item__actions {
71-
display: flex;
72-
}
50+
&__text {
51+
margin: var(--padding-6px) var(--padding-12px);
7352
}
7453

75-
&--selected {
76-
background-color: var(--vscode-list-inactiveSelectionBackground);
54+
> div:first-child {
55+
margin-top: 0;
56+
}
7757

78-
&:hover {
79-
background-color: var(--vscode-list-inactiveSelectionBackground);
80-
}
58+
> div:last-child {
59+
margin-bottom: 0;
8160
}
8261

83-
&__left {
62+
&__file {
8463
display: flex;
8564
align-items: center;
65+
justify-content: space-between;
8666
gap: var(--padding-8px);
87-
overflow: hidden;
88-
89-
&__label {
90-
flex: 1;
91-
text-overflow: ellipsis;
92-
overflow: hidden;
93-
white-space: nowrap;
67+
padding: 0 var(--padding-12px);
68+
height: var(--list-item-height);
69+
&:hover {
70+
background-color: var(--vscode-list-hoverBackground);
9471

95-
> span:last-child {
96-
opacity: 0.7;
97-
margin-left: 0.5em;
98-
font-size: 0.9em;
72+
.list__file__actions {
73+
display: flex;
9974
}
75+
}
10076

101-
&--new {
102-
color: var(--vscode-gitDecoration-untrackedResourceForeground);
103-
}
77+
&--selected {
78+
background-color: var(--vscode-list-inactiveSelectionBackground);
10479

105-
&--deleted {
106-
text-decoration: line-through;
107-
color: var(--vscode-gitDecoration-deletedResourceForeground);
80+
&:hover {
81+
background-color: var(--vscode-list-inactiveSelectionBackground);
10882
}
10983
}
110-
}
11184

112-
&__right {
113-
display: flex;
114-
align-items: center;
115-
gap: var(--padding-8px);
116-
}
85+
&__left {
86+
display: flex;
87+
align-items: center;
88+
gap: var(--padding-8px);
89+
overflow: hidden;
11790

118-
&__actions {
119-
display: none;
120-
}
91+
&__label {
92+
flex: 1;
93+
text-overflow: ellipsis;
94+
overflow: hidden;
95+
white-space: nowrap;
96+
97+
> span:last-child {
98+
opacity: 0.7;
99+
margin-left: 0.5em;
100+
font-size: 0.9em;
101+
}
102+
103+
&--new {
104+
color: var(--vscode-gitDecoration-untrackedResourceForeground);
105+
}
106+
107+
&--deleted {
108+
text-decoration: line-through;
109+
color: var(--vscode-gitDecoration-deletedResourceForeground);
110+
}
111+
}
112+
}
121113

122-
&__line-numbers {
123-
display: flex;
124-
gap: 0.3em;
114+
&__right {
115+
display: flex;
116+
align-items: center;
117+
gap: var(--padding-8px);
118+
}
125119

126-
&__added {
127-
color: var(--vscode-gitDecoration-addedResourceForeground);
120+
&__actions {
121+
display: none;
128122
}
129-
&__removed {
130-
color: var(--vscode-gitDecoration-deletedResourceForeground);
123+
124+
&__line-numbers {
125+
display: flex;
126+
gap: 0.3em;
127+
128+
&__added {
129+
color: var(--vscode-gitDecoration-addedResourceForeground);
130+
}
131+
&__removed {
132+
color: var(--vscode-gitDecoration-deletedResourceForeground);
133+
}
131134
}
132135
}
133136
}

‎packages/ui/src/components/editor/panel/ResponsePreview/ResponsePreview.tsx‎

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -70,9 +70,10 @@ export const ResponsePreview: FC<Props> = (props) => {
7070
: ''
7171
return (
7272
<div
73-
key={`${file.workspace_name ?? ''}:${file.file_path}`}
74-
className={cn(styles.item, {
75-
[styles['item--selected']]: index == last_clicked_file_index
73+
key={index}
74+
className={cn(styles.list__file, {
75+
[styles['list__file--selected']]:
76+
index == last_clicked_file_index
7677
})}
7778
onClick={() => {
7879
set_last_clicked_file_index(index)
@@ -88,7 +89,7 @@ export const ResponsePreview: FC<Props> = (props) => {
8889
: ''
8990
}`}
9091
>
91-
<div className={styles['item__left']}>
92+
<div className={styles['list__file__left']}>
9293
{files_in_preview.length > 1 && (
9394
<Checkbox
9495
checked={file.is_checked}
@@ -102,9 +103,10 @@ export const ResponsePreview: FC<Props> = (props) => {
102103
/>
103104
)}
104105
<div
105-
className={cn(styles['item__left__label'], {
106-
[styles['item__left__label--new']]: file.is_new,
107-
[styles['item__left__label--deleted']]: file.is_deleted
106+
className={cn(styles['list__file__left__label'], {
107+
[styles['list__file__left__label--new']]: file.is_new,
108+
[styles['list__file__left__label--deleted']]:
109+
file.is_deleted
108110
})}
109111
>
110112
<span>
@@ -121,8 +123,8 @@ export const ResponsePreview: FC<Props> = (props) => {
121123
</span>
122124
</div>
123125
</div>
124-
<div className={styles.item__right}>
125-
<div className={styles['item__actions']}>
126+
<div className={styles.list__file__right}>
127+
<div className={styles['list__file__actions']}>
126128
{(file.is_fallback || file.is_replaced) && (
127129
<IconButton
128130
codicon_icon="sparkle"
@@ -168,11 +170,15 @@ export const ResponsePreview: FC<Props> = (props) => {
168170
/>
169171
</div>
170172
{!file.is_deleted && (
171-
<div className={styles['item__line-numbers']}>
172-
<span className={styles['item__line-numbers__added']}>
173+
<div className={styles['list__file__line-numbers']}>
174+
<span
175+
className={styles['list__file__line-numbers__added']}
176+
>
173177
+{file.lines_added}
174178
</span>
175-
<span className={styles['item__line-numbers__removed']}>
179+
<span
180+
className={styles['list__file__line-numbers__removed']}
181+
>
176182
-{file.lines_removed}
177183
</span>
178184
</div>
@@ -182,7 +188,7 @@ export const ResponsePreview: FC<Props> = (props) => {
182188
)
183189
} else {
184190
return (
185-
<div key={`text-${index}`} className={styles.textItem}>
191+
<div key={index} className={styles.list__text}>
186192
{item.content}
187193
</div>
188194
)

‎packages/vscode/src/commands/apply-chat-response-command/utils/preview/preview.ts‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -65,9 +65,11 @@ export const preview = async (params: {
6565
if (clipboard_items.length > 0) {
6666
const prepared_files_map = new Map<string, PreparedFile>()
6767
for (const pf of prepared_files) {
68-
const key = `${pf.reviewable_file.workspace_name || ''}:${
69-
pf.reviewable_file.file_path
70-
}`
68+
const key = is_single_root_folder_workspace
69+
? pf.reviewable_file.file_path
70+
: `${pf.reviewable_file.workspace_name || ''}:${
71+
pf.reviewable_file.file_path
72+
}`
7173
prepared_files_map.set(key, pf)
7274
}
7375

@@ -79,14 +81,18 @@ export const preview = async (params: {
7981
item.type == 'diff' ||
8082
item.type == 'completion'
8183
) {
82-
const key = `${item.workspace_name || ''}:${item.file_path}`
84+
const key = is_single_root_folder_workspace
85+
? item.file_path
86+
: `${item.workspace_name || ''}:${item.file_path}`
8387
const prepared_file = prepared_files_map.get(key)
8488
if (prepared_file) {
8589
items_for_preview.push(prepared_file.reviewable_file)
8690
prepared_files_map.delete(key)
8791
}
8892
if (item.type == 'diff' && item.new_file_path) {
89-
const new_key = `${item.workspace_name || ''}:${item.new_file_path}`
93+
const new_key = is_single_root_folder_workspace
94+
? item.new_file_path
95+
: `${item.workspace_name || ''}:${item.new_file_path}`
9096
const new_prepared_file = prepared_files_map.get(new_key)
9197
if (new_prepared_file) {
9298
items_for_preview.push(new_prepared_file.reviewable_file)

0 commit comments

Comments
 (0)