Merge pull request #31 from cheeaun/main

Update from main

.github/workflows/bundlewatch.yml

@@ -0,0 +1,21 @@
+name: BundleWatch
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  bundle:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - run: |
+          npm ci
+          npm run build
+          npx bundlewatch --max-size 100kb ./dist/**/*.js
+        env:
+          BUNDLEWATCH_GITHUB_TOKEN: ${{ secrets.BUNDLEWATCH_GITHUB_TOKEN }}
+          CI_REPO_OWNER: cheeaun
+          CI_REPO_NAME: phanpy
+          CI_BRANCH_BASE: main
+          CI_BRANCH: main

index.html

@@ -28,6 +28,382 @@
       content="#242526"
       media="(prefers-color-scheme: dark)"
     />
+    <script>
+      var _rollbarConfig = {
+        accessToken: 'ec3e07829d324a29abf6c83472a9740d',
+        captureUncaught: true,
+        captureUnhandledRejections: true,
+        payload: {
+          environment: 'production',
+        },
+      };
+      // Rollbar Snippet
+      !(function (r) {
+        function e(n) {
+          if (o[n]) return o[n].exports;
+          var t = (o[n] = { exports: {}, id: n, loaded: !1 });
+          return (
+            r[n].call(t.exports, t, t.exports, e), (t.loaded = !0), t.exports
+          );
+        }
+        var o = {};
+        return (e.m = r), (e.c = o), (e.p = ''), e(0);
+      })([
+        function (r, e, o) {
+          'use strict';
+          var n = o(1),
+            t = o(4);
+          (_rollbarConfig = _rollbarConfig || {}),
+            (_rollbarConfig.rollbarJsUrl =
+              _rollbarConfig.rollbarJsUrl ||
+              'https://cdnjs.cloudflare.com/ajax/libs/rollbar.js/2.4.6/rollbar.min.js'),
+            (_rollbarConfig.async =
+              void 0 === _rollbarConfig.async || _rollbarConfig.async);
+          var a = n.setupShim(window, _rollbarConfig),
+            l = t(_rollbarConfig);
+          (window.rollbar = n.Rollbar),
+            a.loadFull(
+              window,
+              document,
+              !_rollbarConfig.async,
+              _rollbarConfig,
+              l,
+            );
+        },
+        function (r, e, o) {
+          'use strict';
+          function n(r) {
+            return function () {
+              try {
+                return r.apply(this, arguments);
+              } catch (r) {
+                try {
+                  console.error('[Rollbar]: Internal error', r);
+                } catch (r) {}
+              }
+            };
+          }
+          function t(r, e) {
+            (this.options = r), (this._rollbarOldOnError = null);
+            var o = s++;
+            (this.shimId = function () {
+              return o;
+            }),
+              'undefined' != typeof window &&
+                window._rollbarShims &&
+                (window._rollbarShims[o] = { handler: e, messages: [] });
+          }
+          function a(r, e) {
+            if (r) {
+              var o = e.globalAlias || 'Rollbar';
+              if ('object' == typeof r[o]) return r[o];
+              (r._rollbarShims = {}), (r._rollbarWrappedError = null);
+              var t = new p(e);
+              return n(function () {
+                e.captureUncaught &&
+                  ((t._rollbarOldOnError = r.onerror),
+                  i.captureUncaughtExceptions(r, t, !0),
+                  i.wrapGlobals(r, t, !0)),
+                  e.captureUnhandledRejections &&
+                    i.captureUnhandledRejections(r, t, !0);
+                var n = e.autoInstrument;
+                return (
+                  e.enabled !== !1 &&
+                    (void 0 === n ||
+                      n === !0 ||
+                      ('object' == typeof n && n.network)) &&
+                    r.addEventListener &&
+                    (r.addEventListener('load', t.captureLoad.bind(t)),
+                    r.addEventListener(
+                      'DOMContentLoaded',
+                      t.captureDomContentLoaded.bind(t),
+                    )),
+                  (r[o] = t),
+                  t
+                );
+              })();
+            }
+          }
+          function l(r) {
+            return n(function () {
+              var e = this,
+                o = Array.prototype.slice.call(arguments, 0),
+                n = { shim: e, method: r, args: o, ts: new Date() };
+              window._rollbarShims[this.shimId()].messages.push(n);
+            });
+          }
+          var i = o(2),
+            s = 0,
+            d = o(3),
+            c = function (r, e) {
+              return new t(r, e);
+            },
+            p = d.bind(null, c);
+          (t.prototype.loadFull = function (r, e, o, t, a) {
+            var l = function () {
+                var e;
+                if (void 0 === r._rollbarDidLoad) {
+                  e = new Error('rollbar.js did not load');
+                  for (var o, n, t, l, i = 0; (o = r._rollbarShims[i++]); )
+                    for (o = o.messages || []; (n = o.shift()); )
+                      for (t = n.args || [], i = 0; i < t.length; ++i)
+                        if (((l = t[i]), 'function' == typeof l)) {
+                          l(e);
+                          break;
+                        }
+                }
+                'function' == typeof a && a(e);
+              },
+              i = !1,
+              s = e.createElement('script'),
+              d = e.getElementsByTagName('script')[0],
+              c = d.parentNode;
+            (s.crossOrigin = ''),
+              (s.src = t.rollbarJsUrl),
+              o || (s.async = !0),
+              (s.onload = s.onreadystatechange =
+                n(function () {
+                  if (
+                    !(
+                      i ||
+                      (this.readyState &&
+                        'loaded' !== this.readyState &&
+                        'complete' !== this.readyState)
+                    )
+                  ) {
+                    s.onload = s.onreadystatechange = null;
+                    try {
+                      c.removeChild(s);
+                    } catch (r) {}
+                    (i = !0), l();
+                  }
+                })),
+              c.insertBefore(s, d);
+          }),
+            (t.prototype.wrap = function (r, e, o) {
+              try {
+                var n;
+                if (
+                  ((n =
+                    'function' == typeof e
+                      ? e
+                      : function () {
+                          return e || {};
+                        }),
+                  'function' != typeof r)
+                )
+                  return r;
+                if (r._isWrap) return r;
+                if (
+                  !r._rollbar_wrapped &&
+                  ((r._rollbar_wrapped = function () {
+                    o && 'function' == typeof o && o.apply(this, arguments);
+                    try {
+                      return r.apply(this, arguments);
+                    } catch (o) {
+                      var e = o;
+                      throw (
+                        (e &&
+                          ('string' == typeof e && (e = new String(e)),
+                          (e._rollbarContext = n() || {}),
+                          (e._rollbarContext._wrappedSource = r.toString()),
+                          (window._rollbarWrappedError = e)),
+                        e)
+                      );
+                    }
+                  }),
+                  (r._rollbar_wrapped._isWrap = !0),
+                  r.hasOwnProperty)
+                )
+                  for (var t in r)
+                    r.hasOwnProperty(t) && (r._rollbar_wrapped[t] = r[t]);
+                return r._rollbar_wrapped;
+              } catch (e) {
+                return r;
+              }
+            });
+          for (
+            var u =
+                'log,debug,info,warn,warning,error,critical,global,configure,handleUncaughtException,handleUnhandledRejection,captureEvent,captureDomContentLoaded,captureLoad'.split(
+                  ',',
+                ),
+              f = 0;
+            f < u.length;
+            ++f
+          )
+            t.prototype[u[f]] = l(u[f]);
+          r.exports = { setupShim: a, Rollbar: p };
+        },
+        function (r, e) {
+          'use strict';
+          function o(r, e, o) {
+            if (r) {
+              var t;
+              'function' == typeof e._rollbarOldOnError
+                ? (t = e._rollbarOldOnError)
+                : r.onerror &&
+                  !r.onerror.belongsToShim &&
+                  ((t = r.onerror), (e._rollbarOldOnError = t));
+              var a = function () {
+                var o = Array.prototype.slice.call(arguments, 0);
+                n(r, e, t, o);
+              };
+              (a.belongsToShim = o), (r.onerror = a);
+            }
+          }
+          function n(r, e, o, n) {
+            r._rollbarWrappedError &&
+              (n[4] || (n[4] = r._rollbarWrappedError),
+              n[5] || (n[5] = r._rollbarWrappedError._rollbarContext),
+              (r._rollbarWrappedError = null)),
+              e.handleUncaughtException.apply(e, n),
+              o && o.apply(r, n);
+          }
+          function t(r, e, o) {
+            if (r) {
+              'function' == typeof r._rollbarURH &&
+                r._rollbarURH.belongsToShim &&
+                r.removeEventListener('unhandledrejection', r._rollbarURH);
+              var n = function (r) {
+                var o, n, t;
+                try {
+                  o = r.reason;
+                } catch (r) {
+                  o = void 0;
+                }
+                try {
+                  n = r.promise;
+                } catch (r) {
+                  n = '[unhandledrejection] error getting `promise` from event';
+                }
+                try {
+                  (t = r.detail), !o && t && ((o = t.reason), (n = t.promise));
+                } catch (r) {
+                  t = '[unhandledrejection] error getting `detail` from event';
+                }
+                o ||
+                  (o =
+                    '[unhandledrejection] error getting `reason` from event'),
+                  e &&
+                    e.handleUnhandledRejection &&
+                    e.handleUnhandledRejection(o, n);
+              };
+              (n.belongsToShim = o),
+                (r._rollbarURH = n),
+                r.addEventListener('unhandledrejection', n);
+            }
+          }
+          function a(r, e, o) {
+            if (r) {
+              var n,
+                t,
+                a =
+                  'EventTarget,Window,Node,ApplicationCache,AudioTrackList,ChannelMergerNode,CryptoOperation,EventSource,FileReader,HTMLUnknownElement,IDBDatabase,IDBRequest,IDBTransaction,KeyOperation,MediaController,MessagePort,ModalWindow,Notification,SVGElementInstance,Screen,TextTrack,TextTrackCue,TextTrackList,WebSocket,WebSocketWorker,Worker,XMLHttpRequest,XMLHttpRequestEventTarget,XMLHttpRequestUpload'.split(
+                    ',',
+                  );
+              for (n = 0; n < a.length; ++n)
+                (t = a[n]), r[t] && r[t].prototype && l(e, r[t].prototype, o);
+            }
+          }
+          function l(r, e, o) {
+            if (e.hasOwnProperty && e.hasOwnProperty('addEventListener')) {
+              for (
+                var n = e.addEventListener;
+                n._rollbarOldAdd && n.belongsToShim;
+
+              )
+                n = n._rollbarOldAdd;
+              var t = function (e, o, t) {
+                n.call(this, e, r.wrap(o), t);
+              };
+              (t._rollbarOldAdd = n),
+                (t.belongsToShim = o),
+                (e.addEventListener = t);
+              for (
+                var a = e.removeEventListener;
+                a._rollbarOldRemove && a.belongsToShim;
+
+              )
+                a = a._rollbarOldRemove;
+              var l = function (r, e, o) {
+                a.call(this, r, (e && e._rollbar_wrapped) || e, o);
+              };
+              (l._rollbarOldRemove = a),
+                (l.belongsToShim = o),
+                (e.removeEventListener = l);
+            }
+          }
+          r.exports = {
+            captureUncaughtExceptions: o,
+            captureUnhandledRejections: t,
+            wrapGlobals: a,
+          };
+        },
+        function (r, e) {
+          'use strict';
+          function o(r, e) {
+            (this.impl = r(e, this)), (this.options = e), n(o.prototype);
+          }
+          function n(r) {
+            for (
+              var e = function (r) {
+                  return function () {
+                    var e = Array.prototype.slice.call(arguments, 0);
+                    if (this.impl[r]) return this.impl[r].apply(this.impl, e);
+                  };
+                },
+                o =
+                  'log,debug,info,warn,warning,error,critical,global,configure,handleUncaughtException,handleUnhandledRejection,_createItem,wrap,loadFull,shimId,captureEvent,captureDomContentLoaded,captureLoad'.split(
+                    ',',
+                  ),
+                n = 0;
+              n < o.length;
+              n++
+            )
+              r[o[n]] = e(o[n]);
+          }
+          (o.prototype._swapAndProcessMessages = function (r, e) {
+            this.impl = r(this.options);
+            for (var o, n, t; (o = e.shift()); )
+              (n = o.method),
+                (t = o.args),
+                this[n] &&
+                  'function' == typeof this[n] &&
+                  ('captureDomContentLoaded' === n || 'captureLoad' === n
+                    ? this[n].apply(this, [t[0], o.ts])
+                    : this[n].apply(this, t));
+            return this;
+          }),
+            (r.exports = o);
+        },
+        function (r, e) {
+          'use strict';
+          r.exports = function (r) {
+            return function (e) {
+              if (!e && !window._rollbarInitialized) {
+                r = r || {};
+                for (
+                  var o,
+                    n,
+                    t = r.globalAlias || 'Rollbar',
+                    a = window.rollbar,
+                    l = function (r) {
+                      return new a(r);
+                    },
+                    i = 0;
+                  (o = window._rollbarShims[i++]);
+
+                )
+                  n || (n = o.handler),
+                    o.handler._swapAndProcessMessages(l, o.messages);
+                (window[t] = n), (window._rollbarInitialized = !0);
+              }
+            };
+          };
+        },
+      ]);
+      // End Rollbar Snippet
+    </script>
   </head>
   <body>
     <div id="app"></div>

