Update emoji picker and translations

20 files changed, 247 insertions, 137 deletions

diff --git a/resources/icons/emoji-categories/search.png b/resources/icons/emoji-categories/search.png
new file mode 100644
index 00000000..f101ba9c
--- /dev/null
+++ b/resources/icons/emoji-categories/search.png
Binary files differdiff --git a/resources/icons/emoji-categories/search@2x.png b/resources/icons/emoji-categories/search@2x.png
new file mode 100644
index 00000000..2604db45
--- /dev/null
+++ b/resources/icons/emoji-categories/search@2x.png
Binary files differdiff --git a/resources/icons/ui/search.png b/resources/icons/ui/search.png
new file mode 100644
index 00000000..f101ba9c
--- /dev/null
+++ b/resources/icons/ui/search.png
Binary files differdiff --git a/resources/icons/ui/search@2x.png b/resources/icons/ui/search@2x.png
new file mode 100644
index 00000000..2604db45
--- /dev/null
+++ b/resources/icons/ui/search@2x.png
Binary files differdiff --git a/resources/langs/nheko_de.ts b/resources/langs/nheko_de.ts
index 8b726f24..ee1e4dd5 100644
--- a/resources/langs/nheko_de.ts
+++ b/resources/langs/nheko_de.ts
@@ -189,13 +189,13 @@
 <context>
     <name>EmojiPicker</name>
     <message>
-        <location filename="../qml/emoji/EmojiPicker.qml" line="+33"/>
-        <location line="+133"/>
+        <location filename="../qml/emoji/EmojiPicker.qml" line="+104"/>
+        <location line="+135"/>
         <source>Search</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location line="-16"/>
+        <location line="-42"/>
         <source>People</source>
         <translation type="unfinished"></translation>
     </message>
@@ -751,7 +751,7 @@
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location line="+15"/>
+        <location line="+16"/>
         <source>Reply</source>
         <translation>Antworten</translation>
     </message>
@@ -764,7 +764,7 @@
 <context>
     <name>TimelineView</name>
     <message>
-        <location filename="../qml/TimelineView.qml" line="+52"/>
+        <location filename="../qml/TimelineView.qml" line="+65"/>
         <source>React</source>
         <translation type="unfinished"></translation>
     </message>
diff --git a/resources/langs/nheko_el.ts b/resources/langs/nheko_el.ts
index 890b6b65..c5351ef3 100644
--- a/resources/langs/nheko_el.ts
+++ b/resources/langs/nheko_el.ts
@@ -189,13 +189,13 @@
 <context>
     <name>EmojiPicker</name>
     <message>
-        <location filename="../qml/emoji/EmojiPicker.qml" line="+33"/>
-        <location line="+133"/>
+        <location filename="../qml/emoji/EmojiPicker.qml" line="+104"/>
+        <location line="+135"/>
         <source>Search</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location line="-16"/>
+        <location line="-42"/>
         <source>People</source>
         <translation type="unfinished"></translation>
     </message>
@@ -751,7 +751,7 @@
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location line="+15"/>
+        <location line="+16"/>
         <source>Reply</source>
         <translation type="unfinished"></translation>
     </message>
@@ -764,7 +764,7 @@
 <context>
     <name>TimelineView</name>
     <message>
-        <location filename="../qml/TimelineView.qml" line="+52"/>
+        <location filename="../qml/TimelineView.qml" line="+65"/>
         <source>React</source>
         <translation type="unfinished"></translation>
     </message>
diff --git a/resources/langs/nheko_en.ts b/resources/langs/nheko_en.ts
index f5b667d0..0220ee09 100644
--- a/resources/langs/nheko_en.ts
+++ b/resources/langs/nheko_en.ts
@@ -189,13 +189,13 @@
 <context>
     <name>EmojiPicker</name>
     <message>
