fix: displayAs

packages/app/src/Components/Feed/TimelineChunk.tsx

@@ -5,7 +5,7 @@ import { ReactNode, useMemo } from "react";
 import { WindowChunk } from "@/Hooks/useTimelineChunks";
 
 import { DisplayAs } from "./DisplayAsSelector";
-import { TimelineFragment } from "./TimelineFragment";
+import { TimelineRenderer } from "./TimelineRenderer";
 
 export interface TimelineChunkProps {
   id: string;
@@ -15,7 +15,6 @@ export interface TimelineChunkProps {
   noteRenderer?: (ev: NostrEvent) => ReactNode;
   noteOnClick?: (ev: NostrEvent) => void;
   displayAs?: DisplayAs;
-  showDisplayAsSelector?: boolean;
 }
 
 /**
@@ -34,13 +33,16 @@ export default function TimelineChunk(props: TimelineChunkProps) {
   const feed = useRequestBuilder(sub);
 
   return (
-    <TimelineFragment
+    <TimelineRenderer
-      frag={{
+      frags={{
         events: feed.filter(a => props.noteFilter?.(a) ?? true),
         refTime: props.chunk.until,
       }}
       noteOnClick={props.noteOnClick}
       noteRenderer={props.noteRenderer}
+      displayAs={props.displayAs}
+      latest={[]}
+      showLatest={() => {}}
     />
   );
 }

packages/app/src/Components/Feed/TimelineFollows.tsx

@@ -21,7 +21,6 @@ export interface TimelineFollowsProps {
   noteRenderer?: (ev: NostrEvent) => ReactNode;
   noteOnClick?: (ev: NostrEvent) => void;
   displayAs?: DisplayAs;
-  showDisplayAsSelector?: boolean;
 }
 
 /**
@@ -53,11 +52,7 @@ const TimelineFollows = (props: TimelineFollowsProps) => {
 
   return (
     <>
-      <DisplayAsSelector
+      <DisplayAsSelector activeSelection={displayAs} onSelect={(displayAs: DisplayAs) => setDisplayAs(displayAs)} />
-        show={props.showDisplayAsSelector}
-        activeSelection={displayAs}
-        onSelect={(displayAs: DisplayAs) => setDisplayAs(displayAs)}
-      />
       {chunks.map(c => (
         <TimelineChunk
           key={c.until}
@@ -67,6 +62,7 @@ const TimelineFollows = (props: TimelineFollowsProps) => {
           noteFilter={filterEvents}
           noteOnClick={props.noteOnClick}
           noteRenderer={props.noteRenderer}
+          displayAs={displayAs}
         />
       ))}
       <AutoLoadMore onClick={() => showMore()} />

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

@@ -14,7 +14,7 @@ import ProfileImage from "@/Components/User/ProfileImage";
 import getEventMedia from "@/Utils/getEventMedia";
 
 export interface TimelineRendererProps {
-  frags: Array<TimelineFragment>;
+  frags: Array<TimelineFragment> | TimelineFragment;
   /**
    * List of pubkeys who have posted recently
    */
@@ -29,10 +29,10 @@ export interface TimelineRendererProps {
 }
 
 // filter frags[0].events that have media
-function Grid({ frags }: { frags: Array<TimelineFragment> }) {
+function Grid({ frags }: { frags: Array<TimelineFragment> | TimelineFragment }) {
   const [modalEventIndex, setModalEventIndex] = useState<number | undefined>(undefined);
   const allEvents = useMemo(() => {
-    return frags.flatMap(frag => frag.events);
+    return (Array.isArray(frags) ? frags : [frags]).flatMap(frag => frag.events);
   }, [frags]);
   const mediaEvents = useMemo(() => {
     return allEvents.filter(event => getEventMedia(event).length > 0);
@@ -99,7 +99,8 @@ export function TimelineRenderer(props: TimelineRendererProps) {
   }, [inView, props.latest]);
 
   const renderNotes = () => {
-    return props.frags.map((frag, index) => (
+    const frags = Array.isArray(props.frags) ? props.frags : [props.frags];
+    return frags.map((frag, index) => (
       <ErrorBoundary key={frag.events[0]?.id + index}>
         <TimelineFragment
           frag={frag}

packages/app/src/Hooks/useTimelineChunks.ts

@@ -9,15 +9,16 @@ export default function useTimelineChunks(opt: { window?: number; firstChunkSize
   const [windowSize] = useState(opt.window ?? 60 * 60 * 2);
   const [windows, setWindows] = useState(1);
 
+  let offset = opt.now;
   const chunks: Array<WindowChunk> = [];
   for (let x = 0; x < windows; x++) {
     // offset from now going backwards in time
-    const offset = opt.now - windowSize * (x - 1);
     const size = x === 0 && opt.firstChunkSize ? opt.firstChunkSize : windowSize;
     chunks.push({
       since: offset - size,
       until: offset,
     });
+    offset -= size;
   }
 
   return {