@q9labsai/chalk-react-native 4.1.17 → 5.0.1

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

@@ -1,184 +0,0 @@
-import Message01Icon from "@hugeicons/core-free-icons/dist/esm/Message01Icon";
-import Navigation03Icon from "@hugeicons/core-free-icons/dist/esm/Navigation03Icon";
-import { HugeiconsIcon } from "@hugeicons/react-native";
-import { useMemo } from "react";
-import { FlatList, KeyboardAvoidingView, Platform, Pressable, StyleSheet, Text, TextInput, View } from "react-native";
-
-import { Theme } from "../../ui/theme";
-import { formatChatTimestamp } from "./space-progressive-surface-helpers";
-import { SpaceChatAttachment } from "./SpaceChatAttachment";
-import { InitialsAvatar } from "./SpaceSurfacePrimitives";
-import type { SpaceController } from "./space-progressive-surface-types";
-
-export function SpaceChatSheet({ controller }: { readonly controller: SpaceController }): React.JSX.Element {
-  const localParticipantId = controller.participants.localParticipant?.id ?? null;
-  const sendDisabled = (!controller.chatDraft.trim() && controller.chatAttachments.length === 0) || controller.chatAttachmentUploading;
-  const messages = useMemo(() => controller.chat.messages, [controller.chat.messages]);
-
-  return (
-    <View style={styles.content}>
-      {controller.chat.hasMore ? (
-        <Pressable accessibilityRole="button" disabled={controller.chat.isLoadingOlder} onPress={() => void controller.chat.loadOlderMessages()} style={({ pressed }) => [styles.loadOlder, pressed && styles.pressed]}>
-          <Text style={styles.loadOlderText}>{controller.chat.isLoadingOlder ? "Loading…" : "Load earlier messages"}</Text>
-        </Pressable>
-      ) : null}
-      <FlatList
-        accessibilityLabel="Chat messages"
-        contentContainerStyle={styles.messageList}
-        data={messages}
-        keyExtractor={(message) => message.id}
-        ListEmptyComponent={<EmptyChat />}
-        onViewableItemsChanged={({ viewableItems }) => {
-          const sequence = viewableItems.at(-1)?.item.sequence;
-          if (sequence) controller.markChatMessageVisible(sequence);
-        }}
-        renderItem={({ item }) => <ChatMessage isLocal={item.senderId === localParticipantId} message={item} onOpenAttachment={controller.openChatAttachment} resolveAttachmentUrl={controller.resolveChatAttachmentUrl} />}
-        showsVerticalScrollIndicator={false}
-      />
-      {controller.chat.pendingMessages.map((message) => (
-        <View key={message.clientMessageId} style={styles.pendingMessage}>
-          <Text style={styles.pendingText}>{message.text}</Text>
-          <Text style={styles.pendingMeta}>{message.state === "sending" ? "Sending…" : (message.error?.message ?? "Send failed")}</Text>
-          {message.state === "failed" ? (
-            <Pressable accessibilityRole="button" onPress={() => void controller.chat.retryMessage(message.clientMessageId)}>
-              <Text style={styles.retry}>Retry</Text>
-            </Pressable>
-          ) : null}
-        </View>
-      ))}
-      {controller.chatAttachments.length ? (
-        <View accessibilityLabel="Selected attachments" style={styles.selectedAttachments}>
-          {controller.chatAttachments.map((attachment, index) => (
-            <View key={`${attachment.fileName}-${index}`} style={styles.selectedAttachment}>
-              <Text numberOfLines={1} style={styles.selectedAttachmentText}>
-                {attachment.fileName}
-              </Text>
-              <Pressable accessibilityLabel={`Remove ${attachment.fileName}`} accessibilityRole="button" disabled={controller.chatAttachmentUploading} onPress={() => controller.removeChatAttachment(index)}>
-                <Text style={styles.removeAttachment}>Remove</Text>
-              </Pressable>
-            </View>
-          ))}
-        </View>
-      ) : null}
-      {controller.chatAttachmentError ? (
-        <Text accessibilityLiveRegion="polite" style={styles.attachmentError}>
-          {controller.chatAttachmentError}
-        </Text>
-      ) : null}
-      <KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : undefined} keyboardVerticalOffset={Platform.OS === "ios" ? 12 : 0}>
-        <View style={styles.composer}>
-          {controller.canPickChatFiles ? (
-            <Pressable
-              accessibilityLabel="Attach file"
-              accessibilityRole="button"
-              disabled={controller.chatAttachmentPicking || controller.chatAttachmentUploading}
-              onPress={() => void controller.pickChatFiles()}
-              style={({ pressed }) => [styles.composerButton, (controller.chatAttachmentPicking || controller.chatAttachmentUploading) && styles.sendDisabled, pressed && styles.pressed]}
-            >
-              <Text style={styles.composerButtonText}>{controller.chatAttachmentPicking ? "Choosing…" : "Attach"}</Text>
-            </Pressable>
-          ) : null}
-          <TextInput
-            accessibilityLabel="Message the Space"
-            editable={!controller.chatAttachmentUploading}
-            multiline
-            onChangeText={controller.setChatDraft}
-            onSubmitEditing={controller.sendChatMessage}
-            placeholder="Message the Space"
-            placeholderTextColor={Theme.colors.placeholder}
-            style={styles.input}
-            value={controller.chatDraft}
-          />
-          <Pressable accessibilityLabel="Send message" accessibilityRole="button" disabled={sendDisabled} onPress={controller.sendChatMessage} style={({ pressed }) => [styles.sendButton, sendDisabled && styles.sendDisabled, pressed && styles.pressed]}>
-            {controller.chatAttachmentUploading ? <Text style={styles.uploadingText}>…</Text> : <HugeiconsIcon color={Theme.colors.primaryForeground} icon={Navigation03Icon} size={21} />}
-          </Pressable>
-        </View>
-      </KeyboardAvoidingView>
-    </View>
-  );
-}
-
-function ChatMessage({
-  isLocal,
-  message,
-  onOpenAttachment,
-  resolveAttachmentUrl,
-}: {
-  readonly isLocal: boolean;
-  readonly message: SpaceController["chat"]["messages"][number];
-  readonly onOpenAttachment: (attachmentId: string) => void;
-  readonly resolveAttachmentUrl: (attachmentId: string) => Promise<string | null>;
-}): React.JSX.Element {
-  const timestamp = formatChatTimestamp(message.timestamp);
-  return (
-    <View style={[styles.messageRow, isLocal && styles.messageRowLocal]}>
-      {!isLocal ? <InitialsAvatar name={message.senderName} size={42} /> : null}
-      <View style={[styles.messageCopy, isLocal && styles.messageCopyLocal]}>
-        <Text style={[styles.sender, isLocal && styles.senderLocal]}>{isLocal ? `${message.senderName} (You)` : message.senderName}</Text>
-        <View style={[styles.bubble, isLocal ? styles.localBubble : styles.remoteBubble]}>
-          {message.text ? <Text style={[styles.messageText, isLocal && styles.localMessageText]}>{message.text}</Text> : null}
-          {message.attachments.map((attachment) => (
-            <SpaceChatAttachment attachment={attachment} isLocal={isLocal} key={attachment.attachmentId} onOpen={onOpenAttachment} resolveUrl={resolveAttachmentUrl} />
-          ))}
-        </View>
-        <Text style={[styles.timestamp, isLocal && styles.timestampLocal]}>{timestamp}</Text>
-        {message.readBy.length ? <Text style={[styles.readBy, isLocal && styles.timestampLocal]}>Read by {message.readBy.map((reader) => reader.displayName).join(", ")}</Text> : null}
-      </View>
-      {isLocal ? <InitialsAvatar name={message.senderName} size={42} /> : null}
-    </View>
-  );
-}
-
-function EmptyChat(): React.JSX.Element {
-  return (
-    <View style={styles.emptyState}>
-      <View style={styles.emptyIcon}>
-        <HugeiconsIcon color={Theme.colors.ink2} icon={Message01Icon} size={26} />
-      </View>
-      <Text style={styles.emptyTitle}>No messages yet</Text>
-      <Text style={styles.emptyText}>Send a message to start the conversation.</Text>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  content: { flex: 1, minHeight: 0 },
-  loadOlder: { alignSelf: "center", minHeight: 44, paddingHorizontal: Theme.spacing.md, paddingVertical: Theme.spacing.sm, justifyContent: "center" },
-  loadOlderText: { color: Theme.colors.information, fontSize: 14, fontWeight: "700" },
-  messageList: { flexGrow: 1, gap: Theme.spacing.lg, paddingHorizontal: Theme.spacing.lg, paddingVertical: Theme.spacing.lg },
-  messageRow: { alignItems: "flex-start", flexDirection: "row", gap: Theme.spacing.sm, maxWidth: "92%" },
-  messageRowLocal: { alignSelf: "flex-end", justifyContent: "flex-end" },
-  messageCopy: { flexShrink: 1, minWidth: 0 },
-  messageCopyLocal: { alignItems: "flex-end" },
-  sender: { color: Theme.colors.ink, fontSize: 15, fontWeight: "600", marginBottom: 6, paddingHorizontal: 4 },
-  senderLocal: { textAlign: "right" },
-  bubble: { borderRadius: Theme.radius.md, borderWidth: 1, maxWidth: "100%", paddingHorizontal: Theme.spacing.md, paddingVertical: Theme.spacing.md },
-  remoteBubble: { backgroundColor: Theme.colors.surfaceMuted, borderColor: Theme.colors.line, borderTopLeftRadius: 5 },
-  localBubble: { backgroundColor: Theme.colors.ink, borderColor: Theme.colors.ink, borderTopRightRadius: 5 },
-  messageText: { color: Theme.colors.ink, fontSize: 17, lineHeight: 24 },
-  localMessageText: { color: Theme.colors.surface },
-  timestamp: { color: Theme.colors.ink3, fontSize: 12, marginTop: 5, paddingHorizontal: 4 },
-  timestampLocal: { textAlign: "right" },
-  readBy: { color: Theme.colors.ink3, fontSize: 11, marginTop: 3, paddingHorizontal: 4 },
-  pendingMessage: { borderColor: Theme.colors.line, borderRadius: Theme.radius.md, borderWidth: 1, marginHorizontal: Theme.spacing.lg, marginBottom: Theme.spacing.sm, padding: Theme.spacing.md },
-  pendingText: { color: Theme.colors.ink, fontSize: 14 },
-  pendingMeta: { color: Theme.colors.ink2, fontSize: 12, marginTop: 4 },
-  retry: { color: Theme.colors.information, fontSize: 13, fontWeight: "700", marginTop: 6 },
-  selectedAttachments: { flexDirection: "row", flexWrap: "wrap", gap: Theme.spacing.sm, paddingHorizontal: Theme.spacing.lg, paddingBottom: Theme.spacing.sm },
-  selectedAttachment: { backgroundColor: Theme.colors.paper2, borderColor: Theme.colors.line, borderRadius: Theme.radius.sm, borderWidth: 1, maxWidth: "100%", minHeight: 36, paddingHorizontal: Theme.spacing.sm, paddingVertical: 8 },
-  selectedAttachmentText: { color: Theme.colors.ink2, fontSize: 13 },
-  removeAttachment: { color: Theme.colors.information, fontSize: 12, fontWeight: "700", marginTop: 4 },
-  attachmentError: { color: Theme.colors.danger, fontSize: 13, paddingHorizontal: Theme.spacing.lg, paddingBottom: Theme.spacing.sm },
-  composer: { alignItems: "flex-end", borderTopColor: Theme.colors.line, borderTopWidth: 1, flexDirection: "row", gap: Theme.spacing.sm, padding: Theme.spacing.md },
-  composerButton: { alignItems: "center", borderColor: Theme.colors.line, borderRadius: Theme.radius.md, borderWidth: 1, height: 50, justifyContent: "center", width: 50 },
-  composerButtonText: { color: Theme.colors.ink2, fontSize: 12, fontWeight: "700" },
-  uploadingText: { color: Theme.colors.primaryForeground, fontSize: 18, fontWeight: "700" },
-  input: { backgroundColor: Theme.colors.surfaceMuted, borderColor: Theme.colors.lineStrong, borderRadius: Theme.radius.md, borderWidth: 1, color: Theme.colors.ink, flex: 1, fontSize: 16, maxHeight: 112, minHeight: 50, paddingHorizontal: Theme.spacing.md, paddingVertical: 12 },
-  sendButton: { alignItems: "center", backgroundColor: Theme.colors.ink, borderRadius: Theme.radius.full, height: 50, justifyContent: "center", width: 50 },
-  sendDisabled: { backgroundColor: Theme.colors.lineStrong },
-  emptyState: { alignItems: "center", flex: 1, justifyContent: "center", minHeight: 220, paddingHorizontal: Theme.spacing["3xl"] },
-  emptyIcon: { alignItems: "center", backgroundColor: Theme.colors.washBlue, borderRadius: Theme.radius.full, height: 58, justifyContent: "center", marginBottom: Theme.spacing.md, width: 58 },
-  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 }] },
-});

