byarielm.fyi
ATlast — you'll never need to find your favorites on another platform again. Find your favs in the ATmosphere.
atproto
feat: button to x following, pretty-ification of extension
+4
-2
netlify.toml
+4
-2
netlify.toml
···
7
[dev]
8
framework = "#custom"
9
command = "npm run --prefix packages/web dev:full"
10
-
targetPort = 5173
11
port = 8888
12
functionsPort = 9999
13
autoLaunch = true
···
41
X-XSS-Protection = "1; mode=block"
42
Referrer-Policy = "strict-origin-when-cross-origin"
43
Permissions-Policy = "geolocation=(), microphone=(), camera=()"
44
-
Content-Security-Policy = "default-src 'self'; script-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: https:; connect-src 'self' https://*.bsky.app https://*.bsky.network https://public.api.bsky.app; frame-ancestors 'none'; base-uri 'self'; form-action 'self'; upgrade-insecure-requests;"
···
7
[dev]
8
framework = "#custom"
9
command = "npm run --prefix packages/web dev:full"
10
+
targetPort = 5175
11
port = 8888
12
functionsPort = 9999
13
autoLaunch = true
···
41
X-XSS-Protection = "1; mode=block"
42
Referrer-Policy = "strict-origin-when-cross-origin"
43
Permissions-Policy = "geolocation=(), microphone=(), camera=()"
44
+
# CSP relaxed for dev mode - script-src includes 'unsafe-eval' for Vite HMR
45
+
# In production, Netlify will use build context to apply stricter CSP
46
+
Content-Security-Policy = "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdnjs.cloudflare.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: https:; connect-src 'self' ws: wss: http://localhost:* http://127.0.0.1:* https://*.bsky.app https://*.bsky.network https://public.api.bsky.app; frame-ancestors 'none'; base-uri 'self'; form-action 'self';"
+75
-30
packages/extension/src/popup/popup.html
+75
-30
packages/extension/src/popup/popup.html
···
7
<link rel="stylesheet" href="popup.css" />
8
</head>
9
<body
10
-
class="w-[350px] min-h-[400px] rounded-3xl font-sans bg-gradient-to-br from-cyan-50 via-purple-50 to-pink-50 dark:from-indigo-950 dark:via-purple-900 dark:to-slate-900 text-slate-900 dark:text-slate-100 transition-colors duration-300 mb-2 text-center"
11
>
12
<div class="flex flex-col min-h-[400px]">
13
<header
···
23
</p>
24
</header>
25
26
-
<main id="app" class="flex-1 px-5 py-6 flex">
27
<!-- Idle state -->
28
-
<div id="state-idle" class="w-full text-center hidden">
29
<div class="text-5xl mb-4">🔍</div>
30
<p class="text-base mb-3 text-purple-950 dark:text-cyan-50">
31
Go to your Twitter/X Following page
32
</p>
33
-
<p class="text-sm text-slate-500 dark:text-cyan-100 mt-2">
34
-
Visit x.com/your-username/following
35
-
</p>
36
</div>
37
38
<!-- Ready state -->
39
-
<div id="state-ready" class="w-full text-center hidden">
40
<div class="text-5xl mb-4">✅</div>
41
<p class="text-base mb-3 text-purple-950 dark:text-cyan-50">
42
Ready to scan <span id="platform-name"></span>
43
</p>
44
<button
45
id="btn-start"
46
-
class="w-full bg-orange-600 hover:bg-orange-700 text-white font-semibold py-3 px-6 rounded-lg mt-4 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg hover:shadow-orange-600/30 active:translate-y-0"
47
>
48
Start Scan
49
</button>
50
</div>
51
52
<!-- Scraping state -->
53
-
<div id="state-scraping" class="w-full text-center hidden">
54
<div class="text-5xl mb-4 spinner">⏳</div>
55
<p class="text-base mb-3 text-purple-950 dark:text-cyan-50">
56
Scanning...
···
65
></div>
66
</div>
67
<p
68
-
class="text-base font-semibold text-slate-700 dark:text-cyan-50"
69
>
70
Found <span id="count">0</span> users
71
</p>
···
73
</div>
74
75
<!-- Complete state -->
76
-
<div id="state-complete" class="w-full text-center hidden">
77
<div class="text-5xl mb-4">🎉</div>
78
<p class="text-base mb-3 text-purple-950 dark:text-cyan-50">
79
Scan complete!
80
</p>
81
-
<p class="text-sm text-slate-500 dark:text-slate-400 mt-2">
82
Found
83
<strong
84
id="final-count"
···
89
</p>
90
<button
91
id="btn-upload"
92
-
class="w-full bg-orange-600 hover:bg-orange-700 text-white font-semibold py-3 px-6 rounded-lg mt-4 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg hover:shadow-orange-600/30 active:translate-y-0"
93
>
94
Open in ATlast
95
</button>
96
</div>
97
98
<!-- Uploading state -->
99
-
<div id="state-uploading" class="w-full text-center hidden">
100
<div class="text-5xl mb-4 spinner">📤</div>
101
<p class="text-base mb-3 text-purple-950 dark:text-cyan-50">
102
Uploading to ATlast...
···
104
</div>
105
106
<!-- Error state -->
107
-
<div id="state-error" class="w-full text-center hidden">
108
<div class="text-5xl mb-4">⚠️</div>
109
<p class="text-base mb-3 text-purple-950 dark:text-cyan-50">
110
Error
111
</p>
112
<p
113
id="error-message"
114
-
class="text-[13px] text-red-600 dark:text-red-400 mt-2 p-3 bg-red-50 dark:bg-red-950/50 rounded border-l-[3px] border-red-600"
115
></p>
116
<button
117
id="btn-retry"
118
-
class="w-full bg-white dark:bg-purple-950 text-purple-700 dark:text-cyan-400 border-2 border-purple-700 dark:border-cyan-400 font-semibold py-2.5 px-6 rounded-lg mt-4 transition-all duration-200 hover:bg-purple-50 dark:hover:bg-purple-900"
119
>
120
Try Again
121
</button>
122
</div>
123
124
<!-- Server offline state -->
125
-
<div id="state-offline" class="w-full hidden">
126
-
<div class="text-5xl text-center mb-4">🔌</div>
127
<p class="text-base mb-3 text-purple-950 dark:text-cyan-50">
128
Server not available
129
</p>
···
139
</p>
140
<button
141
id="btn-check-server"
142
-
class="w-full bg-orange-600 hover:bg-orange-500 text-white font-medium py-3 px-6 rounded-lg mt-4 shadow-md hover:shadow-lg transition-all duration-200"
143
>
144
Check Again
145
</button>
146
</div>
147
148
<!-- Not logged in state -->
149
-
<div id="state-not-logged-in" class="w-full text-center hidden">
150
<div class="text-5xl mb-4">🔐</div>
151
<p class="text-base mb-3 text-purple-950 dark:text-cyan-50">
152
Not logged in to ATlast
153
</p>
154
<p
155
-
class="text-[13px] text-red-600 dark:text-red-400 mt-2 p-3 bg-red-50 dark:bg-red-950/50 rounded border-l-[3px] border-red-600"
156
>
157
Please log in to ATlast first, then return here to scan.
158
</p>
159
<button
160
id="btn-open-atlast"
161
-
class="w-full bg-orange-600 hover:bg-orange-700 text-white font-semibold py-3 px-6 rounded-lg mt-4 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg hover:shadow-orange-600/30 active:translate-y-0"
162
>
163
Open ATlast
164
</button>
165
<button
166
id="btn-retry-login"
167
-
class="w-full bg-white dark:bg-purple-950 text-purple-700 dark:text-cyan-400 border-2 border-purple-700 dark:border-cyan-400 font-semibold py-2.5 px-6 rounded-lg mt-4 transition-all duration-200 hover:bg-purple-50 dark:hover:bg-purple-900"
168
>
169
Check Again
170
</button>
171
</div>
172
</main>
173
174
-
<footer class="text-center mb-6 rounded-3xl">
175
-
<a
176
-
href="https://atlast.byarielm.fyi"
177
-
target="_blank"
178
-
class="text-purple-750 dark:text-cyan-250 no-underline text-l font-medium hover:underline"
179
-
>atlast.byarielm.fyi</a
180
>
181
</footer>
182
</div>
183
···
7
<link rel="stylesheet" href="popup.css" />
8
</head>
9
<body
10
+
class="w-[300px] min-h-[400px] font-sans bg-gradient-to-br from-cyan-50 via-purple-50 to-pink-50 dark:from-indigo-950 dark:via-purple-900 dark:to-slate-900 text-slate-900 dark:text-slate-100 transition-colors duration-300 text-center"
11
>
12
<div class="flex flex-col min-h-[400px]">
13
<header
···
23
</p>
24
</header>
25
26
+
<main
27
+
id="app"
28
+
class="flex-1 px-5 py-6 flex flex-col justify-center"
29
+
>
30
<!-- Idle state -->
31
+
<div
32
+
id="state-idle"
33
+
class="w-full text-center flex flex-col justify-center"
34
+
>
35
<div class="text-5xl mb-4">🔍</div>
36
<p class="text-base mb-3 text-purple-950 dark:text-cyan-50">
37
Go to your Twitter/X Following page
38
</p>
39
+
<a
40
+
href="https://x.com/following"
41
+
target="_blank"
42
+
class="w-full px-6 py-2 bg-orange-600 hover:bg-orange-500 text-white font-bold rounded-lg shadow-md hover:shadow-lg transition-all mt-4 inline-block no-underline"
43
+
>
44
+
Open X Following
45
+
</a>
46
</div>
47
48
<!-- Ready state -->
49
+
<div
50
+
id="state-ready"
51
+
class="w-full text-center flex flex-col justify-center"
52
+
>
53
<div class="text-5xl mb-4">✅</div>
54
<p class="text-base mb-3 text-purple-950 dark:text-cyan-50">
55
Ready to scan <span id="platform-name"></span>
56
</p>
57
<button
58
id="btn-start"
59
+
class="w-full px-6 py-2 bg-orange-600 hover:bg-orange-500 text-white font-bold rounded-lg shadow-md hover:shadow-lg transition-all mt-4"
60
>
61
Start Scan
62
</button>
63
</div>
64
65
<!-- Scraping state -->
66
+
<div
67
+
id="state-scraping"
68
+
class="w-full text-center flex flex-col justify-center"
69
+
>
70
<div class="text-5xl mb-4 spinner">⏳</div>
71
<p class="text-base mb-3 text-purple-950 dark:text-cyan-50">
72
Scanning...
···
81
></div>
82
</div>
83
<p
84
+
class="text-base font-semibold text-purple-900 dark:text-cyan-100"
85
>
86
Found <span id="count">0</span> users
87
</p>
···
89
</div>
90
91
<!-- Complete state -->
92
+
<div
93
+
id="state-complete"
94
+
class="w-full text-center flex flex-col justify-center"
95
+
>
96
<div class="text-5xl mb-4">🎉</div>
97
<p class="text-base mb-3 text-purple-950 dark:text-cyan-50">
98
Scan complete!
99
</p>
100
+
<p class="text-base text-purple-950 dark:text-cyan-50 mt-2">
101
Found
102
<strong
103
id="final-count"
···
108
</p>
109
<button
110
id="btn-upload"
111
+
class="w-full px-6 py-2 bg-orange-600 hover:bg-orange-500 text-white font-bold rounded-lg shadow-md hover:shadow-lg transition-all mt-4"
112
>
113
Open in ATlast
114
</button>
115
</div>
116
117
<!-- Uploading state -->
118
+
<div
119
+
id="state-uploading"
120
+
class="w-full text-center flex flex-col justify-center"
121
+
>
122
<div class="text-5xl mb-4 spinner">📤</div>
123
<p class="text-base mb-3 text-purple-950 dark:text-cyan-50">
124
Uploading to ATlast...
···
126
</div>
127
128
<!-- Error state -->
129
+
<div
130
+
id="state-error"
131
+
class="w-full text-center flex flex-col justify-center"
132
+
>
133
<div class="text-5xl mb-4">⚠️</div>
134
<p class="text-base mb-3 text-purple-950 dark:text-cyan-50">
135
Error
136
</p>
137
<p
138
id="error-message"
139
+
class="text-sm text-purple-950 dark:text-cyan-50 mt-2 p-3 bg-white-50 dark:bg-slate-950/50 rounded border-l-[3px] border-red-600"
140
></p>
141
<button
142
id="btn-retry"
143
+
class="w-full px-6 py-2 bg-orange-600 hover:bg-orange-500 text-white rounded-lg font-bold shadow-md hover:shadow-lg transition-all mt-4"
144
>
145
Try Again
146
</button>
147
</div>
148
149
<!-- Server offline state -->
150
+
<div
151
+
id="state-offline"
152
+
class="w-full flex flex-col justify-center text-center"
153
+
>
154
+
<div class="text-5xl mb-4">🔌</div>
155
<p class="text-base mb-3 text-purple-950 dark:text-cyan-50">
156
Server not available
157
</p>
···
167
</p>
168
<button
169
id="btn-check-server"
170
+
class="w-full px-6 py-2 bg-orange-600 hover:bg-orange-500 text-white rounded-lg font-medium shadow-md hover:shadow-lg transition-all mt-4"
171
>
172
Check Again
173
</button>
174
</div>
175
176
<!-- Not logged in state -->
177
+
<div
178
+
id="state-not-logged-in"
179
+
class="w-full text-center flex flex-col justify-center"
180
+
>
181
<div class="text-5xl mb-4">🔐</div>
182
<p class="text-base mb-3 text-purple-950 dark:text-cyan-50">
183
Not logged in to ATlast
184
</p>
185
<p
186
+
class="text-[13px] text-red-600 dark:text-red-400 mt-2 p-3 bg-white-50 dark:bg-slate-950/50 rounded border-l-2 border-red-600"
187
>
188
Please log in to ATlast first, then return here to scan.
189
</p>
190
<button
191
id="btn-open-atlast"
192
+
class="w-full px-6 py-2 bg-orange-600 hover:bg-orange-500 text-white rounded-lg font-bold shadow-md hover:shadow-lg transition-all mt-4"
193
>
194
Open ATlast
195
</button>
196
<button
197
id="btn-retry-login"
198
+
class="w-full px-4 py-2 text-purple-750 dark:text-cyan-250 hover:text-purple-950 dark:hover:text-cyan-50 transition-colors mt-2"
199
>
200
Check Again
201
</button>
202
</div>
203
</main>
204
205
+
<footer class="text-left">
206
+
<div
207
+
class="mt-4 px-10 py-2 -indent-6 border-orange-650/50 dark:border-amber-400/50 bg-white/50 dark:bg-slate-900/50"
208
>
209
+
<p class="text-sm text-purple-900 dark:text-cyan-100">
210
+
💡 <strong>Need help?</strong> Contact @byarielm.fyi on
211
+
<a
212
+
href="https://bsky.app/profile/atlast.byarielm.fyi"
213
+
target="_blank"
214
+
class="text-orange-600 dark:text-amber-400 hover:underline"
215
+
>Bluesky</a
216
+
>
217
+
or
218
+
<a
219
+
href="https://tangled.org/byarielm.fyi/atlast"
220
+
target="_blank"
221
+
class="text-orange-600 dark:text-amber-400 hover:underline"
222
+
>Tangled</a
223
+
>
224
+
</p>
225
+
</div>
226
</footer>
227
</div>
228
+33
-2
packages/extension/src/popup/popup.ts
+33
-2
packages/extension/src/popup/popup.ts
···
213
error: "Failed to scrape page",
214
}),
215
);
216
+
217
+
// Special buttons that directly show state (not part of ExtensionState status)
218
+
const btnOffline = document.createElement("button");
219
+
btnOffline.textContent = "Offline";
220
+
btnOffline.style.cssText = `
221
+
background: #f97316;
222
+
color: white;
223
+
border: none;
224
+
padding: 4px 8px;
225
+
border-radius: 4px;
226
+
cursor: pointer;
227
+
font-size: 11px;
228
+
`;
229
+
btnOffline.onclick = () => {
230
+
showState("offline");
231
+
};
232
+
toolbar.appendChild(btnOffline);
233
+
234
+
const btnNotLoggedIn = document.createElement("button");
235
+
btnNotLoggedIn.textContent = "Not Logged In";
236
+
btnNotLoggedIn.style.cssText = `
237
+
background: #f97316;
238
+
color: white;
239
+
border: none;
240
+
padding: 4px 8px;
241
+
border-radius: 4px;
242
+
cursor: pointer;
243
+
font-size: 11px;
244
+
`;
245
+
btnNotLoggedIn.onclick = () => {
246
+
showState("notLoggedIn");
247
+
};
248
+
toolbar.appendChild(btnNotLoggedIn);
249
250
document.body.appendChild(toolbar);
251
}
+2
packages/web/vite.config.ts
+2
packages/web/vite.config.ts