Merge branches 'release' and 'main' of github-jnsahaj:jnsahaj/tweakcn

src/components/editor/code-panel.tsx

@@ -13,6 +13,7 @@ import {
 } from "../ui/select";
 import { usePostHog } from "posthog-js/react";
 import { useEditorStore } from "@/store/editor-store";
+import { usePreferencesStore } from "@/store/preferences-store";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 
 interface CodePanelProps {
@@ -26,20 +27,23 @@ const CodePanel: React.FC<CodePanelProps> = ({
   themeEditorState,
   onCodePanelToggle,
 }) => {
-  const [colorFormat, setColorFormat] = useState<ColorFormat>("oklch");
-  const [tailwindVersion, setTailwindVersion] = useState<"3" | "4">("4");
-  const [packageManager, setPackageManager] = useState<
-    "pnpm" | "npm" | "yarn" | "bun"
-  >("pnpm");
   const [registryCopied, setRegistryCopied] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const posthog = usePostHog();
+  
+  const preset = useEditorStore((state) => state.themeState.preset);
+  const colorFormat = usePreferencesStore((state) => state.colorFormat);
+  const tailwindVersion = usePreferencesStore((state) => state.tailwindVersion);
+  const packageManager = usePreferencesStore((state) => state.packageManager);
+  const setColorFormat = usePreferencesStore((state) => state.setColorFormat);
+  const setTailwindVersion = usePreferencesStore((state) => state.setTailwindVersion);
+  const setPackageManager = usePreferencesStore((state) => state.setPackageManager);
+
   const code = config.codeGenerator.generateComponentCode(
     themeEditorState,
     colorFormat,
     tailwindVersion
   );
-  const [copied, setCopied] = useState(false);
-  const posthog = usePostHog();
-  const preset = useEditorStore((state) => state.themeState.preset);
 
   const getRegistryCommand = (preset: string) => {
     const url = `https://tweakcn.com/r/themes/${preset}.json`;
@@ -156,7 +160,9 @@ const CodePanel: React.FC<CodePanelProps> = ({
           value={tailwindVersion}
           onValueChange={(value: "3" | "4") => {
             setTailwindVersion(value);
-            setColorFormat(value === "4" ? "oklch" : "hsl");
+            if (value === "4" && colorFormat === "hsl") {
+              setColorFormat("oklch");
+            }
           }}
         >
           <SelectTrigger className="w-fit focus:ring-transparent focus:border-none bg-muted/50 outline-hidden border-none gap-1">

src/store/preferences-store.ts

@@ -0,0 +1,36 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+import { ColorFormat } from "@/types";
+
+type PackageManager = "pnpm" | "npm" | "yarn" | "bun";
+
+interface PreferencesStore {
+  tailwindVersion: "3" | "4";
+  colorFormat: ColorFormat;
+  packageManager: PackageManager;
+  setTailwindVersion: (version: "3" | "4") => void;
+  setColorFormat: (format: ColorFormat) => void;
+  setPackageManager: (pm: PackageManager) => void;
+}
+
+export const usePreferencesStore = create<PreferencesStore>()(
+  persist(
+    (set) => ({
+      tailwindVersion: "4",
+      colorFormat: "oklch",
+      packageManager: "pnpm",
+      setTailwindVersion: (version: "3" | "4") => {
+        set({ tailwindVersion: version });
+      },
+      setColorFormat: (format: ColorFormat) => {
+        set({ colorFormat: format });
+      },
+      setPackageManager: (pm: PackageManager) => {
+        set({ packageManager: pm });
+      },
+    }),
+    {
+      name: "preferences-storage", // unique name for localStorage
+    }
+  )
+);