chahinebrini 8a6ab6fe64 feat(native/blocker): unified slot bar + single + button + auto-detect sheet
Single shared affordance for adding either a website-domain or a mail-
sender-domain. The per-section add buttons (one inside "Eigene Domains"
and one inside "Eigene Mails") are gone — replaced by a CustomFilter-
Overview card above both sections with:

- title "Eigene Filter" and a "X von 20" counter (free/pro: 10, legend:
  20 — sum of the two per-type buckets)
- a 2-colour progress pill: brandOrange for the web slice, success-green
  for the mail slice on top of the surface-elevated rest
- a 48×48 rounded-full TouchableOpacity on the right (brandOrange,
  ionicons add 24px, white) that opens the AddDomainSheet directly

AddDomainSheet was rewritten one more time: the Seite / E-Mail type
picker is gone. The user types one thing — domain or full address —
and a live preview shows which one we detected (Domain-Filter for a
bare host, Mail-Filter for input that contains "@", stripping to the
domain after the last @). The shape is also what we send: the body is
{ pattern } with no kind field. The backend (commit a2680f6) does the
authoritative auto-detect and sends back the resolved type with the
created row, so the frontend never has to guess in two places.

useCustomDomains.addDomain now treats kind as optional. When omitted,
the request body just carries pattern — when present it's still sent
through verbatim so any caller that wants to force a category still can.

DomainSection no longer renders a per-section add button when its onAdd
prop is undefined — domains and mails sections in blocker.tsx both
omit onAdd now. The mails section stays default-collapsed.

i18n: new keys custom_filter_overview_title / count + preview_web /
preview_mail / preview_invalid; tabs_web / tabs_mail removed since the
TypePicker is gone. type_web / type_mail kept in the locales as
inactive entries in case the type-picker comes back in a future
direct-add flow.
2026-05-16 02:54:38 +02:00

232 lines
7.4 KiB
TypeScript

