handle private project

app/api/me/projects/[namespace]/[repoId]/route.ts

@@ -169,6 +169,7 @@ export async function GET(
         project: {
           id: space.id,
           space_id: space.name,
+          private: space.private,
           _updatedAt: space.updatedAt,
         },
         pages: htmlFiles,

app/api/me/route.ts

@@ -31,7 +31,6 @@ export async function GET() {
     }
   })) {
     if (
-      !space.private &&
       space.sdk === "static" &&
       Array.isArray((space.cardData as { tags?: string[] })?.tags) &&
       (

components/editor/header/index.tsx

@@ -1,4 +1,4 @@
-import { ArrowRight, HelpCircle, RefreshCcw } from "lucide-react";
+import { ArrowRight, HelpCircle, RefreshCcw, Lock } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
 
@@ -10,9 +10,17 @@ import { UserMenu } from "@/components/user-menu";
 import { SwitchDevice } from "@/components/editor/switch-devide";
 import { SwitchTab } from "./switch-tab";
 import { History } from "@/components/editor/history";
+import { useEditor } from "@/hooks/useEditor";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 export function Header() {
+  const { project } = useEditor();
   const { user, openLoginWindow } = useUser();
+  console.log(project);
   return (
     <header className="border-b bg-neutral-950 dark:border-neutral-800 grid grid-cols-3 lg:flex items-center max-lg:gap-3 justify-between z-20">
       <div className="flex items-center justify-between lg:max-w-[600px] lg:w-full py-2 px-2 lg:px-3 lg:pl-6 gap-3">
@@ -72,14 +80,33 @@ export function Header() {
             </Button>
           </Link>
         </div>
-        {user ? (
-          <UserMenu className="!pl-1 !pr-3 !py-1 !h-auto" />
-        ) : (
-          <Button size="sm" onClick={openLoginWindow}>
-            Start Vibe Coding
-            <ArrowRight className="size-4" />
-          </Button>
-        )}
+        <div className="flex items-center gap-2">
+          {project?.private && (
+            <Tooltip>
+              <TooltipTrigger>
+                <div className="max-lg:hidden flex items-center gap-1.5 bg-amber-500/10 backdrop-blur-sm px-3 py-1.5 rounded-full border border-amber-500/20 shadow-lg">
+                  <Lock className="w-3 h-3 text-amber-500" />
+                  <span className="text-amber-500 text-xs font-medium tracking-wide">
+                    Private Project
+                  </span>
+                </div>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p className="text-xs">
+                  This project is private. Only you can see it.
+                </p>
+              </TooltipContent>
+            </Tooltip>
+          )}
+          {user ? (
+            <UserMenu className="!pl-1 !pr-3 !py-1 !h-auto" />
+          ) : (
+            <Button size="sm" onClick={openLoginWindow}>
+              Start Vibe Coding
+              <ArrowRight className="size-4" />
+            </Button>
+          )}
+        </div>
       </div>
     </header>
   );

components/editor/preview/index.tsx

@@ -49,6 +49,116 @@ export const Preview = ({ isNew }: { isNew: boolean }) => {
     : "";
 
   const iframeRef = useRef<HTMLIFrameElement>(null);
+
+  // For private projects, use srcDoc instead of proxy URL
+  const shouldUseCustomIframe = project?.private && currentPageData?.html;
+
+  // Inject event handling script for private projects
+  const injectInteractivityScript = (html: string) => {
+    const interactivityScript = `
+      <script>        
+        // Add event listeners and communicate with parent
+        document.addEventListener('DOMContentLoaded', function() {
+          let hoveredElement = null;
+          let isEditModeEnabled = false;
+          
+          document.addEventListener('mouseover', function(event) {
+            if (event.target !== document.body && event.target !== document.documentElement) {
+              hoveredElement = event.target;
+              
+              const rect = event.target.getBoundingClientRect();
+              const message = {
+                type: 'ELEMENT_HOVERED',
+                data: {
+                  tagName: event.target.tagName,
+                  rect: {
+                    top: rect.top,
+                    left: rect.left,
+                    width: rect.width,
+                    height: rect.height
+                  },
+                  element: event.target.outerHTML
+                }
+              };
+              parent.postMessage(message, '*');
+            }
+          });
+          
+          document.addEventListener('mouseout', function(event) {
+            hoveredElement = null;
+            
+            parent.postMessage({
+              type: 'ELEMENT_MOUSE_OUT'
+            }, '*');
+          });
+          
+          // Handle clicks - prevent default only in edit mode
+          document.addEventListener('click', function(event) {
+            if (isEditModeEnabled) {
+              event.preventDefault();
+              event.stopPropagation();
+              
+              const rect = event.target.getBoundingClientRect();
+              parent.postMessage({
+                type: 'ELEMENT_CLICKED',
+                data: {
+                  tagName: event.target.tagName,
+                  rect: {
+                    top: rect.top,
+                    left: rect.left,
+                    width: rect.width,
+                    height: rect.height
+                  },
+                  element: event.target.outerHTML
+                }
+              }, '*');
+            }
+          });
+          
+          // Prevent form submissions when in edit mode
+          document.addEventListener('submit', function(event) {
+            if (isEditModeEnabled) {
+              event.preventDefault();
+              event.stopPropagation();
+            }
+          });
+          
+          // Prevent other navigation events when in edit mode
+          document.addEventListener('keydown', function(event) {
+            if (isEditModeEnabled && event.key === 'Enter' && (event.target.tagName === 'A' || event.target.tagName === 'BUTTON')) {
+              event.preventDefault();
+              event.stopPropagation();
+            }
+          });
+          
+          // Listen for messages from parent
+          window.addEventListener('message', function(event) {
+            if (event.data.type === 'ENABLE_EDIT_MODE') {
+              isEditModeEnabled = true;
+              document.body.style.userSelect = 'none';
+              document.body.style.pointerEvents = 'auto';
+            } else if (event.data.type === 'DISABLE_EDIT_MODE') {
+              isEditModeEnabled = false;
+              document.body.style.userSelect = '';
+              document.body.style.pointerEvents = '';
+            }
+          });
+          
+          // Notify parent that script is ready
+          parent.postMessage({
+            type: 'PROXY_SCRIPT_READY'
+          }, '*');
+        });
+      </script>
+    `;
+
+    // Inject the script before closing body tag, or at the end if no body tag
+    if (html.includes("</body>")) {
+      return html.replace("</body>", `${interactivityScript}</body>`);
+    } else {
+      return html + interactivityScript;
+    }
+  };
   const [hoveredElement, setHoveredElement] = useState<{
     tagName: string;
     rect: { top: number; left: number; width: number; height: number };
@@ -130,7 +240,12 @@ export const Preview = ({ isNew }: { isNew: boolean }) => {
     if (!isEditableModeEnabled) {
       setHoveredElement(null);
     }
-  }, [isEditableModeEnabled, project?.space_id]);
+  }, [
+    isEditableModeEnabled,
+    project?.space_id,
+    shouldUseCustomIframe,
+    currentPageData?.html,
+  ]);
 
   const promoteVersion = async () => {
     setIsPromotingVersion(true);
@@ -196,7 +311,8 @@ export const Preview = ({ isNew }: { isNew: boolean }) => {
         />
       ) : iframeSrc === "" ||
         isLoadingProject ||
-        (isAiWorking && iframeSrc == "") ? (
+        (isAiWorking && iframeSrc == "") ||
+        (shouldUseCustomIframe && !currentPageData?.html) ? (
         <div className="w-full h-full flex items-center justify-center relative">
           <div className="py-10 w-full relative z-1 max-w-3xl mx-auto text-center">
             <AiLoading
@@ -229,7 +345,13 @@ export const Preview = ({ isNew }: { isNew: boolean }) => {
                   device === "mobile",
               }
             )}
-            src={iframeSrc}
+            {...(shouldUseCustomIframe
+              ? {
+                  srcDoc: injectInteractivityScript(
+                    currentPageData?.html || ""
+                  ),
+                }
+              : { src: iframeSrc })}
             allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; clipboard-read; clipboard-write; display-capture; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; serial; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking"
           />
           <div

components/my-projects/project-card.tsx

@@ -1,6 +1,6 @@
 import Link from "next/link";
 import { formatDistance } from "date-fns";
-import { EllipsisVertical, Settings, Trash } from "lucide-react";
+import { EllipsisVertical, Lock, Settings, Trash } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
 import {
@@ -37,6 +37,14 @@ export function ProjectCard({
       onDelete();
     }
   };
+  // from-gray-600 to-gray-600
+  // from-blue-600 to-blue-600
+  // from-green-600 to-green-600
+  // from-yellow-600 to-yellow-600
+  // from-purple-600 to-purple-600
+  // from-pink-600 to-pink-600
+  // from-red-600 to-red-600
+  // from-orange-600 to-orange-600
 
   return (
     <div className="text-neutral-200 space-y-4 group cursor-pointer">
@@ -44,16 +52,30 @@ export function ProjectCard({
         href={`/projects/${project.name}`}
         className="relative bg-neutral-900 rounded-2xl overflow-hidden h-64 lg:h-44 w-full flex items-center justify-end flex-col px-3 border border-neutral-800"
       >
-        <div className="absolute inset-0 w-full h-full overflow-hidden">
-          <iframe
-            src={`/api/proxy/?spaceId=${encodeURIComponent(project.name)}`}
-            className="w-[1200px] h-[675px] border-0 origin-top-left"
-            style={{
-              transform: "scale(0.5)",
-              transformOrigin: "top left",
-            }}
-          />
-        </div>
+        {project.private ? (
+          <div
+            className={`absolute inset-0 w-full h-full flex items-center justify-center bg-gradient-to-br from-${project.cardData?.colorFrom}-600 to-${project.cardData?.colorTo}-600`}
+          >
+            <div className="absolute top-3 right-3 flex items-center gap-1.5 bg-black/60 backdrop-blur-sm px-3 py-1.5 rounded-full border border-white/10 shadow-lg">
+              <Lock className="w-3 h-3 text-white/90" />
+              <span className="text-white/90 text-xs font-medium tracking-wide">
+                Private
+              </span>
+            </div>
+            <p className="text-4xl">{project.cardData?.emoji}</p>
+          </div>
+        ) : (
+          <div className="absolute inset-0 w-full h-full overflow-hidden">
+            <iframe
+              src={`/api/proxy/?spaceId=${encodeURIComponent(project.name)}`}
+              className="w-[1200px] h-[675px] border-0 origin-top-left"
+              style={{
+                transform: "scale(0.5)",
+                transformOrigin: "top left",
+              }}
+            />
+          </div>
+        )}
 
         <Button
           variant="default"