feat: improve sorting and filtering

kurozenzen · May 7, 2023 · 98bfa21 · 98bfa21
1 parent 7cb0c3c
commit 98bfa21
Show file tree

Hide file tree

Showing 21 changed files with 310 additions and 169 deletions.
diff --git a/index.html b/index.html
@@ -129,7 +129,7 @@
           background: rgba(200, 200, 255, 0.22);
         }
       }
-      
+
       i {
         font-style: normal;
       }
@@ -182,6 +182,10 @@
         content: '\ea86';
       }
 
+      .codicon-arrow-down:before {
+        content: '\ea9a';
+      }
+
       .codicon-arrow-up:before {
         content: '\eaa1';
       }

diff --git a/src/formatting/formatCount.js b/src/formatting/formatCount.js
@@ -7,8 +7,8 @@ const formatter = Intl.NumberFormat('en', { notation: 'compact' })
  */
 export const formatCount = (value) => {
   if (!isValidCount(value)) {
-    throw new TypeError('Invalid value passed to formatCount')
+    throw new TypeError(`Invalid value passed to formatCount: ${value}`)
   }
-  
+
   return formatter.format(value)
 }
diff --git a/src/lib/preferences/Checkbox.svelte → src/lib/common/Checkbox.svelte b/src/lib/preferences/Checkbox.svelte → src/lib/common/Checkbox.svelte
diff --git a/src/lib/common/RotatingIconSelection.svelte b/src/lib/common/RotatingIconSelection.svelte
@@ -0,0 +1,38 @@
+<script>
+  import onEnterOrSpace from './onEnterOrSpace'
+
+  /** @type {Record<string, string>} keys to icons*/
+  export let options
+  export let value
+
+  let index = Object.keys(options).indexOf(value)
+
+  $: entries = Object.entries(options)
+  $: icon = entries[index][1]
+
+  const rotate = () => {
+    index = (index + 1) % entries.length
+    value = entries[index][0]
+  }
+</script>
+
+<button class={icon} on:click={rotate} on:keyup={onEnterOrSpace(rotate)} />
+
+<style>
+  button {
+    background-color: var(--background-1);
+    color: var(--text);
+    border-radius: var(--line-height);
+    width: var(--line-height);
+    height: var(--line-height);
+    line-height: var(--line-height);
+    font-size: var(--text-size-large);
+    transition: color var(--default-transition-behaviour);
+  }
+
+  @media (hover: hover) {
+    button:hover {
+      color: var(--text-highlight);
+    }
+  }
+</style>
diff --git a/src/lib/common/RotatingTextSelection.svelte b/src/lib/common/RotatingTextSelection.svelte
@@ -0,0 +1,38 @@
+<script>
+  import onEnterOrSpace from './onEnterOrSpace'
+
+  /** @type {Record<string, string>} keys to text*/
+  export let options
+  export let value
+
+  let index = Object.keys(options).indexOf(value)
+
+  $: entries = Object.entries(options)
+  $: text = entries[index][1]
+
+  const rotate = () => {
+    index = (index + 1) % entries.length
+    value = entries[index][0]
+  }
+</script>
+
+<button on:click={rotate} on:keyup={onEnterOrSpace(rotate)}>{text}</button>
+
+<style>
+  button {
+    background-color: var(--background-1);
+    color: var(--text);
+    border-radius: var(--line-height);
+    width: var(--line-height);
+    height: var(--line-height);
+    line-height: var(--line-height);
+    font-size: var(--text-size-large);
+    transition: color var(--default-transition-behaviour);
+  }
+
+  @media (hover: hover) {
+    button:hover {
+      color: var(--text-highlight);
+    }
+  }
+</style>
diff --git a/src/lib/preferences/Selection.svelte → src/lib/common/Selection.svelte b/src/lib/preferences/Selection.svelte → src/lib/common/Selection.svelte
diff --git a/src/lib/common/persistentStore.js b/src/lib/common/persistentStore.js
@@ -1,7 +1,7 @@
 import { writable } from 'svelte/store'
 
-const defaultParser = JSON.parse;
-const defaultSerializer = JSON.stringify;
+const defaultParser = JSON.parse
+const defaultSerializer = JSON.stringify
 
 /**
  * @template T
@@ -26,7 +26,12 @@ export const createPersistentStore = (key, initial, serializer = defaultSerializ
  * @param {(value: T) => string} serializer
  * @param {(value: string) => T} parser
  */
