Mentions Screen

import * as React from "react";
import { Pressable, ScrollView, View } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import { Avatar, Button, Icon, type IconName, Image, Separator, Text } from "@lumioui/ui";
import { cn, useHaptic } from "@lumioui/core";
import { Mount, ROW_STAGGER, World } from "../shared";

export interface Mention {
  id: string;
  kind: "mention" | "like" | "follow" | "comment";
  author: string;
  avatarUrl: string;
  text: string;
  time: string;
  /** Photo this activity is about — renders as the trailing thumbnail. */
  mediaUrl?: string;
  /** Day group — "Today", "This week", "Earlier". */
  section?: string;
}

export interface MentionsScreenProps {
  mentions?: Mention[];
  onItemPress?: (id: string) => void;
  onBack?: () => void;
}

const KIND_ICON: Record<Mention["kind"], IconName> = {
  mention: "users",
  like: "heart",
  follow: "user-plus",
  comment: "message-circle",
};

const KIND_BADGE: Record<Mention["kind"], string> = {
  mention: "bg-[#65A30D]",
  like: "bg-destructive",
  follow: "bg-success",
  comment: "bg-chart-3",
};

const media = (seed: string) =>
  `https://picsum.photos/seed/${seed}/120/120`;

const DEFAULT_MENTIONS: Mention[] = [
  { id: "m1", kind: "mention", author: "Noah Reyes", avatarUrl: "https://i.pravatar.cc/150?img=13", text: "mentioned you: @amara.makes you have to see this spot", time: "12m", section: "Today", mediaUrl: media("mention-a") },
  { id: "m2", kind: "like", author: "Priya Nair", avatarUrl: "https://i.pravatar.cc/150?img=32", text: "liked your photo", time: "38m", section: "Today", mediaUrl: media("mention-b") },
  { id: "m3", kind: "follow", author: "Tariq Aziz", avatarUrl: "https://i.pravatar.cc/150?img=67", text: "started following you", time: "1h", section: "Today" },
  { id: "m4", kind: "comment", author: "Lena Kovács", avatarUrl: "https://i.pravatar.cc/150?img=45", text: "commented: This palette is perfect", time: "3h", section: "Today", mediaUrl: media("mention-c") },
  { id: "m5", kind: "mention", author: "Sofia Marino", avatarUrl: "https://i.pravatar.cc/150?img=23", text: "tagged you in a story", time: "5h", section: "Today", mediaUrl: media("mention-d") },
  { id: "m6", kind: "like", author: "Maya Chen", avatarUrl: "https://i.pravatar.cc/150?img=47", text: "liked your reel", time: "8h", section: "Today", mediaUrl: media("mention-e") },
  { id: "m7", kind: "follow", author: "Marcus Oduya", avatarUrl: "https://i.pravatar.cc/150?img=59", text: "started following you", time: "12h", section: "This week" },
  { id: "m8", kind: "comment", author: "Diego Ruiz", avatarUrl: "https://i.pravatar.cc/150?img=53", text: "commented: framing this for the studio wall", time: "1d", section: "This week", mediaUrl: media("mention-f") },
  { id: "m9", kind: "mention", author: "Jonah Wells", avatarUrl: "https://i.pravatar.cc/150?img=68", text: "mentioned you in a comment", time: "1d", section: "This week" },
  { id: "m10", kind: "like", author: "Camila Ortiz", avatarUrl: "https://i.pravatar.cc/150?img=28", text: "and 12 others liked your post", time: "2d", section: "This week", mediaUrl: media("mention-g") },
  { id: "m11", kind: "comment", author: "Ren Ishida", avatarUrl: "https://i.pravatar.cc/150?img=51", text: "replied: agreed, ship it as a preset", time: "3d", section: "Earlier" },
  { id: "m12", kind: "follow", author: "Dana Kim", avatarUrl: "https://i.pravatar.cc/150?img=24", text: "started following you", time: "4d", section: "Earlier" },
];

