fix: custom fonts theme issues

electron/servers/nextjs/app/(presentation-generator)/(dashboard)/templates/components/TemplatePanel.tsx

@@ -114,7 +114,7 @@ const InbuiltTemplateCard = React.memo(function InbuiltTemplateCard({
             onClick={handleOpen}
         >
             <span className="text-xs font-syne absolute top-2 flex gap-1 capitalize  items-center left-2 rounded-[100px]  px-2.5 py-1 bg-[#3A3A3AF5] text-white font-semibold  z-40">
-                Layouts- {template.layouts.length}
+                {template.layouts.length} {template.layouts.length === 1 ? 'Layout' : 'Layouts'}
             </span>
             <img src="/card_bg.svg" alt="" className="absolute top-0 left-0 w-full h-full object-cover" />
             <div className="p-5">
@@ -174,9 +174,6 @@ const LayoutPreview = () => {
 
     const handleOpenPreview = useCallback((id: string) => router.push(`/template-preview?slug=${id}`), [router]);
 
-
-
-
     const inbuiltTemplateCards = useMemo(
         () =>
             templates.map((template: TemplateLayoutsWithSettings) => (

electron/servers/nextjs/app/(presentation-generator)/(dashboard)/theme/components/ThemePanel/index.tsx

@@ -148,7 +148,13 @@ const ThemePanel: React.FC = () => {
     const loadUserFonts = async () => {
       try {
         const userFonts = await ThemeApi.getUserFonts()
-        setUserFonts(userFonts)
+        setUserFonts({
+          fonts: userFonts.fonts.map((font: any) => ({
+            name: font.name,
+            url: `${process.env.NEXT_PUBLIC_FAST_API}${font.url}`,
+          })),
+        })
+
       } catch (error: any) {
         console.error('Failed to load user fonts', error)
         toast.error(error?.message || 'Failed to load user fonts')
@@ -243,6 +249,8 @@ const ThemePanel: React.FC = () => {
       slideContainerRef.current!.style.setProperty('font-family', `"${theme.data.fonts.textFont.name}"`)
       slideContainerRef.current!.style.setProperty('--heading-font-family', `"${theme.data.fonts.textFont.name}"`)
       // Load font
+      console.log(theme.data.fonts)
+      console.log('userfonts', userFonts)
       useFontLoader({ [theme.data.fonts.textFont.name]: theme.data.fonts.textFont.url })
     }
   }
@@ -437,20 +445,21 @@ const ThemePanel: React.FC = () => {
   const handleCustomFontChange = async (fontFile: File) => {
     try {
       setIsFontUploading(true)
-      const { name, url } = await ThemeApi.uploadFont(fontFile)
+      const { font_name, font_url } = await ThemeApi.uploadFont(fontFile)
       setCustomFonts({
         textFont: {
-          name: name,
-          url: url,
+          name: font_name,
+          url: `${process.env.NEXT_PUBLIC_FAST_API}${font_url}`,
         }
       })
+
       // Add the newly uploaded font to userFonts if not already present
-      if (!userFonts.fonts.find(f => f.name === name)) {
+      if (!userFonts.fonts.find(f => f.name === font_name)) {
         setUserFonts(prev => ({
-          fonts: [...prev.fonts, { name, url }]
+          fonts: [...prev.fonts, { name: font_name, url: `${process.env.NEXT_PUBLIC_FAST_API}${font_url}` }]
         }))
       }
-      toast.success(`Font "${name}" uploaded successfully`)
+      toast.success(`Font "${font_name}" uploaded successfully`)
     } catch (error: any) {
       console.error('Failed to upload font', error)
       toast.error(error?.message || 'Failed to upload font')

electron/servers/nextjs/app/(presentation-generator)/custom-template/hooks/useFontManagement.ts

@@ -83,7 +83,7 @@ export const useFontManagement = () => {
         const formData = new FormData();
         formData.append("font_file", file);
 
-        const response = await fetch(getApiUrl("/api/v1/ppt/fonts/upload"), {
+        const response = await fetch(getApiUrl(`${process.env.NEXT_PUBLIC_FAST_API}/api/v1/ppt/fonts/upload`), {
           method: "POST",
           body: formData,
         });

electron/servers/nextjs/app/(presentation-generator)/services/api/theme.ts

@@ -90,8 +90,8 @@ class ThemeApi {
   static async uploadFont(font: File) {
     try {
       const formData = new FormData();
-      formData.append("file", font);
-      const response = await fetch(getApiUrl(`/api/v1/ppt/fonts/upload`), {
+      formData.append("font_file", font);
+      const response = await fetch(getApiUrl(`${process.env.NEXT_PUBLIC_FAST_API}/api/v1/ppt/fonts/upload`), {
         method: "POST",
         headers: getHeaderForFormData(),
         body: formData,
@@ -105,7 +105,7 @@ class ThemeApi {
   }
   static async getUserFonts() {
     try {
-      const response = await fetch(getApiUrl(`/api/v1/ppt/fonts/uploaded`), {
+      const response = await fetch(getApiUrl(`${process.env.NEXT_PUBLIC_FAST_API}/api/v1/ppt/fonts/uploaded`), {
         method: "GET",
         headers: getHeader(),
       })

electron/servers/nextjs/app/(presentation-generator)/upload/components/ConfigurationSelects.tsx

@@ -7,7 +7,7 @@ import {
 } from "@/components/ui/select";
 import { LanguageType, PresentationConfig, ToneType, VerbosityType } from "../type";
 import { useState } from "react";
-import { Check, ChevronsUpDown, GalleryVertical, Languages, SlidersHorizontal } from "lucide-react";
+import { Check, ChevronsUp, ChevronsUpDown, ChevronUp, GalleryVertical, Languages, SlidersHorizontal } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import {
     Command,
@@ -157,7 +157,7 @@ const LanguageSelect: React.FC<{
                         {value || "Select language"}
                     </span>
                 </span>
-                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                <ChevronUp className="ml-2 h-4 w-4 shrink-0 opacity-50" />
             </Button>
         </PopoverTrigger>
         <PopoverContent className="w-[300px] p-0" align="end">