Merge upstream develop

Author: github-actions[bot]

apps/polycentric/src/common/link-previews/provider.test.tsx

@@ -2,9 +2,10 @@ import AsyncStorage from '@react-native-async-storage/async-storage';
 import * as React from 'react';
 import { act } from 'react';
 import TestRenderer from 'react-test-renderer';
+import { useSettings } from '@/src/common/settings';
 import { LinkPreviewsProvider, useLinkPreviews } from './';
 
-const KEY = 'polycentric:generate-link-previews-enabled';
+const SETTINGS_KEY = 'polycentric:settings';
 
 type Api = ReturnType<typeof useLinkPreviews>;
 
@@ -25,35 +26,47 @@ function renderHook() {
   return { result };
 }
 
-/** Flush the load effect's pending microtasks. */
+/** Flush pending microtasks (hydration, state updates). */
 const flush = () => act(async () => {});
 
 beforeEach(async () => {
   await AsyncStorage.clear();
+  useSettings.setState({ linkPreviewsEnabled: true });
 });
 
 describe('LinkPreviewsProvider', () => {
   it('defaults to enabled when nothing is stored', async () => {
+    await useSettings.persist.rehydrate();
     const { result } = renderHook();
     await flush();
     expect(result.current.enabled).toBe(true);
   });
 
   it('hydrates the stored value', async () => {
-    await AsyncStorage.setItem(KEY, 'false');
+    await AsyncStorage.setItem(
+      SETTINGS_KEY,
+      JSON.stringify({ state: { linkPreviewsEnabled: false } }),
+    );
+    await useSettings.persist.rehydrate();
+
     const { result } = renderHook();
     await flush();
     expect(result.current.enabled).toBe(false);
   });
 
   it('updates and persists when toggled', async () => {
+    await useSettings.persist.rehydrate();
+
     const { result } = renderHook();
     await flush();
 
     act(() => result.current.setEnabled(false));
     expect(result.current.enabled).toBe(false);
 
-    await flush();
-    expect(await AsyncStorage.getItem(KEY)).toBe('false');
+    await useSettings.persist.rehydrate();
+
+    const stored = await AsyncStorage.getItem(SETTINGS_KEY);
+    const parsed = stored ? JSON.parse(stored) : {};
+    expect(parsed.state.linkPreviewsEnabled).toBe(false);
   });
 });

apps/polycentric/src/common/link-previews/provider.tsx

@@ -7,7 +7,7 @@ import {
   useState,
   type PropsWithChildren,
 } from 'react';
