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";
     import TextFilter from "./lib/TextFilter.svelte";
 
@@ -52,6 +53,7 @@
 <h1>{selected_crates.length} awesome drivers waiting for you!</h1>
 <main>
     <div class="filters">
+        <SortFilter name="Sort by" />
         <TextFilter crates={t_crates} bind:selected={selected_f}/>
         <Filter name="Dependencies" values={t_indexes.dependencies} bind:selected={selected_d}/>
         <Filter name="Interfaces" values={t_indexes.interfaces} bind:selected={selected_i}/>

frontend/src/app.css

@@ -154,6 +154,13 @@ 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,37 @@
 <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 ? 1 : 0;
+      }
+      else if ($sort_by == 'recently_updated') {
+        return b.updated_at > a.updated_at ? 1 : 0;
+      }
+
+      return b.name < a.name ? 1 : 0;
+    });
 </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,73 @@
+<script lang="ts">
+
+    import {open_filter, sort_by} from '../store/FilterStore.svelte';
+
+    export let name: string;
+
+    let open: boolean = false;
+
+    function update_sort(type: string) {
+      $sort_by = type;
+    }
+
+    function clickOutside(node: HTMLElement, {enabled: initialEnabled, cb}: { enabled: boolean, cb: Function }) {
+        const handleOutsideClick = ({target}: MouseEvent) => {
+            if (target instanceof Node && !node.contains(target)) {
+                cb();
+            }
+        };
+
+        function update({enabled}: { enabled: boolean }) {
+            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>