@@ -25,6 +25,8 @@ tokio = { version = "1", default-features = false, features = [
   "sync",
   "time",
 ] }
+# The emoji picker's emoji, names, shortcodes, and skin tones.
+emojis = "0.9"
 # Fetches avatars and the images in issues and comments, over rustls.
 ureq = { version = "3", default-features = false, features = ["rustls"] }
 # The login token goes in the Keychain, the Credential Manager, or the
 
@@ -45,7 +45,8 @@ cat > "$out/script.json" <<EOF
   {"t": 12.2, "type": "type", "text": "$body"},
   {"t": 14.0, "type": "tap", "key": "comment-button"},
   {"t": 15.0, "type": "tap", "key": "add-reaction-$issue-trigger"},
-  {"t": 15.5, "type": "tap", "key": "add-reaction-$issue-item6"},
+  {"t": 15.3, "type": "type", "text": "rocket"},
+  {"t": 15.8, "type": "tap", "key": "emoji-🚀"},
   {"t": 16.5, "type": "tap", "key": "labels-trigger"},
   {"t": 17.0, "type": "tap", "key": "labels-item2"},
   {"t": 17.5, "type": "key", "name": "Escape"},
 
@@ -20,14 +20,14 @@ use zbugs_model::args::{
     EditCommentArgs, IdField, IssueDetailArgs, IssueKey, IssueLabelArgs, IssueListCountArgs,
     IssueListV2Args, LabelsOrderByNameArgs, ListContextParams, NotificationType,
     NotificationUpdateArgs, PageDirection, ProjectArgs, RemoveLabelArgs, SortDirection, SortField,
-    UpdateIssueArgs, UsersFilter, UsersForProjectArgs, ViewStateArgs,
+    UpdateIssueArgs, UserPrefArgs, UsersFilter, UsersForProjectArgs, ViewStateArgs,
 };
 use zbugs_model::mutators::{
     ADD_COMMENT, ADD_EMOJI_TO_COMMENT, ADD_EMOJI_TO_ISSUE, ADD_LABEL, CREATE_AND_ADD_LABEL,
     CREATE_ISSUE, DELETE_ISSUE, DELETE_ISSUES, EDIT_COMMENT, REMOVE_COMMENT, REMOVE_EMOJI,
-    REMOVE_LABEL, SET_VIEW_STATE, UPDATE_ISSUE, UPDATE_NOTIFICATION,
+    REMOVE_LABEL, SET_USER_PREF, SET_VIEW_STATE, UPDATE_ISSUE, UPDATE_NOTIFICATION,
 };
-use zbugs_model::schema::{Comment, Emoji, Issue, IssueVisibility, Label, Project, User};
+use zbugs_model::schema::{Comment, Emoji, Issue, IssueVisibility, Label, Project, User, UserPref};
 use zbugs_model::{AuthData, Context, MutateRequest, ZERO_PROJECT_NAME, make_id, queries};
 use zero_client::client::ConnectionState;
 use zero_client::ivm::ResultType;
@@ -81,19 +81,6 @@ pub struct Filter {
     pub labels: Vec<String>,
 }
 
