gitea_admin/news-reader-actions-test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Introduce reader settings and dark mode support

Browse Source 
Adds a new `ReaderSettings` type to manage user preferences such as dark mode, font size, line height, font family, and auto-scroll behavior.

Implements dark mode styling for various UI components including the `VoiceSelector` and `QueueItem`, enhancing visual consistency.

Enhances the `ReaderView` component to respect the `autoScroll` setting and introduces basic text styling options based on the new settings.
This commit is contained in:
Anthony
2025-11-19 20:21:08 +08:00
parent 417d48ffdf
commit 8e902fd9c1
5 changed files with 418 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
components/QueueItem.tsx
View File

@@ -1,6 +1,7 @@
import React from 'react';
import { Article, PlaybackStatus } from '../types';
import { Play, Pause, Loader2, AlertCircle, FileText, Headphones } from 'lucide-react';
import { Play, Pause, Loader2, AlertCircle, FileText } from 'lucide-react';
interface QueueItemProps {
article: Article;
@@ -35,7 +36,7 @@ export const QueueItem: React.FC<QueueItemProps> = ({
<div className="w-1 bg-blue-500 animate-[bounce_0.8s_infinite] h-3"></div>
</div>;
default:
return <FileText className="w-5 h-5 text-slate-400" />;
return <FileText className="w-5 h-5 text-slate-400 dark:text-slate-500" />;
}
};
@@ -45,8 +46,8 @@ export const QueueItem: React.FC<QueueItemProps> = ({
<div className={`
relative group flex items-center p-4 rounded-xl border transition-all duration-200
${isActive
? 'bg-blue-50 border-blue-200 shadow-sm'
: 'bg-white border-slate-100 hover:border-slate-300'
? '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-4 w-8 flex justify-center">
@@ -54,10 +55,10 @@ export const QueueItem: React.FC<QueueItemProps> = ({
</div>
<div className="flex-grow min-w-0">
<h3 className={`font-medium truncate ${isActive ? 'text-blue-900' : 'text-slate-900'}`}>
<h3 className={`font-medium truncate ${isActive ? 'text-blue-900 dark:text-blue-300' : 'text-slate-900 dark:text-slate-200'}`}>
{article.title || article.url}
</h3>
<p className="text-xs text-slate-500 truncate mt-0.5">
<p className="text-xs text-slate-500 dark:text-slate-400 truncate mt-0.5">
{article.url}
</p>
{article.errorMessage && (
@@ -69,18 +70,18 @@ export const QueueItem: React.FC<QueueItemProps> = ({
{isReady && (
<button
onClick={isActive && isPlaying ? onPause : onPlay}
className="p-2 rounded-full bg-slate-100 hover:bg-blue-100 text-slate-700 hover:text-blue-700 transition-colors"
className="p-2 rounded-full bg-slate-100 hover:bg-blue-100 dark:bg-slate-700 dark:hover:bg-blue-900/50 text-slate-700 dark:text-slate-200 hover:text-blue-700 dark:hover:text-blue-400 transition-colors"
>
{isActive && isPlaying ? <Pause className="w-4 h-4" /> : <Play className="w-4 h-4" />}
</button>
)}
<button
onClick={onRemove}
className="text-xs text-slate-400 hover:text-red-500 underline px-2"
className="text-xs text-slate-400 hover:text-red-500 dark:text-slate-500 dark:hover:text-red-400 underline px-2"
>
Remove
</button>
</div>
</div>
);
};
};