asdasdsa

frontend/src/components/common/ColumnSelector.tsx

@@ -11,6 +11,7 @@ interface ColumnSelectorProps {
   visibleColumns: Set<string>;
   onToggleColumn: (columnKey: string) => void;
   className?: string;
+  compact?: boolean; // New prop for compact mode (icon only)
 }
 
 export default function ColumnSelector({
@@ -18,6 +19,7 @@ export default function ColumnSelector({
   visibleColumns,
   onToggleColumn,
   className = '',
+  compact = false,
 }: ColumnSelectorProps) {
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
@@ -53,7 +55,10 @@ export default function ColumnSelector({
         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"
+        className={`inline-flex items-center justify-center gap-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 ${
+          compact ? 'w-8 h-8 p-0' : 'px-3 py-2'
+        }`}
+        title={compact ? `Columns (${visibleCount}/${totalCount})` : undefined}
       >
         <svg
           className="w-4 h-4"
@@ -69,11 +74,20 @@ export default function ColumnSelector({
             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' : ''}`} />
+        {!compact && (
+          <>
+            <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' : ''}`} />
+          </>
+        )}
+        {compact && (
+          <span className="absolute -top-1 -right-1 inline-flex items-center justify-center w-4 h-4 text-[10px] font-bold text-white bg-brand-500 rounded-full">
+            {visibleCount}
+          </span>
+        )}
       </button>
 
       {isOpen && (