Created basic sorting filter

frontend/src/App.svelte

@@ -5,6 +5,7 @@
     import CrateList from "./lib/CrateList.svelte";
     import type {FullCrate, Indexes} from "./crate-db";
     import Filter from "./lib/Filter.svelte";
+    import SortFilter from './lib/SortFilter.svelte';
     import ForkMe from "./lib/ForkMe.svelte";
 
     export let BUILD_DATE: string;
@@ -51,6 +52,7 @@
 <main>
 
     <div class="filters">
+        <SortFilter name="Sort by" bind:selected={selected_d}/>
         <Filter name="Dependencies" values={t_indexes.dependencies} bind:selected={selected_d}/>
         <Filter name="Interfaces" values={t_indexes.interfaces} bind:selected={selected_i}/>
         <Filter name="👮 License" values={t_indexes.license} bind:selected={selected_l}/>

frontend/src/app.css

@@ -154,6 +154,14 @@ label {
 }
 
 .filter {
+
+  &.search {
+    .filter-box {
+      border: 1px solid black;
+      font-weight: bold;
+    }
+  }
+
   .filter-box {
     display: flex;
     flex-direction: row;

frontend/src/lib/CrateList.svelte

@@ -1,22 +1,36 @@
 <script lang="ts">
     import type {FullCrate} from "../crate-db";
     import Crate from "./Crate.svelte";
-    import {open_filter} from '../store/FilterStore.svelte';
+    import {open_filter, sort_by} from '../store/FilterStore.svelte';
 
     export let crates: FullCrate[];
 
     export let filter: number[];
 
-    let filtered_crates: FullCrate[] = crates;
+    let filtered_crates: FullCrate[];
+
+    $ : filtered_crates = crates.filter((_, i) => filter.includes(i)).sort((a, b) => {
+      if ($sort_by == 'all_downloads') {
+        return b.downloads - a.downloads;
+      }
+      else if ($sort_by == 'recent_downloads') {
+        return b.this_version_downloads - a.this_version_downloads;
+      }
+      else if ($sort_by == 'newly_added') {
+        return b.created_at > a.created_at;
+      }
+      else if ($sort_by == 'recently_updated') {
+        return b.updated_at > a.updated_at;
+      }
+      return b.name < a.name;
+    });
 </script>
 
 <ol>
     {#each filtered_crates as crate, i}
-        {#if filter.includes(i)}
-            <li>
-                <Crate crate={crate}/>
-            </li>
-        {/if}
+       <li>
+         <Crate crate={crate}/>
+       </li>
     {/each}
 </ol>
 

frontend/src/lib/SortFilter.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+
+    import {open_filter, sort_by} from '../store/FilterStore.svelte';
+
+    export let name: string;
+    export let values: { [key: string]: number[] };
+    export let selected: number[][];
+
+    let open: boolean = false;
+
+    function update_sort(type) {
+      $sort_by = type;
+    }
+
+    function clickOutside(node, { enabled: initialEnabled, cb }) {
+        const handleOutsideClick = ({ target }) => {
+          if (!node.contains(target)) {
+            cb();
+          }
+        };
+
+        function update({enabled}) {
+          if (enabled) {
+            window.addEventListener('click', handleOutsideClick);
+          } else {
+            window.removeEventListener('click', handleOutsideClick);
+          }
+        }
+
+        update({ enabled: initialEnabled });
+        return {
+          update,
+          destroy() {
+            window.removeEventListener( 'click', handleOutsideClick );
+          }
+        };
+    }
+
+    $: open = $open_filter == name;
+
+    $: alpha_open = $sort_by == 'alphanumeric';
+    $: all_downloads_open = $sort_by == 'all_downloads';
+    $: recent_downloads_open = $sort_by == 'recent_downloads';
+    $: newly_added_open = $sort_by == 'newly_added';
+    $: recently_updated_open = $sort_by == 'recently_updated';
+
+</script>
+
+<div class={open ? 'search filter open' : 'search filter'} use:clickOutside={{ enabled: open, cb: () => open = false }} >
+
+    <button class="filter-box" on:click={() => $open_filter === name ? $open_filter = "" : $open_filter = name}>
+        <span class="filter-name">{name}</span>
+        <span class="filter-wedge">❮</span>
+    </button>
+
+    <div class={open ? 'filter-popup' : 'filter-popup hidden'}>
+        <div class="filter-list">
+            <label>
+                <input type="checkbox" on:click={() => update_sort('alphanumeric')} bind:checked={alpha_open}> Alphabetical
+            </label>
+            <label>
+                <input type="checkbox" on:click={() => update_sort('all_downloads')} bind:checked={all_downloads_open}> Downloads (all-time)
+            </label>
+            <label>
+                <input type="checkbox" on:click={() => update_sort('recent_downloads')} bind:checked={recent_downloads_open}> Downloads (recent)
+            </label>
+            <label>
+                <input type="checkbox" on:click={() => update_sort('newly_added')} bind:checked={newly_added_open}> Newly added
+            </label>
+            <label>
+                <input type="checkbox" on:click={() => update_sort('recently_updated')} bind:checked={recently_updated_open}> Recently updated
+            </label>
+        </div>
+    </div>
+</div>

frontend/src/store/FilterStore.svelte

@@ -2,6 +2,10 @@
 
     import {writable} from 'svelte/store';
 
+    // Which filter is currenly opened
     export let open_filter = writable("");
 
+    // The results are sorted by
+    export let sort_by = writable("alphanumeric");
+
 </script>