feat: Ctrl+E keyboard shortcut for kaomoji picker in message input

This commit is contained in:
2026-07-02 12:13:00 -04:00
parent 3a04eff42b
commit 19ac68d058
+24
View File
@@ -266,6 +266,7 @@ export function ChatArea() {
const [input, setInput] = useState(""); const [input, setInput] = useState("");
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
const [showGifPicker, setShowGifPicker] = useState(false); const [showGifPicker, setShowGifPicker] = useState(false);
const [showKaomoji, setShowKaomoji] = useState(false);
const [showSearch, setShowSearch] = useState(false); const [showSearch, setShowSearch] = useState(false);
const [mentionQuery, setMentionQuery] = useState<string | null>(null); const [mentionQuery, setMentionQuery] = useState<string | null>(null);
const [slowmodeRemaining, setSlowmodeRemaining] = useState(0); const [slowmodeRemaining, setSlowmodeRemaining] = useState(0);
@@ -660,6 +661,14 @@ export function ChatArea() {
<GiphyPicker onSelect={handleGifSelect} onClose={() => setShowGifPicker(false)} /> <GiphyPicker onSelect={handleGifSelect} onClose={() => setShowGifPicker(false)} />
</div> </div>
)} )}
{showKaomoji && (
<div className="px-3 pb-1">
<EmojiPicker
onSelect={(emoji) => setInput((prev) => prev + emoji)}
onClose={() => setShowKaomoji(false)}
/>
</div>
)}
<div className="px-3 pt-1 text-xs text-gb-fg-f font-mono italic h-5 select-none"> <div className="px-3 pt-1 text-xs text-gb-fg-f font-mono italic h-5 select-none">
{(() => { {(() => {
const chTyping = activeChannelId ? (typingUsers[activeChannelId] || []).filter(u => u.userId !== currentUser?.id) : []; const chTyping = activeChannelId ? (typingUsers[activeChannelId] || []).filter(u => u.userId !== currentUser?.id) : [];
@@ -703,6 +712,12 @@ export function ChatArea() {
placeholder="type a message..." placeholder="type a message..."
className="terminal-input w-full" className="terminal-input w-full"
disabled={!activeChannelId || slowmodeRemaining > 0} disabled={!activeChannelId || slowmodeRemaining > 0}
onKeyDown={(e) => {
if (e.ctrlKey && e.key === 'e') {
e.preventDefault();
setShowKaomoji((prev) => !prev);
}
}}
/> />
{mentionQuery !== null && ( {mentionQuery !== null && (
<MentionDropdown query={mentionQuery} members={members} onSelect={handleMentionSelect} /> <MentionDropdown query={mentionQuery} members={members} onSelect={handleMentionSelect} />
@@ -717,6 +732,15 @@ export function ChatArea() {
> >
[GIF] [GIF]
</button> </button>
<button
type="button"
onClick={() => setShowKaomoji((prev) => !prev)}
disabled={!activeChannelId}
className="text-gb-fg-f hover:text-gb-orange font-mono text-sm select-none disabled:opacity-50 disabled:cursor-not-allowed shrink-0"
title="Toggle kaomoji picker (Ctrl+E)"
>
[]
</button>
</form> </form>
</div> </div>
{activeThread && ( {activeThread && (