Initial commit: party-mix-app with prefetch cache, audio preload optimizations

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-25 12:40:22 +03:00
commit 0097fb5183
83 changed files with 11788 additions and 0 deletions
--- a/apps/web/src/components/SoloTab/SoloTab.tsx
+++ b/apps/web/src/components/SoloTab/SoloTab.tsx
@@ -0,0 +1,106 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { usePartyStore } from '@/store/partyStore'
+import { fetchTopCharts } from '@/lib/api'
+import type { SearchResult } from '@/types'
+
+function TopChartsCard({ tracks }: { tracks: string[] }) {
+  const { loadPlaylist } = usePartyStore()
+  const [launched, setLaunched] = useState(false)
+
+  const handlePlay = () => {
+    loadPlaylist(tracks)
+    setLaunched(true)
+    window.scrollTo({ top: 0, behavior: 'smooth' })
+    setTimeout(() => setLaunched(false), 2500)
+  }
+
+  return (
+    <div className="bg-surface border border-white/[0.07] rounded-app p-4 mb-5 relative overflow-hidden">
+      <div className="absolute top-0 left-0 right-0 h-[2px] bg-accent" style={{ opacity: 0.8 }} />
+      <div className="flex items-start justify-between gap-3">
+        <div className="min-w-0">
+          <div className="flex items-center gap-2 mb-1.5">
+            <span className="w-1.5 h-1.5 rounded-full bg-accent animate-pulse shrink-0" />
+            <span className="text-[10px] font-display font-bold tracking-[1.3px] uppercase text-accent">
+              Прямо сейчас
+            </span>
+          </div>
+          <h3 className="font-display font-bold text-[15px] text-app-text leading-tight">Топ чарт</h3>
+          <p className="text-[11px] text-muted mt-0.5">{tracks.length} треков</p>
+        </div>
+        <button
+          onClick={handlePlay}
+          className="text-[12px] font-display font-bold px-3 py-1.5 rounded-[9px] transition-all duration-200 cursor-pointer whitespace-nowrap shrink-0 mt-1"
+          style={{
+            background: launched ? '#c8ff00' : 'rgba(200,255,0,0.15)',
+            color: launched ? '#0a0a0f' : '#c8ff00',
+          }}
+        >
+          {launched ? '▶ Играет' : '▶ Слушать'}
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export default function SoloTab() {
+  const [search, setSearch] = useState('')
+  const [topTracks, setTopTracks] = useState<string[] | null>(null)
+  const { loadPlaylist } = usePartyStore()
+
+  useEffect(() => {
+    fetchTopCharts().then((results: SearchResult[]) => {
+      if (!results.length) { setTopTracks([]); return }
+      setTopTracks(
+        results.map((r) => (r.artist ? `${r.artist} — ${r.title}` : r.title))
+      )
+    })
+  }, [])
+
+  const handleSearch = (e: React.FormEvent) => {
+    e.preventDefault()
+    const q = search.trim()
+    if (!q) return
+    loadPlaylist([q])
+    setSearch('')
+    window.scrollTo({ top: 0, behavior: 'smooth' })
+  }
+
+  return (
+    <div className="animate-fadeUp">
+      {topTracks === null && (
+        <div className="bg-surface border border-white/[0.07] rounded-app p-4 mb-5 flex items-center gap-2.5 text-muted text-[13px]">
+          <div className="w-3.5 h-3.5 rounded-full border-2 border-surface2 border-t-accent animate-spin shrink-0" />
+          Загружаем чарт...
+        </div>
+      )}
+      {topTracks !== null && topTracks.length > 0 && (
+        <TopChartsCard tracks={topTracks} />
+      )}
+
+      <div className="bg-surface border border-white/[0.07] rounded-app p-4">
+        <p className="text-[11px] font-display font-semibold tracking-[1.2px] uppercase text-muted mb-3">
+          Быстрый поиск
+        </p>
+        <form onSubmit={handleSearch} className="flex gap-2">
+          <input
+            type="text"
+            placeholder="Исполнитель — Название трека"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="flex-1 font-sans text-[13px] bg-surface2 border border-white/[0.07] rounded-[9px] px-3 py-2.5 text-app-text outline-none focus:border-accent/35 placeholder:text-muted transition-colors"
+          />
+          <button
+            type="submit"
+            disabled={!search.trim()}
+            className="px-4 py-2.5 bg-accent text-bg font-display font-bold text-sm rounded-[9px] hover:brightness-110 active:scale-[0.97] transition-all duration-150 disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer"
+          >
+            ▶
+          </button>
+        </form>
+      </div>
+    </div>
+  )
+}