From abb7f11c124aee9388259ce1a28b22391a25fffe Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 28 Dec 2022 00:15:27 +0800
Subject: [PATCH 01/18] =?UTF-8?q?Fix=20danger=20appearing=20for=20"Follow"?=
 =?UTF-8?q?=20too=20=F0=9F=98=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/account.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/account.jsx b/src/components/account.jsx
index cd36f994..123d2b6e 100644
--- a/src/components/account.jsx
+++ b/src/components/account.jsx
@@ -198,7 +198,7 @@ function Account({ account }) {
                 <button
                   type="button"
                   class={`${following ? 'light' : ''} swap`}
-                  data-swap-state="danger"
+                  data-swap-state={following ? 'danger' : ''}
                   disabled={relationshipUIState === 'loading'}
                   onClick={() => {
                     setRelationshipUIState('loading');

From 2dca345818a49527571b35262f6aacfce46817c6 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 28 Dec 2022 00:24:36 +0800
Subject: [PATCH 02/18] More breathing space after the negative top margin hack

---
 src/pages/notifications.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/pages/notifications.css b/src/pages/notifications.css
index 6c7067c5..6942ff4b 100644
--- a/src/pages/notifications.css
+++ b/src/pages/notifications.css
@@ -3,6 +3,9 @@
   padding: 16px !important;
   gap: 12px;
 }
+.notification.mention {
+  margin-top: 16px;
+}
 .only-mentions .notification:not(.mention),
 .only-mentions .timeline-empty {
   display: none;

From 8b6cae5611e89ebc77e274c13028effcfe69b47d Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 28 Dec 2022 10:49:43 +0800
Subject: [PATCH 03/18] More gradients for headers

---
 src/app.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/app.css b/src/app.css
index 759e8892..e61c04b2 100644
--- a/src/app.css
+++ b/src/app.css
@@ -79,6 +79,7 @@ a.mention span {
   position: sticky;
   top: 0;
   background-color: var(--bg-blur-color);
+  background-image: linear-gradient(to bottom, var(--bg-color), transparent);
   backdrop-filter: saturate(180%) blur(20px);
   border-bottom: 1px solid var(--divider-color);
   z-index: 1;
@@ -792,6 +793,11 @@ meter.donut:is(.danger, .explode):after {
     min-height: 6em;
     border-bottom: 0;
     background-color: var(--bg-faded-blur-color);
+    background-image: linear-gradient(
+      to bottom,
+      var(--bg-faded-color),
+      transparent 50%
+    );
     border-bottom: 0;
     mask-image: linear-gradient(
       rgba(0, 0, 0, 1) 50%,

From fa0ccece327d9804f7dc343ed326b7f201ece608 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 28 Dec 2022 10:51:57 +0800
Subject: [PATCH 04/18] Handle > 4 medias

- Mastodon now doesn't allow >4, so this is for the future or maybe the forks.
- Using grid for better control on how images lay out
---
 src/components/status.css | 45 ++++++++++++++++++++++++---------------
 src/components/status.jsx | 23 +++++++++++---------
 2 files changed, 41 insertions(+), 27 deletions(-)

diff --git a/src/components/status.css b/src/components/status.css
index e3a96cb3..68d82600 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -280,37 +280,48 @@
 
 .status .media-container {
   margin-top: 8px;
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-auto-rows: 1fr;
   gap: 2px;
-  flex-direction: row;
+  height: 160px;
 }
-.status:not(.large) .media-container.media-gt4 {
-  flex-wrap: nowrap;
-  overflow: auto;
+.status .media-container.media-gt2 {
+  height: 200px;
+}
+.status.large :is(.media-container, .media-container.media-gt2) {
+  height: auto;
+  max-height: 80vh;
 }
 .status .media {
-  flex-grow: 1;
-  flex-basis: calc(50% - 8px);
   border-radius: 8px;
   overflow: hidden;
-  max-height: 160px;
   min-height: 80px;
   border: 1px solid var(--outline-color);
 }
-.status .media-container.media-gt2 .media {
-  aspect-ratio: 1 / 1;
+.status .media:only-child {
+  grid-area: span 2 / span 2;
 }
-.status:not(.large) .media-container.media-gt4 .media {
-  min-width: 80px;
+.status .media:first-child:nth-last-child(3) {
+  grid-area: span 2;
 }
+
+.status:not(.large) .media-container.media-gt4 .media:last-child {
+  position: relative;
+}
+.status:not(.large) .media-container.media-gt4 .media:last-child:after {
+  content: '4+';
+  position: absolute;
+  inset: 0;
+  display: flex;
+  place-content: center;
+  place-items: center;
+  background-color: var(--bg-faded-blur-color);
+}
+
 .status .media:hover {
   border-color: var(--outline-hover-color);
 }
-.status .media.block {
-  flex-basis: 100%;
-  max-height: auto;
-}
 .status .media :is(img, video) {
   width: 100%;
   height: 100%;
diff --git a/src/components/status.jsx b/src/components/status.jsx
index 8cd055d6..a0f4c3b8 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -417,16 +417,19 @@ function Status({
                 mediaAttachments.length > 2 ? 'media-gt2' : ''
               } ${mediaAttachments.length > 4 ? 'media-gt4' : ''}`}
             >
-              {mediaAttachments.map((media, i) => (
-                <Media
-                  media={media}
-                  onClick={(e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    setShowMediaModal(i);
-                  }}
-                />
-              ))}
+              {mediaAttachments
+                .slice(0, size === 'l' ? undefined : 4)
+                .map((media, i) => (
+                  <Media
+                    key={media.id}
+                    media={media}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      setShowMediaModal(i);
+                    }}
+                  />
+                ))}
             </div>
           )}
           {!!card &&

From 5869ec3b9fceb18232eba1d86b094eb3ef7e7048 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 28 Dec 2022 10:52:08 +0800
Subject: [PATCH 05/18] Move "Read more" slightly to the left

---
 src/components/status.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/status.css b/src/components/status.css
index 68d82600..0989ddcb 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -234,7 +234,7 @@
   display: inline-block;
   position: absolute;
   inset-block-end: 1.5em;
-  left: 50%;
+  left: 45%;
   transform: translateX(-50%);
   color: var(--text-color);
   background-color: var(--bg-faded-color);

From 3902e436cf111b304dff80d915b2c04fc4aa3ee3 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 28 Dec 2022 11:44:06 +0800
Subject: [PATCH 06/18] Market one new feature

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index 70a5355a..db514c4b 100644
--- a/README.md
+++ b/README.md
@@ -28,6 +28,7 @@ Everything is designed and engineered for my own use case, following my taste an
 - 🪟 Compose window pop-out/in
 - 🌗 Light/dark/auto theme
 - 🔔 Grouped notifications
+- 🪺 Nested replies view
 
 ## Design decisions
 

From 2a2b730b20ac88ea391673c5f61eac48b226b124 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 28 Dec 2022 13:47:11 +0800
Subject: [PATCH 07/18] Try vite-plugin-html-config for conditional embed of
 script

Somehow the vite-if thing not working on vite-plugin-html-env. Leaving it installed since the ENV thing works.
---
 index.html        | 379 -----------------------------------------
 package-lock.json |  20 +++
 package.json      |   1 +
 rollbar.js        | 418 ++++++++++++++++++++++++++++++++++++++++++++++
 vite.config.js    |  19 ++-
 5 files changed, 454 insertions(+), 383 deletions(-)
 create mode 100644 rollbar.js

diff --git a/index.html b/index.html
index 8241283a..7d0514d4 100644
--- a/index.html
+++ b/index.html
@@ -28,385 +28,6 @@
       content="#242526"
       media="(prefers-color-scheme: dark)"
     />
-    <script vite-if="import.meta.env.VITE_APP_ENV === production">
-      var isDev = /dev\./.test(window.location.hostname);
-      var _rollbarConfig = {
-        accessToken: 'ec3e07829d324a29abf6c83472a9740d',
-        captureUncaught: true,
-        captureUnhandledRejections: true,
-        enabled: isDev,
-        hostSafeList: ['dev.phanpy.social', 'phanpy.social'],
-        payload: {
-          environment: isDev ? 'development' : '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>
diff --git a/package-lock.json b/package-lock.json
index f49c1b20..0efe8cbf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -32,6 +32,7 @@
         "postcss-dark-theme-class": "~0.7.3",
         "twitter-text": "~3.1.0",
         "vite": "~4.0.3",
+        "vite-plugin-html-config": "~1.0.11",
         "vite-plugin-html-env": "~1.2.7",
         "vite-plugin-pwa": "~0.14.0",
         "workbox-cacheable-response": "~6.5.4",
@@ -5407,6 +5408,18 @@
         }
       }
     },
+    "node_modules/vite-plugin-html-config": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/vite-plugin-html-config/-/vite-plugin-html-config-1.0.11.tgz",
+      "integrity": "sha512-hUybhgI+/LQQ5q6xoMMsTvI4PBuQD/Wv6Z1vtDPVWjanS8weCIexXuLLYNGD/93f0v8W2hpNfXpmxgpZMahJ0g==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "vite": ">=2.0.0"
+      }
+    },
     "node_modules/vite-plugin-html-env": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/vite-plugin-html-env/-/vite-plugin-html-env-1.2.7.tgz",
@@ -9610,6 +9623,13 @@
         "rollup": "^3.7.0"
       }
     },
+    "vite-plugin-html-config": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/vite-plugin-html-config/-/vite-plugin-html-config-1.0.11.tgz",
+      "integrity": "sha512-hUybhgI+/LQQ5q6xoMMsTvI4PBuQD/Wv6Z1vtDPVWjanS8weCIexXuLLYNGD/93f0v8W2hpNfXpmxgpZMahJ0g==",
+      "dev": true,
+      "requires": {}
+    },
     "vite-plugin-html-env": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/vite-plugin-html-env/-/vite-plugin-html-env-1.2.7.tgz",
diff --git a/package.json b/package.json
index 52a59f00..bf204b31 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "postcss-dark-theme-class": "~0.7.3",
     "twitter-text": "~3.1.0",
     "vite": "~4.0.3",
+    "vite-plugin-html-config": "~1.0.11",
     "vite-plugin-html-env": "~1.2.7",
     "vite-plugin-pwa": "~0.14.0",
     "workbox-cacheable-response": "~6.5.4",
diff --git a/rollbar.js b/rollbar.js
new file mode 100644
index 00000000..2449c5f1
--- /dev/null
+++ b/rollbar.js
@@ -0,0 +1,418 @@
+var isDev = /dev\./.test(window.location.hostname);
+var _rollbarConfig = {
+  accessToken: 'ec3e07829d324a29abf6c83472a9740d',
+  captureUncaught: true,
+  captureUnhandledRejections: true,
+  enabled: isDev,
+  hostSafeList: ['dev.phanpy.social', 'phanpy.social'],
+  payload: {
+    environment: isDev ? 'development' : 'production',
+  },
+};
+
+// Rollbar Snippet
+!(function (r) {
+  var e = {};
+  function o(n) {
+    if (e[n]) return e[n].exports;
+    var t = (e[n] = { i: n, l: !1, exports: {} });
+    return r[n].call(t.exports, t, t.exports, o), (t.l = !0), t.exports;
+  }
+  (o.m = r),
+    (o.c = e),
+    (o.d = function (r, e, n) {
+      o.o(r, e) || Object.defineProperty(r, e, { enumerable: !0, get: n });
+    }),
+    (o.r = function (r) {
+      'undefined' != typeof Symbol &&
+        Symbol.toStringTag &&
+        Object.defineProperty(r, Symbol.toStringTag, { value: 'Module' }),
+        Object.defineProperty(r, '__esModule', { value: !0 });
+    }),
+    (o.t = function (r, e) {
+      if ((1 & e && (r = o(r)), 8 & e)) return r;
+      if (4 & e && 'object' == typeof r && r && r.__esModule) return r;
+      var n = Object.create(null);
+      if (
+        (o.r(n),
+        Object.defineProperty(n, 'default', { enumerable: !0, value: r }),
+        2 & e && 'string' != typeof r)
+      )
+        for (var t in r)
+          o.d(
+            n,
+            t,
+            function (e) {
+              return r[e];
+            }.bind(null, t),
+          );
+      return n;
+    }),
+    (o.n = function (r) {
+      var e =
+        r && r.__esModule
+          ? function () {
+              return r.default;
+            }
+          : function () {
+              return r;
+            };
+      return o.d(e, 'a', e), e;
+    }),
+    (o.o = function (r, e) {
+      return Object.prototype.hasOwnProperty.call(r, e);
+    }),
+    (o.p = ''),
+    o((o.s = 0));
+})([
+  function (r, e, o) {
+    'use strict';
+    var n = o(1),
+      t = o(5);
+    (_rollbarConfig = _rollbarConfig || {}),
+      (_rollbarConfig.rollbarJsUrl =
+        _rollbarConfig.rollbarJsUrl ||
+        'https://cdn.rollbar.com/rollbarjs/refs/tags/v2.26.0/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';
+    var n = o(2),
+      t = o(3);
+    function a(r) {
+      return function () {
+        try {
+          return r.apply(this, arguments);
+        } catch (r) {
+          try {
+            console.error('[Rollbar]: Internal error', r);
+          } catch (r) {}
+        }
+      };
+    }
+    var l = 0;
+    function i(r, e) {
+      (this.options = r), (this._rollbarOldOnError = null);
+      var o = l++;
+      (this.shimId = function () {
+        return o;
+      }),
+        'undefined' != typeof window &&
+          window._rollbarShims &&
+          (window._rollbarShims[o] = { handler: e, messages: [] });
+    }
+    var s = o(4),
+      d = function (r, e) {
+        return new i(r, e);
+      },
+      c = function (r) {
+        return new s(d, r);
+      };
+    function u(r) {
+      return a(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);
+      });
+    }
+    (i.prototype.loadFull = function (r, e, o, n, t) {
+      var l = !1,
+        i = e.createElement('script'),
+        s = e.getElementsByTagName('script')[0],
+        d = s.parentNode;
+      (i.crossOrigin = ''),
+        (i.src = n.rollbarJsUrl),
+        o || (i.async = !0),
+        (i.onload = i.onreadystatechange =
+          a(function () {
+            if (
+              !(
+                l ||
+                (this.readyState &&
+                  'loaded' !== this.readyState &&
+                  'complete' !== this.readyState)
+              )
+            ) {
+              i.onload = i.onreadystatechange = null;
+              try {
+                d.removeChild(i);
+              } catch (r) {}
+              (l = !0),
+                (function () {
+                  var e;
+                  if (void 0 === r._rollbarDidLoad) {
+                    e = new Error('rollbar.js did not load');
+                    for (var o, n, a, l, i = 0; (o = r._rollbarShims[i++]); )
+                      for (o = o.messages || []; (n = o.shift()); )
+                        for (a = n.args || [], i = 0; i < a.length; ++i)
+                          if ('function' == typeof (l = a[i])) {
+                            l(e);
+                            break;
+                          }
+                  }
+                  'function' == typeof t && t(e);
+                })();
+            }
+          })),
+        d.insertBefore(i, s);
+    }),
+      (i.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 p =
+          'log,debug,info,warn,warning,error,critical,global,configure,handleUncaughtException,handleAnonymousErrors,handleUnhandledRejection,captureEvent,captureDomContentLoaded,captureLoad'.split(
+            ',',
+          ),
+        f = 0;
+      f < p.length;
+      ++f
+    )
+      i.prototype[p[f]] = u(p[f]);
+    r.exports = {
+      setupShim: function (r, e) {
+        if (r) {
+          var o = e.globalAlias || 'Rollbar';
+          if ('object' == typeof r[o]) return r[o];
+          (r._rollbarShims = {}), (r._rollbarWrappedError = null);
+          var l = new c(e);
+          return a(function () {
+            e.captureUncaught &&
+              ((l._rollbarOldOnError = r.onerror),
+              n.captureUncaughtExceptions(r, l, !0),
+              e.wrapGlobalEventHandlers && t(r, l, !0)),
+              e.captureUnhandledRejections &&
+                n.captureUnhandledRejections(r, l, !0);
+            var a = e.autoInstrument;
+            return (
+              !1 !== e.enabled &&
+                (void 0 === a ||
+                  !0 === a ||
+                  (function (r) {
+                    return !(
+                      'object' != typeof r ||
+                      (void 0 !== r.page && !r.page)
+                    );
+                  })(a)) &&
+                r.addEventListener &&
+                (r.addEventListener('load', l.captureLoad.bind(l)),
+                r.addEventListener(
+                  'DOMContentLoaded',
+                  l.captureDomContentLoaded.bind(l),
+                )),
+              (r[o] = l),
+              l
+            );
+          })();
+        }
+      },
+      Rollbar: c,
+    };
+  },
+  function (r, e, o) {
+    'use strict';
+    function n(r, e, o, n) {
+      r._rollbarWrappedError &&
+        (n[4] || (n[4] = r._rollbarWrappedError),
+        n[5] || (n[5] = r._rollbarWrappedError._rollbarContext),
+        (r._rollbarWrappedError = null));
+      var t = e.handleUncaughtException.apply(e, n);
+      o && o.apply(r, n), 'anonymous' === t && (e.anonymousErrorsPending += 1);
+    }
+    r.exports = {
+      captureUncaughtExceptions: function (r, e, o) {
+        if (r) {
+          var t;
+          if ('function' == typeof e._rollbarOldOnError)
+            t = e._rollbarOldOnError;
+          else if (r.onerror) {
+            for (t = r.onerror; t._rollbarOldOnError; )
+              t = t._rollbarOldOnError;
+            e._rollbarOldOnError = t;
+          }
+          e.handleAnonymousErrors();
+          var a = function () {
+            var o = Array.prototype.slice.call(arguments, 0);
+            n(r, e, t, o);
+          };
+          o && (a._rollbarOldOnError = t), (r.onerror = a);
+        }
+      },
+      captureUnhandledRejections: function (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) {}
+            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 (r, e, o) {
+    'use strict';
+    function n(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 = function (r, e, o) {
+      if (r) {
+        var t,
+          a,
+          l =
+            '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 (t = 0; t < l.length; ++t)
+          r[(a = l[t])] && r[a].prototype && n(e, r[a].prototype, o);
+      }
+    };
+  },
+  function (r, e, o) {
+    'use strict';
+    function n(r, e) {
+      (this.impl = r(e, this)),
+        (this.options = e),
+        (function (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,handleAnonymousErrors,handleUnhandledRejection,_createItem,wrap,loadFull,shimId,captureEvent,captureDomContentLoaded,captureLoad'.split(
+                  ',',
+                ),
+              n = 0;
+            n < o.length;
+            n++
+          )
+            r[o[n]] = e(o[n]);
+        })(n.prototype);
+    }
+    (n.prototype._swapAndProcessMessages = function (r, e) {
+      var o, n, t;
+      for (this.impl = r(this.options); (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 = n);
+  },
+  function (r, e, o) {
+    'use strict';
+    r.exports = function (r) {
+      return function (e) {
+        if (!e && !window._rollbarInitialized) {
+          for (
+            var o,
+              n,
+              t = (r = 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
diff --git a/vite.config.js b/vite.config.js
index 471de1f3..9e0fa720 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,17 +1,25 @@
 import preact from '@preact/preset-vite';
 import { execSync } from 'child_process';
+import fs from 'fs';
 import { resolve } from 'path';
 import { defineConfig, loadEnv, splitVendorChunkPlugin } from 'vite';
+import htmlPlugin from 'vite-plugin-html-config';
 import VitePluginHtmlEnv from 'vite-plugin-html-env';
 import { VitePWA } from 'vite-plugin-pwa';
 
-const { VITE_CLIENT_NAME: CLIENT_NAME, NODE_ENV } = loadEnv(
-  'production',
-  process.cwd(),
-);
+const {
+  VITE_CLIENT_NAME: CLIENT_NAME,
+  NODE_ENV,
+  VITE_APP_ERROR_LOGGING,
+} = loadEnv('production', process.cwd());
 
 const commitHash = execSync('git rev-parse --short HEAD').toString().trim();
 
+const rollbarCode = fs.readFileSync(
+  resolve(__dirname, './rollbar.js'),
+  'utf-8',
+);
+
 // https://vitejs.dev/config/
 export default defineConfig({
   mode: NODE_ENV,
@@ -23,6 +31,9 @@ export default defineConfig({
     preact(),
     splitVendorChunkPlugin(),
     VitePluginHtmlEnv(),
+    htmlPlugin({
+      headScripts: VITE_APP_ERROR_LOGGING ? [rollbarCode] : [],
+    }),
     VitePWA({
       manifest: {
         name: CLIENT_NAME,

From 23a6cdbe3bdc897356a660d0ed439108098f6623 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 28 Dec 2022 14:43:58 +0800
Subject: [PATCH 08/18] Fix video alignment

---
 src/app.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/app.css b/src/app.css
index e61c04b2..fe1c15fb 100644
--- a/src/app.css
+++ b/src/app.css
@@ -477,9 +477,11 @@ a.mention span {
   height: auto;
   max-height: 100vh;
   max-height: 100dvh;
+  vertical-align: middle;
 }
 .carousel > * video {
   min-height: 80px;
+  max-height: 80vh; /* prevent other UI elements from obscuring video */
 }
 
 .carousel-top-controls {

From 422a924844fe74344e1a25234d255c2d086d4ade Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 28 Dec 2022 14:47:39 +0800
Subject: [PATCH 09/18] Make GIF autoplay on Mobile Safari

Only in carousel, and seems like `autoplay` with `muted` ain't working in (P)react.
---
 src/components/status.jsx | 46 ++++++++++++++++++---------------------
 1 file changed, 21 insertions(+), 25 deletions(-)

diff --git a/src/components/status.jsx b/src/components/status.jsx
index a0f4c3b8..c60db56e 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -759,19 +759,10 @@ function Media({ media, showOriginal, onClick = () => {} }) {
             rgbAverageColor && `rgb(${rgbAverageColor.join(',')})`,
         }}
         onClick={(e) => {
-          if (isGIF) {
-            // Hmm, the videoRef might conflict here
-            if (showOriginal) {
-              try {
-                if (videoRef.current.paused) {
-                  videoRef.current.play();
-                } else {
-                  videoRef.current.pause();
-                }
-              } catch (e) {}
-            } else {
+          if (!showOriginal && isGIF) {
+            try {
               videoRef.current.pause();
-            }
+            } catch (e) {}
           }
           onClick(e);
         }}
@@ -791,19 +782,24 @@ function Media({ media, showOriginal, onClick = () => {} }) {
         }}
       >
         {showOriginal ? (
-          <video
-            ref={videoRef}
-            src={url}
-            poster={previewUrl}
-            width={width}
-            height={height}
-            preload="auto"
-            autoplay
-            muted={isGIF}
-            controls={!isGIF}
-            playsinline
-            loop={loopable}
-          ></video>
+          <div
+            dangerouslySetInnerHTML={{
+              __html: `
+                <video
+                  src="${url}"
+                  poster="${previewUrl}"
+                  width="${width}"
+                  height="${height}"
+                  preload="auto"
+                  autoplay
+                  muted="${isGIF}"
+                  ${isGIF ? '' : 'controls'}
+                  playsinline
+                  loop="${loopable}"
+                ></video>
+              `,
+            }}
+          />
         ) : isGIF ? (
           <video
             ref={videoRef}

From 44617cffca5a510a8fbd22e423126941e48c7e3a Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 28 Dec 2022 18:04:58 +0800
Subject: [PATCH 10/18] Make sure bottom toast respect safe area

---
 src/app.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/app.css b/src/app.css
index fe1c15fb..e611cfb0 100644
--- a/src/app.css
+++ b/src/app.css
@@ -764,6 +764,9 @@ meter.donut:is(.danger, .explode):after {
   box-shadow: 0 3px 8px -1px var(--bg-faded-blur-color),
     0 10px 36px -4px var(--button-bg-blur-color);
 }
+.toastify-bottom {
+  margin-bottom: env(safe-area-inset-bottom);
+}
 :root .toastify:hover {
   filter: brightness(1.2);
 }

From 02c464a139bf457f7272f640019ed47c2dd836af Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 28 Dec 2022 18:05:22 +0800
Subject: [PATCH 11/18] Delay showing "status posted" toast

---
 src/app.jsx | 26 ++++++++++++++------------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/app.jsx b/src/app.jsx
index cfe88e54..adf5578f 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -384,18 +384,20 @@ 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();
+                setTimeout(() => {
+                  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();
+                }, 1000);
               }
             }}
           />

From 7e3733d79e197a8a2785f06f98379f7b95545c13 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 28 Dec 2022 18:06:05 +0800
Subject: [PATCH 12/18] Delay hero status fetch if already cached

The context call is more important
---
 src/pages/status.jsx | 31 +++++++++++++++++++++++--------
 1 file changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/pages/status.jsx b/src/pages/status.jsx
index e05d198e..5a5d1b13 100644
--- a/src/pages/status.jsx
+++ b/src/pages/status.jsx
@@ -51,6 +51,7 @@ function StatusPage({ id }) {
 
   useEffect(() => {
     setUIState('loading');
+    let heroTimer;
 
     const cachedStatuses = store.session.getJSON('statuses-' + id);
     if (cachedStatuses) {
@@ -73,18 +74,28 @@ function StatusPage({ id }) {
     }
 
     (async () => {
-      const heroFetch = masto.v1.statuses.fetch(id);
+      const heroFetch = () => masto.v1.statuses.fetch(id);
       const contextFetch = masto.v1.statuses.fetchContext(id);
 
       const hasStatus = snapStates.statuses.has(id);
       let heroStatus = snapStates.statuses.get(id);
-      try {
-        heroStatus = await heroFetch;
-        states.statuses.set(id, heroStatus);
-      } catch (e) {
-        // Silent fail if status is cached
-        console.error(e);
-        if (!hasStatus) {
+      if (hasStatus) {
+        console.log('Hero status is cached');
+        heroTimer = setTimeout(async () => {
+          try {
+            heroStatus = await heroFetch();
+            states.statuses.set(id, heroStatus);
+          } catch (e) {
+            // Silent fail if status is cached
+            console.error(e);
+          }
+        }, 1000);
+      } else {
+        try {
+          heroStatus = await heroFetch();
+          states.statuses.set(id, heroStatus);
+        } catch (e) {
+          console.error(e);
           setUIState('error');
           alert('Error fetching status');
           return;
@@ -153,6 +164,10 @@ function StatusPage({ id }) {
         setUIState('error');
       }
     })();
+
+    return () => {
+      clearTimeout(heroTimer);
+    };
   }, [id, snapStates.reloadStatusPage]);
 
   const firstLoad = useRef(true);

From 86df9fd9f89c606314255c3f124a4e769a3f036f Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 28 Dec 2022 19:31:08 +0800
Subject: [PATCH 13/18] Tap media to toggle carousel controls

---
 src/app.css               |  6 ++++++
 src/components/status.jsx | 11 +++++++++--
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/app.css b/src/app.css
index e611cfb0..d429974b 100644
--- a/src/app.css
+++ b/src/app.css
@@ -505,6 +505,9 @@ a.mention span {
   text-align: center;
   pointer-events: none;
 }
+:is(.carousel-top-controls, .carousel-controls)[hidden] {
+  opacity: 0;
+}
 
 button.carousel-button,
 button.carousel-dot {
@@ -549,6 +552,9 @@ button.carousel-dot[disabled].active {
     transform: translateY(100%);
     transition: transform 0.2s ease-in-out;
   }
+  :is(.carousel-top-controls, .carousel-controls)[hidden] {
+    opacity: 1;
+  }
   .carousel:hover + .carousel-top-controls,
   .carousel:hover + .carousel-top-controls + .carousel-controls,
   .carousel-top-controls:hover,
diff --git a/src/components/status.jsx b/src/components/status.jsx
index c60db56e..4fa862d6 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -1268,6 +1268,8 @@ function Carousel({ mediaAttachments, index = 0, onClose = () => {} }) {
     }
   }, 100);
 
+  const [showControls, setShowControls] = useState(false);
+
   return (
     <>
       <div
@@ -1301,13 +1303,18 @@ function Carousel({ mediaAttachments, index = 0, onClose = () => {} }) {
               root={carouselRef.current}
               threshold={1}
               onChange={(inView) => onSnap(inView, i)}
+              onClick={(e) => {
+                if (e.target !== e.currentTarget) {
+                  setShowControls(!showControls);
+                }
+              }}
             >
               <Media media={media} showOriginal />
             </InView>
           );
         })}
       </div>
-      <div class="carousel-top-controls">
+      <div class="carousel-top-controls" hidden={!showControls}>
         <span />
         <button
           type="button"
@@ -1318,7 +1325,7 @@ function Carousel({ mediaAttachments, index = 0, onClose = () => {} }) {
         </button>
       </div>
       {mediaAttachments?.length > 1 && (
-        <div class="carousel-controls">
+        <div class="carousel-controls" hidden={!showControls}>
           <button
             type="button"
             class="carousel-button plain2"

From 7200acc2a714c06ca5d8996161c4f200dd049ba7 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 28 Dec 2022 19:43:02 +0800
Subject: [PATCH 14/18] Swipe down for closing carousel

---
 package-lock.json         | 11 +++++++++++
 package.json              |  1 +
 src/components/status.jsx | 16 ++++++++++++++++
 3 files changed, 28 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 0efe8cbf..904ec235 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
         "preact-router": "~4.1.0",
         "react-intersection-observer": "~9.4.1",
         "string-length": "~5.0.1",
+        "swiped-events": "~1.1.7",
         "toastify-js": "~1.12.0",
         "use-resize-observer": "~9.1.0",
         "valtio": "~1.8.0"
@@ -5041,6 +5042,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/swiped-events": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/swiped-events/-/swiped-events-1.1.7.tgz",
+      "integrity": "sha512-bxEy7djwuLykZpPfoE4IFsbna/ngACEpyPqw9tBOaPQtAshsRK7H5CxoCgSXr0QRQ+7rd2TT3bSKLL3R6xJFwg=="
+    },
     "node_modules/temp-dir": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-2.0.0.tgz",
@@ -9395,6 +9401,11 @@
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
       "devOptional": true
     },
+    "swiped-events": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/swiped-events/-/swiped-events-1.1.7.tgz",
+      "integrity": "sha512-bxEy7djwuLykZpPfoE4IFsbna/ngACEpyPqw9tBOaPQtAshsRK7H5CxoCgSXr0QRQ+7rd2TT3bSKLL3R6xJFwg=="
+    },
     "temp-dir": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-2.0.0.tgz",
diff --git a/package.json b/package.json
index bf204b31..6cbdcb8a 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "preact-router": "~4.1.0",
     "react-intersection-observer": "~9.4.1",
     "string-length": "~5.0.1",
+    "swiped-events": "~1.1.7",
     "toastify-js": "~1.12.0",
     "use-resize-observer": "~9.1.0",
     "valtio": "~1.8.0"
diff --git a/src/components/status.jsx b/src/components/status.jsx
index 4fa862d6..b9ed83b4 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -10,6 +10,7 @@ import {
   useState,
 } from 'preact/hooks';
 import { InView } from 'react-intersection-observer';
+import 'swiped-events';
 import useResizeObserver from 'use-resize-observer';
 import { useSnapshot } from 'valtio';
 
@@ -1270,10 +1271,25 @@ function Carousel({ mediaAttachments, index = 0, onClose = () => {} }) {
 
   const [showControls, setShowControls] = useState(false);
 
+  useEffect(() => {
+    let handleSwipe = () => {
+      onClose();
+    };
+    if (carouselRef.current) {
+      carouselRef.current.addEventListener('swiped-down', handleSwipe);
+    }
+    return () => {
+      if (carouselRef.current) {
+        carouselRef.current.removeEventListener('swiped-down', handleSwipe);
+      }
+    };
+  }, []);
+
   return (
     <>
       <div
         ref={carouselRef}
+        data-swipe-threshold="44"
         class="carousel"
         onClick={(e) => {
           if (

From 0feee7ea9329b4636e75432b08118ea0ec0f5168 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 28 Dec 2022 20:02:28 +0800
Subject: [PATCH 15/18] Delay onClose after swipe

---
 src/components/status.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/status.jsx b/src/components/status.jsx
index b9ed83b4..05a156cd 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -1272,8 +1272,9 @@ function Carousel({ mediaAttachments, index = 0, onClose = () => {} }) {
   const [showControls, setShowControls] = useState(false);
 
   useEffect(() => {
+    let swipeTimeout;
     let handleSwipe = () => {
-      onClose();
+      swipeTimeout = setTimeout(onClose, 500);
     };
     if (carouselRef.current) {
       carouselRef.current.addEventListener('swiped-down', handleSwipe);
@@ -1282,6 +1283,7 @@ function Carousel({ mediaAttachments, index = 0, onClose = () => {} }) {
       if (carouselRef.current) {
         carouselRef.current.removeEventListener('swiped-down', handleSwipe);
       }
+      clearTimeout(swipeTimeout);
     };
   }, []);
 

From e32c6c64739dd27ef03b6ef72a06eb74cec63dbe Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 28 Dec 2022 20:35:49 +0800
Subject: [PATCH 16/18] Revert "Delay onClose after swipe"

This reverts commit 0feee7ea9329b4636e75432b08118ea0ec0f5168.
---
 src/components/status.jsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/status.jsx b/src/components/status.jsx
index 05a156cd..b9ed83b4 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -1272,9 +1272,8 @@ function Carousel({ mediaAttachments, index = 0, onClose = () => {} }) {
   const [showControls, setShowControls] = useState(false);
 
   useEffect(() => {
-    let swipeTimeout;
     let handleSwipe = () => {
-      swipeTimeout = setTimeout(onClose, 500);
+      onClose();
     };
     if (carouselRef.current) {
       carouselRef.current.addEventListener('swiped-down', handleSwipe);
@@ -1283,7 +1282,6 @@ function Carousel({ mediaAttachments, index = 0, onClose = () => {} }) {
       if (carouselRef.current) {
         carouselRef.current.removeEventListener('swiped-down', handleSwipe);
       }
-      clearTimeout(swipeTimeout);
     };
   }, []);
 

From c205a431258b2e4610633a79130a9c9f0642a367 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 28 Dec 2022 20:38:16 +0800
Subject: [PATCH 17/18] Try this fancy touch-action

---
 src/app.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app.css b/src/app.css
index d429974b..7013621d 100644
--- a/src/app.css
+++ b/src/app.css
@@ -456,6 +456,7 @@ a.mention span {
   /* scroll-behavior: smooth; */
   scrollbar-width: none;
   overscroll-behavior: contain;
+  touch-action: pan-x;
 }
 .carousel::-webkit-scrollbar {
   display: none;

From afb1a75f691957380d09617d20236b6817b83388 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 28 Dec 2022 20:46:38 +0800
Subject: [PATCH 18/18] Show carousel controls initially

---
 src/components/status.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/status.jsx b/src/components/status.jsx
index b9ed83b4..d9a4043f 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -1269,7 +1269,7 @@ function Carousel({ mediaAttachments, index = 0, onClose = () => {} }) {
     }
   }, 100);
 
-  const [showControls, setShowControls] = useState(false);
+  const [showControls, setShowControls] = useState(true);
 
   useEffect(() => {
     let handleSwipe = () => {