feat: hide encryption box after 3 chats and move verified button to footer

frontend/src/components/ConditionalInfoCard.tsx

@@ -0,0 +1,35 @@
+import { Card, CardHeader } from "@/components/ui/card";
+import { InfoContent } from "./Explainer";
+import { useChatCount } from "@/hooks/useChatCount";
+
+export function ConditionalInfoCard() {
+  const { hasMinChats, isLoading } = useChatCount();
+
+  // While loading, don't render anything to prevent flash
+  if (isLoading) {
+    return null;
+  }
+
+  return (
+    <>
+      {!hasMinChats && (
+        <Card className="bg-card/80 backdrop-blur-sm">
+          <CardHeader>
+            <InfoContent />
+          </CardHeader>
+        </Card>
+      )}
+      {hasMinChats && (
+        <>
+          {/* Desktop: Maintain empty space of same size */}
+          <div className="hidden md:block" aria-hidden="true">
+            <Card className="bg-transparent border-transparent shadow-none">
+              <CardHeader className="py-[88px]" />
+            </Card>
+          </div>
+          {/* Mobile: No empty space */}
+        </>
+      )}
+    </>
+  );
+}

frontend/src/components/Explainer.tsx

@@ -1,8 +1,4 @@
-import { Link } from "@tanstack/react-router";
 import { ArrowRight, BotIcon, LockIcon, MinusIcon, ServerIcon, SmartphoneIcon } from "lucide-react";
