b60c0ce3c4
Replace ~150 hardcoded Tailwind color classes (bg-zinc-*, text-zinc-*, border-white/*, text-cyan-*, bg-cyan-*) with CSS custom properties (--pc-*) across all 17 components. Add @theme block in index.css for Tailwind v4 theme-aware utility classes (bg-pc-elevated, text-pc-text, border-pc-border, etc.). Add --pc-hover, --pc-hover-strong, --pc-separator variables per theme (white/alpha for dark/OLED, black/alpha for light). Theme switcher (dark/light/OLED) now actually works — all UI elements respond to theme changes in real-time. Fixes #55
79 lines
2.4 KiB
TypeScript
79 lines
2.4 KiB
TypeScript
import { Component, type ReactNode, type ErrorInfo } from 'react';
|
|
import { t } from '../lib/i18n';
|
|
|
|
interface Props {
|
|
children: ReactNode;
|
|
/** Optional fallback — defaults to built-in error card */
|
|
fallback?: ReactNode;
|
|
}
|
|
|
|
interface State {
|
|
hasError: boolean;
|
|
error: Error | null;
|
|
}
|
|
|
|
/**
|
|
* Catches render errors in child components and shows a recovery UI
|
|
* instead of a blank white screen.
|
|
*/
|
|
export class ErrorBoundary extends Component<Props, State> {
|
|
state: State = { hasError: false, error: null };
|
|
|
|
static getDerivedStateFromError(error: Error): State {
|
|
return { hasError: true, error };
|
|
}
|
|
|
|
componentDidCatch(error: Error, info: ErrorInfo) {
|
|
console.error('[PinchChat] Render error caught by ErrorBoundary:', error, info.componentStack);
|
|
}
|
|
|
|
handleRetry = () => {
|
|
this.setState({ hasError: false, error: null });
|
|
};
|
|
|
|
handleReload = () => {
|
|
window.location.reload();
|
|
};
|
|
|
|
render() {
|
|
if (this.state.hasError) {
|
|
if (this.props.fallback) return this.props.fallback;
|
|
|
|
return (
|
|
<div className="h-dvh flex items-center justify-center bg-[var(--pc-bg-base)] text-pc-text p-6">
|
|
<div className="max-w-md w-full space-y-4 text-center">
|
|
<div className="text-4xl">💥</div>
|
|
<h1 className="text-xl font-semibold text-pc-text">
|
|
{t('error.title')}
|
|
</h1>
|
|
<p className="text-sm text-pc-text-secondary">
|
|
{t('error.description')}
|
|
</p>
|
|
{this.state.error && (
|
|
<pre className="mt-3 p-3 rounded-lg bg-pc-elevated/60 text-xs text-red-400 text-left overflow-auto max-h-32">
|
|
{this.state.error.message}
|
|
</pre>
|
|
)}
|
|
<div className="flex gap-3 justify-center pt-2">
|
|
<button
|
|
onClick={this.handleRetry}
|
|
className="px-4 py-2 rounded-lg bg-pc-elevated hover:bg-pc-elevated text-sm font-medium transition-colors"
|
|
>
|
|
{t('error.retry')}
|
|
</button>
|
|
<button
|
|
onClick={this.handleReload}
|
|
className="px-4 py-2 rounded-lg bg-[var(--pc-accent)] hover:bg-[var(--pc-accent-light)] text-sm font-medium transition-colors"
|
|
>
|
|
{t('error.reload')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return this.props.children;
|
|
}
|
|
}
|