trending notes showable as grid

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

@@ -0,0 +1,41 @@
+import { NostrLink, TaggedNostrEvent } from "@snort/system";
+import { MouseEvent } from "react";
+import useImgProxy from "@/Hooks/useImgProxy";
+import { transformTextCached } from "@/Hooks/useTextTransformCache";
+import { Link } from "react-router-dom";
+import Icon from "@/Icons/Icon";
+
+const ImageGridItem = (props: { event: TaggedNostrEvent; onClick: (e: MouseEvent) => void }) => {
+  const { event, onClick } = props;
+  const { proxy } = useImgProxy();
+
+  const parsed = transformTextCached(event.id, event.content, event.tags);
+  const media = parsed.filter(
+    a => a.type === "media" && (a.mimeType?.startsWith("image/") || a.mimeType?.startsWith("video/")),
+  );
+
+  if (media.length === 0) return null;
+
+  const multiple = media.length > 1;
+  const isVideo = media[0].mimeType?.startsWith("video/");
+  const noteId = NostrLink.fromEvent(event).encode(CONFIG.eventLinkPrefix);
+
+  const myOnClick = (clickEvent: MouseEvent) => {
+    if (onClick) {
+      onClick(clickEvent);
+      clickEvent.preventDefault();
+    }
+  };
+
+  return (
+    <Link to={`/${noteId}`} className="aspect-square cursor-pointer hover:opacity-80 relative" onClick={myOnClick}>
+      <img src={proxy(media[0].content, 256)} alt="Note Media" className="w-full h-full object-cover" />
+      <div className="absolute right-2 top-2 flex flex-col gap-2">
+        {multiple && <Icon name="copy-solid" className="text-white opacity-80 drop-shadow-md" />}
+        {isVideo && <Icon name="play-square-outline" className="text-white opacity-80 drop-shadow-md" />}
+      </div>
+    </Link>
+  );
+};
+
+export default ImageGridItem;

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

