From 48d6a11fb814d813933f7a059a0c3117b08ceefd Mon Sep 17 00:00:00 2001
From: thesn10 <38666407+thesn10@users.noreply.github.com>
Date: Fri, 3 Jul 2026 12:59:02 +0200
Subject: [PATCH] Add StatusChip outline

---
 app/src/components/StatusChip.tsx | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/app/src/components/StatusChip.tsx b/app/src/components/StatusChip.tsx
index 6394c75..99f2c03 100644
--- a/app/src/components/StatusChip.tsx
+++ b/app/src/components/StatusChip.tsx
@@ -5,9 +5,26 @@ import type { StatusColor } from "@/lib/status";
 interface StatusChipProps {
   label: string;
   color: StatusColor;
+  variant?: "soft" | "outline";
 }
 
-export function StatusChip({ label, color }: StatusChipProps): JSX.Element {
+const OUTLINE_BORDER_CLASS: Record<StatusColor, string> = {
+  default: "border border-default",
+  accent: "border border-accent",
+  success: "border border-success",
+  warning: "border border-warning",
+  danger: "border border-danger",
+};
+
+export function StatusChip({ label, color, variant = "soft" }: StatusChipProps): JSX.Element {
+  if (variant === "outline") {
+    return (
+      <Chip variant="tertiary" color={color} size="sm" className={OUTLINE_BORDER_CLASS[color]}>
+        <Chip.Label>{label}</Chip.Label>
+      </Chip>
+    );
+  }
+
   return (
     <Chip variant="soft" color={color} size="sm">
       <Chip.Label>{label}</Chip.Label>