package-lock.json

@@ -14,12 +14,13 @@
         "history": "~5.3.0",
         "iconify-icon": "~1.0.2",
         "just-debounce-it": "~3.2.0",
-        "masto": "~4.11.1",
+        "masto": "~5.0.5",
         "mem": "~9.0.2",
         "preact": "~10.11.3",
         "preact-router": "~4.1.0",
         "react-intersection-observer": "~9.4.1",
         "string-length": "~5.0.1",
+        "toastify-js": "~1.12.0",
         "use-resize-observer": "~9.1.0",
         "valtio": "~1.7.6"
       },
@@ -2150,6 +2151,18 @@
       "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
       "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA=="
     },
+    "node_modules/@mastojs/ponyfills": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@mastojs/ponyfills/-/ponyfills-1.0.4.tgz",
+      "integrity": "sha512-1NaIGmcU7OmyNzx0fk+cYeGTkdXlOJOSdetaC4pStVWsrhht2cdlYSAfe5NDW3FcUmcEm2vVceB9lcClN1RCxw==",
+      "dependencies": {
+        "@types/node": "^18.11.17",
+        "@types/node-fetch": "^2.6.2",
+        "abort-controller": "^3.0.0",
+        "form-data": "^4.0.0",
+        "node-fetch": "^2.6.7"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -2450,8 +2463,29 @@
     "node_modules/@types/node": {
       "version": "18.11.17",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.17.tgz",
-      "integrity": "sha512-HJSUJmni4BeDHhfzn6nF0sVmd1SMezP7/4F0Lq+aXzmp2xm9O7WXrUtHW/CHlYVtZUbByEvWidHqRtcJXGF2Ng==",
+      "integrity": "sha512-HJSUJmni4BeDHhfzn6nF0sVmd1SMezP7/4F0Lq+aXzmp2xm9O7WXrUtHW/CHlYVtZUbByEvWidHqRtcJXGF2Ng=="
-      "dev": true
+    },
+    "node_modules/@types/node-fetch": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/@types/node-fetch/-/node-fetch-2.6.2.tgz",
+      "integrity": "sha512-DHqhlq5jeESLy19TYhLakJ07kNumXWjcDdxXsLUMJZ6ue8VZJj4kLPQVE/2mdHh3xZziNF1xppu5lwmS53HR+A==",
+      "dependencies": {
+        "@types/node": "*",
+        "form-data": "^3.0.0"
+      }
+    },
+    "node_modules/@types/node-fetch/node_modules/form-data": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.1.tgz",
+      "integrity": "sha512-RHkBKtLWUVwd7SqRIvCZMEvAMoGUp0XU+seQiZejj0COz3RI3hWP4sCv3gZWWLjJTd7rGwcsF5eKZGii0r/hbg==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
     },
     "node_modules/@types/resolve": {
       "version": "1.17.1",
@@ -2543,6 +2577,17 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/abort-controller": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
+      "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
+      "dependencies": {
+        "event-target-shim": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=6.5"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.8.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.1.tgz",
@@ -2647,16 +2692,6 @@
         "postcss": "^8.1.0"
       }
     },
-    "node_modules/axios": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.1.3.tgz",
-      "integrity": "sha512-00tXVRwKx/FZr/IDVFt4C+f9FYairX517WoGCL6dpOntqLkZofjhu43F/Xl44UOpqa+9sLFDrG/XAnFsUYgkDA==",
-      "dependencies": {
-        "follow-redirects": "^1.15.0",
-        "form-data": "^4.0.0",
-        "proxy-from-env": "^1.1.0"
-      }
-    },
     "node_modules/babel-plugin-polyfill-corejs2": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.3.tgz",
@@ -3167,6 +3202,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/event-target-shim": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
+      "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/eventemitter3": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.0.tgz",
@@ -3256,25 +3299,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/follow-redirects": {
-      "version": "1.15.2",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
-      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://github.com/sponsors/RubenVerborgh"
-        }
-      ],
-      "engines": {
-        "node": ">=4.0"
-      },
-      "peerDependenciesMeta": {
-        "debug": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/form-data": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
@@ -3836,27 +3860,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/isomorphic-form-data": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/isomorphic-form-data/-/isomorphic-form-data-2.0.0.tgz",
-      "integrity": "sha512-TYgVnXWeESVmQSg4GLVbalmQ+B4NPi/H4eWxqALKj63KsUrcu301YDjBqaOw3h+cbak7Na4Xyps3BiptHtxTfg==",
-      "dependencies": {
-        "form-data": "^2.3.2"
-      }
-    },
-    "node_modules/isomorphic-form-data/node_modules/form-data": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.5.1.tgz",
-      "integrity": "sha512-m21N3WOmEEURgk6B9GLOE4RuWOFf28Lhh9qGYeNlGq4VDXUlJy2th2slBNU8Gp8EzloYZOibZJ7t5ecIrFSjVA==",
-      "dependencies": {
-        "asynckit": "^0.4.0",
-        "combined-stream": "^1.0.6",
-        "mime-types": "^2.1.12"
-      },
-      "engines": {
-        "node": ">= 0.12"
-      }
-    },
     "node_modules/isomorphic-ws": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/isomorphic-ws/-/isomorphic-ws-5.0.0.tgz",
