Merge pull request #585 from cheeaun/main

Update from main

package.json

@@ -7,7 +7,8 @@
     "build": "vite build",
     "preview": "vite preview",
     "fetch-instances": "env $(cat .env.local | grep -v \"#\" | xargs) node scripts/fetch-instances-list.js",
-    "sourcemap": "npx source-map-explorer dist/assets/*.js"
+    "sourcemap": "npx source-map-explorer dist/assets/*.js",
+    "bundle-visualizer": "npx vite-bundle-visualizer"
   },
   "dependencies": {
     "@formatjs/intl-localematcher": "~0.5.4",
@@ -17,7 +18,6 @@
     "@iconify-icons/mingcute": "~1.2.9",
     "@justinribeiro/lite-youtube": "~1.5.0",
     "@szhsin/react-menu": "~4.1.0",
-    "@uidotdev/usehooks": "~2.4.1",
     "compare-versions": "~6.1.0",
     "dayjs": "~1.11.11",
     "dayjs-twitter": "~0.5.0",

src/components/account-info.jsx

@@ -1159,8 +1159,8 @@ function RelatedActions({
                             setRelationshipUIState('default');
                             showToast(
                               rel.showingReblogs
-                                ? `Boosts from @${username} disabled.`
-                                : `Boosts from @${username} enabled.`,
+                                ? `Boosts from @${username} enabled.`
+                                : `Boosts from @${username} disabled.`,
                             );
                           } catch (e) {
                             alert(e);

src/components/menu2.jsx

@@ -1,8 +1,8 @@
 import { Menu } from '@szhsin/react-menu';
-import { useWindowSize } from '@uidotdev/usehooks';
 import { useRef } from 'preact/hooks';
 
 import safeBoundingBoxPadding from '../utils/safe-bounding-box-padding';
+import useWindowSize from '../utils/useWindowSize';
 
 // It's like Menu but with sensible defaults, bug fixes and improvements.
 function Menu2(props) {

src/components/notification.jsx

@@ -285,7 +285,7 @@ function Notification({
         {type !== 'mention' && (
           <>
             <p>
-              {!/poll|update/i.test(type) && (
+              {!/poll|update|severed_relationships/i.test(type) && (
                 <>
                   {_accounts?.length > 1 ? (
                     <>

src/components/status.jsx

@@ -2456,6 +2456,22 @@ function MediaFirstContainer(props) {
   );
 }
 
+function getDomain(url) {
+  return punycode.toUnicode(
+    URL.parse(url)
+      .hostname.replace(/^www\./, '')
+      .replace(/\/$/, ''),
+  );
+}
+
+// "Post": Quote post + card link preview combo
+// Assume all links from these domains are "posts"
+// Mastodon links are "posts" too but they are converted to real quote posts and there's too many domains to check
+// This is just "Progressive Enhancement"
+function isCardPost(domain) {
+  return ['x.com', 'twitter.com', 'threads.net', 'bsky.app'].includes(domain);
+}
+
 function Card({ card, selfReferential, instance }) {
   const snapStates = useSnapshot(states);
   const {
@@ -2534,11 +2550,7 @@ function Card({ card, selfReferential, instance }) {
   );
 
   if (hasText && (image || (type === 'photo' && blurhash))) {
-    const domain = punycode.toUnicode(
-      URL.parse(url)
-        .hostname.replace(/^www\./, '')
-        .replace(/\/$/, ''),
-    );
+    const domain = getDomain(url);
     let blurhashImage;
     const rgbAverageColor =
       image && blurhash ? getBlurHashAverageColor(blurhash) : null;
@@ -2559,11 +2571,7 @@ function Card({ card, selfReferential, instance }) {
       blurhashImage = canvas.toDataURL();
     }
 
-    // "Post": Quote post + card link preview combo
-    // Assume all links from these domains are "posts"
-    // Mastodon links are "posts" too but they are converted to real quote posts and there's too many domains to check
-    // This is just "Progressive Enhancement"
-    const isPost = ['x.com', 'twitter.com', 'threads.net'].includes(domain);
+    const isPost = isCardPost(domain);
 
     return (
       <a
@@ -2669,15 +2677,14 @@ function Card({ card, selfReferential, instance }) {
       // );
     }
     if (hasText && !image) {
-      const domain = punycode.toUnicode(
-        URL.parse(url).hostname.replace(/^www\./, ''),
-      );
+      const domain = getDomain(url);
+      const isPost = isCardPost(domain);
       return (
         <a
           href={cardStatusURL || url}
           target={cardStatusURL ? null : '_blank'}
           rel="nofollow noopener noreferrer"
-          class={`card link no-image`}
+          class={`card link ${isPost ? 'card-post' : ''} no-image`}
           lang={language}
           onClick={handleClick}
         >

src/pages/hashtag.jsx

@@ -140,6 +140,26 @@ function Hashtags({ media: mediaView, columnMode, ...props }) {
 
   const reachLimit = hashtags.length >= TOTAL_TAGS_LIMIT;
 
+  const [featuredUIState, setFeaturedUIState] = useState('default');
+  const [featuredTags, setFeaturedTags] = useState([]);
+  const [isFeaturedTag, setIsFeaturedTag] = useState(false);
+  useEffect(() => {
+    if (!authenticated) return;
+    (async () => {
+      try {
+        const featuredTags = await masto.v1.featuredTags.list();
+        setFeaturedTags(featuredTags);
+        setIsFeaturedTag(
+          featuredTags.some(
+            (tag) => tag.name.toLowerCase() === hashtag.toLowerCase(),
+          ),
+        );
+      } catch (e) {
+        console.error(e);
+      }
+    })();
+  }, []);
+
   return (
     <Timeline
       key={instance + hashtagTitle}
@@ -233,6 +253,69 @@ function Hashtags({ media: mediaView, columnMode, ...props }) {
                   </>
                 )}
               </MenuConfirm>
+              <MenuItem
+                type="checkbox"
+                checked={isFeaturedTag}
+                disabled={featuredUIState === 'loading' || !authenticated}
+                onClick={() => {
+                  setFeaturedUIState('loading');
+                  if (isFeaturedTag) {
+                    const featuredTagID = featuredTags.find(
+                      (tag) => tag.name.toLowerCase() === hashtag.toLowerCase(),
+                    ).id;
+                    if (featuredTagID) {
+                      masto.v1.featuredTags
+                        .$select(featuredTagID)
+                        .remove()
+                        .then(() => {
+                          setIsFeaturedTag(false);
+                          showToast('Unfeatured on profile');
+                          setFeaturedTags(
+                            featuredTags.filter(
+                              (tag) => tag.id !== featuredTagID,
+                            ),
+                          );
+                        })
+                        .catch((e) => {
+                          console.error(e);
+                        })
+                        .finally(() => {
+                          setFeaturedUIState('default');
+                        });
+                    } else {
+                      showToast('Unable to unfeature on profile');
+                    }
+                  } else {
+                    masto.v1.featuredTags
+                      .create({
+                        name: hashtag,
+                      })
+                      .then((value) => {
+                        setIsFeaturedTag(true);
+                        showToast('Featured on profile');
+                        setFeaturedTags(featuredTags.concat(value));
+                      })
+                      .catch((e) => {
+                        console.error(e);
+                      })
+                      .finally(() => {
+                        setFeaturedUIState('default');
+                      });
+                  }
+                }}
+              >
+                {isFeaturedTag ? (
+                  <>
+                    <Icon icon="check-circle" />
+                    <span>Featured on profile</span>
+                  </>
+                ) : (
+                  <>
+                    <Icon icon="check-circle" />
+                    <span>Feature on profile</span>
+                  </>
+                )}
+              </MenuItem>
               <MenuDivider />
             </>
           )}
@@ -366,7 +449,7 @@ function Hashtags({ media: mediaView, columnMode, ...props }) {
               }
             }}
           >
-            <Icon icon="shortcut" /> <span>Add to Shorcuts</span>
+            <Icon icon="shortcut" /> <span>Add to Shortcuts</span>
           </MenuItem>
           <MenuItem
             onClick={() => {

src/pages/trending.jsx

@@ -72,6 +72,8 @@ function Trending({ columnMode, ...props }) {
   // const navigate = useNavigate();
   const latestItem = useRef();
 
+  const sameCurrentInstance = instance === currentInstance;
+
   const [hashtags, setHashtags] = useState([]);
   const [links, setLinks] = useState([]);
   const trendIterator = useRef();
@@ -137,7 +139,8 @@ function Trending({ columnMode, ...props }) {
   const [currentLink, setCurrentLink] = useState(null);
   const hasCurrentLink = !!currentLink;
   const currentLinkRef = useRef();
-  const supportsTrendingLinkPosts = supports('@mastodon/trending-hashtags');
+  const supportsTrendingLinkPosts =
+    sameCurrentInstance && supports('@mastodon/trending-hashtags');
 
   useEffect(() => {
     if (currentLink && currentLinkRef.current) {

src/utils/timeline-utils.jsx

@@ -227,7 +227,6 @@ export function groupContext(items, instance) {
             const replyToStatus = await fetchStatus(inReplyToId, masto);
             saveStatus(replyToStatus, instance, {
               skipThreading: true,
-              skipUnfurling: true,
             });
             states.statusReply[sKey] = {
               id: replyToStatus.id,
@@ -253,7 +252,6 @@ export function groupContext(items, instance) {
               for (const replyToStatus of replyToStatuses) {
                 saveStatus(replyToStatus, instance, {
                   skipThreading: true,
-                  skipUnfurling: true,
                 });
                 const sKey = inReplyToIds.find(
                   ({ inReplyToId }) => inReplyToId === replyToStatus.id,

src/utils/useWindowSize.js

@@ -0,0 +1,28 @@
+import { useLayoutEffect, useState } from 'preact/hooks';
+
+export default function useWindowSize() {
+  const [size, setSize] = useState({
+    width: null,
+    height: null,
+  });
+
+  useLayoutEffect(() => {
+    const handleResize = () => {
+      setSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    };
+
+    handleResize();
+    window.addEventListener('resize', handleResize, {
+      passive: true,
+    });
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  return size;
+}