From 1009a2ec984b4ee25222ccf2f4e47876a7b212c2 Mon Sep 17 00:00:00 2001 From: IRBorisov <8611739+IRBorisov@users.noreply.github.com> Date: Sun, 17 Dec 2023 20:19:28 +0300 Subject: [PATCH] Refactor and simplify UI --- rsconcept/frontend/README.md | 2 +- rsconcept/frontend/src/App.tsx | 18 +-- .../src/components/Common/Dropdown.tsx | 2 +- .../frontend/src/components/Common/Modal.tsx | 2 +- .../src/components/Common/SubmitButton.tsx | 10 +- .../src/components/DataTable/DataTable.tsx | 138 +++++------------- .../src/components/DataTable/SortingIcon.tsx | 9 +- .../src/components/DataTable/TableBody.tsx | 74 ++++++++++ .../src/components/DataTable/TableFooter.tsx | 24 +++ .../src/components/DataTable/TableHeader.tsx | 56 +++++++ rsconcept/frontend/src/components/Footer.tsx | 7 +- .../src/components/Help/HelpLibrary.tsx | 9 +- rsconcept/frontend/src/components/Icons.tsx | 122 ---------------- .../frontend/src/components/InfoError.tsx | 4 +- .../src/components/Navigation/Navigation.tsx | 8 +- .../src/components/Navigation/UserMenu.tsx | 6 +- .../components/Shared/ConstituentaPicker.tsx | 27 ++-- .../DlgConstituentaTemplate/ArgumentsTab.tsx | 49 +++---- .../DlgEditReference/DlgEditReference.tsx | 32 ++-- .../DlgEditWordForms/DlgEditWordForms.tsx | 48 +++--- .../DlgEditWordForms/WordFormsTable.tsx | 51 +++---- rsconcept/frontend/src/models/rslangAPI.ts | 2 +- .../frontend/src/pages/CreateRSFormPage.tsx | 2 +- rsconcept/frontend/src/pages/HomePage.tsx | 6 +- .../src/pages/LibraryPage/ItemIcons.tsx | 9 +- .../src/pages/LibraryPage/SearchPanel.tsx | 4 +- rsconcept/frontend/src/pages/LoginPage.tsx | 15 +- .../src/pages/ManualsPage/ViewTopic.tsx | 2 +- .../ConstituentaToolbar.tsx | 15 +- .../EditorConstituenta/EditorConstituenta.tsx | 48 +++--- .../EditorConstituenta/FormConstituenta.tsx | 34 +++-- .../EditorRSExpression/EditorRSExpression.tsx | 20 +-- .../EditorRSExpression/StatusBar.tsx | 2 +- .../RSFormPage/EditorRSForm/EditorRSForm.tsx | 31 ++-- .../RSFormPage/EditorRSForm/FormRSForm.tsx | 23 ++- .../RSFormPage/EditorRSForm/RSFormStats.tsx | 2 +- .../RSFormPage/EditorRSForm/RSFormToolbar.tsx | 15 +- .../RSFormPage/EditorRSList/EditorRSList.tsx | 10 +- .../RSFormPage/EditorRSList/RSListToolbar.tsx | 27 +--- .../pages/RSFormPage/EditorRSList/RSTable.tsx | 10 +- .../EditorTermGraph/GraphSidebar.tsx | 3 +- .../EditorTermGraph/GraphToolbar.tsx | 9 +- .../frontend/src/pages/RSFormPage/RSTabs.tsx | 88 +++++------ .../src/pages/RSFormPage/RSTabsMenu.tsx | 5 +- .../ViewConstituents/ConstituentsTable.tsx | 6 +- .../ViewConstituents/ViewConstituents.tsx | 9 +- rsconcept/frontend/src/pages/RegisterPage.tsx | 4 +- .../pages/UserProfilePage/EditorPassword.tsx | 15 +- .../pages/UserProfilePage/EditorProfile.tsx | 57 ++++---- .../src/pages/UserProfilePage/UserTabs.tsx | 20 +-- .../UserProfilePage/ViewSubscriptions.tsx | 11 +- 51 files changed, 554 insertions(+), 648 deletions(-) create mode 100644 rsconcept/frontend/src/components/DataTable/TableBody.tsx create mode 100644 rsconcept/frontend/src/components/DataTable/TableFooter.tsx create mode 100644 rsconcept/frontend/src/components/DataTable/TableHeader.tsx diff --git a/rsconcept/frontend/README.md b/rsconcept/frontend/README.md index 8cbcd381..01cc86e4 100644 --- a/rsconcept/frontend/README.md +++ b/rsconcept/frontend/README.md @@ -9,7 +9,7 @@ Styling conventions 
   - layer: z-position
   - outer layout: fixed bottom-1/2 left-0 -translate-x-1/2
