fix(templates): real per-category counts in sidebar (drop hardcoded 418/851)

Category badges now show the live template count per category computed from the
catalog (0 → no badge), instead of hardcoded demo numbers.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/components/templates/video/VideoTemplatesCategorySidebar.tsx

@@ -29,11 +29,10 @@ const SIDEBAR_CATEGORIES: {
   id: VideoSidebarCategoryId;
   labelKey: string;
   icon: ComponentType<{ className?: string }>;
-  count?: number;
 }[] = [
   { id: "all", labelKey: "categoryAll", icon: LayoutGrid },
-  { id: "animation", labelKey: "categoryAnimation", icon: Play, count: 418 },
-  { id: "intros", labelKey: "categoryIntros", icon: Clapperboard, count: 851 },
+  { id: "animation", labelKey: "categoryAnimation", icon: Play },
+  { id: "intros", labelKey: "categoryIntros", icon: Clapperboard },
   { id: "editing", labelKey: "categoryEditing", icon: Scissors },
   { id: "invitation", labelKey: "categoryInvitation", icon: Mail },
   { id: "holiday", labelKey: "categoryHoliday", icon: Gift },
@@ -54,6 +53,8 @@ interface VideoTemplatesCategorySidebarProps {
   onAspectRatioChange: (value: AspectRatioFilter) => void;
   showFilters: boolean;
   onToggleFilters: () => void;
+  /** Live template count per category id (+ "all"), computed from the catalog. */
+  counts?: Record<string, number>;
 }
 
 export function VideoTemplatesCategorySidebar({
@@ -65,6 +66,7 @@ export function VideoTemplatesCategorySidebar({
   onAspectRatioChange,
   showFilters,
   onToggleFilters,
+  counts,
 }: VideoTemplatesCategorySidebarProps) {
   const t = useTranslations("auto.componentsTemplatesVideoVideoTemplatesCategorySidebar");
   return (
@@ -93,9 +95,9 @@ export function VideoTemplatesCategorySidebar({
                   aria-hidden
                 />
                 <span className="min-w-0 flex-1 truncate text-start">{t(category.labelKey)}</span>
-                {category.count !== undefined ? (
+                {counts?.[category.id] ? (
                   <span className="ms-auto rounded bg-gray-100 px-1.5 py-0.5 text-[11px] text-gray-500">
-                    {category.count}
+                    {counts[category.id].toLocaleString()}
                   </span>
                 ) : null}
               </button>

src/components/templates/video/VideoTemplatesPageContent.tsx

@@ -66,6 +66,15 @@ export function VideoTemplatesPageContent({
   // Real admin-sourced templates only — no hardcoded demo fallback.
   const catalog = initialCatalog ?? [];
 
+  // Live template count per sidebar category (+ total), computed from the catalog.
+  const categoryCounts = useMemo(() => {
+    const counts: Record<string, number> = { all: catalog.length };
+    for (const tpl of catalog) {
+      counts[tpl.videoCategory] = (counts[tpl.videoCategory] ?? 0) + 1;
+    }
+    return counts;
+  }, [catalog]);
+
   const filtered = useMemo(
     () =>
       filterVideoCatalog(catalog, {
@@ -120,6 +129,7 @@ export function VideoTemplatesPageContent({
             onAspectRatioChange={setAspectRatio}
             showFilters={showFilters}
             onToggleFilters={() => setShowFilters((v) => !v)}
+            counts={categoryCounts}
           />
         </aside>