From 468dc3bae6548637e9a06d8c4c77f49458ae43a4 Mon Sep 17 00:00:00 2001
From: Martti Malmi <sirius@iki.fi>
Date: Thu, 30 Nov 2023 12:52:13 +0200
Subject: [PATCH] smaller trending notes

---
 .../app/src/Element/Trending/ShortNote.tsx    | 19 +++++++++++++++++++
 .../src/Element/Trending/TrendingPosts.tsx    | 14 ++++++++++----
 packages/app/src/Pages/Layout/RightColumn.tsx |  6 +++---
 3 files changed, 32 insertions(+), 7 deletions(-)
 create mode 100644 packages/app/src/Element/Trending/ShortNote.tsx

diff --git a/packages/app/src/Element/Trending/ShortNote.tsx b/packages/app/src/Element/Trending/ShortNote.tsx
new file mode 100644
index 00000000..afe1da33
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/packages/app/src/Element/Trending/TrendingPosts.tsx b/packages/app/src/Element/Trending/TrendingPosts.tsx
index a4bf73f9..6c3514da 100644
--- a/packages/app/src/Element/Trending/TrendingPosts.tsx
+++ b/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>
   );
 }
diff --git a/packages/app/src/Pages/Layout/RightColumn.tsx b/packages/app/src/Pages/Layout/RightColumn.tsx
index 571eec3f..dc146159 100644
--- a/packages/app/src/Pages/Layout/RightColumn.tsx
+++ b/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>