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

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

apps/web/src/shared/ui/ui.module.css

@@ -41,7 +41,12 @@
   transition:
     background 0.15s,
     box-shadow 0.15s,
-    opacity 0.15s;
+    opacity 0.15s,
+    transform 0.12s;
+}
+
+.button:active:not(:disabled) {
+  transform: scale(0.97);
 }
 
 .button:disabled {
@@ -53,6 +58,115 @@
   cursor: progress;
 }
 
+.spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: pipuSpin 0.6s linear infinite;
+}
+
+@keyframes pipuSpin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding: 48px 16px;
+  text-align: center;
+  color: var(--text3);
+}
+
+.emptyIcon {
+  color: var(--text3);
+  opacity: 0.7;
+}
+
+.emptyText {
+  margin: 0;
+  max-width: 28rem;
+  font-size: 15px;
+  line-height: 1.45;
+}
+
+.empty a,
+.empty button {
+  color: var(--accent2);
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.empty a:hover {
+  text-decoration: underline;
+}
+
+.skeleton {
+  display: block;
+  background: var(--surface3);
+  border-radius: 8px;
+  animation: pipuShimmer 1.2s ease-in-out infinite;
+}
+
+.skeletonRound {
+  border-radius: 50%;
+}
+
+@keyframes pipuShimmer {
+  0%,
+  100% {
+    opacity: 0.45;
+  }
+  50% {
+    opacity: 0.9;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .skeleton {
+    animation: none;
+  }
+}
+
+.pageSkel {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.skelHero {
+  display: flex;
+  align-items: flex-end;
+  gap: 24px;
+  margin-bottom: 8px;
+}
+
+.skelCover {
+  width: 160px;
+  height: 160px;
+  border-radius: 12px;
+  flex: none;
+}
+
+.skelCopy {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  flex: 1;
+  padding-bottom: 8px;
+}
+
+.skelRow {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
 .primary {
   background: var(--accent-fill);
   color: #fff;

apps/web/src/shared/ui/ui.tsx

@@ -4,6 +4,7 @@ import {
   useRef,
   useState,
   type ButtonHTMLAttributes,
+  type CSSProperties,
   type InputHTMLAttributes,
   type KeyboardEvent as ReactKeyboardEvent,
   type ReactNode,
@@ -52,7 +53,7 @@ export function Button({ variant = 'secondary', icon, busy, className, children,
       aria-busy={busy || undefined}
       className={cx(s.button, s[variant], className)}
     >
-      {icon && <Icon src={icon} size={18} />}
+      {busy ? <span className={s.spinner} aria-hidden /> : icon ? <Icon src={icon} size={18} /> : null}
       {children}
     </button>
   );
@@ -283,6 +284,61 @@ export function Menu({
   );
 }
 
+/** Пустой список: иконка, текст и действие (docs/design.md#5). */
+export function EmptyState({
+  icon,
+  children,
+  action,
+}: {
+  icon?: string;
+  children: ReactNode;
+  action?: ReactNode;
+}) {
+  return (
+    <div className={s.empty} role="status">
+      {icon && <Icon src={icon} size={40} className={s.emptyIcon} />}
+      <p className={s.emptyText}>{children}</p>
+      {action}
+    </div>
+  );
+}
+
+export function Skeleton({
+  className,
+  style,
+  round,
+}: {
+  className?: string;
+  style?: CSSProperties;
+  round?: boolean;
+}) {
+  return <span className={cx(s.skeleton, round && s.skeletonRound, className)} style={style} aria-hidden />;
+}
+
+/** Каркас героя и строк списка, пока страница ещё грузится. */
+export function PageSkeleton() {
+  const { t } = useTranslation();
+  return (
+    <div className={s.pageSkel} role="status" aria-busy="true" aria-label={t('loading')}>
+      <div className={s.skelHero}>
+        <Skeleton className={s.skelCover} />
+        <div className={s.skelCopy}>
+          <Skeleton style={{ width: 72, height: 12 }} />
+          <Skeleton style={{ width: '55%', height: 28 }} />
+          <Skeleton style={{ width: '38%', height: 14 }} />
+        </div>
+      </div>
+      {Array.from({ length: 6 }, (_, i) => (
+        <div key={i} className={s.skelRow}>
+          <Skeleton style={{ width: 40, height: 40 }} />
+          <Skeleton style={{ flex: 1, height: 14 }} />
+          <Skeleton style={{ width: 36, height: 12 }} />
+        </div>
+      ))}
+    </div>
+  );
+}
+
 export function Avatar({ name, size = 32 }: { name: string; size?: number }) {
   const initials = name
     .split(/[\s._-]+/)