Fix filter pill layout

src/app/shared/Feed.svelte

@@ -10,8 +10,7 @@
   import Spinner from "src/partials/Spinner.svelte"
   import Modal from "src/partials/Modal.svelte"
   import Content from "src/partials/Content.svelte"
-  import FilterSummary from "src/app/shared/FilterSummary.svelte"
-  import FeedAdvanced from "src/app/shared/FeedAdvanced.svelte"
+  import FeedControls from "src/app/shared/FeedControls.svelte"
   import RelayFeed from "src/app/shared/RelayFeed.svelte"
   import Note from "src/app/shared/Note.svelte"
   import user from "src/agent/user"
@@ -198,12 +197,9 @@
   {/if}
 
   {#if !hideControls}
-    <div class="flex justify-between gap-4" in:fly={{y: 20}}>
-      <FilterSummary {filter} onChange={start} />
-      <FeedAdvanced {filter} onChange={start}>
-        <slot name="controls" slot="controls" />
-      </FeedAdvanced>
-    </div>
+    <FeedControls {filter} onChange={start}>
+      <slot name="controls" slot="controls" />
+    </FeedControls>
   {/if}
 
   <div class="flex flex-col gap-4">

src/app/shared/FeedControls.svelte

@@ -1,8 +1,11 @@
 <script lang="ts">
   import type {DynamicFilter} from "src/util/types"
-  import {pluck, objOf} from "ramda"
+  import {fly} from "svelte/transition"
+  import {pluck, omit, objOf} from "ramda"
   import {debounce} from "throttle-debounce"
-  import {createLocalDate} from "src/util/misc"
+  import {createLocalDate, formatTimestampAsDate} from "src/util/misc"
+  import {displayPerson} from "src/util/nostr"
+  import Chip from "src/partials/Chip.svelte"
   import Input from "src/partials/Input.svelte"
   import Anchor from "src/partials/Anchor.svelte"
   import Modal from "src/partials/Modal.svelte"
@@ -16,6 +19,52 @@
   export let filter
   export let onChange
 
+  const displayPeople = pubkeys =>
+    pubkeys.length === 1
+      ? displayPerson(getPersonWithFallback(pubkeys[0]))
+      : `${pubkeys.length} people`
+
+  const displayTopics = topics => (topics.length === 1 ? topics[0] : `${topics.length} topics`)
+
+  const getFilterParts = f => {
+    const parts = []
+
+    if (typeof filter.authors === "string") {
+      parts.push({keys: null, label: `From ${filter.authors}`})
+    } else if (filter.authors?.length > 0) {
+      parts.push({keys: null, label: `By ${displayPeople(filter.authors)}`})
+    }
+
+    if (filter["#p"]?.length > 0) {
+      parts.push({keys: ["#p"], label: `Mentioning ${displayPeople(filter["#p"])}`})
+    }
+
+    if (filter["#t"]?.length > 0) {
+      parts.push({keys: ["#t"], label: `Related to ${displayTopics(filter["#t"])}`})
+    }
+
+    if (filter.search) {
+      parts.push({keys: ["search"], label: `Matching ${filter.search}`})
+    }
+
+    if (filter.since && filter.until) {
+      const since = formatTimestampAsDate(filter.since)
+      const until = formatTimestampAsDate(filter.until)
+
+      parts.push({keys: ["since", "until"], label: `Between ${since} and ${until}`})
+    } else if (filter.since) {
+      parts.push({keys: ["since"], label: `After ${formatTimestampAsDate(filter.since)}`})
+    } else if (filter.until) {
+      parts.push({keys: ["until"], label: `Before ${formatTimestampAsDate(filter.until)}`})
+    }
+
+    return parts
+  }
+
+  const removePart = keys => {
+    onChange(omit(keys, filter))
+  }
+
   const applyFilter = () => {
     const newFilter = {} as DynamicFilter
 
@@ -68,7 +117,6 @@
   }
 
   const submit = () => {
-    console.log("====")
     onEscape()
     applyFilter()
   }
@@ -86,6 +134,8 @@
     "#p": (filter["#p"] || []).map(getPersonWithFallback),
   }
 