@@ -4146,14 +4149,13 @@
       }
     },
     "node_modules/masto": {
-      "version": "4.11.1",
+      "version": "5.0.5",
-      "resolved": "https://registry.npmjs.org/masto/-/masto-4.11.1.tgz",
+      "resolved": "https://registry.npmjs.org/masto/-/masto-5.0.5.tgz",
-      "integrity": "sha512-siTQNhfLV1JjOERCGgjagMvD6q0K0hLuhOXrbXNcYzHAwpbPeSeAM6CSpIRrZ8zFDepOR62Djs/GtJdTR21Rfw==",
+      "integrity": "sha512-/iRuSnn2ieVfUIemm4kE/91VXAw/dUoJ/GCtebNxoFZIe/ca8xyPV/9cL7jdquc8RPNDr8ribwVUQO5DccfB8w==",
       "dependencies": {
-        "axios": "1.1.3",
+        "@mastojs/ponyfills": "^1.0.4",
         "change-case": "^4.1.2",
         "eventemitter3": "^5.0.0",
-        "isomorphic-form-data": "^2.0.0",
         "isomorphic-ws": "^5.0.0",
         "semver": "^7.3.7",
         "ws": "^8.8.0"
@@ -4285,6 +4287,44 @@
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/node-fetch": {
+      "version": "2.6.7",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
+      "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      },
+      "peerDependencies": {
+        "encoding": "^0.1.0"
+      },
+      "peerDependenciesMeta": {
+        "encoding": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/node-fetch/node_modules/tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
+    },
+    "node_modules/node-fetch/node_modules/webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
+    },
+    "node_modules/node-fetch/node_modules/whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+      "dependencies": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
     "node_modules/node-releases": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.6.tgz",
@@ -4509,11 +4549,6 @@
       "resolved": "https://registry.npmjs.org/proxy-compare/-/proxy-compare-2.3.0.tgz",
       "integrity": "sha512-c3L2CcAi7f7pvlD0D7xsF+2CQIW8C3HaYx2Pfgq8eA4HAl3GAH6/dVYsyBbYF/0XJs2ziGLrzmz5fmzPm6A0pQ=="
     },
-    "node_modules/proxy-from-env": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
-      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
-    },
     "node_modules/punycode": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
@@ -5070,6 +5105,11 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/toastify-js": {
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/toastify-js/-/toastify-js-1.12.0.tgz",
+      "integrity": "sha512-HeMHCO9yLPvP9k0apGSdPUWrUbLnxUKNFzgUoZp1PHCLploIX/4DSQ7V8H25ef+h4iO9n0he7ImfcndnN6nDrQ=="
+    },
     "node_modules/tr46": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-1.0.1.tgz",
@@ -7178,6 +7218,18 @@
       "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
       "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA=="
     },
+    "@mastojs/ponyfills": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@mastojs/ponyfills/-/ponyfills-1.0.4.tgz",
+      "integrity": "sha512-1NaIGmcU7OmyNzx0fk+cYeGTkdXlOJOSdetaC4pStVWsrhht2cdlYSAfe5NDW3FcUmcEm2vVceB9lcClN1RCxw==",
+      "requires": {
+        "@types/node": "^18.11.17",
+        "@types/node-fetch": "^2.6.2",
+        "abort-controller": "^3.0.0",
+        "form-data": "^4.0.0",
+        "node-fetch": "^2.6.7"
+      }
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -7406,8 +7458,28 @@
     "@types/node": {
       "version": "18.11.17",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.17.tgz",
-      "integrity": "sha512-HJSUJmni4BeDHhfzn6nF0sVmd1SMezP7/4F0Lq+aXzmp2xm9O7WXrUtHW/CHlYVtZUbByEvWidHqRtcJXGF2Ng==",
+      "integrity": "sha512-HJSUJmni4BeDHhfzn6nF0sVmd1SMezP7/4F0Lq+aXzmp2xm9O7WXrUtHW/CHlYVtZUbByEvWidHqRtcJXGF2Ng=="
-      "dev": true
+    },
+    "@types/node-fetch": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/@types/node-fetch/-/node-fetch-2.6.2.tgz",
+      "integrity": "sha512-DHqhlq5jeESLy19TYhLakJ07kNumXWjcDdxXsLUMJZ6ue8VZJj4kLPQVE/2mdHh3xZziNF1xppu5lwmS53HR+A==",
+      "requires": {
+        "@types/node": "*",
+        "form-data": "^3.0.0"
+      },
+      "dependencies": {
+        "form-data": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.1.tgz",
+          "integrity": "sha512-RHkBKtLWUVwd7SqRIvCZMEvAMoGUp0XU+seQiZejj0COz3RI3hWP4sCv3gZWWLjJTd7rGwcsF5eKZGii0r/hbg==",
+          "requires": {
+            "asynckit": "^0.4.0",
+            "combined-stream": "^1.0.8",
+            "mime-types": "^2.1.12"
+          }
+        }
+      }
     },
     "@types/resolve": {
       "version": "1.17.1",
@@ -7499,6 +7571,14 @@
       "dev": true,
       "peer": true
     },
+    "abort-controller": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
+      "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
+      "requires": {
+        "event-target-shim": "^5.0.0"
+      }
+    },
     "acorn": {
       "version": "8.8.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.1.tgz",
@@ -7562,16 +7642,6 @@
         "postcss-value-parser": "^4.2.0"
       }
     },
-    "axios": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.1.3.tgz",
-      "integrity": "sha512-00tXVRwKx/FZr/IDVFt4C+f9FYairX517WoGCL6dpOntqLkZofjhu43F/Xl44UOpqa+9sLFDrG/XAnFsUYgkDA==",
-      "requires": {
-        "follow-redirects": "^1.15.0",
-        "form-data": "^4.0.0",
-        "proxy-from-env": "^1.1.0"
-      }
-    },
     "babel-plugin-polyfill-corejs2": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.3.tgz",
@@ -7958,6 +8028,11 @@
       "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
       "dev": true
     },
+    "event-target-shim": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
+      "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ=="
+    },
     "eventemitter3": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.0.tgz",
@@ -8040,11 +8115,6 @@
         "to-regex-range": "^5.0.1"
       }
     },
-    "follow-redirects": {
-      "version": "1.15.2",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
-      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
-    },
     "form-data": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
@@ -8439,26 +8509,6 @@
         "call-bind": "^1.0.2"
       }
     },
-    "isomorphic-form-data": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/isomorphic-form-data/-/isomorphic-form-data-2.0.0.tgz",
-      "integrity": "sha512-TYgVnXWeESVmQSg4GLVbalmQ+B4NPi/H4eWxqALKj63KsUrcu301YDjBqaOw3h+cbak7Na4Xyps3BiptHtxTfg==",
-      "requires": {
-        "form-data": "^2.3.2"
-      },
-      "dependencies": {
-        "form-data": {
-          "version": "2.5.1",
-          "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.5.1.tgz",
-          "integrity": "sha512-m21N3WOmEEURgk6B9GLOE4RuWOFf28Lhh9qGYeNlGq4VDXUlJy2th2slBNU8Gp8EzloYZOibZJ7t5ecIrFSjVA==",
-          "requires": {
-            "asynckit": "^0.4.0",
-            "combined-stream": "^1.0.6",
-            "mime-types": "^2.1.12"
-          }
-        }
-      }
-    },
     "isomorphic-ws": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/isomorphic-ws/-/isomorphic-ws-5.0.0.tgz",
@@ -8685,14 +8735,13 @@
       }
     },
     "masto": {
-      "version": "4.11.1",
+      "version": "5.0.5",
-      "resolved": "https://registry.npmjs.org/masto/-/masto-4.11.1.tgz",
+      "resolved": "https://registry.npmjs.org/masto/-/masto-5.0.5.tgz",
-      "integrity": "sha512-siTQNhfLV1JjOERCGgjagMvD6q0K0hLuhOXrbXNcYzHAwpbPeSeAM6CSpIRrZ8zFDepOR62Djs/GtJdTR21Rfw==",
+      "integrity": "sha512-/iRuSnn2ieVfUIemm4kE/91VXAw/dUoJ/GCtebNxoFZIe/ca8xyPV/9cL7jdquc8RPNDr8ribwVUQO5DccfB8w==",
       "requires": {
-        "axios": "1.1.3",
+        "@mastojs/ponyfills": "^1.0.4",
         "change-case": "^4.1.2",
         "eventemitter3": "^5.0.0",
-        "isomorphic-form-data": "^2.0.0",
         "isomorphic-ws": "^5.0.0",
         "semver": "^7.3.7",
         "ws": "^8.8.0"
@@ -8787,6 +8836,35 @@
         "tslib": "^2.0.3"
       }
     },
+    "node-fetch": {
+      "version": "2.6.7",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
+      "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
+      "requires": {
+        "whatwg-url": "^5.0.0"
+      },
+      "dependencies": {
+        "tr46": {
+          "version": "0.0.3",
+          "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+          "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
+        },
+        "webidl-conversions": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+          "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
+        },
+        "whatwg-url": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+          "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+          "requires": {
+            "tr46": "~0.0.3",
+            "webidl-conversions": "^3.0.0"
+          }
+        }
+      }
+    },
     "node-releases": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.6.tgz",
@@ -8941,11 +9019,6 @@
       "resolved": "https://registry.npmjs.org/proxy-compare/-/proxy-compare-2.3.0.tgz",
       "integrity": "sha512-c3L2CcAi7f7pvlD0D7xsF+2CQIW8C3HaYx2Pfgq8eA4HAl3GAH6/dVYsyBbYF/0XJs2ziGLrzmz5fmzPm6A0pQ=="
     },
-    "proxy-from-env": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
-      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
-    },
     "punycode": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
