Merge remote-tracking branch 'origin/main'

Merge pull request #392 from JerryLerman/main
Update README.md to add hear-me.social
2024-01-09 11:33:30 +07:00 · 2024-01-08 13:43:55 +08:00 · 2024-01-07 21:53:54 -05:00 · 2024-01-07 12:30:51 +08:00 · 2024-01-06 19:15:48 +08:00 · 2024-01-06 16:46:45 +08:00
32 changed files with 1057 additions and 406 deletions
--- a/README.md
+++ b/README.md
@ -199,6 +199,7 @@ These are self-hosted by other wonderful folks.
 - [phanpy.vmst.io](https://phanpy.vmst.io/) by [@vmstan@vmst.io](https://vmst.io/@vmstan)
 - [phanpy.gotosocial.social](https://phanpy.gotosocial.social/) by [@admin@gotosocial.social](https://gotosocial.social/@admin)
 - [phanpy.bauxite.tech](https://phanpy.bauxite.tech) by [@b4ux1t3@hachyderm.io](https://hachyderm.io/@b4ux1t3)
+- [phanpy.hear-me.social](https://phanpy.hear-me.social) by [@admin@hear-me.social](https://hear-me.social/@admin)

 > Note: Add yours by creating a pull request.

--- a/index.html
+++ b/index.html
@ -31,14 +31,16 @@
      name="theme-color"
      data-theme-setting="auto"
      content="#fff"
-      data-content-temp="#ffff"
+      data-content="#fff"
+      data-content-temp="#fffa"
      media="(prefers-color-scheme: light)"
    />
    <meta
      name="theme-color"
      data-theme-setting="auto"
      content="#242526"
-      data-content-temp="#242526ff"
+      data-content="#242526"
+      data-content-temp="#242526aa"
      media="(prefers-color-scheme: dark)"
    />
    <meta name="google" content="notranslate" />
--- a/package-lock.json
+++ b/package-lock.json
@ -19,7 +19,7 @@
        "dayjs": "~1.11.10",
        "dayjs-twitter": "~0.5.0",
        "fast-blurhash": "~1.1.2",
-        "fast-deep-equal": "~3.1.3",
+        "fast-equals": "~5.0.1",
        "idb-keyval": "~6.2.1",
        "just-debounce-it": "~3.2.0",
        "lz-string": "~1.5.0",
@ -4405,13 +4405,16 @@
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true,
      "license": "MIT"
    },
    "node_modules/fast-equals": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-3.0.3.tgz",
-      "integrity": "sha512-NCe8qxnZFARSHGztGMZOO/PC1qa5MIFB5Hp66WdzbCRAz8U8US3bx1UTgLS49efBQPcUtO9gf5oVEY8o7y/7Kg==",
-      "license": "MIT"
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-5.0.1.tgz",
+      "integrity": "sha512-WF1Wi8PwwSY7/6Kx0vKXtw8RwuSGoM1bvDaJbu7MxDlR1vovZjIAKrnzyrThgAjm6JDTu0fVgWXDlMGspodfoQ==",
+      "engines": {
+        "node": ">=6.0.0"
+      }
    },
    "node_modules/fast-glob": {
      "version": "3.3.2",
@ -5570,6 +5573,11 @@
        "micro-memoize": "^4.1.2"
      }
    },
+    "node_modules/moize/node_modules/fast-equals": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-3.0.3.tgz",
+      "integrity": "sha512-NCe8qxnZFARSHGztGMZOO/PC1qa5MIFB5Hp66WdzbCRAz8U8US3bx1UTgLS49efBQPcUtO9gf5oVEY8o7y/7Kg=="
+    },
    "node_modules/ms": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
--- a/package.json
+++ b/package.json
@ -21,7 +21,7 @@
    "dayjs": "~1.11.10",
    "dayjs-twitter": "~0.5.0",
    "fast-blurhash": "~1.1.2",
-    "fast-deep-equal": "~3.1.3",
+    "fast-equals": "~5.0.1",
    "idb-keyval": "~6.2.1",
    "just-debounce-it": "~3.2.0",
    "lz-string": "~1.5.0",
--- a/src/app.css
+++ b/src/app.css
@ -86,7 +86,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
  inset: 0;
 }
 :is(#home-page, #welcome, #columns, #loader-root):has(~ .deck-container) {
-  display: block;
+  /* display: block; */
  position: absolute;
  user-select: none;
  pointer-events: none;
@ -144,9 +144,10 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
  user-select: none;
 }
 .deck > header .header-grid {
-  background-color: var(--bg-blur-color);
+  background-color: var(--bg-color);
+  /* background-color: var(--bg-blur-color);
  background-image: linear-gradient(to bottom, var(--bg-color), transparent);
-  backdrop-filter: saturate(180%) blur(20px);
+  backdrop-filter: saturate(180%) blur(20px); */
  border-bottom: var(--hairline-width) solid var(--divider-color);
  min-height: 3em;
  display: grid;
@ -546,9 +547,10 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
  list-style: none;
 }
 .timeline.contextual > li .replies > .replies-summary {
-  padding: 8px;
+  --summary-padding: 8px;
+  padding: var(--summary-padding);
  background-color: var(--bg-faded-color);
-  display: inline-block;
+  display: inline-flex;
  border-radius: 8px;
  cursor: pointer;
  text-transform: uppercase;
@ -558,12 +560,67 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
  box-shadow: 0 0 0 2px var(--bg-color);
  position: relative;
  list-style: none;
-  white-space: nowrap;
+  gap: 8px;
+  align-items: center;
+  margin-right: calc(44px + 8px);

  b {
    font-weight: 500;
    color: var(--text-color);
  }
+
+  .avatars {
+    flex-shrink: 0;
+    transition: opacity 0.3s ease;
+
+    .avatar {
+      transition: transform 0.3s ease;
+
+      &:not(:first-child) {
+        margin: 0 0 0 -4px;
+      }
+    }
+  }
+
+  .replies-counts {
+    /* flex-grow: 1; */
+
+    > * {
+      display: inline-block;
+    }
+  }
+
+  .replies-summary-chevron {
+    transition: transform 0.3s ease;
+  }
+
+  .replies-parent-link {
+    position: absolute;
+    right: 4px;
+    height: 100%;
+    z-index: 2;
+    font-size: 16px;
+    font-weight: bold;
+    align-self: stretch;
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    padding: var(--summary-padding) calc(var(--summary-padding) * 2);
+    transform: translateX(100%);
+    margin: calc(-1 * var(--summary-padding)) calc(-1 * var(--summary-padding))
+      calc(-1 * var(--summary-padding)) 0;
+    border-radius: 8px;
+    background-color: var(--link-bg-color);
+
+    &:is(:hover, :focus) {
+      color: var(--link-text-color);
+      box-shadow: inset 0 0 0 2px var(--link-faded-color);
+    }
+
+    &:active {
+      background-color: var(--link-faded-color);
+    }
+  }
 }
 .timeline.contextual > li .replies > .replies-summary::-webkit-details-marker {
  display: none;
@ -571,14 +628,14 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
 .timeline.contextual > li .replies > .replies-summary > * {
  vertical-align: middle;
 }
-.timeline.contextual > li .replies > .replies-summary .avatars {
-  margin-right: 8px;
-
-  > *:not(:first-child) {
-    margin: 0 0 0 -4px;
-  }
-}
-.timeline.contextual > li .replies > .replies-summary:active,
+.timeline.contextual
+  > li
+  .replies
+  > .replies-summary
+  .timeline.contextual
+  > li
+  .replies
+  > .replies-summary:active,
 .timeline.contextual > li .replies[open] > .replies-summary {
  color: var(--text-color);
  background-color: var(--comment-line-color);
@ -590,6 +647,18 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
 }
 .timeline.contextual > li .replies[open] > .replies-summary {
  border-bottom-left-radius: 0;
+
+  .avatars {
+    opacity: 0.5;
+
+    .avatar {
+      transform: rotate(-15deg);
+    }
+  }
+
+  .replies-summary-chevron {
+    transform: rotate(180deg);
+  }
 }
 .timeline.contextual > li .replies .replies-summary[hidden] {
  display: none;
@ -686,6 +755,22 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
  pointer-events: none;
 }

+.timeline.contextual > li .replies {
+  > ul > li:only-child {
+    > .replies {
+      > ul > li:only-child {
+        margin-left: calc(-1 * var(--line-margin-end));
+        background-position: calc(16px) 0;
+        background-size: 100% calc(20px + 8px);
+
+        &:before {
+          display: none;
+        }
+      }
+    }
+  }
+}
+
 .timeline-deck.compact .status {
  max-height: max(25vh, 160px);
  overflow: hidden;
@ -746,6 +831,11 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
  border-top-right-radius: 0;
  border-top: 0;
  background-size: 100% 16px;
+
+  &:has(.status-pre-meta) {
+    /* 20px = icon of the pre-meta */
+    background-size: 100% calc(16px + 20px);
+  }
 }
 .timeline:not(.flat)
  > li:is(.timeline-item-container-middle, .timeline-item-container-end)
@ -877,17 +967,20 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
  text-shadow: 0 1px var(--bg-color);
 }
 .status-carousel > ul {
+  --carousel-gap: 16px;
  display: flex;
  overflow-x: auto;
-  overflow-y: hidden;
+  overflow-y: clip;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  margin: 0;
  padding: 8px 16px;
-  gap: 16px;
+  gap: var(--carousel-gap);
  align-items: flex-start;
  counter-reset: index;
  min-height: 160px;
+  max-height: 65vh;
+  max-height: 65dvh;
 }
 .status-carousel > ul > li {
  scroll-snap-align: center;
@ -899,14 +992,23 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
  list-style: none;
  margin: 0;
  padding: 0;
-  max-height: 65vh;
-  max-height: 65dvh;
+  /* max-height: 65vh;
+  max-height: 65dvh; */
  counter-increment: index;
  position: relative;
 }
 .status-carousel > ul > li:is(:empty, :has(> a:empty)) {
  display: none;
 }
