Improve feed controls update

CHANGELOG.md

@@ -13,6 +13,7 @@
 - [x] Add experimental DVM code
 - [x] Disable NIP 24 messages for now
 - [x] Use NIP 85 for relay reviews
+- [x] Improve feed controls UX
 
 # 0.3.11
 

package.json

@@ -58,7 +58,7 @@
     "normalize-url": "^8.0.0",
     "nostr-tools": "^1.12.1",
     "npm-run-all": "^4.1.5",
-    "paravel": "^0.4.4",
+    "paravel": "^0.4.5",
     "qr-scanner": "^1.4.2",
     "qrcode": "^1.5.1",
     "ramda": "^0.28.0",

src/app/Routes.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import {reverse} from "ramda"
   import {fly} from "src/util/transition"
-  import {getProps} from "src/util/router"
+  import {getProps, getKey} from "src/util/router"
   import Modal from "src/partials/Modal.svelte"
   import {menuIsOpen} from "src/app/state"
   import {router} from "src/app/router"
@@ -32,7 +32,7 @@
 {#key $stateKey}
   <div class="pt-16 text-gray-2 lg:ml-48" class:pointer-events-none={$menuIsOpen}>
     {#if $page}
-      {#key $page.path}
+      {#key getKey($page)}
         <div in:fly={{y: 20}}>
           <svelte:component this={$page.route.component} {...getProps($page)} />
         </div>
@@ -41,7 +41,7 @@
   </div>
 {/key}
 
-{#each reverse($modals).filter(m => !m.config.virtual) as m, i (m.path + i)}
+{#each reverse($modals).filter(m => !m.config.virtual) as m, i (getKey(m) + i)}
   <Modal
     index={i}
     virtual={false}

src/app/shared/Feed.svelte

@@ -65,6 +65,12 @@
     }
   }
 
+  const updateFilter = newFilter => {
+    filter = newFilter
+
+    start()
+  }
+
   hideReplies.subscribe($hideReplies => {
     start()
     Storage.setJson("hideReplies", $hideReplies)
@@ -84,7 +90,7 @@
 
 <Content size="inherit" gap="gap-6">
   {#if !hideControls}
-    <FeedControls {hideReplies} {filter} {relays}>
+    <FeedControls {hideReplies} {filter} {relays} {updateFilter}>
       <slot name="controls" slot="controls" />
     </FeedControls>
   {/if}

src/app/shared/FeedControls.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import {pluck, not, find, propEq, prop, equals, omit, objOf} from "ramda"
   import {displayList} from "hurdak"
-  import {debounce} from "throttle-debounce"
   import {createLocalDate, fuzzy, formatTimestampAsDate} from "src/util/misc"
   import {noteKinds} from "src/util/nostr"
+  import {getKey} from "src/util/router"
   import Chip from "src/partials/Chip.svelte"
   import Toggle from "src/partials/Toggle.svelte"
   import Input from "src/partials/Input.svelte"
@@ -28,6 +28,7 @@
   export let filter
   export let relays
   export let hideReplies
+  export let updateFilter
 
   type Kind = {
     kind: number
@@ -95,7 +96,14 @@
     return parts
   }
 
-  const onChange = filter => router.fromCurrent().qp({filter}).replace()
+  const onChange = filter => {
+    router
+      .fromCurrent()
+      .qp({filter})
+      .replace({key: getKey(router.page.get())})
+
+    updateFilter(filter)
+  }
 
   const removePart = keys => {
     filter = omit(keys, filter)
@@ -143,8 +151,6 @@
     onChange(newFilter)
   }
 
-  const applySearch = debounce(400, applyFilter)
-
   const clearSearch = () => {
     _filter.search = ""
     applyFilter()
@@ -238,7 +244,7 @@
       <Content size="lg">
         <div class="flex flex-col gap-1">
           <strong>Search</strong>
-          <Input autofocus bind:value={_filter.search} on:input={applySearch}>
+          <Input autofocus bind:value={_filter.search}>
             <i slot="before" class="fa fa-search" />
             <i slot="after" class="fa fa-times cursor-pointer" on:click={clearSearch} />
           </Input>
@@ -284,10 +290,10 @@
             <strong>Mentions</strong>
             <PersonMultiSelect bind:value={_filter["#p"]} />
           </div>
-          <div class="flex justify-end">
-            <Anchor theme="button-accent" on:click={submit}>Apply Filters</Anchor>
-          </div>
         {/if}
+        <div class="flex justify-end">
+          <Anchor theme="button-accent" on:click={submit}>Apply Filters</Anchor>
+        </div>
       </Content>
     </form>
   </Modal>

src/util/router.ts

@@ -33,6 +33,7 @@ export type RouteConfig = {
   noEscape?: boolean
   replace?: boolean
   context?: Record<string, any>
+  key?: string
 }
 
 export type HistoryItem = {
@@ -82,6 +83,8 @@ export const decodeRouteParams = ({params, route}: HistoryItem) => {
   return data
 }
 
+export const getKey = (item: HistoryItem) => item.config.key || item.path
+
 export const getProps = (item: HistoryItem) => ({
   ...decodeRouteParams(item),
   ...decodeQueryString(item),
@@ -214,7 +217,7 @@ export class Router {
     this.routes.push({path, component, serializers, requireUser})
   }
 
-  go(path, config: HistoryItem["config"] = {}) {
+  go(path, config: RouteConfig = {}) {
     const match = pick(this.routes, path)
 
     if (!match) {