feat: filter issues and proposals by status

display open by default

show open count in RepoMenu badge

__snapshots__/repo-header.test.js.snap

@@ -8,6 +8,45 @@ exports[`Repo/Header Long Name smoke-test 1`] = `
     >
       Long Name that goes on and on and on and on a...
     </a>
+    <div class="flex border-b border-base-400">
+      <div role="tablist"
+           class="tabs tabs-bordered flex-none"
+      >
+        <a href="/repo/9ee507fc4357d7ee16a5d8901bedcd103f23c17d"
+           class="tab tab-active"
+        >
+          About
+        </a>
+        <a href="/repo/9ee507fc4357d7ee16a5d8901bedcd103f23c17d/proposals"
+           class="tab"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg"
+               viewbox="0 0 16 16"
+               class="mb-1 mr-1 h-4 w-4 flex-none fill-base-content pt-1 opacity-50"
+          >
+            <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25m5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354M3.75 2.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m0 9.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m8.25.75a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0">
+            </path>
+          </svg>
+          Proposals
+        </a>
+        <a href="/repo/9ee507fc4357d7ee16a5d8901bedcd103f23c17d/issues"
+           class="tab"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg"
+               viewbox="0 0 16 16"
+               class="mb-1 mr-1 h-4 w-4 flex-none fill-base-content pt-1 opacity-50"
+          >
+            <path d="M8 9.5a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3">
+            </path>
+            <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0M1.5 8a6.5 6.5 0 1 0 13 0a6.5 6.5 0 0 0-13 0">
+            </path>
+          </svg>
+          Issues
+        </a>
+      </div>
+      <div class="flex-grow">
+      </div>
+    </div>
   </div>
 </div>
 `;
@@ -20,6 +59,45 @@ exports[`Repo/Header No Name smoke-test 1`] = `
     >
       9ee507fc4357d7ee16a5d8901bedcd103f23c17d
     </a>
+    <div class="flex border-b border-base-400">
+      <div role="tablist"
+           class="tabs tabs-bordered flex-none"
+      >
+        <a href="/repo/9ee507fc4357d7ee16a5d8901bedcd103f23c17d"
+           class="tab tab-active"
+        >
+          About
+        </a>
+        <a href="/repo/9ee507fc4357d7ee16a5d8901bedcd103f23c17d/proposals"
+           class="tab"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg"
+               viewbox="0 0 16 16"
+               class="mb-1 mr-1 h-4 w-4 flex-none fill-base-content pt-1 opacity-50"
+          >
+            <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25m5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354M3.75 2.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m0 9.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m8.25.75a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0">
+            </path>
+          </svg>
+          Proposals
+        </a>
+        <a href="/repo/9ee507fc4357d7ee16a5d8901bedcd103f23c17d/issues"
+           class="tab"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg"
+               viewbox="0 0 16 16"
+               class="mb-1 mr-1 h-4 w-4 flex-none fill-base-content pt-1 opacity-50"
+          >
+            <path d="M8 9.5a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3">
+            </path>
+            <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0M1.5 8a6.5 6.5 0 1 0 13 0a6.5 6.5 0 0 0-13 0">
+            </path>
+          </svg>
+          Issues
+        </a>
+      </div>
+      <div class="flex-grow">
+      </div>
+    </div>
   </div>
 </div>
 `;
@@ -32,6 +110,45 @@ exports[`Repo/Header Short Name smoke-test 1`] = `
     >
       Short Name
     </a>
+    <div class="flex border-b border-base-400">
+      <div role="tablist"
+           class="tabs tabs-bordered flex-none"
+      >
+        <a href="/repo/9ee507fc4357d7ee16a5d8901bedcd103f23c17d"
+           class="tab tab-active"
+        >
+          About
+        </a>
+        <a href="/repo/9ee507fc4357d7ee16a5d8901bedcd103f23c17d/proposals"
+           class="tab"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg"
+               viewbox="0 0 16 16"
+               class="mb-1 mr-1 h-4 w-4 flex-none fill-base-content pt-1 opacity-50"
+          >
+            <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25m5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354M3.75 2.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m0 9.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m8.25.75a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0">
+            </path>
+          </svg>
+          Proposals
+        </a>
+        <a href="/repo/9ee507fc4357d7ee16a5d8901bedcd103f23c17d/issues"
+           class="tab"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg"
+               viewbox="0 0 16 16"
+               class="mb-1 mr-1 h-4 w-4 flex-none fill-base-content pt-1 opacity-50"
+          >
+            <path d="M8 9.5a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3">
+            </path>
+            <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0M1.5 8a6.5 6.5 0 1 0 13 0a6.5 6.5 0 0 0-13 0">
+            </path>
+          </svg>
+          Issues
+        </a>
+      </div>
+      <div class="flex-grow">
+      </div>
+    </div>
   </div>
 </div>
 `;
