feat(board): add option to add quick-filters

packages/board/src/CreateQuickFilter.svelte

@@ -0,0 +1,31 @@
+<script>
+  import CreateFilterDialog from './CreateQuickFilterDialog.svelte';
+
+  export let onSubmit = () => {};
+  export let onClose = () => {};
+
+  let open;
+
+  const handleClose = (e) => {
+    onClose(e);
+    open = false;
+  };
+
+  const handleSubmit = (e) => {
+    onSubmit(e);
+    open = false;
+  };
+</script>
+
+<button class="btn btn-outline-primary ml-1" on:click={() => {open = true;}}>🖫</button>
+
+{#if open}
+  <CreateFilterDialog
+    onClose={ handleClose }
+    onSubmit={ handleSubmit }
+  >
+    <h4 slot="header" class="chooser-header my-3">
+      Create new Quickfilter
+    </h4>
+  </CreateFilterDialog>
+{/if}

packages/board/src/CreateQuickFilterDialog.svelte

@@ -0,0 +1,131 @@
+<script>
+
+  import { onMount } from 'svelte';
+
+  import { Id } from './util';
+
+  const inputId = Id();
+
+  export let onClose;
+
+  export let onSubmit;
+
+  let value = '';
+
+  let input;
+
+  function handleInput(event) {
+    value = event.target.value;
+  }
+
+  function handleInputKey(event) {
+
+    const key = event.key;
+
+    if (key === 'Enter') {
+      checkSubmit(event);
+    }
+
+    if (key === 'Escape' && !value) {
+      input.blur();
+
+      event.preventDefault();
+    }
+  }
+
+  onMount(() => {
+    input.focus();
+  });
+
+  function checkClose(event) {
+    if (event.key === 'Escape') {
+      event.preventDefault();
+
+      onClose();
+    }
+  }
+
+  function checkSubmit(event) {
+    event.preventDefault();
+
+    if (!value) {
+      return;
+    }
+
+    return onSubmit(value);
+  }
+</script>
+
+<style lang="scss">
+
+  .filter-create {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    z-index: 10;
+  }
+
+  .overlay {
+    width: 100%;
+    height: 100%;
+
+    background: rgba(30, 30, 30, .30);
+  }
+
+  .filter-creator {
+    position: absolute;
+    z-index: 2;
+    width: 500px;
+    max-width: 100%;
+
+    background: white;
+    top: 30%;
+    left: 50%;
+    transform: translate(-50%);
+
+    line-height: 1.5;
+
+    border-radius: 5px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+
+  .form-container {
+    margin-bottom: 1rem;
+    display: flex;
+  }
+
+  .form-container > input {
+    flex-grow: 1;
+  }
+</style>
+
+<svelte:window on:keydown={ checkClose } />
+
+<div class="filter-create">
+  <div class="overlay" on:click={ onClose }></div>
+
+  <form class="filter-creator px-4 py-2" on:submit={ checkSubmit }>
+
+    <slot name="header"></slot>
+    <div class="form-container">
+      <input
+        id={ inputId }
+        bind:this={ input }
+        value={ value }
+        on:input={ handleInput }
+        on:keydown={ handleInputKey }
+        placeholder="Filter Name"
+        autocomplete="off"
+        spellcheck="false"
+        aria-label="Qucikfilter name input"
+        class="form-control form-control-lg"
+        type="text"
+      />
+      <button type="submit" class="btn btn-primary btn-lg mx-1">Create</button>
+    </div>
+  </form>
+
+</div>

packages/board/src/QuickFilters.svelte

@@ -0,0 +1,77 @@
+
+<script>
+import CreateFilter from './CreateQuickFilter.svelte';
+
+import { createLocalStore } from './util';
+
+export let setFilter;
+export let currentFilter;
+
+const defaultFilter = [
+  {
+    name: 'Assigned to me',
+    value: 'assignee:@me'
+  }
+];
+
+const localStorage = createLocalStore();
+
+let filters = localStorage.get('quickFilters', defaultFilter);
+const removeFilter = (filter) => {
+  filters = filters.filter(f => f !== filter);
+  localStorage.set('quickFilters', filters);
+};
+
+
+const createFilter = name => {
+  const filter = {
+    name,
+    value: currentFilter
+  };
+  filters = [ ...filters, filter ];
+  localStorage.set('quickFilters', filters);
+};
+
+</script>
+
+<div class="quickFilters navbar-collapse">
+  <CreateFilter onSubmit={createFilter} />
+
+  {#each filters as filter}
+    <button
+      class="btn btn-outline-primary ml-1 {filter.value === currentFilter ? 'active' : ''}"
+        on:click={() => {
+          if (filter.value !== currentFilter) {
+            setFilter(filter.value);
+          }
+          else {
+            setFilter('');
+          }
+        }}
+    >
+      <span>{filter.name}</span>
+      <button class="btn removeButton" on:click={
+        (e) => {
+          removeFilter(filter);
+          e.stopPropagation();
+        }
+        }>x</button>
+    </button>
+  {/each}
+
+</div>
+
+<style>
+  .btn:hover .removeButton {
+    display: inline;
+  }
+
+  .removeButton {
+    display: none;
+    line-height: normal;
+    padding: 0;
+    vertical-align: baseline;
+    color: inherit;
+    transition: none;
+  }
+</style>

packages/board/src/Taskboard.svelte

@@ -1,5 +1,6 @@
 <script>
   import BoardFilter from './BoardFilter.svelte';
+  import QuickFilters from './QuickFilters.svelte';
 
   import Avatar from './components/Avatar.svelte';
   import Loader from './components/Loader.svelte';
@@ -787,6 +788,10 @@
   .taskboard {
     position: relative;
   }
+
+  .navbar-collapse {
+    justify-content: space-between;
+  }
 </style>
 
 <svelte:head>
@@ -863,6 +868,10 @@
           onChange={ filterChanged }
           placeholder={ 'Filter board...' }
         />
+        <QuickFilters
+          setFilter={ filterChanged }
+          currentFilter={ filter }
+        />
       </form>
 
       <form class="form-inline mx-3 my-2 my-sm-0" on:submit|preventDefault={ openCreateIssue }>