teleport dialog v0

js/components/src/components/chat/chat-box.tsx

···
 import { ChatMessageViewHydrated } from "streamplace";
 import { Button, Loader, Text, toast, useTheme, View } from "../../";
 import { handleSlashCommand } from "../../lib/slash-commands";
-import { registerTeleportCommand } from "../../lib/slash-commands/teleport";
+import {
+  createTeleport,
+  registerTeleportCommand,
+} from "../../lib/slash-commands/teleport";
 import { StreamNotifications } from "../../lib/stream-notifications";
 import { SystemMessages } from "../../lib/system-messages";
 import {
···
 import { RenderChatMessage } from "./chat-message";
 import { EmojiData, EmojiSuggestions } from "./emoji-suggestions";
 import { MentionSuggestions } from "./mention-suggestions";
+import { TeleportModal } from "./teleport-modal";
 
 const COOL_EMOJI_LIST = [
   // @ts-ignore we can iterate through this just fine it seems
···
     new Map(),
   );
   const [filteredEmojis, setFilteredEmojis] = useState<any[]>([]);
+  const [showTeleportModal, setShowTeleportModal] = useState(false);
   const isOverLimit = graphemer.countGraphemes(message) > 300;
 
   let linfo = useLivestream();
···
 
   useEffect(() => {
     if (pdsAgent && userDID) {
-      registerTeleportCommand(pdsAgent, userDID, setActiveTeleportUri);
+      registerTeleportCommand(pdsAgent, userDID, setActiveTeleportUri, () =>
+        setShowTeleportModal(true),
+      );
     }
   }, [pdsAgent, userDID, setActiveTeleportUri]);
 
···
 
   useEffect(() => {
     if (pdsAgent && linfo?.author?.did && pdsAgent.did === linfo.author.did) {
-      registerTeleportCommand(pdsAgent, pdsAgent.did, setActiveTeleportUri);
+      registerTeleportCommand(
+        pdsAgent,
+        pdsAgent.did,
+        setActiveTeleportUri,
+        () => setShowTeleportModal(true),
+      );
     }
   }, [pdsAgent, linfo?.author?.did, setActiveTeleportUri]);
 
···
     const beforeColon = message.slice(0, message.lastIndexOf(":"));
     setMessage(`${beforeColon}${emoji.skins[0]?.native} `);
     setShowEmojiSuggestions(false);
+  };
+
+  const handleTeleportSubmit = async (
+    targetHandle: string,
+    countdownSeconds: number,
+  ) => {
+    if (!pdsAgent || !userDID) return;
+
+    const result = await createTeleport(
+      pdsAgent,
+      userDID,
+      targetHandle,
+      countdownSeconds,
+      setActiveTeleportUri,
+    );
+
+    if (!result.success && result.error) {
+      SystemMessages.commandError(result.error);
+    }
   };
 
   const updateSuggestions = (text: string) => {
···
 
   return (
     <View style={[layout.flex.column, flex.shrink[1], gap.all[2]]}>
+      <TeleportModal
+        open={showTeleportModal}
+        onOpenChange={setShowTeleportModal}
+        onSubmit={handleTeleportSubmit}
+      />
       {replyTo && (
         <View
           style={[

js/components/src/components/chat/teleport-modal.tsx

···
+import React, { useEffect, useMemo, useState } from "react";
+import { Image, Pressable, ScrollView, View } from "react-native";
+import { PlaceStreamLivestream } from "streamplace";
+import { useAvatars, zero } from "../..";
+import { useStreamplaceStore } from "../../streamplace-store";
+import {
+  Button,
+  DialogFooter,
+  Input,
+  MenuGroup,
+  MenuItem,
+  ResponsiveDialog,
+  Text,
+  useTheme,
+} from "../ui";
+
+interface TeleportModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSubmit: (targetHandle: string, countdownSeconds: number) => void;
+}
+
+export const TeleportModal: React.FC<TeleportModalProps> = ({
+  open,
+  onOpenChange,
+  onSubmit,
+}) => {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [selectedStream, setSelectedStream] =
+    useState<PlaceStreamLivestream.LivestreamView | null>(null);
+  const [countdownSeconds, setCountdownSeconds] = useState("10");
+
+  const { theme } = useTheme();
+
+  const liveUsersCache = useStreamplaceStore((state) => state.liveUsers);
+  const liveUsersLoading = useStreamplaceStore(
+    (state) => state.liveUsersLoading,
+  );
+
+  const [liveUsers, setLiveUsers] = useState(liveUsersCache);
+
+  useEffect(() => {
+    setLiveUsers(liveUsersCache);
+  }, [liveUsersCache]);
+
+  const profiles = useAvatars(liveUsers?.map((u) => u.author?.did || "") || []);
+
+  const filteredStreams = useMemo(() => {
+    if (!liveUsers) return [];
+    if (!searchQuery.trim()) return liveUsers;
+
+    const query = searchQuery.toLowerCase();
+    return liveUsers.filter(
+      (stream) =>
+        stream.author?.handle?.toLowerCase().includes(query) ||
+        stream.author?.displayName?.toLowerCase().includes(query),
+    );
+  }, [liveUsers, searchQuery]);
+
+  const handleCancel = () => {
+    setSearchQuery("");
+    setSelectedStream(null);
+    setCountdownSeconds("10");
+    onOpenChange(false);
+  };
+
+  const handleSubmit = () => {
+    if (!selectedStream?.author?.handle) return;
+
+    const countdown = parseInt(countdownSeconds, 10);
+    if (isNaN(countdown) || countdown < 5 || countdown > 300) {
+      return;
+    }
+
+    onSubmit(selectedStream.author.handle, countdown);
+    handleCancel();
+  };
+
+  return (
+    <ResponsiveDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      title="Teleport to Streamer"
+      showCloseButton
+      variant="default"
+      size="md"
+      dismissible={false}
+    >
+      <View style={[zero.py[2]]}>
+        <View style={[zero.mb[4]]}>
+          <Input
+            value={searchQuery}
+            onChangeText={setSearchQuery}
+            placeholder="Search by handle..."
+            autoCapitalize="none"
+            autoCorrect={false}
+          />
+        </View>
+
+        {liveUsersLoading && !liveUsers ? (
+          <View style={[zero.py[8], { alignItems: "center" }]}>
+            <Text style={[{ color: theme.colors.textMuted }]}>
+              Loading live users...
+            </Text>
+          </View>
+        ) : filteredStreams.length === 0 ? (
+          <View style={[zero.py[8], { alignItems: "center" }]}>
+            <Text style={[{ color: theme.colors.textMuted }]}>
+              {searchQuery
+                ? "No matching live users found"
+                : "No live users found"}
+            </Text>
+          </View>
+        ) : (
+          <ScrollView style={[{ maxHeight: 400 }]}>
+            <MenuGroup>
+              {filteredStreams.map((stream) => (
+                <Pressable
+                  key={stream.uri}
+                  onPress={() => setSelectedStream(stream)}
+                >
+                  <MenuItem
+                    style={
+                      [
+                        selectedStream?.uri === stream.uri && {
+                          backgroundColor: "rgba(0, 122, 255, 0.1)",
+                        },
+                        zero.layout.flex.spaceBetween,
+                        zero.r.md,
+                        zero.flex[1],
+                        zero.gap.all[2],
+                        { width: "100%" },
+                      ] as any
+                    }
+                  >
+                    <Image
+                      source={{
+                        uri: profiles[stream.author.did]?.avatar,
+                        width: 50,
+                        height: 50,
+                      }}
+                      style={[zero.r.full]}
+                    />
+                    <View
+                      style={[
+                        zero.layout.flex.row,
+                        zero.gap.all[2],
+                        zero.layout.flex.alignCenter,
+                        { flex: 1, minWidth: 0, width: "100%" },
+                      ]}
+                    >
+                      <View
+                        style={[
+                          zero.layout.flex.column,
+                          { flex: 1, minWidth: 0 },
+                        ]}
+                      >
+                        <Text numberOfLines={1} ellipsizeMode="tail">
+                          {stream.author?.handle}
+                        </Text>
+                        {stream.record.title ? (
+                          <Text
+                            color="muted"
+                            ellipsizeMode="tail"
+                            numberOfLines={1}
+                          >
+                            {(stream.record.title as any) || ""}
+                          </Text>
+                        ) : null}
+                        {stream.viewerCount && (
+                          <Text color="muted">
+                            {stream.viewerCount.count} viewer
+                            {stream.viewerCount.count !== 1 ? "s" : ""}
+                          </Text>
+                        )}
+                      </View>
+                    </View>
+                  </MenuItem>
+                </Pressable>
+              ))}
+            </MenuGroup>
+          </ScrollView>
+        )}
+      </View>
+      <DialogFooter>
+        <Button width="min" variant="secondary" onPress={handleCancel}>
+          <Text>Cancel</Text>
+        </Button>
+        <Button
+          width="min"
+          variant="primary"
+          onPress={handleSubmit}
+          disabled={!selectedStream}
+        >
+          <Text>Teleport</Text>
+        </Button>
+      </DialogFooter>
+    </ResponsiveDialog>
+  );
+};

js/components/src/components/ui/dialog.tsx

···
 
     // Size styles
     smContent: {
+      width: 400,
       minWidth: 300,
+      maxWidth: 500,
       minHeight: 200,
     },
 
     mdContent: {
+      width: 500,
       minWidth: 400,
+      maxWidth: 600,
       minHeight: 300,
     },
 
     lgContent: {
+      width: 600,
       minWidth: 500,
+      maxWidth: 800,
       minHeight: 400,
     },
 
     xlContent: {
+      width: 800,
       minWidth: 600,
+      maxWidth: 1000,
       minHeight: 500,
     },
 

js/components/src/lib/slash-commands/teleport.ts

···
   });
 }
 
+export async function createTeleport(
+  pdsAgent: StreamplaceAgent,
+  userDID: string,
+  targetHandle: string,
+  countdownSeconds: number,
+  setActiveTeleportUri?: (uri: string | null) => void,
+): Promise<{ success: boolean; error?: string }> {
+  if (countdownSeconds < 5 || countdownSeconds > 300) {
+    return {
+      success: false,
+      error: "Countdown must be between 5 seconds and 5 minutes",
+    };
+  }
+
+  let targetDID: string;
+  try {
+    const resolution = await pdsAgent.resolveHandle({
+      handle: targetHandle,
+    });
+    targetDID = resolution.data.did;
+  } catch (err) {
+    return {
+      success: false,
+      error: `Could not resolve handle: ${targetHandle}`,
+    };
+  }
+
+  if (targetDID === userDID) {
+    return {
+      success: false,
+      error: "You cannot teleport to yourself",
+    };
+  }
+
+  const startsAt = new Date(Date.now() + countdownSeconds * 1000).toISOString();
+
+  const record: PlaceStreamLiveTeleport.Record = {
+    $type: "place.stream.live.teleport",
+    streamer: targetDID,
+    startsAt,
+    countdownSeconds,
+  };
+
+  try {
+    const result = await pdsAgent.com.atproto.repo.createRecord({
+      repo: userDID,
+      collection: "place.stream.live.teleport",
+      record,
+    });
+
+    if (setActiveTeleportUri) {
+      setActiveTeleportUri(result.data.uri);
+    }
+
+    return { success: true };
+  } catch (err) {
+    return {
+      success: false,
+      error: err instanceof Error ? err.message : "Failed to create teleport",
+    };
+  }
+}
+
 export function registerTeleportCommand(
   pdsAgent: StreamplaceAgent,
   userDID: string,
   setActiveTeleportUri?: (uri: string | null) => void,
+  onOpenModal?: () => void,
 ) {
   const teleportHandler: SlashCommandHandler = async (
     args,
     rawInput,
   ): Promise<SlashCommandResult> => {
     if (args.length === 0) {
+      if (onOpenModal) {
+        onOpenModal();
+        return { handled: true };
+      }
       return {
         handled: true,
         error: "Usage: /teleport @handle.bsky.social [duration_seconds]",