initial state: muzick music player + recommendation engine

2026-07-14 01:35:52 +04:00
commit 737bf19fd1
196 changed files with 32431 additions and 0 deletions
@@ -0,0 +1,53 @@
+import { Radio } from 'lucide-react';
+import { Badge } from './ethos/Badge';
+import { TrackRow } from './TrackRow';
+import type { Track } from '../types';
+
+interface VibeTimelineProps {
+  currentTrack: Track | null;
+  upcoming: Track[];
+}
+
+export function VibeTimeline({ currentTrack, upcoming }: VibeTimelineProps) {
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center gap-2 text-text">
+        <Radio size={18} className="text-accent" />
+        <h2 className="text-lg font-semibold">Incoming recommendations</h2>
+        <span className="text-xs text-muted">({upcoming.length} buffered)</span>
+      </div>
+
+      {currentTrack && (
+        <div className="relative">
+          <TrackRow
+            track={currentTrack}
+            queue={[currentTrack]}
+            index={0}
+            showActions={false}
+            variant="compact"
+          />
+          <Badge color="accent" className="absolute right-2 top-1/2 -translate-y-1/2">Now playing</Badge>
+        </div>
+      )}
+
+      {upcoming.length === 0 ? (
+        <div className="rounded-lg border border-border bg-surface0 p-4 text-sm text-muted">
+          No upcoming tracks buffered yet.
+        </div>
+      ) : (
+        <div className="space-y-0.5">
+          {upcoming.map((track, i) => (
+            <TrackRow
+              key={`${track.id}-${i}`}
+              track={track}
+              queue={upcoming.slice(i)}
+              index={0}
+              showActions={false}
+              variant="compact"
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}