xpltdco/tubearr
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: Added CSS button utilities (.btn, .btn-icon, .btn-ghost, .btn-dan…

Browse source 
- "src/frontend/src/styles/global.css"
- "src/frontend/src/components/Skeleton.tsx"
- "src/frontend/src/components/Modal.tsx"
- "src/frontend/src/components/Sidebar.tsx"
- "src/frontend/src/pages/Queue.tsx"
- "src/frontend/src/pages/Library.tsx"
- "src/frontend/src/pages/Activity.tsx"
- "src/frontend/src/pages/System.tsx"

GSD-Task: S02/T02
This commit is contained in:
jlightner 2026-04-03 04:15:46 +00:00
parent a0906f3cdb
commit 3355326526
8 changed files with 205 additions and 204 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/frontend/src/components/Modal.tsx
View file

@ -112,6 +112,7 @@ export function Modal({ title, open, onClose, children, width = 480 }: ModalProp
border: '1px solid var(--border-light)',
borderRadius: 'var(--radius-lg)',
boxShadow: 'var(--shadow-lg)',
animation: 'modal-enter 200ms ease-out',
}}
>
{/* Header */}
@ -137,24 +138,7 @@ export function Modal({ title, open, onClose, children, width = 480 }: ModalProp
<button
onClick={onClose}
aria-label="Close"
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: 28,
height: 28,
borderRadius: 'var(--radius-sm)',
color: 'var(--text-muted)',
transition: 'color var(--transition-fast), background-color var(--transition-fast)',
}}
onMouseEnter={(e) => {
e.currentTarget.style.color = 'var(--text-primary)';
e.currentTarget.style.backgroundColor = 'var(--bg-hover)';
}}
onMouseLeave={(e) => {
e.currentTarget.style.color = 'var(--text-muted)';
e.currentTarget.style.backgroundColor = 'transparent';
}}
className="btn-icon"
>
<X size={16} />
</button>

17
src/frontend/src/components/Sidebar.tsx
View file

@ -78,26 +78,11 @@ export function Sidebar() {
</NavLink>
<button
onClick={() => setCollapsed(!collapsed)}
className="btn-icon"
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
padding: 'var(--space-1)',
borderRadius: 'var(--radius-md)',
color: 'var(--text-muted)',
cursor: 'pointer',
transition: 'color var(--transition-fast), background-color var(--transition-fast)',
marginLeft: 'auto',
flexShrink: 0,
}}
onMouseEnter={(e) => {
e.currentTarget.style.color = 'var(--text-secondary)';
e.currentTarget.style.backgroundColor = 'var(--bg-hover)';
}}
onMouseLeave={(e) => {
e.currentTarget.style.color = 'var(--text-muted)';
e.currentTarget.style.backgroundColor = 'transparent';
}}
aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
>
{collapsed ? <ChevronRight size={16} /> : <ChevronLeft size={16} />}

89
src/frontend/src/components/Skeleton.tsx
View file

