@upstep/react-native 0.5.0 → 0.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@upstep/react-native",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Upstep feedback SDK for React Native",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/FeedbackContext.tsx

@@ -22,6 +22,7 @@ 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>;
@@ -43,6 +44,7 @@ export function FeedbackProvider({
 }: UpstepConfig & { children: ReactNode }) {
   const [client] = useState(() => new UpstepApiClient(config));
   const [feedItems, setFeedItems] = useState<Feedback[]>([]);
+  const [feedLoading, setFeedLoading] = useState(true);
   const sheetRef = useRef<BottomSheet>(null);
 
   useEffect(() => {
@@ -50,11 +52,14 @@ export function FeedbackProvider({
   }, [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]);
 
@@ -93,7 +98,7 @@ export function FeedbackProvider({
   return (
     <UpstepContext.Provider
       value={{
-        client, feedItems, loadFeed, submit, vote, getItem,
+        client, feedItems, feedLoading, loadFeed, submit, vote, getItem,
         openSheet, identify, sheetRef,
         accentColor: config.accentColor ?? DEFAULT_ACCENT,
         theme: config.theme ?? "auto",

package/src/FeedbackSheet.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useCallback } from "react";
+import React, { useState, useMemo, useCallback, useEffect } from "react";
 import {
   View,
   Text,
@@ -6,11 +6,15 @@ import {
   TouchableOpacity,
   StyleSheet,
   ActivityIndicator,
-  ScrollView,
   useColorScheme,
   Platform,
 } from "react-native";
-import BottomSheet, { BottomSheetView, BottomSheetScrollView } from "@gorhom/bottom-sheet";
+import BottomSheet, {
+  BottomSheetView,
+  BottomSheetScrollView,
+  BottomSheetBackdrop,
+} from "@gorhom/bottom-sheet";
+import type { BottomSheetBackdropProps } from "@gorhom/bottom-sheet";
 import type { Comment, Feedback, FeedbackType, FeedbackWithComments } from "@upstep/types";
 import { useUpstep } from "./FeedbackContext";
 
@@ -19,37 +23,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 ───────────────────────────────────────────────────────────────
@@ -60,9 +58,14 @@ type Nav =
   | { screen: "create" };
 
 // ─── FeedbackSheet ────────────────────────────────────────────────────────────
+//
+// IMPORTANT: BottomSheet requires stable direct children — never conditionally
+// render <BottomSheetView> or <BottomSheetScrollView> as they set up gesture
+// handlers on mount. We keep ONE of each always mounted; only their contents
+// change based on `nav`. This also fixes TouchableOpacity not responding.
 
 export function FeedbackSheet() {
-  const { sheetRef, accentColor, theme } = useUpstep();
+  const { sheetRef, accentColor, theme, loadFeed } = useUpstep();
   const scheme = useColorScheme();
   const isDark = theme === "dark" || (theme === "auto" && scheme === "dark");
   const p = isDark ? DARK : LIGHT;
@@ -70,9 +73,18 @@ export function FeedbackSheet() {
   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" }), []);
+  // Dim backdrop — tap to close
+  const renderBackdrop = useCallback(
+    (props: BottomSheetBackdropProps) => (
+      <BottomSheetBackdrop
+        {...props}
+        disappearsOnIndex={-1}
+        appearsOnIndex={0}
+        pressBehavior="close"
+      />
+    ),
+    []
+  );
 
   return (
     <BottomSheet
@@ -80,64 +92,126 @@ export function FeedbackSheet() {
       index={-1}
       snapPoints={snapPoints}
       enablePanDownToClose
+      backdropComponent={renderBackdrop}
       backgroundStyle={{ backgroundColor: p.bg, borderRadius: 24 }}
       handleIndicatorStyle={{ backgroundColor: p.handle, width: 40, height: 4 }}
+      onChange={(index) => { if (index >= 0) loadFeed(); }}
       onClose={() => setNav({ screen: "list" })}
     >
-      {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} />
-      )}
+      {/*
+        Wrap everything in ONE BottomSheetView so the library can measure the
+        sheet correctly. A plain View header stays fixed; BottomSheetScrollView
+        fills the remaining space below it — no overlap.
+      */}
+      <BottomSheetView style={styles.sheetContainer}>
+        {/* ── 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: 8, bottom: 8, left: 8, right: 16 }}
+              >
+                <Text style={[styles.navBtn, { color: accentColor }]}>Cancel</Text>
+              </TouchableOpacity>
+              <Text style={[styles.headerTitle, { color: p.text }]}>New feedback</Text>
+              <View style={styles.navBtnPlaceholder} />
+            </>
+          ) : (
+            <TouchableOpacity
+              onPress={() => setNav({ screen: "list" })}
+              hitSlop={{ top: 8, bottom: 8, left: 8, right: 16 }}
+            >
+              <Text style={[styles.navBtn, { color: accentColor }]}>← Back</Text>
+            </TouchableOpacity>
+          )}
+        </View>
+
+        {/* ── Scrollable body ───────────────────────────── */}
+        <BottomSheetScrollView
+          style={styles.scrollView}
+          contentContainerStyle={styles.scrollBody}
+          keyboardShouldPersistTaps="handled"
+        >
+          {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" })}
+            />
+          )}
+        </BottomSheetScrollView>
+      </BottomSheetView>
     </BottomSheet>
   );
 }
 
-// ─── FeedList ─────────────────────────────────────────────────────────────────
+// ─── FeedListBody ─────────────────────────────────────────────────────────────
 
-function FeedList({
-  p, accent, onSelect, onCreate,
+function FeedListBody({
+  p, accent, onSelect,
 }: {
   p: Palette; accent: string;
   onSelect: (id: string) => void;
-  onCreate: () => void;
 }) {
-  const { feedItems, vote } = useUpstep();
+  const { feedItems, feedLoading, vote } = useUpstep();
 
-  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>
+  if (feedLoading) {
+    return (
+      <View style={styles.centered}>
+        <ActivityIndicator color={accent} />
+      </View>
+    );
+  }
 
-      <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>
-    </>
+  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 (
+    <View style={styles.listPad}>
+      {feedItems.map((f) => (
+        <FeedCard
+          key={f.id}
+          item={f}
+          p={p}
+          accent={accent}
+          onPress={() => onSelect(f.id)}
+          onVote={() => vote(f.id, "UP")}
+        />
+      ))}
+    </View>
   );
 }
 
@@ -150,7 +224,6 @@ function FeedCard({
 }) {
   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,8 +251,8 @@ 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>
         )}
@@ -184,7 +260,7 @@ function FeedCard({
           <TypeBadge type={item.type} p={p} />
           <StatusDot status={item.status} />
           <Text style={[styles.cardDate, { color: p.textFaint }]}>
-            {formatDate(item.createdAt)}
+            {fmtDate(item.createdAt)}
           </Text>
         </View>
       </View>
@@ -194,26 +270,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 +296,6 @@ function FeedDetail({
     setVoting(true);
     try {
       await vote(item.id, "UP");
-      // Refresh
       const updated = await getItem(feedbackId);
       setItem(updated);
     } finally {
@@ -230,72 +303,62 @@ 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>
+    <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>
 
-      {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>
-
-          {/* 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>
-
-          {/* 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>
+      <Text style={[styles.detailContent, { color: p.textSoft }]}>{item.content}</Text>
+
+      <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>
   );
 }
 
@@ -309,7 +372,7 @@ function CommentBubble({ comment, p, accent }: { comment: Comment; p: Palette; a
           </Text>
         </View>
         <Text style={[styles.commentDate, { color: p.textFaint }]}>
-          {formatDate(comment.createdAt)}
+          {fmtDate(comment.createdAt)}
         </Text>
       </View>
       <Text style={[styles.commentContent, { color: p.textSoft }]}>{comment.content}</Text>
@@ -317,7 +380,7 @@ function CommentBubble({ comment, p, accent }: { comment: Comment; p: Palette; a
   );
 }
 
-// ─── FeedCreate ───────────────────────────────────────────────────────────────
+// ─── FeedCreateBody ───────────────────────────────────────────────────────────
 
 const TYPES: FeedbackType[] = ["BUG", "FEATURE", "GENERAL"];
 const TYPE_LABELS: Record<FeedbackType, string> = {
@@ -326,149 +389,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, 1400);
     } 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: 60 }]}>
+        <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,14 +513,12 @@ 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> = {
+const STATUS_COLOR: Record<string, string> = {
   OPEN: "#b45309",
   IN_PROGRESS: "#1d4ed8",
   DONE: "#15803d",
@@ -495,29 +527,30 @@ const STATUS_COLORS: Record<string, string> = {
 };
 
 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({
-  // Header
+  // Sheet container — fills the sheet, stacks header above scroll
+  sheetContainer: { flex: 1 },
+
   header: {
     flexDirection: "row",
     alignItems: "center",
@@ -527,18 +560,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" },
+  navBtnPlaceholder: { width: 60 },
+  newBtn: { borderRadius: 20, paddingHorizontal: 14, paddingVertical: 7 },
   newBtnText: { color: "#fff", fontSize: 13, fontWeight: "700" },
 
-  // List
-  listBody: { padding: 16, paddingBottom: 40 },
+  scrollView: { flex: 1 },
+  scrollBody: { flexGrow: 1 },
 
-  // Card
+  // List
+  listPad: { padding: 16, paddingBottom: 40 },
+  centered: { alignItems: "center", justifyContent: "center", paddingVertical: 60 },
+  emptyText: { fontSize: 14 },
   card: {
     flexDirection: "row",
     alignItems: "center",
@@ -560,41 +593,30 @@ 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: { padding: 20, paddingBottom: 50 },
   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 +625,38 @@ const styles = StyleSheet.create({
   commentContent: { fontSize: 14, lineHeight: 21 },
 
   // Create
-  createBody: { padding: 20, paddingBottom: 50 },
+  createPad: { padding: 20, paddingBottom: 50 },
   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" },
 });