@upstep/react-native 0.4.0 → 0.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@upstep/react-native",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "description": "Upstep feedback SDK for React Native",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -12,7 +12,7 @@
     }
   },
   "dependencies": {
-    "@upstep/types": "0.4.0"
+    "@upstep/types": "0.5.0"
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": ">=4",

package/src/FeedbackContext.tsx

@@ -7,7 +7,13 @@ import React, {
   useRef,
   type ReactNode,
 } from "react";
-import type { Feedback, FeedbackType, UpstepConfig, VoteValue } from "@upstep/types";
+import type {
+  Feedback,
+  FeedbackType,
+  FeedbackWithComments,
+  UpstepConfig,
+  VoteValue,
+} from "@upstep/types";
 import { UpstepApiClient } from "./api";
 import type BottomSheet from "@gorhom/bottom-sheet";
 
@@ -16,17 +22,17 @@ const DEFAULT_ACCENT = "#D97757";
 interface UpstepContextValue {
   client: UpstepApiClient;
   feedItems: Feedback[];
+  feedLoading: boolean;
   loadFeed: () => Promise<void>;
-  submit: (content: string, type?: FeedbackType) => 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.). */
   openSheet: () => void;
   /** Set / update the end-user id at runtime (e.g. after the user logs in). */
   identify: (userId: string | undefined) => void;
   sheetRef: React.RefObject<BottomSheet | null>;
-  /** Accent color from provider config (default applied). */
   accentColor: string;
-  /** Theme mode from provider config (default "auto"). */
   theme: "light" | "dark" | "auto";
 }
 
@@ -38,46 +44,62 @@ 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);
 
-  // Keep the end-user id in sync if `userId` resolves after mount (async login).
   useEffect(() => {
     client.setUserId(config.userId);
   }, [client, config.userId]);
 
   const loadFeed = useCallback(async () => {
+    setFeedLoading(true);
     try {
-      const data = await client.listFeedback({ sort: "votes", limit: 20 });
+      const data = await client.listFeedback({ sort: "votes", limit: 30 });
       setFeedItems(data.items);
     } catch {
       // non-critical
+    } finally {
+      setFeedLoading(false);
     }
   }, [client]);
 
   useEffect(() => { loadFeed(); }, [loadFeed]);
 
-  const submit = useCallback(async (content: string, type?: FeedbackType) => {
-    const payload: Parameters<typeof client.submitFeedback>[0] = { content };
-    if (type !== undefined) payload.type = type;
-    await client.submitFeedback(payload);
-    await loadFeed();
-  }, [client, loadFeed]);
+  const submit = useCallback(
+    async (title: string, content: string, type?: FeedbackType) => {
+      const payload: Parameters<typeof client.submitFeedback>[0] = { content };
+      if (title.trim()) payload.title = title.trim();
+      if (type !== undefined) payload.type = type;
+      await client.submitFeedback(payload);
+      await loadFeed();
+    },
+    [client, loadFeed]
+  );
 
   const vote = useCallback(async (feedbackId: string, value: VoteValue) => {
     await client.vote(feedbackId, value);
     await loadFeed();
   }, [client, loadFeed]);
 
+  const getItem = useCallback(
+    (feedbackId: string) => client.getItem(feedbackId),
+    [client]
+  );
+
   const openSheet = useCallback(() => {
     sheetRef.current?.expand();
   }, []);
 
