@q9labsai/chalk-react-native 4.1.17 → 5.0.1

package/src/components/native-space-view/SpaceMoreSheet.tsx

@@ -1,190 +0,0 @@
-import Chat01Icon from "@hugeicons/core-free-icons/dist/esm/Chat01Icon";
-import CallEnd01Icon from "@hugeicons/core-free-icons/dist/esm/CallEnd01Icon";
-import ComputerScreenShareIcon from "@hugeicons/core-free-icons/dist/esm/ComputerScreenShareIcon";
-import Message01Icon from "@hugeicons/core-free-icons/dist/esm/Message01Icon";
-import Navigation03Icon from "@hugeicons/core-free-icons/dist/esm/Navigation03Icon";
-import Presentation01Icon from "@hugeicons/core-free-icons/dist/esm/Presentation01Icon";
-import UserGroupIcon from "@hugeicons/core-free-icons/dist/esm/UserGroupIcon";
-import WavingHand01Icon from "@hugeicons/core-free-icons/dist/esm/WavingHand01Icon";
-import { HugeiconsIcon } from "@hugeicons/react-native";
-import { Modal, Platform, Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
-
-import { Theme } from "../../ui/theme";
-import { IconTile, SheetGrip, type SpaceIcon } from "./SpaceSurfacePrimitives";
-import type { SpaceController } from "./space-progressive-surface-types";
-
-interface MoreAction {
-  readonly id: string;
-  readonly label: string;
-  readonly icon?: SpaceIcon;
-  readonly symbol?: string;
-  readonly wash?: string;
-  readonly unavailableReason?: string;
-  readonly onPress: () => void;
-}
-
-export function SpaceMoreSheet({ controller, onOpenSettings, onOpenFeedback }: { readonly controller: SpaceController; readonly onOpenSettings: () => void; readonly onOpenFeedback?: () => void }): React.JSX.Element {
-  const close = () => controller.setActionsOpen(false);
-  const actions: MoreAction[] = [
-    {
-      id: "share",
-      label: "Share",
-      icon: Navigation03Icon,
-      onPress: () => {
-        close();
-        controller.handleInviteParticipants();
-      },
-    },
-    ...(controller.canWhiteboard
-      ? [
-          {
-            id: "board",
-            label: controller.whiteboard.isOpen ? "Close Board" : "Board",
-            icon: Presentation01Icon,
-            wash: Theme.colors.washBlue,
-            onPress: () => {
-              close();
-              controller.whiteboard.toggle();
-            },
-          },
-        ]
-      : []),
-    ...(controller.canHandRaise
-      ? [
-          {
-            id: "hand",
-            label: controller.handRaised ? "Lower hand" : "Raise hand",
-            icon: WavingHand01Icon,
-            wash: controller.handRaised ? Theme.colors.washYellow : undefined,
-            onPress: () => {
-              close();
-              controller.toggleHand();
-            },
-          },
-        ]
-      : []),
-    ...(controller.canReactions
-      ? [
-          {
-            id: "reactions",
-            label: "Reactions",
-            icon: Message01Icon,
-            onPress: () => {
-              close();
-              controller.setReactionPickerOpen(true);
-            },
-          },
-        ]
-      : []),
-    ...(controller.canParticipants ? [{ id: "people", label: "People", icon: UserGroupIcon, onPress: () => controller.openPanel("participants") }] : []),
-    ...(controller.canChat ? [{ id: "chat", label: "Chat", icon: Chat01Icon, onPress: () => controller.openPanel("chat") }] : []),
-    ...(controller.canScreenShare || controller.screenShare.isLocalSharing || controller.screenShareUnavailableReason
-      ? [
-          {
-            id: "screen-share",
-            label: controller.screenShare.isLocalSharing ? "Stop sharing" : "Present screen",
-            icon: ComputerScreenShareIcon,
-            unavailableReason: controller.screenShare.isLocalSharing ? undefined : (controller.screenShareUnavailableReason ?? undefined),
-            onPress: () => {
-              close();
-              controller.toggleScreenShare();
-            },
-          },
-        ]
-      : []),
-    {
-      id: "settings",
-      label: "Settings",
-      symbol: "⚙",
-      onPress: () => {
-        close();
-        onOpenSettings();
-      },
-    },
-    ...(onOpenFeedback
-      ? [
-          {
-            id: "feedback",
-            label: "Feedback",
-            symbol: "✉",
-            onPress: () => {
-              close();
-              onOpenFeedback();
-            },
-          },
-        ]
-      : []),
-  ];
-
-  return (
-    <Modal animationType="slide" onRequestClose={close} transparent visible={controller.actionsOpen}>
-      <View style={styles.modalRoot}>
-        <Pressable accessibilityLabel="Close More" onPress={close} style={styles.backdrop} />
-        <View style={styles.sheet}>
-          <SheetGrip />
-          <Text style={styles.title}>More</Text>
-          <ScrollView contentContainerStyle={styles.actionGrid} showsVerticalScrollIndicator={false}>
-            {actions.map((action) => (
-              <Pressable
-                accessibilityLabel={action.label}
-                accessibilityHint={action.unavailableReason}
-                accessibilityRole="button"
-                accessibilityState={{ disabled: Boolean(action.unavailableReason) }}
-                disabled={Boolean(action.unavailableReason)}
-                key={action.id}
-                onPress={action.onPress}
-                style={({ pressed }) => [styles.action, pressed && styles.actionPressed]}
-              >
-                <IconTile icon={action.icon} symbol={action.symbol} wash={action.wash ?? Theme.colors.surfaceMuted} />
-                <View style={styles.actionCopy}>
-                  <Text numberOfLines={2} style={styles.actionLabel}>
-                    {action.label}
-                  </Text>
-                  {action.unavailableReason ? <Text style={styles.actionDetail}>{action.unavailableReason}</Text> : null}
-                </View>
-              </Pressable>
-            ))}
-          </ScrollView>
-          <Pressable
-            accessibilityRole="button"
-            onPress={() => {
-              close();
-              controller.handleLeave();
-            }}
-            style={({ pressed }) => [styles.leaveButton, pressed && styles.actionPressed]}
-          >
-            <HugeiconsIcon color={Theme.colors.error} icon={CallEnd01Icon} size={20} />
-            <Text style={styles.leaveText}>Leave</Text>
-          </Pressable>
-        </View>
-      </View>
-    </Modal>
-  );
-}
-
-const styles = StyleSheet.create({
-  modalRoot: { flex: 1, justifyContent: "flex-end" },
-  backdrop: { ...StyleSheet.absoluteFillObject, backgroundColor: Theme.colors.darkOverlay22 },
-  sheet: {
-    backgroundColor: Theme.colors.surface,
-    borderColor: Theme.colors.line,
-    borderTopLeftRadius: Theme.radius.xl,
-    borderTopRightRadius: Theme.radius.xl,
-    elevation: 8,
-    maxHeight: "78%",
-    paddingBottom: Platform.OS === "ios" ? Theme.spacing["2xl"] : Theme.spacing.lg,
-    shadowColor: Theme.colors.ink,
-    shadowOffset: { height: -8, width: 0 },
-    shadowOpacity: 0.12,
-    shadowRadius: 22,
-  },
-  title: { ...Theme.typography.heading, color: Theme.colors.ink, paddingHorizontal: Theme.spacing.lg, paddingTop: Theme.spacing.lg },
-  actionGrid: { flexDirection: "row", flexWrap: "wrap", gap: Theme.spacing.md, padding: Theme.spacing.lg, paddingBottom: Theme.spacing.md },
-  action: { alignItems: "center", backgroundColor: Theme.colors.surfaceMuted, borderColor: Theme.colors.line, borderRadius: Theme.radius.md, borderWidth: 1, flexDirection: "row", gap: Theme.spacing.md, minHeight: 76, paddingHorizontal: Theme.spacing.md, width: "47.8%" },
-  actionLabel: { color: Theme.colors.ink, flex: 1, fontSize: 15, fontWeight: "600", lineHeight: 20 },
-  actionCopy: { flex: 1, gap: Theme.spacing.xs },
-  actionDetail: { color: Theme.colors.ink2, fontSize: 12, lineHeight: 17 },
-  actionPressed: { opacity: 0.72, transform: [{ scale: 0.985 }] },
-  leaveButton: { alignItems: "center", borderColor: Theme.colors.dangerBackground, borderRadius: Theme.radius.md, borderWidth: 1, flexDirection: "row", gap: Theme.spacing.sm, justifyContent: "center", marginHorizontal: Theme.spacing.lg, minHeight: 52, paddingHorizontal: Theme.spacing.lg },
-  leaveText: { color: Theme.colors.error, fontSize: 16, fontWeight: "700" },
-});

package/src/components/native-space-view/SpacePanelSheet.tsx

@@ -1,45 +0,0 @@
-import { Modal, Platform, Pressable, SafeAreaView, StyleSheet, View } from "react-native";
-
-import { Theme } from "../../ui/theme";
-import { SpaceChatSheet } from "./SpaceChatSheet";
-import { SpacePeopleSheet } from "./SpacePeopleSheet";
-import { SheetGrip, SurfaceHeader } from "./SpaceSurfacePrimitives";
-import type { SpaceController } from "./space-progressive-surface-types";
-
-export function SpacePanelSheet({ controller }: { readonly controller: SpaceController }): React.JSX.Element {
-  const visible = controller.panel !== null;
-  const close = controller.closePanel;
-  const isChat = controller.panel === "chat";
-  return (
-    <Modal animationType="slide" onRequestClose={close} transparent visible={visible}>
-      <View style={styles.modalRoot}>
-        <Pressable accessibilityLabel="Close panel" onPress={close} style={styles.backdrop} />
-        <SafeAreaView style={styles.sheet}>
-          <SheetGrip />
-          <SurfaceHeader closeLabel={`Close ${isChat ? "Chat" : "People"}`} count={!isChat ? controller.participantCount : undefined} onClose={close} title={isChat ? "Chat" : "People"} />
-          {isChat ? <SpaceChatSheet controller={controller} /> : <SpacePeopleSheet controller={controller} />}
-        </SafeAreaView>
-      </View>
-    </Modal>
-  );
-}
-
-const styles = StyleSheet.create({
-  modalRoot: { flex: 1, justifyContent: "flex-end" },
-  backdrop: { ...StyleSheet.absoluteFillObject, backgroundColor: Theme.colors.darkOverlay22 },
-  sheet: {
-    backgroundColor: Theme.colors.surface,
-    borderColor: Theme.colors.line,
-    borderTopLeftRadius: Theme.radius.xl,
-    borderTopRightRadius: Theme.radius.xl,
-    elevation: 8,
-    flex: 1,
-    marginTop: 78,
-    overflow: "hidden",
-    paddingBottom: Platform.OS === "android" ? Theme.spacing.sm : 0,
-    shadowColor: Theme.colors.ink,
-    shadowOffset: { height: -8, width: 0 },
-    shadowOpacity: 0.12,
-    shadowRadius: 22,
-  },
-});

package/src/components/native-space-view/SpacePeopleSheet.tsx

@@ -1,116 +0,0 @@
-import Mic01Icon from "@hugeicons/core-free-icons/dist/esm/Mic01Icon";
-import MicOff01Icon from "@hugeicons/core-free-icons/dist/esm/MicOff01Icon";
-import MoreHorizontalIcon from "@hugeicons/core-free-icons/dist/esm/MoreHorizontalIcon";
-import Video01Icon from "@hugeicons/core-free-icons/dist/esm/Video01Icon";
-import VideoOffIcon from "@hugeicons/core-free-icons/dist/esm/VideoOffIcon";
-import { HugeiconsIcon } from "@hugeicons/react-native";
-import { useState } from "react";
-import { Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
-
-import { Theme } from "../../ui/theme";
-import { ParticipantActionSheet } from "./ParticipantActionSheet";
-import { InitialsAvatar } from "./SpaceSurfacePrimitives";
-import type { SpaceController } from "./space-progressive-surface-types";
-
-export function SpacePeopleSheet({ controller }: { readonly controller: SpaceController }): React.JSX.Element {
-  const [actionParticipantId, setActionParticipantId] = useState<string | null>(null);
-  const closeActions = () => {
-    setActionParticipantId(null);
-  };
-  const openActions = (participantId: string) => {
-    setActionParticipantId(participantId);
-  };
-
-  return (
-    <View style={styles.content}>
-      <ScrollView contentContainerStyle={styles.list} showsVerticalScrollIndicator={false}>
-        {controller.admissionRequests.map((request) => (
-          <View key={request.requestId} style={styles.admissionRequest}>
-            <InitialsAvatar name={request.displayName} size={48} />
-            <View style={styles.rowCopy}>
-              <Text numberOfLines={1} style={styles.name}>
-                {request.displayName}
-              </Text>
-              <Text style={styles.meta}>At the Entrance</Text>
-            </View>
-            {controller.canManageAdmission ? (
-              <View style={styles.admissionActions}>
-                <Pressable accessibilityRole="button" onPress={() => controller.denyAdmission(request.requestId)} style={({ pressed }) => [styles.denyButton, pressed && styles.pressed]}>
-                  <Text style={styles.denyText}>Deny</Text>
-                </Pressable>
-                <Pressable accessibilityRole="button" onPress={() => controller.admitParticipant(request.requestId)} style={({ pressed }) => [styles.admitButton, pressed && styles.pressed]}>
-                  <Text style={styles.admitText}>Admit</Text>
-                </Pressable>
-              </View>
-            ) : null}
-          </View>
-        ))}
-        {controller.participants.participants.map((participant) => {
-          const local = participant.id === controller.participants.localParticipant?.id;
-          const canAct = !local && canActOnParticipant(controller);
-          return (
-            <View key={participant.id} style={styles.participantRow}>
-              <InitialsAvatar name={participant.displayName} size={54} />
-              <View style={styles.rowCopy}>
-                <Text numberOfLines={1} style={styles.name}>
-                  {participant.displayName}
-                  {local ? " (You)" : ""}
-                </Text>
-              </View>
-              <View style={styles.mediaStatus}>
-                <HugeiconsIcon color={participant.audioEnabled ? Theme.colors.success : Theme.colors.error} icon={participant.audioEnabled ? Mic01Icon : MicOff01Icon} size={22} />
-                <View style={[styles.statusDot, { backgroundColor: participant.audioEnabled ? Theme.colors.chalkGreen : Theme.colors.chalkPink }]} />
-              </View>
-              <View style={styles.mediaStatus}>
-                <HugeiconsIcon color={participant.videoEnabled ? Theme.colors.success : Theme.colors.error} icon={participant.videoEnabled ? Video01Icon : VideoOffIcon} size={22} />
-                <View style={[styles.statusDot, { backgroundColor: participant.videoEnabled ? Theme.colors.chalkGreen : Theme.colors.chalkPink }]} />
-              </View>
-              {canAct ? (
-                <Pressable accessibilityLabel={`Actions for ${participant.displayName}`} accessibilityRole="button" onPress={() => openActions(participant.id)} style={({ pressed }) => [styles.moreButton, pressed && styles.pressed]}>
-                  <HugeiconsIcon color={Theme.colors.ink} icon={MoreHorizontalIcon} size={22} />
-                </Pressable>
-              ) : null}
-            </View>
-          );
-        })}
-        {!controller.participants.participants.length && !controller.admissionRequests.length ? <EmptyPeople /> : null}
-      </ScrollView>
-      <ParticipantActionSheet controller={controller} onClose={closeActions} participantId={actionParticipantId} />
-    </View>
-  );
-}
-
-function canActOnParticipant(controller: SpaceController): boolean {
-  return controller.canMuteParticipants || controller.canRequestMedia || controller.canStopParticipantCamera || controller.canStopParticipantScreenShare || controller.canRemoveParticipants;
-}
-
-function EmptyPeople(): React.JSX.Element {
-  return (
-    <View style={styles.emptyState}>
-      <Text style={styles.emptyTitle}>No People yet</Text>
-      <Text style={styles.emptyText}>People will appear here as they join the Space.</Text>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  content: { flex: 1, minHeight: 0 },
-  list: { paddingHorizontal: Theme.spacing.lg, paddingVertical: Theme.spacing.sm },
-  participantRow: { alignItems: "center", borderBottomColor: Theme.colors.line, borderBottomWidth: 1, flexDirection: "row", gap: Theme.spacing.sm, minHeight: 84, paddingVertical: Theme.spacing.md },
-  rowCopy: { flex: 1, minWidth: 0, paddingHorizontal: Theme.spacing.xs },
-  name: { color: Theme.colors.ink, fontSize: 16, fontWeight: "700" },
-  meta: { color: Theme.colors.ink2, fontSize: 14, marginTop: 4 },
-  mediaStatus: { alignItems: "center", justifyContent: "center", minHeight: 44, minWidth: 34 },
-  statusDot: { borderRadius: Theme.radius.full, height: 6, marginTop: 2, width: 6 },
-  moreButton: { alignItems: "center", borderColor: Theme.colors.line, borderRadius: Theme.radius.full, borderWidth: 1, height: 46, justifyContent: "center", width: 46 },
-  admissionRequest: { alignItems: "center", backgroundColor: Theme.colors.washYellow, borderColor: Theme.colors.line, borderRadius: Theme.radius.md, borderWidth: 1, flexDirection: "row", gap: Theme.spacing.sm, marginVertical: Theme.spacing.sm, padding: Theme.spacing.md },
-  admissionActions: { alignItems: "center", flexDirection: "row", gap: Theme.spacing.sm },
-  denyButton: { alignItems: "center", borderColor: Theme.colors.lineStrong, borderRadius: Theme.radius.sm, borderWidth: 1, justifyContent: "center", minHeight: 44, minWidth: 68, paddingHorizontal: Theme.spacing.md },
-  denyText: { color: Theme.colors.ink, fontSize: 14, fontWeight: "600" },
-  admitButton: { alignItems: "center", backgroundColor: Theme.colors.ink, borderRadius: Theme.radius.sm, justifyContent: "center", minHeight: 44, minWidth: 68, paddingHorizontal: Theme.spacing.md },
-  admitText: { color: Theme.colors.surface, fontSize: 14, fontWeight: "700" },
-  emptyState: { alignItems: "center", justifyContent: "center", minHeight: 220, paddingHorizontal: Theme.spacing["3xl"] },
-  emptyTitle: { color: Theme.colors.ink, fontSize: 16, fontWeight: "700" },
-  emptyText: { color: Theme.colors.ink2, fontSize: 14, marginTop: 6, textAlign: "center" },
-  pressed: { opacity: 0.72, transform: [{ scale: 0.98 }] },
-});