Merge upstream develop

Author: github-actions[bot]

apps/polycentric/src/common/components/layout/Layout.tsx

@@ -78,15 +78,28 @@ type PrimaryColumnProps = {
 };
 function PrimaryColumn({ children }: PrimaryColumnProps) {
   const { theme } = useTheme();
+  const { height: windowHeight } = useWindowDimensions();
+
   return (
     <View
       testID="primaryColumn"
       style={[
         Atoms.flex_1,
         Atoms.pb_lg,
-        { borderLeftColor: theme.palette.neutral_25, borderLeftWidth: 1 },
-        { borderRightColor: theme.palette.neutral_25, borderRightWidth: 1 },
-        { maxWidth: 600 },
+        {
+          maxWidth: 600,
+          borderLeftColor: theme.palette.neutral_25,
+          borderLeftWidth: 1,
+          borderRightColor: theme.palette.neutral_25,
+          borderRightWidth: 1,
+        },
+        // Web page-scroll: let the column grow with content so the
+        // borders span the full scrollable height. `self_start` opts
+        // out of the row's cross-axis stretch; `minHeight` keeps
+        // borders painting to the viewport bottom on short-content
+        // pages.
+        isWeb && Atoms.self_start,
+        isWeb && { minHeight: windowHeight },
       ]}
     >
       {children}
@@ -268,42 +281,52 @@ export const RightSidebar = memo(function RightSidebar({
 
   return (
     <View style={{ width, marginRight }}>
+      {/* Pin to viewport on web so it stays visible while the primary
+          column scrolls; the outer View reserves the row space. */}
       <View
-        style={[
-          Atoms.justify_between,
-          Atoms.align_center,
-          Atoms.h_full,
-          Atoms.pb_lg,
-        ]}
+        style={
+          isWeb
+            ? { position: 'fixed', top: 0, height: '100%', width }
+            : undefined
+        }
       >
-        <View style={[Atoms.flex_1]}></View>
         <View
           style={[
-            Atoms.flex_row,
-            Atoms.items_center,
-            Atoms.w_full,
-            Atoms.py_sm,
-            Atoms.px_sm,
-            Atoms.gap_sm,
-            Atoms.flex_wrap,
+            Atoms.justify_between,
+            Atoms.align_center,
+            Atoms.h_full,
+            Atoms.pb_lg,
           ]}
         >
-          <Pressable
-            accessibilityLabel="Toggle color theme"
-            accessibilityRole="button"
-            hitSlop={8}
-            onPress={toggleTheme}
-            style={({ pressed }) => [pressed && { opacity: 0.65 }]}
+          <View style={[Atoms.flex_1]}></View>
+          <View
+            style={[
+              Atoms.flex_row,
+              Atoms.items_center,
+              Atoms.w_full,
+              Atoms.py_sm,
+              Atoms.px_sm,
+              Atoms.gap_sm,
+              Atoms.flex_wrap,
+            ]}
           >
-            <Ionicons
-              name={theme.name === 'dark' ? 'moon' : 'sunny'}
-              size={typography.fontSize.sm}
-              color={theme.palette.neutral_500}
-            />
-          </Pressable>
-          {LINKS.map(({ text, href }) => (
-            <RightSidebarLink key={href} href={href} text={text} />
-          ))}
+            <Pressable
+              accessibilityLabel="Toggle color theme"
+              accessibilityRole="button"
+              hitSlop={8}
+              onPress={toggleTheme}
+              style={({ pressed }) => [pressed && { opacity: 0.65 }]}
+            >
+              <Ionicons
+                name={theme.name === 'dark' ? 'moon' : 'sunny'}
+                size={typography.fontSize.sm}
+                color={theme.palette.neutral_500}
+              />
+            </Pressable>
+            {LINKS.map(({ text, href }) => (
+              <RightSidebarLink key={href} href={href} text={text} />
+            ))}
+          </View>
         </View>
       </View>
     </View>

apps/polycentric/src/features/feed/FeedScreen.tsx

@@ -1,13 +1,11 @@
 import { Ionicons } from '@expo/vector-icons';
 import { Screen } from '@/src/common/components/layout';
-import { View } from 'react-native';
 import { Fab } from '@/src/common/components';
 import { FeedViewer, type FeedType } from '@/src/features/post';
 import { ComposerInput } from '@/src/features/composer';
 import { useExploreFeed } from './hooks/useExploreFeed';
 import { useFollowingFeed } from './hooks/useFollowingFeed';
 import { openCompose } from '@/src/common/constants';
-import { Atoms } from '@/src/common/theme';
 import { isWeb } from '@/src/common/util/platform';
 import { usePathname } from 'expo-router';
 
@@ -41,18 +39,16 @@ export default function FeedScreen() {
     <Screen>
       <Screen.PrimaryColumn>
         {selectedFeed === 'following' ? <ComposerInput /> : null}
-        <View style={[Atoms.flex_1]}>
-          <FeedViewer
-            key={selectedFeed}
-            items={currentFeed.items}
-            isLoading={currentFeed.isLoading}
-            error={currentFeed.error}
-            onRefresh={currentFeed.refresh}
-            onEndReached={currentFeed.loadMore}
-            hasMore={currentFeed.hasMore}
-            bottomPadding={0}
-          />
-        </View>
+        <FeedViewer
+          key={selectedFeed}
+          items={currentFeed.items}
+          isLoading={currentFeed.isLoading}
+          error={currentFeed.error}
+          onRefresh={currentFeed.refresh}
+          onEndReached={currentFeed.loadMore}
+          hasMore={currentFeed.hasMore}
+          bottomPadding={0}
+        />
         {showComposeFab ? (
           <Fab
             title="New Post"

apps/polycentric/src/features/post/FeedViewer.tsx

@@ -3,7 +3,7 @@ import type { PostData } from '@/src/common/lib/polycentric-hooks';
 import { Atoms, useTheme } from '@/src/common/theme';
 import { isWeb } from '@/src/common/util/platform';
 import { FlashList } from '@shopify/flash-list';
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import {
   ActivityIndicator,
   type LayoutChangeEvent,
@@ -22,10 +22,94 @@ interface FeedViewerProps {
   bottomPadding?: number;
 }
 
-export function FeedViewer({
+export function FeedViewer(props: FeedViewerProps) {
+  if (props.error) {
+    return (
+      <View
+        style={[
+          Atoms.flex_1,
+          Atoms.items_center,
+          Atoms.justify_center,
+          Atoms.p_lg,
+        ]}
+      >
+        <Text color="neutral_500">Failed to load feed</Text>
+      </View>
+    );
+  }
+
+  // On web let the page scroll naturally — the Stack's content area
+  // already has `overflow: auto`. Inline rendering keeps that scroll
+  // chain intact instead of FlashList swallowing it.
+  if (isWeb) {
+    return <WebFeedViewer {...props} />;
+  }
+  return <NativeFeedViewer {...props} />;
+}
+
+function WebFeedViewer({
+  items,
+  isLoading,
+  onEndReached,
+  hasMore,
+  bottomPadding,
+}: FeedViewerProps) {
+  const { theme } = useTheme();
+  const sentinelRef = useRef<View>(null);
+
+  // IntersectionObserver on a sentinel at the bottom triggers
+  // `onEndReached` when the user scrolls near it.
+  useEffect(() => {
+    if (!hasMore || !onEndReached) return;
+    const node = sentinelRef.current as unknown as Element | null;
+    if (!node || typeof IntersectionObserver === 'undefined') return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((e) => e.isIntersecting)) onEndReached();
+      },
+      { rootMargin: '400px' },
+    );
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [hasMore, onEndReached, items.length]);
+
+  if (items.length === 0 && !isLoading) {
+    return (
+      <View
+        style={[
+          Atoms.flex_1,
+          Atoms.items_center,
+          Atoms.justify_center,
+          Atoms.p_lg,
+        ]}
+      >
+        <Text color="neutral_500">No posts yet</Text>
+      </View>
+    );
+  }
+
+  return (
+    <View style={{ paddingBottom: bottomPadding }}>
+      {items.map((item, i) => (
+        <Post key={`${item.id}:${i}`} post={item} />
+      ))}
+      {hasMore && <View ref={sentinelRef} style={{ height: 1 }} />}
+      {isLoading && items.length > 0 ? (
+        <View style={[Atoms.items_center, Atoms.p_lg]}>
+          <ActivityIndicator
+            size="small"
+            color={theme.palette.neutral_500}
+            accessibilityLabel="Loading more posts"
+          />
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+function NativeFeedViewer({
   items,
   isLoading,
-  error,
   onRefresh,
   onEndReached,
   hasMore,
@@ -42,10 +126,8 @@ export function FeedViewer({
     setHasLayout(true);
   }, []);
 
-  // Our routing and navigation leaves
-  // inactive screens mounted with tiny dimensions.
-  // When navigating back, this can cause a momentary visual glitch.
-  // Hiding the invalid layout prevents the visual glitch.
+  // Inactive screens stay mounted with tiny dimensions. Hide the list
+  // briefly until it has a valid layout to avoid a flash on back-nav.
   const layoutInvalid = hasLayout && (layoutBox.w < 2 || layoutBox.h < 2);
 
   const renderItem = useCallback(
@@ -58,31 +140,9 @@ export function FeedViewer({
     [],
   );
 
-  if (error) {
-    return (
-      <View
-        style={[
-          Atoms.flex_1,
-          Atoms.items_center,
-          Atoms.justify_center,
-          Atoms.p_lg,
-        ]}
-      >
-        <Text color="neutral_500">Failed to load feed</Text>
-      </View>
-    );
-  }
-
   return (
     <View
-      style={[
-        Atoms.flex_1,
-        isWeb &&
-          layoutInvalid && {
-            opacity: 0,
-            pointerEvents: 'none',
-          },
-      ]}
+      style={[Atoms.flex_1, layoutInvalid && { opacity: 0 }]}
       onLayout={onFeedContainerLayout}
     >
       <FlashList

apps/polycentric/src/features/profile/ProfileFeedSwitcher.tsx

@@ -0,0 +1,36 @@
+import type { FeedHookResult } from '@/src/features/feed/hooks/types';
+import { FeedViewer } from '@/src/features/post';
+
+type ProfileFeedTab = {
+  key: string;
+  feed: FeedHookResult;
+  bottomPadding?: number;
+};
+
+/**
+ * Renders a set of profile feeds and shows the active one. The feed
+ * hooks themselves live on the parent so their data + fetch state
+ * survive tab switches; only the viewer is swapped.
+ */
+export function ProfileFeedSwitcher({
+  tabs,
+  activeKey,
+}: {
+  tabs: ProfileFeedTab[];
+  activeKey: string;
+}) {
+  const active = tabs.find((t) => t.key === activeKey) ?? tabs[0];
+  if (!active) return null;
+  return (
+    <FeedViewer
+      key={active.key}
+      items={active.feed.items}
+      isLoading={active.feed.isLoading}
+      error={active.feed.error}
+      onRefresh={active.feed.refresh}
+      onEndReached={active.feed.loadMore}
+      hasMore={active.feed.hasMore}
+      bottomPadding={active.bottomPadding}
+    />
+  );
+}