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; }