Add proper external link handling for Discord activities

Update DiscordActivityContext to include an `openExternalLink` function that uses the Discord SDK to open external URLs, replacing `window.open` calls to avoid popup blocking issues within the Discord client.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 9203795e-937a-4306-b81d-b4d5c78c240e
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: d3965bf1-4405-4725-8fa0-b46ffd1f2824
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/7c94b7a0-29c7-4f2e-94ef-44b2153872b7/9203795e-937a-4306-b81d-b4d5c78c240e/qPXTzuE
Replit-Helium-Checkpoint-Created: true

.replit

@@ -56,7 +56,7 @@ localPort = 40437
 externalPort = 3001
 
 [[ports]]
-localPort = 45639
+localPort = 41937
 externalPort = 4200
 
 [deployment]

attached_assets/Pasted-index-BxFi5MW3-js-2413-Blocked-opening-https-aethex-dev_1765227753093.txt

@@ -0,0 +1,14 @@
+index-BxFi5MW3.js:2413 Blocked opening 'https://aethex.dev/profile/settings' in a new window because the request was made in a sandboxed frame whose 'allow-popups' permission is not set.
+onClick @ index-BxFi5MW3.js:2413Understand this error
+index-BxFi5MW3.js:2413 Blocked opening 'https://aethex.dev/creators' in a new window because the request was made in a sandboxed frame whose 'allow-popups' permission is not set.
+onClick @ index-BxFi5MW3.js:2413Understand this error
+index-BxFi5MW3.js:2413 Blocked opening 'https://aethex.dev/opportunities' in a new window because the request was made in a sandboxed frame whose 'allow-popups' permission is not set.
+onClick @ index-BxFi5MW3.js:2413Understand this error
+index-BxFi5MW3.js:2413 Blocked opening 'https://aethex.dev/profile/settings' in a new window because the request was made in a sandboxed frame whose 'allow-popups' permission is not set.
+onClick @ index-BxFi5MW3.js:2413Understand this error
+sentry.b2861bd36ab3acf1.js:14 [Spotify] WS Connecting
+api.spotify.com/v1/me/player?additional_types=track%2Cepisode:1  Failed to load resource: net::ERR_CONNECTION_RESETUnderstand this error
+web.24d99a93890ecaa4.js:12 WebSocket connection to 'wss://dealer.spotify.com/?access_token=BQC6ltkoce43rz6h_vlIWecka9xH5U3G2IxxlBSUOoV9qZj8iyx-160a4iMX5cVO5bLLmRaXfGF4OhbBjnCQeF4wSzK-EGQXsqRCLYO2JDk2RZ20pjiknqP1fjlVwLFYtLCpLFbB9VDMHNneMyqE_BVhUZo_9TdumgJ281PlB30Txg1qGpIWMNkgWPbypLWSlJJuiYymfnVLvtjSoEdv-qPkOs_GRM1dbMnFQUTbTw_Jkt-a9UI_BCFiCfRsZOsKvw' failed: 
+(anonymous) @ web.24d99a93890ecaa4.js:12Understand this error
+sentry.b2861bd36ab3acf1.js:14 [Spotify] WS Disconnected. Next retry in 60000ms
+?instance_id=i-1447694626785067009-pc-1040550697697026099&location_id=pc-1040550697697026099&launch…:1 Loading the stylesheet 'https://fonts.googleapis.com/css2?family=VT323&family=Press+Start+2P&family=Merriweather:wght@400;700&family=Roboto+Mono:wght@300;400;500&display=swap' violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline' blob:". Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback. The action has been blocked.

client/contexts/DiscordActivityContext.tsx

@@ -19,6 +19,7 @@ interface DiscordActivityContextType {
   user: DiscordUser | null;
   error: string | null;
   discordSdk: any | null;
+  openExternalLink: (url: string) => Promise<void>;
 }
 
 const DiscordActivityContext = createContext<DiscordActivityContextType>({
@@ -27,6 +28,7 @@ const DiscordActivityContext = createContext<DiscordActivityContextType>({
   user: null,
   error: null,
   discordSdk: null,
+  openExternalLink: async () => {},
 });
 
 export const useDiscordActivity = () => {
@@ -232,6 +234,19 @@ export const DiscordActivityProvider: React.FC<
     initializeActivity();
   }, []);
 
+  const openExternalLink = async (url: string) => {
+    if (discordSdk) {
+      try {
+        await discordSdk.commands.openExternalLink({ url });
+      } catch (err) {
+        console.error("[Discord Activity] Failed to open external link:", err);
+        window.open(url, "_blank");
+      }
+    } else {
+      window.open(url, "_blank");
+    }
+  };
+
   return (
     <DiscordActivityContext.Provider
       value={{
@@ -240,6 +255,7 @@ export const DiscordActivityProvider: React.FC<
         user,
         error,
         discordSdk,
+        openExternalLink,
       }}
     >
       {children}

client/pages/Activity.tsx

@@ -3,7 +3,7 @@ import { useDiscordActivity } from "@/contexts/DiscordActivityContext";
 import LoadingScreen from "@/components/LoadingScreen";
 
 export default function Activity() {
-  const { isActivity, isLoading, user, error } = useDiscordActivity();
+  const { isActivity, isLoading, user, error, openExternalLink } = useDiscordActivity();
   const [showContent, setShowContent] = useState(false);
 
   useEffect(() => {
@@ -206,9 +206,7 @@ export default function Activity() {
                 realm-specific features.
               </p>
               <button
-                onClick={() =>
+                onClick={() => openExternalLink(`${appBaseUrl}/profile/settings`)}
-                  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
@@ -222,23 +220,19 @@ export default function Activity() {
             </h2>
             <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
               <button
-                onClick={() => window.open(`${appBaseUrl}/creators`, "_blank")}
+                onClick={() => openExternalLink(`${appBaseUrl}/creators`)}
                 className="p-4 bg-gray-700 hover:bg-gray-600 rounded-lg text-white text-center transition-colors font-medium"
               >
                 🎨 Browse Creators
               </button>
               <button
-                onClick={() =>
+                onClick={() => openExternalLink(`${appBaseUrl}/opportunities`)}
-                  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
               </button>
               <button
-                onClick={() =>
+                onClick={() => openExternalLink(`${appBaseUrl}/profile/settings`)}
-                  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