-  - rectangle: mt-3 w-full min-w-10 h-fit
+  - rectangle: mt-3 w-full min-w-10 h-fit flex-grow
   - inner layout: px-3 py-2 flex flex-col gap-3 justify-start items-center
   - overflow behavior: overflow-auto
   - border: borer-2 outline-none shadow-md
diff --git a/rsconcept/frontend/src/App.tsx b/rsconcept/frontend/src/App.tsx
index 73feda82..00349130 100644
--- a/rsconcept/frontend/src/App.tsx
+++ b/rsconcept/frontend/src/App.tsx
@@ -1,4 +1,3 @@
-import clsx from 'clsx';
 import { createBrowserRouter, Outlet, RouterProvider } from 'react-router-dom';
 
 import ConceptToaster from './components/ConceptToaster';
@@ -19,14 +18,10 @@ import UserProfilePage from './pages/UserProfilePage';
 import { globalIDs } from './utils/constants';
 
 function Root() {
-  const { noNavigation, noFooter, viewportHeight, mainHeight, showScroll } = useConceptTheme();
+  const { viewportHeight, mainHeight, showScroll } = useConceptTheme();
   return (
   
-  

+  

 
     
 
     

       

         
       

       
-    {(!noNavigation && !noFooter) ? 
 : null}
+    

     

   

   );
diff --git a/rsconcept/frontend/src/components/Common/Dropdown.tsx b/rsconcept/frontend/src/components/Common/Dropdown.tsx
index 17119d1d..3d310976 100644
--- a/rsconcept/frontend/src/components/Common/Dropdown.tsx
+++ b/rsconcept/frontend/src/components/Common/Dropdown.tsx
@@ -18,7 +18,7 @@ function Dropdown({
     layer='z-modal-tooltip'
     position='mt-3'
     className={clsx(
-      'flex flex-col items-stretch justify-start',
+      'flex flex-col items-stretch',
       'border rounded-md shadow-lg',
       'text-sm',
       'clr-input',
diff --git a/rsconcept/frontend/src/components/Common/Modal.tsx b/rsconcept/frontend/src/components/Common/Modal.tsx
index 5fa741b5..f9f0cf56 100644
--- a/rsconcept/frontend/src/components/Common/Modal.tsx
+++ b/rsconcept/frontend/src/components/Common/Modal.tsx
@@ -59,7 +59,7 @@ function Modal({
         'clr-app'
       )}
     >
-      
+      
         }
diff --git a/rsconcept/frontend/src/components/Common/SubmitButton.tsx b/rsconcept/frontend/src/components/Common/SubmitButton.tsx
index 217a8d6a..729e7e4e 100644
--- a/rsconcept/frontend/src/components/Common/SubmitButton.tsx
+++ b/rsconcept/frontend/src/components/Common/SubmitButton.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 
 interface SubmitButtonProps
-extends Omit, 'className' | 'children' | 'title'> {
+extends Omit, 'children' | 'title'> {
   text?: string
   tooltip?: string
   loading?: boolean
@@ -10,21 +10,21 @@ extends Omit, 'className' | 'child
 }
 
 function SubmitButton({
-  text = 'ОК', icon, disabled, tooltip, loading,
+  text = 'ОК', icon, disabled, tooltip, loading, className,
   dimensions = 'w-fit h-fit', ...restProps
 }: SubmitButtonProps) {
   return (
   
);
diff --git a/rsconcept/frontend/src/components/Icons.tsx b/rsconcept/frontend/src/components/Icons.tsx
index e2a56ef0..f5401127 100644
--- a/rsconcept/frontend/src/components/Icons.tsx
+++ b/rsconcept/frontend/src/components/Icons.tsx
@@ -27,62 +27,6 @@ function IconSVG({ viewbox, size = '1.5rem', className, props, children }: IconS
   );
 }
 
-export function SubscribedIcon(props: IconProps) {
-  return (
-    
-      
-    
-  );
-}
-
-export function NotSubscribedIcon(props: IconProps) {
-  return (
-    
-      
-    
-  );
-}
-
-export function ASTNetworkIcon(props: IconProps) {
-  return (
-    
-      
-    
-  );
-}
-
-export function GroupIcon(props: IconProps) {
-  return (
-    
-      
-    
-  );
-}
-
-export function ShareIcon(props: IconProps) {
-  return (
-    
-      
-    
-  );
-}
-
-export function SortIcon(props: IconProps) {
-  return (
-    
-      
-    
-  );
-}
-
-export function UserIcon(props: IconProps) {
-  return (
-    
-      
-    
-  );
-}
-
 export function EducationIcon(props: IconProps) {
   return (
     
@@ -91,56 +35,6 @@ export function EducationIcon(props: IconProps) {
   );
 }
 
-export function LibraryIcon(props: IconProps) {
-  return (
-    
-      
-      
-      
-    
-  );
-}
-
-export function PlusIcon(props: IconProps) {
-  return (
-    
-      
-    
-  );
-}
-
-export function ArrowLeftIcon(props: IconProps) {
-  return (
-    
-      
-    
-  );
-}
-
-export function ArrowRightIcon(props: IconProps) {
-  return (
-    
-      
-    
-  );
-}
-
-export function LetterAIcon(props: IconProps) {
-  return (
-    
-      
-    
-  );
-}
-
-export function LetterALinesIcon(props: IconProps) {
-  return (
-    
-      
-    
-  );
-}
-
 export function InDoorIcon(props: IconProps) {
   return (
     
@@ -150,22 +44,6 @@ export function InDoorIcon(props: IconProps) {
   );
 }
 
-export function DescendingIcon(props: IconProps) {
-  return (
-    
-      
-    
-  );
-}
-
-export function AscendingIcon(props: IconProps) {
-  return (
-    
-      
-    
-  );
-}
-
 export function CheckboxCheckedIcon() {
   return (
     
+    

       
{'Обращение к несуществующему API'}

       
     
);
@@ -32,7 +32,7 @@ function DescribeError({error} : {error: ErrorData}) {
   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call
   const isHtml = isResponseHtml(error.response);
   return (
-    

+    

       
Ошибка

       
{error.message}

       {error.response.data && (<>
diff --git a/rsconcept/frontend/src/components/Navigation/Navigation.tsx b/rsconcept/frontend/src/components/Navigation/Navigation.tsx
index 0737b1cc..aec86486 100644
--- a/rsconcept/frontend/src/components/Navigation/Navigation.tsx
+++ b/rsconcept/frontend/src/components/Navigation/Navigation.tsx
@@ -1,6 +1,8 @@
 import clsx from 'clsx';
+import { FaSquarePlus } from 'react-icons/fa6';
+import { IoLibrary } from 'react-icons/io5';
 
-import { EducationIcon, LibraryIcon, PlusIcon } from '@/components/Icons';
+import { EducationIcon } from '@/components/Icons';
 import { useConceptNavigation } from '@/context/NagivationContext';
 import { useConceptTheme } from '@/context/ThemeContext';
 
@@ -41,13 +43,13 @@ function Navigation () {
         }
+          icon={}
           onClick={navigateCreateNew}
         />
         }
+          icon={}
           onClick={navigateLibrary}
         />
         }
+      icon={}
       onClick={menu.toggle}
     /> : null}
     

diff --git a/rsconcept/frontend/src/components/Shared/ConstituentaPicker.tsx b/rsconcept/frontend/src/components/Shared/ConstituentaPicker.tsx
index 3cbb15b6..afd5fa17 100644
--- a/rsconcept/frontend/src/components/Shared/ConstituentaPicker.tsx
+++ b/rsconcept/frontend/src/components/Shared/ConstituentaPicker.tsx
@@ -87,23 +87,20 @@ function ConstituentaPicker({
       value={filterText}
       onChange={newValue => setFilterText(newValue)}
     />
-    

-      
-            
Список конституент пуст

-            
Измените параметры фильтра

-          
-        }
-        onRowClicked={onSelectValue}
-      />
-    

+      data={filteredData}
+      columns={columns}
+      conditionalRowStyles={conditionalRowStyles}
+      noDataComponent={
+        
+          
Список конституент пуст

+          
Измените параметры фильтра

+        
+      }
+      onRowClicked={onSelectValue}
+    />
   
);
 }
 
diff --git a/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/ArgumentsTab.tsx b/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/ArgumentsTab.tsx
index a753a574..ac4bd5f5 100644
--- a/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/ArgumentsTab.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/ArgumentsTab.tsx
@@ -149,29 +149,28 @@ function ArgumentsTab({ state, schema, partialUpdate  }: ArgumentsTabProps) {
 
   return (
   

-    

-      
-            Аргументы отсутствуют
-          

-        }
-        onRowClicked={handleSelectArgument}
-      />
-    

+    
+          Аргументы отсутствуют
+        

+      }
+      onRowClicked={handleSelectArgument}
+    />
 
     

         }
+          icon={}
           disabled={!argumentValue || !selectedArgument}
           onClick={() => handleAssignArgument(selectedArgument!, argumentValue)}
         />
@@ -205,7 +204,7 @@ function ArgumentsTab({ state, schema, partialUpdate  }: ArgumentsTabProps) {
         }
+          icon={}
           onClick={() => selectedArgument ? handleClearArgument(selectedArgument) : undefined}
         />
       

diff --git a/rsconcept/frontend/src/dialogs/DlgEditReference/DlgEditReference.tsx b/rsconcept/frontend/src/dialogs/DlgEditReference/DlgEditReference.tsx
index e4c6beb2..2c0cb886 100644
--- a/rsconcept/frontend/src/dialogs/DlgEditReference/DlgEditReference.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgEditReference/DlgEditReference.tsx
@@ -76,24 +76,22 @@ function DlgEditReference({ hideWindow, items, initial, onSave }: DlgEditReferen
       

     
     
-    

-      
-      
-      
+    
+    
+    
 
-      
-      
-      
-    

+    
+    
+    
   
   );
 }
diff --git a/rsconcept/frontend/src/dialogs/DlgEditWordForms/DlgEditWordForms.tsx b/rsconcept/frontend/src/dialogs/DlgEditWordForms/DlgEditWordForms.tsx
index 62d247a2..c9e79288 100644
--- a/rsconcept/frontend/src/dialogs/DlgEditWordForms/DlgEditWordForms.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgEditWordForms/DlgEditWordForms.tsx
@@ -2,7 +2,7 @@
 
 import clsx from 'clsx';
 import { useLayoutEffect, useState } from 'react';
-import { BiCheck, BiChevronsDown } from 'react-icons/bi';
+import { BiCheck, BiChevronsDown, BiLeftArrow, BiRightArrow, BiX } from 'react-icons/bi';
 
 import Label from '@/components/Common/Label';
 import MiniButton from '@/components/Common/MiniButton';
@@ -10,7 +10,6 @@ import Modal from '@/components/Common/Modal';
 import Overlay from '@/components/Common/Overlay';
 import TextArea from '@/components/Common/TextArea';
 import HelpButton from '@/components/Help/HelpButton';
-import { ArrowLeftIcon, ArrowRightIcon } from '@/components/Icons';
 import SelectGrammeme from '@/components/Shared/SelectGrammeme';
 import useConceptText from '@/hooks/useConceptText';
 import { Grammeme, ITextRequest, IWordForm, IWordFormPlain } from '@/models/language';
@@ -118,6 +117,10 @@ function DlgEditWordForms({ hideWindow, target, onSave }: DlgEditWordFormsProps)
     });
   }
 
+  function handleResetAll() {
+    setForms([]);
+  }
+
   return (
    setInputText(event.target.value)}
         />
-        

-          }
-            disabled={textProcessor.loading || inputGrams.length == 0}
-            onClick={handleInflect}
-          />
+        

           }
             disabled={textProcessor.loading || !inputText}
             onClick={handleParse}
           />
+          }
+            disabled={textProcessor.loading || inputGrams.length == 0}
+            onClick={handleInflect}
+          />
         

       

       }
         disabled={textProcessor.loading || !inputText || inputGrams.length == 0}
         onClick={handleAddForm}
       />
       }
         disabled={textProcessor.loading || !inputText}
         onClick={handleGenerateLexeme}
