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} />
-    <ImageInput className={activeTab === 'image' ? 'block' : 'hidden'} onImageInput={handleImageInput} />
+    {activeTab === 'emoji' && <EmojiPickerInner className={cn('flex-1 overflow-hidden pt-2')} onSelect={handleSelectEmoji} />}
+    {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)
-      onSelect?.(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,33 +147,34 @@ 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'>
-        {backgroundColors.map((color) => {
-          return <div
-            key={color}
-            className={
-              cn(
-                'cursor-pointer',
-                'ring-offset-1 hover:ring-1',
-                'inline-flex h-10 w-10 items-center justify-center rounded-lg',
-                color === selectedBackground ? 'ring-1 ring-components-input-border-hover' : '',
-              )}
-            onClick={() => {
-              setSelectedBackground(color)
-            }}
-          >
-            <div className={cn(
-              'flex h-8 w-8 items-center justify-center rounded-lg p-1',
-            )
-            } style={{ background: color }}>
-              {selectedEmoji !== '' && <em-emoji id={selectedEmoji} />}
-            </div>
-          </div>
-        })}
-      </div>
+      {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}
+          className={
+            cn(
+              'cursor-pointer',
+              'ring-offset-1 hover:ring-1',
+              'inline-flex h-10 w-10 items-center justify-center rounded-lg',
+              color === selectedBackground ? 'ring-1 ring-components-input-border-hover' : '',
+            )}
+          onClick={() => {
+            setSelectedBackground(color)
+          }}
+        >
+          <div className={cn(
+            'flex h-8 w-8 items-center justify-center rounded-lg p-1',
+          )
+          } style={{ background: color }}>
+          {selectedEmoji !== '' && <em-emoji id={selectedEmoji} />}
+          </div>
+        </div>
+      })}
+    </div>}
   </div>
 }
 export default EmojiPickerInner