feat: improve table options dropdown view name input (#1604)

- Always show view name input in dropdown
- Edit current view name by default
- Add focus style
- Reset view edit mode on dropdown close

Closes #1540

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

@@ -2,10 +2,10 @@ import { useRef } from 'react';
 import { Keys } from 'react-hotkeys-hook';
 import { flip, offset, Placement, useFloating } from '@floating-ui/react';
 
+import { HotkeyEffect } from '@/ui/utilities/hotkey/components/HotkeyEffect';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 
-import { HotkeyEffect } from '../../utilities/hotkey/components/HotkeyEffect';
 import { useDropdownButton } from '../hooks/useDropdownButton';
 import { useInternalHotkeyScopeManagement } from '../hooks/useInternalHotkeyScopeManagement';
 
@@ -19,6 +19,7 @@ type OwnProps = {
   };
   dropdownHotkeyScope?: HotkeyScope;
   dropdownPlacement?: Placement;
+  onClickOutside?: () => void;
 };
 
 export function DropdownButton({
@@ -28,6 +29,7 @@ export function DropdownButton({
   hotkey,
   dropdownHotkeyScope,
   dropdownPlacement = 'bottom-end',
+  onClickOutside,
 }: OwnProps) {
   const containerRef = useRef<HTMLDivElement>(null);
 
@@ -48,6 +50,8 @@ export function DropdownButton({
   useListenClickOutside({
     refs: [containerRef],
     callback: () => {
+      onClickOutside?.();
+
       if (isDropdownButtonOpen) {
         closeDropdownButton();
       }

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

@@ -11,8 +11,7 @@ const StyledHeader = styled.li`
   font-size: ${({ theme }) => theme.font.size.sm};
   font-weight: ${({ theme }) => theme.font.weight.medium};
 
-  padding: calc(${({ theme }) => theme.spacing(2)})
-    calc(${({ theme }) => theme.spacing(2)});
+  padding: ${({ theme }) => theme.spacing(2)};
 
   user-select: none;
 

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

@@ -13,7 +13,7 @@ const StyledDropdownMenuInputContainer = styled.div`
   height: calc(36px - 2 * var(--vertical-padding));
   padding: var(--vertical-padding) 0;
 
-  width: calc(100%);
+  width: 100%;
 `;
 
 const StyledInput = styled.input`