Update Activity.tsx links to open in new windows for Discord isolation

cgen-5c1c9384a0314221a4919ca678ff7dc8
This commit is contained in:
Builder.io 2025-11-10 00:57:24 +00:00
parent 40edbd9e3a
commit 8e14336698

View file

@ -75,14 +75,90 @@ export default function Activity() {
);
}
if (!isActivity) {
return null;
// Not in Discord Activity - show informational message
if (!isActivity && !isLoading) {
return (
<div className="flex items-center justify-center min-h-screen bg-gray-900">
<div className="text-center max-w-md">
<h1 className="text-3xl font-bold text-white mb-4">
🎮 Discord Activity
</h1>
<p className="text-gray-300 mb-8">
This page is designed to run as a Discord Activity. Open it within Discord to get started!
</p>
<p className="text-gray-500 text-sm">
Not in Discord? Visit the main app at{" "}
<a
href="https://aethex.dev"
target="_blank"
rel="noopener noreferrer"
className="text-blue-400 hover:text-blue-300 underline"
>
aethex.dev
</a>
</p>
</div>
</div>
);
}
if (user) {
if (isLoading) {
return (
<LoadingScreen
message="Initializing Discord Activity..."
showProgress={true}
duration={5000}
/>
);
}
if (error) {
return (
<div className="flex items-center justify-center min-h-screen bg-gray-900">
<div className="text-center max-w-md">
<h1 className="text-3xl font-bold text-red-500 mb-4">
Activity Error
</h1>
<p className="text-gray-300 mb-8 text-sm">{error}</p>
<div className="bg-gray-800 border border-gray-700 rounded-lg p-4 mb-6 text-left">
<h3 className="text-white font-semibold mb-3">
Troubleshooting Steps:
</h3>
<ol className="text-gray-400 text-sm space-y-2 list-decimal list-inside">
<li>Clear your browser cache (Ctrl+Shift+Delete)</li>
<li>Close Discord completely</li>
<li>Reopen Discord</li>
<li>Try opening the Activity again</li>
</ol>
</div>
<div className="bg-blue-900/20 border border-blue-700 rounded-lg p-3 mb-6">
<p className="text-blue-300 text-xs">
💡 Open Discord DevTools (Ctrl+Shift+I) and check the console for messages starting with{" "}
<code className="bg-blue-950 px-1 rounded">
[Discord Activity]
</code>
</p>
</div>
<button
onClick={() => window.location.reload()}
className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors text-sm"
>
Retry
</button>
</div>
</div>
);
}
if (user && showContent) {
const appBaseUrl = "https://aethex.dev";
return (
<div className="min-h-screen bg-gray-900">
<div className="max-w-7xl mx-auto px-4 py-8">
<div className="max-w-2xl mx-auto px-4 py-8">
<div className="text-center mb-8">
<h1 className="text-3xl font-bold text-white">
Welcome to AeThex, {user.full_name || user.username}! 🎉
@ -127,48 +203,48 @@ export default function Activity() {
Your primary realm determines your Discord role and access to
realm-specific features.
</p>
<button className="mt-4 px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg transition-colors">
<button
onClick={() => window.open(`${appBaseUrl}/profile/settings`, "_blank")}
className="mt-4 px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg transition-colors"
>
Change Realm
</button>
</div>
</div>
<div className="bg-gray-800 rounded-lg p-6 border border-gray-700">
<div className="bg-gray-800 rounded-lg p-6 border border-gray-700 mb-8">
<h2 className="text-xl font-bold text-white mb-4">
🚀 Quick Actions
</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<a
href="/creators"
className="p-4 bg-gray-700 hover:bg-gray-600 rounded-lg text-white text-center transition-colors"
<button
onClick={() => window.open(`${appBaseUrl}/creators`, "_blank")}
className="p-4 bg-gray-700 hover:bg-gray-600 rounded-lg text-white text-center transition-colors font-medium"
>
🎨 Browse Creators
</a>
<a
href="/opportunities"
className="p-4 bg-gray-700 hover:bg-gray-600 rounded-lg text-white text-center transition-colors"
</button>
<button
onClick={() => window.open(`${appBaseUrl}/opportunities`, "_blank")}
className="p-4 bg-gray-700 hover:bg-gray-600 rounded-lg text-white text-center transition-colors font-medium"
>
💼 Find Opportunities
</a>
<a
href="/profile/settings"
className="p-4 bg-gray-700 hover:bg-gray-600 rounded-lg text-white text-center transition-colors"
</button>
<button
onClick={() => window.open(`${appBaseUrl}/profile/settings`, "_blank")}
className="p-4 bg-gray-700 hover:bg-gray-600 rounded-lg text-white text-center transition-colors font-medium"
>
Settings
</a>
</button>
</div>
</div>
<div className="mt-8 p-4 bg-blue-900 border border-blue-700 rounded-lg">
<p className="text-blue-100">
💡 <strong>Tip:</strong> Use Discord commands like{" "}
<code className="bg-blue-800 px-2 py-1 rounded">/profile</code>,{" "}
<code className="bg-blue-800 px-2 py-1 rounded">/set-realm</code>,
and{" "}
<code className="bg-blue-800 px-2 py-1 rounded">
/verify-role
</code>{" "}
to manage your account within Discord.
<div className="bg-blue-900/20 border border-blue-700 rounded-lg p-4">
<p className="text-blue-100 text-sm">
💡 <strong>Discord Commands:</strong> Use{" "}
<code className="bg-blue-950 px-2 py-1 rounded text-xs">/profile</code>,{" "}
<code className="bg-blue-950 px-2 py-1 rounded text-xs">/set-realm</code>, and{" "}
<code className="bg-blue-950 px-2 py-1 rounded text-xs">/verify-role</code>{" "}
to manage your account directly in Discord.
</p>
</div>
</div>
@ -176,6 +252,7 @@ export default function Activity() {
);
}
// Still loading
return (
<LoadingScreen
message="Loading your profile..."