@@ -142,7 +142,7 @@ export function RootTabs({ base = "/" }) {
     if (currentTab && currentTab !== rootType) {
       setRootType(currentTab);
     }
-  }, [location, menuItems, rootType]);
+  }, [location.pathname, menuItems, rootType]);
 
   function currentMenuItem() {
     if (location.pathname.startsWith(`${base}/t/`)) {

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

@@ -5,11 +5,9 @@ import Icon from "@/Icons/Icon";
 import { NostrLink, TaggedNostrEvent } from "@snort/system";
 import { ReactNode, useState } from "react";
 import { TimelineFragment } from "@/Element/Feed/TimelineFragment";
-import { transformTextCached } from "@/Hooks/useTextTransformCache";
-import useImgProxy from "@/Hooks/useImgProxy";
-import { Link } from "react-router-dom";
 import { DisplayAs } from "@/Element/Feed/DisplayAsSelector";
 import { SpotlightThreadModal } from "@/Element/Spotlight/SpotlightThreadModal";
+import ImageGridItem from "@/Element/Feed/ImageGridItem";
 
 export interface TimelineRendererProps {
   frags: Array<TimelineFragment>;
@@ -27,7 +25,6 @@ export interface TimelineRendererProps {
 
 export function TimelineRenderer(props: TimelineRendererProps) {
   const { ref, inView } = useInView();
-  const { proxy } = useImgProxy();
   const [modalThread, setModalThread] = useState<NostrLink | undefined>(undefined);
 
   const renderNotes = () => {
@@ -44,43 +41,13 @@ export function TimelineRenderer(props: TimelineRendererProps) {
 
   const renderGrid = () => {
     // TODO Hide images from notes with a content warning, unless otherwise configured
-    const noteImageRenderer = (e: TaggedNostrEvent) => {
-      const parsed = transformTextCached(e.id, e.content, e.tags);
-      const media = parsed.filter(
-        a => a.type === "media" && (a.mimeType?.startsWith("image/") || a.mimeType?.startsWith("video/")),
-      );
-
-      if (media.length === 0) return null;
-
-      const multiple = media.length > 1;
-      const isVideo = media[0].mimeType?.startsWith("video/");
-      const noteId = NostrLink.fromEvent(e).encode(CONFIG.eventLinkPrefix);
-
-      const onClick = (clickEvent: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
-        if (props.noteOnClick) {
-          props.noteOnClick(e);
-          clickEvent.preventDefault();
-        } else if (window.innerWidth >= 768) {
-          setModalThread(NostrLink.fromEvent(e));
-          clickEvent.preventDefault();
-        }
-      };
-
-      return (
-        <Link to={`/${noteId}`} className="aspect-square cursor-pointer hover:opacity-80 relative" onClick={onClick}>
-          <img src={proxy(media[0].content, 256)} alt="Note Media" className="w-full h-full object-cover" />
-          <div className="absolute right-2 top-2 flex flex-col gap-2">
-            {multiple && <Icon name="copy-solid" className="text-white opacity-80 drop-shadow-md" />}
-            {isVideo && <Icon name="play-square-outline" className="text-white opacity-80 drop-shadow-md" />}
-          </div>
-        </Link>
-      );
-    };
-
-    const noteRenderer = props.noteRenderer || noteImageRenderer;
 
     return props.frags.map(frag => (
-      <div className="grid grid-cols-3 gap-px md:gap-1">{frag.events.map(event => noteRenderer(event))}</div>
+      <div className="grid grid-cols-3 gap-px md:gap-1">
+        {frag.events.map(event => (
+          <ImageGridItem event={event} onClick={() => setModalThread(NostrLink.fromEvent(event))} />
+        ))}
+      </div>
     ));
   };
 

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

@@ -10,6 +10,8 @@ import { useLocale } from "@/IntlProvider";
 import useModeration from "@/Hooks/useModeration";
 import ShortNote from "@/Element/Trending/ShortNote";
 import classNames from "classnames";
+import { DisplayAs, DisplayAsSelector } from "@/Element/Feed/DisplayAsSelector";
+import ImageGridItem from "@/Element/Feed/ImageGridItem";
 
 export default function TrendingNotes({ count = Infinity, small = false }) {
   // Added count prop with a default value
@@ -17,6 +19,7 @@ export default function TrendingNotes({ count = Infinity, small = false }) {
   const [error, setError] = useState<Error>();
   const { lang } = useLocale();
   const { isEventMuted } = useModeration();
+  const [displayAs, setDisplayAs] = useState<DisplayAs>("list");
   const related = useReactions("trending", posts?.map(a => NostrLink.fromEvent(a)) ?? [], undefined, true);
 
   async function loadTrendingNotes() {
@@ -46,18 +49,34 @@ export default function TrendingNotes({ count = Infinity, small = false }) {
     showContextMenu: !small,
   };
 
+  const filteredAndLimitedPosts = () => {
+    return posts.filter(a => !isEventMuted(a)).slice(0, count);
+  };
+
+  const renderGrid = () => {
+    return (
+      <div className="grid grid-cols-3 gap-px md:gap-1">
+        {filteredAndLimitedPosts().map(e => (
+          <ImageGridItem event={e as TaggedNostrEvent} onClick={() => {}} />
+        ))}
+      </div>
+    );
+  };
+
+  const renderList = () => {
+    return filteredAndLimitedPosts().map(e =>
+      small ? (
+        <ShortNote event={e as TaggedNostrEvent} />
+      ) : (
+        <Note data={e as TaggedNostrEvent} related={related?.data ?? []} depth={0} options={options} />
+      ),
+    );
+  };
+
   return (
     <div className={classNames("flex flex-col", { "gap-6": small, "py-4": small })}>
-      {posts
-        .filter(a => !isEventMuted(a))
-        .slice(0, count) // Limit the number of posts displayed
-        .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} />
-          ),
-        )}
+      {!small && <DisplayAsSelector activeSelection={displayAs} onSelect={a => setDisplayAs(a)} />}
+      {displayAs === "grid" ? renderGrid() : renderList()}
     </div>
   );
 }