feat(vip): Curated-Domain Suggest-UI

In der "Vordefinierte Top-Seiten"-Sektion der VIP-Liste ein
"Seite vorschlagen"-Link → SuggestCuratedSheet: Domain-Eingabe →
POST /api/curated-domains/suggest (Land via Geräte-Region). Response-
Handling: Erfolg / schon vorgeschlagen / approved / rejected / ungültig.

- useCuratedSuggest.ts (neu), SuggestCuratedSheet.tsx (neu)
- VipDomainList.tsx: Suggest-Link in der curated Sub-Sektion + Sheet-State

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

apps/rebreak-native/components/blocker/SuggestCuratedSheet.tsx

@@ -0,0 +1,237 @@
+import { useState } from 'react';
+import {
+  ActivityIndicator,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { useTranslation } from 'react-i18next';
+import { normalizeDomain, isValidDomain } from '../../hooks/useCustomDomains';
+import { resolveVipCountry } from '../../hooks/useWebContentDomains';
+import { useCuratedSuggest } from '../../hooks/useCuratedSuggest';
+import { useColors } from '../../lib/theme';
+import { FormSheet } from '../FormSheet';
+
+type Props = {
+  visible: boolean;
+  onClose: () => void;
+};
+
+export function SuggestCuratedSheet({ visible, onClose }: Props) {
+  const { t } = useTranslation();
+  const colors = useColors();
+  const [input, setInput] = useState('');
+  const { state, suggest, reset } = useCuratedSuggest();
+
+  const loading = state === 'loading';
+  const done = state === 'success';
+
+  const normalized = normalizeDomain(input);
+  const inputValid = isValidDomain(input);
+
+  function close() {
+    setInput('');
+    reset();
+    onClose();
+  }
+
+  async function handleSubmit() {
+    if (!inputValid || loading) return;
+    const country = resolveVipCountry();
+    await suggest(normalized, country);
+  }
+
+  const errorMessage: string | null = (() => {
+    switch (state) {
+      case 'invalid_domain': return t('blocker.suggest_curated_error_invalid_domain');
+      case 'already_suggested': return t('blocker.suggest_curated_error_already_suggested');
+      case 'already_approved': return t('blocker.suggest_curated_error_already_approved');
+      case 'already_rejected': return t('blocker.suggest_curated_error_already_rejected');
+      case 'error': return t('blocker.suggest_curated_error_generic');
+      default: return null;
+    }
+  })();
+
+  const ctaEnabled = inputValid && !loading && !done;
+
+  return (
+    <FormSheet
+      visible={visible}
+      onClose={close}
+      title={t('blocker.suggest_curated_title')}
+      growWithKeyboard
+    >
+      <View style={{ padding: 16, gap: 14 }}>
+        {done ? (
+          <View
+            style={{
+              gap: 10,
+              paddingVertical: 24,
+              alignItems: 'center',
+            }}
+          >
+            <View
+              style={{
+                width: 48,
+                height: 48,
+                borderRadius: 24,
+                backgroundColor: '#dcfce7',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
+              <Ionicons name="checkmark" size={26} color="#16a34a" />
+            </View>
+            <Text
+              style={{
+                fontSize: 15,
+                fontFamily: 'Nunito_700Bold',
+                color: colors.text,
+                textAlign: 'center',
+              }}
+            >
+              {t('blocker.suggest_curated_success_title')}
+            </Text>
+            <Text
+              style={{
+                fontSize: 13,
+                fontFamily: 'Nunito_400Regular',
+                color: colors.textMuted,
+                textAlign: 'center',
+                lineHeight: 18,
+              }}
+            >
+              {t('blocker.suggest_curated_success_body')}
+            </Text>
+            <TouchableOpacity
+              onPress={close}
+              activeOpacity={0.8}
+              style={{
+                marginTop: 8,
+                backgroundColor: colors.brandOrange,
+                borderRadius: 14,
+                paddingVertical: 13,
+                paddingHorizontal: 32,
+              }}
+            >
+              <Text style={{ fontSize: 15, fontFamily: 'Nunito_700Bold', color: '#fff' }}>
+                {t('common.ok')}
+              </Text>
+            </TouchableOpacity>
+          </View>
+        ) : (
+          <>
+            {/* Explanation card */}
+            <View
+              style={{
+                flexDirection: 'row',
+                gap: 10,
+                padding: 12,
+                backgroundColor: colors.surfaceElevated,
+                borderRadius: 12,
+              }}
+            >
+              <Ionicons
+                name="information-circle-outline"
+                size={16}
+                color={colors.textMuted}
+                style={{ marginTop: 1 }}
+              />
+              <Text
+                style={{
+                  flex: 1,
+                  fontSize: 12,
+                  fontFamily: 'Nunito_400Regular',
+                  color: colors.textMuted,
+                  lineHeight: 17,
+                }}
+              >
+                {t('blocker.suggest_curated_explanation')}
+              </Text>
+            </View>
+
+            {/* Input */}
+            <View style={{ gap: 6 }}>
+              <Text style={{ fontSize: 13, fontFamily: 'Nunito_600SemiBold', color: colors.text }}>
+                {t('blocker.suggest_curated_input_label')}
+              </Text>
+              <TextInput
+                value={input}
+                onChangeText={(v) => {
+                  setInput(v);
+                  if (state !== 'idle' && state !== 'loading') reset();
+                }}
+                placeholder={t('blocker.suggest_curated_input_placeholder')}
+                placeholderTextColor={colors.textMuted}
+                keyboardType="url"
+                autoCapitalize="none"
+                autoCorrect={false}
+                style={{
+                  backgroundColor: colors.surfaceElevated,
+                  borderRadius: 10,
+                  padding: 12,
+                  fontSize: 14,
+                  fontFamily: 'Nunito_400Regular',
+                  color: colors.text,
+                  borderWidth: 1,
+                  borderColor: errorMessage ? '#dc2626' : colors.border,
+                }}
+              />
+              {errorMessage && (
+                <Text style={{ fontSize: 12, fontFamily: 'Nunito_400Regular', color: '#dc2626' }}>
+                  {errorMessage}
+                </Text>
+              )}
+            </View>
+
+            {/* CTA row */}
+            <View style={{ flexDirection: 'row', gap: 10, marginTop: 4 }}>
+              <TouchableOpacity onPress={close} activeOpacity={0.8} style={{ flex: 1 }}>
+                <View
+                  style={{
+                    borderRadius: 14,
+                    paddingVertical: 14,
+                    alignItems: 'center',
+                    backgroundColor: colors.surfaceElevated,
+                    borderWidth: 1,
+                    borderColor: colors.border,
+                  }}
+                >
+                  <Text style={{ fontSize: 15, fontFamily: 'Nunito_600SemiBold', color: colors.textMuted }}>
+                    {t('common.cancel')}
+                  </Text>
+                </View>
+              </TouchableOpacity>
+
+              <TouchableOpacity
+                onPress={handleSubmit}
+                disabled={!ctaEnabled}
+                activeOpacity={0.85}
+                style={{ flex: 2 }}
+              >
+                <View
+                  style={{
+                    backgroundColor: ctaEnabled ? colors.brandOrange : '#d4d4d4',
+                    borderRadius: 14,
+                    paddingVertical: 14,
+                    alignItems: 'center',
+                  }}
+                >
+                  {loading ? (
+                    <ActivityIndicator color="#fff" />
+                  ) : (
+                    <Text style={{ fontSize: 15, fontFamily: 'Nunito_700Bold', color: '#fff' }}>
+                      {t('blocker.suggest_curated_cta')}
+                    </Text>
+                  )}
+                </View>
+              </TouchableOpacity>
+            </View>
+          </>
+        )}
+      </View>
+    </FormSheet>
+  );
+}

apps/rebreak-native/components/blocker/VipDomainList.tsx

@@ -8,6 +8,7 @@ import { ConfirmAlert } from '../ConfirmAlert';
 import { SuccessAlert } from '../SuccessAlert';
 import { useWebContentDomains } from '../../hooks/useWebContentDomains';
 import type { CustomDomain, DomainStatus, Tier } from '../../hooks/useCustomDomains';
+import { SuggestCuratedSheet } from './SuggestCuratedSheet';
 
 type VipCustomMeta = { status: DomainStatus; vipEvictAt: string | null | undefined };
 
@@ -447,6 +448,7 @@ type VipListProps = {
 export function VipDomainList({ domains, open, onToggle, colors }: VipListProps) {
   const { t } = useTranslation();
   const { domains: vipList, loading, refetch } = useWebContentDomains();
+  const [suggestSheetVisible, setSuggestSheetVisible] = useState(false);
 
   const webCustoms = useMemo(
     () => domains.filter((d) => (d.type === 'web' || !d.type) && d.status !== 'rejected'),
@@ -570,6 +572,7 @@ export function VipDomainList({ domains, open, onToggle, colors }: VipListProps)
                   title={t('blocker.vip_section_curated_title')}
                   count={t('blocker.vip_section_curated_count', { count: curatedDomains.length })}
                   colors={colors}
+                  onSuggest={() => setSuggestSheetVisible(true)}
                 >
                   {curatedDomains.map((d) => (
                     <VipCuratedTile key={d} domain={d} colors={colors} />
@@ -594,6 +597,11 @@ export function VipDomainList({ domains, open, onToggle, colors }: VipListProps)
           )}
         </View>
       )}
+
+      <SuggestCuratedSheet
+        visible={suggestSheetVisible}
+        onClose={() => setSuggestSheetVisible(false)}
+      />
     </View>
   );
 }
@@ -603,12 +611,15 @@ function VipSubSection({
   count,
   colors,
   children,
+  onSuggest,
 }: {
   title: string;
   count: string;
   colors: ColorScheme;
   children: React.ReactNode;
+  onSuggest?: () => void;
 }) {
+  const { t } = useTranslation();
   return (
     <View style={{ gap: 8 }}>
       <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
@@ -618,6 +629,19 @@ function VipSubSection({
         <Text style={{ fontSize: 11, fontFamily: 'Nunito_400Regular', color: colors.textMuted }}>
           {count}
         </Text>
+        {onSuggest && (
+          <TouchableOpacity onPress={onSuggest} activeOpacity={0.7} style={{ marginLeft: 4 }}>
+            <Text
+              style={{
+                fontSize: 11,
+                fontFamily: 'Nunito_600SemiBold',
+                color: colors.brandOrange,
+              }}
+            >
+              {t('blocker.suggest_curated_link')}
+            </Text>
+          </TouchableOpacity>
+        )}
       </View>
       <View style={{ flexDirection: 'row', flexWrap: 'wrap', rowGap: 10, columnGap: 8 }}>
         {children}

apps/rebreak-native/hooks/useCuratedSuggest.ts

@@ -0,0 +1,53 @@
+import { useState } from 'react';
+import { apiFetch } from '../lib/api';
+
+type SuggestResult =
+  | { ok: true }
+  | { ok: false; alreadyExists: true; status: 'suggested' | 'approved' | 'rejected' }
+  | { ok: false; alreadyExists?: false; errorCode?: 'INVALID_DOMAIN' | 'INVALID_COUNTRY' | string };
+
+export type SuggestState = 'idle' | 'loading' | 'success' | 'already_suggested' | 'already_approved' | 'already_rejected' | 'invalid_domain' | 'error';
+
+export function useCuratedSuggest() {
+  const [state, setState] = useState<SuggestState>('idle');
+
+  async function suggest(domain: string, country: string): Promise<SuggestState> {
+    setState('loading');
+    try {
+      const res = await apiFetch<{ ok: boolean; alreadyExists?: boolean; status?: string }>(
+        '/api/curated-domains/suggest',
+        { method: 'POST', body: { domain, country } },
+      );
+      if (res.ok) {
+        setState('success');
+        return 'success';
+      }
+      if (res.alreadyExists) {
+        const next: SuggestState =
+          res.status === 'approved'
+            ? 'already_approved'
+            : res.status === 'rejected'
+              ? 'already_rejected'
+              : 'already_suggested';
+        setState(next);
+        return next;
+      }
+      setState('error');
+      return 'error';
+    } catch (e: any) {
+      const code: string = (e as any)?.code ?? '';
+      if (code === 'INVALID_DOMAIN') {
+        setState('invalid_domain');
+        return 'invalid_domain';
+      }
+      setState('error');
+      return 'error';
+    }
+  }
+
+  function reset() {
+    setState('idle');
+  }
+
+  return { state, suggest, reset };
+}

apps/rebreak-native/locales/de.json

@@ -416,7 +416,20 @@
     "vip_swap_cta": "Austauschen",
     "vip_swap_no_candidates": "Keine tauschbaren Domains gefunden.",
     "vip_swap_error": "Austausch fehlgeschlagen. Bitte erneut versuchen.",
-    "vip_evict_badge": "wird in %{hours}h ersetzt"
+    "vip_evict_badge": "wird in %{hours}h ersetzt",
+    "suggest_curated_link": "+ Seite vorschlagen",
+    "suggest_curated_title": "Seite vorschlagen",
+    "suggest_curated_explanation": "Schlage eine Glücksspielseite für die Liste deines Landes vor — das ReBreak-Team prüft sie und nimmt sie bei Eignung auf.",
+    "suggest_curated_input_label": "Domain",
+    "suggest_curated_input_placeholder": "z.B. casino.com",
+    "suggest_curated_cta": "Vorschlag einreichen",
+    "suggest_curated_success_title": "Vorschlag eingereicht",
+    "suggest_curated_success_body": "Das Team prüft deinen Vorschlag und nimmt die Seite bei Eignung in die Liste auf.",
+    "suggest_curated_error_invalid_domain": "Bitte eine gültige Domain eingeben (z.B. casino.com).",
+    "suggest_curated_error_already_suggested": "Diese Domain wurde bereits vorgeschlagen und wird gerade geprüft.",
+    "suggest_curated_error_already_approved": "Diese Domain ist bereits in der kuratierten Liste.",
+    "suggest_curated_error_already_rejected": "Dieser Vorschlag wurde bereits geprüft und abgelehnt.",
+    "suggest_curated_error_generic": "Vorschlag fehlgeschlagen. Bitte später erneut versuchen."
   },
   "onboarding": {
     "lyra": {

apps/rebreak-native/locales/en.json

@@ -416,7 +416,20 @@
     "vip_swap_cta": "Swap",
     "vip_swap_no_candidates": "No swappable domains found.",
     "vip_swap_error": "Swap failed. Please try again.",
-    "vip_evict_badge": "replaced in %{hours}h"
+    "vip_evict_badge": "replaced in %{hours}h",
+    "suggest_curated_link": "+ Suggest a site",
+    "suggest_curated_title": "Suggest a site",
+    "suggest_curated_explanation": "Suggest a gambling site for your country's list — the ReBreak team reviews it and adds it if suitable.",
+    "suggest_curated_input_label": "Domain",
+    "suggest_curated_input_placeholder": "e.g. casino.com",
+    "suggest_curated_cta": "Submit suggestion",
+    "suggest_curated_success_title": "Suggestion submitted",
+    "suggest_curated_success_body": "The team will review your suggestion and add the site to the list if it qualifies.",
+    "suggest_curated_error_invalid_domain": "Please enter a valid domain (e.g. casino.com).",
+    "suggest_curated_error_already_suggested": "This domain has already been suggested and is currently under review.",
+    "suggest_curated_error_already_approved": "This domain is already in the curated list.",
+    "suggest_curated_error_already_rejected": "This suggestion has already been reviewed and rejected.",
+    "suggest_curated_error_generic": "Suggestion failed. Please try again later."
   },
   "onboarding": {
     "lyra": {