Allow removing filters from feed summary

src/app/shared/Feed.svelte

@@ -185,7 +185,7 @@
 
 <Content size="inherit" gap="gap-6">
   {#if notesBuffer.length > 0}
-    <div class="pointer-events-none fixed left-0 top-0 z-10 mt-20 flex w-full justify-center">
+    <div class="pointer-events-none fixed left-0 bottom-0 z-10 mb-8 flex w-full justify-center">
       <button
         in:fly={{y: 20}}
         class="pointer-events-auto cursor-pointer rounded-full border border-solid
@@ -199,7 +199,7 @@
 
   {#if !hideControls}
     <div class="flex justify-between gap-4" in:fly={{y: 20}}>
-      <FilterSummary {filter} />
+      <FilterSummary {filter} onChange={start} />
       <FeedAdvanced {filter} onChange={start}>
         <slot name="controls" slot="controls" />
       </FeedAdvanced>

src/app/shared/FilterSummary.svelte

@@ -1,10 +1,12 @@
 <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
@@ -17,45 +19,49 @@
     const parts = []
 
     if (typeof filter.authors === "string") {
-      parts.push(`From ${filter.authors}`)
+      parts.push({keys: null, label: `From ${filter.authors}`})
     } else if (filter.authors?.length > 0) {
-      parts.push(`By ${displayPeople(filter.authors)}`)
+      parts.push({keys: null, label: `By ${displayPeople(filter.authors)}`})
     }
 
     if (filter["#p"]?.length > 0) {
-      parts.push(`Mentioning ${displayPeople(filter["#p"])}`)
+      parts.push({keys: ["#p"], label: `Mentioning ${displayPeople(filter["#p"])}`})
     }
 
     if (filter["#t"]?.length > 0) {
-      parts.push(`Related to ${displayTopics(filter["#t"])}`)
+      parts.push({keys: ["#t"], label: `Related to ${displayTopics(filter["#t"])}`})
     }
 
     if (filter.search) {
-      parts.push(`Matching ${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(`Between ${since} and ${until}`)
+      parts.push({keys: ["since", "until"], label: `Between ${since} and ${until}`})
     } else if (filter.since) {
-      parts.push(`After ${formatTimestampAsDate(filter.since)}`)
+      parts.push({keys: ["since"], label: `After ${formatTimestampAsDate(filter.since)}`})
     } else if (filter.until) {
-      parts.push(`Before ${formatTimestampAsDate(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>
+<div class="flex-grow">
   {#if parts.length > 0}
-    <span class="mr-2 mb-2"> Showing notes: </span>
+    <div class="mr-2 mb-2 inline-block py-1">Showing notes:</div>
   {/if}
-  {#each parts as part}
-    <Chip class="mr-2 mb-2">{part}</Chip>
+  {#each parts as { keys, label }}
+    <Chip class="mr-2 mb-2" onClick={keys ? () => removePart(keys) : null}>{label}</Chip>
   {/each}
 </div>

src/app/shared/NoteContent.svelte

@@ -29,6 +29,8 @@
   let content = parseContent(note)
   let rating = note.kind === 1985 ? getLabelQuality("review/relay", note) : null
 
+  console.log(content)
+
   const links = []
   const invoices = []
   const ranges = []

src/partials/Chip.svelte

@@ -11,7 +11,7 @@
 </script>
 
 <div class={className}>
-  <div class="flex items-center gap-2">
+  <div class="flex items-center gap-2 whitespace-nowrap">
     {#if onClick}
       <i class="fa fa-times cursor-pointer" on:click|preventDefault={onClick} />
     {/if}

src/partials/Media.svelte

@@ -34,7 +34,7 @@
   href={onClick ? null : link.url}
   on:click={onClick}
   style="background-color: rgba(15, 15, 14, 0.5)"
-  class={cx("relative flex flex-col overflow-hidden rounded border border-solid border-gray-6")}>
+  class={cx("relative flex flex-col overflow-hidden rounded-xl border border-solid border-gray-6")}>
   {#if link.type === "image"}
     <img alt="Link preview" src={link.url} class="max-h-96 object-contain object-center" />
   {:else if link.type === "video"}

src/util/misc.ts

@@ -359,9 +359,9 @@ export class EventBus {
 }
 
 export const annotateMedia = url => {
-  if (url.match(".(jpg|jpeg|png|gif)")) {
+  if (url.match(/\.(jpg|jpeg|png|gif)/)) {
     return {type: "image", url}
-  } else if (url.match(".(mov|mp4)")) {
+  } else if (url.match(/\.(mov|mp4)/)) {
     return {type: "video", url}
   } else {
     return {type: "preview", url}