Add application feedback and refine headless canvas design boundaries

src/components/ui/icon-button.tsx

@@ -1,6 +1,8 @@
 "use client";
 
-import { forwardRef, type ButtonHTMLAttributes } from "react";
+import { FeedbackContext } from "./app-feedback";
+import * as Tooltip from "@radix-ui/react-tooltip";
+import { useContext, forwardRef, type ButtonHTMLAttributes } from "react";
 import type { LucideIcon } from "lucide-react";
 import styles from "./icon-button.module.css";
 
@@ -10,18 +12,25 @@ export type IconButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "chi
 };
 
 export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
-  function IconButton({ icon: Icon, label, className = "", type = "button", ...props }, ref) {
-    return (
+  function IconButton({ icon: Icon, label, title = label, className = "", type = "button", ...props }, ref) {
+    const feedback = useContext(FeedbackContext);
+    const button = (
       <button
         ref={ref}
         type={type}
         aria-label={label}
-        title={label}
+        title={feedback ? undefined : title}
         className={`${styles.button} ${className}`}
         {...props}
       >
         <Icon size={16} strokeWidth={1.6} aria-hidden="true" />
       </button>
     );
+    if (!feedback || !title) return button;
+    return <Tooltip.Root><Tooltip.Trigger asChild>{button}</Tooltip.Trigger><Tooltip.Portal>
+      <Tooltip.Content className={styles.tooltip} sideOffset={7} collisionPadding={8}>
+        {title}<Tooltip.Arrow className={styles.arrow} />
+      </Tooltip.Content>
+    </Tooltip.Portal></Tooltip.Root>;
   },
 );