Expose more pages now

Except one

src/app.jsx

@@ -35,6 +35,7 @@ import Following from './pages/following';
 import Hashtags from './pages/hashtags';
 import Home from './pages/home';
 import HomeV1 from './pages/home-v1';
+import List from './pages/list';
 import Lists from './pages/lists';
 import Login from './pages/login';
 import Notifications from './pages/notifications';
@@ -209,7 +210,12 @@ function App() {
         {isLoggedIn && <Route path="/homev1" element={<HomeV1 />} />}
         {isLoggedIn && <Route path="/b" element={<Bookmarks />} />}
         {isLoggedIn && <Route path="/f" element={<Favourites />} />}
-        {isLoggedIn && <Route path="/l/:id" element={<Lists />} />}
+        {isLoggedIn && (
+          <Route path="/l">
+            <Route index element={<Lists />} />
+            <Route path=":id" element={<List />} />
+          </Route>
+        )}
         <Route path="/:instance?/t/:hashtag" element={<Hashtags />} />
         <Route path="/:instance?/a/:id" element={<AccountStatuses />} />
         <Route path="/:instance?/p">

src/components/icon.jsx

@@ -49,6 +49,8 @@ const ICONS = {
   group: 'mingcute:group-line',
   bot: 'mingcute:android-2-line',
   menu: 'mingcute:rows-4-line',
+  list: 'mingcute:list-check-line',
+  search: 'mingcute:search-2-line',
 };
 
 const modules = import.meta.glob('/node_modules/@iconify-icons/mingcute/*.js');

src/components/menu.jsx

@@ -1,13 +1,18 @@
 import { FocusableItem, Menu, MenuDivider, MenuItem } from '@szhsin/react-menu';
 
+import { api } from '../utils/api';
 import states from '../utils/states';
 
 import Icon from './icon';
 import Link from './link';
 
 function NavMenu(props) {
+  const { instance } = api();
   return (
     <Menu
+      portal={{
+        target: document.body,
+      }}
       {...props}
       menuButton={
         <button type="button" class="button plain">
@@ -18,12 +23,29 @@ function NavMenu(props) {
       <MenuLink to="/">
         <Icon icon="home" size="l" /> <span>Home</span>
       </MenuLink>
+      <MenuLink to="/notifications">
+        <Icon icon="notification" size="l" /> <span>Notifications</span>
+      </MenuLink>
+      <MenuDivider />
       <MenuLink to="/b">
         <Icon icon="bookmark" size="l" /> <span>Bookmarks</span>
       </MenuLink>
       <MenuLink to="/f">
         <Icon icon="heart" size="l" /> <span>Favourites</span>
       </MenuLink>
+      <MenuLink to="/l">
+        <Icon icon="list" size="l" /> <span>Lists</span>
+      </MenuLink>
+      <MenuDivider />
+      {/* <MenuLink to={`/search`}>
+        <Icon icon="search" size="l" /> <span>Search</span>
+      </MenuLink> */}
+      <MenuLink to={`/${instance}/p/l`}>
+        <Icon icon="group" size="l" /> <span>Local</span>
+      </MenuLink>
+      <MenuLink to={`/${instance}/p`}>
+        <Icon icon="earth" size="l" /> <span>Federated</span>
+      </MenuLink>
       <MenuDivider />
       <MenuItem
         onClick={() => {

src/pages/list.jsx

@@ -0,0 +1,55 @@
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { useParams } from 'react-router-dom';
+
+import Icon from '../components/icon';
+import Link from '../components/link';
+import Timeline from '../components/timeline';
+import { api } from '../utils/api';
+import useTitle from '../utils/useTitle';
+
+const LIMIT = 20;
+
+function List() {
+  const { masto } = api();
+  const { id } = useParams();
+  const listIterator = useRef();
+  async function fetchList(firstLoad) {
+    if (firstLoad || !listIterator.current) {
+      listIterator.current = masto.v1.timelines.listList(id, {
+        limit: LIMIT,
+      });
+    }
+    return await listIterator.current.next();
+  }
+
+  const [title, setTitle] = useState(`List`);
+  useTitle(title, `/l/:id`);
+  useEffect(() => {
+    (async () => {
+      try {
+        const list = await masto.v1.lists.fetch(id);
+        setTitle(list.title);
+      } catch (e) {
+        console.error(e);
+      }
+    })();
+  }, [id]);
+
+  return (
+    <Timeline
+      title={title}
+      id="list"
+      emptyText="Nothing yet."
+      errorText="Unable to load posts."
+      fetchItems={fetchList}
+      boostsCarousel
+      headerStart={
+        <Link to="/l" class="button plain">
+          <Icon icon="list" size="l" />
+        </Link>
+      }
+    />
+  );
+}
+
+export default List;

src/pages/lists.css

@@ -0,0 +1,25 @@
+#lists-page ul {
+  list-style: none;
+  padding: 16px;
+  margin: 0;
+}
+#lists-page ul li {
+  padding: 0;
+  margin: 0;
+}
+#lists-page ul li a {
+  display: block;
+  background-color: var(--bg-faded-color);
+  border-radius: 8px;
+  line-height: 1.25;
+  padding: 12px;
+  text-decoration: none;
+  line-height: 1.4;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-weight: 500;
+}
+#lists-page ul li a * {
+  vertical-align: middle;
+}

src/pages/lists.jsx

@@ -1,47 +1,71 @@
-import { useEffect, useRef, useState } from 'preact/hooks';
-import { useParams } from 'react-router-dom';
+import './lists.css';
 
-import Timeline from '../components/timeline';
+import { useEffect, useState } from 'preact/hooks';
+
+import Icon from '../components/icon';
+import Link from '../components/link';
+import Loader from '../components/loader';
+import Menu from '../components/menu';
 import { api } from '../utils/api';
-import useTitle from '../utils/useTitle';
-
-const LIMIT = 20;
 
 function Lists() {
   const { masto } = api();
-  const { id } = useParams();
-  const listsIterator = useRef();
-  async function fetchLists(firstLoad) {
-    if (firstLoad || !listsIterator.current) {
-      listsIterator.current = masto.v1.timelines.listList(id, {
-        limit: LIMIT,
-      });
-    }
-    return await listsIterator.current.next();
-  }
+  const [uiState, setUiState] = useState('default');
 
-  const [title, setTitle] = useState(`List ${id}`);
-  useTitle(title, `/l/:id`);
+  const [lists, setLists] = useState([]);
   useEffect(() => {
+    setUiState('loading');
     (async () => {
       try {
-        const list = await masto.v1.lists.fetch(id);
-        setTitle(list.title);
+        const lists = await masto.v1.lists.list();
+        console.log(lists);
+        setLists(lists);
+        setUiState('default');
       } catch (e) {
         console.error(e);
+        setUiState('error');
       }
     })();
-  }, [id]);
+  }, []);
 
   return (
-    <Timeline
-      title={title}
-      id="lists"
-      emptyText="Nothing yet."
-      errorText="Unable to load posts."
-      fetchItems={fetchLists}
-      boostsCarousel
-    />
+    <div id="lists-page" class="deck-container">
+      <div class="timeline-deck deck">
+        <header>
+          <div class="header-grid">
+            <div class="header-side">
+              <Menu />
+              <Link to="/" class="button plain">
+                <Icon icon="home" size="l" />
+              </Link>
+            </div>
+            <h1>Lists</h1>
+            <div class="header-side" />
+          </div>
+        </header>
+        <main>
+          {lists.length > 0 ? (
+            <ul>
+              {lists.map((list) => (
+                <li>
+                  <Link to={`/l/${list.id}`}>
+                    <Icon icon="list" /> <span>{list.title}</span>
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          ) : uiState === 'loading' ? (
+            <p class="ui-state">
+              <Loader />
+            </p>
+          ) : uiState === 'error' ? (
+            <p class="ui-state">Unable to load lists.</p>
+          ) : (
+            <p class="ui-state">No lists yet.</p>
+          )}
+        </main>
+      </div>
+    </div>
   );
 }
 

src/pages/search.jsx

@@ -12,15 +12,18 @@ import { api } from '../utils/api';
 
 function Search() {
   const { masto, instance, authenticated } = api();
+  const [uiState, setUiState] = useState('default');
   const [searchParams, setSearchParams] = useSearchParams();
   const searchFieldRef = useRef();
   const q = searchParams.get('q');
   const [statusResults, setStatusResults] = useState([]);
   const [accountResults, setAccountResults] = useState([]);
+  const [hashtagResults, setHashtagResults] = useState([]);
   useEffect(() => {
     if (q) {
       searchFieldRef.current.value = q;
 
+      setUiState('loading');
       (async () => {
         const results = await masto.v2.search({
           q,
@@ -30,12 +33,12 @@ function Search() {
         console.log(results);
         setStatusResults(results.statuses);
         setAccountResults(results.accounts);
+        setHashtagResults(results.hashtags);
+        setUiState('default');
       })();
     }
   }, [q]);
 
-  console.log({ accountResults });
-
   return (
     <div id="search-page" class="deck-container">
       <div class="timeline-deck deck">
@@ -65,35 +68,69 @@ function Search() {
           </div>
         </header>
         <main>
-          <h2 class="timeline-header">Accounts</h2>
-          {accountResults.length > 0 && (
-            <ul class="timeline flat accounts-list">
-              {accountResults.map((account) => (
-                <li>
-                  <Avatar url={account.avatar} size="xl" />
-                  <NameText account={account} instance={instance} showAcct />
-                </li>
-              ))}
-            </ul>
-          )}
-          <h2 class="timeline-header">Posts</h2>
-          {statusResults.length > 0 && (
-            <ul class="timeline">
-              {statusResults.map((status) => (
-                <li>
-                  <Link
-                    class="status-link"
-                    to={
-                      instance
-                        ? `/${instance}/s/${status.id}`
-                        : `/s/${status.id}`
-                    }
-                  >
-                    <Status status={status} />
-                  </Link>
-                </li>
-              ))}
-            </ul>
+          {!!q && uiState !== 'loading' ? (
+            <>
+              <h2 class="timeline-header">Accounts</h2>
+              {accountResults.length > 0 ? (
+                <ul class="timeline flat accounts-list">
+                  {accountResults.map((account) => (
+                    <li>
+                      <Avatar url={account.avatar} size="xl" />
+                      <NameText
+                        account={account}
+                        instance={instance}
+                        showAcct
+                      />
+                    </li>
+                  ))}
+                </ul>
+              ) : (
+                <p class="ui-state">No accounts found.</p>
+              )}
+              <h2 class="timeline-header">Hashtags</h2>
+              {hashtagResults.length > 0 ? (
+                <ul>
+                  {hashtagResults.map((hashtag) => (
+                    <li>
+                      <Link
+                        to={
+                          instance
+                            ? `/${instance}/t/${hashtag.name}`
+                            : `/t/${hashtag.name}`
+                        }
+                      >
+                        #{hashtag.name}
+                      </Link>
+                    </li>
+                  ))}
+                </ul>
+              ) : (
+                <p class="ui-state">No hashtags found.</p>
+              )}
+              <h2 class="timeline-header">Posts</h2>
+              {statusResults.length > 0 ? (
+                <ul class="timeline">
+                  {statusResults.map((status) => (
+                    <li>
+                      <Link
+                        class="status-link"
+                        to={
+                          instance
+                            ? `/${instance}/s/${status.id}`
+                            : `/s/${status.id}`
+                        }
+                      >
+                        <Status status={status} />
+                      </Link>
+                    </li>
+                  ))}
+                </ul>
+              ) : (
+                <p class="ui-state">No posts found.</p>
+              )}
+            </>
+          ) : (
+            <p class="ui-state">Enter your search term above to get started.</p>
           )}
         </main>
       </div>