[Request] UI Improvements: Add tooltips with shortcuts, pinnable menus, and draggable menu cards

[syuaibsyuaib]

Description

I would like to suggest a few UI/UX improvements to make the drawing and collaboration workflow in InfiniPaint smoother, especially when working on a busy or massive canvas.

Currently, users have to frequently click menus to open/close them, and it can be hard to remember all keybinds without checking the settings menu.

Proposed Features

1. Tooltips for Tools (with Shortcut Keys)

   • What: When a user hovers their mouse cursor over any tool icon (e.g., Pen, Eraser, Lasso, Grid), a small text box (tooltip) should appear.
   • Why: This tooltip will show the name of the tool and its respective shortcut key (e.g., Pen (P) or Eraser (E)). This helps users learn the shortcuts faster without breaking their creative flow to open the settings.

2. Pinnable Menu Cards

   • What: Add a "Pin" button/icon on individual floating menus like Layers, Grid options, Chat box, and Client/Player list.
   • Why: Currently, users have to repeatedly click the top menu buttons to toggle these panels. Pinning them will keep these essential menus permanently open on the screen while drawing or collaborating.

3. Draggable Menu Cards (Drag & Drop UI)

   • What: Allow users to click and drag these menu cards (Layers, Chat, Player list) anywhere around the canvas workspace.
   • Why: This gives users the flexibility to customize their workspace layout. For example, a user might want the chat box on the bottom right and the layers panel on the left side, keeping the center workspace clean.

Additional Context

These features will significantly improve efficiency during real-time online collaboration sessions where keeping an eye on the Chat box, Player list, and Layers simultaneously is crucial.