Merge pull request #591 from cheeaun/main

Update from main

.prettierrc

@@ -3,18 +3,20 @@
   "useTabs": false,
   "singleQuote": true,
   "trailingComma": "all",
+  "plugins": ["@ianvs/prettier-plugin-sort-imports"],
   "importOrder": [
     "^[^.].*.css$",
     "index.css$",
     ".css$",
+    "",
     "./polyfills",
+    "",
     "<THIRD_PARTY_MODULES>",
+    "",
     "/assets/",
+    "",
     "^../",
+    "",
     "^[./]"
-  ],
-  "importOrderSeparation": true,
-  "importOrderSortSpecifiers": true,
-  "importOrderGroupNamespaceSpecifiers": true,
-  "importOrderCaseInsensitive": true
+  ]
 }

package.json

@@ -18,8 +18,8 @@
     "@iconify-icons/mingcute": "~1.2.9",
     "@justinribeiro/lite-youtube": "~1.5.0",
     "@szhsin/react-menu": "~4.1.0",
-    "compare-versions": "~6.1.0",
-    "dayjs": "~1.11.11",
+    "compare-versions": "~6.1.1",
+    "dayjs": "~1.11.12",
     "dayjs-twitter": "~0.5.0",
     "fast-blurhash": "~1.1.2",
     "fast-equals": "~5.0.1",
@@ -32,10 +32,10 @@
     "moize": "~6.1.6",
     "p-retry": "~6.2.0",
     "p-throttle": "~6.1.0",
-    "preact": "~10.22.0",
+    "preact": "~10.22.1",
     "punycode": "~2.3.1",
     "react-hotkeys-hook": "~4.5.0",
-    "react-intersection-observer": "~9.10.3",
+    "react-intersection-observer": "~9.13.0",
     "react-quick-pinch-zoom": "~5.1.0",
     "react-router-dom": "6.6.2",
     "string-length": "6.0.0",
@@ -49,13 +49,13 @@
     "valtio": "1.13.2"
   },
   "devDependencies": {
-    "@preact/preset-vite": "~2.8.2",
-    "@trivago/prettier-plugin-sort-imports": "~4.3.0",
-    "postcss": "~8.4.38",
+    "@ianvs/prettier-plugin-sort-imports": "~4.3.1",
+    "@preact/preset-vite": "~2.9.0",
+    "postcss": "~8.4.39",
     "postcss-dark-theme-class": "~1.3.0",
-    "postcss-preset-env": "~9.5.14",
+    "postcss-preset-env": "~9.6.0",
     "twitter-text": "~3.1.0",
-    "vite": "~5.3.1",
+    "vite": "~5.3.4",
     "vite-plugin-generate-file": "~0.1.1",
     "vite-plugin-html-config": "~1.0.11",
     "vite-plugin-pwa": "~0.20.0",

src/app.css

@@ -1113,6 +1113,15 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   padding: 6px;
 }
 
