Skip to content

Commit cdfffb8

Browse files
celestial-vaultcelestial-vault
authored
Spruce up HistoryPreview (RooCodeInc#4101)
* spruce it up * fix start positioning and spacing * change vertical spacing
1 parent 494ce33 commit cdfffb8

File tree

1 file changed

+63
-116
lines changed

1 file changed

+63
-116
lines changed

‎webview-ui/src/components/history/HistoryPreview.tsx‎

Lines changed: 63 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -39,66 +39,19 @@ const HistoryPreview = ({ showHistoryView }: HistoryPreviewProps) => {
3939
}
4040

4141
return (
42-
<div style={{ flexShrink: 0 }}>
43-
<style>
44-
{`
45-
.history-preview-item {
46-
background-color: color-mix(in srgb, var(--vscode-toolbar-hoverBackground) 65%, transparent);
47-
border-radius: 4px;
48-
position: relative;
49-
overflow: hidden;
50-
opacity: 0.8;
51-
cursor: pointer;
52-
margin-bottom: 12px;
53-
}
54-
.history-preview-item:hover {
55-
background-color: color-mix(in srgb, var(--vscode-toolbar-hoverBackground) 100%, transparent);
56-
opacity: 1;
57-
pointer-events: auto;
58-
}
59-
.history-header {
60-
cursor: pointer;
61-
user-select: none;
62-
}
63-
.history-header:hover {
64-
opacity: 0.8;
65-
}
66-
`}
67-
</style>
68-
42+
<div className="flex-shrink-0">
6943
<div
70-
className="history-header"
71-
onClick={toggleExpanded}
72-
style={{
73-
color: "var(--vscode-descriptionForeground)",
74-
margin: "10px 20px 10px 20px",
75-
display: "flex",
76-
alignItems: "center",
77-
}}>
78-
<span
79-
className={`codicon codicon-chevron-${isExpanded ? "down" : "right"}`}
80-
style={{
81-
marginRight: "4px",
82-
transform: "scale(0.9)",
83-
}}></span>
44+
className="flex items-center gap-2 mx-5 my-2 cursor-pointer select-none text-[var(--vscode-descriptionForeground)] hover:opacity-80 transition-all duration-200 rounded-lg px-2 py-1 hover:bg-[var(--vscode-toolbar-hoverBackground)]"
45+
onClick={toggleExpanded}>
8446
<span
85-
className="codicon codicon-comment-discussion"
86-
style={{
87-
marginRight: "4px",
88-
transform: "scale(0.9)",
89-
}}></span>
90-
<span
91-
style={{
92-
fontWeight: 500,
93-
fontSize: "0.85em",
94-
textTransform: "uppercase",
95-
}}>
96-
Recent Tasks
97-
</span>
47+
className={`codicon codicon-chevron-${isExpanded ? "down" : "right"} scale-90 transition-transform duration-200`}
48+
/>
49+
<span className="codicon codicon-comment-discussion scale-90" />
50+
<span className="font-medium text-xs uppercase tracking-wide">Recent Tasks</span>
9851
</div>
9952

10053
{isExpanded && (
101-
<div style={{ padding: "0px 20px 0 20px" }}>
54+
<div className="px-5 space-y-3">
10255
{taskHistory.filter((item) => item.ts && item.task).length > 0 ? (
10356
<>
10457
{taskHistory
@@ -107,61 +60,58 @@ const HistoryPreview = ({ showHistoryView }: HistoryPreviewProps) => {
10760
.map((item) => (
10861
<div
10962
key={item.id}
110-
className="history-preview-item"
63+
className="relative rounded-xl p-3 cursor-pointer overflow-hidden transition-all duration-150 ease-out hover:scale-[1.02] hover:shadow-xl group hover:bg-[color-mix(in_srgb,var(--vscode-toolbar-hoverBackground)_50%,transparent)] hover:border-[color-mix(in_srgb,var(--vscode-panel-border)_80%,transparent)]"
64+
style={{
65+
backgroundColor:
66+
"color-mix(in srgb, var(--vscode-toolbar-hoverBackground) 30%, transparent)",
67+
border: "1px solid color-mix(in srgb, var(--vscode-panel-border) 50%, transparent)",
68+
backdropFilter: "blur(8px)",
69+
}}
11170
onClick={() => handleHistorySelect(item.id)}>
112-
<div style={{ padding: "12px" }}>
113-
<div style={{ marginBottom: "8px" }}>
114-
<span
115-
style={{
116-
color: "var(--vscode-descriptionForeground)",
117-
fontWeight: 500,
118-
fontSize: "0.85em",
119-
textTransform: "uppercase",
120-
}}>
71+
{/* Subtle gradient overlay for extra depth */}
72+
<div
73+
className="absolute inset-0 transition-all duration-150 rounded-xl opacity-0 group-hover:opacity-100"
74+
style={{
75+
background:
76+
"linear-gradient(135deg, color-mix(in srgb, var(--vscode-button-background) 5%, transparent) 0%, color-mix(in srgb, var(--vscode-focusBorder) 3%, transparent) 100%)",
77+
}}
78+
/>
79+
80+
{item.isFavorited && (
81+
<div
82+
className="absolute top-3 right-3 z-20 drop-shadow-sm"
83+
style={{ color: "var(--vscode-button-background)" }}>
84+
<span className="codicon codicon-star-full" aria-label="Favorited" />
85+
</div>
86+
)}
87+
88+
<div className="relative z-10">
89+
<div className="mb-2">
90+
<span className="text-[var(--vscode-descriptionForeground)] font-medium text-xs uppercase tracking-wider opacity-80">
12191
{formatDate(item.ts)}
12292
</span>
12393
</div>
124-
{item.isFavorited && (
125-
<div
126-
style={{
127-
position: "absolute",
128-
top: "12px",
129-
right: "12px",
130-
color: "var(--vscode-button-background)",
131-
}}>
132-
<span className="codicon codicon-star-full" aria-label="Favorited" />
133-
</div>
134-
)}
13594

13695
<div
13796
id={`history-preview-task-${item.id}`}
138-
className="history-preview-task"
139-
style={{
140-
fontSize: "var(--vscode-font-size)",
141-
color: "var(--vscode-descriptionForeground)",
142-
marginBottom: "8px",
143-
display: "-webkit-box",
144-
WebkitLineClamp: 3,
145-
WebkitBoxOrient: "vertical",
146-
overflow: "hidden",
147-
whiteSpace: "pre-wrap",
148-
wordBreak: "break-word",
149-
overflowWrap: "anywhere",
150-
}}>
97+
className="text-[var(--vscode-descriptionForeground)] mb-2 line-clamp-3 whitespace-pre-wrap break-words"
98+
style={{ fontSize: "var(--vscode-font-size)" }}>
15199
<span className="ph-no-capture">{item.task}</span>
152100
</div>
153-
<div
154-
style={{
155-
fontSize: "0.85em",
156-
color: "var(--vscode-descriptionForeground)",
157-
}}>
101+
102+
<div className="text-xs text-[var(--vscode-descriptionForeground)] opacity-75 space-x-1">
158103
<span>
159104
Tokens: ↑{formatLargeNumber(item.tokensIn || 0)} ↓
160105
{formatLargeNumber(item.tokensOut || 0)}
161106
</span>
162107
{!!item.cacheWrites && (
163108
<>
164-
{" • "}
109+
<span
110+
style={{
111+
color: "color-mix(in srgb, var(--vscode-descriptionForeground) 40%, transparent)",
112+
}}>
113+
•
114+
</span>
165115
<span>
166116
Cache: +{formatLargeNumber(item.cacheWrites || 0)} →{" "}
167117
{formatLargeNumber(item.cacheReads || 0)}
@@ -170,43 +120,40 @@ const HistoryPreview = ({ showHistoryView }: HistoryPreviewProps) => {
170120
)}
171121
{!!item.totalCost && (
172122
<>
173-
{" • "}
123+
<span
124+
style={{
125+
color: "color-mix(in srgb, var(--vscode-descriptionForeground) 40%, transparent)",
126+
}}>
127+
•
128+
</span>
174129
<span>API Cost: ${item.totalCost?.toFixed(4)}</span>
175130
</>
176131
)}
177132
</div>
178133
</div>
179134
</div>
180135
))}
181-
<div
182-
style={{
183-
display: "flex",
184-
alignItems: "center",
185-
justifyContent: "center",
186-
}}>
187-
<VSCodeButton
188-
appearance="icon"
136+
<div className="flex items-center justify-center pt-2">
137+
<button
189138
onClick={() => showHistoryView()}
139+
className="cursor-pointer text-center transition-all duration-150 hover:opacity-80 flex items-center gap-1 bg-transparent border-none outline-none focus:outline-none"
190140
style={{
191-
opacity: 0.9,
141+
color: "var(--vscode-descriptionForeground)",
142+
fontSize: "var(--vscode-font-size)",
192143
}}>
193-
<div
194-
style={{
195-
fontSize: "var(--vscode-font-size)",
196-
color: "var(--vscode-descriptionForeground)",
197-
}}>
198-
View all history
199-
</div>
200-
</VSCodeButton>
144+
<span className="codicon codicon-history scale-90"></span>
145+
<span className="font-medium">View all history</span>
146+
</button>
201147
</div>
202148
</>
203149
) : (
204150
<div
151+
className="text-center text-[var(--vscode-descriptionForeground)] py-4 rounded-xl"
205152
style={{
206-
textAlign: "center",
207-
color: "var(--vscode-descriptionForeground)",
208153
fontSize: "var(--vscode-font-size)",
209-
padding: "10px 0",
154+
backgroundColor: "color-mix(in srgb, var(--vscode-toolbar-hoverBackground) 20%, transparent)",
155+
border: "1px solid color-mix(in srgb, var(--vscode-panel-border) 30%, transparent)",
156+
backdropFilter: "blur(8px)",
210157
}}>
211158
No recent tasks
212159
</div>

0 commit comments

Comments
 (0)