From 19d00412150db786d8442a8441aaae68c931a614 Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Tue, 21 Nov 2023 16:18:17 -0800
Subject: [PATCH] Tidy up feed controls

---
 src/app/shared/FeedControls.svelte | 95 ++++++++++++++----------------
 src/app/views/Feeds.svelte         |  2 +-
 src/util/notes.ts                  |  6 +-
 3 files changed, 48 insertions(+), 55 deletions(-)

diff --git a/src/app/shared/FeedControls.svelte b/src/app/shared/FeedControls.svelte
index 5b8381bd..e2cc7c08 100644
--- a/src/app/shared/FeedControls.svelte
+++ b/src/app/shared/FeedControls.svelte
@@ -176,11 +176,11 @@
   })
 
   const open = () => {
-    modal = "maxi"
+    isOpen = true
   }
 
   const onEscape = () => {
-    modal = null
+    isOpen = false
   }
 
   const submit = () => {
@@ -188,7 +188,7 @@
     applyFilter()
   }
 
-  let modal = null
+  let isOpen = false
   let scopeOptions = []
   let _filter: {
     kinds?: Kind[]
@@ -211,17 +211,12 @@
 </script>
 
 <div>
-  <div class="float-right flex justify-end gap-1">
-    <div class="flex items-center gap-1">
+  <div class="float-right flex justify-end">
+    <div class="flex items-center gap-1 pr-2">
       <Toggle scale={0.6} value={!$hideReplies} on:change={toggleReplies} />
       <small class="text-gray-3">Show replies</small>
     </div>
-    <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} />
+    <i class="fa fa-search cursor-pointer p-2" on:click={open} />
     <slot name="controls" />
   </div>
   {#if parts.length > 0 || relays.length > 0}
@@ -239,8 +234,8 @@
   {/if}
 </div>
 
-{#if modal}
-  <Modal {onEscape} mini={modal === "mini"}>
+{#if isOpen}
+  <Modal {onEscape}>
     <form on:submit|preventDefault={submit}>
       <Content size="lg">
         <div class="flex flex-col gap-1">
@@ -250,48 +245,46 @@
             <i slot="after" class="fa fa-times cursor-pointer" on:click={clearSearch} />
           </Input>
         </div>
-        {#if modal === "maxi"}
-          <div class="grid grid-cols-2 gap-2">
-            <div class="flex flex-col gap-1">
-              <strong>Since</strong>
-              <DateInput bind:value={_filter.since} />
-            </div>
-            <div class="flex flex-col gap-1">
-              <strong>Until</strong>
-              <DateInput bind:value={_filter.until} />
-            </div>
+        <div class="grid grid-cols-2 gap-2">
+          <div class="flex flex-col gap-1">
+            <strong>Since</strong>
+            <DateInput bind:value={_filter.since} />
           </div>
           <div class="flex flex-col gap-1">
-            <strong>Kinds</strong>
-            <MultiSelect search={searchKinds} bind:value={_filter.kinds} getKey={prop("kind")}>
-              <div slot="item" let:item>{item.label} (kind {item.kind})</div>
-            </MultiSelect>
+            <strong>Until</strong>
+            <DateInput bind:value={_filter.until} />
           </div>
-          <div class="flex flex-col gap-1">
-            <strong>Authors</strong>
-            <SelectButton
-              onChange={onScopeChange}
-              value={typeof _filter.authors === "string" ? _filter.authors : "custom"}
-              options={scopeOptions} />
-            {#if Array.isArray(_filter.authors)}
-              <PersonMultiSelect bind:value={_filter.authors} />
-            {/if}
-          </div>
-          <div class="flex flex-col gap-1">
-            <strong>Topics</strong>
-            <MultiSelect search={$searchTopics} bind:value={_filter["#t"]}>
-              <div slot="item" let:item>
-                <div class="-my-1">
-                  #{item.name}
-                </div>
+        </div>
+        <div class="flex flex-col gap-1">
+          <strong>Kinds</strong>
+          <MultiSelect search={searchKinds} bind:value={_filter.kinds} getKey={prop("kind")}>
+            <div slot="item" let:item>{item.label} (kind {item.kind})</div>
+          </MultiSelect>
+        </div>
+        <div class="flex flex-col gap-1">
+          <strong>Authors</strong>
+          <SelectButton
+            onChange={onScopeChange}
+            value={typeof _filter.authors === "string" ? _filter.authors : "custom"}
+            options={scopeOptions} />
+          {#if Array.isArray(_filter.authors)}
+            <PersonMultiSelect bind:value={_filter.authors} />
+          {/if}
+        </div>
+        <div class="flex flex-col gap-1">
+          <strong>Topics</strong>
+          <MultiSelect search={$searchTopics} bind:value={_filter["#t"]}>
+            <div slot="item" let:item>
+              <div class="-my-1">
+                #{item.name}
               </div>
-            </MultiSelect>
-          </div>
-          <div class="flex flex-col gap-1">
-            <strong>Mentions</strong>
-            <PersonMultiSelect bind:value={_filter["#p"]} />
-          </div>
-        {/if}
+            </div>
+          </MultiSelect>
+        </div>
+        <div class="flex flex-col gap-1">
+          <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>
diff --git a/src/app/views/Feeds.svelte b/src/app/views/Feeds.svelte
index 0dd115b7..d06075f9 100644
--- a/src/app/views/Feeds.svelte
+++ b/src/app/views/Feeds.svelte
@@ -64,7 +64,7 @@
         {#if $canSign}
           {#if $userLists.length > 0}
             <Popover placement="bottom" opts={{hideOnClick: true}} theme="transparent">
-              <i slot="trigger" class="fa fa-ellipsis-v cursor-pointer p-2" />
+              <i slot="trigger" class="fa fa-scroll cursor-pointer p-2" />
               <div
                 slot="tooltip"
                 class="flex flex-col items-start overflow-hidden rounded border border-solid border-gray-8 bg-black">
diff --git a/src/util/notes.ts b/src/util/notes.ts
index 541bbe69..490e2fc1 100644
--- a/src/util/notes.ts
+++ b/src/util/notes.ts
@@ -20,7 +20,7 @@ export const urlIsMedia = (url: string) =>
 
 export const parseContent = ({content, tags = []}: {content: string; tags?: string[][]}) => {
   const result: any[] = []
-  let text = content.trim() || new Tags(tags).getValue('alt') || ""
+  let text = content.trim() || new Tags(tags).getValue("alt") || ""
   let buffer = ""
 
   const parseNewline = () => {
@@ -59,7 +59,7 @@ export const parseContent = ({content, tags = []}: {content: string; tags?: stri
   }
 
   const parseTopic = () => {
-    const topic = first(text.match(/^#\w+/i))
+    const topic: string = first(text.match(/^#\w+/i))
 
     // Skip numeric topics
     if (topic && !topic.match(/^#\d+$/)) {
@@ -100,7 +100,7 @@ export const parseContent = ({content, tags = []}: {content: string; tags?: stri
   }
 
   const parseUrl = () => {
-    const raw = first(
+    const raw: string = first(
       text.match(/^([a-z\+:]{2,30}:\/\/)?[^<>\(\)\s]+\.[a-z]{2,6}[^\s]*[^<>"'\.!?,:\s]/gi)
     )