@appsupportkit/support-sdk 0.1.2 → 0.3.0

package/src/components/screens/HomeScreen.tsx

@@ -1,17 +1,20 @@
-import { ScrollView, Text, View } from 'react-native';
+import { RefreshControl, ScrollView, Text, View } from 'react-native';
+import type { Translator } from '../../i18n';
+import { LANGUAGE_LABELS, type Language } from '../../i18n/languages';
 import type { SupportTheme } from '../../theme';
 import type { QueryType, Thread } from '../../types';
-import { QUERY_TYPE_LABEL } from '../../types';
 import { relativeTime } from '../../utils';
-import { Chevron, CloseIcon } from '../icons';
+import { Chevron, CloseIcon, GlobeIcon } from '../icons';
 import {
   EmptyState,
   ErrorState,
+  IconButton,
   PressableRow,
+  SectionLabel,
   SkeletonBlock,
   textStyles,
-  typeColor,
-  typeIcon,
+  TypeGlyph,
+  UnreadPill,
 } from '../primitives';
 
 const COMPOSE_TYPES: QueryType[] = ['feedback', 'feature_request', 'bug_report'];
@@ -19,83 +22,158 @@ const COMPOSE_TYPES: QueryType[] = ['feedback', 'feature_request', 'bug_report']
 function ThreadRow({
   thread,
   theme,
+  strings,
   onPress,
+  last,
 }: {
   thread: Thread;
   theme: SupportTheme;
+  strings: Translator;
   onPress: () => void;
+  last: boolean;
 }) {
-  const preview = thread.last_message?.body ?? '';
+  const unread = thread.unread_count > 0;
+  const type = strings.t(`type.${thread.type}`);
+  const preview = thread.last_message?.body ?? strings.t('home.noMessages');
+  const at = thread.last_message?.created_at ?? thread.created_at;
+
   return (
     <PressableRow
       onPress={onPress}
       theme={theme}
-      accessibilityLabel={`${QUERY_TYPE_LABEL[thread.type]} thread`}
+      accessibilityLabel={
+        unread
+          ? strings.t('home.threadUnreadA11y', {
+              type,
+              count: thread.unread_count,
+            })
+          : strings.t('home.threadA11y', { type })
+      }
       style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 12,
         paddingHorizontal: 16,
-        paddingVertical: 10,
-        borderBottomWidth: 1,
+        paddingVertical: 13,
+        borderBottomWidth: last ? 0 : 1,
         borderBottomColor: theme.colors.border,
+        opacity: thread.status === 'resolved' ? 0.75 : 1,
       }}
     >
-      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
-        {thread.unread_count > 0 && (
-          <View
+      <TypeGlyph type={thread.type} theme={theme} size={38} />
+
+      <View style={{ flex: 1, gap: 3 }}>
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+          <Text
+            numberOfLines={1}
             style={{
-              width: 6,
-              height: 6,
-              borderRadius: 3,
-              backgroundColor: theme.colors.accent,
+              flex: 1,
+              fontSize: 14,
+              fontWeight: unread ? '700' : '600',
+              letterSpacing: -0.1,
+              color: theme.colors.textPrimary,
             }}
-          />
-        )}
-        <Text style={{ fontSize: 11, fontWeight: '500', color: typeColor(thread.type, theme) }}>
-          {QUERY_TYPE_LABEL[thread.type]}
-        </Text>
-        <Text style={[textStyles.meta(theme), { marginLeft: 'auto' }]}>
-          {thread.last_message
-            ? relativeTime(thread.last_message.created_at)
-            : relativeTime(thread.created_at)}
-        </Text>
-      </View>
-      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8, marginTop: 3 }}>
-        <Text
-          numberOfLines={1}
-          style={{
-            flex: 1,
-            fontSize: 13,
-            color:
-              thread.unread_count > 0
-                ? theme.colors.textPrimary
-                : theme.colors.textSecondary,
-            fontWeight: thread.unread_count > 0 ? '500' : '400',
-          }}
-        >
-          {preview}
-        </Text>
-        <Chevron color={theme.colors.textTertiary} />
+          >
+            {type}
+          </Text>
+          <Text style={textStyles.meta(theme)}>{relativeTime(at, strings)}</Text>
+        </View>
+
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+          <Text
+            numberOfLines={1}
+            style={{
+              flex: 1,
+              fontSize: 13,
+              lineHeight: 18,
+              color: unread ? theme.colors.textPrimary : theme.colors.textSecondary,
+            }}
+          >
+            {thread.last_message?.sender === 'user'
+              ? `${strings.t('home.you')}: `
+              : ''}
+            {preview}
+          </Text>
+          {unread ? (
+            <UnreadPill count={thread.unread_count} theme={theme} />
+          ) : (
+            <Chevron color={theme.colors.textTertiary} />
+          )}
+        </View>
       </View>
     </PressableRow>
   );
 }
 
