quick fix

app/(public)/projects/page.tsx

@@ -3,10 +3,7 @@ import { MyProjects } from "@/components/my-projects";
 import { NotLogged } from "@/components/not-logged/not-logged";
 
 export default async function ProjectsPage() {
-  const { ok, projects } = await getProjects();
-  if (!ok) {
-    return <NotLogged />;
-  }
+  // const { ok, projects } = await getProjects();
 
-  return <MyProjects projects={projects} />;
+  return <MyProjects />;
 }

app/api/me/route.ts

@@ -1,3 +1,4 @@
+import { listSpaces } from "@huggingface/hub";
 import { headers } from "next/headers";
 import { NextResponse } from "next/server";
 
@@ -21,5 +22,26 @@ export async function GET() {
     );
   }
   const user = await userResponse.json();
-  return NextResponse.json({ user, errCode: null }, { status: 200 });
+  const projects = [];
+  for await (const space of listSpaces({
+    accessToken: token.replace("Bearer ", "") as string,
+    additionalFields: ["author", "cardData"],
+    search: {
+      owner: user.name,
+    }
+  })) {
+    if (
+      !space.private &&
+      space.sdk === "static" &&
+      Array.isArray((space.cardData as { tags?: string[] })?.tags) &&
+      (
+        ((space.cardData as { tags?: string[] })?.tags?.includes("deepsite-v3")) ||
+        ((space.cardData as { tags?: string[] })?.tags?.includes("deepsite"))
+      )
+    ) {
+      projects.push(space);
+    }
+  }
+
+  return NextResponse.json({ user, projects, errCode: null }, { status: 200 });
 }

app/layout.tsx

