fix(home): 'use template' card opens template detail page (was → /templates)

Homepage TemplateGallery card called the old Supabase createVideoProject which
failed → fell back to /templates. Now it routes to /templates/{slug} (detail),
where the user picks aspect/style and starts the project. Removed dead handler/imports.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
soroush.asadi
2026-06-06 23:44:23 +03:30
parent 1aca734343
commit 99f0e9eab1
+8 -37
View File
@@ -1,6 +1,6 @@
"use client"; "use client";
import { useCallback, useState } from "react"; import { useState } from "react";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import Link from "next/link"; import Link from "next/link";
import { AnimatePresence, motion } from "framer-motion"; import { AnimatePresence, motion } from "framer-motion";
@@ -8,7 +8,6 @@ import { ArrowRight } from "lucide-react";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { createVideoProject } from "@/lib/create-video-project";
import type { AdminProject } from "@/lib/admin-api"; import type { AdminProject } from "@/lib/admin-api";
import { SectionReveal } from "./SectionReveal"; import { SectionReveal } from "./SectionReveal";
@@ -58,7 +57,6 @@ export function TemplateGallery({ className, adminItems }: TemplateGalleryProps)
const router = useRouter(); const router = useRouter();
const t = useTranslations("templates"); const t = useTranslations("templates");
const [activeTab, setActiveTab] = useState<FilterTab>("All"); const [activeTab, setActiveTab] = useState<FilterTab>("All");
const [usingTemplateId, setUsingTemplateId] = useState<string | null>(null);
// Real admin templates only — no hardcoded demo fallback. // Real admin templates only — no hardcoded demo fallback.
const allItems: TemplateItem[] = (adminItems ?? []).map(adminProjectToTemplateItem); const allItems: TemplateItem[] = (adminItems ?? []).map(adminProjectToTemplateItem);
@@ -74,38 +72,11 @@ export function TemplateGallery({ className, adminItems }: TemplateGalleryProps)
Business: t("tabBusiness"), Business: t("tabBusiness"),
}; };
const handleUseTemplate = useCallback( // "Use this template" → open the template detail page (where the user picks
async (template: TemplateItem) => { // aspect/style and starts an editable project). template.id is the slug.
if (usingTemplateId) return; const handleUseTemplate = (template: TemplateItem) => {
setUsingTemplateId(template.id); router.push(`/templates/${template.id}`);
};
// Image templates → create an image project (future)
// All others → video project
const isImage = template.category === "Images";
if (isImage) {
router.push("/dashboard");
setUsingTemplateId(null);
return;
}
const result = await createVideoProject({ name: template.name });
setUsingTemplateId(null);
if (!result.ok) {
// Dev mode: Supabase not configured → go to new-project onboarding
if (result.error.includes("Supabase is not configured")) {
router.push("/studio/video/new");
return;
}
// Any other failure (unauth, server error) → send to sign-in
router.push(`/auth?next=${encodeURIComponent("/templates")}`);
return;
}
router.push(`/studio/video/${result.projectId}`);
},
[router, usingTemplateId]
);
return ( return (
<section <section
@@ -172,8 +143,8 @@ export function TemplateGallery({ className, adminItems }: TemplateGalleryProps)
previewVideoUrl={template.previewVideoUrl} previewVideoUrl={template.previewVideoUrl}
previewSeed={template.id} previewSeed={template.id}
priority={filtered.indexOf(template) < 4} priority={filtered.indexOf(template) < 4}
onUseTemplate={() => void handleUseTemplate(template)} onUseTemplate={() => handleUseTemplate(template)}
isUsingTemplate={usingTemplateId === template.id} isUsingTemplate={false}
useTemplateLabel={t("useTemplate")} useTemplateLabel={t("useTemplate")}
openingLabel={t("opening")} openingLabel={t("opening")}
/> />