From 91a80cac8a9850621be95a31bfee53a363745787 Mon Sep 17 00:00:00 2001
From: Andre H <andrehadiantolesmana@gmail.com>
Date: Thu, 29 Feb 2024 09:30:53 +0700
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20feat:=20add=20squiggly=20l?=
 =?UTF-8?q?ine=20and=20personal=20TODO?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../shared/UserSelect/UserSelect.theme.ts     |  3 +-
 .../shared/UserSelect/UserSelect.tsx          | 93 +++++++++++--------
 2 files changed, 57 insertions(+), 39 deletions(-)

diff --git a/packages/frontend/src/components/shared/UserSelect/UserSelect.theme.ts b/packages/frontend/src/components/shared/UserSelect/UserSelect.theme.ts
index 7e17355e..bca34a1c 100644
--- a/packages/frontend/src/components/shared/UserSelect/UserSelect.theme.ts
+++ b/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: {
diff --git a/packages/frontend/src/components/shared/UserSelect/UserSelect.tsx b/packages/frontend/src/components/shared/UserSelect/UserSelect.tsx
index 07866570..f68214cd 100644
--- a/packages/frontend/src/components/shared/UserSelect/UserSelect.tsx
+++ b/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,48 +144,66 @@ export const UserSelect = ({ options, value }: UserSelectProps) => {
         {...getMenuProps({ ref: popoverRef }, { suppressRefError: true })}
         id="popover"
         ref={popoverRef}
-        className={cn(
-          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',
-        )}
+        className={cn(theme.popover({ isOpen }), {
+          // Position the popover based on the dropdown position
+          'top-[27.5%]': dropdownPosition === 'bottom',
+          'bottom-[92.5%]': dropdownPosition === 'top',
+        })}
       >
-        {/* Settings header */}
-        <div className="flex justify-between h-8 items-center">
-          <div className="flex gap-1 text-elements-mid-em">
-            <BuildingIcon size={16} />
-            <p className="text-xs font-medium">Other teams</p>
-          </div>
-          <div
-            className="flex gap-1 text-elements-link cursor-pointer"
-            onClick={handleManage}
-          >
-            <p className="text-xs font-medium">Manage</p>
-            <SettingsSlidersIcon size={16} />
+        <div className={theme.popoverItemWrapper()}>
+          {/* Settings header */}
+          <div className="flex justify-between h-8 items-center">
+            <div className="flex gap-1 text-elements-mid-em">
+              <BuildingIcon size={16} />
+              <p className="text-xs font-medium">Other teams</p>
+            </div>
+            <div
+              className="flex gap-1 text-elements-link cursor-pointer"
+              onClick={handleManage}
+            >
+              <p className="text-xs font-medium">Manage</p>
+              <SettingsSlidersIcon size={16} />
+            </div>
           </div>
+
+          {/* Organization */}
+          {isOpen && options.length !== 0 ? (
+            options.map((item, index) => (
+              <UserSelectItem
+                {...getItemProps({ item, index })}
+                key={item.value}
+                selected={isSelected(item)}
+                option={item}
+                hovered={highlightedIndex === index}
+              />
+            ))
+          ) : (
+            <EmptyUserSelectItem />
+          )}
         </div>
 
-        {/* Organization */}
-        {isOpen && options.length !== 0 ? (
-          options.map((item, index) => (
-            <UserSelectItem
-              {...getItemProps({ item, index })}
-              key={item.value}
-              selected={isSelected(item)}
-              option={item}
-              hovered={highlightedIndex === index}
-            />
-          ))
-        ) : (
-          <EmptyUserSelectItem />
-        )}
+        {/* Squiggly line */}
+        {/* //TODO:remove if personal dont exist */}
+        <div>
+          <SquigglyLine />
+        </div>
 
-        {/* //TODO:Squiggly line */}
-        {/* //TODO:Personal */}
+        <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>
   );