feat: redo machine tagging system

app/components/Chip.tsx

@@ -17,10 +17,10 @@ export default function Chip({
 	return (
 		<span
 			className={cn(
-				'text-xs px-2 py-0.5 rounded-full',
+				'h-5 text-xs py-0.5 px-1 rounded-md',
 				'text-headplane-700 dark:text-headplane-100',
 				'bg-headplane-100 dark:bg-headplane-700',
-				leftIcon || rightIcon ? 'inline-flex items-center gap-x-1' : '',
+				'inline-flex items-center gap-x-1',
 				className,
 			)}
 		>

app/components/tags/ExitNode.tsx

@@ -0,0 +1,32 @@
+import { Info } from 'lucide-react';
+import cn from '~/utils/cn';
+import Chip from '../Chip';
+import Tooltip from '../Tooltip';
+
+export interface ExitNodeTagProps {
+	isEnabled?: boolean;
+}
+
+export function ExitNodeTag({ isEnabled }: ExitNodeTagProps) {
+	return (
+		<Tooltip>
+			<Chip
+				text="Exit Node"
+				className={cn(
+					'bg-blue-300 text-blue-900 dark:bg-blue-900 dark:text-blue-300',
+				)}
+				rightIcon={isEnabled ? undefined : <Info className="h-full w-fit" />}
+			/>
+			<Tooltip.Body>
+				{isEnabled ? (
+					<>This machine is acting as an exit node.</>
+				) : (
+					<>
+						This machine is requesting to be used as an exit node. Review this
+						from the "Edit route settings..." option in the machine's menu.
+					</>
+				)}
+			</Tooltip.Body>
+		</Tooltip>
+	);
+}

app/components/tags/Expiry.tsx

@@ -0,0 +1,42 @@
+import Chip from '../Chip';
+import Tooltip from '../Tooltip';
+
+export interface ExpiryTagProps {
+	variant: 'expired' | 'no-expiry';
+	expiry?: string;
+}
+
+export function ExpiryTag({ variant, expiry }: ExpiryTagProps) {
+	const formatter = new Intl.DateTimeFormat('en-US', {
+		month: 'short',
+		day: 'numeric',
+		year: 'numeric',
+	});
+
+	return (
+		<Tooltip>
+			<Chip
+				text={
+					variant === 'expired'
+						? `Expired ${formatter.format(new Date(expiry!))}`
+						: 'No expiry'
+				}
+				className="bg-headplane-200 text-headplane-800 dark:bg-headplane-800 dark:text-headplane-200"
+			/>
+			<Tooltip.Body>
+				{variant === 'expired' ? (
+					<>
+						This machine is expired and will not be able to connect to the
+						network. Re-authenticate with Tailscale on the machine to re-enable
+						it.
+					</>
+				) : (
+					<>
+						This machine has key expiry disabled and will never need to
+						re-authenticate.
+					</>
+				)}
+			</Tooltip.Body>
+		</Tooltip>
+	);
+}

app/components/tags/HeadplaneAgent.tsx

@@ -0,0 +1,20 @@
+import cn from '~/utils/cn';
+import Chip from '../Chip';
+import Tooltip from '../Tooltip';
+
+export function HeadplaneAgentTag() {
+	return (
+		<Tooltip>
+			<Chip
+				text="Headplane Agent"
+				className={cn(
+					'bg-purple-300 text-purple-900 dark:bg-purple-900 dark:text-purple-300',
+				)}
+			/>
+			<Tooltip.Body>
+				This machine is running the Headplane agent, which allows it to provide
+				host information in the web UI.
+			</Tooltip.Body>
+		</Tooltip>
+	);
+}

app/components/tags/Subnet.tsx

@@ -0,0 +1,32 @@
+import { Info } from 'lucide-react';
+import cn from '~/utils/cn';
+import Chip from '../Chip';
+import Tooltip from '../Tooltip';
+
+export interface SubnetTagProps {
+	isEnabled?: boolean;
+}
+
+export function SubnetTag({ isEnabled }: SubnetTagProps) {
+	return (
+		<Tooltip>
+			<Chip
+				text="Subnets"
+				className={cn(
+					'bg-blue-300 text-blue-900 dark:bg-blue-900 dark:text-blue-300',
+				)}
+				rightIcon={isEnabled ? undefined : <Info className="h-full w-fit" />}
+			/>
+			<Tooltip.Body>
+				{isEnabled ? (
+					<>This machine advertises subnet routes.</>
+				) : (
+					<>
+						This machine has unadvertised subnet routes. Review this from the
+						"Edit route settings..." option in the machine's menu.
+					</>
+				)}
+			</Tooltip.Body>
+		</Tooltip>
+	);
+}