Refactor clear button implementation in type selector

web/app/components/app/type-selector/index.tsx

@@ -38,17 +38,21 @@ const AppTypeSelector = ({ value, onChange }: AppSelectorProps) => {
             'flex cursor-pointer items-center justify-between space-x-1 rounded-md px-2 hover:bg-state-base-hover',
           )}>
             <AppTypeSelectTrigger values={value} />
-            {value && value.length > 0 && <button
-              type='button'
-              aria-label={t('common.operation.clear')}
-              className='h-4 w-4'
-              onClick={(e) => {
-                e.stopPropagation()
-                onChange([])
-              }}
-            >
-              <RiCloseCircleFill className='h-3.5 w-3.5 cursor-pointer text-text-quaternary hover:text-text-tertiary' />
-            </button>}
+              {value && value.length > 0 && (
+                <button
+                  type="button"
+                  aria-label={t('common.operation.clear')}
+                  className="h-4 w-4 group"
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    onChange([])
+                  }}
+                >
+                  <RiCloseCircleFill
+                    className="h-3.5 w-3.5 text-text-quaternary group-hover:text-text-tertiary"
+                  />
+                </button>
+              )}
           </div>
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent className='z-[1002]'>