Experiment useAutoAnimate

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@formatjs/intl-localematcher": "~0.4.2",
+        "@formkit/auto-animate": "~0.8.0",
         "@github/text-expander-element": "~2.5.0",
         "@iconify-icons/mingcute": "~1.2.8",
         "@justinribeiro/lite-youtube": "~1.5.0",
@@ -3043,6 +3044,11 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@formkit/auto-animate": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@formkit/auto-animate/-/auto-animate-0.8.0.tgz",
+      "integrity": "sha512-G8f7489ka0mWyi+1IEZT+xgIwcpWtRMmE2x+IrVoQ+KM1cP6VDj/TbujZjwxdb0P8w8b16/qBfViRmydbYHwMw=="
+    },
     "node_modules/@github/combobox-nav": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@github/combobox-nav/-/combobox-nav-2.1.5.tgz",
@@ -9558,6 +9564,11 @@
         "tslib": "^2.4.0"
       }
     },
+    "@formkit/auto-animate": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@formkit/auto-animate/-/auto-animate-0.8.0.tgz",
+      "integrity": "sha512-G8f7489ka0mWyi+1IEZT+xgIwcpWtRMmE2x+IrVoQ+KM1cP6VDj/TbujZjwxdb0P8w8b16/qBfViRmydbYHwMw=="
+    },
     "@github/combobox-nav": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@github/combobox-nav/-/combobox-nav-2.1.5.tgz",

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@formatjs/intl-localematcher": "~0.4.2",
+    "@formkit/auto-animate": "~0.8.0",
     "@github/text-expander-element": "~2.5.0",
     "@iconify-icons/mingcute": "~1.2.8",
     "@justinribeiro/lite-youtube": "~1.5.0",

src/components/shortcuts-settings.jsx

@@ -1,5 +1,6 @@
 import './shortcuts-settings.css';
 
+import { useAutoAnimate } from '@formkit/auto-animate/preact';
 import {
   compressToEncodedURIComponent,
   decompressFromEncodedURIComponent,
@@ -201,6 +202,8 @@ function ShortcutsSettings({ onClose }) {
   const [showForm, setShowForm] = useState(false);
   const [showImportExport, setShowImportExport] = useState(false);
 
+  const [shortcutsListParent] = useAutoAnimate();
+
   useEffect(() => {
     (async () => {
       try {
@@ -316,9 +319,10 @@ function ShortcutsSettings({ onClose }) {
           </details>
         </p> */}
         {shortcuts.length > 0 ? (
-          <ol class="shortcuts-list">
+          <ol class="shortcuts-list" ref={shortcutsListParent}>
             {shortcuts.filter(Boolean).map((shortcut, i) => {
-              const key = i + Object.values(shortcut);
+              // const key = i + Object.values(shortcut);
+              const key = Object.values(shortcut).join('-');
               const { type } = shortcut;
               if (!SHORTCUTS_META[type]) return null;
               let { icon, title, subtitle } = SHORTCUTS_META[type];

src/pages/accounts.jsx

@@ -1,7 +1,7 @@
 import './accounts.css';
 
+import { useAutoAnimate } from '@formkit/auto-animate/preact';
 import { Menu, MenuDivider, MenuItem } from '@szhsin/react-menu';
-import { useReducer, useState } from 'preact/hooks';
 import { useReducer } from 'preact/hooks';
 
 import Avatar from '../components/avatar';
@@ -21,6 +21,7 @@ function Accounts({ onClose }) {
   const moreThanOneAccount = accounts.length > 1;
 
   const [_, reload] = useReducer((x) => x + 1, 0);
+  const [accountsListParent] = useAutoAnimate();
 
   return (
     <div id="accounts-container" class="sheet" tabIndex="-1">
@@ -34,7 +35,7 @@ function Accounts({ onClose }) {
       </header>
       <main>
         <section>
-          <ul class="accounts-list">
+          <ul class="accounts-list" ref={accountsListParent}>
             {accounts.map((account, i) => {
               const isCurrent = account.info.id === currentAccount;
               const isDefault = i === 0; // first account is always default