JakeBreath
cc625d1e10
- OS name comes from /etc/os-release (e.g. 'CachyOS Linux'), mirroring the original app's os_utils; macOS/Windows get proper names too - Status pill shows the name as-is instead of uppercasing it - Removed the watched-folder path next to the logo; it now appears only in the footer strip (spec updated to match)
49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
import { Laptop, Monitor, Terminal, type LucideIcon } from "lucide-react";
|
|
|
|
import { cn } from "@/lib/cn";
|
|
import type { SystemStatus } from "@/lib/types";
|
|
|
|
const osIcons: Record<string, LucideIcon> = {
|
|
linux: Terminal,
|
|
apple: Laptop,
|
|
windows: Monitor,
|
|
};
|
|
|
|
function formatMs(value: number): string {
|
|
return value >= 100 ? `${Math.round(value)}ms` : `${value.toFixed(1)}ms`;
|
|
}
|
|
|
|
export function StatusPill({ status }: { status?: SystemStatus }) {
|
|
if (!status) return null;
|
|
const OsIcon = osIcons[status.os.icon] ?? Monitor;
|
|
|
|
return (
|
|
<span
|
|
className="hidden select-none items-center gap-1.5 rounded-full border border-ctp-surface0 bg-ctp-mantle px-2.5 py-1 font-mono text-[11px] text-ctp-overlay1 lg:flex"
|
|
title={`${status.os.name} ${status.os.release} · built from ${status.git_hash}`}
|
|
>
|
|
<span
|
|
className={cn(
|
|
"font-medium",
|
|
status.env === "prod" ? "text-ctp-teal" : "text-ctp-yellow",
|
|
)}
|
|
>
|
|
ENV: {status.env.toUpperCase()}
|
|
</span>
|
|
<span className="text-ctp-surface2">·</span>
|
|
<span>{status.git_hash}</span>
|
|
<span className="text-ctp-surface2">·</span>
|
|
<OsIcon className="h-3 w-3" />
|
|
<span>{status.os.name}</span>
|
|
<span className="text-ctp-surface2">·</span>
|
|
<span>{formatMs(status.server_time_ms)}</span>
|
|
{status.e621_time_ms !== null ? (
|
|
<>
|
|
<span className="text-ctp-surface2">·</span>
|
|
<span>e621: {formatMs(status.e621_time_ms)}</span>
|
|
</>
|
|
) : null}
|
|
</span>
|
|
);
|
|
}
|