diff --git a/src/App.tsx b/src/App.tsx index 778c19d..17c5567 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -3,6 +3,9 @@ import { schedulerCompletionState } from './utils/schedulerCompletion'; import { lazy, Suspense, useCallback, useEffect, useRef, useState } from "react"; import { Sidebar, SidebarFilter } from "./components/Sidebar"; import { DownloadTable, type DownloadTableStatusSummary } from "./components/DownloadTable"; +// Keep the primary Add action eager so the modal cannot disappear behind a +// null Suspense fallback while its development chunk is being transformed. +import { AddDownloadsModal } from './components/AddDownloadsModal'; import { KeychainPermissionModal } from './components/KeychainPermissionModal'; import { extractValidDownloadUrls } from './utils/url'; import { readClipboardDownloadUrls } from './utils/clipboard'; @@ -45,9 +48,6 @@ const SettingsView = lazy(loadSettingsView); const SchedulerView = lazy(loadSchedulerView); const SpeedLimiterView = lazy(loadSpeedLimiterView); const LogsView = lazy(loadLogsView); -const AddDownloadsModal = lazy(() => import('./components/AddDownloadsModal').then(module => ({ - default: module.AddDownloadsModal, -}))); const PropertiesModal = lazy(() => import('./components/PropertiesModal').then(module => ({ default: module.PropertiesModal, }))); @@ -1113,8 +1113,9 @@ function App() { + {isAddModalOpen && } + - {isAddModalOpen && } {selectedPropertiesDownloadId !== null && } {isDeleteModalOpen && } {showKeychainModal && } diff --git a/src/index.css b/src/index.css index b924825..8f40b18 100644 --- a/src/index.css +++ b/src/index.css @@ -11,7 +11,7 @@ --item-hover: 0 0% 0% / 0.05; --item-selected: 211 100% 50%; --accent-color: 211 100% 50%; - --stripe-bg: 0 0% 0% / 0.04; + --stripe-bg: 0 0% 0% / 0.035; --text-primary: 0 0% 10%; --text-secondary: 0 0% 40%; @@ -54,7 +54,7 @@ --item-hover: 0 0% 0% / 0.05; --item-selected: 211 100% 50%; --accent-color: 211 100% 50%; - --stripe-bg: 0 0% 0% / 0.04; + --stripe-bg: 0 0% 0% / 0.035; --text-primary: 0 0% 10%; --text-secondary: 0 0% 40%; --text-muted: 0 0% 55%; @@ -84,7 +84,7 @@ --item-hover: 0 0% 100% / 0.07; --item-selected: 211 100% 56%; --accent-color: 211 100% 56%; - --stripe-bg: 0 0% 100% / 0.04; + --stripe-bg: 0 0% 100% / 0.025; --text-primary: 0 0% 91%; --text-secondary: 0 0% 75%; --text-muted: 0 0% 50%; @@ -128,7 +128,7 @@ --item-hover: 326 100% 74% / 0.10; --item-selected: 326 100% 74%; --accent-color: 326 100% 74%; - --stripe-bg: 0 0% 100% / 0.04; + --stripe-bg: 0 0% 100% / 0.025; --text-primary: 60 30% 96%; --text-secondary: 228 14% 74%; --text-muted: 229 12% 58%; @@ -172,7 +172,7 @@ --item-hover: 193 43% 67% / 0.12; --item-selected: 193 43% 67%; --accent-color: 193 43% 67%; - --stripe-bg: 0 0% 100% / 0.04; + --stripe-bg: 0 0% 100% / 0.025; --text-primary: 218 27% 92%; --text-secondary: 219 28% 80%; --text-muted: 218 17% 63%; @@ -498,8 +498,9 @@ html[data-list-density="relaxed"] { } .app-modal-backdrop { - background: hsl(0 0% 0% / 0.2); - animation: fade-in 150ms ease-out; + /* Keep the scrim animation from applying opacity to the modal subtree. */ + background-color: hsl(0 0% 0% / 0.2); + animation: modal-backdrop-in 150ms ease-out; overflow: auto; padding: 16px; } @@ -2327,13 +2328,11 @@ html[data-list-density="relaxed"] .download-ghost-row { padding-inline: 8px; } -.download-row.is-selected, .download-row.is-selected .download-row-motion { background: hsl(var(--accent-color) / 0.26) !important; box-shadow: inset 0 0 0 1px hsl(var(--accent-color) / 0.28); } -.download-row.is-selected:hover, .download-row.is-selected:hover .download-row-motion { background: hsl(var(--accent-color) / 0.32) !important; } @@ -2353,7 +2352,6 @@ html[data-list-density="relaxed"] .download-ghost-row { cursor: grabbing; } -.download-table-list-content > .download-row:nth-child(even), .download-table-list-content > .download-row:nth-child(even) .download-row-motion { background: hsl(var(--stripe-bg)); } @@ -2368,7 +2366,6 @@ body.is-queue-dragging * { outline-offset: -1px; } -.download-row:hover, .download-row:hover .download-row-motion { background: hsl(var(--item-hover)); } @@ -2845,6 +2842,11 @@ html[dir="rtl"] .download-context-menu-chevron { to { opacity: 1; } } +@keyframes modal-backdrop-in { + from { background-color: hsl(0 0% 0% / 0); } + to { background-color: hsl(0 0% 0% / 0.2); } +} + @keyframes pulse-progress { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; }