-export const createDependentPersistentStore = (key, initial, serializer = defaultSerializer, parser = defaultParser) => {
+export const createDependentPersistentStore = (
+  key,
+  initial,
+  serializer = defaultSerializer,
+  parser = defaultParser
+) => {
   const enabled = localStorage.getItem('isPersistedLocally') === 'true'
 
   /** @type {null | T} */

diff --git a/src/lib/dialog/Dialog.svelte b/src/lib/dialog/Dialog.svelte
@@ -21,7 +21,7 @@
 <style>
   .dialog {
     border-radius: var(--border-radius);
-    background-color: var(--background-1);
+    background-color: var(--background-0);
     z-index: var(--above-everything);
     padding: var(--grid-gap);
   }
@@ -35,8 +35,8 @@
     contain: strict;
     height: 100vh;
     width: 100vw;
-    background-color: #000a;
-    backdrop-filter: blur(10px);
+    background-color: #1118;
+    backdrop-filter: blur(5px);
     z-index: var(--above-everything);
   }
 </style>
diff --git a/src/lib/help/Help.svelte b/src/lib/help/Help.svelte
@@ -215,7 +215,7 @@
       This is the default modifier. Using it with tags will make the search include them. This means that all posts in
       the results will have every include tag on them. Use this modifier for all things that you definitely want to see.
     </p>
-    <div class="flex-row">Icon:<i class={`codicon codicon-${MODIFIERS_ICONS['+']}`} /></div>
+    <div class="flex-row">Icon:<i class={MODIFIERS_ICONS['+']} /></div>
     <div class="flex-row">
       Example:
       <ActiveTag tag={new ActiveTagObject('+', 'good', 5, 'general')} />
@@ -232,7 +232,7 @@
       <em>TIP:</em> You can create a supertag with all your exclude tags so they are saved between site visits. That makes
       excluding your turnoffs really easy.
     </p>
-    <div class="flex-row">Icon:<i class={`codicon codicon-${MODIFIERS_ICONS['-']}`} /></div>
+    <div class="flex-row">Icon:<i class={MODIFIERS_ICONS['-']} /></div>
     <div class="flex-row">
       Example:
       <ActiveTag tag={new ActiveTagObject('-', 'bad', 5, 'general')} />
@@ -254,7 +254,7 @@
       <ActiveTag tag={new ActiveTagObject('~', 'princess_daisy', 6900, 'character')} />
     </div>
     <p>...then all results will have at least one of the princesses in them, but not neccessarily all of them.</p>
-    <div class="flex-row">Icon:<i class={`codicon codicon-${MODIFIERS_ICONS['~']}`} /></div>
+    <div class="flex-row">Icon:<i class={MODIFIERS_ICONS['~']} /></div>
   </li>
 </ul>
 

diff --git a/src/lib/modifier/ModifierSelect.svelte b/src/lib/modifier/ModifierSelect.svelte
@@ -1,43 +1,10 @@
 <script>
-  import { getNextModifier } from '../../types/tag-modifier/modifier'
-  import { createEventDispatcher } from 'svelte'
-  import onEnterOrSpace from '../common/onEnterOrSpace'
-  import { MODIFIERS_ICONS, MODIFIERS_HINTS } from './modifierData'
+  import { MODIFIERS_ICONS } from './modifierData'
+  import RotatingSelection from '../common/RotatingIconSelection.svelte'
+  import RotatingIconSelection from '../common/RotatingIconSelection.svelte'
 
   /** @type {import("../../types/tag-modifier/modifier").Modifier} */
-  let modifier = '+'
-
-  const dispatch = createEventDispatcher()
-  const changeModifier = () => {
-    modifier = getNextModifier(modifier)
-    dispatch('change', modifier)
-  }
+  export let modifier
 </script>
 
-<i
-  tabindex="0"
-  role="button"
-  class={`codicon codicon-${MODIFIERS_ICONS[modifier]}`}
-  title={MODIFIERS_HINTS[modifier]}
-  on:click={changeModifier}
-  on:keyup={onEnterOrSpace(changeModifier)}
-  on:touchend|preventDefault={changeModifier}
-/>
-
-<style>
-  i {
-    width: var(--line-height);
-    height: var(--line-height);
-    line-height: var(--line-height);
-    vertical-align: middle;
-    text-align: center;
-    font-size: var(--text-size-large);
-    transition: color var(--default-transition-behaviour);
-  }
-
-  @media (hover: hover) {
-    i:hover {
-      color: var(--text-highlight);
-    }
-  }
-</style>
+<RotatingIconSelection bind:value={modifier} options={MODIFIERS_ICONS} />
diff --git a/src/lib/modifier/modifierData.js b/src/lib/modifier/modifierData.js
@@ -1,7 +1,7 @@
 export const MODIFIERS_ICONS = Object.freeze({
-  '+': 'plus',
-  '-': 'circle-slash',
-  '~': 'record',
+  '+': 'codicon codicon-plus',
+  '-': 'codicon codicon-circle-slash',
+  '~': 'codicon codicon-record',
 })
 export const MODIFIERS_HINTS = Object.freeze({
   '+': 'Included. Tags will be included in the search.',

diff --git a/src/lib/preferences/Preferences.svelte b/src/lib/preferences/Preferences.svelte
@@ -3,10 +3,10 @@
   import PageHeading from '../common/text/PageHeading.svelte'
   import theme from '../theme/theme'
   import blockedContent from './blockedContentStore'
-  import Checkbox from './Checkbox.svelte'
+  import Checkbox from '../common/Checkbox.svelte'
   import { isPersistedLocally } from './persistLocally'
   import Preference from './Preference.svelte'
-  import Selection from './Selection.svelte'
+  import Selection from '../common/Selection.svelte'
 
   let isPersistedLocallyString = $isPersistedLocally ? 'true' : 'false'
 

diff --git a/src/lib/search/ResultsHeader.svelte b/src/lib/search/ResultsHeader.svelte
@@ -1,59 +1,15 @@
 <script>
   import { formatCount } from '../../formatting/formatCount'
-  import onEnterOrSpace from '../common/onEnterOrSpace'
-  import sortStore from './sortStore'
+
   import countStore from './countStore'
-  import { createEventDispatcher } from 'svelte'
 
-  const dispatch = createEventDispatcher()
+  import SortFilterEditor from './SortFilterEditor.svelte'
 </script>
 
 <div class="container">
   <span title={`${$countStore} results`}>{formatCount($countStore)} results</span>
 
-  <div class="config">
-    <div class="group">
-      <i class="codicon codicon-list-ordered" />
-      <select
-        class="select-sort-property"
-        bind:value={$sortStore.sortProperty}
-        title="Sort results by"
-        on:change={() => dispatch('configchange')}
-      >
-        <option value="id">Upload</option>
-        <option value="score">Score</option>
-        <option value="updated">Change</option>
-      </select>
-    </div>
-
-    <div class="group">
-      <i class="codicon codicon-arrow-swap" />
-      <select
-        class="select-sort-direction"
-        bind:value={$sortStore.sortDirection}
-        title="Order ascening or descenfing"
-        on:change={() => dispatch('configchange')}
-      >
-        <option value="desc">Desc</option>
-        <option value="asc">Asc</option>
-      </select>
-    </div>
-
-    <div class="group">
-      <i class="codicon codicon-filter" />
-
-      <span>Score ≥ &ThinSpace;</span>
-      <input
-        type="number"
-        min={0}
-        max={100000}
-        step={1}
-        bind:value={$sortStore.minScore}
-        on:keyup={onEnterOrSpace((event) => event.target.blur())}
-        on:blur={() => dispatch('configchange')}
-      />
-    </div>
-  </div>
+  <SortFilterEditor />
 </div>
 
 <style>
@@ -73,53 +29,8 @@
     }
   }
 
-  .config {
-    display: flex;
-    gap: var(--grid-gap);
-  }
-
-  select {
-    appearance: none;
-  }
-
-  i {
-    margin-inline-end: 4px;
-  }
-
-  .group {
-    display: inline-flex;
-    align-items: center;
-  }
-
-  .codicon-arrow-swap {
-    transform: rotate(90deg);
-  }
-
   span {
     flex-grow: 1;
     white-space: nowrap;
   }
-
-  select {
-    background-color: unset;
-    border: unset;
-    color: var(--text);
-    transition: color var(--default-transition-behaviour);
-  }
-
-  @media (hover: hover) {
-    select:hover {
-      color: var(--text-highlight);
-    }
-  }
-
-  select option {
-    background-color: var(--background-1);
-    border-color: var(--background-2);
-  }
-
-  input {
-    width: 3rem;
-    background-color: transparent;
-  }
 </style>