[WEB-393] feat: new emoji picker using emoji-picker-react (#3868)

* chore: emoji-picker-react package added

* chore: emoji and emoji picker component added

* chore: emoji picker custom style added

* chore: migration of the emoji's

* chore: migration changes

* chore: project logo prop

* chore: added logo props in the serializer

* chore: removed unused keys

* chore: implement emoji picker throughout the web app

* style: emoji icon picker

* chore: update project logo renderer in the space app

* chore: migrations fixes

---------

Co-authored-by: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Co-authored-by: NarayanBavisetti <narayan3119@gmail.com>

space/components/common/index.ts

@@ -1 +1,2 @@
 export * from "./latest-feature-block";
+export * from "./project-logo";

space/components/common/project-logo.tsx

@@ -0,0 +1,34 @@
+// helpers
+import { cn } from "helpers/common.helper";
+// types
+import { TProjectLogoProps } from "@plane/types";
+
+type Props = {
+  className?: string;
+  logo: TProjectLogoProps;
+};
+
+export const ProjectLogo: React.FC<Props> = (props) => {
+  const { className, logo } = props;
+
+  if (logo.in_use === "icon" && logo.icon)
+    return (
+      <span
+        style={{
+          color: logo.icon.color,
+        }}
+        className={cn("material-symbols-rounded text-base", className)}
+      >
+        {logo.icon.name}
+      </span>
+    );
+
+  if (logo.in_use === "emoji" && logo.emoji)
+    return (
+      <span className={cn("text-base", className)}>
+        {logo.emoji.value?.split("-").map((emoji) => String.fromCodePoint(parseInt(emoji, 10)))}
+      </span>
+    );
+
+  return <span />;
+};

space/components/issues/navbar/index.tsx

@@ -1,15 +1,12 @@
 import { useEffect } from "react";
-
 import Link from "next/link";
 import { useRouter } from "next/router";
-
-// mobx
 import { observer } from "mobx-react-lite";
 // components
-// import { NavbarSearch } from "./search";
 import { NavbarIssueBoardView } from "./issue-board-view";
 import { NavbarTheme } from "./theme";
 import { IssueFiltersDropdown } from "components/issues/filters";
+import { ProjectLogo } from "components/common";
 // ui
 import { Avatar, Button } from "@plane/ui";
 import { Briefcase } from "lucide-react";
@@ -19,18 +16,6 @@ import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
 import { TIssueBoardKeys } from "types/issue";
 
-const renderEmoji = (emoji: string | { name: string; color: string }) => {
-  if (!emoji) return;
-
-  if (typeof emoji === "object")
-    return (
-      <span style={{ color: emoji.color }} className="material-symbols-rounded text-lg">
-        {emoji.name}
-      </span>
-    );
-  else return isNaN(parseInt(emoji)) ? emoji : String.fromCodePoint(parseInt(emoji));
-};
-
 const IssueNavbar = observer(() => {
   const {
     project: projectStore,
@@ -123,27 +108,15 @@ const IssueNavbar = observer(() => {
     <div className="relative flex w-full items-center gap-4 px-5">
       {/* project detail */}
       <div className="flex flex-shrink-0 items-center gap-2">
-        <div className="flex h-4 w-4 items-center justify-center">
-          {projectStore.project ? (
-            projectStore.project?.emoji ? (
-              <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
-                {renderEmoji(projectStore.project.emoji)}
-              </span>
-            ) : projectStore.project?.icon_prop ? (
-              <div className="grid h-7 w-7 flex-shrink-0 place-items-center">
-                {renderEmoji(projectStore.project.icon_prop)}
-              </div>
-            ) : (
-              <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
-                {projectStore.project?.name.charAt(0)}
-              </span>
-            )
-          ) : (
-            <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
-              <Briefcase className="h-4 w-4" />
-            </span>
-          )}
-        </div>
+        {projectStore.project ? (
+          <span className="h-7 w-7 flex-shrink-0 grid place-items-center">
+            <ProjectLogo logo={projectStore.project.logo_props} className="text-lg" />
+          </span>
+        ) : (
+          <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
+            <Briefcase className="h-4 w-4" />
+          </span>
+        )}
         <div className="line-clamp-1 max-w-[300px] overflow-hidden text-lg font-medium">
           {projectStore?.project?.name || `...`}
         </div>

space/types/project.ts

@@ -1,3 +1,5 @@
+import { TProjectLogoProps } from "@plane/types";
+
 export interface IWorkspace {
   id: string;
   name: string;
@@ -9,10 +11,8 @@ export interface IProject {
   identifier: string;
   name: string;
   description: string;
-  icon: string;
   cover_image: string | null;
-  icon_prop: string | null;
-  emoji: string | null;
+  logo_props: TProjectLogoProps;
 }
 
 export interface IProjectSettings {