Fix j/k shortcuts to work with collapsed comments

Use x key to expand/collapse comments

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;
 }

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,