Merge pull request #406 from cheeaun/main

Update from main

package.json

@@ -10,7 +10,7 @@
     "sourcemap": "npx source-map-explorer dist/assets/*.js"
   },
   "dependencies": {
-    "@formatjs/intl-localematcher": "~0.5.2",
+    "@formatjs/intl-localematcher": "~0.5.4",
     "@formkit/auto-animate": "~0.8.1",
     "@github/text-expander-element": "~2.6.1",
     "@iconify-icons/mingcute": "~1.2.9",
@@ -51,10 +51,10 @@
     "postcss-dark-theme-class": "~1.1.0",
     "postcss-preset-env": "~9.3.0",
     "twitter-text": "~3.1.0",
-    "vite": "~5.0.11",
+    "vite": "~5.0.12",
     "vite-plugin-generate-file": "~0.1.1",
     "vite-plugin-html-config": "~1.0.11",
-    "vite-plugin-pwa": "~0.17.4",
+    "vite-plugin-pwa": "~0.17.5",
     "vite-plugin-remove-console": "~2.2.0",
     "workbox-cacheable-response": "~7.0.0",
     "workbox-expiration": "~7.0.0",

src/app.css

@@ -947,7 +947,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   background: linear-gradient(
     to bottom right,
     var(--carousel-faded-color),
-    transparent 150%
+    transparent
   );
   position: relative;
   container-type: inline-size;
@@ -962,7 +962,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
       var(--carousel-faded-color),
       transparent
     ),
-    linear-gradient(to top, var(--bg-color), transparent 64px);
+    linear-gradient(to top, var(--bg-color) 8px, transparent 64px);
   background-repeat: no-repeat;
   background-position: bottom center;
 }

src/components/ICONS.jsx

@@ -99,4 +99,5 @@ export const ICONS = {
   speak: () => import('@iconify-icons/mingcute/radar-line'),
   building: () => import('@iconify-icons/mingcute/building-5-line'),
   history: () => import('@iconify-icons/mingcute/history-2-line'),
+  document: () => import('@iconify-icons/mingcute/document-line'),
 };

src/components/account-block.jsx

@@ -61,6 +61,7 @@ function AccountBlock({
     note,
     group,
     followersCount,
+    createdAt,
   } = account;
   let [_, acct1, acct2] = acct.match(/([^@]+)(@.+)/i) || [, acct];
   if (accountInstance) {
@@ -188,6 +189,21 @@ function AccountBlock({
                 />
               </span>
             )}
+            {!bot &&
+              !group &&
+              !hasRelationship &&
+              !followersCount &&
+              !verifiedField &&
+              !!createdAt && (
+                <span class="created-at">
+                  Joined{' '}
+                  <time datetime={createdAt}>
+                    {niceDateTime(createdAt, {
+                      hideTime: true,
+                    })}
+                  </time>
+                </span>
+              )}
           </div>
         )}
       </span>

src/components/emoji-text.jsx

