Merge pull request #84 from cheeaun/main

Update from main

src/components/compose.jsx

@@ -633,7 +633,7 @@ function Compose({
       </div>
       {!!replyToStatus && (
         <div class="status-preview">
-          <Status status={replyToStatus} size="s" />
+          <Status status={replyToStatus} size="s" previewMode />
           <div class="status-preview-legend reply-to">
             Replying to @
             {replyToStatus.account.acct || replyToStatus.account.username}
@@ -643,7 +643,7 @@ function Compose({
       )}
       {!!editStatus && (
         <div class="status-preview">
-          <Status status={editStatus} size="s" />
+          <Status status={editStatus} size="s" previewMode />
           <div class="status-preview-legend">Editing source status</div>
         </div>
       )}

src/components/shortcuts-settings.jsx

@@ -235,7 +235,11 @@ function ShortcutsSettings() {
                   type="radio"
                   name="shortcuts-view-mode"
                   value={value}
-                  checked={snapStates.settings.shortcutsViewMode === value}
+                  checked={
+                    snapStates.settings.shortcutsViewMode === value ||
+                    (value === 'float-button' &&
+                      !snapStates.settings.shortcutsViewMode)
+                  }
                   onChange={(e) => {
                     states.settings.shortcutsViewMode = e.target.value;
                   }}

src/components/status.jsx

@@ -70,6 +70,7 @@ function Status({
   readOnly,
   contentTextWeight,
   enableTranslate,
+  previewMode,
 }) {
   if (skeleton) {
     return (
@@ -210,10 +211,14 @@ function Status({
     onResize: () => {
       if (spoilerContentRef.current) {
         const { scrollHeight, clientHeight } = spoilerContentRef.current;
-        spoilerContentRef.current.classList.toggle(
+        if (scrollHeight < window.innerHeight * 0.4) {
-          'truncated',
+          spoilerContentRef.current.classList.remove('truncated');
-          scrollHeight > clientHeight,
+        } else {
-        );
+          spoilerContentRef.current.classList.toggle(
+            'truncated',
+            scrollHeight > clientHeight,
+          );
+        }
       }
     },
   });
@@ -223,10 +228,14 @@ function Status({
     onResize: () => {
       if (contentRef.current) {
         const { scrollHeight, clientHeight } = contentRef.current;
-        contentRef.current.classList.toggle(
+        if (scrollHeight < window.innerHeight * 0.4) {
-          'truncated',
+          contentRef.current.classList.remove('truncated');
-          scrollHeight > clientHeight,
+        } else {
-        );
+          contentRef.current.classList.toggle(
+            'truncated',
+            scrollHeight > clientHeight,
+          );
+        }
       }
     },
   });
@@ -578,6 +587,7 @@ function Status({
       onContextMenu={(e) => {
         if (size === 'l') return;
         if (e.metaKey) return;
+        if (previewMode) return;
         // console.log('context menu', e);
         const link = e.target.closest('a');
         if (link && /^https?:\/\//.test(link.getAttribute('href'))) return;
@@ -662,7 +672,7 @@ function Status({
             )} */}
           {/* </span> */}{' '}
           {size !== 'l' &&
-            (url ? (
+            (url && !previewMode ? (
               <Menu
                 instanceRef={menuInstanceRef}
                 portal={{
@@ -788,7 +798,7 @@ function Status({
             lang={language}
             ref={contentRef}
             data-read-more={readMoreText}
-            onClick={handleContentLinks({ mentions, instance })}
+            onClick={handleContentLinks({ mentions, instance, previewMode })}
             dangerouslySetInnerHTML={{
               __html: enhanceContent(content, {
                 emojis,
@@ -801,6 +811,7 @@ function Status({
                         a.removeAttribute('target');
                       }
                     });
+                  if (previewMode) return;
                   // Unfurl Mastodon links
                   dom
                     .querySelectorAll(

src/utils/handle-content-links.js

@@ -1,7 +1,7 @@
 import states from './states';
 
 function handleContentLinks(opts) {
-  const { mentions = [], instance } = opts || {};
+  const { mentions = [], instance, previewMode } = opts || {};
   return (e) => {
     let { target } = e;
     target = target.closest('a');
@@ -35,20 +35,22 @@ function handleContentLinks(opts) {
           instance,
         };
       }
-    } else if (target.classList.contains('hashtag')) {
+    } else if (!previewMode) {
-      e.preventDefault();
+      if (target.classList.contains('hashtag')) {
-      e.stopPropagation();
+        e.preventDefault();
-      const tag = target.innerText.replace(/^#/, '').trim();
+        e.stopPropagation();
-      const hashURL = instance ? `#/${instance}/t/${tag}` : `#/t/${tag}`;
+        const tag = target.innerText.replace(/^#/, '').trim();
-      console.log({ hashURL });
+        const hashURL = instance ? `#/${instance}/t/${tag}` : `#/t/${tag}`;
-      location.hash = hashURL;
+        console.log({ hashURL });
-    } else if (states.unfurledLinks[target.href]?.url) {
+        location.hash = hashURL;
-      e.preventDefault();
+      } else if (states.unfurledLinks[target.href]?.url) {
-      e.stopPropagation();
+        e.preventDefault();
-      states.prevLocation = {
+        e.stopPropagation();
-        pathname: location.hash.replace(/^#/, ''),
+        states.prevLocation = {
-      };
+          pathname: location.hash.replace(/^#/, ''),
-      location.hash = `#${states.unfurledLinks[target.href].url}`;
+        };
+        location.hash = `#${states.unfurledLinks[target.href].url}`;
+      }
     }
   };
 }