Skip to content

Commit 3cc99c6

Browse files
cmuenchcmuench
committed
fix: remove not working emoji search
1 parent d319b76 commit 3cc99c6

File tree

9 files changed

+196
-37
lines changed

9 files changed

+196
-37
lines changed

‎_locales/de/messages.json‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,26 @@
8181
"message": "Label:",
8282
"description": "Label für das Eingabefeld des Webhook-Labels."
8383
},
84+
"optionsEmojiLabel": {
85+
"message": "Emoji (optional):",
86+
"description": "Beschriftung für das Emoji-Eingabefeld."
87+
},
88+
"optionsEmojiPlaceholder": {
89+
"message": "Emoji wählen, z. B. 🔔",
90+
"description": "Platzhalter für das Emoji-Eingabefeld."
91+
},
92+
"optionsEmojiChooseButton": {
93+
"message": "Emoji auswählen",
94+
"description": "Schaltflächentext zum Öffnen des Emoji-Pickers."
95+
},
96+
"optionsEmojiClearButton": {
97+
"message": "Leeren",
98+
"description": "Schaltflächentext zum Leeren des Emoji-Feldes."
99+
},
100+
"optionsEmojiSearchPlaceholder": {
101+
"message": "Emoji suchen...",
102+
"description": "Platzhalter für das Emoji-Suchfeld."
103+
},
84104
"optionsLabelInputPlaceholder": {
85105
"message": "z.B. 'An Slack senden'",
86106
"description": "Platzhalter für die Eingabe des Webhook-Labels."

‎_locales/en/messages.json‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,26 @@
8181
"message": "Label:",
8282
"description": "Label for the webhook label input field."
8383
},
84+
"optionsEmojiLabel": {
85+
"message": "Emoji (optional):",
86+
"description": "Label for the webhook emoji input field."
87+
},
88+
"optionsEmojiPlaceholder": {
89+
"message": "Pick an emoji, e.g. 🔔",
90+
"description": "Placeholder for the webhook emoji input."
91+
},
92+
"optionsEmojiChooseButton": {
93+
"message": "Choose Emoji",
94+
"description": "Button text to open the emoji picker."
95+
},
96+
"optionsEmojiClearButton": {
97+
"message": "Clear",
98+
"description": "Button text to clear the emoji."
99+
},
100+
"optionsEmojiSearchPlaceholder": {
101+
"message": "Search emoji...",
102+
"description": "Placeholder for the emoji search input."
103+
},
84104
"optionsLabelInputPlaceholder": {
85105
"message": "e.g. 'Send to Slack'",
86106
"description": "Placeholder for the webhook label input."

‎options/options.css‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -277,6 +277,46 @@ button:hover {
277277
display: none !important;
278278
}
279279

280+
/* Emoji picker */
281+
.emoji-input-row {
282+
display: flex;
283+
align-items: center;
284+
gap: 8px;
285+
}
286+
287+
.emoji-picker {
288+
margin-top: 8px;
289+
border: 1px solid #d1d5db;
290+
border-radius: 8px;
291+
padding: 12px;
292+
background: #fff;
293+
}
294+
295+
.emoji-picker input[type="text"] {
296+
margin-bottom: 8px;
297+
}
298+
299+
.emoji-grid {
300+
display: grid;
301+
grid-template-columns: repeat(8, 1fr);
302+
gap: 6px;
303+
}
304+
305+
.emoji-item {
306+
font-size: 20px;
307+
line-height: 1;
308+
padding: 6px;
309+
border: 1px solid transparent;
310+
border-radius: 6px;
311+
background: #f9fafb;
312+
cursor: pointer;
313+
}
314+
315+
.emoji-item:hover {
316+
background: #eef2ff;
317+
border-color: #c7d2fe;
318+
}
319+
280320
#no-webhooks-message {
281321
color: #6b7280;
282322
padding: 20px;

‎options/options.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,23 @@ <h2>__MSG_optionsAddWebhookHeader__</h2>
3131
required
3232
/>
3333
</div>
34+
<div class="form-group">
35+
<label for="webhook-emoji">__MSG_optionsEmojiLabel__</label>
36+
<div class="emoji-input-row">
37+
<input
38+
type="text"
39+
id="webhook-emoji"
40+
placeholder="__MSG_optionsEmojiPlaceholder__"
41+
maxlength="4"
42+
style="max-width: 140px; display: inline-block; margin-right: 8px;"
43+
/>
44+
<button type="button" id="open-emoji-picker-btn">__MSG_optionsEmojiChooseButton__</button>
45+
<button type="button" id="clear-emoji-btn" style="margin-left: 8px; background-color: #6b7280;">__MSG_optionsEmojiClearButton__</button>
46+
</div>
47+
<div id="emoji-picker" class="emoji-picker hidden">
48+
<div id="emoji-grid" class="emoji-grid"></div>
49+
</div>
50+
</div>
3451
<div class="form-group">
3552
<label for="webhook-group">__MSG_optionsGroupLabel__</label>
3653
<select id="webhook-group">

‎options/options.js‎

Lines changed: 66 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ const loadWebhooks = async () => {
7272

7373
const labelSpan = document.createElement("span");
7474
labelSpan.classList.add("label");
75-
labelSpan.textContent = webhook.label;
75+
labelSpan.textContent = `${webhook.emoji ? webhook.emoji + ' ' : ''}${webhook.label}`;
7676

7777
const urlSpan = document.createElement("span");
7878
urlSpan.classList.add("url");
@@ -130,7 +130,7 @@ const loadWebhooks = async () => {
130130

131131
const labelSpan = document.createElement("span");
132132
labelSpan.classList.add("label");
133-
labelSpan.textContent = webhook.label;
133+
labelSpan.textContent = `${webhook.emoji ? webhook.emoji + ' ' : ''}${webhook.label}`;
134134

135135
const urlSpan = document.createElement("span");
136136
urlSpan.classList.add("url");
@@ -374,6 +374,7 @@ const labelInput = document.getElementById("webhook-label");
374374
const urlInput = document.getElementById("webhook-url");
375375
const methodSelect = document.getElementById("webhook-method");
376376
const identifierInput = document.getElementById("webhook-identifier");
377+
const emojiInput = document.getElementById("webhook-emoji");
377378
const headersListDiv = document.getElementById("headers-list");
378379
const headerKeyInput = document.getElementById("header-key");
379380
const headerValueInput = document.getElementById("header-value");
@@ -405,6 +406,11 @@ const closeManageGroups = document.querySelector("#manage-groups-modal .close-ma
405406
const closeManageAppearanceBtn = document.getElementById("close-manage-appearance-btn");
406407
const closeManageAppearance = document.querySelector("#manage-appearance-modal .close-manage-appearance");
407408
const themeSelect = document.getElementById("theme-select");
409+
// Emoji picker elements
410+
const openEmojiPickerBtn = document.getElementById('open-emoji-picker-btn');
411+
const clearEmojiBtn = document.getElementById('clear-emoji-btn');
412+
const emojiPicker = document.getElementById('emoji-picker');
413+
const emojiGrid = document.getElementById('emoji-grid');
408414
let headers = [];
409415

410416
async function exportWebhooks() {
@@ -428,7 +434,9 @@ async function handleImport(event) {
428434
const data = JSON.parse(text);
429435
const hooks = Array.isArray(data) ? data : data.webhooks;
430436
if (Array.isArray(hooks)) {
431-
await saveWebhooks(hooks);
437+
// Backward compatibility: ensure emoji field exists
438+
const normalized = hooks.map(h => ({ ...h, emoji: h.emoji || "" }));
439+
await saveWebhooks(normalized);
432440
loadWebhooks();
433441
}
434442
} catch (e) {
@@ -461,8 +469,10 @@ const importData = async (file) => {
461469
reader.onload = async (event) => {
462470
try {
463471
const data = JSON.parse(event.target.result);
464-
const webhooks = Array.isArray(data.webhooks) ? data.webhooks : [];
472+
let webhooks = Array.isArray(data.webhooks) ? data.webhooks : [];
465473
const groups = Array.isArray(data.groups) ? data.groups : [];
474+
// Ensure emoji field exists
475+
webhooks = webhooks.map(h => ({ ...h, emoji: h.emoji || "" }));
466476
await browser.storage.sync.set({ webhooks, groups });
467477
await loadWebhooks();
468478
if (typeof renderGroups === 'function') await renderGroups();
@@ -501,8 +511,10 @@ if (importWebhooksBtn && importWebhooksInput) {
501511
reader.onload = async (event) => {
502512
try {
503513
const data = JSON.parse(event.target.result);
504-
const webhooks = Array.isArray(data.webhooks) ? data.webhooks : [];
514+
let webhooks = Array.isArray(data.webhooks) ? data.webhooks : [];
505515
const groups = Array.isArray(data.groups) ? data.groups : [];
516+
// Ensure emoji field exists
517+
webhooks = webhooks.map(h => ({ ...h, emoji: h.emoji || "" }));
506518
await browser.storage.sync.set({ webhooks, groups });
507519
await loadWebhooks();
508520
if (typeof renderGroups === 'function') await renderGroups();
@@ -782,6 +794,7 @@ form.addEventListener("submit", async (e) => {
782794
const url = urlInput.value.trim();
783795
const method = methodSelect.value;
784796
const identifier = identifierInput.value.trim();
797+
const emoji = emojiInput ? emojiInput.value.trim() : "";
785798
const urlFilter = urlFilterInput.value.trim();
786799
const customPayload = customPayloadInput.value.trim();
787800
const groupId = groupSelect.value || null;
@@ -799,7 +812,8 @@ form.addEventListener("submit", async (e) => {
799812
identifier,
800813
customPayload: customPayload || null,
801814
urlFilter: urlFilter || "",
802-
groupId
815+
groupId,
816+
emoji: emoji || ""
803817
} : wh
804818
);
805819
editWebhookId = null;
@@ -815,7 +829,8 @@ form.addEventListener("submit", async (e) => {
815829
identifier,
816830
customPayload: customPayload || null,
817831
urlFilter: urlFilter || "",
818-
groupId
832+
groupId,
833+
emoji: emoji || ""
819834
};
820835
webhooks.push(newWebhook);
821836
}
@@ -825,6 +840,7 @@ form.addEventListener("submit", async (e) => {
825840
urlInput.value = "";
826841
methodSelect.value = "POST";
827842
identifierInput.value = "";
843+
if (emojiInput) emojiInput.value = "";
828844
urlFilterInput.value = "";
829845
customPayloadInput.value = "";
830846
headerKeyInput.value = "";
@@ -923,6 +939,7 @@ webhookList.addEventListener("click", async (e) => {
923939
urlFilterInput.value = webhook.urlFilter || "";
924940
customPayloadInput.value = webhook.customPayload || "";
925941
groupSelect.value = webhook.groupId || "";
942+
if (emojiInput) emojiInput.value = webhook.emoji || "";
926943
headers = Array.isArray(webhook.headers) ? [...webhook.headers] : [];
927944
renderHeaders();
928945
cancelEditBtn.classList.remove("hidden");
@@ -949,6 +966,7 @@ webhookList.addEventListener("click", async (e) => {
949966
urlFilterInput.value = webhook.urlFilter || "";
950967
customPayloadInput.value = webhook.customPayload || "";
951968
groupSelect.value = webhook.groupId || "";
969+
if (emojiInput) emojiInput.value = webhook.emoji || "";
952970
headers = Array.isArray(webhook.headers) ? [...webhook.headers] : [];
953971
renderHeaders();
954972
cancelEditBtn.classList.remove("hidden");
@@ -975,6 +993,7 @@ cancelEditBtn.addEventListener("click", () => {
975993
headerKeyInput.value = "";
976994
headerValueInput.value = "";
977995
groupSelect.value = "";
996+
if (emojiInput) emojiInput.value = "";
978997
headers = [];
979998
renderHeaders();
980999
cancelEditBtn.classList.add("hidden");
@@ -1116,6 +1135,46 @@ document.addEventListener("DOMContentLoaded", () => {
11161135
browser.storage.sync.set({ theme: value });
11171136
});
11181137
}
1138+
1139+
// Initialize emoji picker if present
1140+
if (openEmojiPickerBtn && emojiPicker && emojiGrid && emojiInput) {
1141+
const EMOJIS = [
1142+
'🔔','✅','🚀','⚠️','❗','ℹ️','⭐','🔥','🛠️','🧪','📦','📣','📝','🧰','💡','🖥️','📱','🌐','🔒','🔑','🛡️','💾','📤','📥','🔄','⏱️','🕒','🧭','📊','📈','🧹','🧼','🧯','🧩','🧠','🛎️','🚨','🎉','🧵','🔍','🧰','🔗','✉️','📫','📬','🛰️','🌟','🎯','🪄','🧲','🧪','🧱','🪵'
1143+
];
1144+
1145+
function renderEmojiGrid() {
1146+
emojiGrid.textContent = '';
1147+
EMOJIS.forEach(e => {
1148+
const btn = document.createElement('button');
1149+
btn.type = 'button';
1150+
btn.className = 'emoji-item';
1151+
btn.textContent = e;
1152+
btn.addEventListener('click', () => {
1153+
emojiInput.value = e;
1154+
emojiPicker.classList.add('hidden');
1155+
emojiInput.focus();
1156+
});
1157+
emojiGrid.appendChild(btn);
1158+
});
1159+
}
1160+
1161+
openEmojiPickerBtn.addEventListener('click', () => {
1162+
if (emojiPicker.classList.contains('hidden')) {
1163+
renderEmojiGrid();
1164+
emojiPicker.classList.remove('hidden');
1165+
} else {
1166+
emojiPicker.classList.add('hidden');
1167+
}
1168+
});
1169+
1170+
if (clearEmojiBtn) {
1171+
clearEmojiBtn.addEventListener('click', () => {
1172+
emojiInput.value = '';
1173+
emojiInput.focus();
1174+
});
1175+
}
1176+
1177+
}
11191178
});
11201179

11211180
// Export functions for testing in Node environment

‎popup/popup.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -65,9 +65,10 @@ document.addEventListener("DOMContentLoaded", async () => {
6565
// Create a button for each webhook in this group
6666
groupWebhooks.forEach((webhook) => {
6767
const button = document.createElement("button");
68-
button.textContent = webhook.label;
68+
const displayLabel = `${webhook.emoji ? webhook.emoji + ' ' : ''}${webhook.label}`;
69+
button.textContent = displayLabel;
6970
button.dataset.url = webhook.url;
70-
button.dataset.label = webhook.label;
71+
button.dataset.label = displayLabel;
7172
button.dataset.webhookId = webhook.id;
7273
button.classList.add("webhook-btn");
7374
buttonsContainer.appendChild(button);
@@ -87,9 +88,10 @@ document.addEventListener("DOMContentLoaded", async () => {
8788
// Create a button for each ungrouped webhook
8889
ungroupedWebhooks.forEach((webhook) => {
8990
const button = document.createElement("button");
90-
button.textContent = webhook.label;
91+
const displayLabel = `${webhook.emoji ? webhook.emoji + ' ' : ''}${webhook.label}`;
92+
button.textContent = displayLabel;
9193
button.dataset.url = webhook.url;
92-
button.dataset.label = webhook.label;
94+
button.dataset.label = displayLabel;
9395
button.dataset.webhookId = webhook.id;
9496
button.classList.add("webhook-btn");
9597
buttonsContainer.appendChild(button);

‎tests/exportImport.test.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@ describe('export and import logic', () => {
155155

156156
await handleImport(event);
157157

158-
expect(global.browser.storage.sync.set).toHaveBeenCalledWith({ webhooks: hooks });
158+
expect(global.browser.storage.sync.set).toHaveBeenCalledWith({ webhooks: hooks.map(h => ({...h, emoji: ''})) });
159159
expect(event.target.value).toBe('');
160160
});
161161
});

‎tests/options.test.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -208,7 +208,8 @@ describe('options page', () => {
208208
identifier: 'test-identifier',
209209
customPayload,
210210
urlFilter: 'example.com',
211-
groupId: null
211+
groupId: null,
212+
emoji: ''
212213
}]
213214
});
214215
});

0 commit comments

Comments
 (0)