@@ -9341,6 +9414,11 @@
         "is-number": "^7.0.0"
       }
     },
+    "toastify-js": {
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/toastify-js/-/toastify-js-1.12.0.tgz",
+      "integrity": "sha512-HeMHCO9yLPvP9k0apGSdPUWrUbLnxUKNFzgUoZp1PHCLploIX/4DSQ7V8H25ef+h4iO9n0he7ImfcndnN6nDrQ=="
+    },
     "tr46": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-1.0.1.tgz",

package.json

@@ -16,12 +16,13 @@
     "history": "~5.3.0",
     "iconify-icon": "~1.0.2",
     "just-debounce-it": "~3.2.0",
-    "masto": "~4.11.1",
+    "masto": "~5.0.5",
     "mem": "~9.0.2",
     "preact": "~10.11.3",
     "preact-router": "~4.1.0",
     "react-intersection-observer": "~9.4.1",
     "string-length": "~5.0.1",
+    "toastify-js": "~1.12.0",
     "use-resize-observer": "~9.1.0",
     "valtio": "~1.7.6"
   },

src/app.css

@@ -424,6 +424,14 @@ a.mention span {
   left: 50%;
   transform: translate(-50%, 0);
   font-size: 90%;
+  background: linear-gradient(
+    to bottom,
+    var(--button-bg-blur-color),
+    var(--button-bg-color)
+  );
+  backdrop-filter: blur(16px);
+  box-shadow: 0 3px 8px -1px var(--bg-faded-blur-color),
+    0 10px 36px -4px var(--button-bg-blur-color);
 }
 .updates-button .icon {
   vertical-align: top;
@@ -583,22 +591,36 @@ button.carousel-dot[disabled].active {
 }
 .sheet {
   align-self: flex-end;
+  display: flex;
+  flex-direction: column;
   max-height: 90vh;
   max-height: 90dvh;
-  overflow: auto;
+  overflow: hidden;
-  overflow-x: hidden;
   background-color: var(--bg-color);
   width: 100%;
   max-width: calc(40em - 50px - 16px);
   border-radius: 16px 16px 0 0;
-  padding: 16px;
-  padding-left: max(16px, env(safe-area-inset-left));
-  padding-right: max(16px, env(safe-area-inset-right));
-  padding-bottom: max(16px, env(safe-area-inset-bottom));
   box-shadow: 0 -1px 32px var(--divider-color);
   animation: slide-up 0.2s var(--timing-function);
   border: 1px solid var(--outline-color);
+}
+.sheet header {
+  padding: 16px 16px 8px;
+  padding-left: max(16px, env(safe-area-inset-left));
+  padding-right: max(16px, env(safe-area-inset-right));
+}
+.sheet main {
+  overflow: auto;
+  overflow-x: hidden;
   overscroll-behavior: contain;
+  padding: 16px 16px;
+  padding-left: max(16px, env(safe-area-inset-left));
+  padding-right: max(16px, env(safe-area-inset-right));
+  padding-bottom: max(16px, env(safe-area-inset-bottom));
+  mask-image: linear-gradient(to bottom, transparent 0%, black 10px);
+}
+.sheet header + main {
+  padding-top: 0;
 }
 
 /* TAG */
@@ -672,19 +694,15 @@ meter.donut {
   appearance: none;
 }
 
-meter.donut:is(
+meter.donut::-webkit-meter-inner-element,
-    ::-webkit-progress-inner-element,
+meter.donut::-webkit-meter-bar,
-    ::-webkit-progress-bar,
+meter.donut::-webkit-meter-optimum-value,
-    ::-webkit-progress-value,
+meter.donut::-webkit-meter-suboptimum-value,
-    ::-webkit-meter-bar,
+meter.donut::-webkit-meter-even-less-good-value {
-    ::-webkit-meter-optimum-value,
-    ::-webkit-meter-suboptimum-value,
-    ::-webkit-meter-even-less-good-value
-  ) {
   display: none;
 }
 
-meter.donut:is(::-moz-progress-bar, ::-moz-meter-bar) {
+meter.donut::-moz-meter-bar {
   background: transparent;
 }
 
@@ -725,6 +743,28 @@ meter.donut:is(.danger, .explode):after {
   color: var(--red-color);
 }
 
+/* TOAST */
+
+:root .toastify {
+  background-image: linear-gradient(
+    to bottom,
+    var(--button-bg-blur-color),
+    var(--button-bg-color)
+  );
+  backdrop-filter: blur(16px);
+  color: var(--button-text-color);
+  border-radius: 10em;
+  padding: 8px 16px;
+  box-shadow: 0 3px 8px -1px var(--bg-faded-blur-color),
+    0 10px 36px -4px var(--button-bg-blur-color);
+}
+:root .toastify:hover {
+  filter: brightness(1.2);
+}
+:root .toastify:active {
+  filter: brightness(0.8);
+}
+
 @media (min-width: 40em) {
   html,
   body {

src/app.jsx

@@ -1,9 +1,11 @@
 import './app.css';
+import 'toastify-js/src/toastify.css';
 
 import { createHashHistory } from 'history';
 import { login } from 'masto';
-import Router from 'preact-router';
+import Router, { route } from 'preact-router';
 import { useEffect, useLayoutEffect, useState } from 'preact/hooks';
+import Toastify from 'toastify-js';
 import { useSnapshot } from 'valtio';
 
 import Account from './components/account';
@@ -27,7 +29,7 @@ const { VITE_CLIENT_NAME: CLIENT_NAME } = import.meta.env;
 window.__STATES__ = states;
 
 async function startStream() {
-  const stream = await masto.stream.streamUser();
+  const stream = await masto.v1.stream.streamUser();
   console.log('STREAM START', { stream });
   stream.on('update', (status) => {
     console.log('UPDATE', status);
@@ -105,7 +107,7 @@ async function startStream() {
 
 function startVisibility() {
   const handleVisibilityChange = () => {
-    if (document.hidden) {
+    if (document.visibilityState === 'hidden') {
       const timestamp = Date.now();
       store.session.set('lastHidden', timestamp);
     } else {
@@ -119,22 +121,19 @@ function startVisibility() {
           // Buffer for WS reconnect
           (async () => {
             try {
-              const fetchHome = masto.timelines.fetchHome({
+              const fetchHome = masto.v1.timelines.listHome({
-                limit: 2,
+                limit: 1,
-                // Need 2 because "new posts" only appear when there are 2 or more
+              });
+              const fetchNotifications = masto.v1.notifications.list({
+                limit: 1,
               });
-              const fetchNotifications = masto.notifications
-                .iterate({
-                  limit: 1,
-                })
-                .next();
 
               const newStatuses = await fetchHome;
               if (
-                newStatuses.value.length &&
+                newStatuses.length &&
-                newStatuses.value[0].id !== states.home[0].id
+                newStatuses[0].id !== states.home[0].id
               ) {
-                states.homeNew = newStatuses.value.map((status) => {
+                states.homeNew = newStatuses.map((status) => {
                   states.statuses.set(status.id, status);
                   if (status.reblog) {
                     states.statuses.set(status.reblog.id, status.reblog);
@@ -148,8 +147,8 @@ function startVisibility() {
               }
 
               const newNotifications = await fetchNotifications;
-              if (newNotifications.value.length) {
+              if (newNotifications.length) {
-                const notification = newNotifications.value[0];
+                const notification = newNotifications[0];
                 const inNotificationsNew = states.notificationsNew.find(
                   (n) => n.id === notification.id,
                 );
@@ -242,7 +241,7 @@ export function App() {
           timeout: 30_000,
         });
 
-        const mastoAccount = await masto.accounts.verifyCredentials();
+        const mastoAccount = await masto.v1.accounts.verifyCredentials();
 
         console.log({ tokenJSON, mastoAccount });
 
@@ -307,11 +306,11 @@ export function App() {
 
         // Collect instance info
         (async () => {
-          const info = await masto.instances.fetch();
+          const info = await masto.v2.instance.fetch();
           console.log(info);
-          const { uri } = info;
+          const { uri, domain } = info;
           const instances = store.local.getJSON('instances') || {};
-          instances[uri] = info;
+          instances[domain || uri] = info;
           store.local.setJSON('instances', instances);
         })();
       });
@@ -385,6 +384,18 @@ export function App() {
               states.showCompose = false;
               if (newStatus) {
                 states.reloadStatusPage++;
+                const toast = Toastify({
+                  text: 'Status posted. Check it out.',
+                  duration: 10_000, // 10 seconds
+                  gravity: 'bottom',
+                  position: 'center',
+                  // destination: `/#/s/${newStatus.id}`,
+                  onClick: () => {
+                    toast.hideToast();
+                    route(`/s/${newStatus.id}`);
+                  },
+                });
+                toast.showToast();
               }
             }}
           />

src/components/account.css

@@ -12,7 +12,7 @@
   font-size: 95%;
   line-height: 1.4;
 }
-#account-container .note:not(:has(p)) {
+#account-container .note:not(:has(p)):not(:empty) {
   /* Some notes don't have <p> tags, so we need to add some padding */
   padding: 1em 0;
 }

src/components/account.jsx

@@ -20,7 +20,7 @@ function Account({ account }) {
       setUIState('loading');
       (async () => {
         try {
-          const info = await masto.accounts.lookup({
+          const info = await masto.v1.accounts.lookup({
             acct: account,
             skip_webfinger: false,
           });
@@ -69,7 +69,9 @@ function Account({ account }) {
       setRelationshipUIState('loading');
       (async () => {
         try {
-          const relationships = await masto.accounts.fetchRelationships([id]);
+          const relationships = await masto.v1.accounts.fetchRelationships([
+            id,
+          ]);
           console.log('fetched relationship', relationships);
           if (relationships.length) {
             setRelationship(relationships[0]);
@@ -108,15 +110,17 @@ function Account({ account }) {
             <Avatar size="xxxl" />
             ███ ████████████
           </header>
-          <div class="note">
+          <main>
-            <p>████████ ███████</p>
+            <div class="note">
-            <p>███████████████ ███████████████</p>
+              <p>████████ ███████</p>
-          </div>
+              <p>███████████████ ███████████████</p>
-          <p class="stats">
+            </div>
-            <span>██ Posts</span>
+            <p class="stats">
-            <span>██ Following</span>
+              <span>██ Posts</span>
-            <span>██ Followers</span>
+              <span>██ Following</span>
-          </p>
+              <span>██ Followers</span>
+            </p>
+          </main>
         </>
       ) : (
         <>
@@ -124,96 +128,110 @@ function Account({ account }) {
             <Avatar url={avatar} size="xxxl" />
             <NameText account={info} showAcct external />
           </header>
-          <div
+          <main>
-            class="note"
+            <div
-            dangerouslySetInnerHTML={{
+              class="note"
-              __html: enhanceContent(note, { emojis }),
+              dangerouslySetInnerHTML={{
-            }}
+                __html: enhanceContent(note, { emojis }),
-          />
+              }}
-          {fields?.length > 0 && (
+            />
-            <div class="profile-metadata">
+            {fields?.length > 0 && (
-              {fields.map(({ name, value, verifiedAt }) => (
+              <div class="profile-metadata">
-                <div
+                {fields.map(({ name, value, verifiedAt }) => (
-                  class={`profile-field ${
+                  <div
-                    verifiedAt ? 'profile-verified' : ''
+                    class={`profile-field ${
-                  }`}
+                      verifiedAt ? 'profile-verified' : ''
-                  key={name}
+                    }`}
-                >
+                    key={name}
-                  <b>
+                  >
-                    {name}{' '}
+                    <b>
-                    {!!verifiedAt && <Icon icon="check-circle" size="s" />}
+                      {name}{' '}
-                  </b>
+                      {!!verifiedAt && <Icon icon="check-circle" size="s" />}
-                  <p
+                    </b>
-                    dangerouslySetInnerHTML={{
+                    <p
-                      __html: value,
+                      dangerouslySetInnerHTML={{
-                    }}
+                        __html: value,
-                  />
+                      }}
-                </div>
+                    />
-              ))}
+                  </div>
-            </div>
+                ))}
-          )}
+              </div>
-          <p class="stats">
+            )}
-            <span>
+            <p class="stats">
-              <b title={statusesCount}>{shortenNumber(statusesCount)}</b> Posts
-            </span>
-            <span>
-              <b title={followingCount}>{shortenNumber(followingCount)}</b>{' '}
-              Following
-            </span>
-            <span>
-              <b title={followersCount}>{shortenNumber(followersCount)}</b>{' '}
-              Followers
-            </span>
-            {!!createdAt && (
               <span>
-                Joined:{' '}
+                <b title={statusesCount}>{shortenNumber(statusesCount)}</b>{' '}
-                <b>
+                Posts
-                  <time datetime={createdAt}>
-                    {Intl.DateTimeFormat('en', {
-                      year: 'numeric',
-                      month: 'short',
-                      day: 'numeric',
-                    }).format(new Date(createdAt))}
-                  </time>
-                </b>
               </span>
-            )}
+              <span>
-          </p>
+                <b title={followingCount}>{shortenNumber(followingCount)}</b>{' '}
-          <p class="actions">
+                Following
-            {followedBy ? <span class="tag">Following you</span> : <span />}{' '}
+              </span>
-            {relationshipUIState !== 'loading' && relationship && (
+              <span>
-              <button
+                <b title={followersCount}>{shortenNumber(followersCount)}</b>{' '}
-                type="button"
+                Followers
-                class={`${following ? 'light danger' : ''}`}
+              </span>
-                disabled={relationshipUIState === 'loading'}
+              {!!createdAt && (
-                onClick={() => {
+                <span>
-                  setRelationshipUIState('loading');
+                  Joined:{' '}
-                  (async () => {
+                  <b>
-                    try {
+                    <time datetime={createdAt}>
-                      let newRelationship;
+                      {Intl.DateTimeFormat('en', {
-                      if (following) {
+                        year: 'numeric',
-                        const yes = confirm(
+                        month: 'short',
-                          'Are you sure that you want to unfollow this account?',
+                        day: 'numeric',
-                        );
+                      }).format(new Date(createdAt))}
-                        if (yes) {
+                    </time>
-                          newRelationship = await masto.accounts.unfollow(id);
+                  </b>
+                </span>
+              )}
+            </p>
+            <p class="actions">
+              {followedBy ? <span class="tag">Following you</span> : <span />}{' '}
+              {relationshipUIState !== 'loading' && relationship && (
+                <button
+                  type="button"
+                  class={`${following ? 'light' : ''} swap`}
+                  data-swap-state="danger"
+                  disabled={relationshipUIState === 'loading'}
+                  onClick={() => {
+                    setRelationshipUIState('loading');
+                    (async () => {
+                      try {
+                        let newRelationship;
+                        if (following) {
+                          const yes = confirm(
+                            'Are you sure that you want to unfollow this account?',
+                          );
+                          if (yes) {
+                            newRelationship = await masto.v1.accounts.unfollow(
+                              id,
+                            );
+                          }
+                        } else {
+                          newRelationship = await masto.v1.accounts.follow(id);
                         }
-                      } else {
+                        if (newRelationship) setRelationship(newRelationship);
-                        newRelationship = await masto.accounts.follow(id);
+                        setRelationshipUIState('default');
+                      } catch (e) {
+                        alert(e);
+                        setRelationshipUIState('error');
                       }
-                      if (newRelationship) setRelationship(newRelationship);
+                    })();
-                      setRelationshipUIState('default');
+                  }}
-                    } catch (e) {
+                >
-                      alert(e);
+                  {following ? (
-                      setRelationshipUIState('error');
+                    <>
-                    }
+                      <span>Following</span>
-                  })();
+                      <span>Unfollow…</span>
-                }}
+                    </>
-              >
+                  ) : (
-                {following ? 'Unfollow…' : 'Follow'}
+                    'Follow'
-              </button>
+                  )}
-            )}
+                  {/* {following ? 'Unfollow…' : 'Follow'} */}
-          </p>
+                </button>
+              )}
+            </p>
+          </main>
         </>
       )}
     </div>

src/components/compose.jsx

@@ -90,9 +90,14 @@ function Compose({
   const customEmojis = useRef();
   useEffect(() => {
     (async () => {
-      const emojis = await masto.customEmojis.fetchAll();
+      try {
-      console.log({ emojis });
+        const emojis = await masto.v1.customEmojis.list();
-      customEmojis.current = emojis;
+        console.log({ emojis });
+        customEmojis.current = emojis;
+      } catch (e) {
+        // silent fail
+        console.error(e);
+      }
     })();
   }, []);
 
@@ -161,7 +166,9 @@ function Compose({
       setUIState('loading');
       (async () => {
         try {
-          const statusSource = await masto.statuses.fetchSource(editStatus.id);
+          const statusSource = await masto.v1.statuses.fetchSource(
+            editStatus.id,
+          );
           console.log({ statusSource });
           const { text, spoilerText } = statusSource;
           textareaRef.current.value = text;
@@ -236,15 +243,16 @@ function Compose({
         }[key];
         provide(
           new Promise((resolve) => {
-            const resultsIterator = masto.search({
+            const searchResults = masto.v2.search({
               type,
               q: text,
               limit: 5,
             });
-            resultsIterator.next().then(({ value }) => {
+            searchResults.then((value) => {
               if (text !== textExpanderTextRef.current) {
                 return;
               }
+              console.log({ value, type, v: value[type] });
               const results = value[type];
               console.log('RESULTS', value, results);
               let html = '';
@@ -268,7 +276,7 @@ function Compose({
                         )}" width="16" height="16" alt="" loading="lazy" />
                       </span>
                       <span>
-                        <b>${encodeHTML(displayNameWithEmoji || username)}</b>
+                        <b>${displayNameWithEmoji || username}</b>
                         <br>@${encodeHTML(acct)}
                       </span>
                     </li>
@@ -614,16 +622,18 @@ function Compose({
                     // If already uploaded
                     return attachment;
                   } else {
-                    const params = {
+                    const params = removeNullUndefined({
                       file,
                       description,
-                    };
-                    return masto.mediaAttachments.create(params).then((res) => {
-                      if (res.id) {
-                        attachment.id = res.id;
-                      }
-                      return res;
                     });
+                    return masto.v2.mediaAttachments
+                      .create(params)
+                      .then((res) => {
+                        if (res.id) {
+                          attachment.id = res.id;
+                        }
+                        return res;
+                      });
                   }
                 });
                 const results = await Promise.allSettled(mediaPromises);
@@ -648,24 +658,35 @@ function Compose({
                 console.log({ results, mediaAttachments });
               }
 
-              const params = {
+              /* NOTE:
+                Using snakecase here because masto.js's `isObject` returns false for `params`, ONLY happens when opening in pop-out window. This is maybe due to `window.masto` variable being passed from the parent window. The check that failed is `x.constructor === Object`, so maybe the `Object` in new window is different than parent window's?
+                Code: https://github.com/neet/masto.js/blob/dd0d649067b6a2b6e60fbb0a96597c373a255b00/src/serializers/is-object.ts#L2
+              */
+              let params = {
                 status,
-                spoilerText,
+                // spoilerText,
+                spoiler_text: spoilerText,
                 sensitive,
                 poll,
-                mediaIds: mediaAttachments.map((attachment) => attachment.id),
+                // mediaIds: mediaAttachments.map((attachment) => attachment.id),
+                media_ids: mediaAttachments.map((attachment) => attachment.id),
               };
               if (!editStatus) {
                 params.visibility = visibility;
-                params.inReplyToId = replyToStatus?.id || undefined;
+                // params.inReplyToId = replyToStatus?.id || undefined;
+                params.in_reply_to_id = replyToStatus?.id || undefined;
               }
+              params = removeNullUndefined(params);
               console.log('POST', params);
 
               let newStatus;
               if (editStatus) {
-                newStatus = await masto.statuses.update(editStatus.id, params);
+                newStatus = await masto.v1.statuses.update(
+                  editStatus.id,
+                  params,
+                );
               } else {
-                newStatus = await masto.statuses.create(params);
+                newStatus = await masto.v1.statuses.create(params);
               }
               setUIState('default');
 
@@ -1129,4 +1150,13 @@ function countableText(inputText) {
     .replace(usernameRegex, '$1@$3');
 }
 
+function removeNullUndefined(obj) {
+  for (let key in obj) {
+    if (obj[key] === null || obj[key] === undefined) {
+      delete obj[key];
+    }
+  }
+  return obj;
+}
+
 export default Compose;

src/components/modal.css

@@ -13,5 +13,5 @@
 }
 
 #modal-container > .light {
-  backdrop-filter: saturate(.75);
+  backdrop-filter: saturate(0.75);
 }

src/components/name-text.jsx

@@ -5,7 +5,7 @@ import states from '../utils/states';
 
 import Avatar from './avatar';
 
-function NameText({ account, showAvatar, showAcct, short, external }) {
+function NameText({ account, showAvatar, showAcct, short, external, onClick }) {
   const { acct, avatar, avatarStatic, id, url, displayName, emojis } = account;
   let { username } = account;
 
@@ -31,6 +31,7 @@ function NameText({ account, showAvatar, showAcct, short, external }) {
       onClick={(e) => {
         if (external) return;
         e.preventDefault();
+        if (onClick) return onClick(e);
         states.showAccount = account;
       }}
     >

src/components/status.css

@@ -215,6 +215,11 @@
   overflow: hidden;
   position: relative;
 }
+.timeline-deck .status-reblog .status .content {
+  /* Deprioritise long-form boosts */
+  max-height: 40vh;
+  max-height: 40dvh;
+}
 .timeline-deck .status .content.truncated {
   mask-image: linear-gradient(
     to top,
@@ -374,6 +379,7 @@
 }
 .status .media-gif video {
   object-fit: cover;
+  pointer-events: none;
 }
 .status .media-audio {
   border: 0;
@@ -392,18 +398,17 @@
   border: 1px solid var(--outline-color);
   overflow: hidden;
   color: inherit;
-  align-items: center;
+  align-items: stretch;
   background: var(--bg-color);
+  max-height: 160px;
 }
 .card .image {
-  /* min-width: 120px; */
+  width: 35%;
-  width: 50%;
-  max-width: 160px;
   height: auto;
-  min-height: 120px;
+  flex-grow: 1;
-  max-height: 160px;
-  object-fit: cover;
   border-inline-end: 1px solid var(--outline-color);
+  object-fit: cover;
+  aspect-ratio: 1 / 1;
 }
 .card:hover .image {
   animation: position-object 5s ease-in-out 1s 5;
@@ -414,6 +419,8 @@
 .card .meta-container {
   padding: 8px;
   min-width: 0;
+  flex-grow: 1;
+  align-self: center;
 }
 .card .title {
   line-height: 1.25;
@@ -431,10 +438,14 @@
   font-size: smaller;
   opacity: 0.75;
   margin: 0;
-  white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
-  display: block;
+  display: -webkit-box;
+  display: box;
+  -webkit-box-orient: vertical;
+  box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
 }
 .card .meta.domain {
   opacity: 1;
@@ -605,25 +616,20 @@ a.card:hover {
 }
 @keyframes hearted {
   20% {
-    transform: rotate(10deg) scale(1);
+    transform: scale(1.25) translateY(-1px);
   }
-  40% {
+  45% {
-    transform: rotate(-10deg) scale(1.25);
+    transform: scale(1);
   }
-  60% {
+  70% {
-    transform: rotate(10deg) scale(1.75);
+    transform: scale(1.5) translateY(-2px);
-  }
-  80% {
-    transform: rotate(-10deg) scale(2);
   }
   100% {
-    transform: rotate(10deg) scale(2.25);
+    transform: scale(1);
-    opacity: 0;
   }
 }
 .status .action > button.plain.favourite-button.checked .icon {
-  transform-origin: bottom center;
+  animation: hearted 1s ease-out;
-  animation: hearted 1s ease-in-out;
 }
 .status .action > button.plain.bookmark-button.checked {
   color: var(--link-color);
@@ -647,7 +653,7 @@ a.card:hover {
     opacity: 1;
   }
 }
-.status .actions > button.plain.bookmark-button.checked .icon {
+.status .action > button.plain.bookmark-button.checked .icon {
   animation: bookmarked 1s ease-in-out;
 }
 
@@ -665,6 +671,7 @@ a.card:hover {
     var(--bg-faded-color),
     transparent 160px
   );
+  white-space: pre-wrap;
 }
 
 .status .content p code {
@@ -701,7 +708,7 @@ a.card:hover {
 .shortcode-emoji {
   width: 1.2em;
   height: 1.2em;
-  vertical-align: middle;
+  vertical-align: text-bottom;
   object-fit: contain;
 }
 
@@ -712,6 +719,11 @@ a.card:hover {
   min-height: 50dvh;
 }
 
+#edit-history h2 {
+  margin: 0;
+  padding: 0;
+}
+
 #edit-history :is(ol, ol li) {
   list-style: none;
   margin: 0;

src/components/status.jsx

@@ -28,7 +28,7 @@ import Avatar from './avatar';
 import Icon from './icon';
 
 function fetchAccount(id) {
-  return masto.accounts.fetch(id);
+  return masto.v1.accounts.fetch(id);
 }
 const memFetchAccount = mem(fetchAccount);
 
@@ -521,10 +521,12 @@ function Status({
                           reblogsCount: reblogsCount + (reblogged ? -1 : 1),
                         });
                         if (reblogged) {
-                          const newStatus = await masto.statuses.unreblog(id);
+                          const newStatus = await masto.v1.statuses.unreblog(
+                            id,
+                          );
                           states.statuses.set(newStatus.id, newStatus);
                         } else {
-                          const newStatus = await masto.statuses.reblog(id);
+                          const newStatus = await masto.v1.statuses.reblog(id);
                           states.statuses.set(newStatus.id, newStatus);
                           states.statuses.set(
                             newStatus.reblog.id,
@@ -533,6 +535,8 @@ function Status({
                         }
                       } catch (e) {
                         console.error(e);
+                        // Revert optimistism
+                        states.statuses.set(id, status);
                       }
                     }}
                   />
@@ -556,14 +560,18 @@ function Status({
                           favouritesCount + (favourited ? -1 : 1),
                       });
                       if (favourited) {
-                        const newStatus = await masto.statuses.unfavourite(id);
+                        const newStatus = await masto.v1.statuses.unfavourite(
+                          id,
+                        );
                         states.statuses.set(newStatus.id, newStatus);
                       } else {
-                        const newStatus = await masto.statuses.favourite(id);
+                        const newStatus = await masto.v1.statuses.favourite(id);
                         states.statuses.set(newStatus.id, newStatus);
                       }
                     } catch (e) {
                       console.error(e);
+                      // Revert optimistism
+                      states.statuses.set(statusID, status);
                     }
                   }}
                 />
@@ -583,14 +591,18 @@ function Status({
                         bookmarked: !bookmarked,
                       });
                       if (bookmarked) {
-                        const newStatus = await masto.statuses.unbookmark(id);
+                        const newStatus = await masto.v1.statuses.unbookmark(
+                          id,
+                        );
                         states.statuses.set(newStatus.id, newStatus);
                       } else {
-                        const newStatus = await masto.statuses.bookmark(id);
+                        const newStatus = await masto.v1.statuses.bookmark(id);
                         states.statuses.set(newStatus.id, newStatus);
                       }
                     } catch (e) {
                       console.error(e);
+                      // Revert optimistism
+                      states.statuses.set(statusID, status);
                     }
                   }}
                 />
@@ -743,14 +755,19 @@ function Media({ media, showOriginal, onClick = () => {} }) {
             rgbAverageColor && `rgb(${rgbAverageColor.join(',')})`,
         }}
         onClick={(e) => {
-          if (showOriginal && isGIF) {
+          if (isGIF) {
-            try {
+            // Hmm, the videoRef might conflict here
-              if (videoRef.current.paused) {
+            if (showOriginal) {
-                videoRef.current.play();
+              try {
-              } else {
+                if (videoRef.current.paused) {
-                videoRef.current.pause();
+                  videoRef.current.play();
-              }
+                } else {
-            } catch (e) {}
+                  videoRef.current.pause();
+                }
+              } catch (e) {}
+            } else {
+              videoRef.current.pause();
+            }
           }
           onClick(e);
         }}
@@ -936,7 +953,7 @@ function Poll({ poll, readOnly, onUpdate = () => {} }) {
           setUIState('loading');
           (async () => {
             try {
-              const pollResponse = await masto.poll.fetch(id);
+              const pollResponse = await masto.v1.poll.fetch(id);
               onUpdate(pollResponse);
             } catch (e) {
               // Silent fail
@@ -970,10 +987,11 @@ function Poll({ poll, readOnly, onUpdate = () => {} }) {
       {voted || expired ? (
         options.map((option, i) => {
           const { title, votesCount: optionVotesCount } = option;
-          const percentage =
+          const percentage = pollVotesCount
-            ((optionVotesCount / pollVotesCount) * 100).toFixed(
+            ? ((optionVotesCount / pollVotesCount) * 100).toFixed(
-              roundPrecision,
+                roundPrecision,
-            ) || 0;
+              )
+            : 0;
           // check if current poll choice is the leading one
           const isLeading =
             optionVotesCount > 0 &&
@@ -1020,7 +1038,7 @@ function Poll({ poll, readOnly, onUpdate = () => {} }) {
             });
             console.log(votes);
             setUIState('loading');
-            const pollResponse = await masto.poll.vote(id, {
+            const pollResponse = await masto.v1.poll.vote(id, {
               choices: votes,
             });
             console.log(pollResponse);
@@ -1069,7 +1087,7 @@ function Poll({ poll, readOnly, onUpdate = () => {} }) {
                   setUIState('loading');
                   (async () => {
                     try {
-                      const pollResponse = await masto.poll.fetch(id);
+                      const pollResponse = await masto.v1.poll.fetch(id);
                       onUpdate(pollResponse);
                     } catch (e) {
                       // Silent fail
@@ -1113,7 +1131,7 @@ function EditedAtModal({ statusID, onClose = () => {} }) {
     setUIState('loading');
     (async () => {
       try {
-        const editHistory = await masto.statuses.fetchHistory(statusID);
+        const editHistory = await masto.v1.statuses.listHistory(statusID);
         console.log(editHistory);
         setEditHistory(editHistory);
         setUIState('default');
@@ -1128,46 +1146,50 @@ function EditedAtModal({ statusID, onClose = () => {} }) {
 
   return (
     <div id="edit-history" class="sheet">
-      {/* <button type="button" class="close-button plain large" onClick={onClose}>
+      <header>
+        {/* <button type="button" class="close-button plain large" onClick={onClose}>
         <Icon icon="x" alt="Close" />
       </button> */}
-      <h2>Edit History</h2>
+        <h2>Edit History</h2>
-      {uiState === 'error' && <p>Failed to load history</p>}
+        {uiState === 'error' && <p>Failed to load history</p>}
-      {uiState === 'loading' && (
+        {uiState === 'loading' && (
-        <p>
+          <p>
-          <Loader abrupt /> Loading&hellip;
+            <Loader abrupt /> Loading&hellip;
-        </p>
+          </p>
-      )}
+        )}
-      {editHistory.length > 0 && (
+      </header>
-        <ol>
+      <main>
-          {editHistory.map((status) => {
+        {editHistory.length > 0 && (
-            const { createdAt } = status;
+          <ol>
-            const createdAtDate = new Date(createdAt);
+            {editHistory.map((status) => {
-            return (
+              const { createdAt } = status;
-              <li key={createdAt} class="history-item">
+              const createdAtDate = new Date(createdAt);
-                <h3>
+              return (
-                  <time>
+                <li key={createdAt} class="history-item">
-                    {Intl.DateTimeFormat('en', {
+                  <h3>
-                      // Show year if not current year
+                    <time>
-                      year:
+                      {Intl.DateTimeFormat('en', {
-                        createdAtDate.getFullYear() === currentYear
+                        // Show year if not current year
-                          ? undefined
+                        year:
-                          : 'numeric',
+                          createdAtDate.getFullYear() === currentYear
-                      month: 'short',
+                            ? undefined
-                      day: 'numeric',
+                            : 'numeric',
-                      weekday: 'short',
+                        month: 'short',
-                      hour: 'numeric',
+                        day: 'numeric',
-                      minute: '2-digit',
+                        weekday: 'short',
-                      second: '2-digit',
+                        hour: 'numeric',
-                    }).format(createdAtDate)}
+                        minute: '2-digit',
-                  </time>
+                        second: '2-digit',
-                </h3>
+                      }).format(createdAtDate)}
-                <Status status={status} size="s" withinContext readOnly />
+                    </time>
-              </li>
+                  </h3>
-            );
+                  <Status status={status} size="s" withinContext readOnly />
-          })}
+                </li>
-        </ol>
+              );
-      )}
+            })}
+          </ol>
+        )}
+      </main>
     </div>
   );
 }

src/index.css

@@ -172,6 +172,31 @@ button,
   border-radius: 0;
 }
 
+:is(button, .button).swap {
+  display: grid;
+  /* 1 column, 1 row */
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+}
+:is(button, .button).swap > * {
+  grid-column: 1;
+  grid-row: 1;
+  transition: opacity 0.3s;
+}
+:is(button, .button).swap > *:nth-child(2) {
+  opacity: 0;
+}
+:is(button, .button).swap:hover > *:nth-child(2) {
+  opacity: 1;
+}
+:is(button, .button).swap[data-swap-state='danger']:hover {
+  color: var(--red-color);
+  border-color: var(--red-color);
+}
+:is(button, .button).swap:hover > *:nth-child(1) {
+  opacity: 0;
+}
+
 input[type='text'],
 textarea,
 select {

src/pages/home.jsx

@@ -16,18 +16,18 @@ function Home({ hidden }) {
   const [showMore, setShowMore] = useState(false);
 
   const homeIterator = useRef(
-    masto.timelines.iterateHome({
+    masto.v1.timelines.listHome({
       limit: LIMIT,
     }),
-  ).current;
+  );
   async function fetchStatuses(firstLoad) {
-    const allStatuses = await homeIterator.next(
+    if (firstLoad) {
-      firstLoad
+      // Reset iterator
-        ? {
+      homeIterator.current = masto.v1.timelines.listHome({
-            limit: LIMIT,
+        limit: LIMIT,
-          }
+      });
-        : undefined,
+    }
-    );
+    const allStatuses = await homeIterator.current.next();
     if (allStatuses.value <= 0) {
       return { done: true };
     }
@@ -78,6 +78,9 @@ function Home({ hidden }) {
           onClick={() => {
             scrollableRef.current?.scrollTo({ top: 0, behavior: 'smooth' });
           }}
+          onDblClick={() => {
+            loadStatuses(true);
+          }}
         >
           <div class="header-side">
             <button
@@ -107,7 +110,7 @@ function Home({ hidden }) {
               <Icon icon="notification" size="l" alt="Notifications" />
             </a>
           </div>
-          {snapStates.homeNew.length > 1 && (
+          {snapStates.homeNew.length > 0 && (
             <button
               class="updates-button"
               type="button"

src/pages/notifications.jsx

@@ -212,18 +212,18 @@ function Notifications() {
   const [onlyMentions, setOnlyMentions] = useState(false);
 
   const notificationsIterator = useRef(
-    masto.notifications.iterate({
+    masto.v1.notifications.list({
       limit: LIMIT,
     }),
-  ).current;
+  );
   async function fetchNotifications(firstLoad) {
-    const allNotifications = await notificationsIterator.next(
+    if (firstLoad) {
-      firstLoad
+      // Reset iterator
-        ? {
+      notificationsIterator.current = masto.v1.notifications.list({
-            limit: LIMIT,
+        limit: LIMIT,
-          }
+      });
-        : undefined,
+    }
-    );
+    const allNotifications = await notificationsIterator.current.next();
     if (allNotifications.value <= 0) {
       return { done: true };
     }

src/pages/settings.jsx

@@ -5,6 +5,7 @@ import { useRef, useState } from 'preact/hooks';
 import Avatar from '../components/avatar';
 import Icon from '../components/icon';
 import NameText from '../components/name-text';
+import states from '../utils/states';
 import store from '../utils/store';
 
 /*
@@ -24,186 +25,194 @@ function Settings({ onClose }) {
 
   return (
     <div id="settings-container" class="sheet">
-      {/* <button type="button" class="close-button plain large" onClick={onClose}>
+      <main>
+        {/* <button type="button" class="close-button plain large" onClick={onClose}>
         <Icon icon="x" alt="Close" />
       </button> */}
-      <h2>Accounts</h2>
+        <h2>Accounts</h2>
-      <ul class="accounts-list">
+        <ul class="accounts-list">
-        {accounts.map((account, i) => {
+          {accounts.map((account, i) => {
-          const isCurrent = account.info.id === currentAccount;
+            const isCurrent = account.info.id === currentAccount;
-          const isDefault = i === (currentDefault || 0);
+            const isDefault = i === (currentDefault || 0);
-          return (
+            return (
-            <li>
+              <li>
-              <div>
-                {moreThanOneAccount && (
-                  <span class={`current ${isCurrent ? 'is-current' : ''}`}>
-                    <Icon icon="check-circle" alt="Current" />
-                  </span>
-                )}
-                <Avatar url={account.info.avatarStatic} size="xxl" />
-                <NameText account={account.info} showAcct />
-              </div>
-              <div class="actions">
-                {isDefault && moreThanOneAccount && (
-                  <>
-                    <span class="tag">Default</span>{' '}
-                  </>
-                )}
-                {!isCurrent && (
-                  <button
-                    type="button"
-                    class="light"
-                    onClick={() => {
-                      store.session.set('currentAccount', account.info.id);
-                      location.reload();
-                    }}
-                  >
-                    <Icon icon="transfer" /> Switch
-                  </button>
-                )}
                 <div>
-                  {!isDefault && moreThanOneAccount && (
+                  {moreThanOneAccount && (
+                    <span class={`current ${isCurrent ? 'is-current' : ''}`}>
+                      <Icon icon="check-circle" alt="Current" />
+                    </span>
+                  )}
+                  <Avatar url={account.info.avatarStatic} size="xxl" />
+                  <NameText
+                    account={account.info}
+                    showAcct
+                    onClick={() => {
+                      states.showAccount = `${account.info.username}@${account.instanceURL}`;
+                    }}
+                  />
+                </div>
+                <div class="actions">
+                  {isDefault && moreThanOneAccount && (
+                    <>
+                      <span class="tag">Default</span>{' '}
+                    </>
+                  )}
+                  {!isCurrent && (
                     <button
                       type="button"
-                      class="plain small"
+                      class="light"
                       onClick={() => {
-                        // Move account to the top of the list
+                        store.session.set('currentAccount', account.info.id);
-                        accounts.splice(i, 1);
+                        location.reload();
-                        accounts.unshift(account);
-                        store.local.setJSON('accounts', accounts);
-                        setCurrentDefault(i);
                       }}
                     >
-                      Set as default
+                      <Icon icon="transfer" /> Switch
                     </button>
                   )}
-                  {isCurrent && (
+                  <div>
-                    <>
+                    {!isDefault && moreThanOneAccount && (
-                      {' '}
                       <button
                         type="button"
                         class="plain small"
                         onClick={() => {
-                          const yes = confirm(
+                          // Move account to the top of the list
-                            'Are you sure you want to log out?',
-                          );
-                          if (!yes) return;
                           accounts.splice(i, 1);
+                          accounts.unshift(account);
                           store.local.setJSON('accounts', accounts);
-                          location.reload();
+                          setCurrentDefault(i);
                         }}
                       >
-                        Log out
+                        Set as default
                       </button>
-                    </>
+                    )}
-                  )}
+                    {isCurrent && (
+                      <>
+                        {' '}
+                        <button
+                          type="button"
+                          class="plain small"
+                          onClick={() => {
+                            const yes = confirm(
+                              'Are you sure you want to log out?',
+                            );
+                            if (!yes) return;
+                            accounts.splice(i, 1);
+                            store.local.setJSON('accounts', accounts);
+                            location.reload();
+                          }}
+                        >
+                          Log out
+                        </button>
+                      </>
+                    )}
+                  </div>
                 </div>
-              </div>
+              </li>
-            </li>
+            );
-          );
+          })}
-        })}
+        </ul>
-      </ul>
+        {moreThanOneAccount && (
-      {moreThanOneAccount && (
+          <p>
-        <p>
+            <small>
-          <small>
+              Note: <i>Default</i> account will always be used for first load.
-            Note: <i>Default</i> account will always be used for first load.
+              Switched accounts will persist during the session.
-            Switched accounts will persist during the session.
+            </small>
-          </small>
+          </p>
+        )}
+        <p style={{ textAlign: 'end' }}>
+          <a href="/#/login" class="button" onClick={onClose}>
+            Add new account
+          </a>
         </p>
-      )}
+        <h2>Theme</h2>
-      <p style={{ textAlign: 'end' }}>
+        <form
-        <a href="/#/login" class="button" onClick={onClose}>
+          ref={themeFormRef}
-          Add new account
+          onInput={(e) => {
-        </a>
+            console.log(e);
-      </p>
+            e.preventDefault();
-      <h2>Theme</h2>
+            const formData = new FormData(themeFormRef.current);
-      <form
+            const theme = formData.get('theme');
-        ref={themeFormRef}
+            const html = document.documentElement;
-        onInput={(e) => {
-          console.log(e);
-          e.preventDefault();
-          const formData = new FormData(themeFormRef.current);
-          const theme = formData.get('theme');
-          const html = document.documentElement;
 
-          if (theme === 'auto') {
+            if (theme === 'auto') {
-            html.classList.remove('is-light', 'is-dark');
+              html.classList.remove('is-light', 'is-dark');
-          } else {
+            } else {
-            html.classList.toggle('is-light', theme === 'light');
+              html.classList.toggle('is-light', theme === 'light');
-            html.classList.toggle('is-dark', theme === 'dark');
+              html.classList.toggle('is-dark', theme === 'dark');
-          }
+            }
-          document
+            document
-            .querySelector('meta[name="color-scheme"]')
+              .querySelector('meta[name="color-scheme"]')
-            .setAttribute('content', theme);
+              .setAttribute('content', theme);
 
-          if (theme === 'auto') {
+            if (theme === 'auto') {
-            store.local.del('theme');
+              store.local.del('theme');
-          } else {
+            } else {
-            store.local.set('theme', theme);
+              store.local.set('theme', theme);
-          }
+            }
-        }}
+          }}
-      >
+        >
-        <div class="radio-group">
+          <div class="radio-group">
-          <label>
+            <label>
-            <input
+              <input
-              type="radio"
+                type="radio"
-              name="theme"
+                name="theme"
-              value="light"
+                value="light"
-              defaultChecked={currentTheme === 'light'}
+                defaultChecked={currentTheme === 'light'}
-            />
+              />
-            <span>Light</span>
+              <span>Light</span>
-          </label>
+            </label>
-          <label>
+            <label>
-            <input
+              <input
-              type="radio"
+                type="radio"
-              name="theme"
+                name="theme"
-              value="dark"
+                value="dark"
-              defaultChecked={currentTheme === 'dark'}
+                defaultChecked={currentTheme === 'dark'}
-            />
+              />
-            <span>Dark</span>
+              <span>Dark</span>
-          </label>
+            </label>
-          <label>
+            <label>
-            <input
+              <input
-              type="radio"
+                type="radio"
-              name="theme"
+                name="theme"
-              value="auto"
+                value="auto"
-              defaultChecked={
+                defaultChecked={
-                currentTheme !== 'light' && currentTheme !== 'dark'
+                  currentTheme !== 'light' && currentTheme !== 'dark'
-              }
+                }
-            />
+              />
-            <span>Auto</span>
+              <span>Auto</span>
-          </label>
+            </label>
-        </div>
+          </div>
-      </form>
+        </form>
-      <h2>About</h2>
+        <h2>About</h2>
-      <p>
-        <a href="https://github.com/cheeaun/phanpy" target="_blank">
-          Built
-        </a>{' '}
-        by{' '}
-        <a href="https://mastodon.social/@cheeaun" target="_blank">
-          @cheeaun
-        </a>
-        .
-      </p>
-      {__BUILD_TIME__ && (
         <p>
-          Last build:{' '}
+          <a href="https://github.com/cheeaun/phanpy" target="_blank">
-          <relative-time datetime={new Date(__BUILD_TIME__).toISOString()} />{' '}
+            Built
-          {__COMMIT_HASH__ && (
+          </a>{' '}
-            <>
+          by{' '}
-              (
+          <a href="https://mastodon.social/@cheeaun" target="_blank">
-              <a
+            @cheeaun
-                href={`https://github.com/cheeaun/phanpy/commit/${__COMMIT_HASH__}`}
+          </a>
-                target="_blank"
+          .
-              >
-                <code>{__COMMIT_HASH__}</code>
-              </a>
-              )
-            </>
-          )}
         </p>
-      )}
+        {__BUILD_TIME__ && (
+          <p>
+            Last build:{' '}
+            <relative-time datetime={new Date(__BUILD_TIME__).toISOString()} />{' '}
+            {__COMMIT_HASH__ && (
+              <>
+                (
+                <a
+                  href={`https://github.com/cheeaun/phanpy/commit/${__COMMIT_HASH__}`}
+                  target="_blank"
+                >
+                  <code>{__COMMIT_HASH__}</code>
+                </a>
+                )
+              </>
+            )}
+          </p>
+        )}
+      </main>
     </div>
   );
 }

src/pages/status.jsx

@@ -72,8 +72,8 @@ function StatusPage({ id }) {
     }
 
     (async () => {
-      const heroFetch = masto.statuses.fetch(id);
+      const heroFetch = masto.v1.statuses.fetch(id);
-      const contextFetch = masto.statuses.fetchContext(id);
+      const contextFetch = masto.v1.statuses.fetchContext(id);
 
       const hasStatus = snapStates.statuses.has(id);
       let heroStatus = snapStates.statuses.get(id);

src/utils/enhance-content.js

@@ -39,7 +39,7 @@ function enhanceContent(content, opts = {}) {
     const pre = document.createElement('pre');
     // Replace <br /> with newlines
     block.querySelectorAll('br').forEach((br) => br.replaceWith('\n'));
-    pre.innerHTML = `<code>${block.innerText.trim()}</code>`;
+    pre.innerHTML = `<code>${block.innerHTML.trim()}</code>`;
     block.replaceWith(pre);
   });