⚡️ feat: add squiggly line and personal TODO

packages/frontend/src/components/shared/UserSelect/UserSelect.theme.ts

@@ -25,8 +25,6 @@ export const userSelectTheme = tv({
       'mt-12',
       'z-20',
       'absolute',
-      'px-1',
-      'py-1',
       'flex-col',
       'gap-0.5',
       'min-w-full',
@@ -39,6 +37,7 @@ export const userSelectTheme = tv({
       'border-gray-200',
       'rounded-xl',
     ],
+    popoverItemWrapper: ['flex', 'flex-col', 'px-2', 'py-2', 'gap-1'],
   },
   variants: {
     isOpen: {

packages/frontend/src/components/shared/UserSelect/UserSelect.tsx

@@ -10,6 +10,7 @@ import {
   BuildingIcon,
   ChevronUpDown,
   SettingsSlidersIcon,
+  SquigglyLine,
 } from 'components/shared/CustomIcon';
 import { cn } from 'utils/classnames';
 import { UserSelectTheme, userSelectTheme } from './UserSelect.theme';
@@ -143,16 +144,13 @@ export const UserSelect = ({ options, value }: UserSelectProps) => {
         {...getMenuProps({ ref: popoverRef }, { suppressRefError: true })}
         id="popover"
         ref={popoverRef}
-        className={cn(
+        className={cn(theme.popover({ isOpen }), {
-          theme.popover({ isOpen }),
-          {
           // Position the popover based on the dropdown position
           'top-[27.5%]': dropdownPosition === 'bottom',
           'bottom-[92.5%]': dropdownPosition === 'top',
-          },
+        })}
-          'px-2 py-2',
-        )}
       >
+        <div className={theme.popoverItemWrapper()}>
           {/* Settings header */}
           <div className="flex justify-between h-8 items-center">
             <div className="flex gap-1 text-elements-mid-em">
@@ -182,9 +180,30 @@ export const UserSelect = ({ options, value }: UserSelectProps) => {
           ) : (
             <EmptyUserSelectItem />
           )}
+        </div>
 
-        {/* //TODO:Squiggly line */}
+        {/* Squiggly line */}
-        {/* //TODO:Personal */}
+        {/* //TODO:remove if personal dont exist */}
+        <div>
+          <SquigglyLine />
+        </div>
+
+        <div className={theme.popoverItemWrapper()}>
+          {/* //TODO:Personal (replace options with Personal Options) */}
+          {isOpen && options.length !== 0 ? (
+            options.map((item, index) => (
+              <UserSelectItem
+                {...getItemProps({ item, index: 99 })}
+                key={item.value}
+                selected={isSelected(item)}
+                option={item}
+                hovered={highlightedIndex === index}
+              />
+            ))
+          ) : (
+            <EmptyUserSelectItem />
+          )}
+        </div>
       </ul>
     </div>
   );