@upstep/react-native 0.3.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@upstep/react-native",
-  "version": "0.3.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.2.0"
+    "@upstep/types": "0.5.0"
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": ">=4",

package/src/FeedbackButton.tsx

@@ -8,14 +8,19 @@ interface Props {
 }
 
 export function FeedbackButton({ position = "bottom-right", label = "Feedback" }: Props) {
-  const { openSheet } = useUpstep();
+  const { openSheet, accentColor } = useUpstep();
 
   return (
     <TouchableOpacity
       onPress={openSheet}
-      style={[styles.btn, position === "bottom-left" ? styles.left : styles.right]}
+      style={[
+        styles.btn,
+        { backgroundColor: accentColor },
+        position === "bottom-left" ? styles.left : styles.right,
+      ]}
       activeOpacity={0.85}
     >
+      <Text style={styles.icon}>💬</Text>
       <Text style={styles.label}>{label}</Text>
     </TouchableOpacity>
   );
@@ -25,18 +30,21 @@ const styles = StyleSheet.create({
   btn: {
     position: "absolute",
     bottom: 24,
-    backgroundColor: "#6366f1",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
     borderRadius: 9999,
     paddingVertical: 12,
-    paddingHorizontal: 20,
+    paddingHorizontal: 18,
     shadowColor: "#000",
-    shadowOffset: { width: 0, height: 4 },
+    shadowOffset: { width: 0, height: 5 },
     shadowOpacity: 0.2,
-    shadowRadius: 6,
+    shadowRadius: 10,
     elevation: 6,
     zIndex: 100,
   },
   right: { right: 20 },
   left: { left: 20 },
+  icon: { fontSize: 14 },
   label: { color: "#fff", fontSize: 14, fontWeight: "600" },
 });

package/src/FeedbackContext.tsx

@@ -7,21 +7,32 @@ 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";
 
+const DEFAULT_ACCENT = "#D97757";
+
 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>;
+  accentColor: string;
+  theme: "light" | "dark" | "auto";
 }
 
 const UpstepContext = createContext<UpstepContextValue | null>(null);
@@ -34,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
@@ -50,26 +60,45 @@ 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 }}>
+    <UpstepContext.Provider
+      value={{
+        client, feedItems, loadFeed, submit, vote, getItem,
+        openSheet, identify, sheetRef,
+        accentColor: config.accentColor ?? DEFAULT_ACCENT,
+        theme: config.theme ?? "auto",
+      }}
+    >
       {children}
     </UpstepContext.Provider>
   );

package/src/FeedbackSheet.tsx

