DM styles update

packages/app/src/Element/CashuNuts.tsx

@@ -3,7 +3,6 @@ import { FormattedMessage } from "react-intl";
 
 import useLogin from "Hooks/useLogin";
 import { useUserProfile } from "@snort/system-react";
-import { System } from "index";
 
 interface Token {
   token: Array<{
@@ -17,7 +16,7 @@ interface Token {
 
 export default function CashuNuts({ token }: { token: string }) {
   const login = useLogin();
-  const profile = useUserProfile(System, login.publicKey);
+  const profile = useUserProfile(login.publicKey);
 
   async function copyToken(e: React.MouseEvent<HTMLButtonElement>, token: string) {
     e.stopPropagation();

packages/app/src/Element/DmWindow.css

@@ -3,6 +3,9 @@
   flex-direction: column;
   height: 100%;
 }
+.dm-window > div:nth-child(1) {
+  padding: 12px 0;
+}
 
 .dm-window > div:nth-child(2) {
   overflow-y: auto;
@@ -15,7 +18,6 @@
 .dm-window > div:nth-child(3) {
   display: flex;
   align-items: center;
-  background-color: var(--bg-color);
   gap: 10px;
   padding: 5px 10px;
 }

packages/app/src/Element/DmWindow.tsx

@@ -6,14 +6,13 @@ import DM from "Element/DM";
 import NoteToSelf from "Element/NoteToSelf";
 import useLogin from "Hooks/useLogin";
 import WriteMessage from "Element/WriteMessage";
-import { Chat, ChatParticipant, useChatSystem } from "chat";
-import { Nip4ChatSystem } from "chat/nip4";
+import { Chat, ChatParticipant, createEmptyChatObject, useChatSystem } from "chat";
 import { FormattedMessage } from "react-intl";
 
 export default function DmWindow({ id }: { id: string }) {
   const pubKey = useLogin().publicKey;
   const dms = useChatSystem();
-  const chat = dms.find(a => a.id === id) ?? Nip4ChatSystem.createChatObj(id, []);
+  const chat = dms.find(a => a.id === id) ?? createEmptyChatObject(id);
 
   function participant(p: ChatParticipant) {
     if (p.id === pubKey) {
@@ -37,7 +36,7 @@ export default function DmWindow({ id }: { id: string }) {
           {chat.participants.map(v => (
             <ProfileImage pubkey={v.id} showUsername={false} />
           ))}
-          {chat.title ?? <FormattedMessage defaultMessage="Group Chat" />}
+          {chat.title ?? <FormattedMessage defaultMessage="Secret Group Chat" />}
         </div>
       );
     }

packages/app/src/Element/FollowListBase.tsx

@@ -16,6 +16,7 @@ export interface FollowListBaseProps {
   showAbout?: boolean;
   className?: string;
   actions?: ReactNode;
+  profileActions?: (pk: string) => ReactNode;
 }
 
 export default function FollowListBase({
@@ -25,6 +26,7 @@ export default function FollowListBase({
   showAbout,
   className,
   actions,
+  profileActions,
 }: FollowListBaseProps) {
   const publisher = useEventPublisher();
   const { follows, relays } = useLogin();
@@ -48,7 +50,7 @@ export default function FollowListBase({
         </div>
       )}
       {pubkeys?.map(a => (
-        <ProfilePreview pubkey={a} key={a} options={{ about: showAbout }} />
+        <ProfilePreview pubkey={a} key={a} options={{ about: showAbout }} actions={profileActions?.(a)} />
       ))}
     </div>
   );

packages/app/src/Element/Mention.tsx

@@ -5,10 +5,9 @@ import { HexKey } from "@snort/system";
 import { useUserProfile } from "@snort/system-react";
 import { profileLink } from "SnortUtils";
 import { getDisplayName } from "Element/ProfileImage";
-import { System } from "index";
 
 export default function Mention({ pubkey, relays }: { pubkey: HexKey; relays?: Array<string> | string }) {
-  const user = useUserProfile(System, pubkey);
+  const user = useUserProfile(pubkey);
 
   const name = useMemo(() => {
     return getDisplayName(user, pubkey);

packages/app/src/Element/Nip05.tsx

@@ -3,10 +3,9 @@ import { HexKey } from "@snort/system";
 
 import Icon from "Icons/Icon";
 import { useUserProfile } from "@snort/system-react";
-import { System } from "index";
 
 export function useIsVerified(pubkey: HexKey, bypassCheck?: boolean) {
-  const profile = useUserProfile(System, pubkey);
+  const profile = useUserProfile(pubkey);
   return { isVerified: bypassCheck || profile?.isNostrAddressValid };
 }
 

packages/app/src/Element/Nip5Service.tsx

@@ -44,7 +44,7 @@ export default function Nip5Service(props: Nip05ServiceProps) {
   const { helpText = true } = props;
   const { formatMessage } = useIntl();
   const pubkey = useLogin().publicKey;
-  const user = useUserProfile(System, pubkey);
+  const user = useUserProfile(pubkey);
   const publisher = useEventPublisher();
   const svc = useMemo(() => new ServiceProvider(props.service), [props.service]);
   const [serviceConfig, setServiceConfig] = useState<ServiceConfig>();

packages/app/src/Element/Note.css

@@ -2,7 +2,7 @@
   min-height: 110px;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 12px;
 }
 
 .note:hover {

packages/app/src/Element/NoteFooter.tsx

@@ -50,7 +50,7 @@ export default function NoteFooter(props: NoteFooterProps) {
   const { formatMessage } = useIntl();
   const login = useLogin();
   const { publicKey, preferences: prefs, relays } = login;
-  const author = useUserProfile(System, ev.pubkey);
+  const author = useUserProfile(ev.pubkey);
   const interactionCache = useInteractionCache(publicKey, ev.id);
   const publisher = useEventPublisher();
   const showNoteCreatorModal = useSelector((s: RootState) => s.noteCreator.show);

packages/app/src/Element/NoteReaction.tsx

@@ -10,7 +10,6 @@ import useModeration from "Hooks/useModeration";
 import { FormattedMessage } from "react-intl";
 import Icon from "Icons/Icon";
 import { useUserProfile } from "@snort/system-react";
-import { System } from "index";
 
 export interface NoteReactionProps {
   data: TaggedNostrEvent;
@@ -19,7 +18,7 @@ export interface NoteReactionProps {
 export default function NoteReaction(props: NoteReactionProps) {
   const { data: ev } = props;
   const { isMuted } = useModeration();
-  const profile = useUserProfile(System, ev.pubkey);
+  const profile = useUserProfile(ev.pubkey);
 
   const refEvent = useMemo(() => {
     if (ev) {

packages/app/src/Element/Poll.tsx

@@ -12,7 +12,6 @@ import { formatShort } from "Number";
 import Spinner from "Icons/Spinner";
 import SendSats from "Element/SendSats";
 import useLogin from "Hooks/useLogin";
-import { System } from "index";
 
 interface PollProps {
   ev: TaggedNostrEvent;
@@ -24,7 +23,7 @@ export default function Poll(props: PollProps) {
   const publisher = useEventPublisher();
   const { wallet } = useWallet();
   const { preferences: prefs, publicKey: myPubKey, relays } = useLogin();
-  const pollerProfile = useUserProfile(System, props.ev.pubkey);
+  const pollerProfile = useUserProfile(props.ev.pubkey);
   const [error, setError] = useState("");
   const [invoice, setInvoice] = useState("");
   const [voting, setVoting] = useState<number>();

packages/app/src/Element/ProfileImage.tsx

@@ -8,7 +8,6 @@ import { useUserProfile } from "@snort/system-react";
 import { hexToBech32, profileLink } from "SnortUtils";
 import Avatar from "Element/Avatar";
 import Nip05 from "Element/Nip05";
-import { System } from "index";
 
 export interface ProfileImageProps {
   pubkey: HexKey;
@@ -21,6 +20,7 @@ export interface ProfileImageProps {
   overrideUsername?: string;
   profile?: UserMetadata;
   size?: number;
+  onClick?: (e: React.MouseEvent) => void;
 }
 
 export default function ProfileImage({
@@ -34,8 +34,9 @@ export default function ProfileImage({
   overrideUsername,
   profile,
   size,
+  onClick,
 }: ProfileImageProps) {
-  const user = profile ?? useUserProfile(System, pubkey);
+  const user = useUserProfile(profile ? "" : pubkey) ?? profile;
   const nip05 = defaultNip ? defaultNip : user?.nip05;
 
   const name = useMemo(() => {
@@ -45,6 +46,7 @@ export default function ProfileImage({
   function handleClick(e: React.MouseEvent) {
     if (link === "") {
       e.preventDefault();
+      onClick?.(e);
     }
   }
 
@@ -68,7 +70,11 @@ export default function ProfileImage({
   }
 
   if (link === "") {
-    return <div className={`pfp${className ? ` ${className}` : ""}`}>{inner()}</div>;
+    return (
+      <div className={`pfp${className ? ` ${className}` : ""}`} onClick={handleClick}>
+        {inner()}
+      </div>
+    );
   } else {
     return (
       <Link

packages/app/src/Element/ProfilePreview.tsx

@@ -6,32 +6,42 @@ import { useInView } from "react-intersection-observer";
 
 import ProfileImage from "Element/ProfileImage";
 import FollowButton from "Element/FollowButton";
-import { System } from "index";
 
 export interface ProfilePreviewProps {
   pubkey: HexKey;
   options?: {
     about?: boolean;
+    linkToProfile?: boolean;
   };
   actions?: ReactNode;
   className?: string;
+  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
 }
 export default function ProfilePreview(props: ProfilePreviewProps) {
   const pubkey = props.pubkey;
   const { ref, inView } = useInView({ triggerOnce: true });
-  const user = useUserProfile(System, inView ? pubkey : undefined);
+  const user = useUserProfile(inView ? pubkey : undefined);
   const options = {
     about: true,
     ...props.options,
   };
 
+  function handleClick(e: React.MouseEvent<HTMLDivElement>) {
+    if (props.onClick) {
+      e.stopPropagation();
+      e.preventDefault();
+      props.onClick(e);
+    }
+  }
+
   return (
     <>
-      <div className={`profile-preview${props.className ? ` ${props.className}` : ""}`} ref={ref}>
+      <div className={`profile-preview${props.className ? ` ${props.className}` : ""}`} ref={ref} onClick={handleClick}>
         {inView && (
           <>
             <ProfileImage
               pubkey={pubkey}
+              link={options.linkToProfile ?? true ? undefined : ""}
               subHeader={options.about ? <div className="about">{user?.about}</div> : undefined}
             />
             {props.actions ?? (

packages/app/src/Element/Username.tsx

@@ -5,10 +5,9 @@ import { HexKey } from "@snort/system";
 import { useUserProfile } from "@snort/system-react";
 
 import { profileLink } from "SnortUtils";
-import { System } from "index";
 
 export default function Username({ pubkey, onLinkVisit }: { pubkey: HexKey; onLinkVisit(): void }) {
-  const user = useUserProfile(System, pubkey);
+  const user = useUserProfile(pubkey);
   const navigate = useNavigate();
 
   function onClick(ev: MouseEvent) {

packages/app/src/Element/ZapButton.tsx

@@ -5,7 +5,6 @@ import { useUserProfile } from "@snort/system-react";
 
 import SendSats from "Element/SendSats";
 import Icon from "Icons/Icon";
-import { System } from "index";
 
 const ZapButton = ({
   pubkey,
@@ -18,7 +17,7 @@ const ZapButton = ({
   children?: React.ReactNode;
   event?: string;
 }) => {
-  const profile = useUserProfile(System, pubkey);
+  const profile = useUserProfile(pubkey);
   const [zap, setZap] = useState(false);
   const service = lnurl ?? (profile?.lud16 || profile?.lud06);
   if (!service) return null;