Merge pull request cheeaun#937 from cheeaun/main

Update from main
Kitanit · Nov 22, 2024 · 8f048af · 8f048af
2 parents 12bd3b3 + dcc73d0
commit 8f048af
Show file tree

Hide file tree

Showing 21 changed files with 3,257 additions and 3,601 deletions.
diff --git a/README.md b/README.md
@@ -331,6 +331,7 @@ Costs involved in running and developing this web app:
 - <img src="https://crowdin-static.downloads.crowdin.com/avatar/14158861/medium/ba1ff31dc5743b067ea6685f735229a5_default.png" alt="" width="16" height="16" /> MrWillCom (Chinese Simplified)
 - <img src="https://crowdin-static.downloads.crowdin.com/avatar/15652333/medium/7f36f289f9e2fe41d89ad534a1047f0e.png" alt="" width="16" height="16" /> nclm (French)
 - <img src="https://crowdin-static.downloads.crowdin.com/avatar/16539461/medium/2f41b9f0b802c1d200a6ab62167a7229_default.png" alt="" width="16" height="16" /> pazpi (Italian)
+- <img src="https://crowdin-static.downloads.crowdin.com/avatar/13954917/medium/56a2cba267eb1b5d122bf62ddc0dd732_default.png" alt="" width="16" height="16" /> PPNplus (Thai)
 - <img src="https://crowdin-static.downloads.crowdin.com/avatar/15106977/medium/54bf93b19af8bbfdee579ea51685bafa.jpeg" alt="" width="16" height="16" /> punkrockgirl (Basque)
 - <img src="https://crowdin-static.downloads.crowdin.com/avatar/16536247/medium/f010c8e718a36229733a8b58f6bad2a4_default.png" alt="" width="16" height="16" /> radecos (French)
 - <img src="https://crowdin-static.downloads.crowdin.com/avatar/16538917/medium/092ec03f56f9dd1cbce94379fa4d4d38.png" alt="" width="16" height="16" /> Razem (Czech)

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,16 +16,16 @@
     "readme:i18n-volunteers": "node scripts/update-i18n-volunteers-readme.js"
   },
   "dependencies": {
-    "@formatjs/intl-localematcher": "~0.5.7",
-    "@formatjs/intl-segmenter": "~11.7.3",
+    "@formatjs/intl-localematcher": "~0.5.8",
+    "@formatjs/intl-segmenter": "~11.7.4",
     "@formkit/auto-animate": "~0.8.2",
     "@github/text-expander-element": "~2.8.0",
     "@iconify-icons/mingcute": "~1.2.9",
-    "@justinribeiro/lite-youtube": "~1.5.0",
+    "@justinribeiro/lite-youtube": "~1.6.0",
     "@lingui/detect-locale": "~4.14.0",
     "@lingui/macro": "~4.14.0",
     "@lingui/react": "~4.14.0",
-    "@szhsin/react-menu": "~4.2.2",
+    "@szhsin/react-menu": "~4.2.3",
     "chroma-js": "~3.1.2",
     "compare-versions": "~6.1.1",
     "fast-blurhash": "~1.1.4",
@@ -39,7 +39,7 @@
     "lz-string": "~1.5.0",
     "masto": "~6.10.1",
     "moize": "~6.1.6",
-    "p-retry": "~6.2.0",
+    "p-retry": "~6.2.1",
     "p-throttle": "~6.2.0",
     "preact": "~10.24.3",
     "punycode": "~2.3.1",
@@ -65,15 +65,15 @@
     "babel-plugin-macros": "~3.1.0",
     "postcss": "~8.4.49",
     "postcss-dark-theme-class": "~1.3.0",
-    "postcss-preset-env": "~10.1.0",
-    "sonda": "~0.6.0",
+    "postcss-preset-env": "~10.1.1",
+    "sonda": "~0.6.1",
     "twitter-text": "~3.1.0",
     "vite": "~5.4.11",
     "vite-plugin-generate-file": "~0.2.0",
     "vite-plugin-html-config": "~2.0.2",
-    "vite-plugin-pwa": "~0.20.5",
+    "vite-plugin-pwa": "~0.21.0",
     "vite-plugin-remove-console": "~2.2.0",
-    "vite-plugin-run": "~0.6.0",
+    "vite-plugin-run": "~0.6.1",
     "workbox-cacheable-response": "~7.3.0",
     "workbox-expiration": "~7.3.0",
     "workbox-navigation-preload": "~7.3.0",

diff --git a/src/app.css b/src/app.css
@@ -2077,6 +2077,11 @@ body > .szh-menu-container {
 .szh-menu__divider {
   background-color: var(--divider-color);
   margin-block: 4px;
+
+  > &:first-child,
+  li[role='none']:first-child + & {
+    display: none;
+  }
 }
 .szh-menu .szh-menu__item .menu-grow {
   flex-grow: 1;
@@ -2611,6 +2616,17 @@ ul.link-list li a .icon {
 #columns > .deck-container > .timeline-deck {
   content-visibility: auto;
 }
+#columns > .deck-container {
+  &:first-child:not(:only-child) > .deck {
+    margin-inline-start: auto;
+    margin-inline-end: 0;
+  }
+
+  &:last-child:not(:only-child) > .deck {
+    margin-inline-end: auto;
+    margin-inline-start: 0;
+  }
+}
 #columns .header-grid input {
   pointer-events: none;
 }

diff --git a/src/components/account-info.jsx b/src/components/account-info.jsx
@@ -2266,9 +2266,10 @@ function AccountHandleInfo({ acct, instance }) {
   // acct = username or username@server
   let [username, server] = acct.split('@');
   if (!server) server = instance;
+  const encodedAcct = punycode.toASCII(acct);
   return (
     <div class="handle-info">
-      <span class="handle-handle">
+      <span class="handle-handle" title={encodedAcct}>
         <b class="handle-username">{username}</b>
         <span class="handle-at">@</span>
         <b class="handle-server">{server}</b>

diff --git a/src/components/modal.jsx b/src/components/modal.jsx
@@ -1,13 +1,20 @@
 import './modal.css';
 
 import { createPortal } from 'preact/compat';
-import { useEffect, useRef } from 'preact/hooks';
+import { useEffect, useLayoutEffect, useRef } from 'preact/hooks';
 import { useHotkeys } from 'react-hotkeys-hook';
 
+import store from '../utils/store';
 import useCloseWatcher from '../utils/useCloseWatcher';
 
 const $modalContainer = document.getElementById('modal-container');
 
+function getBackdropThemeColor() {
+  return getComputedStyle(document.documentElement).getPropertyValue(
+    '--backdrop-theme-color',
+  );
+}
+
 function Modal({ children, onClose, onClick, class: className, minimized }) {
   if (!children) return null;
 
@@ -68,6 +75,50 @@ function Modal({ children, onClose, onClick, class: className, minimized }) {
     };
   }, [children, minimized]);
 
+  const $meta = useRef();
+  const metaColor = useRef();
+  useLayoutEffect(() => {
+    if (children && !minimized) {
+      const theme = store.local.get('theme');
+      if (theme) {
+        const backdropColor = getBackdropThemeColor();
+        console.log({ backdropColor });
+        $meta.current = document.querySelector(
+          `meta[name="theme-color"][data-theme-setting="manual"]`,
+        );
+        if ($meta.current) {
+          metaColor.current = $meta.current.content;
+          $meta.current.content = backdropColor;
+        }
+      } else {
+        const colorScheme = window.matchMedia('(prefers-color-scheme: dark)')
+          .matches
+          ? 'dark'
+          : 'light';
+        const backdropColor = getBackdropThemeColor();
+        console.log({ backdropColor });
+        $meta.current = document.querySelector(
+          `meta[name="theme-color"][media*="${colorScheme}"]`,
+        );
+        if ($meta.current) {
+          metaColor.current = $meta.current.content;
+          $meta.current.content = backdropColor;
+        }
+      }
+    } else {
+      // Reset meta color
+      if ($meta.current && metaColor.current) {
+        $meta.current.content = metaColor.current;
+      }
+    }
+    return () => {
+      // Reset meta color
+      if ($meta.current && metaColor.current) {
+        $meta.current.content = metaColor.current;
+      }
+    };
+  }, [children, minimized]);
+
   const Modal = (
     <div
       ref={(node) => {

diff --git a/src/components/nav-menu.jsx b/src/components/nav-menu.jsx
@@ -85,15 +85,6 @@ function NavMenu(props) {
     return results;
   }
 
-  const supportsLists = supports('@mastodon/lists');
-  const [lists, setLists] = useState([]);
-  useEffect(() => {
-    if (!supportsLists) return;
-    if (menuState === 'open') {
-      getLists().then(setLists);
-    }
-  }, [menuState === 'open']);
-
   const buttonClickTS = useRef();
   return (
     <>
@@ -229,47 +220,7 @@ function NavMenu(props) {
                   </span>
                 </MenuLink>
               )}
-              {lists?.length > 0 ? (
-                <SubMenu2
-                  menuClassName="nav-submenu"
-                  overflow="auto"
-                  gap={-8}
-                  label={
-                    <>
-                      <Icon icon="list" size="l" />
-                      <span class="menu-grow">
-                        <Trans>Lists</Trans>
-                      </span>
-                      <Icon icon="chevron-right" />
-                    </>
-                  }
-                >
-                  <MenuLink to="/l">
-                    <span>
-                      <Trans>All Lists</Trans>
-                    </span>
-                  </MenuLink>
-                  {lists?.length > 0 && (
-                    <>
-                      <MenuDivider />
-                      {lists.map((list) => (
-                        <MenuLink key={list.id} to={`/l/${list.id}`}>
-                          <span>{list.title}</span>
-                        </MenuLink>
-                      ))}
-                    </>
-                  )}
-                </SubMenu2>
-              ) : (
-                supportsLists && (
-                  <MenuLink to="/l">
-                    <Icon icon="list" size="l" />
-                    <span>
-                      <Trans>Lists</Trans>
-                    </span>
-                  </MenuLink>
-                )
-              )}
+              <ListMenu menuState={menuState} />
               <MenuLink to="/b">
                 <Icon icon="bookmark" size="l" />{' '}
                 <span>
@@ -447,4 +398,57 @@ function NavMenu(props) {
   );
 }
 
+function ListMenu({ menuState }) {
+  const supportsLists = supports('@mastodon/lists');
+  const [lists, setLists] = useState([]);
+  useEffect(() => {
+    if (!supportsLists) return;
+    if (menuState === 'open') {
+      getLists().then(setLists);
+    }
+  }, [menuState, supportsLists]);
+
+  return lists.length > 0 ? (
+    <SubMenu2
+      menuClassName="nav-submenu"
+      overflow="auto"
+      gap={-8}
+      label={
+        <>
+          <Icon icon="list" size="l" />
+          <span class="menu-grow">
+            <Trans>Lists</Trans>
+          </span>
+          <Icon icon="chevron-right" />
+        </>
+      }
+    >
+      <MenuLink to="/l">
+        <span>
+          <Trans>All Lists</Trans>
+        </span>
+      </MenuLink>
+      {lists?.length > 0 && (
+        <>
+          <MenuDivider />
+          {lists.map((list) => (
+            <MenuLink key={list.id} to={`/l/${list.id}`}>
+              <span>{list.title}</span>
+            </MenuLink>
+          ))}
+        </>
+      )}
+    </SubMenu2>
+  ) : (
+    supportsLists && (
+      <MenuLink to="/l">
+        <Icon icon="list" size="l" />
+        <span>
+          <Trans>Lists</Trans>
+        </span>
+      </MenuLink>
+    )
+  );
+}
+
 export default memo(NavMenu);
diff --git a/src/components/status.jsx b/src/components/status.jsx
@@ -125,15 +125,27 @@ function getPostText(status) {
   );
 }
 
+function forgivingQSA(selectors = [], dom = document) {
+  // Run QSA for list of selectors
+  // If a selector return invalid selector error, try the next one
+  for (const selector of selectors) {
+    try {
+      return dom.querySelectorAll(selector);
+    } catch (e) {}
+  }
+  return [];
+}
+
 function isTranslateble(content) {
   if (!content) return false;
   content = content.trim();
   if (!content) return false;
   const text = getHTMLText(content, {
     preProcess: (dom) => {
       // Remove .mention, pre, code, a:has(.invisible)
-      for (const a of dom.querySelectorAll(
-        '.mention, pre, code, a:has(.invisible)',
+      for (const a of forgivingQSA(
+        ['.mention, pre, code, a:has(.invisible)', '.mention, pre, code'],
+        dom,
       )) {
         a.remove();
       }
@@ -148,8 +160,12 @@ function getHTMLTextForDetectLang(content) {
       // Remove anything that can skew the language detection
 
       // Remove .mention, .hashtag, pre, code, a:has(.invisible)
-      for (const a of dom.querySelectorAll(
-        '.mention, .hashtag, pre, code, a:has(.invisible)',
+      for (const a of forgivingQSA(
+        [
+          '.mention, .hashtag, pre, code, a:has(.invisible)',
+          '.mention, .hashtag, pre, code',
+        ],
+        dom,
       )) {
         a.remove();
       }
@@ -2892,7 +2908,7 @@ function Card({ card, selfReferential, selfAuthor, instance }) {
         if (videoID) {
           return (
             <a class="card video" onClick={handleClick}>
-              <lite-youtube videoid={videoID} nocookie></lite-youtube>
+              <lite-youtube videoid={videoID} nocookie autoPause></lite-youtube>
             </a>
           );
         }

diff --git a/src/data/catalogs.json b/src/data/catalogs.json
@@ -105,7 +105,7 @@
     "code": "nb-NO",
     "nativeName": "norsk bokmål",
     "name": "Norwegian Bokmål",
-    "completion": 51
+    "completion": 52
   },
   {
     "code": "nl-NL",
@@ -141,7 +141,7 @@
     "code": "th-TH",
     "nativeName": "ไทย",
     "name": "Thai",
-    "completion": 5
+    "completion": 9
   },
   {
     "code": "uk-UA",

diff --git a/src/index.css b/src/index.css
@@ -88,8 +88,9 @@
   --outline-hover-color: rgba(128, 128, 128, 0.7);
   --divider-color: rgba(0, 0, 0, 0.1);
   --backdrop-color: rgba(0, 0, 0, 0.1);
+  --backdrop-solid-color: color-mix(in srgb, var(--bg-color) 90%, #000 10%);
+  --backdrop-theme-color: #e5e5e5;
   --backdrop-darker-color: rgba(0, 0, 0, 0.25);
-  --backdrop-solid-color: #eee;
   --img-bg-color: rgba(128, 128, 128, 0.2);
   --loader-color: #1c1e2199;
   --comment-line-color: #e5e5e5;
@@ -161,7 +162,8 @@
     --divider-color: rgba(255, 255, 255, 0.1);
     --bg-blur-color: #24252699;
     --backdrop-color: rgba(0, 0, 0, 0.5);
-    --backdrop-solid-color: #111;
+    --backdrop-solid-color: color-mix(in srgb, var(--bg-color) 50%, #000 50%);
+    --backdrop-theme-color: #121213; /* same as backdrop-solid-color but without color-mix, to be used for meta[theme-color] */
     --loader-color: #f0f2f599;
     --comment-line-color: #565656;
     --drop-shadow-color: rgba(0, 0, 0, 0.5);