+.status-carousel.boosts-carousel .timeline-item-carousel-group {
+  flex-direction: column;
+  gap: 8px;
+
+  &:before {
+    content: '';
+  }
+}
+
 .ui-state {
   padding: 16px;
   text-align: center;

src/app.jsx

@@ -9,7 +9,9 @@ import {
   useState,
 } from 'preact/hooks';
 import { matchPath, Route, Routes, useLocation } from 'react-router-dom';
+
 import 'swiped-events';
+
 import { subscribe } from 'valtio';
 
 import BackgroundService from './components/background-service';
@@ -54,6 +56,7 @@ import focusDeck from './utils/focus-deck';
 import states, { initStates, statusKey } from './utils/states';
 import store from './utils/store';
 import { getCurrentAccount, setCurrentAccountID } from './utils/store-utils';
+
 import './utils/toast-alert';
 
 window.__STATES__ = states;

src/cloak-mode.css

@@ -9,14 +9,17 @@ body.cloak,
   .status .content-container,
   .status .content-container *,
   .status .content-compact > *,
+  .account-container .actions small,
   .account-container :is(header, main > *:not(.actions)),
   .account-container :is(header, main > *:not(.actions)) *,
-  .header-double-lines,
+  .header-double-lines *,
   .account-block,
   .catchup-filters .filter-author *,
   .post-peek-html *,
   .post-peek-content > *,
-  .request-notifications-account * {
+  .request-notifications-account *,
+  .status.compact-thread *,
+  .status .content-compact {
     text-decoration-thickness: 1.1em;
     text-decoration-line: line-through;
     /* text-rendering: optimizeSpeed; */
@@ -50,10 +53,19 @@ body.cloak,
 
 body.cloak,
 .cloak {
+  .header-double-lines *,
+  .account-container .profile-metadata b,
+  .account-container .actions small,
+  .account-container .stats *,
   .media-container figcaption,
   .media-container figcaption > *,
   .catchup-filters .filter-author *,
   .request-notifications-account * {
     color: var(--text-color) !important;
   }
+
+  .account-container .actions small,
+  .status .content-compact {
+    background-color: currentColor !important;
+  }
 }

src/components/account-info.jsx

@@ -33,9 +33,9 @@ import Icon from './icon';
 import Link from './link';
 import ListAddEdit from './list-add-edit';
 import Loader from './loader';
-import Menu2 from './menu2';
 import MenuConfirm from './menu-confirm';
 import MenuLink from './menu-link';
+import Menu2 from './menu2';
 import Modal from './modal';
 import SubMenu2 from './submenu2';
 import TranslationBlock from './translation-block';
@@ -568,9 +568,9 @@ function AccountInfo({
                   </div>
                   <MenuItem
                     onClick={() => {
-                      const handle = `@${acct}`;
+                      const handleWithInstance = acct.includes('@') ? `@${acct}` : `@${acct}@${instance}`;
                       try {
-                        navigator.clipboard.writeText(handle);
+                        navigator.clipboard.writeText(handleWithInstance);
                         showToast('Handle copied');
                       } catch (e) {
                         console.error(e);
@@ -924,6 +924,8 @@ function RelatedActions({
   const [currentInfo, setCurrentInfo] = useState(null);
   const [isSelf, setIsSelf] = useState(false);
 
+  const acctWithInstance = acct.includes('@') ? acct : `${acct}@${instance}`;
+
   useEffect(() => {
     if (info) {
       const currentAccount = getCurrentAccountID();
@@ -1205,7 +1207,7 @@ function RelatedActions({
             )}
             <MenuItem
               onClick={() => {
-                const handle = `@${currentInfo?.acct || acct}`;
+                const handle = `@${currentInfo?.acct || acctWithInstance}`;
                 try {
                   navigator.clipboard.writeText(handle);
                   showToast('Handle copied');
@@ -1220,7 +1222,7 @@ function RelatedActions({
                 Copy handle
                 <br />
                 <span class="more-insignificant">
-                  @{currentInfo?.acct || acct}
+                  @{currentInfo?.acct || acctWithInstance}
                 </span>
               </small>
             </MenuItem>

src/components/compose.jsx

@@ -1,11 +1,10 @@
 import './compose.css';
-
 import '@github/text-expander-element';
+
 import { MenuItem } from '@szhsin/react-menu';
 import { deepEqual } from 'fast-equals';
 import Fuse from 'fuse.js';
-import { memo } from 'preact/compat';
-import { forwardRef } from 'preact/compat';
+import { forwardRef, memo } from 'preact/compat';
 import {
   useCallback,
   useEffect,
@@ -148,23 +147,22 @@ const SCAN_RE = new RegExp(
 );
 
 const segmenter = new Intl.Segmenter();
-function highlightText(text, { maxCharacters = Infinity }) {
-  // Accept text string, return formatted HTML string
-  // Escape all HTML special characters
-  let html = text
+function escapeHTML(text) {
+  return text
     .replace(/&/g, '&')
     .replace(/</g, '&lt;')
     .replace(/>/g, '&gt;')
     .replace(/"/g, '&quot;')
     .replace(/'/g, '&apos;');
-
+}
+function highlightText(text, { maxCharacters = Infinity }) {
   // Exceeded characters limit
   const { composerCharacterCount } = states;
   if (composerCharacterCount > maxCharacters) {
     // Highlight exceeded characters
     let withinLimitHTML = '',
       exceedLimitHTML = '';
-    const htmlSegments = segmenter.segment(html);
+    const htmlSegments = segmenter.segment(text);
     for (const { segment, index } of htmlSegments) {
       if (index < maxCharacters) {
         withinLimitHTML += segment;
@@ -175,13 +173,13 @@ function highlightText(text, { maxCharacters = Infinity }) {
     if (exceedLimitHTML) {
       exceedLimitHTML =
         '<mark class="compose-highlight-exceeded">' +
-        exceedLimitHTML +
+        escapeHTML(exceedLimitHTML) +
         '</mark>';
     }
-    return withinLimitHTML + exceedLimitHTML;
+    return escapeHTML(withinLimitHTML) + exceedLimitHTML;
   }
 
-  return html
+  return escapeHTML(text)
     .replace(urlRegexObj, '$2<mark class="compose-highlight-url">$3</mark>') // URLs
     .replace(MENTION_RE, '$1<mark class="compose-highlight-mention">$2</mark>') // Mentions
     .replace(HASHTAG_RE, '$1<mark class="compose-highlight-hashtag">$2</mark>') // Hashtags
@@ -2317,10 +2315,8 @@ function MediaAttachment({
       </div>
       {showModal && (
         <Modal
-          onClick={(e) => {
-            if (e.target === e.currentTarget) {
-              setShowModal(false);
-            }
+          onClose={() => {
+            setShowModal(false);
           }}
         >
           <div id="media-sheet" class="sheet sheet-max">

src/components/media-modal.jsx

@@ -16,8 +16,8 @@ import states from '../utils/states';
 import Icon from './icon';
 import Link from './link';
 import Media from './media';
-import Menu2 from './menu2';
 import MenuLink from './menu-link';
+import Menu2 from './menu2';
 
 const { PHANPY_IMG_ALT_API_URL: IMG_ALT_API_URL } = import.meta.env;
 

src/components/media.jsx

@@ -1,5 +1,6 @@
 import { getBlurHashAverageColor } from 'fast-blurhash';
 import { Fragment } from 'preact';
+import { memo } from 'preact/compat';
 import {
   useCallback,
   useLayoutEffect,
@@ -676,4 +677,14 @@ function getURLObj(url) {
   return URL.parse(url, location.origin);
 }
 
-export default Media;
+export default memo(Media, (oldProps, newProps) => {
+  const oldMedia = oldProps.media || {};
+  const newMedia = newProps.media || {};
+
+  return (
+    oldMedia?.id === newMedia?.id &&
+    oldMedia.url === newMedia.url &&
+    oldProps.to === newProps.to &&
+    oldProps.class === newProps.class
+  );
+});