add people list to search and hashtag views

.changeset/smart-turkeys-tickle.md

@@ -0,0 +1,5 @@
+---
+"nostrudel": minor
+---
+
+Add people list to search and hashtag views

src/views/hashtag/index.tsx

@@ -15,7 +15,7 @@ import {
   useEditableControls,
 } from "@chakra-ui/react";
 import { CloseIcon } from "@chakra-ui/icons";
-import { useNavigate, useParams } from "react-router-dom";
+import { useLocation, useNavigate, useParams } from "react-router-dom";
 import { useAppTitle } from "../../hooks/use-app-title";
 import useTimelineLoader from "../../hooks/use-timeline-loader";
 import { isReply } from "../../helpers/nostr/events";
@@ -27,6 +27,8 @@ import useRelaysChanged from "../../hooks/use-relays-changed";
 import TimelinePage, { useTimelinePageEventFilter } from "../../components/timeline-page";
 import TimelineViewTypeButtons from "../../components/timeline-page/timeline-view-type";
 import useClientSideMuteFilter from "../../hooks/use-client-side-mute-filter";
+import PeopleListProvider, { usePeopleListContext } from "../../providers/people-list-provider";
+import PeopleListSelection from "../../components/people-list-selection/people-list-selection";
 
 function EditableControls() {
   const { isEditing, getSubmitButtonProps, getCancelButtonProps, getEditButtonProps } = useEditableControls();
@@ -43,6 +45,7 @@ function EditableControls() {
 
 function HashTagPage() {
   const navigate = useNavigate();
+  const location = useLocation();
   const { hashtag } = useParams() as { hashtag: string };
   const [editableHashtag, setEditableHashtag] = useState(hashtag);
   useEffect(() => setEditableHashtag(hashtag), [hashtag]);
@@ -52,6 +55,7 @@ function HashTagPage() {
   const readRelays = useRelaySelectionRelays();
   const { isOpen: showReplies, onToggle } = useDisclosure();
 
+  const { listId, filter } = usePeopleListContext();
   const timelinePageEventFilter = useTimelinePageEventFilter();
   const muteFilter = useClientSideMuteFilter();
   const eventFilter = useCallback(
@@ -63,16 +67,16 @@ function HashTagPage() {
     [showReplies, muteFilter, timelinePageEventFilter],
   );
   const timeline = useTimelineLoader(
-    `${hashtag}-hashtag`,
+    `${listId ?? "global"}-${hashtag}-hashtag`,
     readRelays,
-    { kinds: [1], "#t": [hashtag] },
+    { kinds: [1], "#t": [hashtag], ...filter },
     { eventFilter },
   );
 
   useRelaysChanged(readRelays, () => timeline.reset());
 
   const header = (
-    <Flex gap="4" alignItems="center" wrap="wrap">
+    <Flex gap="2" alignItems="center" wrap="wrap">
       <Editable
         value={editableHashtag}
         onChange={(v) => setEditableHashtag(v)}
@@ -82,7 +86,7 @@ function HashTagPage() {
         gap="2"
         alignItems="center"
         selectAllOnFocus
-        onSubmit={(v) => navigate("/t/" + String(v).toLowerCase())}
+        onSubmit={(v) => navigate("/t/" + String(v).toLowerCase() + location.search)}
         flexShrink={0}
       >
         <div>
@@ -91,6 +95,7 @@ function HashTagPage() {
         <Input as={EditableInput} maxW="md" />
         <EditableControls />
       </Editable>
+      <PeopleListSelection />
       <RelaySelectionButton />
       <FormControl display="flex" alignItems="center" w="auto">
         <Switch id="show-replies" isChecked={showReplies} onChange={onToggle} mr="2" />
@@ -109,7 +114,9 @@ function HashTagPage() {
 export default function HashTagView() {
   return (
     <RelaySelectionProvider>
-      <HashTagPage />
+      <PeopleListProvider initList="global">
+        <HashTagPage />
+      </PeopleListProvider>
     </RelaySelectionProvider>
   );
 }

src/views/search/article-results.tsx

@@ -5,14 +5,16 @@ import useTimelineLoader from "../../hooks/use-timeline-loader";
 import { useTimelineCurserIntersectionCallback } from "../../hooks/use-timeline-cursor-intersection-callback";
 import IntersectionObserverProvider from "../../providers/intersection-observer";
 import GenericNoteTimeline from "../../components/timeline-page/generic-note-timeline";
+import { usePeopleListContext } from "../../providers/people-list-provider";
 
 export default function ArticleSearchResults({ search }: { search: string }) {
   const searchRelays = useRelaySelectionRelays();
+  const { listId, filter } = usePeopleListContext();
 
   const timeline = useTimelineLoader(
-    `${search}-article-search`,
+    `${listId ?? "global"}-${search}-article-search`,
     searchRelays,
-    { search: search || "", kinds: [Kind.Article] },
+    { search: search || "", kinds: [Kind.Article], ...filter },
     { enabled: !!search },
   );
 

src/views/search/community-results.tsx

@@ -8,6 +8,7 @@ import { getEventUID } from "../../helpers/nostr/events";
 import { NostrEvent } from "../../types/nostr-event";
 import CommunityCard from "../communities/components/community-card";
 import useSubject from "../../hooks/use-subject";
+import { usePeopleListContext } from "../../providers/people-list-provider";
 
 function CommunityResult({ community }: { community: NostrEvent }) {
   const ref = useRef<HTMLDivElement | null>(null);
@@ -22,11 +23,12 @@ function CommunityResult({ community }: { community: NostrEvent }) {
 
 export default function CommunitySearchResults({ search }: { search: string }) {
   const searchRelays = useRelaySelectionRelays();
+  const { listId, filter } = usePeopleListContext();
 
   const timeline = useTimelineLoader(
-    `${search}-community-search`,
+    `${listId ?? "global"}-${search}-community-search`,
     searchRelays,
-    { search: search || "", kinds: [COMMUNITY_DEFINITION_KIND] },
+    { search: search || "", kinds: [COMMUNITY_DEFINITION_KIND], ...filter },
     { enabled: !!search },
   );
 

src/views/search/index.tsx

@@ -17,6 +17,8 @@ import ProfileSearchResults from "./profile-results";
 import NoteSearchResults from "./note-results";
 import ArticleSearchResults from "./article-results";
 import CommunitySearchResults from "./community-results";
+import PeopleListProvider from "../../providers/people-list-provider";
+import PeopleListSelection from "../../components/people-list-selection/people-list-selection";
 
 export function SearchPage() {
   const navigate = useNavigate();
@@ -100,6 +102,7 @@ export function SearchPage() {
       </form>
 
       <Flex gap="2">
+        <PeopleListSelection size="sm" />
         <ButtonGroup size="sm" isAttached variant="outline" flexWrap="wrap">
           <Button
             leftIcon={<User01 />}
@@ -149,7 +152,9 @@ export function SearchPage() {
 export default function SearchView() {
   return (
     <RelaySelectionProvider overrideDefault={SEARCH_RELAYS}>
-      <SearchPage />
+      <PeopleListProvider initList="global">
+        <SearchPage />
+      </PeopleListProvider>
     </RelaySelectionProvider>
   );
 }

src/views/search/note-results.tsx

@@ -5,14 +5,16 @@ import useTimelineLoader from "../../hooks/use-timeline-loader";
 import { useTimelineCurserIntersectionCallback } from "../../hooks/use-timeline-cursor-intersection-callback";
 import IntersectionObserverProvider from "../../providers/intersection-observer";
 import GenericNoteTimeline from "../../components/timeline-page/generic-note-timeline";
+import { usePeopleListContext } from "../../providers/people-list-provider";
 
 export default function NoteSearchResults({ search }: { search: string }) {
   const searchRelays = useRelaySelectionRelays();
+  const { listId, filter } = usePeopleListContext();
 
   const timeline = useTimelineLoader(
-    `${search}-note-search`,
+    `${listId ?? "global"}-${search}-note-search`,
     searchRelays,
-    { search: search || "", kinds: [Kind.Text] },
+    { search: search || "", kinds: [Kind.Text], ...filter },
     { enabled: !!search },
   );
 

src/views/search/profile-results.tsx

@@ -18,6 +18,7 @@ import useSubject from "../../hooks/use-subject";
 import { useTimelineCurserIntersectionCallback } from "../../hooks/use-timeline-cursor-intersection-callback";
 import IntersectionObserverProvider from "../../providers/intersection-observer";
 import TimelineActionAndStatus from "../../components/timeline-page/timeline-action-and-status";
+import { usePeopleListContext } from "../../providers/people-list-provider";
 
 function ProfileResult({ profile }: { profile: NostrEvent }) {
   const metadata = parseKind0Event(profile);
@@ -52,10 +53,11 @@ function ProfileResult({ profile }: { profile: NostrEvent }) {
 export default function ProfileSearchResults({ search }: { search: string }) {
   const searchRelays = useRelaySelectionRelays();
 
+  const { listId, filter } = usePeopleListContext();
   const timeline = useTimelineLoader(
-    `${search}-profile-search`,
+    `${listId ?? "global"}-${search}-profile-search`,
     searchRelays,
-    { search: search || "", kinds: [Kind.Metadata] },
+    { search: search || "", kinds: [Kind.Metadata], ...filter },
     { enabled: !!search },
   );