Update patch state from proposed to open

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

src/lib/patch.ts

@@ -58,9 +58,23 @@ export interface Merge {
 
 export type PatchState =
   | { status: "draft" }
-  | { status: "proposed" }
+  | { status: "open" }
   | { status: "archived" };
 
+export function groupPatches(patches: Patch[]): {
+  open: Patch[];
+  draft: Patch[];
+  archived: Patch[];
+} {
+  return patches.reduce(
+    (acc, patch) => {
+      acc[patch.state.status].push(patch);
+      return acc;
+    },
+    { open: [] as Patch[], draft: [] as Patch[], archived: [] as Patch[] },
+  );
+}
+
 export class Patch {
   id: string;
   author: Author;

src/lib/project.ts

@@ -28,7 +28,7 @@ export interface ProjectInfo {
   defaultBranch: string;
   delegates: string[];
   patches: {
-    proposed: number;
+    open: number;
     draft: number;
     archived: number;
   };
@@ -134,7 +134,7 @@ export class Project implements ProjectInfo {
   peers: Peer[];
   branches: Branches;
   patches: {
-    proposed: number;
+    open: number;
     draft: number;
     archived: number;
   };

src/views/projects/Header.svelte

@@ -135,7 +135,7 @@
     active={activeRoute.params.view.resource === "patches"}
     clickable
     on:click={() => toggleContent("patches", false)}>
-    <span class="txt-bold">{project.patches.proposed ?? 0}</span>
+    <span class="txt-bold">{project.patches.open ?? 0}</span>
     patch(es)
   </HeaderToggleLabel>
   <HeaderToggleLabel ariaLabel="Contributor count">

src/views/projects/Patch.svelte

@@ -233,7 +233,7 @@
           <Badge variant="foreground">
             {patch.state.status}
           </Badge>
-        {:else if patch.state.status === "proposed"}
+        {:else if patch.state.status === "open"}
           <Badge variant="positive">
             {patch.state.status}
           </Badge>

src/views/projects/Patch/PatchTeaser.svelte

@@ -91,7 +91,7 @@
   .draft {
     background-color: var(--color-foreground-3);
   }
-  .proposed {
+  .open {
     background-color: var(--color-positive);
   }
   .archived {
@@ -109,7 +109,7 @@
     <div
       class="state-icon"
       class:draft={patch.state.status === "draft"}
-      class:proposed={patch.state.status === "proposed"}
+      class:open={patch.state.status === "open"}
       class:archived={patch.state.status === "archived"} />
   </div>
   <div class="column-left">

src/views/projects/Patches.svelte

@@ -7,15 +7,36 @@
 <script lang="ts">
   import type { Patch } from "@app/lib/patch";
   import type { Project } from "@app/lib/project";
+  import type { Tab } from "@app/components/TabBar.svelte";
 
   import * as router from "@app/lib/router";
   import PatchTeaser from "./Patch/PatchTeaser.svelte";
   import Placeholder from "@app/components/Placeholder.svelte";
   import capitalize from "lodash/capitalize";
+  import TabBar from "@app/components/TabBar.svelte";
+  import { groupPatches } from "@app/lib/patch";
 
   export let patches: Patch[];
   export let status: PatchStatus;
   export let project: Project;
+
+  let options: Tab<PatchStatus>[];
+
+  const stateOptions: PatchStatus[] = ["draft", "open", "archived"];
+  $: options = stateOptions.map<{
+    value: PatchStatus;
+    title: string;
+    disabled: boolean;
+  }>((s: PatchStatus) => ({
+    value: s,
+    title: `${project.patches[s]} ${s}`,
+    disabled: project.patches[s] === 0,
+  }));
+  $: console.log(patches);
+  $: filteredPatches = groupPatches(patches)[status];
+  $: sortedPatches = filteredPatches.sort(
+    ({ revisions: [r1] }, { revisions: [r2] }) => r2.timestamp - r1.timestamp,
+  );
 </script>
 
 <style>
@@ -39,9 +60,18 @@
 </style>
 
 <div class="patches">
-  {#if patches.length}
+  <div style="margin-bottom: 1rem;">
+    <TabBar
+      {options}
+      on:select={e =>
+        router.updateProjectRoute({
+          search: `state=${e.detail}`,
+        })}
+      active={status} />
+  </div>
+  {#if filteredPatches.length}
     <div class="patches-list">
-      {#each patches as patch}
+      {#each sortedPatches as patch}
         <!-- svelte-ignore a11y-click-events-have-key-events -->
         <div
           class="teaser"

src/views/projects/View.svelte

@@ -35,7 +35,7 @@
   $: issueFilter = (searchParams.get("state") as IssueStatus) || "open";
   $: patchTabFilter =
     (searchParams.get("tab") as "activity" | "commits") || "activity";
-  $: patchFilter = (searchParams.get("state") as PatchStatus) || "proposed";
+  $: patchFilter = (searchParams.get("state") as PatchStatus) || "open";
 
   const getProject = async (id: string, seed: string, peer?: string) => {
     const project = await proj.Project.get(id, seed, peer);