generate theme without login

src/app/(private)/layout.tsx

@@ -5,7 +5,7 @@ export default async function PrivateLayout({
 }: {
   children: React.ReactNode
 }) {
-  auth().protect()
+  // auth().protect()
 
   return <section>{children}</section>
 }

src/app/(private)/saved-themes/page.tsx

@@ -7,6 +7,8 @@ export default async function SavedThemesPage() {
   const { userId } = auth()
   const themes = userId ? await getThemesByUserId(userId) : []
 
+  auth().protect()
+
   return (
     <main className="mx-auto p-20">
       {themes.length === 0 ? (

src/components/Navigation.tsx

@@ -17,8 +17,8 @@ const Navigation = () => {
         </Link>
         <div className="flex gap-4 items-center ">
           <Link href="/discover">Discover</Link>
+          <Link href="/generator">Create</Link>
           <SignedIn>
-            <Link href="/generator">Create</Link>
             <Link href="/saved-themes">Your Themes</Link>
             <UserButton />
           </SignedIn>

src/components/ThemeLoader.tsx

@@ -47,6 +47,8 @@ export const ThemeLoader: React.FC<ThemeLoaderProps> = ({
     }
   }, [currentThemeId, handleLoad])
 
+  if (savedThemes.length === 0) return null
+
   return (
     <div className="flex gap-4">
       <div className="flex-1">

src/components/ThemeSaver.tsx

@@ -61,8 +61,10 @@ const ThemeSaver: React.FC<ThemeSaverProps> = ({
   }
 
   const handleSave = () => {
-    if (!user) return
-
+    if (!user) {
+      alert('You must be logged in to save and/or download created themes.')
+      return
+    }
     startTransition(async () => {
       if (currentThemeId) {
         // Handle update case
@@ -147,6 +149,7 @@ const ThemeSaver: React.FC<ThemeSaverProps> = ({
           checked={isPublic}
           onCheckedChange={(checked) => handlePublicToggle(checked)}
           id="public-switch"
+          disabled={!user}
         />
         <label htmlFor="public-switch">Make theme public</label>
       </div>

src/middleware.ts

@@ -2,7 +2,7 @@ import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server'
 
 // Define routes that should be protected
 const isProtectedRoute = createRouteMatcher([
-  '/generator(.*)',
+  // '/generator(.*)',
   '/saved-themes(.*)',
 ]) // Protect generator and its subroutes