const SECTION_ORDER = ["Today", "This week", "Earlier"];

/** Mentions — activity rows with a kind badge on each avatar. */
export function MentionsScreen({
  mentions = DEFAULT_MENTIONS,
  onItemPress,
  onBack,
}: MentionsScreenProps) {
  const haptics = useHaptic();
  const insets = useSafeAreaInsets();

  return (
    <World primary="#65A30D">
    <SafeAreaView className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" edges={["top"]}>
      <View className="flex-row items-center gap-2 px-4 pb-1 pt-2">
        <Button
          variant="ghost"
          size="icon"
          haptic="light"
          onPress={() => onBack?.()}
          accessibilityLabel="Go back"
          className="-ml-2 h-10 w-10"
        >
          <Icon name="chevron-left" size="md" color="foreground" />
        </Button>
        <View className="flex-1" />
          <Button variant="ghost" size="sm" haptic="light" onPress={() => haptics.light()}>Read all</Button>
        </View>

      <Mount>
        <Text variant="h2" accessibilityRole="header" className="px-6 pb-1 text-center tracking-tight">
          Activity
        </Text>
        {/* Unread count — activity feeds answer "what did I miss". */}
        <Text variant="muted" className="pb-1 text-center text-xs">
          12 new since Tuesday
        </Text>
      </Mount>

      <ScrollView
        showsVerticalScrollIndicator={false}
        contentContainerStyle={{ paddingBottom: insets.bottom + 24 }}
      >
        {SECTION_ORDER.map((section, si) => {
          const rows = mentions.filter(
            (m) => (m.section ?? "Today") === section,
          );
          if (rows.length === 0) return null;
          return (
            <View key={section}>
              <Mount delay={si * 60}>
                <Text
                  accessibilityRole="header"
                  className="px-5 pb-1 pt-5 text-xs font-semibold uppercase tracking-wider text-muted-foreground"
                >
                  {section}
                </Text>
              </Mount>
              {rows.map((m, i) => (
                <Mount key={m.id} delay={si * 60 + Math.min(i * ROW_STAGGER, 200)}>
                  {/* Full-bleed hairline rows — IG activity idiom, no card slab. */}
                  {i > 0 ? <Separator className="ml-[76px]" /> : null}
                  <Pressable
                    onPress={() => onItemPress?.(m.id)}
                    accessibilityRole="button"
                    accessibilityLabel={`${m.author} ${m.text}, ${m.time} ago`}
                    className="flex-row items-center gap-3 px-5 py-3"
                  >
                    <View>
                      <Avatar
                        size="md"
                        source={{ uri: m.avatarUrl }}
                        fallback={m.author}
                        alt={m.author}
                      />
                      {/* Kind badge — pins the activity type to the avatar. */}
                      <View
                        className={cn(
                          "absolute -bottom-0.5 -right-0.5 h-5 w-5 items-center justify-center rounded-full border-2 border-background",
                          KIND_BADGE[m.kind],
                        )}
                      >
                        <Icon name={KIND_ICON[m.kind]} size="sm" color="primaryForeground" />
                      </View>
                    </View>
                    <View className="flex-1">
                      <Text variant="small" numberOfLines={2}>
                        <Text variant="small" className="font-semibold">
                          {m.author}
                        </Text>
                        {` ${m.text}`}
                      </Text>
                      <Text variant="muted" className="text-xs">
                        {m.time} ago
                      </Text>
                    </View>
                    {m.kind === "follow" ? (
                      <Button
                        size="sm"
                        haptic="light"
                        onPress={() => haptics.light()}
                        accessibilityLabel={`Follow ${m.author} back`}
                        className="h-8 px-4"
                      >
                        Follow
                      </Button>
                    ) : m.mediaUrl ? (
                      <Image
                        source={{ uri: m.mediaUrl }}
                        rounded="md"
                        className="h-11 w-11"
                        accessibilityLabel="Related photo"
                      />
                    ) : (
                      <Text className="text-xs text-muted-foreground">{m.time}</Text>
                    )}
                  </Pressable>
                </Mount>
              ))}
            </View>
          );
        })}
      </ScrollView>
    </SafeAreaView>
    </World>
  );
}
MentionsScreen.displayName = "MentionsScreen";

