From 5d4eb5a5055f84430e9cc983de449364e0090cbc Mon Sep 17 00:00:00 2001
From: Kishor <hello@kishorramanan.com>
Date: Sat, 3 Jan 2026 22:59:40 +0530
Subject: [PATCH] Added popup message when clicking on Request Access

---
 web/app/dashboard/[guildId]/layout.tsx | 10 ++-
 web/app/dashboard/page.tsx             | 10 ++-
 web/components/RequestAccessButton.tsx | 89 ++++++++++++++++++++++++++
 3 files changed, 97 insertions(+), 12 deletions(-)
 create mode 100644 web/components/RequestAccessButton.tsx

diff --git a/web/app/dashboard/[guildId]/layout.tsx b/web/app/dashboard/[guildId]/layout.tsx
index 27d5084..47a0ebe 100644
--- a/web/app/dashboard/[guildId]/layout.tsx
+++ b/web/app/dashboard/[guildId]/layout.tsx
@@ -4,6 +4,8 @@ import { getUserGuilds } from "@/lib/discord";
 import ServerSwitcher from "@/components/ServerSwitcher";
 import DashboardSidebar from "@/components/DashboardSidebar";
 import UserProfile from "@/components/UserProfile";
+import RequestAccessButton from "@/components/RequestAccessButton";
+
 
 
 export default async function DashboardLayout({
@@ -74,13 +76,9 @@ export default async function DashboardLayout({
                                     Add to Server
                                 </a>
                             ) : (
-                                <button
-                                    disabled
-                                    className="inline-flex items-center gap-2 px-6 sm:px-8 py-2.5 sm:py-3 bg-white/5 text-gray-400 rounded-full font-bold text-base sm:text-lg cursor-not-allowed border border-white/10"
-                                >
-                                    Request Access
-                                </button>
+                                <RequestAccessButton guildId={currentGuild.id} />
                             )}
+
                         </div>
                     </div>
                 </div>
diff --git a/web/app/dashboard/page.tsx b/web/app/dashboard/page.tsx
index 075920a..c460bfe 100644
--- a/web/app/dashboard/page.tsx
+++ b/web/app/dashboard/page.tsx
@@ -4,6 +4,8 @@ import Link from "next/link"
 import { getUserGuilds } from "@/lib/discord"
 import Toast from "@/components/Toast"
 import UserProfile from "@/components/UserProfile"
+import RequestAccessButton from "@/components/RequestAccessButton"
+
 
 
 export default async function Dashboard() {
@@ -74,13 +76,9 @@ export default async function Dashboard() {
                                             Add to Server
                                         </a>
                                     ) : (
-                                        <button
-                                            disabled
-                                            className="px-4 py-2 bg-white/5 text-gray-500 rounded-lg border border-white/5 cursor-not-allowed w-full flex items-center justify-center gap-2"
-                                        >
-                                            Request Access
-                                        </button>
+                                        <RequestAccessButton guildId={guild.id} />
                                     )}
+
                                 </div>
                             </div>
                         ))}
diff --git a/web/components/RequestAccessButton.tsx b/web/components/RequestAccessButton.tsx
new file mode 100644
index 0000000..59dd19a
--- /dev/null
+++ b/web/components/RequestAccessButton.tsx
@@ -0,0 +1,89 @@
+"use client";
+
+import { useState } from "react";
+import { createPortal } from "react-dom";
+import { Lock, Copy, Check, X } from "lucide-react";
+
+interface RequestAccessButtonProps {
+    guildId: string;
+}
+
+export default function RequestAccessButton({ guildId }: RequestAccessButtonProps) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [copied, setCopied] = useState(false);
+
+    const handleCopy = () => {
+        navigator.clipboard.writeText(guildId);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+    };
+
+    return (
+        <>
+            <button
+                onClick={() => setIsOpen(true)}
+                className="px-4 py-2 bg-white/5 hover:bg-white/10 text-gray-400 hover:text-white rounded-lg border border-white/5 hover:border-white/20 transition-all w-full flex items-center justify-center gap-2 group"
+            >
+                <Lock className="w-4 h-4 text-gray-500 group-hover:text-gray-300" />
+                Request Access
+            </button>
+
+            {isOpen && createPortal(
+                <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
+                    {/* Backdrop */}
+                    <div
+                        className="absolute inset-0 bg-black/60 backdrop-blur-sm animate-in fade-in duration-200"
+                        onClick={() => setIsOpen(false)}
+                    />
+
+                    {/* Modal */}
+                    <div className="relative w-full max-w-md bg-[#09090b] border border-white/10 rounded-2xl shadow-2xl p-6 animate-in zoom-in-95 duration-200">
+                        <button
+                            onClick={() => setIsOpen(false)}
+                            className="absolute top-4 right-4 text-gray-500 hover:text-white transition-colors"
+                        >
+                            <X className="w-5 h-5" />
+                        </button>
+
+                        <div className="flex flex-col items-center text-center space-y-4">
+                            <div className="w-12 h-12 rounded-full bg-blue-500/10 flex items-center justify-center border border-blue-500/20 text-blue-400 mb-2">
+                                <Lock className="w-6 h-6" />
+                            </div>
+
+                            <h3 className="text-xl font-bold text-white">
+                                Beta Access Required
+                            </h3>
+
+                            <p className="text-gray-300 text-sm leading-relaxed">
+                                Please send a DM to <span className="font-mono bg-blue-500/20 text-blue-300 px-1.5 py-0.5 rounded">_void_x_</span> on Discord to enable beta access for your server.
+                                <br />
+                                Make sure to include your Server ID:
+                            </p>
+
+                            <div className="w-full flex items-center gap-2 bg-black/40 border border-white/10 rounded-lg p-3 group hover:border-white/20 transition-colors">
+                                <code className="flex-1 font-mono text-sm text-gray-300 truncate text-left">
+                                    {guildId}
+                                </code>
+                                <button
+                                    onClick={handleCopy}
+                                    className="p-1.5 hover:bg-white/10 rounded-md transition-colors text-gray-400 hover:text-white"
+                                    title="Copy ID"
+                                >
+                                    {copied ? <Check className="w-4 h-4 text-green-400" /> : <Copy className="w-4 h-4" />}
+                                </button>
+                            </div>
+
+                            <button
+                                onClick={() => setIsOpen(false)}
+                                className="w-full py-2.5 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-colors mt-2"
+                            >
+                                Close
+                            </button>
+                        </div>
+                    </div>
+                </div>,
+                document.body
+            )}
+        </>
+    );
+}