Notes List Screen

import * as React from "react";
import { ScrollView, View } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import { Button, Icon, SearchInput, Text } from "@lumioui/ui";
import { useHaptic } from "@lumioui/core";
import { Mount, Press, StickyBottomBar, World } from "../shared";

export interface Note {
  id: string;
  title: string;
  preview: string;
  date: string;
  pinned?: boolean;
}

export interface NotesListScreenProps {
  notes?: Note[];
  onNotePress?: (id: string) => void;
  onNew?: () => void;
}

const DEFAULT_NOTES: Note[] = [
  { id: "n1", title: "Trip ideas — Lisbon", preview: "Alfama first morning, Tram 28 before crowds…", date: "Today", pinned: true },
  { id: "n2", title: "Gift list for mom", preview: "Ceramic set from that shop on Etsy, maybe the…", date: "Yesterday" },
  { id: "n3", title: "Meeting notes — Q3 sync", preview: "Ship date moved to the 14th. Priya owns the…", date: "Mon" },
  { id: "n4", title: "Recipes to try", preview: "Mushroom risotto, shakshuka, lemon pasta…", date: "Sep 18" },
  { id: "n5", title: "Reading list", preview: "Braiding Sweetgrass, The Creative Act, A Field Guide…", date: "Sep 15" },
  { id: "n6", title: "Apartment hunt", preview: "2BR under €1.4k, elevator, near Tram 28, south…", date: "Sep 12" },
  { id: "n7", title: "Motion spec notes", preview: "Card enter = 280ms spring, stagger rows 40ms…", date: "Sep 9" },
  { id: "n8", title: "Coffee spots — Lisbon", preview: "Copenhagen Coffee Lab, Fabrica, Dear Breakfast…", date: "Sep 4" },
];

/** Notes list — search + rows with title/preview/date + compose. */
export function NotesListScreen({
  notes = DEFAULT_NOTES,
  onNotePress,
  onNew,
}: NotesListScreenProps) {
  const haptics = useHaptic();
  const insets = useSafeAreaInsets();
  const [query, setQuery] = React.useState("");

  const visible = query.trim()
    ? notes.filter(
        (n) =>
          n.title.toLowerCase().includes(query.toLowerCase()) ||
          n.preview.toLowerCase().includes(query.toLowerCase()),
      )
    : notes;

  return (
    <World primary="#65A30D">
    <SafeAreaView className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" edges={["top"]}>
      <View className="px-4 pb-1 pt-2">
        <Text variant="h2" accessibilityRole="header">
          Notes
        </Text>
        {/* Library receipt — count + freshness. */}
        <Text variant="muted" className="pt-0.5 text-xs">
          {notes.length} notes · edited just now
        </Text>
      </View>
      <View className="px-4 pb-1">
        <SearchInput
          glass
          value={query}
          onChangeText={setQuery}
          placeholder="Search notes"
          accessibilityLabel="Search notes"
        />
      </View>

      <ScrollView
        showsVerticalScrollIndicator={false}
        contentContainerStyle={{ paddingBottom: insets.bottom + 96 }}
      >
        {/* Pinned note earns a full-width card above the grid — Apple
            Notes' pinned section, then a 2-col masonry of the rest. */}
        {visible.some((n) => n.pinned) ? (
          <View className="px-4 pb-3">
            {visible.filter((n) => n.pinned).map((n) => (
              <Press
                key={n.id}
                haptic="light"
                pressedScale={0.98}
                onPress={() => onNotePress?.(n.id)}
                accessibilityLabel={`Open pinned note ${n.title}`}
                accessibilityRole="button"
                className="rounded-2xl border border-amber-300/50 bg-amber-100/80 p-4 dark:border-amber-400/20 dark:bg-amber-400/10"
              >
                <View className="flex-row items-center gap-1.5">
                  <Icon name="pin" size="sm" color="#B45309" />
                  <Text className="text-[10px] font-semibold uppercase tracking-widest text-amber-700 dark:text-amber-400">
                    Pinned
                  </Text>
                </View>
                <Text className="pt-1 text-base font-semibold" numberOfLines={1}>
                  {n.title}
                </Text>
                <Text className="pt-0.5 text-sm text-muted-foreground" numberOfLines={2}>
                  {n.preview}
                </Text>
              </Press>
            ))}
          </View>
        ) : null}

        <Mount className="flex-row flex-wrap gap-3 px-4">
          {visible.filter((n) => !n.pinned).map((n) => (
            <Press
              key={n.id}
              haptic="light"
              pressedScale={0.97}
              onPress={() => onNotePress?.(n.id)}
              accessibilityLabel={`Open note ${n.title}`}
              accessibilityRole="button"
              className="w-[47.5%] flex-grow gap-1.5 overflow-hidden rounded-2xl bg-white p-4 dark:bg-[#1A1A20]"
            >
              <Text className="text-sm font-semibold" numberOfLines={1}>
                {n.title}
              </Text>
              <Text className="text-xs leading-4 text-muted-foreground" numberOfLines={4}>
                {n.preview}
              </Text>
              <Text className="pt-1 text-[10px] text-muted-foreground">
                {n.date}
              </Text>
            </Press>
          ))}
        </Mount>
      </ScrollView>

      {/* Compose — the always-present new-note affordance. */}
      <StickyBottomBar className="items-end">
        <Button
          size="icon"
          haptic="light"
          onPress={() => {
            haptics.medium();
            onNew?.();
          }}
          accessibilityLabel="New note"
          className="bg-[#BEF04C] h-14 w-14 rounded-full shadow-lg"
        >
          <Icon name="edit" size="md" color="#1B1B26" />
        </Button>
      </StickyBottomBar>
    </SafeAreaView>
    </World>
  );
}
NotesListScreen.displayName = "NotesListScreen";

