Skip to content

Commit 52b83b7

Browse files
mrubensmrubens
committed
Simplify the UX
1 parent ba61f83 commit 52b83b7

File tree

3 files changed

+56
-95
lines changed

3 files changed

+56
-95
lines changed

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

Lines changed: 9 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { memo } from "react"
22

33
import { vscode } from "@/utils/vscode"
44
import { formatLargeNumber, formatDate } from "@/utils/format"
5-
import { Button, Checkbox } from "@/components/ui"
5+
import { Button } from "@/components/ui"
66

77
import { useAppTranslation } from "../../i18n/TranslationContext"
88
import { CopyButton } from "./CopyButton"
@@ -12,38 +12,17 @@ type HistoryPreviewProps = {
1212
showHistoryView: () => void
1313
}
1414
const HistoryPreview = ({ showHistoryView }: HistoryPreviewProps) => {
15-
const { tasks, showAllWorkspaces, setShowAllWorkspaces } = useTaskSearch()
15+
const { tasks } = useTaskSearch()
1616
const { t } = useAppTranslation()
1717

1818
return (
1919
<div className="flex flex-col gap-3 shrink-0 mx-5">
2020
<div className="flex items-center justify-between text-vscode-descriptionForeground">
21-
<div className="flex items-center gap-4">
22-
<div className="flex items-center gap-1">
23-
<span className="codicon codicon-comment-discussion scale-90 mr-1" />
24-
<span className="font-medium text-xs uppercase">{t("history:recentTasks")}</span>
25-
</div>
26-
<div className="flex items-center gap-1 text-xs opacity-80 hover:opacity-100">
27-
<div className="flex items-center space-x-2">
28-
<Checkbox
29-
id="show-all-workspaces"
30-
checked={showAllWorkspaces}
31-
onCheckedChange={(checked) => setShowAllWorkspaces(checked === true)}
32-
variant="description"
33-
/>
34-
<label
35-
htmlFor="show-all-workspaces"
36-
className="text-vscode-descriptionForeground select-none cursor-pointer text-sm">
37-
{t("history:showAllWorkspaces")}
38-
</label>
39-
</div>
40-
</div>
21+
<div className="flex items-center gap-1">
22+
<span className="codicon codicon-comment-discussion scale-90 mr-1" />
23+
<span className="font-medium text-xs uppercase">{t("history:recentTasks")}</span>
4124
</div>
42-
<Button
43-
variant="ghost"
44-
size="sm"
45-
onClick={() => showHistoryView()}
46-
className="uppercase text-xs hover:bg-vscode-toolbar-hoverBackground/50 transition-colors">
25+
<Button variant="ghost" size="sm" onClick={() => showHistoryView()} className="uppercase">
4726
{t("history:viewAll")}
4827
</Button>
4928
</div>
@@ -54,19 +33,9 @@ const HistoryPreview = ({ showHistoryView }: HistoryPreviewProps) => {
5433
onClick={() => vscode.postMessage({ type: "showTaskWithId", text: item.id })}>
5534
<div className="flex flex-col gap-2 p-3 pt-1">
5635
<div className="flex justify-between items-center">
57-
<div className="flex items-center gap-4">
58-
<span className="text-xs font-medium text-vscode-descriptionForeground uppercase">
59-
{formatDate(item.ts)}
60-
</span>
61-
{item.workspace && (
62-
<span className="text-xs text-vscode-descriptionForeground flex items-center gap-1">
63-
<span className="codicon codicon-folder" />
64-
<span className="truncate max-w-[300px]">
65-
{item.workspace.split("/").slice(-2).join("/") || item.workspace}
66-
</span>
67-
</span>
68-
)}
69-
</div>
36+
<span className="text-xs font-medium text-vscode-descriptionForeground uppercase">
37+
{formatDate(item.ts)}
38+
</span>
7039
<CopyButton itemTask={item.task} />
7140
</div>
7241
<div

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

Lines changed: 32 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -239,42 +239,33 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
239239

240240
<div className="flex-1">
241241
<div className="flex justify-between items-center">
242-
<div className="flex items-center gap-4">
243-
<span className="text-vscode-descriptionForeground font-medium text-sm uppercase">
244-
{formatDate(item.ts)}
245-
</span>
246-
{item.workspace && (
247-
<span className="text-xs text-vscode-descriptionForeground flex items-center gap-1">
248-
<span className="codicon codicon-folder" />
249-
<span
250-
className="truncate max-w-[300px]"
251-
dangerouslySetInnerHTML={{ __html: item.workspace }}
252-
/>
253-
</span>
242+
<span className="text-vscode-descriptionForeground font-medium text-sm uppercase">
243+
{formatDate(item.ts)}
244+
</span>
245+
<div className="flex flex-row">
246+
{!isSelectionMode && (
247+
<Button
248+
variant="ghost"
249+
size="sm"
250+
title={t("history:deleteTaskTitle")}
251+
data-testid="delete-task-button"
252+
onClick={(e) => {
253+
e.stopPropagation()
254+
255+
if (e.shiftKey) {
256+
vscode.postMessage({
257+
type: "deleteTaskWithId",
258+
text: item.id,
259+
})
260+
} else {
261+
setDeleteTaskId(item.id)
262+
}
263+
}}>
264+
<span className="codicon codicon-trash" />
265+
{item.size && prettyBytes(item.size)}
266+
</Button>
254267
)}
255268
</div>
256-
{!isSelectionMode && (
257-
<Button
258-
variant="ghost"
259-
size="sm"
260-
title={t("history:deleteTaskTitle")}
261-
data-testid="delete-task-button"
262-
onClick={(e) => {
263-
e.stopPropagation()
264-
265-
if (e.shiftKey) {
266-
vscode.postMessage({
267-
type: "deleteTaskWithId",
268-
text: item.id,
269-
})
270-
} else {
271-
setDeleteTaskId(item.id)
272-
}
273-
}}>
274-
<span className="codicon codicon-trash" />
275-
{item.size && prettyBytes(item.size)}
276-
</Button>
277-
)}
278269
</div>
279270
<div
280271
style={{
@@ -441,6 +432,13 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
441432
)}
442433
</div>
443434
)}
435+
436+
{showAllWorkspaces && item.workspace && (
437+
<div className="flex flex-row gap-1 text-vscode-descriptionForeground text-xs">
438+
<span className="codicon codicon-folder scale-80" />
439+
<span>{item.workspace}</span>
440+
</div>
441+
)}
444442
</div>
445443
</div>
446444
</div>

‎webview-ui/src/components/history/useTaskSearch.ts‎

Lines changed: 15 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -33,34 +33,28 @@ export const useTaskSearch = () => {
3333

3434
const fzf = useMemo(() => {
3535
return new Fzf(presentableTasks, {
36-
selector: (item) => `${item.task} ${item.workspace ?? ""}`,
36+
selector: (item) => item.task,
3737
})
3838
}, [presentableTasks])
39-
39+
4040
const tasks = useMemo(() => {
4141
let results = presentableTasks
4242

4343
if (searchQuery) {
4444
const searchResults = fzf.find(searchQuery)
45-
results = searchResults
46-
.map((result) => {
47-
const positions = Array.from(result.positions)
48-
const taskEndIndex = result.item.task.length
45+
results = searchResults.map((result) => {
46+
const positions = Array.from(result.positions)
47+
const taskEndIndex = result.item.task.length
4948

50-
return {
51-
...result.item,
52-
task: highlightFzfMatch(
53-
result.item.task,
54-
positions.filter((p) => p < taskEndIndex),
55-
),
56-
workspace: result.item.workspace
57-
? highlightFzfMatch(
58-
result.item.workspace,
59-
positions.filter((p) => p > taskEndIndex).map((p) => p - taskEndIndex - 1),
60-
)
61-
: undefined,
62-
}
63-
})
49+
return {
50+
...result.item,
51+
task: highlightFzfMatch(
52+
result.item.task,
53+
positions.filter((p) => p < taskEndIndex),
54+
),
55+
workspace: result.item.workspace,
56+
}
57+
})
6458
}
6559

6660
// Then sort the results
@@ -82,7 +76,7 @@ export const useTaskSearch = () => {
8276
return (b.ts || 0) - (a.ts || 0)
8377
}
8478
})
85-
}, [presentableTasks, searchQuery, fzf, sortOption, showAllWorkspaces, cwd])
79+
}, [presentableTasks, searchQuery, fzf, sortOption])
8680

8781
return {
8882
tasks,

0 commit comments

Comments
 (0)