Recreate the "Mentions Screen" screen in React Native using LumioUI.

Goal: Activity feed with kind badges Match the reference implementation's layout, behavior, and motion exactly — this is a production screen, not a mockup.

## Setup

Fastest path — install the screen plus its component deps:

```bash
npx lumioui add social-mentions
```

Or pull just the components: `npx lumioui add avatar button icon image list separator text`

Native packages:
- @lumioui/ui@latest
- @lumioui/core@latest
- react-native-safe-area-context@*
- react-native-reanimated@*
- react-native-svg@*
- nativewind@*

Stack assumptions: Expo SDK 54 / RN 0.81, Reanimated 4, NativeWind v4, TypeScript strict, Expo Go compatible.

## Components — how, where, when

### `avatar` — Circular user image with fallback initials and status dot.
- `<Avatar>` ×1

### `button` — Tactile pill button with press spring, ink wash and async loading.
- `<Button>` ×3

### `icon` — Lucide icon set mapped to theme colors and sizes.
- `<Icon>` ×2

### `image` — Cached image with placeholder, fallback and aspect handling.
- `<Image>` ×1

### `list` — Settings-style rows with separators and press feedback.
- imported but not rendered directly — likely used through a sibling or as a utility

### `separator` — Hairline rule with orientation and spacing control.
- `<Separator>` ×1 — Full-bleed hairline rows — IG activity idiom, no card slab.

### `text` — Themed type scale from caption to display.
- `<Text>` ×7

## Conventions (non-negotiable)

- Styling via NativeWind `className` with semantic tokens only: `bg-background`, `text-foreground`, `bg-card`, `text-card-foreground`, `bg-secondary`, `bg-muted`, `text-muted-foreground`, `bg-accent`, `bg-destructive`, `border-border`. Hard-coded colors only inside media overlays (`text-white`, `bg-black/N`).
- Motion via the token presets from `@lumioui/core` (`spring.press`, `spring.surface`, `spring.glide`, `timing.fast`, `timing.slow`, …) — no bespoke spring configs or durations.
- Gate transform motion behind `useReducedMotion()`; keep opacity/color feedback, drop travel and overshoot.
- Haptics via `useHaptic()`: `light` on press, `selection` on toggle/select, `warning` on invalid input. Never import expo-haptics directly.
- Press feedback via `usePressAnimation()` (~0.97 scale), not `activeOpacity` tricks.
- a11y: `accessibilityRole` + `accessibilityLabel` on every control, touch targets ≥44pt.
- Entrance choreography: staggered `Mount` wrappers (delay 0/60/120…) so regions land in sequence instead of popping in at once.
- Wrap the screen in `SafeAreaView`; keep dark mode working via the semantic tokens.

## Deliverable

One file: `screens/social/mentions.tsx` exporting MentionsScreen. Preserve the props interface — the host app wires the callbacks (navigation, submit handlers) through them.

## Reference implementation

The LumioUI source for this screen — reproduce it faithfully:

