From f58f8f410c86bed8249f7dbfba862e3969f27940 Mon Sep 17 00:00:00 2001
From: Jonathan Staab <shtaab@gmail.com>
Date: Fri, 16 Jun 2023 14:11:15 -0700
Subject: [PATCH] Allow removing filters from feed summary

---
 src/app/shared/Feed.svelte          |  4 ++--
 src/app/shared/FilterSummary.svelte | 30 +++++++++++++++++------------
 src/app/shared/NoteContent.svelte   |  2 ++
 src/partials/Chip.svelte            |  2 +-
 src/partials/Media.svelte           |  2 +-
 src/util/misc.ts                    |  4 ++--
 6 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/src/app/shared/Feed.svelte b/src/app/shared/Feed.svelte
index 826e9752..a32c667f 100644
--- a/src/app/shared/Feed.svelte
+++ b/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>
diff --git a/src/app/shared/FilterSummary.svelte b/src/app/shared/FilterSummary.svelte
index 2298e4b3..6554fb16 100644
--- a/src/app/shared/FilterSummary.svelte
+++ b/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>
diff --git a/src/app/shared/NoteContent.svelte b/src/app/shared/NoteContent.svelte
index 4bbec771..4e72d916 100644
--- a/src/app/shared/NoteContent.svelte
+++ b/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 = []
diff --git a/src/partials/Chip.svelte b/src/partials/Chip.svelte
index daabb7b6..c2b40b73 100644
--- a/src/partials/Chip.svelte
+++ b/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}
diff --git a/src/partials/Media.svelte b/src/partials/Media.svelte
index 54ce39a0..39c3d3e1 100644
--- a/src/partials/Media.svelte
+++ b/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"}
diff --git a/src/util/misc.ts b/src/util/misc.ts
index 8e1325c2..64e71c99 100644
--- a/src/util/misc.ts
+++ b/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}