New Columns and columns visibility

frontend/src/components/common/ColumnSelector.tsx

@@ -0,0 +1,131 @@
+/**
+ * ColumnSelector Component
+ * Dropdown with checkboxes to show/hide table columns
+ */
+import React, { useState, useRef, useEffect } from 'react';
+import { ChevronDownIcon } from '../../icons';
+import Checkbox from '../form/input/Checkbox';
+
+interface ColumnSelectorProps {
+  columns: Array<{ key: string; label: string; defaultVisible?: boolean }>;
+  visibleColumns: Set<string>;
+  onToggleColumn: (columnKey: string) => void;
+  className?: string;
+}
+
+export default function ColumnSelector({
+  columns,
+  visibleColumns,
+  onToggleColumn,
+  className = '',
+}: ColumnSelectorProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node) &&
+        buttonRef.current &&
+        !buttonRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => {
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    }
+  }, [isOpen]);
+
+  const visibleCount = visibleColumns.size;
+  const totalCount = columns.length;
+
+  return (
+    <div className={`relative ${className}`}>
+      <button
+        ref={buttonRef}
+        type="button"
+        onClick={() => setIsOpen(!isOpen)}
+        className="inline-flex items-center gap-2 px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-700 dark:hover:bg-gray-700 transition-colors"
+      >
+        <svg
+          className="w-4 h-4"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M4 6h16M4 12h16M4 18h16"
+          />
+        </svg>
+        <span>Columns</span>
+        <span className="text-xs text-gray-500 dark:text-gray-400">
+          ({visibleCount}/{totalCount})
+        </span>
+        <ChevronDownIcon className={`w-4 h-4 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
+      </button>
+
+      {isOpen && (
+        <div
+          ref={dropdownRef}
+          className="absolute right-0 mt-2 w-56 rounded-lg border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800 z-50 max-h-96 overflow-y-auto"
+        >
+          <div className="p-2">
+            <div className="px-3 py-2 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide border-b border-gray-200 dark:border-gray-700 mb-1">
+              Show Columns
+            </div>
+            <div className="space-y-1">
+              {columns.map((column) => {
+                const isVisible = visibleColumns.has(column.key);
+                return (
+                  <label
+                    key={column.key}
+                    className="flex items-center gap-2 px-3 py-2 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer"
+                  >
+                    <Checkbox
+                      checked={isVisible}
+                      onChange={() => {
+                        onToggleColumn(column.key);
+                      }}
+                    />
+                    <span className="text-sm text-gray-700 dark:text-gray-300 flex-1">
+                      {column.label}
+                    </span>
+                  </label>
+                );
+              })}
+            </div>
+            <div className="mt-2 pt-2 border-t border-gray-200 dark:border-gray-700">
+              <button
+                type="button"
+                onClick={() => {
+                  // Show all columns
+                  columns.forEach((col) => {
+                    if (!visibleColumns.has(col.key)) {
+                      onToggleColumn(col.key);
+                    }
+                  });
+                }}
+                className="w-full px-3 py-1.5 text-xs font-medium text-brand-600 hover:text-brand-700 hover:bg-brand-50 dark:text-brand-400 dark:hover:bg-brand-500/10 rounded-md transition-colors"
+              >
+                Show All
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+

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

@@ -27,6 +27,7 @@ export interface ColumnConfig {
   align?: 'left' | 'center' | 'right';
   width?: string;
   render?: (value: any, row: any) => React.ReactNode;
+  defaultVisible?: boolean; // Whether column is visible by default (default: true)
 }
 
 export interface FormFieldConfig {
@@ -116,21 +117,24 @@ export const createClustersPageConfig = (
       {
         key: 'keywords_count',
         label: 'Keywords',
-        sortable: false,
+        sortable: true,
+        sortField: 'keywords_count',
         width: '120px',
         render: (value: number) => value.toLocaleString(),
       },
       {
         key: 'ideas_count',
         label: 'Ideas',
-        sortable: false,
+        sortable: true,
+        sortField: 'ideas_count',
         width: '120px',
         render: (value: number) => value.toLocaleString(),
       },
       {
         key: 'volume',
         label: 'Volume',
-        sortable: false,
+        sortable: true,
+        sortField: 'volume',
         width: '120px',
         render: (value: number) => value.toLocaleString(),
       },
@@ -138,7 +142,8 @@ export const createClustersPageConfig = (
         ...difficultyColumn,
         key: 'difficulty',
         label: 'Difficulty',
-        sortable: false,
+        sortable: true,
+        sortField: 'difficulty',
         align: 'center' as const,
         render: (value: number) => {
           const difficultyNum = getDifficultyNumber(value);
@@ -179,7 +184,8 @@ export const createClustersPageConfig = (
       {
         key: 'content_count',
         label: 'Content',
-        sortable: false,
+        sortable: true,
+        sortField: 'content_count',
         width: '120px',
         render: (value: number) => value.toLocaleString(),
       },
@@ -202,6 +208,36 @@ export const createClustersPageConfig = (
         sortField: 'created_at',
         render: (value: string) => formatRelativeDate(value),
       },
+      // Optional columns - hidden by default
+      {
+        key: 'description',
+        label: 'Description',
+        sortable: false,
+        defaultVisible: false,
+        width: '250px',
+        render: (value: string | null) => (
+          <span className="text-sm text-gray-600 dark:text-gray-400 truncate block max-w-[250px]">
+            {value || '-'}
+          </span>
+        ),
+      },
+      {
+        key: 'mapped_pages',
+        label: 'Mapped Pages',
+        sortable: true,
+        sortField: 'mapped_pages',
+        defaultVisible: false,
+        width: '120px',
+        render: (value: number) => value.toLocaleString(),
+      },
+      {
+        key: 'updated_at',
+        label: 'Updated',
+        sortable: true,
+        sortField: 'updated_at',
+        defaultVisible: false,
+        render: (value: string) => formatRelativeDate(value),
+      },
     ],
     filters: [
       {

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

@@ -27,6 +27,7 @@ export interface ColumnConfig {
   toggleable?: boolean;
   toggleContentKey?: string;
   toggleContentLabel?: string;
+  defaultVisible?: boolean; // Whether column is visible by default (default: true)
 }
 
 export interface FilterConfig {
@@ -124,7 +125,8 @@ export const createContentPageConfig = (
       {
         key: 'primary_keyword',
         label: 'Primary Keyword',
-        sortable: false,
+        sortable: true,
+        sortField: 'primary_keyword',
         width: '150px',
         render: (value: string, row: Content) => (
           row.primary_keyword ? (
@@ -262,6 +264,50 @@ export const createContentPageConfig = (
           );
         },
       },
+      // Optional columns - hidden by default
+      {
+        key: 'task_title',
+        label: 'Task Title',
+        sortable: true,
+        sortField: 'task_id',
+        defaultVisible: false,
+        width: '200px',
+        render: (_value: string, row: Content) => (
+          <span className="text-sm text-gray-600 dark:text-gray-400 truncate block max-w-[200px]">
+            {row.task_title || '-'}
+          </span>
+        ),
+      },
+      {
+        key: 'post_url',
+        label: 'Post URL',
+        sortable: false,
+        defaultVisible: false,
+        width: '200px',
+        render: (value: string | null, row: Content) => {
+          const url = value || row.post_url || null;
+          return url ? (
+            <a
+              href={url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-sm text-brand-600 hover:text-brand-700 dark:text-brand-400 dark:hover:text-brand-300 truncate block max-w-[200px]"
+            >
+              {url}
+            </a>
+          ) : (
+            <span className="text-sm text-gray-400 dark:text-gray-500">-</span>
+          );
+        },
+      },
+      {
+        key: 'updated_at',
+        label: 'Updated',
+        sortable: true,
+        sortField: 'updated_at',
+        defaultVisible: false,
+        render: (value: string) => formatRelativeDate(value),
+      },
     ],
     filters: [
       {

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

@@ -22,6 +22,7 @@ export interface ColumnConfig {
   align?: 'left' | 'center' | 'right';
   width?: string;
   render?: (value: any, row: any) => React.ReactNode;
+  defaultVisible?: boolean; // Whether column is visible by default (default: true)
 }
 
 export interface FormFieldConfig {
@@ -150,7 +151,8 @@ export const createIdeasPageConfig = (
       {
         key: 'keyword_cluster_name',
         label: 'Cluster',
-        sortable: false,
+        sortable: true,
+        sortField: 'keyword_cluster_id',
         width: '200px',
         render: (_value: string, row: ContentIdea) => row.keyword_cluster_name || '-',
       },
@@ -188,6 +190,15 @@ export const createIdeasPageConfig = (
         sortField: 'created_at',
         render: (value: string) => formatRelativeDate(value),
       },
+      // Optional columns - hidden by default
+      {
+        key: 'updated_at',
+        label: 'Updated',
+        sortable: true,
+        sortField: 'updated_at',
+        defaultVisible: false,
+        render: (value: string) => formatRelativeDate(value),
+      },
     ],
     filters: [
       {

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

@@ -18,6 +18,7 @@ export interface ColumnConfig {
   align?: 'left' | 'center' | 'right';
   width?: string;
   render?: (value: any, row: any) => React.ReactNode;
+  defaultVisible?: boolean; // Whether column is visible by default (default: true)
 }
 
 export interface FilterConfig {
@@ -60,7 +61,8 @@ export const createImagesPageConfig = (
     {
       key: 'content_title',
       label: 'Content Title',
-      sortable: false,
+      sortable: true,
+      sortField: 'content_title',
       width: '250px',
       render: (_value: string, row: ContentImagesGroup) => (
         <div>
@@ -105,7 +107,8 @@ export const createImagesPageConfig = (
   columns.push({
     key: 'overall_status',
     label: 'Status',
-    sortable: false,
+    sortable: true,
+    sortField: 'overall_status',
     width: '180px',
     render: (value: string, row: ContentImagesGroup) => {
       const statusColors: Record<string, 'success' | 'warning' | 'error' | 'info'> = {

frontend/src/config/pages/keywords.config.tsx

@@ -36,6 +36,7 @@ export interface ColumnConfig {
   align?: 'left' | 'center' | 'right';
   width?: string;
   render?: (value: any, row: any) => React.ReactNode;
+  defaultVisible?: boolean; // Whether column is visible by default (default: true)
 }
 
 // BulkActionConfig and RowActionConfig are now in table-actions.config.tsx
@@ -163,7 +164,8 @@ export const createKeywordsPageConfig = (
       },
       {
         ...clusterColumn,
-        sortable: false,
+        sortable: true,
+        sortField: 'cluster_id',
         render: (_value: string, row: Keyword) => row.cluster_name || '-',
       },
       {
@@ -264,6 +266,52 @@ export const createKeywordsPageConfig = (
         sortField: 'created_at',
         render: (value: string) => formatRelativeDate(value),
       },
+      // Optional columns - hidden by default
+      {
+        key: 'updated_at',
+        label: 'Updated',
+        sortable: true,
+        sortField: 'updated_at',
+        defaultVisible: false,
+        render: (value: string) => formatRelativeDate(value),
+      },
+      {
+        key: 'volume_override',
+        label: 'Volume Override',
+        sortable: true,
+        sortField: 'volume_override',
+        defaultVisible: false,
+        render: (value: number | null) => value ? value.toLocaleString() : '-',
+      },
+      {
+        key: 'difficulty_override',
+        label: 'Difficulty Override',
+        sortable: true,
+        sortField: 'difficulty_override',
+        defaultVisible: false,
+        align: 'center' as const,
+        render: (value: number | null) => {
+          if (value === null || value === undefined) return '-';
+          const difficultyNum = getDifficultyNumber(value);
+          return typeof difficultyNum === 'number' ? (
+            <Badge
+              color={
+                difficultyNum === 1 || difficultyNum === 2
+                  ? 'success'
+                  : difficultyNum === 3
+                  ? 'warning'
+                  : 'error'
+              }
+              variant={difficultyNum === 5 ? 'solid' : 'light'}
+              size="sm"
+            >
+              {difficultyNum}
+            </Badge>
+          ) : (
+            difficultyNum
+          );
+        },
+      },
     ],
     filters: [
       {

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

@@ -26,6 +26,7 @@ export interface ColumnConfig {
   toggleable?: boolean; // If true, this column will have a toggle button for expanding content
   toggleContentKey?: string; // Key of the field containing content to display when toggled
   toggleContentLabel?: string; // Label for the expanded content (e.g., "Content Outline", "Generated Content")
+  defaultVisible?: boolean; // Whether column is visible by default (default: true)
 }
 
 export interface FormFieldConfig {
@@ -115,7 +116,8 @@ export const createTasksPageConfig = (
       {
         key: 'cluster_name',
         label: 'Cluster',
-        sortable: false,
+        sortable: true,
+        sortField: 'cluster_id',
         width: '200px',
         render: (_value: string, row: Task) => row.cluster_name || '-',
       },
@@ -176,6 +178,83 @@ export const createTasksPageConfig = (
         sortField: 'created_at',
         render: (value: string) => formatRelativeDate(value),
       },
+      // Optional columns - hidden by default
+      {
+        key: 'idea_title',
+        label: 'Idea',
+        sortable: true,
+        sortField: 'idea_id',
+        defaultVisible: false,
+        width: '200px',
+        render: (_value: string, row: Task) => (
+          <span className="text-sm text-gray-600 dark:text-gray-400 truncate block max-w-[200px]">
+            {row.idea_title || '-'}
+          </span>
+        ),
+      },
+      {
+        key: 'keywords',
+        label: 'Keywords',
+        sortable: false,
+        defaultVisible: false,
+        width: '200px',
+        render: (value: string | null) => (
+          <span className="text-sm text-gray-600 dark:text-gray-400 truncate block max-w-[200px]">
+            {value || '-'}
+          </span>
+        ),
+      },
+      {
+        key: 'meta_title',
+        label: 'Meta Title',
+        sortable: false,
+        defaultVisible: false,
+        width: '200px',
+        render: (value: string | null) => (
+          <span className="text-sm text-gray-600 dark:text-gray-400 truncate block max-w-[200px]">
+            {value || '-'}
+          </span>
+        ),
+      },
+      {
+        key: 'meta_description',
+        label: 'Meta Description',
+        sortable: false,
+        defaultVisible: false,
+        width: '250px',
+        render: (value: string | null) => (
+          <span className="text-sm text-gray-600 dark:text-gray-400 truncate block max-w-[250px]">
+            {value || '-'}
+          </span>
+        ),
+      },
+      {
+        key: 'post_url',
+        label: 'Post URL',
+        sortable: false,
+        defaultVisible: false,
+        width: '200px',
+        render: (value: string | null) => value ? (
+          <a
+            href={value}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-sm text-brand-600 hover:text-brand-700 dark:text-brand-400 dark:hover:text-brand-300 truncate block max-w-[200px]"
+          >
+            {value}
+          </a>
+        ) : (
+          <span className="text-sm text-gray-400 dark:text-gray-500">-</span>
+        ),
+      },
+      {
+        key: 'updated_at',
+        label: 'Updated',
+        sortable: true,
+        sortField: 'updated_at',
+        defaultVisible: false,
+        render: (value: string) => formatRelativeDate(value),
+      },
     ],
     filters: [
       {

frontend/src/pages/Planner/Clusters.tsx

@@ -387,7 +387,7 @@ export default function Clusters() {
     <>
       <PageHeader 
         title="Keyword Clusters" 
-        badge={{ icon: <GroupIcon />, color: 'green' }}
+        badge={{ icon: <GroupIcon />, color: 'purple' }}
       />
       <TablePageTemplate
         columns={pageConfig.columns}

frontend/src/pages/Planner/Keywords.tsx

@@ -754,7 +754,7 @@ export default function Keywords() {
     <>
       <PageHeader 
         title="Keywords" 
-        badge={{ icon: <ListIcon />, color: 'blue' }}
+        badge={{ icon: <ListIcon />, color: 'green' }}
       />
       <TablePageTemplate
         columns={pageConfig.columns}

frontend/src/pages/Writer/Dashboard.tsx

@@ -552,7 +552,7 @@ export default function WriterDashboard() {
           lastUpdated={lastUpdated}
           showRefresh={true}
           onRefresh={fetchDashboardData}
-          badge={{ icon: <PencilIcon />, color: 'green' }}
+          badge={{ icon: <PencilIcon />, color: 'blue' }}
         />
 
         {/* Hero Section - Key Metric */}

frontend/src/pages/Writer/Images.tsx

@@ -387,7 +387,7 @@ export default function Images() {
     <>
       <PageHeader 
         title="Content Images" 
-        badge={{ icon: <FileIcon />, color: 'purple' }}
+        badge={{ icon: <FileIcon />, color: 'orange' }}
       />
       <TablePageTemplate
       columns={pageConfig.columns}

frontend/src/templates/TablePageTemplate.tsx

@@ -40,6 +40,7 @@ import BulkStatusUpdateModal from '../components/common/BulkStatusUpdateModal';
 import { CompactPagination } from '../components/ui/pagination';
 import { usePageSizeStore } from '../store/pageSizeStore';
 import ToggleTableRow, { ToggleButton } from '../components/common/ToggleTableRow';
+import ColumnSelector from '../components/common/ColumnSelector';
 
 interface ColumnConfig {
   key: string;
@@ -56,6 +57,7 @@ interface ColumnConfig {
   toggleable?: boolean; // If true, this column will have a toggle button for expanding content
   toggleContentKey?: string; // Key of the field containing content to display when toggled
   toggleContentLabel?: string; // Label for the expanded content (e.g., "Content Outline")
+  defaultVisible?: boolean; // Whether column is visible by default (default: true)
 }
 
 interface FilterConfig {
@@ -223,6 +225,78 @@ export default function TablePageTemplate({
   const toast = useToast();
   const { pageSize, setPageSize } = usePageSizeStore();
 
+  // Column visibility state management with localStorage persistence
+  const getStorageKey = () => {
+    // Use pathname to create unique storage key per page
+    return `table-columns-${location.pathname}`;
+  };
+
+  // Initialize visible columns from localStorage or defaults
+  const initializeVisibleColumns = () => {
+    const storageKey = getStorageKey();
+    try {
+      const saved = localStorage.getItem(storageKey);
+      if (saved) {
+        const savedSet = new Set(JSON.parse(saved));
+        // Validate that all saved columns still exist
+        const validColumns = columns.filter(col => savedSet.has(col.key));
+        if (validColumns.length > 0) {
+          // Add any new columns with defaultVisible !== false
+          const newColumns = columns
+            .filter(col => !savedSet.has(col.key) && col.defaultVisible !== false)
+            .map(col => col.key);
+          return new Set([...Array.from(validColumns.map(col => col.key)), ...newColumns]);
+        }
+      }
+    } catch (e) {
+      // Ignore parse errors
+    }
+    // Default: show all columns that have defaultVisible !== false
+    return new Set(
+      columns
+        .filter(col => col.defaultVisible !== false)
+        .map(col => col.key)
+    );
+  };
+
+  const [visibleColumns, setVisibleColumns] = useState<Set<string>>(initializeVisibleColumns);
+
+  // Update visible columns when columns prop changes (e.g., when switching pages)
+  useEffect(() => {
+    const newVisibleColumns = initializeVisibleColumns();
+    setVisibleColumns(newVisibleColumns);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [location.pathname]); // Re-initialize when pathname changes
+
+  // Save to localStorage whenever visibleColumns changes
+  useEffect(() => {
+    const storageKey = getStorageKey();
+    try {
+      localStorage.setItem(storageKey, JSON.stringify(Array.from(visibleColumns)));
+    } catch (e) {
+      // Ignore storage errors
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [visibleColumns, location.pathname]);
+
+  // Filter columns based on visibility
+  const visibleColumnsList = useMemo(() => {
+    return columns.filter(col => visibleColumns.has(col.key));
+  }, [columns, visibleColumns]);
+
+  // Toggle column visibility
+  const handleToggleColumn = (columnKey: string) => {
+    setVisibleColumns(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(columnKey)) {
+        newSet.delete(columnKey);
+      } else {
+        newSet.add(columnKey);
+      }
+      return newSet;
+    });
+  };
+
   // Sync selectedIds with selection prop
   // Use JSON.stringify to compare array contents, not just reference, to avoid unnecessary updates
   const selectedIdsKey = selection?.selectedIds ? JSON.stringify(selection.selectedIds) : '';
@@ -648,7 +722,17 @@ export default function TablePageTemplate({
         )}
         
         {/* Action Buttons - Right aligned */}
-        <div className="flex gap-2">
+        <div className="flex gap-2 items-center">
+          {/* Column Selector */}
+          <ColumnSelector
+            columns={columns.map(col => ({
+              key: col.key,
+              label: col.label,
+              defaultVisible: col.defaultVisible !== false,
+            }))}
+            visibleColumns={visibleColumns}
+            onToggleColumn={handleToggleColumn}
+          />
           {onExportCSV && (
             <Button
               variant="secondary"
@@ -706,8 +790,8 @@ export default function TablePageTemplate({
                     )}
                   </TableCell>
                 )}
-                {columns.map((column, colIndex) => {
+                {visibleColumnsList.map((column, colIndex) => {
-                  const isLastColumn = colIndex === columns.length - 1;
+                  const isLastColumn = colIndex === visibleColumnsList.length - 1;
                   return (
                     <TableCell
                       key={column.key}
@@ -736,7 +820,7 @@ export default function TablePageTemplate({
                 Array.from({ length: 10 }).map((_, index) => (
                   <TableRow key={`skeleton-${index}`} className="igny8-skeleton-row">
                     {selection && <TableCell><div className="h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div></TableCell>}
-                    {columns.map((_, colIndex) => (
+                    {visibleColumnsList.map((_, colIndex) => (
                       <TableCell key={colIndex}><div className="h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div></TableCell>
                     ))}
                   </TableRow>
@@ -760,7 +844,7 @@ export default function TablePageTemplate({
                   );
                   
                   // Calculate colSpan for toggle row
-                  const colSpan = (selection ? 1 : 0) + columns.length;
+                  const colSpan = (selection ? 1 : 0) + visibleColumnsList.length;
                   
                   const handleToggle = (expanded: boolean, id: string | number) => {
                     setExpandedRows(prev => {
@@ -795,8 +879,8 @@ export default function TablePageTemplate({
                             />
                           </TableCell>
                         )}
-                        {columns.map((column, colIndex) => {
+                        {visibleColumnsList.map((column, colIndex) => {
-                          const isLastColumn = colIndex === columns.length - 1;
+                          const isLastColumn = colIndex === visibleColumnsList.length - 1;
                           const rowId = row.id || index;
                           
                           // Get or create ref for this row's actions button