feat(ui): add emoji picker to message composer

ui/src/components/conversation.rs

@@ -3,6 +3,7 @@ use crate::components::app::{CURRENT_ROOM, EDIT_ROOM_MODAL, MEMBER_INFO_MODAL, N
 use crate::room_data::SendMessageError;
 use crate::util::ecies::encrypt_with_symmetric_key;
 use crate::util::{format_utc_as_full_datetime, format_utc_as_local_time, get_current_system_time};
+mod emoji_picker;
 mod message_actions;
 mod message_input;
 mod not_member_notification;

ui/src/components/conversation/emoji_picker.rs

@@ -0,0 +1,151 @@
+//! Emoji picker component for inserting emojis into messages.
+
+use dioxus::prelude::*;
+
+/// Emoji categories with their emojis
+pub const EMOJI_CATEGORIES: &[(&str, &str, &[&str])] = &[
+    (
+        "smileys",
+        "😀",
+        &[
+            "😀", "😃", "😄", "😁", "😆", "😅", "🤣", "😂", "🙂", "😊", "😇", "🥰", "😍", "🤩",
+            "😘", "😗", "😚", "😙", "🥲", "😋", "😛", "😜", "🤪", "😝", "🤑", "🤗", "🤭", "🤫",
+            "🤔", "🤐", "🤨", "😐", "😑", "😶", "😏", "😒", "🙄", "😬", "😮‍💨", "🤥", "😌", "😔",
+            "😪", "🤤", "😴", "😷", "🤒", "🤕", "🤢", "🤮", "🤧", "🥵", "🥶", "🥴", "😵", "🤯",
+            "🤠", "🥳", "🥸", "😎", "🤓", "🧐", "😕", "😟", "🙁", "😮", "😯", "😲", "😳", "🥺",
+            "😦", "😧", "😨", "😰", "😥", "😢", "😭", "😱", "😖", "😣", "😞", "😓", "😩", "😫",
+            "🥱", "😤", "😡", "😠", "🤬", "😈", "👿", "💀", "☠️", "💩", "🤡", "👹", "👺", "👻",
+            "👽", "👾", "🤖",
+        ],
+    ),
+    (
+        "gestures",
+        "👋",
+        &[
+            "👋", "🤚", "🖐️", "✋", "🖖", "👌", "🤌", "🤏", "✌️", "🤞", "🤟", "🤘", "🤙", "👈",
+            "👉", "👆", "🖕", "👇", "☝️", "👍", "👎", "✊", "👊", "🤛", "🤜", "👏", "🙌", "👐",
+            "🤲", "🤝", "🙏", "✍️", "💅", "🤳", "💪", "🦾", "🦿", "🦵", "🦶", "👂", "🦻", "👃",
+            "🧠", "🫀", "🫁", "🦷", "🦴", "👀", "👁️", "👅", "👄", "💋",
+        ],
+    ),
+    (
+        "hearts",
+        "❤️",
+        &[
+            "❤️", "🧡", "💛", "💚", "💙", "💜", "🖤", "🤍", "🤎", "💔", "❣️", "💕", "💞", "💓",
+            "💗", "💖", "💘", "💝", "💟", "♥️", "💌", "💐", "🌹", "🥀", "🌷",
+        ],
+    ),
+    (
+        "celebration",
+        "🎉",
+        &[
+            "🎉", "🎊", "🎈", "🎁", "🎀", "🪅", "🪆", "🎂", "🍰", "🧁", "🥳", "🥂", "🍾", "✨",
+            "🎆", "🎇", "🎄", "🎃", "🎗️", "🏆", "🥇", "🥈", "🥉", "🏅", "🎖️", "🎭", "🎪",
+        ],
+    ),
+    (
+        "animals",
+        "🐶",
+        &[
+            "🐶", "🐱", "🐭", "🐹", "🐰", "🦊", "🐻", "🐼", "🐻‍❄️", "🐨", "🐯", "🦁", "🐮",
+            "🐷", "🐸", "🐵", "🙈", "🙉", "🙊", "🐔", "🐧", "🐦", "🐤", "🦆", "🦅", "🦉", "🦇",
+            "🐺", "🐗", "🐴", "🦄", "🐝", "🪱", "🐛", "🦋", "🐌", "🐞", "🐜", "🪰", "🪲", "🪳",
+            "🦟", "🦗", "🕷️", "🦂", "🐢", "🐍", "🦎", "🦖", "🦕", "🐙", "🦑", "🦐", "🦞", "🦀",
+            "🐡", "🐠", "🐟", "🐬", "🐳", "🐋", "🦈", "🐊",
+        ],
+    ),
+    (
+        "food",
+        "🍕",
+        &[
+            "🍕", "🍔", "🍟", "🌭", "🍿", "🧂", "🥓", "🥚", "🍳", "🧇", "🥞", "🧈", "🍞", "🥐",
+            "🥖", "🥨", "🧀", "🥗", "🥙", "🥪", "🌮", "🌯", "🫔", "🥫", "🍝", "🍜", "🍲", "🍛",
+            "🍣", "🍱", "🥟", "🦪", "🍤", "🍙", "🍚", "🍘", "🍥", "🥠", "🥮", "🍢", "🍡", "🍧",
+            "🍨", "🍦", "🥧", "🧁", "🍰", "🎂", "🍮", "🍭", "🍬", "🍫", "🍩", "🍪", "🌰", "🥜",
+            "☕", "🍵", "🧃", "🥤", "🧋", "🍶", "🍺", "🍻", "🥂", "🍷", "🥃", "🍸", "🍹", "🧉",
+            "🍾",
+        ],
+    ),
+    (
+        "objects",
+        "💡",
+        &[
+            "💡", "🔦", "🏮", "📱", "💻", "🖥️", "🖨️", "⌨️", "🖱️", "🖲️", "💽", "💾", "💿",
+            "📀", "🎥", "📷", "📹", "📼", "🔍", "🔎", "🔬", "🔭", "📡", "💉", "🩸", "💊", "🩹",
+            "🩺", "🚪", "🛗", "🪞", "🪟", "🛏️", "🛋️", "🪑", "🚽", "🪠", "🚿", "🛁", "🪤", "🪒",
+            "🧴", "🧷", "🧹", "🧺", "🧻", "🪣", "🧼", "🪥", "🧽", "🧯", "🛒", "🚬", "⚰️", "🪦",
+            "⚱️", "🗿", "🪧", "🏧",
+        ],
+    ),
+    (
+        "symbols",
+        "✅",
+        &[
+            "✅", "❌", "❓", "❗", "‼️", "⁉️", "💯", "🔴", "🟠", "🟡", "🟢", "🔵", "🟣", "⚫",
+            "⚪", "🟤", "🔶", "🔷", "🔸", "🔹", "🔺", "🔻", "💠", "🔘", "🔳", "🔲", "🏁", "🚩",
+            "🎌", "🏴", "🏳️", "⬛", "⬜", "◼️", "◻️", "◾", "◽", "▪️", "▫️", "🔈", "🔇", "🔉",
+            "🔊", "🔔", "🔕", "📣", "📢", "💬", "💭", "🗯️", "♠️", "♣️", "♥️", "♦️", "🃏",
+            "🎴", "🀄",
+        ],
+    ),
+];
+
+/// Common/frequently used emojis (shown first) - 4x4 grid
+pub const FREQUENT_EMOJIS: &[&str] = &[
+    "👍", "❤️", "😂", "👀",
+    "🔥", "😮", "😢", "😡",
+    "🎉", "🤔", "👋", "✅",
+    "💯", "🙏", "😍", "👏",
+];
+
+#[derive(Props, Clone, PartialEq)]
+pub struct EmojiPickerProps {
+    /// Called when an emoji is selected
+    pub on_select: EventHandler<String>,
+    /// Called when the picker should close
+    pub on_close: EventHandler<()>,
+}
+
+/// Simple emoji picker with a 4x4 grid of popular emojis
+#[component]
+pub fn EmojiPicker(props: EmojiPickerProps) -> Element {
+    rsx! {
+        div {
+            class: "bg-panel rounded-lg shadow-lg border border-border p-1.5",
+            // Prevent clicks inside from bubbling
+            onclick: move |e| e.stop_propagation(),
+
+            // 4x4 emoji grid with tight spacing
+            div {
+                class: "grid",
+                style: "grid-template-columns: repeat(4, 1fr); gap: 2px;",
+                for emoji in FREQUENT_EMOJIS.iter() {
+                    {render_emoji_button(emoji, &props.on_select, &props.on_close)}
+                }
+            }
+        }
+    }
+}
+
+fn render_emoji_button(
+    emoji: &str,
+    on_select: &EventHandler<String>,
+    on_close: &EventHandler<()>,
+) -> Element {
+    let emoji_str = emoji.to_string();
+    let on_select = on_select.clone();
+    let on_close = on_close.clone();
+
+    rsx! {
+        button {
+            key: "{emoji}",
+            class: "p-1 rounded hover:bg-surface transition-colors text-xl leading-none",
+            onclick: move |_| {
+                on_select.call(emoji_str.clone());
+                on_close.call(());
+            },
+            "{emoji}"
+        }
+    }
+}

ui/src/components/conversation/message_actions.rs

@@ -2,8 +2,7 @@ use dioxus::prelude::*;
 use river_core::room_state::member::MemberId;
 use river_core::room_state::message::MessageId;
 
-/// Common emoji reactions to show in the picker
-pub const REACTION_EMOJIS: &[&str] = &["👍", "❤️", "😂", "😮", "😢", "😡", "🎉", "🤔", "👋"];
+use super::emoji_picker::FREQUENT_EMOJIS;
 
 /// Props for the message actions component
 #[derive(Props, Clone, PartialEq)]
@@ -48,7 +47,7 @@ pub fn MessageActions(props: MessageActionsProps) -> Element {
                     div {
                         class: "absolute top-full left-0 mt-1 bg-panel rounded-lg shadow-lg border border-border p-2 z-50",
                         div { class: "flex flex-wrap gap-1 max-w-[200px]",
-                            {REACTION_EMOJIS.iter().map(|emoji| {
+                            {FREQUENT_EMOJIS.iter().map(|emoji| {
                                 let emoji_str = emoji.to_string();
                                 let msg_id = message_id.clone();
                                 rsx! {
@@ -116,7 +115,7 @@ pub fn QuickReactionButton(props: QuickReactionProps) -> Element {
             if show_picker() {
                 div {
                     class: "absolute top-full right-0 mt-1 bg-panel rounded-lg shadow-lg border border-border p-1 flex gap-0.5 z-50",
-                    {REACTION_EMOJIS.iter().take(6).map(|emoji| {
+                    {FREQUENT_EMOJIS.iter().take(6).map(|emoji| {
                         let emoji_str = emoji.to_string();
                         let message_id = props.message_id.clone();
                         rsx! {

ui/src/components/conversation/message_input.rs

@@ -1,13 +1,15 @@
-use dioxus::logger::tracing::*;
 use dioxus::prelude::*;
 
+use super::emoji_picker::EmojiPicker;
+
 /// Message input component that owns its own state.
 /// This isolates keystroke handling from the parent component,
 /// preventing expensive re-renders of the message list on each keystroke.
 #[component]
 pub fn MessageInput(handle_send_message: EventHandler<String>) -> Element {
     // Own the message state locally - keystrokes only re-render this component
     let mut message_text = use_signal(|| String::new());
+    let mut show_emoji_picker = use_signal(|| false);
 
     let mut send_message = move || {
         let text = message_text.peek().to_string();
@@ -17,10 +19,46 @@ pub fn MessageInput(handle_send_message: EventHandler<String>) -> Element {
         }
     };
 
+    // Handle emoji selection - insert at end of message
+    let handle_emoji_select = move |emoji: String| {
+        let current = message_text.peek().to_string();
+        message_text.set(format!("{}{}", current, emoji));
+    };
+
     rsx! {
-        div { class: "flex-shrink-0 border-t border-border bg-panel",
+        // Backdrop for emoji picker - outside the message bar to avoid z-index issues
+        if show_emoji_picker() {
+            div {
+                class: "fixed inset-0 z-40",
+                onclick: move |_| show_emoji_picker.set(false),
+            }
+        }
+        div { class: "flex-shrink-0 border-t border-border bg-panel relative z-50",
             div { class: "max-w-4xl mx-auto px-4 py-3",
-                div { class: "flex gap-3 items-end",
+                div { class: "flex gap-3 items-center",
+                    // Emoji picker button and popup
+                    div { class: "relative self-center",
+                        button {
+                            class: "p-2.5 rounded-xl hover:bg-surface transition-colors",
+                            title: "Insert emoji",
+                            onclick: move |_| show_emoji_picker.set(!show_emoji_picker()),
+                            span {
+                                class: "text-lg",
+                                style: "filter: grayscale(100%); opacity: 0.6;",
+                                "🙂"
+                            }
+                        }
+                        // Emoji picker popup (appears above the button)
+                        if show_emoji_picker() {
+                            div {
+                                class: "absolute bottom-full left-0 mb-2",
+                                EmojiPicker {
+                                    on_select: handle_emoji_select,
+                                    on_close: move |_| show_emoji_picker.set(false),
+                                }
+                            }
+                        }
+                    }
                     textarea {
                         class: "flex-1 px-4 py-2.5 bg-surface border border-border rounded-xl text-text placeholder-text-muted focus:outline-none focus:ring-2 focus:ring-accent/50 focus:border-accent transition-colors resize-none min-h-[44px] max-h-[200px]",
                         placeholder: "Type your message...",
@@ -39,7 +77,6 @@ pub fn MessageInput(handle_send_message: EventHandler<String>) -> Element {
                     button {
                         class: "px-5 py-2.5 bg-accent hover:bg-accent-hover text-white font-medium rounded-xl transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
                         onclick: move |_| {
-                            info!("Send button clicked");
                             send_message();
                         },
                         "Send"