Skip to content

Commit 3e1e3eb

Browse files
c-julinclaude
andcommitted
style(frontend): apply biome lint fixes [UX-1330]
Co-Authored-By: Claude <noreply@anthropic.com>
1 parent 4348808 commit 3e1e3eb

7 files changed

Lines changed: 50 additions & 54 deletions

File tree

frontend/src/components/debug-helper/debug-dialog.tsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -374,9 +374,7 @@ function StorageEntryRow({ storageKey, value }: { storageKey: string; value: str
374374
</Badge>
375375
</div>
376376
{!expanded && (
377-
<div className="min-w-0 truncate font-mono text-xs text-muted-foreground">
378-
{formatted.split('\n')[0]}
379-
</div>
377+
<div className="min-w-0 truncate font-mono text-muted-foreground text-xs">{formatted.split('\n')[0]}</div>
380378
)}
381379
<CollapsibleContent>
382380
<SimpleCodeBlock
@@ -632,7 +630,7 @@ function FeatureFlagsTab() {
632630
</Badge>
633631
)}
634632
</div>
635-
<Text className="text-xs text-muted-foreground">
633+
<Text className="text-muted-foreground text-xs">
636634
default: <InlineCode>{String(defaultValue)}</InlineCode> · effective:{' '}
637635
<InlineCode>{String(effectiveValue)}</InlineCode>
638636
</Text>

frontend/src/components/pages/sql/catalog-tree.tsx

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ function ColumnList({ catalogName, tableName }: ColumnListProps) {
125125
if (isLoading) {
126126
return (
127127
<div className="mb-[2px] ml-[26px] border-border-subtle border-l pl-[8px]">
128-
<div className="flex items-center gap-[7px] px-[16px] py-[6px] text-xs text-muted-foreground">
128+
<div className="flex items-center gap-[7px] px-[16px] py-[6px] text-muted-foreground text-xs">
129129
<Spinner />
130130
<span>Loading columns…</span>
131131
</div>
@@ -143,7 +143,7 @@ function ColumnList({ catalogName, tableName }: ColumnListProps) {
143143
if (columns.length === 0) {
144144
return (
145145
<div className="mb-[2px] ml-[26px] border-border-subtle border-l pl-[8px]">
146-
<div className="px-[16px] py-[6px] text-xs text-disabled">No columns</div>
146+
<div className="px-[16px] py-[6px] text-disabled text-xs">No columns</div>
147147
</div>
148148
);
149149
}
@@ -153,7 +153,7 @@ function ColumnList({ catalogName, tableName }: ColumnListProps) {
153153
{columns.map((col) => {
154154
const KindIcon = COL_KIND_ICON[col.kind];
155155
return (
156-
<div className="flex items-center gap-[7px] px-[8px] py-[3px] text-xs text-foreground" key={col.name}>
156+
<div className="flex items-center gap-[7px] px-[8px] py-[3px] text-foreground text-xs" key={col.name}>
157157
<KindIcon className="flex-shrink-0 text-muted-foreground" size={11} />
158158
<span className="flex-1 overflow-hidden text-ellipsis whitespace-nowrap font-mono">{col.name}</span>
159159
<span className="font-mono text-caption-sm text-muted-foreground tracking-wide">{col.short}</span>
@@ -301,12 +301,12 @@ function NamespaceNode({
301301
<NsChevron className="flex-shrink-0 text-disabled" size={14} />
302302
<GitBranch className="text-muted-foreground" size={13} />
303303
<span className={LABEL}>{namespace.name}</span>
304-
<span className="rounded-full bg-muted px-[7px] py-[1px] text-xs text-muted-foreground">{countLabel}</span>
304+
<span className="rounded-full bg-muted px-[7px] py-[1px] text-muted-foreground text-xs">{countLabel}</span>
305305
</button>
306306
{isOpen && (
307307
<div className="ml-[10px]">
308308
{isLoading && allTables.length === 0 && (
309-
<div className="flex items-center gap-[7px] px-[16px] py-[6px] text-xs text-muted-foreground">
309+
<div className="flex items-center gap-[7px] px-[16px] py-[6px] text-muted-foreground text-xs">
310310
<Spinner />
311311
<span>Loading tables…</span>
312312
</div>
@@ -323,11 +323,11 @@ function NamespaceNode({
323323
/>
324324
))}
325325
{!isLoading && matched.length === 0 && (
326-
<div className="px-[16px] py-[6px] text-xs text-disabled">No tables</div>
326+
<div className="px-[16px] py-[6px] text-disabled text-xs">No tables</div>
327327
)}
328328
{paginate && remaining > 0 && (
329329
<button
330-
className="mt-[2px] flex w-full cursor-pointer items-center gap-[7px] rounded border-0 bg-transparent px-[8px] py-[7px] text-left font-sans font-medium text-xs text-action-primary hover:bg-accent"
330+
className="mt-[2px] flex w-full cursor-pointer items-center gap-[7px] rounded border-0 bg-transparent px-[8px] py-[7px] text-left font-medium font-sans text-action-primary text-xs hover:bg-accent"
331331
onClick={onLoadMore}
332332
title="Load more tables"
333333
type="button"
@@ -338,7 +338,7 @@ function NamespaceNode({
338338
)}
339339
{showAddTopic && (
340340
<button
341-
className="flex w-full cursor-pointer items-center gap-[6px] rounded border-0 bg-transparent px-[8px] py-[6px] text-left font-sans font-medium text-sm text-action-primary hover:bg-accent"
341+
className="flex w-full cursor-pointer items-center gap-[6px] rounded border-0 bg-transparent px-[8px] py-[6px] text-left font-medium font-sans text-action-primary text-sm hover:bg-accent"
342342
onClick={onAddTable}
343343
title="Create a SQL table from a Redpanda topic"
344344
type="button"
@@ -462,7 +462,7 @@ export function CatalogTree({ catalogs, role, isLoading, activeTableId, onQueryT
462462
return (
463463
<div className="flex h-full min-h-0 flex-col">
464464
<div className="flex items-center justify-between px-[14px] pt-[14px] pb-[8px]">
465-
<span className="font-semibold text-xs text-muted-foreground uppercase tracking-wider">Catalogs</span>
465+
<span className="font-semibold text-muted-foreground text-xs uppercase tracking-wider">Catalogs</span>
466466
{role === 'admin' && (
467467
<span className="text-caption-sm text-disabled uppercase tracking-wider">Redpanda only</span>
468468
)}
@@ -481,13 +481,13 @@ export function CatalogTree({ catalogs, role, isLoading, activeTableId, onQueryT
481481

482482
<div className="flex-1 overflow-y-auto px-[8px] pb-[8px]">
483483
{isLoading && catalogs.length === 0 && (
484-
<div className="flex items-center gap-[7px] px-[16px] py-[6px] text-xs text-muted-foreground">
484+
<div className="flex items-center gap-[7px] px-[16px] py-[6px] text-muted-foreground text-xs">
485485
<Spinner />
486486
<span>Loading catalogs…</span>
487487
</div>
488488
)}
489489
{!isLoading && catalogs.length === 0 && (
490-
<div className="px-[16px] py-[6px] text-xs text-disabled">No catalogs</div>
490+
<div className="px-[16px] py-[6px] text-disabled text-xs">No catalogs</div>
491491
)}
492492
{catalogs.map((catalog) => (
493493
<CatalogNode

frontend/src/components/pages/sql/sql-editor.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -378,7 +378,7 @@ export const SqlEditor = forwardRef<SqlEditorHandle, SqlEditorProps>(function Sq
378378
{tabs.map((t) => (
379379
<div
380380
className={cn(
381-
'relative flex items-center gap-1 whitespace-nowrap border-border-subtle border-r pr-[10px] pl-[14px] text-xs text-muted-foreground',
381+
'relative flex items-center gap-1 whitespace-nowrap border-border-subtle border-r pr-[10px] pl-[14px] text-muted-foreground text-xs',
382382
'hover:bg-muted hover:text-strong [&_svg]:text-muted-foreground',
383383
'data-[active]:bg-background data-[active]:font-semibold data-[active]:text-strong',
384384
"data-[active]:after:absolute data-[active]:after:inset-x-0 data-[active]:after:-bottom-px data-[active]:after:h-0.5 data-[active]:after:bg-action-primary data-[active]:after:content-['']"
@@ -432,15 +432,15 @@ export const SqlEditor = forwardRef<SqlEditorHandle, SqlEditorProps>(function Sq
432432
type="button"
433433
/>
434434
<div className="absolute top-[calc(100%+6px)] right-0 z-[31] max-h-[360px] w-[360px] overflow-y-auto rounded-md border border-border bg-popover p-1 shadow-lg">
435-
<div className="px-2 py-1.5 font-semibold text-xs text-muted-foreground uppercase tracking-wider">
435+
<div className="px-2 py-1.5 font-semibold text-muted-foreground text-xs uppercase tracking-wider">
436436
Recent queries · this browser
437437
</div>
438438
{history.length === 0 ? (
439-
<div className="p-2.5 text-sm text-muted-foreground">No queries yet</div>
439+
<div className="p-2.5 text-muted-foreground text-sm">No queries yet</div>
440440
) : null}
441441
{history.map((h, i) => (
442442
<button
443-
className="flex w-full cursor-pointer items-center gap-2 rounded border-0 bg-transparent px-2 py-1.5 text-left text-xs text-strong hover:bg-accent-subtle [&_svg]:shrink-0 [&_svg]:text-muted-foreground"
443+
className="flex w-full cursor-pointer items-center gap-2 rounded border-0 bg-transparent px-2 py-1.5 text-left text-strong text-xs hover:bg-accent-subtle [&_svg]:shrink-0 [&_svg]:text-muted-foreground"
444444
key={`${h.at}-${i}`}
445445
onClick={() => {
446446
updateSql(h.sql);
@@ -478,10 +478,10 @@ export const SqlEditor = forwardRef<SqlEditorHandle, SqlEditorProps>(function Sq
478478
>
479479
<Play size={14} /> Run
480480
<span className="ml-0.5 inline-flex gap-0.5">
481-
<span className="inline-flex min-w-[18px] items-center justify-center rounded-sm bg-white/[0.18] px-1 py-px font-mono font-semibold text-xs text-white leading-none">
481+
<span className="inline-flex min-w-[18px] items-center justify-center rounded-sm bg-white/[0.18] px-1 py-px font-mono font-semibold text-white text-xs leading-none">
482482
483483
</span>
484-
<span className="inline-flex min-w-[18px] items-center justify-center rounded-sm bg-white/[0.18] px-1 py-px font-mono font-semibold text-xs text-white leading-none">
484+
<span className="inline-flex min-w-[18px] items-center justify-center rounded-sm bg-white/[0.18] px-1 py-px font-mono font-semibold text-white text-xs leading-none">
485485
486486
</span>
487487
</span>

frontend/src/components/pages/sql/sql-results.tsx

Lines changed: 15 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -81,12 +81,12 @@ function TypeIcon({ kind, size = 11 }: { kind: ColumnKind; size?: number }) {
8181
function BridgeBar({ bridge }: { bridge: BridgeInfo }) {
8282
return (
8383
<>
84-
<span className="inline-flex items-center gap-1.5 whitespace-nowrap rounded-full bg-accent px-2.5 py-[3px] font-semibold text-xs text-accent-foreground [&_svg]:text-current">
84+
<span className="inline-flex items-center gap-1.5 whitespace-nowrap rounded-full bg-accent px-2.5 py-[3px] font-semibold text-accent-foreground text-xs [&_svg]:text-current">
8585
<GitMerge size={15} strokeWidth={1.85} /> Bridge query
8686
</span>
8787
{bridge.totalLag > 0 && (
8888
<span
89-
className={cn(RES_STAT, 'whitespace-nowrap font-mono text-xs text-muted-foreground')}
89+
className={cn(RES_STAT, 'whitespace-nowrap font-mono text-muted-foreground text-xs')}
9090
title="Iceberg lag at query time"
9191
>
9292
<Waves size={13} /> Iceberg {offStr(bridge.totalLag)} behind{' '}
@@ -135,14 +135,12 @@ function BridgeTimeline({ bridge }: { bridge: BridgeInfo }) {
135135
</span>
136136
</div>
137137
{/* .res-bridge-tl-live: live-tail segment with the 45deg hatch overlay. */}
138-
<div
139-
className="relative w-[26%] overflow-hidden rounded-r-md border border-success border-l-0 bg-background-success-subtle after:absolute after:inset-0 after:content-[''] after:[background:repeating-linear-gradient(45deg,transparent,transparent_5px,var(--color-success-subtle)_5px,var(--color-success-subtle)_10px)]"
140-
/>
138+
<div className="relative w-[26%] overflow-hidden rounded-r-md border border-success border-l-0 bg-background-success-subtle after:absolute after:inset-0 after:content-[''] after:[background:repeating-linear-gradient(45deg,transparent,transparent_5px,var(--color-success-subtle)_5px,var(--color-success-subtle)_10px)]" />
141139
</>
142140
)}
143141
</div>
144142
{!caught && (
145-
<div className="mt-6 text-xs text-muted-foreground leading-snug">
143+
<div className="mt-6 text-muted-foreground text-xs leading-snug">
146144
Live tail covers <strong>{offStr(bridge.totalLag)}</strong> not yet in Iceberg at query time —{' '}
147145
<span className="whitespace-nowrap font-semibold text-success before:mr-1 before:inline-block before:h-[7px] before:w-[7px] before:rounded-full before:bg-success before:align-baseline before:content-['']">
148146
{fmtNum(bridge.translationLag)} pending translation
@@ -298,7 +296,7 @@ function SuccessGrid({ run }: { run: QueryRunSuccess }) {
298296
<thead>
299297
<tr>
300298
{/* .res-rownum (th): sticky row-number header, above body rownum cells. */}
301-
<th className="sticky top-0 left-0 z-[3] w-[1%] whitespace-nowrap border-border border-b bg-muted px-4 py-2 text-right align-bottom font-mono text-xs text-disabled [user-select:none]">
299+
<th className="sticky top-0 left-0 z-[3] w-[1%] whitespace-nowrap border-border border-b bg-muted px-4 py-2 text-right align-bottom font-mono text-disabled text-xs [user-select:none]">
302300
#
303301
</th>
304302
{cols.map((c) => {
@@ -320,7 +318,7 @@ function SuccessGrid({ run }: { run: QueryRunSuccess }) {
320318
type="button"
321319
>
322320
<span className={cn('flex items-center gap-1.5', alignRight && 'flex-row-reverse')}>
323-
<span className="font-mono font-semibold text-xs text-strong">{c.name}</span>
321+
<span className="font-mono font-semibold text-strong text-xs">{c.name}</span>
324322
<span
325323
className={cn(
326324
'inline-flex h-[13px] w-[13px]',
@@ -359,23 +357,21 @@ function SuccessGrid({ run }: { run: QueryRunSuccess }) {
359357
>
360358
{/* .res-rownum (td): sticky row-number column; inherits the row
361359
surface so the stripe carries across and occludes scroll. */}
362-
<td className="sticky left-0 w-[1%] whitespace-nowrap border-border-subtle border-b bg-inherit px-4 py-[7px] text-right font-mono text-xs text-disabled [user-select:none]">
360+
<td className="sticky left-0 w-[1%] whitespace-nowrap border-border-subtle border-b bg-inherit px-4 py-[7px] text-right font-mono text-disabled text-xs [user-select:none]">
363361
{i + 1}
364362
</td>
365363
{cols.map((c) => {
366364
const v = r[c.name];
367365
return (
368366
<td
369367
className={cn(
370-
'whitespace-nowrap border-border-subtle border-b px-4 py-[7px] font-mono text-xs text-foreground',
368+
'whitespace-nowrap border-border-subtle border-b px-4 py-[7px] font-mono text-foreground text-xs',
371369
c.kind === 'num' && 'text-right'
372370
)}
373371
key={c.name}
374372
>
375373
{c.kind === 'bool' && typeof v === 'boolean' ? (
376-
<span className={cn('font-semibold', v ? 'text-success' : 'text-warning')}>
377-
{String(v)}
378-
</span>
374+
<span className={cn('font-semibold', v ? 'text-success' : 'text-warning')}>{String(v)}</span>
379375
) : v === null || v === undefined ? (
380376
<span className="text-disabled italic">NULL</span>
381377
) : (
@@ -391,7 +387,7 @@ function SuccessGrid({ run }: { run: QueryRunSuccess }) {
391387
</div>
392388

393389
<div className="flex flex-shrink-0 items-center justify-between border-border border-t bg-card px-4 py-2">
394-
<span className="text-xs text-muted-foreground [font-variant-numeric:tabular-nums]">
390+
<span className="text-muted-foreground text-xs [font-variant-numeric:tabular-nums]">
395391
Showing {fmtNum(visible.length)} of {fmtNum(run.totalRows)} rows
396392
</span>
397393
{shown < sorted.length && (
@@ -413,13 +409,13 @@ export function SqlResults({ run, role, onAddTable }: SqlResultsProps) {
413409
<Terminal size={20} />
414410
</div>
415411
<div className="mb-1.5 font-semibold text-sm text-strong">Run a query to see results</div>
416-
<div className="mx-auto max-w-[420px] text-sm text-muted-foreground leading-normal">
412+
<div className="mx-auto max-w-[420px] text-muted-foreground text-sm leading-normal">
417413
Write a <code className="rounded bg-muted px-[5px] py-px font-mono">SELECT</code> against a table in the
418414
catalog, then press{' '}
419-
<span className="mx-0.5 inline-flex h-[18px] min-w-[18px] items-center justify-center rounded border border-border bg-card px-1 font-mono text-xs text-strong">
415+
<span className="mx-0.5 inline-flex h-[18px] min-w-[18px] items-center justify-center rounded border border-border bg-card px-1 font-mono text-strong text-xs">
420416
421417
</span>
422-
<span className="mx-0.5 inline-flex h-[18px] min-w-[18px] items-center justify-center rounded border border-border bg-card px-1 font-mono text-xs text-strong">
418+
<span className="mx-0.5 inline-flex h-[18px] min-w-[18px] items-center justify-center rounded border border-border bg-card px-1 font-mono text-strong text-xs">
423419
424420
</span>{' '}
425421
or hit Run.
@@ -453,11 +449,11 @@ export function SqlResults({ run, role, onAddTable }: SqlResultsProps) {
453449
<CircleX size={18} />
454450
<div>
455451
<div className="font-semibold text-sm text-strong">{run.title}</div>
456-
<div className="mt-0.5 text-xs text-muted-foreground leading-normal">{run.message}</div>
452+
<div className="mt-0.5 text-muted-foreground text-xs leading-normal">{run.message}</div>
457453
</div>
458454
</div>
459455
{run.hint && (
460-
<div className="flex items-center gap-3 text-sm text-muted-foreground">
456+
<div className="flex items-center gap-3 text-muted-foreground text-sm">
461457
{run.hint}
462458
{run.hintAction && role === 'admin' && (
463459
<Button onClick={onAddTable} size="sm" variant="primary">

0 commit comments

Comments
 (0)