refactor: enhance UI components and improve layout (#15984)

web/src/components/empty/empty.tsx

@@ -10,14 +10,7 @@ import { EmptyCardData, EmptyCardType, EmptyType } from './constant';
 import { EmptyCardProps, EmptyProps } from './interface';
 
 const EmptyIcon = ({ name, width }: { name: string; width?: number }) => {
-  return (
-    // <img
-    //   className="h-20"
-    //   src={isDarkTheme ? noDataIconDark : noDataIcon}
-    //   alt={t('common.noData')}
-    // />
-    <SvgIcon name={name || 'empty/no-data-dark'} width={width || 42} />
-  );
+  return <SvgIcon name={name || 'empty/no-data-dark'} width={width || 42} />;
 };
 
 const Empty = (props: EmptyProps) => {
@@ -58,16 +51,18 @@ export const EmptyCard = (props: EmptyCardProps) => {
   return (
     <article
       className={cn(
-        'flex flex-col gap-3 items-start justify-start border border-dashed border-border-button rounded-md p-5 w-fit',
+        'flex flex-col gap-3 rounded-md border border-dashed border-border-button p-5',
+        'w-full items-center justify-center text-center',
+        'md:w-fit md:items-start md:justify-start md:text-left',
         className,
       )}
       style={style}
       {...restProps}
     >
       {icon}
-      {title && <div className="text-text-primary text-sm">{title}</div>}
+      {title && <div className="text-sm text-text-primary">{title}</div>}
       {description && (
-        <p className="text-text-secondary text-sm">{description}</p>
+        <p className="text-sm text-text-secondary">{description}</p>
       )}
       {children}
     </article>
@@ -89,7 +84,7 @@ export const EmptyAppCard = (props: {
     props;
   const { t } = useTranslation();
   let defaultClass = '';
-  let style = {};
+  let style: React.CSSProperties | undefined;
   const cardData = EmptyCardData[type];
   const title = t(cardData.titleKey);
   const notFound = t(cardData.notFoundKey);
@@ -100,30 +95,36 @@ export const EmptyAppCard = (props: {
       defaultClass = 'mt-1';
       break;
     case 'large':
-      style = { width: '480px' };
       defaultClass = 'mt-5';
       break;
     default:
       defaultClass = '';
       break;
   }
+
   return (
-    <div>
+    <div className="flex w-full justify-center px-5 md:px-0">
       <EmptyCard
         onClick={isSearch ? undefined : props.onClick}
         data-testid={testId}
         tabIndex={tabIndex ?? (isSearch ? undefined : 0)}
         icon={showIcon ? cardData.icon : undefined}
         title={isSearch ? notFound : title}
-        className={cn(!isSearch && 'cursor-pointer', className)}
+        className={cn(
+          !isSearch && 'cursor-pointer',
+          props.size === 'large' && 'p-14',
+          className,
+          'w-full max-w-[480px] md:max-w-none',
+          props.size === 'large' && 'md:w-[480px]',
+          props.size === 'small' && 'max-w-64',
+        )}
         style={style}
-        // description={EmptyCardData[type].description}
       >
         {!isSearch && !children && (
           <div
             className={cn(
               defaultClass,
-              'flex items-center justify-start w-full',
+              'flex w-full items-center justify-center md:justify-start',
             )}
           >
             <Plus size={24} />

web/src/components/list-filter-bar/index.tsx

@@ -32,14 +32,6 @@ export const FilterButton = React.forwardRef<
       {...props}
       ref={ref}
     >
-      {/* <span
-        className={cn({
-          'text-text-primary': count > 0,
-          'text-text-sub-title-invert': count === 0,
-        })}
-      >
-        Filter
-      </span> */}
       <Funnel />
 
       {count > 0 && (
@@ -52,6 +44,7 @@ export const FilterButton = React.forwardRef<
 });
 
 FilterButton.displayName = 'FilterButton';
+
 export default function ListFilterBar({
   title,
   children,
@@ -94,11 +87,17 @@ export default function ListFilterBar({
       : 0;
   }, [value]);
 
+  const hasFilter = Boolean(filters?.length && showFilter);
+
   return (
-    <div className={cn('flex justify-between items-center', className)}>
-      <h1 className="text-2xl font-semibold flex items-center gap-2.5">
+    <div
+      className={cn(
+        'flex min-w-0 flex-col gap-3 md:flex-row md:items-center md:justify-between',
+        className,
+      )}
+    >
+      <h1 className="flex min-w-0 shrink-0 items-center gap-2.5 text-2xl font-semibold">
         {typeof icon === 'string' ? (
-          // <IconFont name={icon} className="size-6"></IconFont>
           <HomeIcon
             name={`${icon}`}
             imgClass={cn('size-[1em]', iconClassName)}
@@ -109,9 +108,23 @@ export default function ListFilterBar({
         {leftPanel || title}
       </h1>
 
-      <div className="flex gap-4 items-center" role="toolbar">
+      <div
+        className={cn(
+          'min-w-0 w-full items-center gap-2',
+          preChildren
+            ? 'flex flex-wrap md:flex-nowrap md:w-auto md:shrink-0 md:gap-4'
+            : cn(
+                'grid',
+                hasFilter
+                  ? 'grid-cols-[auto_minmax(0,1fr)_auto]'
+                  : 'grid-cols-[minmax(0,1fr)_auto]',
+                'md:flex md:w-auto md:shrink-0 md:gap-4',
+              ),
+        )}
+        role="toolbar"
+      >
         {preChildren}
-        {filters?.length && showFilter && (
+        {hasFilter && (
           <FilterPopover
             value={value}
             onChange={onChange}
@@ -119,18 +132,25 @@ export default function ListFilterBar({
             filterGroup={filterGroup}
             onOpenChange={onOpenChange}
           >
-            <FilterButton count={filterCount}></FilterButton>
+            <FilterButton count={filterCount} />
           </FilterPopover>
         )}
         {showSearch && (
           <SearchInput
             value={searchString}
             onChange={onSearchChange}
-            className="w-32"
+            className={cn(
+              'min-w-0 w-full',
+              preChildren ? 'flex-1 basis-32' : '',
+              'md:w-32',
+            )}
             role="searchbox"
-          ></SearchInput>
+          />
+        )}
+
+        {children && (
+          <div className="shrink-0 justify-self-end">{children}</div>
         )}
-        {children}
       </div>
     </div>
   );