mirror of
https://github.com/nimbold/Firelink.git
synced 2026-08-06 09:30:29 +00:00
feat(ui): modernize toasts, enhance button feedback, and restructure layouts
- Add global scale-down animation to button active states for tactile feedback - Reposition toast notifications to bottom-center with updated modern styling - Split 'Start Downloads' and 'Add to...' actions in AddDownloadsModal - Overhaul Category Subfolders layout in SettingsView using flexbox for better alignment
This commit is contained in:
NimBold
@@ -1112,62 +1112,75 @@ export const AddDownloadsModal = () => {
|
||||
<button onClick={() => toggleAddModal(false)} className="add-download-button add-download-button-cancel px-4 text-xs">
|
||||
Cancel
|
||||
</button>
|
||||
<div ref={actionMenuRef} className="relative flex">
|
||||
<div ref={actionMenuRef} className="relative flex gap-2.5">
|
||||
<button
|
||||
onClick={() => handleAction({ type: 'start-now' })}
|
||||
disabled={parsedItems.length === 0}
|
||||
className="add-download-button add-download-button-primary rounded-r-none px-5 text-xs"
|
||||
className="add-download-button add-download-button-primary px-5 text-xs"
|
||||
>
|
||||
<Play size={12} fill="currentColor" /> Start Downloads
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsActionMenuOpen(open => !open)}
|
||||
disabled={parsedItems.length === 0}
|
||||
className="add-download-button add-download-button-primary rounded-l-none border-l border-white/20 px-2 text-xs"
|
||||
aria-label="More add actions"
|
||||
aria-haspopup="menu"
|
||||
aria-expanded={isActionMenuOpen}
|
||||
>
|
||||
<ChevronDown size={14} />
|
||||
</button>
|
||||
{isActionMenuOpen && (
|
||||
<div
|
||||
role="menu"
|
||||
className="app-modal absolute bottom-full right-0 z-[70] mb-2 min-w-[230px] overflow-hidden py-1.5 text-xs"
|
||||
<div className="relative">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsActionMenuOpen(open => !open)}
|
||||
disabled={parsedItems.length === 0}
|
||||
className="add-download-button add-download-button-secondary px-4 text-xs"
|
||||
aria-label="Add to..."
|
||||
aria-haspopup="menu"
|
||||
aria-expanded={isActionMenuOpen}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
role="menuitem"
|
||||
onClick={() => {
|
||||
setIsActionMenuOpen(false);
|
||||
void handleAction({ type: 'add-to-list' });
|
||||
}}
|
||||
className="flex w-full items-center gap-2 px-3 py-2 text-left hover:bg-item-hover"
|
||||
Add to... <ChevronDown size={14} className="ml-1" />
|
||||
</button>
|
||||
{isActionMenuOpen && (
|
||||
<div
|
||||
role="menu"
|
||||
className="app-modal absolute bottom-full right-0 z-[70] mb-2 min-w-[200px] overflow-visible py-1.5 text-xs"
|
||||
>
|
||||
<Rows3 size={14} />
|
||||
<span>Add to List</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
role="menuitem"
|
||||
onClick={() => {
|
||||
setIsActionMenuOpen(false);
|
||||
const queueId = queues.length === 1 ? queues[0].id : selectedQueueId;
|
||||
void handleAction({ type: 'add-to-queue', queueId });
|
||||
}}
|
||||
className="flex w-full items-center gap-2 px-3 py-2 text-left hover:bg-item-hover"
|
||||
>
|
||||
<ListPlus size={14} />
|
||||
<span className="min-w-0">
|
||||
<span className="block">Add to Queue</span>
|
||||
<span className="block truncate text-[10px] text-text-muted">
|
||||
{queues.find(queue => queue.id === (queues.length === 1 ? queues[0].id : selectedQueueId))?.name}
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
role="menuitem"
|
||||
onClick={() => {
|
||||
setIsActionMenuOpen(false);
|
||||
void handleAction({ type: 'add-to-list' });
|
||||
}}
|
||||
className="flex w-full items-center gap-2 px-3 py-2 text-left hover:bg-item-hover"
|
||||
>
|
||||
<Rows3 size={14} />
|
||||
<span>Add to List</span>
|
||||
</button>
|
||||
<div className="group relative">
|
||||
<button
|
||||
type="button"
|
||||
role="menuitem"
|
||||
className="flex w-full items-center justify-between gap-2 px-3 py-2 text-left hover:bg-item-hover"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<ListPlus size={14} />
|
||||
<span>Add to Queue</span>
|
||||
</div>
|
||||
<ChevronRight size={14} />
|
||||
</button>
|
||||
<div className="app-modal absolute bottom-0 right-[calc(100%+4px)] z-[80] hidden min-w-[160px] py-1.5 group-hover:block">
|
||||
{queues.map(queue => (
|
||||
<button
|
||||
key={queue.id}
|
||||
type="button"
|
||||
role="menuitem"
|
||||
onClick={() => {
|
||||
setIsActionMenuOpen(false);
|
||||
void handleAction({ type: 'add-to-queue', queueId: queue.id });
|
||||
}}
|
||||
className="flex w-full items-center gap-2 px-3 py-2 text-left hover:bg-item-hover"
|
||||
>
|
||||
<span className="truncate">{queue.name}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -697,46 +697,55 @@ runEngineChecks(false);
|
||||
<span className="text-[11px] text-text-muted">Relative to the base folder</span>
|
||||
</div>
|
||||
|
||||
{DOWNLOAD_CATEGORIES.map((category) => (
|
||||
<div key={category} className="mac-settings-row">
|
||||
<span className="text-[13px] text-text-primary pl-4">{category}</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={settings.categorySubfolders[category] || ''}
|
||||
onChange={(e) => settings.setCategorySubfolder(category, e.target.value)}
|
||||
onBlur={(e) => settings.setCategorySubfolder(
|
||||
category,
|
||||
normalizeCategorySubfolder(
|
||||
e.target.value,
|
||||
DEFAULT_CATEGORY_SUBFOLDERS[category]
|
||||
)
|
||||
)}
|
||||
className="app-control w-64 text-[11px] px-2"
|
||||
aria-label={`${category} subfolder`}
|
||||
/>
|
||||
<button
|
||||
onClick={() => handleBrowseCategory(category)}
|
||||
className="app-button px-3 text-xs text-text-secondary hover:bg-item-hover"
|
||||
>
|
||||
Custom folder
|
||||
</button>
|
||||
<div className="flex flex-col divide-y divide-border-color/30">
|
||||
{DOWNLOAD_CATEGORIES.map((category) => (
|
||||
<div key={category} className="flex flex-col gap-2 px-4 py-3 hover:bg-item-hover/20 transition-colors">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-[13px] font-medium text-text-primary w-32 shrink-0">{category}</span>
|
||||
<div className="flex items-center gap-2 flex-1 justify-end">
|
||||
<input
|
||||
type="text"
|
||||
value={settings.categorySubfolders[category] || ''}
|
||||
onChange={(e) => settings.setCategorySubfolder(category, e.target.value)}
|
||||
onBlur={(e) => settings.setCategorySubfolder(
|
||||
category,
|
||||
normalizeCategorySubfolder(
|
||||
e.target.value,
|
||||
DEFAULT_CATEGORY_SUBFOLDERS[category]
|
||||
)
|
||||
)}
|
||||
className="app-control flex-1 max-w-[280px] text-[12px] px-3 py-1.5 bg-surface-overlay/50 border-border-color/50 focus:border-accent-color focus:bg-surface-overlay"
|
||||
aria-label={`${category} subfolder`}
|
||||
/>
|
||||
<button
|
||||
onClick={() => handleBrowseCategory(category)}
|
||||
className="app-button px-3 py-1.5 text-xs text-text-secondary hover:text-text-primary hover:bg-surface-overlay"
|
||||
>
|
||||
Custom folder
|
||||
</button>
|
||||
{settings.categoryDirectoryOverrides[category] && (
|
||||
<button
|
||||
onClick={() => settings.setCategoryDirectoryOverride(category)}
|
||||
className="app-button px-3 py-1.5 text-xs text-text-secondary hover:text-red-400 hover:bg-red-500/10 hover:border-red-500/30"
|
||||
>
|
||||
Use automatic
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{settings.categoryDirectoryOverrides[category] && (
|
||||
<button
|
||||
onClick={() => settings.setCategoryDirectoryOverride(category)}
|
||||
className="app-button px-3 text-xs text-text-secondary hover:bg-item-hover"
|
||||
>
|
||||
Use automatic
|
||||
</button>
|
||||
<div className="flex pl-32">
|
||||
<div className="bg-surface-overlay/40 border border-border-color/30 rounded px-2 py-1 flex items-center gap-2">
|
||||
<span className="text-[10px] uppercase font-bold text-text-muted">Override</span>
|
||||
<span className="text-[11px] font-mono text-text-secondary truncate max-w-[400px]">
|
||||
{settings.categoryDirectoryOverrides[category]}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{settings.categoryDirectoryOverrides[category] && (
|
||||
<p className="col-span-full pl-4 text-[10px] text-text-muted">
|
||||
Override: {settings.categoryDirectoryOverrides[category]}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mac-settings-row justify-end border-t-0">
|
||||
<button
|
||||
|
||||
Reference in New Issue
Block a user