From b6136ed4ebb3ecebbaf49b095658d6951d50ea29 Mon Sep 17 00:00:00 2001
From: Daniel O'Connell <github@ahiru.pl>
Date: Wed, 25 Oct 2023 23:36:50 +0200
Subject: [PATCH] preselect question

---
 app/routes/toc.tsx | 60 ++++++++++++++++++++++++++++++++++++----------
 1 file changed, 47 insertions(+), 13 deletions(-)

diff --git a/app/routes/toc.tsx b/app/routes/toc.tsx
index 7f13129d..04e738f7 100644
--- a/app/routes/toc.tsx
+++ b/app/routes/toc.tsx
@@ -1,8 +1,8 @@
-import {useEffect, useState} from 'react'
+import {useEffect, useState, MouseEvent} from 'react'
 import {useOutletContext} from '@remix-run/react'
 import {Header, Footer} from '~/components/layouts'
 import useQuestionStateInUrl from '~/hooks/useQuestionStateInUrl'
-import {fetchQuestion, Question} from '~/routes/questions/$question'
+import {LINK_WITHOUT_DETAILS_CLS, fetchQuestion, Question} from '~/routes/questions/$question'
 import {QuestionState} from '~/server-utils/stampy'
 import type {Question as QuestionType, PageId} from '~/server-utils/stampy'
 import type {Context} from '~/root'
@@ -42,7 +42,7 @@ const ChildList = ({items, selectItem}: {items: Item[]; selectItem: (i: Item) =>
       {items.map((child, i) => {
         if (child?.items && child.items.length > 0) {
           return (
-            <details key={i} id={normalizeName(child?.content)} open>
+            <details key={i} id={normalizeName(child?.content)}>
               <summary>
                 <MaybeURL item={child} selectItem={selectItem} />
               </summary>
@@ -67,7 +67,7 @@ const ToC = ({toc, selectItem}: {toc: Item[]; selectItem: (i: Item) => void}) =>
       {toc.map((item: Item, i: number) => (
         <details key={i} open>
           <summary>
-            <span id={normalizeName(item.content)} style={{fontSize: '32px', padding: '5px'}}>
+            <span id={normalizeName(item.content)} style={{padding: '5px'}}>
               <MaybeURL item={item} selectItem={selectItem} />
             </span>
           </summary>
@@ -78,6 +78,18 @@ const ToC = ({toc, selectItem}: {toc: Item[]; selectItem: (i: Item) => void}) =>
   )
 }
 
+const showMore = (el: HTMLElement, toggle = false) => {
+  const button = el.closest('.answer')?.querySelector('.see-more')
+  if (toggle) {
+    button?.classList.toggle('visible')
+  } else {
+    button?.classList.add('visible')
+  }
+  // The AutoHeight component doesn't notice when a random <div> changes CSS class,
+  // so manually triggering toggle event (as if this was a <details> element).
+  document.dispatchEvent(new Event('toggle'))
+}
+
 export default function App() {
   const [toc, setToc] = useState<Item[]>([])
   const [loading, setLoading] = useState(false)
@@ -88,14 +100,6 @@ export default function App() {
     []
   )
 
-  useEffect(() => {
-    const fetcher = async () => {
-      const response = await fetch('/toc.json')
-      setToc(await response.json())
-    }
-    fetcher()
-  }, [])
-
   const selectItem = async (item: Item) => {
     if (!item.pageId) return
     setLoading(true)
@@ -108,13 +112,43 @@ export default function App() {
     setLoading(false)
   }
 
+  useEffect(() => {
+    const fetcher = async () => {
+      selectItem({pageId: '9OGZ'})
+      const response = await fetch('/toc.json')
+      setToc(await response.json())
+    }
+    fetcher()
+  }, [])
+
+  const handleSpecialLinks = (e: MouseEvent) => {
+    const el = e.target as HTMLAnchorElement
+    if (
+      el.tagName !== 'A' ||
+      el.closest('.question-footer') ||
+      el.classList.contains('footnote-backref') ||
+      el.classList.contains(LINK_WITHOUT_DETAILS_CLS)
+    )
+      return
+
+    if (el.classList.contains('see-more')) {
+      showMore(el, true)
+      e.preventDefault()
+      return
+    }
+    if (el.parentElement?.classList.contains('footnote-ref')) {
+      showMore(el)
+      return
+    }
+  }
+
   return (
     <>
       <style>{`
         body { max-width: 1400px; }
             `}</style>
       <Header />
-      <main className="toc-container">
+      <main className="toc-container" onClick={handleSpecialLinks}>
         <ToC toc={toc} selectItem={selectItem} />
         <div style={{flex: '5 3 auto'}}>
           <div className={`search-loader ${loading ? 'loader' : ''}`}> </div>