feat: tag search

src/element/search.tsx

@@ -1,35 +1,27 @@
-import { useNavigate, useParams } from "react-router-dom";
-import { Categories } from "../const";
+import { useNavigate } from "react-router-dom";
 import { useEffect, useState } from "react";
 
-export function Search() {
-  const params = useParams();
+export function Search(params: { term?: string; tags?: Array<string> }) {
   const navigate = useNavigate();
   const [term, setTerm] = useState("");
+  const [tags, setTags] = useState<Array<string>>([]);
 
   useEffect(() => {
     setTerm(params.term ?? "");
-  }, [params.term]);
+    setTags(params.tags ?? []);
+  }, [params]);
 
   return (
-    <div className="flex flex-col gap-1">
-      <div className="flex gap-3 flex-wrap">
-        {Categories.map((a) => (
-          <div className="flex gap-1" key={a.tag}>
-            <input type="checkbox" />
-            <label>{a.name}</label>
-          </div>
-        ))}
-      </div>
+    <div>
       <input
         type="text"
         placeholder="Search.."
-        className="p-3 rounded grow"
+        className="p-3 rounded w-full"
         value={term}
         onChange={(e) => setTerm(e.target.value)}
         onKeyDown={(e) => {
           if (e.key == "Enter") {
-            navigate(`/search/${encodeURIComponent(term)}`);
+            navigate(`/search/${encodeURIComponent(term)}${tags.length > 0 ? `?tags=${tags.join(",")}` : ""}`);
           }
         }}
       />

src/element/torrent-list.tsx

@@ -10,7 +10,7 @@ export function TorrentList({ items }: { items: Array<TaggedNostrEvent> }) {
   return (
     <table className="torrent-list">
       <thead>
-        <tr>
+        <tr className="bg-slate-600">
           <th>Category</th>
           <th>Name</th>
           <th>Uploaded</th>
@@ -37,12 +37,26 @@ function TorrentTableEntry({ item }: { item: TaggedNostrEvent }) {
     .reduce((acc, v) => (acc += v), 0);
   const npub = hexToBech32("npub", item.pubkey);
   return (
-    <tr>
+    <tr className="hover:bg-slate-800">
       <td>
         {item.tags
           .filter((a) => a[0] === "t")
-          .map((a) => a[1])
-          .join(" > ")}
+          .slice(0, 3)
+          .map((a, i, arr) => (
+            <>
+              <Link
+                to={`/search/?tags=${encodeURIComponent(
+                  arr
+                    .slice(0, i + 1)
+                    .map((b) => b[1])
+                    .join(","),
+                )}`}
+              >
+                {a[1]}
+              </Link>
+              {arr.length !== i + 1 && " > "}
+            </>
+          ))}
       </td>
       <td>
         <Link to={`/e/${NostrLink.fromEvent(item).encode()}`} state={item}>

src/page/home.tsx

@@ -3,9 +3,9 @@ import { LatestTorrents } from "../element/trending";
 
 export function HomePage() {
   return (
-    <>
+    <div className="flex flex-col gap-2">
       <Search />
       <LatestTorrents />
-    </>
+    </div>
   );
 }

src/page/profile.tsx

@@ -11,10 +11,10 @@ export function ProfilePage() {
 
   if (!link) return;
   return (
-    <>
+    <div className="flex flex-col gap-2">
       <ProfileSection pubkey={link.id} />
       <LatestTorrents author={link.id} />
-    </>
+    </div>
   );
 }
 

src/page/search.tsx

@@ -1,5 +1,5 @@
 import { NoteCollection, RequestBuilder } from "@snort/system";
-import { useParams } from "react-router-dom";
+import { useLocation, useParams } from "react-router-dom";
 import { TorrentKind } from "../const";
 import { useRequestBuilder } from "@snort/system-react";
 import { TorrentList } from "../element/torrent-list";
@@ -7,22 +7,29 @@ import { Search } from "../element/search";
 
 export function SearchPage() {
   const params = useParams();
+  const location = useLocation();
   const term = params.term as string | undefined;
+  const q = new URLSearchParams(location.search ?? "");
+  const tags = q.get("tags")?.split(",") ?? [];
 
-  const rb = new RequestBuilder(`search:${term}`);
-  rb.withFilter()
+  const rb = new RequestBuilder(`search:${term}+${tags.join(",")}`);
+  const f = rb
+    .withFilter()
     .kinds([TorrentKind])
     .search(term)
     .limit(100)
     .relay(["wss://relay.nostr.band", "wss://relay.noswhere.com"]);
+  if (tags.length > 0) {
+    f.tag("t", tags);
+  }
 
   const data = useRequestBuilder(NoteCollection, rb);
 
   return (
-    <>
-      <Search />
+    <div className="flex flex-col gap-2">
+      <Search term={term} tags={tags} />
       <h2>Search Results:</h2>
       <TorrentList items={data.data ?? []} />
-    </>
+    </div>
   );
 }