More UI and UX tweaks

Author: markharding

apps/polycentric/app/_layout.tsx

@@ -69,7 +69,6 @@ export default function RootLayout() {
     if (!ready) {
       return;
     }
-    console.log('app is ready?');
     void SplashScreen.hideAsync().catch(() => {});
   }, [ready]);
 

apps/polycentric/src/common/components/List/List.tsx

@@ -26,6 +26,10 @@ const AnimatedFlashList = Animated.createAnimatedComponent(FlashList);
 const WEB_INITIAL_VISIBLE = 12;
 const WEB_PAGE_SIZE = 12;
 
+// Keep the sticky header fully visible until the user has scrolled past
+// this distance; only then does scroll-driven hiding kick in.
+const HEADER_HIDE_THRESHOLD = 50;
+
 export type { FlashListProps, ListRenderItem, ListRenderItemInfo };
 
 export type ListProps<T> = FlashListProps<T>;
@@ -54,9 +58,20 @@ function NativeList<T>({
     const currentY = event.contentOffset.y;
     const h = headerHeightShared.value;
 
-    const delta = currentY - lastScrollY.value;
-    const next = headerTranslate.value - delta;
-    headerTranslate.value = Math.min(0, Math.max(-h, next));
+    if (currentY <= HEADER_HIDE_THRESHOLD) {
+      headerTranslate.value = 0;
+    } else {
+      // Compute delta relative to the threshold so movement past it
+      // starts the hide from translate 0 instead of snapping.
+      const lastEffective = Math.max(
+        0,
+        lastScrollY.value - HEADER_HIDE_THRESHOLD,
+      );
+      const currentEffective = currentY - HEADER_HIDE_THRESHOLD;
+      const delta = currentEffective - lastEffective;
+      const next = headerTranslate.value - delta;
+      headerTranslate.value = Math.min(0, Math.max(-h, next));
+    }
     lastScrollY.value = currentY;
   });
 

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

@@ -0,0 +1,32 @@
+import { useIsFocused } from 'expo-router';
+import { useEffect, type ReactNode } from 'react';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+
+// Native tab controllers swap screens instantly; this wraps tab content
+// so it fades in whenever the screen becomes focused.
+export function TabFade({ children }: { children: ReactNode }) {
+  const isFocused = useIsFocused();
+  const opacity = useSharedValue(0);
+
+  useEffect(() => {
+    if (isFocused) {
+      opacity.value = withTiming(1, { duration: 200 });
+    } else {
+      opacity.value = 0;
+    }
+  }, [isFocused, opacity]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+  }));
+
+  return (
+    <Animated.View style={[{ flex: 1 }, animatedStyle]}>
+      {children}
+    </Animated.View>
+  );
+}

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

@@ -7,7 +7,7 @@ import BLUE_LOGO from '../../assets/images/polycentric-logo-blue-256.png';
 import WHITE_LOGO from '../../assets/images/polycentric-logo-white-256.png';
 import { ProfileAvatar, Text } from '../primitives';
 import { useCurrentIdentity } from '../../lib/polycentric-hooks';
-import { memo, useState, type ReactNode } from 'react';
+import { memo, type ReactNode } from 'react';
 
 const SIDE_WIDTH = 32;
 
