From d123d96ea34814cc23ba9ea9a8a7aa4175806953 Mon Sep 17 00:00:00 2001
From: Ivan <8611739+IRBorisov@users.noreply.github.com>
Date: Sat, 22 Feb 2025 16:12:29 +0300
Subject: [PATCH] F: Improve animations and styling

---
 rsconcept/frontend/src/app/ApplicationLayout.tsx           | 2 +-
 rsconcept/frontend/src/app/Navigation/Navigation.tsx       | 5 +++--
 rsconcept/frontend/src/app/Navigation/ToggleNavigation.tsx | 7 ++++---
 rsconcept/frontend/src/components/Dropdown/Dropdown.tsx    | 1 +
 rsconcept/frontend/src/components/Input/SelectTree.tsx     | 5 +++--
 .../src/features/help/pages/ManualsPage/TopicsDropdown.tsx | 1 +
 .../src/features/library/components/MiniSelectorOSS.tsx    | 4 ++--
 .../pages/RSFormPage/EditorRSExpression/RSEditControls.tsx | 7 ++++---
 .../rsform/pages/RSFormPage/EditorTermGraph/ViewHidden.tsx | 6 +++---
 .../pages/RSFormPage/ViewConstituents/ViewConstituents.tsx | 5 +++--
 10 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/rsconcept/frontend/src/app/ApplicationLayout.tsx b/rsconcept/frontend/src/app/ApplicationLayout.tsx
index f8467c04..c732ecc9 100644
--- a/rsconcept/frontend/src/app/ApplicationLayout.tsx
+++ b/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}
diff --git a/rsconcept/frontend/src/app/Navigation/Navigation.tsx b/rsconcept/frontend/src/app/Navigation/Navigation.tsx
index 887ec111..2129d27a 100644
--- a/rsconcept/frontend/src/app/Navigation/Navigation.tsx
+++ b/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'
         }}
       >
diff --git a/rsconcept/frontend/src/app/Navigation/ToggleNavigation.tsx b/rsconcept/frontend/src/app/Navigation/ToggleNavigation.tsx
index d84a69bb..8d95de3c 100644
--- a/rsconcept/frontend/src/app/Navigation/ToggleNavigation.tsx
+++ b/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 ? 'Показать навигацию' : 'Скрыть навигацию'}
diff --git a/rsconcept/frontend/src/components/Dropdown/Dropdown.tsx b/rsconcept/frontend/src/components/Dropdown/Dropdown.tsx
index ad6127a8..e223777f 100644
--- a/rsconcept/frontend/src/components/Dropdown/Dropdown.tsx
+++ b/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',
diff --git a/rsconcept/frontend/src/components/Input/SelectTree.tsx b/rsconcept/frontend/src/components/Input/SelectTree.tsx
index 950888df..3d675ee6 100644
--- a/rsconcept/frontend/src/components/Input/SelectTree.tsx
+++ b/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'
             }}
           >
diff --git a/rsconcept/frontend/src/features/help/pages/ManualsPage/TopicsDropdown.tsx b/rsconcept/frontend/src/features/help/pages/ManualsPage/TopicsDropdown.tsx
index 260ea942..7ceca514 100644
--- a/rsconcept/frontend/src/features/help/pages/ManualsPage/TopicsDropdown.tsx
+++ b/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%)'
diff --git a/rsconcept/frontend/src/features/library/components/MiniSelectorOSS.tsx b/rsconcept/frontend/src/features/library/components/MiniSelectorOSS.tsx
index b2cc5944..5b8879c2 100644
--- a/rsconcept/frontend/src/features/library/components/MiniSelectorOSS.tsx
+++ b/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 {
diff --git a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorRSExpression/RSEditControls.tsx b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorRSExpression/RSEditControls.tsx
index ea5c8d99..664060e8 100644
--- a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorRSExpression/RSEditControls.tsx
+++ b/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 => (
diff --git a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/ViewHidden.tsx b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/ViewHidden.tsx
index 2a084a34..d095c681 100644
--- a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/EditorTermGraph/ViewHidden.tsx
+++ b/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' : 'calc(6.5rem - 50%)'
+            translate: isFolded ? '0.75rem' : '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',
diff --git a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/ViewConstituents/ViewConstituents.tsx b/rsconcept/frontend/src/features/rsform/pages/RSFormPage/ViewConstituents/ViewConstituents.tsx
index f7cd716c..9d333d0f 100644
--- a/rsconcept/frontend/src/features/rsform/pages/RSFormPage/ViewConstituents/ViewConstituents.tsx
+++ b/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