From 56d62a434d3b079026eab7c847b418b6d80dbd11 Mon Sep 17 00:00:00 2001
From: Yuurin Bee <yuurinbee@gmail.com>
Date: Thu, 21 May 2026 14:10:45 +0700
Subject: [PATCH 01/11] Adjust Emoji Dropzone Icon Size + Text Padding

---
 src/styles.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/styles.css b/src/styles.css
index 49762139..1b73a8bc 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -3705,8 +3705,8 @@ img.emoji-img-loading {
   right: auto;
   bottom: auto;
   margin: 0;
-  width: 14px;
-  height: 14px;
+  width: 20px;
+  height: 20px;
 }
 .emoji-picker .emoji-creator-dropzone-label {
   white-space: nowrap;
@@ -3999,7 +3999,7 @@ img.emoji-img-loading {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 10px;
+  gap: 4px;
   cursor: pointer;
   transition: border-color 0.15s ease, background-color 0.15s ease;
   font-size: 13px;

From 0b47b58ad76a5b1082f5bd7c7bcd61f219167208 Mon Sep 17 00:00:00 2001
From: Yuurin Bee <yuurinbee@gmail.com>
Date: Thu, 21 May 2026 15:01:18 +0700
Subject: [PATCH 02/11] Change UI for Remove Pack in Emoji Panel

---
 src/index.html |  7 ++++---
 src/styles.css | 40 +++++++++++++++++++++++++++++++---------
 2 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/src/index.html b/src/index.html
index bc522f22..8d5fbc80 100644
--- a/src/index.html
+++ b/src/index.html
@@ -224,6 +224,9 @@ <h2 id="encryption-migration-title">Disabling Encryption</h2>
           <button type="button" class="emoji-creator-done" id="emoji-creator-done" aria-label="Save and exit">
             <span class="icon icon-edit"></span>
           </button>
+          <button type="button" class="emoji-creator-delete btn" id="emoji-creator-delete" aria-label="Delete pack" title="Remove Pack" hidden>
+            <span class="icon icon-trash"></span>
+          </button>
         </div>
         <div class="emoji-creator-grid" id="emoji-creator-grid"></div>
         <button type="button" class="emoji-creator-dropzone" id="emoji-creator-dropzone">
@@ -231,12 +234,10 @@ <h2 id="encryption-migration-title">Disabling Encryption</h2>
           <span class="emoji-creator-dropzone-label">Upload Emoji</span>
         </button>
         <input type="file" id="emoji-creator-files" accept="image/*" multiple hidden>
-        <div class="emoji-creator-footer">
-          <button type="button" class="emoji-creator-delete btn" id="emoji-creator-delete" hidden>Delete Pack</button>
-        </div>
       </div>
     </div>
   </div>
+
   <!-- GIF Panel (hidden by default) -->
   <div class="gif-picker-content" style="display: none;">
     <div class="gif-grid" id="gif-grid"></div>
diff --git a/src/styles.css b/src/styles.css
index 1b73a8bc..c3d8405a 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -3729,8 +3729,8 @@ img.emoji-img-loading {
 .emoji-creator-head {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 4px 0 10px;
+  gap: 6px;
+  padding: 4px 6px 10px 0;
   position: sticky;
   top: 0;
   background-color: #0a0a0a;
@@ -3800,6 +3800,7 @@ img.emoji-img-loading {
   display: flex;
   align-items: center;
   justify-content: center;
+  margin-left: 4px;
 }
 .emoji-creator-done:hover { background-color: rgba(255, 255, 255, 0.06); }
 .emoji-creator-done .icon {
@@ -4029,17 +4030,38 @@ img.emoji-img-loading {
   justify-content: flex-end;
   padding-top: 12px;
 }
+
 .emoji-creator-delete {
-  background-color: rgba(255, 74, 138, 0.15);
-  color: #ff4a8a;
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  background: none;
   border: none;
-  padding: 6px 12px;
-  border-radius: 8px;
-  font-size: 12px;
-  font-weight: 600;
+  padding: 0;
   cursor: pointer;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.emoji-creator-delete:hover {
+  background-color: rgba(255, 255, 255, 0.06);
+}
+
+.emoji-creator-delete.btn:hover {
+  opacity: 1;
+}
+
+.emoji-creator-delete .icon {
+  width: 16px;
+  height: 16px;
+  background-color: #FF2EA9;
+}
+
+.emoji-creator-delete:hover .icon {
+  background-color: #FF2EA9;
 }
-.emoji-creator-delete:hover { background-color: rgba(255, 74, 138, 0.3); }
 
 /* Confirm overlay — generalised question modal. Same in-panel chrome
    as error/naming/progress (lives inside .emoji-picker so clicks can't

From 4946e81f9c9146c963571c30eacdec8d8dec82af Mon Sep 17 00:00:00 2001
From: Yuurin Bee <yuurinbee@gmail.com>
Date: Thu, 21 May 2026 15:25:10 +0700
Subject: [PATCH 03/11] Update UI for Emoji Panel Confirmation Popup

---
 src/js/picker.js |  4 ++--
 src/styles.css   | 42 ++++++++++++++++++++++++------------------
 2 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/src/js/picker.js b/src/js/picker.js
index 7d2b747b..49d153c7 100644
--- a/src/js/picker.js
+++ b/src/js/picker.js
@@ -3102,8 +3102,8 @@ async function _pcDelete() {
     // any click on it would trip the outside-close handler, snapping
     // the picker shut mid-flow.
     const ok = await _pcShowConfirm({
-        title: 'Delete pack?',
-        detail: 'This removes the emoji files from your media servers and the pack from Nostr. This action cannot be undone.',
+        title: 'Delete This Pack?',
+        detail: 'This action permanently removes the emoji files from your media servers and the pack from Nostr. This action cannot be undone.',
         icon: 'vector_warning.svg',
         tone: 'danger',
         confirmText: 'DELETE',
diff --git a/src/styles.css b/src/styles.css
index c3d8405a..cabbcdf9 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -4071,7 +4071,7 @@ img.emoji-img-loading {
   position: absolute;
   inset: 0;
   border-radius: inherit;
-  background: rgba(8, 8, 8, 0.82);
+  background: rgba(8, 8, 8, 0.85);
   backdrop-filter: blur(6px);
   -webkit-backdrop-filter: blur(6px);
   border: 2px solid rgba(255, 255, 255, 0.12);
@@ -4097,8 +4097,8 @@ img.emoji-img-loading {
 .emoji-picker .emoji-pack-creator-confirm-icon {
   display: block;
   margin: 0 auto 10px;
-  width: 56px;
-  height: 56px;
+  width: 100px;
+  height: 100px;
   padding: 0;
   border-radius: 0;
   background: none;
@@ -4115,7 +4115,7 @@ img.emoji-img-loading {
   color: #ff4a8a;
 }
 .emoji-pack-creator-confirm-detail {
-  color: rgba(255, 255, 255, 0.65);
+  color: #fff;
   font-size: 12px;
   line-height: 1.5;
   margin: 0 0 18px;
@@ -4128,26 +4128,33 @@ img.emoji-img-loading {
 }
 .emoji-pack-creator-confirm-cancel,
 .emoji-pack-creator-confirm-ok {
-  background-color: rgba(20, 20, 20, 0.85);
+  background-color: #171717;
   color: #fff;
-  border: 1px solid rgba(255, 255, 255, 0.14);
-  padding: 10px 24px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  padding: 12px 28px;
   border-radius: 10px;
   font-weight: 700;
   letter-spacing: 0.08em;
-  font-size: 12px;
+  font-size: 14px;
   cursor: pointer;
   transition: border-color 0.15s ease, background-color 0.15s ease;
 }
+
 .emoji-pack-creator-confirm-ok {
-  background-color: rgba(89, 252, 179, 0.18);
-  border-color: var(--icon-color-primary);
-  color: var(--icon-color-primary);
+  background-color: #58fcb3;
+  border-color: #58fcb3;
+  color: #000;
 }
+
 .emoji-pack-creator-confirm[data-tone="danger"] .emoji-pack-creator-confirm-ok {
-  background-color: rgba(255, 74, 138, 0.18);
-  border-color: #ff4a8a;
-  color: #ff4a8a;
+  background-color: #ff2ea9;
+  border-color: #ff2ea9;
+  color: #000;
+}
+
+.emoji-pack-creator-confirm-cancel {
+  border-color: #ff2ea9;
+  background-color: #03030390;
 }
 /* Pack creator cropper overlay — square-crop UX for non-square static
    uploads. Mirrors the confirm overlay's chrome (backdrop, body, action
@@ -4291,10 +4298,9 @@ img.emoji-img-loading {
   cursor: not-allowed;
 }
 
-.emoji-pack-creator-confirm-cancel:hover { border-color: rgba(255, 255, 255, 0.28); background-color: #2a2a2a; }
-.emoji-pack-creator-confirm-ok:hover     { background-color: rgba(89, 252, 179, 0.30); }
-.emoji-pack-creator-confirm[data-tone="danger"] .emoji-pack-creator-confirm-ok:hover {
-  background-color: rgba(255, 74, 138, 0.30);
+.emoji-pack-creator-confirm-cancel:active,
+.emoji-pack-creator-confirm-ok:active {
+  opacity: 0.8;
 }
 
 /* Progress overlay — in-panel chrome for long async ops (pack delete:

From c65c88647c08d0666ec4877ec13c1660749a2169 Mon Sep 17 00:00:00 2001
From: Yuurin Bee <yuurinbee@gmail.com>
Date: Thu, 21 May 2026 15:29:54 +0700
Subject: [PATCH 04/11] Add Title Actions for Hover on Emoji Panel Icons

---
 src/index.html   | 2 +-
 src/js/picker.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/index.html b/src/index.html
index 8d5fbc80..7b4d9748 100644
--- a/src/index.html
+++ b/src/index.html
@@ -221,7 +221,7 @@ <h2 id="encryption-migration-title">Disabling Encryption</h2>
                  placeholder="Pack name" maxlength="26" autocomplete="off"
                  autocorrect="off" autocapitalize="off" spellcheck="false">
           <span class="emoji-creator-count" id="emoji-creator-count">(0/30)</span>
-          <button type="button" class="emoji-creator-done" id="emoji-creator-done" aria-label="Save and exit">
+          <button type="button" class="emoji-creator-done" id="emoji-creator-done" aria-label="Save and exit" title="Save Pack">
             <span class="icon icon-edit"></span>
           </button>
           <button type="button" class="emoji-creator-delete btn" id="emoji-creator-delete" aria-label="Delete pack" title="Remove Pack" hidden>
diff --git a/src/js/picker.js b/src/js/picker.js
index 49d153c7..c8b5a9ba 100644
--- a/src/js/picker.js
+++ b/src/js/picker.js
@@ -3389,7 +3389,7 @@ function renderEmojiPackSections() {
         const header = document.createElement('div');
         header.className = 'emoji-section-header';
         const editPencil = pack.is_own
-            ? `<button type="button" class="emoji-pack-edit-pencil" data-pack-id="${_escapeAttr(pack.id)}" aria-label="Edit pack"><span class="icon icon-edit"></span></button>`
+            ? `<button type="button" class="emoji-pack-edit-pencil" data-pack-id="${_escapeAttr(pack.id)}" aria-label="Edit pack" title="Edit Pack"><span class="icon icon-edit"></span></button>`
             : '';
         // Order: [logo][title][count][collapse-arrow] ... [edit-if-own].
         // The pencil uses `margin-left: auto` (in CSS) to float right;

From 1aae468fdd186f3860b59eb0586c5b2d3e2cddbb Mon Sep 17 00:00:00 2001
From: Yuurin Bee <yuurinbee@gmail.com>
Date: Thu, 21 May 2026 15:36:34 +0700
Subject: [PATCH 05/11] Remove Single Cell Upload Emoji - Redundancy

---
 src/js/picker.js | 16 ----------------
 src/styles.css   | 27 +--------------------------
 2 files changed, 1 insertion(+), 42 deletions(-)

diff --git a/src/js/picker.js b/src/js/picker.js
index c8b5a9ba..927c2048 100644
--- a/src/js/picker.js
+++ b/src/js/picker.js
@@ -2031,22 +2031,6 @@ function _pcRenderGrid() {
         grid.appendChild(cell);
     });
 
-    // Trailing "+" upload affordance — placed after the emojis so the
-    // editor's reading order matches the picker's actual render order.
-    // Hidden when the pack is empty (the big bottom dropzone is the
-    // only entry point in that case) and when the cap is hit.
-    if (_pc.emojis.length > 0 && _pc.emojis.length < PC_MAX_EMOJIS) {
-        const addCell = document.createElement('button');
-        addCell.type = 'button';
-        addCell.className = 'emoji-creator-cell-add';
-        addCell.setAttribute('aria-label', 'Upload emoji');
-        addCell.innerHTML = '<span class="icon icon-plus-circle"></span>';
-        addCell.addEventListener('click', () => {
-            document.getElementById('emoji-creator-files').click();
-        });
-        grid.appendChild(addCell);
-    }
-
     // Bottom dropzone label adapts: first-emoji onboarding tone, normal,
     // or cap-reached.
     const dz = document.getElementById('emoji-creator-dropzone');
diff --git a/src/styles.css b/src/styles.css
index cabbcdf9..d10b1d65 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -3850,8 +3850,7 @@ img.emoji-img-loading {
   padding-top: 8px;
   margin-bottom: 12px;
 }
-.emoji-creator-cell,
-.emoji-creator-cell-add {
+.emoji-creator-cell {
   position: relative;
   aspect-ratio: 1 / 1;
   border-radius: 8px;
@@ -3863,10 +3862,6 @@ img.emoji-img-loading {
   padding: 0;
   cursor: pointer;
   transition: border-color 0.15s ease, background-color 0.15s ease;
-  /* Block the WebView's default touch-handling (vertical scroll,
-     pull-to-refresh, tap-to-zoom) so our pointer-driven drag-to-
-     reorder gets the gesture instead. The `+` add-cell shares this
-     selector but never receives a drag start, so it's harmless. */
   touch-action: none;
 }
 .emoji-creator-cell.is-hovered { border-color: rgba(255, 255, 255, 0.18); }
@@ -3942,26 +3937,6 @@ img.emoji-img-loading {
   object-fit: fill;
   pointer-events: none;
 }
-.emoji-creator-cell-add {
-  border-style: dashed;
-  border-color: rgba(255, 255, 255, 0.22);
-  color: rgba(255, 255, 255, 0.7);
-}
-.emoji-creator-cell-add:hover {
-  border-color: var(--icon-color-primary);
-  color: var(--icon-color-primary);
-}
-.emoji-creator-cell-add.is-disabled {
-  opacity: 0.35;
-  pointer-events: none;
-}
-.emoji-creator-cell-add .icon {
-  width: 22px;
-  height: 22px;
-  padding: 0;
-  border-radius: 0;
-  background-color: currentColor;
-}
 
 .emoji-creator-cell-remove {
   position: absolute;

From f2a4efbc882bc0f5b1808fb84672e7c5f8c15c4d Mon Sep 17 00:00:00 2001
From: Yuurin Bee <yuurinbee@gmail.com>
Date: Thu, 21 May 2026 15:41:05 +0700
Subject: [PATCH 06/11] Remove Border: Emoji Pack Avatar with Image

---
 src/styles.css | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/styles.css b/src/styles.css
index d10b1d65..9178659f 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -3753,8 +3753,7 @@ img.emoji-img-loading {
 }
 .emoji-creator-logo:hover { border-color: var(--icon-color-primary); }
 .emoji-creator-logo.has-image {
-  border-style: solid;
-  border-color: rgba(255, 255, 255, 0.08);
+  border: none;
 }
 .emoji-creator-logo img {
   width: 100%;

From a3d99f7f0e071241c3c43dc41b07b83bab4b64bf Mon Sep 17 00:00:00 2001
From: Yuurin Bee <yuurinbee@gmail.com>
Date: Thu, 21 May 2026 16:17:09 +0700
Subject: [PATCH 07/11] Fix Emoji Error Popup: Button + Double Border

---
 src/styles.css | 44 ++++++++++++++++++++++++++++----------------
 1 file changed, 28 insertions(+), 16 deletions(-)

diff --git a/src/styles.css b/src/styles.css
index 9178659f..6a2d39f8 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -3198,6 +3198,10 @@ body.chat-bg-disabled .chat-messages::before {
   opacity: 1;
 }
 
+.emoji-picker:has(.emoji-pack-creator-error:not([hidden])) {
+  border: none;
+}
+
 /* Wide screens: anchor the picker to the right edge of the viewport, Discord-style.
  * Narrow screens stay centered (the centered position above) so the panel still
  * fits comfortably without crowding the input. */
@@ -3676,9 +3680,12 @@ img.emoji-img-loading {
    ============================================================================ */
 
 .emoji-creator {
-  padding: 4px 0 12px;
+  padding: 4px 0 0;
   color: #fff;
   position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
 }
 .emoji-creator[hidden] { display: none; }
 
@@ -3966,22 +3973,26 @@ img.emoji-img-loading {
 /* Bottom dropzone — second affordance for uploading (mirrors mockup). */
 .emoji-creator-dropzone {
   width: 100%;
-  padding: 28px 12px;
+  flex: 1;
+  min-height: 78px;
+  padding: 0;
+  margin-bottom: 12px;
   background-color: rgba(255, 255, 255, 0.02);
   border: 1.5px dashed rgba(255, 255, 255, 0.18);
   border-radius: 10px;
   color: rgba(255, 255, 255, 0.7);
   display: flex;
+  flex-direction: row;
   align-items: center;
   justify-content: center;
   gap: 4px;
   cursor: pointer;
-  transition: border-color 0.15s ease, background-color 0.15s ease;
+  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
   font-size: 13px;
   font-weight: 500;
 }
-.emoji-creator-dropzone:hover,
-.emoji-creator-dropzone.is-dragover {
+.emoji-picker .emoji-creator-dropzone:hover,
+.emoji-picker .emoji-creator-dropzone.is-dragover {
   border-color: var(--icon-color-primary);
   color: var(--icon-color-primary);
   background-color: rgba(89, 252, 179, 0.06);
@@ -4468,11 +4479,9 @@ img.emoji-img-loading {
   position: absolute;
   inset: 0;
   border-radius: inherit;
-  /* Theme warning pink (#ff4a8a) glows from the bottom edge upward,
-     layered on top of the dark scrim. */
   background:
     linear-gradient(to top, rgba(255, 74, 138, 0.32) 0%, rgba(255, 74, 138, 0) 38%),
-    rgba(8, 8, 8, 0.78);
+    rgba(8, 8, 8, 0.85);
   backdrop-filter: blur(6px);
   -webkit-backdrop-filter: blur(6px);
   border: 2px solid #ff4a8a;
@@ -4485,6 +4494,9 @@ img.emoji-img-loading {
   box-sizing: border-box;
 }
 .emoji-pack-creator-error[hidden] { display: none; }
+.emoji-picker:has(.emoji-pack-creator-error:not([hidden])) {
+  border-color: transparent;
+}
 .emoji-pack-creator-error-body {
   text-align: center;
   max-width: 320px;
@@ -4521,20 +4533,20 @@ img.emoji-img-loading {
   margin: 0 0 16px;
 }
 .emoji-pack-creator-error-retry {
-  background-color: rgba(20, 20, 20, 0.85);
-  color: #fff;
-  border: 1px solid rgba(255, 255, 255, 0.14);
+  background-color: #ff2ea9;
+  color: #000;
+  border: none;
   padding: 12px 28px;
   border-radius: 10px;
   font-weight: 700;
   letter-spacing: 0.08em;
-  font-size: 12px;
+  font-size: 14px;
   cursor: pointer;
-  transition: border-color 0.15s ease, background-color 0.15s ease;
+  transition: opacity 0.15s ease;
 }
-.emoji-pack-creator-error-retry:hover {
-  background-color: #2a2a2a;
-  border-color: rgba(255, 255, 255, 0.28);
+
+.emoji-pack-creator-error-retry:active {
+  opacity: 0.8;
 }
 
 /* ============================================================================

From dcd27df3ab7729858380f1f9673b33c3a1701f85 Mon Sep 17 00:00:00 2001
From: Yuurin Bee <yuurinbee@gmail.com>
Date: Thu, 21 May 2026 16:37:09 +0700
Subject: [PATCH 08/11] Update UI: Emoji Popup Naming & Renaming + Buttons

---
 src/js/picker.js |  2 +-
 src/styles.css   | 39 +++++++++++++++++++++++----------------
 2 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/src/js/picker.js b/src/js/picker.js
index 927c2048..550db86f 100644
--- a/src/js/picker.js
+++ b/src/js/picker.js
@@ -2460,7 +2460,7 @@ function _pcShowNaming({ src, initial, batch }, mode = 'create') {
         errEl.hidden = true;
         errEl.textContent = '';
         skipBtn.textContent = mode === 'edit' ? 'CANCEL' : 'SKIP';
-        titleEl.textContent = mode === 'edit' ? 'Rename emoji' : 'Name this emoji';
+        titleEl.textContent = mode === 'edit' ? 'Rename Emoji' : 'Name This Emoji';
         if (batch && batch.total > 1) {
             batchEl.textContent = `${batch.current} of ${batch.total}`;
             batchEl.hidden = false;
diff --git a/src/styles.css b/src/styles.css
index 6a2d39f8..d322cf72 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1648,8 +1648,8 @@ html, body {
 .context-menu-item .icon {
   position: relative;
   flex-shrink: 0;
-  width: 16px;
-  height: 16px;
+  width: 18px;
+  height: 18px;
   margin: 0;
   padding: 0;
   border-radius: 0;
@@ -4347,7 +4347,7 @@ img.emoji-img-loading {
   border-radius: inherit;
   background:
     linear-gradient(to top, rgba(89, 252, 179, 0.18) 0%, rgba(89, 252, 179, 0) 38%),
-    rgba(8, 8, 8, 0.82);
+    rgba(8, 8, 8, 0.9);
   backdrop-filter: blur(6px);
   -webkit-backdrop-filter: blur(6px);
   border: 2px solid var(--icon-color-primary);
@@ -4365,6 +4365,9 @@ img.emoji-img-loading {
   max-width: 320px;
   width: 100%;
 }
+.emoji-picker:has(.emoji-pack-creator-naming:not([hidden])) {
+  border: none;
+}
 .emoji-pack-creator-naming-batch {
   font-size: 11px;
   font-weight: 700;
@@ -4415,7 +4418,7 @@ img.emoji-img-loading {
   cursor: default;
 }
 .emoji-pack-creator-naming-input {
-  background-color: rgba(255, 255, 255, 0.06);
+  background-color: #03030390;
   border: 1px solid rgba(255, 255, 255, 0.14);
   border-radius: 8px;
   color: #fff;
@@ -4429,7 +4432,7 @@ img.emoji-img-loading {
 }
 .emoji-pack-creator-naming-input:focus {
   border-color: var(--icon-color-primary);
-  background-color: rgba(89, 252, 179, 0.06);
+  background-color: #030303;
 }
 .emoji-pack-creator-naming-input.is-invalid {
   border-color: #ff4a8a;
@@ -4451,26 +4454,30 @@ img.emoji-img-loading {
 }
 .emoji-pack-creator-naming-skip,
 .emoji-pack-creator-naming-save {
-  background-color: rgba(20, 20, 20, 0.85);
+  background-color: #171717;
   color: #fff;
-  border: 1px solid rgba(255, 255, 255, 0.14);
-  padding: 10px 24px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  padding: 12px 28px;
   border-radius: 10px;
   font-weight: 700;
   letter-spacing: 0.08em;
-  font-size: 12px;
+  font-size: 14px;
   cursor: pointer;
-  transition: border-color 0.15s ease, background-color 0.15s ease;
+  transition: opacity 0.15s ease;
 }
 .emoji-pack-creator-naming-save {
-  background-color: rgba(89, 252, 179, 0.16);
-  border-color: var(--icon-color-primary);
-  color: var(--icon-color-primary);
+  background-color: var(--primary-color);
+  border-color: var(--primary-color);
+  color: #000;
+}
+.emoji-pack-creator-naming-skip {
+  border-color: rgba(255, 255, 255, 0.2);
+  background-color: #03030390;
 }
-.emoji-pack-creator-naming-skip:hover  { border-color: rgba(255, 255, 255, 0.28); background-color: #2a2a2a; }
-.emoji-pack-creator-naming-save:hover  { background-color: rgba(89, 252, 179, 0.28); }
+.emoji-pack-creator-naming-skip:active,
+.emoji-pack-creator-naming-save:active { opacity: 0.8; }
 .emoji-pack-creator-naming-save:disabled,
-.emoji-pack-creator-naming-skip:disabled { opacity: 0.5; cursor: not-allowed; }
+.emoji-pack-creator-naming-skip:disabled { opacity: 0.5; cursor: not-allowed; }not-allowed; }
 
 /* Size-error overlay — `position: absolute` keeps it inside the picker
    so it covers the panel (sidebar + main) instead of the whole window,

From 2ba527a22755f052bdbda62679895f4f5bd8b437 Mon Sep 17 00:00:00 2001
From: Yuurin Bee <yuurinbee@gmail.com>
Date: Thu, 21 May 2026 16:40:25 +0700
Subject: [PATCH 09/11] Fix Minor Syntax Error

---
 src/styles.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles.css b/src/styles.css
index d322cf72..2987b5f5 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -4477,7 +4477,7 @@ img.emoji-img-loading {
 .emoji-pack-creator-naming-skip:active,
 .emoji-pack-creator-naming-save:active { opacity: 0.8; }
 .emoji-pack-creator-naming-save:disabled,
-.emoji-pack-creator-naming-skip:disabled { opacity: 0.5; cursor: not-allowed; }not-allowed; }
+.emoji-pack-creator-naming-skip:disabled { opacity: 0.5; cursor: not-allowed; }
 
 /* Size-error overlay — `position: absolute` keeps it inside the picker
    so it covers the panel (sidebar + main) instead of the whole window,

From 57a3d8f9b45308fb2cd70ca7385dcb3e87d49444 Mon Sep 17 00:00:00 2001
From: Yuurin Bee <yuurinbee@gmail.com>
Date: Thu, 21 May 2026 16:57:38 +0700
Subject: [PATCH 10/11] Fix Collapse Action for User Uploaded Emoji Packs

---
 src/js/picker.js | 17 +++++++----------
 src/styles.css   |  8 ++++++++
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/js/picker.js b/src/js/picker.js
index 550db86f..0ae515e9 100644
--- a/src/js/picker.js
+++ b/src/js/picker.js
@@ -88,6 +88,7 @@ function openEmojiPanel(e) {
 
         // Load emoji sections with optimized rendering
         renderEmojiPanel();
+        initCollapsibleSections();
 
         // Display the picker - use class instead of inline style
         picker.classList.add('visible');
@@ -3601,17 +3602,13 @@ function loadEmojiSections() {
 let collapsiblesInitialized = false;
 
 function initCollapsibleSections() {
-    if (collapsiblesInitialized) return; // Prevent duplicate initialization
-
-    document.querySelectorAll('.emoji-section-header').forEach(header => {
-        header.addEventListener('click', (e) => {
-            e.stopPropagation(); // Prevent closing the picker
-            const section = header.parentElement;
-            section.classList.toggle('collapsed');
-        });
+    document.querySelector('.emoji-main').addEventListener('click', (e) => {
+        const header = e.target.closest('.emoji-section-header');
+        if (!header) return;
+        e.stopPropagation();
+        const section = header.parentElement;
+        section.classList.toggle('collapsed');
     });
-
-    collapsiblesInitialized = true;
 }
 
 // Function to reset emoji picker state
diff --git a/src/styles.css b/src/styles.css
index 2987b5f5..47f78f62 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -3391,6 +3391,11 @@ body.chat-bg-disabled .chat-messages::before {
   display: none;
 }
 
+.emoji-section.collapsed .emoji-pack-canvas,
+.emoji-section.collapsed canvas {
+  display: none !important;
+}
+
 .emoji-grid {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
@@ -3485,6 +3490,9 @@ body.chat-bg-disabled .chat-messages::before {
 .emoji-pack-section .emoji-section-header .emoji-pack-edit-pencil {
   margin-left: auto;
 }
+.emoji-pack-section .emoji-section-header .icon-chevron-down {
+  margin-left: -2px;
+}
 
 /* Count chip — `.emoji-picker .…` prefix outranks the legacy
    `.emoji-picker span { width:30px ... }` so the count is an inline

From 1b63469d3b5ee34943878edc26856eae941ee5ee Mon Sep 17 00:00:00 2001
From: Yuurin Bee <yuurinbee@gmail.com>
Date: Thu, 21 May 2026 17:00:22 +0700
Subject: [PATCH 11/11] Increase Edit Emoji Pack Icon Size

---
 src/styles.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/styles.css b/src/styles.css
index 47f78f62..4e374302 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -3676,8 +3676,8 @@ img.emoji-img-loading {
   right: auto;
   bottom: auto;
   margin: 0;
-  width: 14px;
-  height: 14px;
+  width: 16px;
+  height: 16px;
   padding: 0;
   border-radius: 0;
   background-color: rgba(255, 255, 255, 0.9);