Improve App Icon Picker: Stable Modal Height & Collapsible Emoji Style Section (#21399)

web/app/components/base/app-icon-picker/index.tsx

@@ -112,7 +112,7 @@ const AppIconPicker: FC<AppIconPickerProps> = ({
     isShow
     closable={false}
     wrapperClassName={className}
-    className={cn(s.container, '!w-[362px] !p-0')}
+    className={cn(s.container, '!h-[462px] !w-[362px] !p-0')}
   >
     {!DISABLE_UPLOAD_IMAGE_AS_ICON && <div className="w-full p-2 pb-0">
       <div className='flex items-center justify-center gap-2 rounded-xl bg-background-body p-1 text-text-primary'>
@@ -131,8 +131,8 @@ const AppIconPicker: FC<AppIconPickerProps> = ({
       </div>
     </div>}
 
-    <EmojiPickerInner className={cn(activeTab === 'emoji' ? 'block' : 'hidden', 'pt-2')} onSelect={handleSelectEmoji} />
+    {activeTab === 'emoji' && <EmojiPickerInner className={cn('flex-1 overflow-hidden pt-2')} onSelect={handleSelectEmoji} />}
-    <ImageInput className={activeTab === 'image' ? 'block' : 'hidden'} onImageInput={handleImageInput} />
+    {activeTab === 'image' && <ImageInput className={cn('flex-1 overflow-hidden')} onImageInput={handleImageInput} />}
 
     <Divider className='m-0' />
     <div className='flex w-full items-center justify-center gap-2 p-3'>

web/app/components/base/emoji-picker/Inner.tsx

@@ -5,6 +5,8 @@ import data from '@emoji-mart/data'
 import type { EmojiMartData } from '@emoji-mart/data'
 import { init } from 'emoji-mart'
 import {
+  ChevronDownIcon,
+  ChevronUpIcon,
   MagnifyingGlassIcon,
 } from '@heroicons/react/24/outline'
 import Input from '@/app/components/base/input'
@@ -60,16 +62,20 @@ const EmojiPickerInner: FC<IEmojiPickerInnerProps> = ({
   const { categories } = data as EmojiMartData
   const [selectedEmoji, setSelectedEmoji] = useState('')
   const [selectedBackground, setSelectedBackground] = useState(backgroundColors[0])
+  const [showStyleColors, setShowStyleColors] = useState(false)
 
   const [searchedEmojis, setSearchedEmojis] = useState<string[]>([])
   const [isSearching, setIsSearching] = useState(false)
 
   React.useEffect(() => {
-    if (selectedEmoji && selectedBackground)
+    if (selectedEmoji) {
+      setShowStyleColors(true)
+      if (selectedBackground)
         onSelect?.(selectedEmoji, selectedBackground)
+    }
   }, [onSelect, selectedEmoji, selectedBackground])
 
-  return <div className={cn(className)}>
+  return <div className={cn(className, 'flex flex-col')}>
     <div className='flex w-full flex-col items-center px-3 pb-2'>
       <div className="relative w-full">
         <div className="pointer-events-none absolute inset-y-0 left-0 z-10 flex items-center pl-3">
@@ -95,7 +101,7 @@ const EmojiPickerInner: FC<IEmojiPickerInnerProps> = ({
     </div>
     <Divider className='my-3' />
 
-    <div className="max-h-[200px] w-full overflow-y-auto overflow-x-hidden px-3">
+    <div className="w-full flex-1 overflow-y-auto overflow-x-hidden px-3">
       {isSearching && <>
         <div key={'category-search'} className='flex flex-col'>
           <p className='system-xs-medium-uppercase mb-1 text-text-primary'>Search</p>
@@ -141,9 +147,11 @@ const EmojiPickerInner: FC<IEmojiPickerInnerProps> = ({
     </div>
 
     {/* Color Select */}
-    <div className={cn('p-3 pb-0', selectedEmoji === '' ? 'opacity-25' : '')}>
+    <div className={cn('flex items-center justify-between p-3 pb-0')}>
       <p className='system-xs-medium-uppercase mb-2 text-text-primary'>Choose Style</p>
-      <div className='grid h-full w-full grid-cols-8 gap-1'>
+      {showStyleColors ? <ChevronDownIcon className='h-4 w-4' onClick={() => setShowStyleColors(!showStyleColors)} /> : <ChevronUpIcon className='h-4 w-4' onClick={() => setShowStyleColors(!showStyleColors)} />}
+    </div>
+    {showStyleColors && <div className='grid w-full grid-cols-8 gap-1 px-3'>
       {backgroundColors.map((color) => {
         return <div
           key={color}
@@ -166,8 +174,7 @@ const EmojiPickerInner: FC<IEmojiPickerInnerProps> = ({
           </div>
         </div>
       })}
-      </div>
+    </div>}
-    </div>
   </div>
 }
 export default EmojiPickerInner