refactor(sidebar): H2 — extract 5 hooks + 5 sub-components (#664)

* refactor(sidebar): H2.1 — extract helpers + constants

* refactor(sidebar): H2.2 — extract useSidebarNewReleasesUnread hook

* refactor(sidebar): H2.3 — extract useSidebarNavDnd hook

* refactor(sidebar): H2.4 — extract 3 hooks (LibraryDropdown + ScrollVisible + PerfProbe)

* refactor(sidebar): H2.5 — extract SidebarPerfProbeModal component

* refactor(sidebar): H2.5–H2.8 — split JSX into per-block components

Sidebar.tsx 938 → 271 LOC. All resulting files under the 400-LOC guideline:
  components/sidebar/SidebarLibraryPicker.tsx       96
  components/sidebar/SidebarActiveJobs.tsx          58
  components/sidebar/SidebarNavBody.tsx            293
  components/sidebar/SidebarPerfProbeModal.tsx     259
  components/sidebar/SidebarPerfProbePhase2.tsx    176

src/components/sidebar/SidebarActiveJobs.tsx

@@ -0,0 +1,58 @@
+import { useTranslation } from 'react-i18next';
+import { HardDriveDownload, HardDriveUpload, X } from 'lucide-react';
+
+interface Props {
+  isCollapsed: boolean;
+  activeJobsCount: number;
+  cancelAllDownloads: () => void;
+  isSyncing: boolean;
+  syncJobDone: number;
+  syncJobSkip: number;
+  syncJobFail: number;
+  syncJobTotal: number;
+}
+
+export default function SidebarActiveJobs({
+  isCollapsed, activeJobsCount, cancelAllDownloads,
+  isSyncing, syncJobDone, syncJobSkip, syncJobFail, syncJobTotal,
+}: Props) {
+  const { t } = useTranslation();
+  return (
+    <>
+      {activeJobsCount > 0 && (
+        <div
+          className={`sidebar-offline-queue ${isCollapsed ? 'sidebar-offline-queue--collapsed' : ''}`}
+          data-tooltip={isCollapsed ? t('sidebar.downloadingTracks', { n: activeJobsCount }) : undefined}
+          data-tooltip-pos="right"
+        >
+          <HardDriveDownload size={isCollapsed ? 18 : 14} className="spin-slow" />
+          {!isCollapsed && (
+            <span>{t('sidebar.downloadingTracks', { n: activeJobsCount })}</span>
+          )}
+          <button
+            className="sidebar-offline-cancel"
+            onClick={cancelAllDownloads}
+            data-tooltip={t('sidebar.cancelDownload')}
+            data-tooltip-pos="right"
+            aria-label={t('sidebar.cancelDownload')}
+          >
+            <X size={12} />
+          </button>
+        </div>
+      )}
+
+      {isSyncing && (
+        <div
+          className={`sidebar-offline-queue sidebar-sync-queue ${isCollapsed ? 'sidebar-offline-queue--collapsed' : ''}`}
+          data-tooltip={isCollapsed ? t('sidebar.syncingTracks', { done: syncJobDone + syncJobSkip + syncJobFail, total: syncJobTotal }) : undefined}
+          data-tooltip-pos="right"
+        >
+          <HardDriveUpload size={isCollapsed ? 18 : 14} className="spin-slow" />
+          {!isCollapsed && (
+            <span>{t('sidebar.syncingTracks', { done: syncJobDone + syncJobSkip + syncJobFail, total: syncJobTotal })}</span>
+          )}
+        </div>
+      )}
+    </>
+  );
+}