feat(web): polish catalog motion, empty states, and mobile now-playing

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/web/src/pages/SearchPage.tsx

@@ -6,7 +6,8 @@ import { useTranslation } from 'react-i18next';
 import { useSession } from '../app/session';
 import { AlbumGrid, ArtistChip, TrackList } from '../entities/catalog';
 import { useErrorText } from '../shared/lib/errors';
-import { Button, FormError } from '../shared/ui/ui';
+import { searchIcon } from '../shared/ui/icons';
+import { Button, EmptyState, FormError, PageSkeleton } from '../shared/ui/ui';
 import s from './page.module.css';
 import c from './catalog.module.css';
 
@@ -68,7 +69,11 @@ export function SearchPage({ q, type }: { q: string; type: SearchType }) {
       </div>
 
       <FormError>{results.error ? errorText(results.error) : null}</FormError>
-      {empty && <div className={s.empty}>{t('search.nothing')}</div>}
+      {query === '' && <EmptyState icon={searchIcon}>{t('search.type_query')}</EmptyState>}
+      {query !== '' && results.isPending && <PageSkeleton />}
+      {empty && (
+        <EmptyState icon={searchIcon}>{t('search.nothing')}</EmptyState>
+      )}
 
       {artists.length > 0 && (
         <section className={c.section}>