Merge pull request #13 from cheeaun/main

Update from main
2022-12-21 21:32:38 +08:00 · 2022-12-21 21:32:38 +08:00 · 77ba42dba9
parent 95e204c439 c828f53f09
commit 77ba42dba9
26 changed files with 504 additions and 259 deletions
--- a/index.html
+++ b/index.html
@ -2,7 +2,10 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, viewport-fit=cover"
+    />
    <title>Phanpy</title>
    <meta
      name="description"
--- a/package-lock.json
+++ b/package-lock.json
@ -13,6 +13,7 @@
        "fast-blurhash": "~1.1.2",
        "history": "~5.3.0",
        "iconify-icon": "~1.0.2",
+        "just-debounce-it": "^3.2.0",
        "masto": "~4.10.1",
        "mem": "~9.0.2",
        "preact": "~10.11.3",
@ -4046,6 +4047,11 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/just-debounce-it": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/just-debounce-it/-/just-debounce-it-3.2.0.tgz",
+      "integrity": "sha512-WXzwLL0745uNuedrCsCs3rpmfD6DBaf7uuVwaq98/8dafURfgQaBsSpjiPp5+CW6Vjltwy9cOGI6qE71b3T8iQ=="
+    },
    "node_modules/kolorist": {
      "version": "1.6.0",
      "resolved": "https://registry.npmjs.org/kolorist/-/kolorist-1.6.0.tgz",
@ -8562,6 +8568,11 @@
      "integrity": "sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ==",
      "dev": true
    },
