Desktop sidebar collapse animation stutters because it animates layout width

This was generated by AI during triage.

Agent Brief

Category: bug Summary: Collapsing or expanding the desktop app sidebar stutters, because the animation changes layout width on every frame.

Current behavior: On desktop (lg and up), AppLayout wraps Sidebar in a container with transition-all duration-300 overflow-hidden and switches it between w-0 opacity-0 and w-64 opacity-100. The width transition makes the browser lay out the whole main column, the header, and the torrent table again on each frame. The reporter sees dropped frames in the layout step on an M1 Pro, worst in WebKit (Orion), and still visible in Firefox and Chrome. It is worst on the torrents view.

Desired behavior: The sidebar toggle animates smoothly on the torrents view in WebKit, Firefox, and Chrome. The animation uses compositor-friendly properties (transform, opacity) where possible, so the browser does not lay out the page on every frame. When the animation ends, the main column fills the space next to the sidebar the same as now. The collapsed state still persists through usePersistedSidebarState, and the header toggle button still shows and hides the sidebar.

Edge cases:

• The collapsed sidebar must not take keyboard focus or pointer events.
• Mobile (below lg) uses MobileFooterNav and must not change.
• With prefers-reduced-motion, the toggle must still work.

Key interfaces:

• AppLayoutContent: the desktop sidebar wrapper and its transition classes change.
• Header (sidebarCollapsed prop): it also animates a w-0/w-10 element when the sidebar collapses; check that it stays in step with the new sidebar animation.

Acceptance criteria:

• A browser performance trace of a sidebar toggle on the torrents view shows no layout work on each animation frame, or much less layout work than before.
• After the animation, the main column takes the full width when the sidebar is collapsed, and the width minus the sidebar when it is expanded.
• The collapsed sidebar cannot be reached with Tab and does not catch clicks.
• The collapsed state persists across a reload, as now.
• Mobile layout does not change.

Out of scope:

• The filter sidebar on the torrents page (Torrents animates flex-basis in a similar way). Handle it in a separate change if the maintainer wants that.
• Changes to the content of Sidebar.

Domain:

• Glossary terms: none. The app sidebar has no GLOSSARY.md entry; that is not a gap for this fix.
• ADRs: None.
• Owner: AppLayout (desktop layout shell).

Logs:

• None

Why a human: The result is animation smoothness and look and feel, which only a manual test in real browsers (WebKit included) can confirm; jsdom does no layout. The reporter (@FifthWit) offered to contribute the fix, so the maintainer may want to wait for their pull request.

From discussion #3352