@@ -43,6 +160,45 @@ exports[`Repo/Header loading smoke-test 1`] = `
       <div class="skeleton h-6 w-28 bg-base-200">
       </div>
     </div>
+    <div class="flex border-b border-base-400">
+      <div role="tablist"
+           class="tabs tabs-bordered flex-none"
+      >
+        <a href="/repo/"
+           class="tab tab-active"
+        >
+          About
+        </a>
+        <a href="/repo//proposals"
+           class="tab"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg"
+               viewbox="0 0 16 16"
+               class="mb-1 mr-1 h-4 w-4 flex-none fill-base-content pt-1 opacity-50"
+          >
+            <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25m5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354M3.75 2.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m0 9.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m8.25.75a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0">
+            </path>
+          </svg>
+          Proposals
+        </a>
+        <a href="/repo//issues"
+           class="tab"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg"
+               viewbox="0 0 16 16"
+               class="mb-1 mr-1 h-4 w-4 flex-none fill-base-content pt-1 opacity-50"
+          >
+            <path d="M8 9.5a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3">
+            </path>
+            <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0M1.5 8a6.5 6.5 0 1 0 13 0a6.5 6.5 0 0 0-13 0">
+            </path>
+          </svg>
+          Issues
+        </a>
+      </div>
+      <div class="flex-grow">
+      </div>
+    </div>
   </div>
 </div>
 `;

src/lib/wrappers/RepoMenu.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
+  import { issue_icon_path } from '$lib/components/issues/icons'
+  import { proposal_icon_path } from '$lib/components/proposals/icons'
   import type { RepoPage } from '$lib/components/repo/type'
+  import { proposal_status_open } from '$lib/kinds'
   import { issue_summaries } from '$lib/stores/Issues'
   import { proposal_summaries } from '$lib/stores/Proposals'
   import { selected_repo_readme } from '$lib/stores/repo'
@@ -24,10 +27,19 @@
       class="tab"
       class:tab-active={selected_tab === 'proposals'}
     >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 16 16"
+        class="mb-1 mr-1 h-4 w-4 flex-none fill-base-content pt-1 opacity-50"
+      >
+        <path d={proposal_icon_path.open_pull} />
+      </svg>
       Proposals