Recreate the "Notes List Screen" screen in React Native using LumioUI.

Goal: Searchable notes with compose 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 productivity-notes-list
```

Or pull just the components: `npx lumioui add button icon search-input 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

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

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

### `search-input` — Search field with clear button, debounce, focus halo — plus a glass capsule mode that floats over content like iOS 26
- `<SearchInput>` ×1

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

## 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/productivity/notes-list.tsx` exporting NotesListScreen. 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 { ScrollView, View } from "react-native";
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import { Button, Icon, SearchInput, Text } from "@lumioui/ui";
import { useHaptic } from "@lumioui/core";
import { Mount, Press, StickyBottomBar, World } from "../shared";

export interface Note {
  id: string;
  title: string;
  preview: string;
  date: string;
  pinned?: boolean;
}

export interface NotesListScreenProps {
  notes?: Note[];
  onNotePress?: (id: string) => void;
  onNew?: () => void;
}

const DEFAULT_NOTES: Note[] = [
  { id: "n1", title: "Trip ideas — Lisbon", preview: "Alfama first morning, Tram 28 before crowds…", date: "Today", pinned: true },
  { id: "n2", title: "Gift list for mom", preview: "Ceramic set from that shop on Etsy, maybe the…", date: "Yesterday" },
  { id: "n3", title: "Meeting notes — Q3 sync", preview: "Ship date moved to the 14th. Priya owns the…", date: "Mon" },
  { id: "n4", title: "Recipes to try", preview: "Mushroom risotto, shakshuka, lemon pasta…", date: "Sep 18" },
  { id: "n5", title: "Reading list", preview: "Braiding Sweetgrass, The Creative Act, A Field Guide…", date: "Sep 15" },
  { id: "n6", title: "Apartment hunt", preview: "2BR under €1.4k, elevator, near Tram 28, south…", date: "Sep 12" },
  { id: "n7", title: "Motion spec notes", preview: "Card enter = 280ms spring, stagger rows 40ms…", date: "Sep 9" },
  { id: "n8", title: "Coffee spots — Lisbon", preview: "Copenhagen Coffee Lab, Fabrica, Dear Breakfast…", date: "Sep 4" },
];

