Only fetch all themes if user is authed

components/editor/action-bar/action-bar.tsx

@@ -68,7 +68,7 @@ export function ActionBar() {
         theme_id: theme?.id,
         theme_name: theme?.name,
       });
-      applyThemePreset(theme?.id);
+      applyThemePreset(theme?.id || themeState.preset || "default");
       setTimeout(() => {
         if (!theme) return;
         setSaveDialogOpen(false);

components/editor/editor.tsx

@@ -11,6 +11,8 @@ import { EditorConfig } from "@/types/editor";
 import { Theme, ThemeStyles } from "@/types/theme";
 import { Sliders } from "lucide-react";
 import { useEditorStore } from "@/store/editor-store";
+import { useThemePresetStore } from "@/store/theme-preset-store";
+import { authClient } from "@/lib/auth-client";
 
 interface EditorProps {
   config: EditorConfig;
@@ -36,6 +38,19 @@ const Editor: React.FC<EditorProps> = ({ config, themePromise }) => {
   const Controls = config.controls;
   const Preview = config.preview;
 
+  const loadSavedPresets = useThemePresetStore(
+    (state) => state.loadSavedPresets
+  );
+
+  const { data: session } = authClient.useSession();
+
+  useEffect(() => {
+    if (session?.user) {
+      console.log("EXXX");
+      loadSavedPresets();
+    }
+  }, [loadSavedPresets, session?.user]);
+
   const initialTheme = themePromise ? use(themePromise) : null;
 
   const handleStyleChange = React.useCallback(

components/editor/theme-control-panel.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { use, useEffect } from "react";
+import React, { use } from "react";
 import { ThemeEditorControlsProps, ThemeStyleProps } from "@/types/theme";
 import ControlSection from "./control-section";
 import ColorPicker from "./color-picker";
@@ -39,13 +39,6 @@ const ThemeControlPanel = ({
 }: ThemeEditorControlsProps) => {
   const { applyThemePreset, themeState } = useEditorStore();
   const presets = useThemePresetStore((state) => state.getAllPresets());
-  const loadSavedPresets = useThemePresetStore(
-    (state) => state.loadSavedPresets
-  );
-
-  useEffect(() => {
-    loadSavedPresets();
-  }, [loadSavedPresets]);
 
   const currentStyles = React.useMemo(
     () => ({

types/theme.ts

@@ -78,7 +78,10 @@ export type ThemePreset = {
   source?: "SAVED" | "BUILT_IN";
   createdAt?: string;
   label?: string;
-  styles: ThemeStyles;
+  styles: {
+    light: Partial<ThemeStyleProps>;
+    dark: Partial<ThemeStyleProps>;
+  };
 };
 
 export type Theme = InferSelectModel<typeof theme>;

utils/theme-presets.ts

@@ -1,5 +1,4 @@
-import { defaultThemeState } from "../config/theme";
-import { ThemePreset, ThemeStyles } from "../types/theme";
+import { ThemePreset } from "../types/theme";
 
 export const defaultPresets: Record<string, ThemePreset> = {
   "modern-minimal": {