-import { loadLinkPreviewsEnabled, saveLinkPreviewsEnabled } from './storage';
+import { useSettings } from '@/src/common/settings';
 
 export type LinkPreviewsContextValue = {
   /** Whether to generate a link preview for URLs in the user's own posts. */
@@ -21,23 +21,19 @@ export const Context = createContext<LinkPreviewsContextValue | undefined>(
 Context.displayName = 'PolycentricLinkPreviewsContext';
 
 export function LinkPreviewsProvider({ children }: PropsWithChildren) {
-  // Default on: matches the prior always-generate behavior. Unlike the theme
-  // provider we don't block render until the stored value loads — a brief
-  // default-on before hydration is harmless (it only affects composing a post,
-  // not the initial paint).
-  const [enabled, setEnabledState] = useState(true);
+  const stored = useSettings((s) => s.linkPreviewsEnabled);
+  const [hydrated, setHydrated] = useState(useSettings.persist.hasHydrated());
 
   useEffect(() => {
-    void loadLinkPreviewsEnabled().then((stored) => {
-      if (stored !== undefined) {
-        setEnabledState(stored);
-      }
-    });
+    const unsub = useSettings.persist.onFinishHydration(() =>
+      setHydrated(true),
+    );
+    return unsub;
   }, []);
 
+  const enabled = hydrated ? stored : true;
   const setEnabled = useCallback((next: boolean) => {
-    setEnabledState(next);
-    void saveLinkPreviewsEnabled(next);
+    useSettings.getState().setLinkPreviewsEnabled(next);
   }, []);
 
   const value = useMemo(() => ({ enabled, setEnabled }), [enabled, setEnabled]);

apps/polycentric/src/common/link-previews/storage.test.ts

@@ -1,40 +1,54 @@
 import AsyncStorage from '@react-native-async-storage/async-storage';
-import { loadLinkPreviewsEnabled, saveLinkPreviewsEnabled } from './storage';
+import { useSettings } from '@/src/common/settings';
 
-const KEY = 'polycentric:generate-link-previews-enabled';
+const SETTINGS_KEY = 'polycentric:settings';
 
 beforeEach(async () => {
   await AsyncStorage.clear();
+  useSettings.setState({ linkPreviewsEnabled: true });
   jest.clearAllMocks();
 });
 
-describe('link-previews storage', () => {
-  it('returns undefined when nothing is stored', async () => {
-    expect(await loadLinkPreviewsEnabled()).toBeUndefined();
+describe('settings store — linkPreviewsEnabled', () => {
+  it('defaults to true', () => {
+    expect(useSettings.getState().linkPreviewsEnabled).toBe(true);
   });
 
-  it('round-trips true and false', async () => {
-    await saveLinkPreviewsEnabled(true);
-    expect(await loadLinkPreviewsEnabled()).toBe(true);
+  it('round-trips true and false', () => {
+    useSettings.getState().setLinkPreviewsEnabled(false);
+    expect(useSettings.getState().linkPreviewsEnabled).toBe(false);
 
-    await saveLinkPreviewsEnabled(false);
-    expect(await loadLinkPreviewsEnabled()).toBe(false);
+    useSettings.getState().setLinkPreviewsEnabled(true);
+    expect(useSettings.getState().linkPreviewsEnabled).toBe(true);
   });
 
-  it('persists as a string under the documented key', async () => {
-    await saveLinkPreviewsEnabled(false);
-    expect(await AsyncStorage.getItem(KEY)).toBe('false');
+  it('persists via the settings key', async () => {
+    useSettings.getState().setLinkPreviewsEnabled(false);
+
+    // The persist middleware calls AsyncStorage.setItem during setState.
+    // Flush pending microtasks so the mock's async setItem resolves.
+    await new Promise((resolve) => setImmediate(resolve));
+
+    expect(AsyncStorage.setItem).toHaveBeenCalledWith(
+      SETTINGS_KEY,
+      expect.stringContaining('"linkPreviewsEnabled":false'),
+    );
   });
 
-  it('ignores a malformed stored value', async () => {
-    await AsyncStorage.setItem(KEY, 'maybe');
-    expect(await loadLinkPreviewsEnabled()).toBeUndefined();
+  it('recovers from a malformed stored value', async () => {
+    await AsyncStorage.setItem(SETTINGS_KEY, '{broken');
+    const { persist } = useSettings;
+    await persist.rehydrate();
+    // Should fall back to the default
+    expect(useSettings.getState().linkPreviewsEnabled).toBe(true);
   });
 
-  it('returns undefined instead of throwing when storage errors', async () => {
+  it('returns the default instead of throwing when storage errors', async () => {
     (AsyncStorage.getItem as jest.Mock).mockRejectedValueOnce(
       new Error('boom'),
     );
-    expect(await loadLinkPreviewsEnabled()).toBeUndefined();
+    const { persist } = useSettings;
+    await persist.rehydrate();
+    expect(useSettings.getState().linkPreviewsEnabled).toBe(true);
   });
 });

apps/polycentric/src/common/link-previews/storage.ts

@@ -0,0 +1,32 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { create } from 'zustand';
+import { createJSONStorage, persist } from 'zustand/middleware';
+
+export interface SettingsState {
+  theme: 'light' | 'dark';
+  linkPreviewsEnabled: boolean;
+}
+
+export interface SettingsActions {
+  setTheme: (theme: 'light' | 'dark') => void;
+  setLinkPreviewsEnabled: (enabled: boolean) => void;
+}
+
+export type SettingsStore = SettingsState & SettingsActions;
+
+export const useSettings = create<SettingsStore>()(
+  persist(
+    (set) => ({
+      theme: 'light',
+      linkPreviewsEnabled: true,
+
+      setTheme: (theme) => set({ theme }),
+      setLinkPreviewsEnabled: (enabled) =>
+        set({ linkPreviewsEnabled: enabled }),
+    }),
+    {
+      name: 'polycentric:settings',
+      storage: createJSONStorage(() => AsyncStorage),
+    },
+  ),
+);

apps/polycentric/src/common/settings/index.ts

@@ -14,7 +14,7 @@ import {
   type PropsWithChildren,
 } from 'react';
 import { useColorScheme } from 'react-native';
-import { loadThemeName, saveThemeName } from './storage';
+import { useSettings } from '@/src/common/settings';
 import { themes, type Theme, type ThemeKey } from './themes';
 
 export type ThemeContextValue = {
@@ -32,25 +32,25 @@ export function ThemeProvider({ children }: PropsWithChildren) {
     'Inter-Italic': Fonts['Inter-Italic'],
   });
 
-  // useColorScheme returns the system theme preference.
   const colorScheme = useColorScheme();
-  const [activeThemeName, setActiveThemeNameState] = useState<ThemeKey>(
-    colorScheme === 'dark' ? 'dark' : 'light',
-  );
-  const [themePreferenceLoaded, setThemePreferenceLoaded] = useState(false);
+  const storedTheme = useSettings((s) => s.theme);
+  const [hydrated, setHydrated] = useState(useSettings.persist.hasHydrated());
 
   useEffect(() => {
-    void loadThemeName().then((themeName) => {
-      if (themeName) {
-        setActiveThemeNameState(themeName);
-      }
-      setThemePreferenceLoaded(true);
-    });
+    const unsub = useSettings.persist.onFinishHydration(() =>
+      setHydrated(true),
+    );
+    return unsub;
   }, []);
 
+  const activeThemeName = hydrated
+    ? storedTheme
+    : colorScheme === 'dark'
+      ? 'dark'
+      : 'light';
+
   const setActiveThemeName = useCallback((name: ThemeKey) => {
-    setActiveThemeNameState(name);
-    void saveThemeName(name);
+    useSettings.getState().setTheme(name);
   }, []);
 
   const theme = useMemo(() => themes[activeThemeName], [activeThemeName]);
@@ -64,7 +64,7 @@ export function ThemeProvider({ children }: PropsWithChildren) {
     throw fontError;
   }
 
-  if (!fontsLoaded || !themePreferenceLoaded) {
+  if (!fontsLoaded || !hydrated) {
     return null;
   }
 

apps/polycentric/src/common/theme/provider.tsx

@@ -24,7 +24,7 @@ export type FeedListProps = Omit<ListProps<PostData>, 'data' | 'renderItem'> & {
 const defaultKeyExtractor = (item: PostData) => item.repostId ?? item.id;
 
 const defaultRenderItem: ListRenderItem<PostData> = ({ item }) => (
-  <Post post={item} />
+  <Post post={item} compactLinkPreview />
 );
 
 const FeedList = forwardRef<ListRef, FeedListProps>(function FeedList(

apps/polycentric/src/common/theme/storage.ts

@@ -42,6 +42,8 @@ interface PostProps {
   showThreadLineBelow?: boolean;
   /** Hide the bottom hairline (used inside conversation views where the thread line is the visual seam instead). */
   hideBottomBorder?: boolean;
+  /** Render the link preview in its compact side-image layout (used in feeds). */
+  compactLinkPreview?: boolean;
 }
 
 export const Post = memo(function Post({
@@ -51,6 +53,7 @@ export const Post = memo(function Post({
   showThreadLineAbove = false,
   showThreadLineBelow = false,
   hideBottomBorder = false,
+  compactLinkPreview = false,
 }: PostProps) {
   const { theme } = useTheme();
 
@@ -211,7 +214,12 @@ export const Post = memo(function Post({
           ) : null}
           {/* Render only the first link preview. A post may carry multiple
               `links` (e.g. from another client), but we cap the UI at one. */}
-          {post.links?.[0] ? <LinkPreviewCard link={post.links[0]} /> : null}
+          {post.links?.[0] ? (
+            <LinkPreviewCard
+              link={post.links[0]}
+              compact={compactLinkPreview}
+            />
+          ) : null}
           {post.images?.length > 0 && <PostImages images={post.images} />}
           {post.quoteId ? <PostContentQuote quoteId={post.quoteId} /> : null}
           {showContentExpandToggle && (

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

@@ -1,7 +1,7 @@
 import { fireEvent, render } from '@testing-library/react-native';
-import { Linking } from 'react-native';
+import { Linking, StyleSheet } from 'react-native';
 import type { v2 } from '@polycentric/react-native';
-import { LinkPreviewCard } from './LinkPreviewCard';
+import { COMPACT_IMAGE_WIDTH, LinkPreviewCard } from './LinkPreviewCard';
 
 // The card pulls its colors/atoms from the theme; under test we don't render
 // the real ThemeProvider (it blocks on font + storage loads), so stub the
@@ -81,6 +81,22 @@ describe('LinkPreviewCard', () => {
     );
   });
 
+  it('renders the thumbnail as a fixed-width side image when compact', async () => {
+    const { getByTestId } = await render(
+      <LinkPreviewCard
+        compact
+        link={makeLink({ image: 'https://img.test/x.png' })}
+      />,
+    );
+    // Compact swaps the full-width banner (sized by aspect ratio) for a
+    // fixed-width thumbnail.
+    const style = StyleSheet.flatten(
+      getByTestId('linkPreviewImage').props.style,
+    );
+    expect(style.width).toBe(COMPACT_IMAGE_WIDTH);
+    expect(style.aspectRatio).toBeUndefined();
+  });
+
   it('renders no image and only the host line when optional fields are empty', async () => {
     const { queryByTestId, queryAllByText } = await render(
       <LinkPreviewCard link={makeLink()} />,