From 8a808053555d7697cc8468c502dfcf5c97379345 Mon Sep 17 00:00:00 2001
From: Ryan Di <ryan.weihao.di@gmail.com>
Date: Mon, 29 Sep 2025 11:31:06 +1000
Subject: [PATCH] hide color picker hot keys

---
 .../components/ColorPicker/ColorPicker.tsx           |  1 +
 .../excalidraw/components/ColorPicker/Picker.tsx     | 10 +++++++++-
 .../components/ColorPicker/PickerColorList.tsx       |  4 +++-
 .../excalidraw/components/ColorPicker/ShadeList.tsx  | 12 ++++++++++--
 4 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/packages/excalidraw/components/ColorPicker/ColorPicker.tsx b/packages/excalidraw/components/ColorPicker/ColorPicker.tsx
index fa966db53e..35c79ccd5b 100644
--- a/packages/excalidraw/components/ColorPicker/ColorPicker.tsx
+++ b/packages/excalidraw/components/ColorPicker/ColorPicker.tsx
@@ -217,6 +217,7 @@ const ColorPickerPopupContent = ({
             appState.stylesPanelMode === "compact" ||
             appState.stylesPanelMode === "mobile"
           }
+          showHotKey={appState.stylesPanelMode !== "mobile"}
         >
           {colorInputJSX}
         </Picker>
diff --git a/packages/excalidraw/components/ColorPicker/Picker.tsx b/packages/excalidraw/components/ColorPicker/Picker.tsx
index e9943a858f..9c48c58075 100644
--- a/packages/excalidraw/components/ColorPicker/Picker.tsx
+++ b/packages/excalidraw/components/ColorPicker/Picker.tsx
@@ -40,6 +40,7 @@ interface PickerProps {
   showTitle?: boolean;
   onEyeDropperToggle: (force?: boolean) => void;
   onEscape: (event: React.KeyboardEvent | KeyboardEvent) => void;
+  showHotKey?: boolean;
 }
 
 export const Picker = React.forwardRef(
@@ -55,6 +56,7 @@ export const Picker = React.forwardRef(
       showTitle,
       onEyeDropperToggle,
       onEscape,
+      showHotKey = true,
     }: PickerProps,
     ref,
   ) => {
@@ -187,12 +189,18 @@ export const Picker = React.forwardRef(
               palette={palette}
               onChange={onChange}
               activeShade={activeShade}
+              showHotKey={showHotKey}
             />
           </div>
 
           <div>
             <PickerHeading>{t("colorPicker.shades")}</PickerHeading>
-            <ShadeList color={color} onChange={onChange} palette={palette} />
+            <ShadeList
+              color={color}
+              onChange={onChange}
+              palette={palette}
+              showHotKey={showHotKey}
+            />
           </div>
           {children}
         </div>
diff --git a/packages/excalidraw/components/ColorPicker/PickerColorList.tsx b/packages/excalidraw/components/ColorPicker/PickerColorList.tsx
index 4fd6815e44..13928f0239 100644
--- a/packages/excalidraw/components/ColorPicker/PickerColorList.tsx
+++ b/packages/excalidraw/components/ColorPicker/PickerColorList.tsx
@@ -20,6 +20,7 @@ interface PickerColorListProps {
   color: string | null;
   onChange: (color: string) => void;
   activeShade: number;
+  showHotKey?: boolean;
 }
 
 const PickerColorList = ({
@@ -27,6 +28,7 @@ const PickerColorList = ({
   color,
   onChange,
   activeShade,
+  showHotKey = true,
 }: PickerColorListProps) => {
   const colorObj = getColorNameAndShadeFromColor({
     color,
@@ -82,7 +84,7 @@ const PickerColorList = ({
             key={key}
           >
             <div className="color-picker__button-outline" />
-            <HotkeyLabel color={color} keyLabel={keybinding} />
+            {showHotKey && <HotkeyLabel color={color} keyLabel={keybinding} />}
           </button>
         );
       })}
diff --git a/packages/excalidraw/components/ColorPicker/ShadeList.tsx b/packages/excalidraw/components/ColorPicker/ShadeList.tsx
index db33402b0c..2c17c57ede 100644
--- a/packages/excalidraw/components/ColorPicker/ShadeList.tsx
+++ b/packages/excalidraw/components/ColorPicker/ShadeList.tsx
@@ -16,9 +16,15 @@ interface ShadeListProps {
   color: string | null;
   onChange: (color: string) => void;
   palette: ColorPaletteCustom;
+  showHotKey?: boolean;
 }
 
-export const ShadeList = ({ color, onChange, palette }: ShadeListProps) => {
+export const ShadeList = ({
+  color,
+  onChange,
+  palette,
+  showHotKey,
+}: ShadeListProps) => {
   const colorObj = getColorNameAndShadeFromColor({
     color: color || "transparent",
     palette,
@@ -67,7 +73,9 @@ export const ShadeList = ({ color, onChange, palette }: ShadeListProps) => {
               }}
             >
               <div className="color-picker__button-outline" />
-              <HotkeyLabel color={color} keyLabel={i + 1} isShade />
+              {showHotKey && (
+                <HotkeyLabel color={color} keyLabel={i + 1} isShade />
+              )}
             </button>
           ))}
         </div>