From 8069cb2925bcf34a63b5b1738f41e97c0385575b Mon Sep 17 00:00:00 2001
From: Gal Podlipnik <itzgal2004@gmail.com>
Date: Thu, 12 Jun 2025 03:46:46 +0200
Subject: [PATCH] improvement

---
 frontend/src/components/ChatSidebar.tsx  |   2 +-
 frontend/src/components/MessageInput.tsx | 122 +++++++++++++++++++----
 2 files changed, 104 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/ChatSidebar.tsx b/frontend/src/components/ChatSidebar.tsx
index e4a55eb..a303f51 100644
--- a/frontend/src/components/ChatSidebar.tsx
+++ b/frontend/src/components/ChatSidebar.tsx
@@ -188,7 +188,7 @@ export const ChatSidebar: FC<ChatSidebarProps> = ({
                 <div className="flex items-center space-x-1">
                   <Badge variant="secondary" className="text-xs">
                     <Users className="h-3 w-3 mr-1" />
-                    {getOnlineMembersCount(room) / room.members.length}
+                    {getOnlineMembersCount(room)} / {room.members.length} online
                   </Badge>
                 </div>
               </div>
diff --git a/frontend/src/components/MessageInput.tsx b/frontend/src/components/MessageInput.tsx
index 3086764..38fd330 100644
--- a/frontend/src/components/MessageInput.tsx
+++ b/frontend/src/components/MessageInput.tsx
@@ -1,6 +1,6 @@
 import { useSocket } from '@/hooks/useSocket';
-import { Send } from 'lucide-react';
-import { useEffect, useState, type FC, type FormEvent } from 'react';
+import { Mic, Paperclip, Send, Smile } from 'lucide-react';
+import { useEffect, useRef, useState, type FC, type FormEvent } from 'react';
 import { toast } from 'sonner';
 import { Button } from './ui/button';
 import { Input } from './ui/input';
@@ -12,6 +12,9 @@ type MessageInputProps = {
 export const MessageInput: FC<MessageInputProps> = ({ roomId }) => {
   const [message, setMessage] = useState('');
   const [isRateLimited, setIsRateLimited] = useState(false);
+  const [showEmojiPicker, setShowEmojiPicker] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
   const { socket } = useSocket();
 
   useEffect(() => {
@@ -50,24 +53,105 @@ export const MessageInput: FC<MessageInputProps> = ({ roomId }) => {
     setMessage('');
   };
 
+  // Function to handle emoji selection (placeholder for now)
+  const handleEmojiClick = (emoji: string) => {
+    setMessage((prev) => prev + emoji);
+    inputRef.current?.focus();
+    setShowEmojiPicker(false);
+  };
+
   return (
-    <div className="p-4 border-t border-gray-200">
-      <form onSubmit={handleSubmit} className="flex space-x-2">
-        <Input
-          value={message}
-          onChange={(e) => setMessage(e.target.value)}
-          placeholder={
-            isRateLimited
-              ? 'Rate limited - please wait...'
-              : 'Type your message...'
-          }
-          disabled={isRateLimited}
-          className="flex-1"
-        />
-        <Button type="submit" disabled={!message.trim() || isRateLimited}>
-          <Send className="h-4 w-4" />
-        </Button>
-      </form>
+    <div className="p-4 border-t border-gray-200 bg-white dark:bg-gray-900 transition-all duration-200">
+      <div className="max-w-4xl mx-auto">
+        <form onSubmit={handleSubmit} className="relative">
+          <div
+            className={`flex items-center space-x-2 p-1 rounded-full border ${
+              isFocused ? 'border-blue-400 shadow-sm' : 'border-gray-300'
+            } bg-white dark:bg-gray-800 transition-all duration-200`}
+          >
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              className="rounded-full h-9 w-9 text-gray-500 hover:text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-700"
+              onClick={() => setShowEmojiPicker((prev) => !prev)}
+            >
+              <Smile className="h-5 w-5" />
+            </Button>
+
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              className="rounded-full h-9 w-9 text-gray-500 hover:text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-700"
+            >
+              <Paperclip className="h-5 w-5" />
+            </Button>
+
+            <Input
+              ref={inputRef}
+              value={message}
+              onChange={(e) => setMessage(e.target.value)}
+              onFocus={() => setIsFocused(true)}
+              onBlur={() => setIsFocused(false)}
+              placeholder={
+                isRateLimited
+                  ? 'Rate limited - please wait...'
+                  : 'Type your message...'
+              }
+              disabled={isRateLimited}
+              className="flex-1 border-0 focus-visible:ring-0 focus-visible:ring-offset-0 bg-transparent py-2 px-3"
+            />
+
+            {message.trim() ? (
+              <Button
+                type="submit"
+                size="icon"
+                disabled={!message.trim() || isRateLimited}
+                className="rounded-full h-9 w-9 bg-blue-500 hover:bg-blue-600 text-white"
+              >
+                <Send className="h-4 w-4" />
+              </Button>
+            ) : (
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="rounded-full h-9 w-9 text-gray-500 hover:text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-700"
+              >
+                <Mic className="h-5 w-5" />
+              </Button>
+            )}
+          </div>
+
+          {/* Emoji picker placeholder - you'd need to implement or use a library like emoji-mart */}
+          {showEmojiPicker && (
+            <div className="absolute bottom-full mb-2 p-2 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700">
+              <div className="grid grid-cols-8 gap-1">
+                {['😀', '😂', '❤️', '👍', '🎉', '🔥', '👏', '😢'].map(
+                  (emoji) => (
+                    <button
+                      key={emoji}
+                      type="button"
+                      onClick={() => handleEmojiClick(emoji)}
+                      className="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors"
+                    >
+                      {emoji}
+                    </button>
+                  )
+                )}
+              </div>
+            </div>
+          )}
+        </form>
+
+        {isFocused && !isRateLimited && (
+          <div className="mt-1 text-xs text-gray-500 dark:text-gray-400 flex justify-between">
+            <span>Press Enter to send</span>
+            <span>{message.length} / 2000</span>
+          </div>
+        )}
+      </div>
     </div>
   );
 };