mirror of
https://github.com/nimbold/Firelink.git
synced 2026-08-08 02:13:24 +00:00
style(ui): overhaul background and themes for modern minimalist aesthetics
This commit is contained in:
NimBold
@@ -13,16 +13,7 @@ interface DownloadTableProps {
|
||||
|
||||
export const DownloadTable: React.FC<DownloadTableProps> = ({ filter }) => {
|
||||
const { downloads, toggleAddModal, updateDownload, removeDownload, clearFinished, redownload } = useDownloadStore();
|
||||
const { isSidebarVisible, toggleSidebar, listRowDensity } = useSettingsStore();
|
||||
|
||||
const getPaddingY = () => {
|
||||
switch (listRowDensity) {
|
||||
case 'compact': return 'py-1';
|
||||
case 'relaxed': return 'py-4';
|
||||
default: return 'py-3';
|
||||
}
|
||||
};
|
||||
const py = getPaddingY();
|
||||
const { isSidebarVisible, toggleSidebar } = useSettingsStore();
|
||||
|
||||
const [contextMenu, setContextMenu] = useState<{ x: number; y: number; id: string } | null>(null);
|
||||
|
||||
@@ -111,34 +102,35 @@ export const DownloadTable: React.FC<DownloadTableProps> = ({ filter }) => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex-1 flex flex-col bg-transparent h-full relative">
|
||||
<div className="glass-panel shrink-0 border-b border-border-color/60">
|
||||
<WindowDragRegion className={!isSidebarVisible ? 'pl-24' : ''} />
|
||||
<div className="flex-1 flex flex-col bg-transparent h-full relative p-4 pb-0">
|
||||
<div className="glass-panel shrink-0 rounded-[16px] mb-3 shadow-sm border border-border-color/40 z-10">
|
||||
<WindowDragRegion className={!isSidebarVisible ? 'pl-20' : ''} />
|
||||
|
||||
{/* Download Toolbar */}
|
||||
<div className={`flex px-6 pb-4 items-center ${!isSidebarVisible ? 'pl-24' : ''}`}>
|
||||
<div className={`flex px-5 pb-3 pt-1 items-center ${!isSidebarVisible ? 'pl-20' : ''}`}>
|
||||
<button
|
||||
onClick={toggleSidebar}
|
||||
className="mr-4 p-1.5 rounded-md text-text-secondary hover:text-text-primary hover:bg-item-hover transition-colors"
|
||||
className="mr-4 p-1.5 rounded-lg text-text-secondary hover:text-text-primary hover:bg-item-hover transition-all duration-200 hover-lift"
|
||||
title="Toggle Sidebar"
|
||||
>
|
||||
<PanelLeft size={18} strokeWidth={2} />
|
||||
<PanelLeft size={18} strokeWidth={2.5} />
|
||||
</button>
|
||||
<h2 className="text-[15px] font-bold mr-auto text-text-primary tracking-tight cursor-default">{getFilterTitle()}</h2>
|
||||
|
||||
<div className="flex gap-1.5 items-center">
|
||||
<div className="flex gap-2 items-center bg-item-hover/30 p-1 rounded-xl border border-border-color/30">
|
||||
<button
|
||||
onClick={() => toggleAddModal(true)}
|
||||
className="p-1.5 rounded-md text-text-secondary hover:text-white hover:bg-item-hover transition-all duration-200"
|
||||
className="p-1.5 rounded-lg text-text-secondary hover:text-white hover:bg-accent hover:shadow-md hover:shadow-accent/30 transition-all duration-200 hover-lift"
|
||||
title="Add Download"
|
||||
>
|
||||
<Plus size={16} strokeWidth={2} />
|
||||
<Plus size={16} strokeWidth={2.5} />
|
||||
</button>
|
||||
<div className="w-[1px] h-4 bg-border-color/50"></div>
|
||||
<button
|
||||
onClick={() => {
|
||||
filteredDownloads.filter(d => d.status === 'paused').forEach(d => handleResume(d));
|
||||
}}
|
||||
className="p-1.5 rounded-md text-text-secondary hover:text-white hover:bg-item-hover transition-all duration-200"
|
||||
className="p-1.5 rounded-lg text-text-secondary hover:text-white hover:bg-green-500 hover:shadow-md hover:shadow-green-500/30 transition-all duration-200 hover-lift"
|
||||
title="Resume All"
|
||||
>
|
||||
<Play size={16} fill="currentColor" className="opacity-90" />
|
||||
@@ -147,50 +139,49 @@ export const DownloadTable: React.FC<DownloadTableProps> = ({ filter }) => {
|
||||
onClick={() => {
|
||||
filteredDownloads.filter(d => d.status === 'downloading').forEach(d => handlePause(d.id));
|
||||
}}
|
||||
className="p-1.5 rounded-md text-text-secondary hover:text-white hover:bg-item-hover transition-all duration-200"
|
||||
className="p-1.5 rounded-lg text-text-secondary hover:text-white hover:bg-orange-500 hover:shadow-md hover:shadow-orange-500/30 transition-all duration-200 hover-lift"
|
||||
title="Pause All"
|
||||
>
|
||||
<Pause size={16} fill="currentColor" className="opacity-90" />
|
||||
</button>
|
||||
<div className="w-[1px] h-4 bg-border-color/50"></div>
|
||||
<button
|
||||
onClick={clearFinished}
|
||||
className="p-1.5 rounded-md text-text-secondary hover:text-red-400 hover:bg-item-hover transition-all duration-200"
|
||||
className="p-1.5 rounded-lg text-text-secondary hover:text-white hover:bg-red-500 hover:shadow-md hover:shadow-red-500/30 transition-all duration-200 hover-lift"
|
||||
title="Clear Finished"
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
<Trash2 size={16} strokeWidth={2} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
<div className="flex-1 overflow-auto bg-transparent">
|
||||
<table className="w-full border-collapse text-left">
|
||||
<thead className="sticky top-0 bg-main-bg z-0 border-b border-border-color">
|
||||
<tr className="text-text-muted/60 text-[10px] font-bold tracking-widest uppercase">
|
||||
<th className={`${py} px-3 pl-8`}>FILE</th>
|
||||
<th className={`${py} px-3 w-40`}>SIZE</th>
|
||||
<th className={`${py} px-3 w-36`}>STATUS</th>
|
||||
<th className={`${py} px-3 w-28`}>SPEED</th>
|
||||
<th className={`${py} px-3 w-28`}>ETA</th>
|
||||
<th className={`${py} px-3 pr-8 w-36`}>DATE ADDED</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{/* List */}
|
||||
<div className="flex-1 overflow-auto bg-transparent px-1 pb-4 relative">
|
||||
<div className="w-full text-left">
|
||||
<div className="flex text-text-muted/60 text-[10px] font-bold tracking-widest uppercase px-4 pb-2 pt-2 sticky top-0 z-0 bg-transparent backdrop-blur-md">
|
||||
<div className="flex-1 min-w-[200px]">FILE</div>
|
||||
<div className="w-32">SIZE</div>
|
||||
<div className="w-32">STATUS</div>
|
||||
<div className="w-28">SPEED</div>
|
||||
<div className="w-28">ETA</div>
|
||||
<div className="w-32 text-right pr-4">DATE ADDED</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
{filteredDownloads.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={6} className="p-16 text-center">
|
||||
<div className="flex flex-col items-center justify-center text-text-muted/50 gap-3">
|
||||
<Box size={48} strokeWidth={1} />
|
||||
<span className="text-sm font-medium">No downloads in this view</span>
|
||||
<div className="p-16 text-center glass-card rounded-[16px] mx-2 mt-4">
|
||||
<div className="flex flex-col items-center justify-center text-text-muted/50 gap-4">
|
||||
<div className="p-4 bg-item-hover rounded-full animate-float">
|
||||
<Box size={40} strokeWidth={1.5} />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<span className="text-[13px] font-medium tracking-wide">No downloads in this view</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
filteredDownloads.map(d => (
|
||||
<tr
|
||||
<div
|
||||
key={d.id}
|
||||
className="border-b border-border-color/30 hover:bg-item-hover transition-colors duration-200 group cursor-default"
|
||||
className="flex items-center px-4 py-3 bg-item-hover/20 hover:bg-item-hover/50 border border-border-color/20 hover:border-border-color/40 rounded-[14px] transition-all duration-200 group cursor-default hover-lift shadow-sm mx-1"
|
||||
onContextMenu={(e) => {
|
||||
e.preventDefault();
|
||||
setContextMenu({
|
||||
@@ -200,19 +191,19 @@ export const DownloadTable: React.FC<DownloadTableProps> = ({ filter }) => {
|
||||
});
|
||||
}}
|
||||
>
|
||||
<td className={`${py} px-3 pl-8 text-[13px] text-text-primary`}>
|
||||
<div className="flex-1 min-w-[200px] text-[13px] text-text-primary pr-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-item-hover rounded-md border border-border-color/50 text-text-muted">
|
||||
<div className="p-2.5 bg-bg-modal shadow-sm rounded-xl border border-border-color/40 text-text-muted group-hover:scale-105 transition-transform">
|
||||
{getCategoryIcon(d.category)}
|
||||
</div>
|
||||
<span className="font-medium truncate max-w-[280px]">{d.fileName}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className={`${py} px-3`}>
|
||||
</div>
|
||||
<div className="w-32 pr-4">
|
||||
{d.status === 'downloading' || d.status === 'paused' ? (
|
||||
<div className="w-full pr-4">
|
||||
<div className="w-full bg-[#3f3f3f] rounded-full h-1.5 mb-1.5 overflow-hidden">
|
||||
<div className={`h-1.5 rounded-full transition-all duration-300 ${d.status === 'paused' ? 'bg-orange-500' : 'bg-[#3B66DE]'}`} style={{ width: `${(d.fraction || 0) * 100}%` }}></div>
|
||||
<div className="w-full">
|
||||
<div className="w-full bg-border-color/30 rounded-full h-1.5 mb-1.5 overflow-hidden">
|
||||
<div className={`h-1.5 rounded-full transition-all duration-300 ${d.status === 'paused' ? 'bg-orange-500' : 'bg-accent'}`} style={{ width: `${(d.fraction || 0) * 100}%` }}></div>
|
||||
</div>
|
||||
<div className="text-[11px] text-text-muted font-medium">
|
||||
{((d.fraction || 0) * 100).toFixed(1)}%
|
||||
@@ -221,33 +212,33 @@ export const DownloadTable: React.FC<DownloadTableProps> = ({ filter }) => {
|
||||
) : (
|
||||
<span className="text-[12px] text-text-secondary font-medium">{d.size || '-'}</span>
|
||||
)}
|
||||
</td>
|
||||
<td className={`${py} px-3`}>
|
||||
<span className={`inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold tracking-widest uppercase ${
|
||||
d.status === 'completed' ? 'text-[#4CAF50]' :
|
||||
d.status === 'downloading' ? 'bg-[#1E3A8A] text-[#60A5FA]' :
|
||||
d.status === 'failed' ? 'text-red-400' :
|
||||
d.status === 'paused' ? 'text-orange-400' :
|
||||
'text-text-muted'
|
||||
</div>
|
||||
<div className="w-32">
|
||||
<span className={`inline-flex items-center px-2 py-0.5 rounded-md text-[10px] font-bold tracking-widest uppercase shadow-sm ${
|
||||
d.status === 'completed' ? 'bg-green-500/10 text-green-500 border border-green-500/20' :
|
||||
d.status === 'downloading' ? 'bg-accent/10 text-accent border border-accent/20' :
|
||||
d.status === 'failed' ? 'bg-red-500/10 text-red-500 border border-red-500/20' :
|
||||
d.status === 'paused' ? 'bg-orange-500/10 text-orange-500 border border-orange-500/20' :
|
||||
'bg-item-hover text-text-muted border border-border-color/30'
|
||||
}`}>
|
||||
{d.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className={`${py} px-3 text-[12px] text-text-secondary font-medium`}>{d.speed}</td>
|
||||
<td className={`${py} px-3 text-[12px] text-text-secondary font-medium`}>{d.eta}</td>
|
||||
<td className={`${py} px-3 pr-8 relative`}>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-[12px] text-text-secondary font-medium">
|
||||
</div>
|
||||
<div className="w-28 text-[12px] text-text-secondary font-medium">{d.speed}</div>
|
||||
<div className="w-28 text-[12px] text-text-secondary font-medium">{d.eta}</div>
|
||||
<div className="w-32 relative text-right pr-4">
|
||||
<div className="flex items-center justify-end">
|
||||
<span className="text-[12px] text-text-secondary font-medium group-hover:opacity-0 transition-opacity duration-200">
|
||||
{d.dateAdded ? new Date(d.dateAdded).toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' }) : '-'}
|
||||
</span>
|
||||
<div className="flex justify-end gap-1.5 opacity-0 group-hover:opacity-100 transition-opacity duration-200 absolute right-8 top-1/2 -translate-y-1/2">
|
||||
<div className="flex justify-end gap-1.5 opacity-0 group-hover:opacity-100 transition-opacity duration-200 absolute right-4 top-1/2 -translate-y-1/2">
|
||||
{d.status === 'downloading' && (
|
||||
<button onClick={() => handlePause(d.id)} className="p-1 bg-[#2A2B2D] border border-[#3f3f3f] hover:bg-[#3f3f3f] rounded text-orange-400 transition-colors" title="Pause">
|
||||
<button onClick={() => handlePause(d.id)} className="p-1.5 bg-bg-modal border border-border-color shadow-sm hover:border-orange-500 hover:text-orange-500 rounded-lg text-text-muted transition-all hover-lift" title="Pause">
|
||||
<Pause size={14} fill="currentColor" />
|
||||
</button>
|
||||
)}
|
||||
{d.status === 'paused' && (
|
||||
<button onClick={() => handleResume(d)} className="p-1 bg-[#2A2B2D] border border-[#3f3f3f] hover:bg-[#3f3f3f] rounded text-green-400 transition-colors" title="Resume">
|
||||
<button onClick={() => handleResume(d)} className="p-1.5 bg-bg-modal border border-border-color shadow-sm hover:border-green-500 hover:text-green-500 rounded-lg text-text-muted transition-all hover-lift" title="Resume">
|
||||
<Play size={14} fill="currentColor" />
|
||||
</button>
|
||||
)}
|
||||
@@ -256,18 +247,18 @@ export const DownloadTable: React.FC<DownloadTableProps> = ({ filter }) => {
|
||||
e.stopPropagation();
|
||||
setContextMenu({ x: e.clientX, y: e.clientY, id: d.id });
|
||||
}}
|
||||
className="p-1 bg-[#2A2B2D] border border-[#3f3f3f] hover:bg-[#3f3f3f] rounded text-text-muted hover:text-text-primary transition-colors"
|
||||
className="p-1.5 bg-bg-modal border border-border-color shadow-sm hover:border-accent hover:text-accent rounded-lg text-text-muted transition-all hover-lift"
|
||||
>
|
||||
<MoreVertical size={14} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Floating Context Menu */}
|
||||
|
||||
@@ -2,11 +2,12 @@ import { useState, useEffect } from 'react';
|
||||
import { SettingsTab, useSettingsStore } from '../store/useSettingsStore';
|
||||
import {
|
||||
Download, Palette, Globe, Folder, Key,
|
||||
Moon, Terminal, Puzzle, Info, Plus, Trash2, Copy, RefreshCw
|
||||
Moon, Terminal, Puzzle, Info, Plus, Trash2, Copy, RefreshCw, Code
|
||||
} from 'lucide-react';
|
||||
import { open } from '@tauri-apps/plugin-dialog';
|
||||
import { invoke } from '@tauri-apps/api/core';
|
||||
import { WindowDragRegion } from './WindowDragRegion';
|
||||
import appIcon from '../assets/app-icon.png';
|
||||
|
||||
const settingsTabs: { type: SettingsTab; label: string; icon: typeof Download }[] = [
|
||||
{ type: 'downloads', label: 'Downloads', icon: Download },
|
||||
@@ -793,24 +794,72 @@ export default function SettingsView() {
|
||||
|
||||
{/* About Pane */}
|
||||
{activeTab === 'about' && (
|
||||
<div className="space-y-6 max-w-md mx-auto text-center py-6">
|
||||
<div className="w-16 h-16 bg-accent text-white font-extrabold text-2xl flex items-center justify-center rounded-2xl mx-auto shadow-lg shadow-accent/20">
|
||||
FL
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-lg font-bold text-text-primary">Firelink Desktop</h3>
|
||||
<p className="text-text-secondary text-sm">Version 0.8.0-rewrite (Tauri v2)</p>
|
||||
<p className="text-text-muted text-xs leading-relaxed max-w-sm mx-auto">
|
||||
A high-speed, cross-platform download engine rebuilt in Rust, React, and Tailwind, replicating the premium SwiftUI native look.
|
||||
</p>
|
||||
<div className="space-y-6 max-w-[720px]">
|
||||
{/* Header Box */}
|
||||
<div className="bg-bg-modal border border-border-modal/40 rounded-xl p-6 flex items-center gap-4">
|
||||
<img src={appIcon} alt="Firelink Icon" className="w-[72px] h-[72px] drop-shadow-md rounded-xl" />
|
||||
<div className="space-y-1">
|
||||
<h3 className="text-[17px] font-bold text-text-primary">Firelink</h3>
|
||||
<p className="text-text-secondary text-[12px] font-medium">Version 0.7.3</p>
|
||||
<p className="text-text-muted text-[11px]">
|
||||
A native macOS download manager for fast, organized, segmented transfers.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-border-color/30 pt-4 flex justify-center gap-4 text-xs text-accent">
|
||||
<a href="https://github.com/nimbold/Firelink" target="_blank" rel="noreferrer" className="hover:underline">GitHub Repository</a>
|
||||
<span>•</span>
|
||||
<a href="https://github.com/nimbold/Firelink/issues" target="_blank" rel="noreferrer" className="hover:underline">Report Issues</a>
|
||||
{/* Updates Section */}
|
||||
<div className="space-y-2">
|
||||
<h4 className="text-[12px] font-bold text-text-primary px-1">Updates</h4>
|
||||
<div className="bg-bg-modal border border-border-modal/40 rounded-xl overflow-hidden">
|
||||
<div className="p-4 flex items-center justify-between border-b border-border-modal/40">
|
||||
<div>
|
||||
<p className="text-[13px] font-bold text-text-primary">Check for Updates</p>
|
||||
<p className="text-text-muted text-[11px] mt-0.5">Firelink checks GitHub Releases for new versions.</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => {
|
||||
showToast("Checking for updates...");
|
||||
invoke('check_for_updates').then((res: any) => {
|
||||
if (res === "Up to date.") showToast("Firelink is up to date");
|
||||
else showToast(res);
|
||||
}).catch((e) => showToast(String(e)));
|
||||
}}
|
||||
className="bg-item-hover hover:bg-item-hover/80 text-text-primary px-4 py-1.5 rounded-lg text-xs font-semibold border border-border-modal/50 transition-colors"
|
||||
>
|
||||
Check Now
|
||||
</button>
|
||||
</div>
|
||||
<label className="p-4 flex items-center justify-between cursor-default">
|
||||
<span className="text-[13px] font-bold text-text-primary">Automatically check for updates</span>
|
||||
<button
|
||||
type="button"
|
||||
role="switch"
|
||||
aria-checked={settings.autoCheckUpdates}
|
||||
onClick={() => settings.setAutoCheckUpdates(!settings.autoCheckUpdates)}
|
||||
className={`relative inline-flex h-5 w-9 shrink-0 cursor-default items-center rounded-full transition-colors duration-200 ease-in-out border border-transparent ${settings.autoCheckUpdates ? 'bg-accent' : 'bg-border-color'}`}
|
||||
>
|
||||
<span className={`pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow transition duration-200 ease-in-out ${settings.autoCheckUpdates ? 'translate-x-4' : 'translate-x-0'}`} />
|
||||
</button>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Credits Footer */}
|
||||
<div className="bg-bg-modal border border-border-modal/40 rounded-xl p-4 text-[11px] space-y-3">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-text-primary font-bold">Created by NimBold</span>
|
||||
<a href="https://github.com/nimbold/Firelink" target="_blank" rel="noreferrer" className="flex items-center gap-1.5 text-text-secondary hover:text-accent transition-colors font-medium">
|
||||
<Code size={14} /> Source Code
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex justify-between items-center text-text-muted">
|
||||
<span>Powered by <span className="text-accent">aria2</span> • <span className="text-accent">yt-dlp</span> • <span className="text-accent">ffmpeg</span> • <span className="text-accent">Deno</span></span>
|
||||
<a href="https://github.com/nimbold/Firelink/blob/main/LICENSE" target="_blank" rel="noreferrer" className="text-accent hover:underline">MIT License</a>
|
||||
</div>
|
||||
<div className="text-text-muted pt-1 border-t border-border-modal/40">
|
||||
Copyright © 2026 NimBold. All rights reserved.
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-[10px] text-text-muted pt-2">© 2026 Firelink Project. Released under the MIT License.</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
@@ -63,18 +63,18 @@ export const Sidebar: React.FC<SidebarProps> = (props) => {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className={`group flex w-full items-center px-2.5 py-1.5 rounded-lg text-[13px] text-left cursor-default transition-colors mb-0.5 ${
|
||||
className={`group flex w-full items-center px-3 py-1.5 rounded-[10px] text-[13px] text-left cursor-default transition-all duration-200 hover-lift mb-1 ${
|
||||
isSelected
|
||||
? 'bg-accent text-white font-medium'
|
||||
: 'text-text-primary hover:bg-item-hover'
|
||||
? 'bg-accent text-white font-medium shadow-sm shadow-accent/20 scale-[0.98]'
|
||||
: 'text-text-primary hover:bg-item-hover hover:text-text-primary'
|
||||
}`}
|
||||
onClick={() => onSelectFilter(filter)}
|
||||
>
|
||||
<Icon className={`w-4 h-4 mr-2 ${isSelected ? 'text-white' : 'text-text-secondary'}`} strokeWidth={isSelected ? 2.25 : 2} />
|
||||
<Icon className={`w-4 h-4 mr-2.5 transition-colors ${isSelected ? 'text-white' : 'text-text-secondary group-hover:text-accent'}`} strokeWidth={isSelected ? 2.5 : 2} />
|
||||
<span className="truncate">{label}</span>
|
||||
{getCount(filter) > 0 && (
|
||||
<span className={`ml-auto min-w-5 px-1.5 py-0.5 rounded-full text-center text-[10px] leading-none font-semibold ${
|
||||
isSelected ? 'bg-black/20 text-white' : 'bg-item-hover text-text-secondary'
|
||||
<span className={`ml-auto min-w-5 px-1.5 py-0.5 rounded-full text-center text-[10px] leading-none font-semibold transition-colors ${
|
||||
isSelected ? 'bg-black/20 text-white' : 'bg-item-hover text-text-secondary group-hover:bg-item-hover'
|
||||
}`}>
|
||||
{getCount(filter)}
|
||||
</span>
|
||||
@@ -132,17 +132,17 @@ export const Sidebar: React.FC<SidebarProps> = (props) => {
|
||||
type="button"
|
||||
onContextMenu={e => handleQueueContextMenu(e, queue.id)}
|
||||
onClick={() => onSelectFilter(filterId)}
|
||||
className={`group flex w-full items-center px-2.5 py-1.5 rounded-lg text-[13px] text-left cursor-default transition-colors mb-0.5 ${
|
||||
className={`group flex w-full items-center px-3 py-1.5 rounded-[10px] text-[13px] text-left cursor-default transition-all duration-200 hover-lift mb-1 ${
|
||||
isSelected
|
||||
? 'bg-accent text-white font-medium'
|
||||
: 'text-text-primary hover:bg-item-hover'
|
||||
? 'bg-accent text-white font-medium shadow-sm shadow-accent/20 scale-[0.98]'
|
||||
: 'text-text-primary hover:bg-item-hover hover:text-text-primary'
|
||||
}`}
|
||||
>
|
||||
<List className={`w-4 h-4 mr-2 shrink-0 ${isSelected ? 'text-white' : 'text-text-secondary'}`} strokeWidth={isSelected ? 2.25 : 2} />
|
||||
<List className={`w-4 h-4 mr-2.5 shrink-0 transition-colors ${isSelected ? 'text-white' : 'text-text-secondary group-hover:text-accent'}`} strokeWidth={isSelected ? 2.5 : 2} />
|
||||
<span className="truncate">{queue.name}</span>
|
||||
{getCount(filterId) > 0 && (
|
||||
<span className={`ml-auto min-w-5 px-1.5 py-0.5 rounded-full text-center text-[10px] leading-none font-semibold shrink-0 ${
|
||||
isSelected ? 'bg-black/20 text-white' : 'bg-item-hover text-text-secondary'
|
||||
<span className={`ml-auto min-w-5 px-1.5 py-0.5 rounded-full text-center text-[10px] leading-none font-semibold shrink-0 transition-colors ${
|
||||
isSelected ? 'bg-black/20 text-white' : 'bg-item-hover text-text-secondary group-hover:bg-item-hover'
|
||||
}`}>
|
||||
{getCount(filterId)}
|
||||
</span>
|
||||
@@ -157,11 +157,11 @@ export const Sidebar: React.FC<SidebarProps> = (props) => {
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setActiveView(view)}
|
||||
className={`flex w-full items-center px-2.5 py-1.5 rounded-lg text-[13px] text-left cursor-default transition-colors mb-0.5 ${
|
||||
isSelected ? 'bg-accent text-white font-medium' : 'text-text-primary hover:bg-item-hover'
|
||||
className={`group flex w-full items-center px-3 py-1.5 rounded-[10px] text-[13px] text-left cursor-default transition-all duration-200 hover-lift mb-1 ${
|
||||
isSelected ? 'bg-accent text-white font-medium shadow-sm shadow-accent/20 scale-[0.98]' : 'text-text-primary hover:bg-item-hover hover:text-text-primary'
|
||||
}`}
|
||||
>
|
||||
<Icon className={`w-4 h-4 mr-2 ${isSelected ? 'text-white' : 'text-text-secondary'}`} strokeWidth={isSelected ? 2.25 : 2} />
|
||||
<Icon className={`w-4 h-4 mr-2.5 transition-colors ${isSelected ? 'text-white' : 'text-text-secondary group-hover:text-accent'}`} strokeWidth={isSelected ? 2.5 : 2} />
|
||||
<span>{label}</span>
|
||||
</button>
|
||||
);
|
||||
@@ -170,17 +170,17 @@ export const Sidebar: React.FC<SidebarProps> = (props) => {
|
||||
return (
|
||||
<aside className="w-full h-full flex flex-col relative shrink-0">
|
||||
<WindowDragRegion />
|
||||
<div className="overflow-y-auto flex-1 px-2 pb-3">
|
||||
<section className="mb-4">
|
||||
<div className="text-[11px] font-semibold text-text-muted px-2.5 mb-1.5">Library</div>
|
||||
<div className="overflow-y-auto flex-1 px-3 pb-3">
|
||||
<section className="mb-5">
|
||||
<div className="text-[11px] font-bold tracking-wider text-text-muted/70 uppercase px-3 mb-2">Library</div>
|
||||
<NavItem icon={Inbox} label="All" filter="all" />
|
||||
<NavItem icon={Zap} label="Active" filter="active" />
|
||||
<NavItem icon={CheckCircle2} label="Completed" filter="completed" />
|
||||
<NavItem icon={CircleDashed} label="Unfinished" filter="unfinished" />
|
||||
</section>
|
||||
|
||||
<section className="mb-4">
|
||||
<div className="text-[11px] font-semibold text-text-muted px-2.5 mb-1.5">Folders</div>
|
||||
<section className="mb-5">
|
||||
<div className="text-[11px] font-bold tracking-wider text-text-muted/70 uppercase px-3 mb-2">Folders</div>
|
||||
<NavItem icon={Music} label="Musics" filter="Musics" />
|
||||
<NavItem icon={Film} label="Movies" filter="Movies" />
|
||||
<NavItem icon={Archive} label="Compressed" filter="Compressed" />
|
||||
@@ -190,8 +190,8 @@ export const Sidebar: React.FC<SidebarProps> = (props) => {
|
||||
<NavItem icon={FileQuestion} label="Other" filter="Other" />
|
||||
</section>
|
||||
|
||||
<section className="mb-4">
|
||||
<div className="text-[11px] font-semibold text-text-muted px-2.5 mb-1.5">Queues</div>
|
||||
<section className="mb-5">
|
||||
<div className="text-[11px] font-bold tracking-wider text-text-muted/70 uppercase px-3 mb-2">Queues</div>
|
||||
{queues.map(queue => (
|
||||
<QueueItem key={queue.id} queue={queue} />
|
||||
))}
|
||||
@@ -224,8 +224,8 @@ export const Sidebar: React.FC<SidebarProps> = (props) => {
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div className="text-[11px] font-semibold text-text-muted px-2.5 mb-1.5">Tools</div>
|
||||
<section className="mt-auto pt-4 border-t border-border-color/30">
|
||||
<div className="text-[11px] font-bold tracking-wider text-text-muted/70 uppercase px-3 mb-2">Tools</div>
|
||||
<ToolItem icon={CalendarClock} label="Scheduler" view="scheduler" />
|
||||
<ToolItem icon={Gauge} label="Speed Limiter" view="speedLimiter" />
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user