F: Improve animation and styling

rsconcept/frontend/src/app/ApplicationLayout.tsx

@@ -27,7 +27,7 @@ export function ApplicationLayout() {
     <NavigationState>
       <div className='min-w-[20rem] antialiased h-full max-w-[120rem] mx-auto'>
         <ToasterThemed
-          className='text-[14px] cc-animate-position'
+          className='text-[14px]'
           style={{ marginTop: noNavigationAnimation ? '1.5rem' : '3.5rem' }}
           autoClose={3000}
           draggable={false}

rsconcept/frontend/src/app/Navigation/Navigation.tsx

@@ -42,9 +42,10 @@ export function Navigation() {
           'cc-shadow-border'
         )}
         style={{
-          transitionProperty: 'height, translate',
+          willChange: 'max-height, translate',
+          transitionProperty: 'max-height, translate',
           transitionDuration: `${PARAMETER.moveDuration}ms`,
-          height: noNavigationAnimation ? '0rem' : '3rem',
+          maxHeight: noNavigationAnimation ? '0rem' : '3rem',
           translate: noNavigationAnimation ? '0 -1.5rem' : '0'
         }}
       >

rsconcept/frontend/src/app/Navigation/ToggleNavigation.tsx

@@ -22,7 +22,8 @@ export function ToggleNavigation() {
         !noNavigation && 'flex-col-reverse'
       )}
       style={{
-        transitionProperty: 'height, width, background-color',
+        willChange: 'height, width',
+        transitionProperty: 'height, width',
         transitionDuration: `${PARAMETER.moveDuration}ms`,
         height: noNavigationAnimation ? '2rem' : '3rem',
         width: noNavigationAnimation ? '3rem' : '2rem'
@@ -32,7 +33,7 @@ export function ToggleNavigation() {
         <button
           tabIndex={-1}
           type='button'
-          className='p-1'
+          className='p-1 cursor-pointer'
           onClick={toggleDarkMode}
           data-tooltip-id={globalIDs.tooltip}
           data-tooltip-content={darkMode ? 'Тема: Темная' : 'Тема: Светлая'}
@@ -44,7 +45,7 @@ export function ToggleNavigation() {
       <button
         tabIndex={-1}
         type='button'
-        className='p-1'
+        className='p-1 cursor-pointer'
         onClick={toggleNoNavigation}
         data-tooltip-id={globalIDs.tooltip}
         data-tooltip-content={noNavigationAnimation ? 'Показать навигацию' : 'Скрыть навигацию'}

rsconcept/frontend/src/components/Dropdown/Dropdown.tsx

@@ -46,6 +46,7 @@ export function Dropdown({
           className
         )}
         style={{
+          willChange: 'clip-path, transform',
           transitionProperty: 'clip-path, transform',
           transitionDuration: `${PARAMETER.dropdownDuration}ms`,
           transitionTimingFunction: 'ease-in-out',

rsconcept/frontend/src/components/Input/SelectTree.tsx

@@ -98,11 +98,12 @@ export function SelectTree<ItemType>({
             onClick={event => handleSetValue(event, item)}
             style={{
               borderBottomWidth: isActive ? '1px' : '0px',
-              transitionProperty: 'height, opacity, padding',
+              willChange: 'max-height, opacity, padding',
+              transitionProperty: 'max-height, opacity, padding',
               transitionDuration: `${PARAMETER.moveDuration}ms`,
               paddingTop: isActive ? '0.25rem' : '0',
               paddingBottom: isActive ? '0.25rem' : '0',
-              height: isActive ? 'min-content' : '0',
+              maxHeight: isActive ? '1.75rem' : '0',
               opacity: isActive ? '1' : '0'
             }}
           >

rsconcept/frontend/src/features/help/pages/ManualsPage/TopicsDropdown.tsx

@@ -66,6 +66,7 @@ export function TopicsDropdown({ activeTopic, onChangeTopic }: TopicsDropdownPro
         )}
         style={{
           maxHeight: treeHeight,
+          willChange: 'clip-path',
           transitionProperty: 'clip-path',
           transitionDuration: `${PARAMETER.moveDuration}ms`,
           clipPath: menu.isOpen ? 'inset(0% 0% 0% 0%)' : 'inset(0% 100% 0% 0%)'

rsconcept/frontend/src/features/library/components/MiniSelectorOSS.tsx

@@ -13,13 +13,13 @@ import { type ILibraryItemReference } from '../models/library';
 
 interface MiniSelectorOSSProps extends Styling {
   items: ILibraryItemReference[];
-  onSelect: (event: React.MouseEvent<Element>, newValue: ILibraryItemReference) => void;
+  onSelect: (event: React.MouseEvent<HTMLElement>, newValue: ILibraryItemReference) => void;
 }
 
 export function MiniSelectorOSS({ items, onSelect, className, ...restProps }: MiniSelectorOSSProps) {
   const ossMenu = useDropdown();
 
-  function onToggle(event: React.MouseEvent<Element>) {
+  function onToggle(event: React.MouseEvent<HTMLElement>) {
     if (items.length > 1) {
       ossMenu.toggle();
     } else {

rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorRSExpression/RSEditControls.tsx

@@ -98,11 +98,12 @@ export function RSEditorControls({ isOpen, disabled, onEdit }: RSEditorControlsP
         'select-none'
       )}
       style={{
-        transitionProperty: 'clipPath, height',
-        transitionDuration: `${PARAMETER.moveDuration}ms`,
         clipPath: isOpen ? 'inset(0% 0% 0% 0%)' : 'inset(0% 0% 100% 0%)',
         marginTop: isOpen ? '0.25rem' : '0rem',
-        height: isOpen ? 'max-content' : '0rem'
+        willChange: 'max-height',
+        transitionProperty: 'max-height',
+        transitionDuration: `${PARAMETER.moveDuration}ms`,
+        maxHeight: isOpen ? '4.5rem' : '0rem'
       }}
     >
       {MAIN_FIRST_ROW.map(token => (

rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/ViewHidden.tsx

@@ -62,11 +62,10 @@ export function ViewHidden({ items, selected, toggleSelection, setFocus, schema,
         <div
           className='w-fit select-none'
           style={{
-            transitionProperty: 'margin, translate',
+            transitionProperty: 'translate',
             transitionDuration: `${PARAMETER.fastAnimation}ms`,
             transitionTimingFunction: 'ease-out',
-            marginLeft: isFolded ? '0.75rem' : '0',
+            translate: isFolded ? '0.75rem' : 'calc(6.5rem - 50%)'
-            translate: isFolded ? '0' : 'calc(6.5rem - 50%)'
           }}
         >
           {`Скрытые [${localSelected.length} | ${items.length}]`}
@@ -84,6 +83,7 @@ export function ViewHidden({ items, selected, toggleSelection, setFocus, schema,
         style={{
           pointerEvents: isFolded ? 'none' : 'auto',
           maxHeight: hiddenHeight,
+          willChange: 'clip-path',
           transitionProperty: 'clip-path',
           transitionDuration: `${PARAMETER.fastAnimation}ms`,
           transitionTimingFunction: 'ease-out',

rsconcept/frontend/src/features/rsform/pages/RSFormPage/ViewConstituents/ViewConstituents.tsx

@@ -41,11 +41,12 @@ export function ViewConstituents({ isBottom, isMounted }: ViewConstituentsProps)
         }
       )}
       style={{
-        transitionProperty: 'opacity, width',
+        willChange: 'opacity, max-width',
+        transitionProperty: 'opacity, max-width',
         transitionDuration: `${2 * PARAMETER.moveDuration}ms`,
         transitionTimingFunction: 'ease-in-out',
         opacity: isMounted ? 1 : 0,
-        width: isMounted ? 'fit-content' : '0'
+        maxWidth: isMounted ? '100%' : '0'
       }}
     >
       <ConstituentsSearch