Refactor dropdown (#1561)

front/src/modules/ui/dropdown/components/DropdownButton.tsx

@@ -22,6 +22,7 @@ type OwnProps = {
   };
   dropdownHotkeyScope?: HotkeyScope;
   dropdownPlacement?: Placement;
+  onDropdownToggle?: (isDropdownOpen: boolean) => void;
 };
 
 export function DropdownButton({
@@ -31,12 +32,14 @@ export function DropdownButton({
   hotkey,
   dropdownHotkeyScope,
   dropdownPlacement = 'bottom-end',
+  onDropdownToggle,
 }: OwnProps) {
   const containerRef = useRef<HTMLDivElement>(null);
 
   const { isDropdownButtonOpen, toggleDropdownButton, closeDropdownButton } =
     useDropdownButton({
       key: dropdownKey,
+      onDropdownToggle,
     });
 
   const { refs, floatingStyles } = useFloating({

front/src/modules/ui/dropdown/components/StyledHeaderDropdownButton.tsx

@@ -10,7 +10,7 @@ export const StyledHeaderDropdownButton = styled.div<StyledDropdownButtonProps>`
   background: ${({ theme }) => theme.background.primary};
   border-radius: ${({ theme }) => theme.border.radius.sm};
   color: ${({ isActive, theme, color }) =>
-    color ?? (isActive ? theme.color.blue : 'none')};
+    color ?? (isActive ? theme.color.blue : theme.font.color.secondary)};
   cursor: pointer;
   display: flex;
   filter: ${(props) => (props.isUnfolded ? 'brightness(0.95)' : 'none')};

front/src/modules/ui/dropdown/hooks/useDropdownButton.ts

@@ -6,7 +6,13 @@ import { isDropdownButtonOpenScopedFamilyState } from '../states/isDropdownButto
 import { DropdownRecoilScopeContext } from '../states/recoil-scope-contexts/DropdownRecoilScopeContext';
 
 // TODO: have a more explicit name than key
-export function useDropdownButton({ key }: { key: string }) {
+export function useDropdownButton({
+  key,
+  onDropdownToggle,
+}: {
+  key: string;
+  onDropdownToggle?: (isDropdownButtonOpen: boolean) => void;
+}) {
   const {
     setHotkeyScopeAndMemorizePreviousScope,
     goBackToPreviousHotkeyScope,
@@ -28,6 +34,7 @@ export function useDropdownButton({ key }: { key: string }) {
   function closeDropdownButton() {
     goBackToPreviousHotkeyScope();
     setIsDropdownButtonOpen(false);
+    onDropdownToggle?.(false);
   }
 
   function openDropdownButton() {
@@ -39,6 +46,7 @@ export function useDropdownButton({ key }: { key: string }) {
         dropdownButtonCustomHotkeyScope.customScopes,
       );
     }
+    onDropdownToggle?.(true);
   }
 
   function toggleDropdownButton() {
@@ -47,6 +55,7 @@ export function useDropdownButton({ key }: { key: string }) {
     } else {
       openDropdownButton();
     }
+    onDropdownToggle?.(isDropdownButtonOpen);
   }
 
   return {