From 9540c88d5aff8c3843a0febdb148fd2e551bf540 Mon Sep 17 00:00:00 2001
From: denis0001-dev <denis0001.dev@ya.ru>
Date: Mon, 6 Oct 2025 14:20:15 +0300
Subject: [PATCH] Clean up

---
 .cursor/commands/clean-up.md                  |   4 +
 .../app/ui/components/chat/ChatMessages.tsx   |   4 +-
 .../ui/components/chat/MessageContextMenu.tsx |   1 -
 .../ui/components/chat/MessageReactions.tsx   |   5 +-
 .../app/ui/components/chat/ReactionBar.tsx    | 100 ------------------
 5 files changed, 7 insertions(+), 107 deletions(-)
 create mode 100644 .cursor/commands/clean-up.md
 delete mode 100644 frontend/src/pages/app/ui/components/chat/ReactionBar.tsx

diff --git a/.cursor/commands/clean-up.md b/.cursor/commands/clean-up.md
new file mode 100644
index 0000000..b18b60b
--- /dev/null
+++ b/.cursor/commands/clean-up.md
@@ -0,0 +1,4 @@
+View git diff between the branch i specified and HEAD. If no branch is specified, 
+default to main. Identify code that needs to be cleaned up, like debug logs, 
+unused variables etc. Think twice before removing or adding code, because you 
+mustn't alter the behavior.
\ No newline at end of file
diff --git a/frontend/src/pages/app/ui/components/chat/ChatMessages.tsx b/frontend/src/pages/app/ui/components/chat/ChatMessages.tsx
index 1fa5bfd..865dcff 100644
--- a/frontend/src/pages/app/ui/components/chat/ChatMessages.tsx
+++ b/frontend/src/pages/app/ui/components/chat/ChatMessages.tsx
@@ -131,7 +131,7 @@ export function ChatMessages({ messages = [], children, isDm = false, onReplySel
                 const dmEnvelopeId = message?.runtimeData?.dmEnvelope?.id;
                 
                 if (dmEnvelopeId) {
-                    await request<AddDmReactionRequest["data"], any>({
+                    await request<AddDmReactionRequest["data"]>({
                         type: "addDmReaction",
                         credentials: { scheme: "Bearer", credentials: user.authToken },
                         data: {
@@ -142,7 +142,7 @@ export function ChatMessages({ messages = [], children, isDm = false, onReplySel
                 }
             } else {
                 // For regular chat messages
-                await request<AddReactionRequest["data"], any>({
+                await request<AddReactionRequest["data"]>({
                     type: "addReaction",
                     credentials: { scheme: "Bearer", credentials: user.authToken },
                     data: {
diff --git a/frontend/src/pages/app/ui/components/chat/MessageContextMenu.tsx b/frontend/src/pages/app/ui/components/chat/MessageContextMenu.tsx
index 41ebb14..8b7750e 100644
--- a/frontend/src/pages/app/ui/components/chat/MessageContextMenu.tsx
+++ b/frontend/src/pages/app/ui/components/chat/MessageContextMenu.tsx
@@ -149,7 +149,6 @@ export function MessageContextMenu({
             setIsClosing(false);
             setAnimationClass('entering'); // Reset for next opening
         }, 200); // Match the animation duration from _animations.scss
-        // TODO no hardcoded delays
     }
 
     interface Action {
diff --git a/frontend/src/pages/app/ui/components/chat/MessageReactions.tsx b/frontend/src/pages/app/ui/components/chat/MessageReactions.tsx
index 06d4246..f086ac4 100644
--- a/frontend/src/pages/app/ui/components/chat/MessageReactions.tsx
+++ b/frontend/src/pages/app/ui/components/chat/MessageReactions.tsx
@@ -88,12 +88,9 @@ export function MessageReactions({ reactions, onReactionClick, messageId }: Mess
                 const hasUserReacted = reaction.users.some(u => u.id === user.currentUser?.id);
                 const isAnimating = animatingReactions.has(reaction.emoji);
                 
-                // Create a unique key that includes messageId, emoji, count, and index to prevent duplicates
-                const uniqueKey = `${messageId || 'unknown'}-${reaction.emoji}-${reaction.count}-${index}`;
-                
                 return (
                     <button
-                        key={uniqueKey}
+                        key={`${messageId || 'unknown'}-${reaction.emoji}-${reaction.count}-${index}`}
                         className={`reaction-button ${hasUserReacted ? "reacted" : ""} ${isAnimating ? "removing" : ""}`}
                         onClick={() => onReactionClick(reaction.emoji)}
                         title={reaction.users.map(u => u.username).join(", ")}
diff --git a/frontend/src/pages/app/ui/components/chat/ReactionBar.tsx b/frontend/src/pages/app/ui/components/chat/ReactionBar.tsx
deleted file mode 100644
index aa2ae75..0000000
--- a/frontend/src/pages/app/ui/components/chat/ReactionBar.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import { useState, useEffect } from "react";
-import type { Size2D } from "../../../core/types";
-
-interface ReactionBarProps {
-    isOpen: boolean;
-    onClose: () => void;
-    onEmojiSelect: (emoji: string) => void;
-    onExpandClick: () => void;
-    position: Size2D;
-}
-
-// Most common emojis for quick reactions
-const QUICK_REACTIONS = ["👍", "❤️", "😂", "😮", "😢", "😡"];
-
-export function ReactionBar({ isOpen, onClose, onEmojiSelect, onExpandClick, position }: ReactionBarProps) {
-    const [isClosing, setIsClosing] = useState(false);
-    const [calculatedPosition, setCalculatedPosition] = useState(position);
-
-    function handleEmojiClick(emoji: string) {
-        onEmojiSelect(emoji);
-        handleClose();
-    }
-
-    // Smart positioning logic to avoid screen edge clipping
-    useEffect(() => {
-        if (isOpen) {
-            const barWidth = 240; // Approximate width of reaction bar (6 emojis + expand button)
-            const barHeight = 48; // Approximate height
-            const padding = 10; // Padding from viewport edges
-            
-            const viewportWidth = window.innerWidth;
-            
-            let x = position.x;
-            let y = position.y - barHeight - 20; // 20px above the position
-            
-            // Check if bar would overflow right edge
-            if (x + barWidth + padding > viewportWidth) {
-                x = viewportWidth - barWidth - padding;
-            }
-            
-            // Check if bar would overflow left edge
-            if (x < padding) {
-                x = padding;
-            }
-            
-            // Check if bar would overflow top edge
-            if (y < padding) {
-                y = position.y + 40; // Position below instead of above
-            }
-            
-            setCalculatedPosition({ x, y });
-        }
-    }, [isOpen, position]);
-
-    function handleClose() {
-        setIsClosing(true);
-        setTimeout(() => {
-            onClose();
-            setIsClosing(false);
-        }, 150);
-    }
-
-    if (!isOpen) return null;
-
-    return (
-        <div 
-            className={`reaction-bar ${isClosing ? "closing" : ""}`}
-            style={{
-                position: "fixed",
-                left: calculatedPosition.x,
-                top: calculatedPosition.y,
-                zIndex: 1001 // Higher than context menu to appear above it
-            }}
-            onClick={(e) => e.stopPropagation()}
-        >
-            <div className="reaction-bar-content">
-                {QUICK_REACTIONS.map((emoji, index) => (
-                    <button
-                        key={index}
-                        className="reaction-emoji-button"
-                        onClick={() => handleEmojiClick(emoji)}
-                        title={emoji}
-                    >
-                        {emoji}
-                    </button>
-                ))}
-                <button
-                    className="reaction-expand-button"
-                    onClick={() => {
-                        handleClose();
-                        onExpandClick();
-                    }}
-                    title="More emojis"
-                >
-                    <span className="material-symbols">add</span>
-                </button>
-            </div>
-        </div>
-    );
-}