Merge pull request #252 from cheeaun/main

Update from main

package-lock.json

@@ -28,7 +28,7 @@
         "preact": "~10.18.1",
         "react-hotkeys-hook": "~4.4.1",
         "react-intersection-observer": "~9.5.2",
-        "react-quick-pinch-zoom": "~4.9.0",
+        "react-quick-pinch-zoom": "~5.0.0",
         "react-router-dom": "6.6.2",
         "string-length": "5.0.1",
         "swiped-events": "~1.1.7",
@@ -46,7 +46,7 @@
         "postcss-dark-theme-class": "~1.0.0",
         "postcss-preset-env": "~9.1.4",
         "twitter-text": "~3.1.0",
-        "vite": "~4.4.9",
+        "vite": "~4.4.11",
         "vite-plugin-generate-file": "~0.0.4",
         "vite-plugin-html-config": "~1.0.11",
         "vite-plugin-pwa": "~0.16.5",
@@ -6552,17 +6552,21 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "node_modules/react-quick-pinch-zoom": {
-      "version": "4.9.0",
-      "resolved": "https://registry.npmjs.org/react-quick-pinch-zoom/-/react-quick-pinch-zoom-4.9.0.tgz",
-      "integrity": "sha512-gCPnZu5+rkYDNvewi/d7A2wgLs7izQNMuC6kjt+KLC1qqHnRU27Ed8AgcEcnWAZKdMr3ZKoKhSvjlZSVZI0fuw==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/react-quick-pinch-zoom/-/react-quick-pinch-zoom-5.0.0.tgz",
+      "integrity": "sha512-497ngiMfWUcBuA8fakYU7rxjCEb6uSglQ6jn5GMvLUURnBN7aI/Li2nWs/otlHtksvVvxaBpz1rDW07/r/I6Rw==",
       "dependencies": {
         "tslib": ">=2.0.0"
       },
       "peerDependencies": {
+        "prop-types": ">=15.0.0",
         "react": ">=16.4.0",
         "react-dom": ">=16.4.0"
       },
       "peerDependenciesMeta": {
+        "prop-types": {
+          "optional": true
+        },
         "react": {
           "optional": true
         },
@@ -7406,9 +7410,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "4.4.9",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.9.tgz",
-      "integrity": "sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA==",
+      "version": "4.4.11",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.11.tgz",
+      "integrity": "sha512-ksNZJlkcU9b0lBwAGZGGaZHCMqHsc8OpgtoYhsQ4/I2v5cnpmmmqe5pM4nv/4Hn6G/2GhTdj0DhZh2e+Er1q5A==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.18.10",
@@ -12115,9 +12119,9 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "react-quick-pinch-zoom": {
-      "version": "4.9.0",
-      "resolved": "https://registry.npmjs.org/react-quick-pinch-zoom/-/react-quick-pinch-zoom-4.9.0.tgz",
-      "integrity": "sha512-gCPnZu5+rkYDNvewi/d7A2wgLs7izQNMuC6kjt+KLC1qqHnRU27Ed8AgcEcnWAZKdMr3ZKoKhSvjlZSVZI0fuw==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/react-quick-pinch-zoom/-/react-quick-pinch-zoom-5.0.0.tgz",
+      "integrity": "sha512-497ngiMfWUcBuA8fakYU7rxjCEb6uSglQ6jn5GMvLUURnBN7aI/Li2nWs/otlHtksvVvxaBpz1rDW07/r/I6Rw==",
       "requires": {
         "tslib": ">=2.0.0"
       }
@@ -12717,9 +12721,9 @@
       }
     },
     "vite": {
-      "version": "4.4.9",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.9.tgz",
-      "integrity": "sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA==",
+      "version": "4.4.11",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.11.tgz",
+      "integrity": "sha512-ksNZJlkcU9b0lBwAGZGGaZHCMqHsc8OpgtoYhsQ4/I2v5cnpmmmqe5pM4nv/4Hn6G/2GhTdj0DhZh2e+Er1q5A==",
       "dev": true,
       "requires": {
         "esbuild": "^0.18.10",

package.json

@@ -30,7 +30,7 @@
     "preact": "~10.18.1",
     "react-hotkeys-hook": "~4.4.1",
     "react-intersection-observer": "~9.5.2",
-    "react-quick-pinch-zoom": "~4.9.0",
+    "react-quick-pinch-zoom": "~5.0.0",
     "react-router-dom": "6.6.2",
     "string-length": "5.0.1",
     "swiped-events": "~1.1.7",
@@ -48,7 +48,7 @@
     "postcss-dark-theme-class": "~1.0.0",
     "postcss-preset-env": "~9.1.4",
     "twitter-text": "~3.1.0",
-    "vite": "~4.4.9",
+    "vite": "~4.4.11",
     "vite-plugin-generate-file": "~0.0.4",
     "vite-plugin-html-config": "~1.0.11",
     "vite-plugin-pwa": "~0.16.5",

src/app.css

@@ -1335,12 +1335,16 @@ body:has(.media-modal-container + .status-deck) .media-post-link {
   position: relative;
 }
 .sheet-max {
-  width: 90vw;
-  width: 90dvw;
   max-width: none;
   height: 90vh;
   height: 90dvh;
 }
+@media (min-width: 40em) {
+  .sheet {
+    width: 90vw;
+    width: 90dvw;
+  }
+}
 .sheet .sheet-close {
   position: absolute;
   border-radius: 0;

src/components/compose.css

@@ -487,7 +487,28 @@
     padding-inline: 24px;
   }
 }
+#media-sheet {
+  .media-form {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    min-height: 50vh;
 
+    textarea {
+      flex-grow: 1;
+      resize: none;
+      width: 100%;
+      /* height: 10em; */
+    }
+
+    footer {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+  }
+}
 #media-sheet main {
   padding-top: 8px;
   display: flex;
@@ -495,10 +516,6 @@
   flex: 1;
   gap: 8px;
 }
-#media-sheet textarea {
-  width: 100%;
-  height: 10em;
-}
 #media-sheet .media-preview {
   border: 2px solid var(--outline-color);
   border-radius: 8px;
