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,11 +211,15 @@ function Status({
     onResize: () => {
       if (spoilerContentRef.current) {
         const { scrollHeight, clientHeight } = spoilerContentRef.current;
+        if (scrollHeight < window.innerHeight * 0.4) {
+          spoilerContentRef.current.classList.remove('truncated');
+        } else {
           spoilerContentRef.current.classList.toggle(
             'truncated',
             scrollHeight > clientHeight,
           );
         }
+      }
     },
   });
   const contentRef = useRef(null);
@@ -223,11 +228,15 @@ function Status({
     onResize: () => {
       if (contentRef.current) {
         const { scrollHeight, clientHeight } = contentRef.current;
+        if (scrollHeight < window.innerHeight * 0.4) {
+          contentRef.current.classList.remove('truncated');
+        } else {
           contentRef.current.classList.toggle(
             'truncated',
             scrollHeight > clientHeight,
           );
         }
+      }
     },
   });
   const readMoreText = 'Read more →';
@@ -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,7 +35,8 @@ function handleContentLinks(opts) {
           instance,
         };
       }
-    } else if (target.classList.contains('hashtag')) {
+    } else if (!previewMode) {
+      if (target.classList.contains('hashtag')) {
         e.preventDefault();
         e.stopPropagation();
         const tag = target.innerText.replace(/^#/, '').trim();
@@ -50,6 +51,7 @@ function handleContentLinks(opts) {
         };
         location.hash = `#${states.unfurledLinks[target.href].url}`;
       }
+    }
   };
 }