Merge pull request #119 from cheeaun/main

Update from main

package.json

@@ -21,12 +21,12 @@
     "fast-deep-equal": "~3.1.3",
     "idb-keyval": "~6.2.0",
     "just-debounce-it": "~3.2.0",
-    "masto": "~5.10.0",
+    "masto": "~5.11.2",
     "mem": "~9.0.2",
     "p-retry": "~5.1.2",
     "p-throttle": "~5.0.0",
     "preact": "~10.13.2",
-    "react-hotkeys-hook": "~4.3.8",
+    "react-hotkeys-hook": "~4.4.0",
     "react-intersection-observer": "~9.4.3",
     "react-quick-pinch-zoom": "~4.6.0",
     "react-router-dom": "6.6.2",
@@ -34,23 +34,23 @@
     "swiped-events": "~1.1.7",
     "toastify-js": "~1.12.0",
     "uid": "~2.0.2",
-    "use-debounce": "~9.0.3",
+    "use-debounce": "~9.0.4",
-    "use-long-press": "~3.0.4",
+    "use-long-press": "~3.1.0",
     "use-resize-observer": "~9.1.0",
     "valtio": "1.9.0"
   },
   "devDependencies": {
     "@preact/preset-vite": "~2.5.0",
     "@trivago/prettier-plugin-sort-imports": "~4.1.1",
-    "postcss": "~8.4.21",
+    "postcss": "~8.4.23",
     "postcss-dark-theme-class": "~0.7.3",
-    "postcss-preset-env": "~8.3.0",
+    "postcss-preset-env": "~8.3.2",
     "twitter-text": "~3.1.0",
-    "vite": "~4.2.1",
+    "vite": "~4.3.3",
     "vite-plugin-generate-file": "~0.0.4",
     "vite-plugin-html-config": "~1.0.11",
     "vite-plugin-pwa": "~0.14.7",
-    "vite-plugin-remove-console": "~2.1.0",
+    "vite-plugin-remove-console": "~2.1.1",
     "workbox-cacheable-response": "~6.5.4",
     "workbox-expiration": "~6.5.4",
     "workbox-routing": "~6.5.4",

src/app.css

@@ -1378,7 +1378,6 @@ body:has(.media-modal-container + .status-deck) .media-post-link {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  line-height: 1.05;
 }
 /* .szh-menu .szh-menu__item * {
   vertical-align: middle;
@@ -1751,6 +1750,8 @@ ul.link-list li a .icon {
   /* scrollbar-width: none; */
   overscroll-behavior: contain;
   overscroll-behavior-x: contain;
+  /* This `transform` fixes horizontal scrolling for pointer devices on iPad */
+  transform: translateZ(0);
 }
 /* #columns::-webkit-scrollbar {
   display: none;

src/components/nav-menu.jsx

@@ -84,6 +84,9 @@ function NavMenu(props) {
           toggleMenu(false);
         }}
         containerProps={{
+          style: {
+            zIndex: 10,
+          },
           onClick: () => {
             toggleMenu(false);
           },

src/components/status.css

@@ -508,6 +508,12 @@
 .status .content p:last-child {
   margin-block-end: 0;
 }
+.status .content blockquote {
+  margin-block: min(0.75em, 12px);
+  margin-inline: 0;
+  padding: 0 0 0 8px;
+  border-left: 4px solid var(--link-faded-color);
+}
 .status .content .invisible {
   display: none;
 }

src/components/status.jsx

@@ -211,7 +211,7 @@ function Status({
     inReplyToAccountId === currentAccount ||
     mentions?.find((mention) => mention.id === currentAccount);
 
-  const showSpoiler = !!snapStates.spoilers[id] || false;
+  const showSpoiler = previewMode || !!snapStates.spoilers[id] || false;
 
   if (reblog) {
     // If has statusID, means useItemID (cached in states)
@@ -679,7 +679,7 @@ function Status({
     },
   );
 
-  const showContextMenu = size !== 'l' && !previewMode && !_deleted;
+  const showContextMenu = size !== 'l' && !previewMode && !_deleted && !quoted;
 
   return (
     <article
@@ -788,7 +788,7 @@ function Status({
           {size !== 'l' &&
             (_deleted ? (
               <span class="status-deleted-tag">Deleted</span>
-            ) : url && !previewMode ? (
+            ) : url && !previewMode && !quoted ? (
               <Menu
                 instanceRef={menuInstanceRef}
                 portal={{
@@ -1955,7 +1955,6 @@ const QuoteStatuses = memo(({ id, instance, level = 0 }) => {
           instance={q.instance}
           size="s"
           quoted={level + 1}
-          previewMode
         />
       </Link>
     );

src/components/translation-block.jsx

@@ -54,28 +54,33 @@ function TranslationBlock({
 
   const translate = async () => {
     setUIState('loading');
-    const { content, detectedSourceLanguage, provider, ...props } =
+    try {
-      await onTranslate(apiSourceLang.current, targetLang);
+      const { content, detectedSourceLanguage, provider, ...props } =
-    if (content) {
+        await onTranslate(apiSourceLang.current, targetLang);
-      if (detectedSourceLanguage) {
+      if (content) {
-        const detectedLangText = localeCode2Text(detectedSourceLanguage);
+        if (detectedSourceLanguage) {
-        setDetectedLang(detectedLangText);
+          const detectedLangText = localeCode2Text(detectedSourceLanguage);
-      }
+          setDetectedLang(detectedLangText);
-      if (provider === 'lingva') {
-        const pronunciation = props?.info?.pronunciation?.query;
-        if (pronunciation) {
-          setPronunciationContent(pronunciation);
         }
+        if (provider === 'lingva') {
+          const pronunciation = props?.info?.pronunciation?.query;
+          if (pronunciation) {
+            setPronunciationContent(pronunciation);
+          }
+        }
+        setTranslatedContent(content);
+        setUIState('default');
+        detailsRef.current.open = true;
+        detailsRef.current.scrollIntoView({
+          behavior: 'smooth',
+          block: 'nearest',
+        });
+      } else {
+        console.error(result);
+        setUIState('error');
       }
-      setTranslatedContent(content);
+    } catch (e) {
-      setUIState('default');
+      console.error(e);
-      detailsRef.current.open = true;
-      detailsRef.current.scrollIntoView({
-        behavior: 'smooth',
-        block: 'nearest',
-      });
-    } else {
-      console.error(result);
       setUIState('error');
     }
   };

src/pages/status.jsx

@@ -68,6 +68,11 @@ function StatusPage(params) {
 
   const sKey = statusKey(id, instance);
   const [heroStatus, setHeroStatus] = useState(states.statuses[sKey]);
+  useEffect(() => {
+    if (states.statuses[sKey]) {
+      setHeroStatus(states.statuses[sKey]);
+    }
+  }, [sKey]);
 
   const closeLink = useMemo(() => {
     const { prevLocation } = states;

src/utils/handle-content-links.js

@@ -6,7 +6,9 @@ function handleContentLinks(opts) {
     let { target } = e;
     target = target.closest('a');
     if (!target) return;
-    if (target.classList.contains('u-url')) {
+    const prevText = target.previousSibling?.textContent;
+    const textBeforeLinkIsAt = prevText?.endsWith('@');
+    if (target.classList.contains('u-url') || textBeforeLinkIsAt) {
       const targetText = (
         target.querySelector('span') || target
       ).innerText.trim();
@@ -36,7 +38,8 @@ function handleContentLinks(opts) {
         };
       }
     } else if (!previewMode) {
-      if (target.classList.contains('hashtag')) {
+      const textBeforeLinkIsHash = prevText?.endsWith('#');
+      if (target.classList.contains('hashtag') || textBeforeLinkIsHash) {
         e.preventDefault();
         e.stopPropagation();
         const tag = target.innerText.replace(/^#/, '').trim();