+.status-carousel .status-carousel-beacon {
+  margin-right: calc(-1 * var(--carousel-gap));
+  pointer-events: none;
+  opacity: 0;
+
+  ~ .status-carousel-beacon {
+    margin-left: calc(-1 * var(--carousel-gap));
+  }
+}
 /*
  Assume that browsers that do support inline-size property also support container queries.
  https://www.smashingmagazine.com/2021/05/css-container-queries-use-cases-migration-strategies/#progressive-enhancement-polyfills
@ -925,6 +1027,10 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
 }
 .status-carousel .content-container .content:only-child {
  font-size: calc(100% + 25% * max(2 - var(--content-text-weight), 0));
+
+  &:has(.status-card) {
+    font-size: unset;
+  }
 }
 /* .status-carousel
  .content-container[data-content-text-weight='1']
@ -1092,6 +1198,14 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
  transform: translate(-50%, 0);
  font-size: 90%;
  pointer-events: auto;
+  transition: all 0.3s ease-in-out;
+
+  header[hidden] & {
+    opacity: 0;
+    transform: translate(-50%, -100%) scale(0.9);
+    pointer-events: none;
+    animation: none !important;
+  }
 }
 .updates-button .icon {
  vertical-align: top;
@ -1398,7 +1512,7 @@ body:has(.media-modal-container + .status-deck) .media-post-link {
  right: max(16px, env(safe-area-inset-right));
  padding: 16px;
  background-color: var(--button-bg-blur-color);
-  backdrop-filter: blur(16px);
+  /* backdrop-filter: blur(16px); */
  z-index: 10;
  box-shadow: 0 3px 8px -1px var(--drop-shadow-color),
    0 10px 36px -4px var(--button-bg-blur-color);
@ -1611,7 +1725,7 @@ body > .szh-menu-container {
  border-radius: 8px;
  box-shadow: 0 3px 16px -3px var(--drop-shadow-color);
  text-align: left;
-  animation: appear-smooth 0.15s ease-in-out;
+  /* animation: appear-smooth 0.15s ease-in-out; */
  width: 16em;
  max-width: 90vw;
  /* overflow: hidden; */
@ -2146,6 +2260,9 @@ ul.link-list li a .icon {
  .header-grid {
  background-color: var(--bg-blur-color);
 }
+#columns > .deck-container > .timeline-deck {
+  content-visibility: auto;
+}
 #columns .header-grid input {
  pointer-events: none;
 }
