+5

src/index.css

reviewed

··· 273 273 } 274 274 } 275 275 276 276 + details:not([open]) > summary ~ * { 277 277 + /* HACK: allow JS know that this is invisible */ 278 278 + --invisible: 1; 279 279 + } 280 280 + 276 281 [tabindex='-1'] { 277 282 outline: 0; 278 283 }

+20 -2

src/pages/status.jsx

reviewed

··· 352 352 const activeStatusRect = activeStatus?.getBoundingClientRect(); 353 353 const allStatusLinks = Array.from( 354 354 scrollableRef.current.querySelectorAll('.status-link, .status-focus'), 355 355 - ); 355 355 + ).filter((s) => { 356 356 + return !getComputedStyle(s).getPropertyValue('--invisible'); 357 357 + }); 356 358 console.log({ allStatusLinks }); 357 359 if ( 358 360 activeStatus && ··· 385 387 const activeStatusRect = activeStatus?.getBoundingClientRect(); 386 388 const allStatusLinks = Array.from( 387 389 scrollableRef.current.querySelectorAll('.status-link, .status-focus'), 388 388 - ); 390 390 + ).filter((s) => { 391 391 + return !getComputedStyle(s).getPropertyValue('--invisible'); 392 392 + }); 389 393 if ( 390 394 activeStatus && 391 395 activeStatusRect.top < scrollableRef.current.clientHeight && ··· 406 410 if (topmostStatusLink) { 407 411 topmostStatusLink.focus(); 408 412 topmostStatusLink.scrollIntoViewIfNeeded?.(); 413 413 + } 414 414 + } 415 415 + }); 416 416 + 417 417 + // NOTE: I'm not sure if 'x' is the best shortcut for this, might change it later 418 418 + // IDEA: x is for expand 419 419 + useHotkeys('x', () => { 420 420 + const activeStatus = document.activeElement.closest( 421 421 + '.status-link, .status-focus', 422 422 + ); 423 423 + if (activeStatus) { 424 424 + const details = activeStatus.nextElementSibling; 425 425 + if (details && details.tagName.toLowerCase() === 'details') { 426 426 + details.open = !details.open; 409 427 } 410 428 } 411 429 });