feat: show node acl tags on the main screen

app/routes/_data.machines._index.tsx

@@ -25,60 +25,73 @@ export default function Page() {
 
 	return (
 		<table className='table-auto w-full rounded-lg'>
-			<thead>
+			<thead className='text-gray-500 dark:text-gray-400'>
-				<tr className='text-left'>
+				<tr className='text-left uppercase text-sm font-bold'>
 					<th className='pl-4'>Name</th>
 					<th>IP Addresses</th>
 					<th>Last Seen</th>
 				</tr>
 			</thead>
-			<tbody className='divide-y divide-zinc-200 dark:divide-zinc-700'>
+			<tbody className={clsx(
-				{data.map(machine => (
+				'divide-y divide-zinc-200 dark:divide-zinc-700 align-top',
-					<tr key={machine.id} className='hover:bg-zinc-100 dark:hover:bg-zinc-800'>
+				'border-t border-zinc-200 dark:border-zinc-700'
-						<td className='pt-2 pb-4 pl-4'>
+			)}
-							<Link to={`/machines/${machine.id}`}>
+			>
-								<h1>{machine.givenName}</h1>
+				{data.map(machine => {
-								<span
+					const tags = [...machine.forcedTags, ...machine.validTags]
-									className='text-sm font-mono text-gray-500 dark:text-gray-400'
+
-								>{machine.name}
+					return (
-								</span
+						<tr key={machine.id} className='hover:bg-zinc-100 dark:hover:bg-zinc-800'>
-								>
+							<td className='py-2 pl-4'>
-							</Link>
+								<Link to={`/machines/${machine.id}`}>
-						</td>
+									<h1>{machine.givenName}</h1>
-						<td className='pt-2 pb-4 font-mono text-gray-600 dark:text-gray-300'>
+									<span className='text-sm font-mono text-gray-500 dark:text-gray-400'>
-							{machine.ipAddresses.map((ip, index) => (
+										{machine.name}
-								<button
-									key={ip}
-									type='button'
-									className='flex items-center gap-x-1 w-full'
-									onClick={async () => {
-										await navigator.clipboard.writeText(ip)
-										toast('Copied IP address to clipboard')
-									}}
-								>
-									<span className={clsx(index === 0 ? 'text-gray-600 dark:text-gray-300' : 'text-gray-400 dark:text-gray-500')}>
-										{ip}
 									</span>
-									<ClipboardIcon className='text-gray-400 dark:text-gray-500 w-4 h-4'/>
+									<div className='flex gap-1 mt-1'>
-								</button>
+										{tags.map(tag => (
-							))}
+											<span key={tag} className='text-xs bg-gray-200 text-gray-600 rounded-sm px-1 py-0.5'>
-						</td>
+												{tag}
-						<td>
+											</span>
-							<span
+										))}
-								className='flex items-center gap-x-1 text-sm text-gray-500 dark:text-gray-400'
+									</div>
-							>
+								</Link>
-								<StatusCircle isOnline={machine.online} className='w-4 h-4'/>
+							</td>
-								<p>
+							<td className='pt-2 pb-4 font-mono text-gray-600 dark:text-gray-300'>
-									{machine.online
+								{machine.ipAddresses.map((ip, index) => (
-										? 'Connected'
+									<button
-										: new Date(
+										key={ip}
-											machine.lastSeen
+										type='button'
-										).toLocaleString()}
+										className='flex items-center gap-x-1 w-full'
-								</p>
+										onClick={async () => {
-							</span>
+											await navigator.clipboard.writeText(ip)
-						</td>
+											toast('Copied IP address to clipboard')
-					</tr>
+										}}
-				))}
+									>
+										<span className={clsx(index === 0 ? 'text-gray-600 dark:text-gray-300' : 'text-gray-400 dark:text-gray-500')}>
+											{ip}
+										</span>
+										<ClipboardIcon className='text-gray-400 dark:text-gray-500 w-4 h-4'/>
+									</button>
+								))}
+							</td>
+							<td className='py-2'>
+								<span
+									className='flex items-center gap-x-1 text-sm text-gray-500 dark:text-gray-400'
+								>
+									<StatusCircle isOnline={machine.online} className='w-4 h-4'/>
+									<p>
+										{machine.online
+											? 'Connected'
+											: new Date(
+												machine.lastSeen
+											).toLocaleString()}
+									</p>
+								</span>
+							</td>
+						</tr>
+					)
+				})}
 			</tbody>
 		</table>
 	)