Add share url button (#3259)

app/components/MobileNav.tsx

@@ -15,7 +15,7 @@ import {
 import * as React from "react";
 import { Dialog, Modal, ModalOverlay } from "react-aria-components";
 import { useTranslation } from "react-i18next";
-import { Link } from "react-router";
+import { Link, useLocation } from "react-router";
 import { useUser } from "~/features/auth/core/user";
 import { useChatContext } from "~/features/chat/useChatContext";
 import { FriendMenu } from "~/features/friends/components/FriendMenu";
@@ -27,6 +27,7 @@ import {
 	EVENTS_PAGE,
 	FRIENDS_PAGE,
 	navIconUrl,
+	SENDOU_INK_BASE_URL,
 	SETTINGS_PAGE,
 	SUPPORT_PAGE,
 	userPage,
@@ -44,6 +45,7 @@ import {
 import { navItems } from "./layout/nav-items";
 import styles from "./MobileNav.module.css";
 import { NotificationDot } from "./NotificationDot";
+import { ShareUrlButton } from "./ShareUrlButton";
 import { StreamListItems } from "./StreamListItems";
 
 type SidebarData = RootLoaderData["sidebar"] | undefined;
@@ -346,6 +348,7 @@ function MenuOverlay({
 }) {
 	const { t } = useTranslation(["front", "common"]);
 	const user = useUser();
+	const location = useLocation();
 
 	return (
 		<ModalOverlay
@@ -377,6 +380,11 @@ function MenuOverlay({
 									{t("common:pages.support")}
 								</LinkButton>
 							) : null}
+							<ShareUrlButton
+								variant="minimal"
+								shape="square"
+								url={`${SENDOU_INK_BASE_URL}${location.pathname}${location.search}`}
+							/>
 							<button
 								type="button"
 								className={styles.panelCloseButton}

app/components/ShareUrlButton.tsx

@@ -0,0 +1,44 @@
+import { Share2 } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { SendouButton } from "~/components/elements/Button";
+import { CopyToClipboardPopover } from "./CopyToClipboardPopover";
+
+export function ShareUrlButton({
+	url,
+	...buttonProps
+}: { url: string } & React.ComponentProps<typeof SendouButton>) {
+	const { t } = useTranslation(["common"]);
+
+	const canNativeShare =
+		typeof navigator !== "undefined" && typeof navigator.share === "function";
+
+	if (canNativeShare) {
+		return (
+			<SendouButton
+				variant="outlined"
+				size="small"
+				shape="circle"
+				icon={<Share2 />}
+				onPress={() => navigator.share({ url })}
+				aria-label={t("common:actions.share")}
+				{...buttonProps}
+			/>
+		);
+	}
+
+	return (
+		<CopyToClipboardPopover
+			url={url}
+			trigger={
+				<SendouButton
+					variant="outlined"
+					size="small"
+					shape="circle"
+					icon={<Share2 />}
+					aria-label={t("common:actions.share")}
+					{...buttonProps}
+				/>
+			}
+		/>
+	);
+}