feat(core): add tooltips to sidebar resize handle (#8717)

close PD-1865
![CleanShot 2024-11-06 at 12 52 35@2x](https://github.com/user-attachments/assets/b7353448-f8c5-4cfb-bfed-d1acff2923c4)

packages/frontend/component/src/ui/tooltip/tooltip.tsx

@@ -40,15 +40,22 @@ export interface TooltipProps {
   rootOptions?: Omit<RootProps, 'children'>;
   portalOptions?: TooltipPortalProps;
   options?: Omit<TooltipContentProps, 'side' | 'align'>;
+  shortcutClassName?: string;
 }
 
-const TooltipShortcut = ({ shortcut }: { shortcut: string | string[] }) => {
+const TooltipShortcut = ({
+  shortcut,
+  className,
+}: {
+  shortcut: string | string[];
+  className?: string;
+}) => {
   const commands = (Array.isArray(shortcut) ? shortcut : [shortcut])
     .map(cmd => cmd.trim())
     .map(cmd => getCommand(cmd));
 
   return (
-    <div className={styles.shortcut}>
+    <div className={clsx(styles.shortcut, className)}>
       {commands.map((cmd, index) => (
         <div
           key={`${index}-${cmd}`}
@@ -71,6 +78,7 @@ export const Tooltip = ({
   options,
   rootOptions,
   portalOptions,
+  shortcutClassName,
 }: TooltipProps) => {
   if (!content) {
     return children;
@@ -94,7 +102,10 @@ export const Tooltip = ({
             {shortcut ? (
               <div className={styles.withShortcut}>
                 <div className={styles.withShortcutContent}>{content}</div>
-                <TooltipShortcut shortcut={shortcut} />
+                <TooltipShortcut
+                  shortcut={shortcut}
+                  className={shortcutClassName}
+                />
               </div>
             ) : (
               content