@@ -197,25 +200,24 @@ function DlgEditWordForms({ hideWindow, target, onSave }: DlgEditWordFormsProps)
     
     
     

-      Заданные вручную словоформы [{forms.length}]
+      Заданные вручную словоформы [{forms.length}]
+      }
+        disabled={textProcessor.loading || forms.length === 0}
+        onClick={handleResetAll}
+      />
     

     
-    

     
-    

   );
 }
 
diff --git a/rsconcept/frontend/src/dialogs/DlgEditWordForms/WordFormsTable.tsx b/rsconcept/frontend/src/dialogs/DlgEditWordForms/WordFormsTable.tsx
index 242621bc..26892f7d 100644
--- a/rsconcept/frontend/src/dialogs/DlgEditWordForms/WordFormsTable.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgEditWordForms/WordFormsTable.tsx
@@ -1,10 +1,10 @@
 'use client';
 
+import clsx from 'clsx';
 import { useCallback, useMemo } from 'react';
 import { BiX } from 'react-icons/bi';
 
 import MiniButton from '@/components/Common/MiniButton';
-import Overlay from '@/components/Common/Overlay';
 import DataTable, { createColumnHelper } from '@/components/DataTable';
 import WordFormBadge from '@/components/Shared/WordFormBadge';
 import { IWordForm } from '@/models/language';
