Implement fuzzy filter in single patch/issue views — radicle-desktop

👉 Workflow runs 👉 Branch on GitHub

   import type { IssueStatus } from "@app/views/repo/router";
   import capitalize from "lodash/capitalize";
   import fuzzysort from "fuzzysort";
   import * as router from "@app/lib/router";
   import { issueStatusColor } from "@app/lib/utils";
   import { issueStatusColor, modifierKey } from "@app/lib/utils";
   import Border from "./Border.svelte";
   import DropdownList from "./DropdownList.svelte";

   import Icon from "./Icon.svelte";
   import IssueTeaser from "@app/components/IssueTeaser.svelte";
   import Link from "./Link.svelte";
   import NakedButton from "./NakedButton.svelte";
   import OutlineButton from "./OutlineButton.svelte";
   import Popover, { closeFocused } from "./Popover.svelte";
   import TextInput from "./TextInput.svelte";
   const activeRouteStore = router.activeRouteStore;

   /* eslint-enable prefer-const */
   const project = $derived(repo.payloads["xyz.radicle.project"]!);
   let showFilters: boolean = $state(false);
   let searchInput = $state("");
   const searchableIssues = $derived(
     issues
       .flatMap(i => {
         return {
           issue: i,
           labels: i.labels.join(" "),
           assignees: i.assignees
             .map(a => {
               return a.alias ?? "";
             })
             .join(" "),
           author: i.author.alias ?? "",
         };
       })
       .filter((item): item is NonNullable<typeof item> => item !== undefined),
   );
   const searchResults = $derived(
     fuzzysort.go(searchInput, searchableIssues, {
       keys: ["issue.title", "labels", "assignees", "author"],
       all: true,
     }),
   );
 </script>
 <style>
   .container {
     display: flex;
     justify-content: space-between;
     align-items: center;
     min-height: 40px;
   }

     </Link>
   </div>
   <div class="global-flex" style:margin-left="1rem">
   <div class="global-flex" style:margin-left="auto">
     <NakedButton
       keyShortcuts="ctrl+f"
       variant="ghost"
       stylePadding="0 4px"
       active={showFilters}
       onclick={() => {
         if (showFilters) {
           showFilters = false;
           searchInput = "";
         } else {
           showFilters = true;
         }
       }}>
       <Icon name="filter" />
     </NakedButton>
     <OutlineButton
       variant="ghost"
       disabled={$activeRouteStore.resource === "repo.createIssue"}
       onclick={() => {
         void router.push({
           resource: "repo.createIssue",
           rid: repo.rid,
           status,
         });
       }}>
       <Icon name="plus" />New
     </OutlineButton>
   </div>
 </div>
 {#if showFilters}
   <div class="global-flex" style:margin="1rem 0">
     <Popover popoverPositionRight="0" popoverPositionTop="2.5rem">
       {#snippet toggle(onclick)}
         <OutlineButton variant="ghost" {onclick}>

         </Border>
       {/snippet}
     </Popover>
     <OutlineButton
       variant="ghost"
       disabled={$activeRouteStore.resource === "repo.createIssue"}
       onclick={() => {
         void router.push({
           resource: "repo.createIssue",
           rid: repo.rid,
           status,
         });
       }}>
       <Icon name="plus" />New
     </OutlineButton>
     <TextInput
       onSubmit={async () => {
         if (searchResults.length === 1) {
           await router.push({
             resource: "repo.issue",
             rid: repo.rid,
             issue: searchResults[0].obj.issue.id,
             status,
           });
         }
       }}
       onDismiss={() => {
         showFilters = false;
         searchInput = "";
       }}
       placeholder={`Fuzzy filter issues ${modifierKey()} + f`}
       autofocus
       keyShortcuts="ctrl+f"
       bind:value={searchInput}>
       {#snippet left()}
         <div
           style:color="var(--color-foreground-dim)"
           style:padding-left="0.5rem">
           <Icon name="filter" />
         </div>
       {/snippet}
     </TextInput>
   </div>
 </div>
 {/if}
 <div class="issue-list">
   {#each issues as issue}
   {#each searchResults as result}
     <IssueTeaser
       focussed={searchResults.length === 1 && searchInput !== ""}
       compact
       {issue}
       issue={result.obj.issue}
       {status}
       rid={repo.rid}
       selected={issue.id === selectedIssueId} />
       selected={result.obj.issue.id === selectedIssueId} />
   {/each}
   {#if issues.length === 0}
   {#if searchResults.length === 0}
     <Border
       styleMinWidth="25rem"
       variant="ghost"

         style:justify-content="center">
         <div class="txt-missing txt-small global-flex" style:gap="0.25rem">
           <Icon name="none" />
           {#if status === "all"}
             No issues.
           {#if issues.length > 0 && searchResults.length === 0}
             No matching issues.
           {:else}
             No {status} issues.
             No {status === "all" ? "" : status} issues.
           {/if}
         </div>
       </div>

     cursor: pointer;
     font-size: var(--font-size-regular);
     word-break: break-word;
     width: 100%;
   }
   .selected {
     background-color: var(--color-fill-float-hover);

 </style>
 {#snippet issueSnippet()}
   <div class="global-flex" style:align-items="flex-start">
     <div
       class="global-counter status"
       style:color={issueStatusColor[issue.state.status]}
       style:background-color={issueStatusBackgroundColor[issue.state.status]}>
       {#if issue.state.status === "open"}
         <Icon name="issue" />
       {:else}
         <Icon name="issue-closed" />
       {/if}
     </div>
     <div
       class="global-flex"
       style:flex-direction="column"
       style:align-items="flex-start">
       <InlineTitle content={issue.title} />
       <div class="global-flex txt-small" style:flex-wrap="wrap">
         <NodeId {...authorForNodeId(issue.author)} />
         opened
         <Id id={issue.id} variant="oid" />
         {formatTimestamp(issue.timestamp)}
   <!-- svelte-ignore a11y_click_events_have_key_events -->
   <div
     tabindex="0"
     role="button"
     class="issue-teaser"
     class:selected
     style:align-items="flex-start"
     style:clip-path={focussed ? "none" : undefined}
     onclick={() => {
       void push({ resource: "repo.issue", rid, issue: issue.id, status });
     }}>
     <div class="global-flex" style:align-items="flex-start">
       <div
         class="global-counter status"
         style:color={issueStatusColor[issue.state.status]}
         style:background-color={issueStatusBackgroundColor[issue.state.status]}>
         {#if issue.state.status === "open"}
           <Icon name="issue" />
         {:else}
           <Icon name="issue-closed" />
         {/if}
       </div>
       <div
         class="global-flex"
         style:flex-direction="column"
         style:align-items="flex-start">
         <InlineTitle content={issue.title} />
         <div class="global-flex txt-small" style:flex-wrap="wrap">
           <NodeId {...authorForNodeId(issue.author)} />
           opened
           <Id id={issue.id} variant="oid" />
           {formatTimestamp(issue.timestamp)}
         </div>
       </div>
     </div>
   </div>
   <div class="global-flex" style:margin-left="auto">
     {#if !compact}
       {#each issue.labels as label}
         <Label {label} />
       {/each}
     {/if}
     <div class="global-flex" style:margin-left="auto">
       {#if !compact}
         {#each issue.labels as label}
           <Label {label} />
         {/each}
       {/if}
     {#if issue.commentCount > 0}
       <div class="txt-small global-flex" style:gap="0.25rem">
         <Icon name="comment" />
         {issue.commentCount}
       </div>
     {/if}
       {#if issue.commentCount > 0}
         <div class="txt-small global-flex" style:gap="0.25rem">
           <Icon name="comment" />
           {issue.commentCount}
         </div>
       {/if}
     </div>
   </div>
 {/snippet}
 {#if focussed}
   <Border
     styleBackgroundColor="var(--color-background-float)"
     styleDisplay="flex"
     styleAlignItems="flex-start"
     styleMinHeight="5rem"
     stylePadding="1rem"
     variant="secondary">
     {@render issueSnippet()}
   </Border>
 {:else}
   <!-- svelte-ignore a11y_click_events_have_key_events -->
   <div
     tabindex="0"
     role="button"
     class="issue-teaser"
     class:selected
     style:align-items="flex-start"
     onclick={() => {
       void push({ resource: "repo.issue", rid, issue: issue.id, status });
     }}>
     {@render issueSnippet()}
   </div>
   {@render issueSnippet()}
 {/if}

     styleHeight?: string;
     stylePadding?: string;
     active?: boolean;
     keyShortcuts?: string;
   }
   const {

     styleHeight = "2rem",
     stylePadding = "0 8px",
     active = false,
     keyShortcuts,
   }: Props = $props();
   const style = $derived(

   class:active
   onclick={!disabled ? onclick : undefined}
   {title}
   aria-keyshortcuts={keyShortcuts}
   role="button"
   tabindex="0"
   {style}

     class:selected
     class="patch-teaser"
     style:align-items="flex-start"
     style:clip-path={focussed ? "none" : undefined}
     onclick={async () => {
       if (loadPatch) {
         await loadPatch(patch.id);

         });
       }
     }}>
     {@render patchSnippet()}
     <div class="global-flex" style:align-items="flex-start">
       <div
         class="global-counter status"
         style:color={patchStatusColor[patch.state.status]}
         style:background-color={patchStatusBackgroundColor[patch.state.status]}>
         <Icon
           name={patch.state.status === "open"
             ? "patch"
             : `patch-${patch.state.status}`} />
       </div>
       <div
         class="global-flex"
         style:flex-direction="column"
         style:align-items="flex-start">
         <InlineTitle content={patch.title} />
         <div class="global-flex txt-small" style:flex-wrap="wrap">
           <NodeId {...authorForNodeId(patch.author)} />
           opened
           <Id id={patch.id} variant="oid" />
           {formatTimestamp(patch.timestamp)}
         </div>
       </div>
     </div>
     <div class="global-flex" style:margin-left="auto">
       {#if !compact}
         {#await cachedDiffStats(rid, patch.base, patch.head) then stats}
           <DiffStatBadge {stats} />
         {/await}
         {#each patch.labels as label}
           <Label {label} />
         {/each}
       {/if}
       <div
         class="txt-small global-flex"
         style:gap="0.25rem"
         style:white-space="nowrap">
         <Icon name="revision" />
         {patch.revisionCount}
       </div>
     </div>
   </div>
 {/snippet}
 {#if focussed}
   <Border
     styleBackgroundColor="var(--color-background-float)"
     variant="secondary">
     {@render patchSnippet()}
   </Border>
 {:else}
   {@render patchSnippet()}
 {/if}

   import type { Revision } from "@bindings/cob/patch/Revision";
   import capitalize from "lodash/capitalize";
   import fuzzysort from "fuzzysort";
   import * as roles from "@app/lib/roles";
   import * as router from "@app/lib/router";
   import { DEFAULT_TAKE } from "./router";
   import { announce } from "@app/components/AnnounceSwitch.svelte";
   import {
     formatOid,

     patchStatusColor,
   } from "@app/lib/utils";
   import { invoke } from "@app/lib/invoke";
   import { modifierKey } from "@app/lib/utils";
   import { nodeRunning } from "@app/lib/events";
   import AssigneeInput from "@app/components/AssigneeInput.svelte";

   import LabelInput from "@app/components/LabelInput.svelte";
   import Layout from "./Layout.svelte";
   import Link from "@app/components/Link.svelte";
   import NakedButton from "@app/components/NakedButton.svelte";
   import OutlineButton from "@app/components/OutlineButton.svelte";
   import PatchStateBadge from "@app/components/PatchStateBadge.svelte";
   import PatchStateButton from "@app/components/PatchStateButton.svelte";

     }
   }
   async function loadMoreTeasers() {
   async function loadMoreTeasers(all: boolean = false) {
     if (more) {
       const p = await invoke<PaginatedQuery<Patch[]>>("list_patches", {
         rid: repo.rid,
         status,
         skip: cursor + 20,
         take: 20,
         skip: cursor + DEFAULT_TAKE,
         take: all ? undefined : DEFAULT_TAKE,
       });
       cursor = p.cursor;
       more = p.more;
       patchTeasers = [...patchTeasers, ...p.content];
       if (all) {
         patchTeasers = p.content;
       } else {
         patchTeasers = [...patchTeasers, ...p.content];
       }
     }
   }

       patches = await invoke<PaginatedQuery<Patch[]>>("list_patches", {
         rid: repo.rid,
         status: filter,
         take: DEFAULT_TAKE,
       });
       status = filter;
     } catch (error) {

   {/snippet}
   {#snippet secondColumn()}
     <div
       class="txt-regular txt-semibold global-flex"
       style:min-height="40px"
       style:justify-content="space-between">
     <div class="txt-regular txt-semibold global-flex" style:min-height="40px">
       <div class="global-flex" style:gap="4px">
         {project.data.name}
         <Icon name="chevron-right" />

           Patches
         </Link>
       </div>
       <Popover popoverPositionRight="0" popoverPositionTop="2.5rem">
         {#snippet toggle(onclick)}
           <OutlineButton variant="ghost" {onclick}>
             {@render icons(status)}
             {status ? capitalize(status) : "All"}
             {@render counters(status)}
             <Icon name="chevron-down" />
           </OutlineButton>
         {/snippet}
         {#snippet popover()}
           <Border variant="ghost">
             <DropdownList
               items={[
                 undefined,
                 "draft",
                 "open",
                 "archived",
                 "merged",
               ] as const}>
               {#snippet item(state)}
                 <DropdownListItem
                   style="gap: 0.5rem"
                   selected={status === state}
                   onclick={async () => {
                     await loadPatches(state);
                     closeFocused();
                   }}>
                   {@render icons(state)}
                   {state ? capitalize(state) : "All"}
                   {@render counters(state)}
                 </DropdownListItem>
               {/snippet}
             </DropdownList>
           </Border>
         {/snippet}
       </Popover>
       <div style:margin-left="auto">
         <NakedButton
           keyShortcuts="ctrl+f"
           variant="ghost"
           stylePadding="0 4px"
           active={showFilters}
           onclick={() => {
             if (showFilters) {
               showFilters = false;
               searchInput = "";
             } else {
               showFilters = true;
             }
           }}>
           <Icon name="filter" />
         </NakedButton>
       </div>
     </div>
     {#if showFilters}
       <div class="global-flex" style:margin="1rem 0">
         <Popover popoverPositionLeft="0" popoverPositionTop="2.5rem">
           {#snippet toggle(onclick)}
             <OutlineButton variant="ghost" {onclick}>
               {@render icons(status)}
               {status ? capitalize(status) : "All"}
               {@render counters(status)}
               <Icon name="chevron-down" />
             </OutlineButton>
           {/snippet}
           {#snippet popover()}
             <Border variant="ghost">
               <DropdownList
                 items={[
                   undefined,
                   "draft",
                   "open",
                   "archived",
                   "merged",
                 ] as const}>
                 {#snippet item(state)}
                   <DropdownListItem
                     style="gap: 0.5rem"
                     selected={status === state}
                     onclick={async () => {
                       await loadPatches(state);
                       closeFocused();
                     }}>
                     {@render icons(state)}
                     {state ? capitalize(state) : "All"}
                     {@render counters(state)}
                   </DropdownListItem>
                 {/snippet}
               </DropdownList>
             </Border>
           {/snippet}
         </Popover>
         {#if patchTeasers.length > 0}
           <TextInput
             onFocus={async () => {
               try {
                 loading = true;
                 await loadMoreTeasers(true);
               } catch (e) {
                 console.error("Loading all patches failed: ", e);
               } finally {
                 loading = false;
               }
             }}
             onSubmit={async () => {
               if (searchResults.length === 1) {
                 await router.push({
                   patch: searchResults[0].obj.patch.id,
                   resource: "repo.patch",
                   reviewId: undefined,
                   rid: repo.rid,
                   status,
                 });
               }
             }}
             onDismiss={() => {
               showFilters = false;
               searchInput = "";
             }}
             placeholder={`Fuzzy filter patches ${modifierKey()} + f`}
             autofocus
             bind:value={searchInput}>
             {#snippet left()}
               <div
                 style:color="var(--color-foreground-dim)"
                 style:padding-left="0.5rem">
                 <Icon name={loading ? "clock" : "filter"} />
               </div>
             {/snippet}
           </TextInput>
         {/if}
       </div>
     {/if}
     <div class="patch-list">
       {#each patchTeasers as teaser}
       {#each searchResults as teaser}
         <PatchTeaser
           focussed={searchResults.length === 1 && searchInput !== ""}
           compact
           loadPatch={async (id: string) => {
             review = undefined;
             await loadPatch(id);
           }}
           patch={teaser}
           patch={teaser.obj.patch}
           rid={repo.rid}
           {status}
           selected={patch && teaser.id === patch.id} />
           selected={teaser.obj.patch.id === patch.id} />
       {/each}
       {#if patches.content.length === 0}
       {#if searchResults.length === 0}
         <Border
           styleMinWidth="25rem"
           variant="ghost"

             style:justify-content="center">
             <div class="txt-missing txt-small global-flex" style:gap="0.25rem">
               <Icon name="none" />
               {#if status === undefined}
                 No patches.
               {#if patchTeasers.length > 0 && searchResults.length === 0}
                 No matching patches.
               {:else}
                 No {status} patches.
                 No {status === undefined ? "" : status} patches.
               {/if}
             </div>
           </div>

   import type { Config } from "@bindings/config/Config";
   import type { PaginatedQuery } from "@bindings/cob/PaginatedQuery";
   import type { Patch } from "@bindings/cob/patch/Patch";
   import { DEFAULT_TAKE, type PatchStatus } from "./router";
   import type { PatchStatus } from "./router";
   import type { RepoInfo } from "@bindings/repo/RepoInfo";
   import fuzzysort from "fuzzysort";
   import * as router from "@app/lib/router";
   import { DEFAULT_TAKE } from "./router";
   import { invoke } from "@app/lib/invoke";
   import { modifierKey } from "@app/lib/utils";

   const { repo, patches, config, status }: Props = $props();
   let loading: boolean = $state(false);
   let items = $state(patches.content);
   let cursor = patches.cursor;
   let more = patches.more;