-/// The reactions the emoji menu offers, with their CLDR names, which the
-/// web app shows on hover.
-pub const REACTIONS: [(&str, &str); 8] = [
-    ("👍", "thumbs up"),
-    ("👎", "thumbs down"),
-    ("😄", "grinning face with smiling eyes"),
-    ("🎉", "party popper"),
-    ("😕", "confused face"),
-    ("❤️", "red heart"),
-    ("🚀", "rocket"),
-    ("👀", "eyes"),
-];
-
 /// A dropdown on the issue page.
 #[derive(Clone, Debug, PartialEq, Eq)]
 pub enum Picker {
@@ -166,6 +153,10 @@ pub struct App {
     pub comments: Vec<Comment>,
     comments_limit: i64,
     pub comment: TextEdit,
+    /// The emoji picker's search, and the skin tone it shows, as the web
+    /// picker keeps it in the `emojiSkinTone` user pref (0 is the default).
+    pub emoji_search: TextEdit,
+    pub skin_tone: u8,
     /// The comment being edited in place, and its text.
     pub editing_comment: Option<String>,
     pub comment_edit: TextEdit,
@@ -191,6 +182,9 @@ pub struct App {
     pub github_login: Option<login::LoopbackLogin>,
 }
 
+/// The user pref the web app keeps the emoji picker's skin tone in.
+const SKIN_TONE_PREF: &str = "emojiSkinTone";
+
 /// The choices of the issue page's Visibility and Notifications menus.
 pub const VISIBILITY: [&str; 2] = ["Public", "Internal"];
 pub const NOTIFICATIONS: [&str; 2] = ["Subscribed", "Unsubscribed"];
@@ -277,6 +271,8 @@ impl App {
             comments: Vec::new(),
             comments_limit: COMMENTS_PAGE,
             comment: TextEdit::new(""),
+            emoji_search: TextEdit::new(""),
+            skin_tone: 0,
             editing_comment: None,
             comment_edit: TextEdit::new(""),
             confirm: None,
@@ -349,8 +345,17 @@ impl App {
                 move |auth: &Context| queries::USER.call(&sub, auth.as_ref()),
                 |s, me, _, _| s.me = me,
             );
+            self.sync.watch(
+                "skin-tone",
+                |auth: &Context| queries::USER_PREF.call(&SKIN_TONE_PREF.to_owned(), auth.as_ref()),
+                |s, pref: Option<UserPref>, _, _| {
+                    s.skin_tone = pref.and_then(|p| p.value.parse().ok()).unwrap_or(0);
+                },
+            );
         } else {
             self.sync.unwatch("me");
+            self.sync.unwatch("skin-tone");
+            self.skin_tone = 0;
         }
         self.watch_list();
         if let Some(id) = self.selected.clone() {
@@ -828,7 +833,22 @@ impl App {
         self.mutate(UPDATE_NOTIFICATION.with(&args));
     }
 
+    /// Shows emoji in this skin tone (0 to 5, light to dark after the
+    /// default), and keeps it for the user, as the web picker does.
+    pub fn set_skin_tone(&mut self, tone: u8) {
+        self.skin_tone = tone;
+        let args = UserPrefArgs {
+            key: SKIN_TONE_PREF.to_owned(),
+            value: tone.to_string(),
+        };
+        self.mutate(SET_USER_PREF.with(&args));
+    }
+
     pub fn toggle_picker(&mut self, picker: Picker) {
+        if matches!(picker, Picker::Emoji(_)) {
+            self.emoji_search = TextEdit::new("");
+            self.emoji_search.focused = true;
+        }
         self.picker = (self.picker.as_ref() != Some(&picker)).then_some(picker);
     }
 
@@ -889,10 +909,9 @@ impl App {
             self.mutate(REMOVE_EMOJI.with(&id));
             return;
         }
-        let annotation = REACTIONS
-            .iter()
-            .find(|(v, _)| *v == value)
-            .map(|(_, a)| *a)
+        // Its CLDR name, as the web picker sends it.
+        let annotation = emojis::get(value)
+            .map(emojis::Emoji::name)
             .or_else(|| {
                 let e = self.reactions(subject_id).iter().find(|e| e.value == value);
                 e.map(|e| e.annotation.as_str())
 
@@ -6,16 +6,16 @@ use std::sync::OnceLock;
 
 use rune::{Cx, El, GrowthSpec, ScrollSpec, col, el, row, text};
 use rune_kit::{
-    Button, ButtonVariant, Checkbox, Dialog, Kit, Markdown, Menu, MenuItem, SegmentedControl,
-    Select, TextArea, TextInput,
+    Button, ButtonVariant, Checkbox, Dialog, Kit, Markdown, Menu, MenuItem, Popover,
+    SegmentedControl, Select, TextArea, TextInput,
 };
 use zbugs_model::args::{SortDirection, SortField};
 use zbugs_model::schema::{Comment, Issue, IssueVisibility, Label, User};
 use zero_client::client::ConnectionState;
 use zero_client::ivm::ResultType;
 
 use crate::images;
-use crate::{App, Confirm, NOTIFICATIONS, Picker, REACTIONS, Sheet, Status, VISIBILITY};
+use crate::{App, Confirm, NOTIFICATIONS, Picker, Sheet, Status, VISIBILITY};
 
 /// The rows' estimated height, for the virtual list.
 const ROW: f32 = 58.0;
@@ -93,8 +93,8 @@ fn sidebar(s: &App, k: &Kit, layer: &mut Vec<El>) -> El {
                     s.filter.status = Status::ALL[i];
                     s.list_changed();
                 })
+                .width(None)
                 .build(k)
-                .w_full()
                 .key("status"),
         )
         .child(label_text(k, "Sort"))
@@ -111,8 +111,8 @@ fn sidebar(s: &App, k: &Kit, layer: &mut Vec<El>) -> El {
                 };
                 s.list_changed();
             })
+            .width(None)
             .build(k)
-            .w_full()
             .key("sort"),
         )
         .child(label_text(k, "Order"))
@@ -129,8 +129,8 @@ fn sidebar(s: &App, k: &Kit, layer: &mut Vec<El>) -> El {
                 };
                 s.list_changed();
             })
+            .width(None)
             .build(k)
-            .w_full()
             .key("order"),
         );
     // Shortcuts for the creator and assignee filters, by the user's login,
