Enhance HTMLContentRenderer and ToggleTableRow for improved content handling and metadata display

- Updated HTMLContentRenderer to directly utilize HTML from content objects.
- Modified ToggleTableRow to extract and display content metadata, including primary and secondary keywords, tags, categories, and meta descriptions.
- Refactored badge rendering logic for better organization and clarity in the UI.
- Improved content fallback mechanisms in the Content page for better user experience.

frontend/src/pages/Writer/Content.tsx

@@ -43,7 +43,14 @@ export default function Content() {
       minute: 'numeric',
     });
 
-  const renderBadgeList = (items?: string[], emptyLabel = '-') => {
+  const getList = (primary?: string[], fallback?: any): string[] => {
+    if (primary && primary.length > 0) return primary;
+    if (!fallback) return [];
+    if (Array.isArray(fallback)) return fallback;
+    return [];
+  };
+
+  const renderBadgeList = (items: string[], emptyLabel = '-') => {
     if (!items || items.length === 0) {
       return <span className="text-gray-400 dark:text-gray-500">{emptyLabel}</span>;
     }
@@ -112,11 +119,18 @@ export default function Content() {
             <tbody className="divide-y divide-gray-200 dark:divide-white/[0.05]">
               {content.map((item) => {
                 const isExpanded = expandedId === item.id;
-                return (
+    const secondaryKeywords = getList(
+      item.secondary_keywords,
+      item.metadata?.secondary_keywords
+    );
+    const tags = getList(item.tags, item.metadata?.tags);
+    const categories = getList(item.categories, item.metadata?.categories);
+
+    return (
                   <tr key={item.id} className="bg-white dark:bg-gray-900">
                     <td className="px-5 py-4 align-top">
                       <div className="font-medium text-gray-900 dark:text-white">
-                        {item.meta_title || item.title || `Task #${item.task}`}
+            {item.meta_title || item.title || item.task_title || `Task #${item.task}`}
                       </div>
                       {item.meta_description && (
                         <div className="mt-1 text-sm text-gray-500 dark:text-gray-400 line-clamp-2">
@@ -134,13 +148,13 @@ export default function Content() {
                       )}
                     </td>
                     <td className="px-5 py-4 align-top">
-                      {renderBadgeList(item.secondary_keywords)}
+          {renderBadgeList(secondaryKeywords)}
                     </td>
                     <td className="px-5 py-4 align-top">
-                      {renderBadgeList(item.tags)}
+          {renderBadgeList(tags)}
                     </td>
                     <td className="px-5 py-4 align-top">
-                      {renderBadgeList(item.categories)}
+          {renderBadgeList(categories)}
                     </td>
                     <td className="px-5 py-4 align-top text-gray-700 dark:text-gray-300">
                       {item.word_count?.toLocaleString?.() ?? '-'}