@mereb/app-feed 0.0.3 → 0.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mereb/app-feed",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Feed experience building blocks for Mereb apps",
   "type": "module",
   "main": "src/index.tsx",

package/src/index.tsx

@@ -50,10 +50,69 @@ type FeedScreenProps = {
     onSelectAuthor?: (handle: string) => void;
 };
 
+type Suggestion = {
+    handle: string;
+    hint?: string;
+};
+
+const FALLBACK_SUGGESTIONS: Suggestion[] = [
+    {handle: 'mereb-team', hint: 'Product updates'},
+    {handle: 'designers', hint: 'Design drops'},
+    {handle: 'dev-journal', hint: 'Engineering notes'}
+];
+
+function SuggestionsSection({
+    suggestions,
+    onSelectAuthor
+}: Readonly<{
+    suggestions: Suggestion[];
+    onSelectAuthor?: (handle: string) => void;
+}>) {
+    if (suggestions.length === 0) return null;
+
+    return (
+        <View style={styles.suggestionsCard}>
+            <Text style={styles.suggestionsTitle}>Discover people to follow</Text>
+            <Text style={styles.suggestionsBody}>
+                Follow a few profiles to keep your feed fresh.
+            </Text>
+            <View style={styles.suggestionsList}>
+                {suggestions.map((sugg) => (
+                    <TouchableOpacity
+                        key={sugg.handle}
+                        style={styles.suggestionPill}
+                        onPress={() => onSelectAuthor?.(sugg.handle)}
+                        accessibilityRole="button"
+                    >
+                        <Text style={styles.suggestionHandle}>@{sugg.handle}</Text>
+                        {sugg.hint ? (
+                            <Text style={styles.suggestionHint}>{sugg.hint}</Text>
+                        ) : null}
+                    </TouchableOpacity>
+                ))}
+            </View>
+        </View>
+    );
+}
+
 export function FeedScreen({onSelectAuthor}: Readonly<FeedScreenProps>) {
     const {data, loading, error, refetch} = useFeedQuery();
 
     const posts = useMemo(() => selectFeedNodes(data), [data]);
+    const suggestions = useMemo(() => {
+        const seen = new Set<string>();
+        const derived: Suggestion[] = [];
+        for (const post of posts) {
+            if (seen.has(post.author.handle)) continue;
+            seen.add(post.author.handle);
+            derived.push({handle: post.author.handle});
+        }
+        const combined = [...derived, ...FALLBACK_SUGGESTIONS].filter(
+            (s) => !seen.has(s.handle) // avoid dupes with fallbacks
+        );
+        return combined.slice(0, 5);
+    }, [posts]);
+    const shouldShowSuggestions = !loading && posts.length < 5;
 
     const handleRefresh = useCallback(() => {
         void refetch();
@@ -74,6 +133,14 @@ export function FeedScreen({onSelectAuthor}: Readonly<FeedScreenProps>) {
             contentContainerStyle={styles.listContent}
             ItemSeparatorComponent={SeparatorWithStyle}
             refreshControl={<RefreshControl refreshing={loading} onRefresh={handleRefresh}/>}
+            ListHeaderComponent={
+                shouldShowSuggestions ? (
+                    <SuggestionsSection
+                        suggestions={suggestions}
+                        onSelectAuthor={onSelectAuthor}
+                    />
+                ) : null
+            }
             renderItem={({item}) => (
                 <PostCard post={item} onSelectAuthor={onSelectAuthor}/>
             )}
@@ -153,5 +220,42 @@ const styles = StyleSheet.create({
         fontSize: 14,
         color: color.textMuted,
         textAlign: 'center'
+    },
+    suggestionsCard: {
+        backgroundColor: color.surface,
+        borderRadius: radius.lg,
+        padding: spacing.lg,
+        marginBottom: spacing.lg
+    },
+    suggestionsTitle: {
+        fontSize: 18,
+        fontWeight: '700',
+        color: color.text,
+        marginBottom: spacing.xs
+    },
+    suggestionsBody: {
+        color: color.textMuted,
+        marginBottom: spacing.md
+    },
+    suggestionsList: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: spacing.sm
+    },
+    suggestionPill: {
+        paddingVertical: spacing.xs,
+        paddingHorizontal: spacing.md,
+        borderRadius: radius.pill ?? radius.lg,
+        backgroundColor: color.neutralMuted ?? color.surfaceMuted,
+        flexDirection: 'column',
+        gap: spacing.xxs
+    },
+    suggestionHandle: {
+        color: color.text,
+        fontWeight: '600'
+    },
+    suggestionHint: {
+        color: color.textMuted,
+        fontSize: 12
     }
 });