-        <location filename="../qml/emoji/EmojiPicker.qml" line="+33"/>
-        <location line="+133"/>
+        <location filename="../qml/emoji/EmojiPicker.qml" line="+104"/>
+        <location line="+135"/>
         <source>Search</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location line="-16"/>
+        <location line="-42"/>
         <source>People</source>
         <translation type="unfinished"></translation>
     </message>
@@ -751,7 +751,7 @@
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location line="+15"/>
+        <location line="+16"/>
         <source>Reply</source>
         <translation>Reply</translation>
     </message>
@@ -764,7 +764,7 @@
 <context>
     <name>TimelineView</name>
     <message>
-        <location filename="../qml/TimelineView.qml" line="+52"/>
+        <location filename="../qml/TimelineView.qml" line="+65"/>
         <source>React</source>
         <translation type="unfinished"></translation>
     </message>
diff --git a/resources/langs/nheko_fi.ts b/resources/langs/nheko_fi.ts
index b3669974..712d8ef9 100644
--- a/resources/langs/nheko_fi.ts
+++ b/resources/langs/nheko_fi.ts
@@ -189,13 +189,13 @@
 <context>
     <name>EmojiPicker</name>
     <message>
-        <location filename="../qml/emoji/EmojiPicker.qml" line="+33"/>
-        <location line="+133"/>
+        <location filename="../qml/emoji/EmojiPicker.qml" line="+104"/>
+        <location line="+135"/>
         <source>Search</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location line="-16"/>
+        <location line="-42"/>
         <source>People</source>
         <translation type="unfinished"></translation>
     </message>
@@ -751,7 +751,7 @@
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location line="+15"/>
+        <location line="+16"/>
         <source>Reply</source>
         <translation type="unfinished"></translation>
     </message>
@@ -764,7 +764,7 @@
 <context>
     <name>TimelineView</name>
     <message>
-        <location filename="../qml/TimelineView.qml" line="+52"/>
+        <location filename="../qml/TimelineView.qml" line="+65"/>
         <source>React</source>
         <translation type="unfinished"></translation>
     </message>
diff --git a/resources/langs/nheko_fr.ts b/resources/langs/nheko_fr.ts
index 4a00158c..c21fda28 100644
--- a/resources/langs/nheko_fr.ts
+++ b/resources/langs/nheko_fr.ts
@@ -189,13 +189,13 @@
 <context>
     <name>EmojiPicker</name>
     <message>
-        <location filename="../qml/emoji/EmojiPicker.qml" line="+33"/>
-        <location line="+133"/>
+        <location filename="../qml/emoji/EmojiPicker.qml" line="+104"/>
+        <location line="+135"/>
         <source>Search</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location line="-16"/>
+        <location line="-42"/>
         <source>People</source>
         <translation type="unfinished"></translation>
     </message>
@@ -752,7 +752,7 @@
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location line="+15"/>
+        <location line="+16"/>
         <source>Reply</source>
         <translation type="unfinished"></translation>
     </message>
@@ -765,7 +765,7 @@
 <context>
     <name>TimelineView</name>
     <message>
-        <location filename="../qml/TimelineView.qml" line="+52"/>
+        <location filename="../qml/TimelineView.qml" line="+65"/>
         <source>React</source>
         <translation type="unfinished"></translation>
     </message>
diff --git a/resources/langs/nheko_ja.ts b/resources/langs/nheko_ja.ts
index 5df8b142..4101ea2d 100644
--- a/resources/langs/nheko_ja.ts
+++ b/resources/langs/nheko_ja.ts
@@ -189,13 +189,13 @@
 <context>
     <name>EmojiPicker</name>
     <message>
-        <location filename="../qml/emoji/EmojiPicker.qml" line="+33"/>
-        <location line="+133"/>
+        <location filename="../qml/emoji/EmojiPicker.qml" line="+104"/>
+        <location line="+135"/>
         <source>Search</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location line="-16"/>
+        <location line="-42"/>
         <source>People</source>
         <translation type="unfinished"></translation>
     </message>
