From acc725db9c23491413f637a5badd1b89ddf4c2ab Mon Sep 17 00:00:00 2001
From: Philipinho <16838612+Philipinho@users.noreply.github.com>
Date: Tue, 8 Jul 2025 23:39:15 -0700
Subject: [PATCH] feat: add toggle header cell button to table cell menu

Added ability to toggle header cells directly from the table cell menu. This enhancement includes:
- New toggle header cell button with IconTableRow icon
- Consistent UI/UX with existing table menu patterns
- Proper internationalization support
---
 .../editor/components/table/table-cell-menu.tsx  | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/apps/client/src/features/editor/components/table/table-cell-menu.tsx b/apps/client/src/features/editor/components/table/table-cell-menu.tsx
index e348ea6e..f11df7da 100644
--- a/apps/client/src/features/editor/components/table/table-cell-menu.tsx
+++ b/apps/client/src/features/editor/components/table/table-cell-menu.tsx
@@ -12,6 +12,7 @@ import {
   IconColumnRemove,
   IconRowRemove,
   IconSquareToggle,
+  IconTableRow,
 } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
 
@@ -45,6 +46,10 @@ export const TableCellMenu = React.memo(
       editor.chain().focus().deleteRow().run();
     }, [editor]);
 
+    const toggleHeaderCell = useCallback(() => {
+      editor.chain().focus().toggleHeaderCell().run();
+    }, [editor]);
+
     return (
       <BaseBubbleMenu
         editor={editor}
@@ -103,6 +108,17 @@ export const TableCellMenu = React.memo(
               <IconRowRemove size={18} />
             </ActionIcon>
           </Tooltip>
+
+          <Tooltip position="top" label={t("Toggle header cell")}>
+            <ActionIcon
+              onClick={toggleHeaderCell}
+              variant="default"
+              size="lg"
+              aria-label={t("Toggle he  ader cell")}
+            >
+              <IconTableRow size={18} />
+            </ActionIcon>
+          </Tooltip>
         </ActionIcon.Group>
       </BaseBubbleMenu>
     );