fix: animate outline and annotation insets with titlebar

Author: reycn

electron/sidebar-smoke.mjs

@@ -83,6 +83,15 @@ export async function verifySidebar(window,recents){
   assert.equal(await run(`(()=>{const s=document.querySelector('.sidebar'),f=s.querySelector('.sidebar-navigation-switch');return f.getBoundingClientRect().width+parseFloat(getComputedStyle(f).marginLeft)+parseFloat(getComputedStyle(f).marginRight)<=${expanded+21};})()`),true,'tab switch fits the sidebar during expansion');
   await wait(`!!document.querySelector('.sidebar')&&!document.querySelector('.sidebar-motion-enter-active')`);
   assert.ok(Math.abs((await run(`document.querySelector('.sidebar').getBoundingClientRect().width`))-expanded-20)<2,'resized sidebar width survives hide/show');
+  for(const tab of [0,1,2]){
+   await run(`document.querySelectorAll('.sidebar-navigation-switch button')[${tab}].click()`);
+   await new Promise(r=>setTimeout(r,220));
+   const motion=await run(`(async()=>{const app=document.querySelector('.app'),sidebar=document.querySelector('.sidebar');const padding=()=>parseFloat(getComputedStyle(sidebar).paddingTop);const start=padding();app.classList.add('immersive-header-hidden');await new Promise(r=>setTimeout(r,70));const middle=padding();await new Promise(r=>setTimeout(r,160));const hidden=padding();app.classList.remove('immersive-header-hidden');await new Promise(r=>setTimeout(r,70));const returning=padding();await new Promise(r=>setTimeout(r,160));return {start,middle,hidden,returning,end:padding()};})()`);
+   assert.ok(motion.start>0&&motion.middle>0&&motion.middle<motion.start,'sidebar tab '+tab+' animates while hiding header');
+   assert.equal(motion.hidden,0);
+   assert.ok(motion.returning>0&&motion.returning<motion.start,'sidebar tab '+tab+' animates while showing header');
+   assert.equal(motion.end,motion.start);
+  }
   console.log(JSON.stringify({sidebarModes:true,originalOutlinePageNavigation:true,mergedAnnotations:true,sourceCommentActivation:true,translationAnnotationNavigation:true,footerPlacement:true,thumbnailRestoration:true,outlineCollapse:true,dragAndKeyboardResize:true,fourLineCommentTrim:true,tabAnimation:true}));
  }finally{await rm(folder,{recursive:true,force:true});app.quit();}
 }

src/style.css

@@ -2091,7 +2091,11 @@ body:has(.windows-glass),.desktop.windows-glass.app {background:transparent}
 .sidebar-resize-handle{position:absolute;top:var(--toolbar-height);bottom:0;right:0;width:6px;cursor:col-resize;touch-action:none;z-index:5}
 .sidebar-resize-handle:hover,.sidebar-resize-handle:focus-visible{background:color-mix(in srgb,var(--accent) 35%,transparent);outline:none}
 
-.desktop .sidebar.sidebar-resizable{transition:none}
+/* Resizable tabs follow the header inset without animating dragged widths. */
+.desktop .sidebar.sidebar-resizable{transition:padding-top 180ms ease}
+.desktop .sidebar.sidebar-resizable.without-motion{transition:none}
+[data-reduce-motion=true] .desktop .sidebar.sidebar-resizable{transition:none}
+@media(prefers-reduced-motion:reduce){.desktop .sidebar.sidebar-resizable{transition:none}}
 
 .reference-return-actions{position:absolute;left:22px;bottom:22px;display:flex;align-items:center;gap:6px;z-index:20}
 .reference-return-actions .reference-return-button{position:static}