README.md

@@ -179,9 +179,6 @@ 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.
@@ -208,7 +205,6 @@ 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)
 
 > Note: Add yours by creating a pull request.
 

src/app.css

@@ -306,20 +306,13 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   .timeline {
     > li:not(.timeline-item-carousel, .timeline-item-container) {
       &:has(.status-media-first) {
-        @media (min-width: 40em) {
+        width: fit-content;
-          width: fit-content;
-          max-width: min(480px, 100%);
-        }
-
         background-color: transparent !important;
         border: 0 !important;
         box-shadow: none !important;
+        max-width: min(480px, 100%);
         margin-inline: auto !important;
 
-        &:not(:first-child) {
-          margin-block: 32px;
-        }
-
         &:has(.skeleton) {
           width: 100%;
         }
@@ -1918,8 +1911,7 @@ 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,

src/app.jsx

@@ -53,7 +53,7 @@ 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, setCurrentAccountID } from './utils/store-utils';
+import { getCurrentAccount } from './utils/store-utils';
 import './utils/toast-alert';
 
 window.__STATES__ = states;
@@ -338,7 +338,7 @@ function App() {
       window.__IGNORE_GET_ACCOUNT_ERROR__ = true;
       const account = getCurrentAccount();
       if (account) {
-        setCurrentAccountID(account.info.id);
+        store.session.set('currentAccount', account.info.id);
         const { client } = api({ account });
         const { instance } = client;
         // console.log('masto', masto);

src/components/account-info.jsx

@@ -22,8 +22,7 @@ import shortenNumber from '../utils/shorten-number';
 import showToast from '../utils/show-toast';
 import states, { hideAllModals } from '../utils/states';
 import store from '../utils/store';
-import { getCurrentAccountID, updateAccount } from '../utils/store-utils';
+import { updateAccount } from '../utils/store-utils';
-import supports from '../utils/supports';
 
 import AccountBlock from './account-block';
 import Avatar from './avatar';
@@ -199,7 +198,10 @@ function AccountInfo({
     }
   }
 
-  const isSelf = useMemo(() => id === getCurrentAccountID(), [id]);
+  const isSelf = useMemo(
+    () => id === store.session.get('currentAccount'),
+    [id],
+  );
 
   useEffect(() => {
     const infoHasEssentials = !!(
@@ -918,7 +920,7 @@ function RelatedActions({
 
   useEffect(() => {
     if (info) {
-      const currentAccount = getCurrentAccountID();
+      const currentAccount = store.session.get('currentAccount');
       let currentID;
       (async () => {
         if (sameInstance && authenticated) {
@@ -1092,18 +1094,16 @@ function RelatedActions({
                   <Icon icon="translate" />
                   <span>Translate bio</span>
                 </MenuItem>
-                {supports('@mastodon/profile-private-note') && (
+                <MenuItem
-                  <MenuItem
+                  onClick={() => {
-                    onClick={() => {
+                    setShowPrivateNoteModal(true);
-                      setShowPrivateNoteModal(true);
+                  }}
-                    }}
+                >
-                  >
+                  <Icon icon="pencil" />
-                    <Icon icon="pencil" />
+                  <span>
-                    <span>
+                    {privateNote ? 'Edit private note' : 'Add private note'}
-                      {privateNote ? 'Edit private note' : 'Add private note'}
+                  </span>
-                    </span>
+                </MenuItem>
-                  </MenuItem>
-                )}
                 {following && !!relationship && (
                   <>
                     <MenuItem
@@ -1452,22 +1452,19 @@ function RelatedActions({
                 </MenuItem>
               </>
             )}
-            {currentAuthenticated &&
+            {currentAuthenticated && isSelf && standalone && (
-              isSelf &&
+              <>
-              standalone &&
+                <MenuDivider />
-              supports('@mastodon/profile-edit') && (
+                <MenuItem
-                <>
+                  onClick={() => {
-                  <MenuDivider />
+                    setShowEditProfile(true);
-                  <MenuItem
+                  }}
-                    onClick={() => {
+                >
-                      setShowEditProfile(true);
+                  <Icon icon="pencil" />
-                    }}
+                  <span>Edit profile</span>
-                  >
+                </MenuItem>
-                    <Icon icon="pencil" />
+              </>
-                    <span>Edit profile</span>
+            )}
-                  </MenuItem>
-                </>
-              )}
             {import.meta.env.DEV && currentAuthenticated && isSelf && (
               <>
                 <MenuDivider />

src/components/compose.css

@@ -310,7 +310,7 @@
 
 #compose-container .form-visibility-direct {
   --yellow-stripes: repeating-linear-gradient(
-    135deg,
+    -45deg,
     var(--reply-to-faded-color),
     var(--reply-to-faded-color) 10px,
     var(--reply-to-faded-color) 10px,

src/components/compose.jsx

@@ -124,14 +124,14 @@ const MENTION_RE = new RegExp(
 
 // AI-generated, all other regexes are too complicated
 const HASHTAG_RE = new RegExp(
-  `(^|[^=\\/\\w])(#[a-z0-9_]+([a-z0-9_.]+[a-z0-9_]+)?)(?![\\/\\w])`,
+  `(^|[^=\\/\\w])(#[a-z0-9_]+([a-z0-9_.-]+[a-z0-9_]+)?)(?![\\/\\w])`,
   'ig',
 );
 
 // https://github.com/mastodon/mastodon/blob/23e32a4b3031d1da8b911e0145d61b4dd47c4f96/app/models/custom_emoji.rb#L31
 const SHORTCODE_RE_FRAGMENT = '[a-zA-Z0-9_]{2,}';
 const SCAN_RE = new RegExp(
-  `(^|[^=\\/\\w])(:${SHORTCODE_RE_FRAGMENT}:)(?=[^A-Za-z0-9_:]|$)`,
+  `([^A-Za-z0-9_:\\n]|^)(:${SHORTCODE_RE_FRAGMENT}:)(?=[^A-Za-z0-9_:]|$)`,
   'g',
 );
 
@@ -988,11 +988,7 @@ function Compose({
                 } else {
                   try {
                     newStatus = await masto.v1.statuses.create(params, {
-                      requestInit: {
+                      idempotencyKey: UID.current,
-                        headers: {
-                          'Idempotency-Key': UID.current,
-                        },
-                      },
                     });
                   } catch (_) {
                     // If idempotency key fails, try again without it
@@ -1219,30 +1215,22 @@ function Compose({
                 />
                 <Icon icon="attachment" />
               </label>{' '}
-              {/* If maxOptions is not defined or defined and is greater than 1, show poll button */}
+              <button
-              {maxOptions == null ||
+                type="button"
-                (maxOptions > 1 && (
+                class="toolbar-button"
-                  <>
+                disabled={
-                    <button
+                  uiState === 'loading' || !!poll || !!mediaAttachments.length
-                      type="button"
+                }
-                      class="toolbar-button"
+                onClick={() => {
-                      disabled={
+                  setPoll({
-                        uiState === 'loading' ||
+                    options: ['', ''],
-                        !!poll ||
+                    expiresIn: 24 * 60 * 60, // 1 day
-                        !!mediaAttachments.length
+                    multiple: false,
-                      }
+                  });
-                      onClick={() => {
+                }}
-                        setPoll({
+              >
-                          options: ['', ''],
+                <Icon icon="poll" alt="Add poll" />
-                          expiresIn: 24 * 60 * 60, // 1 day
+              </button>{' '}
-                          multiple: false,
-                        });
-                      }}
-                    >
-                      <Icon icon="poll" alt="Add poll" />
-                    </button>{' '}
-                  </>
-                ))}
               <button
                 type="button"
                 class="toolbar-button"
@@ -2382,10 +2370,6 @@ function GIFPickerModal({ onClose = () => {}, onSelect = () => {} }) {
     qRef.current?.focus();
   }, []);
 
-  const debouncedOnInput = useDebouncedCallback(() => {
-    fetchGIFs({ offset: 0 });
-  }, 1000);
-
   return (
     <div id="gif-picker-sheet" class="sheet">
       {!!onClose && (
@@ -2412,7 +2396,6 @@ function GIFPickerModal({ onClose = () => {}, onSelect = () => {} }) {
             autocapitalize="off"
             spellCheck="false"
             dir="auto"
-            onInput={debouncedOnInput}
           />
           <input
             type="image"

src/components/media-post.jsx

@@ -8,7 +8,6 @@ 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';
 
@@ -89,7 +88,7 @@ function MediaPost({
   };
 
   const currentAccount = useMemo(() => {
-    return getCurrentAccountID();
+    return store.session.get('currentAccount');
   }, []);
   const isSelf = useMemo(() => {
     return currentAccount && currentAccount === accountId;

src/components/media.jsx

@@ -341,15 +341,13 @@ function Media({
                   if (!hasDimensions) {
                     const $media = e.target.closest('.media');
                     if ($media) {
-                      const { naturalWidth, naturalHeight } = e.target;
                       $media.dataset.orientation =
-                        naturalWidth > naturalHeight ? 'landscape' : 'portrait';
+                        e.target.naturalWidth > e.target.naturalHeight
-                      $media.style.setProperty('--width', `${naturalWidth}px`);
+                          ? 'landscape'
-                      $media.style.setProperty(
+                          : 'portrait';
-                        '--height',
+                      $media.style['--width'] = `${e.target.naturalWidth}px`;
-                        `${naturalHeight}px`,
+                      $media.style['--height'] = `${e.target.naturalHeight}px`;
-                      );
+                      $media.style.aspectRatio = `${e.target.naturalWidth}/${e.target.naturalHeight}`;
-                      $media.style.aspectRatio = `${naturalWidth}/${naturalHeight}`;
                     }
                   }
                 }}
@@ -388,7 +386,7 @@ function Media({
       data-orientation="${orientation}"
       preload="auto"
       autoplay
-      ${isGIF ? 'muted' : ''}
+      muted="${isGIF}"
       ${isGIF ? '' : 'controls'}
       playsinline
       loop="${loopable}"
@@ -513,25 +511,19 @@ 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
+                          e.target.naturalWidth > e.target.naturalHeight
                             ? 'landscape'
                             : 'portrait';
-                        $media.style.setProperty(
+                        $media.style['--width'] = `${e.target.naturalWidth}px`;
-                          '--width',
+                        $media.style[
-                          `${naturalWidth}px`,
+                          '--height'
-                        );
+                        ] = `${e.target.naturalHeight}px`;
-                        $media.style.setProperty(
+                        $media.style.aspectRatio = `${e.target.naturalWidth}/${e.target.naturalHeight}`;
-                          '--height',
-                          `${naturalHeight}px`,
-                        );
-                        $media.style.aspectRatio = `${naturalWidth}/${naturalHeight}`;
                       }
                     }
                   }}

src/components/nav-menu.jsx

@@ -11,8 +11,6 @@ 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';
@@ -26,8 +24,9 @@ function NavMenu(props) {
   const [currentAccount, moreThanOneAccount] = useMemo(() => {
     const accounts = store.local.getJSON('accounts') || [];
     const acc =
-      accounts.find((account) => account.info.id === getCurrentAccountID()) ||
+      accounts.find(
-      accounts[0];
+        (account) => account.info.id === store.session.get('currentAccount'),
+      ) || accounts[0];
     return [acc, accounts.length > 1];
   }, []);
 
@@ -84,10 +83,8 @@ function NavMenu(props) {
     return results;
   }
 
-  const supportsLists = supports('@mastodon/lists');
   const [lists, setLists] = useState([]);
   useEffect(() => {
-    if (!supportsLists) return;
     if (menuState === 'open') {
       getLists().then(setLists);
     }
@@ -189,11 +186,9 @@ function NavMenu(props) {
                 <Icon icon="history2" size="l" />
                 <span>Catch-up</span>
               </MenuLink>
-              {supports('@mastodon/mentions') && (
+              <MenuLink to="/mentions">
-                <MenuLink to="/mentions">
+                <Icon icon="at" size="l" /> <span>Mentions</span>
-                  <Icon icon="at" size="l" /> <span>Mentions</span>
+              </MenuLink>
-                </MenuLink>
-              )}
               <MenuLink to="/notifications">
                 <Icon icon="notification" size="l" /> <span>Notifications</span>
                 {snapStates.notificationsShowNew && (
@@ -237,12 +232,10 @@ function NavMenu(props) {
                   )}
                 </SubMenu2>
               ) : (
-                supportsLists && (
+                <MenuLink to="/l">
-                  <MenuLink to="/l">
+                  <Icon icon="list" size="l" />
-                    <Icon icon="list" size="l" />
+                  <span>Lists</span>
-                    <span>Lists</span>
+                </MenuLink>
-                  </MenuLink>
-                )
               )}
               <MenuLink to="/b">
                 <Icon icon="bookmark" size="l" /> <span>Bookmarks</span>
@@ -267,12 +260,10 @@ function NavMenu(props) {
                   <span>Followed Hashtags</span>
                 </MenuLink>
                 <MenuDivider />
-                {supports('@mastodon/filters') && (
+                <MenuLink to="/ft">
-                  <MenuLink to="/ft">
+                  <Icon icon="filters" size="l" />
-                    <Icon icon="filters" size="l" />
+                  Filters
-                    Filters
+                </MenuLink>
-                  </MenuLink>
-                )}
                 <MenuItem
                   onClick={() => {
                     states.showGenericAccounts = {

src/components/notification.jsx

@@ -4,7 +4,6 @@ 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';
@@ -133,7 +132,7 @@ function Notification({
   const actualStatus = status?.reblog || status;
   const actualStatusID = actualStatus?.id;
 
-  const currentAccount = getCurrentAccountID();
+  const currentAccount = store.session.get('currentAccount');
   const isSelf = currentAccount === account?.id;
   const isVoted = status?.poll?.voted;
   const isReplyToOthers =

src/components/relative-time.jsx

@@ -21,7 +21,6 @@ export default function RelativeTime({ datetime, format }) {
   const [renderCount, rerender] = useReducer((x) => x + 1, 0);
   const date = useMemo(() => dayjs(datetime), [datetime]);
   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
@@ -38,7 +37,6 @@ export default function RelativeTime({ datetime, format }) {
   }, [date, format, renderCount]);
 
   useEffect(() => {
-    if (!date.isValid()) return;
     let timeout;
     let raf;
     function rafRerender() {

src/components/shortcuts-settings.jsx

@@ -19,7 +19,6 @@ 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';
@@ -788,7 +787,7 @@ function ImportExport({ shortcuts, onClose }) {
                 disabled={importUIState === 'cloud-downloading'}
                 onClick={async () => {
                   setImportUIState('cloud-downloading');
-                  const currentAccount = getCurrentAccountID();
+                  const currentAccount = store.session.get('currentAccount');
                   showToast(
                     'Downloading saved shortcuts from instance server…',
                   );
@@ -1044,7 +1043,7 @@ function ImportExport({ shortcuts, onClose }) {
                 disabled={importUIState === 'cloud-uploading'}
                 onClick={async () => {
                   setImportUIState('cloud-uploading');
-                  const currentAccount = getCurrentAccountID();
+                  const currentAccount = store.session.get('currentAccount');
                   try {
                     const relationships =
                       await masto.v1.accounts.relationships.fetch({

src/components/status.css

@@ -47,7 +47,7 @@
 }
 .visibility-direct {
   --yellow-stripes: repeating-linear-gradient(
-    135deg,
+    -45deg,
     var(--reply-to-faded-color),
     var(--reply-to-faded-color) 10px,
     var(--reply-to-faded-color) 10px,
@@ -365,10 +365,6 @@
     background-image: var(--yellow-stripes);
   }
 
-  .status-pre-meta + & {
-    background-image: none;
-  }
-
   > * {
     opacity: 0.65;
     transition: opacity 1s ease-out;
@@ -1324,22 +1320,11 @@ body:has(#modal-container .carousel) .status .media img:hover {
 }
 
 .status.skeleton .media-first-container {
-  min-height: 320px;
+  min-height: 3em;
   background-color: var(--outline-color);
 }
 
-@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;
@@ -1371,20 +1356,76 @@ body:has(#modal-container .carousel) .status .media img:hover {
   .media-first-spoiler-button {
     display: inline-flex !important;
   }
-
   .media-first-container {
-    position: relative;
     margin-top: 8px;
+    display: flex;
+    max-height: 80vh;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-snap-type: x mandatory;
+    scroll-behavior: smooth;
+    user-select: none;
     margin-inline: -16px;
+    position: relative;
+    scrollbar-width: none;
+    /* border: var(--hairline-width) solid var(--outline-color);
+    border-inline-width: 0;
+    background-color: var(--bg-faded-color); */
 
     @media (min-width: 40em) {
       margin-inline: 0;
+      /* border-radius: 4px; */
+      border-inline-width: var(--hairline-width);
+    }
+
+    &::-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);
+        max-width: 100%;
+        max-height: 100%;
+        min-height: var(--min-dimension);
+        /* max-height: min(var(--height), 80vh); */
+
+        &:active {
+          transform: none;
+        }
+
+        img,
+        video {
+          object-fit: scale-down;
+          animation: none;
+
+          &:not([data-loaded='true']) {
+            background-color: var(--bg-color);
+          }
+        }
+      }
     }
 
     .media-carousel-controls {
       flex-shrink: 0;
-      position: absolute;
+      width: 100%;
-      inset: 0;
+      position: sticky;
+      right: 0;
+      left: 0;
       pointer-events: none;
       display: flex;
       justify-content: space-between;
@@ -1402,7 +1443,7 @@ body:has(#modal-container .carousel) .status .media img:hover {
       font-size: 0.8em;
       font-variant-numeric: tabular-nums;
       opacity: 0.6;
-      transition: opacity 1s ease-in-out 0.3s;
+      transition: opacity 1.5s ease-in-out;
       border: var(--hairline-width) solid var(--media-outline-color);
     }
 
@@ -1436,76 +1477,6 @@ body:has(#modal-container .carousel) .status .media img:hover {
       }
     }
   }
-
-  .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;
   }
@@ -1518,11 +1489,6 @@ body:has(#modal-container .carousel) .status .media img:hover {
     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;
@@ -1531,7 +1497,6 @@ body:has(#modal-container .carousel) .status .media img:hover {
       background-color: var(--text-color);
       transition: all 0.3s ease-in-out;
       opacity: 0.3;
-      flex-shrink: 0;
 
       &.active {
         opacity: 1;

src/components/status.jsx

@@ -11,7 +11,6 @@ import {
 import { decodeBlurHash, getBlurHashAverageColor } from 'fast-blurhash';
 import { shallowEqual } from 'fast-equals';
 import prettify from 'html-prettify';
-import { Fragment } from 'preact';
 import { memo } from 'preact/compat';
 import {
   useCallback,
@@ -56,8 +55,6 @@ 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';
@@ -151,12 +148,6 @@ const PostContent = memo(
   },
 );
 
-const SIZE_CLASS = {
-  s: 'small',
-  m: 'medium',
-  l: 'large',
-};
-
 function Status({
   statusID,
   status,
@@ -182,11 +173,7 @@ function Status({
 }) {
   if (skeleton) {
     return (
-      <div
+      <div class={`status skeleton ${mediaFirst ? 'status-media-first' : ''}`}>
-        class={`status skeleton ${
-          mediaFirst ? 'status-media-first small' : ''
-        }`}
-      >
         {!mediaFirst && <Avatar size="xxl" />}
         <div class="container">
           <div class="meta">
@@ -269,7 +256,7 @@ function Status({
   if (mediaFirst && hasMediaAttachments) size = 's';
 
   const currentAccount = useMemo(() => {
-    return getCurrentAccountID();
+    return store.session.get('currentAccount');
   }, []);
   const isSelf = useMemo(() => {
     return currentAccount && currentAccount === accountId;
@@ -407,8 +394,8 @@ function Status({
   }
 
   // Check followedTags
-  const FollowedTagsParent = useCallback(
+  if (showFollowedTags && !!snapStates.statusFollowedTags[sKey]?.length) {
-    ({ children }) => (
+    return (
       <div
         data-state-post-id={sKey}
         class="status-followed-tags"
@@ -426,15 +413,19 @@ function Status({
             </Link>
           ))}
         </div>
-        {children}
+        <Status
+          status={statusID ? null : status}
+          statusID={statusID ? status.id : null}
+          instance={instance}
+          size={size}
+          contentTextWeight={contentTextWeight}
+          readOnly={readOnly}
+          enableCommentHint
+          mediaFirst={mediaFirst}
+        />
       </div>
-    ),
+    );
-    [sKey, instance, snapStates.statusFollowedTags[sKey]],
+  }
-  );
-  const StatusParent =
-    showFollowedTags && !!snapStates.statusFollowedTags[sKey]?.length
-      ? FollowedTagsParent
-      : Fragment;
 
   const isSizeLarge = size === 'l';
 
@@ -648,7 +639,6 @@ function Status({
   };
 
   const bookmarkStatus = async () => {
-    if (!supports('@mastodon/post-bookmark')) return;
     if (!sameInstance || !authenticated) {
       alert(unauthInteractionErrorMessage);
       return false;
@@ -836,15 +826,13 @@ function Status({
                   : 'Like'}
               </span>
             </MenuItem>
-            {supports('@mastodon/post-bookmark') && (
+            <MenuItem
-              <MenuItem
+              onClick={bookmarkStatusNotify}
-                onClick={bookmarkStatusNotify}
+              className={`menu-bookmark ${bookmarked ? 'checked' : ''}`}
-                className={`menu-bookmark ${bookmarked ? 'checked' : ''}`}
+            >
-              >
+              <Icon icon="bookmark" />
-                <Icon icon="bookmark" />
+              <span>{bookmarked ? 'Unbookmark' : 'Bookmark'}</span>
-                <span>{bookmarked ? 'Unbookmark' : 'Bookmark'}</span>
+            </MenuItem>
-              </MenuItem>
-            )}
           </div>
         </>
       )}
@@ -1088,18 +1076,16 @@ function Status({
       )}
       {isSelf && (
         <div class="menu-horizontal">
-          {supports('@mastodon/post-edit') && (
+          <MenuItem
-            <MenuItem
+            onClick={() => {
-              onClick={() => {
+              states.showCompose = {
-                states.showCompose = {
+                editStatus: status,
-                  editStatus: status,
+              };
-                };
+            }}
-              }}
+          >
-            >
+            <Icon icon="pencil" />
-              <Icon icon="pencil" />
+            <span>Edit</span>
-              <span>Edit</span>
+          </MenuItem>
-            </MenuItem>
-          )}
           {isSizeLarge && (
             <MenuConfirm
               subMenu
@@ -1380,7 +1366,7 @@ function Status({
   ]);
 
   return (
-    <StatusParent>
+    <>
       {showReplyParent && !!(inReplyToId && inReplyToAccountId) && (
         <StatusCompact sKey={sKey} />
       )}
@@ -1408,7 +1394,11 @@ function Status({
             ? 'status-reply-to'
             : ''
         } visibility-${visibility} ${_pinned ? 'status-pinned' : ''} ${
-          SIZE_CLASS[size]
+          {
+            s: 'small',
+            m: 'medium',
+            l: 'large',
+          }[size]
         } ${_deleted ? 'status-deleted' : ''} ${quoted ? 'status-card' : ''} ${
           isContextMenuOpen ? 'status-menu-open' : ''
         } ${mediaFirst && hasMediaAttachments ? 'status-media-first' : ''}`}
@@ -2169,18 +2159,16 @@ function Status({
                     onClick={favouriteStatus}
                   />
                 </div>
-                {supports('@mastodon/post-bookmark') && (
+                <div class="action">
-                  <div class="action">
+                  <StatusButton
-                    <StatusButton
+                    checked={bookmarked}
-                      checked={bookmarked}
+                    title={['Bookmark', 'Unbookmark']}
-                      title={['Bookmark', 'Unbookmark']}
+                    alt={['Bookmark', 'Bookmarked']}
-                      alt={['Bookmark', 'Bookmarked']}
+                    class="bookmark-button"
-                      class="bookmark-button"
+                    icon="bookmark"
-                      icon="bookmark"
+                    onClick={bookmarkStatus}
-                      onClick={bookmarkStatus}
+                  />
-                    />
+                </div>
-                  </div>
-                )}
                 <Menu2
                   portal={{
                     target:
@@ -2248,7 +2236,7 @@ function Status({
           </Modal>
         )}
       </article>
-    </StatusParent>
+    </>
   );
 }
 
@@ -2292,18 +2280,16 @@ function MediaFirstContainer(props) {
 
   return (
     <>
-      <div class="media-first-container">
+      <div class="media-first-container" ref={carouselRef}>
-        <div class="media-first-carousel" ref={carouselRef}>
+        {mediaAttachments.map((media, i) => (
-          {mediaAttachments.map((media, i) => (
+          <div class="media-first-item" key={media.id}>
-            <div class="media-first-item" key={media.id}>
+            <Media
-              <Media
+              media={media}
-                media={media}
+              lang={language}
-                lang={language}
+              to={`/${instance}/s/${postID}?media-only=${i + 1}`}
-                to={`/${instance}/s/${postID}?media=${i + 1}`}
+            />
-              />
+          </div>
-            </div>
+        ))}
-          ))}
-        </div>
         {moreThanOne && (
           <div class="media-carousel-controls">
             <div class="carousel-indexer">
@@ -2349,12 +2335,7 @@ function MediaFirstContainer(props) {
         )}
       </div>
       {moreThanOne && (
-        <div
+        <div class="media-carousel-dots">
-          class="media-carousel-dots"
-          style={{
-            '--dots-count': mediaAttachments.length,
-          }}
-        >
           {mediaAttachments.map((media, i) => (
             <span
               key={media.id}

src/pages/account-statuses.jsx

@@ -21,7 +21,6 @@ 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;
@@ -69,8 +68,6 @@ function AccountStatuses() {
     searchOffsetRef.current = 0;
   }, allSearchParams);
 
-  const mediaFirst = useMemo(() => isMediaFirstInstance(), []);
-
   const sameCurrentInstance = useMemo(
     () => instance === currentInstance,
     [instance, currentInstance],
@@ -189,7 +186,7 @@ function AccountStatuses() {
           limit: LIMIT,
           exclude_replies: excludeReplies,
           exclude_reblogs: excludeBoosts,
-          only_media: media || undefined,
+          only_media: media,
           tagged,
         });
     }
@@ -273,21 +270,17 @@ function AccountStatuses() {
       } catch (e) {
         console.error(e);
       }
-      // No need, because the whole filter bar is hidden
+      try {
-      // TODO: Revisit this
+        const featuredTags = await masto.v1.accounts
-      if (!mediaFirst) {
+          .$select(id)
-        try {
+          .featuredTags.list();
-          const featuredTags = await masto.v1.accounts
+        console.log({ featuredTags });
-            .$select(id)
+        setFeaturedTags(featuredTags);
-            .featuredTags.list();
+      } catch (e) {
-          console.log({ featuredTags });
+        console.error(e);
-          setFeaturedTags(featuredTags);
-        } catch (e) {
-          console.error(e);
-        }
       }
     })();
-  }, [id, mediaFirst]);
+  }, [id]);
 
   const { displayName, acct, emojis } = account || {};
 
@@ -306,126 +299,95 @@ function AccountStatuses() {
           authenticated={authenticated}
           standalone
         />
-        {!mediaFirst && (
+        <div
-          <div
+          class="filter-bar"
-            class="filter-bar"
+          ref={filterBarRef}
-            ref={filterBarRef}
+          style={{
-            style={{
+            position: 'relative',
-              position: 'relative',
+          }}
+        >
+          {filtered ? (
+            <Link
+              to={`/${instance}/a/${id}`}
+              class="insignificant filter-clear"
+              title="Clear filters"
+              key="clear-filters"
+            >
+              <Icon icon="x" size="l" />
+            </Link>
+          ) : (
+            <Icon icon="filter" class="insignificant" size="l" />
+          )}
+          <Link
+            to={`/${instance}/a/${id}${excludeReplies ? '?replies=1' : ''}`}
+            onClick={() => {
+              if (excludeReplies) {
+                showToast('Showing post with replies');
+              }
             }}
+            class={excludeReplies ? '' : 'is-active'}
           >
-            {filtered ? (
+            + Replies
-              <Link
+          </Link>
-                to={`/${instance}/a/${id}`}
+          <Link
-                class="insignificant filter-clear"
+            to={`/${instance}/a/${id}${excludeBoosts ? '' : '?boosts=0'}`}
-                title="Clear filters"
+            onClick={() => {
-                key="clear-filters"
+              if (!excludeBoosts) {
-              >
+                showToast('Showing posts without boosts');
-                <Icon icon="x" size="l" />
+              }
-              </Link>
+            }}
-            ) : (
+            class={!excludeBoosts ? '' : 'is-active'}
-              <Icon icon="filter" class="insignificant" size="l" />
+          >
-            )}
+            - Boosts
+          </Link>
+          <Link
+            to={`/${instance}/a/${id}${media ? '' : '?media=1'}`}
+            onClick={() => {
+              if (!media) {
+                showToast('Showing posts with media');
+              }
+            }}
+            class={media ? 'is-active' : ''}
+          >
+            Media
+          </Link>
+          {featuredTags.map((tag) => (
             <Link
-              to={`/${instance}/a/${id}${excludeReplies ? '?replies=1' : ''}`}
+              key={tag.id}
+              to={`/${instance}/a/${id}${
+                tagged === tag.name
+                  ? ''
+                  : `?tagged=${encodeURIComponent(tag.name)}`
+              }`}
               onClick={() => {
-                if (excludeReplies) {
+                if (tagged !== tag.name) {
-                  showToast('Showing post with replies');
+                  showToast(`Showing posts tagged with #${tag.name}`);
                 }
               }}
-              class={excludeReplies ? '' : 'is-active'}
+              class={tagged === tag.name ? 'is-active' : ''}
             >
-              + Replies
+              <span>
+                <span class="more-insignificant">#</span>
+                {tag.name}
+              </span>
+              {
+                // The count differs based on instance 😅
+              }
+              {/* <span class="filter-count">{tag.statusesCount}</span> */}
             </Link>
-            <Link
+          ))}
-              to={`/${instance}/a/${id}${excludeBoosts ? '' : '?boosts=0'}`}
+          {searchEnabled &&
-              onClick={() => {
+            (supportsInputMonth ? (
-                if (!excludeBoosts) {
+              <label class={`filter-field ${month ? 'is-active' : ''}`}>
-                  showToast('Showing posts without boosts');
+                <Icon icon="month" size="l" />
-                }
+                <input
-              }}
+                  type="month"
-              class={!excludeBoosts ? '' : 'is-active'}
-            >
-              - Boosts
-            </Link>
-            <Link
-              to={`/${instance}/a/${id}${media ? '' : '?media=1'}`}
-              onClick={() => {
-                if (!media) {
-                  showToast('Showing posts with media');
-                }
-              }}
-              class={media ? 'is-active' : ''}
-            >
-              Media
-            </Link>
-            {featuredTags.map((tag) => (
-              <Link
-                key={tag.id}
-                to={`/${instance}/a/${id}${
-                  tagged === tag.name
-                    ? ''
-                    : `?tagged=${encodeURIComponent(tag.name)}`
-                }`}
-                onClick={() => {
-                  if (tagged !== tag.name) {
-                    showToast(`Showing posts tagged with #${tag.name}`);
-                  }
-                }}
-                class={tagged === tag.name ? 'is-active' : ''}
-              >
-                <span>
-                  <span class="more-insignificant">#</span>
-                  {tag.name}
-                </span>
-                {
-                  // The count differs based on instance 😅
-                }
-                {/* <span class="filter-count">{tag.statusesCount}</span> */}
-              </Link>
-            ))}
-            {searchEnabled &&
-              (supportsInputMonth ? (
-                <label class={`filter-field ${month ? 'is-active' : ''}`}>
-                  <Icon icon="month" size="l" />
-                  <input
-                    type="month"
-                    disabled={!account?.acct}
-                    value={month || ''}
-                    min={MIN_YEAR_MONTH}
-                    max={new Date().toISOString().slice(0, 7)}
-                    onInput={(e) => {
-                      const { value, validity } = e.currentTarget;
-                      if (!validity.valid) return;
-                      setSearchParams(
-                        value
-                          ? {
-                              month: value,
-                            }
-                          : {},
-                      );
-                      const [year, month] = value.split('-');
-                      const monthIndex = parseInt(month, 10) - 1;
-                      const date = new Date(year, monthIndex);
-                      showToast(
-                        `Showing posts in ${date.toLocaleString('default', {
-                          month: 'long',
-                          year: 'numeric',
-                        })}`,
-                      );
-                    }}
-                  />
-                </label>
-              ) : (
-                // Fallback to <select> for month and <input type="number"> for year
-                <MonthPicker
-                  class={`filter-field ${month ? 'is-active' : ''}`}
                   disabled={!account?.acct}
                   value={month || ''}
                   min={MIN_YEAR_MONTH}
                   max={new Date().toISOString().slice(0, 7)}
                   onInput={(e) => {
-                    const { value, validity } = e;
+                    const { value, validity } = e.currentTarget;
                     if (!validity.valid) return;
                     setSearchParams(
                       value
@@ -434,11 +396,40 @@ function AccountStatuses() {
                           }
                         : {},
                     );
+                    const [year, month] = value.split('-');
+                    const monthIndex = parseInt(month, 10) - 1;
+                    const date = new Date(year, monthIndex);
+                    showToast(
+                      `Showing posts in ${date.toLocaleString('default', {
+                        month: 'long',
+                        year: 'numeric',
+                      })}`,
+                    );
                   }}
                 />
-              ))}
+              </label>
-          </div>
+            ) : (
-        )}
+              // Fallback to <select> for month and <input type="number"> for year
+              <MonthPicker
+                class={`filter-field ${month ? 'is-active' : ''}`}
+                disabled={!account?.acct}
+                value={month || ''}
+                min={MIN_YEAR_MONTH}
+                max={new Date().toISOString().slice(0, 7)}
+                onInput={(e) => {
+                  const { value, validity } = e;
+                  if (!validity.valid) return;
+                  setSearchParams(
+                    value
+                      ? {
+                          month: value,
+                        }
+                      : {},
+                  );
+                }}
+              />
+            ))}
+        </div>
       </>
     );
   }, [
@@ -501,7 +492,7 @@ function AccountStatuses() {
       errorText="Unable to load posts"
       fetchItems={fetchAccountStatuses}
       useItemID
-      view={media || mediaFirst ? 'media' : undefined}
+      view={media ? 'media' : undefined}
       boostsCarousel={snapStates.settings.boostsCarousel}
       timelineStart={TimelineStart}
       refresh={[

src/pages/accounts.jsx

@@ -13,13 +13,12 @@ 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 = getCurrentAccountID();
+  const currentAccount = store.session.get('currentAccount');
   const moreThanOneAccount = accounts.length > 1;
 
   const [_, reload] = useReducer((x) => x + 1, 0);
@@ -82,7 +81,7 @@ function Accounts({ onClose }) {
                         if (isCurrent) {
                           states.showAccount = `${account.info.username}@${account.instanceURL}`;
                         } else {
-                          setCurrentAccountID(account.info.id);
+                          store.session.set('currentAccount', account.info.id);
                           location.reload();
                         }
                       }}

src/pages/catchup.css

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

src/pages/catchup.jsx

@@ -40,7 +40,7 @@ import showToast from '../utils/show-toast';
 import states, { statusKey } from '../utils/states';
 import statusPeek from '../utils/status-peek';
 import store from '../utils/store';
-import { getCurrentAccountID, getCurrentAccountNS } from '../utils/store-utils';
+import { getCurrentAccountNS } from '../utils/store-utils';
 import { assignFollowedTags } from '../utils/timeline-utils';
 import useTitle from '../utils/useTitle';
 
@@ -112,7 +112,7 @@ function Catchup() {
   const [showTopLinks, setShowTopLinks] = useState(false);
 
   const currentAccount = useMemo(() => {
-    return getCurrentAccountID();
+    return store.session.get('currentAccount');
   }, []);
   const isSelf = (accountID) => accountID === currentAccount;
 

src/pages/hashtag.jsx

@@ -5,7 +5,7 @@ import {
   MenuHeader,
   MenuItem,
 } from '@szhsin/react-menu';
-import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
+import { useEffect, useRef, useState } from 'preact/hooks';
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 
 import Icon from '../components/icon';
@@ -18,7 +18,6 @@ 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;
@@ -56,8 +55,6 @@ 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) {
@@ -76,7 +73,7 @@ function Hashtags({ media: mediaView, columnMode, ...props }) {
         limit: LIMIT,
         any: hashtags.slice(1),
         maxId: firstLoad ? undefined : maxID.current,
-        onlyMedia: media ? true : undefined,
+        onlyMedia: media,
       })
       .next();
     let { value } = results;
@@ -88,7 +85,7 @@ function Hashtags({ media: mediaView, columnMode, ...props }) {
       // value = filteredItems(value, 'public');
       value.forEach((item) => {
         saveStatus(item, instance, {
-          skipThreading: media || mediaFirst, // If media view, no need to form threads
+          skipThreading: media, // If media view, no need to form threads
         });
       });
 
@@ -159,7 +156,7 @@ function Hashtags({ media: mediaView, columnMode, ...props }) {
       fetchItems={fetchHashtags}
       checkForUpdates={checkForUpdates}
       useItemID
-      view={media || mediaFirst ? 'media' : undefined}
+      view={media ? 'media' : undefined}
       refresh={media}
       // allowFilters
       filterContext="public"
@@ -236,27 +233,23 @@ function Hashtags({ media: mediaView, columnMode, ...props }) {
               <MenuDivider />
             </>
           )}
-          {!mediaFirst && (
+          <MenuHeader className="plain">Filters</MenuHeader>
-            <>
+          <MenuItem
-              <MenuHeader className="plain">Filters</MenuHeader>
+            type="checkbox"
-              <MenuItem
+            checked={!!media}
-                type="checkbox"
+            onClick={() => {
-                checked={!!media}
+              if (media) {
-                onClick={() => {
+                searchParams.delete('media');
-                  if (media) {
+              } else {
-                    searchParams.delete('media');
+                searchParams.set('media', '1');
-                  } else {
+              }
-                    searchParams.set('media', '1');
+              setSearchParams(searchParams);
-                  }
+            }}
-                  setSearchParams(searchParams);
+          >
-                }}
+            <Icon icon="check-circle" />{' '}
-              >
+            <span class="menu-grow">Media only</span>
-                <Icon icon="check-circle" />{' '}
+          </MenuItem>
-                <span class="menu-grow">Media only</span>
+          <MenuDivider />
-              </MenuItem>
-              <MenuDivider />
-            </>
-          )}
           <FocusableItem className="menu-field" disabled={reachLimit}>
             {({ ref }) => (
               <form

src/pages/mentions.jsx

@@ -4,7 +4,6 @@ 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';
 
@@ -31,8 +30,6 @@ 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);

src/pages/notifications.jsx

@@ -72,13 +72,6 @@ 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;
 
@@ -89,21 +82,6 @@ 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,
-      //   },
-      // });
-
-      // console.log({ notifications });
-
       const groupedNotifications = groupNotifications(notifications);
 
       if (firstLoad) {

src/pages/public.jsx

@@ -33,7 +33,6 @@ function Public({ local, columnMode, ...props }) {
       publicIterator.current = masto.v1.timelines.public.list({
         limit: LIMIT,
         local: isLocal,
-        remote: !isLocal, // Pixelfed
       });
     }
     const results = await publicIterator.current.next();

src/pages/trending.jsx

@@ -19,7 +19,6 @@ 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;
@@ -34,17 +33,6 @@ 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();
@@ -60,39 +48,36 @@ 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 = fetchTrends(masto);
+      trendIterator.current = masto.v1.trends.statuses.list({
+        limit: LIMIT,
+      });
 
       // Get hashtags
-      if (supports('@mastodon/trending-hashtags')) {
+      try {
-        try {
+        const iterator = masto.v1.trends.tags.list();
-          const iterator = masto.v1.trends.tags.list();
+        const { value: tags } = await iterator.next();
-          const { value: tags } = await iterator.next();
+        console.log('tags', tags);
-          console.log('tags', tags);
+        if (tags?.length) {
-          if (tags?.length) {
+          setHashtags(tags);
-            setHashtags(tags);
-          }
-        } catch (e) {
-          console.error(e);
         }
+      } catch (e) {
+        console.error(e);
       }
 
       // Get links
-      if (supports('@mastodon/trending-links')) {
+      try {
-        try {
+        const { value } = await fetchLinks(masto, instance);
-          const { value } = await fetchLinks(masto, instance);
+        // 4 types available: link, photo, video, rich
-          // 4 types available: link, photo, video, rich
+        // Only want links for now
-          // Only want links for now
+        const links = value?.filter?.((link) => link.type === 'link');
-          const links = value?.filter?.((link) => link.type === 'link');
+        console.log('links', links);
-          console.log('links', links);
+        if (links?.length) {
-          if (links?.length) {
+          setLinks(links);
-            setLinks(links);
-          }
-        } catch (e) {
-          console.error(e);
         }
+      } catch (e) {
+        console.error(e);
       }
     }
     const results = await trendIterator.current.next();

src/utils/api.js

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

src/utils/filters.jsx

@@ -1,5 +1,5 @@
 import mem from './mem';
-import { getCurrentAccountID } from './store-utils';
+import store from './store';
 
 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 = getCurrentAccountID();
+  const currentAccountID = store.session.get('currentAccount');
   return items.filter((item) =>
     filteredItem(item, filterContext, currentAccountID),
   );

src/utils/group-notifications.jsx

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

src/utils/relationships.js

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

src/utils/store-utils.js

@@ -16,40 +16,13 @@ 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 = getCurrentAccountID();
+  const currentAccount = store.session.get('currentAccount');
   const account = getAccount(currentAccount);
   return account;
 }
@@ -75,7 +48,7 @@ export function saveAccount(account) {
     accounts.push(account);
   }
   store.local.setJSON('accounts', accounts);
-  setCurrentAccountID(account.info.id);
+  store.session.set('currentAccount', account.info.id);
 }
 
 export function updateAccount(accountInfo) {
@@ -107,10 +80,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');
+    store.local.del('instances');
-    // location.reload();
+    location.reload();
     return {};
   }
 }

src/utils/supports.js

@@ -4,21 +4,6 @@ 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,
-};
 const supportsCache = {};
 
 function supports(feature) {
@@ -26,11 +11,6 @@ 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, {