@@ -750,7 +750,7 @@
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location line="+15"/>
+        <location line="+16"/>
         <source>Reply</source>
         <translation>返信</translation>
     </message>
@@ -763,7 +763,7 @@
 <context>
     <name>TimelineView</name>
     <message>
-        <location filename="../qml/TimelineView.qml" line="+52"/>
+        <location filename="../qml/TimelineView.qml" line="+65"/>
         <source>React</source>
         <translation type="unfinished"></translation>
     </message>
diff --git a/resources/langs/nheko_nl.ts b/resources/langs/nheko_nl.ts
index 1880bd2c..dc19fd4e 100644
--- a/resources/langs/nheko_nl.ts
+++ b/resources/langs/nheko_nl.ts
@@ -189,13 +189,13 @@
 <context>
     <name>EmojiPicker</name>
     <message>
-        <location filename="../qml/emoji/EmojiPicker.qml" line="+33"/>
-        <location line="+133"/>
+        <location filename="../qml/emoji/EmojiPicker.qml" line="+104"/>
+        <location line="+135"/>
         <source>Search</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location line="-16"/>
+        <location line="-42"/>
         <source>People</source>
         <translation type="unfinished"></translation>
     </message>
@@ -751,7 +751,7 @@
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location line="+15"/>
+        <location line="+16"/>
         <source>Reply</source>
         <translation type="unfinished"></translation>
     </message>
@@ -764,7 +764,7 @@
 <context>
     <name>TimelineView</name>
     <message>
-        <location filename="../qml/TimelineView.qml" line="+52"/>
+        <location filename="../qml/TimelineView.qml" line="+65"/>
         <source>React</source>
         <translation type="unfinished"></translation>
     </message>
diff --git a/resources/langs/nheko_pl.ts b/resources/langs/nheko_pl.ts
index 9e938a04..a2d7ca11 100644
--- a/resources/langs/nheko_pl.ts
+++ b/resources/langs/nheko_pl.ts
@@ -189,13 +189,13 @@
 <context>
     <name>EmojiPicker</name>
     <message>
-        <location filename="../qml/emoji/EmojiPicker.qml" line="+33"/>
-        <location line="+133"/>
+        <location filename="../qml/emoji/EmojiPicker.qml" line="+104"/>
+        <location line="+135"/>
         <source>Search</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location line="-16"/>
+        <location line="-42"/>
         <source>People</source>
         <translation type="unfinished"></translation>
     </message>
@@ -752,7 +752,7 @@
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location line="+15"/>
+        <location line="+16"/>
         <source>Reply</source>
         <translation type="unfinished"></translation>
     </message>
@@ -765,7 +765,7 @@
 <context>
     <name>TimelineView</name>
     <message>
-        <location filename="../qml/TimelineView.qml" line="+52"/>
+        <location filename="../qml/TimelineView.qml" line="+65"/>
         <source>React</source>
         <translation type="unfinished"></translation>
     </message>
diff --git a/resources/langs/nheko_ru.ts b/resources/langs/nheko_ru.ts
index f6594988..178301a3 100644
--- a/resources/langs/nheko_ru.ts
+++ b/resources/langs/nheko_ru.ts
@@ -189,13 +189,13 @@
 <context>
     <name>EmojiPicker</name>
     <message>
-        <location filename="../qml/emoji/EmojiPicker.qml" line="+33"/>
-        <location line="+133"/>
+        <location filename="../qml/emoji/EmojiPicker.qml" line="+104"/>
+        <location line="+135"/>
         <source>Search</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location line="-16"/>
+        <location line="-42"/>
         <source>People</source>
         <translation type="unfinished"></translation>
     </message>
@@ -752,7 +752,7 @@
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location line="+15"/>
+        <location line="+16"/>
         <source>Reply</source>
         <translation type="unfinished"></translation>
     </message>
