import { Image } from 'expo-image'; import { useState } from 'react'; import { Pressable, StyleSheet, Text, View } from 'react-native'; import useSWR from 'swr'; import type { ProfileDTO, TrackSearchResultDTO } from '@musicshare/shared'; import { api } from '@/lib/api'; import { showError } from '@/lib/errors'; import { colors, fonts, radius, space } from '@/lib/theme'; import { useSession } from '@/lib/session'; import { useDebounced } from '@/lib/useDebounced'; import { Body, Button, Card, Field, Heading, Row } from './ui'; /** * Search for a song and pin it to your profile with an optional note. * `bare` drops the card and heading (for onboarding, which has its own title). */ export function FeaturedPicker({ bare, onSaved }: { bare?: boolean; onSaved?: () => void }) { const { me } = useSession(); // In Settings, show what's featured now (with Change / Remove) before the search. const { data: profile, mutate: refreshProfile } = useSWR(!bare && me ? `/users/${me.username}` : null); const current = profile?.featured ?? null; const [editing, setEditing] = useState(false); const [q, setQ] = useState(''); const [selected, setSelected] = useState(null); const [comment, setComment] = useState(''); const [saved, setSaved] = useState(false); const [busy, setBusy] = useState(false); const query = useDebounced(q.trim(), 300); const { data: results } = useSWR( query.length >= 2 && !selected ? `/tracks/search?q=${encodeURIComponent(query)}` : null, ); const save = async () => { if (!selected) return; setBusy(true); try { await api.setFeatured({ deezerId: selected.deezerId, comment: comment.trim() || null }); setSaved(true); onSaved?.(); if (!bare) { setEditing(false); setSelected(null); setComment(''); await refreshProfile(); } } catch (err) { showError(err); } setBusy(false); }; const body = ( <> {selected ? ( <> {selected.artworkUrl && } {selected.title} {selected.artist}