/** Notes list — search + rows with title/preview/date + compose. */
export function NotesListScreen({
  notes = DEFAULT_NOTES,
  onNotePress,
  onNew,
}: NotesListScreenProps) {
  const haptics = useHaptic();
  const insets = useSafeAreaInsets();
  const [query, setQuery] = React.useState("");

  const visible = query.trim()
    ? notes.filter(
        (n) =>
          n.title.toLowerCase().includes(query.toLowerCase()) ||
          n.preview.toLowerCase().includes(query.toLowerCase()),
      )
    : notes;

  return (
    <World primary="#65A30D">
    <SafeAreaView className="flex-1 bg-[#F4F5F9] dark:bg-[#111114]" edges={["top"]}>
      <View className="px-4 pb-1 pt-2">
        <Text variant="h2" accessibilityRole="header">
          Notes
        </Text>
        {/* Library receipt — count + freshness. */}
        <Text variant="muted" className="pt-0.5 text-xs">
          {notes.length} notes · edited just now
        </Text>
      </View>
      <View className="px-4 pb-1">
        <SearchInput
          glass
          value={query}
          onChangeText={setQuery}
          placeholder="Search notes"
          accessibilityLabel="Search notes"
        />
      </View>

      <ScrollView
        showsVerticalScrollIndicator={false}
        contentContainerStyle={{ paddingBottom: insets.bottom + 96 }}
      >
        {/* Pinned note earns a full-width card above the grid — Apple
            Notes' pinned section, then a 2-col masonry of the rest. */}
        {visible.some((n) => n.pinned) ? (
          <View className="px-4 pb-3">
            {visible.filter((n) => n.pinned).map((n) => (
              <Press
                key={n.id}
                haptic="light"
                pressedScale={0.98}
                onPress={() => onNotePress?.(n.id)}
                accessibilityLabel={`Open pinned note ${n.title}`}
                accessibilityRole="button"
                className="rounded-2xl border border-amber-300/50 bg-amber-100/80 p-4 dark:border-amber-400/20 dark:bg-amber-400/10"
              >
                <View className="flex-row items-center gap-1.5">
                  <Icon name="pin" size="sm" color="#B45309" />
                  <Text className="text-[10px] font-semibold uppercase tracking-widest text-amber-700 dark:text-amber-400">
                    Pinned
                  </Text>
                </View>
                <Text className="pt-1 text-base font-semibold" numberOfLines={1}>
                  {n.title}
                </Text>
                <Text className="pt-0.5 text-sm text-muted-foreground" numberOfLines={2}>
                  {n.preview}
                </Text>
              </Press>
            ))}
          </View>
        ) : null}

        <Mount className="flex-row flex-wrap gap-3 px-4">
          {visible.filter((n) => !n.pinned).map((n) => (
            <Press
              key={n.id}
              haptic="light"
              pressedScale={0.97}
              onPress={() => onNotePress?.(n.id)}
              accessibilityLabel={`Open note ${n.title}`}
              accessibilityRole="button"
              className="w-[47.5%] flex-grow gap-1.5 overflow-hidden rounded-2xl bg-white p-4 dark:bg-[#1A1A20]"
            >
              <Text className="text-sm font-semibold" numberOfLines={1}>
                {n.title}
              </Text>
              <Text className="text-xs leading-4 text-muted-foreground" numberOfLines={4}>
                {n.preview}
              </Text>
              <Text className="pt-1 text-[10px] text-muted-foreground">
                {n.date}
              </Text>
            </Press>
          ))}
        </Mount>
      </ScrollView>

      {/* Compose — the always-present new-note affordance. */}
      <StickyBottomBar className="items-end">
        <Button
          size="icon"
          haptic="light"
          onPress={() => {
            haptics.medium();
            onNew?.();
          }}
          accessibilityLabel="New note"
          className="bg-[#BEF04C] h-14 w-14 rounded-full shadow-lg"
        >
          <Icon name="edit" size="md" color="#1B1B26" />
        </Button>
      </StickyBottomBar>
    </SafeAreaView>
    </World>
  );
}
NotesListScreen.displayName = "NotesListScreen";
```

Screen: https://lumioui.dev/screens/productivity-notes-list