release: publish v2.0.19 sidebar interaction fixes

Restore the shared sliding-selection transition after React StrictMode effect restarts, disable redundant service filters, add regression coverage, and update the public English changelog and package metadata for v2.0.19.

src/renderer/ui/SlidingSelection.tsx

@@ -25,9 +25,22 @@ export function scheduleSelectionLayout(
   return requestFrame(apply);
 }
 
+export function scheduleSelectionTransitions(
+  enabled: boolean,
+  frame: number,
+  enable: () => void,
+  requestFrame: (callback: FrameRequestCallback) => number = requestAnimationFrame,
+  cancelFrame: (frame: number) => void = cancelAnimationFrame
+): number {
+  if (enabled) return frame;
+  if (frame) cancelFrame(frame);
+  return requestFrame(enable);
+}
+
 export function SlidingSelection({ activeKey, as = "div", axis, children, className = "", ...attributes }: SlidingSelectionProps): ReactElement {
   const ref = useRef<HTMLElement>(null);
   const hasPositionRef = useRef(false);
+  const transitionsEnabledRef = useRef(false);
 
   useSelectionLayoutEffect(() => {
     const element = ref.current;
@@ -50,11 +63,12 @@ export function SlidingSelection({ activeKey, as = "div", axis, children, classN
       hasPositionRef.current = true;
     };
     const sync = (): void => {
-      if (!hasPositionRef.current) {
-        transitionFrame = scheduleSelectionLayout(false, transitionFrame, applyLayout, requestAnimationFrame, cancelAnimationFrame, () => {
-          if (hasPositionRef.current) {
-            element.style.setProperty("--ui-sliding-selection-duration", "420ms");
-          }
+      if (!hasPositionRef.current || !transitionsEnabledRef.current) {
+        applyLayout();
+        transitionFrame = scheduleSelectionTransitions(transitionsEnabledRef.current, transitionFrame, () => {
+          if (!hasPositionRef.current) return;
+          transitionsEnabledRef.current = true;
+          element.style.setProperty("--ui-sliding-selection-duration", "420ms");
         });
         return;
       }

src/renderer/views/downloads/DownloadsView.tsx

@@ -88,7 +88,7 @@ export function DownloadsSidebar({ actions, model }: { actions: DownloadsViewAct
       <SlidingSelection activeKey={model.filter} aria-label="Downloadfilter" as="nav" axis="vertical">
         {filters.map((filter) => <button className={model.filter === filter.id ? "is-active" : ""} data-sliding-selection-active={model.filter === filter.id} data-sliding-selection-item="true" key={filter.id} onClick={() => actions.onFilterChange(filter.id)} type="button"><span>{filter.label}</span><b>{model.counts[filter.id]}</b></button>)}
       </SlidingSelection>
-      <label className="downloads-provider-filter"><span>Service</span><select aria-label="Service filtern" onChange={(event) => actions.onProviderFilterChange(event.target.value)} value={model.providerFilter}><option value="all">Alle Services</option>{model.providerOptions.map((provider) => <option key={provider.id} value={provider.id}>{provider.label}</option>)}</select></label>
+      <label className="downloads-provider-filter"><span>Service</span><select aria-label="Service filtern" disabled={model.providerOptions.length <= 1} onChange={(event) => actions.onProviderFilterChange(event.target.value)} value={model.providerFilter}><option value="all">Alle Services</option>{model.providerOptions.map((provider) => <option key={provider.id} value={provider.id}>{provider.label}</option>)}</select></label>
       <label className="downloads-sidebar-search"><span>Downloads durchsuchen</span><input className="downloads-search-input" onChange={(event) => actions.onQueryChange(event.target.value)} placeholder="Paket, Datei oder Service" type="search" value={model.query} /></label>
       <div className="downloads-sidebar-actions">
         <button onClick={actions.onToggleAllPackages} type="button">Alle ein-/ausklappen</button>