New look: slate-indigo panels, pink accent, Poppins, and a gradient card for your song

Inspired by a dashboard design the user shared.
- App: new palette and fonts, borderless rounded panels with soft shadows, a pink-to-blue
  gradient card for your own song (text and controls switch to white on it), flat cards for
  friends, a 'Hi Chris, welcome back' header, an outline bell, and a pink pill on the active tab.
- Website: the same look, plus a wide-screen layout with a sidebar, the page in a rounded panel,
  and a right column with your profile, recent activity and recent plays. Phones keep the top
  bar and bottom tabs.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011Y2iUsKEWDuRGjK5FPmcUP

apps/web/src/components/UserSearch.tsx

@@ -8,7 +8,7 @@ import { fetcher } from '@/lib/api';
 import { useDebounced } from '@/lib/useDebounced';
 import { Avatar } from './Avatar';
 
-export function UserSearch() {
+export function UserSearch({ placeholder = 'Find friends by username' }: { placeholder?: string }) {
   const [q, setQ] = useState('');
   const debounced = useDebounced(q.trim(), 250);
   const { data } = useSWR<UserSummaryDTO[]>(
@@ -17,7 +17,7 @@ export function UserSearch() {
   );
   return (
     <div className="search">
-      <input placeholder="Find friends by username" value={q} onChange={(e) => setQ(e.target.value)} />
+      <input placeholder={placeholder} aria-label="Search people" value={q} onChange={(e) => setQ(e.target.value)} />
       {data && debounced.length >= 2 && (
         <ul className="search-results">
           {data.length === 0 && <li className="muted">No one found</li>}