monoadmin/the-other-dude
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): polish device table with Deep Space styling

Browse Source 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jason Staack
2026-03-16 17:43:31 -05:00
parent 06ac1b73b6
commit 8fadfc4d7d
1 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/components/fleet/FleetTable.tsx
View File

@@ -32,14 +32,14 @@ interface FleetTableProps {
type SortDir = 'asc' | 'desc' type SortDir = 'asc' | 'desc'
function StatusDot({ status }: { status: string }) { function StatusDot({ status }: { status: string }) {
const colors: Record<string, string> = { const styles: Record<string, string> = {
online: 'bg-online', online: 'bg-online shadow-[0_0_6px_hsl(var(--online)/0.3)]',
offline: 'bg-offline', offline: 'bg-offline shadow-[0_0_6px_hsl(var(--offline)/0.3)]',
unknown: 'bg-unknown', unknown: 'bg-unknown',
} }
return ( return (
<span <span
className={cn('inline-block w-2 h-2 rounded-full flex-shrink-0', colors[status] ?? colors.unknown)} className={cn('inline-block w-[5px] h-[5px] rounded-full flex-shrink-0', styles[status] ?? styles.unknown)}
title={status} title={status}
/> />
) )
@@ -61,7 +61,7 @@ function SortHeader({ column, label, currentSort, currentDir, onSort, className
: 'none' : 'none'
return ( return (
<th scope="col" className={cn('px-2 py-2 text-xs font-medium text-text-muted', className)} aria-sort={ariaSortValue}> <th scope="col" className={cn('px-2 py-2 text-[10px] uppercase tracking-wider font-semibold text-text-muted', className)} aria-sort={ariaSortValue}>
<button <button
className="flex items-center gap-1 hover:text-text-primary transition-colors group" className="flex items-center gap-1 hover:text-text-primary transition-colors group"
onClick={() => onSort(column)} onClick={() => onSort(column)}
@@ -213,11 +213,11 @@ export function FleetTable({
<td className="px-2 py-1.5 text-center"> <td className="px-2 py-1.5 text-center">
<StatusDot status={device.status} /> <StatusDot status={device.status} />
</td> </td>
<td className="px-2 py-1.5 font-medium">{device.hostname}</td> <td className="px-2 py-1.5 font-medium text-text-primary">{device.hostname}</td>
<td className="px-2 py-1.5 font-mono text-xs text-text-secondary"> <td className="px-2 py-1.5 font-mono text-xs text-text-secondary">
{device.ip_address} {device.ip_address}
</td> </td>
<td className="px-2 py-1.5 text-text-secondary">{device.model ?? '—'}</td> <td className="px-2 py-1.5 text-text-muted">{device.model ?? '—'}</td>
<td className="px-2 py-1.5 text-text-secondary"> <td className="px-2 py-1.5 text-text-secondary">
{device.routeros_version ?? '—'} {device.routeros_version ?? '—'}
</td> </td>
@@ -245,8 +245,8 @@ export function FleetTable({
const tableHead = ( const tableHead = (
<thead> <thead>
<tr className="border-b border-border bg-surface"> <tr className="border-b border-border">
<th scope="col" className="px-2 py-2 text-xs font-medium text-text-muted w-6"><span className="sr-only">Status</span></th> <th scope="col" className="px-2 py-2 text-[10px] uppercase tracking-wider font-semibold text-text-muted w-6"><span className="sr-only">Status</span></th>
<SortHeader column="hostname" label="Hostname" {...sortProps} className="text-left" /> <SortHeader column="hostname" label="Hostname" {...sortProps} className="text-left" />
<SortHeader column="ip_address" label="IP" {...sortProps} className="text-left" /> <SortHeader column="ip_address" label="IP" {...sortProps} className="text-left" />
<SortHeader column="model" label="Model" {...sortProps} className="text-left" /> <SortHeader column="model" label="Model" {...sortProps} className="text-left" />
@@ -254,7 +254,7 @@ export function FleetTable({
<SortHeader column="firmware_version" label="Firmware" {...sortProps} className="text-left" /> <SortHeader column="firmware_version" label="Firmware" {...sortProps} className="text-left" />
<SortHeader column="uptime_seconds" label="Uptime" {...sortProps} className="text-right" /> <SortHeader column="uptime_seconds" label="Uptime" {...sortProps} className="text-right" />
<SortHeader column="last_seen" label="Last Seen" {...sortProps} className="text-left" /> <SortHeader column="last_seen" label="Last Seen" {...sortProps} className="text-left" />
<th scope="col" className="px-2 py-2 text-xs font-medium text-text-muted text-left">Tags</th> <th scope="col" className="px-2 py-2 text-[10px] uppercase tracking-wider font-semibold text-text-muted text-left">Tags</th>
</tr> </tr>
</thead> </thead>
) )