@@ -13,12 +13,11 @@ interface WordFormsTableProps {
   forms: IWordForm[]
   setForms: React.Dispatch>
   onFormSelect?: (form: IWordForm) => void
-  loading?: boolean
 }
 
 const columnHelper = createColumnHelper();
 
-function WordFormsTable({ forms, setForms, onFormSelect, loading }: WordFormsTableProps) {
+function WordFormsTable({ forms, setForms, onFormSelect }: WordFormsTableProps) {
   const handleDeleteRow = useCallback(
   (row: number) => {
     setForms(
@@ -34,10 +33,6 @@ function WordFormsTable({ forms, setForms, onFormSelect, loading }: WordFormsTab
     });
   }, [setForms]);
 
-  function handleResetAll() {
-    setForms([]);
-  }
-
   const columns = useMemo(
   () => [
     columnHelper.accessor('text', {
@@ -68,35 +63,31 @@ function WordFormsTable({ forms, setForms, onFormSelect, loading }: WordFormsTab
       cell: props => 
         }
+          icon={}
           onClick={() => handleDeleteRow(props.row.index)}
         />
     })
   ], [handleDeleteRow]);
     
   return (
-  <>
-    
-    }
-        disabled={loading || forms.length === 0}
-        onClick={handleResetAll}
-      />
-    
-    
-          
Список пуст

-          
Добавьте словоформу

-        
-      }
-      onRowClicked={onFormSelect}
-    />
-  );
+  
+        
Список пуст

