feat(calculadora): adicionar dialog arrastável e seleção de valor

- Calculadora agora é arrastável via drag handle no header
- Novo callback onSelectValue permite inserir valor no campo de lançamento
- Ajustado subtitle de categorias e estilo do collapse na sidebar
- Atualizado snapshot drizzle

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

hooks/use-calculator-keyboard.ts

@@ -1,9 +1,18 @@
 import { useEffect } from "react";
+import type { Operator } from "@/lib/utils/calculator";
 
 type UseCalculatorKeyboardParams = {
+	isOpen: boolean;
 	canCopy: boolean;
 	onCopy: () => void | Promise<void>;
 	onPaste: () => void | Promise<void>;
+	inputDigit: (digit: string) => void;
+	inputDecimal: () => void;
+	setNextOperator: (op: Operator) => void;
+	evaluate: () => void;
+	deleteLastDigit: () => void;
+	reset: () => void;
+	applyPercent: () => void;
 };
 
 function shouldIgnoreForEditableTarget(target: EventTarget | null): boolean {
@@ -17,76 +26,118 @@ function shouldIgnoreForEditableTarget(target: EventTarget | null): boolean {
 	);
 }
 
+const KEY_TO_OPERATOR: Record<string, Operator> = {
+	"+": "add",
+	"-": "subtract",
+	"*": "multiply",
+	"/": "divide",
+};
+
 export function useCalculatorKeyboard({
+	isOpen,
 	canCopy,
 	onCopy,
 	onPaste,
+	inputDigit,
+	inputDecimal,
+	setNextOperator,
+	evaluate,
+	deleteLastDigit,
+	reset,
+	applyPercent,
 }: UseCalculatorKeyboardParams) {
 	useEffect(() => {
-		if (!canCopy) {
-			return;
-		}
+		if (!isOpen) return;
 
 		const handleKeyDown = (event: KeyboardEvent) => {
-			if (!(event.ctrlKey || event.metaKey)) {
+			const { key, ctrlKey, metaKey } = event;
+
+			// Ctrl/Cmd shortcuts
+			if (ctrlKey || metaKey) {
+				if (shouldIgnoreForEditableTarget(event.target)) return;
+
+				const lowerKey = key.toLowerCase();
+				if (lowerKey === "c" && canCopy) {
+					const selection = window.getSelection();
+					if (selection && selection.toString().trim().length > 0) return;
+					event.preventDefault();
+					void onCopy();
+				} else if (lowerKey === "v") {
+					const selection = window.getSelection();
+					if (selection && selection.toString().trim().length > 0) return;
+					if (!navigator.clipboard?.readText) return;
+					event.preventDefault();
+					void onPaste();
+				}
 				return;
 			}
 
-			if (shouldIgnoreForEditableTarget(event.target)) {
+			// Digits
+			if (key >= "0" && key <= "9") {
+				event.preventDefault();
+				inputDigit(key);
 				return;
 			}
 
-			if (event.key.toLowerCase() !== "c") {
+			// Decimal
+			if (key === "." || key === ",") {
+				event.preventDefault();
+				inputDecimal();
 				return;
 			}
 
-			const selection = window.getSelection();
-			if (selection && selection.toString().trim().length > 0) {
+			// Operators
+			const op = KEY_TO_OPERATOR[key];
+			if (op) {
+				event.preventDefault();
+				setNextOperator(op);
 				return;
 			}
 
-			event.preventDefault();
-			void onCopy();
+			// Evaluate
+			if (key === "Enter" || key === "=") {
+				event.preventDefault();
+				evaluate();
+				return;
+			}
+
+			// Backspace
+			if (key === "Backspace") {
+				event.preventDefault();
+				deleteLastDigit();
+				return;
+			}
+
+			// Escape resets calculator (dialog close is handled by onEscapeKeyDown)
+			if (key === "Escape") {
+				event.preventDefault();
+				reset();
+				return;
+			}
+
+			// Percent
+			if (key === "%") {
+				event.preventDefault();
+				applyPercent();
+				return;
+			}
 		};
 
 		document.addEventListener("keydown", handleKeyDown);
-
 		return () => {
 			document.removeEventListener("keydown", handleKeyDown);
 		};
-	}, [canCopy, onCopy]);
-
-	useEffect(() => {
-		const handlePasteShortcut = (event: KeyboardEvent) => {
-			if (!(event.ctrlKey || event.metaKey)) {
-				return;
-			}
-
-			if (event.key.toLowerCase() !== "v") {
-				return;
-			}
-
-			if (shouldIgnoreForEditableTarget(event.target)) {
-				return;
-			}
-
-			const selection = window.getSelection();
-			if (selection && selection.toString().trim().length > 0) {
-				return;
-			}
-
-			if (!navigator.clipboard?.readText) {
-				return;
-			}
-
-			event.preventDefault();
-			void onPaste();
-		};
-
-		document.addEventListener("keydown", handlePasteShortcut);
-
-		return () => {
-			document.removeEventListener("keydown", handlePasteShortcut);
-		};
-	}, [onPaste]);
+	}, [
+		isOpen,
+		canCopy,
+		onCopy,
+		onPaste,
+		inputDigit,
+		inputDecimal,
+		setNextOperator,
+		evaluate,
+		deleteLastDigit,
+		reset,
+		applyPercent,
+	]);
 }

hooks/use-calculator-state.ts

@@ -15,6 +15,7 @@ export type CalculatorButtonConfig = {
 	onClick: () => void;
 	variant?: VariantProps<typeof buttonVariants>["variant"];
 	colSpan?: number;
+	className?: string;
 };
 
 export function useCalculatorState() {
@@ -242,8 +243,8 @@ export function useCalculatorState() {
 	const buttons: CalculatorButtonConfig[][] = [
 		[
 			{ label: "C", onClick: reset, variant: "destructive" },
-			{ label: "⌫", onClick: deleteLastDigit, variant: "default" },
-			{ label: "%", onClick: applyPercent, variant: "default" },
+			{ label: "⌫", onClick: deleteLastDigit, variant: "secondary" },
+			{ label: "%", onClick: applyPercent, variant: "secondary" },
 			{
 				label: "÷",
 				onClick: makeOperatorHandler("divide"),
@@ -277,7 +278,7 @@ export function useCalculatorState() {
 			{ label: "+", onClick: makeOperatorHandler("add"), variant: "outline" },
 		],
 		[
-			{ label: "±", onClick: toggleSign, variant: "default" },
+			{ label: "±", onClick: toggleSign, variant: "secondary" },
 			{ label: "0", onClick: () => inputDigit("0") },
 			{ label: ",", onClick: inputDecimal },
 			{ label: "=", onClick: evaluate, variant: "default" },
@@ -358,11 +359,20 @@ export function useCalculatorState() {
 	}, []);
 
 	return {
+		display,
+		operator,
 		expression,
 		history,
 		resultText,
 		copied,
 		buttons,
+		inputDigit,
+		inputDecimal,
+		setNextOperator,
+		evaluate,
+		deleteLastDigit,
+		reset,
+		applyPercent,
 		copyToClipboard,
 		pasteFromClipboard,
 	};

hooks/use-draggable-dialog.ts

@@ -0,0 +1,90 @@
+import { useCallback, useRef } from "react";
+
+type Position = { x: number; y: number };
+
+const MIN_VISIBLE_PX = 20;
+
+function clampPosition(
+	x: number,
+	y: number,
+	elementWidth: number,
+	elementHeight: number,
+): Position {
+	const maxX = window.innerWidth - MIN_VISIBLE_PX;
+	const minX = MIN_VISIBLE_PX - elementWidth;
+	const maxY = window.innerHeight - MIN_VISIBLE_PX;
+	const minY = MIN_VISIBLE_PX - elementHeight;
+
+	return {
+		x: Math.min(Math.max(x, minX), maxX),
+		y: Math.min(Math.max(y, minY), maxY),
+	};
+}
+
+function applyTranslate(el: HTMLElement, x: number, y: number) {
+	if (x === 0 && y === 0) {
+		el.style.translate = "";
+	} else {
+		el.style.translate = `${x}px ${y}px`;
+	}
+}
+
+export function useDraggableDialog() {
+	const offset = useRef<Position>({ x: 0, y: 0 });
+	const dragStart = useRef<Position | null>(null);
+	const initialOffset = useRef<Position>({ x: 0, y: 0 });
+	const contentRef = useRef<HTMLElement | null>(null);
+
+	const onPointerDown = useCallback((e: React.PointerEvent<HTMLElement>) => {
+		if (e.button !== 0) return;
+
+		dragStart.current = { x: e.clientX, y: e.clientY };
+		initialOffset.current = { x: offset.current.x, y: offset.current.y };
+		(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+	}, []);
+
+	const onPointerMove = useCallback((e: React.PointerEvent<HTMLElement>) => {
+		if (!dragStart.current || !contentRef.current) return;
+
+		const dx = e.clientX - dragStart.current.x;
+		const dy = e.clientY - dragStart.current.y;
+
+		const rawX = initialOffset.current.x + dx;
+		const rawY = initialOffset.current.y + dy;
+
+		const el = contentRef.current;
+		const clamped = clampPosition(rawX, rawY, el.offsetWidth, el.offsetHeight);
+
+		offset.current = clamped;
+		applyTranslate(el, clamped.x, clamped.y);
+	}, []);
+
+	const onPointerUp = useCallback((e: React.PointerEvent<HTMLElement>) => {
+		dragStart.current = null;
+		(e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId);
+	}, []);
+
+	const resetPosition = useCallback(() => {
+		offset.current = { x: 0, y: 0 };
+		if (contentRef.current) {
+			applyTranslate(contentRef.current, 0, 0);
+		}
+	}, []);
+
+	const dragHandleProps = {
+		onPointerDown,
+		onPointerMove,
+		onPointerUp,
+		style: { touchAction: "none" as const, cursor: "grab" },
+	};
+
+	const contentRefCallback = useCallback((node: HTMLElement | null) => {
+		contentRef.current = node;
+	}, []);
+
+	return {
+		dragHandleProps,
+		contentRefCallback,
+		resetPosition,
+	};
+}