-      {#if !$proposal_summaries.loading}
-        <span class="pl-1 opacity-30">
-          ({$proposal_summaries.summaries.length})
+      {#if !$proposal_summaries.loading && $proposal_summaries.summaries.filter((s) => s.status === proposal_status_open).length > 0}
+        <span class="badge badge-neutral badge-sm ml-2">
+          {$proposal_summaries.summaries.filter(
+            (s) => s.status === proposal_status_open
+          ).length}
         </span>
       {/if}
     </a>
@@ -36,10 +48,21 @@
       class="tab"
       class:tab-active={selected_tab === 'issues'}
     >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 16 16"
+        class="mb-1 mr-1 h-4 w-4 flex-none fill-base-content pt-1 opacity-50"
+      >
+        {#each issue_icon_path.open as p}
+          <path d={p} />
+        {/each}
+      </svg>
       Issues
-      {#if !$issue_summaries.loading}
-        <span class="pl-1 opacity-30">
-          ({$issue_summaries.summaries.length})
+      {#if !$issue_summaries.loading && $issue_summaries.summaries.filter((s) => s.status === proposal_status_open).length > 0}
+        <span class="badge badge-neutral badge-sm ml-2">
+          {$issue_summaries.summaries.filter(
+            (s) => s.status === proposal_status_open
+          ).length}
         </span>
       {/if}
     </a>

src/routes/repo/[repo_id]/issues/+page.svelte

@@ -1,17 +1,78 @@
 <script lang="ts">
+  import type { IssueSummary } from '$lib/components/issues/type'
   import ProposalsList from '$lib/components/proposals/ProposalsList.svelte'
+  import {
+    proposal_status_applied,
+    proposal_status_closed,
+    proposal_status_open,
+    statusKindtoText,
+  } from '$lib/kinds'
   import { issue_summaries } from '$lib/stores/Issues'
   import RepoPageWrapper from '$lib/wrappers/RepoPageWrapper.svelte'
 
   export let data: { repo_id: string }
   let identifier = data.repo_id
+  let status: number = proposal_status_open
+  let filtered: IssueSummary[] = []
+  $: filtered = $issue_summaries.summaries.filter((s) => s.status === status)
 </script>
 
 <RepoPageWrapper {identifier} selected_tab="issues">
-  <ProposalsList
-    proposals_or_issues={$issue_summaries.summaries}
-    loading={$issue_summaries.loading}
-  />
+  <div class="mt-2 border border-base-400">
+    <div class="flex bg-slate-900">
+      <div class="tabs tabs-lifted tabs-xs flex-none p-2">
+        <button
+          role="tab"
+          class="tab"
+          class:opacity-50={status !== proposal_status_open}
+          class:font-bold={status == proposal_status_open}
+          on:click={() => {
+            status = proposal_status_open
+          }}
+        >
+          {$issue_summaries.summaries.filter(
+            (s) => s.status === proposal_status_open
+          ).length} Open
+        </button>
+        <button
+          role="tab"
+          class="tab"
+          class:opacity-50={status !== proposal_status_applied}
+          class:font-bold={status == proposal_status_applied}
+          on:click={() => {
+            status = proposal_status_applied
+          }}
+        >
+          {$issue_summaries.summaries.filter(
+            (s) => s.status === proposal_status_applied
+          ).length} Completed
+        </button>
+        <button
+          role="tab"
+          class="tab"
+          class:opacity-50={status !== proposal_status_closed}
+          class:font-bold={status == proposal_status_closed}
+          on:click={() => {
+            status = proposal_status_closed
+          }}
+        >
+          {$issue_summaries.summaries.filter(
+            (s) => s.status === proposal_status_closed
+          ).length} Closed
+        </button>
+      </div>
+    </div>
+    {#if !$issue_summaries.loading && filtered.length === 0}
+      <div class="py-10 text-center lowercase">
+        there aren't any {statusKindtoText(status, 'issue')} issues
+      </div>
+    {:else}
+      <ProposalsList
+        proposals_or_issues={filtered}
+        loading={$issue_summaries.loading}
+      />
+    {/if}
+  </div>
   <a class="btn btn-success my-3" href="/repo/{identifier}/issues/new">
     create issue
   </a>

src/routes/repo/[repo_id]/proposals/+page.svelte

@@ -1,17 +1,92 @@
 <script lang="ts">
   import ProposalsList from '$lib/components/proposals/ProposalsList.svelte'
+  import type { ProposalSummary } from '$lib/components/proposals/type'
+  import {
+    proposal_status_applied,
+    proposal_status_closed,
+    proposal_status_draft,
+    proposal_status_open,
+    statusKindtoText,
+  } from '$lib/kinds'
   import { proposal_summaries } from '$lib/stores/Proposals'
   import RepoPageWrapper from '$lib/wrappers/RepoPageWrapper.svelte'
 
   export let data: { repo_id: string }
   let identifier = data.repo_id
+  let status: number = proposal_status_open
+  let filtered: ProposalSummary[] = []
+  $: filtered = $proposal_summaries.summaries.filter((s) => s.status === status)
 </script>
 
 <RepoPageWrapper {identifier} selected_tab="proposals">
-  <ProposalsList
-    proposals_or_issues={$proposal_summaries.summaries}
-    loading={$proposal_summaries.loading}
-  />
+  <div class="mt-2 border border-base-400">
+    <div class="flex bg-slate-900">
+      <div class="tabs tabs-lifted tabs-xs flex-none p-2">
+        <button
+          role="tab"
+          class="tab"
+          class:opacity-50={status !== proposal_status_open}
+          class:font-bold={status == proposal_status_open}
+          on:click={() => {
+            status = proposal_status_open
+          }}
+        >
+          {$proposal_summaries.summaries.filter(
+            (s) => s.status === proposal_status_open
+          ).length} Open
+        </button>
+        <button
+          role="tab"
+          class="tab"
+          class:opacity-50={status !== proposal_status_draft}
+          class:font-bold={status == proposal_status_draft}
+          on:click={() => {
+            status = proposal_status_draft
+          }}
+        >
+          {$proposal_summaries.summaries.filter(
+            (s) => s.status === proposal_status_draft
+          ).length} Draft
+        </button>
+        <button
+          role="tab"
+          class="tab"
+          class:opacity-50={status !== proposal_status_applied}
+          class:font-bold={status == proposal_status_applied}
+          on:click={() => {
+            status = proposal_status_applied
+          }}
+        >
+          {$proposal_summaries.summaries.filter(
+            (s) => s.status === proposal_status_applied
+          ).length} Merged
+        </button>
+        <button
+          role="tab"
+          class="tab"
+          class:opacity-50={status !== proposal_status_closed}
+          class:font-bold={status == proposal_status_closed}
+          on:click={() => {
+            status = proposal_status_closed
+          }}
+        >
+          {$proposal_summaries.summaries.filter(
+            (s) => s.status === proposal_status_closed
+          ).length} Closed
+        </button>
+      </div>
+    </div>
+    {#if filtered.length === 0}
+      <div class="py-10 text-center lowercase">
+        there aren't any {statusKindtoText(status, 'proposal')} proposals
+      </div>
+    {:else}
+      <ProposalsList
+        proposals_or_issues={filtered}
+        loading={$proposal_summaries.loading}
+      />
+    {/if}
+  </div>
   <div role="alert" class="alert mt-6">
     <svg
       xmlns="http://www.w3.org/2000/svg"