feat: Registry theme support for saved themes

app/r/themes/[id]/route.ts

@@ -4,18 +4,24 @@ import { getTheme } from "@/actions/themes";
 import { generateThemeRegistryItemFromStyles } from "@/utils/registry/themes";
 import { registryItemSchema } from "shadcn/registry";
 
-// THIS IMPLEMENTATION WON'T WORK FOR PUBLIC THEMES.
-// since the user session is necessary to get the theme from the database
-export async function GET(_req: Request, { params }: { params: Promise<{ id: string }> }) {
+export async function GET(
+  _req: Request,
+  { params }: { params: Promise<{ id: string }> }
+) {
   const { id } = await params;
 
   try {
     const theme = await getTheme(id);
-    const generatedRegistryItem = generateThemeRegistryItemFromStyles(theme.name, theme.styles);
+    const generatedRegistryItem = generateThemeRegistryItemFromStyles(
+      theme.name,
+      theme.styles
+    );
 
     // Validate the generated registry item against the official shadcn registry item schema
     // https://ui.shadcn.com/docs/registry/registry-item-json
-    const parsedRegistryItem = registryItemSchema.safeParse(generatedRegistryItem);
+    const parsedRegistryItem = registryItemSchema.safeParse(
+      generatedRegistryItem
+    );
     if (!parsedRegistryItem.success) {
       console.error(
         "Could not parse the registry item from the database:",

components/editor/code-panel.tsx

@@ -1,6 +1,6 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { Button } from "@/components/ui/button";
-import { Copy, Check, AlertTriangle } from "lucide-react";
+import { Copy, Check } from "lucide-react";
 import { ThemeEditorState } from "@/types/editor";
 import { ScrollArea, ScrollBar } from "../ui/scroll-area";
 import { ColorFormat } from "../../types";
@@ -16,7 +16,6 @@ import { useEditorStore } from "@/store/editor-store";
 import { usePreferencesStore } from "@/store/preferences-store";
 import { generateThemeCode } from "@/utils/theme-style-generator";
 import { useThemePresetStore } from "@/store/theme-preset-store";
-import { Alert, AlertDescription, AlertTitle } from "../ui/alert";
 
 interface CodePanelProps {
   themeEditorState: ThemeEditorState;
@@ -50,7 +49,9 @@ const CodePanel: React.FC<CodePanelProps> = ({ themeEditorState }) => {
   );
 
   const getRegistryCommand = (preset: string) => {
-    const url = `https://tweakcn.com/r/themes/${preset}.json`;
+    const url = isSavedPreset
+      ? `https://tweakcn.com/r/themes/${preset}`
+      : `https://tweakcn.com/r/themes/${preset}.json`;
     switch (packageManager) {
       case "pnpm":
         return `pnpm dlx shadcn@latest add ${url}`;
@@ -102,7 +103,7 @@ const CodePanel: React.FC<CodePanelProps> = ({ themeEditorState }) => {
         <div className="flex items-center justify-between gap-2">
           <h2 className="text-lg font-semibold">Theme Code</h2>
         </div>
-        {preset && preset !== "default" && !isSavedPreset && (
+        {preset && preset !== "default" && (
           <div className="mt-4 rounded-md overflow-hidden border">
             <div className="flex border-b">
               {(["pnpm", "npm", "yarn", "bun"] as const).map((pm) => (
@@ -147,20 +148,6 @@ const CodePanel: React.FC<CodePanelProps> = ({ themeEditorState }) => {
             </div>
           </div>
         )}
-        {isSavedPreset && (
-          <Alert variant="default" className="mt-4">
-            <AlertTriangle className="h-4 w-4 mt-1" />
-            <AlertTitle className="flex items-center gap-2">
-              Registry commands are not supported for saved themes yet
-              <span className="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary text-primary-foreground hover:bg-primary/80">
-                Coming Soon
-              </span>
-            </AlertTitle>
-            <AlertDescription className="text-foreground/80">
-              You can still copy and use the theme code directly.
-            </AlertDescription>
-          </Alert>
-        )}
       </div>
       <div className="flex items-center gap-2 mb-4 ">
         <Select

lib/ai-theme-generator.ts

@@ -72,6 +72,7 @@ export function applyGeneratedTheme(themeStyles: Theme["styles"]) {
   if (!document.startViewTransition) {
     setThemeState({
       ...themeState,
+      preset: undefined,
       styles: {
         ...themeState.styles,
         light: { ...defaultThemeState.styles.light, ...themeStyles.light },
@@ -82,6 +83,7 @@ export function applyGeneratedTheme(themeStyles: Theme["styles"]) {
     document.startViewTransition(() => {
       setThemeState({
         ...themeState,
+        preset: undefined,
         styles: {
           ...themeState.styles,
           light: {