-  const identify = useCallback((userId: string | undefined) => client.setUserId(userId), [client]);
+  const identify = useCallback(
+    (userId: string | undefined) => client.setUserId(userId),
+    [client]
+  );
 
   return (
     <UpstepContext.Provider
       value={{
-        client, feedItems, loadFeed, submit, vote, openSheet, identify, sheetRef,
+        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 } from "react";
+import React, { useState, useMemo, useCallback, useEffect } from "react";
 import {
   View,
   Text,
@@ -7,17 +7,18 @@ import {
   StyleSheet,
   ActivityIndicator,
   useColorScheme,
+  Platform,
 } from "react-native";
-import BottomSheet, { BottomSheetView, BottomSheetScrollView } from "@gorhom/bottom-sheet";
-import type { Feedback, FeedbackType } from "@upstep/types";
+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";
 
-type Tab = "submit" | "feed";
-
-const TYPES: FeedbackType[] = ["BUG", "FEATURE", "GENERAL"];
-const TYPE_LABELS: Record<FeedbackType, string> = {
-  BUG: "🐞 Bug", FEATURE: "✨ Feature", GENERAL: "💬 General",
-};
+// ─── Theme ────────────────────────────────────────────────────────────────────
 
 interface Palette {
   bg: string;
@@ -30,41 +31,60 @@ interface Palette {
 }
 
 const LIGHT: Palette = {
-  bg: "#ffffff", bgSoft: "#f6f5f2", text: "#1a1915",
-  textSoft: "#56544d", textFaint: "#9b9890", border: "#e8e6df", handle: "#dad7ce",
+  bg: "#ffffff",
+  bgSoft: "#f6f5f2",
+  text: "#1a1915",
+  textSoft: "#56544d",
+  textFaint: "#9b9890",
+  border: "#e8e6df",
+  handle: "#dad7ce",
 };
+
 const DARK: Palette = {
-  bg: "#1c1b19", bgSoft: "#262522", text: "#f5f4f0",
-  textSoft: "#b4b1a8", textFaint: "#7d7a72", border: "#33312c", handle: "#48453f",
+  bg: "#1c1b19",
+  bgSoft: "#262522",
+  text: "#f5f4f0",
+  textSoft: "#b4b1a8",
+  textFaint: "#7d7a72",
+  border: "#33312c",
+  handle: "#48453f",
 };
 
+// ─── Navigation ───────────────────────────────────────────────────────────────
+
+type Nav =
+  | { screen: "list" }
+  | { screen: "detail"; feedbackId: string }
+  | { 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 { feedItems, submit, vote, 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;
-  const accent = accentColor;
 
-  const snapPoints = useMemo(() => ["80%"], []);
-  const [tab, setTab] = useState<Tab>("submit");
-  const [content, setContent] = useState("");
-  const [type, setType] = useState<FeedbackType>("GENERAL");
-  const [msg, setMsg] = useState("");
-  const [loading, setLoading] = useState(false);
+  const [nav, setNav] = useState<Nav>({ screen: "list" });
+  const snapPoints = useMemo(() => ["90%"], []);
 
-  async function handleSubmit() {
-    if (!content.trim() || loading) return;
-    setLoading(true);
-    try {
-      await submit(content.trim(), type);
-      setContent("");
-      setMsg("Thanks — we got your feedback! 🎉");
-    } catch {
-      setMsg("Something went wrong. Please try again.");
-    } finally {
-      setLoading(false);
-    }
-  }
+  // Dim backdrop — tap to close
+  const renderBackdrop = useCallback(
+    (props: BottomSheetBackdropProps) => (
+      <BottomSheetBackdrop
+        {...props}
+        disappearsOnIndex={-1}
+        appearsOnIndex={0}
+        pressBehavior="close"
+      />
+    ),
+    []
+  );
 
   return (
     <BottomSheet
@@ -72,168 +92,571 @@ 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" })}
     >
-      <BottomSheetView style={styles.header}>
-        <Text style={[styles.title, { color: p.text }]}>Share your feedback</Text>
-        <Text style={[styles.subtitle, { color: p.textFaint }]}>
-          Tell us what to build next, or vote on ideas.
-        </Text>
-      </BottomSheetView>
-
-      {/* Segmented control */}
-      <View style={[styles.segment, { backgroundColor: p.bgSoft }]}>
-        {(["submit", "feed"] as Tab[]).map((t) => {
-          const active = tab === t;
-          return (
+      {/*
+        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
-              key={t}
-              onPress={() => setTab(t)}
-              activeOpacity={0.8}
-              style={[styles.segmentBtn, active && { backgroundColor: p.bg, shadowOpacity: 0.08 }]}
+              onPress={() => setNav({ screen: "list" })}
+              hitSlop={{ top: 8, bottom: 8, left: 8, right: 16 }}
             >
-              <Text style={[styles.segmentText, { color: active ? p.text : p.textSoft }]}>
-                {t === "submit" ? "Give feedback" : "Vote on ideas"}
-              </Text>
+              <Text style={[styles.navBtn, { color: accentColor }]}>← Back</Text>
             </TouchableOpacity>
-          );
-        })}
-      </View>
+          )}
+        </View>
 
-      {tab === "submit" ? (
-        <BottomSheetView style={styles.body}>
-          <TextInput
-            value={content}
-            onChangeText={setContent}
-            placeholder="What's on your mind?"
-            placeholderTextColor={p.textFaint}
-            multiline
-            maxLength={2000}
-            style={[styles.textarea, { borderColor: p.border, backgroundColor: p.bgSoft, color: p.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>
-          <TouchableOpacity
-            onPress={handleSubmit}
-            disabled={loading || !content.trim()}
-            activeOpacity={0.85}
-            style={[styles.submitBtn, { backgroundColor: accent }, (loading || !content.trim()) && styles.disabledBtn]}
-          >
-            {loading ? (
-              <ActivityIndicator color="#fff" />
-            ) : (
-              <Text style={styles.submitBtnText}>Send feedback</Text>
-            )}
-          </TouchableOpacity>
-          {msg ? <Text style={[styles.msgText, { color: accent }]}>{msg}</Text> : null}
-        </BottomSheetView>
-      ) : (
-        <BottomSheetScrollView contentContainerStyle={styles.body}>
-          {feedItems.length === 0 ? (
-            <View style={styles.empty}>
-              <Text style={[styles.emptyTitle, { color: p.textSoft }]}>No ideas yet</Text>
-              <Text style={[styles.emptyText, { color: p.textFaint }]}>Be the first to share one.</Text>
-            </View>
-          ) : (
-            feedItems.map((f) => (
-              <FeedItem key={f.id} item={f} onVote={vote} accent={accent} p={p} />
-            ))
+        {/* ── 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>
   );
 }
 
-const BADGE_BG: Record<string, string> = { BUG: "#fdecec", FEATURE: "#e9f0fd" };
-const BADGE_FG: Record<string, string> = { BUG: "#d6453d", FEATURE: "#3b76d6" };
+// ─── FeedListBody ─────────────────────────────────────────────────────────────
+
+function FeedListBody({
+  p, accent, onSelect,
+}: {
+  p: Palette; accent: string;
+  onSelect: (id: string) => void;
+}) {
+  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 (
+    <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>
+  );
+}
 
-function FeedItem({
-  item, onVote, accent, p,
+function FeedCard({
+  item, p, accent, onPress, onVote,
 }: {
-  item: Feedback;
-  onVote: (id: string, v: "UP" | "DOWN") => void;
-  accent: string;
-  p: Palette;
+  item: Feedback; p: Palette; accent: string;
+  onPress: () => void;
+  onVote: () => void;
 }) {
   const voted = item.userVote === "UP";
+  const displayTitle = item.title ?? item.content;
+
   return (
-    <View style={[styles.feedItem, { borderColor: p.border, backgroundColor: p.bg }]}>
+    <TouchableOpacity
+      onPress={onPress}
+      activeOpacity={0.85}
+      style={[styles.card, { borderColor: p.border, backgroundColor: p.bg }]}
+    >
       <TouchableOpacity
-        onPress={() => onVote(item.id, "UP")}
+        onPress={onVote}
         activeOpacity={0.8}
+        hitSlop={{ top: 8, bottom: 8, left: 8, right: 4 }}
         style={[
-          styles.vote,
-          { borderColor: voted ? accent : p.border, backgroundColor: voted ? `${accent}1a` : p.bgSoft },
+          styles.voteBox,
+          {
+            borderColor: voted ? accent : p.border,
+            backgroundColor: voted ? accent + "1a" : p.bgSoft,
+          },
         ]}
       >
         <Text style={[styles.voteArrow, { color: accent }]}>▲</Text>
         <Text style={[styles.voteCount, { color: p.text }]}>{item.upvotes}</Text>
       </TouchableOpacity>
-      <View style={styles.feedMain}>
-        <Text style={[styles.feedContent, { color: p.text }]}>{item.content}</Text>
-        <View style={styles.feedMeta}>
-          <View style={[styles.badge, { backgroundColor: BADGE_BG[item.type] ?? p.bgSoft }]}>
-            <Text style={[styles.badgeText, { color: BADGE_FG[item.type] ?? p.textSoft }]}>{item.type}</Text>
-          </View>
-          <Text style={[styles.feedDate, { color: p.textFaint }]}>
-            {new Date(item.createdAt).toLocaleDateString()}
+
+      <View style={styles.cardBody}>
+        <Text style={[styles.cardTitle, { color: p.text }]} numberOfLines={2}>
+          {displayTitle}
+        </Text>
+        {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 }]}>
+            {fmtDate(item.createdAt)}
           </Text>
         </View>
       </View>
+
+      <Text style={[styles.chevron, { color: p.textFaint }]}>›</Text>
+    </TouchableOpacity>
+  );
+}
+
+// ─── FeedDetailBody ───────────────────────────────────────────────────────────
+
+function FeedDetailBody({
+  p, accent, feedbackId,
+}: {
+  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);
+
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    getItem(feedbackId)
+      .then((data) => { if (!cancelled) { setItem(data); setLoading(false); } })
+      .catch(() => { if (!cancelled) setLoading(false); });
+    return () => { cancelled = true; };
+  }, [feedbackId, getItem]);
+
+  async function handleVote() {
+    if (!item || voting) return;
+    setVoting(true);
+    try {
+      await vote(item.id, "UP");
+      const updated = await getItem(feedbackId);
+      setItem(updated);
+    } finally {
+      setVoting(false);
+    }
+  }
+
+  if (loading || !item) {
+    return (
+      <View style={styles.centered}>
+        <ActivityIndicator color={accent} />
+      </View>
+    );
+  }
+
+  return (
+    <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>
+
+      <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>
   );
 }
 
+function CommentBubble({ comment, p, accent }: { comment: Comment; p: Palette; accent: string }) {
+  return (
+    <View style={[styles.commentBubble, { backgroundColor: p.bgSoft, borderColor: p.border }]}>
+      <View style={styles.commentMeta}>
+        <View style={[styles.ownerBadge, { backgroundColor: accent + "20" }]}>
+          <Text style={[styles.ownerBadgeText, { color: accent }]}>
+            {comment.authorName ?? "Team"}
+          </Text>
+        </View>
+        <Text style={[styles.commentDate, { color: p.textFaint }]}>
+          {fmtDate(comment.createdAt)}
+        </Text>
+      </View>
+      <Text style={[styles.commentContent, { color: p.textSoft }]}>{comment.content}</Text>
+    </View>
+  );
+}
+
+// ─── FeedCreateBody ───────────────────────────────────────────────────────────
+
+const TYPES: FeedbackType[] = ["BUG", "FEATURE", "GENERAL"];
+const TYPE_LABELS: Record<FeedbackType, string> = {
+  BUG: "Bug report",
+  FEATURE: "Feature request",
+  GENERAL: "General",
+};
+
+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 [submitting, setSubmitting] = useState(false);
+  const [success, setSuccess] = useState(false);
+  const [error, setError] = useState("");
+
+  async function handleSubmit() {
+    if (!title.trim() || submitting) return;
+    setSubmitting(true);
+    setError("");
+    try {
+      await submit(title.trim(), description.trim() || title.trim(), type);
+      setSuccess(true);
+      setTimeout(onDone, 1400);
+    } catch {
+      setError("Something went wrong. Please try again.");
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  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
+              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>
+
+      <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}
+
+      <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: "",
+};
+const TYPE_FG: Record<FeedbackType, string> = {
+  BUG: "#d6453d", FEATURE: "#3b76d6", GENERAL: "",
+};
+
+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>
+    </View>
+  );
+}
+
+const STATUS_COLOR: Record<string, string> = {
+  OPEN: "#b45309",
+  IN_PROGRESS: "#1d4ed8",
+  DONE: "#15803d",
+  PENDING: "#ea580c",
+  CLOSED: "#6b7280",
+};
+
+function StatusDot({ status }: { status: string }) {
+  return <View style={[styles.statusDot, { backgroundColor: STATUS_COLOR[status] ?? "#9ca3af" }]} />;
+}
+
+function StatusBadge({ status, p }: { status: string; p: Palette }) {
+  return (
+    <View style={[styles.statusBadge, { backgroundColor: p.bgSoft, borderColor: p.border }]}>
+      <StatusDot status={status} />
+      <Text style={[styles.statusBadgeText, { color: p.textSoft }]}>
+        {status.replace("_", " ")}
+      </Text>
+    </View>
+  );
+}
+
+function fmtDate(iso: string) {
+  return new Date(iso).toLocaleDateString(undefined, { month: "short", day: "numeric" });
+}
+
+// ─── Styles ───────────────────────────────────────────────────────────────────
+
 const styles = StyleSheet.create({
-  header: { paddingHorizontal: 20, paddingTop: 4, paddingBottom: 4 },
-  title: { fontSize: 17, fontWeight: "700", letterSpacing: -0.2 },
-  subtitle: { fontSize: 12.5, marginTop: 3 },
-  segment: { flexDirection: "row", gap: 4, marginHorizontal: 20, marginTop: 16, padding: 4, borderRadius: 12 },
-  segmentBtn: {
-    flex: 1, paddingVertical: 9, alignItems: "center", borderRadius: 9,
-    shadowColor: "#000", shadowOffset: { width: 0, height: 1 }, shadowRadius: 3, shadowOpacity: 0,
+  // Sheet container — fills the sheet, stacks header above scroll
+  sheetContainer: { flex: 1 },
+
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: 20,
+    paddingVertical: 14,
+    borderBottomWidth: StyleSheet.hairlineWidth,
   },
-  segmentText: { fontSize: 13, fontWeight: "600" },
-  body: { padding: 20 },
-  textarea: { borderWidth: 1, borderRadius: 12, padding: 12, fontSize: 14, minHeight: 110, textAlignVertical: "top", lineHeight: 21 },
-  typeRow: { flexDirection: "row", gap: 7, marginVertical: 12 },
-  typeBtn: { flex: 1, paddingVertical: 9, alignItems: "center", borderRadius: 9, borderWidth: 1 },
-  typeBtnText: { fontSize: 12.5, fontWeight: "600" },
-  submitBtn: { borderRadius: 11, padding: 13, alignItems: "center", marginTop: 4 },
-  disabledBtn: { opacity: 0.5 },
-  submitBtnText: { color: "#fff", fontSize: 14, fontWeight: "600" },
-  msgText: { textAlign: "center", fontSize: 13, fontWeight: "500", marginTop: 12 },
-  empty: { alignItems: "center", paddingVertical: 40 },
-  emptyTitle: { fontSize: 15, fontWeight: "600", marginBottom: 4 },
+  headerTitle: { fontSize: 16, fontWeight: "700", letterSpacing: -0.3 },
+  navBtn: { fontSize: 14, fontWeight: "600" },
+  navBtnPlaceholder: { width: 60 },
+  newBtn: { borderRadius: 20, paddingHorizontal: 14, paddingVertical: 7 },
+  newBtnText: { color: "#fff", fontSize: 13, fontWeight: "700" },
+
+  scrollView: { flex: 1 },
+  scrollBody: { flexGrow: 1 },
+
+  // List
+  listPad: { padding: 16, paddingBottom: 40 },
+  centered: { alignItems: "center", justifyContent: "center", paddingVertical: 60 },
   emptyText: { fontSize: 14 },
-  feedItem: { flexDirection: "row", gap: 12, padding: 14, borderWidth: 1, borderRadius: 14, marginBottom: 10 },
-  vote: { minWidth: 46, paddingVertical: 7, borderRadius: 11, borderWidth: 1, alignItems: "center", justifyContent: "center" },
+  card: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderRadius: 16,
+    padding: 14,
+    marginBottom: 10,
+  },
+  voteBox: {
+    alignItems: "center",
+    justifyContent: "center",
+    width: 44,
+    paddingVertical: 8,
+    borderRadius: 11,
+    borderWidth: 1,
+  },
   voteArrow: { fontSize: 11, lineHeight: 13 },
-  voteCount: { fontSize: 14, fontWeight: "700", lineHeight: 17 },
-  feedMain: { flex: 1 },
-  feedContent: { fontSize: 13.5, lineHeight: 20, marginBottom: 8 },
-  feedMeta: { flexDirection: "row", alignItems: "center", gap: 7 },
-  badge: { paddingHorizontal: 8, paddingVertical: 2, borderRadius: 9999 },
-  badgeText: { fontSize: 10.5, fontWeight: "700", letterSpacing: 0.2 },
-  feedDate: { fontSize: 11 },
+  voteCount: { fontSize: 15, fontWeight: "700", lineHeight: 18 },
+  cardBody: { flex: 1 },
+  cardTitle: { fontSize: 14, fontWeight: "600", lineHeight: 19, marginBottom: 2 },
+  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
+  detailPad: { padding: 20, paddingBottom: 50 },
+  detailTitle: { fontSize: 22, fontWeight: "700", letterSpacing: -0.4, marginBottom: 10, lineHeight: 28 },
+  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",
+  },
+  upvoteArrow: { fontSize: 13, lineHeight: 15 },
+  upvoteCount: { fontSize: 18, fontWeight: "700" },
+  upvoteLabel: { fontSize: 13, fontWeight: "500" },
+  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,
+  },
+  commentMeta: { flexDirection: "row", alignItems: "center", gap: 8, marginBottom: 8 },
+  ownerBadge: { borderRadius: 20, paddingHorizontal: 8, paddingVertical: 3 },
+  ownerBadgeText: { fontSize: 11, fontWeight: "700" },
+  commentDate: { fontSize: 11 },
+  commentContent: { fontSize: 14, lineHeight: 21 },
+
+  // Create
+  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,
+    fontSize: 15, marginBottom: 20,
+    ...(Platform.OS === "ios" ? {} : { paddingTop: 12 }),
+  },
+  descInput: {
+    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", 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 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,
+  },
+  statusBadgeText: { fontSize: 10, fontWeight: "600", textTransform: "capitalize" },
 });

package/src/api.ts

@@ -1,6 +1,7 @@
 import type {
   Feedback,
   FeedbackListResponse,
+  FeedbackWithComments,
   SubmitFeedbackPayload,
   UpstepConfig,
   VoteValue,
@@ -31,11 +32,21 @@ export class UpstepApiClient {
     if (params?.cursor) qs.set("cursor", params.cursor);
     if (params?.limit) qs.set("limit", String(params.limit));
     if (params?.sort) qs.set("sort", params.sort);
+    // Pass userId so the server can include the user's own pending items.
+    if (this.userId) qs.set("endUserId", this.userId);
     const res = await fetch(`${this.baseUrl}/api/sdk/feedback?${qs}`, { headers: this.headers() });
     if (!res.ok) throw new Error(`Upstep: ${res.status}`);
     return res.json() as Promise<FeedbackListResponse>;
   }
 
+  async getItem(feedbackId: string): Promise<FeedbackWithComments> {
+    const res = await fetch(`${this.baseUrl}/api/sdk/feedback/${feedbackId}`, {
+      headers: this.headers(),
+    });
+    if (!res.ok) throw new Error(`Upstep: ${res.status}`);
+    return res.json() as Promise<FeedbackWithComments>;
+  }
+
   async submitFeedback(payload: SubmitFeedbackPayload): Promise<Feedback> {
     const res = await fetch(`${this.baseUrl}/api/sdk/feedback`, {
       method: "POST",