Allow Lists to be in Shortcuts (except columns)

…and all various Lists-related improvements
2024-03-23 23:52:05 +08:00 · 2024-03-23 23:52:05 +08:00 · f6a9f7807e
parent 8378d6fc1d
commit f6a9f7807e
10 changed files with 302 additions and 87 deletions
--- a/src/app.css
+++ b/src/app.css
@ -2288,10 +2288,10 @@ ul.link-list li a .icon {
  filter: none !important;
 }
 .nav-menu-button .avatar {
-  transition: box-shadow 0.3s ease-out;
+  box-shadow: 0 0 0 2px var(--bg-color), 0 0 0 4px var(--link-light-color) !important;
 }
 .nav-menu-button:is(:hover, :focus, .active) .avatar {
-  box-shadow: 0 0 0 2px var(--bg-color), 0 0 0 4px var(--link-light-color);
+  box-shadow: 0 0 0 2px var(--bg-color), 0 0 0 4px var(--link-color) !important;
 }
 .nav-menu-button.with-avatar .icon {
  position: absolute;
--- a/src/components/account-info.jsx
+++ b/src/components/account-info.jsx
@ -14,6 +14,7 @@ import { api } from '../utils/api';
 import enhanceContent from '../utils/enhance-content';
 import getHTMLText from '../utils/getHTMLText';
 import handleContentLinks from '../utils/handle-content-links';
+import { getLists } from '../utils/lists';
 import niceDateTime from '../utils/nice-date-time';
 import pmem from '../utils/pmem';
 import shortenNumber from '../utils/shorten-number';
@ -1558,13 +1559,12 @@ function AddRemoveListsSheet({ accountID, onClose }) {
    setUIState('loading');
    (async () => {
      try {
-        const lists = await masto.v1.lists.list();
-        lists.sort((a, b) => a.title.localeCompare(b.title));
+        const lists = await getLists();
+        setLists(lists);
        const listsContainingAccount = await masto.v1.accounts
          .$select(accountID)
          .lists.list();
        console.log({ lists, listsContainingAccount });
-        setLists(lists);
        setListsContainingAccount(listsContainingAccount);
        setUIState('default');
      } catch (e) {
--- a/src/components/columns.jsx
+++ b/src/components/columns.jsx
@ -39,6 +39,8 @@ function Columns() {
    if (!Component) return null;
    // Don't show Search column with no query, for now
    if (type === 'search' && !params.query) return null;
+    // Don't show List column with no list, for now
+    if (type === 'list' && !params.id) return null;
    return (
      <Component key={type + JSON.stringify(params)} {...params} columnMode />
    );
--- a/src/components/list-add-edit.jsx
+++ b/src/components/list-add-edit.jsx
@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from 'preact/hooks';

 import { api } from '../utils/api';
+import { addListStore, deleteListStore, updateListStore } from '../utils/lists';
 import supports from '../utils/supports';

 import Icon from './icon';
@ -75,6 +76,14 @@ function ListAddEdit({ list, onClose }) {
                  state: 'success',
                  list: listResult,
                });
+
+                setTimeout(() => {
+                  if (editMode) {
+                    updateListStore(listResult);
+                  } else {
+                    addListStore(listResult);
+                  }
+                }, 1);
              } catch (e) {
                console.error(e);
                setUIState('error');
@ -146,6 +155,9 @@ function ListAddEdit({ list, onClose }) {
                      onClose?.({
                        state: 'deleted',
                      });
+                      setTimeout(() => {
+                        deleteListStore(list.id);
+                      }, 1);
                    } catch (e) {
                      console.error(e);
                      setUIState('error');
--- a/src/components/nav-menu.jsx
+++ b/src/components/nav-menu.jsx
@ -7,11 +7,12 @@ import {
  SubMenu,
 } from '@szhsin/react-menu';
 import { memo } from 'preact/compat';
-import { useEffect, useRef, useState } from 'preact/hooks';
+import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
 import { useLongPress } from 'use-long-press';
 import { useSnapshot } from 'valtio';

 import { api } from '../utils/api';
+import { getLists } from '../utils/lists';
 import safeBoundingBoxPadding from '../utils/safe-bounding-box-padding';
 import states from '../utils/states';
 import store from '../utils/store';
@ -24,16 +25,12 @@ function NavMenu(props) {
  const snapStates = useSnapshot(states);
  const { masto, instance, authenticated } = api();

-  const [currentAccount, setCurrentAccount] = useState();
-  const [moreThanOneAccount, setMoreThanOneAccount] = useState(false);
-
-  useEffect(() => {
+  const [currentAccount, moreThanOneAccount] = useMemo(() => {
    const accounts = store.local.getJSON('accounts') || [];
    const acc = accounts.find(
      (account) => account.info.id === store.session.get('currentAccount'),
    );
-    if (acc) setCurrentAccount(acc);
-    setMoreThanOneAccount(accounts.length > 1);
+    return [acc, accounts.length > 1];
  }, []);

  // Home = Following
@ -89,6 +86,13 @@ function NavMenu(props) {
    return results;
  }

+  const [lists, setLists] = useState([]);
+  useEffect(() => {
+    if (menuState === 'open') {
+      getLists().then(setLists);
+    }
+  }, [menuState === 'open']);
+
  const buttonClickTS = useRef();
  return (
    <>
@ -97,7 +101,7 @@ function NavMenu(props) {
        type="button"
        class={`button plain nav-menu-button ${
          moreThanOneAccount ? 'with-avatar' : ''
-        } ${open ? 'active' : ''}`}
+        } ${menuState === 'open' ? 'active' : ''}`}
        style={{ position: 'relative' }}
        onClick={() => {
          buttonClickTS.current = Date.now();
@ -203,9 +207,38 @@ function NavMenu(props) {
                  <Icon icon="user" size="l" /> <span>Profile</span>
                </MenuLink>
              )}
-              <MenuLink to="/l">
-                <Icon icon="list" size="l" /> <span>Lists</span>
-              </MenuLink>
+              {lists?.length > 0 ? (
+                <SubMenu
+                  overflow="auto"
+                  gap={-8}
+                  label={
+                    <>
+                      <Icon icon="list" size="l" />
+                      <span class="menu-grow">Lists</span>
+                      <Icon icon="chevron-right" />
+                    </>
+                  }
+                >
+                  <MenuLink to="/l">
+                    <span>All Lists</span>
+                  </MenuLink>
+                  {lists?.length > 0 && (
+                    <>
+                      <MenuDivider />
+                      {lists.map((list) => (
+                        <MenuLink key={list.id} to={`/l/${list.id}`}>
+                          <span>{list.title}</span>
+                        </MenuLink>
+                      ))}
+                    </>
+                  )}
+                </SubMenu>
+              ) : (
+                <MenuLink to="/l">
+                  <Icon icon="list" size="l" />
+                  <span>Lists</span>
+                </MenuLink>
+              )}
              <MenuLink to="/b">
                <Icon icon="bookmark" size="l" /> <span>Bookmarks</span>
              </MenuLink>
--- a/src/components/shortcuts-settings.jsx
+++ b/src/components/shortcuts-settings.jsx
@ -14,6 +14,7 @@ import tabMenuBarUrl from '../assets/tab-menu-bar.svg';

 import { api } from '../utils/api';
 import { fetchFollowedTags } from '../utils/followed-tags';
+import { getLists, getListTitle } from '../utils/lists';
 import pmem from '../utils/pmem';
 import showToast from '../utils/show-toast';
 import states from '../utils/states';
@ -43,7 +44,7 @@ const TYPES = [
 const TYPE_TEXT = {
  following: 'Home / Following',
  notifications: 'Notifications',
-  list: 'List',
+  list: 'Lists',
  public: 'Public (Local / Federated)',
  search: 'Search',
  'account-statuses': 'Account',
@ -58,6 +59,7 @@ const TYPE_PARAMS = {
    {
      text: 'List ID',
      name: 'id',
+      notRequired: true,
    },
  ],
  public: [
@ -122,10 +124,6 @@ const TYPE_PARAMS = {
    },
  ],
 };
-const fetchListTitle = pmem(async ({ id }) => {
-  const list = await api().masto.v1.lists.$select(id).fetch();
-  return list.title;
-});
 const fetchAccountTitle = pmem(async ({ id }) => {
  const account = await api().masto.v1.accounts.$select(id).fetch();
  return account.username || account.acct || account.displayName;
@ -150,10 +148,11 @@ export const SHORTCUTS_META = {
    icon: 'notification',
  },
  list: {
-    id: 'list',
-    title: fetchListTitle,
-    path: ({ id }) => `/l/${id}`,
+    id: ({ id }) => (id ? 'list' : 'lists'),
+    title: ({ id }) => (id ? getListTitle(id) : 'Lists'),
+    path: ({ id }) => (id ? `/l/${id}` : '/l'),
    icon: 'list',
+    excludeViewMode: ({ id }) => (!id ? ['multi-column'] : []),
  },
  public: {
    id: 'public',
@ -496,18 +495,8 @@ function ShortcutsSettings({ onClose }) {
  );
 }

-const FETCH_MAX_AGE = 1000 * 60; // 1 minute
-const fetchLists = pmem(
-  () => {
-    const { masto } = api();
-    return masto.v1.lists.list();
-  },
-  {
-    maxAge: FETCH_MAX_AGE,
-  },
-);
-
 const FORM_NOTES = {
+  list: `Specific list is optional. For multi-column mode, list is required, else the column will not be shown.`,
  search: `For multi-column mode, search term is required, else the column will not be shown.`,
  hashtag: 'Multiple hashtags are supported. Space-separated.',
 };
@ -532,8 +521,7 @@ function ShortcutForm({
      if (currentType !== 'list') return;
      try {
        setUIState('loading');
-        const lists = await fetchLists();
-        lists.sort((a, b) => a.title.localeCompare(b.title));
+        const lists = await getLists();
        setLists(lists);
        setUIState('default');
      } catch (e) {
@ -644,6 +632,7 @@ function ShortcutForm({
                        disabled={disabled || uiState === 'loading'}
                        defaultValue={editMode ? shortcut.id : undefined}
                      >
+                        <option value=""></option>
                        {lists.map((list) => (
                          <option value={list.id}>{list.title}</option>
                        ))}
--- a/src/components/shortcuts.jsx
+++ b/src/components/shortcuts.jsx
@ -1,14 +1,15 @@
 import './shortcuts.css';

-import { Menu, MenuItem } from '@szhsin/react-menu';
+import { MenuDivider, SubMenu } from '@szhsin/react-menu';
 import { memo } from 'preact/compat';
-import { useMemo, useRef } from 'preact/hooks';
+import { useRef, useState } from 'preact/hooks';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useNavigate } from 'react-router-dom';
 import { useSnapshot } from 'valtio';

 import { SHORTCUTS_META } from '../components/shortcuts-settings';
 import { api } from '../utils/api';
+import { getLists } from '../utils/lists';
 import states from '../utils/states';

 import AsyncText from './AsyncText';
@ -34,47 +35,48 @@ function Shortcuts() {

  const menuRef = useRef();

-  const formattedShortcuts = useMemo(
-    () =>
-      shortcuts
-        .map((pin, i) => {
-          const { type, ...data } = pin;
-          if (!SHORTCUTS_META[type]) return null;
-          let { id, path, title, subtitle, icon } = SHORTCUTS_META[type];
+  const hasLists = useRef(false);
+  const formattedShortcuts = shortcuts
+    .map((pin, i) => {
+      const { type, ...data } = pin;
+      if (!SHORTCUTS_META[type]) return null;
+      let { id, path, title, subtitle, icon } = SHORTCUTS_META[type];

-          if (typeof id === 'function') {
-            id = id(data, i);
-          }
-          if (typeof path === 'function') {
-            path = path(
-              {
-                ...data,
-                instance: data.instance || instance,
-              },
-              i,
-            );
-          }
-          if (typeof title === 'function') {
-            title = title(data, i);
-          }
-          if (typeof subtitle === 'function') {
-            subtitle = subtitle(data, i);
-          }
-          if (typeof icon === 'function') {
-            icon = icon(data, i);
-          }
+      if (typeof id === 'function') {
+        id = id(data, i);
+      }
+      if (typeof path === 'function') {
+        path = path(
+          {
+            ...data,
+            instance: data.instance || instance,
+          },
+          i,
+        );
+      }
+      if (typeof title === 'function') {
+        title = title(data, i);
+      }
+      if (typeof subtitle === 'function') {
+        subtitle = subtitle(data, i);
+      }
+      if (typeof icon === 'function') {
+        icon = icon(data, i);
+      }

-          return {
-            id,
-            path,
-            title,
-            subtitle,
-            icon,
-          };
-        })
-        .filter(Boolean),
-    [shortcuts],
-  );
+      if (id === 'lists') {
+        hasLists.current = true;
+      }
+
+      return {
+        id,
+        path,
+        title,
+        subtitle,
+        icon,
+      };
+    })
+    .filter(Boolean);

  const navigate = useNavigate();
  useHotkeys(['1', '2', '3', '4', '5', '6', '7', '8', '9'], (e, handler) => {
@ -88,6 +90,8 @@ function Shortcuts() {
    }
  });

+  const [lists, setLists] = useState([]);
+
  return (
    <div id="shortcuts">
      {snapStates.settings.shortcutsViewMode === 'tab-menu-bar' ? (
@ -147,6 +151,11 @@ function Shortcuts() {
          menuClassName="glass-menu shortcuts-menu"
          gap={8}
          position="anchor"
+          onMenuChange={(e) => {
+            if (e.open && hasLists.current) {
+              getLists().then(setLists);
+            }
+          }}
          menuButton={
            <button
              type="button"
@ -171,6 +180,35 @@ function Shortcuts() {
          }
        >
          {formattedShortcuts.map(({ id, path, title, subtitle, icon }, i) => {
+            if (id === 'lists') {
+              return (
+                <SubMenu
+                  menuClassName="glass-menu"
+                  overflow="auto"
+                  gap={-8}
+                  label={
+                    <>
+                      <Icon icon={icon} size="l" />
+                      <span class="menu-grow">
+                        <AsyncText>{title}</AsyncText>
+                      </span>
+                      <Icon icon="chevron-right" />
+                    </>
+                  }
+                >
+                  <MenuLink to="/l">
+                    <span>All Lists</span>
+                  </MenuLink>
+                  <MenuDivider />
+                  {lists?.map((list) => (
+                    <MenuLink key={list.id} to={`/l/${list.id}`}>
+                      <span>{list.title}</span>
+                    </MenuLink>
+                  ))}
+                </SubMenu>
+              );
+            }
+
            return (
              <MenuLink
                to={path}
--- a/src/pages/list.jsx
+++ b/src/pages/list.jsx
@ -1,6 +1,6 @@
 import './lists.css';

-import { Menu, MenuItem } from '@szhsin/react-menu';
+import { Menu, MenuDivider, MenuItem } from '@szhsin/react-menu';
 import { useEffect, useRef, useState } from 'preact/hooks';
 import { InView } from 'react-intersection-observer';
 import { useNavigate, useParams } from 'react-router-dom';
@ -12,10 +12,12 @@ import Link from '../components/link';
 import ListAddEdit from '../components/list-add-edit';
 import Menu2 from '../components/menu2';
 import MenuConfirm from '../components/menu-confirm';
+import MenuLink from '../components/menu-link';
 import Modal from '../components/modal';
 import Timeline from '../components/timeline';
 import { api } from '../utils/api';
 import { filteredItems } from '../utils/filters';
+import { getList, getLists } from '../utils/lists';
 import states, { saveStatus } from '../utils/states';
 import useTitle from '../utils/useTitle';

@ -71,13 +73,18 @@ function List(props) {
    }
  }

+  const [lists, setLists] = useState([]);
+  useEffect(() => {
+    getLists().then(setLists);
+  }, []);
+
  const [list, setList] = useState({ title: 'List' });
  // const [title, setTitle] = useState(`List`);
  useTitle(list.title, `/l/:id`);
  useEffect(() => {
    (async () => {
      try {
-        const list = await masto.v1.lists.$select(id).fetch();
+        const list = await getList(id);
        setList(list);
        // setTitle(list.title);
      } catch (e) {
@ -107,9 +114,31 @@ function List(props) {
        showReplyParent
        // refresh={reloadCount}
        headerStart={
-          <Link to="/l" class="button plain">
-            <Icon icon="list" size="l" />
-          </Link>
+          // <Link to="/l" class="button plain">
+          //   <Icon icon="list" size="l" />
+          // </Link>
+          <Menu2
+            overflow="auto"
+            menuButton={
+              <button type="button" class="plain">
+                <Icon icon="list" size="l" />
+              </button>
+            }
+          >
+            <MenuLink to="/l">
+              <span>All Lists</span>
+            </MenuLink>
+            {lists?.length > 0 && (
+              <>
+                <MenuDivider />
+                {lists.map((list) => (
+                  <MenuLink key={list.id} to={`/l/${list.id}`}>
+                    <span>{list.title}</span>
+                  </MenuLink>
+                ))}
+              </>
+            )}
+          </Menu2>
        }
        headerEnd={
          <Menu2
--- a/src/pages/lists.jsx
+++ b/src/pages/lists.jsx
@ -8,11 +8,10 @@ import ListAddEdit from '../components/list-add-edit';
 import Loader from '../components/loader';
 import Modal from '../components/modal';
 import NavMenu from '../components/nav-menu';
-import { api } from '../utils/api';
+import { fetchLists } from '../utils/lists';
 import useTitle from '../utils/useTitle';

 function Lists() {
-  const { masto } = api();
  useTitle(`Lists`, `/l`);
  const [uiState, setUIState] = useState('default');

@ -22,8 +21,7 @@ function Lists() {
    setUIState('loading');
    (async () => {
      try {
-        const lists = await masto.v1.lists.list();
-        lists.sort((a, b) => a.title.localeCompare(b.title));
+        const lists = await fetchLists();
        console.log(lists);
        setLists(lists);
        setUIState('default');
--- a/src/utils/lists.js
+++ b/src/utils/lists.js
@ -0,0 +1,114 @@
+import { api } from './api';
+import pmem from './pmem';
+import store from './store';
+
+const FETCH_MAX_AGE = 1000 * 60; // 1 minute
+const MAX_AGE = 24 * 60 * 60 * 1000; // 1 day
+
+export const fetchLists = pmem(
+  async () => {
+    const { masto } = api();
+    const lists = await masto.v1.lists.list();
+    lists.sort((a, b) => a.title.localeCompare(b.title));
+
+    if (lists.length) {
+      setTimeout(() => {
+        // Save to local storage, with saved timestamp
+        store.account.set('lists', {
+          lists,
+          updatedAt: Date.now(),
+        });
+      }, 1);
+    }
+
+    return lists;
+  },
+  {
+    maxAge: FETCH_MAX_AGE,
+  },
+);
+
+export async function getLists() {
+  try {
+    const { lists, updatedAt } = store.account.get('lists') || {};
+    if (!lists?.length) return await fetchLists();
+    if (Date.now() - updatedAt > MAX_AGE) {
+      // Stale-while-revalidate
+      fetchLists();
+      return lists;
+    }
+    return lists;
+  } catch (e) {
+    return [];
+  }
+}
+
+export const fetchList = pmem(
+  (id) => {
+    const { masto } = api();
+    return masto.v1.lists.$select(id).fetch();
+  },
+  {
+    maxAge: FETCH_MAX_AGE,
+  },
+);
+
+export async function getList(id) {
+  const { lists } = store.account.get('lists') || {};
+  console.log({ lists });
+  if (lists?.length) {
+    const theList = lists.find((l) => l.id === id);
+    if (theList) return theList;
+  }
+  try {
+    return fetchList(id);
+  } catch (e) {
+    return null;
+  }
+}
+
+export async function getListTitle(id) {
+  const list = await getList(id);
+  return list?.title || '';
+}
+
+export function addListStore(list) {
+  const { lists } = store.account.get('lists') || {};
+  if (lists?.length) {
+    lists.push(list);
+    lists.sort((a, b) => a.title.localeCompare(b.title));
+    store.account.set('lists', {
+      lists,
+      updatedAt: Date.now(),
+    });
+  }
+}
+
+export function updateListStore(list) {
+  const { lists } = store.account.get('lists') || {};
+  if (lists?.length) {
+    const index = lists.findIndex((l) => l.id === list.id);
+    if (index !== -1) {
+      lists[index] = list;
+      lists.sort((a, b) => a.title.localeCompare(b.title));
+      store.account.set('lists', {
+        lists,
+        updatedAt: Date.now(),
+      });
+    }
+  }
+}
+
+export function deleteListStore(listID) {
+  const { lists } = store.account.get('lists') || {};
+  if (lists?.length) {
+    const index = lists.findIndex((l) => l.id === listID);
+    if (index !== -1) {
+      lists.splice(index, 1);
+      store.account.set('lists', {
+        lists,
+        updatedAt: Date.now(),
+      });
+    }
+  }
+}