From 6647b6cc284063c99f849d91def8c2c9009aed93 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 1 Feb 2023 00:10:38 +0800
Subject: [PATCH] Fix j/k shortcuts to work with collapsed comments
Use x key to expand/collapse comments
---
src/index.css | 5 +++++
src/pages/status.jsx | 22 ++++++++++++++++++++--
2 files changed, 25 insertions(+), 2 deletions(-)
diff --git a/src/index.css b/src/index.css
index 70a017af..e4b084e6 100644
--- a/src/index.css
+++ b/src/index.css
@@ -273,6 +273,11 @@ code {
}
}
+details:not([open]) > summary ~ * {
+ /* HACK: allow JS know that this is invisible */
+ --invisible: 1;
+}
+
[tabindex='-1'] {
outline: 0;
}
diff --git a/src/pages/status.jsx b/src/pages/status.jsx
index 895ff6de..ac5994ce 100644
--- a/src/pages/status.jsx
+++ b/src/pages/status.jsx
@@ -352,7 +352,9 @@ function StatusPage() {
const activeStatusRect = activeStatus?.getBoundingClientRect();
const allStatusLinks = Array.from(
scrollableRef.current.querySelectorAll('.status-link, .status-focus'),
- );
+ ).filter((s) => {
+ return !getComputedStyle(s).getPropertyValue('--invisible');
+ });
console.log({ allStatusLinks });
if (
activeStatus &&
@@ -385,7 +387,9 @@ function StatusPage() {
const activeStatusRect = activeStatus?.getBoundingClientRect();
const allStatusLinks = Array.from(
scrollableRef.current.querySelectorAll('.status-link, .status-focus'),
- );
+ ).filter((s) => {
+ return !getComputedStyle(s).getPropertyValue('--invisible');
+ });
if (
activeStatus &&
activeStatusRect.top < scrollableRef.current.clientHeight &&
@@ -410,6 +414,20 @@ function StatusPage() {
}
});
+ // NOTE: I'm not sure if 'x' is the best shortcut for this, might change it later
+ // IDEA: x is for expand
+ useHotkeys('x', () => {
+ const activeStatus = document.activeElement.closest(
+ '.status-link, .status-focus',
+ );
+ if (activeStatus) {
+ const details = activeStatus.nextElementSibling;
+ if (details && details.tagName.toLowerCase() === 'details') {
+ details.open = !details.open;
+ }
+ }
+ });
+
const { nearReachStart } = useScroll({
scrollableElement: scrollableRef.current,
distanceFromStart: 0.2,