feat: filter follow sets

packages/app/src/Pages/Root/FollowSets.tsx

@@ -1,10 +1,12 @@
 import { dedupe } from "@snort/shared";
 import { EventKind, NostrLink, RequestBuilder } from "@snort/system";
 import { useRequestBuilder } from "@snort/system-react";
-import { FormattedMessage } from "react-intl";
+import { useState } from "react";
+import { FormattedMessage, useIntl } from "react-intl";
 import { Link } from "react-router-dom";
 
 import AsyncButton from "@/Components/Button/AsyncButton";
+import { AutoLoadMore } from "@/Components/Event/LoadMore";
 import { AvatarGroup } from "@/Components/User/AvatarGroup";
 import DisplayName from "@/Components/User/DisplayName";
 import { ProfileLink } from "@/Components/User/ProfileLink";
@@ -15,15 +17,32 @@ import { findTag } from "@/Utils";
 export default function FollowSetsPage() {
   const sub = new RequestBuilder("follow-sets");
   sub.withFilter().kinds([EventKind.StarterPackSet, EventKind.FollowSet]);
+  const { formatMessage } = useIntl();
 
   const data = useRequestBuilder(sub);
   const wot = useWoT();
   const control = useFollowsControls();
   const dataSorted = wot.sortEvents(data);
+  const [showN, setShowN] = useState(10);
+  const [search, setSearch] = useState("");
 
+  const filtered = dataSorted.filter(s => {
+    if (search) {
+      const ss = search.toLowerCase();
+      return s.content.toLowerCase().includes(ss) || s.tags.some(t => t[1].toLowerCase().includes(ss));
+    } else {
+      return true;
+    }
+  });
   return (
     <div className="p flex flex-col gap-4">
-      {dataSorted.map(a => {
+      <input
+        type="text"
+        placeholder={formatMessage({ defaultMessage: "Search sets.." })}
+        value={search}
+        onChange={e => setSearch(e.target.value)}
+      />
+      {filtered.slice(0, showN).map(a => {
         const title = findTag(a, "title") ?? findTag(a, "d") ?? a.content;
         const pTags = wot.sortPubkeys(dedupe(a.tags.filter(a => a[0] === "p").map(a => a[1])));
         const isFollowingAll = pTags.every(a => control.isFollowing(a));
@@ -75,6 +94,7 @@ export default function FollowSetsPage() {
           </div>
         );
       })}
+      {filtered.length > showN && <AutoLoadMore onClick={() => setShowN(n => n + 10)} />}
     </div>
   );
 }

packages/app/src/lang.json

@@ -474,6 +474,9 @@
   "9WRlF4": {
     "defaultMessage": "Send"
   },
+  "9WTAKy": {
+    "defaultMessage": "Search sets.."
+  },
   "9kO0VQ": {
     "defaultMessage": "Hide muted notes"
   },

packages/app/src/translations/en.json

@@ -157,6 +157,7 @@
   "9SvQep": "Follows {n}",
   "9V0wg3": "Calendar Event RSVP",
   "9WRlF4": "Send",
+  "9WTAKy": "Search sets..",
   "9kO0VQ": "Hide muted notes",
   "9kSari": "Retry publishing",
   "9pMqYs": "Nostr Address",