share sheet component with Bluesky sharing and copy options

js/app/components/mobile/bottom-metadata.tsx

···
   Button,
   layout,
   PlayerUI,
+  ShareSheet,
   Text,
   useAvatars,
   useLivestreamInfo,
···
         <View style={[layout.flex.row, layout.flex.center, gap.all[4]]}>
           <View style={[layout.flex.row, layout.flex.center, gap.all[2]]}>
             <PlayerUI.Viewers />
+            <ShareSheet />
           </View>
           <Button
             variant="outline"

js/components/src/components/icons/bluesky-icon.tsx

···
+import Svg, { Path } from "react-native-svg";
+
+export function BlueskyIcon({ size = 20, color = "#000" }) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 600 530" fill={color}>
+      <Path d="M136 44c66 50 138 151 164 205 26-54 98-155 164-205 48-36 126-64 126 25 0 18-10 149-16 170-21 74-96 93-163 81 117 20 147 86 82 153-122 125-176-32-189-72-3-8-4-11-4-8 0-3-1 0-4 8-13 40-67 197-189 72-65-67-35-133 82-153-67 12-142-7-163-81-6-21-16-152-16-170 0-89 78-61 126-25z" />
+    </Svg>
+  );
+}

js/components/src/components/share/sharesheet.tsx

