FromChat/web
1
0
Fork 0
mirror of https://github.com/fromchat-messenger/web.git synced 2026-09-23 19:45:05 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fix category titles

Browse Source
This commit is contained in:
denis0001-dev
2025-10-02 23:53:30 +03:00
Unverified
parent ace9fdd5df
commit 014da1702b
3 changed files with 202 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/app/ui/components/chat/ChatInputWrapper.tsx
+3 -7
View File
@@ -44,7 +44,6 @@ export function ChatInputWrapper(
const [errorOpen, setErrorOpen] = useState(false);
const [emojiMenuOpen, setEmojiMenuOpen] = useState(false);
const [emojiMenuPosition, setEmojiMenuPosition] = useState({ x: 0, y: 0 });
const emojiButtonRef = useRef<HTMLButtonElement>(null);
const chatInputWrapperRef = useRef<HTMLDivElement>(null);
// Expose a way for parent to programmatically add files
@@ -176,12 +175,9 @@ export function ChatInputWrapper(
)}
</AnimatedHeight>
<div className="chat-input">
<mdui-button-icon
ref={emojiButtonRef}
icon="mood"
onClick={handleEmojiButtonClick}
className="emoji-btn"
></mdui-button-icon>
<div className="left-buttons">
<mdui-button-icon icon="mood" onClick={handleEmojiButtonClick} className="emoji-btn"></mdui-button-icon>
</div>
<RichTextArea
className="message-input"
id="message-input"
frontend/src/pages/app/ui/components/chat/EmojiMenu.tsx
+105 -34
View File
@@ -1,4 +1,4 @@
import { useState, useEffect, useRef } from "react";
import { useState, useEffect, useRef, useCallback } from "react";
import { EMOJI_CATEGORIES, getRecentEmojis, addRecentEmoji } from "./emojiData";
import type { Size2D } from "../../../core/types";
@@ -13,6 +13,10 @@ export function EmojiMenu({ isOpen, onClose, onEmojiSelect, position }: EmojiMen
const [activeCategory, setActiveCategory] = useState("recent");
const [recentEmojis, setRecentEmojis] = useState<string[]>([]);
const menuRef = useRef<HTMLDivElement>(null);
const scrollRef = useRef<HTMLDivElement>(null);
const categoryRefs = useRef<Map<string, HTMLDivElement>>(new Map());
const tabsRef = useRef<HTMLDivElement>(null);
const tabRefs = useRef<Map<string, HTMLButtonElement>>(new Map());
useEffect(() => {
if (isOpen) {
@@ -20,6 +24,54 @@ export function EmojiMenu({ isOpen, onClose, onEmojiSelect, position }: EmojiMen
}
}, [isOpen]);
const handleScroll = useCallback(() => {
if (!scrollRef.current) return;
// Find which category is currently visible
for (const [categoryName, element] of categoryRefs.current) {
if (element) {
const rect = element.getBoundingClientRect();
const containerRect = scrollRef.current.getBoundingClientRect();
// Check if category header is in view
if (rect.top <= containerRect.top + 50 && rect.bottom > containerRect.top + 50) {
if (activeCategory !== categoryName) {
setActiveCategory(categoryName);
scrollTabIntoView(categoryName);
}
break;
}
}
}
}, [activeCategory]);
function scrollToCategory(categoryName: string) {
const element = categoryRefs.current.get(categoryName);
if (element && scrollRef.current) {
element.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
}
function scrollTabIntoView(categoryName: string) {
const tabElement = tabRefs.current.get(categoryName);
if (tabElement && tabsRef.current) {
const tabsRect = tabsRef.current.getBoundingClientRect();
const tabRect = tabElement.getBoundingClientRect();
// Check if tab is outside the visible area
if (tabRect.left < tabsRect.left || tabRect.right > tabsRect.right) {
tabElement.scrollIntoView({
behavior: 'smooth',
block: 'nearest',
inline: 'center'
});
}
}
}
useEffect(() => {
function handleClickOutside(event: MouseEvent) {
if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
@@ -50,13 +102,6 @@ export function EmojiMenu({ isOpen, onClose, onEmojiSelect, position }: EmojiMen
onClose();
};
function getCurrentEmojis(): string[] {
if (activeCategory === "recent") {
return recentEmojis;
}
const category = EMOJI_CATEGORIES.find(cat => cat.name === activeCategory);
return category?.emojis || [];
};
return (
<div
@@ -71,38 +116,64 @@ export function EmojiMenu({ isOpen, onClose, onEmojiSelect, position }: EmojiMen
}}
>
<div className="emoji-menu-header">
<div className="emoji-category-tabs">
{EMOJI_CATEGORIES.map((category) => (
<button
key={category.name}
className={`emoji-category-tab ${activeCategory === category.name ? "active" : ""}`}
onClick={() => setActiveCategory(category.name)}
title={category.name}
>
{category.icon}
</button>
))}
</div>
</div>
<div className="emoji-grid">
{getCurrentEmojis().map((emoji, index) => (
<div ref={tabsRef} className="emoji-category-tabs">
{EMOJI_CATEGORIES.map((category) => (
<button
key={`${activeCategory}-${index}`}
className="emoji-item"
onClick={() => handleEmojiClick(emoji)}
title={emoji}
key={category.name}
ref={(el) => {
if (el) tabRefs.current.set(category.name, el);
}}
className={`emoji-category-tab ${activeCategory === category.name ? "active" : ""}`}
onClick={() => scrollToCategory(category.name)}
title={category.name}
>
{emoji}
<span>{category.icon}</span>
</button>
))}
</div>
</div>
{getCurrentEmojis().length === 0 && activeCategory === "recent" && (
<div className="emoji-empty-state">
<span>No recent emojis</span>
</div>
)}
<div
ref={scrollRef}
className="emoji-grid"
onScroll={handleScroll}
>
{EMOJI_CATEGORIES.map((category) => {
const emojis = category.name === "recent" ? recentEmojis : category.emojis;
return (
<div
key={category.name}
ref={(el) => {
if (el) categoryRefs.current.set(category.name, el);
}}
className="emoji-category-section"
>
<h3 className="emoji-category-title">
{category.name.charAt(0).toUpperCase() + category.name.slice(1)}
</h3>
{emojis.length > 0 ? (
<div className="emoji-category-grid">
{emojis.map((emoji, index) => (
<button
key={`${category.name}-${index}`}
className="emoji-item"
onClick={() => handleEmojiClick(emoji)}
title={emoji}
>
{emoji}
</button>
))}
</div>
) : (
<div className="emoji-empty-state">
<span>No {category.name} emojis</span>
</div>
)}
</div>
);
})}
</div>
</div>
);
}