+        
Добавьте словоформу

+      
+    }
+    onRowClicked={onFormSelect}
+  />);
 }
 
 export default WordFormsTable;
\ No newline at end of file
diff --git a/rsconcept/frontend/src/models/rslangAPI.ts b/rsconcept/frontend/src/models/rslangAPI.ts
index 1e89d096..969cfa69 100644
--- a/rsconcept/frontend/src/models/rslangAPI.ts
+++ b/rsconcept/frontend/src/models/rslangAPI.ts
@@ -39,7 +39,7 @@ export function inferTemplatedType(templateType: CstType, args: IArgumentValue[]
  * closing bracket ']' to determine the head and body parts.
  *
  * @example
- * const template = "[header] body content";
+ * const template = '[header] body content';
  * const result = splitTemplateDefinition(template);
  * // result: `{ head: 'header', body: 'body content' }`
  */
diff --git a/rsconcept/frontend/src/pages/CreateRSFormPage.tsx b/rsconcept/frontend/src/pages/CreateRSFormPage.tsx
index 06506757..7134c20b 100644
--- a/rsconcept/frontend/src/pages/CreateRSFormPage.tsx
+++ b/rsconcept/frontend/src/pages/CreateRSFormPage.tsx
@@ -127,7 +127,7 @@ function CreateRSFormPage() {
       value={common}
       setValue={value => setCommon(value ?? false)}
     />
-    

+    

       
+  

     {user?.is_staff ?
     

       Лендинг находится в разработке. Данная страница видна только пользователям с правами администратора.
diff --git a/rsconcept/frontend/src/pages/LibraryPage/ItemIcons.tsx b/rsconcept/frontend/src/pages/LibraryPage/ItemIcons.tsx
index ebf11c37..315de28a 100644
--- a/rsconcept/frontend/src/pages/LibraryPage/ItemIcons.tsx
+++ b/rsconcept/frontend/src/pages/LibraryPage/ItemIcons.tsx
@@ -1,6 +1,7 @@
 import clsx from 'clsx';
+import { BiCheckShield, BiShareAlt } from 'react-icons/bi';
+import { FiBell } from 'react-icons/fi';
 
-import { EducationIcon, GroupIcon, SubscribedIcon } from '@/components/Icons';
 import { ICurrentUser, ILibraryItem } from '@/models/library';
 import { prefixes } from '@/utils/constants';
 
@@ -20,15 +21,15 @@ function ItemIcons({ user, item }: ItemIconsProps) {
   >
     {(user && user.subscriptions.includes(item.id)) ?
     
-      
+      
      : null}
     {item.is_common ?
     
-      
+      
      : null}
     {item.is_canonical ?
     
-      
+      
      : null}
   
);
 }
diff --git a/rsconcept/frontend/src/pages/LibraryPage/SearchPanel.tsx b/rsconcept/frontend/src/pages/LibraryPage/SearchPanel.tsx
index 765c3051..687f7419 100644
--- a/rsconcept/frontend/src/pages/LibraryPage/SearchPanel.tsx
+++ b/rsconcept/frontend/src/pages/LibraryPage/SearchPanel.tsx
@@ -45,7 +45,7 @@ function SearchPanel({ total, filtered, query, setQuery, strategy, setFilter }:
   

@@ -61,7 +61,7 @@ function SearchPanel({ total, filtered, query, setQuery, strategy, setFilter }:
       
     

     

        setPassword(event.target.value)}
     />
 
-    

-      
-    

+    
     

       
       
diff --git a/rsconcept/frontend/src/pages/ManualsPage/ViewTopic.tsx b/rsconcept/frontend/src/pages/ManualsPage/ViewTopic.tsx
index 28dc8791..e08b8a65 100644
--- a/rsconcept/frontend/src/pages/ManualsPage/ViewTopic.tsx
+++ b/rsconcept/frontend/src/pages/ManualsPage/ViewTopic.tsx
@@ -7,7 +7,7 @@ interface ViewTopicProps {
 
 function ViewTopic({ topic }: ViewTopicProps) {
   return (
-  

+  

     
   
);
 }
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/ConstituentaToolbar.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/ConstituentaToolbar.tsx
index 5a590975..36f4454c 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/ConstituentaToolbar.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/ConstituentaToolbar.tsx
@@ -1,8 +1,8 @@
 'use client';
 
 import { useMemo } from 'react';
-import { BiDiamond, BiDuplicate, BiPlusCircle, BiReset, BiTrash } from 'react-icons/bi';
-import { FiSave } from "react-icons/fi";
+import { BiDuplicate, BiPlusCircle, BiReset, BiTrash } from 'react-icons/bi';
+import { FiSave } from 'react-icons/fi';
 
 import MiniButton from '@/components/Common/MiniButton';
 import Overlay from '@/components/Common/Overlay';
@@ -19,17 +19,16 @@ interface ConstituentaToolbarProps {
   onDelete: () => void
   onClone: () => void
   onCreate: () => void
-  onTemplates: () => void
 }
 
 function ConstituentaToolbar({
   isMutable, isModified,
   onSubmit, onReset,
-  onDelete, onClone, onCreate, onTemplates
+  onDelete, onClone, onCreate
 }: ConstituentaToolbarProps) {
   const canSave = useMemo(() => (isModified && isMutable), [isModified, isMutable]);
   return (
-  
+    
     } 
     />
-    }
-      disabled={!isMutable}
-      onClick={onTemplates}
-    />
      void
   onEditTerm: () => void
   onDeleteCst: (selected: number[], callback?: (items: number[]) => void) => void
-  onTemplates: (insertAfter?: number) => void
 }
 
 function EditorConstituenta({
   isMutable, isModified, setIsModified, activeID, activeCst, onEditTerm,
-  onCreateCst, onRenameCst, onOpenEdit, onDeleteCst, onTemplates
+  onCreateCst, onRenameCst, onOpenEdit, onDeleteCst
 }: EditorConstituentaProps) {
   const windowSize = useWindowSize();
   const { schema } = useRSForm();
@@ -114,13 +113,13 @@ function EditorConstituenta({
 
   function processAltKey(code: string): boolean {
     switch (code) {
-      case 'KeyE':   onTemplates(); return true;
       case 'KeyV':   handleClone(); return true;
     }
     return false;
   }
 
-  return (<>
+  return (
+  <>
      onTemplates(activeID)}
     />
     

-      

-        
-      

+      
       {(windowSize.width && windowSize.width >= SIDELIST_HIDE_THRESHOLD) ?
-      

-        
-      
 : null}
+      : null}
     

   );
 }
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx
index 2211af9c..b1f997f4 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx
@@ -1,6 +1,7 @@
 'use client';
 
-import { Dispatch, SetStateAction, useLayoutEffect, useState } from 'react';
+import clsx from 'clsx';
+import { Dispatch, SetStateAction, useEffect, useLayoutEffect, useState } from 'react';
 import { FiSave } from 'react-icons/fi';
 import { LiaEdit } from 'react-icons/lia';
 import { toast } from 'react-toastify';
@@ -45,7 +46,7 @@ function FormConstituenta({
   const [convention, setConvention] = useState('');
   const [typification, setTypification] = useState('N/A');
   
-  useLayoutEffect(
+  useEffect(
   () => {
     if (!constituenta) {
       setIsModified(false);
@@ -105,7 +106,10 @@ function FormConstituenta({
   }
 
   return (<>
-  
+  
     }
     />
-    

+    

       Имя 
       {constituenta?.alias ?? ''}
     

@@ -125,7 +129,10 @@ function FormConstituenta({
     />
   
   

      setTerm(newValue)}
     />
-