package/src/components/native-space-view/SpaceGrid.android.tsx

@@ -1,323 +0,0 @@
-import { useCallback, useMemo, useRef, useSyncExternalStore } from "react";
-import { FlatList, StyleSheet, Text, View, useWindowDimensions, type DimensionValue } from "react-native";
-import MicOff01Icon from "@hugeicons/core-free-icons/dist/esm/MicOff01Icon";
-import { HugeiconsIcon } from "@hugeicons/react-native";
-import { Theme } from "../../ui/theme";
-import { useNativeTheme } from "../../ui/native-theme";
-import { MediaView } from "../MediaView";
-import type { SpaceParticipant } from "./types";
-import { createSpacePageStore, type SpacePageStore } from "./native-space-page-store";
-import { nativeSpaceGridKey } from "./native-space-grid-keys";
-
-export interface SpaceGridProps {
-  participants: readonly SpaceParticipant[];
-  gridPages: readonly (readonly SpaceParticipant[])[];
-}
-
-function buildWideParticipantRows(participants: readonly SpaceParticipant[], columnCount: number): SpaceParticipant[][] {
-  if (participants.length === 0) {
-    return [];
-  }
-
-  const rows: SpaceParticipant[][] = [];
-  for (let index = 0; index < participants.length; index += columnCount) {
-    rows.push(participants.slice(index, index + columnCount));
-  }
-
-  return rows;
-}
-
-export function SpaceGridAndroid({ participants, gridPages }: SpaceGridProps): React.JSX.Element {
-  const theme = useNativeTheme();
-  const { width, height } = useWindowDimensions();
-  const isTablet = width >= 768;
-  const pageStoreRef = useRef<SpacePageStore | null>(null);
-  const pageStore = pageStoreRef.current ?? (pageStoreRef.current = createSpacePageStore());
-
-  const finalPages = useMemo(() => {
-    if (!isTablet) {
-      return gridPages;
-    }
-
-    const perPage = 6;
-    const pages: SpaceParticipant[][] = [];
-    for (let index = 0; index < participants.length; index += perPage) {
-      pages.push(participants.slice(index, index + perPage));
-    }
-    return pages;
-  }, [gridPages, isTablet, participants]);
-
-  const requestedPage = useSyncExternalStore(pageStore.subscribe, pageStore.getSnapshot, pageStore.getSnapshot);
-  const activePage = Math.min(requestedPage, Math.max(0, finalPages.length - 1));
-  const activePageKey = nativeSpaceGridKey("indicator", finalPages[activePage] ?? []);
-  const clampPageRef = useCallback(
-    (node: View | null) => {
-      if (node !== null) {
-        pageStore.clampToPageCount(finalPages.length);
-      }
-    },
-    [finalPages.length, pageStore],
-  );
-
-  if (participants.length === 0) {
-    return (
-      <View ref={clampPageRef} style={[styles.emptyState, { backgroundColor: theme.colors.darkCanvas }]}>
-        <Text style={[styles.emptyEyebrow, { color: theme.colors.primary }]}>Space ready</Text>
-        <Text style={[styles.emptyTitle, { color: theme.colors.foreground }]}>You're the first one here</Text>
-        <Text style={[styles.emptyCopy, { color: theme.colors.mutedForeground }]}>Others will appear when they join. Invite someone to get started.</Text>
-      </View>
-    );
-  }
-
-  if (participants.length === 1) {
-    return (
-      <View ref={clampPageRef} style={styles.singleTile}>
-        <ParticipantTile participant={participants[0]!} />
-      </View>
-    );
-  }
-
-  if (!isTablet && participants.length <= 4) {
-    if (participants.length === 2) {
-      return (
-        <View ref={clampPageRef} style={styles.compactTwoUp}>
-          {participants.map((participant) => (
-            <ParticipantTile key={participant.id} participant={participant} />
-          ))}
-        </View>
-      );
-    }
-
-    if (participants.length === 3) {
-      return (
-        <View ref={clampPageRef} style={styles.compactThree}>
-          <View style={styles.compactThreeTop}>
-            <ParticipantTile participant={participants[0]!} />
-          </View>
-          <View style={styles.compactThreeBottom}>
-            <ParticipantTile participant={participants[1]!} />
-            <ParticipantTile participant={participants[2]!} />
-          </View>
-        </View>
-      );
-    }
-
-    if (participants.length === 4) {
-      return (
-        <View ref={clampPageRef} style={styles.compactFour}>
-          <View style={styles.gridRow}>
-            <ParticipantTile participant={participants[0]!} />
-            <ParticipantTile participant={participants[1]!} />
-          </View>
-          <View style={styles.gridRow}>
-            <ParticipantTile participant={participants[2]!} />
-            <ParticipantTile participant={participants[3]!} />
-          </View>
-        </View>
-      );
-    }
-  }
-
-  return (
-    <View ref={clampPageRef} style={styles.pagedContainer}>
-      <FlatList
-        data={finalPages}
-        horizontal
-        keyExtractor={(page) => nativeSpaceGridKey("page", page)}
-        onMomentumScrollEnd={(event) => {
-          const measuredPageWidth = Math.max(1, event.nativeEvent.layoutMeasurement.width);
-          pageStore.setPage(Math.round(event.nativeEvent.contentOffset.x / measuredPageWidth));
-        }}
-        pagingEnabled
-        snapToInterval={width}
-        snapToAlignment="center"
-        decelerationRate="fast"
-        disableIntervalMomentum
-        scrollEventThrottle={16}
-        removeClippedSubviews={false}
-        showsHorizontalScrollIndicator={false}
-        windowSize={3}
-        renderItem={({ item: page }) => {
-          const columns = isTablet ? (width > height ? 3 : 2) : 2;
-          const rows = buildWideParticipantRows(page, columns);
-
-          return (
-            <View style={[styles.page, { width }]}>
-              <View style={styles.gridContainer}>
-                {rows.map((row) => (
-                  <View key={nativeSpaceGridKey("row", row)} style={styles.gridRow}>
-                    {row.map((participant) => (
-                      <ParticipantTile key={participant.id} participant={participant} />
-                    ))}
-                    {row.length < columns && Array.from({ length: columns - row.length }, (_, fillerSlot) => fillerSlot + row.length).map((slot) => <View key={nativeSpaceGridKey(`filler-${slot}`, row)} style={[styles.gridTile, { backgroundColor: theme.colors.transparent }]} />)}
-                  </View>
-                ))}
-                {isTablet && rows.length < (width > height ? 2 : 3) ? <View style={{ flex: (width > height ? 2 : 3) - rows.length }} /> : null}
-              </View>
-            </View>
-          );
-        }}
-      />
-
-      {finalPages.length > 1 ? (
-        <View style={styles.pageIndicators}>
-          {finalPages.map((page) => (
-            <View key={nativeSpaceGridKey("indicator", page)} style={[styles.pageIndicator, { backgroundColor: theme.colors.mutedForeground }, nativeSpaceGridKey("indicator", page) === activePageKey && { backgroundColor: theme.colors.primary }]} />
-          ))}
-        </View>
-      ) : null}
-    </View>
-  );
-}
-
-function ParticipantTile({ participant, width, height }: { participant: SpaceParticipant; width?: DimensionValue; height?: DimensionValue }) {
-  const theme = useNativeTheme();
-  return (
-    <View style={[styles.tile, { backgroundColor: theme.colors.tileBackground, borderColor: theme.colors.border }, width !== undefined && { width }, height !== undefined && { height }]}>
-      <MediaView participant={participant} track={participant.videoTrack ?? null} />
-      <View style={[styles.identityPuck, { backgroundColor: theme.colors.surface, borderColor: theme.colors.border, shadowColor: theme.colors.darkCanvas }]}>
-        <Text style={[styles.participantName, { color: theme.colors.foreground }]} numberOfLines={1}>
-          {participant.displayName || "Participant"}
-        </Text>
-        {!participant.audioEnabled && (
-          <View style={styles.muteDot}>
-            <HugeiconsIcon icon={MicOff01Icon} size={10} color={theme.colors.primaryForeground} />
-          </View>
-        )}
-      </View>
-    </View>
-  );
-}
-
-export { SpaceGridAndroid as SpaceGrid };
-
-const styles = StyleSheet.create({
-  emptyState: {
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "center",
-    paddingHorizontal: Theme.spacing["3xl"],
-    gap: Theme.spacing.sm,
-  },
-  emptyEyebrow: {
-    ...Theme.typography.eyebrow,
-    color: Theme.colors.primary,
-  },
-  emptyTitle: {
-    ...Theme.typography.heading,
-    color: Theme.colors.foreground,
-  },
-  emptyCopy: {
-    ...Theme.typography.body,
-    color: Theme.colors.mutedForeground,
-    textAlign: "center",
-  },
-  singleTile: {
-    flex: 1,
-    padding: 10,
-  },
-  compactTwoUp: {
-    flex: 1,
-    gap: 10,
-    padding: 10,
-  },
-  compactThree: {
-    flex: 1,
-    gap: 10,
-    padding: 10,
-  },
-  compactThreeTop: {
-    flex: 3,
-    minHeight: 0,
-    overflow: "hidden",
-  },
-  compactThreeBottom: {
-    flex: 2,
-    flexDirection: "row",
-    gap: 10,
-    minHeight: 0,
-  },
-  compactFour: {
-    flex: 1,
-    gap: 10,
-    padding: 10,
-  },
-  pagedContainer: {
-    flex: 1,
-    width: "100%",
-    paddingBottom: 20,
-  },
-  page: {
-    flex: 1,
-  },
-  gridContainer: {
-    flex: 1,
-    gap: 10,
-    paddingHorizontal: 12,
-    paddingVertical: 10,
-  },
-  gridRow: {
-    flex: 1,
-    flexDirection: "row",
-    gap: 10,
-  },
-  gridTile: {
-    flex: 1,
-  },
-  pageIndicators: {
-    flexDirection: "row",
-    alignSelf: "center",
-    gap: 6,
-    paddingTop: 4,
-  },
-  pageIndicator: {
-    width: 6,
-    height: 6,
-    borderRadius: 3,
-    backgroundColor: Theme.colors.whiteOverlay20,
-  },
-  pageIndicatorActive: {
-    width: 18,
-    backgroundColor: Theme.colors.primary,
-  },
-  tile: {
-    borderRadius: 32,
-    overflow: "hidden",
-    backgroundColor: Theme.colors.nearDarkSurface,
-    borderWidth: 1,
-    borderColor: Theme.colors.whiteOverlay08,
-    flex: 1,
-  },
-  identityPuck: {
-    position: "absolute",
-    left: 16,
-    bottom: 16,
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: Theme.colors.chromeOverlay82,
-    paddingHorizontal: 14,
-    paddingVertical: 8,
-    borderRadius: 20,
-    gap: 8,
-    borderWidth: 1,
-    borderColor: Theme.colors.whiteOverlay12,
-    shadowColor: Theme.colors.darkCanvas,
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.3,
-    shadowRadius: 8,
-  },
-  participantName: {
-    color: Theme.colors.onDark,
-    fontSize: 13,
-    fontWeight: "800",
-    maxWidth: 140,
-  },
-  muteDot: {
-    width: 20,
-    height: 20,
-    borderRadius: 10,
-    backgroundColor: Theme.colors.error,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-});