```tsx
import * as React from "react";
import { Pressable, ScrollView, View } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import { Avatar, Button, Icon, type IconName, Image, Separator, Text } from "@lumioui/ui";
import { cn, useHaptic } from "@lumioui/core";
import { Mount, ROW_STAGGER, World } from "../shared";

export interface Mention {
  id: string;
  kind: "mention" | "like" | "follow" | "comment";
  author: string;
  avatarUrl: string;
  text: string;
  time: string;
  /** Photo this activity is about — renders as the trailing thumbnail. */
  mediaUrl?: string;
  /** Day group — "Today", "This week", "Earlier". */
  section?: string;
}

export interface MentionsScreenProps {
  mentions?: Mention[];
  onItemPress?: (id: string) => void;
  onBack?: () => void;
}

const KIND_ICON: Record<Mention["kind"], IconName> = {
  mention: "users",
  like: "heart",
  follow: "user-plus",
  comment: "message-circle",
};

const KIND_BADGE: Record<Mention["kind"], string> = {
  mention: "bg-[#65A30D]",
  like: "bg-destructive",
  follow: "bg-success",
  comment: "bg-chart-3",
};

const media = (seed: string) =>
  `https://picsum.photos/seed/${seed}/120/120`;

const DEFAULT_MENTIONS: Mention[] = [
  { id: "m1", kind: "mention", author: "Noah Reyes", avatarUrl: "https://i.pravatar.cc/150?img=13", text: "mentioned you: @amara.makes you have to see this spot", time: "12m", section: "Today", mediaUrl: media("mention-a") },
  { id: "m2", kind: "like", author: "Priya Nair", avatarUrl: "https://i.pravatar.cc/150?img=32", text: "liked your photo", time: "38m", section: "Today", mediaUrl: media("mention-b") },
  { id: "m3", kind: "follow", author: "Tariq Aziz", avatarUrl: "https://i.pravatar.cc/150?img=67", text: "started following you", time: "1h", section: "Today" },
  { id: "m4", kind: "comment", author: "Lena Kovács", avatarUrl: "https://i.pravatar.cc/150?img=45", text: "commented: This palette is perfect", time: "3h", section: "Today", mediaUrl: media("mention-c") },
  { id: "m5", kind: "mention", author: "Sofia Marino", avatarUrl: "https://i.pravatar.cc/150?img=23", text: "tagged you in a story", time: "5h", section: "Today", mediaUrl: media("mention-d") },
  { id: "m6", kind: "like", author: "Maya Chen", avatarUrl: "https://i.pravatar.cc/150?img=47", text: "liked your reel", time: "8h", section: "Today", mediaUrl: media("mention-e") },
  { id: "m7", kind: "follow", author: "Marcus Oduya", avatarUrl: "https://i.pravatar.cc/150?img=59", text: "started following you", time: "12h", section: "This week" },
  { id: "m8", kind: "comment", author: "Diego Ruiz", avatarUrl: "https://i.pravatar.cc/150?img=53", text: "commented: framing this for the studio wall", time: "1d", section: "This week", mediaUrl: media("mention-f") },
  { id: "m9", kind: "mention", author: "Jonah Wells", avatarUrl: "https://i.pravatar.cc/150?img=68", text: "mentioned you in a comment", time: "1d", section: "This week" },
  { id: "m10", kind: "like", author: "Camila Ortiz", avatarUrl: "https://i.pravatar.cc/150?img=28", text: "and 12 others liked your post", time: "2d", section: "This week", mediaUrl: media("mention-g") },
  { id: "m11", kind: "comment", author: "Ren Ishida", avatarUrl: "https://i.pravatar.cc/150?img=51", text: "replied: agreed, ship it as a preset", time: "3d", section: "Earlier" },
  { id: "m12", kind: "follow", author: "Dana Kim", avatarUrl: "https://i.pravatar.cc/150?img=24", text: "started following you", time: "4d", section: "Earlier" },
];

const SECTION_ORDER = ["Today", "This week", "Earlier"];

