wip

components/auth/Auth.tsx

@@ -66,7 +66,8 @@ type AuthContextType = {
   readonly title: string;
 };
 
-export const WAVES_MIN_ACCESS_LEVEL = 10;
+// TODO: change it back to 10
+export const WAVES_MIN_ACCESS_LEVEL = 0;
 const DEFAULT_TITLE = "6529 SEIZE";
 
 export const AuthContext = createContext<AuthContextType>({

components/brain/MyStreamWrapper.tsx

@@ -0,0 +1 @@
+

components/brain/content/BrainContent.tsx

@@ -23,13 +23,9 @@ const BrainContent: React.FC<BrainContentProps> = ({
 
   return (
     <div className="lg:tw-pr-2">
-      {showPinnedWaves && <BrainContentPinnedWaves />}
-      <BrainContentInput
-        waveId={waveId}
-        activeDrop={activeDrop}
-        onCancelReplyQuote={onCancelReplyQuote}
-        onDropAddedToQueue={onCancelReplyQuote}
-      />
+      <div className="lg:tw-hidden">
+        {showPinnedWaves && <BrainContentPinnedWaves />}
+      </div>
       <div className="tw-flex-1">
         <div className="tw-flex tw-items-center tw-gap-x-2 tw-mb-2 tw-mt-2">
           {!!wave && (
@@ -45,8 +41,13 @@ const BrainContent: React.FC<BrainContentProps> = ({
         </div>
         <div>{children}</div>
       </div>
+      <BrainContentInput
+        waveId={waveId}
+        activeDrop={activeDrop}
+        onCancelReplyQuote={onCancelReplyQuote}
+        onDropAddedToQueue={onCancelReplyQuote}
+      />
     </div>
   );
 };
-
 export default BrainContent;

components/brain/content/BrainContentPinnedWave.tsx

@@ -73,7 +73,7 @@ const BrainContentPinnedWave: React.FC<BrainContentPinnedWaveProps> = ({
           theme="dark"
         >
           <div
-            className={`tw-relative tw-size-16 md:tw-size-14 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-cursor-pointer tw-transition-all tw-duration-300 ${
+            className={`tw-relative tw-size-14 md:tw-size-12 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-cursor-pointer tw-transition-all tw-duration-300 ${
               active ? "tw-bg-indigo-900" : "tw-bg-iron-800"
             }`}
           >

components/brain/feed/FeedItems.tsx

@@ -11,7 +11,6 @@ export interface FeedItemsProps {
   readonly items: TypedFeedItem[];
   readonly showWaveInfo: boolean;
   readonly activeDrop: ActiveDropState | null;
-  readonly onBottomIntersection: (state: boolean) => void;
   readonly onReply: (param: DropInteractionParams) => void;
   readonly onQuote: (param: DropInteractionParams) => void;
   readonly onDropClick: (drop: ExtendedDrop) => void;
@@ -21,30 +20,14 @@ export default function FeedItems({
   items,
   showWaveInfo,
   activeDrop,
-  onBottomIntersection,
   onReply,
   onQuote,
   onDropClick,
 }: FeedItemsProps) {
-  const getIntersectionTargetIndex = () => {
-    if (items.length < 5) {
-      return null;
-    }
-    return items.length - 5;
-  };
-
-  const [intersectionTargetIndex, setIntersectionTargetIndex] = useState<
-    number | null
-  >(getIntersectionTargetIndex());
-
-  useEffect(() => {
-    setIntersectionTargetIndex(getIntersectionTargetIndex());
-  }, [items]);
-
   return (
     <div className="tw-flex tw-flex-col tw-space-y-3">
       {items.map((item, i) => (
-        <div key={getFeedItemKey({ item, index: i })}>
+        <div key={getFeedItemKey({ item, index: i })} id={`drop-${item.serial_no}`}>
           <CommonChangeAnimation>
             <FeedItem
               item={item}
@@ -55,9 +38,6 @@ export default function FeedItems({
               onDropClick={onDropClick}
             />
           </CommonChangeAnimation>
-          {!!intersectionTargetIndex && intersectionTargetIndex === i && (
-            <CommonIntersectionElement onIntersection={onBottomIntersection} />
-          )}
         </div>
       ))}
     </div>

components/brain/feed/FeedWrapper.tsx

@@ -1,49 +1,91 @@
+import { useMemo } from "react";
 import { ExtendedDrop } from "../../../helpers/waves/drop.helpers";
+import { useScrollBehavior } from "../../../hooks/useScrollBehavior";
 import { TypedFeedItem } from "../../../types/feed.types";
-import CircleLoader, {
-  CircleLoaderSize,
-} from "../../distribution-plan-tool/common/CircleLoader";
 import { ActiveDropState } from "../../waves/detailed/chat/WaveChat";
 import { DropInteractionParams } from "../../waves/detailed/drops/Drop";
+import { WaveDropsScrollContainer } from "../../waves/detailed/drops/WaveDropsScrollContainer";
 import FeedItems from "./FeedItems";
+import useCapacitor from "../../../hooks/useCapacitor";
 
 interface FeedWrapperProps {
   readonly items: TypedFeedItem[];
   readonly loading: boolean;
   readonly showWaveInfo: boolean;
   readonly activeDrop: ActiveDropState | null;
-  readonly onBottomIntersection: (state: boolean) => void;
+  readonly onTopIntersection: () => void;
   readonly onReply: (param: DropInteractionParams) => void;
   readonly onQuote: (param: DropInteractionParams) => void;
   readonly onDropClick: (drop: ExtendedDrop) => void;
+  readonly showInput?: boolean;
 }
 
 export default function FeedWrapper({
   items,
   loading,
   showWaveInfo,
   activeDrop,
-  onBottomIntersection,
+  onTopIntersection,
   onReply,
   onQuote,
   onDropClick,
+  showInput = false
 }: FeedWrapperProps) {
+  const {
+    scrollContainerRef,
+    isAtBottom,
+    scrollToBottom,
+    scrollToTop,
+    handleScroll,
+  } = useScrollBehavior();
+
+  const capacitor = useCapacitor();
+  const containerClassName = useMemo(() => {
+    if (showInput) {
+      return `tw-w-full tw-flex tw-flex-col ${
+        capacitor.isCapacitor
+          ? "tw-h-[calc(100vh-21rem)]"
+          : "tw-h-[calc(100vh-21rem)] lg:tw-h-[calc(100vh-14.5rem)]"
+      }`;
+    }
+    return `tw-w-full tw-flex tw-flex-col ${
+      capacitor.isCapacitor
+        ? "tw-h-[calc(100vh-16rem)]"
+        : "tw-h-[calc(100vh-16rem)] lg:tw-h-[calc(100vh-8.5rem)]"
+    }`;
+  }, [capacitor.isCapacitor, showInput]);
+
+  if (!items.length) {
+    return null;
+  }
+
   return (
-    <div className="tw-relative">
-      <FeedItems
-        items={items}
-        showWaveInfo={showWaveInfo}
-        activeDrop={activeDrop}
-        onBottomIntersection={onBottomIntersection}
-        onReply={onReply}
-        onQuote={onQuote}
-        onDropClick={onDropClick}
-      />
-      {loading && (
-        <div className="tw-w-full tw-text-center tw-mt-8">
-          <CircleLoader size={CircleLoaderSize.XXLARGE} />
-        </div>
-      )}
+    <div className={containerClassName}>
+      <div className="tw-flex tw-flex-col tw-relative tw-overflow-y-auto">
+        <WaveDropsScrollContainer
+          ref={scrollContainerRef}
+          onScroll={handleScroll}
+          newItemsCount={0}
+          isFetchingNextPage={false}
+          onTopIntersection={onTopIntersection}
+        >
+          <div>
+            {loading && (
+              <div className="tw-w-full tw-h-0.5 tw-bg-iron-800 tw-overflow-hidden">
+                <div className="tw-w-full tw-h-full tw-bg-indigo-400 tw-animate-loading-bar"></div>
+              </div>
+            )}
+            <FeedItems
+              items={items}
+              showWaveInfo={showWaveInfo}
+              activeDrop={activeDrop}
+              onReply={onReply}
+              onQuote={onQuote}
+              onDropClick={onDropClick}
+            />
+          </div>
+        </WaveDropsScrollContainer>
+      </div>
     </div>
   );
 }

components/brain/left-sidebar/BrainLeftSidebar.tsx

@@ -19,9 +19,6 @@ const BrainLeftSidebar: React.FC<BrainLeftSidebarProps> = ({
         <BrainLeftSidebarSearchWave />
         <BrainLeftSidebarWaves activeWaveId={activeWaveId} />
       </div>
-      <div>
-
-      </div>
     </div>
   );
 };

components/brain/my-stream/MyStream.tsx

@@ -10,7 +10,7 @@ interface MyStreamProps {
   readonly activeDrop: ActiveDropState | null;
   readonly items: TypedFeedItem[];
   readonly isFetching: boolean;
-  readonly onBottomIntersection: (state: boolean) => void;
+  readonly onTopIntersection: () => void;
   readonly onDropClick: (drop: ExtendedDrop) => void;
 }
 
@@ -20,7 +20,7 @@ export default function MyStream({
   activeDrop,
   items,
   isFetching,
-  onBottomIntersection,
+  onTopIntersection,
   onDropClick,
 }: MyStreamProps) {
 
@@ -31,7 +31,7 @@ export default function MyStream({
         loading={isFetching}
         showWaveInfo={true}
         activeDrop={activeDrop}
-        onBottomIntersection={onBottomIntersection}
+        onTopIntersection={onTopIntersection}
         onReply={onReply}
         onQuote={onQuote}
         onDropClick={onDropClick}

components/brain/my-stream/MyStreamWave.tsx

@@ -28,12 +28,12 @@ const MyStreamWave: React.FC<MyStreamWaveProps> = ({
     useWaveDrops({
       waveId,
       connectedProfileHandle: connectedProfile?.profile?.handle,
-      reverse: false,
+      reverse: true,
       dropId: null,
     });
 
-  const onBottomIntersection = (state: boolean) => {
-    if (state && !isFetching && !isFetchingNextPage && hasNextPage) {
+  const onTopIntersection = () => {
+    if (!isFetching && !isFetchingNextPage && hasNextPage) {
       fetchNextPage();
     }
   };
@@ -79,10 +79,11 @@ const MyStreamWave: React.FC<MyStreamWaveProps> = ({
         loading={isFetching}
         showWaveInfo={false}
         activeDrop={activeDrop}
-        onBottomIntersection={onBottomIntersection}
+        onTopIntersection={onTopIntersection}
         onReply={onReply}
         onQuote={onQuote}
         onDropClick={onDropClick}
+        showInput={true}
       />
     </div>
   );

components/brain/my-stream/MyStreamWrapper.tsx

@@ -85,13 +85,15 @@ const MyStreamWrapper: React.FC = () => {
     status,
     refetch,
     isInitialQueryDone,
-  } = useMyStreamQuery();
+  } = useMyStreamQuery({ reverse: true });
 
-  const { haveNewItems } = usePollingQuery(isInitialQueryDone, items);
+  const { haveNewItems } = usePollingQuery({
+    isInitialQueryDone,
+    items,
+  });
 
-  const onBottomIntersection = (state: boolean) => {
+  const onTopIntersection = () => {
     if (
-      state &&
       status !== "pending" &&
       !isFetching &&
       !isFetchingNextPage &&
@@ -146,7 +148,7 @@ const MyStreamWrapper: React.FC = () => {
       activeDrop={activeDrop}
       items={items}
       isFetching={isFetching}
-      onBottomIntersection={onBottomIntersection}
+      onTopIntersection={onTopIntersection}
     />
   );
   return (
@@ -159,5 +161,5 @@ const MyStreamWrapper: React.FC = () => {
     </BrainContent>
   );
 };
-
 export default MyStreamWrapper;
+

components/brain/my-stream/feed/MyStreamFeed.tsx

@@ -0,0 +1 @@
+

components/brain/my-stream/layout/MyStreamLayout.tsx

@@ -34,7 +34,7 @@ export default function MyStreamLayout({
   useEffect(() => setTitle({ title: "My Stream | 6529 SEIZE" }), []);
 
   const capacitor = useCapacitor();
-  const containerClassName = `tw-relative lg:tw-mt-6 tw-pb-2 lg:tw-pb-12 tw-flex tw-flex-col tw-h-[calc(100vh-10.75rem)] lg:tw-h-full lg:tw-flex-1 tw-overflow-y-auto no-scrollbar lg:tw-scrollbar-thin tw-scrollbar-thumb-iron-500 tw-scrollbar-track-iron-800 hover:tw-scrollbar-thumb-iron-300 tailwind-scope ${
+  const containerClassName = `tw-relative lg:tw-mt-4 tw-flex tw-flex-col lg:tw-h-full lg:tw-flex-1 tailwind-scope ${
     capacitor.isCapacitor ? " tw-pb-[calc(4rem+88px)]" : ""
   }`;
 

components/waves/detailed/drops/WaveDropsScrollContainer.tsx

@@ -92,7 +92,7 @@ export const WaveDropsScrollContainer = forwardRef<
     return (
       <div
         ref={ref}
-        className="tw-pb-2 tw-bg-iron-950 tw-flex tw-flex-col-reverse tw-flex-grow tw-overflow-y-auto tw-divide-y tw-divide-iron-800 tw-divide-solid tw-divide-x-0 tw-scrollbar-thin tw-scrollbar-thumb-iron-500 tw-scrollbar-track-iron-800 hover:tw-scrollbar-thumb-iron-300 tw-transition-all tw-duration-300"
+        className="tw-pb-2 tw-flex tw-flex-col-reverse tw-flex-grow tw-overflow-y-auto tw-divide-y tw-divide-iron-800 tw-divide-solid tw-divide-x-0 tw-scrollbar-thin tw-scrollbar-thumb-iron-500 tw-scrollbar-track-iron-800 hover:tw-scrollbar-thumb-iron-300 tw-transition-all tw-duration-300"
         onScroll={handleScroll}
       >
         <div className="tw-flex tw-flex-col-reverse tw-flex-grow">

hooks/useMyStreamQuery.ts

@@ -4,8 +4,18 @@ import { TypedFeedItem } from "../types/feed.types";
 import { QueryKey } from "../components/react-query-wrapper/ReactQueryWrapper";
 import { commonApiFetch } from "../services/api/common-api";
 
+interface UseMyStreamQueryProps {
+  reverse?: boolean;
+}
+
+interface UsePollingQueryProps {
+  isInitialQueryDone: boolean;
+  items: TypedFeedItem[];
+  reverse?: boolean;
+}
 
-export function useMyStreamQuery() {
+export function useMyStreamQuery(props: UseMyStreamQueryProps = {}) {
+  const { reverse = false } = props;
   const [items, setItems] = useState<TypedFeedItem[]>([]);
   const [isInitialQueryDone, setIsInitialQueryDone] = useState(false);
 
@@ -26,14 +36,16 @@ export function useMyStreamQuery() {
   });
 
   useEffect(() => {
-    setItems(query.data?.pages.flat() ?? []);
+    const flatItems = query.data?.pages.flat() ?? [];
+    setItems(reverse ? [...flatItems].reverse() : flatItems);
     setIsInitialQueryDone(true);
-  }, [query.data]);
+  }, [query.data, reverse]);
 
   return { ...query, items, isInitialQueryDone };
 }
 
-export function usePollingQuery(isInitialQueryDone: boolean, items: TypedFeedItem[]) {
+export function usePollingQuery(props: UsePollingQueryProps) {
+  const { isInitialQueryDone, items, reverse = false } = props;
   const [haveNewItems, setHaveNewItems] = useState(false);
   const [isTabVisible, setIsTabVisible] = useState(!document.hidden);
 
@@ -74,14 +86,14 @@ export function usePollingQuery(isInitialQueryDone: boolean, items: TypedFeedIte
   useEffect(() => {
     if (pollingResult && pollingResult.length > 0 && items.length > 0) {
       const latestPolledItem = pollingResult[0];
-      const latestExistingItem = items[0];
-      setHaveNewItems(latestPolledItem.serial_no > latestExistingItem.serial_no);
+      const existingItem = reverse ? items.at(-1) : items[0];
+      setHaveNewItems(existingItem ? latestPolledItem.serial_no > existingItem.serial_no : true);
     } else if (pollingResult && pollingResult.length > 0 && items.length === 0) {
       setHaveNewItems(true);
     } else {
       setHaveNewItems(false);
     }
-  }, [pollingResult, items]);
+  }, [pollingResult, items, reverse]);
 
   return { haveNewItems };
 }