From 7c81548320545062da70f257ff8e5a40c7d8da63 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Mon, 4 Mar 2024 14:36:47 +0800
Subject: [PATCH] Help section for Catch-up

---
 src/pages/catchup.css | 12 ++++++++++++
 src/pages/catchup.jsx | 43 +++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 53 insertions(+), 2 deletions(-)

diff --git a/src/pages/catchup.css b/src/pages/catchup.css
index ab03f43f..76e4b1ce 100644
--- a/src/pages/catchup.css
+++ b/src/pages/catchup.css
@@ -980,3 +980,15 @@
     text-align: center;
   }
 }
+
+#catchup-help-sheet {
+  dl {
+    dt {
+      font-weight: bold;
+    }
+    dd {
+      margin-block-end: 1em;
+      margin-inline: 1em;
+    }
+  }
+}
diff --git a/src/pages/catchup.jsx b/src/pages/catchup.jsx
index 9b1d5b62..d7a7fba7 100644
--- a/src/pages/catchup.jsx
+++ b/src/pages/catchup.jsx
@@ -22,6 +22,7 @@ import Avatar from '../components/avatar';
 import Icon from '../components/icon';
 import Link from '../components/link';
 import Loader from '../components/loader';
+import Modal from '../components/modal';
 import NameText from '../components/name-text';
 import NavMenu from '../components/nav-menu';
 import RelativeTime from '../components/relative-time';
@@ -602,6 +603,8 @@ function Catchup() {
     };
   }, [selectedAuthor, authors]);
 
+  const [showHelp, setShowHelp] = useState(false);
+
   return (
     <div
       ref={scrollableRef}
@@ -641,10 +644,10 @@ function Catchup() {
                   type="button"
                   class="plain"
                   onClick={() => {
-                    setSearchParams({});
+                    setShowHelp(true);
                   }}
                 >
-                  Start over
+                  Help
                 </button>
               )}
             </div>
@@ -1215,6 +1218,42 @@ function Catchup() {
           )}
         </main>
       </div>
+      {showHelp && (
+        <Modal onClose={() => setShowHelp(false)}>
+          <div class="sheet" id="catchup-help-sheet">
+            <button
+              type="button"
+              class="sheet-close"
+              onClick={() => setShowHelp(false)}
+            >
+              <Icon icon="x" />
+            </button>
+            <header>
+              <h2>Help</h2>
+            </header>
+            <main>
+              <dl>
+                <dt>Top links</dt>
+                <dd>
+                  Links shared by followings, sorted by shared counts, boosts
+                  and likes.
+                </dd>
+                <dt>Sort: Density</dt>
+                <dd>
+                  Posts are sorted by information density or depth. Shorter
+                  posts are "lighter" while longer posts are "heavier". Posts
+                  with photos are "heavier" than posts without photos.
+                </dd>
+                <dt>Group: Authors</dt>
+                <dd>
+                  Posts are grouped by authors, sorted by posts count per
+                  author.
+                </dd>
+              </dl>
+            </main>
+          </div>
+        </Modal>
+      )}
     </div>
   );
 }