+    "just-debounce-it": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/just-debounce-it/-/just-debounce-it-3.2.0.tgz",
+      "integrity": "sha512-WXzwLL0745uNuedrCsCs3rpmfD6DBaf7uuVwaq98/8dafURfgQaBsSpjiPp5+CW6Vjltwy9cOGI6qE71b3T8iQ=="
+    },
    "kolorist": {
      "version": "1.6.0",
      "resolved": "https://registry.npmjs.org/kolorist/-/kolorist-1.6.0.tgz",
--- a/package.json
+++ b/package.json
@ -15,6 +15,7 @@
    "fast-blurhash": "~1.1.2",
    "history": "~5.3.0",
    "iconify-icon": "~1.0.2",
+    "just-debounce-it": "^3.2.0",
    "masto": "~4.10.1",
    "mem": "~9.0.2",
    "preact": "~10.11.3",
--- a/public/logo-maskable-512.png
+++ b/public/logo-maskable-512.png
--- a/public/sw.js
+++ b/public/sw.js
@ -5,12 +5,17 @@ import { CacheFirst, StaleWhileRevalidate } from 'workbox-strategies';

 const imageRoute = new Route(
  ({ request, sameOrigin }) => {
-    return !sameOrigin && request.destination === 'image';
+    const isRemote = !sameOrigin;
+    const isImage = request.destination === 'image';
+    const isAvatar = request.url.includes('/avatars/');
+    const isEmoji = request.url.includes('/emoji/');
+    return isRemote && isImage && (isAvatar || isEmoji);
  },
  new CacheFirst({
    cacheName: 'remote-images',
    plugins: [
      new ExpirationPlugin({
+        maxEntries: 100,
        maxAgeSeconds: 7 * 24 * 60 * 60, // 7 days
        purgeOnQuotaError: true,
      }),
--- a/src/app.css
+++ b/src/app.css
@ -137,6 +137,7 @@ a.mention span {
    transparent
  );
  background-repeat: no-repeat;
+  transition: opacity 0.3s ease-in-out;
 }
 .timeline.contextual > li:first-child {
  background-position: 0 16px;
@ -273,6 +274,14 @@ a.mention span {
 .timeline.contextual > li.thread .replies li:before {
  left: calc(50px + 16px + 16px);
 }
+.timeline.contextual.loading > li:not(.hero) {
+  opacity: 0.5;
+  pointer-events: none;
+  /* background-image: none !important; */
+}
+/* .timeline.contextual.loading > li:not(.hero):before {
+  content: none !important;
+} */

 .timeline-deck.compact .status {
  max-height: max(25vh, 160px);
@ -334,12 +343,12 @@ a.mention span {
 }
@keyframes slide-in {
  0% {
-    opacity: 0;
-    transform: translateX(100%);
+    opacity: 0.5;
+    transform: translate3d(100%, 0, 0);
  }
  100% {
    opacity: 1;
-    transform: translateX(0);
+    transform: translate3d(0, 0, 0);
  }
 }
 .deck-backdrop .deck {
@ -347,7 +356,7 @@ a.mention span {
  max-width: 100vw;
  border-left: 1px solid var(--divider-color);
  background-color: var(--bg-color);
-  animation: slide-in 0.2s ease-out;
+  animation: slide-in 0.5s var(--timing-function);
  box-shadow: -1px 0 var(--bg-color);
 }
 .deck-backdrop .deck .status {
@ -356,7 +365,7 @@ a.mention span {

 .decks {
  flex-grow: 1;
-  transition: transform 0.2s ease-in-out;
+  transition: transform 0.5s var(--timing-function);
 }

 .deck-close {
@ -405,31 +414,6 @@ a.mention span {
  width: 40em;
  max-width: 100vw;
  padding: 16px;
-  background-color: var(--bg-color);
-  border-radius: 8px;
-  border: 1px solid var(--divider-color);
-  overflow: auto;
-  max-height: 90vh;
-  max-height: 90dvh;
-  position: relative;
-}
-.box > :is(h1, h2, h3):first-of-type {
-  margin-top: 0;
-}
-.box .close-button {
-  position: sticky;
-  top: 0;
-  float: right;
-  margin: -16px -8px 0 0;
-  transform: translate(0, -8px);
-}
-
-.box-shadow {
-  box-shadow: 0px 36px 89px rgb(0 0 0 / 4%),
-    0px 23.3333px 52.1227px rgb(0 0 0 / 3%),
-    0px 13.8667px 28.3481px rgb(0 0 0 / 2%), 0px 7.2px 14.4625px rgb(0 0 0 / 2%),
-    0px 2.93333px 7.25185px rgb(0 0 0 / 2%),
-    0px 0.666667px 3.50231px rgb(0 0 0 / 1%);
 }

 /* CAROUSEL */
@ -463,6 +447,9 @@ a.mention span {
  max-height: 100vh;
  max-height: 100dvh;
 }
+.carousel > * video {
+  min-height: 80px;
+}

 .carousel-top-controls {
  top: 0;
@ -587,7 +574,7 @@ button.carousel-dot[disabled].active {
  padding-right: max(16px, env(safe-area-inset-right));
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  box-shadow: 0 -1px 32px var(--divider-color);
-  animation: slide-up 0.2s ease-out;
+  animation: slide-up 0.2s var(--timing-function);
  border: 1px solid var(--outline-color);
 }

@ -632,13 +619,15 @@ button.carousel-dot[disabled].active {
  border: 1px solid var(--outline-color);
  border-radius: 8px;
  transition: all 0.2s ease-in-out;
+  box-shadow: 0 0 8px var(--bg-faded-color), 0 4px 8px var(--bg-faded-color),
+    0 2px 4px var(--bg-faded-color);
 }
 .menu-container menu li {
  margin: 0;
  padding: 0;
  list-style: none;
 }
-.menu-container > button:is(:active, :focus) + menu,
+.menu-container > button:is(:hover, :active, :focus) + menu,
 .menu-container menu:is(:hover, :active) {
  opacity: 1;
  pointer-events: auto;
@ -663,7 +652,7 @@ button.carousel-dot[disabled].active {
    display: flex;
  }
  .decks:has(~ .deck-backdrop) {
-    transform: translateX(-5vw);
+    transform: translate3d(-5vw, 0, 0);
  }
  .deck-backdrop .deck {
    width: 50%;
--- a/src/app.jsx
+++ b/src/app.jsx
@ -104,7 +104,7 @@ async function startStream() {
 export function App() {
  const snapStates = useSnapshot(states);
  const [isLoggedIn, setIsLoggedIn] = useState(false);
-  const [uiState, setUIState] = useState('default');
+  const [uiState, setUIState] = useState('loading');

  useLayoutEffect(() => {
    const theme = store.local.get('theme');
@ -144,6 +144,7 @@ export function App() {
          url: `https://${instanceURL}`,
          accessToken,
          disableVersionCheck: true,
+          timeout: 30_000,
        });

        const mastoAccount = await masto.accounts.verifyCredentials();
@ -185,6 +186,7 @@ export function App() {
            url: `https://${instanceURL}`,
            accessToken,
            disableVersionCheck: true,
+            timeout: 30_000,
          });
          setIsLoggedIn(true);
        } catch (e) {
@ -192,6 +194,8 @@ export function App() {
        }
        setUIState('default');
      })();
+    } else {
+      setUIState('default');
    }
  }, []);

--- a/src/components/compose.css
+++ b/src/components/compose.css
@ -78,6 +78,7 @@
  text-shadow: 0 1px 10px var(--bg-color), 0 1px 10px var(--bg-color),
    0 1px 10px var(--bg-color), 0 1px 10px var(--bg-color),
    0 1px 10px var(--bg-color);
+  z-index: 2;
 }
 #_compose-container .status-preview-legend.reply-to {
  color: var(--reply-to-color);
@ -359,3 +360,10 @@
  width: 100%;
  color: var(--red-color);
 }
+
+@media (display-mode: standalone) {
+  /* No popping in standalone mode */
+  #compose-container .pop-button {
+    display: none;
+  }
+}
--- a/src/components/compose.jsx
+++ b/src/components/compose.jsx
@ -256,6 +256,12 @@ function Compose({
  const canClose = () => {
    const { value, dataset } = textareaRef.current;

+    // check if loading
+    if (uiState === 'loading') {
+      console.log('canClose', { uiState });
+      return false;
+    }
+
    // check for status and media attachments
    const hasMediaAttachments = mediaAttachments.length > 0;
    if (!value && !hasMediaAttachments) {
@ -297,6 +303,7 @@ function Compose({
      isSelf,
      hasOnlyAcct,
      sameWithSource,
+      uiState,
    });

    return false;
@ -341,7 +348,8 @@ function Compose({
          <span>
            <button
              type="button"
-              class="light"
+              class="light pop-button"
+              disabled={uiState === 'loading'}
              onClick={() => {
                // If there are non-ID media attachments (not yet uploaded), show confirmation dialog because they are not going to be passed to the new window
                const containNonIDMediaAttachments =
@ -386,6 +394,7 @@ function Compose({
            <button
              type="button"
              class="light close-button"
+              disabled={uiState === 'loading'}
              onClick={() => {
                if (confirmClose()) {
                  onClose();
@ -399,7 +408,8 @@ function Compose({
          hasOpener && (
            <button
              type="button"
-              class="light"
+              class="light pop-button"
+              disabled={uiState === 'loading'}
              onClick={() => {
                // If there are non-ID media attachments (not yet uploaded), show confirmation dialog because they are not going to be passed to the new window
                const containNonIDMediaAttachments =
@ -532,7 +542,6 @@ function Compose({
                    const params = {
                      file,
                      description,
-                      skipPolling: true,
                    };
                    return masto.mediaAttachments.create(params).then((res) => {
                      if (res.id) {
@ -554,6 +563,7 @@ function Compose({
                  // Alert all the reasons
                  results.forEach((result) => {
                    if (result.status === 'rejected') {
+                      console.error(result);
                      alert(result.reason || `Attachment #${i} failed`);
                    }
                  });
--- a/src/components/name-text.jsx
+++ b/src/components/name-text.jsx
@ -6,11 +6,18 @@ import states from '../utils/states';
 import Avatar from './avatar';

 function NameText({ account, showAvatar, showAcct, short, external }) {
-  const { acct, avatar, avatarStatic, id, url, displayName, username, emojis } =
-    account;
+  const { acct, avatar, avatarStatic, id, url, displayName, emojis } = account;
+  let { username } = account;

  const displayNameWithEmoji = emojifyText(displayName, emojis);

+  if (
+    !short &&
+    username.toLowerCase().trim() === (displayName || '').toLowerCase().trim()
+  ) {
+    username = null;
+  }
+
  return (
    <a
      class={`name-text ${short ? 'short' : ''}`}
@ -35,7 +42,7 @@ function NameText({ account, showAvatar, showAcct, short, external }) {
              __html: displayNameWithEmoji,
            }}
          />
-          {!showAcct && (
+          {!showAcct && username && (
            <>
              {' '}
              <i>@{username}</i>
--- a/src/components/status.css
+++ b/src/components/status.css
@ -62,6 +62,7 @@
  padding: 16px 16px 20px;
  line-height: 1.5;
  align-items: flex-start;
+  position: relative;
 }
 .status.large {
  --fade-in-out-bg: linear-gradient(
@ -81,7 +82,7 @@
  padding-top: 8px;
 }
 .status.small {
-  font-size: 95%;
+  /* font-size: 95%; */
 }
 .status.skeleton {
  color: var(--outline-color);
@ -283,6 +284,7 @@
 }
 .status .media-video {
  position: relative;
+  background-clip: padding-box;
 }
 .status .media-video:before {
  /* draw a circle in the middle */
@ -408,6 +410,16 @@ a.card:hover {

 /* POLLS */

+.poll {
+  transition: opacity 0.2s ease-in-out;
+}
+.poll.loading {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.poll.read-only {
+  pointer-events: none;
+}
 .poll-option {
  margin-top: 8px;
  padding: 8px;
@ -607,6 +619,26 @@ a.card:hover {
  color: var(--green-color);
 }

+/* BADGE */
+
+.status-badge {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  line-height: 0;
+  pointer-events: none;
+  opacity: 0.75;
+}
+.status-badge .favourite {
+  color: var(--favourite-color);
+}
+.status-badge .reblog {
+  color: var(--reblog-color);
+}
+.status-badge .bookmark {
+  color: var(--link-color);
+}
+
 /* MISC */

 .status-aside {
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@ -130,7 +130,7 @@ function Status({
    }
  }

-  const [showSpoiler, setShowSpoiler] = useState(false);
+  const showSpoiler = snapStates.spoilers.has(id) || false;

  const debugHover = (e) => {
    if (e.shiftKey) {
@ -197,6 +197,13 @@ function Status({
      }`}
      onMouseEnter={debugHover}
    >
+      {size !== 'l' && (
+        <div class="status-badge">
+          {reblogged && <Icon class="reblog" icon="rocket" size="s" />}
+          {favourited && <Icon class="favourite" icon="heart" size="s" />}
+          {bookmarked && <Icon class="bookmark" icon="bookmark" size="s" />}
+        </div>
+      )}
      {size !== 's' && (
        <a
          href={url}
@ -293,7 +300,11 @@ function Status({
                onClick={(e) => {
                  e.preventDefault();
                  e.stopPropagation();
-                  setShowSpoiler(!showSpoiler);
+                  if (showSpoiler) {
+                    states.spoilers.delete(id);
+                  } else {
+                    states.spoilers.set(id, true);
+                  }
                }}
              >
                <Icon icon={showSpoiler ? 'eye-open' : 'eye-close'} />{' '}
@ -348,7 +359,15 @@ function Status({
              }),
            }}
          />
-          {!!poll && <Poll poll={poll} readOnly={readOnly} />}
+          {!!poll && (
+            <Poll
+              poll={poll}
+              readOnly={readOnly}
+              onUpdate={(newPoll) => {
+                states.statuses.get(id).poll = newPoll;
+              }}
+            />
+          )}
          {!spoilerText && sensitive && !!mediaAttachments.length && (
            <button
              class="plain spoiler"
@ -356,7 +375,11 @@ function Status({
              onClick={(e) => {
                e.preventDefault();
                e.stopPropagation();
-                setShowSpoiler(!showSpoiler);
+                if (showSpoiler) {
+                  states.spoilers.delete(id);
+                } else {
+                  states.spoilers.add(id);
+                }
              }}
            >
              <Icon icon={showSpoiler ? 'eye-open' : 'eye-close'} /> Sensitive
@ -455,6 +478,14 @@ function Status({
                    count={reblogsCount}
                    onClick={async () => {
                      try {
+                        if (!reblogged) {
+                          const yes = confirm(
+                            'Are you sure that you want to boost this post?',
+                          );
+                          if (!yes) {
+                            return;
+                          }
+                        }
                        // Optimistic
                        states.statuses.set(id, {
                          ...status,
@ -607,7 +638,7 @@ video = Video clip
 audio = Audio track
 */

-function Media({ media, showOriginal, onClick }) {
+function Media({ media, showOriginal, onClick = () => {} }) {
  const { blurhash, description, meta, previewUrl, remoteUrl, url, type } =
    media;
  const { original, small, focus } = meta || {};
@ -850,14 +881,9 @@ function Card({ card }) {
  }
 }

-function Poll({ poll, readOnly }) {
-  const [pollSnapshot, setPollSnapshot] = useState(poll);
+function Poll({ poll, readOnly, onUpdate = () => {} }) {
  const [uiState, setUIState] = useState('default');

-  useEffect(() => {
-    setPollSnapshot(poll);
-  }, [poll]);
-
  const {
    expired,
    expiresAt,
@ -868,12 +894,16 @@ function Poll({ poll, readOnly }) {
    voted,
    votersCount,
    votesCount,
-  } = pollSnapshot;
+  } = poll;

  const expiresAtDate = !!expiresAt && new Date(expiresAt);

  return (
-    <div class="poll">
+    <div
+      class={`poll ${readOnly ? 'read-only' : ''} ${
+        uiState === 'loading' ? 'loading' : ''
+      }`}
+    >
      {voted || expired ? (
        options.map((option, i) => {
          const { title, votesCount: optionVotesCount } = option;
@ -930,13 +960,9 @@ function Poll({ poll, readOnly }) {
              choices: votes,
            });
            console.log(pollResponse);
-            setPollSnapshot(pollResponse);
+            onUpdate(pollResponse);
            setUIState('default');
          }}
-          style={{
-            pointerEvents: uiState === 'loading' || readOnly ? 'none' : 'auto',
-            opacity: uiState === 'loading' ? 0.5 : 1,
-          }}
        >
          {options.map((option, i) => {
            const { title } = option;
@ -968,6 +994,31 @@ function Poll({ poll, readOnly }) {
      )}
      {!readOnly && (
        <p class="poll-meta">
+          {!expired && (
+            <>
+              <button
+                type="button"
+                class="textual"
+                disabled={uiState === 'loading'}
+                onClick={(e) => {
+                  e.preventDefault();
+                  setUIState('loading');
+                  (async () => {
+                    try {
+                      const pollResponse = await masto.poll.fetch(id);
+                      onUpdate(pollResponse);
+                    } catch (e) {
+                      // Silent fail
+                    }
+                    setUIState('default');
+                  })();
+                }}
+              >
+                Refresh
+              </button>{' '}
+              &bull;{' '}
+            </>
+          )}
          <span title={votersCount}>{shortenNumber(votersCount)}</span>{' '}
          {votersCount === 1 ? 'voter' : 'voters'}
          {votersCount !== votesCount && (
@ -1012,10 +1063,10 @@ function EditedAtModal({ statusID, onClose = () => {} }) {
  const currentYear = new Date().getFullYear();

  return (
-    <div id="edit-history" class="box">
-      <button type="button" class="close-button plain large" onClick={onClose}>
+    <div id="edit-history" class="sheet">
+      {/* <button type="button" class="close-button plain large" onClick={onClose}>
        <Icon icon="x" alt="Close" />
-      </button>
+      </button> */}
      <h2>Edit History</h2>
      {uiState === 'error' && <p>Failed to load history</p>}
      {uiState === 'loading' && (
--- a/src/compose.jsx
+++ b/src/compose.jsx
@ -29,6 +29,7 @@ if (window.opener) {
      url: `https://${instanceURL}`,
      accessToken,
      disableVersionCheck: true,
+      timeout: 30_000,
    });
    console.info('Logged in successfully.');
  } catch (e) {
--- a/src/index.css
+++ b/src/index.css
@ -30,6 +30,8 @@
  --img-bg-color: rgba(128, 128, 128, 0.2);
  --loader-color: #1c1e2199;
  --comment-line-color: #e5e5e5;
+
+  --timing-function: cubic-bezier(0.3, 0.5, 0, 1);
 }

@media (prefers-color-scheme: dark) {
@ -118,8 +120,9 @@ button,
  vertical-align: middle;
  text-decoration: none;
 }
-button > * {
+:is(button, .button) > * {
  vertical-align: middle;
+  pointer-events: none;
 }
 :is(button, .button):not(:disabled, .disabled):hover {
  cursor: pointer;
@ -154,6 +157,15 @@ button > * {
  padding: 12px;
 }

+:is(button, .button).textual {
+  padding: 0;
+  margin: 0;
+  vertical-align: baseline;
+  color: var(--link-color);
+  background-color: transparent;
+  border-radius: 0;
+}
+
 input[type='text'],
 textarea,
 select {
--- a/src/pages/home.jsx
+++ b/src/pages/home.jsx
@ -82,6 +82,7 @@ function Home({ hidden }) {
        const diffMins = Math.round(diff / 1000 / 60);
        if (diffMins > 1) {
          console.log('visible', { lastHidden, diffMins });
+          setUIState('loading');
          setTimeout(() => {
            (async () => {
              const newStatus = await masto.timelines.fetchHome({
@ -91,6 +92,7 @@ function Home({ hidden }) {
              if (newStatus.length && newStatus[0].id !== states.home[0].id) {
                states.homeNew = newStatus;
              }
+              setUIState('default');
            })();
            // loadStatuses(true);
            // states.homeNew = [];
@ -101,6 +103,7 @@ function Home({ hidden }) {
    document.addEventListener('visibilitychange', handleVisibilityChange);
    return () => {
      document.removeEventListener('visibilitychange', handleVisibilityChange);
+      setUIState('default');
    };
  }, []);

--- a/src/pages/login.css
+++ b/src/pages/login.css
@ -0,0 +1,26 @@
+#login {
+  padding: 16px;
+  background-image: radial-gradient(
+    closest-side at 50% 50%,
+    var(--bg-color),
+    transparent
+  );
+}
+
+#login .error {
+  color: var(--red-color);
+}
+
+#login label p {
+  margin: 0 0 0.25em 0;
+  padding: 0;
+  text-transform: uppercase;
+  font-size: 90%;
+  font-weight: bold;
+  color: var(--text-insignificant-color);
+}
+
+#login input {
+  display: block;
+  width: 100%;
+}
--- a/src/pages/login.jsx
+++ b/src/pages/login.jsx
@ -1,3 +1,5 @@
+import './login.css';
+
 import { useEffect, useRef, useState } from 'preact/hooks';

 import Loader from '../components/loader';
@ -53,7 +55,7 @@ function Login() {
  };

  return (
-    <main class="box" style={{ textAlign: 'center' }}>
+    <main id="login" style={{ textAlign: 'center' }}>
      <form onSubmit={onSubmit}>
        <h1>Log in</h1>
        <label>
@ -82,8 +84,8 @@ function Login() {
          <button class="large" disabled={uiState === 'loading'}>
            Log in
          </button>{' '}
-          <Loader hidden={uiState !== 'loading'} />
        </p>
+        <Loader hidden={uiState !== 'loading'} />
        <hr />
        <p>
          <a href="https://joinmastodon.org/servers" target="_blank">
--- a/src/pages/notifications.css
+++ b/src/pages/notifications.css
@ -17,20 +17,20 @@
  opacity: 0.75;
  color: var(--text-insignificant-color);
 }
-.notification-type.favourite {
+.notification-type.notification-favourite {
  color: var(--favourite-color);
 }
-.notification-type.reblog {
+.notification-type.notification-reblog {
  color: var(--reblog-color);
 }
-.notification-type.poll,
-.notification-type.mention {
+.notification-type.notification-poll,
+.notification-type.notification-mention {
  color: var(--link-color);
 }

 .notification .status-link {
  border-radius: 8px 8px 0 0;
-  border: 1px solid var(--divider-color);
+  border: 1px solid var(--outline-color);
  max-height: 160px;
  overflow: hidden;
  /* fade out mask gradient bottom */
@ -41,9 +41,16 @@
  );
  filter: saturate(0.25);
 }
+.notification .status-link.status-type-mention {
+  max-height: 320px;
+  filter: none;
+  background-color: var(--bg-color);
+  margin-top: calc(-16px - 1px);
+}
 .notification .status-link:hover {
  background-color: var(--bg-blur-color);
  filter: saturate(1);
+  border-color: var(--outline-hover-color);
 }
 .notification .status-link > * {
  pointer-events: none;
--- a/src/pages/notifications.jsx
+++ b/src/pages/notifications.jsx
@ -41,7 +41,7 @@ const contentText = {
  update: 'A status you interacted with has been edited.',
 };

-const LIMIT = 20;
+const LIMIT = 30; // 30 is the maximum limit :(

 function Notification({ notification }) {
  const { id, type, status, account, _accounts } = notification;
@ -61,7 +61,7 @@ function Notification({ notification }) {
  return (
    <>
      <div
-        class={`notification-type ${type}`}
+        class={`notification-type notification-${type}`}
        title={new Date(notification.createdAt).toLocaleString()}
      >
        <Icon
@ -82,34 +82,36 @@ function Notification({ notification }) {
        />
      </div>
      <div class="notification-content">
-        <p>
-          {!/poll|update/i.test(type) && (
-            <>
-              {_accounts?.length > 1 ? (
-                <>
-                  <b>{_accounts.length} people</b>{' '}
-                </>
-              ) : (
-                <>
-                  <NameText account={account} showAvatar />{' '}
-                </>
-              )}
-            </>
-          )}
-          {text}
-          {type === 'mention' && (
-            <span class="insignificant">
-              {' '}
-              •{' '}
-              <relative-time
-                datetime={notification.createdAt}
-                format="micro"
-                threshold="P1D"
-                prefix=""
-              />
-            </span>
-          )}
-        </p>
+        {type !== 'mention' && (
+          <p>
+            {!/poll|update/i.test(type) && (
+              <>
+                {_accounts?.length > 1 ? (
+                  <>
+                    <b>{_accounts.length} people</b>{' '}
+                  </>
+                ) : (
+                  <>
+                    <NameText account={account} showAvatar />{' '}
+                  </>
+                )}
+              </>
+            )}
+            {text}
+            {type === 'mention' && (
+              <span class="insignificant">
+                {' '}
+                •{' '}
+                <relative-time
+                  datetime={notification.createdAt}
+                  format="micro"
+                  threshold="P1D"
+                  prefix=""
+                />
+              </span>
+            )}
+          </p>
+        )}
        {_accounts?.length > 1 && (
          <p>
            {_accounts.map((account, i) => (
@ -142,7 +144,10 @@ function Notification({ notification }) {
          </p>
        )}
        {status && (
-          <Link class="status-link" href={`#/s/${actualStatusID}`}>
+          <Link
+            class={`status-link status-type-${type}`}
+            href={`#/s/${actualStatusID}`}
+          >
            <Status status={status} size="s" />
          </Link>
        )}
--- a/src/pages/settings.css
+++ b/src/pages/settings.css
@ -1,10 +1,5 @@
-#settings-container {
-  padding-bottom: 3em;
-  animation: fade-in 0.2s ease-out;
-}
-
 #settings-container h2 {
-  font-size: .9em;
+  font-size: 0.9em;
  text-transform: uppercase;
  color: var(--text-insignificant-color);
 }
@ -48,7 +43,7 @@
  text-align: right;
 }
 #settings-container div,
-#settings-container div > *{
+#settings-container div > * {
  vertical-align: middle;
 }
 #settings-container .avatar {
@ -63,7 +58,7 @@
  overflow: hidden;
  padding: 1px;
 }
-#settings-container .radio-group input[type="radio"] {
+#settings-container .radio-group input[type='radio'] {
  opacity: 0;
  position: absolute;
  pointer-events: none;
@ -87,4 +82,4 @@
 }
 #settings-container .radio-group label:has(input:checked) input:checked + span {
  color: inherit;
-}
+}
--- a/src/pages/settings.jsx
+++ b/src/pages/settings.jsx
@ -23,10 +23,10 @@ function Settings({ onClose }) {
  const [currentDefault, setCurrentDefault] = useState(0);

  return (
-    <div id="settings-container" class="box">
-      <button type="button" class="close-button plain large" onClick={onClose}>
+    <div id="settings-container" class="sheet">
+      {/* <button type="button" class="close-button plain large" onClick={onClose}>
        <Icon icon="x" alt="Close" />
-      </button>
+      </button> */}
      <h2>Accounts</h2>
      <ul class="accounts-list">
        {accounts.map((account, i) => {
--- a/src/pages/status.jsx
+++ b/src/pages/status.jsx
@ -1,3 +1,4 @@
+import debounce from 'just-debounce-it';
 import { Link } from 'preact-router/match';
 import {
  useEffect,
@ -13,124 +14,168 @@ import Loader from '../components/loader';
 import Status from '../components/status';
 import shortenNumber from '../utils/shorten-number';
 import states from '../utils/states';
+import store from '../utils/store';
 import useTitle from '../utils/useTitle';

 function StatusPage({ id }) {
  const snapStates = useSnapshot(states);
-  const [statuses, setStatuses] = useState([{ id }]);
+  const [statuses, setStatuses] = useState([]);
  const [uiState, setUIState] = useState('default');
+  const userInitiated = useRef(true); // Initial open is user-initiated
  const heroStatusRef = useRef();

-  useEffect(async () => {
-    const containsStatus = statuses.find((s) => s.id === id);
-    const statusesWithSameAccountID = statuses.filter(
-      (s) => s.accountID === containsStatus?.accountID,
-    );
-    if (statusesWithSameAccountID.length > 1) {
-      setStatuses(
-        statusesWithSameAccountID.map((s) => ({
-          ...s,
-          thread: true,
-          descendant: undefined,
-          ancestor: undefined,
-        })),
-      );
-    } else {
-      setStatuses([{ id }]);
-    }
+  const scrollableRef = useRef();
+  useEffect(() => {
+    const onScroll = debounce(() => {
+      // console.log('onScroll');
+      const { scrollTop } = scrollableRef.current;
+      states.scrollPositions.set(id, scrollTop);
+    }, 100);
+    scrollableRef.current.addEventListener('scroll', onScroll, {
+      passive: true,
+    });
+    onScroll();
+    return () => {
+      scrollableRef.current?.removeEventListener('scroll', onScroll);
+    };
+  }, [id]);

+  useEffect(() => {
    setUIState('loading');

-    const hasStatus = snapStates.statuses.has(id);
-    let heroStatus = snapStates.statuses.get(id);
-    try {
-      heroStatus = await masto.statuses.fetch(id);
-      states.statuses.set(id, heroStatus);
-    } catch (e) {
-      // Silent fail if status is cached
-      if (!hasStatus) {
-        setUIState('error');
-        alert('Error fetching status');
+    const containsStatus = statuses.find((s) => s.id === id);
+    if (!containsStatus) {
+      // Case 1: On first load, or when navigating to a status that's not cached at all
+      setStatuses([{ id }]);
+    } else {
+      const cachedStatuses = store.session.getJSON('statuses-' + id);
+      if (cachedStatuses) {
+        // Case 2: Looks like we've cached this status before, let's restore them to make it snappy
+        const reallyCachedStatuses = cachedStatuses.filter(
+          (s) => snapStates.statuses.has(s.id),
+          // Some are not cached in the global state, so we need to filter them out
+        );
+        setStatuses(reallyCachedStatuses);
+      } else {
+        // Case 3: Unknown state, could be a sub-comment. Let's slice off all descendant statuses after the hero status to be safe because they are custom-rendered with sub-comments etc
+        const heroIndex = statuses.findIndex((s) => s.id === id);
+        const slicedStatuses = statuses.slice(0, heroIndex + 1);
+        setStatuses(slicedStatuses);
      }
-      return;
    }

-    try {
-      const context = await masto.statuses.fetchContext(id);
-      const { ancestors, descendants } = context;
-
-      ancestors.forEach((status) => {
-        states.statuses.set(status.id, status);
-      });
-      const nestedDescendants = [];
-      descendants.forEach((status) => {
-        states.statuses.set(status.id, status);
-        if (status.inReplyToAccountId === status.account.id) {
-          // If replying to self, it's part of the thread, level 1
-          nestedDescendants.push(status);
-        } else if (status.inReplyToId === heroStatus.id) {
-          // If replying to the hero status, it's a reply, level 1
-          nestedDescendants.push(status);
-        } else {
-          // If replying to someone else, it's a reply to a reply, level 2
-          const parent = descendants.find((s) => s.id === status.inReplyToId);
-          if (parent) {
-            if (!parent.__replies) {
-              parent.__replies = [];
-            }
-            parent.__replies.push(status);
-          } else {
-            // If no parent, it's probably a reply to a reply to a reply, level 3
-            console.warn('[LEVEL 3] No parent found for', status);
-          }
+    (async () => {
+      const hasStatus = snapStates.statuses.has(id);
+      let heroStatus = snapStates.statuses.get(id);
+      try {
+        heroStatus = await masto.statuses.fetch(id);
+        states.statuses.set(id, heroStatus);
+      } catch (e) {
+        // Silent fail if status is cached
+        if (!hasStatus) {
+          setUIState('error');
+          alert('Error fetching status');
        }
-      });
+        return;
+      }

-      console.log({ ancestors, descendants, nestedDescendants });
+      try {
+        const context = await masto.statuses.fetchContext(id);
+        const { ancestors, descendants } = context;

-      const allStatuses = [
-        ...ancestors.map((s) => ({
-          id: s.id,
-          ancestor: true,
-          accountID: s.account.id,
-        })),
-        { id, accountID: heroStatus.account.id },
-        ...nestedDescendants.map((s) => ({
-          id: s.id,
-          accountID: s.account.id,
-          descendant: true,
-          thread: s.account.id === heroStatus.account.id,
-          replies: s.__replies?.map((r) => r.id),
-        })),
-      ];
-      console.log({ allStatuses });
-      setStatuses(allStatuses);
-    } catch (e) {
-      console.error(e);
-      setUIState('error');
-    }
+        ancestors.forEach((status) => {
+          states.statuses.set(status.id, status);
+        });
+        const nestedDescendants = [];
+        descendants.forEach((status) => {
+          states.statuses.set(status.id, status);
+          if (status.inReplyToAccountId === status.account.id) {
+            // If replying to self, it's part of the thread, level 1
+            nestedDescendants.push(status);
+          } else if (status.inReplyToId === heroStatus.id) {
+            // If replying to the hero status, it's a reply, level 1
+            nestedDescendants.push(status);
+          } else {
+            // If replying to someone else, it's a reply to a reply, level 2
+            const parent = descendants.find((s) => s.id === status.inReplyToId);
+            if (parent) {
+              if (!parent.__replies) {
+                parent.__replies = [];
+              }
+              parent.__replies.push(status);
+            } else {
+              // If no parent, it's probably a reply to a reply to a reply, level 3
+              console.warn('[LEVEL 3] No parent found for', status);
+            }
+          }
+        });

-    setUIState('default');
+        console.log({ ancestors, descendants, nestedDescendants });
+
+        const allStatuses = [
+          ...ancestors.map((s) => ({
+            id: s.id,
+            ancestor: true,
+            accountID: s.account.id,
+          })),
+          { id, accountID: heroStatus.account.id },
+          ...nestedDescendants.map((s) => ({
+            id: s.id,
+            accountID: s.account.id,
+            descendant: true,
+            thread: s.account.id === heroStatus.account.id,
+            replies: s.__replies?.map((r) => r.id),
+          })),
+        ];
+
+        setUIState('default');
+        console.log({ allStatuses });
+        setStatuses(allStatuses);
+        store.session.setJSON('statuses-' + id, allStatuses);
+      } catch (e) {
+        console.error(e);
+        setUIState('error');
+      }
+    })();
  }, [id, snapStates.reloadStatusPage]);

  useLayoutEffect(() => {
-    if (heroStatusRef.current && statuses.length > 1) {
-      heroStatusRef.current.scrollIntoView({
-        behavior: 'smooth',
-        block: 'start',
-      });
+    if (!statuses.length) return;
+    const isLoading = uiState === 'loading';
+    if (userInitiated.current) {
+      const hasAncestors = statuses.findIndex((s) => s.id === id) > 0; // Cannot use `ancestor` key because the hero state is dynamic
+      if (!isLoading && hasAncestors) {
+        // Case 1: User initiated, has ancestors, after statuses are loaded, SNAP to hero status
+        console.log('Case 1');
+        heroStatusRef.current?.scrollIntoView();
+      } else if (isLoading && statuses.length > 1) {
+        // Case 2: User initiated, while statuses are loading, SMOOTH-SCROLL to hero status
+        console.log('Case 2');
+        heroStatusRef.current?.scrollIntoView({
+          behavior: 'smooth',
+          block: 'start',
+        });
+      }
+    } else {
+      const scrollPosition = states.scrollPositions.get(id);
+      if (scrollPosition && scrollableRef.current) {
+        // Case 3: Not user initiated (e.g. back/forward button), restore to saved scroll position
+        console.log('Case 3');
+        scrollableRef.current.scrollTop = scrollPosition;
+      }
    }
-  }, [id]);
+    console.log('No case', {
+      isLoading,
+      userInitiated: userInitiated.current,
+      statusesLength: statuses.length,
+      // scrollPosition,
+    });

-  useLayoutEffect(() => {
-    const hasAncestor = statuses.some((s) => s.ancestor);
-    if (hasAncestor) {
-      heroStatusRef.current?.scrollIntoView({
-        // behavior: 'smooth',
-        block: 'start',
-      });
+    if (!isLoading) {
+      // Reset user initiated flag after statuses are loaded
+      userInitiated.current = false;
    }
-  }, [statuses]);
+  }, [statuses, uiState]);

  const heroStatus = snapStates.statuses.get(id);
  const heroDisplayName = useMemo(() => {
@ -177,11 +222,13 @@ function StatusPage({ id }) {
  }, [statuses.length, limit]);

  const hasManyStatuses = statuses.length > 40;
+  const hasDescendants = statuses.some((s) => s.descendant);

  return (
    <div class="deck-backdrop">
      <Link href={closeLink}></Link>
      <div
+        ref={scrollableRef}
        class={`status-deck deck contained ${
          statuses.length > 1 ? 'padded-bottom' : ''
        }`}
@ -200,7 +247,11 @@ function StatusPage({ id }) {
            </Link>
          </div>
        </header>
-        <ul class="timeline flat contextual">
+        <ul
+          class={`timeline flat contextual ${
+            uiState === 'loading' ? 'loading' : ''
+          }`}
+        >
          {statuses.slice(0, limit).map((status) => {
            const {
              id: statusID,
@ -216,7 +267,7 @@ function StatusPage({ id }) {
                ref={isHero ? heroStatusRef : null}
                class={`${ancestor ? 'ancestor' : ''} ${
                  descendant ? 'descendant' : ''
-                } ${thread ? 'thread' : ''}`}
+                } ${thread ? 'thread' : ''} ${isHero ? 'hero' : ''}`}
              >
                {isHero ? (
                  <Status statusID={statusID} withinContext size="l" />
@ -226,6 +277,9 @@ function StatusPage({ id }) {
                status-link
              "
                    href={`#/s/${statusID}`}
+                    onClick={() => {
+                      userInitiated.current = true;
+                    }}
                  >
                    <Status
                      statusID={statusID}
@ -245,7 +299,13 @@ function StatusPage({ id }) {
                    <ul>
                      {replies.map((replyID) => (
                        <li key={replyID}>
-                          <Link class="status-link" href={`#/s/${replyID}`}>
+                          <Link
+                            class="status-link"
+                            href={`#/s/${replyID}`}
+                            onClick={() => {
+                              userInitiated.current = true;
+                            }}
+                          >
                            <Status statusID={replyID} withinContext size="s" />
                          </Link>
                        </li>
@ -256,7 +316,7 @@ function StatusPage({ id }) {
                {uiState === 'loading' &&
                  isHero &&
                  !!heroStatus?.repliesCount &&
-                  statuses.length === 1 && (
+                  !hasDescendants && (
                    <div class="status-loading">
                      <Loader />
                    </div>
--- a/src/pages/welcome.css
+++ b/src/pages/welcome.css
@ -1,39 +1,41 @@
 #welcome {
  text-align: center;
+  background-image: radial-gradient(
+    closest-side at 50% 50%,
+    var(--bg-faded-color),
+    transparent
+  );
+  padding: 16px;
 }

-#welcome img {
-  margin-top: 16px;
-  height: auto;
+#welcome h1 {
+  margin: 0;
+  padding: 0;
+  font-size: 1.2em;
 }
-@keyframes dance {
+#welcome img {
+  vertical-align: top;
+}
+
+#welcome h2 {
+  font-size: 3em;
+  letter-spacing: -0.05ex;
+  margin: 16px 0;
+  padding: 0;
+  /* gradiented text */
+  background: linear-gradient(45deg, var(--purple-color), var(--red-color));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+@keyframes psychedelic {
  0% {
-    transform: rotate(0deg);
-  }
-  20% {
-    transform: rotate(5deg);
-  }
-  40% {
-    transform: rotate(-5deg);
-  }
-  60% {
-    transform: rotate(5deg);
-  }
-  80% {
-    transform: rotate(-5deg);
+    filter: hue-rotate(0deg);
  }
  100% {
-    transform: rotate(0deg);
+    filter: hue-rotate(360deg);
  }
 }
-#welcome:hover img {
-  animation: dance 2s infinite 15s linear;
+#welcome:hover h2 {
+  animation: psychedelic 60s infinite;
 }
-
-#welcome .warning {
-  font-weight: bold;
-  padding: 16px;
-  background: lemonchiffon;
-  color: chocolate;
-  border-radius: 16px;
-}
--- a/src/pages/welcome.jsx
+++ b/src/pages/welcome.jsx
@ -6,22 +6,25 @@ import useTitle from '../utils/useTitle';
 function Welcome() {
  useTitle();
  return (
-    <main id="welcome" class="box">
-      <img
-        src={logo}
-        alt=""
-        width="140"
-        height="140"
-        style={{
-          aspectRatio: '1/1',
-        }}
-      />
-      <h1>Welcome</h1>
-      <p>Phanpy is a minimalistic opinionated Mastodon web client.</p>
-      <p class="warning">
-        🚧 This is an early ALPHA project. Many features are missing, many bugs
-        are present. Please report issues as detailed as possible. Thanks 🙏
-      </p>
+    <main id="welcome">
+      <h1>
+        <img
+          src={logo}
+          alt=""
+          width="24"
+          height="24"
+          style={{
+            aspectRatio: '1/1',
+          }}
+        />{' '}
+        Phanpy
+      </h1>
+      <h2>
+        Trunk-tastic
+        <br />
+        Mastodon Experience
+      </h2>
+      <p>A minimalistic opinionated Mastodon web client.</p>
      <p>
        <big>
          <b>
--- a/src/utils/states.js
+++ b/src/utils/states.js
@ -10,8 +10,10 @@ export default proxy({
  notifications: [],
  notificationsNew: [],
  notificationsLastFetchTime: null,
-  accounts: new WeakMap(),
+  accounts: new Map(),
  reloadStatusPage: 0,
+  spoilers: proxyMap([]),
+  scrollPositions: new Map(),
  // Modals
  showCompose: false,
  showSettings: false,
--- a/vite.config.js
+++ b/vite.config.js
@ -35,6 +35,12 @@ export default defineConfig({
            sizes: '512x512',
            type: 'image/png',
          },
+          {
+            src: 'logo-maskable-512.png',
+            sizes: '512x512',
+            type: 'image/png',
+            purpose: 'maskable',
+          },
        ],
      },
      strategies: 'injectManifest',