import React, { useState, createContext, useContext } from 'react';
import { View, Text, Pressable, TextInput } from 'react-native';
import { ThemeProvider, useT, T, Screen, Scroll, Header, NavBar, Card, Group, Row, Button, Segmented, Chip, Pill, Checkbox, TabBar, Tabs, Stack, Icon, Spacer, SectionTitle, SearchBar, alpha } from './ui/kit';
const ACCENT = '#FBBF24';
const THEME = { dark: { bg: '#0D0C09', card: '#181611', card2: '#242118', line: '#29261C', text2: '#A9A28F', text3: '#6B6657' }, light: { bg: '#FAF7F0', card: '#FFFFFF', card2: '#F0EAD9' } };
const FOLDERS = [{ id: 'all', name: 'All notes', icon: 'StickyNote' }, { id: 'work', name: 'Work', icon: 'Briefcase', c: '#6366F1' }, { id: 'personal', name: 'Personal', icon: 'Heart', c: '#FF6B9D' }, { id: 'ideas', name: 'Ideas', icon: 'Lightbulb', c: '#FBBF24' }, { id: 'recipes', name: 'Recipes', icon: 'ChefHat', c: '#F0743A' }];
const NOTES_INIT = [
{ id: 1, title: 'Launch checklist', body: 'Final copy from Lena. Deploy to staging. Lighthouse above 95. Announce Thursday at 10.', folder: 'work', c: '#6366F1', pinned: true, when: '14:02', tags: ['launch'] },
{ id: 2, title: 'Book ideas', body: 'A field guide to small apps. Something about attention. The notebook as a product.', folder: 'ideas', c: '#FBBF24', pinned: true, when: 'Yesterday', tags: ['writing'] },
{ id: 3, title: 'Grandma pancakes', body: '200 g flour, 2 eggs, 300 ml milk, pinch of salt. Rest the batter 20 min. Butter, not oil.', folder: 'recipes', c: '#F0743A', pinned: false, when: 'Sun', tags: ['brunch'] },
{ id: 4, title: 'Lisbon weekend', body: 'Pastéis in Belém early. Tram 28 before 9. Sunset at the Miradouro da Graça.', folder: 'personal', c: '#FF6B9D', pinned: false, when: 'Sat', tags: ['travel'] },
{ id: 5, title: 'Meeting with Dana', body: 'Agreed on the pricing page scope. She owns the FAQ. Follow up on Friday.', folder: 'work', c: '#6366F1', pinned: false, when: 'Fri', tags: ['meeting'] },
{ id: 6, title: 'Gift list', body: 'Mum: the ceramic bowl. Sam: concert tickets. Lena: the linen apron.', folder: 'personal', c: '#FF6B9D', pinned: false, when: 'Thu', tags: [] },
];
const Store = createContext(null);
function NoteCard({ n, onPress, wide }) {
const t = useT();
return (
{n.title}
{n.pinned ? : null}
{n.body}
{n.when}
);
}
function NotesScreen({ nav }) {
const t = useT();
const { notes } = useContext(Store);
const [q, setQ] = useState('');
const [view, setView] = useState('grid');
const list = notes.filter((n) => (n.title + n.body).toLowerCase().includes(q.toLowerCase()));
const pinned = list.filter((n) => n.pinned), rest = list.filter((n) => !n.pinned);
return (
} />
{pinned.length ? : null}
{pinned.map((n) => nav.push('note', { id: n.id })} />)}
{rest.map((n) => nav.push('note', { id: n.id })} />)}
);
}
function FoldersScreen({ nav }) {
const t = useT();
const { notes } = useContext(Store);
return (
} />
{FOLDERS.map((f) => n.folder === f.id).length)} valueColor={t.text2} chevron onPress={() => {}} />)}
{['launch', 'writing', 'brunch', 'travel', 'meeting', 'reading', 'home'].map((x) => {}} />)}
{}} />
{}} />
{}} />
);
}
function NoteDetail({ nav, params }) {
const t = useT();
const { notes, update, add } = useContext(Store);
const existing = notes.find((n) => n.id === params.id);
const [title, setTitle] = useState(existing ? existing.title : '');
const [body, setBody] = useState(existing ? existing.body : '');
const [checks, setChecks] = useState([true, false, false]);
const f = FOLDERS.find((x) => x.id === (existing ? existing.folder : 'ideas'));
const save = () => { if (existing) update(existing.id, title, body); else add(title || 'Untitled', body || 'Start writing…'); nav.pop(); };
return (
Done} />
{existing ? 'Edited ' + existing.when : 'New note'} · {body.split(' ').filter(Boolean).length} words
{existing && existing.id === 1 ? (
{['Final copy from Lena', 'Deploy to staging', 'Announce on Thursday'].map((c, i) => (
setChecks((s) => { const n = s.slice(); n[i] = !n[i]; return n; })} style={{ flexDirection: 'row', alignItems: 'center', gap: 12, paddingVertical: 8 }}>
setChecks((s) => { const n = s.slice(); n[i] = !n[i]; return n; })} />
{c}
))}
) : null}
{(existing ? existing.tags : []).map((x) => )}
{['ListChecks', 'Image', 'Paperclip', 'Palette', 'Share2'].map((i) => )}
);
}
function Root({ nav }) {
const [tab, setTab] = useState('notes');
return (
, folders: }} />
);
}
const SCREENS = { root: Root, note: NoteDetail };
export default function App() {
const [notes, setNotes] = useState(NOTES_INIT);
const update = (id, title, body) => setNotes((ns) => ns.map((n) => (n.id === id ? Object.assign({}, n, { title, body, when: 'Just now' }) : n)));
const add = (title, body) => setNotes((ns) => [{ id: Date.now(), title, body, folder: 'ideas', c: '#FBBF24', pinned: false, when: 'Just now', tags: [] }, ...ns]);
return (
);
}