@@ -765,7 +765,7 @@
 <context>
     <name>TimelineView</name>
     <message>
-        <location filename="../qml/TimelineView.qml" line="+52"/>
+        <location filename="../qml/TimelineView.qml" line="+65"/>
         <source>React</source>
         <translation type="unfinished"></translation>
     </message>
diff --git a/resources/langs/nheko_zh_CN.ts b/resources/langs/nheko_zh_CN.ts
index edcbdeee..b0f6728d 100644
--- a/resources/langs/nheko_zh_CN.ts
+++ b/resources/langs/nheko_zh_CN.ts
@@ -189,13 +189,13 @@
 <context>
     <name>EmojiPicker</name>
     <message>
-        <location filename="../qml/emoji/EmojiPicker.qml" line="+33"/>
-        <location line="+133"/>
+        <location filename="../qml/emoji/EmojiPicker.qml" line="+104"/>
+        <location line="+135"/>
         <source>Search</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location line="-16"/>
+        <location line="-42"/>
         <source>People</source>
         <translation type="unfinished"></translation>
     </message>
@@ -750,7 +750,7 @@
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <location line="+15"/>
+        <location line="+16"/>
         <source>Reply</source>
         <translation type="unfinished"></translation>
     </message>
@@ -763,7 +763,7 @@
 <context>
     <name>TimelineView</name>
     <message>
-        <location filename="../qml/TimelineView.qml" line="+52"/>
+        <location filename="../qml/TimelineView.qml" line="+65"/>
         <source>React</source>
         <translation type="unfinished"></translation>
     </message>
