smaller trending notes

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

@@ -0,0 +1,19 @@
+import { NostrLink, TaggedNostrEvent } from "@snort/system";
+import ProfileImage from "@/Element/User/ProfileImage";
+import Text from "@/Element/Text";
+import { Link } from "react-router-dom";
+import NoteTime from "@/Element/Event/NoteTime";
+
+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} showNip05={false} />
+        <NoteTime from={event.created_at * 1000} />
+      </div>
+      <div className="ml-10">
+        <Text {...event} truncate={75} />
+      </div>
+    </Link>
+  );
+}

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

@@ -8,6 +8,8 @@ import NostrBandApi from "@/External/NostrBand";
 import { ErrorOrOffline } from "@/Element/ErrorOrOffline";
 import { useLocale } from "@/IntlProvider";
 import useModeration from "@/Hooks/useModeration";
+import ShortNote from "@/Element/Trending/ShortNote";
+import classNames from "classnames";
 
 export default function TrendingNotes({ count = Infinity, small = false }) {
   // Added count prop with a default value
@@ -45,13 +47,17 @@ export default function TrendingNotes({ count = Infinity, small = false }) {
   };
 
   return (
-    <div className="flex flex-col gap-4">
+    <div className={classNames("flex flex-col", { "gap-4": small, "py-4": small })}>
       {posts
         .filter(a => !isEventMuted(a))
         .slice(0, count) // Limit the number of posts displayed
-        .map(e => (
-          <Note key={e.id} data={e as TaggedNostrEvent} related={related?.data ?? []} depth={0} options={options} />
-        ))}
+        .map(e =>
+          small ? (
+            <ShortNote key={e.id} event={e as TaggedNostrEvent} />
+          ) : (
+            <Note key={e.id} data={e as TaggedNostrEvent} related={related?.data ?? []} depth={0} options={options} />
+          ),
+        )}
     </div>
   );
 }

packages/app/src/Pages/Layout/RightColumn.tsx

@@ -15,11 +15,11 @@ export default function RightColumn() {
         <SearchBox />
       </div>
       <div className="overflow-y-auto hide-scrollbar">
-        <div className="bg-superdark rounded-lg py-4 px-2 mt-8">
-          <div className="font-bold text-lg px-[12px]">
+        <div className="bg-superdark rounded-lg p-4 mt-8 text-neutral-500">
+          <div className="font-bold text-lg">
             <FormattedMessage defaultMessage="Trending notes" id="6k7xfM" />
           </div>
-          <TrendingNotes small={true} count={5} />
+          <TrendingNotes small={true} count={100} />
         </div>
       </div>
     </div>