@@ -72,16 +72,16 @@ export const viewport: Viewport = {
 async function getMe() {
   const cookieStore = await cookies();
   const token = cookieStore.get(MY_TOKEN_KEY())?.value;
-  if (!token) return { user: null, errCode: null };
+  if (!token) return { user: null, projects: [], errCode: null };
   try {
     const res = await apiServer.get("/me", {
       headers: {
         Authorization: `Bearer ${token}`,
       },
     });
-    return { user: res.data.user, errCode: null };
+    return { user: res.data.user, projects: res.data.projects, errCode: null };
   } catch (err: any) {
-    return { user: null, errCode: err.status };
+    return { user: null, projects: [], errCode: err.status };
   }
 }
 

components/contexts/app-context.tsx

@@ -5,7 +5,7 @@ import { toast } from "sonner";
 import { usePathname, useRouter } from "next/navigation";
 
 import { useUser } from "@/hooks/useUser";
-import { User } from "@/types";
+import { ProjectType, User } from "@/types";
 import { useBroadcastChannel } from "@/lib/useBroadcastChannel";
 
 export default function AppContext({
@@ -15,6 +15,7 @@ export default function AppContext({
   children: React.ReactNode;
   me?: {
     user: User | null;
+    projects: ProjectType[];
     errCode: number | null;
   };
 }) {

components/editor/ask-ai/index.tsx

@@ -28,6 +28,7 @@ import { useLoginModal } from "@/components/contexts/login-context";
 import { Settings } from "./settings";
 import { useProModal } from "@/components/contexts/pro-context";
 import { MODELS } from "@/lib/providers";
+import { MAX_FREE_PROJECTS } from "@/lib/utils";
 
 export const AskAi = ({
   project,
@@ -39,7 +40,7 @@ export const AskAi = ({
   isNew?: boolean;
   onScrollToBottom?: () => void;
 }) => {
-  const { user } = useUser();
+  const { user, projects } = useUser();
   const { currentPageData, isUploading, pages, isLoadingProject } = useEditor();
   const {
     isAiWorking,
@@ -86,6 +87,8 @@ export const AskAi = ({
 
   const callAi = async (redesignMarkdown?: string) => {
     if (!user) return openLoginModal();
+    if (!user.isPro && projects.length >= MAX_FREE_PROJECTS)
+      return openProModal([]);
     if (isAiWorking) return;
     if (!redesignMarkdown && !prompt.trim()) return;
 

components/my-projects/index.tsx

@@ -12,23 +12,22 @@ import { ProTag } from "@/components/pro-modal";
 import { Button } from "@/components/ui/button";
 import { useProModal } from "@/components/contexts/pro-context";
 import { api } from "@/lib/api";
+import { NotLogged } from "../not-logged/not-logged";
 
-export function MyProjects({
-  projects: initialProjects,
-}: {
-  projects: ProjectType[];
-}) {
-  const { user } = useUser();
+export function MyProjects() {
+  const { user, projects, setProjects } = useUser();
   const { openProModal } = useProModal();
-  const [projects, setProjects] = useState<ProjectType[]>(
-    initialProjects || []
-  );
+
+  if (!user) {
+    return <NotLogged />;
+  }
 
   const onDelete = async (project: ProjectType) => {
     const response = await api.delete(`/me/projects/${project.name}`);
     if (response.data.ok) {
       toast.success("Project deleted successfully!");
-      setProjects((prev) => prev.filter((p) => p.id !== project.id));
+      const newProjects = projects.filter((p) => p.id !== project.id);
+      setProjects(newProjects);
     } else {
       toast.error(response.data.error);
     }

components/pro-modal/index.tsx

@@ -24,7 +24,10 @@ export const ProModal = ({
   };
   return (
     <Dialog open={open} onOpenChange={onClose}>
-      <DialogContent className="sm:max-w-lg lg:!p-8 !rounded-3xl !bg-white !border-neutral-100">
+      <DialogContent
+        showCloseButton={false}
+        className="sm:max-w-lg lg:!p-8 !rounded-3xl !bg-white !border-neutral-100"
+      >
         <DialogTitle className="hidden" />
         <main className="flex flex-col items-start text-left relative pt-2">
           <div className="flex items-center justify-start -space-x-4 mb-5">
@@ -72,6 +75,7 @@ export const ProModal = ({
           <Button
             variant="black"
             size="lg"
+            tabIndex={-1}
             className="w-full !text-base !h-11 mt-8"
             onClick={handleProClick}
           >

hooks/useUser.ts

@@ -4,7 +4,7 @@ import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useCookie } from "react-use";
 import { useRouter } from "next/navigation";
 
-import { User } from "@/types";
+import { ProjectType, User } from "@/types";
 import { api } from "@/lib/api";
 import { toast } from "sonner";
 import { 
@@ -19,6 +19,7 @@ import {
 export const useUser = (initialData?: {
   user: User | null;
   errCode: number | null;
+  projects: ProjectType[];
 }) => {
   const client = useQueryClient();
   const router = useRouter();
@@ -58,6 +59,18 @@ export const useUser = (initialData?: {
     client.setQueryData(["setLoadingAuth"], value);
   };
 
+  const { data: projects } = useQuery({
+    queryKey: ["me.projects"],
+    queryFn: async () => [],
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+    refetchOnMount: false,
+    initialData: initialData?.projects || [],
+  });
+  const setProjects = (projects: ProjectType[]) => {
+    client.setQueryData(["me.projects"], projects);
+  };
+
   const openLoginWindow = async () => {
     setCurrentRoute(window.location.pathname);
     
@@ -119,12 +132,15 @@ export const useUser = (initialData?: {
       router.push("/");
       toast.success("Logout successful");
       client.invalidateQueries({ queryKey: ["user.me"] });
+      client.invalidateQueries({ queryKey: ["me.projects"] });
       window.location.reload();
     } catch (error) {
       console.error("Logout error:", error);
       clearAuthDataFallback();
       removeCurrentRoute();
       client.setQueryData(["user.me"], { user: null, errCode: null });
+      client.invalidateQueries({ queryKey: ["user.me"] });
+      client.invalidateQueries({ queryKey: ["me.projects"] });
       router.push("/");
       toast.success("Logout successful");
       window.location.reload();
@@ -133,6 +149,8 @@ export const useUser = (initialData?: {
 
   return {
     user,
+    projects,
+    setProjects,
     errCode,
     loading: isLoading || loadingAuth,
     openLoginWindow,