fix: navbar for share modal and end test

frontend/src/app/ideology-test/page.tsx

@@ -32,6 +32,17 @@ export default function IdeologyTest() {
   const totalQuestions = questions.length;
   const progress = ((currentQuestion + 1) / totalQuestions) * 100;
 
+  // Auto-clear error message after 3 seconds
+  useEffect(() => {
+    if (error) {
+      const timer = setTimeout(() => {
+        setError(null);
+      }, 3000);
+
+      return () => clearTimeout(timer);
+    }
+  }, [error]);
+
   useEffect(() => {
     const loadProgress = async (loadedQuestions: Question[]) => {
       try {
@@ -79,6 +90,18 @@ export default function IdeologyTest() {
 
   const handleEndTest = async () => {
     if (isSubmitting) return; // Prevent multiple submissions
+
+    // Check if all questions have been answered
+    const unansweredQuestions = Object.keys(userAnswers).length;
+    if (unansweredQuestions < questions.length) {
+      setError(
+        `Please answer all questions before submitting. You have ${
+          questions.length - unansweredQuestions
+        } questions remaining.`,
+      );
+      return;
+    }
+    setError(null);
     setIsSubmitting(true);
 
     try {
@@ -261,8 +284,6 @@ export default function IdeologyTest() {
   };
 
   if (loading) return <LoadingSpinner />;
-  if (error)
-    return <div className="text-white text-center">Error: {error}</div>;
   if (
     !questions ||
     questions.length === 0 ||
@@ -301,6 +322,12 @@ export default function IdeologyTest() {
         {/* Answer Buttons Section - Fixed at bottom */}
         <div className="absolute bottom-16 left-0 right-0 bg-brand-tertiary/95 backdrop-blur-sm border-t border-white/10">
           <div className="w-full max-w-md mx-auto px-4 py-4 space-y-2.5">
+            {error && (
+              <div className="bg-red-500/10 border border-red-500/50 rounded-lg p-3 mb-3">
+                <p className="text-red-400 text-sm text-center">{error}</p>
+              </div>
+            )}
+
             {answerOptions.map((answer) => {
               const isSelected =
                 userAnswers[questions[currentQuestion].id] ===

frontend/src/app/insights/page.tsx

@@ -38,6 +38,14 @@ export default function InsightsPage() {
   const [publicFigure, setPublicFigure] = useState("");
   const canvasRef = useRef<HTMLCanvasElement>(null);
 
+  // Emit modal state changes
+  useEffect(() => {
+    const event = new CustomEvent("shareModalState", {
+      detail: { isOpen: isShareModalOpen },
+    });
+    window.dispatchEvent(event);
+  }, [isShareModalOpen]);
+
   const testId = searchParams.get("testId");
 
   useEffect(() => {

frontend/src/components/LayoutContent.tsx

@@ -8,7 +8,7 @@ import { useAuth } from "@/hooks/useAuth";
 import { useVerification } from "@/hooks/useVerification";
 import { usePathname } from "next/navigation";
 import type * as React from "react";
-import { useEffect, useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 
 type BackgroundVariant = "signin" | "home" | "settings" | "results" | "default";
 
@@ -28,6 +28,8 @@ export function LayoutContent({ children }: LayoutContentProps) {
     useVerification();
   const pathname = usePathname();
 
+  const [isShareModalOpen, setIsShareModalOpen] = useState(false);
+
   // Page checks
   const pageStates = useMemo(
     () => ({
@@ -65,6 +67,19 @@ export function LayoutContent({ children }: LayoutContentProps) {
     pageStates,
   ]);
 
+  // Listen for share modal state changes from child components
+  useEffect(() => {
+    const handleShareModalState = (e: Event) => {
+      const event = e as CustomEvent<{ isOpen: boolean }>;
+      setIsShareModalOpen(event.detail.isOpen);
+    };
+
+    window.addEventListener('shareModalState', handleShareModalState);
+    return () => {
+      window.removeEventListener('shareModalState', handleShareModalState);
+    };
+  }, []);
+
   const getBackgroundVariant = (): BackgroundVariant => {
     const { isSignInPage, isHomePage, isSettingsPage, isResultsPage } =
       pageStates;
@@ -113,7 +128,8 @@ export function LayoutContent({ children }: LayoutContentProps) {
     isRegistered &&
     !isSignInPage &&
     !isRegisterPage &&
-    !isWelcomePage;
+    !isWelcomePage &&
+    !isShareModalOpen;
 
   return (
     <div className="flex min-h-screen flex-col bg-neutral-bg">
@@ -122,7 +138,7 @@ export function LayoutContent({ children }: LayoutContentProps) {
       <main className="scroll-container">
         <div className={`flex-grow ${showNav ? "pb-16" : ""}`}>{children}</div>
       </main>
-      {showNav && <BottomNav />}
+      {showNav && <div className="z-40"><BottomNav /></div>}
     </div>
   );
 }