refactor(core): new workspace selector and create dialog (#10323)

packages/frontend/component/src/ui/menu/menu.types.ts

@@ -25,6 +25,8 @@ export interface MenuItemProps
   suffix?: ReactNode;
   prefixIcon?: ReactNode;
   suffixIcon?: ReactNode;
+  prefixIconClassName?: string;
+  suffixIconClassName?: string;
   checked?: boolean;
   selected?: boolean;
   block?: boolean;

packages/frontend/component/src/ui/menu/use-menu-item.tsx

@@ -11,8 +11,10 @@ export const useMenuItem = <T extends MenuItemProps>({
   className: propsClassName,
   prefix,
   prefixIcon,
+  prefixIconClassName,
   suffix,
   suffixIcon,
+  suffixIconClassName,
   checked,
   selected,
   block,
@@ -38,13 +40,17 @@ export const useMenuItem = <T extends MenuItemProps>({
       {prefix}
 
       {prefixIcon ? (
-        <div className={styles.menuItemIcon}>{prefixIcon}</div>
+        <div className={clsx(styles.menuItemIcon, prefixIconClassName)}>
+          {prefixIcon}
+        </div>
       ) : null}
 
       <span className={styles.menuSpan}>{propsChildren}</span>
 
       {suffixIcon ? (
-        <div className={styles.menuItemIcon}>{suffixIcon}</div>
+        <div className={clsx(styles.menuItemIcon, suffixIconClassName)}>
+          {suffixIcon}
+        </div>
       ) : null}
 
       {suffix}

packages/frontend/component/src/ui/scrollbar/scrollbar.tsx

@@ -12,6 +12,7 @@ export type ScrollableContainerProps = {
   viewPortClassName?: string;
   styles?: React.CSSProperties;
   scrollBarClassName?: string;
+  scrollThumbClassName?: string;
 };
 
 export const ScrollableContainer = ({
@@ -22,6 +23,7 @@ export const ScrollableContainer = ({
   styles: _styles,
   viewPortClassName,
   scrollBarClassName,
+  scrollThumbClassName,
 }: PropsWithChildren<ScrollableContainerProps>) => {
   const [setContainer, hasScrollTop] = useHasScrollTop();
   return (
@@ -45,7 +47,9 @@ export const ScrollableContainer = ({
           [styles.TableScrollbar]: inTableView,
         })}
       >
-        <ScrollArea.Thumb className={styles.scrollbarThumb} />
+        <ScrollArea.Thumb
+          className={clsx(styles.scrollbarThumb, scrollThumbClassName)}
+        />
       </ScrollArea.Scrollbar>
     </ScrollArea.Root>
   );