From a2e51bde49b4349e78b5a2411a2250376f3945e1 Mon Sep 17 00:00:00 2001
From: moutaz <59752006+moutazsalah@users.noreply.github.com>
Date: Sun, 26 Apr 2026 14:09:16 +0200
Subject: [PATCH] fix(additional-info): move empty string filtering to renderer
 level

---
 .../builder/forms/additional-form.tsx         |  2 +-
 .../builder/highlighted-resume-view.tsx       | 12 +++++++++---
 .../resume/resume-modern-two-column.tsx       | 19 +++++++++++++++----
 .../components/resume/resume-modern.tsx       | 16 ++++++++++++----
 .../resume/resume-single-column.tsx           | 16 ++++++++++++----
 .../components/resume/resume-two-column.tsx   | 16 ++++++++++++----
 6 files changed, 61 insertions(+), 20 deletions(-)

diff --git a/apps/frontend/components/builder/forms/additional-form.tsx b/apps/frontend/components/builder/forms/additional-form.tsx
index 8e9398e80..37f2726da 100644
--- a/apps/frontend/components/builder/forms/additional-form.tsx
+++ b/apps/frontend/components/builder/forms/additional-form.tsx
@@ -17,7 +17,7 @@ export const AdditionalForm: React.FC<AdditionalFormProps> = ({ data, onChange }
   // Helper to handle array conversions (text -> string[])
   const handleArrayChange = (field: keyof AdditionalInfo, value: string) => {
     // Split by newlines only (preserving spaces within items)
-    const items = value.split('\n').filter((item) => item.trim() !== '');
+    const items = value.split('\n');
     onChange({
       ...data,
       [field]: items,
diff --git a/apps/frontend/components/builder/highlighted-resume-view.tsx b/apps/frontend/components/builder/highlighted-resume-view.tsx
index 1f0e3da13..b8527ae5b 100644
--- a/apps/frontend/components/builder/highlighted-resume-view.tsx
+++ b/apps/frontend/components/builder/highlighted-resume-view.tsx
@@ -134,7 +134,9 @@ export function HighlightedResumeView({ resumeData, keywords }: HighlightedResum
                     {t('resume.additional.technicalSkills')}
                   </div>
                   <div className="flex flex-wrap gap-1">
-                    {resumeData.additional.technicalSkills.map((skill, i) => (
+                    {resumeData.additional.technicalSkills
+                    .filter((skill) => skill.trim() !== '')
+                    .map((skill, i) => (
                       <SkillTag key={i} text={skill} keywords={keywords} />
                     ))}
                   </div>
@@ -147,7 +149,9 @@ export function HighlightedResumeView({ resumeData, keywords }: HighlightedResum
                   {t('resume.sections.languages')}
                 </div>
                 <div className="flex flex-wrap gap-1">
-                  {resumeData.additional.languages.map((lang, i) => (
+                  {resumeData.additional.languages
+                  .filter((lang) => lang.trim() !== '')
+                  .map((lang, i) => (
                     <SkillTag key={i} text={lang} keywords={keywords} />
                   ))}
                 </div>
@@ -161,7 +165,9 @@ export function HighlightedResumeView({ resumeData, keywords }: HighlightedResum
                     {t('resume.sections.certifications')}
                   </div>
                   <ul className="list-disc list-inside space-y-1 text-sm">
-                    {resumeData.additional.certificationsTraining.map((cert, i) => (
+                    {resumeData.additional.certificationsTraining
+                    .filter((cert) => cert.trim() !== '')
+                    .map((cert, i) => (
                       <li key={i} className="text-ink-soft">
                         <HighlightedText text={cert} keywords={keywords} />
                       </li>
diff --git a/apps/frontend/components/resume/resume-modern-two-column.tsx b/apps/frontend/components/resume/resume-modern-two-column.tsx
index 030cb09a8..5e622fc44 100644
--- a/apps/frontend/components/resume/resume-modern-two-column.tsx
+++ b/apps/frontend/components/resume/resume-modern-two-column.tsx
@@ -306,7 +306,9 @@ export const ResumeModernTwoColumn: React.FC<ResumeModernTwoColumnProps> = ({
               <div className={baseStyles['resume-section']}>
                 <h3 className={styles.sectionTitleAccent}>{headingFallbacks.certifications}</h3>
                 <ul className={`ml-4 ${baseStyles['resume-list']} ${baseStyles['resume-text-xs']}`}>
-                  {additional.certificationsTraining.map((cert, index) => (
+                  {additional.certificationsTraining
+                                     .filter((cert) => cert.trim() !== '')
+                  .map((cert, index) => (
                     <li key={index} className="flex">
                       <span className="mr-1.5 flex-shrink-0">•&nbsp;</span>
                       <span>{cert}</span>
@@ -371,7 +373,9 @@ export const ResumeModernTwoColumn: React.FC<ResumeModernTwoColumnProps> = ({
                   {headingFallbacks.skills}
                 </h3>
                 <div className="flex flex-wrap gap-1">
-                  {additional.technicalSkills.map((skill, index) => (
+                  {additional.technicalSkills
+                   .filter((skill) => skill.trim() !== '')
+                  .map((skill, index) => (
                     <span key={index} className={baseStyles['resume-skill-pill']}>
                       {skill}
                     </span>
@@ -390,8 +394,12 @@ export const ResumeModernTwoColumn: React.FC<ResumeModernTwoColumnProps> = ({
                 >
                   {headingFallbacks.languages}
                 </h3>
-                <p className={baseStyles['resume-text-xs']}>{additional.languages.join(' • ')}</p>
+                <p className={baseStyles['resume-text-xs']}>
+  {additional.languages.filter((language) => language.trim() !== '').join(' • ')}
+</p>
               </div>
+
+              
             )}
 
           {/* Awards Section */}
@@ -403,7 +411,10 @@ export const ResumeModernTwoColumn: React.FC<ResumeModernTwoColumnProps> = ({
                 {headingFallbacks.awards}
               </h3>
               <ul className={baseStyles['resume-list']}>
-                {additional.awards.map((award, index) => (
+                {additional.awards
+
+                .filter((award) => award.trim() !== '')
+                .map((award, index) => (
                   <li key={index} className={baseStyles['resume-text-xs']}>
                     {award}
                   </li>
diff --git a/apps/frontend/components/resume/resume-modern.tsx b/apps/frontend/components/resume/resume-modern.tsx
index 33be6e532..02fc4e3d4 100644
--- a/apps/frontend/components/resume/resume-modern.tsx
+++ b/apps/frontend/components/resume/resume-modern.tsx
@@ -396,25 +396,33 @@ const AdditionalSection: React.FC<{
         {technicalSkills.length > 0 && (
           <div className="flex">
             <span className="font-bold w-32 shrink-0">{mergedLabels.technicalSkills}</span>
-            <span>{technicalSkills.join(', ')}</span>
+            <span>{technicalSkills
+            .filter((skill) => skill.trim() !== '')
+            .join(', ')}</span>
           </div>
         )}
         {languages.length > 0 && (
           <div className="flex">
             <span className="font-bold w-32 shrink-0">{mergedLabels.languages}</span>
-            <span>{languages.join(', ')}</span>
+            <span>{languages
+            .filter((language) => language.trim() !== '')
+            .join(', ')}</span>
           </div>
         )}
         {certificationsTraining.length > 0 && (
           <div className="flex">
             <span className="font-bold w-32 shrink-0">{mergedLabels.certifications}</span>
-            <span>{certificationsTraining.join(', ')}</span>
+            <span>{certificationsTraining
+            .filter((cert) => cert.trim() !== '')
+            .join(', ')}</span>
           </div>
         )}
         {awards.length > 0 && (
           <div className="flex">
             <span className="font-bold w-32 shrink-0">{mergedLabels.awards}</span>
-            <span>{awards.join(', ')}</span>
+            <span>{awards
+            .filter((award) => award.trim() !== '')
+            .join(', ')}</span>
           </div>
         )}
       </div>
diff --git a/apps/frontend/components/resume/resume-single-column.tsx b/apps/frontend/components/resume/resume-single-column.tsx
index 39a7f5bc9..ef3d58747 100644
--- a/apps/frontend/components/resume/resume-single-column.tsx
+++ b/apps/frontend/components/resume/resume-single-column.tsx
@@ -394,25 +394,33 @@ const AdditionalSection: React.FC<{
         {technicalSkills.length > 0 && (
           <div className="flex">
             <span className="font-bold w-32 shrink-0">{mergedLabels.technicalSkills}</span>
-            <span>{technicalSkills.join(', ')}</span>
+            <span>{technicalSkills
+            .filter((skill) => skill.trim() !== '')
+            .join(', ')}</span>
           </div>
         )}
         {languages.length > 0 && (
           <div className="flex">
             <span className="font-bold w-32 shrink-0">{mergedLabels.languages}</span>
-            <span>{languages.join(', ')}</span>
+            <span>{languages
+            .filter((language) => language.trim() !== '')
+            .join(', ')}</span>
           </div>
         )}
         {certificationsTraining.length > 0 && (
           <div className="flex">
             <span className="font-bold w-32 shrink-0">{mergedLabels.certifications}</span>
-            <span>{certificationsTraining.join(', ')}</span>
+            <span>{certificationsTraining
+            .filter((cert) => cert.trim() !== '')
+            .join(', ')}</span>
           </div>
         )}
         {awards.length > 0 && (
           <div className="flex">
             <span className="font-bold w-32 shrink-0">{mergedLabels.awards}</span>
-            <span>{awards.join(', ')}</span>
+            <span>{awards
+            .filter((award) => award.trim() !== '')
+            .join(', ')}</span>
           </div>
         )}
       </div>
diff --git a/apps/frontend/components/resume/resume-two-column.tsx b/apps/frontend/components/resume/resume-two-column.tsx
index d7e37d145..dc21cfa1c 100644
--- a/apps/frontend/components/resume/resume-two-column.tsx
+++ b/apps/frontend/components/resume/resume-two-column.tsx
@@ -343,7 +343,9 @@ export const ResumeTwoColumn: React.FC<ResumeTwoColumnProps> = ({
                   {headingFallbacks.certifications}
                 </h3>
                 <ul className={`ml-4 ${baseStyles['resume-list']} ${baseStyles['resume-text-xs']}`}>
-                  {additional.certificationsTraining.map((cert, index) => (
+                  {additional.certificationsTraining
+                  .filter((cert) => cert.trim() !== '')
+                  .map((cert, index) => (
                     <li key={index} className="flex">
                       <span className="mr-1.5 flex-shrink-0">•&nbsp;</span>
                       <span>{cert}</span>
@@ -402,7 +404,9 @@ export const ResumeTwoColumn: React.FC<ResumeTwoColumnProps> = ({
               <div className={baseStyles['resume-section']}>
                 <h3 className={baseStyles['resume-section-title-sm']}>{headingFallbacks.skills}</h3>
                 <div className="flex flex-wrap gap-1">
-                  {additional.technicalSkills.map((skill, index) => (
+                  {additional.technicalSkills
+                  .filter((skill) => skill.trim() !== '')
+                  .map((skill, index) => (
                     <span key={index} className={baseStyles['resume-skill-pill']}>
                       {skill}
                     </span>
@@ -419,7 +423,9 @@ export const ResumeTwoColumn: React.FC<ResumeTwoColumnProps> = ({
                 <h3 className={baseStyles['resume-section-title-sm']}>
                   {headingFallbacks.languages}
                 </h3>
-                <p className={baseStyles['resume-text-xs']}>{additional.languages.join(' • ')}</p>
+                <p className={baseStyles['resume-text-xs']}>{additional.languages
+                .filter((language) => language.trim() !== '')
+                .join(' • ')}</p>
               </div>
             )}
 
@@ -428,7 +434,9 @@ export const ResumeTwoColumn: React.FC<ResumeTwoColumnProps> = ({
             <div className={baseStyles['resume-section']}>
               <h3 className={baseStyles['resume-section-title-sm']}>{headingFallbacks.awards}</h3>
               <ul className={baseStyles['resume-list']}>
-                {additional.awards.map((award, index) => (
+                {additional.awards
+                .filter((award) => award.trim() !== '')
+                .map((award, index) => (
                   <li key={index} className={baseStyles['resume-text-xs']}>
                     {award}
                   </li>