Fix: specify color-scheme meta for darkreader (#5819)

docs/widgets/services/qbittorrent.md

@@ -16,4 +16,5 @@ widget:
   username: username
   password: password
   enableLeechProgress: true # optional, defaults to false
+  enableLeechSize: true # optional, defaults to false
 ```

src/components/widgets/queue/queueEntry.jsx

@@ -1,4 +1,4 @@
-export default function QueueEntry({ title, activity, timeLeft, progress }) {
+export default function QueueEntry({ title, activity, timeLeft, progress, size }) {
   return (
     <div className="text-theme-700 dark:text-theme-200 relative h-5 rounded-md bg-theme-200/50 dark:bg-theme-900/20 m-1 px-1 flex">
       <div
@@ -11,6 +11,7 @@ export default function QueueEntry({ title, activity, timeLeft, progress }) {
         <div className="absolute w-full whitespace-nowrap text-ellipsis overflow-hidden text-left">{title}</div>
       </div>
       <div className="self-center text-xs flex justify-end mr-1.5 pl-1 z-10 text-ellipsis overflow-hidden whitespace-nowrap">
+        {size && `${size} - `}
         {timeLeft ? `${activity} - ${timeLeft}` : activity}
       </div>
     </div>

src/pages/index.jsx

@@ -417,6 +417,7 @@ function Home({ initialSettings }) {
         )}
         <meta name="msapplication-TileColor" content={themes[settings.color || "slate"][settings.theme || "dark"]} />
         <meta name="theme-color" content={themes[settings.color || "slate"][settings.theme || "dark"]} />
+        <meta name="color-scheme" content="dark light"></meta>
       </Head>
 
       <Script src="/api/config/custom.js" />

src/utils/config/service-helpers.js

@@ -284,6 +284,7 @@ export function cleanServiceGroups(groups) {
 
           // deluge, qbittorrent
           enableLeechProgress,
+          enableLeechSize,
 
           // diskstation
           volume,
@@ -493,6 +494,7 @@ export function cleanServiceGroups(groups) {
         }
         if (["deluge", "qbittorrent"].includes(type)) {
           if (enableLeechProgress !== undefined) widget.enableLeechProgress = JSON.parse(enableLeechProgress);
+          if (enableLeechSize !== undefined) widget.enableLeechSize = JSON.parse(enableLeechSize);
         }
         if (["opnsense", "pfsense"].includes(type)) {
           if (wan) widget.wan = wan;

src/widgets/qbittorrent/component.jsx

@@ -80,6 +80,11 @@ export default function Component({ service }) {
             timeLeft={t("common.duration", { value: queueEntry.eta })}
             title={queueEntry.name}
             activity={queueEntry.state}
+            size={
+              widget?.enableLeechSize
+                ? t("common.bbytes", { value: queueEntry.size, maximumFractionDigits: 1 })
+                : undefined
+            }
             key={`${queueEntry.name}-${queueEntry.amount_left}`}
           />
         ))}