Try use dangerouslySetInnerHTML again

And… fix the loop attribute value

README.md

@@ -138,7 +138,7 @@ Download or `git clone` this repository. Use `production` branch for *stable* re
 Customization can be done by passing environment variables to the build command. Examples:
 
 ```bash
-PHANPY_APP_TITLE="Phanpy Dev" \
+PHANPY_CLIENT_NAME="Phanpy Dev" \
     PHANPY_WEBSITE="https://dev.phanpy.social" \
     npm run build
 ```
@@ -179,6 +179,13 @@ Available variables:
   - May specify a self-hosted Lingva instance, powered by either [lingva-translate](https://github.com/thedaviddelta/lingva-translate) or [lingva-api](https://github.com/cheeaun/lingva-api)
   - List of fallback instances hard-coded in `/.env`
   - [↗️ List of lingva-translate instances](https://github.com/thedaviddelta/lingva-translate?tab=readme-ov-file#instances)
+- `PHANPY_IMG_ALT_API_URL` (optional, no defaults):
+  - API endpoint for self-hosted instance of [img-alt-api](https://github.com/cheeaun/img-alt-api).
+  - If provided, a setting will appear for users to enable the image description generator in the composer. Disabled by default.
+- `PHANPY_GIPHY_API_KEY` (optional, no defaults):
+  - API key for [GIPHY](https://developers.giphy.com/). See [API docs](https://developers.giphy.com/docs/api/).
+  - If provided, a setting will appear for users to enable the GIF picker in the composer. Disabled by default.
+  - This is not self-hosted.
 
 ### Static site hosting
 
@@ -201,6 +208,9 @@ These are self-hosted by other wonderful folks.
 - [phanpy.hear-me.social](https://phanpy.hear-me.social) by [@admin@hear-me.social](https://hear-me.social/@admin)
 - [phanpy.fulda.social](https://phanpy.fulda.social) by [@Ganneff@fulda.social](https://fulda.social/@Ganneff)
 - [phanpy.crmbl.uk](https://phanpy.crmbl.uk) by [@snail@crmbl.uk](https://mstdn.crmbl.uk/@snail)
+- [halo.mookiesplace.com](https://halo.mookiesplace.com) by [@mookie@mookiesplace.com](https://mookiesplace.com/@mookie)
+- [social.qrk.one](https://social.qrk.one) by [@kev@fosstodon.org](https://fosstodon.org/@kev)
+- [phanpy.cz](https://phanpy.cz) by [@zdendys@mamutovo.cz](https://mamutovo.cz/@zdendys)
 
 > Note: Add yours by creating a pull request.
 
@@ -236,6 +246,8 @@ And here I am. Building a Mastodon web client.
 
 ## Alternative web clients
 
+- Phanpy forks ↓
+  - [Agora](https://agorasocial.app/)
 - [Pinafore](https://pinafore.social/) ([retired](https://nolanlawson.com/2023/01/09/retiring-pinafore/)) - forks ↓
   - [Semaphore](https://semaphore.social/)
   - [Enafore](https://enafore.social/)
@@ -252,6 +264,7 @@ And here I am. Building a Mastodon web client.
 - [Tusked](https://tusked.app/)
 - [Mastodon Glitch Edition (standalone frontend)](https://iceshrimp.dev/iceshrimp/masto-fe-standalone)
 - [Mangane](https://github.com/BDX-town/Mangane)
+- [TheDesk](https://github.com/cutls/TheDesk)
 - [More...](https://github.com/hueyy/awesome-mastodon/#clients)
 
 ## 💁‍♂️ Notice to all other social media client developers

package.json

@@ -11,36 +11,39 @@
   },
   "dependencies": {
     "@formatjs/intl-localematcher": "~0.5.4",
-    "@formatjs/intl-segmenter": "~11.5.5",
-    "@formkit/auto-animate": "~0.8.1",
-    "@github/text-expander-element": "~2.6.1",
+    "@formatjs/intl-segmenter": "~11.5.7",
+    "@formkit/auto-animate": "~0.8.2",
+    "@github/text-expander-element": "~2.7.1",
     "@iconify-icons/mingcute": "~1.2.9",
     "@justinribeiro/lite-youtube": "~1.5.0",
     "@szhsin/react-menu": "~4.1.0",
     "@uidotdev/usehooks": "~2.4.1",
     "compare-versions": "~6.1.0",
-    "dayjs": "~1.11.10",
+    "dayjs": "~1.11.11",
     "dayjs-twitter": "~0.5.0",
     "fast-blurhash": "~1.1.2",
     "fast-equals": "~5.0.1",
+    "fuse.js": "~7.0.0",
     "html-prettify": "^1.0.7",
     "idb-keyval": "~6.2.1",
     "just-debounce-it": "~3.2.0",
     "lz-string": "~1.5.0",
-    "masto": "~6.7.0",
+    "masto": "~6.7.7",
     "moize": "~6.1.6",
     "p-retry": "~6.2.0",
     "p-throttle": "~6.1.0",
-    "preact": "~10.20.1",
+    "preact": "~10.22.0",
+    "punycode": "~2.3.1",
     "react-hotkeys-hook": "~4.5.0",
-    "react-intersection-observer": "~9.8.1",
+    "react-intersection-observer": "~9.10.2",
     "react-quick-pinch-zoom": "~5.1.0",
     "react-router-dom": "6.6.2",
     "string-length": "6.0.0",
-    "swiped-events": "~1.1.9",
+    "swiped-events": "~1.2.0",
+    "tinyld": "~1.3.4",
     "toastify-js": "~1.12.0",
     "uid": "~2.0.2",
-    "use-debounce": "~10.0.0",
+    "use-debounce": "~10.0.1",
     "use-long-press": "~3.2.0",
     "use-resize-observer": "~9.1.0",
     "valtio": "1.13.2"
@@ -49,18 +52,18 @@
     "@preact/preset-vite": "~2.8.2",
     "@trivago/prettier-plugin-sort-imports": "~4.3.0",
     "postcss": "~8.4.38",
-    "postcss-dark-theme-class": "~1.2.1",
-    "postcss-preset-env": "~9.5.2",
+    "postcss-dark-theme-class": "~1.3.0",
+    "postcss-preset-env": "~9.5.14",
     "twitter-text": "~3.1.0",
-    "vite": "~5.2.6",
+    "vite": "~5.2.12",
     "vite-plugin-generate-file": "~0.1.1",
     "vite-plugin-html-config": "~1.0.11",
-    "vite-plugin-pwa": "~0.19.7",
+    "vite-plugin-pwa": "~0.20.0",
     "vite-plugin-remove-console": "~2.2.0",
-    "workbox-cacheable-response": "~7.0.0",
-    "workbox-expiration": "~7.0.0",
-    "workbox-routing": "~7.0.0",
-    "workbox-strategies": "~7.0.0"
+    "workbox-cacheable-response": "~7.1.0",
+    "workbox-expiration": "~7.1.0",
+    "workbox-routing": "~7.1.0",
+    "workbox-strategies": "~7.1.0"
   },
   "postcss": {
     "plugins": {

public/sw.js

@@ -62,7 +62,7 @@ const iconsRoute = new Route(
     cacheName: 'icons',
     plugins: [
       new ExpirationPlugin({
-        maxEntries: 50,
+        maxEntries: 300,
         maxAgeSeconds: 3 * 24 * 60 * 60, // 3 days
         purgeOnQuotaError: true,
       }),

src/app.css

@@ -295,12 +295,47 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
         video,
         img,
         audio {
-          min-height: var(--pointer-min-dimension); /* for extreme dimensions */
+          min-height: var(--min-dimension); /* for extreme dimensions */
         }
       }
     }
   }
 }
+
+.deck-container-media-first {
+  .timeline {
+    > li:not(.timeline-item-carousel, .timeline-item-container) {
+      &:has(.status-media-first) {
+        @media (min-width: 40em) {
+          width: fit-content;
+          max-width: min(480px, 100%);
+        }
+
+        background-color: transparent !important;
+        border: 0 !important;
+        box-shadow: none !important;
+        margin-inline: auto !important;
+
+        &:not(:first-child) {
+          margin-block: 32px;
+        }
+
+        &:has(.skeleton) {
+          width: 100%;
+        }
+      }
+
+      &:has(.media[data-orientation='landscape']) {
+        max-width: 100%;
+      }
+    }
+
+    .status-link:has(.status-media-first):hover {
+      background-color: transparent;
+    }
+  }
+}
+
 .timeline.grow {
   /* min-height: 100vh;
   min-height: 100dvh; */
@@ -1544,8 +1579,8 @@ body:has(.media-modal-container + .status-deck) .media-post-link {
     0 10px 36px -4px var(--button-bg-blur-color);
   transition: all 0.3s ease-in-out;
 }
-.deck-container:has(header[hidden]) ~ #compose-button,
-#compose-button[hidden] {
+.deck-container:has(header[hidden]) ~ #compose-button:not(.loading),
+#compose-button[hidden]:not(.loading) {
   transform: translateY(200%);
   pointer-events: none;
   user-select: none;
@@ -1574,6 +1609,48 @@ body:has(.media-modal-container + .status-deck) .media-post-link {
     bottom: calc(16px + env(safe-area-inset-bottom) + 52px);
   }
 }
+#compose-button {
+  &.min {
+    outline: 2px solid var(--button-text-color);
+    z-index: 1001; /* Higher than modal */
+
+    &:after {
+      content: '';
+      display: block;
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 14px;
+      height: 14px;
+      border-radius: 50%;
+      background-color: var(--button-bg-color);
+      border: 2px solid var(--button-text-color);
+      box-shadow: 0 2px 8px var(--drop-shadow-color);
+      opacity: 0;
+      transition: opacity 0.2s ease-out 0.5s;
+      opacity: 1;
+    }
+  }
+
+  &.loading {
+    outline-color: var(--button-bg-blur-color);
+
+    &:before {
+      position: absolute;
+      inset: 0;
+      content: '';
+      border-radius: 50%;
+      animation: spin 5s linear infinite;
+      border: 2px dashed var(--button-text-color);
+    }
+  }
+
+  &.error {
+    &:after {
+      background-color: var(--red-color);
+    }
+  }
+}
 
 /* SHEET */
 
@@ -1882,7 +1959,8 @@ body > .szh-menu-container {
   /* two columns only */
   grid-template-columns: repeat(2, 1fr);
 }
-.szh-menu .menu-horizontal:has(> .szh-menu__item:only-child) {
+.szh-menu .menu-horizontal:has(> .szh-menu__item:only-child),
+.szh-menu .menu-horizontal:has(> .szh-menu__submenu:only-child) {
   grid-template-columns: 1fr;
 }
 .szh-menu .menu-horizontal > .szh-menu__item:not(:only-child):first-child,
@@ -1930,6 +2008,10 @@ body > .szh-menu-container {
 .szh-menu
   .szh-menu__item.danger:not(.szh-menu__item--disabled).szh-menu__item--hover {
   background-color: var(--red-text-color);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--red-color);
+  }
 }
 .szh-menu
   .szh-menu__item:not(.szh-menu__item--disabled):not(
@@ -2143,6 +2225,8 @@ body > .szh-menu-container {
   box-shadow: 0 3px 8px -1px var(--drop-shadow-color),
     0 10px 36px -4px var(--button-bg-blur-color);
   text-align: center;
+  width: fit-content;
+  max-width: calc(100vw - 32px);
 }
 .toastify-bottom {
   margin-bottom: env(safe-area-inset-bottom);

src/app.jsx

@@ -1,7 +1,6 @@
 import './app.css';
 
 import debounce from 'just-debounce-it';
-import { lazy, Suspense } from 'preact/compat';
 import {
   useEffect,
   useLayoutEffect,
@@ -18,14 +17,14 @@ import ComposeButton from './components/compose-button';
 import { ICONS } from './components/ICONS';
 import KeyboardShortcutsHelp from './components/keyboard-shortcuts-help';
 import Loader from './components/loader';
-// import Modals from './components/modals';
+import Modals from './components/modals';
 import NotificationService from './components/notification-service';
 import SearchCommand from './components/search-command';
 import Shortcuts from './components/shortcuts';
 import NotFound from './pages/404';
 import AccountStatuses from './pages/account-statuses';
 import Bookmarks from './pages/bookmarks';
-// import Catchup from './pages/catchup';
+import Catchup from './pages/catchup';
 import Favourites from './pages/favourites';
 import Filters from './pages/filters';
 import FollowedHashtags from './pages/followed-hashtags';
@@ -54,12 +53,9 @@ import { getAccessToken } from './utils/auth';
 import focusDeck from './utils/focus-deck';
 import states, { initStates, statusKey } from './utils/states';
 import store from './utils/store';
-import { getCurrentAccount } from './utils/store-utils';
+import { getCurrentAccount, setCurrentAccountID } from './utils/store-utils';
 import './utils/toast-alert';
 
-const Catchup = lazy(() => import('./pages/catchup'));
-const Modals = lazy(() => import('./components/modals'));
-
 window.__STATES__ = states;
 window.__STATES_STATS__ = () => {
   const keys = [
@@ -130,13 +126,13 @@ setInterval(() => {
 // Related: https://github.com/vitejs/vite/issues/10600
 setTimeout(() => {
   for (const icon in ICONS) {
-    queueMicrotask(() => {
+    setTimeout(() => {
       if (Array.isArray(ICONS[icon])) {
         ICONS[icon][0]?.();
       } else {
         ICONS[icon]?.();
       }
-    });
+    }, 1);
   }
 }, 5000);
 
@@ -329,11 +325,11 @@ function App() {
 
         const client = initClient({ instance: instanceURL, accessToken });
         await Promise.allSettled([
+          initPreferences(client),
           initInstance(client, instanceURL),
           initAccount(client, instanceURL, accessToken, vapidKey),
         ]);
         initStates();
-        initPreferences(client);
 
         setIsLoggedIn(true);
         setUIState('default');
@@ -342,15 +338,15 @@ function App() {
       window.__IGNORE_GET_ACCOUNT_ERROR__ = true;
       const account = getCurrentAccount();
       if (account) {
-        store.session.set('currentAccount', account.info.id);
+        setCurrentAccountID(account.info.id);
         const { client } = api({ account });
         const { instance } = client;
         // console.log('masto', masto);
         initStates();
-        initPreferences(client);
         setUIState('loading');
         (async () => {
           try {
+            await initPreferences(client);
             await initInstance(client, instance);
           } catch (e) {
           } finally {
@@ -387,9 +383,7 @@ function App() {
       )}
       {isLoggedIn && <ComposeButton />}
       {isLoggedIn && <Shortcuts />}
-      <Suspense>
       <Modals />
-      </Suspense>
       {isLoggedIn && <NotificationService />}
       <BackgroundService isLoggedIn={isLoggedIn} />
       {uiState !== 'loading' && <SearchCommand onClose={focusDeck} />}
@@ -466,14 +460,7 @@ function SecondaryRoutes({ isLoggedIn }) {
           </Route>
           <Route path="/fh" element={<FollowedHashtags />} />
           <Route path="/ft" element={<Filters />} />
-          <Route
-            path="/catchup"
-            element={
-              <Suspense>
-                <Catchup />
-              </Suspense>
-            }
-          />
+          <Route path="/catchup" element={<Catchup />} />
         </>
       )}
       <Route path="/:instance?/t/:hashtag" element={<Hashtag />} />

src/assets/powered-by-giphy.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 641 223">
+  <path fill="#aaa" d="M86 214c-9-1-17-4-24-8l-6-3-5-5-5-4-4-6-4-6-3-8-2-8v-27l2-9 3-9 4-6 4-6 5-5 5-5 7-3 6-4 7-2 7-2 12-1h12l7 1 8 2 7 4 7 3 5 5 5 4-10 10-10 9-4-3-10-5-5-1H88l-5 2-6 3-3 4-4 4-2 5-2 6v6l-1 7 1 7 2 7 3 5 2 4 4 3 4 3 5 2 6 2h9l10-1 5-2 6-3v-16H91v-27h59v54l-1 3-2 3-5 4-4 4-5 3-5 2-8 2-8 2-10 1H92l-6-1zm266-62V91h34v46h44V91h34v121h-34v-46h-44v46h-34v-61zm-182-1V90h34v121h-34v-60zm59-1V90h35l36 1 5 2c3 0 8 2 10 4l5 2 4 5 5 4 3 7 3 7 1 13v13l-4 6-3 7-4 4-5 5-5 2-5 3-6 2-5 1-18 1h-18v32h-34v-61zm67-2 3-2 2-4 2-5v-5l-2-4-2-4-3-2-3-3h-30v31h30l3-2zm226 39v-24l-8-12-18-28a1751 1751 0 0 0-20-31v-2h39l7 12 12 21 6 9 13-21 13-21h38v2l-41 61-7 10v48h-34v-24zM109 66l-4-1-5-5-5-4-1-5-3-9v-5l1-5c2-7 3-10 8-15l4-4 7-2 7-2h7l6 1 5 2 5 2 3 4 4 3 2 6 2 5v13l-2 5-2 6-4 4-3 3-5 2-4 2-9 1h-9l-5-2zm22-11 4-2 3-4 2-5V34l-2-4-2-4-3-2-4-3-5-1h-6l-4 2-5 2-2 4-3 5-1 3v4l1 5 2 5 2 2 5 3 4 2h10l4-2zM37 39V11h33l3 1 3 2 4 3 3 3 1 5 1 4v5l-1 4-3 4-3 5-4 1-3 2-11 1H49v16H37V39zm31 0 3-2 1-2 1-2v-4l-1-3-3-2-2-2H49v18h15l4-1zm107 25a512 512 0 0 0-19-53h14l4 14 6 19 1 4 1-1 7-19 5-17h9l6 19 7 18v-1l2-6 5-17 4-13h14v1l-4 12-16 41v2h-5l-5-1-6-15-6-15-1 1-3 7-6 15-2 8h-11l-1-3zm74-25V11h42v11h-29v2l-1 5v4h29v11h-28v11h2l15 1h13v11h-43V39zm55 0V11h33l5 3 5 2 2 4 2 5v10l-2 3-1 4-5 3-5 3 5 5 8 10 3 4h-14l-7-9-8-10h-9v19h-12V39zm33-3 2-3v-6l-3-3-2-3h-18v16h1v1h17l2-2zm26 3V11h42v11h-29l-1 6v5h29v11h-28v5l-1 5 1 1v1h30v11h-43V39zm54 0V11h17l18 1 4 2 5 3 2 4 3 4 2 6 1 6v5c-1 6-3 12-6 15l-3 4-5 3-5 2-17 1h-16V39zm33 14 5-5 2-3v-6l-1-6-1-3-1-3-4-3-3-2h-5l-6-1-3 1h-3v34h9l8-1 3-2zm50-14V11h34l5 2 4 2 2 3 2 3v9l-2 2-3 4-1 1 3 3 3 4 1 3 1 4-1 4-1 4-3 3-3 3-5 1-5 1h-31V39zm34 15 2-1v-6l-2-2-2-2h-20v13h20l2-2zm-3-22 4-2v-6l-2-1-2-2h-19v12h16l4-1zm42 24V45l-6-9-11-17-5-8h15l4 8 7 11 2 3 7-11 7-11h14l-11 16-11 17v23h-12V56z"/>
+</svg>

src/components/ICONS.jsx

@@ -107,4 +107,6 @@ export const ICONS = {
   quote: () => import('@iconify-icons/mingcute/quote-left-line'),
   settings: () => import('@iconify-icons/mingcute/settings-6-line'),
   'heart-break': () => import('@iconify-icons/mingcute/heart-crack-line'),
+  'user-x': () => import('@iconify-icons/mingcute/user-x-line'),
+  minimize: () => import('@iconify-icons/mingcute/arrows-down-line'),
 };

src/components/account-block.jsx

@@ -133,10 +133,8 @@ function AccountBlock({
           )}
         </span>
         {showActivity && (
-          <>
-            <br />
-            <small class="last-status-at insignificant">
-              Posts: {statusesCount}
+          <div class="account-block-stats">
+            Posts: {shortenNumber(statusesCount)}
             {!!lastStatusAt && (
               <>
                 {' '}
@@ -146,8 +144,7 @@ function AccountBlock({
                 })}
               </>
             )}
-            </small>
-          </>
+          </div>
         )}
         {showStats && (
           <div class="account-block-stats">

src/components/account-info.jsx

@@ -1,6 +1,6 @@
 import './account-info.css';
 
-import { Menu, MenuDivider, MenuItem, SubMenu } from '@szhsin/react-menu';
+import { MenuDivider, MenuItem } from '@szhsin/react-menu';
 import {
   useCallback,
   useEffect,
@@ -9,6 +9,7 @@ import {
   useRef,
   useState,
 } from 'preact/hooks';
+import punycode from 'punycode/';
 
 import { api } from '../utils/api';
 import enhanceContent from '../utils/enhance-content';
@@ -18,10 +19,12 @@ import { getLists } from '../utils/lists';
 import niceDateTime from '../utils/nice-date-time';
 import pmem from '../utils/pmem';
 import shortenNumber from '../utils/shorten-number';
+import showCompose from '../utils/show-compose';
 import showToast from '../utils/show-toast';
 import states, { hideAllModals } from '../utils/states';
 import store from '../utils/store';
-import { updateAccount } from '../utils/store-utils';
+import { getCurrentAccountID, updateAccount } from '../utils/store-utils';
+import supports from '../utils/supports';
 
 import AccountBlock from './account-block';
 import Avatar from './avatar';
@@ -32,7 +35,9 @@ import ListAddEdit from './list-add-edit';
 import Loader from './loader';
 import Menu2 from './menu2';
 import MenuConfirm from './menu-confirm';
+import MenuLink from './menu-link';
 import Modal from './modal';
+import SubMenu2 from './submenu2';
 import TranslationBlock from './translation-block';
 
 const MUTE_DURATIONS = [
@@ -182,6 +187,7 @@ function AccountInfo({
     memorial,
     moved,
     roles,
+    hideCollections,
   } = info || {};
   let headerIsAvatar = false;
   let { header, headerStatic } = info || {};
@@ -195,10 +201,7 @@ function AccountInfo({
     }
   }
 
-  const isSelf = useMemo(
-    () => id === store.session.get('currentAccount'),
-    [id],
-  );
+  const isSelf = useMemo(() => id === getCurrentAccountID(), [id]);
 
   useEffect(() => {
     const infoHasEssentials = !!(
@@ -228,7 +231,7 @@ function AccountInfo({
 
   const accountInstance = useMemo(() => {
     if (!url) return null;
-    const domain = new URL(url).hostname;
+    const domain = punycode.toUnicode(new URL(url).hostname);
     return domain;
   }, [url]);
 
@@ -251,12 +254,13 @@ function AccountInfo({
     // On first load, fetch familiar followers, merge to top of results' `value`
     // Remove dups on every fetch
     if (firstLoad) {
-      const familiarFollowers = await masto.v1.accounts.familiarFollowers.fetch(
-        {
+      let familiarFollowers = [];
+      try {
+        familiarFollowers = await masto.v1.accounts.familiarFollowers.fetch({
           id: [id],
-        },
-      );
-      familiarFollowersCache.current = familiarFollowers[0].accounts;
+        });
+      } catch (e) {}
+      familiarFollowersCache.current = familiarFollowers?.[0]?.accounts || [];
       newValue = [
         ...familiarFollowersCache.current,
         ...value.filter(
@@ -581,6 +585,15 @@ function AccountInfo({
                     <Icon icon="external" />
                     <span>Go to original profile page</span>
                   </MenuItem>
+                  <MenuDivider />
+                  <MenuLink href={info.avatar} target="_blank">
+                    <Icon icon="user" />
+                    <span>View profile image</span>
+                  </MenuLink>
+                  <MenuLink href={info.header} target="_blank">
+                    <Icon icon="media" />
+                    <span>View profile header</span>
+                  </MenuLink>
                 </Menu2>
               ) : (
                 <AccountBlock
@@ -659,12 +672,16 @@ function AccountInfo({
                       // states.showAccount = false;
                       setTimeout(() => {
                         states.showGenericAccounts = {
+                          id: 'followers',
                           heading: 'Followers',
                           fetchAccounts: fetchFollowers,
                           instance,
                           excludeRelationshipAttrs: isSelf
                             ? ['followedBy']
                             : [],
+                          blankCopy: hideCollections
+                            ? 'This user has chosen to not make this information available.'
+                            : undefined,
                         };
                       }, 0);
                     }}
@@ -700,6 +717,9 @@ function AccountInfo({
                           fetchAccounts: fetchFollowing,
                           instance,
                           excludeRelationshipAttrs: isSelf ? ['following'] : [],
+                          blankCopy: hideCollections
+                            ? 'This user has chosen to not make this information available.'
+                            : undefined,
                         };
                       }, 0);
                     }}
@@ -809,6 +829,7 @@ function AccountInfo({
                   </div>
                 </LinkOrDiv>
               )}
+              {!moved && (
                 <div class="account-metadata-box">
                   <div
                     class="shazam-container no-animation"
@@ -841,6 +862,7 @@ function AccountInfo({
                     </div>
                   </div>
                 </div>
+              )}
             </main>
             <footer>
               <RelatedActions
@@ -904,7 +926,7 @@ function RelatedActions({
 
   useEffect(() => {
     if (info) {
-      const currentAccount = store.session.get('currentAccount');
+      const currentAccount = getCurrentAccountID();
       let currentID;
       (async () => {
         if (sameInstance && authenticated) {
@@ -939,7 +961,7 @@ function RelatedActions({
 
         accountID.current = currentID;
 
-        if (moved) return;
+        // if (moved) return;
 
         setRelationshipUIState('loading');
 
@@ -1060,11 +1082,11 @@ function RelatedActions({
               <>
                 <MenuItem
                   onClick={() => {
-                    states.showCompose = {
+                    showCompose({
                       draftStatus: {
                         status: `@${currentInfo?.acct || acct} `,
                       },
-                    };
+                    });
                   }}
                 >
                   <Icon icon="at" />
@@ -1078,6 +1100,7 @@ function RelatedActions({
                   <Icon icon="translate" />
                   <span>Translate bio</span>
                 </MenuItem>
+                {supports('@mastodon/profile-private-note') && (
                   <MenuItem
                     onClick={() => {
                       setShowPrivateNoteModal(true);
@@ -1088,6 +1111,7 @@ function RelatedActions({
                       {privateNote ? 'Edit private note' : 'Add private note'}
                     </span>
                   </MenuItem>
+                )}
                 {following && !!relationship && (
                   <>
                     <MenuItem
@@ -1270,7 +1294,7 @@ function RelatedActions({
                     <span>Unmute @{username}</span>
                   </MenuItem>
                 ) : (
-                  <SubMenu
+                  <SubMenu2
                     menuClassName="menu-blur"
                     openTrigger="clickOnly"
                     direction="bottom"
@@ -1324,7 +1348,44 @@ function RelatedActions({
                         </MenuItem>
                       ))}
                     </div>
-                  </SubMenu>
+                  </SubMenu2>
+                )}
+                {followedBy && (
+                  <MenuConfirm
+                    subMenu
+                    menuItemClassName="danger"
+                    confirmLabel={
+                      <>
+                        <Icon icon="user-x" />
+                        <span>Remove @{username} from followers?</span>
+                      </>
+                    }
+                    onClick={() => {
+                      setRelationshipUIState('loading');
+                      (async () => {
+                        try {
+                          const newRelationship = await currentMasto.v1.accounts
+                            .$select(currentInfo?.id || id)
+                            .removeFromFollowers();
+                          console.log(
+                            'removing from followers',
+                            newRelationship,
+                          );
+                          setRelationship(newRelationship);
+                          setRelationshipUIState('default');
+                          showToast(`@${username} removed from followers`);
+                          states.reloadGenericAccounts.id = 'followers';
+                          states.reloadGenericAccounts.counter++;
+                        } catch (e) {
+                          console.error(e);
+                          setRelationshipUIState('error');
+                        }
+                      })();
+                    }}
+                  >
+                    <Icon icon="user-x" />
+                    <span>Remove follower…</span>
+                  </MenuConfirm>
                 )}
                 <MenuConfirm
                   subMenu
@@ -1399,7 +1460,10 @@ function RelatedActions({
                 </MenuItem>
               </>
             )}
-            {currentAuthenticated && isSelf && standalone && (
+            {currentAuthenticated &&
+              isSelf &&
+              standalone &&
+              supports('@mastodon/profile-edit') && (
                 <>
                   <MenuDivider />
                   <MenuItem
@@ -1437,7 +1501,7 @@ function RelatedActions({
           {!relationship && relationshipUIState === 'loading' && (
             <Loader abrupt />
           )}
-          {!!relationship && (
+          {!!relationship && !moved && (
             <MenuConfirm
               confirm={following || requested}
               confirmLabel={
@@ -1596,7 +1660,7 @@ function niceAccountURL(url) {
   const path = pathname.replace(/\/$/, '').replace(/^\//, '');
   return (
     <>
-      <span class="more-insignificant">{host}/</span>
+      <span class="more-insignificant">{punycode.toUnicode(host)}/</span>
       <wbr />
       <span>{path}</span>
     </>

src/components/avatar.jsx

@@ -63,7 +63,7 @@ function Avatar({ url, size, alt = '', squircle, ...props }) {
             if (avatarRef.current) avatarRef.current.dataset.loaded = true;
             if (alphaCache[url] !== undefined) return;
             if (isMissing) return;
-            queueMicrotask(() => {
+            setTimeout(() => {
               try {
                 // Check if image has alpha channel
                 const { width, height } = e.target;
@@ -88,7 +88,7 @@ function Avatar({ url, size, alt = '', squircle, ...props }) {
                 // Silent fail
                 alphaCache[url] = false;
               }
-            });
+            }, 1);
           }}
         />
       )}

src/components/compose-button.jsx

@@ -1,4 +1,5 @@
 import { useHotkeys } from 'react-hotkeys-hook';
+import { useSnapshot } from 'valtio';
 
 import openCompose from '../utils/open-compose';
 import openOSK from '../utils/open-osk';
@@ -7,7 +8,15 @@ import states from '../utils/states';
 import Icon from './icon';
 
 export default function ComposeButton() {
+  const snapStates = useSnapshot(states);
+
   function handleButton(e) {
+    if (snapStates.composerState.minimized) {
+      states.composerState.minimized = false;
+      openOSK();
+      return;
+    }
+
     if (e.shiftKey) {
       const newWin = openCompose();
 
@@ -28,7 +37,14 @@ export default function ComposeButton() {
   });
 
   return (
-    <button type="button" id="compose-button" onClick={handleButton}>
+    <button
+      type="button"
+      id="compose-button"
+      onClick={handleButton}
+      class={`${snapStates.composerState.minimized ? 'min' : ''} ${
+        snapStates.composerState.publishing ? 'loading' : ''
+      } ${snapStates.composerState.publishingError ? 'error' : ''}`}
+    >
       <Icon icon="quill" size="xl" alt="Compose" />
     </button>
   );

src/components/compose-suspense.jsx

@@ -0,0 +1,48 @@
+import { shouldPolyfill } from '@formatjs/intl-segmenter/should-polyfill';
+import { useEffect, useState } from 'preact/hooks';
+
+import Loader from './loader';
+
+const supportsIntlSegmenter = !shouldPolyfill();
+
+function importIntlSegmenter() {
+  if (!supportsIntlSegmenter) {
+    return import('@formatjs/intl-segmenter/polyfill-force').catch(() => {});
+  }
+}
+
+function importCompose() {
+  return import('./compose');
+}
+
+export async function preload() {
+  try {
+    await importIntlSegmenter();
+    importCompose();
+  } catch (e) {
+    console.error(e);
+  }
+}
+
+export default function ComposeSuspense(props) {
+  const [Compose, setCompose] = useState(null);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        if (supportsIntlSegmenter) {
+          const component = await importCompose();
+          setCompose(component);
+        } else {
+          await importIntlSegmenter();
+          const component = await importCompose();
+          setCompose(component);
+        }
+      } catch (e) {
+        console.error(e);
+      }
+    })();
+  }, []);
+
+  return Compose?.default ? <Compose.default {...props} /> : <Loader />;
+}

src/components/compose.css

@@ -111,8 +111,8 @@
 }
 
 #compose-container form {
-  --form-padding-inline: 12px;
-  --form-padding-block: 8px;
+  --form-padding-inline: 8px;
+  --form-padding-block: 0;
   /* border-radius: 16px; */
   padding: var(--form-padding-block) var(--form-padding-inline);
   background-color: var(--bg-blur-color);
@@ -298,19 +298,25 @@
   height: 2.2em;
 }
 #compose-container .text-expander-menu li:is(:hover, :focus, [aria-selected]) {
-  color: var(--bg-color);
-  background-color: var(--link-color);
-}
-#compose-container
-  .text-expander-menu:hover
-  li[aria-selected]:not(:hover, :focus) {
+  background-color: var(--link-bg-color);
   color: var(--text-color);
-  background-color: var(--bg-color);
+}
+#compose-container .text-expander-menu li[aria-selected] {
+  box-shadow: inset 4px 0 0 0 var(--button-bg-color);
+}
+#compose-container .text-expander-menu li[data-more] {
+  &:not(:hover, :focus, [aria-selected]) {
+    color: var(--text-insignificant-color);
+    background-color: var(--bg-faded-color);
+  }
+
+  font-size: 0.8em;
+  justify-content: center;
 }
 
 #compose-container .form-visibility-direct {
   --yellow-stripes: repeating-linear-gradient(
-    -45deg,
+    135deg,
     var(--reply-to-faded-color),
     var(--reply-to-faded-color) 10px,
     var(--reply-to-faded-color) 10px,
@@ -334,6 +340,21 @@
   display: flex;
   gap: 8px;
   align-items: stretch;
+
+  .media-error {
+    padding: 2px;
+    color: var(--orange-fg-color);
+    background-color: transparent;
+    border: 1.5px dashed transparent;
+    line-height: 1;
+    border-radius: 4px;
+    display: flex;
+
+    &:is(:hover, :focus) {
+      background-color: var(--bg-color);
+      border-color: var(--orange-fg-color);
+    }
+  }
 }
 #compose-container .media-preview {
   flex-shrink: 0;
@@ -500,8 +521,9 @@
   }
 }
 
-@media (min-width: 480px) {
 #compose-container button[type='submit'] {
+  border-radius: 8px;
+  @media (min-width: 480px) {
     padding-inline: 24px;
   }
 }
@@ -594,44 +616,194 @@
   } */
 }
 
+#mention-sheet {
+  height: 50vh;
+
+  .accounts-list {
+    --list-gap: 1px;
+    list-style: none;
+    margin: 0;
+    padding: 8px 0;
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--list-gap);
+
+    &.loading {
+      opacity: 0.5;
+    }
+
+    li {
+      display: flex;
+      flex-grow: 1;
+      /* align-items: center; */
+      margin: 0 -8px;
+      padding: 8px;
+      gap: 8px;
+      position: relative;
+      justify-content: space-between;
+      border-radius: 8px;
+      /* align-items: center; */
+
+      &:hover {
+        background-image: linear-gradient(
+          to right,
+          transparent 75%,
+          var(--link-bg-color)
+        );
+      }
+
+      &.selected {
+        background-image: linear-gradient(
+          to right,
+          var(--bg-faded-color) 75%,
+          var(--link-bg-color)
+        );
+      }
+
+      &:before {
+        content: '';
+        display: block;
+        border-top: var(--hairline-width) solid var(--divider-color);
+        position: absolute;
+        bottom: 0;
+        left: 58px;
+        right: 0;
+      }
+
+      &:has(+ li:is(.selected, :hover)):before,
+      &:is(.selected, :hover):before {
+        opacity: 0;
+      }
+
+      > button {
+        border-radius: 4px;
+        &:hover {
+          outline: 2px solid var(--button-bg-blur-color);
+        }
+      }
+    }
+  }
+}
+
 #custom-emojis-sheet {
   max-height: 50vh;
   max-height: 50dvh;
+
+  header {
+    .loader-container {
+      margin: 0;
     }
-#custom-emojis-sheet main {
+
+    form {
+      margin: 8px 0 0;
+
+      input {
+        width: 100%;
+        min-width: 0;
+      }
+    }
+  }
+
+  main {
     mask-image: none;
+    min-height: 40vh;
+    padding-bottom: 88px;
   }
-#custom-emojis-sheet .custom-emojis-list .section-header {
+
+  .custom-emojis-matches {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .custom-emojis-list {
+    .section-header {
       font-size: 80%;
       text-transform: uppercase;
       color: var(--text-insignificant-color);
       padding: 8px 0 4px;
       position: sticky;
       top: 0;
-  background-color: var(--bg-blur-color);
-  backdrop-filter: blur(1px);
+      background-color: var(--bg-color);
+      z-index: 1;
     }
-#custom-emojis-sheet .custom-emojis-list section {
+    section {
       display: flex;
       flex-wrap: wrap;
     }
-#custom-emojis-sheet .custom-emojis-list button {
+    button {
+      color: var(--text-color);
       border-radius: 8px;
       background-image: radial-gradient(
         closest-side,
         var(--img-bg-color),
         transparent
       );
+      text-shadow: 0 1px 0 var(--bg-color);
+      position: relative;
+      min-width: 44px;
+      min-height: 44px;
+      font-variant-numeric: slashed-zero;
+      font-feature-settings: 'ss01';
+
+      &[data-title]:after {
+        max-width: 50vw;
+        pointer-events: none;
+        position: absolute;
+        content: attr(data-title);
+        left: 50%;
+        top: 0;
+        background-color: var(--bg-color);
+        padding: 2px 4px;
+        border-radius: 4px;
+        font-size: 12px;
+        border: 1px solid var(--text-color);
+        transform: translate(-50%, -110%);
+        opacity: 0;
+        transition: opacity 0.1s ease-out 0.1s;
+        font-family: var(--monospace-font);
+        line-height: 1;
       }
-#custom-emojis-sheet .custom-emojis-list button:is(:hover, :focus) {
+      &.edge-left[data-title]:after {
+        left: 0;
+        transform: translate(0, -110%);
+      }
+      &.edge-right[data-title]:after {
+        left: 100%;
+        transform: translate(-100%, -110%);
+      }
+
+      &:is(:hover, :focus) {
+        z-index: 1;
         filter: none;
         background-color: var(--bg-faded-color);
+
+        &[data-title]:after {
+          opacity: 1;
         }
-#custom-emojis-sheet .custom-emojis-list button img {
+      }
+
+      img {
         transition: transform 0.1s ease-out;
       }
-#custom-emojis-sheet .custom-emojis-list button:is(:hover, :focus) img {
-  transform: scale(1.5);
+
+      &:is(:hover, :focus) img {
+        transform: scale(2);
+      }
+      &.edge-left img {
+        transform-origin: left center;
+      }
+      &.edge-right img {
+        transform-origin: right center;
+      }
+
+      code {
+        font-size: 0.8em;
+      }
+    }
+  }
 }
 
 .compose-field-container {
@@ -727,3 +899,165 @@
     }
   }
 }
+
+@keyframes gif-shake {
+  0% {
+    transform: rotate(0deg);
+  }
+  25% {
+    transform: rotate(5deg);
+  }
+  50% {
+    transform: rotate(0deg);
+  }
+  75% {
+    transform: rotate(-5deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+}
+
+.gif-picker-button {
+  span {
+    font-weight: bold;
+    font-size: 11.5px;
+    display: block;
+  }
+
+  &:is(:hover, :focus) {
+    span {
+      animation: gif-shake 0.3s 3;
+    }
+  }
+}
+
+#gif-picker-sheet {
+  height: 50vh;
+
+  form {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    align-items: center;
+
+    input[type='search'] {
+      flex-grow: 1;
+      min-width: 0;
+    }
+  }
+
+  main {
+    overflow-x: auto;
+    overflow-y: hidden;
+    mask-image: linear-gradient(
+      to right,
+      transparent 2px,
+      black 16px,
+      black calc(100% - 16px),
+      transparent calc(100% - 2px)
+    );
+
+    @media (min-height: 480px) {
+      overflow-y: auto;
+      max-height: 50vh;
+    }
+
+    &.loading {
+      opacity: 0.25;
+    }
+
+    .ui-state {
+      min-height: 100px;
+    }
+
+    ul {
+      min-height: 100px;
+      display: flex;
+      gap: 4px;
+      list-style: none;
+      padding: 8px 2px;
+      margin: 0;
+
+      @media (min-height: 480px) {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+        grid-auto-rows: 1fr;
+      }
+
+      li {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        max-width: 100%;
+        display: flex;
+
+        button {
+          padding: 4px;
+          margin: 0;
+          border: none;
+          background-color: transparent;
+          color: inherit;
+          cursor: pointer;
+          border-radius: 8px;
+          background-color: var(--bg-faded-color);
+
+          @media (min-height: 480px) {
+            width: 100%;
+            text-align: center;
+          }
+
+          &:is(:hover, :focus) {
+            background-color: var(--link-bg-color);
+            box-shadow: 0 0 0 2px var(--link-light-color);
+            filter: none;
+          }
+        }
+
+        figure {
+          margin: 0;
+          padding: 0;
+          width: var(--figure-width);
+          max-width: 100%;
+
+          @media (min-height: 480px) {
+            width: 100%;
+            text-align: center;
+          }
+
+          figcaption {
+            font-size: 0.8em;
+            padding: 2px;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            color: var(--text-insignificant-color);
+          }
+        }
+
+        img {
+          background-color: var(--img-bg-color);
+          border-radius: 4px;
+          vertical-align: top;
+          object-fit: contain;
+        }
+      }
+    }
+
+    .pagination {
+      display: flex;
+      justify-content: space-between;
+      gap: 8px;
+      padding: 0;
+      margin: 0;
+      position: sticky;
+      bottom: 0;
+      left: 0;
+      right: 0;
+
+      @media (min-height: 480px) {
+        position: static;
+      }
+    }
+  }
+}

src/components/custom-emoji.jsx

@@ -1,9 +1,11 @@
 export default function CustomEmoji({ staticUrl, alt, url }) {
   return (
     <picture>
+      {staticUrl && (
         <source srcset={staticUrl} media="(prefers-reduced-motion: reduce)" />
+      )}
       <img
-        key={alt}
+        key={alt || url}
         src={url}
         alt={alt}
         class="shortcode-emoji emoji"

src/components/generic-accounts.css

@@ -17,6 +17,21 @@
       );
       filter: saturate(0.5);
     }
+
+    &:is(a) {
+      pointer-events: auto;
+      display: block;
+      text-decoration: none;
+      color: inherit;
+
+      &:hover {
+        border-color: var(--outline-hover-color);
+      }
+
+      > * {
+        pointer-events: none;
+      }
+    }
   }
 
   .accounts-list {

src/components/generic-accounts.jsx

@@ -11,6 +11,7 @@ import useLocationChange from '../utils/useLocationChange';
 
 import AccountBlock from './account-block';
 import Icon from './icon';
+import Link from './link';
 import Loader from './loader';
 import Status from './status';
 
@@ -19,6 +20,7 @@ export default function GenericAccounts({
   excludeRelationshipAttrs = [],
   postID,
   onClose = () => {},
+  blankCopy = 'Nothing to show',
 }) {
   const { masto, instance: currentInstance } = api();
   const isCurrentInstance = instance ? instance === currentInstance : true;
@@ -143,9 +145,12 @@ export default function GenericAccounts({
       </header>
       <main>
         {post && (
-          <div class="post-preview">
+          <Link
+            to={`/${instance || currentInstance}/s/${post.id}`}
+            class="post-preview"
+          >
             <Status status={post} size="s" readOnly />
-          </div>
+          </Link>
         )}
         {accounts.length > 0 ? (
           <>
@@ -217,7 +222,7 @@ export default function GenericAccounts({
         ) : uiState === 'error' ? (
           <p class="ui-state">Error loading accounts</p>
         ) : (
-          <p class="ui-state insignificant">Nothing to show</p>
+          <p class="ui-state insignificant">{blankCopy}</p>
         )}
       </main>
     </div>

src/components/intl-segmenter-suspense.jsx

@@ -6,6 +6,15 @@ import Loader from './loader';
 
 const supportsIntlSegmenter = !shouldPolyfill();
 
+// Preload IntlSegmenter
+setTimeout(() => {
+  queueMicrotask(() => {
+    if (!supportsIntlSegmenter) {
+      import('@formatjs/intl-segmenter/polyfill-force').catch(() => {});
+    }
+  });
+}, 1000);
+
 export default function IntlSegmenterSuspense({ children }) {
   if (supportsIntlSegmenter) {
     return <Suspense fallback={<Loader />}>{children}</Suspense>;

src/components/lazy-shazam.jsx

@@ -1,33 +1,46 @@
 /*
   Rendered but hidden. Only show when visible
 */
-import { useLayoutEffect, useRef, useState } from 'preact/hooks';
+import { useEffect, useRef, useState } from 'preact/hooks';
 import { useInView } from 'react-intersection-observer';
 
-export default function LazyShazam({ children }) {
+// The sticky header, usually at the top
+const TOP = 48;
+
+const shazamIDs = {};
+
+export default function LazyShazam({ id, children }) {
   const containerRef = useRef();
+  const hasID = !!shazamIDs[id];
   const [visible, setVisible] = useState(false);
-  const [visibleStart, setVisibleStart] = useState(false);
+  const [visibleStart, setVisibleStart] = useState(hasID || false);
 
   const { ref } = useInView({
     root: null,
+    rootMargin: `-${TOP}px 0px 0px 0px`,
     trackVisibility: true,
     delay: 1000,
     onChange: (inView) => {
       if (inView) {
         setVisible(true);
+        if (id) shazamIDs[id] = true;
       }
     },
     triggerOnce: true,
     skip: visibleStart || visible,
   });
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     if (!containerRef.current) return;
     const rect = containerRef.current.getBoundingClientRect();
-    if (rect.bottom > 0) {
+    if (rect.bottom > TOP) {
+      if (rect.top < window.innerHeight) {
+        setVisible(true);
+      } else {
         setVisibleStart(true);
       }
+      if (id) shazamIDs[id] = true;
+    }
   }, []);
 
   if (visibleStart) return children;

src/components/media-post.jsx

@@ -8,6 +8,7 @@ import FilterContext from '../utils/filter-context';
 import { isFiltered } from '../utils/filters';
 import states, { statusKey } from '../utils/states';
 import store from '../utils/store';
+import { getCurrentAccountID } from '../utils/store-utils';
 
 import Media from './media';
 
@@ -88,7 +89,7 @@ function MediaPost({
   };
 
   const currentAccount = useMemo(() => {
-    return store.session.get('currentAccount');
+    return getCurrentAccountID();
   }, []);
   const isSelf = useMemo(() => {
     return currentAccount && currentAccount === accountId;

src/components/media.jsx

@@ -9,12 +9,12 @@ import {
 } from 'preact/hooks';
 import QuickPinchZoom, { make3dTransformValue } from 'react-quick-pinch-zoom';
 
+import formatDuration from '../utils/format-duration';
 import mem from '../utils/mem';
 import states from '../utils/states';
 
 import Icon from './icon';
 import Link from './link';
-import { formatDuration } from './status';
 
 const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent); // https://stackoverflow.com/a/23522755
 
@@ -74,7 +74,7 @@ function Media({
   altIndex,
   onClick = () => {},
 }) {
-  const {
+  let {
     blurhash,
     description,
     meta,
@@ -84,15 +84,27 @@ function Media({
     url,
     type,
   } = media;
+  if (/no\-preview\./i.test(previewUrl)) {
+    previewUrl = null;
+  }
   const { original = {}, small, focus } = meta || {};
 
-  const width = showOriginal ? original?.width : small?.width;
-  const height = showOriginal ? original?.height : small?.height;
+  const width = showOriginal
+    ? original?.width
+    : small?.width || original?.width;
+  const height = showOriginal
+    ? original?.height
+    : small?.height || original?.height;
   const mediaURL = showOriginal ? url : previewUrl || url;
   const remoteMediaURL = showOriginal
     ? remoteUrl
     : previewRemoteUrl || remoteUrl;
-  const orientation = width >= height ? 'landscape' : 'portrait';
+  const hasDimensions = width && height;
+  const orientation = hasDimensions
+    ? width > height
+      ? 'landscape'
+      : 'portrait'
+    : null;
 
   const rgbAverageColor = blurhash ? getBlurHashAverageColor(blurhash) : null;
 
@@ -133,7 +145,8 @@ function Media({
     enabled: pinchZoomEnabled,
     draggableUnZoomed: false,
     inertiaFriction: 0.9,
-    doubleTapZoomOutOnMaxScale: true,
+    tapZoomFactor: 2,
+    doubleTapToggleZoom: true,
     containerProps: {
       className: 'media-zoom',
       style: {
@@ -153,7 +166,7 @@ function Media({
     [to],
   );
 
-  const remoteMediaURLObj = remoteMediaURL ? new URL(remoteMediaURL) : null;
+  const remoteMediaURLObj = remoteMediaURL ? getURLObj(remoteMediaURL) : null;
   const isVideoMaybe =
     type === 'unknown' &&
     remoteMediaURLObj &&
@@ -290,7 +303,11 @@ function Media({
                 }}
                 onError={(e) => {
                   const { src } = e.target;
-                  if (src === mediaURL && mediaURL !== remoteMediaURL) {
+                  if (
+                    src === mediaURL &&
+                    remoteMediaURL &&
+                    mediaURL !== remoteMediaURL
+                  ) {
                     e.target.src = remoteMediaURL;
                   }
                 }}
@@ -321,6 +338,55 @@ function Media({
                 onLoad={(e) => {
                   // e.target.closest('.media-image').style.backgroundImage = '';
                   e.target.dataset.loaded = true;
+                  const $media = e.target.closest('.media');
+                  if (!hasDimensions && $media) {
+                    const { naturalWidth, naturalHeight } = e.target;
+                    $media.dataset.orientation =
+                      naturalWidth > naturalHeight ? 'landscape' : 'portrait';
+                    $media.style.setProperty('--width', `${naturalWidth}px`);
+                    $media.style.setProperty('--height', `${naturalHeight}px`);
+                    $media.style.aspectRatio = `${naturalWidth}/${naturalHeight}`;
+                  }
+
+                  // Check natural aspect ratio vs display aspect ratio
+                  if ($media) {
+                    const {
+                      clientWidth,
+                      clientHeight,
+                      naturalWidth,
+                      naturalHeight,
+                    } = e.target;
+                    if (
+                      clientWidth &&
+                      clientHeight &&
+                      naturalWidth &&
+                      naturalHeight
+                    ) {
+                      const minDimension = 88;
+                      if (
+                        naturalWidth < minDimension ||
+                        naturalHeight < minDimension
+                      ) {
+                        $media.dataset.hasSmallDimension = true;
+                      } else {
+                        const naturalAspectRatio = (
+                          naturalWidth / naturalHeight
+                        ).toFixed(2);
+                        const displayAspectRatio = (
+                          clientWidth / clientHeight
+                        ).toFixed(2);
+                        const similarThreshold = 0.05;
+                        if (
+                          naturalAspectRatio === displayAspectRatio ||
+                          Math.abs(naturalAspectRatio - displayAspectRatio) <
+                            similarThreshold
+                        ) {
+                          $media.dataset.hasNaturalAspectRatio = true;
+                        }
+                        // $media.dataset.aspectRatios = `${naturalAspectRatio} ${displayAspectRatio}`;
+                      }
+                    }
+                  }
                 }}
                 onError={(e) => {
                   const { src } = e.target;
@@ -338,6 +404,7 @@ function Media({
       </Figure>
     );
   } else if (type === 'gifv' || type === 'video' || isVideoMaybe) {
+    const hasDuration = original.duration > 0;
     const shortDuration = original.duration < 31;
     const isGIF = type === 'gifv' && shortDuration;
     // If GIF is too long, treat it as a video
@@ -347,6 +414,28 @@ function Media({
     const autoGIFAnimate = !showOriginal && autoAnimate && isGIF;
     const showProgress = original.duration > 5;
 
+    // This string is only for autoplay + muted to work on Mobile Safari
+    const gifHTML = `
+      <video
+        src="${url}"
+        poster="${previewUrl}"
+        width="${width}"
+        height="${height}"
+        data-orientation="${orientation}"
+        preload="auto"
+        autoplay
+        muted
+        playsinline
+        ${loopable ? 'loop' : ''}
+        ondblclick="this.paused ? this.play() : this.pause()"
+        ${
+          showProgress
+            ? "ontimeupdate=\"this.closest('.media-gif') && this.closest('.media-gif').style.setProperty('--progress', `${~~((this.currentTime / this.duration) * 100)}%`)\""
+            : ''
+        }
+      ></video>
+  `;
+
     const videoHTML = `
       <video
         src="${url}"
@@ -356,16 +445,9 @@ function Media({
         data-orientation="${orientation}"
         preload="auto"
         autoplay
-      muted="${isGIF}"
-      ${isGIF ? '' : 'controls'}
         playsinline
-      loop="${loopable}"
-      ${isGIF ? 'ondblclick="this.paused ? this.play() : this.pause()"' : ''}
-      ${
-        isGIF && showProgress
-          ? "ontimeupdate=\"this.closest('.media-gif') && this.closest('.media-gif').style.setProperty('--progress', `${~~((this.currentTime / this.duration) * 100)}%`)\""
-          : ''
-      }
+        ${loopable ? 'loop' : ''}
+        controls
       ></video>
     `;
 
@@ -429,17 +511,22 @@ function Media({
                 <div
                   ref={mediaRef}
                   dangerouslySetInnerHTML={{
-                    __html: videoHTML,
+                    __html: gifHTML,
                   }}
                 />
               </QuickPinchZoom>
-            ) : (
+            ) : isGIF ? (
               <div
                 class="video-container"
                 dangerouslySetInnerHTML={{
-                  __html: videoHTML,
+                  __html: gifHTML,
                 }}
               />
+            ) : (
+              <div
+                class="video-container"
+                dangerouslySetInnerHTML={{ __html: videoHTML }}
+              />
             )
           ) : isGIF ? (
             <video
@@ -473,6 +560,7 @@ function Media({
             />
           ) : (
             <>
+              {previewUrl ? (
                 <img
                   src={previewUrl}
                   alt={showInlineDesc ? '' : description}
@@ -480,7 +568,53 @@ function Media({
                   height={height}
                   data-orientation={orientation}
                   loading="lazy"
+                  decoding="async"
+                  onLoad={(e) => {
+                    if (!hasDimensions) {
+                      const $media = e.target.closest('.media');
+                      if ($media) {
+                        const { naturalHeight, naturalWidth } = e.target;
+                        $media.dataset.orientation =
+                          naturalWidth > naturalHeight
+                            ? 'landscape'
+                            : 'portrait';
+                        $media.style.setProperty(
+                          '--width',
+                          `${naturalWidth}px`,
+                        );
+                        $media.style.setProperty(
+                          '--height',
+                          `${naturalHeight}px`,
+                        );
+                        $media.style.aspectRatio = `${naturalWidth}/${naturalHeight}`;
+                      }
+                    }
+                  }}
                 />
+              ) : (
+                <video
+                  src={url + '#t=0.1'} // Make Safari show 1st-frame preview
+                  width={width}
+                  height={height}
+                  data-orientation={orientation}
+                  preload="metadata"
+                  muted
+                  disablePictureInPicture
+                  onLoadedMetadata={(e) => {
+                    if (!hasDuration) {
+                      const { duration } = e.target;
+                      if (duration) {
+                        const formattedDuration = formatDuration(duration);
+                        const container = e.target.closest('.media-video');
+                        if (container) {
+                          container.dataset.formattedDuration =
+                            formattedDuration;
+                        }
+                      }
+                    }
+                  }}
+                />
+              )}
               <div class="media-play">
                 <Icon icon="play" size="xl" />
               </div>
@@ -506,7 +640,7 @@ function Media({
           style={!showOriginal && mediaStyles}
         >
           {showOriginal ? (
-            <audio src={remoteUrl || url} preload="none" controls autoplay />
+            <audio src={remoteUrl || url} preload="none" controls autoPlay />
           ) : previewUrl ? (
             <img
               src={previewUrl}
@@ -539,4 +673,13 @@ function Media({
   }
 }
 
+function getURLObj(url) {
+  try {
+    // Fake base URL if url doesn't have https:// prefix
+    return new URL(url, location.origin);
+  } catch (e) {
+    return null;
+  }
+}
+
 export default Media;

src/components/menu-confirm.jsx

@@ -1,8 +1,8 @@
-import { MenuItem, SubMenu } from '@szhsin/react-menu';
+import { MenuItem } from '@szhsin/react-menu';
 import { cloneElement } from 'preact';
-import { useRef } from 'preact/hooks';
 
 import Menu2 from './menu2';
+import SubMenu2 from './submenu2';
 
 function MenuConfirm({
   subMenu = false,
@@ -23,11 +23,9 @@ function MenuConfirm({
     }
     return children;
   }
-  const Parent = subMenu ? SubMenu : Menu2;
-  const menuRef = useRef();
+  const Parent = subMenu ? SubMenu2 : Menu2;
   return (
     <Parent
-      instanceRef={menuRef}
       openTrigger="clickOnly"
       direction="bottom"
       overflow="auto"
@@ -37,19 +35,6 @@ function MenuConfirm({
       {...restProps}
       menuButton={subMenu ? undefined : children}
       label={subMenu ? children : undefined}
-      // Test fix for bug; submenus not opening on Android
-      itemProps={{
-        onPointerMove: (e) => {
-          if (e.pointerType === 'touch') {
-            menuRef.current?.openMenu?.();
-          }
-        },
-        onPointerLeave: (e) => {
-          if (e.pointerType === 'touch') {
-            menuRef.current?.openMenu?.();
-          }
-        },
-      }}
     >
       <MenuItem className={menuItemClassName} onClick={onClick}>
         {confirmLabel}

src/components/modal.css

@@ -10,17 +10,56 @@
   align-items: center;
   background-color: var(--backdrop-color);
   animation: appear 0.5s var(--timing-function) both;
+  transition: all 0.5s var(--timing-function);
 
   &.solid {
     background-color: var(--backdrop-solid-color);
   }
 
+  --compose-button-dimension: 56px;
+  --compose-button-dimension-half: calc(var(--compose-button-dimension) / 2);
+  --compose-button-dimension-margin: 16px;
+
+  &.min {
+    /* Minimized */
+    pointer-events: none;
+    user-select: none;
+    overflow: hidden;
+    transform: scale(0);
+    --right: max(
+      var(--compose-button-dimension-margin),
+      env(safe-area-inset-right)
+    );
+    --bottom: max(
+      var(--compose-button-dimension-margin),
+      env(safe-area-inset-bottom)
+    );
+    --origin-right: calc(
+      100% - var(--compose-button-dimension-half) - var(--right)
+    );
+    --origin-bottom: calc(
+      100% - var(--compose-button-dimension-half) - var(--bottom)
+    );
+    transform-origin: var(--origin-right) var(--origin-bottom);
+  }
+
   .sheet {
     transition: transform 0.3s var(--timing-function);
-    transform-origin: center bottom;
+    transform-origin: 80% 80%;
   }
 
   &:has(~ div) .sheet {
     transform: scale(0.975);
   }
 }
+
+@media (max-width: calc(40em - 1px)) {
+  #app[data-shortcuts-view-mode='tab-menu-bar'] ~ #modal-container > div.min {
+    border: 2px solid red;
+
+    --bottom: calc(
+      var(--compose-button-dimension-margin) + env(safe-area-inset-bottom) +
+        52px
+    );
+  }
+}

src/components/modal.jsx

@@ -8,7 +8,7 @@ import useCloseWatcher from '../utils/useCloseWatcher';
 
 const $modalContainer = document.getElementById('modal-container');
 
-function Modal({ children, onClose, onClick, class: className }) {
+function Modal({ children, onClose, onClick, class: className, minimized }) {
   if (!children) return null;
 
   const modalRef = useRef();
@@ -41,6 +41,33 @@ function Modal({ children, onClose, onClick, class: className }) {
   );
   useCloseWatcher(onClose, [onClose]);
 
+  useEffect(() => {
+    const $deckContainers = document.querySelectorAll('.deck-container');
+    if (minimized) {
+      // Similar to focusDeck in focus-deck.jsx
+      // Focus last deck
+      const page = $deckContainers[$deckContainers.length - 1]; // last one
+      if (page && page.tabIndex === -1) {
+        page.focus();
+      }
+    } else {
+      if (children) {
+        $deckContainers.forEach(($deckContainer) => {
+          $deckContainer.setAttribute('inert', '');
+        });
+      } else {
+        $deckContainers.forEach(($deckContainer) => {
+          $deckContainer.removeAttribute('inert');
+        });
+      }
+    }
+    return () => {
+      $deckContainers.forEach(($deckContainer) => {
+        $deckContainer.removeAttribute('inert');
+      });
+    };
+  }, [children, minimized]);
+
   const Modal = (
     <div
       ref={(node) => {
@@ -54,7 +81,8 @@ function Modal({ children, onClose, onClick, class: className }) {
           onClose?.(e);
         }
       }}
-      tabIndex="-1"
+      tabIndex={minimized ? 0 : '-1'}
+      inert={minimized}
       onFocus={(e) => {
         try {
           if (e.target === e.currentTarget) {

src/components/modals.jsx

@@ -1,4 +1,4 @@
-import { lazy } from 'preact/compat';
+import { useEffect } from 'preact/hooks';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { subscribe, useSnapshot } from 'valtio';
 
@@ -9,19 +9,16 @@ import showToast from '../utils/show-toast';
 import states from '../utils/states';
 
 import AccountSheet from './account-sheet';
-// import Compose from './compose';
+import ComposeSuspense, { preload } from './compose-suspense';
 import Drafts from './drafts';
 import EmbedModal from './embed-modal';
 import GenericAccounts from './generic-accounts';
-import IntlSegmenterSuspense from './intl-segmenter-suspense';
 import MediaAltModal from './media-alt-modal';
 import MediaModal from './media-modal';
 import Modal from './modal';
 import ReportModal from './report-modal';
 import ShortcutsSettings from './shortcuts-settings';
 
-const Compose = lazy(() => import('./compose'));
-
 subscribe(states, (changes) => {
   for (const [action, path, value, prevValue] of changes) {
     // When closing modal, focus on deck
@@ -36,12 +33,18 @@ export default function Modals() {
   const navigate = useNavigate();
   const location = useLocation();
 
+  useEffect(() => {
+    setTimeout(preload, 1000);
+  }, []);
+
   return (
     <>
       {!!snapStates.showCompose && (
-        <Modal class="solid">
-          <IntlSegmenterSuspense>
-            <Compose
+        <Modal
+          class={`solid ${snapStates.composerState.minimized ? 'min' : ''}`}
+          minimized={!!snapStates.composerState.minimized}
+        >
+          <ComposeSuspense
             replyToStatus={
               typeof snapStates.showCompose !== 'boolean'
                 ? snapStates.showCompose.replyToStatus
@@ -84,7 +87,6 @@ export default function Modals() {
               }
             }}
           />
-          </IntlSegmenterSuspense>
         </Modal>
       )}
       {!!snapStates.showSettings && (
@@ -187,6 +189,7 @@ export default function Modals() {
             }
             postID={snapStates.showGenericAccounts.postID}
             onClose={() => (states.showGenericAccounts = false)}
+            blankCopy={snapStates.showGenericAccounts.blankCopy}
           />
         </Modal>
       )}

src/components/name-text.jsx

@@ -20,9 +20,17 @@ function NameText({
   external,
   onClick,
 }) {
-  const { acct, avatar, avatarStatic, id, url, displayName, emojis, bot } =
-    account;
-  let { username } = account;
+  const {
+    acct,
+    avatar,
+    avatarStatic,
+    id,
+    url,
+    displayName,
+    emojis,
+    bot,
+    username,
+  } = account;
   const [_, acct1, acct2] = acct.match(/([^@]+)(@.+)/i) || [, acct];
 
   const trimmedUsername = username.toLowerCase().trim();
@@ -31,19 +39,17 @@ function NameText({
     .replace(/(\:(\w|\+|\-)+\:)(?=|[\!\.\?]|$)/g, '') // Remove shortcodes, regex from https://regex101.com/r/iE9uV0/1
     .replace(/\s+/g, ''); // E.g. "My name" === "myname"
   const shortenedAlphaNumericDisplayName = shortenedDisplayName.replace(
-    /[^a-z0-9]/gi,
+    /[^a-z0-9@\.]/gi,
     '',
   ); // Remove non-alphanumeric characters
 
-  if (
-    !short &&
+  const hideUsername =
+    (!short &&
       (trimmedUsername === trimmedDisplayName ||
         trimmedUsername === shortenedDisplayName ||
         trimmedUsername === shortenedAlphaNumericDisplayName ||
-      nameCollator.compare(trimmedUsername, shortenedDisplayName) === 0)
-  ) {
-    username = null;
-  }
+        nameCollator.compare(trimmedUsername, shortenedDisplayName) === 0)) ||
+    shortenedAlphaNumericDisplayName === acct.toLowerCase();
 
   return (
     <a
@@ -57,9 +63,15 @@ function NameText({
       }
       onClick={(e) => {
         if (external) return;
+        if (e.shiftKey) return; // Save link? 🤷‍♂️
         e.preventDefault();
         e.stopPropagation();
         if (onClick) return onClick(e);
+        if (e.metaKey || e.ctrlKey || e.shiftKey || e.which === 2) {
+          const internalURL = `#/${instance}/a/${id}`;
+          window.open(internalURL, '_blank');
+          return;
+        }
         states.showAccount = {
           account,
           instance,
@@ -76,7 +88,7 @@ function NameText({
           <b>
             <EmojiText text={displayName} emojis={emojis} />
           </b>
-          {!showAcct && username && (
+          {!showAcct && !hideUsername && (
             <>
               {' '}
               <i>@{username}</i>

src/components/nav-menu.jsx

@@ -1,11 +1,6 @@
 import './nav-menu.css';
 
-import {
-  ControlledMenu,
-  MenuDivider,
-  MenuItem,
-  SubMenu,
-} from '@szhsin/react-menu';
+import { ControlledMenu, MenuDivider, MenuItem } from '@szhsin/react-menu';
 import { memo } from 'preact/compat';
 import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
 import { useLongPress } from 'use-long-press';
@@ -16,10 +11,13 @@ import { getLists } from '../utils/lists';
 import safeBoundingBoxPadding from '../utils/safe-bounding-box-padding';
 import states from '../utils/states';
 import store from '../utils/store';
+import { getCurrentAccountID } from '../utils/store-utils';
+import supports from '../utils/supports';
 
 import Avatar from './avatar';
 import Icon from './icon';
 import MenuLink from './menu-link';
+import SubMenu2 from './submenu2';
 
 function NavMenu(props) {
   const snapStates = useSnapshot(states);
@@ -28,9 +26,8 @@ function NavMenu(props) {
   const [currentAccount, moreThanOneAccount] = useMemo(() => {
     const accounts = store.local.getJSON('accounts') || [];
     const acc =
-      accounts.find(
-        (account) => account.info.id === store.session.get('currentAccount'),
-      ) || accounts[0];
+      accounts.find((account) => account.info.id === getCurrentAccountID()) ||
+      accounts[0];
     return [acc, accounts.length > 1];
   }, []);
 
@@ -87,8 +84,10 @@ function NavMenu(props) {
     return results;
   }
 
+  const supportsLists = supports('@mastodon/lists');
   const [lists, setLists] = useState([]);
   useEffect(() => {
+    if (!supportsLists) return;
     if (menuState === 'open') {
       getLists().then(setLists);
     }
@@ -148,7 +147,7 @@ function NavMenu(props) {
         }}
         {...props}
         overflow="auto"
-        // viewScroll="close"
+        viewScroll="close"
         position="anchor"
         align="center"
         boundingBoxPadding={boundingBoxPadding}
@@ -190,9 +189,11 @@ function NavMenu(props) {
                 <Icon icon="history2" size="l" />
                 <span>Catch-up</span>
               </MenuLink>
+              {supports('@mastodon/mentions') && (
                 <MenuLink to="/mentions">
                   <Icon icon="at" size="l" /> <span>Mentions</span>
                 </MenuLink>
+              )}
               <MenuLink to="/notifications">
                 <Icon icon="notification" size="l" /> <span>Notifications</span>
                 {snapStates.notificationsShowNew && (
@@ -209,7 +210,7 @@ function NavMenu(props) {
                 </MenuLink>
               )}
               {lists?.length > 0 ? (
-                <SubMenu
+                <SubMenu2
                   menuClassName="nav-submenu"
                   overflow="auto"
                   gap={-8}
@@ -234,17 +235,19 @@ function NavMenu(props) {
                       ))}
                     </>
                   )}
-                </SubMenu>
+                </SubMenu2>
               ) : (
+                supportsLists && (
                   <MenuLink to="/l">
                     <Icon icon="list" size="l" />
                     <span>Lists</span>
                   </MenuLink>
+                )
               )}
               <MenuLink to="/b">
                 <Icon icon="bookmark" size="l" /> <span>Bookmarks</span>
               </MenuLink>
-              <SubMenu
+              <SubMenu2
                 menuClassName="nav-submenu"
                 overflow="auto"
                 gap={-8}
@@ -264,10 +267,12 @@ function NavMenu(props) {
                   <span>Followed Hashtags</span>
                 </MenuLink>
                 <MenuDivider />
+                {supports('@mastodon/filters') && (
                   <MenuLink to="/ft">
                     <Icon icon="filters" size="l" />
                     Filters
                   </MenuLink>
+                )}
                 <MenuItem
                   onClick={() => {
                     states.showGenericAccounts = {
@@ -293,7 +298,7 @@ function NavMenu(props) {
                   <Icon icon="block" size="l" />
                   Blocked users&hellip;
                 </MenuItem>{' '}
-              </SubMenu>
+              </SubMenu2>
               <MenuDivider />
               <MenuItem
                 onClick={() => {

src/components/notification.jsx

@@ -4,6 +4,7 @@ import { memo } from 'preact/compat';
 import shortenNumber from '../utils/shorten-number';
 import states, { statusKey } from '../utils/states';
 import store from '../utils/store';
+import { getCurrentAccountID } from '../utils/store-utils';
 import useTruncated from '../utils/useTruncated';
 
 import Avatar from './avatar';
@@ -27,6 +28,7 @@ const NOTIFICATION_ICONS = {
   'admin.signup': 'account-edit',
   'admin.report': 'account-warning',
   severed_relationships: 'heart-break',
+  moderation_warning: 'alert',
   emoji_reaction: 'emoji2',
   'pleroma:emoji_reaction': 'emoji2',
 };
@@ -44,6 +46,8 @@ poll = A poll you have voted in or created has ended
 update = A status you interacted with has been edited
 admin.sign_up = Someone signed up (optionally sent to admins)
 admin.report = A new report has been filed
+severed_relationships = Severed relationships
+moderation_warning = Moderation warning
 */
 
 function emojiText(emoji, emoji_url) {
@@ -90,6 +94,7 @@ const contentText = {
       Lost connections with <i>{name}</i>.
     </>
   ),
+  moderation_warning: <b>Moderation warning</b>,
   emoji_reaction: emojiText,
   'pleroma:emoji_reaction': emojiText,
 };
@@ -116,7 +121,18 @@ const SEVERED_RELATIONSHIPS_TEXT = {
   ),
 };
 
-const AVATARS_LIMIT = 50;
+const MODERATION_WARNING_TEXT = {
+  none: 'Your account has received a moderation warning.',
+  disable: 'Your account has been disabled.',
+  mark_statuses_as_sensitive:
+    'Some of your posts have been marked as sensitive.',
+  delete_statuses: 'Some of your posts have been deleted.',
+  sensitive: 'Your posts will be marked as sensitive from now on.',
+  silence: 'Your account has been limited.',
+  suspend: 'Your account has been suspended.',
+};
+
+const AVATARS_LIMIT = 30;
 
 function Notification({
   notification,
@@ -124,15 +140,23 @@ function Notification({
   isStatic,
   disableContextMenu,
 }) {
-  const { id, status, account, report, event, _accounts, _statuses } =
-    notification;
+  const {
+    id,
+    status,
+    account,
+    report,
+    event,
+    moderation_warning,
+    _accounts,
+    _statuses,
+  } = notification;
   let { type } = notification;
 
   // status = Attached when type of the notification is favourite, reblog, status, mention, poll, or update
   const actualStatus = status?.reblog || status;
   const actualStatusID = actualStatus?.id;
 
-  const currentAccount = store.session.get('currentAccount');
+  const currentAccount = getCurrentAccountID();
   const isSelf = currentAccount === account?.id;
   const isVoted = status?.poll?.voted;
   const isReplyToOthers =
@@ -313,6 +337,20 @@ function Notification({
                 .
               </div>
             )}
+            {type === 'moderation_warning' && !!moderation_warning && (
+              <div>
+                {MODERATION_WARNING_TEXT[moderation_warning.action]}
+                <br />
+                <a
+                  href={`/disputes/strikes/${moderation_warning.id}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  Learn more <Icon icon="external" size="s" />
+                </a>
+                .
+              </div>
+            )}
           </>
         )}
         {_accounts?.length > 1 && (
@@ -336,11 +374,7 @@ function Notification({
                         ? 'xxl'
                         : _accounts.length < 20
                         ? 'xl'
-                        : _accounts.length < 30
-                        ? 'l'
-                        : _accounts.length < 40
-                        ? 'm'
-                        : 's' // My god, this person is popular!
+                        : 'l'
                     }
                     key={account.id}
                     alt={`${account.displayName} @${account.acct}`}

src/components/relative-time.jsx

@@ -8,7 +8,7 @@ import dayjs from 'dayjs';
 import dayjsTwitter from 'dayjs-twitter';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import { useMemo } from 'preact/hooks';
+import { useEffect, useMemo, useReducer } from 'preact/hooks';
 
 dayjs.extend(dayjsTwitter);
 dayjs.extend(localizedFormat);
@@ -18,22 +18,51 @@ const dtf = new Intl.DateTimeFormat();
 
 export default function RelativeTime({ datetime, format }) {
   if (!datetime) return null;
+  const [renderCount, rerender] = useReducer((x) => x + 1, 0);
   const date = useMemo(() => dayjs(datetime), [datetime]);
-  const dateStr = useMemo(() => {
+  const [dateStr, dt, title] = useMemo(() => {
+    if (!date.isValid()) return ['' + datetime, '', ''];
+    let str;
     if (format === 'micro') {
       // If date <= 1 day ago or day is within this year
       const now = dayjs();
       const dayDiff = now.diff(date, 'day');
       if (dayDiff <= 1 || now.year() === date.year()) {
-        return date.twitter();
+        str = date.twitter();
       } else {
-        return dtf.format(date.toDate());
+        str = dtf.format(date.toDate());
       }
     }
-    return date.fromNow();
-  }, [date, format]);
-  const dt = useMemo(() => date.toISOString(), [date]);
-  const title = useMemo(() => date.format('LLLL'), [date]);
+    if (!str) str = date.fromNow();
+    return [str, date.toISOString(), date.format('LLLL')];
+  }, [date, format, renderCount]);
+
+  useEffect(() => {
+    if (!date.isValid()) return;
+    let timeout;
+    let raf;
+    function rafRerender() {
+      raf = requestAnimationFrame(() => {
+        rerender();
+        scheduleRerender();
+      });
+    }
+    function scheduleRerender() {
+      // If less than 1 minute, rerender every 10s
+      // If less than 1 hour rerender every 1m
+      // Else, don't need to rerender
+      if (date.diff(dayjs(), 'minute', true) < 1) {
+        timeout = setTimeout(rafRerender, 10_000);
+      } else if (date.diff(dayjs(), 'hour', true) < 1) {
+        timeout = setTimeout(rafRerender, 60_000);
+      }
+    }
+    scheduleRerender();
+    return () => {
+      clearTimeout(timeout);
+      cancelAnimationFrame(raf);
+    };
+  }, []);
 
   return (
     <time datetime={dt} title={title}>

src/components/shortcuts-settings.jsx

@@ -19,6 +19,7 @@ import pmem from '../utils/pmem';
 import showToast from '../utils/show-toast';
 import states from '../utils/states';
 import store from '../utils/store';
+import { getCurrentAccountID } from '../utils/store-utils';
 
 import AsyncText from './AsyncText';
 import Icon from './icon';
@@ -787,7 +788,7 @@ function ImportExport({ shortcuts, onClose }) {
                 disabled={importUIState === 'cloud-downloading'}
                 onClick={async () => {
                   setImportUIState('cloud-downloading');
-                  const currentAccount = store.session.get('currentAccount');
+                  const currentAccount = getCurrentAccountID();
                   showToast(
                     'Downloading saved shortcuts from instance server…',
                   );
@@ -1043,7 +1044,7 @@ function ImportExport({ shortcuts, onClose }) {
                 disabled={importUIState === 'cloud-uploading'}
                 onClick={async () => {
                   setImportUIState('cloud-uploading');
-                  const currentAccount = store.session.get('currentAccount');
+                  const currentAccount = getCurrentAccountID();
                   try {
                     const relationships =
                       await masto.v1.accounts.relationships.fetch({

src/components/shortcuts.jsx

@@ -1,6 +1,6 @@
 import './shortcuts.css';
 
-import { MenuDivider, SubMenu } from '@szhsin/react-menu';
+import { MenuDivider } from '@szhsin/react-menu';
 import { memo } from 'preact/compat';
 import { useRef, useState } from 'preact/hooks';
 import { useHotkeys } from 'react-hotkeys-hook';
@@ -17,6 +17,7 @@ import Icon from './icon';
 import Link from './link';
 import Menu2 from './menu2';
 import MenuLink from './menu-link';
+import SubMenu2 from './submenu2';
 
 function Shortcuts() {
   const { instance } = api();
@@ -182,7 +183,7 @@ function Shortcuts() {
           {formattedShortcuts.map(({ id, path, title, subtitle, icon }, i) => {
             if (id === 'lists') {
               return (
-                <SubMenu
+                <SubMenu2
                   menuClassName="glass-menu"
                   overflow="auto"
                   gap={-8}
@@ -205,7 +206,7 @@ function Shortcuts() {
                       <span>{list.title}</span>
                     </MenuLink>
                   ))}
-                </SubMenu>
+                </SubMenu2>
               );
             }
 

src/components/status.css

@@ -47,7 +47,7 @@
 }
 .visibility-direct {
   --yellow-stripes: repeating-linear-gradient(
-    -45deg,
+    135deg,
     var(--reply-to-faded-color),
     var(--reply-to-faded-color) 10px,
     var(--reply-to-faded-color) 10px,
@@ -160,7 +160,7 @@
   display: block;
   position: relative;
 
-  &:after {
+  &[data-read-more]:after {
     content: attr(data-read-more);
     line-height: 1;
     display: inline-block;
@@ -365,6 +365,10 @@
     background-image: var(--yellow-stripes);
   }
 
+  .status-pre-meta + & {
+    background-image: none;
+  }
+
   > * {
     opacity: 0.65;
     transition: opacity 1s ease-out;
@@ -565,8 +569,15 @@
   font-weight: bold;
   vertical-align: middle;
   display: inline-block;
+
+  &.horizontal {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    max-width: 100%;
   }
-.status-filtered-badge.badge-meta {
+}
+.status-filtered-badge:not(.horizontal).badge-meta {
   display: inline-flex;
   flex-direction: column;
   position: relative;
@@ -580,10 +591,10 @@
   border-color: var(--text-color);
   background: var(--bg-color);
 }
-.status-filtered-badge.badge-meta > span:first-child {
+.status-filtered-badge:not(.horizontal).badge-meta > span:first-child {
   white-space: nowrap;
 }
-.status-filtered-badge.badge-meta > span + span {
+.status-filtered-badge:not(.horizontal).badge-meta > span + span {
   display: block;
   font-size: 9px;
   font-weight: normal;
@@ -597,6 +608,10 @@
   left: 0;
   text-align: center;
 }
+.status-filtered-badge.horizontal.badge-meta > span + span {
+  font-weight: normal;
+  text-transform: none;
+}
 
 .status.large > .container > .content-container {
   margin-left: calc(-50px - 16px);
@@ -618,6 +633,7 @@
   ~ *:not(
       .content.truncated,
       .media-container,
+      .media-first-container,
       .card,
       .media-figure-multiple,
       .spoiler-media-button
@@ -638,6 +654,7 @@
 
   ~ *:not(
       .media-container,
+      .media-first-container,
       .card,
       .media-figure-multiple,
       .spoiler-media-button
@@ -708,11 +725,12 @@
     }
   }
 
-  ~ :is(.media-container, .media-figure-multiple) .media {
+  ~ :is(.media-container, .media-first-container, .media-figure-multiple)
+    .media {
     background-image: radial-gradient(
       circle at 50% 50%,
       var(--average-color, var(--bg-faded-color)),
-      var(--bg-color) 20em
+      var(--bg-color) 25em
     );
 
     > *:not(.media-play, .alt-badge) {
@@ -790,7 +808,9 @@
     black 1.5em
   );
 }
-.timeline-deck .status:not(.truncated .status) .content.truncated:after {
+.timeline-deck
+  .status:not(.truncated .status)
+  .content.truncated[data-read-more]:after {
   content: attr(data-read-more);
   line-height: 1;
   display: inline-block;
@@ -816,6 +836,12 @@
 .timeline-deck .status .content.truncated ~ .card {
   display: none;
 }
+.status .content .inner-content {
+  > img[height] {
+    height: auto;
+    aspect-ratio: var(--original-aspect-ratio);
+  }
+}
 .status .content .inner-content a:not(.mention, .has-url-text) {
   color: var(--link-text-color);
 }
@@ -908,7 +934,7 @@
   grid-auto-rows: 1fr;
   gap: 2px;
   /* height: 160px; */
-  min-height: var(--pointer-min-dimension);
+  min-height: var(--min-dimension);
   height: auto;
   max-height: max(160px, 33vh);
 }
@@ -999,6 +1025,10 @@
     background-color: var(--average-color, var(--bg-faded-color));
     background-clip: padding-box;
   }
+
+  &[data-has-small-dimension] img {
+    object-fit: scale-down;
+  }
 }
 .status .media-container:not(.media-eq1) .media {
   aspect-ratio: auto !important;
@@ -1037,13 +1067,17 @@
 .status .media-container.media-eq1 .media {
   display: inline-block;
   max-width: 100% !important;
-  min-width: var(--pointer-min-dimension);
+  min-width: var(--min-dimension);
   /* width: auto; */
-  min-height: var(--pointer-min-dimension);
+  min-height: var(--min-dimension);
   /* --maxAspectHeight: max(160px, 33vh);
   --aspectWidth: calc(--width / --height * var(--maxAspectHeight)); */
   width: min(var(--aspectWidth), var(--width), 100%);
   max-height: min(var(--height), 33vh);
+
+  &[data-has-natural-aspect-ratio] {
+    --media-radius: 4px;
+  }
 }
 .status .media-container.media-eq1 .media[data-orientation='portrait'] {
   /* width: auto;
@@ -1300,7 +1334,7 @@ body:has(#modal-container .carousel) .status .media img:hover {
 :is(.status, .media-post) .media-audio {
   width: 100%;
   height: 100%;
-  min-height: var(--pointer-min-dimension);
+  min-height: var(--min-dimension);
   background-image: radial-gradient(
       circle at center center,
       transparent,
@@ -1314,6 +1348,283 @@ body:has(#modal-container .carousel) .status .media img:hover {
   background-blend-mode: multiply;
 }
 
+.status.skeleton .media-first-container {
+  min-height: 320px;
+  background-color: var(--outline-color);
+}
+
+.status .media-large-container {
+  width: 100%;
+  max-width: 100%;
+  display: inline-flex;
+  flex-direction: row;
+  /* align-items: center;
+  justify-content: center; */
+  column-gap: 8px;
+  flex-wrap: wrap;
+
+  .media[data-has-small-dimension] {
+    width: var(--width, auto) !important;
+  }
+
+  figure {
+    flex-direction: column;
+
+    figcaption {
+      flex-grow: 0 !important;
+      flex-basis: auto !important;
+      align-self: flex-start !important;
+    }
+  }
+}
+
+@keyframes media-carousel-slide {
+  0% {
+    transform: translateX(calc(var(--dots-count, 1) * 2.5px));
+  }
+  100% {
+    transform: translateX(calc(var(--dots-count, 1) * -2.5px));
+  }
+}
+
+.status-media-first {
+  timeline-scope: --media-carousel;
+
+  .meta-name {
+    opacity: 0.65;
+    transition: opacity 0.5s ease-in-out;
+
+    b + i {
+      opacity: 0;
+      transition: opacity 0.5s ease-in-out;
+    }
+  }
+  :is(:hover, :focus) > & .meta-name {
+    opacity: 1;
+    b + i {
+      opacity: 0.5;
+    }
+  }
+
+  .media-first-spoiler-content {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+    transition: opacity 0.5s ease-in-out;
+    opacity: 0.5;
+  }
+  &:hover .media-first-spoiler-content {
+    opacity: 1;
+  }
+
+  .media-first-spoiler-button {
+    display: inline-flex !important;
+  }
+
+  .media-first-container {
+    position: relative;
+    margin-top: 8px;
+    margin-inline: -16px;
+
+    @media (min-width: 40em) {
+      margin-inline: 0;
+    }
+
+    .media-carousel-controls {
+      flex-shrink: 0;
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .carousel-indexer {
+      z-index: 1;
+      position: absolute;
+      top: 8px;
+      right: 8px;
+      color: var(--media-fg-color);
+      background-color: var(--media-bg-color);
+      padding: 2px 8px;
+      border-radius: 16px;
+      font-size: 0.8em;
+      font-variant-numeric: tabular-nums;
+      opacity: 0.6;
+      transition: opacity 1s ease-in-out 0.3s;
+      border: var(--hairline-width) solid var(--media-outline-color);
+    }
+
+    .media-carousel-button {
+      display: flex;
+      flex-shrink: 0;
+      padding-inline: 8px;
+      margin-block: 3em;
+      pointer-events: auto;
+      cursor: pointer;
+      align-items: center;
+      justify-content: center;
+    }
+    .carousel-button {
+      @media (pointer: coarse) {
+        display: none;
+      }
+
+      + .carousel-button {
+        left: auto;
+        right: 8px;
+      }
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+      .carousel-button {
+        filter: opacity(0);
+      }
+      &:hover .carousel-button {
+        filter: opacity(1);
+      }
+    }
+  }
+
+  .media-first-carousel {
+    display: flex;
+    max-height: 80vh;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-snap-type: x mandatory;
+    scroll-behavior: smooth;
+    user-select: none;
+    scrollbar-width: none;
+    /* border: var(--hairline-width) solid var(--outline-color);
+    border-inline-width: 0;
+    background-color: var(--bg-faded-color); */
+    box-shadow: 0 0 0 var(--hairline-width) var(--outline-color);
+    scroll-timeline: --media-carousel x;
+
+    @media (min-width: 40em) {
+      /* margin-inline: 0; */
+      /* border-radius: 4px; */
+      /* border-inline-width: var(--hairline-width); */
+      box-shadow: none;
+    }
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    > .media-first-item {
+      scroll-snap-align: center;
+      scroll-snap-stop: always;
+      flex-shrink: 0;
+      display: flex;
+      width: 100%;
+      align-items: center;
+      justify-content: center;
+
+      &:not(:only-child) {
+        background-color: var(--bg-blur-color);
+        /* box-shadow: inset 0 0 0 var(--hairline-width) var(--outline-color); */
+      }
+
+      .media {
+        /* background-color: var(--average-color, var(--bg-faded-color)); */
+        width: var(--width, 100%);
+        max-width: 100%;
+        max-height: 100%;
+        min-height: var(--min-dimension);
+        /* max-height: min(var(--height), 80vh); */
+
+        &:has(img:not([data-loaded='true'])) {
+          min-height: 320px;
+        }
+
+        &:active {
+          transform: none;
+          filter: none;
+        }
+
+        img,
+        video {
+          object-fit: scale-down;
+          animation: none;
+
+          &:not([data-loaded='true']) {
+            background-color: var(--bg-color);
+          }
+        }
+      }
+    }
+  }
+  :is(:hover, :focus) > & .carousel-indexer {
+    opacity: 0;
+  }
+
+  .media-carousel-dots {
+    pointer-events: none;
+    display: flex;
+    gap: 5px;
+    justify-content: center;
+    margin-top: 8px;
+    padding: 8px;
+
+    @supports (animation-timeline: scroll()) {
+      animation: media-carousel-slide 1s linear both;
+      animation-timeline: --media-carousel;
+    }
+
+    .carousel-dot {
+      display: inline-block;
+      width: 5px;
+      height: 5px;
+      border-radius: 50%;
+      background-color: var(--text-color);
+      transition: all 0.3s ease-in-out;
+      opacity: 0.3;
+      flex-shrink: 0;
+
+      &.active {
+        opacity: 1;
+        background-color: var(--text-color);
+        transform: scale(1.5);
+      }
+    }
+  }
+
+  .media-first-content {
+    margin-top: 8px;
+    height: 1.75em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 0.9em;
+    mask-image: linear-gradient(to bottom, black 1.5em, transparent 1.75em);
+    opacity: 0.5;
+    transition: opacity 0.5s ease-in-out;
+
+    @media (min-width: 40em) {
+      margin-inline: 16px;
+    }
+
+    * {
+      text-align: center;
+      /* Brute force ellipsis */
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap !important;
+      pointer-events: none;
+    }
+
+    a {
+      filter: grayscale(0.5);
+    }
+  }
+
+  :is(:hover, :focus) > & .media-first-content {
+    opacity: 1;
+  }
+}
+
 .status:not(.large) .hashtag-stuffing {
   opacity: 0.75;
   transition: opacity 0.2s ease-in-out;
@@ -1621,6 +1932,26 @@ a.card:is(:hover, :focus):visited {
   width: 100%;
   height: 100%;
 }
+.card.card-post {
+  flex-direction: row-reverse;
+
+  .title {
+    font-weight: 500;
+  }
+
+  .meta {
+    -webkit-line-clamp: 5;
+    line-clamp: 5;
+    opacity: 1;
+    font-size: inherit;
+  }
+}
+.status.large .card.large.card-post,
+.status-carousel
+  .content-container[data-content-text-weight='1']
+  .card.large.card-post {
+  flex-direction: column-reverse;
+}
 
 /* POLLS */
 
@@ -1695,13 +2026,14 @@ a.card:is(:hover, :focus):visited {
 }
 .poll-label input:is([type='radio'], [type='checkbox']) {
   flex-shrink: 0;
-  margin: 3px;
-  min-height: 1em;
+  margin: 0 3px;
+  min-height: 0.9em;
 }
 .poll-option-votes {
   flex-shrink: 0;
   font-size: 90%;
   opacity: 0.75;
+  line-height: 1;
 }
 .poll-option-leading .poll-option-votes {
   font-weight: bold;
@@ -2118,8 +2450,8 @@ a.card:is(:hover, :focus):visited {
   max-width: 100%;
   height: 1.2em;
   vertical-align: text-bottom;
-  object-fit: cover;
-  object-position: left;
+  object-fit: contain;
+  /* object-position: left; */
 }
 
 /* EDIT HISTORY */
@@ -2288,7 +2620,7 @@ a.card:is(:hover, :focus):visited {
         mask-image: linear-gradient(to bottom, #000 80px, transparent);
       }
 
-      &:after {
+      &[data-read-more]:after {
         content: attr(data-read-more);
         line-height: 1;
         display: inline-block;

src/components/status.jsx

@@ -11,6 +11,8 @@ import {
 import { decodeBlurHash, getBlurHashAverageColor } from 'fast-blurhash';
 import { shallowEqual } from 'fast-equals';
 import prettify from 'html-prettify';
+import pThrottle from 'p-throttle';
+import { Fragment } from 'preact';
 import { memo } from 'preact/compat';
 import {
   useCallback,
@@ -20,7 +22,9 @@ import {
   useRef,
   useState,
 } from 'preact/hooks';
+import punycode from 'punycode/';
 import { useHotkeys } from 'react-hotkeys-hook';
+import { detectAll } from 'tinyld/light';
 import { useLongPress } from 'use-long-press';
 import { useSnapshot } from 'valtio';
 
@@ -44,16 +48,20 @@ import handleContentLinks from '../utils/handle-content-links';
 import htmlContentLength from '../utils/html-content-length';
 import isMastodonLinkMaybe from '../utils/isMastodonLinkMaybe';
 import localeMatch from '../utils/locale-match';
+import mem from '../utils/mem';
 import niceDateTime from '../utils/nice-date-time';
 import openCompose from '../utils/open-compose';
 import pmem from '../utils/pmem';
 import safeBoundingBoxPadding from '../utils/safe-bounding-box-padding';
 import shortenNumber from '../utils/shorten-number';
+import showCompose from '../utils/show-compose';
 import showToast from '../utils/show-toast';
 import { speak, supportsTTS } from '../utils/speech';
 import states, { getStatus, saveStatus, statusKey } from '../utils/states';
 import statusPeek from '../utils/status-peek';
 import store from '../utils/store';
+import { getCurrentAccountID } from '../utils/store-utils';
+import supports from '../utils/supports';
 import unfurlMastodonLink from '../utils/unfurl-link';
 import useTruncated from '../utils/useTruncated';
 import visibilityIconsMap from '../utils/visibility-icons-map';
@@ -70,10 +78,14 @@ import TranslationBlock from './translation-block';
 const SHOW_COMMENT_COUNT_LIMIT = 280;
 const INLINE_TRANSLATE_LIMIT = 140;
 
+const throttle = pThrottle({
+  limit: 1,
+  interval: 1000,
+});
 function fetchAccount(id, masto) {
   return masto.v1.accounts.$select(id).fetch();
 }
-const memFetchAccount = pmem(fetchAccount);
+const memFetchAccount = pmem(throttle(fetchAccount));
 
 const visibilityText = {
   public: 'Public',
@@ -147,6 +159,31 @@ const PostContent = memo(
   },
 );
 
+const SIZE_CLASS = {
+  s: 'small',
+  m: 'medium',
+  l: 'large',
+};
+
+const detectLang = mem((text) => {
+  text = text?.trim();
+
+  // Ref: https://github.com/komodojp/tinyld/blob/develop/docs/benchmark.md
+  // 500 should be enough for now, also the default max chars for Mastodon
+  if (text?.length > 500) {
+    return null;
+  }
+  const langs = detectAll(text);
+  const lang = langs[0];
+  if (lang?.lang && lang?.accuracy > 0.5) {
+    // If > 50% accurate, use it
+    // It can be accurate if < 50% but better be safe
+    // Though > 50% also can be inaccurate 🤷‍♂️
+    return lang.lang;
+  }
+  return null;
+});
+
 function Status({
   statusID,
   status,
@@ -168,15 +205,23 @@ function Status({
   allowContextMenu,
   showActionsBar,
   showReplyParent,
+  mediaFirst,
 }) {
   if (skeleton) {
     return (
-      <div class="status skeleton">
-        <Avatar size="xxl" />
+      <div
+        class={`status skeleton ${
+          mediaFirst ? 'status-media-first small' : ''
+        }`}
+      >
+        {!mediaFirst && <Avatar size="xxl" />}
         <div class="container">
-          <div class="meta">███ ████████</div>
+          <div class="meta">
+            {(size === 's' || mediaFirst) && <Avatar size="m" />} ███ ████████
+          </div>
           <div class="content-container">
-            <div class="content">
+            {mediaFirst && <div class="media-first-container" />}
+            <div class={`content ${mediaFirst ? 'media-first-content' : ''}`}>
               <p>████ ████████</p>
             </div>
           </div>
@@ -223,7 +268,7 @@ function Status({
     sensitive,
     spoilerText,
     visibility, // public, unlisted, private, direct
-    language,
+    language: _language,
     editedAt,
     filtered,
     card,
@@ -246,8 +291,48 @@ function Status({
     emojiReactions,
   } = status;
 
+  const [languageAutoDetected, setLanguageAutoDetected] = useState(null);
+  useEffect(() => {
+    if (!content) return;
+    if (_language) return;
+    let timer;
+    timer = setTimeout(() => {
+      let detected = detectLang(
+        getHTMLText(content, {
+          preProcess: (dom) => {
+            // Remove anything that can skew the language detection
+
+            // Remove .mention, .hashtag, pre, code, a:has(.invisible)
+            dom
+              .querySelectorAll(
+                '.mention, .hashtag, pre, code, a:has(.invisible)',
+              )
+              .forEach((a) => {
+                a.remove();
+              });
+
+            // Remove links that contains text that starts with https?://
+            dom.querySelectorAll('a').forEach((a) => {
+              const text = a.innerText.trim();
+              if (text.startsWith('https://') || text.startsWith('http://')) {
+                a.remove();
+              }
+            });
+          },
+        }),
+      );
+      setLanguageAutoDetected(detected);
+    }, 1000);
+    return () => clearTimeout(timer);
+  }, [content, _language]);
+  const language = _language || languageAutoDetected;
+
+  // if (!mediaAttachments?.length) mediaFirst = false;
+  const hasMediaAttachments = !!mediaAttachments?.length;
+  if (mediaFirst && hasMediaAttachments) size = 's';
+
   const currentAccount = useMemo(() => {
-    return store.session.get('currentAccount');
+    return getCurrentAccountID();
   }, []);
   const isSelf = useMemo(() => {
     return currentAccount && currentAccount === accountId;
@@ -281,6 +366,7 @@ function Status({
           onMouseEnter: debugHover,
         }}
         showFollowedTags
+        quoted={quoted}
       />
     );
   }
@@ -353,6 +439,7 @@ function Status({
             size={size}
             contentTextWeight={contentTextWeight}
             readOnly={readOnly}
+            mediaFirst={mediaFirst}
           />
         </div>
       );
@@ -377,14 +464,15 @@ function Status({
           contentTextWeight={contentTextWeight}
           readOnly={readOnly}
           enableCommentHint
+          mediaFirst={mediaFirst}
         />
       </div>
     );
   }
 
   // Check followedTags
-  if (showFollowedTags && !!snapStates.statusFollowedTags[sKey]?.length) {
-    return (
+  const FollowedTagsParent = useCallback(
+    ({ children }) => (
       <div
         data-state-post-id={sKey}
         class="status-followed-tags"
@@ -402,18 +490,15 @@ function Status({
             </Link>
           ))}
         </div>
-        <Status
-          status={statusID ? null : status}
-          statusID={statusID ? status.id : null}
-          instance={instance}
-          size={size}
-          contentTextWeight={contentTextWeight}
-          readOnly={readOnly}
-          enableCommentHint
-        />
+        {children}
       </div>
+    ),
+    [sKey, instance, snapStates.statusFollowedTags[sKey]],
   );
-  }
+  const StatusParent =
+    showFollowedTags && !!snapStates.statusFollowedTags[sKey]?.length
+      ? FollowedTagsParent
+      : Fragment;
 
   const isSizeLarge = size === 'l';
 
@@ -502,9 +587,9 @@ function Status({
       });
       if (newWin) return;
     }
-    states.showCompose = {
+    showCompose({
       replyToStatus: status,
-    };
+    });
   };
 
   // Check if media has no descriptions
@@ -627,6 +712,7 @@ function Status({
   };
 
   const bookmarkStatus = async () => {
+    if (!supports('@mastodon/post-bookmark')) return;
     if (!sameInstance || !authenticated) {
       alert(unauthInteractionErrorMessage);
       return false;
@@ -748,11 +834,11 @@ function Status({
               menuExtras={
                 <MenuItem
                   onClick={() => {
-                    states.showCompose = {
+                    showCompose({
                       draftStatus: {
                         status: `\n${url}`,
                       },
-                    };
+                    });
                   }}
                 >
                   <Icon icon="quote" />
@@ -814,6 +900,7 @@ function Status({
                   : 'Like'}
               </span>
             </MenuItem>
+            {supports('@mastodon/post-bookmark') && (
               <MenuItem
                 onClick={bookmarkStatusNotify}
                 className={`menu-bookmark ${bookmarked ? 'checked' : ''}`}
@@ -821,6 +908,7 @@ function Status({
                 <Icon icon="bookmark" />
                 <span>{bookmarked ? 'Unbookmark' : 'Bookmark'}</span>
               </MenuItem>
+            )}
           </div>
         </>
       )}
@@ -847,7 +935,11 @@ function Status({
           </MenuItem>
         </>
       )}
-      {(enableTranslate || !language || differentLanguage) && <MenuDivider />}
+      {!mediaFirst && (
+        <>
+          {(enableTranslate || !language || differentLanguage) && (
+            <MenuDivider />
+          )}
           {enableTranslate ? (
             <div class={supportsTTS ? 'menu-horizontal' : ''}>
               <MenuItem
@@ -898,6 +990,8 @@ function Status({
               </div>
             )
           )}
+        </>
+      )}
       {((!isSizeLarge && sameInstance) ||
         enableTranslate ||
         !language ||
@@ -1058,16 +1152,18 @@ function Status({
       )}
       {isSelf && (
         <div class="menu-horizontal">
+          {supports('@mastodon/post-edit') && (
             <MenuItem
               onClick={() => {
-              states.showCompose = {
+                showCompose({
                   editStatus: status,
-              };
+                });
               }}
             >
               <Icon icon="pencil" />
               <span>Edit</span>
             </MenuItem>
+          )}
           {isSizeLarge && (
             <MenuConfirm
               subMenu
@@ -1348,7 +1444,7 @@ function Status({
   ]);
 
   return (
-    <>
+    <StatusParent>
       {showReplyParent && !!(inReplyToId && inReplyToAccountId) && (
         <StatusCompact sKey={sKey} />
       )}
@@ -1376,14 +1472,10 @@ function Status({
             ? 'status-reply-to'
             : ''
         } visibility-${visibility} ${_pinned ? 'status-pinned' : ''} ${
-          {
-            s: 'small',
-            m: 'medium',
-            l: 'large',
-          }[size]
+          SIZE_CLASS[size]
         } ${_deleted ? 'status-deleted' : ''} ${quoted ? 'status-card' : ''} ${
           isContextMenuOpen ? 'status-menu-open' : ''
-        }`}
+        } ${mediaFirst && hasMediaAttachments ? 'status-media-first' : ''}`}
         onMouseEnter={debugHover}
         onContextMenu={(e) => {
           if (!showContextMenu) return;
@@ -1711,6 +1803,65 @@ function Status({
               }
             }
           >
+            {mediaFirst && hasMediaAttachments ? (
+              <>
+                {(!!spoilerText || !!sensitive) && !readingExpandSpoilers && (
+                  <>
+                    {!!spoilerText && (
+                      <span
+                        class="spoiler-content media-first-spoiler-content"
+                        lang={language}
+                        dir="auto"
+                        ref={spoilerContentRef}
+                        data-read-more={readMoreText}
+                      >
+                        <EmojiText text={spoilerText} emojis={emojis} />{' '}
+                      </span>
+                    )}
+                    <button
+                      class={`light spoiler-button media-first-spoiler-button ${
+                        showSpoiler ? 'spoiling' : ''
+                      }`}
+                      type="button"
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        if (showSpoiler) {
+                          delete states.spoilers[id];
+                          if (!readingExpandSpoilers) {
+                            delete states.spoilersMedia[id];
+                          }
+                        } else {
+                          states.spoilers[id] = true;
+                          if (!readingExpandSpoilers) {
+                            states.spoilersMedia[id] = true;
+                          }
+                        }
+                      }}
+                    >
+                      <Icon icon={showSpoiler ? 'eye-open' : 'eye-close'} />{' '}
+                      {showSpoiler ? 'Show less' : 'Show content'}
+                    </button>
+                  </>
+                )}
+                <MediaFirstContainer
+                  mediaAttachments={mediaAttachments}
+                  language={language}
+                  postID={id}
+                  instance={instance}
+                />
+                {!!content && (
+                  <div class="media-first-content content" ref={contentRef}>
+                    <PostContent
+                      post={status}
+                      instance={instance}
+                      previewMode={previewMode}
+                    />
+                  </div>
+                )}
+              </>
+            ) : (
+              <>
                 {!!spoilerText && (
                   <>
                     <div
@@ -1809,6 +1960,7 @@ function Status({
                     forceTranslate={forceTranslate || inlineTranslate}
                     mini={!isSizeLarge && !withinContext}
                     sourceLanguage={language}
+                    autoDetected={languageAutoDetected}
                     text={getPostText(status)}
                   />
                 )}
@@ -1832,11 +1984,37 @@ function Status({
                         }
                       }}
                     >
-                  <Icon icon={showSpoilerMedia ? 'eye-open' : 'eye-close'} />{' '}
+                      <Icon
+                        icon={showSpoilerMedia ? 'eye-open' : 'eye-close'}
+                      />{' '}
                       {showSpoilerMedia ? 'Show less' : 'Show media'}
                     </button>
                   )}
-            {!!mediaAttachments.length && (
+                {!!mediaAttachments.length &&
+                  (mediaAttachments.length > 1 &&
+                  (isSizeLarge || (withinContext && size === 'm')) ? (
+                    <div class="media-large-container">
+                      {mediaAttachments.map((media, i) => (
+                        <div key={media.id} class={`media-container media-eq1`}>
+                          <Media
+                            media={media}
+                            autoAnimate
+                            showCaption
+                            allowLongerCaption={!content}
+                            lang={language}
+                            to={`/${instance}/s/${id}?${
+                              withinContext ? 'media' : 'media-only'
+                            }=${i + 1}`}
+                            onClick={
+                              onMediaClick
+                                ? (e) => onMediaClick(e, i, media, status)
+                                : undefined
+                            }
+                          />
+                        </div>
+                      ))}
+                    </div>
+                  ) : (
                     <MultipleMediaFigure
                       lang={language}
                       enabled={showMultipleMediaCaptions}
@@ -1844,9 +2022,11 @@ function Status({
                     >
                       <div
                         ref={mediaContainerRef}
-                  class={`media-container media-eq${mediaAttachments.length} ${
-                    mediaAttachments.length > 2 ? 'media-gt2' : ''
-                  } ${mediaAttachments.length > 4 ? 'media-gt4' : ''}`}
+                        class={`media-container media-eq${
+                          mediaAttachments.length
+                        } ${mediaAttachments.length > 2 ? 'media-gt2' : ''} ${
+                          mediaAttachments.length > 4 ? 'media-gt4' : ''
+                        }`}
                       >
                         {displayedMediaAttachments.map((media, i) => (
                           <Media
@@ -1877,7 +2057,7 @@ function Status({
                         ))}
                       </div>
                     </MultipleMediaFigure>
-            )}
+                  ))}
                 {!!card &&
                   /^https/i.test(card?.url) &&
                   !sensitive &&
@@ -1893,6 +2073,8 @@ function Status({
                       instance={currentInstance}
                     />
                   )}
+              </>
+            )}
           </div>
           {!isSizeLarge && showCommentCount && (
             <div class="content-comment-hint insignificant">
@@ -1942,7 +2124,24 @@ function Status({
               {!!emojiReactions?.length && (
                 <div class="emoji-reactions">
                   {emojiReactions.map((emojiReaction) => {
-                    const { name, count, me } = emojiReaction;
+                    const { name, count, me, url, staticUrl } = emojiReaction;
+                    if (url) {
+                      // Some servers return url and staticUrl
+                      return (
+                        <span
+                          class={`emoji-reaction tag ${
+                            me ? '' : 'insignificant'
+                          }`}
+                        >
+                          <CustomEmoji
+                            alt={name}
+                            url={url}
+                            staticUrl={staticUrl}
+                          />{' '}
+                          {count}
+                        </span>
+                      );
+                    }
                     const isShortCode = /^:.+?:$/.test(name);
                     if (isShortCode) {
                       const emoji = emojis.find(
@@ -1961,7 +2160,7 @@ function Status({
                               alt={name}
                               url={emoji.url}
                               staticUrl={emoji.staticUrl}
-                            />
+                            />{' '}
                             {count}
                           </span>
                         );
@@ -2014,11 +2213,11 @@ function Status({
                   menuExtras={
                     <MenuItem
                       onClick={() => {
-                        states.showCompose = {
+                        showCompose({
                           draftStatus: {
                             status: `\n${url}`,
                           },
-                        };
+                        });
                       }}
                     >
                       <Icon icon="quote" />
@@ -2059,6 +2258,7 @@ function Status({
                     onClick={favouriteStatus}
                   />
                 </div>
+                {supports('@mastodon/post-bookmark') && (
                   <div class="action">
                     <StatusButton
                       checked={bookmarked}
@@ -2069,6 +2269,7 @@ function Status({
                       onClick={bookmarkStatus}
                     />
                   </div>
+                )}
                 <Menu2
                   portal={{
                     target:
@@ -2136,7 +2337,7 @@ function Status({
           </Modal>
         )}
       </article>
-    </>
+    </StatusParent>
   );
 }
 
@@ -2153,6 +2354,108 @@ function MultipleMediaFigure(props) {
   );
 }
 
+function MediaFirstContainer(props) {
+  const { mediaAttachments, language, postID, instance } = props;
+  const moreThanOne = mediaAttachments.length > 1;
+
+  const carouselRef = useRef();
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  useEffect(() => {
+    let handleScroll = () => {
+      const { clientWidth, scrollLeft } = carouselRef.current;
+      const index = Math.round(scrollLeft / clientWidth);
+      setCurrentIndex(index);
+    };
+    if (carouselRef.current) {
+      carouselRef.current.addEventListener('scroll', handleScroll, {
+        passive: true,
+      });
+    }
+    return () => {
+      if (carouselRef.current) {
+        carouselRef.current.removeEventListener('scroll', handleScroll);
+      }
+    };
+  }, []);
+
+  return (
+    <>
+      <div class="media-first-container">
+        <div class="media-first-carousel" ref={carouselRef}>
+          {mediaAttachments.map((media, i) => (
+            <div class="media-first-item" key={media.id}>
+              <Media
+                media={media}
+                lang={language}
+                to={`/${instance}/s/${postID}?media=${i + 1}`}
+              />
+            </div>
+          ))}
+        </div>
+        {moreThanOne && (
+          <div class="media-carousel-controls">
+            <div class="carousel-indexer">
+              {currentIndex + 1}/{mediaAttachments.length}
+            </div>
+            <label class="media-carousel-button">
+              <button
+                type="button"
+                class="carousel-button"
+                hidden={currentIndex === 0}
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  carouselRef.current.focus();
+                  carouselRef.current.scrollTo({
+                    left: carouselRef.current.clientWidth * (currentIndex - 1),
+                    behavior: 'smooth',
+                  });
+                }}
+              >
+                <Icon icon="arrow-left" />
+              </button>
+            </label>
+            <label class="media-carousel-button">
+              <button
+                type="button"
+                class="carousel-button"
+                hidden={currentIndex === mediaAttachments.length - 1}
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  carouselRef.current.focus();
+                  carouselRef.current.scrollTo({
+                    left: carouselRef.current.clientWidth * (currentIndex + 1),
+                    behavior: 'smooth',
+                  });
+                }}
+              >
+                <Icon icon="arrow-right" />
+              </button>
+            </label>
+          </div>
+        )}
+      </div>
+      {moreThanOne && (
+        <div
+          class="media-carousel-dots"
+          style={{
+            '--dots-count': mediaAttachments.length,
+          }}
+        >
+          {mediaAttachments.map((media, i) => (
+            <span
+              key={media.id}
+              class={`carousel-dot ${i === currentIndex ? 'active' : ''}`}
+            />
+          ))}
+        </div>
+      )}
+    </>
+  );
+}
+
 function Card({ card, selfReferential, instance }) {
   const snapStates = useSnapshot(states);
   const {
@@ -2231,9 +2534,9 @@ function Card({ card, selfReferential, instance }) {
   );
 
   if (hasText && (image || (type === 'photo' && blurhash))) {
-    const domain = new URL(url).hostname
-      .replace(/^www\./, '')
-      .replace(/\/$/, '');
+    const domain = punycode.toUnicode(
+      new URL(url).hostname.replace(/^www\./, '').replace(/\/$/, ''),
+    );
     let blurhashImage;
     const rgbAverageColor =
       image && blurhash ? getBlurHashAverageColor(blurhash) : null;
@@ -2253,12 +2556,21 @@ function Card({ card, selfReferential, instance }) {
       ctx.putImageData(imageData, 0, 0);
       blurhashImage = canvas.toDataURL();
     }
+
+    // "Post": Quote post + card link preview combo
+    // Assume all links from these domains are "posts"
+    // Mastodon links are "posts" too but they are converted to real quote posts and there's too many domains to check
+    // This is just "Progressive Enhancement"
+    const isPost = ['x.com', 'twitter.com', 'threads.net'].includes(domain);
+
     return (
       <a
         href={cardStatusURL || url}
         target={cardStatusURL ? null : '_blank'}
         rel="nofollow noopener noreferrer"
-        class={`card link ${blurhashImage ? '' : size}`}
+        class={`card link ${isPost ? 'card-post' : ''} ${
+          blurhashImage ? '' : size
+        }`}
         lang={language}
         dir="auto"
         style={{
@@ -2349,7 +2661,9 @@ function Card({ card, selfReferential, instance }) {
       // );
     }
     if (hasText && !image) {
-      const domain = new URL(url).hostname.replace(/^www\./, '');
+      const domain = punycode.toUnicode(
+        new URL(url).hostname.replace(/^www\./, ''),
+      );
       return (
         <a
           href={cardStatusURL || url}
@@ -2872,21 +3186,6 @@ function StatusButton({
   );
 }
 
-export function formatDuration(time) {
-  if (!time) return;
-  let hours = Math.floor(time / 3600);
-  let minutes = Math.floor((time % 3600) / 60);
-  let seconds = Math.round(time % 60);
-
-  if (hours === 0) {
-    return `${minutes}:${seconds.toString().padStart(2, '0')}`;
-  } else {
-    return `${hours}:${minutes.toString().padStart(2, '0')}:${seconds
-      .toString()
-      .padStart(2, '0')}`;
-  }
-}
-
 function nicePostURL(url) {
   if (!url) return;
   const urlObj = new URL(url);
@@ -2896,7 +3195,7 @@ function nicePostURL(url) {
   const [_, username, restPath] = path.match(/\/(@[^\/]+)\/(.*)/) || [];
   return (
     <>
-      {host}
+      {punycode.toUnicode(host)}
       {username ? (
         <>
           /{username}
@@ -2922,7 +3221,7 @@ function StatusCompact({ sKey }) {
   const {
     sensitive,
     spoilerText,
-    account: { avatar, avatarStatic, bot },
+    account: { avatar, avatarStatic, bot } = {},
     visibility,
     content,
     language,
@@ -2975,6 +3274,7 @@ function FilteredStatus({
   instance,
   containerProps = {},
   showFollowedTags,
+  quoted,
 }) {
   const snapStates = useSnapshot(states);
   const {
@@ -3019,7 +3319,9 @@ function FilteredStatus({
   return (
     <div
       class={
-        isReblog
+        quoted
+          ? ''
+          : isReblog
           ? group
             ? 'status-group'
             : 'status-reblog'
@@ -3035,7 +3337,11 @@ function FilteredStatus({
       }}
       {...bindLongPressPeek()}
     >
-      <article data-state-post-id={ssKey} class="status filtered" tabindex="-1">
+      <article
+        data-state-post-id={ssKey}
+        class={`status filtered ${quoted ? 'status-card' : ''}`}
+        tabindex="-1"
+      >
         <b
           class="status-filtered-badge clickable badge-meta"
           title={filterTitleStr}
@@ -3136,7 +3442,7 @@ const QuoteStatuses = memo(({ id, instance, level = 0 }) => {
 
   return uniqueQuotes.map((q) => {
     return (
-      <LazyShazam>
+      <LazyShazam id={q.instance + q.id}>
         <Link
           key={q.instance + q.id}
           to={`${q.instance ? `/${q.instance}` : ''}/s/${q.id}`}

src/components/submenu2.jsx

@@ -0,0 +1,25 @@
+import { SubMenu } from '@szhsin/react-menu';
+import { useRef } from 'preact/hooks';
+
+export default function SubMenu2(props) {
+  const menuRef = useRef();
+  return (
+    <SubMenu
+      {...props}
+      instanceRef={menuRef}
+      // Test fix for bug; submenus not opening on Android
+      itemProps={{
+        onPointerMove: (e) => {
+          if (e.pointerType === 'touch') {
+            menuRef.current?.openMenu?.();
+          }
+        },
+        onPointerLeave: (e) => {
+          if (e.pointerType === 'touch') {
+            menuRef.current?.openMenu?.();
+          }
+        },
+      }}
+    />
+  );
+}

src/components/timeline.jsx

@@ -1,5 +1,11 @@
 import { memo } from 'preact/compat';
-import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'preact/hooks';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { InView } from 'react-intersection-observer';
 import { useDebouncedCallback } from 'use-debounce';
@@ -9,6 +15,7 @@ import FilterContext from '../utils/filter-context';
 import { filteredItems, isFiltered } from '../utils/filters';
 import states, { statusKey } from '../utils/states';
 import statusPeek from '../utils/status-peek';
+import { isMediaFirstInstance } from '../utils/store-utils';
 import { groupBoosts, groupContext } from '../utils/timeline-utils';
 import useInterval from '../utils/useInterval';
 import usePageVisibility from '../utils/usePageVisibility';
@@ -51,7 +58,7 @@ function Timeline({
 }) {
   const snapStates = useSnapshot(states);
   const [items, setItems] = useState([]);
-  const [uiState, setUIState] = useState('default');
+  const [uiState, setUIState] = useState('start');
   const [showMore, setShowMore] = useState(false);
   const [showNew, setShowNew] = useState(false);
   const [visible, setVisible] = useState(true);
@@ -59,6 +66,8 @@ function Timeline({
 
   console.debug('RENDER Timeline', id, refresh);
 
+  const mediaFirst = useMemo(() => isMediaFirstInstance(), []);
+
   const allowGrouping = view !== 'media';
   const loadItems = useDebouncedCallback(
     (firstLoad) => {
@@ -200,8 +209,8 @@ function Timeline({
 
   const oRef = useHotkeys(['enter', 'o'], () => {
     // open active status
-    const activeItem = document.activeElement.closest(itemsSelector);
-    if (activeItem) {
+    const activeItem = document.activeElement;
+    if (activeItem?.matches(itemsSelector)) {
       activeItem.click();
     }
   });
@@ -355,7 +364,9 @@ function Timeline({
     <FilterContext.Provider value={filterContext}>
       <div
         id={`${id}-page`}
-        class="deck-container"
+        class={`deck-container ${
+          mediaFirst ? 'deck-container-media-first' : ''
+        }`}
         ref={(node) => {
           scrollableRef.current = node;
           jRef.current = node;
@@ -432,6 +443,7 @@ function Timeline({
                     view={view}
                     showFollowedTags={showFollowedTags}
                     showReplyParent={showReplyParent}
+                    mediaFirst={mediaFirst}
                   />
                 ))}
                 {showMore &&
@@ -443,14 +455,14 @@ function Timeline({
                           height: '20vh',
                         }}
                       >
-                        <Status skeleton />
+                        <Status skeleton mediaFirst={mediaFirst} />
                       </li>
                       <li
                         style={{
                           height: '25vh',
                         }}
                       >
-                        <Status skeleton />
+                        <Status skeleton mediaFirst={mediaFirst} />
                       </li>
                     </>
                   ))}
@@ -490,13 +502,14 @@ function Timeline({
                   />
                 ) : (
                   <li key={i}>
-                    <Status skeleton />
+                    <Status skeleton mediaFirst={mediaFirst} />
                   </li>
                 ),
               )}
             </ul>
           ) : (
-            uiState !== 'error' && <p class="ui-state">{emptyText}</p>
+            uiState !== 'error' &&
+            uiState !== 'start' && <p class="ui-state">{emptyText}</p>
           )}
           {uiState === 'error' && (
             <p class="ui-state">
@@ -524,6 +537,7 @@ const TimelineItem = memo(
     view,
     showFollowedTags,
     showReplyParent,
+    mediaFirst,
   }) => {
     console.debug('RENDER TimelineItem', status.id);
     const { id: statusID, reblog, items, type, _pinned } = status;
@@ -532,6 +546,7 @@ const TimelineItem = memo(
     const url = instance
       ? `/${instance}/s/${actualStatusID}`
       : `/s/${actualStatusID}`;
+
     if (items) {
       const fItems = filteredItems(items, filterContext);
       let title = '';
@@ -584,6 +599,7 @@ const TimelineItem = memo(
                           contentTextWeight
                           enableCommentHint
                           // allowFilters={allowFilters}
+                          mediaFirst={mediaFirst}
                         />
                       ) : (
                         <Status
@@ -593,6 +609,7 @@ const TimelineItem = memo(
                           contentTextWeight
                           enableCommentHint
                           // allowFilters={allowFilters}
+                          mediaFirst={mediaFirst}
                         />
                       )}
                     </Link>
@@ -629,7 +646,11 @@ const TimelineItem = memo(
           >
             <Link class="status-link timeline-item" to={url}>
               {showCompact ? (
-                <TimelineStatusCompact status={item} instance={instance} />
+                <TimelineStatusCompact
+                  status={item}
+                  instance={instance}
+                  filterContext={filterContext}
+                />
               ) : useItemID ? (
                 <Status
                   statusID={statusID}
@@ -688,6 +709,7 @@ const TimelineItem = memo(
               showFollowedTags={showFollowedTags}
               showReplyParent={showReplyParent}
               // allowFilters={allowFilters}
+              mediaFirst={mediaFirst}
             />
           ) : (
             <Status
@@ -697,6 +719,7 @@ const TimelineItem = memo(
               showFollowedTags={showFollowedTags}
               showReplyParent={showReplyParent}
               // allowFilters={allowFilters}
+              mediaFirst={mediaFirst}
             />
           )}
         </Link>
@@ -801,11 +824,12 @@ function StatusCarousel({ title, class: className, children }) {
   );
 }
 
-function TimelineStatusCompact({ status, instance }) {
+function TimelineStatusCompact({ status, instance, filterContext }) {
   const snapStates = useSnapshot(states);
   const { id, visibility, language } = status;
   const statusPeekText = statusPeek(status);
   const sKey = statusKey(id, instance);
+  const filterInfo = isFiltered(status.filtered, filterContext);
   return (
     <article
       class={`status compact-thread ${
@@ -831,6 +855,15 @@ function TimelineStatusCompact({ status, instance }) {
         lang={language}
         dir="auto"
       >
+        {!!filterInfo ? (
+          <b
+            class="status-filtered-badge badge-meta horizontal"
+            title={filterInfo?.titlesStr || ''}
+          >
+            <span>Filtered</span>: <span>{filterInfo?.titlesStr || ''}</span>
+          </b>
+        ) : (
+          <>
             {statusPeekText}
             {status.sensitive && status.spoilerText && (
               <>
@@ -840,6 +873,8 @@ function TimelineStatusCompact({ status, instance }) {
                 </span>
               </>
             )}
+          </>
+        )}
       </div>
     </article>
   );

src/components/translation-block.jsx

@@ -10,6 +10,7 @@ import localeCode2Text from '../utils/localeCode2Text';
 import pmem from '../utils/pmem';
 
 import Icon from './icon';
+import LazyShazam from './lazy-shazam';
 import Loader from './loader';
 
 const { PHANPY_LINGVA_INSTANCES } = import.meta.env;
@@ -76,6 +77,7 @@ function TranslationBlock({
   onTranslate,
   text = '',
   mini,
+  autoDetected,
 }) {
   const targetLang = getTranslateTargetLanguage(true);
   const [uiState, setUIState] = useState('default');
@@ -142,8 +144,7 @@ function TranslationBlock({
       detectedLang !== targetLangText
     ) {
       return (
-        <div class="shazam-container">
-          <div class="shazam-container-inner">
+        <LazyShazam>
           <div class="status-translation-block-mini">
             <Icon
               icon="translate"
@@ -157,8 +158,7 @@ function TranslationBlock({
               {translatedContent}
             </output>
           </div>
-          </div>
-        </div>
+        </LazyShazam>
       );
     }
     return null;
@@ -188,7 +188,9 @@ function TranslationBlock({
               {uiState === 'loading'
                 ? 'Translating…'
                 : sourceLanguage && sourceLangText && !detectedLang
-                ? `Translate from ${sourceLangText}`
+                ? autoDetected
+                  ? `Translate from ${sourceLangText} (auto-detected)`
+                  : `Translate from ${sourceLangText}`
                 : `Translate`}
             </span>
           </button>

src/compose.jsx

@@ -3,15 +3,12 @@ import './index.css';
 import './app.css';
 
 import { render } from 'preact';
-import { lazy } from 'preact/compat';
 import { useEffect, useState } from 'preact/hooks';
 
-import IntlSegmenterSuspense from './components/intl-segmenter-suspense';
-// import Compose from './components/compose';
+import ComposeSuspense from './components/compose-suspense';
+import { initStates } from './utils/states';
 import useTitle from './utils/useTitle';
 
-const Compose = lazy(() => import('./components/compose'));
-
 if (window.opener) {
   console = window.opener.console;
 }
@@ -31,6 +28,10 @@ function App() {
       : 'Compose',
   );
 
+  useEffect(() => {
+    initStates();
+  }, []);
+
   useEffect(() => {
     if (uiState === 'closed') {
       try {
@@ -61,8 +62,7 @@ function App() {
   console.debug('OPEN COMPOSE');
 
   return (
-    <IntlSegmenterSuspense>
-      <Compose
+    <ComposeSuspense
       editStatus={editStatus}
       replyToStatus={replyToStatus}
       draftStatus={draftStatus}
@@ -79,7 +79,6 @@ function App() {
         } catch (e) {}
       }}
     />
-    </IntlSegmenterSuspense>
   );
 }
 

src/data/features.json

@@ -1,5 +1,6 @@
 {
   "@mastodon/edit-media-attributes": ">=4.1",
   "@mastodon/list-exclusive": ">=4.2",
-  "@mastodon/filtered-notifications": "~4.3 || >=4.3"
+  "@mastodon/filtered-notifications": "~4.3 || >=4.3",
+  "@mastodon/fetch-multiple-statuses": "~4.3 || >=4.3"
 }

src/index.css

@@ -109,13 +109,7 @@
   --timing-function: cubic-bezier(0.3, 0.5, 0, 1);
   --spring-timing-funtion: cubic-bezier(0.175, 0.885, 0.32, 1.275);
 
-  --pointer-min-dimension: 88px;
-}
-
-@media (pointer: fine) {
-  :root {
-    --pointer-min-dimension: 44px;
-  }
+  --min-dimension: 88px;
 }
 
 @media (min-resolution: 2dppx) {
@@ -353,6 +347,7 @@ button[hidden] {
 }
 
 input[type='text'],
+input[type='search'],
 textarea,
 select {
   color: var(--text-color);
@@ -362,6 +357,7 @@ select {
   border-radius: 4px;
 }
 input[type='text']:focus,
+input[type='search']:focus,
 textarea:focus,
 select:focus {
   border-color: var(--outline-color);
@@ -377,7 +373,7 @@ textarea:disabled {
   background-color: var(--bg-faded-color);
 }
 
-:is(input[type='text'], textarea, select).block {
+:is(input[type='text'], input[type='search'], textarea, select).block {
   display: block;
   width: 100%;
 }
@@ -551,3 +547,9 @@ kbd {
 .shazam-container-horizontal[hidden] {
   grid-template-columns: 0fr;
 }
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

src/pages/account-statuses.jsx

@@ -6,6 +6,7 @@ import {
   useRef,
   useState,
 } from 'preact/hooks';
+import punycode from 'punycode/';
 import { useParams, useSearchParams } from 'react-router-dom';
 import { useSnapshot } from 'valtio';
 
@@ -20,6 +21,7 @@ import pmem from '../utils/pmem';
 import showToast from '../utils/show-toast';
 import states from '../utils/states';
 import { saveStatus } from '../utils/states';
+import { isMediaFirstInstance } from '../utils/store-utils';
 import useTitle from '../utils/useTitle';
 
 const LIMIT = 20;
@@ -67,6 +69,8 @@ function AccountStatuses() {
     searchOffsetRef.current = 0;
   }, allSearchParams);
 
+  const mediaFirst = useMemo(() => isMediaFirstInstance(), []);
+
   const sameCurrentInstance = useMemo(
     () => instance === currentInstance,
     [instance, currentInstance],
@@ -150,7 +154,7 @@ function AccountStatuses() {
       }
     }
 
-    const results = [];
+    let results = [];
     if (firstLoad) {
       const { value } = await masto.v1.accounts
         .$select(id)
@@ -185,12 +189,32 @@ function AccountStatuses() {
           limit: LIMIT,
           exclude_replies: excludeReplies,
           exclude_reblogs: excludeBoosts,
-          only_media: media,
+          only_media: media || undefined,
           tagged,
         });
     }
     const { value, done } = await accountStatusesIterator.current.next();
     if (value?.length) {
+      // Check if value is same as pinned post (results)
+      // If the index for every post is the same, means API might not support pinned posts
+      if (results.length) {
+        let pinnedStatusesIds = [];
+        if (results[0]?.type === 'pinned') {
+          pinnedStatusesIds = results[0].id;
+        } else {
+          pinnedStatusesIds = results
+            .filter((status) => status._pinned)
+            .map((status) => status.id);
+        }
+        const containsAllPinned = pinnedStatusesIds.every((postId) =>
+          value.some((status) => status.id === postId),
+        );
+        if (containsAllPinned) {
+          // Remove pinned posts
+          results = [];
+        }
+      }
+
       results.push(...value);
 
       value.forEach((item) => {
@@ -249,6 +273,9 @@ function AccountStatuses() {
       } catch (e) {
         console.error(e);
       }
+      // No need, because the whole filter bar is hidden
+      // TODO: Revisit this
+      if (!mediaFirst) {
         try {
           const featuredTags = await masto.v1.accounts
             .$select(id)
@@ -258,8 +285,9 @@ function AccountStatuses() {
         } catch (e) {
           console.error(e);
         }
+      }
     })();
-  }, [id]);
+  }, [id, mediaFirst]);
 
   const { displayName, acct, emojis } = account || {};
 
@@ -278,6 +306,7 @@ function AccountStatuses() {
           authenticated={authenticated}
           standalone
         />
+        {!mediaFirst && (
           <div
             class="filter-bar"
             ref={filterBarRef}
@@ -409,6 +438,7 @@ function AccountStatuses() {
                 />
               ))}
           </div>
+        )}
       </>
     );
   }, [
@@ -471,7 +501,7 @@ function AccountStatuses() {
       errorText="Unable to load posts"
       fetchItems={fetchAccountStatuses}
       useItemID
-      view={media ? 'media' : undefined}
+      view={media || mediaFirst ? 'media' : undefined}
       boostsCarousel={snapStates.settings.boostsCarousel}
       timelineStart={TimelineStart}
       refresh={[
@@ -516,7 +546,13 @@ function AccountStatuses() {
           >
             <Icon icon="transfer" />{' '}
             <small class="menu-double-lines">
-              Switch to account's instance (<b>{accountInstance}</b>)
+              Switch to account's instance{' '}
+              {accountInstance ? (
+                <>
+                  {' '}
+                  (<b>{punycode.toUnicode(accountInstance)}</b>)
+                </>
+              ) : null}
             </small>
           </MenuItem>
           {!sameCurrentInstance && (

src/pages/accounts.jsx

@@ -13,12 +13,13 @@ import NameText from '../components/name-text';
 import { api } from '../utils/api';
 import states from '../utils/states';
 import store from '../utils/store';
+import { getCurrentAccountID, setCurrentAccountID } from '../utils/store-utils';
 
 function Accounts({ onClose }) {
   const { masto } = api();
   // Accounts
   const accounts = store.local.getJSON('accounts');
-  const currentAccount = store.session.get('currentAccount');
+  const currentAccount = getCurrentAccountID();
   const moreThanOneAccount = accounts.length > 1;
 
   const [_, reload] = useReducer((x) => x + 1, 0);
@@ -81,7 +82,7 @@ function Accounts({ onClose }) {
                         if (isCurrent) {
                           states.showAccount = `${account.info.username}@${account.instanceURL}`;
                         } else {
-                          store.session.set('currentAccount', account.info.id);
+                          setCurrentAccountID(account.info.id);
                           location.reload();
                         }
                       }}

src/pages/catchup.css

@@ -614,7 +614,7 @@
     }
     &.visibility-direct {
       --yellow-stripes: repeating-linear-gradient(
-        -45deg,
+        135deg,
         var(--reply-to-faded-color),
         var(--reply-to-faded-color) 10px,
         var(--reply-to-faded-color) 10px,

src/pages/catchup.jsx

@@ -13,6 +13,7 @@ import {
   useRef,
   useState,
 } from 'preact/hooks';
+import punycode from 'punycode/';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useSearchParams } from 'react-router-dom';
 import { uid } from 'uid/single';
@@ -39,7 +40,8 @@ import showToast from '../utils/show-toast';
 import states, { statusKey } from '../utils/states';
 import statusPeek from '../utils/status-peek';
 import store from '../utils/store';
-import { getCurrentAccountNS } from '../utils/store-utils';
+import { getCurrentAccountID, getCurrentAccountNS } from '../utils/store-utils';
+import supports from '../utils/supports';
 import { assignFollowedTags } from '../utils/timeline-utils';
 import useTitle from '../utils/useTitle';
 
@@ -111,10 +113,12 @@ function Catchup() {
   const [showTopLinks, setShowTopLinks] = useState(false);
 
   const currentAccount = useMemo(() => {
-    return store.session.get('currentAccount');
+    return getCurrentAccountID();
   }, []);
   const isSelf = (accountID) => accountID === currentAccount;
 
+  const supportsPixelfed = supports('@pixelfed/home-include-reblogs');
+
   async function fetchHome({ maxCreatedAt }) {
     const maxCreatedAtDate = maxCreatedAt ? new Date(maxCreatedAt) : null;
     console.debug('fetchHome', maxCreatedAtDate);
@@ -122,6 +126,13 @@ function Catchup() {
     const homeIterator = masto.v1.timelines.home.list({ limit: 40 });
     mainloop: while (true) {
       try {
+        if (supportsPixelfed && homeIterator.nextParams) {
+          if (typeof homeIterator.nextParams === 'string') {
+            homeIterator.nextParams += '&include_reblogs=true';
+          } else {
+            homeIterator.nextParams.include_reblogs = true;
+          }
+        }
         const results = await homeIterator.next();
         const { value } = results;
         if (value?.length) {
@@ -191,6 +202,7 @@ function Catchup() {
 
   const [posts, setPosts] = useState([]);
   const catchupRangeRef = useRef();
+  const catchupLastRef = useRef();
   const NS = useMemo(() => getCurrentAccountNS(), []);
   const handleCatchupClick = useCallback(async ({ duration } = {}) => {
     const now = Date.now();
@@ -925,7 +937,15 @@ function Catchup() {
                   type="button"
                   onClick={() => {
                     if (range < RANGES[RANGES.length - 1].value) {
-                      const duration = range * 60 * 60 * 1000;
+                      let duration;
+                      if (
+                        range === RANGES[RANGES.length - 1].value &&
+                        catchupLastRef.current?.checked
+                      ) {
+                        duration = Date.now() - lastCatchupEndAt;
+                      } else {
+                        duration = range * 60 * 60 * 1000;
+                      }
                       handleCatchupClick({ duration });
                     } else {
                       handleCatchupClick();
@@ -935,11 +955,25 @@ function Catchup() {
                   Catch up
                 </button>
               </div>
-              {lastCatchupRange && range > lastCatchupRange && (
+              {lastCatchupRange && range > lastCatchupRange ? (
                 <p class="catchup-info">
                   <Icon icon="info" /> Overlaps with your last catch-up
                 </p>
-              )}
+              ) : range === RANGES[RANGES.length - 1].value &&
+                lastCatchupEndAt ? (
+                <p class="catchup-info">
+                  <label>
+                    <input
+                      type="checkbox"
+                      switch
+                      checked
+                      ref={catchupLastRef}
+                    />{' '}
+                    Until the last catch-up (
+                    {dtf.format(new Date(lastCatchupEndAt))})
+                  </label>
+                </p>
+              ) : null}
               <p class="insignificant">
                 <small>
                   Note: your instance might only show a maximum of 800 posts in
@@ -1076,9 +1110,11 @@ function Catchup() {
                         height,
                         publishedAt,
                       } = card;
-                      const domain = new URL(url).hostname
+                      const domain = punycode.toUnicode(
+                        new URL(url).hostname
                           .replace(/^www\./, '')
-                        .replace(/\/$/, '');
+                          .replace(/\/$/, ''),
+                      );
                       let accentColor;
                       if (blurhash) {
                         const averageColor = getBlurHashAverageColor(blurhash);
@@ -1651,35 +1687,40 @@ function PostPeek({ post, filterInfo }) {
   } = post;
   const isThread =
     (inReplyToId && inReplyToAccountId === account.id) || !!_thread;
-  const showMedia = !spoilerText && !sensitive;
+
+  const readingExpandSpoilers = useMemo(() => {
+    const prefs = store.account.get('preferences') || {};
+    return !!prefs['reading:expand:spoilers'];
+  }, []);
+  // const readingExpandSpoilers = true;
+  const showMedia = readingExpandSpoilers || (!spoilerText && !sensitive);
   const postText = content ? statusPeek(post) : '';
 
+  const showPostContent = !spoilerText || readingExpandSpoilers;
+
   return (
     <div class="post-peek" title={!spoilerText ? postText : ''}>
       <span class="post-peek-content">
-        {!!filterInfo ? (
-          <>
-            {isThread && (
+        {isThread && !showPostContent && (
           <>
             <span class="post-peek-tag post-peek-thread">Thread</span>{' '}
           </>
         )}
+        {!!filterInfo ? (
           <span class="post-peek-filtered">
             Filtered{filterInfo?.titlesStr ? `: ${filterInfo.titlesStr}` : ''}
           </span>
-          </>
-        ) : !!spoilerText ? (
-          <>
-            {isThread && (
-              <>
-                <span class="post-peek-tag post-peek-thread">Thread</span>{' '}
-              </>
-            )}
-            <span class="post-peek-spoiler">
-              <Icon icon="eye-close" /> {spoilerText}
-            </span>
-          </>
         ) : (
+          <>
+            {!!spoilerText && (
+              <span class="post-peek-spoiler">
+                <Icon
+                  icon={`${readingExpandSpoilers ? 'eye-open' : 'eye-close'}`}
+                />{' '}
+                {spoilerText}
+              </span>
+            )}
+            {showPostContent && (
               <div class="post-peek-html">
                 {isThread && (
                   <>
@@ -1709,6 +1750,8 @@ function PostPeek({ post, filterInfo }) {
                   )}
               </div>
             )}
+          </>
+        )}
       </span>
       {!filterInfo && (
         <span class="post-peek-post-content">

src/pages/filters.jsx

@@ -286,7 +286,13 @@ function FiltersAddEdit({ filter, onClose }) {
                     // Preserve existing expiry if not specified
                     // Seconds from now to expiresAtDate
                     // Other clients don't do this
-                    expiresIn = Math.floor((expiresAtDate - new Date()) / 1000);
+                    if (hasExpiry) {
+                      expiresIn = Math.floor(
+                        (expiresAtDate - new Date()) / 1000,
+                      );
+                    } else {
+                      expiresIn = null;
+                    }
                   } else if (expiresIn === '0' || expiresIn === 0) {
                     // 0 = Never
                     expiresIn = null;

src/pages/following.jsx

@@ -6,6 +6,7 @@ import { api } from '../utils/api';
 import { filteredItems } from '../utils/filters';
 import states from '../utils/states';
 import { getStatus, saveStatus } from '../utils/states';
+import supports from '../utils/supports';
 import {
   assignFollowedTags,
   clearFollowedTagsState,
@@ -23,11 +24,19 @@ function Following({ title, path, id, ...props }) {
   const latestItem = useRef();
 
   console.debug('RENDER Following', title, id);
+  const supportsPixelfed = supports('@pixelfed/home-include-reblogs');
 
   async function fetchHome(firstLoad) {
     if (firstLoad || !homeIterator.current) {
       homeIterator.current = masto.v1.timelines.home.list({ limit: LIMIT });
     }
+    if (supportsPixelfed && homeIterator.current?.nextParams) {
+      if (typeof homeIterator.current.nextParams === 'string') {
+        homeIterator.current.nextParams += '&include_reblogs=true';
+      } else {
+        homeIterator.current.nextParams.include_reblogs = true;
+      }
+    }
     const results = await homeIterator.current.next();
     let { value } = results;
     if (value?.length) {
@@ -63,15 +72,18 @@ function Following({ title, path, id, ...props }) {
 
   async function checkForUpdates() {
     try {
-      const results = await masto.v1.timelines.home
-        .list({
+      const opts = {
         limit: 5,
         since_id: latestItem.current,
-        })
-        .next();
+      };
+      if (supports('@pixelfed/home-include-reblogs')) {
+        opts.include_reblogs = true;
+      }
+      const results = await masto.v1.timelines.home.list(opts).next();
       let { value } = results;
       console.log('checkForUpdates', latestItem.current, value);
-      if (value?.length) {
+      const valueContainsLatestItem = value[0]?.id === latestItem.current; // since_id might not be supported
+      if (value?.length && !valueContainsLatestItem) {
         latestItem.current = value[0].id;
         value = dedupeBoosts(value, instance);
         value = filteredItems(value, 'home');

src/pages/hashtag.jsx

@@ -5,7 +5,7 @@ import {
   MenuHeader,
   MenuItem,
 } from '@szhsin/react-menu';
-import { useEffect, useRef, useState } from 'preact/hooks';
+import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 
 import Icon from '../components/icon';
@@ -18,6 +18,7 @@ import { filteredItems } from '../utils/filters';
 import showToast from '../utils/show-toast';
 import states from '../utils/states';
 import { saveStatus } from '../utils/states';
+import { isMediaFirstInstance } from '../utils/store-utils';
 import useTitle from '../utils/useTitle';
 
 const LIMIT = 20;
@@ -55,6 +56,8 @@ function Hashtags({ media: mediaView, columnMode, ...props }) {
   useTitle(title, `/:instance?/t/:hashtag`);
   const latestItem = useRef();
 
+  const mediaFirst = useMemo(() => isMediaFirstInstance(), []);
+
   // const hashtagsIterator = useRef();
   const maxID = useRef(undefined);
   async function fetchHashtags(firstLoad) {
@@ -73,7 +76,7 @@ function Hashtags({ media: mediaView, columnMode, ...props }) {
         limit: LIMIT,
         any: hashtags.slice(1),
         maxId: firstLoad ? undefined : maxID.current,
-        onlyMedia: media,
+        onlyMedia: media ? true : undefined,
       })
       .next();
     let { value } = results;
@@ -85,7 +88,7 @@ function Hashtags({ media: mediaView, columnMode, ...props }) {
       // value = filteredItems(value, 'public');
       value.forEach((item) => {
         saveStatus(item, instance, {
-          skipThreading: media, // If media view, no need to form threads
+          skipThreading: media || mediaFirst, // If media view, no need to form threads
         });
       });
 
@@ -109,8 +112,9 @@ function Hashtags({ media: mediaView, columnMode, ...props }) {
         })
         .next();
       let { value } = results;
+      const valueContainsLatestItem = value[0]?.id === latestItem.current; // since_id might not be supported
+      if (value?.length && !valueContainsLatestItem) {
         value = filteredItems(value, 'public');
-      if (value?.length) {
         return true;
       }
       return false;
@@ -155,7 +159,7 @@ function Hashtags({ media: mediaView, columnMode, ...props }) {
       fetchItems={fetchHashtags}
       checkForUpdates={checkForUpdates}
       useItemID
-      view={media ? 'media' : undefined}
+      view={media || mediaFirst ? 'media' : undefined}
       refresh={media}
       // allowFilters
       filterContext="public"
@@ -232,6 +236,8 @@ function Hashtags({ media: mediaView, columnMode, ...props }) {
               <MenuDivider />
             </>
           )}
+          {!mediaFirst && (
+            <>
               <MenuHeader className="plain">Filters</MenuHeader>
               <MenuItem
                 type="checkbox"
@@ -249,6 +255,8 @@ function Hashtags({ media: mediaView, columnMode, ...props }) {
                 <span class="menu-grow">Media only</span>
               </MenuItem>
               <MenuDivider />
+            </>
+          )}
           <FocusableItem className="menu-field" disabled={reachLimit}>
             {({ ref }) => (
               <form

src/pages/home.jsx

@@ -84,7 +84,7 @@ function NotificationsLink() {
   );
 }
 
-const NOTIFICATIONS_LIMIT = 30;
+const NOTIFICATIONS_LIMIT = 80;
 const NOTIFICATIONS_DISPLAY_LIMIT = 5;
 function NotificationsMenu({ anchorRef, state, onClose }) {
   const { masto, instance } = api();

src/pages/list.jsx

@@ -63,8 +63,9 @@ function List(props) {
         since_id: latestItem.current,
       });
       let { value } = results;
+      const valueContainsLatestItem = value[0]?.id === latestItem.current; // since_id might not be supported
+      if (value?.length && !valueContainsLatestItem) {
         value = filteredItems(value, 'home');
-      if (value?.length) {
         return true;
       }
       return false;

src/pages/login.jsx

@@ -1,5 +1,6 @@
 import './login.css';
 
+import Fuse from 'fuse.js';
 import { useEffect, useRef, useState } from 'preact/hooks';
 import { useSearchParams } from 'react-router-dom';
 
@@ -27,12 +28,14 @@ function Login() {
   );
 
   const [instancesList, setInstancesList] = useState([]);
+  const searcher = useRef();
   useEffect(() => {
     (async () => {
       try {
         const res = await fetch(instancesListURL);
         const data = await res.json();
         setInstancesList(data);
+        searcher.current = new Fuse(data);
       } catch (e) {
         // Silently fail
         console.error(e);
@@ -90,21 +93,11 @@ function Login() {
     !/[\s\/\\@]/.test(cleanInstanceText);
 
   const instancesSuggestions = cleanInstanceText
-    ? instancesList
-        .filter((instance) => instance.includes(instanceText))
-        .sort((a, b) => {
-          // Move text that starts with instanceText to the start
-          const aStartsWith = a
-            .toLowerCase()
-            .startsWith(instanceText.toLowerCase());
-          const bStartsWith = b
-            .toLowerCase()
-            .startsWith(instanceText.toLowerCase());
-          if (aStartsWith && !bStartsWith) return -1;
-          if (!aStartsWith && bStartsWith) return 1;
-          return 0;
+    ? searcher.current
+        ?.search(cleanInstanceText, {
+          limit: 10,
         })
-        .slice(0, 10)
+        ?.map((match) => match.item)
     : [];
 
   const selectedInstanceText = instanceTextLooksLikeDomain

src/pages/mentions.jsx

@@ -4,6 +4,7 @@ import { useSearchParams } from 'react-router-dom';
 import Link from '../components/link';
 import Timeline from '../components/timeline';
 import { api } from '../utils/api';
+import { fixNotifications } from '../utils/group-notifications';
 import { saveStatus } from '../utils/states';
 import useTitle from '../utils/useTitle';
 
@@ -30,6 +31,8 @@ function Mentions({ columnMode, ...props }) {
     const results = await mentionsIterator.current.next();
     let { value } = results;
     if (value?.length) {
+      value = fixNotifications(value);
+
       if (firstLoad) {
         latestItem.current = value[0].id;
         console.log('First load', latestItem.current);
@@ -95,7 +98,9 @@ function Mentions({ columnMode, ...props }) {
           latestConversationItem.current,
           value,
         );
-        if (value?.length) {
+        const valueContainsLatestItem =
+          value[0]?.id === latestConversationItem.current; // since_id might not be supported
+        if (value?.length && !valueContainsLatestItem) {
           latestConversationItem.current = value[0].lastStatus.id;
           return true;
         }

src/pages/notifications.jsx

@@ -33,7 +33,7 @@ import usePageVisibility from '../utils/usePageVisibility';
 import useScroll from '../utils/useScroll';
 import useTitle from '../utils/useTitle';
 
-const LIMIT = 30; // 30 is the maximum limit :(
+const LIMIT = 80;
 const emptySearchParams = new URLSearchParams();
 
 const scrollIntoViewOptions = {
@@ -72,6 +72,13 @@ function Notifications({ columnMode }) {
         excludeTypes: ['follow_request'],
       });
     }
+    if (/max_id=($|&)/i.test(notificationsIterator.current?.nextParams)) {
+      // Pixelfed returns next paginationed link with empty max_id
+      // I assume, it's done (end of list)
+      return {
+        done: true,
+      };
+    }
     const allNotifications = await notificationsIterator.current.next();
     const notifications = allNotifications.value;
 
@@ -82,6 +89,32 @@ function Notifications({ columnMode }) {
         });
       });
 
+      // TEST: Slot in a fake notification to test 'severed_relationships'
+      // notifications.unshift({
+      //   id: '123123',
+      //   type: 'severed_relationships',
+      //   createdAt: '2024-03-22T19:20:08.316Z',
+      //   event: {
+      //     type: 'account_suspension',
+      //     targetName: 'mastodon.dev',
+      //     followersCount: 0,
+      //     followingCount: 0,
+      //   },
+      // });
+
+      // TEST: Slot in a fake notification to test 'moderation_warning'
+      // notifications.unshift({
+      //   id: '123123',
+      //   type: 'moderation_warning',
+      //   createdAt: new Date().toISOString(),
+      //   moderation_warning: {
+      //     id: '1231234',
+      //     action: 'mark_statuses_as_sensitive',
+      //   },
+      // });
+
+      // console.log({ notifications });
+
       const groupedNotifications = groupNotifications(notifications);
 
       if (firstLoad) {
@@ -247,7 +280,6 @@ function Notifications({ columnMode }) {
 
   const lastHiddenTime = useRef();
   usePageVisibility((visible) => {
-    let unsub;
     if (visible) {
       const timeDiff = Date.now() - lastHiddenTime.current;
       if (!lastHiddenTime.current || timeDiff > 1000 * 3) {
@@ -258,20 +290,21 @@ function Notifications({ columnMode }) {
       } else {
         lastHiddenTime.current = Date.now();
       }
-      unsub = subscribeKey(states, 'notificationsShowNew', (v) => {
-        if (uiState === 'loading') {
+    }
+  });
+  const firstLoad = useRef(true);
+  useEffect(() => {
+    let unsub = subscribeKey(states, 'notificationsShowNew', (v) => {
+      if (firstLoad.current) {
+        firstLoad.current = false;
         return;
       }
-        if (v) {
-          loadUpdates();
-        }
+      if (uiState === 'loading') return;
+      if (v) loadUpdates();
       setShowNew(v);
     });
-    }
-    return () => {
-      unsub?.();
-    };
-  });
+    return () => unsub?.();
+  }, []);
 
   const todayDate = new Date();
   const yesterdayDate = new Date(todayDate - 24 * 60 * 60 * 1000);
@@ -418,7 +451,7 @@ function Notifications({ columnMode }) {
               {supportsFilteredNotifications && (
                 <button
                   type="button"
-                  class="button plain"
+                  class="button plain4"
                   onClick={() => {
                     setShowNotificationsSettings(true);
                   }}
@@ -613,7 +646,7 @@ function Notifications({ columnMode }) {
           </label>
         </div>
         <h2 class="timeline-header">Today</h2>
-        {showTodayEmpty && !!snapStates.notifications.length && (
+        {showTodayEmpty && (
           <p class="ui-state insignificant">
             {uiState === 'default' ? "You're all caught up." : <>&hellip;</>}
           </p>

src/pages/public.jsx

@@ -10,6 +10,7 @@ import { api } from '../utils/api';
 import { filteredItems } from '../utils/filters';
 import states from '../utils/states';
 import { saveStatus } from '../utils/states';
+import supports from '../utils/supports';
 import useTitle from '../utils/useTitle';
 
 const LIMIT = 20;
@@ -30,10 +31,14 @@ function Public({ local, columnMode, ...props }) {
   const publicIterator = useRef();
   async function fetchPublic(firstLoad) {
     if (firstLoad || !publicIterator.current) {
-      publicIterator.current = masto.v1.timelines.public.list({
+      const opts = {
         limit: LIMIT,
-        local: isLocal,
-      });
+        local: isLocal || undefined,
+      };
+      if (!isLocal && supports('@pixelfed/global-feed')) {
+        opts.remote = true;
+      }
+      publicIterator.current = masto.v1.timelines.public.list(opts);
     }
     const results = await publicIterator.current.next();
     let { value } = results;
@@ -63,8 +68,9 @@ function Public({ local, columnMode, ...props }) {
         })
         .next();
       let { value } = results;
+      const valueContainsLatestItem = value[0]?.id === latestItem.current; // since_id might not be supported
+      if (value?.length && !valueContainsLatestItem) {
         value = filteredItems(value, 'public');
-      if (value?.length) {
         return true;
       }
       return false;

src/pages/search.jsx

@@ -177,6 +177,7 @@ function Search({ columnMode, ...props }) {
     ['/', 'Slash'],
     (e) => {
       searchFormRef.current?.focus?.();
+      searchFormRef.current?.select?.();
     },
     {
       preventDefault: true,

src/pages/settings.jsx

@@ -28,6 +28,7 @@ const {
   PHANPY_WEBSITE: WEBSITE,
   PHANPY_PRIVACY_POLICY_URL: PRIVACY_POLICY_URL,
   PHANPY_IMG_ALT_API_URL: IMG_ALT_API_URL,
+  PHANPY_GIPHY_API_KEY: GIPHY_API_KEY,
 } = import.meta.env;
 
 function Settings({ onClose }) {
@@ -433,6 +434,37 @@ function Settings({ onClose }) {
                 </div>
               </div>
             </li>
+            {!!GIPHY_API_KEY && authenticated && (
+              <li>
+                <label>
+                  <input
+                    type="checkbox"
+                    checked={snapStates.settings.composerGIFPicker}
+                    onChange={(e) => {
+                      states.settings.composerGIFPicker = e.target.checked;
+                    }}
+                  />{' '}
+                  GIF Picker for composer
+                </label>
+                <div class="sub-section insignificant">
+                  <small>
+                    Note: This feature uses external GIF search service, powered
+                    by{' '}
+                    <a
+                      href="https://developers.giphy.com/"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      GIPHY
+                    </a>
+                    . G-rated (suitable for viewing by all ages), tracking
+                    parameters are stripped, referrer information is omitted
+                    from requests, but search queries and IP address information
+                    will still reach their servers.
+                  </small>
+                </div>
+              </li>
+            )}
             {!!IMG_ALT_API_URL && authenticated && (
               <li>
                 <label>

src/pages/status.css

@@ -23,12 +23,6 @@
   }
 }
 
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
 .hero-heading {
   font-size: var(--text-size);
   display: inline-block;

src/pages/status.jsx

@@ -12,10 +12,10 @@ import {
   useRef,
   useState,
 } from 'preact/hooks';
+import punycode from 'punycode/';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { InView } from 'react-intersection-observer';
 import { matchPath, useSearchParams } from 'react-router-dom';
-import { useDebouncedCallback } from 'use-debounce';
 import { useSnapshot } from 'valtio';
 
 import Avatar from '../components/avatar';
@@ -122,7 +122,7 @@ function StatusPage(params) {
   }, [showMedia]);
 
   const mediaAttachments = mediaStatusID
-    ? mediaStatus?.mediaAttachments
+    ? snapStates.statuses[statusKey(mediaStatusID, instance)]?.mediaAttachments
     : heroStatus?.mediaAttachments;
 
   const handleMediaClose = useCallback(() => {
@@ -153,6 +153,18 @@ function StatusPage(params) {
     return () => clearTimeout(timer);
   }, [showMediaOnly]);
 
+  useEffect(() => {
+    const $deckContainers = document.querySelectorAll('.deck-container');
+    $deckContainers.forEach(($deckContainer) => {
+      $deckContainer.setAttribute('inert', '');
+    });
+    return () => {
+      $deckContainers.forEach(($deckContainer) => {
+        $deckContainer.removeAttribute('inert');
+      });
+    };
+  }, []);
+
   return (
     <div class="deck-backdrop">
       {showMedia ? (
@@ -972,6 +984,18 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
     [statuses, limit, renderStatus],
   );
 
+  // If there's spoiler in hero status, auto-expand it
+  useEffect(() => {
+    let timer = setTimeout(() => {
+      if (!heroStatusRef.current) return;
+      const spoilerButton = heroStatusRef.current.querySelector(
+        '.spoiler-button:not(.spoiling), .spoiler-media-button:not(.spoiling)',
+      );
+      if (spoilerButton) spoilerButton.click();
+    }, 1000);
+    return () => clearTimeout(timer);
+  }, [id]);
+
   return (
     <div
       tabIndex="-1"
@@ -1208,7 +1232,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
                   {postInstance ? (
                     <>
                       {' '}
-                      (<b>{postInstance}</b>)
+                      (<b>{punycode.toUnicode(postInstance)}</b>)
                     </>
                   ) : (
                     ''

src/pages/trending.jsx

@@ -3,6 +3,7 @@ import '../components/links-bar.css';
 import { MenuItem } from '@szhsin/react-menu';
 import { getBlurHashAverageColor } from 'fast-blurhash';
 import { useMemo, useRef, useState } from 'preact/hooks';
+import punycode from 'punycode/';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useSnapshot } from 'valtio';
 
@@ -18,6 +19,7 @@ import pmem from '../utils/pmem';
 import shortenNumber from '../utils/shorten-number';
 import states from '../utils/states';
 import { saveStatus } from '../utils/states';
+import supports from '../utils/supports';
 import useTitle from '../utils/useTitle';
 
 const LIMIT = 20;
@@ -32,6 +34,17 @@ const fetchLinks = pmem(
   },
 );
 
+function fetchTrends(masto) {
+  if (supports('@pixelfed/trending')) {
+    return masto.pixelfed.v2.discover.posts.trending.list({
+      range: 'daily',
+    });
+  }
+  return masto.v1.trends.statuses.list({
+    limit: LIMIT,
+  });
+}
+
 function Trending({ columnMode, ...props }) {
   const snapStates = useSnapshot(states);
   const params = columnMode ? {} : useParams();
@@ -47,13 +60,13 @@ function Trending({ columnMode, ...props }) {
   const [hashtags, setHashtags] = useState([]);
   const [links, setLinks] = useState([]);
   const trendIterator = useRef();
+
   async function fetchTrend(firstLoad) {
     if (firstLoad || !trendIterator.current) {
-      trendIterator.current = masto.v1.trends.statuses.list({
-        limit: LIMIT,
-      });
+      trendIterator.current = fetchTrends(masto);
 
       // Get hashtags
+      if (supports('@mastodon/trending-hashtags')) {
         try {
           const iterator = masto.v1.trends.tags.list();
           const { value: tags } = await iterator.next();
@@ -64,8 +77,10 @@ function Trending({ columnMode, ...props }) {
         } catch (e) {
           console.error(e);
         }
+      }
 
       // Get links
+      if (supports('@mastodon/trending-links')) {
         try {
           const { value } = await fetchLinks(masto, instance);
           // 4 types available: link, photo, video, rich
@@ -79,6 +94,7 @@ function Trending({ columnMode, ...props }) {
           console.error(e);
         }
       }
+    }
     const results = await trendIterator.current.next();
     let { value } = results;
     if (value?.length) {
@@ -161,9 +177,9 @@ function Trending({ columnMode, ...props }) {
                 url,
                 width,
               } = link;
-              const domain = new URL(url).hostname
-                .replace(/^www\./, '')
-                .replace(/\/$/, '');
+              const domain = punycode.toUnicode(
+                new URL(url).hostname.replace(/^www\./, '').replace(/\/$/, ''),
+              );
               let accentColor;
               if (blurhash) {
                 const averageColor = getBlurHashAverageColor(blurhash);

src/utils/api.js

@@ -7,6 +7,7 @@ import {
   getAccountByInstance,
   getCurrentAccount,
   saveAccount,
+  setCurrentAccountID,
 } from './store-utils';
 
 // Default *fallback* instance
@@ -118,7 +119,7 @@ export async function initAccount(client, instance, accessToken, vapidKey) {
   const mastoAccount = await masto.v1.accounts.verifyCredentials();
 
   console.log('CURRENTACCOUNT SET', mastoAccount.id);
-  store.session.set('currentAccount', mastoAccount.id);
+  setCurrentAccountID(mastoAccount.id);
 
   saveAccount({
     info: mastoAccount,

src/utils/enhance-content.js

@@ -242,6 +242,17 @@ function _enhanceContent(content, opts = {}) {
     }
   }
 
+  // ADD ASPECT RATIO TO ALL IMAGES
+  if (enhancedContent.includes('<img')) {
+    dom.querySelectorAll('img').forEach((img) => {
+      const width = img.getAttribute('width') || img.naturalWidth;
+      const height = img.getAttribute('height') || img.naturalHeight;
+      if (width && height) {
+        img.style.setProperty('--original-aspect-ratio', `${width}/${height}`);
+      }
+    });
+  }
+
   if (postEnhanceDOM) {
     queueMicrotask(() => postEnhanceDOM(dom));
     // postEnhanceDOM(dom); // mutate dom

src/utils/filters.jsx

@@ -1,5 +1,5 @@
 import mem from './mem';
-import store from './store';
+import { getCurrentAccountID } from './store-utils';
 
 function _isFiltered(filtered, filterContext) {
   if (!filtered?.length) return false;
@@ -43,7 +43,7 @@ export function filteredItem(item, filterContext, currentAccountID) {
 export function filteredItems(items, filterContext) {
   if (!items?.length) return [];
   if (!filterContext) return items;
-  const currentAccountID = store.session.get('currentAccount');
+  const currentAccountID = getCurrentAccountID();
   return items.filter((item) =>
     filteredItem(item, filterContext, currentAccountID),
   );

src/utils/format-duration.jsx

@@ -0,0 +1,14 @@
+export default function formatDuration(time) {
+  if (!time) return;
+  let hours = Math.floor(time / 3600);
+  let minutes = Math.floor((time % 3600) / 60);
+  let seconds = Math.round(time % 60);
+
+  if (hours === 0) {
+    return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+  } else {
+    return `${hours}:${minutes.toString().padStart(2, '0')}:${seconds
+      .toString()
+      .padStart(2, '0')}`;
+  }
+}

src/utils/get-instance-status-url.js

@@ -6,6 +6,7 @@ const statusPostRegexes = [
   /\/notes\/([^\/]+)/i, // Misskey, Firefish
   /^\/(?:notice|objects)\/([a-z0-9-]+)/i, // Pleroma
   /\/@[^@\/]+@?[^\/]+?\/([^\/]+)/i, // Mastodon
+  /^\/p\/[^\/]+\/([^\/]+)/i, // Pixelfed
 ];
 
 export function getInstanceStatusObject(url) {

src/utils/getHTMLText.jsx

@@ -1,8 +1,10 @@
 import mem from './mem';
 
 const div = document.createElement('div');
-function getHTMLText(html) {
+function getHTMLText(html, opts) {
   if (!html) return '';
+  const { preProcess } = opts || {};
+
   div.innerHTML = html
     .replace(/<\/p>/g, '</p>\n\n')
     .replace(/<\/li>/g, '</li>\n');
@@ -10,6 +12,8 @@ function getHTMLText(html) {
     br.replaceWith('\n');
   });
 
+  preProcess?.(div);
+
   // MASTODON-SPECIFIC classes
   // Remove .invisible
   div.querySelectorAll('.invisible').forEach((el) => {

src/utils/group-notifications.jsx

@@ -9,7 +9,7 @@ const notificationTypeKeys = {
   poll: ['status'],
   update: ['status'],
 };
-function fixNotifications(notifications) {
+export function fixNotifications(notifications) {
   return notifications.filter((notification) => {
     const { type, id, createdAt } = notification;
     if (!type) {

src/utils/isMastodonLinkMaybe.jsx

@@ -6,6 +6,7 @@ export default function isMastodonLinkMaybe(url) {
       /^\/(@[^/]+|users\/[^/]+)\/(statuses|posts)\/\w+\/?$/i.test(pathname) || // GoToSocial, Takahe
       /^\/notes\/[a-z0-9]+$/i.test(pathname) || // Misskey, Firefish
       /^\/(notice|objects)\/[a-z0-9-]+$/i.test(pathname) || // Pleroma
+      /^\/@[^/]+\/post\/[a-z0-9]+$/i.test(pathname) || // Threads
       /#\/[^\/]+\.[^\/]+\/s\/.+/i.test(hash) // Phanpy 🫣
     );
   } catch (e) {

src/utils/localeCode2Text.jsx

@@ -1,10 +1,16 @@
-export default function localeCode2Text(code) {
-  try {
-    return new Intl.DisplayNames(navigator.languages, {
+import mem from './mem';
+
+const IntlDN = new Intl.DisplayNames(navigator.languages, {
   type: 'language',
-    }).of(code);
+});
+
+function _localeCode2Text(code) {
+  try {
+    return IntlDN.of(code);
   } catch (e) {
     console.error(e);
     return null;
   }
 }
+
+export default mem(_localeCode2Text);

src/utils/push-notifications.js

@@ -147,6 +147,7 @@ export async function initSubscription() {
   if (subscription && !backendSubscription) {
     // check if account's vapidKey is same as subscription's applicationServerKey
     const { vapidKey } = getCurrentAccount();
+    if (vapidKey) {
       const { applicationServerKey } = subscription.options;
       const vapidKeyStr = urlBase64ToUint8Array(vapidKey).toString();
       const applicationServerKeyStr = new Uint8Array(
@@ -166,6 +167,9 @@ export async function initSubscription() {
         await subscription.unsubscribe();
         throw new Error('Subscription key and vapid key changed');
       }
+    } else {
+      console.warn('No vapidKey found');
+    }
   }
 
   // Check if backend subscription returns 404

src/utils/relationships.js

@@ -1,11 +1,11 @@
 import { api } from './api';
-import store from './store';
+import { getCurrentAccountID } from './store-utils';
 
 export async function fetchRelationships(accounts, relationshipsMap = {}) {
   if (!accounts?.length) return;
   const { masto } = api();
 
-  const currentAccount = store.session.get('currentAccount');
+  const currentAccount = getCurrentAccountID();
   const uniqueAccountIds = accounts.reduce((acc, a) => {
     // 1. Ignore duplicate accounts
     // 2. Ignore accounts that are already inside relationshipsMap

src/utils/shorten-number.jsx

@@ -1,5 +1,6 @@
 const { locale } = Intl.NumberFormat().resolvedOptions();
 const shortenNumber = Intl.NumberFormat(locale, {
   notation: 'compact',
+  roundingMode: 'floor',
 }).format;
 export default shortenNumber;

src/utils/show-compose.js

@@ -0,0 +1,27 @@
+import openOSK from './open-osk';
+import showToast from './show-toast';
+import states from './states';
+
+const TOAST_DURATION = 5_000; // 5 seconds
+
+export default function showCompose(opts) {
+  if (!opts) opts = true;
+
+  if (states.showCompose) {
+    if (states.composerState.minimized) {
+      showToast({
+        duration: TOAST_DURATION,
+        text: `A draft post is currently minimized. Post or discard it before creating a new one.`,
+      });
+    } else {
+      showToast({
+        duration: TOAST_DURATION,
+        text: `A post is currently open. Post or discard it before creating a new one.`,
+      });
+    }
+    return;
+  }
+
+  openOSK();
+  states.showCompose = opts;
+}

src/utils/states.js

@@ -40,6 +40,7 @@ const states = proxy({
   statusReply: {},
   accounts: {},
   routeNotification: null,
+  composerState: {},
   // Modals
   showCompose: false,
   showSettings: false,
@@ -67,6 +68,7 @@ const states = proxy({
     contentTranslationAutoInline: false,
     shortcutSettingsCloudImportExport: false,
     mediaAltGenerator: false,
+    composerGIFPicker: false,
     cloakMode: false,
   },
 });
@@ -99,6 +101,8 @@ export function initStates() {
     store.account.get('settings-shortcutSettingsCloudImportExport') ?? false;
   states.settings.mediaAltGenerator =
     store.account.get('settings-mediaAltGenerator') ?? false;
+  states.settings.composerGIFPicker =
+    store.account.get('settings-composerGIFPicker') ?? false;
   states.settings.cloakMode = store.account.get('settings-cloakMode') ?? false;
 }
 
@@ -140,6 +144,9 @@ subscribe(states, (changes) => {
     if (path.join('.') === 'settings.mediaAltGenerator') {
       store.account.set('settings-mediaAltGenerator', !!value);
     }
+    if (path.join('.') === 'settings.composerGIFPicker') {
+      store.account.set('settings-composerGIFPicker', !!value);
+    }
     if (path?.[0] === 'shortcuts') {
       store.account.set('shortcuts', states.shortcuts);
     }

src/utils/store-utils.js

@@ -16,13 +16,40 @@ export function getAccountByInstance(instance) {
   return accounts.find((a) => a.instanceURL === instance);
 }
 
+const standaloneMQ = window.matchMedia('(display-mode: standalone)');
+
+export function getCurrentAccountID() {
+  try {
+    const id = store.session.get('currentAccount');
+    if (id) return id;
+  } catch (e) {}
+  if (standaloneMQ.matches) {
+    try {
+      const id = store.local.get('currentAccount');
+      if (id) return id;
+    } catch (e) {}
+  }
+  return null;
+}
+
+export function setCurrentAccountID(id) {
+  try {
+    store.session.set('currentAccount', id);
+  } catch (e) {}
+  if (standaloneMQ.matches) {
+    try {
+      store.local.set('currentAccount', id);
+    } catch (e) {}
+  }
+}
+
 export function getCurrentAccount() {
   if (!window.__IGNORE_GET_ACCOUNT_ERROR__) {
     // Track down getCurrentAccount() calls before account-based states are initialized
     console.error('getCurrentAccount() called before states are initialized');
     if (import.meta.env.DEV) console.trace();
   }
-  const currentAccount = store.session.get('currentAccount');
+  const currentAccount = getCurrentAccountID();
   const account = getAccount(currentAccount);
   return account;
 }
@@ -48,7 +75,7 @@ export function saveAccount(account) {
     accounts.push(account);
   }
   store.local.setJSON('accounts', accounts);
-  store.session.set('currentAccount', account.info.id);
+  setCurrentAccountID(account.info.id);
 }
 
 export function updateAccount(accountInfo) {
@@ -80,10 +107,10 @@ export function getCurrentInstance() {
     return (currentInstance = instances[instance]);
   } catch (e) {
     console.error(e);
-    alert(`Failed to load instance configuration. Please try again.\n\n${e}`);
+    // alert(`Failed to load instance configuration. Please try again.\n\n${e}`);
     // Temporary fix for corrupted data
-    store.local.del('instances');
-    location.reload();
+    // store.local.del('instances');
+    // location.reload();
     return {};
   }
 }
@@ -126,3 +153,8 @@ export function getCurrentInstanceConfiguration() {
   const instance = getCurrentInstance();
   return getInstanceConfiguration(instance);
 }
+
+export function isMediaFirstInstance() {
+  const instance = getCurrentInstance();
+  return /pixelfed/i.test(instance?.version);
+}

src/utils/supports.js

@@ -4,6 +4,23 @@ import features from '../data/features.json';
 
 import { getCurrentInstance } from './store-utils';
 
+// Non-semver(?) UA string detection
+const containPixelfed = /pixelfed/i;
+const notContainPixelfed = /^(?!.*pixelfed).*$/i;
+const platformFeatures = {
+  '@mastodon/lists': notContainPixelfed,
+  '@mastodon/filters': notContainPixelfed,
+  '@mastodon/mentions': notContainPixelfed,
+  '@mastodon/trending-hashtags': notContainPixelfed,
+  '@mastodon/trending-links': notContainPixelfed,
+  '@mastodon/post-bookmark': notContainPixelfed,
+  '@mastodon/post-edit': notContainPixelfed,
+  '@mastodon/profile-edit': notContainPixelfed,
+  '@mastodon/profile-private-note': notContainPixelfed,
+  '@pixelfed/trending': containPixelfed,
+  '@pixelfed/home-include-reblogs': containPixelfed,
+  '@pixelfed/global-feed': containPixelfed,
+};
 const supportsCache = {};
 
 function supports(feature) {
@@ -11,6 +28,11 @@ function supports(feature) {
     const { version, domain } = getCurrentInstance();
     const key = `${domain}-${feature}`;
     if (supportsCache[key]) return supportsCache[key];
+
+    if (platformFeatures[feature]) {
+      return (supportsCache[key] = platformFeatures[feature].test(version));
+    }
+
     const range = features[feature];
     if (!range) return false;
     return (supportsCache[key] = satisfies(version, range, {

src/utils/timeline-utils.jsx

@@ -4,6 +4,7 @@ import pmem from './pmem';
 import { fetchRelationships } from './relationships';
 import states, { saveStatus, statusKey } from './states';
 import store from './store';
+import supports from './supports';
 
 export function groupBoosts(values) {
   let newValues = [];
@@ -149,6 +150,7 @@ export function groupContext(items, instance) {
 
   const newItems = [];
   const appliedContextIndices = [];
+  const inReplyToIds = [];
   items.forEach((item) => {
     if (item.reblog) {
       newItems.push(item);
@@ -176,17 +178,53 @@ export function groupContext(items, instance) {
       }
     }
 
+    // PREPARE FOR REPLY HINTS
     if (item.inReplyToId && item.inReplyToAccountId !== item.account.id) {
       const sKey = statusKey(item.id, instance);
       if (!states.statusReply[sKey]) {
         // If it's a reply and not a thread
-        queueMicrotask(async () => {
-          try {
+        inReplyToIds.push({
+          sKey,
+          inReplyToId: item.inReplyToId,
+        });
+        // queueMicrotask(async () => {
+        //   try {
+        //     const { masto } = api({ instance });
+        //     // const replyToStatus = await masto.v1.statuses
+        //     //   .$select(item.inReplyToId)
+        //     //   .fetch();
+        //     const replyToStatus = await fetchStatus(item.inReplyToId, masto);
+        //     saveStatus(replyToStatus, instance, {
+        //       skipThreading: true,
+        //       skipUnfurling: true,
+        //     });
+        //     states.statusReply[sKey] = {
+        //       id: replyToStatus.id,
+        //       instance,
+        //     };
+        //   } catch (e) {
+        //     // Silently fail
+        //     console.error(e);
+        //   }
+        // });
+      }
+    }
+
+    newItems.push(item);
+  });
+
+  // FETCH AND SHOW REPLY HINTS
+  if (inReplyToIds?.length) {
+    queueMicrotask(() => {
       const { masto } = api({ instance });
-            // const replyToStatus = await masto.v1.statuses
-            //   .$select(item.inReplyToId)
-            //   .fetch();
-            const replyToStatus = await fetchStatus(item.inReplyToId, masto);
+      console.log('REPLYHINT', inReplyToIds);
+
+      // Fallback if batch fetch fails or returns nothing or not supported
+      async function fallbackFetch() {
+        for (let i = 0; i < inReplyToIds.length; i++) {
+          const { sKey, inReplyToId } = inReplyToIds[i];
+          try {
+            const replyToStatus = await fetchStatus(inReplyToId, masto);
             saveStatus(replyToStatus, instance, {
               skipThreading: true,
               skipUnfurling: true,
@@ -195,16 +233,52 @@ export function groupContext(items, instance) {
               id: replyToStatus.id,
               instance,
             };
+            // Pause 1s
+            await new Promise((resolve) => setTimeout(resolve, 1000));
           } catch (e) {
             // Silently fail
             console.error(e);
           }
-        });
         }
       }
 
-    newItems.push(item);
+      if (supports('@mastodon/fetch-multiple-statuses')) {
+        // This is batch fetching yooo, woot
+        // Limit 20, returns 422 if exceeded https://github.com/mastodon/mastodon/pull/27871
+        const ids = inReplyToIds.map(({ inReplyToId }) => inReplyToId);
+        (async () => {
+          try {
+            const replyToStatuses = await masto.v1.statuses.list({ id: ids });
+            if (replyToStatuses?.length) {
+              for (const replyToStatus of replyToStatuses) {
+                saveStatus(replyToStatus, instance, {
+                  skipThreading: true,
+                  skipUnfurling: true,
                 });
+                const sKey = inReplyToIds.find(
+                  ({ inReplyToId }) => inReplyToId === replyToStatus.id,
+                )?.sKey;
+                if (sKey) {
+                  states.statusReply[sKey] = {
+                    id: replyToStatus.id,
+                    instance,
+                  };
+                }
+              }
+            } else {
+              fallbackFetch();
+            }
+          } catch (e) {
+            // Silently fail
+            console.error(e);
+            fallbackFetch();
+          }
+        })();
+      } else {
+        fallbackFetch();
+      }
+    });
+  }
 
   return newItems;
 }

src/utils/unfurl-link.jsx

@@ -9,6 +9,20 @@ export const throttle = pThrottle({
   interval: 1000,
 });
 
+const STATUS_ID_REGEXES = [
+  /\/@[^@\/]+@?[^\/]+?\/(\d+)$/i, // Mastodon
+  /\/notice\/(\w+)$/i, // Pleroma
+];
+function getStatusID(path) {
+  for (let i = 0; i < STATUS_ID_REGEXES.length; i++) {
+    const statusMatchID = path.match(STATUS_ID_REGEXES[i])?.[1];
+    if (statusMatchID) {
+      return statusMatchID;
+    }
+  }
+  return null;
+}
+
 const denylistDomains = /(twitter|github)\.com/i;
 const failedUnfurls = {};
 function _unfurlMastodonLink(instance, url) {
@@ -53,11 +67,11 @@ function _unfurlMastodonLink(instance, url) {
   }
   const domain = urlObj.hostname;
   const path = urlObj.pathname;
-  // Regex /:username/:id, where username = @username or @username@domain, id = number
-  const statusRegex = /\/@([^@\/]+)@?([^\/]+)?\/(\d+)$/i;
-  const statusMatch = statusRegex.exec(path);
-  if (statusMatch) {
-    const id = statusMatch[3];
+  // Regex /:username/:id, where username = @username or @username@domain, id = post ID
+  let statusMatchID = getStatusID(path);
+
+  if (statusMatchID) {
+    const id = statusMatchID;
     const { masto } = api({ instance: domain });
     remoteInstanceFetch = masto.v1.statuses
       .$select(id)
@@ -83,15 +97,23 @@ function _unfurlMastodonLink(instance, url) {
       limit: 1,
     })
     .then((results) => {
-      if (results.statuses.length > 0) {
-        const status = results.statuses[0];
+      const { statuses } = results;
+      if (statuses.length > 0) {
+        // Filter out statuses that has content that contains the URL, in-case-sensitive
+        const theStatuses = statuses.filter(
+          (status) =>
+            !status.content?.toLowerCase().includes(theURL.toLowerCase()),
+        );
+
+        if (theStatuses.length === 1) {
           return {
-          status,
+            status: theStatuses[0],
             instance,
           };
-      } else {
-        throw new Error('No results');
         }
+        // If there are multiple statuses, give up, something is wrong
+      }
+      throw new Error('No results');
     });
 
   function handleFulfill(result) {

vite.config.js

@@ -118,9 +118,10 @@ export default defineConfig({
         compose: resolve(__dirname, 'compose/index.html'),
       },
       output: {
-        // manualChunks: {
+        manualChunks: {
           // 'intl-segmenter-polyfill': ['@formatjs/intl-segmenter/polyfill'],
-        // },
+          'tinyld-light': ['tinyld/light'],
+        },
         chunkFileNames: (chunkInfo) => {
           const { facadeModuleId } = chunkInfo;
           if (facadeModuleId && facadeModuleId.includes('icon')) {