10 files changed, 34 insertions, 27 deletions
diff --git a/front/src/components/post/Body.tsx b/front/src/components/post/Body.tsx
index 2e4e2f8..e8b659c 100644
--- a/front/src/components/post/Body.tsx
+++ b/front/src/components/post/Body.tsx
@@ -6,7 +6,7 @@ import type {
   Media as MediaType,
   ExternalContent,
 } from "@/types/trill";
-import crow from "@/assets/icons/crow.svg";
+import Icon from "@/components/Icon";
 import type { PostProps } from "./Post";
 import Media from "./Media";
 import JSONContent, { YoutubeSnippet } from "./External";
@@ -168,7 +168,7 @@ function Ref({ r, nest }: { r: Reference; nest: number }) {
       nest: nest + 1,
       className: "quote-in-post",
     })(Quote);
-    return <Card logo={crow}>{comp}</Card>;
+    return <Card logo="crow">{comp}</Card>;
   }
   return <></>;
 }
diff --git a/front/src/components/post/Card.tsx b/front/src/components/post/Card.tsx
index 37f4911..9309423 100644
--- a/front/src/components/post/Card.tsx
+++ b/front/src/components/post/Card.tsx
@@ -1,8 +1,11 @@
-export default function ({ children, logo, cn}: { cn?: string; logo: string; children: any }) {
+import Icon from "@/components/Icon";
+import type { IconName } from "@/components/Icon";
+
+export default function ({ children, logo, cn}: { cn?: string; logo: IconName; children: any }) {
   const className = "trill-post-card" + (cn ? ` ${cn}`: "")
   return (
     <div className={className}>
-      <img src={logo} alt="" className="trill-post-card-logo" />
+      <Icon name={logo} size={20} className="trill-post-card-logo" />
       {children}
     </div>
   );
diff --git a/front/src/components/post/External.tsx b/front/src/components/post/External.tsx
index 0ea1500..d52aec7 100644
--- a/front/src/components/post/External.tsx
+++ b/front/src/components/post/External.tsx
@@ -1,5 +1,4 @@
 import type { ExternalContent } from "@/types/trill";
-import youtube from "@/assets/icons/youtube.svg";
 import Card from "./Card";
 
 interface JSONProps {
@@ -32,7 +31,7 @@ export function YoutubeSnippet({ href, id }: { href: string; id: string }) {
   const thumbnail = `https://i.ytimg.com/vi/${id}/hqdefault.jpg`;
   // todo styiling
   return (
-    <Card logo={youtube} cn="youtube-thumbnail">
+    <Card logo="youtube" cn="youtube-thumbnail">
       <a href={href}>
         <img src={thumbnail} alt="" />
       </a>
diff --git a/front/src/components/post/Footer.tsx b/front/src/components/post/Footer.tsx
index 3b48241..3e4bbdc 100644
--- a/front/src/components/post/Footer.tsx
+++ b/front/src/components/post/Footer.tsx
@@ -1,7 +1,5 @@
 import type { PostProps } from "./Post";
-import reply from "@/assets/icons/reply.svg";
-import quote from "@/assets/icons/quote.svg";
-import repost from "@/assets/icons/rt.svg";
+import Icon from "@/components/Icon";
 import { useState } from "react";
 import useLocalState from "@/state/state";
 import { useLocation } from "wouter";
@@ -15,7 +13,11 @@ function Footer({ poast, refetch }: PostProps) {
   const [_showMenu, setShowMenu] = useState(false);
   const [location, navigate] = useLocation();
   const [reposting, _setReposting] = useState(false);
-  const { api, setComposerData, setModal } = useLocalState();
+  const { api, setComposerData, setModal } = useLocalState((s) => ({
+    api: s.api,
+    setComposerData: s.setComposerData,
+    setModal: s.setModal,
+  }));
   const our = api!.airlock.our!;
   function doReply(e: React.MouseEvent) {
     e.stopPropagation();
@@ -126,13 +128,13 @@ function Footer({ poast, refetch }: PostProps) {
           <span role="link" onMouseUp={showReplyCount} className="reply-count">
             {displayCount(childrenCount)}
           </span>
-          <img role="link" onMouseUp={doReply} src={reply} alt="" />
+          <Icon name="reply" size={20} onClick={doReply} />
         </div>
         <div className="icon">
           <span role="link" onMouseUp={showQuoteCount} className="quote-count">
             {displayCount(poast.engagement.quoted.length)}
           </span>
-          <img role="link" onMouseUp={doQuote} src={quote} alt="" />
+          <Icon name="quote" size={20} onClick={doQuote} />
         </div>
         <div className="icon">
           <span
@@ -145,15 +147,15 @@ function Footer({ poast, refetch }: PostProps) {
           {reposting ? (
             <p>...</p>
           ) : myRP ? (
-            <img
-              role="link"
+            <Icon
+              name="repost"
+              size={20}
               className="my-rp"
-              onMouseUp={cancelRP}
-              src={repost}
+              onClick={cancelRP}
               title="cancel repost"
             />
           ) : (
-            <img role="link" onMouseUp={sendRP} src={repost} title="repost" />
+            <Icon name="repost" size={20} onClick={sendRP} title="repost" />
           )}
         </div>
         <div className="icon" role="link" onMouseUp={doReact}>
diff --git a/front/src/components/post/Header.tsx b/front/src/components/post/Header.tsx
index e541fa5..4e72fe8 100644
--- a/front/src/components/post/Header.tsx
+++ b/front/src/components/post/Header.tsx
@@ -4,7 +4,7 @@ import { useLocation } from "wouter";
 import useLocalState from "@/state/state";
 function Header(props: PostProps) {
   const [_, navigate] = useLocation();
-  const { profiles } = useLocalState();
+  const profiles = useLocalState((s) => s.profiles);
   const profile = profiles.get(props.poast.author);
   // console.log("profile", profile);
   // console.log(props.poast.author.length, "length");
diff --git a/front/src/components/post/Loader.tsx b/front/src/components/post/Loader.tsx
index f3c4715..a23bea1 100644
--- a/front/src/components/post/Loader.tsx
+++ b/front/src/components/post/Loader.tsx
@@ -14,7 +14,7 @@ function PostData(props: {
   nest?: number; // nested quotes
   className?: string;
 }) {
-  const { api } = useLocalState();
+  const { api } = useLocalState((s) => ({ api: s.api }));
   const { host, id, nest } = props;
   const [enest, setEnest] = useState(nest);
   useEffect(() => {
diff --git a/front/src/components/post/Post.tsx b/front/src/components/post/Post.tsx
index e61efb0..277c119 100644
--- a/front/src/components/post/Post.tsx
+++ b/front/src/components/post/Post.tsx
@@ -47,7 +47,7 @@ export default Post;
 
 function TrillPost(props: PostProps) {
   const { poast, profile, fake } = props;
-  const { setModal } = useLocalState();
+  const setModal = useLocalState((s) => s.setModal);
   const [_, navigate] = useLocation();
   function openThread(_e: React.MouseEvent) {
     const sel = window.getSelection()?.toString();
@@ -64,7 +64,7 @@ function TrillPost(props: PostProps) {
     </div>
   ) : (
     <div className="avatar sigil cp" role="link" onMouseUp={openModal}>
-      <Sigil patp={poast.author} size={42} />
+      <Sigil patp={poast.author} size={46} />
     </div>
   );
   return (
diff --git a/front/src/components/post/Reactions.tsx b/front/src/components/post/Reactions.tsx
index 58662cd..aabab61 100644
--- a/front/src/components/post/Reactions.tsx
+++ b/front/src/components/post/Reactions.tsx
@@ -14,7 +14,7 @@ import soy from "@/assets/reacts/soy.png";
 import chad from "@/assets/reacts/chad.png";
 import pika from "@/assets/reacts/pika.png";
 import facepalm from "@/assets/reacts/facepalm.png";
-import emoji from "@/assets/icons/emoji.svg";
+import Icon from "@/components/Icon";
 import emojis from "@/logic/emojis.json";
 import Modal from "../modals/Modal";
 import useLocalState from "@/state/state";
@@ -93,7 +93,7 @@ export function stringToReact(s: string) {
   if (s === "pepesad")
     return <img className="react-img" src={pepesad} alt="" />;
   if (s === "")
-    return <img className="react-img no-react" src={emoji} alt="" />;
+    return <Icon name="emoji" size={20} className="react-img no-react" />;
   if (s === "cringe") return <img className="react-img" src={cringe} alt="" />;
   if (s === "cry") return <img className="react-img" src={cry} alt="" />;
   if (s === "crywojak") return <img className="react-img" src={cry} alt="" />;
diff --git a/front/src/components/post/wrappers/Nostr.tsx b/front/src/components/post/wrappers/Nostr.tsx
index bdc5ba9..2782fb8 100644
--- a/front/src/components/post/wrappers/Nostr.tsx
+++ b/front/src/components/post/wrappers/Nostr.tsx
@@ -4,7 +4,7 @@ import useLocalState from "@/state/state";
 
 export default NostrPost;
 function NostrPost({ data }: { data: NostrPost }) {
-  const { profiles } = useLocalState();
+  const { profiles } = useLocalState((s) => ({ profiles: s.profiles }));
   const profile = profiles.get(data.event.pubkey);
 
   return <Post poast={data.post} profile={profile} />;
diff --git a/front/src/components/post/wrappers/NostrIcon.tsx b/front/src/components/post/wrappers/NostrIcon.tsx
index 0c368fb..30fbfe9 100644
--- a/front/src/components/post/wrappers/NostrIcon.tsx
+++ b/front/src/components/post/wrappers/NostrIcon.tsx
@@ -1,9 +1,12 @@
-import nostrIcon from "@/assets/icons/nostr.svg";
+import Icon from "@/components/Icon";
 import useLocalState from "@/state/state";
 import toast from "react-hot-toast";
 import type { Poast } from "@/types/trill";
 export default function ({ poast }: { poast: Poast }) {
-  const { relays, api, keys } = useLocalState();
+  const { relays, api } = useLocalState((s) => ({
+    relays: s.relays,
+    api: s.api,
+  }));
 
   async function sendToRelay(e: React.MouseEvent) {
     e.stopPropagation();
@@ -16,7 +19,7 @@ export default function ({ poast }: { poast: Poast }) {
 
   return (
     <div className="icon" role="link" onMouseUp={sendToRelay}>
-      <img role="link" src={nostrIcon} title="repost" />
+      <Icon name="nostr" size={20} title="relay to nostr" />
     </div>
   );
 }