@@ -1,43 +1,78 @@
-import React, { useState, useMemo } from "react";
+import React, { useState, useMemo, useCallback } from "react";
 import {
   View,
   Text,
   TextInput,
   TouchableOpacity,
   StyleSheet,
-  ScrollView,
   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";
+// ─── Theme ────────────────────────────────────────────────────────────────────
 
-const TYPES: FeedbackType[] = ["BUG", "FEATURE", "GENERAL"];
+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 ───────────────────────────────────────────────────────────────
+
+type Nav =
+  | { screen: "list" }
+  | { screen: "detail"; feedbackId: string }
+  | { screen: "create" };
+
+// ─── FeedbackSheet ────────────────────────────────────────────────────────────
 
 export function FeedbackSheet() {
-  const { feedItems, submit, vote, sheetRef } = useUpstep();
-  const snapPoints = useMemo(() => ["75%", "95%"], []);
-  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 { sheetRef, accentColor, theme } = useUpstep();
+  const scheme = useColorScheme();
+  const isDark = theme === "dark" || (theme === "auto" && scheme === "dark");
+  const p = isDark ? DARK : LIGHT;
 
-  async function handleSubmit() {
-    if (!content.trim() || loading) return;
-    setLoading(true);
-    try {
-      await submit(content.trim(), type);
-      setContent("");
-      setMsg("Thanks for your feedback!");
-    } catch {
-      setMsg("Something went wrong. Please try again.");
-    } finally {
-      setLoading(false);
-    }
-  }
+  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" }), []);
 
   return (
     <BottomSheet
@@ -45,135 +80,561 @@ export function FeedbackSheet() {
       index={-1}
       snapPoints={snapPoints}
       enablePanDownToClose
-      backgroundStyle={styles.sheet}
-      handleIndicatorStyle={styles.handle}
+      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}>Share feedback</Text>
+      {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>
+  );
+}
+
+// ─── 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>
 
-      <View style={styles.tabs}>
-        {(["submit", "feed"] as Tab[]).map((t) => (
-          <TouchableOpacity
-            key={t}
-            onPress={() => setTab(t)}
-            style={[styles.tab, tab === t && styles.activeTab]}
-          >
-            <Text style={[styles.tabText, tab === t && styles.activeTabText]}>
-              {t === "submit" ? "Submit" : "Votes & Ideas"}
-            </Text>
-          </TouchableOpacity>
-        ))}
+      <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 FeedCard({
+  item, p, accent, onPress, onVote,
+}: {
+  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 (
+    <TouchableOpacity
+      onPress={onPress}
+      activeOpacity={0.85}
+      style={[styles.card, { borderColor: p.border, backgroundColor: p.bg }]}
+    >
+      <TouchableOpacity
+        onPress={onVote}
+        activeOpacity={0.8}
+        hitSlop={{ top: 8, bottom: 8, left: 8, right: 4 }}
+        style={[
+          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.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>
 
-      {tab === "submit" ? (
-        <BottomSheetView style={styles.body}>
-          <TextInput
-            value={content}
-            onChangeText={setContent}
-            placeholder="What's on your mind?"
-            placeholderTextColor="#9ca3af"
-            multiline
-            maxLength={2000}
-            style={styles.textarea}
-          />
-          <View style={styles.typeRow}>
-            {TYPES.map((t) => (
-              <TouchableOpacity
-                key={t}
-                onPress={() => setType(t)}
-                style={[styles.typeBtn, type === t && styles.selectedTypeBtn]}
-              >
-                <Text style={[styles.typeBtnText, type === t && styles.selectedTypeBtnText]}>
-                  {t.charAt(0) + t.slice(1).toLowerCase()}
-                </Text>
-              </TouchableOpacity>
-            ))}
+      <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>
+
+          {/* Description */}
+          <Text style={[styles.detailContent, { color: p.textSoft }]}>{item.content}</Text>
+
+          {/* Upvote */}
           <TouchableOpacity
-            onPress={handleSubmit}
-            disabled={loading || !content.trim()}
-            style={[styles.submitBtn, (loading || !content.trim()) && styles.disabledBtn]}
+            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,
+              },
+            ]}
           >
-            {loading ? (
-              <ActivityIndicator color="#fff" />
+            {voting ? (
+              <ActivityIndicator size="small" color={accent} />
             ) : (
-              <Text style={styles.submitBtnText}>Send feedback</Text>
+              <>
+                <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>
-          {msg ? <Text style={styles.msgText}>{msg}</Text> : null}
-        </BottomSheetView>
-      ) : (
-        <BottomSheetScrollView contentContainerStyle={styles.body}>
-          {feedItems.length === 0 ? (
-            <Text style={styles.emptyText}>No feedback yet. Be the first!</Text>
-          ) : (
-            feedItems.map((f) => (
-              <FeedItem key={f.id} item={f} onVote={vote} />
-            ))
+
+          {/* 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>
       )}
-    </BottomSheet>
+    </>
   );
 }
 
-function FeedItem({ item, onVote }: { item: Feedback; onVote: (id: string, v: "UP" | "DOWN") => void }) {
+function CommentBubble({ comment, p, accent }: { comment: Comment; p: Palette; accent: string }) {
   return (
-    <View style={styles.feedItem}>
-      <Text style={styles.feedContent}>{item.content}</Text>
-      <View style={styles.feedMeta}>
-        <View style={[styles.badge, item.type === "BUG" ? styles.badgeBug : item.type === "FEATURE" ? styles.badgeFeature : styles.badgeGeneral]}>
-          <Text style={[styles.badgeText, item.type === "BUG" ? { color: "#dc2626" } : item.type === "FEATURE" ? { color: "#2563eb" } : { color: "#6b7280" }]}>
-            {item.type}
+    <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.feedDate}>{new Date(item.createdAt).toLocaleDateString()}</Text>
+        <Text style={[styles.commentDate, { color: p.textFaint }]}>
+          {formatDate(comment.createdAt)}
+        </Text>
       </View>
-      <View style={styles.voteRow}>
-        <TouchableOpacity style={styles.voteBtn} onPress={() => onVote(item.id, "UP")}>
-          <Text style={styles.voteBtnText}>▲ {item.upvotes}</Text>
-        </TouchableOpacity>
-        <TouchableOpacity style={styles.voteBtn} onPress={() => onVote(item.id, "DOWN")}>
-          <Text style={styles.voteBtnText}>▼ {item.downvotes}</Text>
+      <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>
-      </View>
+        <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({
-  sheet: { backgroundColor: "#fff", borderRadius: 16 },
-  handle: { backgroundColor: "#d1d5db", width: 36, height: 4 },
-  header: { paddingHorizontal: 20, paddingTop: 8, paddingBottom: 12, borderBottomWidth: 1, borderBottomColor: "#e5e7eb" },
-  title: { fontSize: 16, fontWeight: "700", color: "#111827" },
-  tabs: { flexDirection: "row", borderBottomWidth: 1, borderBottomColor: "#e5e7eb" },
-  tab: { flex: 1, paddingVertical: 12, alignItems: "center", borderBottomWidth: 2, borderBottomColor: "transparent" },
-  activeTab: { borderBottomColor: "#6366f1" },
-  tabText: { fontSize: 13, fontWeight: "500", color: "#6b7280" },
-  activeTabText: { color: "#6366f1" },
-  body: { padding: 16 },
-  textarea: { borderWidth: 1, borderColor: "#d1d5db", borderRadius: 8, padding: 10, fontSize: 14, minHeight: 100, textAlignVertical: "top", color: "#111827" },
-  typeRow: { flexDirection: "row", gap: 8, marginVertical: 10 },
-  typeBtn: { paddingVertical: 5, paddingHorizontal: 12, borderRadius: 9999, borderWidth: 1, borderColor: "#d1d5db" },
-  selectedTypeBtn: { backgroundColor: "#6366f1", borderColor: "#6366f1" },
-  typeBtnText: { fontSize: 12, color: "#374151" },
-  selectedTypeBtnText: { color: "#fff" },
-  submitBtn: { backgroundColor: "#6366f1", borderRadius: 8, padding: 12, alignItems: "center", marginTop: 8 },
-  disabledBtn: { opacity: 0.5 },
-  submitBtnText: { color: "#fff", fontSize: 14, fontWeight: "600" },
-  msgText: { textAlign: "center", fontSize: 13, color: "#6b7280", marginTop: 8 },
-  emptyText: { textAlign: "center", color: "#9ca3af", fontSize: 14, paddingVertical: 32 },
-  feedItem: { paddingVertical: 12, borderBottomWidth: 1, borderBottomColor: "#f3f4f6" },
-  feedContent: { fontSize: 14, color: "#1f2937", marginBottom: 6 },
-  feedMeta: { flexDirection: "row", alignItems: "center", gap: 8, marginBottom: 8 },
-  badge: { paddingHorizontal: 8, paddingVertical: 2, borderRadius: 9999 },
-  badgeBug: { backgroundColor: "#fee2e2" },
-  badgeFeature: { backgroundColor: "#dbeafe" },
-  badgeGeneral: { backgroundColor: "#f3f4f6" },
-  badgeText: { fontSize: 11, fontWeight: "500" },
-  feedDate: { fontSize: 11, color: "#9ca3af" },
-  voteRow: { flexDirection: "row", gap: 8 },
-  voteBtn: { flexDirection: "row", alignItems: "center", paddingHorizontal: 10, paddingVertical: 4, borderRadius: 9999, borderWidth: 1, borderColor: "#e5e7eb" },
-  voteBtnText: { fontSize: 12, color: "#374151" },
+  // 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,
+  },
+  voteArrow: { fontSize: 11, lineHeight: 13 },
+  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",