Add ability to switch post to its own instance

src/app.css

@@ -1093,6 +1093,10 @@ body:has(.status-deck) .media-post-link {
   line-height: 1.2;
   /* border-bottom: 1px solid var(--outline-color); */
 }
+.szh-menu__header.plain {
+  margin-bottom: 0;
+  background-color: transparent;
+}
 .szh-menu__header * {
   vertical-align: middle;
 }
@@ -1155,11 +1159,11 @@ body:has(.status-deck) .media-post-link {
   overflow: hidden;
 }
 .szh-menu .menu-double-lines {
-  white-space: normal;
+  white-space: normal !important;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
-  overflow: hidden;
+  overflow: hidden !important;
 }
 .szh-menu .menu-double-lines span {
   white-space: normal;

src/pages/status.jsx

@@ -1,6 +1,6 @@
 import './status.css';
 
-import { Menu, MenuDivider, MenuItem } from '@szhsin/react-menu';
+import { Menu, MenuDivider, MenuHeader, MenuItem } from '@szhsin/react-menu';
 import debounce from 'just-debounce-it';
 import pRetry from 'p-retry';
 import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
@@ -322,6 +322,17 @@ function StatusPage() {
     '/:instance?/s/:id',
   );
 
+  const postInstance = useMemo(() => {
+    if (!heroStatus) return;
+    const { url } = heroStatus;
+    if (!url) return;
+    return new URL(url).hostname;
+  }, [heroStatus]);
+  const postSameInstance = useMemo(() => {
+    if (!postInstance) return;
+    return postInstance === instance;
+  }, [postInstance, instance]);
+
   const closeLink = useMemo(() => {
     const { prevLocation } = snapStates;
     const pathname =
@@ -564,7 +575,6 @@ function StatusPage() {
                     <Icon icon="refresh" />
                     <span>Refresh</span>
                   </MenuItem>
-                  <MenuDivider />
                   <MenuItem
                     onClick={() => {
                       // Click all buttons with class .spoiler but not .spoiling
@@ -581,6 +591,24 @@ function StatusPage() {
                     <Icon icon="eye-open" />{' '}
                     <span>Show all sensitive content</span>
                   </MenuItem>
+                  <MenuDivider />
+                  <MenuHeader className="plain">Experimental</MenuHeader>
+                  <MenuItem
+                    disabled={postSameInstance}
+                    onClick={() => {
+                      const statusURL = getInstanceStatusURL(heroStatus.url);
+                      if (statusURL) {
+                        navigate(statusURL);
+                      } else {
+                        alert('Unable to switch');
+                      }
+                    }}
+                  >
+                    <Icon icon="transfer" />
+                    <small class="menu-double-lines">
+                      Switch to post's instance (<b>{postInstance}</b>)
+                    </small>
+                  </MenuItem>
                 </Menu>
               )}
               <Link
@@ -912,4 +940,14 @@ function SubComments({ hasManyStatuses, replies, instance, hasParentThread }) {
   );
 }
 
+function getInstanceStatusURL(url) {
+  // Regex /:username/:id, where username = @username or @username@domain, id = anything
+  const statusRegex = /\/@([^@\/]+)@?([^\/]+)?\/([^\/]+)\/?$/i;
+  const { hostname, pathname } = new URL(url);
+  const [, username, domain, id] = pathname.match(statusRegex) || [];
+  if (id) {
+    return `/${hostname}/s/${id}`;
+  }
+}
+
 export default StatusPage;