+function ThreadGroup({
+  label,
+  threads,
+  theme,
+  strings,
+  onOpenThread,
+}: {
+  label: string;
+  threads: Thread[];
+  theme: SupportTheme;
+  strings: Translator;
+  onOpenThread: (thread: Thread) => void;
+}) {
+  if (threads.length === 0) return null;
+  return (
+    <View style={{ marginTop: 24 }}>
+      <SectionLabel theme={theme} style={{ paddingHorizontal: 16, paddingBottom: 8 }}>
+        {label}
+      </SectionLabel>
+      <View
+        style={{
+          marginHorizontal: 16,
+          borderWidth: 1,
+          borderColor: theme.colors.border,
+          borderRadius: theme.radii.card,
+          backgroundColor: theme.colors.surface,
+          overflow: 'hidden',
+        }}
+      >
+        {threads.map((thread, i) => (
+          <ThreadRow
+            key={thread.id}
+            thread={thread}
+            theme={theme}
+            strings={strings}
+            onPress={() => onOpenThread(thread)}
+            last={i === threads.length - 1}
+          />
+        ))}
+      </View>
+    </View>
+  );
+}
+
 export function HomeScreen({
   theme,
+  strings,
+  language,
   threads,
   loading,
+  refreshing,
   error,
-  onRetry,
+  onRefresh,
   onCompose,
   onOpenThread,
+  onChangeLanguage,
   onClose,
 }: {
   theme: SupportTheme;
+  strings: Translator;
+  language: Language;
   threads: Thread[] | null;
   loading: boolean;
+  refreshing: boolean;
   error: string | null;
-  onRetry: () => void;
+  onRefresh: () => void;
   onCompose: (type: QueryType) => void;
   onOpenThread: (thread: Thread) => void;
+  onChangeLanguage: () => void;
   onClose: () => void;
 }) {
   const open = (threads ?? []).filter((t) => t.status === 'open');
@@ -107,23 +185,42 @@ export function HomeScreen({
       <View
         style={{
           flexDirection: 'row',
-          alignItems: 'center',
+          alignItems: 'flex-start',
           paddingHorizontal: 16,
-          paddingBottom: 12,
+          paddingTop: 4,
+          paddingBottom: 16,
         }}
       >
-        <Text style={textStyles.title(theme)}>Support</Text>
-        <PressableRow
+        <View style={{ flex: 1, gap: 2 }}>
+          <Text style={textStyles.title(theme)}>{strings.t('home.title')}</Text>
+          <Text style={textStyles.secondary(theme)}>
+            {strings.t('home.subtitle')}
+          </Text>
+        </View>
+        <IconButton
           onPress={onClose}
           theme={theme}
-          accessibilityLabel="Close"
-          style={{ marginLeft: 'auto', padding: 6, borderRadius: theme.radii.control }}
+          accessibilityLabel={strings.t('home.close')}
+          size={32}
         >
-          <CloseIcon color={theme.colors.textSecondary} size={13} />
-        </PressableRow>
+          <CloseIcon color={theme.colors.textSecondary} size={12} />
+        </IconButton>
       </View>
 
-      <ScrollView style={{ flex: 1 }}>
+      <ScrollView
+        style={{ flex: 1 }}
+        contentContainerStyle={{ paddingBottom: 24 }}
+        keyboardShouldPersistTaps="handled"
+        refreshControl={
+          <RefreshControl
+            refreshing={refreshing}
+            onRefresh={onRefresh}
+            tintColor={theme.colors.textTertiary}
+            colors={[theme.colors.accent]}
+            progressBackgroundColor={theme.colors.surface}
+          />
+        }
+      >
         {/* Compose actions */}
         <View
           style={{
@@ -140,94 +237,107 @@ export function HomeScreen({
               key={type}
               onPress={() => onCompose(type)}
               theme={theme}
-              accessibilityLabel={`New ${QUERY_TYPE_LABEL[type].toLowerCase()}`}
+              accessibilityLabel={strings.t('home.newA11y', {
+                type: strings.t(`type.${type}`),
+              })}
               style={{
                 flexDirection: 'row',
                 alignItems: 'center',
-                gap: 10,
+                gap: 12,
                 paddingHorizontal: 14,
                 paddingVertical: 12,
                 borderTopWidth: i === 0 ? 0 : 1,
                 borderTopColor: theme.colors.border,
               }}
             >
-              {typeIcon(type, typeColor(type, theme))}
-              <Text style={{ fontSize: 14, color: theme.colors.textPrimary, flex: 1 }}>
-                {QUERY_TYPE_LABEL[type]}
-              </Text>
+              <TypeGlyph type={type} theme={theme} size={34} />
+              <View style={{ flex: 1, gap: 1 }}>
+                <Text style={textStyles.heading(theme)}>
+                  {strings.t(`type.${type}`)}
+                </Text>
+                <Text style={textStyles.meta(theme)}>
+                  {strings.t(`hint.${type}`)}
+                </Text>
+              </View>
               <Chevron color={theme.colors.textTertiary} />
             </PressableRow>
           ))}
         </View>
 
+        {/* Language — a quiet row rather than a settings screen, since it is
+            the only preference the sheet has. */}
+        <View
+          style={{
+            marginTop: 12,
+            marginHorizontal: 16,
+            borderWidth: 1,
+            borderColor: theme.colors.border,
+            borderRadius: theme.radii.card,
+            backgroundColor: theme.colors.surface,
+            overflow: 'hidden',
+          }}
+        >
+          <PressableRow
+            onPress={onChangeLanguage}
+            theme={theme}
+            accessibilityLabel={strings.t('lang.change')}
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              gap: 12,
+              paddingHorizontal: 14,
+              paddingVertical: 11,
+            }}
+          >
+            <GlobeIcon color={theme.colors.textTertiary} size={16} />
+            <Text style={[textStyles.secondary(theme), { flex: 1 }]}>
+              {strings.t('home.language')}
+            </Text>
+            <Text style={textStyles.meta(theme)}>
+              {LANGUAGE_LABELS[language]}
+            </Text>
+            <Chevron color={theme.colors.textTertiary} />
+          </PressableRow>
+        </View>
+
         {/* Threads */}
-        {error && threads === null ? (
+        {error !== null && threads === null ? (
           // Only take over the screen when there's nothing cached to show —
           // a failed background poll shouldn't hide an already-loaded list.
-          <ErrorState message={error} onRetry={onRetry} theme={theme} />
+          <ErrorState
+            message={error}
+            onRetry={onRefresh}
+            theme={theme}
+            strings={strings}
+          />
         ) : loading && threads === null ? (
-          <View style={{ paddingHorizontal: 16, paddingTop: 24, gap: 14 }}>
-            <SkeletonBlock width={80} height={12} theme={theme} />
-            <SkeletonBlock width="100%" height={40} theme={theme} />
-            <SkeletonBlock width="100%" height={40} theme={theme} />
+          <View style={{ paddingHorizontal: 16, paddingTop: 28, gap: 12 }}>
+            <SkeletonBlock width={110} height={11} theme={theme} radius={4} />
+            <SkeletonBlock width="100%" height={64} theme={theme} radius={theme.radii.card} />
+            <SkeletonBlock width="100%" height={64} theme={theme} radius={theme.radii.card} />
           </View>
         ) : (threads ?? []).length === 0 ? (
-          <EmptyState message="No queries yet" theme={theme} />
+          <EmptyState
+            message={strings.t('home.empty')}
+            hint={strings.t('home.emptyHint')}
+            theme={theme}
+          />
         ) : (
           <>
-            {open.length > 0 && (
-              <>
-                <Text
-                  style={{
-                    fontSize: 11,
-                    fontWeight: '500',
-                    textTransform: 'uppercase',
-                    letterSpacing: 0.4,
-                    color: theme.colors.textTertiary,
-                    paddingHorizontal: 16,
-                    paddingTop: 20,
-                    paddingBottom: 6,
-                  }}
-                >
-                  Open
-                </Text>
-                {open.map((t) => (
-                  <ThreadRow
-                    key={t.id}
-                    thread={t}
-                    theme={theme}
-                    onPress={() => onOpenThread(t)}
-                  />
-                ))}
-              </>
-            )}
-            {resolved.length > 0 && (
-              <>
-                <Text
-                  style={{
-                    fontSize: 11,
-                    fontWeight: '500',
-                    textTransform: 'uppercase',
-                    letterSpacing: 0.4,
-                    color: theme.colors.textTertiary,
-                    paddingHorizontal: 16,
-                    paddingTop: 20,
-                    paddingBottom: 6,
-                  }}
-                >
-                  Resolved
-                </Text>
-                {resolved.map((t) => (
-                  <ThreadRow
-                    key={t.id}
-                    thread={t}
-                    theme={theme}
-                    onPress={() => onOpenThread(t)}
-                  />
-                ))}
-              </>
-            )}
-            <View style={{ height: 16 }} />
+            <ThreadGroup
+              label={`${strings.t('home.open')} · ${open.length}`}
+              threads={open}
+              theme={theme}
+              strings={strings}
+              onOpenThread={onOpenThread}
+            />
+            <ThreadGroup
+              label={strings.t('home.resolved')}
+              threads={resolved}
+              theme={theme}
+              strings={strings}
+              onOpenThread={onOpenThread}
+            />
           </>
         )}
       </ScrollView>

package/src/components/screens/LanguageScreen.tsx

@@ -0,0 +1,172 @@
+import { useState } from 'react';
+import { ScrollView, Text, View } from 'react-native';
+import type { Translator } from '../../i18n';
+import {
+  LANGUAGE_LABELS,
+  SUPPORTED_LANGUAGES,
+  type Language,
+} from '../../i18n/languages';
+import type { SupportTheme } from '../../theme';
+import { CheckIcon, Chevron, CloseIcon } from '../icons';
+import {
+  IconButton,
+  PressableRow,
+  PrimaryButton,
+  textStyles,
+} from '../primitives';
+
+/**
+ * The one-time language prompt, and the same screen again whenever the user
+ * changes their mind from the home header.
+ *
+ * Selecting a row re-renders the whole sheet in that language immediately —
+ * the confirmation button is the only way to see what you are choosing before
+ * you commit to it.
+ */
+export function LanguageScreen({
+  theme,
+  strings,
+  selected,
+  onSelect,
+  onConfirm,
+  onBack,
+  onDismiss,
+  saving,
+  error,
+}: {
+  theme: SupportTheme;
+  strings: Translator;
+  selected: Language;
+  onSelect: (language: Language) => void;
+  onConfirm: () => void;
+  /** Absent on first run: there is nothing to go back to yet. */
+  onBack?: () => void;
+  /**
+   * First run only — dismissing without choosing closes the sheet and leaves
+   * the preference unset, so the prompt appears again next time. Saving a
+   * language the user never actually picked would be worse: every message
+   * they write would be translated from the wrong one.
+   */
+  onDismiss?: () => void;
+  saving: boolean;
+  error: string | null;
+}) {
+  // Held so the list doesn't reorder under a finger mid-scroll.
+  const [languages] = useState(() => [...SUPPORTED_LANGUAGES]);
+
+  return (
+    <View style={{ flex: 1 }}>
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'flex-start',
+          paddingHorizontal: 16,
+          paddingTop: 4,
+          paddingBottom: 16,
+          gap: 10,
+        }}
+      >
+        {onBack !== undefined && (
+          <IconButton
+            onPress={onBack}
+            theme={theme}
+            accessibilityLabel={strings.t('compose.back')}
+            size={32}
+          >
+            <Chevron
+              color={theme.colors.textSecondary}
+              direction="left"
+              size={12}
+            />
+          </IconButton>
+        )}
+        <View style={{ flex: 1, gap: 2 }}>
+          <Text style={textStyles.title(theme)}>{strings.t('lang.title')}</Text>
+          <Text style={textStyles.secondary(theme)}>
+            {strings.t('lang.subtitle')}
+          </Text>
+        </View>
+        {onDismiss !== undefined && (
+          <IconButton
+            onPress={onDismiss}
+            theme={theme}
+            accessibilityLabel={strings.t('home.close')}
+            size={32}
+          >
+            <CloseIcon color={theme.colors.textSecondary} size={12} />
+          </IconButton>
+        )}
+      </View>
+
+      <ScrollView style={{ flex: 1 }} contentContainerStyle={{ paddingBottom: 8 }}>
+        <View
+          style={{
+            marginHorizontal: 16,
+            borderWidth: 1,
+            borderColor: theme.colors.border,
+            borderRadius: theme.radii.card,
+            backgroundColor: theme.colors.surface,
+            overflow: 'hidden',
+          }}
+        >
+          {languages.map((language, i) => {
+            const active = language === selected;
+            return (
+              <PressableRow
+                key={language}
+                onPress={() => onSelect(language)}
+                theme={theme}
+                accessibilityLabel={LANGUAGE_LABELS[language]}
+                style={{
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  gap: 12,
+                  paddingHorizontal: 16,
+                  paddingVertical: 13,
+                  borderTopWidth: i === 0 ? 0 : 1,
+                  borderTopColor: theme.colors.border,
+                }}
+              >
+                <Text
+                  style={{
+                    flex: 1,
+                    fontSize: 15,
+                    fontWeight: active ? '600' : '400',
+                    color: theme.colors.textPrimary,
+                  }}
+                >
+                  {LANGUAGE_LABELS[language]}
+                </Text>
+                {active && <CheckIcon color={theme.colors.accent} size={16} />}
+              </PressableRow>
+            );
+          })}
+        </View>
+      </ScrollView>
+
+      <View
+        style={{
+          paddingHorizontal: 16,
+          paddingTop: 12,
+          paddingBottom: 8,
+          gap: 8,
+          borderTopWidth: 1,
+          borderTopColor: theme.colors.border,
+        }}
+      >
+        {error !== null && (
+          <Text style={{ fontSize: 12, color: theme.colors.statusDanger }}>
+            {error}
+          </Text>
+        )}
+        <PrimaryButton
+          label={saving ? strings.t('compose.sending') : strings.t('lang.continue')}
+          onPress={onConfirm}
+          disabled={saving}
+          theme={theme}
+          fullWidth
+        />
+      </View>
+    </View>
+  );
+}