@upstep/react-native 0.4.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@upstep/react-native",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "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";
 
@@ -17,16 +23,15 @@ interface UpstepContextValue {
   client: UpstepApiClient;
   feedItems: Feedback[];
   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";
 }
 
@@ -40,14 +45,13 @@ export function FeedbackProvider({
   const [feedItems, setFeedItems] = useState<Feedback[]>([]);
   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 () => {
     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
@@ -56,28 +60,41 @@ export function FeedbackProvider({
 
   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, 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 } from "react";
 import {
   View,
   Text,
@@ -6,65 +6,73 @@ import {
   TouchableOpacity,
   StyleSheet,
   ActivityIndicator,
+  ScrollView,
   useColorScheme,
+  Platform,
 } from "react-native";
 import BottomSheet, { BottomSheetView, BottomSheetScrollView } from "@gorhom/bottom-sheet";
-import type { Feedback, FeedbackType } from "@upstep/types";
+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;
   bgSoft: string;
+  bgHover: string;
   text: string;
   textSoft: string;
   textFaint: string;
   border: string;
   handle: string;
+  shadow: string;
 }
 
 const LIGHT: Palette = {
-  bg: "#ffffff", bgSoft: "#f6f5f2", text: "#1a1915",
-  textSoft: "#56544d", textFaint: "#9b9890", border: "#e8e6df", handle: "#dad7ce",
+  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", text: "#f5f4f0",
-  textSoft: "#b4b1a8", textFaint: "#7d7a72", border: "#33312c", handle: "#48453f",
+  bg: "#1c1b19",
+  bgSoft: "#262522",
+  bgHover: "#302e2a",
+  text: "#f5f4f0",
+  textSoft: "#b4b1a8",
+  textFaint: "#7d7a72",
+  border: "#33312c",
+  handle: "#48453f",
+  shadow: "#0000003a",
 };
 
+// ─── Navigation ───────────────────────────────────────────────────────────────
+
+type Nav =
+  | { screen: "list" }
+  | { screen: "detail"; feedbackId: string }
+  | { screen: "create" };
+
+// ─── FeedbackSheet ────────────────────────────────────────────────────────────
+
 export function FeedbackSheet() {
-  const { feedItems, submit, vote, sheetRef, accentColor, theme } = useUpstep();
+  const { sheetRef, accentColor, theme } = 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);
-    }
-  }
+  const goList = useCallback(() => setNav({ screen: "list" }), []);
+  const goDetail = useCallback((id: string) => setNav({ screen: "detail", feedbackId: id }), []);
+  const goCreate = useCallback(() => setNav({ screen: "create" }), []);
 
   return (
     <BottomSheet
@@ -74,166 +82,559 @@ export function FeedbackSheet() {
       enablePanDownToClose
       backgroundStyle={{ backgroundColor: p.bg, borderRadius: 24 }}
       handleIndicatorStyle={{ backgroundColor: p.handle, width: 40, height: 4 }}
+      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 (
-            <TouchableOpacity
-              key={t}
-              onPress={() => setTab(t)}
-              activeOpacity={0.8}
-              style={[styles.segmentBtn, active && { backgroundColor: p.bg, shadowOpacity: 0.08 }]}
-            >
-              <Text style={[styles.segmentText, { color: active ? p.text : p.textSoft }]}>
-                {t === "submit" ? "Give feedback" : "Vote on ideas"}
-              </Text>
-            </TouchableOpacity>
-          );
-        })}
-      </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} />
-            ))
-          )}
-        </BottomSheetScrollView>
+      {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>
   );
 }
 
-const BADGE_BG: Record<string, string> = { BUG: "#fdecec", FEATURE: "#e9f0fd" };
-const BADGE_FG: Record<string, string> = { BUG: "#d6453d", FEATURE: "#3b76d6" };
+// ─── FeedList ─────────────────────────────────────────────────────────────────
+
+function FeedList({
+  p, accent, onSelect, onCreate,
+}: {
+  p: Palette; accent: string;
+  onSelect: (id: string) => void;
+  onCreate: () => void;
+}) {
+  const { feedItems, 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>
+
+      <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>
+    </>
+  );
+}
 
-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;
+  const hasDescription = Boolean(item.title);
+
   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 style={styles.cardBody}>
