Add QS emoji picker

2026-05-17 09:47:45 +02:00
parent d92c277e87
commit 25c718e3df
8 changed files with 359 additions and 2 deletions
@@ -0,0 +1,6 @@
+#!/bin/bash
+# omarchy:summary=Launch the emoji picker
+# omarchy:group=menu
+# omarchy:examples=omarchy menu emoji
+
+omarchy-shell-ipc shell toggle omarchy.emoji-picker "{}"
@@ -37,4 +37,4 @@ hl.bind("SUPER + SHIFT + ALT + X", hl.dsp.exec_cmd([[omarchy-launch-webapp "http
 -- Logitech MX Keys examples:
 -- hl.bind("SUPER + SHIFT + S", hl.dsp.exec_cmd("omarchy-capture-screenshot"))
 -- hl.bind("SUPER + H", hl.dsp.exec_cmd("voxtype record toggle"))
-- hl.bind("SUPER + PERIOD", hl.dsp.exec_cmd("omarchy-launch-walker -m symbols"))
+-- hl.bind("SUPER + PERIOD", hl.dsp.exec_cmd("omarchy-shell-ipc shell toggle omarchy.emoji-picker \"{}\""))
@@ -1,5 +1,5 @@
 hl.bind("SUPER + SPACE", hl.dsp.exec_cmd("omarchy-launch-walker"), { description = "Launch apps" })
-hl.bind("SUPER + CTRL + E", hl.dsp.exec_cmd("omarchy-launch-walker -m symbols"), { description = "Emoji picker" })
+hl.bind("SUPER + CTRL + E", hl.dsp.exec_cmd("omarchy-shell-ipc shell toggle omarchy.emoji-picker \"{}\""), { description = "Emoji picker" })
 hl.bind("SUPER + CTRL + C", hl.dsp.exec_cmd("omarchy-shell-ipc menu toggle capture"), { description = "Capture menu" })
 hl.bind("SUPER + CTRL + O", hl.dsp.exec_cmd("omarchy-shell-ipc menu toggle toggle"), { description = "Toggle menu" })
 hl.bind("SUPER + CTRL + H", hl.dsp.exec_cmd("omarchy-shell-ipc menu toggle hardware"), { description = "Hardware menu" })
@@ -13,6 +13,7 @@ User-installed plugins live alongside these conceptually but on disk under
 | Bar           | `omarchy.bar`           | `bar`     | persistent | `bar/Bar.qml`                       |
 | Bar settings  | `omarchy.settings`      | `panel`   | on-demand  | `settings/SettingsPanel.qml`        |
 | Image picker  | `omarchy.image-picker`  | `overlay` | on-demand  | `image-picker/ImagePicker.qml`      |
+| Emoji picker  | `omarchy.emoji-picker`  | `overlay` | on-demand  | `emoji-picker/EmojiPicker.qml`      |
 | Omarchy menu  | `omarchy.menu`          | `menu`    | on-demand  | `menu/Menu.qml`                     |
 | Notifications | `omarchy.notifications` | `service` | persistent | `notifications/Service.qml`         |
 | OSD           | `omarchy.osd`           | `panel`   | persistent | `osd/Osd.qml`                       |
@@ -0,0 +1,326 @@
+import Quickshell
+import Quickshell.Io
+import Quickshell.Wayland
+import QtQuick
+import qs.Commons
+
+Item {
+  id: root
+
+  property string omarchyPath: Quickshell.env("OMARCHY_PATH") || (Quickshell.env("HOME") + "/.local/share/omarchy")
+  property var shell: null
+  property var manifest: null
+  property var pluginRegistry: null
+
+  property bool opened: false
+  property string filterText: ""
+  property int selectedIndex: 0
+  property var emojis: []
+  property var filteredEmojis: []
+
+  property color accent: Color.menu.selected
+  property color background: Color.menu.background
+  property color foreground: Color.menu.text
+  property color border: foreground
+  property int cornerRadius: 0
+  property string fontFamily: Quickshell.env("OMARCHY_MENU_FONT") || "monospace"
+  property string styleFile: Quickshell.env("OMARCHY_MENU_STYLE_FILE") || (Quickshell.env("HOME") + "/.local/state/omarchy/toggles/quickshell-menu.json")
+
+  property int contentMargin: 18
+  property int headerHeight: 34
+  property int contentSpacing: 6
+  property int cardWidth: 400
+  property int cardHeight: 500
+
+  property int cellWidth: 44
+  property int cellHeight: 44
+  property int columns: Math.floor((cardWidth - contentMargin * 2) / cellWidth)
+
+  function open(payloadJson) {
+    root.opened = true
+    root.filterText = ""
+    root.selectedIndex = 0
+    root.rebuildDisplay()
+    Qt.callLater(function() { keyCatcher.forceActiveFocus() })
+  }
+
+  function close() {
+    root.opened = false
+  }
+
+  function toggle() {
+    if (root.opened) root.close()
+    else root.open("{}")
+  }
+
+  function withAlpha(color, alpha) {
+    return Qt.rgba(color.r, color.g, color.b, alpha)
+  }
+
+  function loadEmojis(raw) {
+    try {
+      var data = JSON.parse(raw)
+      root.emojis = data || []
+    } catch (e) {
+      console.warn("Failed to parse emojis.json:", e)
+      root.emojis = []
+    }
+    if (root.opened) root.rebuildDisplay()
+  }
+
+  function rebuildDisplay() {
+    var query = root.filterText.trim().toLowerCase()
+    var out = []
+    for (var i = 0; i < root.emojis.length; i++) {
+      var item = root.emojis[i]
+      if (!query || item.k.indexOf(query) >= 0) {
+        out.push(item)
+        if (out.length >= 200) break // limit to keep it fast
+      }
+    }
+    root.filteredEmojis = out
+
+    displayModel.clear()
+    for (var j = 0; j < out.length; j++) {
+      displayModel.append({ emoji: out[j].e, index: j })
+    }
+
+    if (displayModel.count === 0) selectedIndex = 0
+    else if (selectedIndex >= displayModel.count) selectedIndex = displayModel.count - 1
+    else if (selectedIndex < 0) selectedIndex = 0
+
+    Qt.callLater(function() {
+      if (displayModel.count > 0) resultGrid.positionViewAtIndex(root.selectedIndex, GridView.Contain)
+    })
+  }
+
+  function select(delta) {
+    if (displayModel.count === 0) return
+    selectedIndex = (selectedIndex + delta + displayModel.count) % displayModel.count
+    resultGrid.positionViewAtIndex(selectedIndex, GridView.Contain)
+  }
+
+  function selectRow(delta) {
+    if (displayModel.count === 0) return
+    var newIndex = selectedIndex + delta * columns
+    if (newIndex < 0) newIndex = 0
+    if (newIndex >= displayModel.count) newIndex = displayModel.count - 1
+    selectedIndex = newIndex
+    resultGrid.positionViewAtIndex(selectedIndex, GridView.Contain)
+  }
+
+  function setFilter(nextFilter) {
+    root.filterText = nextFilter
+    root.selectedIndex = 0
+    root.rebuildDisplay()
+  }
+
+  function activateIndex(index) {
+    if (index < 0 || index >= displayModel.count) return
+    var row = displayModel.get(index)
+    root.applySelected(row.emoji)
+  }
+
+  function applySelected(emoji) {
+    if (!emoji) return
+    root.opened = false
+    var escEmoji = emoji.replace(/'/g, "'\\''")
+    Quickshell.execDetached(["bash", "-lc", "wl-copy '" + escEmoji + "'; sleep 0.15; wtype '" + escEmoji + "' 2>/dev/null || true"])
+  }
+
+  function loadStyle(raw) {
+    try {
+      var style = JSON.parse(raw || "{}")
+      root.cornerRadius = Number(style.radius || 0)
+    } catch (e) {}
+  }
+
+  ListModel { id: displayModel }
+
+  IpcHandler {
+    target: "emoji-picker"
+    function summon(): string { root.open("{}"); return "ok" }
+    function hide(): string { root.close(); return "ok" }
+    function toggle(): string { root.toggle(); return "ok" }
+    function ping(): string { return "ok" }
+  }
+
+  FileView {
+    path: root.omarchyPath + "/default/quickshell/omarchy-shell/plugins/emoji-picker/emojis.json"
+    onLoaded: root.loadEmojis(text())
+  }
+
+  FileView {
+    path: root.styleFile
+    watchChanges: true
+    onLoaded: root.loadStyle(text())
+    onFileChanged: { reload(); root.loadStyle(text()) }
+  }
+
+  PanelWindow {
+    id: panel
+    visible: root.opened
+    anchors { top: true; bottom: true; left: true; right: true }
+    color: "transparent"
+    WlrLayershell.namespace: "omarchy-emoji-picker"
+    WlrLayershell.layer: WlrLayer.Overlay
+    WlrLayershell.keyboardFocus: WlrKeyboardFocus.Exclusive
+    exclusionMode: ExclusionMode.Ignore
+
+    Rectangle {
+      anchors.fill: parent
+      color: root.withAlpha(root.background, 0.5)
+    }
+
+    MouseArea {
+      anchors.fill: parent
+      onClicked: root.close()
+    }
+
+    Rectangle {
+      id: card
+      width: root.cardWidth
+      height: root.cardHeight
+      radius: root.cornerRadius
+      anchors.centerIn: parent
+      color: root.background
+      border.color: root.border
+      border.width: 2
+
+      MouseArea { anchors.fill: parent; onClicked: {} }
+
+      Item {
+        id: keyCatcher
+        anchors.fill: parent
+        focus: true
+
+        Keys.priority: Keys.BeforeItem
+        Keys.onPressed: function(event) {
+          if (event.key === Qt.Key_Escape) {
+            if (root.filterText) root.setFilter("")
+            else root.close()
+            event.accepted = true
+          } else if (event.key === Qt.Key_Backspace) {
+            if (root.filterText.length > 0) root.setFilter(root.filterText.slice(0, -1))
+            event.accepted = true
+          } else if (event.key === Qt.Key_Left) {
+            root.select(-1)
+            event.accepted = true
+          } else if (event.key === Qt.Key_Right) {
+            root.select(1)
+            event.accepted = true
+          } else if (event.key === Qt.Key_Up) {
+            root.selectRow(-1)
+            event.accepted = true
+          } else if (event.key === Qt.Key_Down) {
+            root.selectRow(1)
+            event.accepted = true
+          } else if (event.key === Qt.Key_Return || event.key === Qt.Key_Enter) {
+            root.activateIndex(root.selectedIndex)
+            event.accepted = true
+          } else if (event.text && event.text.length === 1 && event.text.charCodeAt(0) >= 32 && event.text.charCodeAt(0) !== 127) {
+            root.setFilter(root.filterText + event.text)
+            event.accepted = true
+          }
+        }
+      }
+
+      Column {
+        anchors.fill: parent
+        anchors.margins: root.contentMargin
+        spacing: root.contentSpacing
+
+        Rectangle {
+          width: parent.width
+          height: root.headerHeight
+          radius: root.cornerRadius
+          color: "transparent"
+          border.width: 0
+
+          Text {
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.verticalCenter: parent.verticalCenter
+            text: root.filterText || "Search emojis…"
+            color: root.foreground
+            opacity: root.filterText ? 1 : 0.58
+            font.family: root.fontFamily
+            font.pixelSize: 16
+            elide: Text.ElideRight
+          }
+        }
+
+        Item {
+          width: parent.width
+          height: parent.height - root.headerHeight - root.contentSpacing
+
+          GridView {
+            id: resultGrid
+            anchors.fill: parent
+            model: displayModel
+            clip: true
+            cellWidth: root.cellWidth
+            cellHeight: root.cellHeight
+            boundsBehavior: Flickable.StopAtBounds
+
+            delegate: Rectangle {
+              required property int index
+              required property string emoji
+
+              width: root.cellWidth
+              height: root.cellHeight
+              radius: root.cornerRadius
+              color: index === root.selectedIndex ? root.withAlpha(root.foreground, 0.08) : root.withAlpha(root.foreground, mouseArea.containsMouse ? 0.045 : 0)
+
+              Text {
+                text: parent.emoji
+                font.family: root.fontFamily
+                font.pixelSize: 24
+                anchors.centerIn: parent
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+              }
+
+              MouseArea {
+                id: mouseArea
+                anchors.fill: parent
+                hoverEnabled: true
+                cursorShape: Qt.PointingHandCursor
+                onClicked: {
+                  root.selectedIndex = index
+                  root.activateIndex(index)
+                }
+              }
+            }
+          }
+
+          Column {
+            anchors.centerIn: parent
+            spacing: 8
+            visible: displayModel.count === 0
+
+            Text {
+              text: "󰈉"
+              color: root.accent
+              opacity: 0.8
+              font.family: root.fontFamily
+              font.pixelSize: 28
+              horizontalAlignment: Text.AlignHCenter
+              width: parent.width
+            }
+
+            Text {
+              text: "No matches for “" + root.filterText + "”"
+              color: root.foreground
+              opacity: 0.7
+              font.family: root.fontFamily
+              font.pixelSize: 14
+              horizontalAlignment: Text.AlignHCenter
+              width: parent.width
+            }
+          }
+        }
+      }
+    }
+  }
+}
@@ -0,0 +1,14 @@
+{
+  "schemaVersion": 1,
+  "id": "omarchy.emoji-picker",
+  "name": "Emoji picker",
+  "version": "1.0.0",
+  "author": "Omarchy",
+  "description": "An emoji picker to copy or type emojis",
+  "kinds": ["overlay"],
+  "activation": "on-demand",
+  "keepLoaded": true,
+  "entryPoints": {
+    "overlay": "EmojiPicker.qml"
+  }
+}
@@ -0,0 +1,9 @@
+echo "Migrate emoji picker shortcut to use Quickshell emoji picker"
+
+if [[ -f ~/.config/hypr/bindings/utilities.lua ]]; then
+  sed -i 's/omarchy-launch-walker -m symbols/omarchy-shell-ipc shell toggle omarchy.emoji-picker "{}"/' ~/.config/hypr/bindings/utilities.lua
+fi
+
+if [[ -f ~/.config/hypr/bindings.lua ]]; then
+  sed -i 's/omarchy-launch-walker -m symbols/omarchy-shell-ipc shell toggle omarchy.emoji-picker "{}"/' ~/.config/hypr/bindings.lua
+fi