@upstep/react-native 0.5.0 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@upstep/react-native",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Upstep feedback SDK for React Native",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -15,11 +15,8 @@
     "@upstep/types": "0.5.0"
   },
   "peerDependencies": {
-    "@gorhom/bottom-sheet": ">=4",
     "react": ">=18",
-    "react-native": ">=0.73",
-    "react-native-gesture-handler": ">=2",
-    "react-native-reanimated": ">=3"
+    "react-native": ">=0.73"
   },
   "devDependencies": {
     "@types/react": "^19.0.7",

package/src/FeedbackContext.tsx

@@ -4,7 +4,6 @@ import React, {
   useEffect,
   useState,
   useCallback,
-  useRef,
   type ReactNode,
 } from "react";
 import type {
@@ -15,22 +14,21 @@ import type {
   VoteValue,
 } from "@upstep/types";
 import { UpstepApiClient } from "./api";
-import type BottomSheet from "@gorhom/bottom-sheet";
 
 const DEFAULT_ACCENT = "#D97757";
 
 interface UpstepContextValue {
   client: UpstepApiClient;
   feedItems: Feedback[];
+  feedLoading: boolean;
   loadFeed: () => Promise<void>;
   submit: (title: string, content: string, type?: FeedbackType) => Promise<void>;
   vote: (feedbackId: string, value: VoteValue) => Promise<void>;
   getItem: (feedbackId: string) => Promise<FeedbackWithComments>;
-  /** Open the feedback sheet — call from your own UI (settings, menu, etc.). */
+  isOpen: boolean;
   openSheet: () => void;
-  /** Set / update the end-user id at runtime (e.g. after the user logs in). */
+  closeSheet: () => void;
   identify: (userId: string | undefined) => void;
-  sheetRef: React.RefObject<BottomSheet | null>;
   accentColor: string;
   theme: "light" | "dark" | "auto";
 }
@@ -43,18 +41,22 @@ export function FeedbackProvider({
 }: UpstepConfig & { children: ReactNode }) {
   const [client] = useState(() => new UpstepApiClient(config));
   const [feedItems, setFeedItems] = useState<Feedback[]>([]);
-  const sheetRef = useRef<BottomSheet>(null);
+  const [feedLoading, setFeedLoading] = useState(true);
+  const [isOpen, setIsOpen] = useState(false);
 
   useEffect(() => {
     client.setUserId(config.userId);
   }, [client, config.userId]);
 
   const loadFeed = useCallback(async () => {
+    setFeedLoading(true);
     try {
       const data = await client.listFeedback({ sort: "votes", limit: 30 });
       setFeedItems(data.items);
     } catch {
       // non-critical
+    } finally {
+      setFeedLoading(false);
     }
   }, [client]);
 
@@ -82,7 +84,11 @@ export function FeedbackProvider({
   );
 
   const openSheet = useCallback(() => {
-    sheetRef.current?.expand();
+    setIsOpen(true);
+  }, []);
+
+  const closeSheet = useCallback(() => {
+    setIsOpen(false);
   }, []);
 
   const identify = useCallback(
@@ -93,8 +99,8 @@ export function FeedbackProvider({
   return (
     <UpstepContext.Provider
       value={{
-        client, feedItems, loadFeed, submit, vote, getItem,
-        openSheet, identify, sheetRef,
+        client, feedItems, feedLoading, loadFeed, submit, vote, getItem,
+        isOpen, openSheet, closeSheet, identify,
         accentColor: config.accentColor ?? DEFAULT_ACCENT,
         theme: config.theme ?? "auto",
       }}

package/src/FeedbackSheet.tsx

@@ -1,16 +1,19 @@
-import React, { useState, useMemo, useCallback } from "react";
+import React, { useState, useCallback, useEffect } from "react";
 import {
+  Modal,
   View,
   Text,
   TextInput,
   TouchableOpacity,
+  Pressable,
+  ScrollView,
+  KeyboardAvoidingView,
   StyleSheet,
   ActivityIndicator,
-  ScrollView,
   useColorScheme,
   Platform,
+  SafeAreaView,
 } from "react-native";
-import BottomSheet, { BottomSheetView, BottomSheetScrollView } from "@gorhom/bottom-sheet";
 import type { Comment, Feedback, FeedbackType, FeedbackWithComments } from "@upstep/types";
 import { useUpstep } from "./FeedbackContext";
 
@@ -19,37 +22,31 @@ import { useUpstep } from "./FeedbackContext";
 interface Palette {
   bg: string;
   bgSoft: string;
-  bgHover: string;
   text: string;
   textSoft: string;
   textFaint: string;
   border: string;
   handle: string;
-  shadow: string;
 }
 
 const LIGHT: Palette = {
   bg: "#ffffff",
   bgSoft: "#f6f5f2",
-  bgHover: "#efede8",
   text: "#1a1915",
   textSoft: "#56544d",
   textFaint: "#9b9890",
   border: "#e8e6df",
   handle: "#dad7ce",
-  shadow: "#00000014",
 };
 
 const DARK: Palette = {
   bg: "#1c1b19",
   bgSoft: "#262522",
-  bgHover: "#302e2a",
   text: "#f5f4f0",
   textSoft: "#b4b1a8",
   textFaint: "#7d7a72",
   border: "#33312c",
   handle: "#48453f",
-  shadow: "#0000003a",
 };
 
 // ─── Navigation ───────────────────────────────────────────────────────────────
@@ -62,81 +59,159 @@ type Nav =
 // ─── FeedbackSheet ────────────────────────────────────────────────────────────
 
 export function FeedbackSheet() {
-  const { sheetRef, accentColor, theme } = useUpstep();
+  const { isOpen, closeSheet, accentColor, theme, loadFeed } = useUpstep();
   const scheme = useColorScheme();
   const isDark = theme === "dark" || (theme === "auto" && scheme === "dark");
   const p = isDark ? DARK : LIGHT;
 
   const [nav, setNav] = useState<Nav>({ screen: "list" });
-  const snapPoints = useMemo(() => ["90%"], []);
 
-  const goList = useCallback(() => setNav({ screen: "list" }), []);
-  const goDetail = useCallback((id: string) => setNav({ screen: "detail", feedbackId: id }), []);
-  const goCreate = useCallback(() => setNav({ screen: "create" }), []);
+  // Refresh list every time the modal opens
+  useEffect(() => {
+    if (isOpen) loadFeed();
+  }, [isOpen, loadFeed]);
+
+  function handleClose() {
+    closeSheet();
+    // Reset to list when closed so next open starts fresh
+    setTimeout(() => setNav({ screen: "list" }), 300);
+  }
 
   return (
-    <BottomSheet
-      ref={sheetRef}
-      index={-1}
-      snapPoints={snapPoints}
-      enablePanDownToClose
-      backgroundStyle={{ backgroundColor: p.bg, borderRadius: 24 }}
-      handleIndicatorStyle={{ backgroundColor: p.handle, width: 40, height: 4 }}
-      onClose={() => setNav({ screen: "list" })}
+    <Modal
+      visible={isOpen}
+      animationType="slide"
+      transparent
+      statusBarTranslucent
+      onRequestClose={handleClose}
     >
-      {nav.screen === "list" && (
-        <FeedList p={p} accent={accentColor} onSelect={goDetail} onCreate={goCreate} />
-      )}
-      {nav.screen === "detail" && (
-        <FeedDetail p={p} accent={accentColor} feedbackId={nav.feedbackId} onBack={goList} />
-      )}
-      {nav.screen === "create" && (
-        <FeedCreate p={p} accent={accentColor} onBack={goList} />
-      )}
-    </BottomSheet>
+      <KeyboardAvoidingView
+        style={styles.overlay}
+        behavior={Platform.OS === "ios" ? "padding" : "height"}
+      >
+        {/* Tap backdrop to dismiss */}
+        <Pressable style={styles.backdrop} onPress={handleClose} />
+
+        {/* Sheet */}
+        <View style={[styles.sheet, { backgroundColor: p.bg }]}>
+          {/* Drag handle */}
+          <View style={styles.handleWrap}>
+            <View style={[styles.handle, { backgroundColor: p.handle }]} />
+          </View>
+
+          {/* Fixed header */}
+          <View style={[styles.header, { borderBottomColor: p.border }]}>
+            {nav.screen === "list" ? (
+              <>
+                <Text style={[styles.headerTitle, { color: p.text }]}>Feedback</Text>
+                <TouchableOpacity
+                  onPress={() => setNav({ screen: "create" })}
+                  activeOpacity={0.8}
+                  style={[styles.newBtn, { backgroundColor: accentColor }]}
+                >
+                  <Text style={styles.newBtnText}>+ New</Text>
+                </TouchableOpacity>
+              </>
+            ) : nav.screen === "create" ? (
+              <>
+                <TouchableOpacity
+                  onPress={() => setNav({ screen: "list" })}
+                  hitSlop={{ top: 10, bottom: 10, left: 10, right: 16 }}
+                >
+                  <Text style={[styles.navBtn, { color: accentColor }]}>Cancel</Text>
+                </TouchableOpacity>
+                <Text style={[styles.headerTitle, { color: p.text }]}>New feedback</Text>
+                <View style={styles.navBtnSpacer} />
+              </>
+            ) : (
+              <TouchableOpacity
+                onPress={() => setNav({ screen: "list" })}
+                hitSlop={{ top: 10, bottom: 10, left: 10, right: 16 }}
+              >
+                <Text style={[styles.navBtn, { color: accentColor }]}>← Back</Text>
+              </TouchableOpacity>
+            )}
+          </View>
+
+          {/* Scrollable body */}
+          <ScrollView
+            style={styles.scroll}
+            contentContainerStyle={styles.scrollContent}
+            keyboardShouldPersistTaps="handled"
+            showsVerticalScrollIndicator={false}
+          >
+            {nav.screen === "list" && (
+              <FeedListBody
+                p={p}
+                accent={accentColor}
+                onSelect={(id) => setNav({ screen: "detail", feedbackId: id })}
+              />
+            )}
+            {nav.screen === "detail" && "feedbackId" in nav && (
+              <FeedDetailBody
+                p={p}
+                accent={accentColor}
+                feedbackId={(nav as { screen: "detail"; feedbackId: string }).feedbackId}
+              />
+            )}
+            {nav.screen === "create" && (
+              <FeedCreateBody
+                p={p}
+                accent={accentColor}
+                onDone={() => {
+                  setNav({ screen: "list" });
+                }}
+              />
+            )}
+          </ScrollView>
+
+          {/* Safe area spacer */}
+          <SafeAreaView />
+        </View>
+      </KeyboardAvoidingView>
+    </Modal>
   );
 }
 
-// ─── FeedList ─────────────────────────────────────────────────────────────────
+// ─── FeedListBody ─────────────────────────────────────────────────────────────
 
-function FeedList({
-  p, accent, onSelect, onCreate,
+function FeedListBody({
+  p, accent, onSelect,
 }: {
-  p: Palette; accent: string;
-  onSelect: (id: string) => void;
-  onCreate: () => void;
+  p: Palette; accent: string; onSelect: (id: string) => void;
 }) {
-  const { feedItems, vote } = useUpstep();
+  const { feedItems, feedLoading, vote } = useUpstep();
+
+  if (feedLoading) {
+    return (
+      <View style={styles.centered}>
+        <ActivityIndicator color={accent} />
+      </View>
+    );
+  }
+
+  if (feedItems.length === 0) {
+    return (
+      <View style={styles.centered}>
+        <Text style={[styles.emptyText, { color: p.textFaint }]}>
+          No feedback yet. Be the first to add one.
+        </Text>
+      </View>
+    );
+  }
 
   return (
     <>
-      <BottomSheetView style={[styles.header, { borderBottomColor: p.border }]}>
-        <Text style={[styles.headerTitle, { color: p.text }]}>Feedback</Text>
-        <TouchableOpacity
-          onPress={onCreate}
-          activeOpacity={0.8}
-          style={[styles.newBtn, { backgroundColor: accent }]}
-        >
-          <Text style={styles.newBtnText}>+ New</Text>
-        </TouchableOpacity>
-      </BottomSheetView>
-
-      <BottomSheetScrollView contentContainerStyle={styles.listBody}>
-        {feedItems.length === 0 ? (
-          <EmptyState p={p} message="No feedback yet. Be the first to add one." />
-        ) : (
-          feedItems.map((f) => (
-            <FeedCard
-              key={f.id}
-              item={f}
-              p={p}
-              accent={accent}
-              onPress={() => onSelect(f.id)}
-              onVote={() => vote(f.id, "UP")}
-            />
-          ))
-        )}
-      </BottomSheetScrollView>
+      {feedItems.map((f) => (
+        <FeedCard
+          key={f.id}
+          item={f}
+          p={p}
+          accent={accent}
+          onPress={() => onSelect(f.id)}
+          onVote={() => vote(f.id, "UP")}
+        />
+      ))}
     </>
   );
 }
@@ -145,12 +220,10 @@ function FeedCard({
   item, p, accent, onPress, onVote,
 }: {
   item: Feedback; p: Palette; accent: string;
-  onPress: () => void;
-  onVote: () => void;
+  onPress: () => void; onVote: () => void;
 }) {
   const voted = item.userVote === "UP";
   const displayTitle = item.title ?? item.content;
-  const hasDescription = Boolean(item.title);
 
   return (
     <TouchableOpacity
@@ -164,7 +237,10 @@ function FeedCard({
         hitSlop={{ top: 8, bottom: 8, left: 8, right: 4 }}
         style={[
           styles.voteBox,
-          { borderColor: voted ? accent : p.border, backgroundColor: voted ? accent + "1a" : p.bgSoft },
+          {
+            borderColor: voted ? accent : p.border,
+            backgroundColor: voted ? accent + "1a" : p.bgSoft,
+          },
         ]}
       >
         <Text style={[styles.voteArrow, { color: accent }]}>▲</Text>
@@ -175,17 +251,15 @@ function FeedCard({
         <Text style={[styles.cardTitle, { color: p.text }]} numberOfLines={2}>
           {displayTitle}
         </Text>
-        {hasDescription && (
-          <Text style={[styles.cardDescription, { color: p.textFaint }]} numberOfLines={1}>
+        {item.title && (
+          <Text style={[styles.cardDesc, { color: p.textFaint }]} numberOfLines={1}>
             {item.content}
           </Text>
         )}
         <View style={styles.cardMeta}>
           <TypeBadge type={item.type} p={p} />
           <StatusDot status={item.status} />
-          <Text style={[styles.cardDate, { color: p.textFaint }]}>
-            {formatDate(item.createdAt)}
-          </Text>
+          <Text style={[styles.cardDate, { color: p.textFaint }]}>{fmtDate(item.createdAt)}</Text>
         </View>
       </View>
 
@@ -194,26 +268,24 @@ function FeedCard({
   );
 }
 
-// ─── FeedDetail ───────────────────────────────────────────────────────────────
+// ─── FeedDetailBody ───────────────────────────────────────────────────────────
 
-function FeedDetail({
-  p, accent, feedbackId, onBack,
+function FeedDetailBody({
+  p, accent, feedbackId,
 }: {
-  p: Palette; accent: string; feedbackId: string; onBack: () => void;
+  p: Palette; accent: string; feedbackId: string;
 }) {
   const { vote, getItem } = useUpstep();
   const [item, setItem] = useState<FeedbackWithComments | null>(null);
   const [loading, setLoading] = useState(true);
   const [voting, setVoting] = useState(false);
 
-  React.useEffect(() => {
+  useEffect(() => {
     let cancelled = false;
     setLoading(true);
-    getItem(feedbackId).then((data) => {
-      if (!cancelled) { setItem(data); setLoading(false); }
-    }).catch(() => {
-      if (!cancelled) setLoading(false);
-    });
+    getItem(feedbackId)
+      .then((data) => { if (!cancelled) { setItem(data); setLoading(false); } })
+      .catch(() => { if (!cancelled) setLoading(false); });
     return () => { cancelled = true; };
   }, [feedbackId, getItem]);
 
@@ -222,7 +294,6 @@ function FeedDetail({
     setVoting(true);
     try {
       await vote(item.id, "UP");
-      // Refresh
       const updated = await getItem(feedbackId);
       setItem(updated);
     } finally {
@@ -230,72 +301,60 @@ function FeedDetail({
     }
   }
 
+  if (loading || !item) {
+    return (
+      <View style={styles.centered}>
+        <ActivityIndicator color={accent} />
+      </View>
+    );
+  }
+
   return (
-    <>
-      <BottomSheetView style={[styles.header, { borderBottomColor: p.border }]}>
-        <TouchableOpacity onPress={onBack} hitSlop={{ top: 8, bottom: 8, left: 8, right: 16 }}>
-          <Text style={[styles.backBtn, { color: accent }]}>← Back</Text>
-        </TouchableOpacity>
-      </BottomSheetView>
-
-      {loading || !item ? (
-        <BottomSheetView style={styles.centered}>
-          <ActivityIndicator color={accent} />
-        </BottomSheetView>
-      ) : (
-        <BottomSheetScrollView contentContainerStyle={styles.detailBody}>
-          {/* Title + badges */}
-          {item.title && (
-            <Text style={[styles.detailTitle, { color: p.text }]}>{item.title}</Text>
-          )}
-          <View style={styles.detailBadgeRow}>
-            <TypeBadge type={item.type} p={p} />
-            <StatusBadge status={item.status} p={p} />
-          </View>
+    <View style={styles.detailPad}>
+      {item.title && (
+        <Text style={[styles.detailTitle, { color: p.text }]}>{item.title}</Text>
+      )}
+      <View style={styles.badgeRow}>
+        <TypeBadge type={item.type} p={p} />
+        <StatusBadge status={item.status} p={p} />
+      </View>
 
-          {/* Description */}
-          <Text style={[styles.detailContent, { color: p.textSoft }]}>{item.content}</Text>
-
-          {/* Upvote */}
-          <TouchableOpacity
-            onPress={handleVote}
-            disabled={voting}
-            activeOpacity={0.8}
-            style={[
-              styles.upvoteBtn,
-              {
-                borderColor: item.userVote === "UP" ? accent : p.border,
-                backgroundColor: item.userVote === "UP" ? accent + "15" : p.bgSoft,
-              },
-            ]}
-          >
-            {voting ? (
-              <ActivityIndicator size="small" color={accent} />
-            ) : (
-              <>
-                <Text style={[styles.upvoteArrow, { color: accent }]}>▲</Text>
-                <Text style={[styles.upvoteCount, { color: p.text }]}>{item.upvotes}</Text>
-                <Text style={[styles.upvoteLabel, { color: p.textFaint }]}>
-                  {item.userVote === "UP" ? "Upvoted" : "Upvote"}
-                </Text>
-              </>
-            )}
-          </TouchableOpacity>
+      <Text style={[styles.detailContent, { color: p.textSoft }]}>{item.content}</Text>
 
-          {/* Developer comments */}
-          {item.comments.length > 0 && (
-            <View style={[styles.commentsSection, { borderTopColor: p.border }]}>
-              <Text style={[styles.commentsLabel, { color: p.textFaint }]}>
-                DEVELOPER RESPONSE
-              </Text>
-              {item.comments.map((c) => (
-                <CommentBubble key={c.id} comment={c} p={p} accent={accent} />
-              ))}
-            </View>
-          )}
-        </BottomSheetScrollView>
+      <TouchableOpacity
+        onPress={handleVote}
+        disabled={voting}
+        activeOpacity={0.8}
+        style={[
+          styles.upvoteBtn,
+          {
+            borderColor: item.userVote === "UP" ? accent : p.border,
+            backgroundColor: item.userVote === "UP" ? accent + "15" : p.bgSoft,
+          },
+        ]}
+      >
+        {voting ? (
+          <ActivityIndicator size="small" color={accent} />
+        ) : (
+          <>
+            <Text style={[styles.upvoteArrow, { color: accent }]}>▲</Text>
+            <Text style={[styles.upvoteCount, { color: p.text }]}>{item.upvotes}</Text>
+            <Text style={[styles.upvoteLabel, { color: p.textFaint }]}>
+              {item.userVote === "UP" ? "Upvoted" : "Upvote"}
+            </Text>
+          </>
+        )}
+      </TouchableOpacity>
+
+      {item.comments.length > 0 && (
+        <View style={[styles.commentsSection, { borderTopColor: p.border }]}>
+          <Text style={[styles.commentsLabel, { color: p.textFaint }]}>DEVELOPER RESPONSE</Text>
+          {item.comments.map((c) => (
+            <CommentBubble key={c.id} comment={c} p={p} accent={accent} />
+          ))}
+        </View>
       )}
-    </>
+    </View>
   );
 }
 
@@ -308,16 +367,14 @@ function CommentBubble({ comment, p, accent }: { comment: Comment; p: Palette; a
             {comment.authorName ?? "Team"}
           </Text>
         </View>
-        <Text style={[styles.commentDate, { color: p.textFaint }]}>
-          {formatDate(comment.createdAt)}
-        </Text>
+        <Text style={[styles.commentDate, { color: p.textFaint }]}>{fmtDate(comment.createdAt)}</Text>
       </View>
       <Text style={[styles.commentContent, { color: p.textSoft }]}>{comment.content}</Text>
     </View>
   );
 }
 
-// ─── FeedCreate ───────────────────────────────────────────────────────────────
+// ─── FeedCreateBody ───────────────────────────────────────────────────────────
 
 const TYPES: FeedbackType[] = ["BUG", "FEATURE", "GENERAL"];
 const TYPE_LABELS: Record<FeedbackType, string> = {
@@ -326,149 +383,120 @@ const TYPE_LABELS: Record<FeedbackType, string> = {
   GENERAL: "General",
 };
 
-function FeedCreate({ p, accent, onBack }: { p: Palette; accent: string; onBack: () => void }) {
+function FeedCreateBody({
+  p, accent, onDone,
+}: {
+  p: Palette; accent: string; onDone: () => void;
+}) {
   const { submit } = useUpstep();
   const [title, setTitle] = useState("");
   const [description, setDescription] = useState("");
   const [type, setType] = useState<FeedbackType>("GENERAL");
-  const [loading, setLoading] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
   const [success, setSuccess] = useState(false);
   const [error, setError] = useState("");
 
   async function handleSubmit() {
-    if (!title.trim() || loading) return;
-    setLoading(true);
+    if (!title.trim() || submitting) return;
+    setSubmitting(true);
     setError("");
     try {
       await submit(title.trim(), description.trim() || title.trim(), type);
       setSuccess(true);
-      // Return to list after a moment
-      setTimeout(onBack, 1400);
+      setTimeout(onDone, 1200);
     } catch {
       setError("Something went wrong. Please try again.");
     } finally {
-      setLoading(false);
+      setSubmitting(false);
     }
   }
 
-  return (
-    <>
-      <BottomSheetView style={[styles.header, { borderBottomColor: p.border }]}>
-        <TouchableOpacity onPress={onBack} hitSlop={{ top: 8, bottom: 8, left: 8, right: 16 }}>
-          <Text style={[styles.backBtn, { color: accent }]}>Cancel</Text>
-        </TouchableOpacity>
-        <Text style={[styles.headerTitle, { color: p.text }]}>New feedback</Text>
-        <View style={{ width: 60 }} />
-      </BottomSheetView>
-
-      <BottomSheetScrollView
-        contentContainerStyle={styles.createBody}
-        keyboardShouldPersistTaps="handled"
-      >
-        {success ? (
-          <View style={styles.centered}>
-            <Text style={[styles.successTitle, { color: p.text }]}>Submitted</Text>
-            <Text style={[styles.successSub, { color: p.textFaint }]}>
-              Thanks — we received your feedback.
-            </Text>
-          </View>
-        ) : (
-          <>
-            {/* Type selector */}
-            <Text style={[styles.fieldLabel, { color: p.textFaint }]}>TYPE</Text>
-            <View style={styles.typeRow}>
-              {TYPES.map((t) => {
-                const active = type === t;
-                return (
-                  <TouchableOpacity
-                    key={t}
-                    onPress={() => setType(t)}
-                    activeOpacity={0.8}
-                    style={[
-                      styles.typeBtn,
-                      {
-                        borderColor: active ? accent : p.border,
-                        backgroundColor: active ? accent : p.bg,
-                      },
-                    ]}
-                  >
-                    <Text style={[styles.typeBtnText, { color: active ? "#fff" : p.textSoft }]}>
-                      {TYPE_LABELS[t]}
-                    </Text>
-                  </TouchableOpacity>
-                );
-              })}
-            </View>
-
-            {/* Title */}
-            <Text style={[styles.fieldLabel, { color: p.textFaint }]}>TITLE</Text>
-            <TextInput
-              value={title}
-              onChangeText={setTitle}
-              placeholder="Short summary of the issue or idea"
-              placeholderTextColor={p.textFaint}
-              maxLength={200}
-              returnKeyType="next"
-              style={[
-                styles.titleInput,
-                { borderColor: p.border, backgroundColor: p.bgSoft, color: p.text },
-              ]}
-            />
-
-            {/* Description */}
-            <Text style={[styles.fieldLabel, { color: p.textFaint }]}>DESCRIPTION</Text>
-            <TextInput
-              value={description}
-              onChangeText={setDescription}
-              placeholder="Steps to reproduce, expected behaviour, or more context (optional)"
-              placeholderTextColor={p.textFaint}
-              multiline
-              numberOfLines={5}
-              maxLength={2000}
-              textAlignVertical="top"
-              style={[
-                styles.descInput,
-                { borderColor: p.border, backgroundColor: p.bgSoft, color: p.text },
-              ]}
-            />
-
-            {error ? (
-              <Text style={[styles.errorText, { color: "#d6453d" }]}>{error}</Text>
-            ) : null}
+  if (success) {
+    return (
+      <View style={[styles.centered, { paddingTop: 40 }]}>
+        <Text style={[styles.successTitle, { color: p.text }]}>Submitted</Text>
+        <Text style={[styles.successSub, { color: p.textFaint }]}>
+          Thanks — we received your feedback.
+        </Text>
+      </View>
+    );
+  }
 
+  return (
+    <View style={styles.createPad}>
+      <Text style={[styles.fieldLabel, { color: p.textFaint }]}>TYPE</Text>
+      <View style={styles.typeRow}>
+        {TYPES.map((t) => {
+          const active = type === t;
+          return (
             <TouchableOpacity
-              onPress={handleSubmit}
-              disabled={loading || !title.trim()}
-              activeOpacity={0.85}
+              key={t}
+              onPress={() => setType(t)}
+              activeOpacity={0.8}
               style={[
-                styles.submitBtn,
-                { backgroundColor: accent },
-                (loading || !title.trim()) && styles.submitBtnDisabled,
+                styles.typeBtn,
+                {
+                  borderColor: active ? accent : p.border,
+                  backgroundColor: active ? accent : p.bg,
+                },
               ]}
             >
-              {loading ? (
-                <ActivityIndicator color="#fff" />
-              ) : (
-                <Text style={styles.submitBtnText}>Submit feedback</Text>
-              )}
+              <Text style={[styles.typeBtnText, { color: active ? "#fff" : p.textSoft }]}>
+                {TYPE_LABELS[t]}
+              </Text>
             </TouchableOpacity>
-          </>
-        )}
-      </BottomSheetScrollView>
-    </>
-  );
-}
+          );
+        })}
+      </View>
 
-// ─── Shared sub-components ────────────────────────────────────────────────────
+      <Text style={[styles.fieldLabel, { color: p.textFaint }]}>TITLE</Text>
+      <TextInput
+        value={title}
+        onChangeText={setTitle}
+        placeholder="Short summary of the issue or idea"
+        placeholderTextColor={p.textFaint}
+        maxLength={200}
+        returnKeyType="next"
+        style={[styles.titleInput, { borderColor: p.border, backgroundColor: p.bgSoft, color: p.text }]}
+      />
+
+      <Text style={[styles.fieldLabel, { color: p.textFaint }]}>DESCRIPTION</Text>
+      <TextInput
+        value={description}
+        onChangeText={setDescription}
+        placeholder="Steps to reproduce, expected behaviour, or more context (optional)"
+        placeholderTextColor={p.textFaint}
+        multiline
+        numberOfLines={5}
+        maxLength={2000}
+        textAlignVertical="top"
+        style={[styles.descInput, { borderColor: p.border, backgroundColor: p.bgSoft, color: p.text }]}
+      />
+
+      {error ? <Text style={styles.errorText}>{error}</Text> : null}
 
-function EmptyState({ p, message }: { p: Palette; message: string }) {
-  return (
-    <View style={styles.empty}>
-      <Text style={[styles.emptyText, { color: p.textFaint }]}>{message}</Text>
+      <TouchableOpacity
+        onPress={handleSubmit}
+        disabled={submitting || !title.trim()}
+        activeOpacity={0.85}
+        style={[
+          styles.submitBtn,
+          { backgroundColor: accent },
+          (submitting || !title.trim()) && styles.submitBtnDisabled,
+        ]}
+      >
+        {submitting ? (
+          <ActivityIndicator color="#fff" />
+        ) : (
+          <Text style={styles.submitBtnText}>Submit feedback</Text>
+        )}
+      </TouchableOpacity>
     </View>
   );
 }
 
+// ─── Shared sub-components ────────────────────────────────────────────────────
+
 const TYPE_BG: Record<FeedbackType, string> = {
   BUG: "#fdecec", FEATURE: "#e9f0fd", GENERAL: "",
 };
@@ -479,44 +507,64 @@ const TYPE_FG: Record<FeedbackType, string> = {
 function TypeBadge({ type, p }: { type: FeedbackType; p: Palette }) {
   return (
     <View style={[styles.badge, { backgroundColor: TYPE_BG[type] || p.bgSoft }]}>
-      <Text style={[styles.badgeText, { color: TYPE_FG[type] || p.textSoft }]}>
-        {type}
-      </Text>
+      <Text style={[styles.badgeText, { color: TYPE_FG[type] || p.textSoft }]}>{type}</Text>
     </View>
   );
 }
 
-const STATUS_COLORS: Record<string, string> = {
-  OPEN: "#b45309",
-  IN_PROGRESS: "#1d4ed8",
-  DONE: "#15803d",
-  PENDING: "#ea580c",
-  CLOSED: "#6b7280",
+const STATUS_COLOR: Record<string, string> = {
+  OPEN: "#b45309", IN_PROGRESS: "#1d4ed8", DONE: "#15803d",
+  PENDING: "#ea580c", CLOSED: "#6b7280",
 };
 
 function StatusDot({ status }: { status: string }) {
-  const color = STATUS_COLORS[status] ?? "#9ca3af";
-  return <View style={[styles.statusDot, { backgroundColor: color }]} />;
+  return <View style={[styles.statusDot, { backgroundColor: STATUS_COLOR[status] ?? "#9ca3af" }]} />;
 }
 
 function StatusBadge({ status, p }: { status: string; p: Palette }) {
-  const label = status.replace("_", " ");
   return (
     <View style={[styles.statusBadge, { backgroundColor: p.bgSoft, borderColor: p.border }]}>
       <StatusDot status={status} />
-      <Text style={[styles.statusBadgeText, { color: p.textSoft }]}>{label}</Text>
+      <Text style={[styles.statusBadgeText, { color: p.textSoft }]}>{status.replace("_", " ")}</Text>
     </View>
   );
 }
 
-function formatDate(iso: string) {
-  const d = new Date(iso);
-  return d.toLocaleDateString(undefined, { month: "short", day: "numeric" });
+function fmtDate(iso: string) {
+  return new Date(iso).toLocaleDateString(undefined, { month: "short", day: "numeric" });
 }
 
 // ─── Styles ───────────────────────────────────────────────────────────────────
 
 const styles = StyleSheet.create({
+  // Modal overlay
+  overlay: {
+    flex: 1,
+    justifyContent: "flex-end",
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFill,
+    backgroundColor: "rgba(0,0,0,0.45)",
+  },
+
+  // Sheet container
+  sheet: {
+    maxHeight: "92%",
+    borderTopLeftRadius: 24,
+    borderTopRightRadius: 24,
+    overflow: "hidden",
+  },
+  handleWrap: {
+    alignItems: "center",
+    paddingTop: 10,
+    paddingBottom: 4,
+  },
+  handle: {
+    width: 40,
+    height: 4,
+    borderRadius: 2,
+  },
+
   // Header
   header: {
     flexDirection: "row",
@@ -527,18 +575,18 @@ const styles = StyleSheet.create({
     borderBottomWidth: StyleSheet.hairlineWidth,
   },
   headerTitle: { fontSize: 16, fontWeight: "700", letterSpacing: -0.3 },
-  backBtn: { fontSize: 14, fontWeight: "600" },
-  newBtn: {
-    borderRadius: 20,
-    paddingHorizontal: 14,
-    paddingVertical: 7,
-  },
+  navBtn: { fontSize: 14, fontWeight: "600" },
+  navBtnSpacer: { width: 60 },
+  newBtn: { borderRadius: 20, paddingHorizontal: 14, paddingVertical: 7 },
   newBtnText: { color: "#fff", fontSize: 13, fontWeight: "700" },
 
-  // List
-  listBody: { padding: 16, paddingBottom: 40 },
+  // Scroll
+  scroll: { flexGrow: 0 },
+  scrollContent: { flexGrow: 1, padding: 16, paddingBottom: 32 },
 
-  // Card
+  // List
+  centered: { alignItems: "center", justifyContent: "center", paddingVertical: 60 },
+  emptyText: { fontSize: 14 },
   card: {
     flexDirection: "row",
     alignItems: "center",
@@ -560,41 +608,29 @@ const styles = StyleSheet.create({
   voteCount: { fontSize: 15, fontWeight: "700", lineHeight: 18 },
   cardBody: { flex: 1 },
   cardTitle: { fontSize: 14, fontWeight: "600", lineHeight: 19, marginBottom: 2 },
-  cardDescription: { fontSize: 12.5, lineHeight: 17, marginBottom: 6 },
+  cardDesc: { fontSize: 12.5, lineHeight: 17, marginBottom: 6 },
   cardMeta: { flexDirection: "row", alignItems: "center", gap: 6 },
   cardDate: { fontSize: 11 },
   chevron: { fontSize: 22, fontWeight: "300", marginLeft: 4 },
 
   // Detail
-  detailBody: { padding: 20, paddingBottom: 50 },
+  detailPad: { paddingTop: 4 },
   detailTitle: { fontSize: 22, fontWeight: "700", letterSpacing: -0.4, marginBottom: 10, lineHeight: 28 },
-  detailBadgeRow: { flexDirection: "row", gap: 8, marginBottom: 16 },
+  badgeRow: { flexDirection: "row", gap: 8, marginBottom: 16 },
   detailContent: { fontSize: 15, lineHeight: 23, marginBottom: 24 },
   upvoteBtn: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    alignSelf: "flex-start",
-    borderWidth: 1,
-    borderRadius: 12,
-    paddingHorizontal: 16,
-    paddingVertical: 10,
-    marginBottom: 8,
-    minWidth: 80,
-    justifyContent: "center",
+    flexDirection: "row", alignItems: "center", gap: 8,
+    alignSelf: "flex-start", borderWidth: 1, borderRadius: 12,
+    paddingHorizontal: 16, paddingVertical: 10, marginBottom: 8,
+    minWidth: 80, justifyContent: "center",
   },
   upvoteArrow: { fontSize: 13, lineHeight: 15 },
   upvoteCount: { fontSize: 18, fontWeight: "700" },
   upvoteLabel: { fontSize: 13, fontWeight: "500" },
-
-  // Comments
   commentsSection: { marginTop: 28, borderTopWidth: StyleSheet.hairlineWidth, paddingTop: 20 },
   commentsLabel: { fontSize: 10, fontWeight: "700", letterSpacing: 0.8, marginBottom: 12 },
   commentBubble: {
-    borderRadius: 12,
-    borderWidth: StyleSheet.hairlineWidth,
-    padding: 14,
-    marginBottom: 10,
+    borderRadius: 12, borderWidth: StyleSheet.hairlineWidth, padding: 14, marginBottom: 10,
   },
   commentMeta: { flexDirection: "row", alignItems: "center", gap: 8, marginBottom: 8 },
   ownerBadge: { borderRadius: 20, paddingHorizontal: 8, paddingVertical: 3 },
@@ -603,38 +639,38 @@ const styles = StyleSheet.create({
   commentContent: { fontSize: 14, lineHeight: 21 },
 
   // Create
-  createBody: { padding: 20, paddingBottom: 50 },
+  createPad: { paddingTop: 4 },
   fieldLabel: { fontSize: 10, fontWeight: "700", letterSpacing: 0.8, marginBottom: 8 },
   typeRow: { flexDirection: "row", gap: 8, marginBottom: 20, flexWrap: "wrap" },
   typeBtn: { paddingVertical: 9, paddingHorizontal: 14, borderRadius: 10, borderWidth: 1 },
   typeBtnText: { fontSize: 13, fontWeight: "600" },
   titleInput: {
-    borderWidth: 1, borderRadius: 12, paddingHorizontal: 14, paddingVertical: 12,
+    borderWidth: 1, borderRadius: 12,
+    paddingHorizontal: 14, paddingVertical: 12,
     fontSize: 15, marginBottom: 20,
     ...(Platform.OS === "ios" ? {} : { paddingTop: 12 }),
   },
   descInput: {
-    borderWidth: 1, borderRadius: 12, paddingHorizontal: 14, paddingVertical: 12,
+    borderWidth: 1, borderRadius: 12,
+    paddingHorizontal: 14, paddingVertical: 12,
     fontSize: 14, minHeight: 110, marginBottom: 20,
     ...(Platform.OS === "ios" ? {} : { paddingTop: 12 }),
   },
-  errorText: { fontSize: 13, marginBottom: 12, fontWeight: "500" },
+  errorText: { fontSize: 13, marginBottom: 12, fontWeight: "500", color: "#d6453d" },
   submitBtn: { borderRadius: 12, padding: 14, alignItems: "center" },
   submitBtnDisabled: { opacity: 0.5 },
   submitBtnText: { color: "#fff", fontSize: 15, fontWeight: "700" },
   successTitle: { fontSize: 20, fontWeight: "700", textAlign: "center", marginBottom: 6 },
   successSub: { fontSize: 14, textAlign: "center" },
 
-  // Shared
-  empty: { alignItems: "center", paddingVertical: 60 },
-  emptyText: { fontSize: 14 },
-  centered: { flex: 1, alignItems: "center", justifyContent: "center", paddingVertical: 60 },
+  // Shared badges
   badge: { paddingHorizontal: 7, paddingVertical: 3, borderRadius: 6 },
   badgeText: { fontSize: 10, fontWeight: "700", letterSpacing: 0.2 },
   statusDot: { width: 6, height: 6, borderRadius: 3 },
   statusBadge: {
-    flexDirection: "row", alignItems: "center", gap: 5, paddingHorizontal: 8,
-    paddingVertical: 3, borderRadius: 6, borderWidth: StyleSheet.hairlineWidth,
+    flexDirection: "row", alignItems: "center", gap: 5,
+    paddingHorizontal: 8, paddingVertical: 3,
+    borderRadius: 6, borderWidth: StyleSheet.hairlineWidth,
   },
   statusBadgeText: { fontSize: 10, fontWeight: "600", textTransform: "capitalize" },
 });