fix: pack multi-column pages evenly and round macOS thumbnails

Author: reycn

server/reader-layout.test.mjs

@@ -2,3 +2,10 @@ import {test} from 'node:test';import assert from 'node:assert/strict';
 import {buildReaderLayout,visibleReaderWindow,buildThumbnailLayout,visibleThumbnailWindow} from '../src/reader-layout.mjs';
 const pages=Array.from({length:1000},(_,i)=>({number:i+1,width:i%2?792:612,height:i%2?612:792}));
 test('mixed-size row geometry preserves column widths, gaps and four buffered rows',()=>{for(const columns of [1,2,4]){const layout=buildReaderLayout(pages,1,'vertical',columns),row=layout.rows[80],bounds={top:row.offset+100,bottom:row.offset+600,left:0,right:layout.width};const result=visibleReaderWindow(layout,bounds);assert.equal(result.firstRow,76);assert.equal(result.lastRow,84);assert.equal(result.numbers.length,9*columns);assert.equal(layout.frames[columns].y-layout.frames[0].height,24);assert.ok(result.visible.every(v=>v.row===80));assert.equal(layout.height,layout.rows.at(-1).offset+layout.rows.at(-1).extent);}});
+
+test('mixed orientations use a fixed horizontal gap and center each packed row',()=>{
+ const input=[{number:1,width:400,height:600},{number:2,width:400,height:600},{number:3,width:600,height:400},{number:4,width:400,height:600}];
+ const layout=buildReaderLayout(input,1,'vertical',2,24,2);
+ for(let i=0;i<4;i+=2){const left=layout.frames[i],right=layout.frames[i+1];assert.equal(right.x-left.x-left.width,24);assert.equal(left.x,layout.width-right.x-right.width);}
+ assert.equal(layout.frames[2].y-layout.frames[0].height,24);
+});

src/mac-controls.css

@@ -348,3 +348,12 @@
  box-sizing:border-box;height:36px;min-height:36px;
  border-radius:12px;corner-shape:squircle;
 }
+
+/* Match the palette's continuous corners in the macOS thumbnail rail. */
+.app[data-platform="darwin"] .sidebar .thumbnail-list .thumb,
+.app[data-platform="darwin"] .sidebar .thumbnail-highlight{
+ border-radius:18px;corner-shape:squircle;
+}
+.app[data-platform="darwin"] .sidebar .thumbnail-list .thumb canvas{
+ border-radius:10px;corner-shape:squircle;
+}

src/reader-layout.mjs

@@ -1,17 +1,19 @@
 const firstAfter=(items,value,end)=>{let low=0,high=items.length;while(low<high){const middle=(low+high)>>>1;if(end(items[middle])<=value)low=middle+1;else high=middle;}return low;};
 export function buildReaderLayout(pages,scale=1,direction='vertical',columns=1,gap=24,border=2){
- const count=direction==='horizontal'?1:columns,rows=[],frames=[],columnWidths=Array(count).fill(0);
- if(direction==='vertical')for(let i=0;i<pages.length;i++)columnWidths[i%count]=Math.max(columnWidths[i%count],pages[i].width*scale+border);
- const xs=columnWidths.map((_,i)=>columnWidths.slice(0,i).reduce((sum,w)=>sum+w+gap,0));
+ const count=direction==='horizontal'?1:columns,rows=[],frames=[];
+ const rowWidths=[];
+ if(direction==='vertical')for(let start=0;start<pages.length;start+=count){const group=pages.slice(start,start+count);rowWidths.push(group.reduce((sum,p)=>sum+p.width*scale+border,0)+Math.max(0,group.length-1)*gap);}
+ const layoutWidth=Math.max(0,...rowWidths);
  let offset=0;const height=direction==='horizontal'?pages.reduce((max,p)=>Math.max(max,p.height*scale+border),0):0;
  for(let start=0;start<pages.length;start+=count){
   const group=pages.slice(start,start+count),extent=direction==='horizontal'?group[0].width*scale+border:Math.max(...group.map(p=>p.height*scale+border));
   const row={start,end:start+group.length,offset,extent};rows.push(row);
-  for(let i=0;i<group.length;i++){const p=group[i],width=p.width*scale+border,h=p.height*scale+border;frames.push({number:p.number,row:rows.length-1,x:direction==='horizontal'?offset:xs[i],y:direction==='horizontal'?(height-h)/2:offset,width,height:h});}
+  let rowX=(layoutWidth-(rowWidths[rows.length-1]||0))/2;
+  for(let i=0;i<group.length;i++){const p=group[i],width=p.width*scale+border,h=p.height*scale+border;frames.push({number:p.number,row:rows.length-1,x:direction==='horizontal'?offset:rowX,y:direction==='horizontal'?(height-h)/2:offset,width,height:h});rowX+=width+gap;}
   offset+=extent+gap;
  }
  const length=rows.length?offset-gap:0;
- return {direction,columns:count,rows,frames,width:direction==='horizontal'?length:columnWidths.reduce((a,b)=>a+b,0)+Math.max(0,count-1)*gap,height:direction==='horizontal'?height:length};
+ return {direction,columns:count,rows,frames,width:direction==='horizontal'?length:layoutWidth,height:direction==='horizontal'?height:length};
 }
 export function visibleReaderWindow(layout,bounds,active=1,buffer=4){
  const horizontal=layout.direction==='horizontal',start=horizontal?bounds.left:bounds.top,end=horizontal?bounds.right:bounds.bottom;