From 19ac68d0581c5a5ab1c1d4abed4c64d54073436e Mon Sep 17 00:00:00 2001
From: hobokenchicken <dustin@dustin.coffee>
Date: Thu, 2 Jul 2026 12:13:00 -0400
Subject: [PATCH] feat: Ctrl+E keyboard shortcut for kaomoji picker in message
 input

---
 web/src/components/ChatArea.tsx | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/web/src/components/ChatArea.tsx b/web/src/components/ChatArea.tsx
index 260bd53..16dd5e9 100644
--- a/web/src/components/ChatArea.tsx
+++ b/web/src/components/ChatArea.tsx
@@ -266,6 +266,7 @@ export function ChatArea() {
   const [input, setInput] = useState("");
   const [error, setError] = useState<string | null>(null);
   const [showGifPicker, setShowGifPicker] = useState(false);
+  const [showKaomoji, setShowKaomoji] = useState(false);
   const [showSearch, setShowSearch] = useState(false);
   const [mentionQuery, setMentionQuery] = useState<string | null>(null);
   const [slowmodeRemaining, setSlowmodeRemaining] = useState(0);
@@ -660,6 +661,14 @@ export function ChatArea() {
                   <GiphyPicker onSelect={handleGifSelect} onClose={() => setShowGifPicker(false)} />
                 </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">
                 {(() => {
                   const chTyping = activeChannelId ? (typingUsers[activeChannelId] || []).filter(u => u.userId !== currentUser?.id) : [];
@@ -703,6 +712,12 @@ export function ChatArea() {
                     placeholder="type a message..."
                     className="terminal-input w-full"
                     disabled={!activeChannelId || slowmodeRemaining > 0}
+                    onKeyDown={(e) => {
+                      if (e.ctrlKey && e.key === 'e') {
+                        e.preventDefault();
+                        setShowKaomoji((prev) => !prev);
+                      }
+                    }}
                   />
                   {mentionQuery !== null && (
                     <MentionDropdown query={mentionQuery} members={members} onSelect={handleMentionSelect} />
@@ -717,6 +732,15 @@ export function ChatArea() {
                 >
                   [GIF]
                 </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>
             </div>
             {activeThread && (