juxtapo/cc-sidepanel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cc-sidepanel: emoji picker, 475 glyphs from celest-chat's table

Browse Source 
The panel had no picker before this. 8 category tabs plus a recents tab, table
lifted verbatim from celest-chat's 07-emoji.js so the house row (💜🌙🐝🔫)
carries over. Offline by construction: no library, no fetch, the panel's CSP
would block a set anyway.

Inserts at the caret rather than appending, and the pad stays open so glyphs can
be stacked. Recents (last 24) live in localStorage under
`ccsidepanel-emoji-recent`; the pad opens on that tab once it has entries.

`#emoji-pad[hidden] { display: none }` is spelled out because an ID selector
outranks the UA's `[hidden]` rule — without it the pad never closes.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
juxtapo
2026-09-13 02:02:25 +08:00
co-authored by Claude Opus 5
parent 8d64c86b10
commit f8ef6e6981
2 changed files with 122 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
extension/sidepanel.html
+40
View File
@@ -25,6 +25,40 @@
#input-row { display: flex; gap: 6px; }
#text { flex: 1; resize: none; height: 44px; }
#send { cursor: pointer; background: #6b4fd6; border-color: #6b4fd6; padding: 0 14px; }
#emoji-btn { cursor: pointer; padding: 0 9px; font-size: 15px; line-height: 1; }
#emoji-pad {
background: #1b1826; border: 1px solid #3a3548; border-radius: 6px;
padding: 6px; margin-bottom: 6px;
}
/* An ID selector outranks the UA's [hidden]{display:none}, so `hidden` alone
never closes this pad — it has to be spelled out here. */
#emoji-pad[hidden] { display: none; }
#emoji-cats {
display: flex; gap: 2px; margin-bottom: 5px;
border-bottom: 1px solid #2c2836; padding-bottom: 5px;
}
#emoji-cats button {
flex: 1; border: 0; background: transparent; cursor: pointer;
font-size: 14px; line-height: 1; padding: 4px 0; border-radius: 4px;
}
#emoji-cats button:hover { background: #2f2a40; }
#emoji-cats button.on { background: #3a3155; box-shadow: inset 0 -2px 0 #a78bfa; }
#emoji-lbl {
font-size: 10px; opacity: .45; margin-bottom: 4px;
text-transform: lowercase; letter-spacing: .04em;
}
#emoji-grid {
display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
max-height: 168px; overflow-y: auto;
}
#emoji-grid button {
border: 0; background: transparent; padding: 4px 0;
font-size: 17px; line-height: 1.1; cursor: pointer; border-radius: 4px;
}
#emoji-grid button:hover { background: #2f2a40; }
#status { font-size: 11px; opacity: .6; margin-bottom: 6px; }
#ctx {
font-size: 11px; color: #9d8fd0; margin-bottom: 6px;
@@ -93,7 +127,13 @@
<div id="ctx"></div>
<div id="status">—</div>
<div id="screen">connecting…</div>
<div id="emoji-pad" hidden>
<div id="emoji-cats"></div>
<div id="emoji-lbl"></div>
<div id="emoji-grid"></div>
</div>
<div id="input-row">
<button id="emoji-btn" title="emoji (Esc to close)">🙂</button>
<textarea id="text" placeholder="type, enter to send"></textarea>
<button id="send">send</button>
</div>