feat(ui): Components refactoring with Tailwind - UI kit, icons, lazy loading images
- Created reusable UI components (Card, Button, Badge, Form, Icon) - Added PageIcon and NavIcon components with consistent styling - Refactored all pages to use new UI components - Added non-blocking image loading with skeleton for book covers - Created LibraryActions dropdown for library settings - Added emojis to buttons for better UX - Fixed Client Component issues with getBookCoverUrl
This commit is contained in:
@@ -22,7 +22,6 @@ interface Job {
|
||||
export function JobsIndicator() {
|
||||
const [activeJobs, setActiveJobs] = useState<Job[]>([]);
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -66,7 +65,11 @@ export function JobsIndicator() {
|
||||
|
||||
if (totalCount === 0) {
|
||||
return (
|
||||
<Link href="/jobs" className="jobs-indicator-empty" title="View all jobs">
|
||||
<Link
|
||||
href="/jobs"
|
||||
className="flex items-center justify-center w-10 h-10 rounded-lg text-muted transition-all duration-200 hover:text-foreground hover:bg-primary-soft"
|
||||
title="View all jobs"
|
||||
>
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<rect x="2" y="3" width="20" height="18" rx="2" />
|
||||
<path d="M6 8h12M6 12h12M6 16h8" />
|
||||
@@ -76,15 +79,19 @@ export function JobsIndicator() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="jobs-indicator-wrapper" ref={dropdownRef}>
|
||||
<div className="relative" ref={dropdownRef}>
|
||||
<button
|
||||
className={`jobs-indicator-button ${runningJobs.length > 0 ? 'has-running' : ''} ${isOpen ? 'open' : ''}`}
|
||||
className={`flex items-center gap-2 px-3 py-2 rounded-lg font-medium text-sm transition-all duration-200 ${
|
||||
runningJobs.length > 0
|
||||
? 'bg-success-soft text-success'
|
||||
: 'bg-warning-soft text-warning'
|
||||
} ${isOpen ? 'ring-2 ring-primary' : ''}`}
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
title={`${totalCount} active job${totalCount !== 1 ? 's' : ''}`}
|
||||
>
|
||||
{/* Animated spinner for running jobs */}
|
||||
{runningJobs.length > 0 && (
|
||||
<div className="jobs-spinner">
|
||||
<div className="w-4 h-4 animate-spin">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<circle cx="12" cy="12" r="10" strokeOpacity="0.25" />
|
||||
<path d="M12 2a10 10 0 0 1 10 10" strokeLinecap="round" />
|
||||
@@ -93,21 +100,19 @@ export function JobsIndicator() {
|
||||
)}
|
||||
|
||||
{/* Icon */}
|
||||
<svg className="jobs-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<rect x="2" y="3" width="20" height="18" rx="2" />
|
||||
<path d="M6 8h12M6 12h12M6 16h8" />
|
||||
</svg>
|
||||
|
||||
{/* Badge with count */}
|
||||
<span className="jobs-count-badge">
|
||||
{totalCount > 99 ? "99+" : totalCount}
|
||||
<span className="flex items-center justify-center min-w-5 h-5 px-1.5 text-xs font-bold text-white bg-current rounded-full">
|
||||
<span className="text-background">{totalCount > 99 ? "99+" : totalCount}</span>
|
||||
</span>
|
||||
|
||||
{/* Chevron */}
|
||||
<svg
|
||||
className={`jobs-chevron ${isOpen ? 'open' : ''}`}
|
||||
width="16"
|
||||
height="16"
|
||||
className={`w-4 h-4 transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
@@ -119,13 +124,13 @@ export function JobsIndicator() {
|
||||
|
||||
{/* Popin/Dropdown */}
|
||||
{isOpen && (
|
||||
<div className="jobs-popin">
|
||||
<div className="jobs-popin-header">
|
||||
<div className="jobs-popin-title">
|
||||
<span className="jobs-icon-large">📊</span>
|
||||
<div className="absolute right-0 top-full mt-2 w-96 bg-card rounded-xl shadow-card border border-line overflow-hidden z-50">
|
||||
<div className="flex items-center justify-between px-4 py-3 border-b border-line bg-muted/5">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-2xl">📊</span>
|
||||
<div>
|
||||
<h3>Active Jobs</h3>
|
||||
<p className="jobs-subtitle">
|
||||
<h3 className="font-semibold text-foreground">Active Jobs</h3>
|
||||
<p className="text-xs text-muted">
|
||||
{runningJobs.length > 0
|
||||
? `${runningJobs.length} running, ${pendingJobs.length} pending`
|
||||
: `${pendingJobs.length} job${pendingJobs.length !== 1 ? 's' : ''} pending`
|
||||
@@ -135,7 +140,7 @@ export function JobsIndicator() {
|
||||
</div>
|
||||
<Link
|
||||
href="/jobs"
|
||||
className="jobs-view-all"
|
||||
className="text-sm font-medium text-primary hover:text-primary/80 transition-colors"
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
View All →
|
||||
@@ -144,72 +149,74 @@ export function JobsIndicator() {
|
||||
|
||||
{/* Overall progress bar if running */}
|
||||
{runningJobs.length > 0 && (
|
||||
<div className="jobs-overall-progress">
|
||||
<div className="progress-header">
|
||||
<span>Overall Progress</span>
|
||||
<span className="progress-percent">{Math.round(totalProgress)}%</span>
|
||||
<div className="px-4 py-3 border-b border-line">
|
||||
<div className="flex items-center justify-between text-sm mb-2">
|
||||
<span className="text-muted">Overall Progress</span>
|
||||
<span className="font-semibold text-foreground">{Math.round(totalProgress)}%</span>
|
||||
</div>
|
||||
<div className="progress-bar">
|
||||
<div className="h-2 bg-line rounded-full overflow-hidden">
|
||||
<div
|
||||
className="progress-fill"
|
||||
className="h-full bg-success rounded-full transition-all duration-500"
|
||||
style={{ width: `${totalProgress}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="jobs-list-container">
|
||||
<div className="max-h-80 overflow-y-auto">
|
||||
{activeJobs.length === 0 ? (
|
||||
<div className="jobs-empty-state">
|
||||
<span className="empty-icon">✅</span>
|
||||
<div className="flex flex-col items-center justify-center py-8 text-muted">
|
||||
<span className="text-4xl mb-2">✅</span>
|
||||
<p>No active jobs</p>
|
||||
</div>
|
||||
) : (
|
||||
<ul className="jobs-detailed-list">
|
||||
<ul className="divide-y divide-line">
|
||||
{activeJobs.map(job => (
|
||||
<li key={job.id} className={`job-detailed-item job-status-${job.status}`}>
|
||||
<li key={job.id}>
|
||||
<Link
|
||||
href={`/jobs/${job.id}`}
|
||||
className="job-link"
|
||||
className="block px-4 py-3 hover:bg-muted/5 transition-colors"
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
<div className="job-info-row">
|
||||
<div className="job-status-icon">
|
||||
{job.status === "running" && <span className="spinning">⏳</span>}
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="mt-0.5">
|
||||
{job.status === "running" && <span className="animate-spin inline-block">⏳</span>}
|
||||
{job.status === "pending" && <span>⏸</span>}
|
||||
</div>
|
||||
|
||||
<div className="job-details">
|
||||
<div className="job-main-info">
|
||||
<code className="job-id-short">{job.id.slice(0, 8)}</code>
|
||||
<span className={`job-type-badge ${job.type}`}>{job.type}</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<code className="text-xs px-1.5 py-0.5 bg-line/50 rounded font-mono">{job.id.slice(0, 8)}</code>
|
||||
<span className={`text-xs px-2 py-0.5 rounded font-medium ${
|
||||
job.type === 'rebuild' ? 'bg-primary-soft text-primary' : 'bg-muted/20 text-muted'
|
||||
}`}>
|
||||
{job.type}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{job.status === "running" && job.progress_percent !== null && (
|
||||
<div className="job-progress-row">
|
||||
<div className="job-mini-progress-bar">
|
||||
<div className="flex items-center gap-2 mt-2">
|
||||
<div className="flex-1 h-1.5 bg-line rounded-full overflow-hidden">
|
||||
<div
|
||||
className="job-mini-progress-fill"
|
||||
className="h-full bg-success rounded-full transition-all duration-300"
|
||||
style={{ width: `${job.progress_percent}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="job-progress-text">{job.progress_percent}%</span>
|
||||
<span className="text-xs font-medium text-muted">{job.progress_percent}%</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{job.current_file && (
|
||||
<p className="job-current-file" title={job.current_file}>
|
||||
📄 {job.current_file.length > 35
|
||||
? job.current_file.substring(0, 35) + "..."
|
||||
: job.current_file}
|
||||
<p className="text-xs text-muted mt-1.5 truncate" title={job.current_file}>
|
||||
📄 {job.current_file}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{job.stats_json && (
|
||||
<div className="job-mini-stats">
|
||||
<div className="flex items-center gap-3 mt-1.5 text-xs text-muted">
|
||||
<span>✓ {job.stats_json.indexed_files}</span>
|
||||
{job.stats_json.errors > 0 && (
|
||||
<span className="error-stat">⚠ {job.stats_json.errors}</span>
|
||||
<span className="text-error">⚠ {job.stats_json.errors}</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
@@ -223,8 +230,8 @@ export function JobsIndicator() {
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="jobs-popin-footer">
|
||||
<p className="jobs-auto-refresh">Auto-refreshing every 2s</p>
|
||||
<div className="px-4 py-2 border-t border-line bg-muted/5">
|
||||
<p className="text-xs text-muted text-center">Auto-refreshing every 2s</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user