@@ -515,6 +532,7 @@
     linear-gradient(-45deg, transparent 75%, var(--img-bg-color) 75%);
   background-size: 20px 20px;
   background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+  flex: 0.8;
 }
 #media-sheet .media-preview > * {
   width: 100%;
@@ -534,11 +552,11 @@
   #media-sheet .media-preview > * {
     max-height: none;
   }
-  #media-sheet textarea {
+  /* #media-sheet textarea {
     flex: 1;
     min-height: 100%;
     height: auto;
-  }
+  } */
 }
 
 #custom-emojis-sheet {

src/components/compose.jsx

@@ -1477,7 +1477,8 @@ function MediaAttachment({
   onRemove = () => {},
 }) {
   const supportsEdit = supports('@mastodon/edit-media-attributes');
-  const { url, type, id } = attachment;
+  const { type, id, file } = attachment;
+  const url = file ? URL.createObjectURL(file) : attachment.url;
   console.log({ attachment });
   const [description, setDescription] = useState(attachment.description);
   const suffixType = type.split('/')[0];
@@ -1544,6 +1545,7 @@ function MediaAttachment({
       <div class="media-attachment">
         <div
           class="media-preview"
+          tabIndex="0"
           onClick={() => {
             setShowModal(true);
           }}
@@ -1570,6 +1572,7 @@ function MediaAttachment({
       </div>
       {showModal && (
         <Modal
+          class="light"
           onClick={(e) => {
             if (e.target === e.currentTarget) {
               setShowModal(false);
@@ -1607,7 +1610,20 @@ function MediaAttachment({
                   <audio src={url} controls />
                 ) : null}
               </div>
-              {descTextarea}
+              <div class="media-form">
+                {descTextarea}
+                <footer>
+                  <button
+                    type="button"
+                    class="light block"
+                    onClick={() => {
+                      setShowModal(false);
+                    }}
+                  >
+                    Done
+                  </button>
+                </footer>
+              </div>
             </main>
           </div>
         </Modal>

src/components/name-text.jsx

@@ -25,13 +25,20 @@ function NameText({
   const trimmedDisplayName = (displayName || '').toLowerCase().trim();
   const shortenedDisplayName = trimmedDisplayName
     .replace(/(\:(\w|\+|\-)+\:)(?=|[\!\.\?]|$)/g, '') // Remove shortcodes, regex from https://regex101.com/r/iE9uV0/1
-    .replace(/\s+/g, '') // E.g. "My name" === "myname"
-    .replace(/[^a-z0-9]/gi, ''); // Remove non-alphanumeric characters
+    .replace(/\s+/g, ''); // E.g. "My name" === "myname"
+  const shortenedAlphaNumericDisplayName = shortenedDisplayName.replace(
+    /[^a-z0-9]/gi,
+    '',
+  ); // Remove non-alphanumeric characters
 
   if (
     !short &&
     (trimmedUsername === trimmedDisplayName ||
-      trimmedUsername === shortenedDisplayName)
+      trimmedUsername === shortenedDisplayName ||
+      trimmedUsername === shortenedAlphaNumericDisplayName ||
+      trimmedUsername.localeCompare?.(shortenedDisplayName, 'en', {
+        sensitivity: 'base',
+      }) === 0)
   ) {
     username = null;
   }

src/components/shortcuts.css

@@ -82,6 +82,8 @@
   list-style: none;
   display: flex;
   justify-content: center;
+  min-width: 20vw;
+  flex-basis: 20vw;
 }
 #shortcuts .tab-bar li a {
   -webkit-tap-highlight-color: transparent;
@@ -95,7 +97,11 @@
   padding: 8px;
   text-decoration: none;
   text-shadow: 0 var(--hairline-width) var(--bg-color);
-  width: 20vw;
+  width: 100%;
+
+  &:is(:hover, :focus) {
+    color: var(--text-color);
+  }
 }
 #shortcuts .tab-bar li a:active {
   transform: scale(0.95);
@@ -171,6 +177,8 @@ shortcuts .tab-bar[hidden] {
   }
   #shortcuts .tab-bar li {
     flex-grow: 0;
+    min-width: auto;
+    flex-basis: auto;
   }
   #shortcuts .tab-bar li a {
     padding: 0 16px;

src/components/status.jsx

@@ -1551,14 +1551,18 @@ function Card({ card, instance }) {
     description,
     html,
     providerName,
+    providerUrl,
     authorName,
+    authorUrl,
     width,
     height,
     image,
+    imageDescription,
     url,
     type,
     embedUrl,
     language,
+    publishedAt,
   } = card;
 
   /* type
@@ -1631,7 +1635,7 @@ function Card({ card, instance }) {
             width={width}
             height={height}
             loading="lazy"
-            alt=""
+            alt={imageDescription || ''}
             onError={(e) => {
               try {
                 e.target.style.display = 'none';

src/components/timeline.jsx

@@ -17,6 +17,12 @@ import Link from './link';
 import NavMenu from './nav-menu';
 import Status from './status';
 
+const scrollIntoViewOptions = {
+  block: 'nearest',
+  inline: 'center',
+  behavior: 'smooth',
+};
+
 function Timeline({
   title,
   titleComponent,
@@ -111,7 +117,7 @@ function Timeline({
       }
       if (nextItem) {
         nextItem.focus();
-        nextItem.scrollIntoViewIfNeeded?.();
+        nextItem.scrollIntoView(scrollIntoViewOptions);
       }
     } else {
       // If active status is not in viewport, get the topmost status-link in viewport
@@ -121,7 +127,7 @@ function Timeline({
       });
       if (topmostItem) {
         topmostItem.focus();
-        topmostItem.scrollIntoViewIfNeeded?.();
+        topmostItem.scrollIntoView(scrollIntoViewOptions);
       }
     }
   });
@@ -150,7 +156,7 @@ function Timeline({
       }
       if (prevItem) {
         prevItem.focus();
-        prevItem.scrollIntoViewIfNeeded?.();
+        prevItem.scrollIntoView(scrollIntoViewOptions);
       }
     } else {
       // If active status is not in viewport, get the topmost status-link in viewport
@@ -160,7 +166,7 @@ function Timeline({
       });
       if (topmostItem) {
         topmostItem.focus();
-        topmostItem.scrollIntoViewIfNeeded?.();
+        topmostItem.scrollIntoView(scrollIntoViewOptions);
       }
     }
   });

src/pages/status.jsx

@@ -54,6 +54,12 @@ function resetScrollPosition(id) {
   delete scrollPositions[id];
 }
 
+const scrollIntoViewOptions = {
+  block: 'nearest',
+  inline: 'center',
+  behavior: 'smooth',
+};
+
 function StatusPage(params) {
   const { id } = params;
   const { masto, instance } = api({ instance: params.instance });
@@ -555,7 +561,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
       let nextStatus = allStatusLinks[activeStatusIndex + 1];
       if (nextStatus) {
         nextStatus.focus();
-        nextStatus.scrollIntoViewIfNeeded?.();
+        nextStatus.scrollIntoView(scrollIntoViewOptions);
       }
     } else {
       // If active status is not in viewport, get the topmost status-link in viewport
@@ -565,7 +571,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
       });
       if (topmostStatusLink) {
         topmostStatusLink.focus();
-        topmostStatusLink.scrollIntoViewIfNeeded?.();
+        topmostStatusLink.scrollIntoView(scrollIntoViewOptions);
       }
     }
   });
@@ -589,7 +595,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
       let prevStatus = allStatusLinks[activeStatusIndex - 1];
       if (prevStatus) {
         prevStatus.focus();
-        prevStatus.scrollIntoViewIfNeeded?.();
+        prevStatus.scrollIntoView(scrollIntoViewOptions);
       }
     } else {
       // If active status is not in viewport, get the topmost status-link in viewport
@@ -599,7 +605,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
       });
       if (topmostStatusLink) {
         topmostStatusLink.focus();
-        topmostStatusLink.scrollIntoViewIfNeeded?.();
+        topmostStatusLink.scrollIntoView(scrollIntoViewOptions);
       }
     }
   });