@ -85,6 +85,95 @@ export function SkeletonChannelHeader() {
);
}
/** Skeleton for the queue list page. */
export function SkeletonQueueList({ rows = 6 }: { rows?: number }) {
return (
<div style={{ padding: 'var(--space-4)' }}>
{/* Tab row placeholder */}
<div style={{ display: 'flex', gap: '2px', marginBottom: 'var(--space-4)' }}>
{Array.from({ length: 5 }).map((_, i) => (
<Skeleton key={i} width={80} height={32} borderRadius="var(--radius-md) var(--radius-md) 0 0" />
))}
</div>
<SkeletonTable rows={rows} columns={7} />
</div>
);
}
/** Skeleton for the library page. */
export function SkeletonLibrary({ rows = 8 }: { rows?: number }) {
return (
<div style={{ padding: 'var(--space-4)' }}>
{/* Search + filters placeholder */}
<div style={{ display: 'flex', gap: 'var(--space-4)', marginBottom: 'var(--space-4)' }}>
<Skeleton width={240} height={36} borderRadius="var(--radius-md)" />
<Skeleton width={120} height={36} borderRadius="var(--radius-md)" />
<Skeleton width={100} height={36} borderRadius="var(--radius-md)" />
<Skeleton width={130} height={36} borderRadius="var(--radius-md)" />
</div>
<SkeletonTable rows={rows} columns={9} />
</div>
);
}
/** Skeleton for the activity page. */
export function SkeletonActivityList({ rows = 6 }: { rows?: number }) {
return (
<div style={{ padding: 'var(--space-4)' }}>
{/* Tab row placeholder */}
<div style={{ display: 'flex', gap: '2px', marginBottom: 'var(--space-4)' }}>
<Skeleton width={80} height={32} borderRadius="var(--radius-md) var(--radius-md) 0 0" />
<Skeleton width={80} height={32} borderRadius="var(--radius-md) var(--radius-md) 0 0" />
</div>
<SkeletonTable rows={rows} columns={5} />
</div>
);
}
/** Skeleton for the system page. */
export function SkeletonSystem() {
return (
<div style={{ padding: 'var(--space-4)' }}>
<Skeleton width={120} height={24} style={{ marginBottom: 'var(--space-6)' }} />
{/* Health card placeholder */}
<div
style={{
backgroundColor: 'var(--bg-card)',
borderRadius: 'var(--radius-lg)',
border: '1px solid var(--border)',
padding: 'var(--space-4)',
marginBottom: 'var(--space-6)',
}}
>
{Array.from({ length: 3 }).map((_, i) => (
<div key={i} style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)', marginBottom: i < 2 ? 'var(--space-3)' : 0 }}>
<Skeleton width={14} height={14} borderRadius="50%" />
<Skeleton width={100} height={14} />
<Skeleton width={60} height={20} borderRadius="var(--radius-md)" />
</div>
))}
</div>
{/* Status table placeholder */}
<Skeleton width={100} height={24} style={{ marginBottom: 'var(--space-4)' }} />
<div
style={{
backgroundColor: 'var(--bg-card)',
borderRadius: 'var(--radius-lg)',
border: '1px solid var(--border)',
padding: 'var(--space-4)',
}}
>
{Array.from({ length: 5 }).map((_, i) => (
<div key={i} style={{ display: 'flex', gap: 'var(--space-4)', marginBottom: i < 4 ? 'var(--space-3)' : 0 }}>
<Skeleton width={140} height={14} />
<Skeleton width={200} height={14} />
</div>
))}
</div>
</div>
);
}
/** Skeleton for the channels list page. */
export function SkeletonChannelsList({ rows = 4 }: { rows?: number }) {
return (

43
src/frontend/src/pages/Activity.tsx
View file

@ -1,9 +1,10 @@
import { useState, useMemo, useCallback } from 'react';
import { ActivityIcon, Clock, Loader, RefreshCw } from 'lucide-react';
import { ActivityIcon, Clock, RefreshCw } from 'lucide-react';
import { Table, type Column } from '../components/Table';
import { StatusBadge } from '../components/StatusBadge';
import { Pagination } from '../components/Pagination';
import { FilterBar, type FilterDefinition } from '../components/FilterBar';
import { SkeletonActivityList } from '../components/Skeleton';
import { useHistory, useActivity, type HistoryFilters } from '../api/hooks/useActivity';
import type { DownloadHistoryRecord } from '@shared/types/index';
@ -278,18 +279,7 @@ export function ActivityPage() {
<button
onClick={() => refetchHistory()}
aria-label="Retry"
style={{
display: 'inline-flex',
alignItems: 'center',
gap: 'var(--space-2)',
padding: 'var(--space-2) var(--space-3)',
borderRadius: 'var(--radius-md)',
backgroundColor: 'var(--danger)',
color: '#fff',
fontSize: 'var(--font-size-sm)',
fontWeight: 600,
flexShrink: 0,
}}
className="btn btn-danger"
>
<RefreshCw size={14} />
Retry
@ -298,12 +288,7 @@ export function ActivityPage() {
)}
{/* Loading */}
{historyLoading && (
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 'var(--space-8)', color: 'var(--text-muted)' }}>
<Loader size={20} style={{ animation: 'spin 1s linear infinite', marginRight: 'var(--space-3)' }} />
Loading history…
</div>
)}
{historyLoading && <SkeletonActivityList />}
{/* Table */}
{!historyLoading && (
@ -351,18 +336,7 @@ export function ActivityPage() {
<button
onClick={() => refetchRecent()}
aria-label="Retry"
style={{
display: 'inline-flex',
alignItems: 'center',
gap: 'var(--space-2)',
padding: 'var(--space-2) var(--space-3)',
borderRadius: 'var(--radius-md)',
backgroundColor: 'var(--danger)',
color: '#fff',
fontSize: 'var(--font-size-sm)',
fontWeight: 600,
flexShrink: 0,
}}
className="btn btn-danger"
>
<RefreshCw size={14} />
Retry
@ -371,12 +345,7 @@ export function ActivityPage() {
)}
{/* Loading */}
{recentLoading && (
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 'var(--space-8)', color: 'var(--text-muted)' }}>
<Loader size={20} style={{ animation: 'spin 1s linear infinite', marginRight: 'var(--space-3)' }} />
Loading recent activity…
</div>
)}
{recentLoading && <SkeletonActivityList />}
{/* Activity feed */}
{!recentLoading && (

23
src/frontend/src/pages/Library.tsx
View file

@ -1,6 +1,6 @@
import { useState, useCallback, useMemo } from 'react';
import { useNavigate } from 'react-router-dom';
import { Library as LibraryIcon, Loader, RefreshCw, Film, Music } from 'lucide-react';
import { Library as LibraryIcon, RefreshCw, Film, Music } from 'lucide-react';
import { Table, type Column } from '../components/Table';
import { StatusBadge } from '../components/StatusBadge';
import { QualityLabel } from '../components/QualityLabel';
@ -8,6 +8,7 @@ import { PlatformBadge } from '../components/PlatformBadge';
import { Pagination } from '../components/Pagination';
import { SearchBar } from '../components/SearchBar';
import { FilterBar, type FilterDefinition } from '../components/FilterBar';
import { SkeletonLibrary } from '../components/Skeleton';
import { useLibraryContent, type LibraryFilters } from '../api/hooks/useLibrary';
import { useChannels } from '../api/hooks/useChannels';
import type { ContentItem, ContentStatus, ContentType } from '@shared/types/index';
@ -335,18 +336,7 @@ export function Library() {
<button
onClick={() => refetch()}
aria-label="Retry"
style={{
display: 'inline-flex',
alignItems: 'center',
gap: 'var(--space-2)',
padding: 'var(--space-2) var(--space-3)',
borderRadius: 'var(--radius-md)',
backgroundColor: 'var(--danger)',
color: '#fff',
fontSize: 'var(--font-size-sm)',
fontWeight: 600,
flexShrink: 0,
}}
className="btn btn-danger"
>
<RefreshCw size={14} />
Retry
@ -355,12 +345,7 @@ export function Library() {
)}
{/* Loading state */}
{isLoading && (
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 'var(--space-8)', color: 'var(--text-muted)' }}>
<Loader size={20} style={{ animation: 'spin 1s linear infinite', marginRight: 'var(--space-3)' }} />
Loading library…
</div>
)}
{isLoading && <SkeletonLibrary />}
{/* Content table */}
{!isLoading && !error && (

55
src/frontend/src/pages/Queue.tsx
View file

@ -1,7 +1,8 @@
import { useState, useMemo } from 'react';
import { ListOrdered, RotateCcw, X, Loader, RefreshCw } from 'lucide-react';
import { ListOrdered, RotateCcw, X, RefreshCw } from 'lucide-react';
import { Table, type Column } from '../components/Table';
import { StatusBadge } from '../components/StatusBadge';
import { SkeletonQueueList } from '../components/Skeleton';
import { useQueue, useRetryQueueItem, useCancelQueueItem } from '../api/hooks/useQueue';
import type { QueueItem, QueueStatus } from '@shared/types/index';
@ -163,20 +164,8 @@ export function Queue() {
disabled={retryMutation.isPending}
title="Retry"
aria-label="Retry failed item"
style={{
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
width: 28,
height: 28,
padding: 0,
border: '1px solid var(--border)',
borderRadius: 'var(--radius-md)',
backgroundColor: 'var(--bg-input)',
color: 'var(--warning)',
cursor: retryMutation.isPending ? 'wait' : 'pointer',
transition: 'background-color var(--transition-fast)',
}}
className="btn-icon"
style={{ color: 'var(--warning)' }}
>
<RotateCcw size={14} />
</button>
@ -190,20 +179,8 @@ export function Queue() {
disabled={cancelMutation.isPending}
title="Cancel"
aria-label="Cancel pending item"
style={{
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
width: 28,
height: 28,
padding: 0,
border: '1px solid var(--border)',
borderRadius: 'var(--radius-md)',
backgroundColor: 'var(--bg-input)',
color: 'var(--danger)',
cursor: cancelMutation.isPending ? 'wait' : 'pointer',
transition: 'background-color var(--transition-fast)',
}}
className="btn-icon"
style={{ color: 'var(--danger)' }}
>
<X size={14} />
</button>
@ -294,18 +271,7 @@ export function Queue() {
<button
onClick={() => refetch()}
aria-label="Retry"
style={{
display: 'inline-flex',
alignItems: 'center',
gap: 'var(--space-2)',
padding: 'var(--space-2) var(--space-3)',
borderRadius: 'var(--radius-md)',
backgroundColor: 'var(--danger)',
color: '#fff',
fontSize: 'var(--font-size-sm)',
fontWeight: 600,
flexShrink: 0,
}}
className="btn btn-danger"
>
<RefreshCw size={14} />
Retry
@ -336,12 +302,7 @@ export function Queue() {
)}
{/* Loading state */}
{isLoading && (
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 'var(--space-8)', color: 'var(--text-muted)' }}>
<Loader size={20} style={{ animation: 'spin 1s linear infinite', marginRight: 'var(--space-3)' }} />
Loading queue…
</div>
)}
{isLoading && <SkeletonQueueList />}
{/* Queue table */}
{!isLoading && (

74
src/frontend/src/pages/System.tsx
View file

@ -1,6 +1,7 @@
import { Loader, RefreshCw, Server, Activity, Cpu, HardDrive } from 'lucide-react';
import { RefreshCw, Server, Activity, Cpu, HardDrive } from 'lucide-react';
import { useSystemStatus, useHealth } from '../api/hooks/useSystem';
import { HealthStatus } from '../components/HealthStatus';
import { SkeletonSystem } from '../components/Skeleton';
import { formatBytes } from '../utils/format';
// ── Helpers ──
@ -26,12 +27,7 @@ export function SystemPage() {
const isLoading = healthLoading || statusLoading;
if (isLoading) {
return (
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 'var(--space-12)', color: 'var(--text-muted)' }}>
<Loader size={20} style={{ animation: 'spin 1s linear infinite', marginRight: 'var(--space-3)' }} />
Loading system info...
</div>
);
return <SkeletonSystem />;
}
return (
@ -52,25 +48,7 @@ export function SystemPage() {
onClick={() => refetchHealth()}
title="Refresh health status"
aria-label="Refresh health status"
style={{
display: 'inline-flex',
alignItems: 'center',
gap: 'var(--space-2)',
padding: 'var(--space-2) var(--space-3)',
borderRadius: 'var(--radius-md)',
backgroundColor: 'var(--bg-hover)',
color: 'var(--text-secondary)',
fontSize: 'var(--font-size-sm)',
transition: 'color var(--transition-fast), background-color var(--transition-fast)',
}}
onMouseEnter={(e) => {
e.currentTarget.style.color = 'var(--text-primary)';
e.currentTarget.style.backgroundColor = 'var(--bg-selected)';
}}
onMouseLeave={(e) => {
e.currentTarget.style.color = 'var(--text-secondary)';
e.currentTarget.style.backgroundColor = 'var(--bg-hover)';
}}
className="btn btn-ghost"
>
<RefreshCw size={14} />
Refresh
@ -95,17 +73,7 @@ export function SystemPage() {
<button
onClick={() => refetchHealth()}
aria-label="Retry"
style={{
display: 'inline-flex',
alignItems: 'center',
gap: 'var(--space-2)',
padding: 'var(--space-2) var(--space-3)',
borderRadius: 'var(--radius-md)',
backgroundColor: 'var(--danger)',
color: '#fff',
fontSize: 'var(--font-size-sm)',
fontWeight: 600,
}}
className="btn btn-danger"
>
<RefreshCw size={14} />
Retry
@ -127,25 +95,7 @@ export function SystemPage() {
onClick={() => refetchStatus()}
title="Refresh system status"
aria-label="Refresh system status"
style={{
display: 'inline-flex',
alignItems: 'center',
gap: 'var(--space-2)',
padding: 'var(--space-2) var(--space-3)',
borderRadius: 'var(--radius-md)',
backgroundColor: 'var(--bg-hover)',
color: 'var(--text-secondary)',
fontSize: 'var(--font-size-sm)',
transition: 'color var(--transition-fast), background-color var(--transition-fast)',
}}
onMouseEnter={(e) => {
e.currentTarget.style.color = 'var(--text-primary)';
e.currentTarget.style.backgroundColor = 'var(--bg-selected)';
}}
onMouseLeave={(e) => {
e.currentTarget.style.color = 'var(--text-secondary)';
e.currentTarget.style.backgroundColor = 'var(--bg-hover)';
}}
className="btn btn-ghost"
>
<RefreshCw size={14} />
Refresh
@ -170,17 +120,7 @@ export function SystemPage() {
<button
onClick={() => refetchStatus()}
aria-label="Retry"
style={{
display: 'inline-flex',
alignItems: 'center',
gap: 'var(--space-2)',
padding: 'var(--space-2) var(--space-3)',
borderRadius: 'var(--radius-md)',
backgroundColor: 'var(--danger)',
color: '#fff',
fontSize: 'var(--font-size-sm)',
fontWeight: 600,
}}
className="btn btn-danger"
>
<RefreshCw size={14} />
Retry

88
src/frontend/src/styles/global.css
View file

@ -181,6 +181,94 @@ tr:hover {
50% { box-shadow: 0 0 8px var(--accent-glow); }
}
/* ── Button utility classes ── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-md);
font-size: var(--font-size-sm);
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
border: 1px solid transparent;
text-decoration: none;
white-space: nowrap;
flex-shrink: 0;
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.btn-primary {
background-color: var(--accent);
color: #fff;
border-color: var(--accent);
}
.btn-primary:hover:not(:disabled) {
background-color: var(--accent-hover);
border-color: var(--accent-hover);
}
.btn-ghost {
background-color: var(--bg-hover);
color: var(--text-secondary);
border-color: transparent;
}
.btn-ghost:hover:not(:disabled) {
background-color: var(--bg-selected);
color: var(--text-primary);
}
.btn-danger {
background-color: var(--danger);
color: #fff;
border-color: var(--danger);
}
.btn-danger:hover:not(:disabled) {
filter: brightness(1.15);
}
.btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
border: none;
border-radius: var(--radius-sm);
background: transparent;
color: var(--text-muted);
cursor: pointer;
transition: color var(--transition-fast), background-color var(--transition-fast);
}
.btn-icon:hover {
color: var(--text-primary);
background-color: var(--bg-hover);
}
/* ── Modal animation ── */
@keyframes modal-enter {
from {
opacity: 0;
transform: scale(0.95) translateY(8px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
/* ── Animations ── */
@keyframes pulse {
0%, 100% { opacity: 1; }