diff --git a/resources/qml/TimelineRow.qml b/resources/qml/TimelineRow.qml
index afde7a2a..214f2002 100644
--- a/resources/qml/TimelineRow.qml
+++ b/resources/qml/TimelineRow.qml
@@ -81,6 +81,7 @@ MouseArea {
 			hoverEnabled: true
 			ToolTip.visible: hovered
 			ToolTip.text: qsTr("React")
+			emojiPicker: emojiPopup
 //			onClicked: chat.model.reactAction(model.id)
 		}
 		ImageButton {
diff --git a/resources/qml/TimelineView.qml b/resources/qml/TimelineView.qml
index 9a360726..edb25441 100644
--- a/resources/qml/TimelineView.qml
+++ b/resources/qml/TimelineView.qml
@@ -6,8 +6,10 @@ import QtQuick.Window 2.2
 import Qt.labs.settings 1.0
 
 import im.nheko 1.0
+import im.nheko.EmojiModel 1.0
 
 import "./delegates"
+import "./emoji"
 
 Page {
 	property var colors: currentActivePalette
@@ -34,6 +36,17 @@ Page {
 		property bool buttons: true
 	}
 
+    EmojiPicker {
+        id: emojiPopup
+        width: 7 * 52 + 20
+        height: 6 * 52 
+        colors: palette
+        model: EmojiProxyModel {
+            category: Emoji.Category.People
+            sourceModel: EmojiModel {}
+        }
+    }
+
 	Menu {
 		id: messageContextMenu
 		modal: true
diff --git a/resources/qml/emoji/EmojiButton.qml b/resources/qml/emoji/EmojiButton.qml
index 51d5628c..0940adfe 100644
--- a/resources/qml/emoji/EmojiButton.qml
+++ b/resources/qml/emoji/EmojiButton.qml
@@ -7,21 +7,10 @@ import "../"
 
 ImageButton {
     property var colors: currentActivePalette
+    property var emojiPicker
 
     image: ":/icons/icons/ui/smile.png"
     id: emojiButton
-    onClicked: emojiPopup.open()
+    onClicked: emojiPicker.visible ? emojiPicker.close() : emojiPicker.show(emojiButton)
 
-    EmojiPicker {
-        id: emojiPopup
-        x: Math.round((emojiButton.width - width) / 2)
-        y: emojiButton.height
-        width: 7 * 52
-        height: 6 * 52 
-        colors: emojiButton.colors
-        model: EmojiProxyModel {
-            category: Emoji.Category.People
-            sourceModel: EmojiModel {}
-        }
-    }
 }
\ No newline at end of file
diff --git a/resources/qml/emoji/EmojiPicker.qml b/resources/qml/emoji/EmojiPicker.qml
index 6d04edf8..3a0eb365 100644
--- a/resources/qml/emoji/EmojiPicker.qml
+++ b/resources/qml/emoji/EmojiPicker.qml
@@ -1,6 +1,7 @@
 import QtQuick 2.9
 import QtQuick.Controls 2.9
 import QtQuick.Layouts 1.3
+import QtGraphicalEffects 1.9
 
 import im.nheko 1.0
 import im.nheko.EmojiModel 1.0
@@ -8,6 +9,13 @@ import im.nheko.EmojiModel 1.0
 import "../"
 
 Popup {
+
+	function show(showAt) {
+        parent = showAt
+        x = Math.round((showAt.width - width) / 2)
+        y = showAt.height
+        open()
+	}
     property var colors
     property alias model: gridView.model
     property var textArea
@@ -16,54 +24,31 @@ Popup {
     id: emojiPopup
 
     margins: 0
+    bottomPadding: 1
+    leftPadding: 1
+    rightPadding: 1
 
     modal: true
     focus: true
-    closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
+    closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
 
     ColumnLayout {
+        id: columnView
         anchors.fill: parent
-
-        // Search field
-        TextField {
-            id: emojiSearch
-            Layout.alignment: Qt.AlignVCenter
-            Layout.preferredWidth: parent.width - 4
-            visible: emojiPopup.model.category === Emoji.Category.Search
-            placeholderText: qsTr("Search")
-            selectByMouse: true
-            rightPadding: clearSearch.width
-
-            Timer {
-                id: searchTimer
-                interval: 350 // tweak as needed?
-                onTriggered: emojiPopup.model.filter = emojiSearch.text
-            }
-
-            ToolButton {
-                id: clearSearch
-                anchors {
-                    verticalCenter: parent.verticalCenter
-                    right: parent.right
-                }
-                // clear the default hover effects.
-                background: Item {}
-                visible: emojiSearch.text !== ''
-                icon.source: "image://colorimage/:/icons/icons/ui/round-remove-button.png?" + (clearSearch.hovered ? colors.highlight : colors.buttonText)
-                focusPolicy: Qt.NoFocus
-                onClicked: emojiSearch.clear()
-            }
-
-            onTextChanged: searchTimer.restart()
-            onVisibleChanged: if (visible) forceActiveFocus()
-        }
+        spacing: 0
+        Layout.bottomMargin: 0
+        Layout.leftMargin: 3
+        Layout.rightMargin: 3
+        Layout.topMargin: 2
 
         // emoji grid
         GridView {
             id: gridView
 
+            Layout.preferredHeight: emojiPopup.height
             Layout.fillWidth: true
             Layout.fillHeight: true
+            Layout.leftMargin: 4
 
             cellWidth: 52
             cellHeight: 52
@@ -76,12 +61,12 @@ Popup {
             delegate: AbstractButton {
                 width: 48
                 height: 48
-
                 contentItem: Text {
                     horizontalAlignment: Text.AlignHCenter
                     verticalAlignment: Text.AlignVCenter
-
-                    font.pointSize: 36
+                    font.family: settings.emoji_font_family
+                    
+                    font.pixelSize: 36
                     text: model.unicode
                 }
 
@@ -94,53 +79,115 @@ Popup {
                 hoverEnabled: true
                 ToolTip.text: model.shortName
                 ToolTip.visible: hovered
+
+                    // give the emoji a little oomf
+                DropShadow {
+                    width: parent.width;
+                    height: parent.height;
+                    horizontalOffset: 3
+                    verticalOffset: 3
+                    radius: 8.0
+                    samples: 17
+                    color: "#80000000"
+                    source: parent.contentItem
+                }
                 // TODO: emit a signal and maybe add favorites at some point?
                 //onClicked: textArea.insert(textArea.cursorPosition, modelData.unicode)
             }
 
-            ScrollBar.vertical: ScrollBar {}
+            // Search field
+            header: TextField {
+                id: emojiSearch
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.rightMargin: emojiScroll.width + 4
+                placeholderText: qsTr("Search")
+                selectByMouse: true
+                rightPadding: clearSearch.width
+
+                Timer {
+                    id: searchTimer
+                    interval: 350 // tweak as needed?
+                    onTriggered: {
+                        emojiPopup.model.filter = emojiSearch.text
+                        emojiPopup.model.category = Emoji.Category.Search
+                    }
+                }
+
+                ToolButton {
+                    id: clearSearch
+                    anchors {
+                        verticalCenter: parent.verticalCenter
+                        right: parent.right
+                    }
+                    // clear the default hover effects.
+                    background: Item {}
+                    visible: emojiSearch.text !== ''
+                    icon.source: "image://colorimage/:/icons/icons/ui/round-remove-button.png?" + (clearSearch.hovered ? colors.highlight : colors.buttonText)
+                    focusPolicy: Qt.NoFocus
+                    onClicked: emojiSearch.clear()
+                }
+
+                onTextChanged: searchTimer.restart()
+                onVisibleChanged: if (visible) forceActiveFocus()
+            }
+
+            ScrollBar.vertical: ScrollBar {
+                id: emojiScroll
+            }
         }
 
         // Separator
         Rectangle {
             Layout.fillWidth: true
-            Layout.preferredHeight: 2
+            Layout.preferredHeight: 1
 
-            color: emojiPopup.colors.highlight
+            color: emojiPopup.colors.dark
         }
 
         // Category picker row
-        Row {
+        RowLayout {
+            Layout.bottomMargin: 0
+            Layout.preferredHeight: 42
+            implicitHeight: 42
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
+            // Display the normal categories
             Repeater {
                 model: ListModel {
                     // TODO: Would like to get 'simple' icons for the categories
-                    ListElement { label: "😏"; category: Emoji.Category.People }
-                    ListElement { label: "🌲"; category: Emoji.Category.Nature }
-                    ListElement { label: "🍛"; category: Emoji.Category.Food }
-                    ListElement { label: "🚁"; category: Emoji.Category.Activity }
-                    ListElement { label: "🚅"; category: Emoji.Category.Travel }
-                    ListElement { label: "💡"; category: Emoji.Category.Objects }
-                    ListElement { label: "🔣"; category: Emoji.Category.Symbols }
-                    ListElement { label: "🏁"; category: Emoji.Category.Flags }
-                    ListElement { label: "🔍"; category: Emoji.Category.Search }
+                    ListElement { image: ":/icons/icons/emoji-categories/people.png"; category: Emoji.Category.People }
+                    ListElement { image: ":/icons/icons/emoji-categories/nature.png"; category: Emoji.Category.Nature }
+                    ListElement { image: ":/icons/icons/emoji-categories/foods.png"; category: Emoji.Category.Food }
+                    ListElement { image: ":/icons/icons/emoji-categories/activity.png"; category: Emoji.Category.Activity }
+                    ListElement { image: ":/icons/icons/emoji-categories/travel.png"; category: Emoji.Category.Travel }
+                    ListElement { image: ":/icons/icons/emoji-categories/objects.png"; category: Emoji.Category.Objects }
+                    ListElement { image: ":/icons/icons/emoji-categories/symbols.png"; category: Emoji.Category.Symbols }
+                    ListElement { image: ":/icons/icons/emoji-categories/flags.png"; category: Emoji.Category.Flags }
                 }
 
                 delegate: AbstractButton {
-                    width: 40
-                    height: 40
-
-                    contentItem: Text {
-                        horizontalAlignment: Text.AlignHCenter
-                        verticalAlignment: Text.AlignVCenter
+                    Layout.preferredWidth: 36
+                    Layout.preferredHeight: 36
 
-                        font.pointSize: 30 
-                        text: model.label
+                    contentItem: Image {
+                        horizontalAlignment: Image.AlignHCenter
+                        verticalAlignment: Image.AlignVCenter
+                        fillMode: Image.Pad
+                        smooth: true
+                        sourceSize.width: 32
+                        sourceSize.height: 32
+                        source: "image://colorimage/" + model.image + "?" + (hovered ? colors.highlight : colors.buttonText)
                     }
 
                     background: Rectangle {
                         anchors.fill: parent
-                        color: emojiPopup.model.category === model.category ? colors.highlight : 'transparent'
+                        property real highlightHue: colors.highlight.hslHue
+                        property real highlightSat: colors.highlight.hslSaturation
+                        property real highlightLight: colors.highlight.hslLightness
+
+                        color: emojiPopup.model.category === model.category ? Qt.hsla(highlightHue, highlightSat, highlightLight, 0.25)  : 'transparent'
                         radius: 5
+                        border.color: emojiPopup.model.category === model.category ? colors.highlight : 'transparent'
                     }
 
                     hoverEnabled: true
@@ -162,13 +209,55 @@ Popup {
 							return qsTr('Symbols');
 						case Emoji.Category.Flags:
 							return qsTr('Flags');
-						case Emoji.Category.Search:
-							return qsTr('Search');
 						}
 					}
                     ToolTip.visible: hovered
 
-                    onClicked: emojiPopup.model.category = model.category
+                    onClicked: {
+                        emojiPopup.model.category = model.category
+                    }
+                }
+            }
+
+            // Separator
+            Rectangle {
+                Layout.fillHeight: true
+                Layout.preferredWidth: 1
+                implicitWidth: 1
+                height: parent.height
+
+                color: emojiPopup.colors.dark
+            }
+
+            // Search Button is special
+            AbstractButton {
+                id: searchBtn
+                hoverEnabled: true
+                Layout.alignment: Qt.AlignRight
+                Layout.bottomMargin: 0
+
+                ToolTip.text: qsTr("Search")
+                ToolTip.visible: hovered
+                onClicked: {
+                    // clear any filters
+                    emojiPopup.model.category = Emoji.Category.Search
+                    gridView.positionViewAtBeginning()
+                    emojiSearch.forceActiveFocus()
+                }
+                Layout.preferredWidth: 36
+                Layout.preferredHeight: 36
+                implicitWidth: 36
+                implicitHeight: 36
+
+                contentItem: Image {
+                    anchors.right: parent.right
+                    horizontalAlignment: Image.AlignHCenter
+                    verticalAlignment: Image.AlignVCenter
+                    fillMode: Image.Pad
+                    smooth: true
+                    sourceSize.width: 32
+                    sourceSize.height: 32
+                    source: "image://colorimage/:/icons/icons/ui/search.png?" + (parent.hovered ? colors.highlight : colors.buttonText)
                 }
             }
         }
diff --git a/resources/res.qrc b/resources/res.qrc
index a48d0410..008ff551 100644
--- a/resources/res.qrc
+++ b/resources/res.qrc
@@ -20,6 +20,8 @@
         <file>icons/ui/checkmark@2x.png</file>
         <file>icons/ui/cursor.png</file>
         <file>icons/ui/cursor@2x.png</file>
+        <file>icons/ui/search.png</file>
+        <file>icons/ui/search@2x.png</file>
         <file>icons/ui/settings.png</file>
         <file>icons/ui/settings@2x.png</file>
         <file>icons/ui/smile.png</file>
diff --git a/scripts/generate_icns.sh b/scripts/generate_icns.sh
index 98a5e68f..9563b704 100755
--- a/scripts/generate_icns.sh
+++ b/scripts/generate_icns.sh
@@ -9,19 +9,35 @@ set -eu
 INPUT=$1
 OUTPUT=nheko
 
+filename=$(basename -- "$1")
+extension="${filename##*.}"
+
 mkdir ${OUTPUT}.iconset
 
-sips -z 16 16     "${INPUT}" --out ${OUTPUT}.iconset/icon_16x16.png
-sips -z 32 32     "${INPUT}" --out ${OUTPUT}.iconset/icon_16x16@2x.png
-sips -z 32 32     "${INPUT}" --out ${OUTPUT}.iconset/icon_32x32.png
-sips -z 64 64     "${INPUT}" --out ${OUTPUT}.iconset/icon_32x32@2x.png
-sips -z 128 128   "${INPUT}" --out ${OUTPUT}.iconset/icon_128x128.png
-sips -z 256 256   "${INPUT}" --out ${OUTPUT}.iconset/icon_128x128@2x.png
-sips -z 256 256   "${INPUT}" --out ${OUTPUT}.iconset/icon_256x256.png
-sips -z 512 512   "${INPUT}" --out ${OUTPUT}.iconset/icon_256x256@2x.png
-sips -z 512 512   "${INPUT}" --out ${OUTPUT}.iconset/icon_512x512.png
-
-cp "${INPUT}" ${OUTPUT}.iconset/icon_512x512@2x.png
+if [ extension = "svg" ]; then
+    rsvg-convert -h 16   "${INPUT}" > ${OUTPUT}.iconset/icon_16x16.png
+    rsvg-convert -h 32   "${INPUT}" > ${OUTPUT}.iconset/icon_16x16@2x.png
+    rsvg-convert -h 32   "${INPUT}" > ${OUTPUT}.iconset/icon_32x32.png
+    rsvg-convert -h 64   "${INPUT}" > ${OUTPUT}.iconset/icon_32x32@2x.png
+    rsvg-convert -h 128  "${INPUT}" > ${OUTPUT}.iconset/icon_128x128.png
+    rsvg-convert -h 256  "${INPUT}" > ${OUTPUT}.iconset/icon_128x128@2x.png
+    rsvg-convert -h 256  "${INPUT}" > ${OUTPUT}.iconset/icon_256x256.png
+    rsvg-convert -h 512  "${INPUT}" > ${OUTPUT}.iconset/icon_256x256@2x.png
+    rsvg-convert -h 512  "${INPUT}" > ${OUTPUT}.iconset/icon_512x512.png 
+    rsvg-convert -h 1024 "${INPUT}" > ${OUTPUT}.iconset/icon_512x512@2x.png 
+else
+    sips -z 16 16     "${INPUT}" --out ${OUTPUT}.iconset/icon_16x16.png
+    sips -z 32 32     "${INPUT}" --out ${OUTPUT}.iconset/icon_16x16@2x.png
+    sips -z 32 32     "${INPUT}" --out ${OUTPUT}.iconset/icon_32x32.png
+    sips -z 64 64     "${INPUT}" --out ${OUTPUT}.iconset/icon_32x32@2x.png
+    sips -z 128 128   "${INPUT}" --out ${OUTPUT}.iconset/icon_128x128.png
+    sips -z 256 256   "${INPUT}" --out ${OUTPUT}.iconset/icon_128x128@2x.png
+    sips -z 256 256   "${INPUT}" --out ${OUTPUT}.iconset/icon_256x256.png
+    sips -z 512 512   "${INPUT}" --out ${OUTPUT}.iconset/icon_256x256@2x.png
+    sips -z 512 512   "${INPUT}" --out ${OUTPUT}.iconset/icon_512x512.png
+
+    cp "${INPUT}" ${OUTPUT}.iconset/icon_512x512@2x.png
+fi
 
 iconutil -c icns ${OUTPUT}.iconset