-import { useEffect, useState } from "react";
-import { Loader2, CheckCircle, XCircle } from "lucide-react";
-import { useOpenSecret } from "@opensecret/react";
 
 function ArrowAndLock() {
   return (
@@ -22,48 +18,6 @@ function ArrowAndLock() {
   );
 }
 
-function VerificationStatus() {
-  const [status, setStatus] = useState<"loading" | "verified" | "failed">("loading");
-  const os = useOpenSecret();
-
-  useEffect(() => {
-    async function verify() {
-      try {
-        const verified = await os.getAttestation();
-        await new Promise((resolve) => setTimeout(resolve, 800));
-        setStatus(verified ? "verified" : "failed");
-      } catch (error) {
-        console.error("Verification failed:", error);
-        setStatus("failed");
-      }
-    }
-    verify();
-  }, [os]);
-
-  return (
-    <Link to="/proof" className="flex items-center gap-1 text-sm font-medium hover:underline">
-      {status === "loading" && (
-        <>
-          <Loader2 className="h-3 w-3 animate-spin" />
-          <span className="text-muted-foreground">Verifying...</span>
-        </>
-      )}
-      {status === "verified" && (
-        <>
-          <CheckCircle className="h-3 w-3 text-green-700 dark:text-green-500" />
-          <span className="text-green-700 dark:text-green-500">Verified</span>
-        </>
-      )}
-      {status === "failed" && (
-        <>
-          <XCircle className="h-3 w-3 text-red-700 dark:text-red-500" />
-          <span className="text-red-700 dark:text-red-500">Verification failed</span>
-        </>
-      )}
-    </Link>
-  );
-}
-
 export function InfoContent() {
   return (
     <>
@@ -88,13 +42,13 @@ export function InfoContent() {
           <span className="text-center text-sm text-muted-foreground">AI cloud</span>
         </div>
       </div>
-      <div className="w-full pt-4 flex gap-4 items-center justify-between">
-        <VerificationStatus />
+      <div className="w-full pt-4 flex justify-center">
         <a
           href="https://blog.trymaple.ai"
           className="text-center hover:underline font-medium text-sm"
           target="_blank"
           rel="noopener noreferrer"
+          aria-label="Learn more about Maple's encryption"
         >
           Learn more
         </a>

frontend/src/components/SimplifiedFooter.tsx

@@ -1,17 +1,21 @@
+import { VerificationStatus } from "@/components/VerificationStatus";
+
 export function SimplifiedFooter() {
   return (
     <div className="w-full border-t border-[hsl(var(--marketing-card-border))] py-6 mt-auto">
       <div className="max-w-[45rem] mx-auto px-4 flex flex-col items-center">
-        <iframe
-          src="https://status.trymaple.ai/badge?theme=system"
-          width="250"
-          height="30"
-          frameBorder="0"
-          scrolling="no"
-          style={{ colorScheme: "normal", marginLeft: "58px" }}
-          title="BetterStack Status"
-          className="mb-3"
-        />
+        <div className="flex items-center gap-6 mb-3">
+          <iframe
+            src="https://status.trymaple.ai/badge?theme=system"
+            width="250"
+            height="30"
+            frameBorder="0"
+            scrolling="no"
+            style={{ colorScheme: "normal" }}
+            title="BetterStack Status"
+          />
+          <VerificationStatus />
+        </div>
         <p className="text-[hsl(var(--marketing-text-muted))]/70 text-sm text-center">
           © {new Date().getFullYear()} Maple AI. All rights reserved. Powered by{" "}
           <a

frontend/src/components/VerificationStatus.tsx

@@ -8,21 +8,33 @@ export function VerificationStatus() {
   const os = useOpenSecret();
 
   useEffect(() => {
+    let cancelled = false;
     async function verify() {
       try {
         const verified = await os.getAttestation();
         await new Promise((resolve) => setTimeout(resolve, 800));
+        if (cancelled) return;
         setStatus(verified ? "verified" : "failed");
       } catch (error) {
+        if (cancelled) return;
         console.error("Verification failed:", error);
         setStatus("failed");
       }
     }
     verify();
+    return () => {
+      cancelled = true;
+    };
   }, [os]);
 
   return (
-    <Link to="/proof" className="flex items-center gap-1 text-sm font-medium hover:underline">
+    <Link
+      to="/proof"
+      className="flex items-center gap-1 text-sm font-medium hover:underline"
+      target="_blank"
+      rel="noopener noreferrer"
+      aria-live="polite"
+    >
       {status === "loading" && (
         <>
           <Loader2 className="h-3 w-3 animate-spin" />

frontend/src/hooks/useChatCount.ts

@@ -0,0 +1,59 @@
+import { useState, useEffect } from "react";
+import { useLocalState } from "@/state/useLocalState";
+
+const MIN_CHATS = 3;
+
+/**
+ * Hook to track the total number of chats a user has created
+ * Returns the count and a function to check if the user has made 3 or more chats
+ */
+export function useChatCount() {
+  // Start with null to indicate loading state - prevents initial render of InfoCard
+  const [chatCount, setChatCount] = useState<number | null>(null);
+  const { fetchOrCreateHistoryList } = useLocalState();
+
+  useEffect(() => {
+    let cancelled = false;
+    async function loadChatCount() {
+      try {
+        const historyList = await fetchOrCreateHistoryList();
+        if (!cancelled) {
+          setChatCount(historyList.length);
+        }
+      } catch (error: unknown) {
+        if (!cancelled) {
+          if (error instanceof Error) {
+            console.error("Error loading chat count:", error.message);
+          } else {
+            console.error("Error loading chat count:", error);
+          }
+          // Preserve previous count to avoid flicker, only set 0 if no previous value
+          setChatCount((prev) => (prev !== null ? prev : 0));
+        }
+      }
+    }
+
+    loadChatCount();
+
+    // Set up a periodic check to detect new chats
+    const interval = setInterval(() => {
+      // Skip polling when the tab is not visible to reduce churn
+      if (typeof document !== "undefined" && document.visibilityState === "hidden") return;
+      loadChatCount();
+    }, 1000);
+
+    return () => {
+      cancelled = true;
+      clearInterval(interval);
+    };
+  }, [fetchOrCreateHistoryList]);
+
+  const hasMinChats = chatCount !== null && chatCount >= MIN_CHATS;
+  const isLoading = chatCount === null;
+
+  return {
+    chatCount: chatCount ?? 0,
+    hasMinChats,
+    isLoading
+  };
+}

frontend/src/routes/index.tsx

@@ -6,9 +6,8 @@ import { useOpenSecret } from "@opensecret/react";
 import { useLocalState } from "@/state/useLocalState";
 import { Sidebar, SidebarToggle } from "@/components/Sidebar";
 import { cva } from "class-variance-authority";
-import { InfoContent } from "@/components/Explainer";
+import { ConditionalInfoCard } from "@/components/ConditionalInfoCard";
 import { useState, useCallback, useEffect } from "react";
-import { Card, CardHeader } from "@/components/ui/card";
 import { VerificationModal } from "@/components/VerificationModal";
 import { TopNav } from "@/components/TopNav";
 import { Marketing } from "@/components/Marketing";
@@ -171,11 +170,7 @@ function Index() {
               <div className="col-span-3">
                 {os.auth.user && <ChatBox startTall={true} onSubmit={handleSubmit} />}
               </div>
-              <Card className="bg-card/80 backdrop-blur-sm">
-                <CardHeader>
-                  <InfoContent />
-                </CardHeader>
-              </Card>
+              <ConditionalInfoCard />
               <SimplifiedFooter />
             </div>
           </>