Skip to content

Commit e9848cf

Browse files
samejrsamejr
committed
Adds new Table variant for the logs style
1 parent 2f321b1 commit e9848cf

2 files changed

Lines changed: 36 additions & 22 deletions

File tree

‎apps/webapp/app/components/logs/LogsTable.tsx‎

Lines changed: 6 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -89,10 +89,7 @@ function getLevelBorderColor(level: LogEntry["level"]): string {
8989
}
9090

9191
// Case-insensitive text highlighting
92-
function highlightText(
93-
text: string,
94-
searchTerm: string | undefined
95-
): ReactNode {
92+
function highlightText(text: string, searchTerm: string | undefined): ReactNode {
9693
if (!searchTerm || searchTerm.trim() === "") {
9794
return text;
9895
}
@@ -161,7 +158,7 @@ export function LogsTable({
161158

162159
return (
163160
<div className="relative h-full overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
164-
<Table variant={variant}>
161+
<Table variant="compact/mono">
165162
<TableHeader>
166163
<TableRow>
167164
<TableHeaderCell>Time</TableHeaderCell>
@@ -197,11 +194,9 @@ export function LogsTable({
197194
<TableRow
198195
key={log.id}
199196
className={cn(
200-
"cursor-pointer transition-colors border-l-2",
197+
"cursor-pointer border-l-2 transition-colors",
201198
getLevelBorderColor(log.level),
202-
isSelected
203-
? "bg-charcoal-750"
204-
: "hover:bg-charcoal-850"
199+
isSelected ? "bg-charcoal-750" : "hover:bg-charcoal-850"
205200
)}
206201
isSelected={isSelected}
207202
>
@@ -255,10 +250,7 @@ export function LogsTable({
255250
: "–"}
256251
</TableCell>
257252
<TableCell className="max-w-0 truncate" onClick={handleRowClick} hasAction>
258-
<span
259-
className="block truncate font-mono text-xs"
260-
title={log.message}
261-
>
253+
<span className="block truncate font-mono text-xs" title={log.message}>
262254
{highlightText(log.message, searchTerm)}
263255
</span>
264256
</TableCell>
@@ -270,10 +262,7 @@ export function LogsTable({
270262
</Table>
271263
{/* Infinite scroll trigger */}
272264
{hasMore && logs.length > 0 && (
273-
<div
274-
ref={loadMoreRef}
275-
className="flex items-center justify-center py-4"
276-
>
265+
<div ref={loadMoreRef} className="flex items-center justify-center py-4">
277266
{isLoadingMore && (
278267
<div className="flex items-center gap-2">
279268
<Spinner /> <span className="text-text-dimmed">Loading more…</span>

‎apps/webapp/app/components/primitives/Table.tsx‎

Lines changed: 30 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,10 @@ import { InfoIconTooltip } from "./Tooltip";
88
const variants = {
99
bright: {
1010
header: "bg-background-bright",
11+
headerCell: "px-3 py-2.5 pb-3 text-sm",
1112
cell: "group-hover/table-row:bg-charcoal-750 group-has-[[tabindex='0']:focus]/table-row:bg-charcoal-750",
13+
cellSize: "px-3 py-3",
14+
cellText: "text-xs",
1215
stickyCell: "bg-background-bright group-hover/table-row:bg-charcoal-750",
1316
menuButton:
1417
"bg-background-bright group-hover/table-row:bg-charcoal-750 group-hover/table-row:ring-charcoal-600/70 group-has-[[tabindex='0']:focus]/table-row:bg-charcoal-750",
@@ -17,7 +20,22 @@ const variants = {
1720
},
1821
dimmed: {
1922
header: "bg-background-dimmed",
23+
headerCell: "px-3 py-2.5 pb-3 text-sm",
2024
cell: "group-hover/table-row:bg-charcoal-800 group-has-[[tabindex='0']:focus]/table-row:bg-background-bright",
25+
cellSize: "px-3 py-3",
26+
cellText: "text-xs",
27+
stickyCell: "group-hover/table-row:bg-charcoal-800",
28+
menuButton:
29+
"bg-background-dimmed group-hover/table-row:bg-charcoal-800 group-hover/table-row:ring-grid-bright group-has-[[tabindex='0']:focus]/table-row:bg-background-bright",
30+
menuButtonDivider: "group-hover/table-row:border-grid-bright",
31+
rowSelected: "bg-charcoal-750 group-hover/table-row:bg-charcoal-750",
32+
},
33+
"compact/mono": {
34+
header: "bg-background-dimmed",
35+
headerCell: "px-2 py-1.5 text-sm",
36+
cell: "group-hover/table-row:bg-charcoal-800 group-has-[[tabindex='0']:focus]/table-row:bg-background-bright",
37+
cellSize: "px-2 py-1.5",
38+
cellText: "text-xs font-mono",
2139
stickyCell: "group-hover/table-row:bg-charcoal-800",
2240
menuButton:
2341
"bg-background-dimmed group-hover/table-row:bg-charcoal-800 group-hover/table-row:ring-grid-bright group-has-[[tabindex='0']:focus]/table-row:bg-background-bright",
@@ -136,6 +154,7 @@ type TableHeaderCellProps = TableCellBasicProps & {
136154

137155
export const TableHeaderCell = forwardRef<HTMLTableCellElement, TableHeaderCellProps>(
138156
({ className, alignment = "left", children, colSpan, hiddenLabel = false, tooltip }, ref) => {
157+
const { variant } = useContext(TableContext);
139158
let alignmentClassName = "text-left";
140159
switch (alignment) {
141160
case "center":
@@ -151,7 +170,8 @@ export const TableHeaderCell = forwardRef<HTMLTableCellElement, TableHeaderCellP
151170
ref={ref}
152171
scope="col"
153172
className={cn(
154-
"px-3 py-2.5 pb-3 align-middle text-sm font-medium text-text-bright",
173+
"align-middle font-medium text-text-bright",
174+
variants[variant].headerCell,
155175
alignmentClassName,
156176
className
157177
)}
@@ -217,23 +237,28 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
217237
break;
218238
}
219239

240+
const { variant } = useContext(TableContext);
220241
const flexClasses = cn(
221-
"flex w-full whitespace-nowrap px-3 py-3 items-center text-xs text-text-dimmed",
242+
"flex w-full whitespace-nowrap items-center text-text-dimmed",
243+
variants[variant].cellSize,
244+
variants[variant].cellText,
222245
alignment === "left"
223246
? "justify-start text-left"
224247
: alignment === "center"
225248
? "justify-center text-center"
226249
: "justify-end text-right"
227250
);
228-
const { variant } = useContext(TableContext);
229251

230252
return (
231253
<td
232254
ref={ref}
233255
className={cn(
234-
"text-xs text-charcoal-400 has-[[tabindex='0']:focus]:before:absolute has-[[tabindex='0']:focus]:before:-top-px has-[[tabindex='0']:focus]:before:left-0 has-[[tabindex='0']:focus]:before:h-px has-[[tabindex='0']:focus]:before:w-3 has-[[tabindex='0']:focus]:before:bg-grid-dimmed has-[[tabindex='0']:focus]:after:absolute has-[[tabindex='0']:focus]:after:bottom-0 has-[[tabindex='0']:focus]:after:left-0 has-[[tabindex='0']:focus]:after:right-0 has-[[tabindex='0']:focus]:after:h-px has-[[tabindex='0']:focus]:after:bg-grid-dimmed",
256+
"text-charcoal-400 has-[[tabindex='0']:focus]:before:absolute has-[[tabindex='0']:focus]:before:-top-px has-[[tabindex='0']:focus]:before:left-0 has-[[tabindex='0']:focus]:before:h-px has-[[tabindex='0']:focus]:before:w-3 has-[[tabindex='0']:focus]:before:bg-grid-dimmed has-[[tabindex='0']:focus]:after:absolute has-[[tabindex='0']:focus]:after:bottom-0 has-[[tabindex='0']:focus]:after:left-0 has-[[tabindex='0']:focus]:after:right-0 has-[[tabindex='0']:focus]:after:h-px has-[[tabindex='0']:focus]:after:bg-grid-dimmed",
257+
variants[variant].cellText,
235258
variants[variant].cell,
236-
to || onClick || hasAction ? "cursor-pointer" : "cursor-default px-3 py-3 align-middle",
259+
to || onClick || hasAction
260+
? "cursor-pointer"
261+
: cn("cursor-default align-middle", variants[variant].cellSize),
237262
!to && !onClick && alignmentClassName,
238263
isSticky &&
239264
"[&:has(.group-hover/table-row:block)]:w-auto sticky right-0 bg-background-dimmed",

0 commit comments

Comments
 (0)