Convert all the punycodes

Surprising that this is still not built into browsers

package-lock.json

@@ -30,6 +30,7 @@
         "p-retry": "~6.2.0",
         "p-throttle": "~6.1.0",
         "preact": "~10.20.1",
+        "punycode": "~2.3.1",
         "react-hotkeys-hook": "~4.5.0",
         "react-intersection-observer": "~9.8.1",
         "react-quick-pinch-zoom": "~5.1.0",
@@ -7154,11 +7155,9 @@
       "integrity": "sha512-8xuCeM3l8yqdmbPoYeLbrAXCBWu19XEYc5/F28f5qOaoAIMyfmBUkl5axiK+x9olUvRlcekvnm98AP9RDngOIw=="
     },
     "node_modules/punycode": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
-      "integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==",
-      "dev": true,
-      "license": "MIT",
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
       "engines": {
         "node": ">=6"
       }

package.json

@@ -32,6 +32,7 @@
     "p-retry": "~6.2.0",
     "p-throttle": "~6.1.0",
     "preact": "~10.20.1",
+    "punycode": "~2.3.1",
     "react-hotkeys-hook": "~4.5.0",
     "react-intersection-observer": "~9.8.1",
     "react-quick-pinch-zoom": "~5.1.0",

src/components/account-info.jsx

@@ -9,6 +9,7 @@ import {
   useRef,
   useState,
 } from 'preact/hooks';
+import punycode from 'punycode';
 
 import { api } from '../utils/api';
 import enhanceContent from '../utils/enhance-content';
@@ -228,7 +229,7 @@ function AccountInfo({
 
   const accountInstance = useMemo(() => {
     if (!url) return null;
-    const domain = new URL(url).hostname;
+    const domain = punycode.toUnicode(new URL(url).hostname);
     return domain;
   }, [url]);
 
@@ -1598,7 +1599,7 @@ function niceAccountURL(url) {
   const path = pathname.replace(/\/$/, '').replace(/^\//, '');
   return (
     <>
-      <span class="more-insignificant">{host}/</span>
+      <span class="more-insignificant">{punycode.toUnicode(host)}/</span>
       <wbr />
       <span>{path}</span>
     </>

src/components/status.jsx

@@ -20,6 +20,7 @@ import {
   useRef,
   useState,
 } from 'preact/hooks';
+import punycode from 'punycode';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useLongPress } from 'use-long-press';
 import { useSnapshot } from 'valtio';
@@ -2231,9 +2232,9 @@ function Card({ card, selfReferential, instance }) {
   );
 
   if (hasText && (image || (type === 'photo' && blurhash))) {
-    const domain = new URL(url).hostname
-      .replace(/^www\./, '')
-      .replace(/\/$/, '');
+    const domain = punycode.toUnicode(
+      new URL(url).hostname.replace(/^www\./, '').replace(/\/$/, ''),
+    );
     let blurhashImage;
     const rgbAverageColor =
       image && blurhash ? getBlurHashAverageColor(blurhash) : null;
@@ -2349,7 +2350,9 @@ function Card({ card, selfReferential, instance }) {
       // );
     }
     if (hasText && !image) {
-      const domain = new URL(url).hostname.replace(/^www\./, '');
+      const domain = punycode.toUnicode(
+        new URL(url).hostname.replace(/^www\./, ''),
+      );
       return (
         <a
           href={cardStatusURL || url}
@@ -2881,7 +2884,7 @@ function nicePostURL(url) {
   const [_, username, restPath] = path.match(/\/(@[^\/]+)\/(.*)/) || [];
   return (
     <>
-      {host}
+      {punycode.toUnicode(host)}
       {username ? (
         <>
           /{username}

src/pages/account-statuses.jsx

@@ -6,6 +6,7 @@ import {
   useRef,
   useState,
 } from 'preact/hooks';
+import punycode from 'punycode';
 import { useParams, useSearchParams } from 'react-router-dom';
 import { useSnapshot } from 'valtio';
 
@@ -516,7 +517,13 @@ function AccountStatuses() {
           >
             <Icon icon="transfer" />{' '}
             <small class="menu-double-lines">
-              Switch to account's instance (<b>{accountInstance}</b>)
+              Switch to account's instance{' '}
+              {accountInstance ? (
+                <>
+                  {' '}
+                  (<b>{punycode.toUnicode(accountInstance)}</b>)
+                </>
+              ) : null}
             </small>
           </MenuItem>
           {!sameCurrentInstance && (

src/pages/catchup.jsx

@@ -13,6 +13,7 @@ import {
   useRef,
   useState,
 } from 'preact/hooks';
+import punycode from 'punycode';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useSearchParams } from 'react-router-dom';
 import { uid } from 'uid/single';
@@ -1099,9 +1100,11 @@ function Catchup() {
                         height,
                         publishedAt,
                       } = card;
-                      const domain = new URL(url).hostname
-                        .replace(/^www\./, '')
-                        .replace(/\/$/, '');
+                      const domain = punycode.toUnicode(
+                        new URL(url).hostname
+                          .replace(/^www\./, '')
+                          .replace(/\/$/, ''),
+                      );
                       let accentColor;
                       if (blurhash) {
                         const averageColor = getBlurHashAverageColor(blurhash);

src/pages/status.jsx

@@ -12,10 +12,10 @@ import {
   useRef,
   useState,
 } from 'preact/hooks';
+import punycode from 'punycode';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { InView } from 'react-intersection-observer';
 import { matchPath, useSearchParams } from 'react-router-dom';
-import { useDebouncedCallback } from 'use-debounce';
 import { useSnapshot } from 'valtio';
 
 import Avatar from '../components/avatar';
@@ -1208,7 +1208,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
                   {postInstance ? (
                     <>
                       {' '}
-                      (<b>{postInstance}</b>)
+                      (<b>{punycode.toUnicode(postInstance)}</b>)
                     </>
                   ) : (
                     ''

src/pages/trending.jsx

@@ -3,6 +3,7 @@ import '../components/links-bar.css';
 import { MenuItem } from '@szhsin/react-menu';
 import { getBlurHashAverageColor } from 'fast-blurhash';
 import { useMemo, useRef, useState } from 'preact/hooks';
+import punycode from 'punycode';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useSnapshot } from 'valtio';
 
@@ -161,9 +162,9 @@ function Trending({ columnMode, ...props }) {
                 url,
                 width,
               } = link;
-              const domain = new URL(url).hostname
-                .replace(/^www\./, '')
-                .replace(/\/$/, '');
+              const domain = punycode.toUnicode(
+                new URL(url).hostname.replace(/^www\./, '').replace(/\/$/, ''),
+              );
               let accentColor;
               if (blurhash) {
                 const averageColor = getBlurHashAverageColor(blurhash);