Fix patches state colors

Signed-off-by: Sebastian Martinez <me@sebastinez.dev>

src/components/Badge.svelte

@@ -1,5 +1,5 @@
-<script lang="ts">
-  export let variant:
+<script lang="ts" context="module">
+  export type Variant =
     | "caution"
     | "foreground"
     | "negative"
@@ -7,6 +7,10 @@
     | "primary"
     | "secondary"
     | "tertiary";
+</script>
+
+<script lang="ts">
+  export let variant: Variant;
   export let style: string | undefined = undefined;
 </script>
 

src/views/projects/Patch.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { BaseUrl, Comment, Merge, Patch, Review } from "@httpd-client";
+  import type { Variant } from "@app/components/Badge.svelte";
 
   interface Thread {
     root: Comment;
@@ -159,6 +160,20 @@
     currentRevision.base,
     currentRevision.oid,
   );
+
+  function badgeColor(status: string): Variant {
+    if (status === "draft") {
+      return "foreground";
+    } else if (status === "open") {
+      return "positive";
+    } else if (status === "archived") {
+      return "caution";
+    } else if (status === "merged") {
+      return "primary";
+    } else {
+      return "foreground";
+    }
+  }
 </script>
 
 <style>
@@ -234,19 +249,9 @@
         </Floating>
       </span>
       <svelte:fragment slot="state">
-        {#if patch.state.status === "draft"}
-          <Badge variant="foreground">
-            {patch.state.status}
-          </Badge>
-        {:else if patch.state.status === "open"}
-          <Badge variant="positive">
-            {patch.state.status}
-          </Badge>
-        {:else}
-          <Badge variant="positive">
-            {patch.state.status}
-          </Badge>
-        {/if}
+        <Badge variant={badgeColor(patch.state.status)}>
+          {patch.state.status}
+        </Badge>
         <div class="layout-desktop">
           <Authorship
             highlight

src/views/projects/Patch/PatchTeaser.svelte

@@ -93,13 +93,16 @@
     color: var(--color-foreground-6);
   }
   .draft {
-    background-color: var(--color-foreground-3);
+    background-color: var(--color-foreground-4);
   }
   .open {
     background-color: var(--color-positive);
   }
   .archived {
-    background-color: var(--color-negative);
+    background-color: var(--color-caution);
+  }
+  .merged {
+    background-color: var(--color-primary);
   }
   @media (max-width: 960px) {
     .tags {
@@ -114,6 +117,7 @@
       class="state-icon"
       class:draft={patch.state.status === "draft"}
       class:open={patch.state.status === "open"}
+      class:merged={patch.state.status === "merged"}
       class:archived={patch.state.status === "archived"} />
   </div>
   <div class="column-left">