feat: plugin list rows use host list status colors

CHANGELOG.md

@@ -17,6 +17,7 @@
 
 - Plugin cards and pages use the dashboard look everywhere, with shared lines between sections instead of separate boxes with gaps
 - The Plugins tab and plugin pages use the same look
+- List rows in plugins follow the host list status colors: accent for good, dark for offline or bad
 - Line charts that cover a few minutes show seconds in their times
 - Plugins a new release adds to the image start on only when they are recommended. The rest are installed and left off for an admin to turn on
 

src/ui/components/list-kit.tsx

@@ -4,6 +4,7 @@ import { ChevronRight, Plus, Trash2 } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/button";
+import { useStatusColorScheme } from "@/hooks/use-status-color-scheme";
 
 export type ListRowTone =
   "brand" | "muted" | "success" | "warning" | "destructive" | "none";
@@ -17,6 +18,16 @@ const STRIPE: Record<ListRowTone, string> = {
   none: "bg-transparent",
 };
 
+// Accent scheme, like the host list: good is the accent, anything else is dim.
+const ACCENT_STRIPE: Record<ListRowTone, string> = {
+  brand: "bg-accent-brand/60",
+  muted: "bg-muted-foreground/30",
+  success: "bg-accent-brand/60",
+  warning: "bg-muted-foreground/30",
+  destructive: "bg-muted-foreground/30",
+  none: "bg-transparent",
+};
+
 /** Scrolling list body. Rows sit flush, divided by their own borders. */
 export function PanelList({
   empty,
@@ -96,6 +107,7 @@ export function ListRow({
   React.HTMLAttributes<HTMLDivElement>,
   "title" | "onClick" | "children"
 >) {
+  const stripes = useStatusColorScheme() === "status" ? STRIPE : ACCENT_STRIPE;
   return (
     <div
       {...rest}
@@ -127,7 +139,7 @@ export function ListRow({
       <div
         className={cn(
           "w-[3px] shrink-0",
-          selected ? "bg-accent-brand" : !color && STRIPE[tone],
+          selected ? "bg-accent-brand" : !color && stripes[tone],
         )}
         style={color && !selected ? { backgroundColor: color } : undefined}
       />