+  $: parts = getFilterParts(filter)
+
   $: {
     scopeOptions =
       getUserFollows().length > 0
@@ -94,14 +144,23 @@
   }
 </script>
 
-<div class="flex justify-end gap-1">
-  <i
-    class="fa fa-search cursor-pointer p-2"
-    on:click={() => {
-      modal = modal ? null : "mini"
-    }} />
-  <i class="fa fa-sliders cursor-pointer p-2" on:click={open} />
-  <slot name="controls" />
+<div in:fly={{y: 20}}>
+  <div class="float-right flex justify-end gap-1">
+    <i
+      class="fa fa-search cursor-pointer p-2"
+      on:click={() => {
+        modal = modal ? null : "mini"
+      }} />
+    <i class="fa fa-sliders cursor-pointer p-2" on:click={open} />
+    <slot name="controls" />
+  </div>
+  {#if parts.length > 0}
+    <div class="mr-2 mb-2 inline-block py-1">Showing notes:</div>
+  {/if}
+  {#each parts as { keys, label }}
+    <Chip class="mr-2 mb-2 inline-block" onClick={keys ? () => removePart(keys) : null}
+      >{label}</Chip>
+  {/each}
 </div>
 
 {#if modal}

src/app/shared/FilterSummary.svelte

@@ -1,67 +0,0 @@
-<script lang="ts">
-  import {omit} from "ramda"
-  import {formatTimestampAsDate} from "src/util/misc"
-  import {displayPerson} from "src/util/nostr"
-  import Chip from "src/partials/Chip.svelte"
-  import {getPersonWithFallback} from "src/agent/db"
-
-  export let filter
-  export let onChange
-
-  const displayPeople = pubkeys =>
-    pubkeys.length === 1
-      ? displayPerson(getPersonWithFallback(pubkeys[0]))
-      : `${pubkeys.length} people`
-
-  const displayTopics = topics => (topics.length === 1 ? topics[0] : `${topics.length} topics`)
-
-  const getFilterParts = f => {
-    const parts = []
-
-    if (typeof filter.authors === "string") {
-      parts.push({keys: null, label: `From ${filter.authors}`})
-    } else if (filter.authors?.length > 0) {
-      parts.push({keys: null, label: `By ${displayPeople(filter.authors)}`})
-    }
-
-    if (filter["#p"]?.length > 0) {
-      parts.push({keys: ["#p"], label: `Mentioning ${displayPeople(filter["#p"])}`})
-    }
-
-    if (filter["#t"]?.length > 0) {
-      parts.push({keys: ["#t"], label: `Related to ${displayTopics(filter["#t"])}`})
-    }
-
-    if (filter.search) {
-      parts.push({keys: ["search"], label: `Matching ${filter.search}`})
-    }
-
-    if (filter.since && filter.until) {
-      const since = formatTimestampAsDate(filter.since)
-      const until = formatTimestampAsDate(filter.until)
-
-      parts.push({keys: ["since", "until"], label: `Between ${since} and ${until}`})
-    } else if (filter.since) {
-      parts.push({keys: ["since"], label: `After ${formatTimestampAsDate(filter.since)}`})
-    } else if (filter.until) {
-      parts.push({keys: ["until"], label: `Before ${formatTimestampAsDate(filter.until)}`})
-    }
-
-    return parts
-  }
-
-  const removePart = keys => {
-    onChange(omit(keys, filter))
-  }
-
-  $: parts = getFilterParts(filter)
-</script>
-
-<div class="flex-grow">
-  {#if parts.length > 0}
-    <div class="mr-2 mb-2 inline-block py-1">Showing notes:</div>
-  {/if}
-  {#each parts as { keys, label }}
-    <Chip class="mr-2 mb-2" onClick={keys ? () => removePart(keys) : null}>{label}</Chip>
-  {/each}
-</div>