feat: [sveltekit-pod] Issues Search: inline filters (open/closed)

svelte-kit-scss/src/lib/components/IssueSearch/IssueSearchControls/IssueSearchControls.svelte

@@ -1,31 +1,62 @@
 <script lang="ts">
-  import { goto, prefetch } from '$app/navigation';
+  import { goto } from '$app/navigation';
   import DropdownMenuSelect from '$lib/components/shared/Dropdown/DropdownMenuSelect/DropdownMenuSelect.svelte';
   import DropdownFilterTextButton from './DropdownFilterTextButton.svelte';
   import type { NavigationFilterOption } from './models';
+  import IssueStateFilter from './IssueStateFilter.svelte';
 
   export let sortFilters: NavigationFilterOption[];
+  export let stateFilters: NavigationFilterOption[];
+  export let milestoneFilters: NavigationFilterOption[];
 
-  const handleFilterSelect = async (option: NavigationFilterOption): Promise<void> => {
-    if (option.active) {
+  const handleFilterSelect = async (
+    option: NavigationFilterOption,
+    optional = false
+  ): Promise<void> => {
+    if (!optional && option.active) {
       return;
     }
-    await prefetch(option.href);
     await goto(option.href);
   };
 </script>
 
 <div class="issue-search-controls">
-  <DropdownMenuSelect
-    description="Sort by"
-    options={sortFilters}
-    labelAccessor={(x) => x.label}
-    checkedPredicate={(x) => x.active}
-    on:select={async ({ detail }) => await handleFilterSelect(detail)}
-  >
-    <DropdownFilterTextButton text="Sort" />
-  </DropdownMenuSelect>
+  <div class="primary">
+    <IssueStateFilter options={stateFilters} />
+  </div>
+  <div class="secondary">
+    <DropdownMenuSelect
+      description="Filter by milestone"
+      options={milestoneFilters}
+      labelAccessor={(x) => x.label}
+      checkedPredicate={(x) => x.active}
+      on:select={async ({ detail }) => await handleFilterSelect(detail, true)}
+      direction="left"
+    >
+      <DropdownFilterTextButton text="Milestone" />
+    </DropdownMenuSelect>
+    <DropdownMenuSelect
+      description="Sort by"
+      options={sortFilters}
+      labelAccessor={(x) => x.label}
+      checkedPredicate={(x) => x.active}
+      on:select={async ({ detail }) => await handleFilterSelect(detail)}
+      direction="left"
+    >
+      <DropdownFilterTextButton text="Sort" />
+    </DropdownMenuSelect>
+  </div>
 </div>
 
 <style lang="scss">
+  .issue-search-controls {
+    display: flex;
+    .primary {
+      flex: 1;
+    }
+    .secondary {
+      display: flex;
+      gap: 1em;
+    }
+  }
 </style>

svelte-kit-scss/src/lib/components/IssueSearch/IssueSearchControls/IssueStateFilter.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import IssueStateIcon from '../IssueSearchListItem/IssueStateIcon.svelte';
+  import type { NavigationFilterOption } from './models';
+  import { IssueState } from '$lib/interfaces';
+
+  export let options: NavigationFilterOption[];
+  $: [openFilter, closedFilter] = options;
+</script>
+
+<div class="issue-state-filters" data-sveltekit-preload-data="off">
+  <a class="link" href={openFilter.href} class:active={openFilter.active}
+    ><IssueStateIcon state={IssueState.Open} /><span>{openFilter.label}</span></a
+  >
+  <a class="link" href={closedFilter.href} class:active={closedFilter.active}
+    ><IssueStateIcon state={IssueState.Closed} /><span>{closedFilter.label}</span></a
+  >
+</div>
+
+<style lang="scss">
+  .issue-state-filters {
+    display: flex;
+    gap: 1em;
+    .link {
+      text-decoration: none;
+      opacity: 0.7;
+      color: inherit;
+      display: flex;
+      align-items: center;
+      gap: 0.25em;
+      &.active {
+        font-weight: 600;
+      }
+      &:hover,
+      &.active {
+        opacity: 1;
+      }
+    }
+  }
+</style>