@ -2447,6 +2564,7 @@ ul.link-list li a .icon {
    border-bottom: 0;
    border-radius: 16px;
    background-color: var(--bg-faded-blur-color);
+    backdrop-filter: blur(16px);
    background-image: none;
    border-radius: 16px;
    min-height: 4em;
--- a/src/app.jsx
+++ b/src/app.jsx
@ -224,7 +224,7 @@ if (isIOS) {
          `meta[name="theme-color"][media*="${colorScheme}"]`,
        );
        if ($meta) {
-          const color = $meta.content;
+          const color = $meta.dataset.content;
          const tempColor = $meta.dataset.contentTemp;
          $meta.content = tempColor || '';
          setTimeout(() => {
--- a/src/components/compose.jsx
+++ b/src/components/compose.jsx
@ -2,7 +2,7 @@ import './compose.css';

 import '@github/text-expander-element';
 import { MenuItem } from '@szhsin/react-menu';
-import equal from 'fast-deep-equal';
+import { deepEqual } from 'fast-equals';
 import { forwardRef } from 'preact/compat';
 import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
 import { useHotkeys } from 'react-hotkeys-hook';
@ -502,7 +502,10 @@ function Compose({
        mediaAttachments,
      },
    };
-    if (!equal(backgroundDraft, prevBackgroundDraft.current) && !canClose()) {
+    if (
+      !deepEqual(backgroundDraft, prevBackgroundDraft.current) &&
+      !canClose()
+    ) {
      console.debug('not equal', backgroundDraft, prevBackgroundDraft.current);
      db.drafts
        .set(key, {
@ -1838,10 +1841,17 @@ function MediaAttachment({
                                  method: 'POST',
                                  body,
                                }).then((r) => r.json());
+                                if (response.error) {
+                                  throw new Error(response.error);
+                                }
                                setDescription(response.description);
                              } catch (e) {
                                console.error(e);
-                                showToast('Failed to generate description');
+                                showToast(
+                                  `Failed to generate description${
+                                    e?.message ? `: ${e.message}` : ''
+                                  }`,
+                                );
                              } finally {
                                setUIState('default');
                                toastRef.current?.hideToast?.();
--- a/src/components/embed-modal.css
+++ b/src/components/embed-modal.css
@ -0,0 +1,27 @@
+.embed-modal-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  pointer-events: none;
+
+  .top-controls {
+    padding: 16px;
+    display: flex;
+    gap: 8px;
+    justify-content: space-between;
+    pointer-events: auto;
+  }
+
+  .embed-content {
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    iframe {
+      pointer-events: auto;
+      max-width: 100%;
+    }
+  }
+}
--- a/src/components/embed-modal.jsx
+++ b/src/components/embed-modal.jsx
@ -0,0 +1,28 @@
+import './embed-modal.css';
+
+import Icon from './icon';
+
+function EmbedModal({ html, url, onClose = () => {} }) {
+  return (
+    <div class="embed-modal-container">
+      <div class="top-controls">
+        <button type="button" class="light" onClick={() => onClose()}>
+          <Icon icon="x" />
+        </button>
+        {url && (
+          <a
+            href={url}
+            target="_blank"
+            rel="noopener noreferrer"
+            class="button plain"
+          >
+            <span>Open link</span> <Icon icon="external" />
+          </a>
+        )}
+      </div>
+      <div class="embed-content" dangerouslySetInnerHTML={{ __html: html }} />
+    </div>
+  );
+}
+
+export default EmbedModal;
--- a/src/components/icon.jsx
+++ b/src/components/icon.jsx
@ -1,3 +1,4 @@
+import moize from 'moize';
 import { useEffect, useRef, useState } from 'preact/hooks';

 const SIZES = {
@ -110,6 +111,29 @@ export const ICONS = {

 const ICONDATA = {};

+// Memoize the dangerouslySetInnerHTML of the SVGs
+const SVGICon = moize(
+  function ({ size, width, height, body, rotate, flip }) {
+    return (
+      <svg
+        width={size}
+        height={size}
+        viewBox={`0 0 ${width} ${height}`}
+        dangerouslySetInnerHTML={{ __html: body }}
+        style={{
+          transform: `${rotate ? `rotate(${rotate})` : ''} ${
+            flip ? `scaleX(-1)` : ''
+          }`,
+        }}
+      />
+    );
+  },
+  {
+    isShallowEqual: true,
+    maxSize: Object.keys(ICONS).length,
+  },
+);
+
 function Icon({
  icon,
  size = 'm',
@ -122,6 +146,11 @@ function Icon({

  const iconSize = SIZES[size];
  let iconBlock = ICONS[icon];
+  if (!iconBlock) {
+    console.warn(`Icon ${icon} not found`);
+    return null;
+  }
+
  let rotate, flip;
  if (Array.isArray(iconBlock)) {
    [iconBlock, rotate, flip] = iconBlock;
@ -150,16 +179,24 @@ function Icon({
      }}
    >
      {iconData && (
-        <svg
-          width={iconSize}
-          height={iconSize}
-          viewBox={`0 0 ${iconData.width} ${iconData.height}`}
-          dangerouslySetInnerHTML={{ __html: iconData.body }}
-          style={{
-            transform: `${rotate ? `rotate(${rotate})` : ''} ${
-              flip ? `scaleX(-1)` : ''
-            }`,
-          }}
+        // <svg
+        //   width={iconSize}
+        //   height={iconSize}
+        //   viewBox={`0 0 ${iconData.width} ${iconData.height}`}
+        //   dangerouslySetInnerHTML={{ __html: iconData.body }}
+        //   style={{
+        //     transform: `${rotate ? `rotate(${rotate})` : ''} ${
+        //       flip ? `scaleX(-1)` : ''
+        //     }`,
+        //   }}
+        // />
+        <SVGICon
+          size={iconSize}
+          width={iconData.width}
+          height={iconData.height}
+          body={iconData.body}
+          rotate={rotate}
+          flip={flip}
        />
      )}
    </span>
--- a/src/components/media-post.css
+++ b/src/components/media-post.css
@ -34,7 +34,7 @@
    word-break: break-word;
    word-wrap: break-word;
    overflow-wrap: break-word;
-    mix-blend-mode: luminosity;
+    /* mix-blend-mode: luminosity; */
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
--- a/src/components/media.jsx
+++ b/src/components/media.jsx
@ -358,7 +358,7 @@ function Media({
        <Parent
          class={`media ${className} media-${isGIF ? 'gif' : 'video'} ${
            autoGIFAnimate ? 'media-contain' : ''
-          }`}
+          } ${hoverAnimate ? 'media-hover-animate' : ''}`}
          data-orientation={orientation}
          data-formatted-duration={
            !showOriginal ? formattedDuration : undefined
--- a/src/components/modals.jsx
+++ b/src/components/modals.jsx
@ -10,6 +10,7 @@ import states from '../utils/states';
 import AccountSheet from './account-sheet';
 import Compose from './compose';
 import Drafts from './drafts';
+import EmbedModal from './embed-modal';
 import GenericAccounts from './generic-accounts';
 import MediaAltModal from './media-alt-modal';
 import MediaModal from './media-modal';
@ -200,6 +201,21 @@ export default function Modals() {
          />
        </Modal>
      )}
+      {!!snapStates.showEmbedModal && (
+        <Modal
+          onClose={() => {
+            states.showEmbedModal = false;
+          }}
+        >
+          <EmbedModal
+            html={snapStates.showEmbedModal.html}
+            url={snapStates.showEmbedModal.url}
+            onClose={() => {
+              states.showEmbedModal = false;
+            }}
+          />
+        </Modal>
+      )}
    </>
  );
 }
--- a/src/components/notification-service.jsx
+++ b/src/components/notification-service.jsx
@ -15,6 +15,22 @@ import Link from './link';
 import Modal from './modal';
 import Notification from './notification';

+{
+  if ('serviceWorker' in navigator) {
+    console.log('👂👂👂 Listen to message');
+    navigator.serviceWorker.addEventListener('message', (event) => {
+      console.log('💥💥💥 Message event', event);
+      const { type, id, accessToken } = event?.data || {};
+      if (type === 'notification') {
+        states.routeNotification = {
+          id,
+          accessToken,
+        };
+      }
+    });
+  }
+}
+
 export default memo(function NotificationService() {
  if (!('serviceWorker' in navigator)) return null;

@ -82,25 +98,25 @@ export default memo(function NotificationService() {
    })();
  }, [id, accessToken]);

-  useLayoutEffect(() => {
-    // Listen to message from service worker
-    const handleMessage = (event) => {
-      console.log('💥💥💥 Message event', event);
-      const { type, id, accessToken } = event?.data || {};
-      if (type === 'notification') {
-        states.routeNotification = {
-          id,
-          accessToken,
-        };
-      }
-    };
-    console.log('👂👂👂 Listen to message');
-    navigator.serviceWorker.addEventListener('message', handleMessage);
-    return () => {
-      console.log('👂👂👂 Remove listen to message');
-      navigator.serviceWorker.removeEventListener('message', handleMessage);
-    };
-  }, []);
+  // useLayoutEffect(() => {
+  //   // Listen to message from service worker
+  //   const handleMessage = (event) => {
+  //     console.log('💥💥💥 Message event', event);
+  //     const { type, id, accessToken } = event?.data || {};
+  //     if (type === 'notification') {
+  //       states.routeNotification = {
+  //         id,
+  //         accessToken,
+  //       };
+  //     }
+  //   };
+  //   console.log('👂👂👂 Listen to message');
+  //   navigator.serviceWorker.addEventListener('message', handleMessage);
+  //   return () => {
+  //     console.log('👂👂👂 Remove listen to message');
+  //     navigator.serviceWorker.removeEventListener('message', handleMessage);
+  //   };
+  // }, []);

  useLayoutEffect(() => {
    if (navigator?.clearAppBadge) {
--- a/src/components/shortcuts-settings.jsx
+++ b/src/components/shortcuts-settings.jsx
@ -172,7 +172,9 @@ export const SHORTCUTS_META = {
    id: 'search',
    title: ({ query }) => (query ? `"${query}"` : 'Search'),
    path: ({ query }) =>
-      query ? `/search?q=${query}&type=statuses` : '/search',
+      query
+        ? `/search?q=${encodeURIComponent(query)}&type=statuses`
+        : '/search',
    icon: 'search',
    excludeViewMode: ({ query }) => (!query ? ['multi-column'] : []),
  },
--- a/src/components/shortcuts.css
+++ b/src/components/shortcuts.css
@ -59,8 +59,9 @@
  left: 0;
  right: 0;
  z-index: 100;
-  background-color: var(--bg-blur-color);
-  backdrop-filter: blur(16px) saturate(3);
+  background-color: var(--bg-color);
+  /* background-color: var(--bg-blur-color);
+  backdrop-filter: blur(16px) saturate(3); */
  border-top: var(--hairline-width) solid var(--outline-color);
  box-shadow: 0 -8px 16px -8px var(--drop-shadow-color);
  overflow: auto;
@ -165,6 +166,7 @@ shortcuts .tab-bar[hidden] {
    padding: env(safe-area-inset-top) env(safe-area-inset-right) 0
      env(safe-area-inset-left);
    background-color: var(--bg-faded-blur-color);
+    backdrop-filter: blur(16px);
    border: 0;
    box-shadow: none;
    border-bottom: var(--hairline-width) solid var(--bg-faded-color);
--- a/src/components/status.css
+++ b/src/components/status.css
@ -206,11 +206,11 @@
 .status-card:not(.status-carousel .status)
  :is(.content, .poll, .media-container) {
  max-height: 160px !important;
-  overflow: hidden;
+  overflow: clip;
 }
-.status.small:not(.status-carousel .status)
+.status.small:not(.status-carousel .status, .status.large .status)
  .status-card
-  :is(.content, .poll, .media-container) {
+  :is(.content, .poll, .media-container:not(.media-gt2)) {
  max-height: 80px !important;
 }
 .status.large .status-card :is(.content, .poll, .media-container) {
@ -730,6 +730,9 @@
  tab-size: 2;
  text-wrap: pretty;
 }
+.status-card .content p {
+  margin-block: min(0.25em, 4px);
+}
 .status .content p:first-child {
  margin-block-start: 0;
 }
@ -767,6 +770,9 @@
 .status .content ul {
  list-style-type: disc;
 }
+.status .content :is(strong, b) {
+  font-weight: 600;
+}
 .status .content .invisible {
  display: none;
 }
@ -937,6 +943,10 @@
 }
 .status.large .media-container.media-eq1 {
  max-height: min(var(--height), 60vh);
+
+  .media-gif.media-contain {
+    border-radius: 2px;
+  }
 }
 .status.large
  .media-container:not(.status-card .media-container).media-eq1
@ -952,6 +962,11 @@
  height: auto;
  max-height: 60vh;
 }
+.status.status-card .media-container.media-eq1 .media {
+  max-height: 160px;
+  width: auto;
+  max-width: min(var(--width), 100%);
+}
 /* Special media borders */
 .status .media-container.media-eq2 .media:first-of-type {
  border-radius: var(--media-radius) var(--media-radius-inner)
@ -1156,6 +1171,15 @@ body:has(#modal-container .carousel) .status .media img:hover {
 .status .media-contain video {
  object-fit: scale-down !important;
 }
+.status .media-eq1 .media-hover-animate {
+  transition: border-radius 0.15s ease-out;
+  transition-delay: 0.15s;
+
+  &:hover {
+    transition-delay: 0;
+    border-radius: 2px;
+  }
+}
 /* .status .media-audio {
  border: 0;
  min-height: 0;
@ -1941,7 +1965,7 @@ a.card:is(:hover, :focus):visited {
  color: var(--media-fg-color);
  background-color: var(--media-bg-color);
  border: var(--hairline-width) solid var(--media-outline-color);
-  mix-blend-mode: luminosity;
+  /* mix-blend-mode: luminosity; */
  border-radius: 4px;
  padding: 4px;
  opacity: 0.65;
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@ -9,7 +9,7 @@ import {
  MenuItem,
 } from '@szhsin/react-menu';
 import { decodeBlurHash, getBlurHashAverageColor } from 'fast-blurhash';
-import pThrottle from 'p-throttle';
+import { shallowEqual } from 'fast-equals';
 import { memo } from 'preact/compat';
 import {
  useCallback,
@ -20,10 +20,8 @@ import {
  useState,
 } from 'preact/hooks';
 import { useHotkeys } from 'react-hotkeys-hook';
-import { InView } from 'react-intersection-observer';
 import { useLongPress } from 'use-long-press';
 import { useSnapshot } from 'valtio';
-import { snapshot } from 'valtio/vanilla';

 import AccountBlock from '../components/account-block';
 import EmojiText from '../components/emoji-text';
@ -54,6 +52,7 @@ 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 unfurlMastodonLink from '../utils/unfurl-link';
 import useTruncated from '../utils/useTruncated';
 import visibilityIconsMap from '../utils/visibility-icons-map';

@ -68,10 +67,6 @@ 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();
@ -1025,7 +1020,7 @@ function Status({
    },
  );

-  const hotkeysEnabled = !readOnly && !previewMode;
+  const hotkeysEnabled = !readOnly && !previewMode && !quoted;
  const rRef = useHotkeys('r, shift+r', replyStatus, {
    enabled: hotkeysEnabled,
  });
@ -1587,34 +1582,34 @@ function Status({
                            a.removeAttribute('target');
                          }
                        });
-                      if (previewMode) return;
+                      // if (previewMode) return;
                      // Unfurl Mastodon links
-                      Array.from(
-                        dom.querySelectorAll(
-                          'a[href]:not(.u-url):not(.mention):not(.hashtag)',
-                        ),
-                      )
-                        .filter((a) => {
-                          const url = a.href;
-                          const isPostItself =
-                            url === status.url || url === status.uri;
-                          return !isPostItself && isMastodonLinkMaybe(url);
-                        })
-                        .forEach((a, i) => {
-                          unfurlMastodonLink(currentInstance, a.href).then(
-                            (result) => {
-                              if (!result) return;
-                              a.removeAttribute('target');
-                              if (!sKey) return;
-                              if (!Array.isArray(states.statusQuotes[sKey])) {
-                                states.statusQuotes[sKey] = [];
-                              }
-                              if (!states.statusQuotes[sKey][i]) {
-                                states.statusQuotes[sKey].splice(i, 0, result);
-                              }
-                            },
-                          );
-                        });
+                      // Array.from(
+                      //   dom.querySelectorAll(
+                      //     'a[href]:not(.u-url):not(.mention):not(.hashtag)',
+                      //   ),
+                      // )
+                      //   .filter((a) => {
+                      //     const url = a.href;
+                      //     const isPostItself =
+                      //       url === status.url || url === status.uri;
+                      //     return !isPostItself && isMastodonLinkMaybe(url);
+                      //   })
+                      //   .forEach((a, i) => {
+                      //     unfurlMastodonLink(currentInstance, a.href).then(
+                      //       (result) => {
+                      //         if (!result) return;
+                      //         a.removeAttribute('target');
+                      //         if (!sKey) return;
+                      //         if (!Array.isArray(states.statusQuotes[sKey])) {
+                      //           states.statusQuotes[sKey] = [];
+                      //         }
+                      //         if (!states.statusQuotes[sKey][i]) {
+                      //           states.statusQuotes[sKey].splice(i, 0, result);
+                      //         }
+                      //       },
+                      //     );
+                      //   });
                    },
                  }),
                }}
@ -1989,6 +1984,20 @@ function Card({ card, selfReferential, instance }) {

  if (snapStates.unfurledLinks[url]) return null;

+  const hasIframeHTML = /<iframe/i.test(html);
+  const handleClick = useCallback(
+    (e) => {
+      if (hasIframeHTML) {
+        e.preventDefault();
+        states.showEmbedModal = {
+          html,
+          url: url || embedUrl,
+        };
+      }
+    },
+    [hasIframeHTML],
+  );
+
  if (hasText && (image || (type === 'photo' && blurhash))) {
    const domain = new URL(url).hostname
      .replace(/^www\./, '')
@ -2021,6 +2030,7 @@ function Card({ card, selfReferential, instance }) {
          '--average-color':
            rgbAverageColor && `rgb(${rgbAverageColor.join(',')})`,
        }}
+        onClick={handleClick}
      >
        <div class="card-image">
          <img
@ -2059,6 +2069,7 @@ function Card({ card, selfReferential, instance }) {
        target="_blank"
        rel="nofollow noopener noreferrer"
        class="card photo"
+        onClick={handleClick}
      >
        <img
          src={embedUrl}
@ -2073,42 +2084,46 @@ function Card({ card, selfReferential, instance }) {
        />
      </a>
    );
-  } else if (type === 'video') {
-    if (/youtube/i.test(providerName)) {
-      // Get ID from e.g. https://www.youtube.com/watch?v=[VIDEO_ID]
-      const videoID = url.match(/watch\?v=([^&]+)/)?.[1];
-      if (videoID) {
-        return <lite-youtube videoid={videoID} nocookie></lite-youtube>;
+  } else {
+    if (type === 'video') {
+      if (/youtube/i.test(providerName)) {
+        // Get ID from e.g. https://www.youtube.com/watch?v=[VIDEO_ID]
+        const videoID = url.match(/watch\?v=([^&]+)/)?.[1];
+        if (videoID) {
+          return <lite-youtube videoid={videoID} nocookie></lite-youtube>;
+        }
      }
+      // return (
+      //   <div
+      //     class="card video"
+      //     style={{
+      //       aspectRatio: `${width}/${height}`,
+      //     }}
+      //     dangerouslySetInnerHTML={{ __html: html }}
+      //   />
+      // );
+    }
+    if (hasText && !image) {
+      const domain = new URL(url).hostname.replace(/^www\./, '');
+      return (
+        <a
+          href={cardStatusURL || url}
+          target={cardStatusURL ? null : '_blank'}
+          rel="nofollow noopener noreferrer"
+          class={`card link no-image`}
+          lang={language}
+          onClick={handleClick}
+        >
+          <div class="meta-container">
+            <p class="meta domain">
+              <Icon icon="link" size="s" /> <span>{domain}</span>
+            </p>
+            <p class="title">{title}</p>
+            <p class="meta">{description || providerName || authorName}</p>
+          </div>
+        </a>
+      );
    }
-    return (
-      <div
-        class="card video"
-        style={{
-          aspectRatio: `${width}/${height}`,
-        }}
-        dangerouslySetInnerHTML={{ __html: html }}
-      />
-    );
-  } else if (hasText && !image) {
-    const domain = new URL(url).hostname.replace(/^www\./, '');
-    return (
-      <a
-        href={cardStatusURL || url}
-        target={cardStatusURL ? null : '_blank'}
-        rel="nofollow noopener noreferrer"
-        class={`card link no-image`}
-        lang={language}
-      >
-        <div class="meta-container">
-          <p class="meta domain">
-            <Icon icon="link" size="s" /> <span>{domain}</span>
-          </p>
-          <p class="title">{title}</p>
-          <p class="meta">{description || providerName || authorName}</p>
-        </div>
-      </a>
-    );
  }
 }

@ -2257,130 +2272,6 @@ export function formatDuration(time) {
  }
 }

-const denylistDomains = /(twitter|github)\.com/i;
-const failedUnfurls = {};
-
-function _unfurlMastodonLink(instance, url) {
-  const snapStates = snapshot(states);
-  if (denylistDomains.test(url)) {
-    return;
-  }
-  if (failedUnfurls[url]) {
-    return;
-  }
-  const instanceRegex = new RegExp(instance + '/');
-  if (instanceRegex.test(snapStates.unfurledLinks[url]?.url)) {
-    return Promise.resolve(snapStates.unfurledLinks[url]);
-  }
-  console.debug('🦦 Unfurling URL', url);
-
-  let remoteInstanceFetch;
-  let theURL = url;
-
-  // https://elk.zone/domain.com/@stest/123 -> https://domain.com/@stest/123
-  if (/\/\/elk\.[^\/]+\/[^\/]+\.[^\/]+/i.test(theURL)) {
-    theURL = theURL.replace(/elk\.[^\/]+\//i, '');
-  }
-
-  // https://trunks.social/status/domain.com/@stest/123 -> https://domain.com/@stest/123
-  if (/\/\/trunks\.[^\/]+\/status\/[^\/]+\.[^\/]+/i.test(theURL)) {
-    theURL = theURL.replace(/trunks\.[^\/]+\/status\//i, '');
-  }
-
-  // https://phanpy.social/#/domain.com/s/123 -> https://domain.com/statuses/123
-  if (/\/#\/[^\/]+\.[^\/]+\/s\/.+/i.test(theURL)) {
-    const urlAfterHash = theURL.split('/#/')[1];
-    const finalURL = urlAfterHash.replace(/\/s\//i, '/@fakeUsername/');
-    theURL = `https://${finalURL}`;
-  }
-
-  let urlObj;
-  try {
-    urlObj = new URL(theURL);
-  } catch (e) {
-    return;
-  }
-  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];
-    const { masto } = api({ instance: domain });
-    remoteInstanceFetch = masto.v1.statuses
-      .$select(id)
-      .fetch()
-      .then((status) => {
-        if (status?.id) {
-          return {
-            status,
-            instance: domain,
-          };
-        } else {
-          throw new Error('No results');
-        }
-      });
-  }
-
-  const { masto } = api({ instance });
-  const mastoSearchFetch = masto.v2.search
-    .fetch({
-      q: theURL,
-      type: 'statuses',
-      resolve: true,
-      limit: 1,
-    })
-    .then((results) => {
-      if (results.statuses.length > 0) {
-        const status = results.statuses[0];
-        return {
-          status,
-          instance,
-        };
-      } else {
-        throw new Error('No results');
-      }
-    });
-
-  function handleFulfill(result) {
-    const { status, instance } = result;
-    const { id } = status;
-    const selfURL = `/${instance}/s/${id}`;
-    console.debug('🦦 Unfurled URL', url, id, selfURL);
-    const data = {
-      id,
-      instance,
-      url: selfURL,
-    };
-    states.unfurledLinks[url] = data;
-    saveStatus(status, instance, {
-      skipThreading: true,
-    });
-    return data;
-  }
-  function handleCatch(e) {
-    failedUnfurls[url] = true;
-  }
-
-  if (remoteInstanceFetch) {
-    // return Promise.any([remoteInstanceFetch, mastoSearchFetch])
-    //   .then(handleFulfill)
-    //   .catch(handleCatch);
-    // If mastoSearchFetch is fulfilled within 3s, return it, else return remoteInstanceFetch
-    const finalPromise = Promise.race([
-      mastoSearchFetch,
-      new Promise((resolve, reject) => setTimeout(reject, 3000)),
-    ]).catch(() => {
-      // If remoteInstanceFetch is fullfilled, return it, else return mastoSearchFetch
-      return remoteInstanceFetch.catch(() => mastoSearchFetch);
-    });
-    return finalPromise.then(handleFulfill).catch(handleCatch);
-  } else {
-    return mastoSearchFetch.then(handleFulfill).catch(handleCatch);
-  }
-}
-
 function nicePostURL(url) {
  if (!url) return;
  const urlObj = new URL(url);
@ -2404,8 +2295,6 @@ function nicePostURL(url) {
  );
 }

-const unfurlMastodonLink = throttle(_unfurlMastodonLink);
-
 function FilteredStatus({
  status,
  filterInfo,
@ -2592,4 +2481,12 @@ const QuoteStatuses = memo(({ id, instance, level = 0 }) => {
  });
 });

-export default memo(Status);
+export default memo(Status, (oldProps, newProps) => {
+  // Shallow equal all props except 'status'
+  // This will be pure static until status ID changes
+  const { status, ...restOldProps } = oldProps;
+  const { status: newStatus, ...restNewProps } = newProps;
+  return (
+    status?.id === newStatus?.id && shallowEqual(restOldProps, restNewProps)
+  );
+});
--- a/src/components/timeline.jsx
+++ b/src/components/timeline.jsx
@ -12,6 +12,7 @@ import { groupBoosts, groupContext } from '../utils/timeline-utils';
 import useInterval from '../utils/useInterval';
 import usePageVisibility from '../utils/usePageVisibility';
 import useScroll from '../utils/useScroll';
+import useScrollFn from '../utils/useScrollFn';

 import Icon from './icon';
 import Link from './link';
@ -203,17 +204,48 @@ function Timeline({
    }
  });

-  const {
-    scrollDirection,
-    nearReachStart,
-    nearReachEnd,
-    reachStart,
-    reachEnd,
-  } = useScroll({
-    scrollableRef,
-    distanceFromEnd: 2,
-    scrollThresholdStart: 44,
-  });
+  // const {
+  //   scrollDirection,
+  //   nearReachStart,
+  //   nearReachEnd,
+  //   reachStart,
+  //   reachEnd,
+  // } = useScroll({
+  //   scrollableRef,
+  //   distanceFromEnd: 2,
+  //   scrollThresholdStart: 44,
+  // });
+  const headerRef = useRef();
+  // const [hiddenUI, setHiddenUI] = useState(false);
+  const [nearReachStart, setNearReachStart] = useState(false);
+  useScrollFn(
+    {
+      scrollableRef,
+      distanceFromEnd: 2,
+      scrollThresholdStart: 44,
+    },
+    ({
+      scrollDirection,
+      nearReachStart,
+      nearReachEnd,
+      reachStart,
+      reachEnd,
+    }) => {
+      // setHiddenUI(scrollDirection === 'end' && !nearReachEnd);
+      if (headerRef.current) {
+        const hiddenUI = scrollDirection === 'end' && !nearReachStart;
+        headerRef.current.hidden = hiddenUI;
+      }
+      setNearReachStart(nearReachStart);
+      if (reachStart) {
+        loadItems(true);
+      }
+      // else if (nearReachEnd || (reachEnd && showMore)) {
+      //   loadItems();
+      // }
+    },
+    [],
+  );

  useEffect(() => {
    scrollableRef.current?.scrollTo({ top: 0 });
@ -223,17 +255,17 @@ function Timeline({
    loadItems(true);
  }, [refresh]);

-  useEffect(() => {
-    if (reachStart) {
-      loadItems(true);
-    }
-  }, [reachStart]);
+  // useEffect(() => {
+  //   if (reachStart) {
+  //     loadItems(true);
+  //   }
+  // }, [reachStart]);

-  useEffect(() => {
-    if (nearReachEnd || (reachEnd && showMore)) {
-      loadItems();
-    }
-  }, [nearReachEnd, showMore]);
+  // useEffect(() => {
+  //   if (nearReachEnd || (reachEnd && showMore)) {
+  //     loadItems();
+  //   }
+  // }, [nearReachEnd, showMore]);

  const prevView = useRef(view);
  useEffect(() => {
@ -304,7 +336,7 @@ function Timeline({
      : null,
  );

-  const hiddenUI = scrollDirection === 'end' && !nearReachStart;
+  // const hiddenUI = scrollDirection === 'end' && !nearReachStart;

  return (
    <FilterContext.Provider value={filterContext}>
@ -321,7 +353,8 @@ function Timeline({
      >
        <div class="timeline-deck deck">
          <header
-            hidden={hiddenUI}
+            ref={headerRef}
+            // hidden={hiddenUI}
            onClick={(e) => {
              if (!e.target.closest('a, button')) {
                scrollableRef.current?.scrollTo({
@ -356,7 +389,7 @@ function Timeline({
            </div>
            {items.length > 0 &&
              uiState !== 'loading' &&
-              !hiddenUI &&
+              // !hiddenUI &&
              showNew && (
                <button
                  class="updates-button shiny-pill"
@ -419,6 +452,8 @@ function Timeline({
              {uiState === 'default' &&
                (showMore ? (
                  <InView
+                    root={scrollableRef.current}
+                    rootMargin={`0px 0px ${screen.height * 1.5}px 0px`}
                    onChange={(inView) => {
                      if (inView) {
                        loadItems();
@ -657,12 +692,33 @@ function TimelineItem({

 function StatusCarousel({ title, class: className, children }) {
  const carouselRef = useRef();
-  const { reachStart, reachEnd, init } = useScroll({
-    scrollableRef: carouselRef,
-    direction: 'horizontal',
-  });
+  // const { reachStart, reachEnd, init } = useScroll({
+  //   scrollableRef: carouselRef,
+  //   direction: 'horizontal',
+  // });
+  const startButtonRef = useRef();
+  const endButtonRef = useRef();
+  // useScrollFn(
+  //   {
+  //     scrollableRef: carouselRef,
+  //     direction: 'horizontal',
+  //     init: true,
+  //   },
+  //   ({ reachStart, reachEnd }) => {
+  //     if (startButtonRef.current) startButtonRef.current.disabled = reachStart;
+  //     if (endButtonRef.current) endButtonRef.current.disabled = reachEnd;
+  //   },
+  //   [],
+  // );
+  // useEffect(() => {
+  //   init?.();
+  // }, []);
+
+  const [render, setRender] = useState(false);
  useEffect(() => {
-    init?.();
+    setTimeout(() => {
+      setRender(true);
+    }, 1);
  }, []);

  return (
@ -671,9 +727,10 @@ function StatusCarousel({ title, class: className, children }) {
        <h3>{title}</h3>
        <span>
          <button
+            ref={startButtonRef}
            type="button"
            class="small plain2"
-            disabled={reachStart}
+            // disabled={reachStart}
            onClick={() => {
              carouselRef.current?.scrollBy({
                left: -Math.min(320, carouselRef.current?.offsetWidth),
@ -684,9 +741,10 @@ function StatusCarousel({ title, class: className, children }) {
            <Icon icon="chevron-left" />
          </button>{' '}
          <button
+            ref={endButtonRef}
            type="button"
            class="small plain2"
-            disabled={reachEnd}
+            // disabled={reachEnd}
            onClick={() => {
              carouselRef.current?.scrollBy({
                left: Math.min(320, carouselRef.current?.offsetWidth),
@ -698,7 +756,23 @@ function StatusCarousel({ title, class: className, children }) {
          </button>
        </span>
      </header>
-      <ul ref={carouselRef}>{children}</ul>
+      <ul ref={carouselRef}>
+        <InView
+          class="status-carousel-beacon"
+          onChange={(inView) => {
+            if (startButtonRef.current)
+              startButtonRef.current.disabled = inView;
+          }}
+        />
+        {children[0]}
+        {render && children.slice(1)}
+        <InView
+          class="status-carousel-beacon"
+          onChange={(inView) => {
+            if (endButtonRef.current) endButtonRef.current.disabled = inView;
+          }}
+        />
+      </ul>
    </div>
  );
 }
--- a/src/index.css
+++ b/src/index.css
@ -32,6 +32,7 @@
  --text-color: #1c1e21;
  --text-insignificant-color: #1c1e2199;
  --link-color: var(--blue-color);
+  --link-bg-color: #4169e122;
  --link-light-color: #4169e199;
  --link-faded-color: #4169e155;
  --link-bg-hover-color: #f0f2f599;
@ -89,6 +90,7 @@
  --media-outline-color: color-mix(in lch, var(--media-fg-color), transparent);

  --timing-function: cubic-bezier(0.3, 0.5, 0, 1);
+  --spring-timing-funtion: cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }

@media (min-resolution: 2dppx) {
@ -447,6 +449,17 @@ kbd {
  }
 }

+@keyframes slide-up-smooth {
+  0% {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
@keyframes position-object {
  0% {
    object-position: 50% 50%;
--- a/src/pages/account-statuses.jsx
+++ b/src/pages/account-statuses.jsx
@ -377,14 +377,14 @@ function AccountStatuses() {
                          }
                        : {},
                    );
+                    const [year, month] = value.split('-');
+                    const monthIndex = parseInt(month, 10) - 1;
+                    const date = new Date(year, monthIndex);
                    showToast(
-                      `Showing posts in ${new Date(value).toLocaleString(
-                        'default',
-                        {
-                          month: 'long',
-                          year: 'numeric',
-                        },
-                      )}`,
+                      `Showing posts in ${date.toLocaleString('default', {
+                        month: 'long',
+                        year: 'numeric',
+                      })}`,
                    );
                  }}
                />
--- a/src/pages/hashtag.jsx
+++ b/src/pages/hashtag.jsx
@ -164,7 +164,7 @@ function Hashtags({ media: mediaView, columnMode, ...props }) {
          portal
          setDownOverflow
          overflow="auto"
-          viewScroll="close"
+          // viewScroll="close"
          position="anchor"
          menuButton={
            <button type="button" class="plain">
--- a/src/pages/http-route.jsx
+++ b/src/pages/http-route.jsx
@ -37,16 +37,20 @@ export default function HttpRoute() {
        const { masto: currentMasto, instance: currentInstance } = api();
        const result = await currentMasto.v2.search.fetch({
          q: url,
-          type: 'statuses',
          limit: 1,
          resolve: true,
        });
        if (result.statuses.length) {
          const status = result.statuses[0];
          window.location.hash = `/${currentInstance}/s/${status.id}?view=full`;
-        } else {
+        } else if (result.accounts.length) {
+          const account = result.accounts[0];
+          window.location.hash = `/${currentInstance}/a/${account.id}`;
+        } else if (statusURL) {
          // Fallback to original URL, which will probably show error
          window.location.hash = statusURL + '?view=full';
+        } else {
+          setUIState('error');
        }
      }
    })();
--- a/src/pages/search.css
+++ b/src/pages/search.css
@ -115,22 +115,25 @@ ul.link-list.hashtag-list li a {
  display: none;
 }
 .search-popover-item:is(:hover, :focus, .focus) {
-  background-color: var(--button-bg-color);
-  color: var(--button-text-color);
+  background-color: var(--link-bg-color);
+  color: var(--text-color);
+}
+.search-popover-item:is(:focus, .focus) {
+  box-shadow: inset 4px 0 0 0 var(--button-bg-color);
 }
 .search-popover-item :is(mark, q) {
-  background-color: var(--bg-faded-blur-color);
-  color: inherit;
+  color: var(--text-color);
+  background-color: var(--link-bg-color);
 }
 .search-popover-item:is(:hover, :focus, .focus) :is(mark, q) {
-  background-color: var(--button-bg-color);
+  background-color: var(--link-bg-color);
 }
 .search-popover:hover .search-popover-item.focus:not(:hover, :focus),
 .search-popover:hover
  .search-popover-item.focus:not(:hover, :focus)
  :is(mark, q) {
-  background-color: unset;
-  color: unset;
+  /* background-color: unset; */
+  /* color: unset; */
 }
 .search-popover-item > span {
  min-width: 0;
--- a/src/pages/search.jsx
+++ b/src/pages/search.jsx
@ -17,7 +17,6 @@ import { api } from '../utils/api';
 import { fetchRelationships } from '../utils/relationships';
 import shortenNumber from '../utils/shorten-number';
 import usePageVisibility from '../utils/usePageVisibility';
-import useScroll from '../utils/useScroll';
 import useTitle from '../utils/useTitle';

 const SHORT_LIMIT = 5;
@ -151,11 +150,9 @@ function Search({ columnMode, ...props }) {
    })();
  }

-  const { reachStart } = useScroll({
-    scrollableRef,
-  });
  const lastHiddenTime = useRef();
  usePageVisibility((visible) => {
+    const reachStart = scrollableRef.current?.scrollTop === 0;
    if (visible && reachStart) {
      const timeDiff = Date.now() - lastHiddenTime.current;
      if (!lastHiddenTime.current || timeDiff > 1000 * 3) {
--- a/src/pages/status.css
+++ b/src/pages/status.css
@ -7,15 +7,12 @@
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
+  align-self: stretch;
 }
 .status-deck header h1 .deck-back {
  margin-left: -16px;
 }

-.status-deck header.inview h1 {
-  font-weight: bold;
-}
-
 .hero-heading {
  font-size: var(--text-size);
  display: inline-block;
@ -36,7 +33,7 @@
  }
 }
 .ancestors-indicator:not([hidden]) {
-  animation: slide-up 0.3s both ease-out 0.3s;
+  animation: slide-up-smooth 0.3s both var(--spring-timing-funtion) 0.3s;
 }
 .ancestors-indicator[hidden] {
  opacity: 0;
--- a/src/pages/status.jsx
+++ b/src/pages/status.jsx
@ -184,6 +184,15 @@ function StatusPage(params) {
  );
 }

+function StatusParent(props) {
+  const { linkable, to, onClick, ...restProps } = props;
+  return linkable ? (
+    <Link class="status-link" to={to} onClick={onClick} {...restProps} />
+  ) : (
+    <div class="status-focus" tabIndex={0} {...restProps} />
+  );
+}
+
 function StatusThread({ id, closeLink = '/', instance: propInstance }) {
  const [searchParams, setSearchParams] = useSearchParams();
  const mediaParam = searchParams.get('media');
@ -429,7 +438,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
  };

  useEffect(initContext, [id, masto]);
-  useEffect(() => {
+  useLayoutEffect(() => {
    if (!statuses.length) return;
    console.debug('STATUSES', statuses);
    const scrollPosition = scrollPositions[id];
@ -545,7 +554,6 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
  const ancestors = statuses.filter((s) => s.ancestor);

  const [heroInView, setHeroInView] = useState(true);
-  const onView = useDebouncedCallback(setHeroInView, 100);
  const heroPointer = useMemo(() => {
    // get top offset of heroStatus
    if (!heroStatusRef.current || heroInView) return null;
@ -652,10 +660,11 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
    }
  });

-  const { nearReachStart } = useScroll({
-    scrollableRef,
-    distanceFromStartPx: 16,
-  });
+  const [reachTopPost, setReachTopPost] = useState(false);
+  // const { nearReachStart } = useScroll({
+  //   scrollableRef,
+  //   distanceFromStartPx: 16,
+  // });

  const initialPageState = useRef(showMedia ? 'media+status' : 'status');

@ -693,7 +702,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
  }, [mediaStatusID, showMedia]);

  const renderStatus = useCallback(
-    (status) => {
+    (status, i) => {
      const {
        id: statusID,
        ancestor,
@ -705,24 +714,8 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
        weight,
      } = status;
      const isHero = statusID === id;
-      // const StatusParent = useCallback(
-      //   (props) =>
-      //     isThread || thread || ancestor ? (
-      //       <Link
-      //         class="status-link"
-      //         to={
-      //           instance ? `/${instance}/s/${statusID}` : `/s/${statusID}`
-      //         }
-      //         onClick={() => {
-      //           resetScrollPosition(statusID);
-      //         }}
-      //         {...props}
-      //       />
-      //     ) : (
-      //       <div class="status-focus" tabIndex={0} {...props} />
-      //     ),
-      //   [isThread, thread],
-      // );
+      const isLinkable = isThread || ancestor;
+
      return (
        <li
          key={statusID}
@ -735,7 +728,13 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
            <>
              <InView
                threshold={0.1}
-                onChange={onView}
+                onChange={(inView) => {
+                  queueMicrotask(() => {
+                    requestAnimationFrame(() => {
+                      setHeroInView(inView);
+                    });
+                  });
+                }}
                class="status-focus"
                tabIndex={0}
              >
@ -802,23 +801,52 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
              )}
            </>
          ) : (
-            // <StatusParent>
-            <Link
-              class="status-link"
+            <StatusParent
+              linkable={isLinkable}
              to={instance ? `/${instance}/s/${statusID}` : `/s/${statusID}`}
              onClick={() => {
                resetScrollPosition(statusID);
              }}
            >
-              <Status
-                statusID={statusID}
-                instance={instance}
-                withinContext
-                size={thread || ancestor ? 'm' : 's'}
-                enableTranslate
-                onMediaClick={handleMediaClick}
-                onStatusLinkClick={handleStatusLinkClick}
-              />
+              {/* <Link
+              class="status-link"
+              to={instance ? `/${instance}/s/${statusID}` : `/s/${statusID}`}
+              onClick={() => {
+                resetScrollPosition(statusID);
+              }}
+            > */}
+              {i === 0 && ancestor ? (
+                <InView
+                  threshold={0.5}
+                  onChange={(inView) => {
+                    queueMicrotask(() => {
+                      requestAnimationFrame(() => {
+                        setReachTopPost(inView);
+                      });
+                    });
+                  }}
+                >
+                  <Status
+                    statusID={statusID}
+                    instance={instance}
+                    withinContext
+                    size={thread || ancestor ? 'm' : 's'}
+                    enableTranslate
+                    onMediaClick={handleMediaClick}
+                    onStatusLinkClick={handleStatusLinkClick}
+                  />
+                </InView>
+              ) : (
+                <Status
+                  statusID={statusID}
+                  instance={instance}
+                  withinContext
+                  size={thread || ancestor ? 'm' : 's'}
+                  enableTranslate
+                  onMediaClick={handleMediaClick}
+                  onStatusLinkClick={handleStatusLinkClick}
+                />
+              )}
              {ancestor && repliesCount > 1 && (
                <div class="replies-link">
                  <Icon icon="comment2" />{' '}
@ -835,8 +863,8 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
                          </span>
                        </div>
                      )} */}
-              {/* </StatusParent> */}
-            </Link>
+            </StatusParent>
+            // </Link>
          )}
          {descendant && replies?.length > 0 && (
            <SubComments
@ -846,6 +874,10 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
              level={1}
              accWeight={weight}
              openAll={totalDescendants.current < SUBCOMMENTS_OPEN_ALL_LIMIT}
+              parentLink={{
+                to: instance ? `/${instance}/s/${statusID}` : `/s/${statusID}`,
+                onClick: () => resetScrollPosition(statusID),
+              }}
            />
          )}
          {uiState === 'loading' &&
@ -901,6 +933,24 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
    return STATUS_URL_REGEX.test(states.prevLocation?.pathname);
  }, [sKey]);

+  const moreStatusesKeys = useMemo(() => {
+    if (!showMore) return [];
+    const ids = [];
+    function getIDs(status) {
+      ids.push(status.id);
+      if (status.replies) {
+        status.replies.forEach(getIDs);
+      }
+    }
+    statuses.slice(limit).forEach(getIDs);
+    return ids.map((id) => statusKey(id, instance));
+  }, [showMore, statuses, limit, instance]);
+
+  const statusesList = useMemo(
+    () => statuses.slice(0, limit).map(renderStatus),
+    [statuses, limit, renderStatus],
+  );
+
  return (
    <div
      tabIndex="-1"
@ -922,9 +972,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
      }}
    >
      <header
-        class={`${heroInView ? 'inview' : ''} ${
-          uiState === 'loading' ? 'loading' : ''
-        }`}
+        class={`${uiState === 'loading' ? 'loading' : ''}`}
        onDblClick={(e) => {
          // reload statuses
          states.reloadStatusPage++;
@ -998,7 +1046,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
                      behavior: 'smooth',
                    });
                  }}
-                  hidden={!ancestors.length || nearReachStart}
+                  hidden={!ancestors.length || reachTopPost}
                  title={`${ancestors.length} posts above ‒ Go to top`}
                >
                  <Icon icon="arrow-up" />
@ -1147,7 +1195,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
            uiState === 'loading' ? 'loading' : ''
          }`}
        >
-          {statuses.slice(0, limit).map(renderStatus)}
+          {statusesList}
          {showMore > 0 && (
            <li>
              <button
@ -1156,10 +1204,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
                disabled={uiState === 'loading'}
                onClick={() => setLimit((l) => l + LIMIT)}
                style={{ marginBlockEnd: '6em' }}
-                data-state-post-ids={statuses
-                  .slice(limit)
-                  .map((s) => statusKey(s.id, instance))
-                  .join(' ')}
+                data-state-post-ids={moreStatusesKeys.join(' ')}
              >
                <div class="ib avatars-bunch">
                  {/* show avatars for first 5 statuses */}
@ -1218,6 +1263,7 @@ function SubComments({
  level,
  accWeight,
  openAll,
+  parentLink,
 }) {
  const [searchParams, setSearchParams] = useSearchParams();

@ -1304,34 +1350,49 @@ function SubComments({
            />
          ))}
        </span>
-        <b>
-          <span title={replies.length}>{shortenNumber(replies.length)}</span>{' '}
-          repl
-          {replies.length === 1 ? 'y' : 'ies'}
-        </b>
-        {!sameCount && totalComments > 1 && (
-          <>
-            {' '}
-            &middot;{' '}
-            <span>
-              <span title={totalComments}>{shortenNumber(totalComments)}</span>{' '}
-              comment
-              {totalComments === 1 ? '' : 's'}
-            </span>
-          </>
+        <span class="replies-counts">
+          <b>
+            <span title={replies.length}>{shortenNumber(replies.length)}</span>{' '}
+            repl
+            {replies.length === 1 ? 'y' : 'ies'}
+          </b>
+          {!sameCount && totalComments > 1 && (
+            <>
+              {' '}
+              &middot;{' '}
+              <span>
+                <span title={totalComments}>
+                  {shortenNumber(totalComments)}
+                </span>{' '}
+                comment
+                {totalComments === 1 ? '' : 's'}
+              </span>
+            </>
+          )}
+        </span>
+        <Icon icon="chevron-down" class="replies-summary-chevron" />
+        {!!parentLink && (
+          <Link
+            class="replies-parent-link"
+            to={parentLink.to}
+            onClick={parentLink.onClick}
+            title="View post with its replies"
+          >
+            &raquo;
+          </Link>
        )}
      </summary>
      <ul>
        {replies.map((r) => (
          <li key={r.id}>
-            <Link
+            {/* <Link
              class="status-link"
              to={instance ? `/${instance}/s/${r.id}` : `/s/${r.id}`}
              onClick={() => {
                resetScrollPosition(r.id);
              }}
-            >
-              {/* <div class="status-focus" tabIndex={0}> */}
+            > */}
+            <div class="status-focus" tabIndex={0}>
              <Status
                statusID={r.id}
                instance={instance}
@ -1348,8 +1409,8 @@ function SubComments({
                  </span>
                </div>
              )}
-              {/* </div> */}
-            </Link>
+            </div>
+            {/* </Link> */}
            {r.replies?.length && (
              <SubComments
                instance={instance}
@ -1357,6 +1418,12 @@ function SubComments({
                level={level + 1}
                accWeight={!open ? r.weight : totalWeight}
                openAll={openAll}
+                parentLink={{
+                  to: instance ? `/${instance}/s/${r.id}` : `/s/${r.id}`,
+                  onClick: () => {
+                    resetScrollPosition(r.id);
+                  },
+                }}
              />
            )}
          </li>
--- a/src/utils/get-instance-status-url.js
+++ b/src/utils/get-instance-status-url.js
@ -22,7 +22,7 @@ export function getInstanceStatusObject(url) {
      };
    }
  }
-  return null;
+  return {};
 }

 function getInstanceStatusURL(url) {
--- a/src/utils/states.js
+++ b/src/utils/states.js
@ -1,10 +1,13 @@
+import { deepEqual } from 'fast-equals';
 import { proxy, subscribe } from 'valtio';
 import { subscribeKey } from 'valtio/utils';

 import { api } from './api';
+import isMastodonLinkMaybe from './isMastodonLinkMaybe';
 import pmem from './pmem';
 import rateLimit from './ratelimit';
 import store from './store';
+import unfurlMastodonLink from './unfurl-link';

 const states = proxy({
  appVersion: {},
@ -47,6 +50,7 @@ const states = proxy({
  showKeyboardShortcutsHelp: false,
  showGenericAccounts: false,
  showMediaAlt: false,
+  showEmbedModal: false,
  // Shortcuts
  shortcuts: [],
  // Settings
@ -148,6 +152,7 @@ export function hideAllModals() {
  states.showKeyboardShortcutsHelp = false;
  states.showGenericAccounts = false;
  states.showMediaAlt = false;
+  states.showEmbedModal = false;
 }

 export function statusKey(id, instance) {
@ -168,13 +173,15 @@ export function saveStatus(status, instance, opts) {
    opts = instance;
    instance = null;
  }
-  const { override, skipThreading } = Object.assign(
-    { override: true, skipThreading: false },
-    opts,
-  );
+  const {
+    override = true,
+    skipThreading = false,
+    skipUnfurling = false,
+  } = opts || {};
  if (!status) return;
  const oldStatus = getStatus(status.id, instance);
  if (!override && oldStatus) return;
+  if (deepEqual(status, oldStatus)) return;
  queueMicrotask(() => {
    const key = statusKey(status.id, instance);
    if (oldStatus?._pinned) status._pinned = oldStatus._pinned;
@ -189,12 +196,14 @@ export function saveStatus(status, instance, opts) {
  // THREAD TRAVERSER
  if (!skipThreading) {
    queueMicrotask(() => {
-      threadifyStatus(status, instance);
-      if (status.reblog) {
-        queueMicrotask(() => {
-          threadifyStatus(status.reblog, instance);
-        });
-      }
+      threadifyStatus(status.reblog || status, instance);
+    });
+  }
+
+  // UNFURLER
+  if (!skipUnfurling) {
+    queueMicrotask(() => {
+      unfurlStatus(status.reblog || status, instance);
    });
  }
 }
@ -240,6 +249,38 @@ function _threadifyStatus(status, propInstance) {
 }
 export const threadifyStatus = rateLimit(_threadifyStatus, 100);

+const fauxDiv = document.createElement('div');
+export function unfurlStatus(status, instance) {
+  const { instance: currentInstance } = api();
+  const content = status?.content;
+  const hasLink = /<a/i.test(content);
+  if (hasLink) {
+    const sKey = statusKey(status?.id, instance);
+    fauxDiv.innerHTML = content;
+    const links = fauxDiv.querySelectorAll(
+      'a[href]:not(.u-url):not(.mention):not(.hashtag)',
+    );
+    [...links]
+      .filter((a) => {
+        const url = a.href;
+        const isPostItself = url === status.url || url === status.uri;
+        return !isPostItself && isMastodonLinkMaybe(url);
+      })
+      .forEach((a, i) => {
+        unfurlMastodonLink(currentInstance, a.href).then((result) => {
+          if (!result) return;
+          if (!sKey) return;
+          if (!Array.isArray(states.statusQuotes[sKey])) {
+            states.statusQuotes[sKey] = [];
+          }
+          if (!states.statusQuotes[sKey][i]) {
+            states.statusQuotes[sKey].splice(i, 0, result);
+          }
+        });
+      });
+  }
+}
+
 const fetchStatus = pmem((statusID, masto) => {
  return masto.v1.statuses.$select(statusID).fetch();
 });
--- a/src/utils/unfurl-link.jsx
+++ b/src/utils/unfurl-link.jsx
@ -0,0 +1,136 @@
+import pThrottle from 'p-throttle';
+import { snapshot } from 'valtio/vanilla';
+
+import { api } from './api';
+import states, { saveStatus } from './states';
+
+export const throttle = pThrottle({
+  limit: 1,
+  interval: 1000,
+});
+
+const denylistDomains = /(twitter|github)\.com/i;
+const failedUnfurls = {};
+function _unfurlMastodonLink(instance, url) {
+  const snapStates = snapshot(states);
+  if (denylistDomains.test(url)) {
+    return;
+  }
+  if (failedUnfurls[url]) {
+    return;
+  }
+  const instanceRegex = new RegExp(instance + '/');
+  if (instanceRegex.test(snapStates.unfurledLinks[url]?.url)) {
+    return Promise.resolve(snapStates.unfurledLinks[url]);
+  }
+  console.debug('🦦 Unfurling URL', url);
+
+  let remoteInstanceFetch;
+  let theURL = url;
+
+  // https://elk.zone/domain.com/@stest/123 -> https://domain.com/@stest/123
+  if (/\/\/elk\.[^\/]+\/[^\/]+\.[^\/]+/i.test(theURL)) {
+    theURL = theURL.replace(/elk\.[^\/]+\//i, '');
+  }
+
+  // https://trunks.social/status/domain.com/@stest/123 -> https://domain.com/@stest/123
+  if (/\/\/trunks\.[^\/]+\/status\/[^\/]+\.[^\/]+/i.test(theURL)) {
+    theURL = theURL.replace(/trunks\.[^\/]+\/status\//i, '');
+  }
+
+  // https://phanpy.social/#/domain.com/s/123 -> https://domain.com/statuses/123
+  if (/\/#\/[^\/]+\.[^\/]+\/s\/.+/i.test(theURL)) {
+    const urlAfterHash = theURL.split('/#/')[1];
+    const finalURL = urlAfterHash.replace(/\/s\//i, '/@fakeUsername/');
+    theURL = `https://${finalURL}`;
+  }
+
+  let urlObj;
+  try {
+    urlObj = new URL(theURL);
+  } catch (e) {
+    return;
+  }
+  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];
+    const { masto } = api({ instance: domain });
+    remoteInstanceFetch = masto.v1.statuses
+      .$select(id)
+      .fetch()
+      .then((status) => {
+        if (status?.id) {
+          return {
+            status,
+            instance: domain,
+          };
+        } else {
+          throw new Error('No results');
+        }
+      });
+  }
+
+  const { masto } = api({ instance });
+  const mastoSearchFetch = masto.v2.search
+    .fetch({
+      q: theURL,
+      type: 'statuses',
+      resolve: true,
+      limit: 1,
+    })
+    .then((results) => {
+      if (results.statuses.length > 0) {
+        const status = results.statuses[0];
+        return {
+          status,
+          instance,
+        };
+      } else {
+        throw new Error('No results');
+      }
+    });
+
+  function handleFulfill(result) {
+    const { status, instance } = result;
+    const { id } = status;
+    const selfURL = `/${instance}/s/${id}`;
+    console.debug('🦦 Unfurled URL', url, id, selfURL);
+    const data = {
+      id,
+      instance,
+      url: selfURL,
+    };
+    states.unfurledLinks[url] = data;
+    saveStatus(status, instance, {
+      skipThreading: true,
+    });
+    return data;
+  }
+  function handleCatch(e) {
+    failedUnfurls[url] = true;
+  }
+
+  if (remoteInstanceFetch) {
+    // return Promise.any([remoteInstanceFetch, mastoSearchFetch])
+    //   .then(handleFulfill)
+    //   .catch(handleCatch);
+    // If mastoSearchFetch is fulfilled within 3s, return it, else return remoteInstanceFetch
+    const finalPromise = Promise.race([
+      mastoSearchFetch,
+      new Promise((resolve, reject) => setTimeout(reject, 3000)),
+    ]).catch(() => {
+      // If remoteInstanceFetch is fullfilled, return it, else return mastoSearchFetch
+      return remoteInstanceFetch.catch(() => mastoSearchFetch);
+    });
+    return finalPromise.then(handleFulfill).catch(handleCatch);
+  } else {
+    return mastoSearchFetch.then(handleFulfill).catch(handleCatch);
+  }
+}
+
+const unfurlMastodonLink = throttle(_unfurlMastodonLink);
+export default unfurlMastodonLink;
--- a/src/utils/useScrollFn.js
+++ b/src/utils/useScrollFn.js
@ -0,0 +1,130 @@
+import { useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks';
+import { useThrottledCallback } from 'use-debounce';
+
+export default function useScrollFn(
+  {
+    scrollableRef,
+    distanceFromStart = 1, // ratio of clientHeight/clientWidth
+    distanceFromEnd = 1, // ratio of clientHeight/clientWidth
+    scrollThresholdStart = 10,
+    scrollThresholdEnd = 10,
+    direction = 'vertical',
+    distanceFromStartPx: _distanceFromStartPx,
+    distanceFromEndPx: _distanceFromEndPx,
+    init,
+  } = {},
+  callback,
+  deps,
+) {
+  if (!callback) return;
+  const [scrollDirection, setScrollDirection] = useState(null);
+  const [reachStart, setReachStart] = useState(false);
+  const [reachEnd, setReachEnd] = useState(false);
+  const [nearReachStart, setNearReachStart] = useState(false);
+  const [nearReachEnd, setNearReachEnd] = useState(false);
+  const isVertical = direction === 'vertical';
+  const previousScrollStart = useRef(null);
+
+  const onScroll = useThrottledCallback(() => {
+    const scrollableElement = scrollableRef.current;
+    const {
+      scrollTop,
+      scrollLeft,
+      scrollHeight,
+      scrollWidth,
+      clientHeight,
+      clientWidth,
+    } = scrollableElement;
+    const scrollStart = isVertical ? scrollTop : scrollLeft;
+    const scrollDimension = isVertical ? scrollHeight : scrollWidth;
+    const clientDimension = isVertical ? clientHeight : clientWidth;
+    const scrollDistance = Math.abs(scrollStart - previousScrollStart.current);
+    const distanceFromStartPx =
+      _distanceFromStartPx ||
+      Math.min(
+        clientDimension * distanceFromStart,
+        scrollDimension,
+        scrollStart,
+      );
+    const distanceFromEndPx =
+      _distanceFromEndPx ||
+      Math.min(
+        clientDimension * distanceFromEnd,
+        scrollDimension,
+        scrollDimension - scrollStart - clientDimension,
+      );
+
+    if (
+      scrollDistance >=
+      (previousScrollStart.current < scrollStart
+        ? scrollThresholdEnd
+        : scrollThresholdStart)
+    ) {
+      setScrollDirection(
+        previousScrollStart.current < scrollStart ? 'end' : 'start',
+      );
+      previousScrollStart.current = scrollStart;
+    }
+
+    setReachStart(scrollStart <= 0);
+    setReachEnd(scrollStart + clientDimension >= scrollDimension);
+    setNearReachStart(scrollStart <= distanceFromStartPx);
+    setNearReachEnd(
+      scrollStart + clientDimension >= scrollDimension - distanceFromEndPx,
+    );
+  }, 500);
+
+  useLayoutEffect(() => {
+    const scrollableElement = scrollableRef.current;
+    if (!scrollableElement) return {};
+    previousScrollStart.current =
+      scrollableElement[isVertical ? 'scrollTop' : 'scrollLeft'];
+
+    scrollableElement.addEventListener('scroll', onScroll, { passive: true });
+
+    return () => scrollableElement.removeEventListener('scroll', onScroll);
+  }, [
+    distanceFromStart,
+    distanceFromEnd,
+    scrollThresholdStart,
+    scrollThresholdEnd,
+  ]);
+
+  useEffect(() => {
+    callback({
+      scrollDirection,
+      reachStart,
+      reachEnd,
+      nearReachStart,
+      nearReachEnd,
+    });
+  }, [
+    scrollDirection,
+    reachStart,
+    reachEnd,
+    nearReachStart,
+    nearReachEnd,
+    ...deps,
+  ]);
+
+  useEffect(() => {
+    if (init && scrollableRef.current) {
+      queueMicrotask(() => {
+        scrollableRef.current.dispatchEvent(new Event('scroll'));
+      });
+    }
+  }, [init]);
+
+  // return {
+  //   scrollDirection,
+  //   reachStart,
+  //   reachEnd,
+  //   nearReachStart,
+  //   nearReachEnd,
+  //   init: () => {
+  //     if (scrollableRef.current) {
+  //       scrollableRef.current.dispatchEvent(new Event('scroll'));
+  //     }
+  //   },
+  // };
+}
--- a/vite.config.js
+++ b/vite.config.js
@ -9,11 +9,12 @@ import htmlPlugin from 'vite-plugin-html-config';
 import { VitePWA } from 'vite-plugin-pwa';
 import removeConsole from 'vite-plugin-remove-console';

+const allowedEnvPrefixes = ['VITE_', 'PHANPY_'];
 const { NODE_ENV } = process.env;
 const {
  PHANPY_CLIENT_NAME: CLIENT_NAME,
  PHANPY_APP_ERROR_LOGGING: ERROR_LOGGING,
-} = loadEnv('production', process.cwd());
+} = loadEnv('production', process.cwd(), allowedEnvPrefixes);

 const now = new Date();
 let commitHash;
@ -35,7 +36,7 @@ const rollbarCode = fs.readFileSync(
 // https://vitejs.dev/config/
 export default defineConfig({
  base: './',
-  envPrefix: ['VITE_', 'PHANPY_'],
+  envPrefix: allowedEnvPrefixes,
  mode: NODE_ENV,
  define: {
    __BUILD_TIME__: JSON.stringify(now),
Author	SHA1	Message	Date
Alexander Yakovlev	e83f18430c	Merge remote-tracking branch 'origin/main'	2024-01-09 11:33:30 +07:00
Chee Aun	96387c8abb	Merge pull request #392 from JerryLerman/main Update README.md to add hear-me.social	2024-01-08 13:43:55 +08:00
Jerry Lerman	35958d429d	Update README.md to add hear-me.social Added phanpy.hear-me.social to the list of deployed sites	2024-01-07 21:53:54 -05:00
Lim Chee Aun	99b0b7c096	Test disable viewScroll=close for hashtag page menu Possible fix for self-auto-closing when focusing on the input field to add hashtag and the software keyboard resizes the page, causing scroll event to fire and close the menu itself	2024-01-07 12:30:51 +08:00
Lim Chee Aun	e44ac16396	Fix flash of unscrolled position Due to statuses being memo-ed, need to speed up the scroll position setup	2024-01-06 19:15:48 +08:00
Lim Chee Aun	147a12cbcb	Handle cards with iframe embeds	2024-01-06 16:46:45 +08:00
Lim Chee Aun	16e2ac9bce	Test better equal checks	2024-01-06 12:31:25 +08:00
Lim Chee Aun	1574be2b35	Test content-visibility: auto on off-screen columns	2024-01-06 12:23:43 +08:00
Lim Chee Aun	7223baaaad	Better error handling for image desc generator 400 doesn't throw error	2024-01-06 12:23:15 +08:00
Lim Chee Aun	9cffd429b0	Potential fix to infinite loop of intersection observer	2024-01-06 03:15:24 +08:00
Lim Chee Aun	9a5d749b8d	Better search suggestion styles Lighter style and fifferentiate between hover and focus	2024-01-06 01:04:14 +08:00
Lim Chee Aun	e43f2283dd	Resolve account URLs too	2024-01-06 01:03:30 +08:00
Lim Chee Aun	be5fcc35ac	Comment line extended if there's status pre-meta	2024-01-05 19:18:05 +08:00
Lim Chee Aun	54314de976	Experiment unlinked replies (again) But still show link to the post's "thread"	2024-01-05 19:15:22 +08:00
Lim Chee Aun	bc2886f7e2	Ancestor indicator animates smoother with spring	2024-01-05 19:13:51 +08:00
Lim Chee Aun	2bc1b8387e	Fix missing name & short_name inside webmanifest Need to pass env prefix to loadEnv too	2024-01-05 09:14:09 +08:00
Lim Chee Aun	3989b218d0	Need to encode the query	2024-01-04 22:00:27 +08:00
Lim Chee Aun	a8331375ba	Double make sure header change doesn't block scrolling	2024-01-04 19:09:30 +08:00
Lim Chee Aun	6919975c6d	Remove unneeded .inview	2024-01-04 19:08:51 +08:00
Lim Chee Aun	c0987209a8	Only threadify & unfurl non-reblog post object	2024-01-04 18:56:11 +08:00
Lim Chee Aun	d25c2df392	Warn if icon not found	2024-01-04 18:55:21 +08:00
Lim Chee Aun	848433365d	Don't limit 80px if more than 2 media	2024-01-04 18:55:14 +08:00
Lim Chee Aun	3d4ebb8abe	Adjust rootMargin	2024-01-03 10:54:55 +08:00
Lim Chee Aun	72dc4cc81b	Test disable menu animation	2024-01-03 09:53:08 +08:00
Lim Chee Aun	92c0a8b4f0	Test memoize svg icon	2024-01-03 09:49:48 +08:00
Lim Chee Aun	1adcca5666	Fix destructure error	2024-01-03 07:27:39 +08:00
Lim Chee Aun	b4d4c61128	Experiment delay render items in carousel	2024-01-02 19:56:54 +08:00
Lim Chee Aun	764125e6b9	Test replace scroll-based to inview	2024-01-02 19:26:05 +08:00
Lim Chee Aun	098df0ad2c	Test move this out of component mount It needs to run faster	2024-01-02 17:45:58 +08:00
Lim Chee Aun	e41e49884f	Less paragraph margins for status cards	2024-01-02 17:45:21 +08:00
Lim Chee Aun	852f7090f6	Status card style changes	2024-01-02 12:27:39 +08:00
Lim Chee Aun	d54511aa10	Test a bunch of perf-related style changes	2024-01-02 12:27:22 +08:00
Lim Chee Aun	d8ceb03d74	Throttle scroll events	2024-01-02 12:25:25 +08:00
Lim Chee Aun	df393ae959	Use InView to replace nearReachStart	2024-01-02 12:25:01 +08:00
Lim Chee Aun	0ebbc5b34e	Don't need nearReachEnd, use InView more	2024-01-02 12:24:03 +08:00
Lim Chee Aun	cf52e0776e	Don't need reachStart from useScroll	2024-01-02 12:20:36 +08:00
Lim Chee Aun	b168707c14	Revert "Remove DEV check" This reverts commit `d2fb86036c`.	2024-01-01 18:31:59 +08:00
Lim Chee Aun	d2fb86036c	Remove DEV check It refers to local dev, not the dev site	2024-01-01 18:29:21 +08:00
Lim Chee Aun	62c8a51307	Test another temp color	2023-12-31 09:39:07 +08:00
Lim Chee Aun	f056d7407a	Attempt to fix iOS status bar color	2023-12-31 08:02:32 +08:00
Lim Chee Aun	c3e40297e0	Add a little delay	2023-12-30 21:51:10 +08:00
Lim Chee Aun	d6099df51b	Experiment unindenting deep single replies	2023-12-30 21:16:30 +08:00
Lim Chee Aun	096bc69584	Fix child replies accidentally got GC-ed	2023-12-30 21:03:10 +08:00
Lim Chee Aun	32d32b72f4	Less radius for animated media	2023-12-30 20:29:21 +08:00
Lim Chee Aun	796b365fd8	Disable animation if hidden	2023-12-30 20:17:34 +08:00
Lim Chee Aun	bd38122f1b	Extract unfurling out of status component	2023-12-30 18:13:56 +08:00
Lim Chee Aun	d7d838ebf8	Rebuild useScroll, less states	2023-12-29 18:29:08 +08:00
Lim Chee Aun	de3787209e	Make bold less bold	2023-12-29 18:16:19 +08:00
Lim Chee Aun	6500be2782	Disable hotkeys in quote posts	2023-12-29 18:16:08 +08:00
Lim Chee Aun	2240380f68	Fix wrong month shown for different system date formats	2023-12-29 14:27:43 +08:00