feat: search profiles

src/Element/ProfilePreview.tsx

@@ -12,7 +12,8 @@ export interface ProfilePreviewProps {
     options?: {
         about?: boolean
     },
-    actions?: ReactNode
+    actions?: ReactNode,
+    className?: string
 }
 export default function ProfilePreview(props: ProfilePreviewProps) {
     const pubkey = props.pubkey;
@@ -24,7 +25,7 @@ export default function ProfilePreview(props: ProfilePreviewProps) {
     };
 
     return (
-        <div className="profile-preview" ref={ref}>
+        <div className={`profile-preview${props.className ? ` ${props.className}` : ""}`} ref={ref}>
             {inView && <>
                 <ProfileImage pubkey={pubkey} subHeader=
                     {options.about ? <div className="f-ellipsis about">

src/Element/Timeline.tsx

@@ -8,6 +8,7 @@ import Note from "Element/Note";
 import NoteReaction from "Element/NoteReaction";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faForward } from "@fortawesome/free-solid-svg-icons";
+import ProfilePreview from "./ProfilePreview";
 
 export interface TimelineProps {
     postsOnly: boolean,
@@ -37,6 +38,9 @@ export default function Timeline({ subject, postsOnly = false, method }: Timelin
 
     function eventElement(e: TaggedRawEvent) {
         switch (e.kind) {
+            case EventKind.SetMetadata: {
+                return <ProfilePreview pubkey={e.pubkey} className="card"/>
+            }
             case EventKind.TextNote: {
                 return <Note key={e.id} data={e} related={related.notes} />
             }

src/Feed/TimelineFeed.ts

@@ -48,6 +48,7 @@ export default function useTimelineFeed(subject: TimelineSubject, options: Timel
                 break;
             }
             case "keyword": {
+                sub.Kinds.add(EventKind.SetMetadata);
                 sub.Search = subject.items[0];
                 break;
             }

src/index.css

@@ -328,6 +328,10 @@ body.scroll-lock {
   margin-bottom: 10px;
 }
 
+.mb20 {
+  margin-bottom: 20px;
+}
+
 .mr-auto {
   margin-right: auto;
 }