Add vibey onboarding, queue controls, and ambient reader modes

components/QueueItem.tsx

@@ -1,7 +1,7 @@
 
 import React from 'react';
 import { Article, PlaybackStatus } from '../types';
-import { Play, Pause, Loader2, AlertCircle, FileText } from 'lucide-react';
+import { Play, Pause, Loader2, AlertCircle, FileText, GripVertical, SkipForward } from 'lucide-react';
 
 interface QueueItemProps {
   article: Article;
@@ -10,15 +10,27 @@ interface QueueItemProps {
   onPlay: () => void;
   onPause: () => void;
   onRemove: () => void;
+  onPlayNext?: () => void;
+  draggable?: boolean;
+  onDragStart?: (e: React.DragEvent<HTMLDivElement>) => void;
+  onDragOver?: (e: React.DragEvent<HTMLDivElement>) => void;
+  onDrop?: (e: React.DragEvent<HTMLDivElement>) => void;
+  onDragEnd?: (e: React.DragEvent<HTMLDivElement>) => void;
 }
 
-export const QueueItem: React.FC<QueueItemProps> = ({ 
-  article, 
-  isActive, 
-  isPlaying, 
-  onPlay, 
+export const QueueItem: React.FC<QueueItemProps> = ({
+  article,
+  isActive,
+  isPlaying,
+  onPlay,
   onPause,
-  onRemove
+  onRemove,
+  onPlayNext,
+  draggable,
+  onDragStart,
+  onDragOver,
+  onDrop,
+  onDragEnd
 }) => {
   
   // Check if buffering: active, supposed to be playing, but current segment audio is missing
@@ -52,13 +64,24 @@ export const QueueItem: React.FC<QueueItemProps> = ({
   const isReady = article.status === PlaybackStatus.READY || article.status === PlaybackStatus.PAUSED || article.status === PlaybackStatus.PLAYING || article.status === PlaybackStatus.COMPLETED;
 
   return (
-    <div className={`
+    <div
+      draggable={draggable}
+      onDragStart={onDragStart}
+      onDragOver={onDragOver}
+      onDrop={onDrop}
+      onDragEnd={onDragEnd}
+      className={`
       relative group flex items-center p-4 rounded-xl border transition-all duration-200
-      ${isActive 
-        ? 'bg-blue-50 border-blue-200 dark:bg-blue-900/20 dark:border-blue-800 shadow-sm' 
+      ${isActive
+        ? 'bg-blue-50 border-blue-200 dark:bg-blue-900/20 dark:border-blue-800 shadow-sm'
         : 'bg-white border-slate-100 hover:border-slate-300 dark:bg-slate-800 dark:border-slate-700 dark:hover:border-slate-600'
       }
-    `}>
+    `}
+    >
+      <div className="flex-shrink-0 mr-2 w-6 flex justify-center text-slate-300 dark:text-slate-600 cursor-grab">
+        <GripVertical className="w-4 h-4" />
+      </div>
+
       <div className="flex-shrink-0 mr-4 w-8 flex justify-center">
         {getStatusIcon()}
       </div>
@@ -84,7 +107,16 @@ export const QueueItem: React.FC<QueueItemProps> = ({
             {isActive && isPlaying ? <Pause className="w-4 h-4" /> : <Play className="w-4 h-4" />}
           </button>
         )}
-        <button 
+        {onPlayNext && (
+          <button
+            onClick={(e) => { e.stopPropagation(); onPlayNext(); }}
+            className="p-2 rounded-full bg-slate-50 hover:bg-amber-50 dark:bg-slate-700 dark:hover:bg-amber-900/40 text-amber-600 dark:text-amber-300 transition-colors"
+            title="Play this article next"
+          >
+            <SkipForward className="w-4 h-4" />
+          </button>
+        )}
+        <button
           onClick={(e) => {
              e.stopPropagation(); // Prevent article selection when removing
              onRemove();