feat: validation for Button Emoji and fixes

frontend/src/components/WrappedSelect.svelte

@@ -45,7 +45,7 @@
     --border="#262b3d"
     --border-focused="0"
     --border-hover="0"
-    --borderRadius="4px"
+    --border-radius="6px"
     --item-hover-bg="#121212"
     --list-background="#262b3d"
     --item-color="white"

frontend/src/components/form/EmojiInput.svelte

@@ -48,16 +48,42 @@
 <style>
     input {
         width: 100%;
+        height: 48px;
+        margin: 0;
         border-top-right-radius: 0 !important;
         border-bottom-right-radius: 0 !important;
     }
 
+    input:focus {
+        box-shadow: none !important;
+    }
+
+    input:focus-visible {
+        height: 48px;
+        margin: 0;
+    }
+
     .wrapper {
         display: flex;
         flex-direction: row;
         width: 100%;
     }
 
+    .wrapper:focus-within input {
+        border-color: #262b3d;
+        background-color: #262b3d;
+    }
+
+    .wrapper:focus-within :global(.svelte-emoji-picker__trigger) {
+        border-color: #262b3d !important;
+        background-color: #262b3d !important;
+    }
+
+    .wrapper:focus-within {
+        box-shadow: 0 0 0 3px rgba(153, 93, 243, 0.1);
+        border-radius: var(--border-radius-sm);
+    }
+
     :global(.svelte-emoji-picker__trigger) {
         border-bottom-left-radius: 0;
         border-top-left-radius: 0;

frontend/src/components/manage/PanelCreationForm.svelte

@@ -38,6 +38,19 @@
     let selectedTeams = seedDefault ? [{ id: "default", name: "Default" }] : [];
     let selectedMentions = [];
 
+    let lastCustomEmoji = undefined;
+    let lastUnicodeEmoji = '📩';
+    // Unicode emoji regex
+    const unicodeEmojiRegex = /^\p{Emoji}$/u;
+    function validateUnicodeEmoji(value) {
+        if (typeof value !== "string") return false;
+        if (/^<a?:\w+:\d+>$/.test(value)) return false;
+        // Disallow spaces
+        if (/\s/.test(value)) return false;
+        // Only allow if matches single unicode emoji
+        return unicodeEmojiRegex.test(value);
+    }
+
     // Replace spaces with dashes in naming scheme as the user types
     $: if (
         data.naming_scheme !== undefined &&
@@ -85,9 +98,19 @@
     function handleEmojiTypeChange(e) {
         let isCustomEmoji = e.detail;
         if (isCustomEmoji) {
-            data.emote = undefined;
+            // Restore last selected custom emoji if available, else first emoji
+            if (lastCustomEmoji) {
+                data.emote = lastCustomEmoji;
+            } else {
+                data.emote = emojis && emojis.length > 0 ? emojis[0] : undefined;
+            }
         } else {
-            data.emote = "📩";
+            // Save the current custom emoji before switching to default
+            if (data.emote && typeof data.emote === "object") {
+                lastCustomEmoji = data.emote;
+            }
+            // Restore last unicode emoji if available
+            data.emote = lastUnicodeEmoji || '📩';
         }
     }
 
@@ -97,6 +120,17 @@
             id: emoji.id,
             name: emoji.name,
         };
+        lastCustomEmoji = data.emote;
+    }
+
+    // Track changes to EmojiInput (unicode emoji)
+    $: if (!data.use_custom_emoji && typeof data.emote === "string") {
+        if (validateUnicodeEmoji(data.emote)) {
+            lastUnicodeEmoji = data.emote;
+        } else {
+            // Revert to last valid unicode emoji if invalid input is detected
+            data.emote = lastUnicodeEmoji;
+        }
     }
 
     function updateColour() {
@@ -441,7 +475,8 @@
                                     selectedValue={data.emote}
                                     optionIdentifier="id"
                                     nameMapper={emojiNameMapper}
-                                    placeholderAlwaysShow={true}
+                                    isSearchable={false}
+                                    isClearable={false}
                                     on:input={handleCustomEmojiChange}
                                 />
                             </div>

frontend/src/views/Whitelabel.svelte

@@ -352,7 +352,6 @@
     :global(.form-input:focus-visible) {
         border-color: #262b3d !important;
         background-color: #262b3d !important;
-        border-radius: var(--border-radius-md);
         color: white !important;
         outline: none;
         padding: 8px 12px;