···
+import { Code, Copy, Link2, Share2 } from "lucide-react-native";
+import { useCallback, useState } from "react";
+import { Clipboard, Linking, Platform, View } from "react-native";
+import { colors } from "../../lib/theme";
+import { useLivestreamStore } from "../../livestream-store";
+import { useUrl } from "../../streamplace-store";
+import { BlueskyIcon } from "../icons/bluesky-icon";
+import {
+  DropdownMenu,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  ResponsiveDropdownMenuContent,
+  Text,
+} from "../ui";
+
+export interface ShareSheetProps {
+  onShare?: (action: string, success: boolean) => void;
+}
+
+export function ShareSheet({ onShare }: ShareSheetProps = {}) {
+  const profile = useLivestreamStore((x) => x.profile);
+  const [isCopying, setIsCopying] = useState(false);
+  const url = useUrl();
+
+  // Get the current stream URL
+  const getStreamUrl = useCallback(() => {
+    return url + (profile ? `/@${profile.handle}` : "");
+  }, [profile]);
+
+  // Get the embed URL
+  const getEmbedUrl = useCallback(() => {
+    return url + (profile ? `/embed/${profile.handle}` : "");
+  }, [profile]);
+
+  // Get embed code
+  const getEmbedCode = useCallback(() => {
+    const embedUrl = getEmbedUrl();
+    return `<iframe src="${embedUrl}" width="640" height="360" frameborder="0" allowfullscreen></iframe>`;
+  }, [getEmbedUrl]);
+
+  // Copy to clipboard handler
+  const copyToClipboard = useCallback(
+    async (text: string, label: string) => {
+      setIsCopying(true);
+      try {
+        if (Platform.OS === "web") {
+          await navigator.clipboard.writeText(text);
+        } else {
+          Clipboard.setString(text);
+        }
+        onShare?.(`copy_${label.toLowerCase().replace(/\s+/g, "_")}`, true);
+      } catch (error) {
+        onShare?.(`copy_${label.toLowerCase().replace(/\s+/g, "_")}`, false);
+      } finally {
+        setIsCopying(false);
+      }
+    },
+    [onShare],
+  );
+
+  // Share to Bluesky
+  const shareToBluesky = useCallback(() => {
+    const streamUrl = getStreamUrl();
+    const text = profile
+      ? `Check out @${profile.handle} live on Streamplace! ${streamUrl}`
+      : `Check out this stream on Streamplace! ${streamUrl}`;
+    const blueskyUrl = `https://bsky.app/intent/compose?text=${encodeURIComponent(text)}`;
+    Linking.openURL(blueskyUrl);
+    onShare?.("share_bluesky", true);
+  }, [profile, getStreamUrl, onShare]);
+
+  // Share to Twitter/X
+  const shareToTwitter = useCallback(() => {
+    const streamUrl = getStreamUrl();
+    const text = profile
+      ? `Check out @${profile.handle} live on Streamplace!`
+      : `Check out this stream on Streamplace!`;
+    const twitterUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(streamUrl)}`;
+    Linking.openURL(twitterUrl);
+    onShare?.("share_twitter", true);
+  }, [profile, getStreamUrl, onShare]);
+
+  // Native share (mobile)
+  const nativeShare = useCallback(async () => {
+    const streamUrl = getStreamUrl();
+    const text = profile
+      ? `Check out @${profile.handle} live on Streamplace!`
+      : `Check out this stream on Streamplace!`;
+
+    if (Platform.OS === "web" && navigator.share) {
+      try {
+        await navigator.share({
+          title: "Streamplace",
+          text: text,
+          url: streamUrl,
+        });
+        onShare?.("share_native", true);
+      } catch (error) {
+        // User cancelled or error occurred
+        onShare?.("share_native", false);
+      }
+    }
+  }, [profile, getStreamUrl, onShare]);
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger>
+        <Share2 color={colors.gray[200]} />
+      </DropdownMenuTrigger>
+      <ResponsiveDropdownMenuContent>
+        <DropdownMenuGroup title="Share">
+          <DropdownMenuItem onPress={shareToBluesky} closeOnPress={true}>
+            <View
+              style={{ flexDirection: "row", alignItems: "center", gap: 12 }}
+            >
+              <BlueskyIcon size={20} color={colors.gray[400]} />
+              <Text>Share to Bluesky</Text>
+            </View>
+          </DropdownMenuItem>
+          {/* <DropdownMenuItem onPress={shareToTwitter}>
+            <View
+              style={{ flexDirection: "row", alignItems: "center", gap: 12 }}
+            >
+              <MessageCircle size={20} color={colors.gray[400]} />
+              <Text>Share to X</Text>
+            </View>
+          </DropdownMenuItem> */}
+          {/* navigator isn't on non-web */}
+          {Platform.OS !== "web" || (navigator && (navigator as any).share) ? (
+            <DropdownMenuItem onPress={nativeShare}>
+              <View
+                style={{ flexDirection: "row", alignItems: "center", gap: 12 }}
+              >
+                <Share2 size={20} color={colors.gray[400]} />
+                <Text>More Options...</Text>
+              </View>
+            </DropdownMenuItem>
+          ) : null}
+        </DropdownMenuGroup>
+        <DropdownMenuGroup title="Copy">
+          <DropdownMenuItem
+            onPress={() => copyToClipboard(getStreamUrl(), "Stream link")}
+            disabled={isCopying}
+            closeOnPress={true}
+          >
+            <View
+              style={{ flexDirection: "row", alignItems: "center", gap: 12 }}
+            >
+              <Link2 size={20} color={colors.gray[400]} />
+              <Text>Copy Link</Text>
+            </View>
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            onPress={() => copyToClipboard(getEmbedCode(), "Embed code")}
+            disabled={isCopying}
+            closeOnPress={true}
+          >
+            <View
+              style={{ flexDirection: "row", alignItems: "center", gap: 12 }}
+            >
+              <Code size={20} color={colors.gray[400]} />
+              <Text>Copy Embed Code</Text>
+            </View>
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            closeOnPress={true}
+            onPress={() => copyToClipboard(getEmbedUrl(), "Embed URL")}
+            disabled={isCopying}
+          >
+            <View
+              style={{ flexDirection: "row", alignItems: "center", gap: 12 }}
+            >
+              <Copy size={20} color={colors.gray[400]} />
+              <Text>Copy Embed URL</Text>
+            </View>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </ResponsiveDropdownMenuContent>
+    </DropdownMenu>
+  );
+}

js/components/src/index.tsx

···
 export * from "./components/chat/system-message";
 export { default as VideoRetry } from "./components/mobile-player/video-retry";
 export * from "./lib/system-messages";
+
+export * from "./components/share/sharesheet";