Help section for Catch-up

This commit is contained in:
Lim Chee Aun 2024-03-04 14:36:47 +08:00
parent 8cab77415e
commit 7c81548320
2 changed files with 53 additions and 2 deletions

View file

@ -980,3 +980,15 @@
text-align: center; text-align: center;
} }
} }
#catchup-help-sheet {
dl {
dt {
font-weight: bold;
}
dd {
margin-block-end: 1em;
margin-inline: 1em;
}
}
}

View file

@ -22,6 +22,7 @@ import Avatar from '../components/avatar';
import Icon from '../components/icon'; import Icon from '../components/icon';
import Link from '../components/link'; import Link from '../components/link';
import Loader from '../components/loader'; import Loader from '../components/loader';
import Modal from '../components/modal';
import NameText from '../components/name-text'; import NameText from '../components/name-text';
import NavMenu from '../components/nav-menu'; import NavMenu from '../components/nav-menu';
import RelativeTime from '../components/relative-time'; import RelativeTime from '../components/relative-time';
@ -602,6 +603,8 @@ function Catchup() {
}; };
}, [selectedAuthor, authors]); }, [selectedAuthor, authors]);
const [showHelp, setShowHelp] = useState(false);
return ( return (
<div <div
ref={scrollableRef} ref={scrollableRef}
@ -641,10 +644,10 @@ function Catchup() {
type="button" type="button"
class="plain" class="plain"
onClick={() => { onClick={() => {
setSearchParams({}); setShowHelp(true);
}} }}
> >
Start over Help
</button> </button>
)} )}
</div> </div>
@ -1215,6 +1218,42 @@ function Catchup() {
)} )}
</main> </main>
</div> </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> </div>
); );
} }