+        <Text style={[styles.cardTitle, { color: p.text }]} numberOfLines={2}>
+          {displayTitle}
+        </Text>
+        {hasDescription && (
+          <Text style={[styles.cardDescription, { 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>
+        </View>
+      </View>
+
+      <Text style={[styles.chevron, { color: p.textFaint }]}>›</Text>
+    </TouchableOpacity>
+  );
+}
+
+// ─── FeedDetail ───────────────────────────────────────────────────────────────
+
+function FeedDetail({
+  p, accent, feedbackId, onBack,
+}: {
+  p: Palette; accent: string; feedbackId: string; onBack: () => void;
+}) {
+  const { vote, getItem } = useUpstep();
+  const [item, setItem] = useState<FeedbackWithComments | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [voting, setVoting] = useState(false);
+
+  React.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");
+      // Refresh
+      const updated = await getItem(feedbackId);
+      setItem(updated);
+    } finally {
+      setVoting(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 }]}>← 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>
-          <Text style={[styles.feedDate, { color: p.textFaint }]}>
-            {new Date(item.createdAt).toLocaleDateString()}
+
+          {/* 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>
+      )}
+    </>
+  );
+}
+
+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 }]}>
+          {formatDate(comment.createdAt)}
+        </Text>
       </View>
+      <Text style={[styles.commentContent, { color: p.textSoft }]}>{comment.content}</Text>
     </View>
   );
 }
 
+// ─── FeedCreate ───────────────────────────────────────────────────────────────
+
+const TYPES: FeedbackType[] = ["BUG", "FEATURE", "GENERAL"];
+const TYPE_LABELS: Record<FeedbackType, string> = {
+  BUG: "Bug report",
+  FEATURE: "Feature request",
+  GENERAL: "General",
+};
+
+function FeedCreate({ p, accent, onBack }: { p: Palette; accent: string; onBack: () => void }) {
+  const { submit } = useUpstep();
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [type, setType] = useState<FeedbackType>("GENERAL");
+  const [loading, setLoading] = useState(false);
+  const [success, setSuccess] = useState(false);
+  const [error, setError] = useState("");
+
+  async function handleSubmit() {
+    if (!title.trim() || loading) return;
+    setLoading(true);
+    setError("");
+    try {
+      await submit(title.trim(), description.trim() || title.trim(), type);
+      setSuccess(true);
+      // Return to list after a moment
+      setTimeout(onBack, 1400);
+    } catch {
+      setError("Something went wrong. Please try again.");
+    } finally {
+      setLoading(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}
+
+            <TouchableOpacity
+              onPress={handleSubmit}
+              disabled={loading || !title.trim()}
+              activeOpacity={0.85}
+              style={[
+                styles.submitBtn,
+                { backgroundColor: accent },
+                (loading || !title.trim()) && styles.submitBtnDisabled,
+              ]}
+            >
+              {loading ? (
+                <ActivityIndicator color="#fff" />
+              ) : (
+                <Text style={styles.submitBtnText}>Submit feedback</Text>
+              )}
+            </TouchableOpacity>
+          </>
+        )}
+      </BottomSheetScrollView>
+    </>
+  );
+}
+
+// ─── Shared sub-components ────────────────────────────────────────────────────
+
+function EmptyState({ p, message }: { p: Palette; message: string }) {
+  return (
+    <View style={styles.empty}>
+      <Text style={[styles.emptyText, { color: p.textFaint }]}>{message}</Text>
+    </View>
+  );
+}
+
+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_COLORS: 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 }]} />;
+}
+
+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>
+    </View>
+  );
+}
+
+function formatDate(iso: string) {
+  const d = new Date(iso);
+  return d.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,
+  // Header
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: 20,
+    paddingVertical: 14,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+  headerTitle: { fontSize: 16, fontWeight: "700", letterSpacing: -0.3 },
+  backBtn: { fontSize: 14, fontWeight: "600" },
+  newBtn: {
+    borderRadius: 20,
+    paddingHorizontal: 14,
+    paddingVertical: 7,
+  },
+  newBtnText: { color: "#fff", fontSize: 13, fontWeight: "700" },
+
+  // List
+  listBody: { padding: 16, paddingBottom: 40 },
+
+  // Card
+  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,
   },
-  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 },
-  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" },
   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 },
+  cardDescription: { 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 },
+  detailTitle: { fontSize: 22, fontWeight: "700", letterSpacing: -0.4, marginBottom: 10, lineHeight: 28 },
+  detailBadgeRow: { 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" },
+
+  // 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,
+  },
+  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
+  createBody: { 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" },
+  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 },
+  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",