From 08f5e1a62ff0e283432a82d6ca56db376faa870e Mon Sep 17 00:00:00 2001
From: Louis Knight-Webb <louis@bloop.ai>
Date: Sun, 22 Jun 2025 23:32:33 +0100
Subject: [PATCH] Task attempt 1f6e668b-742c-4898-b21f-88d23350bf7b - Final
 changes

---
 frontend/src/components/layout/navbar.tsx  | 11 ++++-
 frontend/src/components/support-dialog.tsx | 52 ++++++++++++++++++++++
 2 files changed, 62 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/support-dialog.tsx

diff --git a/frontend/src/components/layout/navbar.tsx b/frontend/src/components/layout/navbar.tsx
index d2435cc2..f0e571e4 100644
--- a/frontend/src/components/layout/navbar.tsx
+++ b/frontend/src/components/layout/navbar.tsx
@@ -1,7 +1,8 @@
 import { Link, useLocation } from "react-router-dom";
 import { Button } from "@/components/ui/button";
-import { FolderOpen, Settings } from "lucide-react";
+import { FolderOpen, Settings, HelpCircle } from "lucide-react";
 import { Logo } from "@/components/logo";
+import { SupportDialog } from "@/components/support-dialog";
 
 export function Navbar() {
   const location = useLocation();
@@ -39,6 +40,14 @@ export function Navbar() {
               </Button>
             </div>
           </div>
+          <div className="flex items-center">
+            <SupportDialog>
+              <Button variant="ghost" size="sm">
+                <HelpCircle className="mr-2 h-4 w-4" />
+                Support
+              </Button>
+            </SupportDialog>
+          </div>
         </div>
       </div>
     </div>
diff --git a/frontend/src/components/support-dialog.tsx b/frontend/src/components/support-dialog.tsx
new file mode 100644
index 00000000..792c76ee
--- /dev/null
+++ b/frontend/src/components/support-dialog.tsx
@@ -0,0 +1,52 @@
+import { useState, ReactNode } from "react";
+import { HelpCircle, Mail } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+
+interface SupportDialogProps {
+  children: ReactNode;
+}
+
+export function SupportDialog({ children }: SupportDialogProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleEmailClick = () => {
+    window.location.href = "mailto:louis@bloop.ai";
+  };
+
+  return (
+    <>
+      <div onClick={() => setIsOpen(true)}>{children}</div>
+      <Dialog open={isOpen} onOpenChange={setIsOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <HelpCircle className="h-5 w-5" />
+              Support
+            </DialogTitle>
+            <DialogDescription>
+              Have questions or need help? I'm here to assist you!
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <p className="text-sm text-muted-foreground">
+              Email me at{" "}
+              <strong className="text-foreground">louis@bloop.ai</strong> with
+              any questions and I'll respond ASAP.
+            </p>
+            <Button onClick={handleEmailClick} className="w-full">
+              <Mail className="mr-2 h-4 w-4" />
+              Send Email
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}