1<script lang="ts">
2 import { onMount } from 'svelte';
3 import { Button } from '$lib/components/ui/button';
4 import * as Card from '$lib/components/ui/card';
5
6 type ErrorConfig = {
7 code: number;
8 title: string;
9 message: string;
10 icon: string;
11 actions: string[];
12 };
13
14 const defaultConfig: ErrorConfig = {
15 code: 404,
16 title: 'Page Not Found',
17 message: 'The page you are looking for does not exist.',
18 icon: 'warning',
19 actions: ['back'],
20 };
21
22 // Error configurations
23 const errorConfigs: Record<string, ErrorConfig> = {
24 blocked: { code: 0, title: 'Page Blocked', message: 'Content blocked by filter', icon: 'shield', actions: ['whitelist', 'bypass', 'back'] },
25 '404': defaultConfig,
26 '500': { code: 500, title: 'Server Error', message: 'Something went wrong on the server.', icon: 'error', actions: ['retry', 'back'] },
27 '502': { code: 502, title: 'Bad Gateway', message: 'The server received an invalid response.', icon: 'error', actions: ['retry', 'back'] },
28 '503': { code: 503, title: 'Service Unavailable', message: 'The server is temporarily unavailable.', icon: 'error', actions: ['retry', 'back'] },
29 offline: { code: 0, title: 'You Are Offline', message: 'Check your internet connection.', icon: 'offline', actions: ['retry', 'back'] },
30 ssl: { code: 0, title: 'Connection Not Secure', message: 'The security certificate is invalid.', icon: 'lock', actions: ['bypass', 'back'] },
31 timeout: { code: 0, title: 'Connection Timed Out', message: 'The server took too long to respond.', icon: 'warning', actions: ['retry', 'back'] },
32 };
33
34 let config = $state<ErrorConfig>(defaultConfig);
35 let targetUrl = $state('');
36 let targetDomain = $state('');
37 let customMessage = $state('');
38 let isLoading = $state(false);
39 let actionError = $state('');
40
41 onMount(() => {
42 const params = new URLSearchParams(window.location.search);
43 const typeParam = params.get('type') || params.get('code') || '404';
44
45 const selectedConfig = errorConfigs[typeParam];
46 config = selectedConfig ?? {
47 code: parseInt(typeParam) || 0,
48 title: `Error ${typeParam}`,
49 message: 'An unexpected error occurred.',
50 icon: 'error',
51 actions: ['retry', 'back'],
52 };
53
54 targetUrl = params.get('url') || '';
55 customMessage = params.get('reason') || params.get('message') || '';
56
57 if (targetUrl) {
58 try {
59 targetDomain = new URL(targetUrl).hostname;
60 } catch {
61 targetDomain = targetUrl;
62 }
63 }
64 });
65
66 function sendMessage(type: string, payload: Record<string, unknown>): Promise<unknown> {
67 return new Promise((resolve, reject) => {
68 const requestId = `error_${Date.now()}_${Math.random().toString(36).slice(2)}`;
69 const handler = (event: MessageEvent) => {
70 if (event.data?.requestId === requestId) {
71 window.removeEventListener('message', handler);
72 event.data.success ? resolve(event.data.data) : reject(new Error(event.data.error || 'Unknown error'));
73 }
74 };
75 window.addEventListener('message', handler);
76 if (window.webkit?.messageHandlers?.dumber) {
77 window.webkit.messageHandlers.dumber.postMessage(JSON.stringify({ type, requestId, payload }));
78 } else {
79 reject(new Error('WebKit message handler not available'));
80 }
81 setTimeout(() => { window.removeEventListener('message', handler); reject(new Error('Timeout')); }, 10000);
82 });
83 }
84
85 async function addToWhitelist() {
86 if (!targetDomain) return;
87 isLoading = true;
88 actionError = '';
89 try {
90 await sendMessage('addToWhitelist', { domain: targetDomain });
91 window.location.href = targetUrl;
92 } catch (e) {
93 actionError = e instanceof Error ? e.message : 'Failed';
94 isLoading = false;
95 }
96 }
97
98 async function bypassOnce() {
99 if (!targetUrl) return;
100 isLoading = true;
101 actionError = '';
102 try {
103 await sendMessage('bypassOnce', { url: targetUrl });
104 window.location.href = targetUrl;
105 } catch (e) {
106 actionError = e instanceof Error ? e.message : 'Failed';
107 isLoading = false;
108 }
109 }
110
111 function retry() {
112 targetUrl ? window.location.href = targetUrl : window.location.reload();
113 }
114
115 function goBack() {
116 window.history.back();
117 }
118
119 const icons: Record<string, string> = {
120 shield: '<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="M9 12l2 2 4-4"/>',
121 warning: '<path d="M12 9v4"/><path d="M12 17h.01"/><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>',
122 error: '<circle cx="12" cy="12" r="10"/><path d="M15 9l-6 6"/><path d="M9 9l6 6"/>',
123 offline: '<line x1="1" y1="1" x2="23" y2="23"/><path d="M16.72 11.06A10.94 10.94 0 0 1 19 12.55"/><path d="M5 12.55a10.94 10.94 0 0 1 5.17-2.39"/><path d="M10.71 5.05A16 16 0 0 1 22.58 9"/><path d="M1.42 9a15.91 15.91 0 0 1 4.7-2.88"/><path d="M8.53 16.11a6 6 0 0 1 6.95 0"/><line x1="12" y1="20" x2="12.01" y2="20"/>',
124 lock: '<rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>',
125 };
126
127 const iconColors: Record<string, string> = {
128 shield: 'text-primary',
129 warning: 'text-yellow-500',
130 error: 'text-destructive',
131 offline: 'text-muted-foreground',
132 lock: 'text-yellow-500',
133 };
134</script>
135
136<svelte:head>
137 <title>{config.title}</title>
138</svelte:head>
139
140<div class="min-h-screen flex items-center justify-center p-8 bg-background">
141 <Card.Root class="w-full max-w-md">
142 <Card.Header class="text-center">
143 <div class="flex justify-center mb-4">
144 <svg class="w-16 h-16 {iconColors[config.icon] || 'text-muted-foreground'}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
145 {@html icons[config.icon] || icons.error}
146 </svg>
147 </div>
148 {#if config.code > 0}
149 <div class="text-6xl font-bold text-muted-foreground/30 mb-2">{config.code}</div>
150 {/if}
151 <Card.Title class="text-xl">{config.title}</Card.Title>
152 <Card.Description>{customMessage || config.message}</Card.Description>
153 </Card.Header>
154
155 <Card.Content class="space-y-4">
156 {#if targetUrl}
157 <div class="bg-muted p-3 rounded-md">
158 <p class="text-xs text-muted-foreground uppercase tracking-wide mb-1">URL</p>
159 <code class="text-sm break-all">{targetUrl}</code>
160 </div>
161 {/if}
162
163 {#if actionError}
164 <div class="bg-destructive/10 border border-destructive/30 text-destructive p-3 rounded-md text-sm">
165 {actionError}
166 </div>
167 {/if}
168 </Card.Content>
169
170 <Card.Footer class="flex flex-col gap-3">
171 {#if config.actions.includes('whitelist') && targetDomain}
172 <Button class="w-full" onclick={addToWhitelist} disabled={isLoading}>
173 {isLoading ? 'Adding...' : 'Add to Whitelist'}
174 </Button>
175 {/if}
176
177 {#if config.actions.includes('bypass') && targetUrl}
178 <Button variant="outline" class="w-full" onclick={bypassOnce} disabled={isLoading}>
179 Proceed Anyway
180 </Button>
181 {/if}
182
183 {#if config.actions.includes('retry')}
184 <Button class="w-full" onclick={retry} disabled={isLoading}>
185 Try Again
186 </Button>
187 {/if}
188
189 {#if config.actions.includes('back')}
190 <Button variant="ghost" class="w-full" onclick={goBack} disabled={isLoading}>
191 Go Back
192 </Button>
193 {/if}
194
195 {#if config.actions.includes('whitelist') && targetDomain}
196 <p class="text-xs text-muted-foreground text-center">
197 Adding <strong class="text-foreground">{targetDomain}</strong> to whitelist will disable content filtering.
198 </p>
199 {/if}
200 </Card.Footer>
201 </Card.Root>
202</div>