/** Mentions — activity rows with a kind badge on each avatar. */
export function MentionsScreen({
  mentions = DEFAULT_MENTIONS,
  onItemPress,
  onBack,
}: MentionsScreenProps) {
  const haptics = useHaptic();
  const insets = useSafeAreaInsets();

  return (
    <World primary="#65A30D">
    <SafeAreaView className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" edges={["top"]}>
      <View className="flex-row items-center gap-2 px-4 pb-1 pt-2">
        <Button
          variant="ghost"
          size="icon"
          haptic="light"
          onPress={() => onBack?.()}
          accessibilityLabel="Go back"
          className="-ml-2 h-10 w-10"
        >
          <Icon name="chevron-left" size="md" color="foreground" />
        </Button>
        <View className="flex-1" />
          <Button variant="ghost" size="sm" haptic="light" onPress={() => haptics.light()}>Read all</Button>
        </View>

      <Mount>
        <Text variant="h2" accessibilityRole="header" className="px-6 pb-1 text-center tracking-tight">
          Activity
        </Text>
        {/* Unread count — activity feeds answer "what did I miss". */}
        <Text variant="muted" className="pb-1 text-center text-xs">
          12 new since Tuesday
        </Text>
      </Mount>

      <ScrollView
        showsVerticalScrollIndicator={false}
        contentContainerStyle={{ paddingBottom: insets.bottom + 24 }}
      >
        {SECTION_ORDER.map((section, si) => {
          const rows = mentions.filter(
            (m) => (m.section ?? "Today") === section,
          );
          if (rows.length === 0) return null;
          return (
            <View key={section}>
              <Mount delay={si * 60}>
                <Text
                  accessibilityRole="header"
                  className="px-5 pb-1 pt-5 text-xs font-semibold uppercase tracking-wider text-muted-foreground"
                >
                  {section}
                </Text>
              </Mount>
              {rows.map((m, i) => (
                <Mount key={m.id} delay={si * 60 + Math.min(i * ROW_STAGGER, 200)}>
                  {/* Full-bleed hairline rows — IG activity idiom, no card slab. */}
                  {i > 0 ? <Separator className="ml-[76px]" /> : null}
                  <Pressable
                    onPress={() => onItemPress?.(m.id)}
                    accessibilityRole="button"
                    accessibilityLabel={`${m.author} ${m.text}, ${m.time} ago`}
                    className="flex-row items-center gap-3 px-5 py-3"
                  >
                    <View>
                      <Avatar
                        size="md"
                        source={{ uri: m.avatarUrl }}
                        fallback={m.author}
                        alt={m.author}
                      />
                      {/* Kind badge — pins the activity type to the avatar. */}
                      <View
                        className={cn(
                          "absolute -bottom-0.5 -right-0.5 h-5 w-5 items-center justify-center rounded-full border-2 border-background",
                          KIND_BADGE[m.kind],
                        )}
                      >
                        <Icon name={KIND_ICON[m.kind]} size="sm" color="primaryForeground" />
                      </View>
                    </View>
                    <View className="flex-1">
                      <Text variant="small" numberOfLines={2}>
                        <Text variant="small" className="font-semibold">
                          {m.author}
                        </Text>
                        {` ${m.text}`}
                      </Text>
                      <Text variant="muted" className="text-xs">
                        {m.time} ago
                      </Text>
                    </View>
                    {m.kind === "follow" ? (
                      <Button
                        size="sm"
                        haptic="light"
                        onPress={() => haptics.light()}
                        accessibilityLabel={`Follow ${m.author} back`}
                        className="h-8 px-4"
                      >
                        Follow
                      </Button>
                    ) : m.mediaUrl ? (
                      <Image
                        source={{ uri: m.mediaUrl }}
                        rounded="md"
                        className="h-11 w-11"
                        accessibilityLabel="Related photo"
                      />
                    ) : (
                      <Text className="text-xs text-muted-foreground">{m.time}</Text>
                    )}
                  </Pressable>
                </Mount>
              ))}
            </View>
          );
        })}
      </ScrollView>
    </SafeAreaView>
    </World>
  );
}
MentionsScreen.displayName = "MentionsScreen";
```

Screen: https://lumioui.dev/screens/social-mentions