Merge branch 'natb/reporting-interface' into eli/reporting

js/app/components/mobile/desktop-ui.tsx

···
   useSharedValue,
   withTiming,
 } from "react-native-reanimated";
+import ReportModal from "./report-modal";
 import { useResponsiveLayout } from "./useResponsiveLayout";
 
 const { borders, colors, gap, h, layout, position, w, px, py, r, p, bg, text } =
···
   const { doSetIngestCamera } = useCameraToggle();
   const avatars = useAvatars(profile?.did ? [profile?.did] : []);
   const { safeAreaInsets, shouldShowFloatingMetrics } = useResponsiveLayout();
+
+  const [reporting, setReporting] = useState(false);
 
   const fullscreen = usePlayerStore((state) => state.fullscreen);
   const setFullscreen = usePlayerStore((state) => state.setFullscreen);
···
             onDone={() => {
               setShowCountdown(false);
             }}
+          />
+
+          <ReportModal
+            open={reporting}
+            onOpenChange={setReporting}
+            title={`Report ${profile?.handle}`}
+            onSubmit={() => {}}
           />
 
           <Toast

js/app/components/mobile/report-modal.tsx

···
+import {
+  Button,
+  Dialog,
+  DialogFooter,
+  ModalContent,
+  Text,
+  Textarea,
+  zero,
+} from "@streamplace/components";
+import { CheckCircle, Circle } from "@tamagui/lucide-icons";
+import React, { useState } from "react";
+import { TouchableOpacity, View } from "react-native";
+
+const REPORT_REASONS = [
+  "Terrorism",
+  "Nudity or Sexually Explicit",
+  "Hateful Conduct",
+  "Bullying or Harassment",
+  "Violence or Gore",
+  "Self-Harm",
+  "Spam, Scams, Bots, or Tampering",
+  "Miscategorized Content",
+  "Missing or Incorrect Content Classification Label",
+  "Search",
+];
+
+interface ReportModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSubmit: (reason: string) => void;
+  title?: string;
+  description?: string;
+}
+
+export const ReportModal: React.FC<ReportModalProps> = ({
+  open,
+  onOpenChange,
+  onSubmit,
+  title = "Report",
+  description = "Why are you submitting this report?",
+}) => {
+  const [selectedReason, setSelectedReason] = useState<string | null>(null);
+
+  const handleCancel = () => {
+    setSelectedReason(null);
+    onOpenChange(false);
+  };
+
+  const handleSubmit = () => {
+    if (selectedReason) {
+      onSubmit(selectedReason);
+      setSelectedReason(null);
+      onOpenChange(false);
+    }
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={onOpenChange}
+      title={title}
+      description={description}
+      showCloseButton
+      variant="default"
+      size="md"
+      dismissible={false}
+      position="center"
+    >
+      <ModalContent style={[zero.pb[2]]}>
+        {REPORT_REASONS.map((reason) => (
+          <TouchableOpacity
+            key={reason}
+            onPress={() => setSelectedReason(reason)}
+            style={[
+              zero.layout.flex.row,
+              zero.gap.all[2],
+              zero.py[1],
+              zero.px[2],
+              zero.borderRadius[8],
+              zero.layout.flex.alignCenter,
+            ]}
+          >
+            <View>
+              {selectedReason === reason ? <CheckCircle /> : <Circle />}
+            </View>
+            <Text>{reason}</Text>
+          </TouchableOpacity>
+        ))}
+
+        <View style={[zero.pb[4], zero.mt[4], zero.px[2]]}>
+          <Text style={[zero.mb[2]]}>Additional Comments (optional)</Text>
+          <Textarea maxLength={500} numberOfLines={2} />
+        </View>
+      </ModalContent>
+      <DialogFooter>
+        <Button variant="secondary" onPress={handleCancel}>
+          <Text>Cancel</Text>
+        </Button>
+        <Button
+          variant="primary"
+          onPress={handleSubmit}
+          disabled={!selectedReason}
+        >
+          Submit
+        </Button>
+      </DialogFooter>
+    </Dialog>
+  );
+};
+
+export default ReportModal;

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

···
 
 // Dialog Close Icon component (Lucide X)
 const DialogCloseIcon = () => {
-  return <ThemedX size="md" variant="muted" />;
+  return <ThemedX size="md" variant="default" />;
 };
 
 // Create theme-aware styles

js/components/src/components/ui/index.ts

···
 export * from "./resizeable";
 export * from "./slider";
 export * from "./text";
+export * from "./textarea";
 export * from "./toast";
 export * from "./view";
 

js/components/src/components/ui/primitives/modal.tsx

···
     padding: 16,
   },
   content: {
-    backgroundColor: "white",
     borderRadius: 8,
     overflow: "hidden",
   },