@@ -1,3 +1,5 @@
+import { memo } from 'preact/compat';
+
 function EmojiText({ text, emojis }) {
   if (!text) return '';
   if (!emojis?.length) return text;
@@ -31,4 +33,9 @@ function EmojiText({ text, emojis }) {
   return elements;
 }
 
-export default EmojiText;
+export default memo(
+  EmojiText,
+  (oldProps, newProps) =>
+    oldProps.text === newProps.text &&
+    oldProps.emojis?.length === newProps.emojis?.length,
+);

src/components/icon.jsx

@@ -15,11 +15,9 @@ const ICONDATA = {};
 
 // Memoize the dangerouslySetInnerHTML of the SVGs
 const SVGICon = moize(
-  function ({ size, width, height, body, rotate, flip }) {
+  function ({ width, height, body, rotate, flip }) {
     return (
       <svg
-        // width={size}
-        // height={size}
         viewBox={`0 0 ${width} ${height}`}
         dangerouslySetInnerHTML={{ __html: body }}
         style={{
@@ -33,6 +31,8 @@ const SVGICon = moize(
   {
     isShallowEqual: true,
     maxSize: Object.keys(ICONS).length,
+    matchesArg: (cacheKeyArg, keyArg) =>
+      cacheKeyArg.icon === keyArg.icon && cacheKeyArg.body === keyArg.body,
   },
 );
 
@@ -93,7 +93,7 @@ function Icon({
         //   }}
         // />
         <SVGICon
-          size={iconSize}
+          icon={icon}
           width={iconData.width}
           height={iconData.height}
           body={iconData.body}

src/components/media.jsx

@@ -151,11 +151,18 @@ function Media({
     [to],
   );
 
+  const remoteMediaURLObj = remoteMediaURL ? new URL(remoteMediaURL) : null;
   const isVideoMaybe =
     type === 'unknown' &&
-    /\.(mp4|m4a|m4p|m4b|m4r|m4v|mov|webm)$/i.test(remoteMediaURL);
+    remoteMediaURLObj &&
+    /\.(mp4|m4r|m4v|mov|webm)$/i.test(remoteMediaURLObj.pathname);
+  const isAudioMaybe =
+    type === 'unknown' &&
+    remoteMediaURLObj &&
+    /\.(mp3|ogg|wav|m4a|m4p|m4b)$/i.test(remoteMediaURLObj.pathname);
   const isImage =
-    type === 'image' || (type === 'unknown' && previewUrl && !isVideoMaybe);
+    type === 'image' ||
+    (type === 'unknown' && previewUrl && !isVideoMaybe && !isAudioMaybe);
 
   const parentRef = useRef();
   const [imageSmallerThanParent, setImageSmallerThanParent] = useState(false);
@@ -476,7 +483,7 @@ function Media({
         </Parent>
       </Figure>
     );
-  } else if (type === 'audio') {
+  } else if (type === 'audio' || isAudioMaybe) {
     const formattedDuration = formatDuration(original.duration);
     return (
       <Figure>
@@ -499,6 +506,12 @@ function Media({
               height={height}
               data-orientation={orientation}
               loading="lazy"
+              onError={(e) => {
+                try {
+                  // Remove self if broken
+                  e.target?.remove?.();
+                } catch (e) {}
+              }}
             />
           ) : null}
           {!showOriginal && (

src/components/name-text.jsx

@@ -97,4 +97,9 @@ function NameText({
   );
 }
 
-export default memo(NameText);
+export default memo(NameText, (oldProps, newProps) => {
+  // Only care about account.id, the other props usually don't change
+  const { account } = oldProps;
+  const { account: newAccount } = newProps;
+  return account?.acct === newAccount?.acct;
+});

src/components/relative-time.jsx

@@ -8,6 +8,7 @@ import dayjs from 'dayjs';
 import dayjsTwitter from 'dayjs-twitter';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
 import relativeTime from 'dayjs/plugin/relativeTime';
+import { useMemo } from 'preact/hooks';
 
 dayjs.extend(dayjsTwitter);
 dayjs.extend(localizedFormat);
@@ -17,23 +18,25 @@ const dtf = new Intl.DateTimeFormat();
 
 export default function RelativeTime({ datetime, format }) {
   if (!datetime) return null;
-  const date = dayjs(datetime);
-  let dateStr;
-  if (format === 'micro') {
-    // If date <= 1 day ago or day is within this year
-    const now = dayjs();
-    const dayDiff = now.diff(date, 'day');
-    if (dayDiff <= 1 || now.year() === date.year()) {
-      dateStr = date.twitter();
-    } else {
-      dateStr = dtf.format(date.toDate());
+  const date = useMemo(() => dayjs(datetime), [datetime]);
+  const dateStr = useMemo(() => {
+    if (format === 'micro') {
+      // If date <= 1 day ago or day is within this year
+      const now = dayjs();
+      const dayDiff = now.diff(date, 'day');
+      if (dayDiff <= 1 || now.year() === date.year()) {
+        return date.twitter();
+      } else {
+        return dtf.format(date.toDate());
+      }
     }
-  } else {
-    dateStr = date.fromNow();
-  }
+    return date.fromNow();
+  }, [date, format]);
+  const dt = useMemo(() => date.toISOString(), [date]);
+  const title = useMemo(() => date.format('LLLL'), [date]);
 
   return (
-    <time datetime={date.toISOString()} title={date.format('LLLL')}>
+    <time datetime={dt} title={title}>
       {dateStr}
     </time>
   );

src/components/search-form.jsx

@@ -73,6 +73,7 @@ const SearchForm = forwardRef((props, ref) => {
         autocomplete="off"
         autocorrect="off"
         autocapitalize="off"
+        spellcheck="false"
         onSearch={(e) => {
           if (!e.target.value) {
             setSearchParams({});
@@ -84,6 +85,9 @@ const SearchForm = forwardRef((props, ref) => {
         }}
         onFocus={() => {
           setSearchMenuOpen(true);
+          formRef.current
+            ?.querySelector('.search-popover-item')
+            ?.classList.add('focus');
         }}
         onBlur={() => {
           setTimeout(() => {
@@ -178,8 +182,33 @@ const SearchForm = forwardRef((props, ref) => {
         }}
       />
       <div class="search-popover" hidden={!searchMenuOpen || !query}>
+        {/* {!!query && (
+          <Link
+            to={`/search?q=${encodeURIComponent(query)}`}
+            class="search-popover-item focus"
+            onClick={(e) => {
+              props?.onSubmit?.(e);
+            }}
+          >
+            <Icon icon="search" />
+            <span>{query}</span>
+          </Link>
+        )} */}
         {!!query &&
           [
+            {
+              label: (
+                <>
+                  {query}{' '}
+                  <small class="insignificant">
+                    ‒ accounts, hashtags &amp; posts
+                  </small>
+                </>
+              ),
+              to: `/search?q=${encodeURIComponent(query)}`,
+              top: !type && !/\s/.test(query),
+              hidden: !!type,
+            },
             {
               label: (
                 <>
@@ -188,6 +217,8 @@ const SearchForm = forwardRef((props, ref) => {
               ),
               to: `/search?q=${encodeURIComponent(query)}&type=statuses`,
               hidden: /^https?:/.test(query),
+              top: /\s/.test(query),
+              icon: 'document',
             },
             {
               label: (
@@ -200,6 +231,7 @@ const SearchForm = forwardRef((props, ref) => {
                 /^@/.test(query) || /^https?:/.test(query) || /\s/.test(query),
               top: /^#/.test(query),
               type: 'link',
+              icon: 'hashtag',
             },
             {
               label: (
@@ -219,24 +251,26 @@ const SearchForm = forwardRef((props, ref) => {
                 </>
               ),
               to: `/search?q=${encodeURIComponent(query)}&type=accounts`,
+              icon: 'group',
             },
           ]
             .sort((a, b) => {
               if (a.top && !b.top) return -1;
               if (!a.top && b.top) return 1;
               return 0;
             })
-            .map(({ label, to, hidden, type }) => (
+            .filter(({ hidden }) => !hidden)
+            .map(({ label, to, icon, type }, i) => (
               <Link
                 to={to}
-                class="search-popover-item"
-                hidden={hidden}
+                class={`search-popover-item ${i === 0 ? 'focus' : ''}`}
+                // hidden={hidden}
                 onClick={(e) => {
                   props?.onSubmit?.(e);
                 }}
               >
                 <Icon
-                  icon={type === 'link' ? 'arrow-right' : 'search'}
+                  icon={icon || (type === 'link' ? 'arrow-right' : 'search')}
                   class="more-insignificant"
                 />
                 <span>{label}</span>{' '}