import { useCallback, useEffect, useState } from 'react';
import { apiFetch } from '../lib/api';
export type DomainStatus = 'active' | 'submitted' | 'approved' | 'rejected';
export type EntryKind = 'web' | 'mail_domain' | 'mail_display_name';
export type CustomDomain = {
id: string;
domain: string;
type?: EntryKind;
status: DomainStatus;
addedAt?: string;
postId?: string | null;
submission?: { id: string; yesVotes: number; noVotes: number; status: string } | null;
};
export type Plan = 'free' | 'pro' | 'legend';
export type Tier = {
plan: Plan;
domainLimit: number; // free=5, pro=5, legend=10
refillEnabled: boolean; // free=false, pro/legend=true
globalBlocklist: boolean; // free=false, pro/legend=true
canSubmit: boolean; // free=false, pro/legend=true
usedSlots: number; // active+submitted (NICHT approved/rejected)
atLimit: boolean;
};
function deriveTier(plan: Plan, domains: CustomDomain[]): Tier {
const limit = plan === 'legend' ? 10 : 5;
const refill = plan !== 'free';
const usedSlots = domains.filter((d) => d.status === 'active' || d.status === 'submitted').length;
return {
plan,
domainLimit: limit,
refillEnabled: refill,
globalBlocklist: refill,
canSubmit: refill,
usedSlots,
atLimit: usedSlots >= limit,
};
}
export type CountsByType = {
web: number;
mail: number;
};
export type LimitsByType = {
web: number;
mail: number;
};
export type UseCustomDomainsReturn = {
domains: CustomDomain[];
tier: Tier;
countsByType: CountsByType;
limits: LimitsByType;
loading: boolean;
error: string | null;
refresh: () => Promise<void>;
addDomain: (pattern: string, kind?: 'web' | 'mail') => Promise<{ ok: boolean; error?: string; alreadyGlobal?: boolean }>;
submitDomain: (id: string) => Promise<{ ok: boolean; error?: string }>;
removeDomain: (id: string) => Promise<{ ok: boolean; error?: string }>;
/** Live-Validate (regex) ob string gültiger Domain-Name ist. */
isValidDomain: (s: string) => boolean;
/** Normalize: lowercase, http(s)://, /path stripping, www. weg. */
normalizeDomain: (s: string) => string;
};
const DOMAIN_REGEX = /^([a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z]{2,}$/i;
export function normalizeDomain(input: string): string {
let s = input.trim().toLowerCase();
if (s.startsWith('https://')) s = s.slice(8);
else if (s.startsWith('http://')) s = s.slice(7);
const slash = s.indexOf('/');
if (slash >= 0) s = s.slice(0, slash);
if (s.startsWith('www.')) s = s.slice(4);
return s;
}
export function isValidDomain(input: string): boolean {
const n = normalizeDomain(input);
if (!n || n.length > 253) return false;
return DOMAIN_REGEX.test(n);
}
/**
* Custom-Domain CRUD gegen `/api/custom-domains/*` mit Tier-aware Limits.
*
* Tier-Logik (Single-Source-of-Truth: User.plan):
* Free → 5 Slots, kein Refill, keine Submit
* Pro → 5 Slots, Refill bei approved/rejected, Submit erlaubt
* Legend → 10 Slots, Refill, Submit
*/
export function useCustomDomains(plan: Plan): UseCustomDomainsReturn {
const [domains, setDomains] = useState<CustomDomain[]>([]);
const [apiCounts, setApiCounts] = useState<CountsByType | null>(null);
const [apiLimits, setApiLimits] = useState<LimitsByType | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const fetchDomains = useCallback(async () => {
try {
// Backend `GET /api/custom-domains` returns
// { items: CustomDomain[], counts: { web, mail }, limits: { web, mail } }
// since the slot-pool split (commit f2b81ee). Legacy fall-throughs cover
// an older shape (bare array or { domains }) in case a cached client
// ever hits this code path before the deploy lands.
const res = await apiFetch<
| CustomDomain[]
| { domains?: CustomDomain[] }
| { items?: CustomDomain[]; counts?: CountsByType; limits?: LimitsByType }
>('/api/custom-domains');
let arr: CustomDomain[] = [];
let counts: CountsByType | null = null;
let limits: LimitsByType | null = null;
if (Array.isArray(res)) {
arr = res;
} else if (res) {
arr = (res as any).items ?? (res as any).domains ?? [];
counts = (res as any).counts ?? null;
limits = (res as any).limits ?? null;
}
setDomains(arr);
setApiCounts(counts);
setApiLimits(limits);
setError(null);
} catch (e: any) {
console.error('[useCustomDomains] fetch failed:', e?.message ?? e);
setError(e?.message ?? 'unknown');
} finally {
setLoading(false);
}
}, []);
useEffect(() => {
fetchDomains();
}, [fetchDomains]);
const addDomain = useCallback(
async (input: string, kind?: 'web' | 'mail') => {
const resolvedKind: 'web' | 'mail' = kind ?? (input.includes('@') ? 'mail' : 'web');
if (resolvedKind === 'web' && !isValidDomain(input)) return { ok: false, error: 'invalid_domain' };
if (resolvedKind === 'mail' && !input.trim()) return { ok: false, error: 'invalid_pattern' };
const tier = deriveTier(plan, domains);
if (tier.atLimit) return { ok: false, error: 'limit_reached' };
const pattern = resolvedKind === 'web' ? normalizeDomain(input) : input.trim();
const body: Record<string, string> = { pattern };
if (kind !== undefined) body.kind = kind;
try {
const res = await apiFetch<any>('/api/custom-domains', {
method: 'POST',
body,
});
if (res?.alreadyGlobal) {
return { ok: false, alreadyGlobal: true };
}
await fetchDomains();
return { ok: true };
} catch (e: any) {
return { ok: false, error: e?.message ?? 'add_failed' };
}
},
[plan, domains, fetchDomains],
);
const submitDomain = useCallback(
async (id: string) => {
const tier = deriveTier(plan, domains);
if (!tier.canSubmit) return { ok: false, error: 'plan_does_not_support_submit' };
try {
await apiFetch(`/api/custom-domains/${id}/submit`, { method: 'POST', body: {} });
await fetchDomains();
return { ok: true };
} catch (e: any) {
return { ok: false, error: e?.message ?? 'submit_failed' };
}
},
[plan, domains, fetchDomains],
);
const removeDomain = useCallback(
async (id: string) => {
try {
await apiFetch(`/api/custom-domains/${id}`, { method: 'DELETE' });
await fetchDomains();
return { ok: true };
} catch (e: any) {
return { ok: false, error: e?.message ?? 'remove_failed' };
}
},
[fetchDomains],
);
const tier = deriveTier(plan, domains);
// Prefer API-driven counts/limits when the backend returned the new shape;
// fall back to local derivation so the UI works during a stale-bundle moment.
const countsByType: CountsByType =
apiCounts ?? {
web: domains.filter(
(d) => d.status !== 'approved' && (d.type === 'web' || !d.type),
).length,
mail: domains.filter(
(d) => d.status !== 'approved' && d.type === 'mail_domain',
).length,
};
const limits: LimitsByType =
apiLimits ?? {
web: plan === 'legend' ? 10 : 5,
mail: plan === 'legend' ? 10 : 5,
};
return {
domains,
tier,
countsByType,
limits,
loading,
error,
refresh: fetchDomains,
addDomain,
submitDomain,
removeDomain,
isValidDomain,
normalizeDomain,
};
}