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();

components/ReaderView.tsx

@@ -1,7 +1,7 @@
 
 import React, { useEffect, useRef } from 'react';
 import { Article, ReaderSettings } from '../types';
-import { FileText, MousePointerClick } from 'lucide-react';
+import { FileText, MousePointerClick, Share2, Quote } from 'lucide-react';
 import { getDisplayUrl } from '../utils/url';
 
 interface ReaderViewProps {
@@ -30,7 +30,10 @@ export const ReaderView: React.FC<ReaderViewProps> = ({ article, settings, onTog
     fontSize: 'lg',
     lineHeight: 'relaxed',
     fontFamily: 'serif',
-    autoScroll: true
+    autoScroll: true,
+    readingTone: 'clean',
+    pageWidth: 'standard',
+    zenMode: false
   };
 
   const getFontClass = () => {
@@ -59,6 +62,37 @@ export const ReaderView: React.FC<ReaderViewProps> = ({ article, settings, onTog
     }
   };
 
+  const getToneClasses = () => {
+    switch (s.readingTone) {
+      case 'sepia':
+        return 'bg-amber-50/60 dark:bg-amber-900/30 border border-amber-100 dark:border-amber-800';
+      case 'night':
+        return 'bg-slate-900 text-slate-100 border border-slate-800';
+      default:
+        return 'bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800';
+    }
+  };
+
+  const getWidthClass = () => {
+    switch (s.pageWidth) {
+      case 'cozy':
+        return 'max-w-2xl mx-auto';
+      case 'wide':
+        return 'max-w-6xl mx-auto';
+      default:
+        return 'max-w-4xl mx-auto';
+    }
+  };
+
+  const handleShareMoment = (text: string, index: number) => {
+    const base = typeof window !== 'undefined' ? `${window.location.origin}${window.location.pathname}` : '';
+    const shareUrl = `${base}?segment=${index}`;
+    const payload = `"${text.trim()}"\n${shareUrl}`;
+    if (navigator?.clipboard?.writeText) {
+      navigator.clipboard.writeText(payload).catch(() => console.warn('Unable to copy share link'));
+    }
+  };
+
   if (!article) {
     return (
       <div className="h-full flex flex-col items-center justify-center text-slate-400 dark:text-slate-600 p-12 border-2 border-dashed border-slate-200 dark:border-slate-800 rounded-2xl bg-slate-50/50 dark:bg-slate-900/50 transition-colors duration-300">
@@ -72,39 +106,41 @@ export const ReaderView: React.FC<ReaderViewProps> = ({ article, settings, onTog
   const displayUrl = getDisplayUrl(article.url);
 
   return (
-    <div className="bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-800 shadow-sm overflow-hidden h-[calc(100vh-12rem)] flex flex-col transition-colors duration-300">
-      <div className="p-6 border-b border-slate-100 dark:border-slate-800 bg-white dark:bg-slate-900 sticky top-0 z-10 flex justify-between items-start">
-        <div className="flex-1 pr-4">
-            <h2 className="text-2xl font-bold text-slate-900 dark:text-slate-100 leading-tight">
-            {article.title}
-            </h2>
-            <a
-            href={displayUrl.href}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-sm text-blue-600 dark:text-blue-400 hover:underline mt-2 inline-block"
-            >
-            {displayUrl.hostname}
-            </a>
+    <div className={`${getToneClasses()} ${getWidthClass()} rounded-2xl shadow-sm overflow-hidden h-[calc(100vh-12rem)] flex flex-col transition-colors duration-300`}>
+      {!s.zenMode && (
+        <div className="p-6 border-b border-slate-100 dark:border-slate-800 bg-transparent sticky top-0 z-10 flex justify-between items-start">
+          <div className="flex-1 pr-4">
+              <h2 className="text-2xl font-bold text-slate-900 dark:text-slate-100 leading-tight">
+              {article.title}
+              </h2>
+              <a
+              href={displayUrl.href}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-sm text-blue-600 dark:text-blue-400 hover:underline mt-2 inline-block"
+              >
+              {displayUrl.hostname}
+              </a>
+          </div>
+
+          {/* Auto Scroll Toggle */}
+          <button
+             onClick={onToggleAutoScroll}
+             title={s.autoScroll ? "Disable auto-scroll" : "Enable auto-scroll"}
+             className={`p-2 rounded-lg transition-all ${
+               s.autoScroll
+               ? 'text-blue-600 bg-blue-50 dark:bg-blue-900/30 dark:text-blue-400'
+               : 'text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800'
+             }`}
+          >
+              <MousePointerClick className="w-5 h-5" />
+          </button>
         </div>
-        
-        {/* Auto Scroll Toggle */}
-        <button 
-           onClick={onToggleAutoScroll}
-           title={s.autoScroll ? "Disable auto-scroll" : "Enable auto-scroll"}
-           className={`p-2 rounded-lg transition-all ${
-             s.autoScroll 
-             ? 'text-blue-600 bg-blue-50 dark:bg-blue-900/30 dark:text-blue-400' 
-             : 'text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800'
-           }`}
-        >
-            <MousePointerClick className="w-5 h-5" />
-        </button>
-      </div>
-      
-      <div 
-        ref={scrollRef} 
-        className={`flex-grow overflow-y-auto p-6 sm:p-8 space-y-1 custom-scrollbar bg-white dark:bg-slate-900 transition-colors duration-300 ${getFontClass()} ${getSizeClass()}`}
+      )}
+
+      <div
+        ref={scrollRef}
+        className={`flex-grow overflow-y-auto p-6 sm:p-8 space-y-3 custom-scrollbar transition-colors duration-300 ${getFontClass()} ${getSizeClass()} ${getLeadingClass()} ${s.zenMode ? 'pt-10' : ''}`}
       >
         {article.segments.length > 0 ? (
           article.segments.map((segment, idx) => {
@@ -112,21 +148,38 @@ export const ReaderView: React.FC<ReaderViewProps> = ({ article, settings, onTog
             const isBuffering = isActive && article.status === 'PLAYING' && !segment.audioUrl;
 
             return (
-              <div 
-                key={segment.id} 
+              <div
+                key={segment.id}
                 id={`segment-${idx}`}
                 onClick={() => onSegmentSelect?.(idx)}
                 title="Click to play from here"
                 className={`
                   transition-all duration-200 whitespace-pre-wrap rounded-xl p-3 sm:p-4 -mx-2 sm:-mx-4 border-l-4 mb-2
-                  ${getLeadingClass()}
-                  ${isActive 
-                    ? `bg-blue-50 dark:bg-blue-900/20 border-blue-500 shadow-sm ${isBuffering ? 'animate-pulse opacity-70' : 'text-slate-900 dark:text-white'}` 
+                  ${isActive
+                    ? `bg-blue-50 dark:bg-blue-900/20 border-blue-500 shadow-sm ${isBuffering ? 'animate-pulse opacity-70' : 'text-slate-900 dark:text-white'}`
                     : 'text-slate-700 dark:text-slate-300 border-transparent hover:bg-slate-100 dark:hover:bg-slate-800/50 cursor-pointer hover:border-slate-300 dark:hover:border-slate-600'
                   }
                 `}
               >
-                {segment.text}
+                <div className="flex justify-between items-start gap-3">
+                  <p className="flex-1 whitespace-pre-wrap">{segment.text}</p>
+                  <div className="flex flex-col gap-2 text-xs text-slate-500 dark:text-slate-400">
+                    <button
+                      onClick={(e) => { e.stopPropagation(); handleShareMoment(segment.text, idx); }}
+                      className="flex items-center gap-1 px-2 py-1 rounded-full bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors"
+                      title="Copy a shareable moment"
+                    >
+                      <Share2 className="w-3 h-3" /> Share
+                    </button>
+                    <button
+                      onClick={(e) => { e.stopPropagation(); if (navigator?.clipboard?.writeText) navigator.clipboard.writeText(segment.text); }}
+                      className="flex items-center gap-1 px-2 py-1 rounded-full bg-blue-50 text-blue-700 dark:bg-blue-900/40 dark:text-blue-200 hover:bg-blue-100 dark:hover:bg-blue-800 transition-colors"
+                      title="Copy this quote"
+                    >
+                      <Quote className="w-3 h-3" /> Clip
+                    </button>
+                  </div>
+                </div>
               </div>
             );
           })