hide profilecard by default, calculate new notes pos with js

packages/app/src/Element/Feed/Timeline.css

@@ -11,8 +11,6 @@
 .latest-notes-fixed {
   position: fixed;
   top: 50px;
-  left: 50%;
-  transform: translateX(-50%);
   width: auto;
   z-index: 42;
   opacity: 0.9;

packages/app/src/Element/Feed/TimelineRenderer.tsx

@@ -3,7 +3,7 @@ import ProfileImage from "@/Element/User/ProfileImage";
 import { FormattedMessage } from "react-intl";
 import Icon from "@/Icons/Icon";
 import { NostrLink, TaggedNostrEvent } from "@snort/system";
-import { ReactNode, useState } from "react";
+import { ReactNode, useEffect, useRef, useState } from "react";
 import { TimelineFragment } from "@/Element/Feed/TimelineFragment";
 import { DisplayAs } from "@/Element/Feed/DisplayAsSelector";
 import { SpotlightThreadModal } from "@/Element/Spotlight/SpotlightThreadModal";
@@ -24,9 +24,30 @@ export interface TimelineRendererProps {
 }
 
 export function TimelineRenderer(props: TimelineRendererProps) {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const latestNotesFixedRef = useRef<HTMLDivElement | null>(null);
   const { ref, inView } = useInView();
   const [modalThread, setModalThread] = useState<NostrLink | undefined>(undefined);
 
+  const updateLatestNotesPosition = () => {
+    if (containerRef.current && latestNotesFixedRef.current) {
+      const parentRect = containerRef.current.getBoundingClientRect();
+      const childWidth = latestNotesFixedRef.current.offsetWidth;
+
+      const leftPosition = parentRect.left + (parentRect.width - childWidth) / 2;
+      latestNotesFixedRef.current.style.left = `${leftPosition}px`;
+    }
+  };
+
+  useEffect(() => {
+    updateLatestNotesPosition();
+    window.addEventListener("resize", updateLatestNotesPosition);
+
+    return () => {
+      window.removeEventListener("resize", updateLatestNotesPosition);
+    };
+  }, [inView, props.latest]);
+
   const renderNotes = () => {
     return props.frags.map(frag => (
       <TimelineFragment
@@ -52,7 +73,7 @@ export function TimelineRenderer(props: TimelineRendererProps) {
   };
 
   return (
-    <>
+    <div ref={containerRef}>
       {props.latest.length > 0 && (
         <>
           <div className="card latest-notes" onClick={() => props.showLatest(false)} ref={ref}>
@@ -68,6 +89,7 @@ export function TimelineRenderer(props: TimelineRendererProps) {
           </div>
           {!inView && (
             <div
+              ref={latestNotesFixedRef}
               className="card latest-notes latest-notes-fixed pointer fade-in"
               onClick={() => props.showLatest(true)}>
               {props.latest.slice(0, 3).map(p => {
@@ -99,6 +121,6 @@ export function TimelineRenderer(props: TimelineRendererProps) {
           onBack={() => setModalThread(undefined)}
         />
       )}
-    </>
+    </div>
   );
 }

packages/app/src/Element/Trending/ShortNote.tsx

@@ -10,7 +10,7 @@ export default function ShortNote({ event }: { event: TaggedNostrEvent }) {
   return (
     <Link to={`/${NostrLink.fromEvent(event).encode(CONFIG.eventLinkPrefix)}`} className="flex flex-col">
       <div className="flex flex-row justify-between">
-        <ProfileImage pubkey={event.pubkey} size={32} />
+        <ProfileImage pubkey={event.pubkey} size={32} showProfileCard={true} />
         <NoteTime from={event.created_at * 1000} />
       </div>
       <div className="ml-10">

packages/app/src/Element/User/ProfileImage.tsx

@@ -42,7 +42,7 @@ export default function ProfileImage({
   onClick,
   showFollowDistance = true,
   icons,
-  showProfileCard = true,
+  showProfileCard = false,
 }: ProfileImageProps) {
   const user = useUserProfile(profile ? "" : pubkey) ?? profile;
   const [isHovering, setIsHovering] = useState(false);