From 1c8bba456d378751c07e6b76dc9f5507369ca14c Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sat, 25 Feb 2023 11:25:50 +0800
Subject: [PATCH] Add menu for Public timeline

Add menu item to switch between Local and Federated
---
 src/app.css             |  2 ++
 src/components/icon.jsx |  1 +
 src/pages/public.jsx    | 62 +++++++++++++++++++++++++++++------------
 3 files changed, 47 insertions(+), 18 deletions(-)

diff --git a/src/app.css b/src/app.css
index d6664e0b..5dad9006 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1053,11 +1053,13 @@ body:has(.status-deck) .media-post-link {
   background-color: transparent;
 }
 .szh-menu .szh-menu__item {
+  display: block;
   padding: 8px 16px !important;
   transition: all 0.1s ease-in-out;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  text-decoration: none;
 }
 .szh-menu .szh-menu__item * {
   vertical-align: middle;
diff --git a/src/components/icon.jsx b/src/components/icon.jsx
index 52bb42d8..19a1f794 100644
--- a/src/components/icon.jsx
+++ b/src/components/icon.jsx
@@ -57,6 +57,7 @@ const ICONS = {
   user: 'mingcute:user-4-line',
   following: 'mingcute:walk-line',
   pin: 'mingcute:pin-line',
+  bus: 'mingcute:bus-2-line',
 };
 
 const modules = import.meta.glob('/node_modules/@iconify-icons/mingcute/*.js');
diff --git a/src/pages/public.jsx b/src/pages/public.jsx
index 62bc15a1..ecd8f08d 100644
--- a/src/pages/public.jsx
+++ b/src/pages/public.jsx
@@ -1,4 +1,4 @@
-// EXPERIMENTAL: This is a work in progress and may not work as expected.
+import { Menu, MenuDivider, MenuItem } from '@szhsin/react-menu';
 import { useRef } from 'preact/hooks';
 import { useNavigate, useParams } from 'react-router-dom';
 
@@ -75,25 +75,51 @@ function Public({ local, ...props }) {
       checkForUpdates={checkForUpdates}
       headerStart={<></>}
       headerEnd={
-        <button
-          type="button"
-          class="plain"
-          onClick={() => {
-            let newInstance = prompt(
-              'Enter a new instance e.g. "mastodon.social"',
-            );
-            if (!/\./.test(newInstance)) {
-              if (newInstance) alert('Invalid instance');
-              return;
-            }
-            if (newInstance) {
-              newInstance = newInstance.toLowerCase().trim();
-              navigate(isLocal ? `/${newInstance}/p/l` : `/${newInstance}/p`);
-            }
+        <Menu
+          portal={{
+            target: document.body,
           }}
+          // setDownOverflow
+          overflow="auto"
+          viewScroll="close"
+          position="anchor"
+          boundingBoxPadding="8 8 8 8"
+          menuButton={
+            <button type="button" class="plain">
+              <Icon icon="more" size="l" />
+            </button>
+          }
         >
-          <Icon icon="transfer" alt="Switch instance" />
-        </button>
+          <MenuItem href={isLocal ? `/#/${instance}/p` : `/#/${instance}/p/l`}>
+            {isLocal ? (
+              <>
+                <Icon icon="transfer" /> <span>Switch to Federated</span>
+              </>
+            ) : (
+              <>
+                <Icon icon="transfer" /> <span>Switch to Local</span>
+              </>
+            )}
+          </MenuItem>
+          <MenuDivider />
+          <MenuItem
+            onClick={() => {
+              let newInstance = prompt(
+                'Enter a new instance e.g. "mastodon.social"',
+              );
+              if (!/\./.test(newInstance)) {
+                if (newInstance) alert('Invalid instance');
+                return;
+              }
+              if (newInstance) {
+                newInstance = newInstance.toLowerCase().trim();
+                navigate(isLocal ? `/${newInstance}/p/l` : `/${newInstance}/p`);
+              }
+            }}
+          >
+            <Icon icon="bus" /> <span>Go to another instance…</span>
+          </MenuItem>
+        </Menu>
       }
     />
   );