Merge pull request #3606 from Lenghak/main

feat(emoji-picker): adjust ui emoji picker

Author: zbeyens

apps/www/content/docs/components/changelog.mdx

@@ -11,6 +11,10 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver
 
 ## October 2024 #15
 
+### October 4 #15.2
+
+- feat `emoji-picker`: adjust ui emoji picker
+
 ### October 1 #15.1
 
 - New `block-selection.tsx` component for visual selection feedback

apps/www/src/registry/default/plate-ui/code-line-element.tsx

@@ -3,6 +3,7 @@
 import React from 'react';
 
 import { withRef } from '@udecode/cn';
+
 import { PlateElement } from './plate-element';
 
 export const CodeLineElement = withRef<typeof PlateElement>((props, ref) => (

apps/www/src/registry/default/plate-ui/emoji-icons.tsx

@@ -6,19 +6,22 @@ import {
   AppleIcon,
   ClockIcon,
   CompassIcon,
-  DeleteIcon,
   FlagIcon,
   LeafIcon,
   LightbulbIcon,
   MusicIcon,
   SearchIcon,
   SmileIcon,
   StarIcon,
+  XIcon,
 } from 'lucide-react';
 
 export const emojiCategoryIcons: Record<
   EmojiCategoryList,
-  { outline: React.ReactElement; solid: React.ReactElement }
+  {
+    outline: React.ReactElement;
+    solid: React.ReactElement; // Needed to add another solid variant - outline will be used for now
+  }
 > = {
   activity: {
     outline: (
@@ -38,7 +41,6 @@ export const emojiCategoryIcons: Record<
         <path d="M21.9 10.6a10.1 10.1 0 0 0-11.3 11.3" />
       </svg>
     ),
-    // Needed to add another solid variant - outline will be used for now
     solid: (
       <svg
         className="size-full"
@@ -60,61 +62,51 @@ export const emojiCategoryIcons: Record<
 
   custom: {
     outline: <StarIcon className="size-full" />,
-    // Needed to add another solid variant - outline will be used for now
     solid: <StarIcon className="size-full" />,
   },
 
   flags: {
     outline: <FlagIcon className="size-full" />,
-    // Needed to add another solid variant - outline will be used for now
     solid: <FlagIcon className="size-full" />,
   },
 
   foods: {
     outline: <AppleIcon className="size-full" />,
-    // Needed to add another solid variant - outline will be used for now
     solid: <AppleIcon className="size-full" />,
   },
 
   frequent: {
     outline: <ClockIcon className="size-full" />,
-    // Needed to add another solid variant - outline will be used for now
     solid: <ClockIcon className="size-full" />,
   },
 
   nature: {
     outline: <LeafIcon className="size-full" />,
-    // Needed to add another solid variant - outline will be used for now
     solid: <LeafIcon className="size-full" />,
   },
 
   objects: {
     outline: <LightbulbIcon className="size-full" />,
-    // Needed to add another solid variant - outline will be used for now
     solid: <LightbulbIcon className="size-full" />,
   },
 
   people: {
     outline: <SmileIcon className="size-full" />,
-    // Needed to add another solid variant - outline will be used for now
     solid: <SmileIcon className="size-full" />,
   },
 
   places: {
     outline: <CompassIcon className="size-full" />,
-    // Needed to add another solid variant - outline will be used for now
     solid: <CompassIcon className="size-full" />,
   },
 
   symbols: {
     outline: <MusicIcon className="size-full" />,
-    // Needed to add another solid variant - outline will be used for now
     solid: <MusicIcon className="size-full" />,
   },
 };
 
 export const emojiSearchIcons = {
-  delete: <DeleteIcon className="size-4" />,
-
-  loupe: <SearchIcon className="size-4" />,
+  delete: <XIcon className="size-4 text-current" />,
+  loupe: <SearchIcon className="size-4 text-current" />,
 };

apps/www/src/registry/default/plate-ui/emoji-input-element.tsx

@@ -1,7 +1,6 @@
 import React, { useMemo, useState } from 'react';
 
 import { withRef } from '@udecode/cn';
-import { PlateElement } from './plate-element';
 import { EmojiInlineIndexSearch, insertEmoji } from '@udecode/plate-emoji';
 
 import { useDebounce } from '@/registry/default/hooks/use-debounce';
@@ -13,6 +12,7 @@ import {
   InlineComboboxInput,
   InlineComboboxItem,
 } from './inline-combobox';
+import { PlateElement } from './plate-element';
 
 export const EmojiInputElement = withRef<typeof PlateElement>(
   ({ className, ...props }, ref) => {

apps/www/src/registry/default/plate-ui/emoji-picker-content.tsx

@@ -109,7 +109,7 @@ export function EmojiPickerContent({
             style={{ width: getRowWidth }}
             data-id={categoryId}
           >
-            <div className="sticky -top-px z-[1] bg-card/90 p-1 py-2 text-sm font-semibold backdrop-blur-sm">
+            <div className="sticky -top-px z-[1] bg-popover/90 p-1 py-2 text-sm font-semibold backdrop-blur-sm">
               {i18n.categories[categoryId]}
             </div>
             <div
@@ -145,7 +145,7 @@ export function EmojiPickerContent({
   const SearchList = useCallback(() => {
     return (
       <div style={{ width: getRowWidth }} data-id="search">
-        <div className="sticky -top-px z-[1] bg-card/90 p-1 py-2 font-semibold backdrop-blur-sm">
+        <div className="sticky -top-px z-[1] bg-popover/90 p-1 py-2 text-sm font-semibold text-card-foreground backdrop-blur-sm">
           {i18n.searchResult}
         </div>
         <div className="relative flex flex-wrap">
@@ -174,12 +174,11 @@ export function EmojiPickerContent({
     <div
       ref={refs.current.contentRoot}
       className={cn(
-        'h-full min-h-[50%] overflow-y-auto overflow-x-hidden px-3',
+        'h-full min-h-[50%] overflow-y-auto overflow-x-hidden px-2',
         '[&::-webkit-scrollbar]:w-4',
         '[&::-webkit-scrollbar-button]:hidden [&::-webkit-scrollbar-button]:size-0',
-        ':hover:[&::-webkit-scrollbar-thumb]:bg-[#f3f4f6]',
-        '[&::-webkit-scrollbar-thumb]:min-h-[65px] [&::-webkit-scrollbar-thumb]:rounded-2xl [&::-webkit-scrollbar-thumb]:border-4 [&::-webkit-scrollbar-thumb]:border-white',
-        '[&::-webkit-scrollbar-track]:border-0'
+        '[&::-webkit-scrollbar-thumb]:min-h-11 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-muted [&::-webkit-scrollbar-thumb]:hover:bg-muted-foreground/25',
+        '[&::-webkit-scrollbar-thumb]:border-4 [&::-webkit-scrollbar-thumb]:border-solid [&::-webkit-scrollbar-thumb]:border-popover [&::-webkit-scrollbar-thumb]:bg-clip-padding'
       )}
       data-id="scroll"
     >

apps/www/src/registry/default/plate-ui/emoji-picker-navigation.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useMemo } from 'react';
 
 import type { EmojiCategoryList } from '@udecode/plate-emoji';
 import type {
@@ -9,6 +9,12 @@ import type {
 import { cn } from '@udecode/cn';
 
 import { Button } from './button';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from './tooltip';
 
 export type EmojiPickerNavigationProps = {
   onClick: (id: EmojiCategoryList) => void;
@@ -41,44 +47,60 @@ export function EmojiPickerNavigation({
   icons,
   onClick,
 }: EmojiPickerNavigationProps) {
-  const { position, width } = getBarProperty(emojiLibrary, focusedCategory);
+  const { position, width } = useMemo(
+    () => getBarProperty(emojiLibrary, focusedCategory),
+    [emojiLibrary, focusedCategory]
+  );
 
   return (
-    <nav
-      id="emoji-nav"
-      className="mb-2.5 border-0 border-b border-solid border-b-border p-3"
-    >
-      <div className="relative flex items-center">
-        {emojiLibrary
-          .getGrid()
-          .sections()
-          .map(({ id }) => (
-            <Button
-              key={id}
-              size="icon"
-              variant="ghost"
-              className={cn(
-                'size-6 grow fill-current text-muted-foreground hover:bg-transparent hover:text-foreground',
-                id === focusedCategory &&
-                  'pointer-events-none fill-current text-primary'
-              )}
-              onClick={() => onClick(id)}
-              title={i18n.categories[id]}
-              aria-label={i18n.categories[id]}
-              type="button"
-            >
-              <span className="size-5">{icons.categories[id].outline}</span>
-            </Button>
-          ))}
-        <div
-          className="absolute -bottom-3 left-0 h-0.5 w-full rounded-t-lg bg-primary opacity-100 transition-transform duration-200"
-          style={{
-            transform: `translateX(${position}%)`,
-            visibility: `${focusedCategory ? 'visible' : 'hidden'}`,
-            width: `${width}%`,
-          }}
-        />
-      </div>
-    </nav>
+    <TooltipProvider delayDuration={500}>
+      <nav
+        id="emoji-nav"
+        className="mb-2.5 border-0 border-b border-solid border-b-border p-1.5"
+      >
+        <div className="relative flex items-center justify-evenly">
+          {emojiLibrary
+            .getGrid()
+            .sections()
+            .map(({ id }) => (
+              <Tooltip key={id}>
+                <TooltipTrigger asChild>
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    className={cn(
+                      'h-fit rounded-full fill-current p-1.5 text-muted-foreground hover:bg-muted hover:text-muted-foreground',
+                      id === focusedCategory &&
+                        'pointer-events-none bg-accent fill-current text-accent-foreground'
+                    )}
+                    onClick={() => {
+                      onClick(id);
+                    }}
+                    aria-label={i18n.categories[id]}
+                    type="button"
+                  >
+                    <span className="size-5">
+                      {icons.categories[id].outline}
+                    </span>
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent side="bottom">
+                  {i18n.categories[id]}
+                </TooltipContent>
+              </Tooltip>
+            ))}
+          <div
+            className={cn(
+              'absolute -bottom-1.5 left-0 h-0.5 w-full rounded-t-lg bg-accent opacity-100 transition-transform duration-200'
+            )}
+            style={{
+              transform: `translateX(${position}%)`,
+              visibility: `${focusedCategory ? 'visible' : 'hidden'}`,
+              width: `${width}%`,
+            }}
+          />
+        </div>
+      </nav>
+    </TooltipProvider>
   );
 }

apps/www/src/registry/default/plate-ui/emoji-picker-preview.tsx

@@ -13,35 +13,35 @@ export type PickAnEmojiPreviewProps = NoEmojiPreviewProps;
 
 function EmojiPreview({ emoji }: EmojiPreviewProps) {
   return (
-    <div className="flex h-20 items-center border-t border-muted p-2">
+    <div className="flex h-14 max-h-14 min-h-14 items-center border-t border-muted p-2">
       <div className="flex items-center justify-center text-2xl">
         {emoji?.skins[0].native}
       </div>
       <div className="overflow-hidden pl-2">
-        <div className="truncate text-sm">{emoji?.name}</div>
-        <div className="truncate text-xs">{`:${emoji?.id}:`}</div>
+        <div className="truncate text-sm font-semibold">{emoji?.name}</div>
+        <div className="truncate text-sm">{`:${emoji?.id}:`}</div>
       </div>
     </div>
   );
 }
 
 function NoEmoji({ i18n }: NoEmojiPreviewProps) {
   return (
-    <div className="flex h-20 items-center border-t border-muted p-2">
+    <div className="flex h-14 max-h-14 min-h-14 items-center border-t border-muted p-2">
       <div className="flex items-center justify-center text-2xl">😢</div>
       <div className="overflow-hidden pl-2">
-        <div className="truncate text-sm font-semibold text-primary">
+        <div className="truncate text-sm font-bold">
           {i18n.searchNoResultsTitle}
         </div>
-        <div className="truncate text-xs">{i18n.searchNoResultsSubtitle}</div>
+        <div className="truncate text-sm">{i18n.searchNoResultsSubtitle}</div>
       </div>
     </div>
   );
 }
 
 function PickAnEmoji({ i18n }: PickAnEmojiPreviewProps) {
   return (
-    <div className="flex h-20 items-center border-t border-muted p-2">
+    <div className="flex h-14 max-h-14 min-h-14 items-center border-t border-muted p-2">
       <div className="flex items-center justify-center text-2xl">☝️</div>
       <div className="overflow-hidden pl-2">
         <div className="truncate text-sm font-semibold">{i18n.pick}</div>
@@ -57,9 +57,9 @@ export function EmojiPickerPreview({
   isSearching = false,
   ...props
 }: EmojiPickerPreviewProps) {
-  const showPickEmoji = !emoji && !(isSearching && !hasFound);
+  const showPickEmoji = !emoji && (!isSearching || hasFound);
   const showNoEmoji = isSearching && !hasFound;
-  const showPreview = emoji;
+  const showPreview = emoji && !showNoEmoji && !showNoEmoji;
 
   return (
     <>

apps/www/src/registry/default/plate-ui/emoji-picker-search-and-clear.tsx

@@ -1,9 +1,9 @@
 import type { UseEmojiPickerType } from '@udecode/plate-emoji/react';
 
 import { cn } from '@udecode/cn';
-import { DeleteIcon, SearchIcon } from 'lucide-react';
 
 import { Button } from './button';
+import { emojiSearchIcons } from './emoji-icons';
 
 export type EmojiPickerSearchAndClearProps = Pick<
   UseEmojiPickerType,
@@ -16,27 +16,27 @@ export function EmojiPickerSearchAndClear({
   searchValue,
 }: EmojiPickerSearchAndClearProps) {
   return (
-    <div className="flex items-center">
+    <div className="flex items-center text-foreground">
       <div
         className={cn(
-          'absolute left-3 top-1/2 z-10 flex size-5 -translate-y-1/2 items-center justify-center'
+          'absolute left-2.5 top-1/2 z-10 flex size-5 -translate-y-1/2 items-center justify-center text-foreground'
         )}
       >
-        <SearchIcon className="size-4" />
+        {emojiSearchIcons.loupe}
       </div>
       {searchValue && (
         <Button
           size="icon"
           variant="ghost"
           className={cn(
-            'absolute right-1 top-1/2 flex size-8 -translate-y-1/2 cursor-pointer items-center justify-center border-none bg-transparent'
+            'absolute right-0.5 top-1/2 flex size-8 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full border-none bg-transparent text-popover-foreground hover:bg-transparent'
           )}
           onClick={clearSearch}
           title={i18n.clear}
           aria-label="Clear"
           type="button"
         >
-          <DeleteIcon className="size-4" />
+          {emojiSearchIcons.delete}
         </Button>
       )}
     </div>

apps/www/src/registry/default/plate-ui/emoji-picker-search-bar.tsx

@@ -16,7 +16,7 @@ export function EmojiPickerSearchBar({
     <div className="flex items-center px-2">
       <div className="relative flex grow items-center">
         <input
-          className="block w-full appearance-none rounded-full border-0 bg-accent px-10 py-2 text-sm outline-none placeholder:text-muted-foreground focus-visible:outline-none"
+          className="block w-full appearance-none rounded-full border-0 bg-muted px-10 py-2 text-sm outline-none placeholder:text-muted-foreground focus-visible:outline-none"
           value={searchValue}
           onChange={(event) => setSearch(event.target.value)}
           placeholder={i18n.search}

apps/www/src/registry/default/plate-ui/emoji-picker.tsx

@@ -33,7 +33,7 @@ export function EmojiPicker({
   return (
     <div
       className={cn(
-        'flex flex-col rounded-xl bg-card',
+        'flex flex-col rounded-xl bg-popover text-popover-foreground',
         'h-[23rem] w-80 border shadow-md'
       )}
     >