chahinebrini 01d515d137 feat(rebreak-native): persistent FaceID-sign-in + iOS-grouped UI + Outlook guard + sparkline cooldowns
Auth / FaceID — eingeloggt bleiben funktioniert jetzt:
- AppLock-Init idempotent: late re-init durch router.replace-Re-Mount behält
  locked-State (fixt Endlosschleife: unlock → re-mount → init reset → lock)
- LockScreen-Auto-Prompt nur wenn AppState=active (verhindert silent FaceID-
  Fail wenn LockScreen während background-Event mountet — User sah dann nur
  Fallback-Button)
- index.tsx: wenn Session schon in AsyncStorage liegt → router.replace zu /(app),
  Landing wird übersprungen; early-return nach allen Hooks (Rules of Hooks)
- WebBrowser.dismissAuthSession vor openAuthSessionAsync (verhindert
  "Another web browser is already open" nach abgebrochenen OAuth-Flows)

UI — iOS-Grouped-Look auf Settings + Profile:
- Neue Theme-Tokens groupedBg (#F2F2F7 / #000) + card (#fff / #1c1c1e),
  identisch zu Apples systemGroupedBackground / secondarySystemGroupedBackground
- settings.tsx + profile/index.tsx + profile/[userId].tsx: Page-BG → groupedBg
- StreakSection / UrgeStatsCard / DemographicsAccordion / StatsBar /
  ApprovedDomainsList: Card-BG colors.surface → colors.card

Mail-Connect — Outlook-Tile entschärft:
- Microsoft hat App-Passwords für consumer-Outlook (.com/hotmail/live/msn) im
  September 2024 abgeschaltet, der bisherige Guide-Flow ist seit ~8 Monaten
  wirkungslos → AUTHENTICATIONFAILED
- Tile bleibt sichtbar mit opacity 0.45, "Kommt bald"-Sub-Label, disabled=true
- Provider-Typ um disabled? + disabledLabelKey? erweitert (wiederverwendbar)
- Backend-OAuth-Plan unter backend/docs/mail-outlook-oauth-plan.md (mo)
  → Generisches AuthMethod-Framework (app_password | oauth) geplant

Profile — Cooldown-Verlauf als Sparkline statt Endlos-Liste:
- 8 Wochen-Buckets, Bar-Höhe nach Frequenz (cap 5/Woche), leere Wochen als
  2px-Flatlines
- Sub-Label: "{n} Cooldowns in 8 Wochen · Ø 1 pro {avg} Wochen · zuletzt {date}"
- Neutral formuliert (Sucht-/Stigma-Sensibilität: Cooldown = Schutz-Pause,
  kein Rückfall)
- useProfileData.ts liefert rawStartedAt (ISO) zusätzlich zum formatierten Wert
- i18n-Keys unter profile.cooldown.* in DE + EN

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-13 16:15:54 +02:00

191 lines
4.8 KiB
TypeScript

import { useCallback, useEffect, useState } from 'react';
import { apiFetch } from '../lib/api';
import type { CooldownEntry } from '../components/profile/StreakSection';
import type { ApprovedDomain } from '../components/profile/ApprovedDomainsList';
export type SocialStats = {
postsCount: number;
followersCount: number;
};
export type ApprovedDomainsData = {
count: number;
list: ApprovedDomain[];
};
export type CooldownHistoryData = {
items: CooldownEntry[];
nextCursor: string | null;
};
export type SosInsightsData = {
last30Days: { sessions: number; overcome: number; overcomeRate: number };
helpedBy: { breathing: number; game: number; talk: number; other: number };
topEmotion: string | null;
};
type BackendCooldownEntry = {
id: string;
startedAt: string;
cooldownEndsAt: string;
durationMinutes: number;
status: 'active' | 'resolved' | 'cancelled';
resolvedAt: string | null;
cancelledAt: string | null;
reason: string | null;
};
function formatDuration(minutes: number): string {
if (minutes < 60) return `${minutes}min`;
const h = Math.round(minutes / 60);
return `${h}h`;
}
function formatStartedAt(isoString: string): string {
const d = new Date(isoString);
const day = String(d.getDate()).padStart(2, '0');
const month = String(d.getMonth() + 1).padStart(2, '0');
return `${day}.${month}.`;
}
function mapCooldownEntry(raw: BackendCooldownEntry): CooldownEntry {
return {
id: raw.id,
startedAt: formatStartedAt(raw.startedAt),
rawStartedAt: raw.startedAt,
durationLabel: formatDuration(raw.durationMinutes),
status: raw.status,
reason: raw.reason,
};
}
function useFetchOnce<T>(
url: string,
): { data: T | null; loading: boolean; error: boolean; reload: () => void } {
const [data, setData] = useState<T | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(false);
const [version, setVersion] = useState(0);
useEffect(() => {
if (!url) {
setLoading(false);
return;
}
let cancelled = false;
setLoading(true);
setError(false);
apiFetch<T>(url)
.then((res) => {
if (cancelled) return;
setData(res);
})
.catch(() => {
if (!cancelled) setError(true);
})
.finally(() => {
if (!cancelled) setLoading(false);
});
return () => {
cancelled = true;
};
}, [url, version]);
const reload = useCallback(() => setVersion((v) => v + 1), []);
return { data, loading, error, reload };
}
export function useSocialStats(userId: string | undefined) {
const url = userId ? `/api/social/profile/${userId}` : '';
const { data, loading, error, reload } = useFetchOnce<{
postsCount: number;
followersCount: number;
}>(url);
return {
stats: data
? ({ postsCount: data.postsCount, followersCount: data.followersCount } as SocialStats)
: null,
loading,
error,
reload,
};
}
export function useApprovedDomains() {
const { data, loading, error, reload } = useFetchOnce<ApprovedDomainsData>(
'/api/profile/me/approved-domains',
);
return { domains: data, loading, error, reload };
}
export function useCooldownHistory() {
const { data, loading, error, reload } = useFetchOnce<{
items: BackendCooldownEntry[];
nextCursor: string | null;
}>('/api/profile/me/cooldown-history?limit=20');
const mapped: CooldownHistoryData | null = data
? {
items: data.items.map(mapCooldownEntry),
nextCursor: data.nextCursor,
}
: null;
return { cooldownHistory: mapped, loading, error, reload };
}
export function useSosInsights() {
const { data, loading, error, reload } = useFetchOnce<SosInsightsData>(
'/api/profile/me/sos-insights',
);
return { sosInsights: data, loading, error, reload };
}
export type Demographics = {
birthYear: number | null;
gender: string | null;
maritalStatus: string | null;
employmentStatus: string | null;
shiftWork: boolean | null;
industry: string | null;
jobTenure: string | null;
bundesland: string | null;
city: string | null;
};
type DemographicsResponse = Demographics & {
consentAt: string | null;
withdrawnAt: string | null;
};
export function useDemographics() {
const { data, loading, error, reload } = useFetchOnce<DemographicsResponse>(
'/api/profile/me/demographics',
);
const demographics: Demographics | null = data
? {
birthYear: data.birthYear,
gender: data.gender,
maritalStatus: data.maritalStatus,
employmentStatus: data.employmentStatus,
shiftWork: data.shiftWork,
industry: data.industry,
jobTenure: data.jobTenure,
bundesland: data.bundesland,
city: data.city,
}
: null;
return {
demographics,
consentAt: data?.consentAt ?? null,
withdrawnAt: data?.withdrawnAt ?? null,
loading,
error,
reload,
};
}