@@ -1012,26 +1012,108 @@ fn reactions(s: &App, subject_id: &str, k: &Kit, layer: &mut Vec<El>) -> El {
     }
     let picker = Picker::Emoji(subject_id.to_owned());
     let open = s.picker.as_ref() == Some(&picker);
-    let mut menu = Menu::new(format!("add-reaction-{subject_id}"))
+    let mut popover = Popover::new(format!("add-reaction-{subject_id}"))
         .trigger(
             Button::new("+ 🙂")
                 .variant(ButtonVariant::Ghost)
-                .expanded(open)
                 .on_press(move |s: &mut App| s.toggle_picker(picker.clone()))
                 .build(k)
                 .key("add-reaction"),
         )
-        .min_width(280.0)
+        .label("Emoji")
         .open(open)
         .on_close(|s: &mut App| s.picker = None);
-    for (value, name) in REACTIONS {
-        let subject = subject_id.to_owned();
-        menu = menu.item(
-            MenuItem::new(format!("{value}  {name}"))
-                .on_select(move |s: &mut App| s.toggle_reaction(&subject, value)),
+    if open {
+        popover = popover.child(emoji_picker(s, subject_id, k));
+    }
+    r.child(popover.build(k, layer))
+}
+
+/// The skin tones the picker offers, as the web picker's: the default,
+/// then light to dark.
+const SKIN_TONES: [emojis::SkinTone; 6] = [
+    emojis::SkinTone::Default,
+    emojis::SkinTone::Light,
+    emojis::SkinTone::MediumLight,
+    emojis::SkinTone::Medium,
+    emojis::SkinTone::MediumDark,
+    emojis::SkinTone::Dark,
+];
+
+/// The most a picker shows at once: the search narrows the rest.
+const EMOJI_SHOWN: usize = 96;
+
+/// The newest emoji the system fonts draw (Apple Color Emoji and Noto Color
+/// Emoji in 2026): later ones would show as empty boxes.
+const EMOJI_NEWEST: emojis::EmojiVersion = emojis::EmojiVersion::new(16, 0);
+
+/// Every emoji, searchable by name and GitHub shortcode, in the user's skin
+/// tone, as the web app's emoji picker.
+fn emoji_picker(s: &App, subject_id: &str, k: &Kit) -> El {
+    let query = s.emoji_search.text.trim().to_lowercase();
+    let tone = SKIN_TONES[usize::from(s.skin_tone).min(SKIN_TONES.len() - 1)];
+    let hands: Vec<String> = SKIN_TONES
+        .iter()
+        .map(|t| {
+            emojis::get("✋")
+                .and_then(|e| e.with_skin_tone(*t))
+                .map_or_else(String::new, |e| e.as_str().to_owned())
+        })
+        .collect();
+    let hands: Vec<&str> = hands.iter().map(String::as_str).collect();
+    let matches = emojis::iter()
+        .filter(|e| {
+            e.emoji_version() <= EMOJI_NEWEST
+                && (query.is_empty()
+                    || e.name().contains(&query)
+                    || e.shortcodes().any(|c| c.contains(&query)))
+        })
+        .take(EMOJI_SHOWN);
+    let mut grid = row().key("emoji-grid").w_full().flex_wrap();
+    for e in matches {
+        let e = e.with_skin_tone(tone).unwrap_or(e);
+        let (subject, value) = (subject_id.to_owned(), e.as_str());
+        grid = grid.child(
+            text(value)
+                .key(format!("emoji-{value}"))
+                .role("button")
+                .label(e.name())
+                .help(e.name())
+                .font(k.ty.body)
+                .w(32.0)
+                .h(32.0)
+                .center()
+                .radius(6.0)
+                .on_press(move |s: &mut App| s.toggle_reaction(&subject, value)),
         );
     }
-    r.child(menu.build(k, layer))
+    col()
+        .w(288.0)
+        .gap(8.0)
+        .child(
+            TextInput::new(&s.emoji_search)
+                .placeholder("Search")
+                .on_edit(|s: &mut App| &mut s.emoji_search)
+                .build(k)
+                .key("emoji-search"),
+        )
+        .child(
+            SegmentedControl::new(&hands, Some(usize::from(s.skin_tone)))
+                .on_pick(|s: &mut App, i, _| s.set_skin_tone(i as u8))
+                .width(None)
+                .build(k)
+                .key("skin-tone"),
+        )
+        .child(
+            col()
+                .key("emoji-scroll")
+                .w_full()
+                .h(232.0)
+                .scroll(ScrollSpec {
+                    stick_bottom: false,
+                })
+                .child(grid),
+        )
 }
 
 fn composer(s: &App, k: &Kit) -> El {