@@ -27,9 +27,7 @@ function Topbar({ title, center, right }: TopbarProps) {
   const { theme } = useTheme();
 
   const segments = useSegments();
-  const [isTabRoot] = useState(
-    () => segments[0] === '(tabs)' && segments.length === 2,
-  );
+  const isTabRoot = segments[0] === '(tabs)' && segments.length === 2;
   const canGoBack = !isTabRoot;
 
   const identityKey = currentIdentity?.identityKey ?? null;

apps/polycentric/src/common/lib/polycentric-hooks/helpers.ts

@@ -143,6 +143,19 @@ export function bytesToHex(bytes: Uint8Array): string {
     .join('');
 }
 
+/** Hex of the event key for a bundle — matches `PostData.id` encoding.
+ *  Returns `null` if the bundle isn't a well-formed signed event. */
+export function bundleEventId(bundle: v2.EventBundle): string | null {
+  if (!bundle.signedEvent) return null;
+  try {
+    const event = v2.Event.fromBinary(bundle.signedEvent.eventBytes);
+    if (!event.key) return null;
+    return bytesToHex(v2.EventKey.toBinary(event.key));
+  } catch {
+    return null;
+  }
+}
+
 export function hexToBytes(hex: string): Uint8Array {
   const bytes = new Uint8Array(hex.length / 2);
   for (let i = 0; i < hex.length; i += 2) {

apps/polycentric/src/common/lib/polycentric-hooks/index.ts

@@ -24,9 +24,6 @@ export {
   type ProfileEditState,
 } from '../../../features/profile/hooks/useProfileEdit';
 
-// Local post injection (composer → live feeds)
-export { useLocalPosts as useLocalPostInjection } from '../../../features/post/hooks/useLocalPosts';
-
 // Helpers
 export {
   decodePostBundle as decodeV2PostBundle,
@@ -35,6 +32,7 @@ export {
   pickImageVariant,
   timeAgo,
   bytesToHex,
+  bundleEventId,
   hexToBytes,
   truncateName,
   publicKeyToString,

apps/polycentric/src/common/query/hooks/useQuery.ts

@@ -17,11 +17,13 @@ export type QueryRef = {
 
 type QueryArgs = {
   client: PolycentricClient;
-  queryKey: string[];
+  queryKey: QueryKey;
   query: Query;
   opts: QueryOpts | undefined;
 };
 
+type QueryKey = string[];
+
 type SubscriptionRef = {
   refCount: number;
   dispose: () => void;
@@ -137,14 +139,6 @@ export const useQueryStore = create<QueryStoreState>((set, get) => {
       const sub = get().subscriptions.get(key);
       const target = args ?? sub?.args;
       if (target) target.client.core.invalidateQuery(target.queryKey);
-      if (sub && target) {
-        sub.dispose();
-        sub.args = target;
-        // Keep stale `data` visible — `fetch` flips status to
-        // Loading and the new fan-out's `next` emissions will
-        // overwrite as fresh results arrive.
-        sub.dispose = fetch(key, target);
-      }
     },
   };
 });
@@ -170,12 +164,43 @@ export type UseQueryResult = QueryRef & {
  */
 export function invalidateQuery(
   client: PolycentricClient,
-  queryKey: string[],
+  queryKey: QueryKey,
 ): void {
   client.core.invalidateQuery(queryKey);
   useQueryStore.getState().refresh(queryKey.join('\0'));
 }
 
+/**
+ * Returns the current cache for a query key
+ */
+export function getQueryCache(queryKey: QueryKey): QueryRef | undefined {
+  return useQueryStore.getState().queries.get(queryKey.join('\0'));
+}
+
+/**
+ * Updates the local cache state for a query key
+ */
+export function setQueryCache(
+  queryKey: QueryKey,
+  value: Partial<QueryRef>,
+): void {
+  const cacheKey = queryKey.join('\0');
+  useQueryStore.setState((state) => {
+    const prev = state.queries.get(cacheKey) ?? EMPTY_ENTRY;
+    const merged = { ...prev, ...value };
+    if (
+      merged.data === prev.data &&
+      merged.status === prev.status &&
+      merged.error === prev.error
+    ) {
+      return {};
+    }
+    const next = new Map(state.queries);
+    next.set(cacheKey, merged);
+    return { queries: next };
+  });
+}
+
 /**
  * Subscribe to a rust-core query and share its state across every
  * consumer using the same `queryKey`. The first consumer kicks off
@@ -185,7 +210,7 @@ export function invalidateQuery(
  * subscription entirely (the hook still returns cached state if any).
  */
 export function useQuery(
-  queryKey: string[],
+  queryKey: QueryKey,
   query: Query,
   opts: QueryOpts = { fetchMode: FetchMode.Default },
   enabled = true,

apps/polycentric/src/features/composer/ComposeSheetInner.tsx

@@ -31,6 +31,11 @@ import { useComposerStore } from './hooks/useComposerStore';
 import { Routes } from '@/src/common/constants';
 import { router } from 'expo-router';
 import { invalidateQuery } from '@/src/common/query/hooks/useQuery';
+import { injectReplyIntoThreadCache } from '@/src/features/post/hooks/useThread';
+import {
+  feedQueryKeys,
+  injectPostIntoFeedCache,
+} from '@/src/features/feed/hooks/feedCache';
 
 const MAX_ATTACHMENTS = 4;
 const THUMBNAIL_SIZE = 72;
@@ -179,28 +184,39 @@ export function ComposeSheetInner({
       const event = await client.buildEvent(content);
 
       const signedEvent = await client.signEvent(event);
-      // `commitEvent` persists the event locally and, when content is
-      // passed, seeds the core's content store + emits contentCreated
-      // with both signedEvent and content so feeds can decode directly.
+
+      const newBundle = v2.EventBundle.create({
+        signedEvent,
+        serializedContent: { contentBytes: v2.Content.toBinary(content) },
+      });
+      const identity = currentIdentityKey ?? '';
+
+      // Optimistically add the new event to the below query
+      if (isReply && replyTo) {
+        injectReplyIntoThreadCache(replyTo.id, newBundle);
+      }
+      injectPostIntoFeedCache(feedQueryKeys.following(), newBundle);
+      injectPostIntoFeedCache(feedQueryKeys.identity(identity), newBundle);
+      injectPostIntoFeedCache(feedQueryKeys.explore(identity), newBundle);
+
+      // `commitEvent` persists the event locally
       await client.commitEvent(signedEvent, content);
 
-      resetComposer();
+      setSubmitting(false);
       await dismissSheet(DismissReason.PostSubmitted);
+      resetComposer();
+
       void client
         .sync()
         .then(() => {
-          // Force the feed observables to re-fetch from servers so the
-          // newly-synced post appears alongside whatever else changed.
-          const identity = currentIdentityKey ?? '';
-          invalidateQuery(client, ['following_feed']);
-          invalidateQuery(client, ['identity_feed', identity]);
-          invalidateQuery(client, ['explore_feed', identity]);
+          // Invalidate all the caches now the post has been successfully submitted
+          invalidateQuery(client, feedQueryKeys.following());
+          invalidateQuery(client, feedQueryKeys.identity(identity));
+          invalidateQuery(client, feedQueryKeys.explore(identity));
         })
         .catch((err) => {
           console.warn('compose sync failed:', err);
         });
-      // TODO
-      // await onPostCreatedRef.current(signedEvent);
     } catch (err) {
       console.error(err);
       const message = err instanceof Error ? err.message : String(err);
@@ -232,7 +248,7 @@ export function ComposeSheetInner({
       <SheetHeaderBlock
         title={title}
         onClose={handleClose}
-        closeDisabled={submitting}
+        //closeDisabled={submitting}
         trailing={
           isWeb ? (
             <View style={{ minWidth: 80 }} />
@@ -251,7 +267,7 @@ export function ComposeSheetInner({
                 />
               ) : (
                 <Button
-                  title="Post"
+                  title={'Post'}
                   onPress={handlePost}
                   variant="primary"
                   disabled={!canPost}
@@ -341,7 +357,7 @@ export function ComposeSheetInner({
               autoFocus
               value={text}
               onChangeText={setText}
-              disabled={submitting}
+              // disabled={submitting}
               maxLength={2000}
               style={[
                 Atoms.px_0,

apps/polycentric/src/features/feed/hooks/feedCache.ts

@@ -0,0 +1,43 @@
+import { v2 } from '@polycentric/react-native';
+import { bundleEventId } from '@/src/common/lib/polycentric-hooks';
+import {
+  getQueryCache,
+  setQueryCache,
+} from '@/src/common/query/hooks/useQuery';
+
+export const feedQueryKeys = {
+  following: (): string[] => ['following_feed'],
+  identity: (identity: string): string[] => ['identity_feed', identity],
+  explore: (identity: string): string[] => ['explore_feed', identity],
+};
+
+/**
+ * Optimistically prepend a post into a feed
+ */
+export function injectPostIntoFeedCache(
+  queryKey: string[],
+  newBundle: v2.EventBundle,
+): void {
+  const cached = getQueryCache(queryKey);
+  if (!cached?.data) return;
+
+  const newId = bundleEventId(newBundle);
+  if (!newId) return;
+
+  let response: v2.GetFeedResponse;
+  try {
+    response = v2.GetFeedResponse.fromBinary(new Uint8Array(cached.data));
+  } catch {
+    return;
+  }
+
+  for (const b of response.eventBundles) {
+    if (bundleEventId(b) === newId) return;
+  }
+
+  const updated = v2.GetFeedResponse.create({
+    eventBundles: [newBundle, ...response.eventBundles],
+  });
+  const bytes = v2.GetFeedResponse.toBinary(updated);
+  setQueryCache(queryKey, { data: bytes.slice().buffer });
+}

apps/polycentric/src/features/feed/hooks/useExploreFeed.ts

@@ -7,6 +7,7 @@ import {
 } from '@/src/common/lib/polycentric-hooks';
 import { type FeedHookResult, NOOP } from './types';
 import { useQuery } from '@/src/common/query/hooks/useQuery';
+import { feedQueryKeys } from './feedCache';
 
 export function useExploreFeed(options?: {
   perServerLimit?: number;
@@ -17,7 +18,7 @@ export function useExploreFeed(options?: {
   const identity = client.activeIdentityKey ?? '';
 
   const query = useQuery(
-    ['explore_feed', identity],
+    feedQueryKeys.explore(identity),
     new Query.GetExploreFeed({
       identity: identity === '' ? undefined : identity,
     }),