mirror of
https://github.com/RooVetGit/Roo-Code.git
synced 2026-09-10 22:41:14 +00:00
5848db66be
* Taskheader * Subtask messages * View subtask * subtasks in history items * i18n * Table * Lighter visuals * bug * fix: Align tests with implementation behavior * refactor: extract CircularProgress component from TaskHeader - Created reusable CircularProgress component for displaying percentage as a ring - Moved inline SVG calculation from TaskHeader.tsx to dedicated component - Added comprehensive tests for CircularProgress component (14 tests) - Component supports customizable size, strokeWidth, and className - Includes proper accessibility attributes (progressbar role, aria-valuenow) * chore: update StandardTooltip default delay to 600ms As mentioned in the PR description, increased the tooltip delay to 600ms for less intrusive tooltips. The delay is still configurable via the delay prop for components that need a different value. --------- Co-authored-by: Roo Code <roomote@roocode.com>
67 lines
2 KiB
TypeScript
67 lines
2 KiB
TypeScript
import React from "react"
|
|
import type { HistoryItem } from "@roo-code/types"
|
|
import { formatTimeAgo } from "@/utils/format"
|
|
import { CopyButton } from "./CopyButton"
|
|
import { ExportButton } from "./ExportButton"
|
|
import { DeleteButton } from "./DeleteButton"
|
|
import { StandardTooltip } from "../ui/standard-tooltip"
|
|
import { useAppTranslation } from "@/i18n/TranslationContext"
|
|
import { Split } from "lucide-react"
|
|
|
|
export interface TaskItemFooterProps {
|
|
item: HistoryItem
|
|
variant: "compact" | "full"
|
|
isSelectionMode?: boolean
|
|
isSubtask?: boolean
|
|
onDelete?: (taskId: string) => void
|
|
}
|
|
|
|
const TaskItemFooter: React.FC<TaskItemFooterProps> = ({
|
|
item,
|
|
variant,
|
|
isSelectionMode = false,
|
|
isSubtask = false,
|
|
onDelete,
|
|
}) => {
|
|
const { t } = useAppTranslation()
|
|
|
|
return (
|
|
<div className="text-xs text-vscode-descriptionForeground flex justify-between items-center">
|
|
<div className="flex gap-1 items-center text-vscode-descriptionForeground/60">
|
|
{/* Subtask tag */}
|
|
{isSubtask && (
|
|
<>
|
|
<Split className="size-3" />
|
|
<span>{t("history:subtaskTag")}</span>
|
|
<span>·</span>
|
|
</>
|
|
)}
|
|
{/* Datetime with time-ago format */}
|
|
<StandardTooltip content={new Date(item.ts).toLocaleString()}>
|
|
<span className="first-letter:uppercase">{formatTimeAgo(item.ts)}</span>
|
|
</StandardTooltip>
|
|
|
|
{/* Cost */}
|
|
{!!item.totalCost && (
|
|
<>
|
|
<span>·</span>
|
|
<span className="flex items-center" data-testid="cost-footer-compact">
|
|
{"$" + item.totalCost.toFixed(2)}
|
|
</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{/* Action Buttons for non-compact view */}
|
|
{!isSelectionMode && (
|
|
<div className="flex flex-row gap-0 -mx-1.5 items-center text-vscode-descriptionForeground/60 hover:text-vscode-descriptionForeground opacity-0 group-hover:opacity-100">
|
|
<CopyButton itemTask={item.task} />
|
|
{variant === "full" && <ExportButton itemId={item.id} />}
|
|
{onDelete && <DeleteButton itemId={item.id} onDelete={onDelete} />}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default TaskItemFooter
|