From 4320616073dac498d6efa0f307e229f3676f3848 Mon Sep 17 00:00:00 2001
From: Flemmli97 <34157027+Flemmli97@users.noreply.github.com>
Date: Fri, 27 Oct 2023 00:00:53 +0200
Subject: [PATCH] fix(emojis): Hide unsupported emojis and add missing food
 category (#1360)

---
 native_extensions/emoji_selector/src/lib.rs   | 47 +++++++++----------
 .../emoji_selector/src/style.css              |  3 +-
 2 files changed, 24 insertions(+), 26 deletions(-)

diff --git a/native_extensions/emoji_selector/src/lib.rs b/native_extensions/emoji_selector/src/lib.rs
index 023875a61c5..789e4493aa2 100644
--- a/native_extensions/emoji_selector/src/lib.rs
+++ b/native_extensions/emoji_selector/src/lib.rs
@@ -4,7 +4,7 @@ use common::{
     state::{scope_ids::ScopeIds, ui::EmojiDestination, Action, State},
 };
 use dioxus::prelude::*;
-use emojis::Group;
+use emojis::{Group, UnicodeVersion};
 use extensions::{export_extension, Details, Extension, Location, Meta, Type};
 use futures::StreamExt;
 use kit::{
@@ -35,6 +35,11 @@ fn group_to_str(group: emojis::Group) -> String {
     }
 }
 
+fn is_supported(unicode_version: UnicodeVersion) -> bool {
+    let (major, minor, _) = std::char::UNICODE_VERSION;
+    unicode_version.major() <= major as u32 && unicode_version.minor() <= minor as u32
+}
+
 #[component(no_case_check)]
 fn build_nav(cx: Scope<'_>) -> Element<'_> {
     let routes = vec![
@@ -62,6 +67,14 @@ fn build_nav(cx: Scope<'_>) -> Element<'_> {
             loading: None,
             ..Route::default()
         },
+        Route {
+            to: "Food & Drink",
+            name: group_to_str(Group::FoodAndDrink),
+            icon: Icon::Cake,
+            with_badge: None,
+            loading: None,
+            ..Route::default()
+        },
         Route {
             to: "Travel & Places",
             name: group_to_str(Group::TravelAndPlaces),
@@ -81,7 +94,7 @@ fn build_nav(cx: Scope<'_>) -> Element<'_> {
         Route {
             to: "Objects",
             name: group_to_str(Group::Objects),
-            icon: Icon::Cake,
+            icon: Icon::Clock,
             with_badge: None,
             loading: None,
             ..Route::default()
@@ -133,9 +146,7 @@ fn render_selector<'a>(
     nav: Element<'a>,
 ) -> Element<'a> {
     let state = use_shared_state::<State>(cx)?;
-    #[cfg(not(target_os = "macos"))]
     let mouse_over_emoji_selector = use_ref(cx, || false);
-    #[cfg(not(target_os = "macos"))]
     let eval = use_eval(cx);
 
     let focus_script = r#"
@@ -175,17 +186,11 @@ fn render_selector<'a>(
     cx.render(rsx! (
             div {
                 onmouseenter: |_| {
-                    #[cfg(not(target_os = "macos"))]
-                    {
-                        *mouse_over_emoji_selector.write_silent() = true;
-                    }
+                    *mouse_over_emoji_selector.write_silent() = true;
                 },
                 onmouseleave: |_| {
-                    #[cfg(not(target_os = "macos"))]
-                    {
-                        *mouse_over_emoji_selector.write_silent() = false;
-                        let _ = eval(focus_script);
-                    }
+                    *mouse_over_emoji_selector.write_silent() = false;
+                    let _ = eval(focus_script);
                 },
                 id: "emoji_selector",
                 aria_label: "emoji-selector",
@@ -195,17 +200,8 @@ fn render_selector<'a>(
                     state.write().mutate(Action::SetEmojiDestination(
                         Some(common::state::ui::EmojiDestination::Chatbar),
                     ));
-                    #[cfg(target_os = "macos")] 
-                    {
-                        if !*mouse_over_emoji_button.read() {
-                            state.write().mutate(Action::SetEmojiPickerVisible(false));
-                        }
-                    }
-                    #[cfg(not(target_os = "macos"))]
-                    {
-                        if !*mouse_over_emoji_button.read() && !*mouse_over_emoji_selector.read() {
-                            state.write().mutate(Action::SetEmojiPickerVisible(false));
-                        }
+                    if !*mouse_over_emoji_button.read() && !*mouse_over_emoji_selector.read() {
+                        state.write().mutate(Action::SetEmojiPickerVisible(false));
                     }
                 },
                 div {
@@ -222,7 +218,7 @@ fn render_selector<'a>(
                             div {
                                 class: "emojis-container",
                                 aria_label: "emojis-container",
-                                group.emojis().map(|emoji| {
+                                group.emojis().filter(|emoji|is_supported(emoji.unicode_version())).map(|emoji| {
                                     rsx!(
                                         div {
                                             aria_label: emoji.as_str(),
@@ -274,6 +270,7 @@ fn render_1(cx: Scope, _unused: bool) -> Element {
     let state = use_shared_state::<State>(cx)?;
     let mouse_over_emoji_button = use_ref(cx, || false);
     let visible = state.read().ui.emoji_picker_visible;
+    log::debug!("vis {}", visible);
 
     use_effect(cx, (), |_| {
         to_owned![state];
diff --git a/native_extensions/emoji_selector/src/style.css b/native_extensions/emoji_selector/src/style.css
index 07a0451d50b..aa41bd1e515 100644
--- a/native_extensions/emoji_selector/src/style.css
+++ b/native_extensions/emoji_selector/src/style.css
@@ -20,7 +20,8 @@
 
 #emoji_selector .emojis-container {
   width: calc(100% - var(--gap));
-  display: inline-flex;
+  display: grid;
+  grid-template-columns: repeat(7, 0fr);
   flex-wrap: wrap;
   margin-bottom: var(--gap);
   gap: var(--gap);