@appsupportkit/support-sdk 0.1.1 → 0.2.0

package/src/components/primitives.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef, type ReactNode } from 'react';
 import {
   Animated,
+  Easing,
   Pressable,
   Text,
   View,
@@ -25,6 +26,38 @@ export function typeColor(type: QueryType, theme: SupportTheme): string {
   return theme.colors.statusOpen;
 }
 
+export function typeBackground(type: QueryType, theme: SupportTheme): string {
+  if (type === 'bug_report') return theme.colors.statusDangerBg;
+  if (type === 'feature_request') return theme.colors.statusProgressBg;
+  return theme.colors.statusOpenBg;
+}
+
+/** Tinted round chip holding a type icon — the anchor of every list row. */
+export function TypeGlyph({
+  type,
+  theme,
+  size = 36,
+}: {
+  type: QueryType;
+  theme: SupportTheme;
+  size?: number;
+}) {
+  return (
+    <View
+      style={{
+        width: size,
+        height: size,
+        borderRadius: size / 2,
+        backgroundColor: typeBackground(type, theme),
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      {typeIcon(type, typeColor(type, theme), size * 0.44)}
+    </View>
+  );
+}
+
 /** Status dot + label — same visual language as the dashboard. */
 export function StatusIndicator({
   status,
@@ -47,7 +80,7 @@ export function StatusIndicator({
   );
 }
 
-/** Pressable row with the standard hover/press wash. */
+/** Pressable row with the standard press wash. */
 export function PressableRow({
   onPress,
   children,
@@ -76,30 +109,83 @@ export function PressableRow({
   );
 }
 
+/** Circular icon button — back, close, send. */
+export function IconButton({
+  onPress,
+  children,
+  theme,
+  accessibilityLabel,
+  size = 34,
+  disabled,
+  tone = 'surface',
+}: {
+  onPress: () => void;
+  children: ReactNode;
+  theme: SupportTheme;
+  accessibilityLabel: string;
+  size?: number;
+  disabled?: boolean;
+  tone?: 'surface' | 'accent';
+}) {
+  const accent = tone === 'accent';
+  return (
+    <Pressable
+      onPress={onPress}
+      disabled={disabled}
+      hitSlop={6}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      style={({ pressed }) => ({
+        width: size,
+        height: size,
+        borderRadius: size / 2,
+        alignItems: 'center',
+        justifyContent: 'center',
+        opacity: disabled ? 0.45 : 1,
+        backgroundColor: accent
+          ? pressed
+            ? theme.colors.accentHover
+            : theme.colors.accent
+          : pressed
+            ? theme.colors.surfaceActive
+            : theme.colors.surface,
+        borderWidth: accent ? 0 : 1,
+        borderColor: theme.colors.border,
+      })}
+    >
+      {children}
+    </Pressable>
+  );
+}
+
 export function PrimaryButton({
   label,
   onPress,
   disabled,
   theme,
+  fullWidth,
 }: {
   label: string;
   onPress: () => void;
   disabled?: boolean;
   theme: SupportTheme;
+  fullWidth?: boolean;
 }) {
   return (
     <Pressable
       onPress={onPress}
       disabled={disabled}
       accessibilityRole="button"
+      accessibilityState={{ disabled: Boolean(disabled) }}
       style={({ pressed }) => ({
-        height: 36,
-        paddingHorizontal: 14,
+        height: 44,
+        alignSelf: fullWidth ? 'stretch' : 'flex-start',
+        paddingHorizontal: 18,
         borderRadius: theme.radii.control,
         backgroundColor: pressed
           ? theme.colors.accentHover
           : theme.colors.accent,
-        opacity: disabled ? 0.5 : 1,
+        opacity: disabled ? 0.45 : 1,
         alignItems: 'center',
         justifyContent: 'center',
       })}
@@ -107,8 +193,9 @@ export function PrimaryButton({
       <Text
         style={{
           color: theme.colors.accentForeground,
-          fontSize: 13,
-          fontWeight: '500',
+          fontSize: 14,
+          fontWeight: '600',
+          letterSpacing: -0.1,
         }}
       >
         {label}
@@ -131,8 +218,8 @@ export function SecondaryButton({
       onPress={onPress}
       accessibilityRole="button"
       style={({ pressed }) => ({
-        height: 32,
-        paddingHorizontal: 12,
+        height: 38,
+        paddingHorizontal: 16,
         borderRadius: theme.radii.control,
         borderWidth: 1,
         borderColor: theme.colors.border,
@@ -143,29 +230,118 @@ export function SecondaryButton({
         justifyContent: 'center',
       })}
     >
-      <Text style={{ color: theme.colors.textPrimary, fontSize: 12, fontWeight: '500' }}>
+      <Text style={{ color: theme.colors.textPrimary, fontSize: 13, fontWeight: '500' }}>
         {label}
       </Text>
     </Pressable>
   );
 }
 
+/** The count pill on a thread row. */
+export function UnreadPill({
+  count,
+  theme,
+}: {
+  count: number;
+  theme: SupportTheme;
+}) {
+  return (
+    <View
+      style={{
+        minWidth: 20,
+        height: 20,
+        paddingHorizontal: 6,
+        borderRadius: theme.radii.pill,
+        backgroundColor: theme.colors.accent,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <Text
+        style={{
+          fontSize: 11,
+          lineHeight: 14,
+          fontWeight: '700',
+          color: theme.colors.accentForeground,
+          fontVariant: ['tabular-nums'],
+        }}
+      >
+        {count > 99 ? '99+' : count}
+      </Text>
+    </View>
+  );
+}
+
+export function SectionLabel({
+  children,
+  theme,
+  style,
+}: {
+  children: ReactNode;
+  theme: SupportTheme;
+  style?: StyleProp<TextStyle>;
+}) {
+  return (
+    <Text
+      style={[
+        {
+          fontSize: 11,
+          fontWeight: '600',
+          textTransform: 'uppercase',
+          letterSpacing: 0.6,
+          color: theme.colors.textTertiary,
+        },
+        style,
+      ]}
+    >
+      {children}
+    </Text>
+  );
+}
+
 /** Small muted icon + one line — no illustrations. */
 export function EmptyState({
   message,
+  hint,
   theme,
   icon,
 }: {
   message: string;
+  hint?: string;
   theme: SupportTheme;
   icon?: ReactNode;
 }) {
   return (
-    <View style={{ alignItems: 'center', paddingVertical: 40, gap: 8 }}>
-      {icon ?? <ChatIcon color={theme.colors.textTertiary} size={16} />}
-      <Text style={{ fontSize: 13, color: theme.colors.textSecondary }}>
+    <View style={{ alignItems: 'center', paddingVertical: 44, paddingHorizontal: 32, gap: 10 }}>
+      <View
+        style={{
+          width: 44,
+          height: 44,
+          borderRadius: 22,
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: theme.colors.surface,
+          borderWidth: 1,
+          borderColor: theme.colors.border,
+        }}
+      >
+        {icon ?? <ChatIcon color={theme.colors.textTertiary} size={18} />}
+      </View>
+      <Text style={{ fontSize: 15, fontWeight: '600', color: theme.colors.textPrimary }}>
         {message}
       </Text>
+      {hint !== undefined && (
+        <Text
+          style={{
+            fontSize: 13,
+            lineHeight: 19,
+            color: theme.colors.textSecondary,
+            textAlign: 'center',
+          }}
+        >
+          {hint}
+        </Text>
+      )}
     </View>
   );
 }
@@ -181,11 +357,11 @@ export function ErrorState({
   theme: SupportTheme;
 }) {
   return (
-    <View style={{ alignItems: 'center', paddingVertical: 32, gap: 10 }}>
-      <Text style={{ fontSize: 13, color: theme.colors.textSecondary }}>
+    <View style={{ alignItems: 'center', paddingVertical: 40, gap: 12 }}>
+      <Text style={{ fontSize: 14, color: theme.colors.textSecondary }}>
         {message}
       </Text>
-      <SecondaryButton label="Retry" onPress={onRetry} theme={theme} />
+      <SecondaryButton label="Try again" onPress={onRetry} theme={theme} />
     </View>
   );
 }
@@ -195,26 +371,30 @@ export function SkeletonBlock({
   width,
   height,
   theme,
+  radius,
   style,
 }: {
   width: number | `${number}%`;
   height: number;
   theme: SupportTheme;
+  radius?: number;
   style?: StyleProp<ViewStyle>;
 }) {
-  const opacity = useRef(new Animated.Value(0.5)).current;
+  const opacity = useRef(new Animated.Value(0.4)).current;
 
   useEffect(() => {
     const loop = Animated.loop(
       Animated.sequence([
         Animated.timing(opacity, {
-          toValue: 1,
-          duration: 600,
+          toValue: 0.9,
+          duration: 700,
+          easing: Easing.inOut(Easing.quad),
           useNativeDriver: true,
         }),
         Animated.timing(opacity, {
-          toValue: 0.5,
-          duration: 600,
+          toValue: 0.4,
+          duration: 700,
+          easing: Easing.inOut(Easing.quad),
           useNativeDriver: true,
         }),
       ]),
@@ -229,7 +409,7 @@ export function SkeletonBlock({
         {
           width,
           height,
-          borderRadius: theme.radii.control,
+          borderRadius: radius ?? theme.radii.control,
           backgroundColor: theme.colors.surfaceActive,
           opacity,
         },
@@ -241,22 +421,29 @@ export function SkeletonBlock({
 
 export const textStyles = {
   title: (theme: SupportTheme): TextStyle => ({
-    fontSize: 16,
+    fontSize: 19,
+    fontWeight: '700',
+    letterSpacing: -0.4,
+    color: theme.colors.textPrimary,
+  }),
+  heading: (theme: SupportTheme): TextStyle => ({
+    fontSize: 15,
     fontWeight: '600',
     letterSpacing: -0.2,
     color: theme.colors.textPrimary,
   }),
   body: (theme: SupportTheme): TextStyle => ({
-    fontSize: 14,
+    fontSize: 15,
     color: theme.colors.textPrimary,
-    lineHeight: 20,
+    lineHeight: 21,
   }),
   secondary: (theme: SupportTheme): TextStyle => ({
     fontSize: 13,
+    lineHeight: 19,
     color: theme.colors.textSecondary,
   }),
   meta: (theme: SupportTheme): TextStyle => ({
-    fontSize: 11,
+    fontSize: 11.5,
     color: theme.colors.textTertiary,
     fontVariant: ['tabular-nums'],
   }),
@@ -270,27 +457,21 @@ export function TypeChipView({
   theme: SupportTheme;
 }) {
   const color = typeColor(type, theme);
-  const bg =
-    type === 'bug_report'
-      ? theme.colors.statusDangerBg
-      : type === 'feature_request'
-        ? theme.colors.statusProgressBg
-        : theme.colors.statusOpenBg;
   return (
     <View
       style={{
         flexDirection: 'row',
         alignItems: 'center',
         gap: 5,
-        paddingHorizontal: 6,
-        paddingVertical: 2,
-        borderRadius: theme.radii.control,
-        backgroundColor: bg,
+        paddingHorizontal: 8,
+        paddingVertical: 4,
+        borderRadius: theme.radii.pill,
+        backgroundColor: typeBackground(type, theme),
         alignSelf: 'flex-start',
       }}
     >
       {typeIcon(type, color, 11)}
-      <Text style={{ fontSize: 11, fontWeight: '500', color }}>
+      <Text style={{ fontSize: 11.5, fontWeight: '600', color }}>
         {QUERY_TYPE_LABEL[type]}
       </Text>
     </View>

package/src/components/screens/ComposeScreen.tsx

@@ -1,10 +1,77 @@
-import { useState } from 'react';
-import { KeyboardAvoidingView, Platform, Text, TextInput, View } from 'react-native';
+import { useEffect, useRef, useState } from 'react';
+import {
+  Animated,
+  Easing,
+  KeyboardAvoidingView,
+  Platform,
+  Text,
+  TextInput,
+  View,
+} from 'react-native';
 import type { SupportTheme } from '../../theme';
 import type { QueryType } from '../../types';
 import { QUERY_TYPE_LABEL, USER_MESSAGE_MAX, USER_MESSAGE_MIN } from '../../types';
 import { CheckIcon, Chevron } from '../icons';
-import { PressableRow, PrimaryButton, textStyles } from '../primitives';
+import {
+  IconButton,
+  PrimaryButton,
+  textStyles,
+  TypeGlyph,
+} from '../primitives';
+
+const PROMPT: Record<QueryType, string> = {
+  feedback: 'What should we know?',
+  feature_request: 'What would you like to see?',
+  bug_report: 'What happened, and what did you expect?',
+};
+
+const SUBTITLE: Record<QueryType, string> = {
+  feedback: 'Good or bad — it goes straight to the team.',
+  feature_request: 'Tell us what you are trying to do.',
+  bug_report: 'Steps, screen, and what you expected all help.',
+};
+
+/** Scales in once on success — the only celebratory motion in the SDK. */
+function SentMark({ theme }: { theme: SupportTheme }) {
+  const scale = useRef(new Animated.Value(0.6)).current;
+  const opacity = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.parallel([
+      Animated.timing(scale, {
+        toValue: 1,
+        duration: 320,
+        easing: Easing.bezier(0.16, 1, 0.3, 1),
+        useNativeDriver: true,
+      }),
+      Animated.timing(opacity, {
+        toValue: 1,
+        duration: 200,
+        easing: Easing.out(Easing.cubic),
+        useNativeDriver: true,
+      }),
+    ]).start();
+  }, [scale, opacity]);
+
+  return (
+    <Animated.View
+      style={{
+        width: 56,
+        height: 56,
+        borderRadius: 28,
+        backgroundColor: theme.colors.statusResolvedBg,
+        borderWidth: 1,
+        borderColor: theme.colors.statusResolved,
+        alignItems: 'center',
+        justifyContent: 'center',
+        opacity,
+        transform: [{ scale }],
+      }}
+    >
+      <CheckIcon color={theme.colors.statusResolved} size={20} />
+    </Animated.View>
+  );
+}
 
 export function ComposeScreen({
   theme,
@@ -27,6 +94,7 @@ export function ComposeScreen({
   const valid =
     trimmed.length >= USER_MESSAGE_MIN && trimmed.length <= USER_MESSAGE_MAX;
   const overLimit = message.length > USER_MESSAGE_MAX;
+  const tooShort = trimmed.length > 0 && trimmed.length < USER_MESSAGE_MIN;
 
   async function handleSubmit() {
     if (!valid || submitting) return;
@@ -40,25 +108,23 @@ export function ComposeScreen({
 
   if (sent) {
     return (
-      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', gap: 12, padding: 24 }}>
-        <View
-          style={{
-            width: 40,
-            height: 40,
-            borderRadius: 20,
-            borderWidth: 1,
-            borderColor: theme.colors.statusResolved,
-            alignItems: 'center',
-            justifyContent: 'center',
-          }}
-        >
-          <CheckIcon color={theme.colors.statusResolved} size={14} />
-        </View>
-        <Text style={textStyles.body(theme)}>Sent</Text>
+      <View
+        style={{
+          flex: 1,
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: 14,
+          paddingHorizontal: 32,
+          paddingBottom: 40,
+        }}
+      >
+        <SentMark theme={theme} />
+        <Text style={textStyles.title(theme)}>Sent</Text>
         <Text style={[textStyles.secondary(theme), { textAlign: 'center' }]}>
-          We&apos;ll reply here. You&apos;ll see the thread under Open.
+          We&apos;ll reply right here. You&apos;ll find the conversation under
+          Open, and the button shows a badge when we answer.
         </Text>
-        <View style={{ marginTop: 8 }}>
+        <View style={{ marginTop: 6 }}>
           <PrimaryButton label="Done" onPress={onBack} theme={theme} />
         </View>
       </View>
@@ -70,25 +136,29 @@ export function ComposeScreen({
       style={{ flex: 1 }}
       behavior={Platform.OS === 'ios' ? 'padding' : undefined}
     >
-      {/* Header: back + read-only chosen type */}
+      {/* Header: back + the chosen type */}
       <View
         style={{
           flexDirection: 'row',
           alignItems: 'center',
-          gap: 8,
+          gap: 10,
           paddingHorizontal: 12,
-          paddingBottom: 12,
+          paddingBottom: 14,
         }}
       >
-        <PressableRow
+        <IconButton
           onPress={onBack}
           theme={theme}
-          accessibilityLabel="Back"
-          style={{ padding: 6, borderRadius: theme.radii.control }}
+          accessibilityLabel="Back to conversations"
+          size={32}
         >
           <Chevron color={theme.colors.textSecondary} direction="left" size={12} />
-        </PressableRow>
-        <Text style={textStyles.title(theme)}>{QUERY_TYPE_LABEL[type]}</Text>
+        </IconButton>
+        <TypeGlyph type={type} theme={theme} size={32} />
+        <View style={{ flex: 1, gap: 1 }}>
+          <Text style={textStyles.heading(theme)}>{QUERY_TYPE_LABEL[type]}</Text>
+          <Text style={textStyles.meta(theme)}>{SUBTITLE[type]}</Text>
+        </View>
       </View>
 
       <View style={{ flex: 1, paddingHorizontal: 16 }}>
@@ -100,62 +170,62 @@ export function ComposeScreen({
           }}
           multiline
           autoFocus
-          placeholder={
-            type === 'bug_report'
-              ? 'What happened, and what did you expect?'
-              : type === 'feature_request'
-                ? 'What would you like to see?'
-                : 'What should we know?'
-          }
+          editable={!submitting}
+          placeholder={PROMPT[type]}
           placeholderTextColor={theme.colors.textTertiary}
           style={{
-            minHeight: 120,
-            maxHeight: 220,
+            minHeight: 140,
+            maxHeight: 240,
             borderWidth: 1,
             borderColor: theme.colors.border,
-            borderRadius: theme.radii.control,
+            borderRadius: theme.radii.card,
             backgroundColor: theme.colors.surface,
             color: theme.colors.textPrimary,
-            fontSize: 14,
-            lineHeight: 20,
-            padding: 12,
+            fontSize: 15,
+            lineHeight: 21,
+            padding: 14,
             textAlignVertical: 'top',
           }}
         />
+
         <View
           style={{
             flexDirection: 'row',
             alignItems: 'center',
-            marginTop: 8,
-            gap: 12,
+            gap: 10,
+            paddingTop: 10,
+            paddingHorizontal: 2,
+            minHeight: 20,
           }}
         >
+          {failedMessage !== null ? (
+            <Text style={{ fontSize: 12, color: theme.colors.statusDanger }}>
+              {failedMessage}
+            </Text>
+          ) : tooShort ? (
+            <Text style={textStyles.meta(theme)}>
+              At least {USER_MESSAGE_MIN} characters
+            </Text>
+          ) : null}
           <Text
             style={[
               textStyles.meta(theme),
+              { marginLeft: 'auto' },
               overLimit && { color: theme.colors.statusDanger },
             ]}
           >
             {message.length}/{USER_MESSAGE_MAX}
           </Text>
-          {trimmed.length > 0 && trimmed.length < USER_MESSAGE_MIN && (
-            <Text style={textStyles.meta(theme)}>
-              At least {USER_MESSAGE_MIN} characters
-            </Text>
-          )}
-          {failedMessage !== null && (
-            <Text style={{ fontSize: 11, color: theme.colors.statusDanger }}>
-              {failedMessage}
-            </Text>
-          )}
-          <View style={{ marginLeft: 'auto' }}>
-            <PrimaryButton
-              label={submitting ? 'Sending…' : 'Send'}
-              onPress={handleSubmit}
-              disabled={!valid || submitting}
-              theme={theme}
-            />
-          </View>
+        </View>
+
+        <View style={{ paddingTop: 12 }}>
+          <PrimaryButton
+            label={submitting ? 'Sending…' : 'Send'}
+            onPress={handleSubmit}
+            disabled={!valid || submitting}
+            theme={theme}
+            fullWidth
+          />
         </View>
       </View>
     </KeyboardAvoidingView>