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

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

apps/web/src/pages/admin/SourcesPage.tsx

@@ -9,7 +9,7 @@ import { useSession, useUser } from '../../app/session';
 import { GeniusPanel } from './GeniusPanel';
 import { useErrorText, useFieldError } from '../../shared/lib/errors';
 import { addIcon, chevronRightIcon, folderIcon, moreIcon, refreshIcon } from '../../shared/ui/icons';
-import { Button, Dialog, Field, FormError, Icon, Menu, Segmented, type MenuItem } from '../../shared/ui/ui';
+import { Button, Dialog, EmptyState, Field, FormError, Icon, Menu, Segmented, type MenuItem } from '../../shared/ui/ui';
 import s from '../page.module.css';
 import l from './library.module.css';
 import { ScanLine, StatusBadge } from './ScanStatus';
@@ -46,7 +46,11 @@ export function SourcesPage() {
       </div>
       <FormError>{sources.error ? errorText(sources.error) : null}</FormError>
       {user.role === 'admin' && <GeniusPanel />}
-      {sources.isSuccess && sources.data.length === 0 && <div className={s.empty}>{t('sources.empty')}</div>}
+      {sources.isSuccess && sources.data.length === 0 && (
+        <EmptyState icon={folderIcon} action={<Button variant="primary" onClick={() => setEditing('new')}>{t('sources.add')}</Button>}>
+          {t('sources.empty')}
+        </EmptyState>
+      )}
       <div className={l.list}>
         {sources.data?.map((src) => (
           <SourceCard key={src.id} source={src} onEdit={() => setEditing(src)} />