112

frontend/src/config/pages/clusters.config.tsx

@@ -107,8 +107,8 @@ export const createClustersPageConfig = (
         sortField: 'name',
         render: (value: string, row: Cluster) => (
           <Link
-            to={`/clusters/${row.id}`}
-            className="font-medium text-brand-600 hover:text-brand-700 dark:text-brand-400 dark:hover:text-brand-300"
+            to={`/planner/clusters/${row.id}`}
+            className="text-base font-light text-brand-600 hover:text-brand-700 dark:text-brand-400 dark:hover:text-brand-300"
           >
             {value}
           </Link>

frontend/src/config/pages/content.config.tsx

@@ -104,12 +104,12 @@ export const createContentPageConfig = (
             {handlers.onRowClick ? (
               <button
                 onClick={() => handlers.onRowClick!(row)}
-                className="font-medium text-blue-500 hover:text-blue-600 hover:underline text-left transition-colors"
+                className="text-base font-light text-blue-500 hover:text-blue-600 hover:underline text-left transition-colors"
               >
                 {row.title || `Content #${row.id}`}
               </button>
             ) : (
-              <div className="font-medium text-gray-900 dark:text-white">
+              <div className="text-base font-light text-gray-900 dark:text-white">
                 {row.title || `Content #${row.id}`}
               </div>
             )}
@@ -178,24 +178,48 @@ export const createContentPageConfig = (
         },
       },
       {
-        key: 'taxonomy_terms',
+        key: 'tags',
         label: 'Tags',
         sortable: false,
         width: '150px',
         render: (_value: any, row: Content) => {
-          const taxonomyTerms = row.taxonomy_terms;
-          if (!taxonomyTerms || taxonomyTerms.length === 0) {
+          const tags = row.tags || [];
+          if (!tags || tags.length === 0) {
             return <span className="text-gray-400 dark:text-gray-500 text-[11px]">-</span>;
           }
           return (
             <div className="flex flex-wrap gap-1">
-              {taxonomyTerms.slice(0, 2).map((term) => (
-                <Badge key={term.id} color="pink" size="xs" variant="soft">
-                  <span className="text-[11px] font-normal">{term.name}</span>
+              {tags.slice(0, 2).map((tag, index) => (
+                <Badge key={`${tag}-${index}`} color="pink" size="xs" variant="soft">
+                  <span className="text-[11px] font-normal">{tag}</span>
                 </Badge>
               ))}
-              {taxonomyTerms.length > 2 && (
-                <span className="text-[11px] text-gray-500">+{taxonomyTerms.length - 2}</span>
+              {tags.length > 2 && (
+                <span className="text-[11px] text-gray-500">+{tags.length - 2}</span>
+              )}
+            </div>
+          );
+        },
+      },
+      {
+        key: 'categories',
+        label: 'Categories',
+        sortable: false,
+        width: '150px',
+        render: (_value: any, row: Content) => {
+          const categories = row.categories || [];
+          if (!categories || categories.length === 0) {
+            return <span className="text-gray-400 dark:text-gray-500 text-[11px]">-</span>;
+          }
+          return (
+            <div className="flex flex-wrap gap-1">
+              {categories.slice(0, 2).map((category, index) => (
+                <Badge key={`${category}-${index}`} color="blue" size="xs" variant="soft">
+                  <span className="text-[11px] font-normal">{category}</span>
+                </Badge>
+              ))}
+              {categories.length > 2 && (
+                <span className="text-[11px] text-gray-500">+{categories.length - 2}</span>
               )}
             </div>
           );

frontend/src/config/pages/ideas.config.tsx

@@ -101,7 +101,7 @@ export const createIdeasPageConfig = (
         toggleContentKey: 'description', // Use description field for toggle content
         toggleContentLabel: 'Content Outline', // Label for expanded content
         render: (value: string) => (
-          <span className="text-gray-800 dark:text-white font-medium">{value}</span>
+          <span className="text-gray-800 dark:text-white text-base font-light">{value}</span>
         ),
       },
       // Sector column - only show when viewing all sectors

frontend/src/config/pages/images.config.tsx

@@ -69,7 +69,7 @@ export const createImagesPageConfig = (
         <div>
           <a
             href={`/writer/content/${row.content_id}`}
-            className="font-medium text-brand-500 hover:text-brand-600 dark:text-brand-400"
+            className="text-base font-light text-brand-500 hover:text-brand-600 dark:text-brand-400"
           >
             {row.content_title}
           </a>

frontend/src/config/pages/published.config.tsx

@@ -54,6 +54,7 @@ export function createPublishedPageConfig(params: {
   setPublishStatusFilter: (value: string) => void;
   setCurrentPage: (page: number) => void;
   activeSector: { id: number; name: string } | null;
+  onRowClick?: (row: Content) => void;
 }): PublishedPageConfig {
   const showSectorColumn = !params.activeSector;
 
@@ -63,14 +64,20 @@ export function createPublishedPageConfig(params: {
       label: 'Title',
       sortable: true,
       sortField: 'title',
-      toggleable: true,
-      toggleContentKey: 'content_html',
-      toggleContentLabel: 'Generated Content',
       render: (value: string, row: Content) => (
         <div className="flex items-center gap-2">
-          <span className="font-medium text-gray-900 dark:text-white">
-            {value || `Content #${row.id}`}
-          </span>
+          {params.onRowClick ? (
+            <button
+              onClick={() => params.onRowClick!(row)}
+              className="text-base font-light text-blue-500 hover:text-blue-600 hover:underline text-left transition-colors"
+            >
+              {value || `Content #${row.id}`}
+            </button>
+          ) : (
+            <span className="text-base font-light text-gray-900 dark:text-white">
+              {value || `Content #${row.id}`}
+            </span>
+          )}
           {row.external_url && (
             <a 
               href={row.external_url} 

frontend/src/config/pages/review.config.tsx

@@ -67,12 +67,12 @@ export function createReviewPageConfig(params: {
           {params.onRowClick ? (
             <button
               onClick={() => params.onRowClick!(row)}
-              className="font-medium text-blue-500 hover:text-blue-600 hover:underline text-left transition-colors"
+              className="text-base font-light text-blue-500 hover:text-blue-600 hover:underline text-left transition-colors"
             >
               {value || `Content #${row.id}`}
             </button>
           ) : (
-            <span className="font-medium text-gray-900 dark:text-white">
+            <span className="text-base font-light text-gray-900 dark:text-white">
               {value || `Content #${row.id}`}
             </span>
           )}

frontend/src/config/pages/tasks.config.tsx

@@ -112,7 +112,7 @@ export const createTasksPageConfig = (
           
           return (
             <div className="flex items-center gap-2">
-              <span className="font-medium text-gray-900 dark:text-white">
+              <span className="text-base font-light text-gray-900 dark:text-white">
                 {displayTitle}
               </span>
               {isSiteBuilder && (