From ff564704fec2ecaa7d4fa7e5cb867f6b5d349e02 Mon Sep 17 00:00:00 2001
From: IRBorisov <8611739+IRBorisov@users.noreply.github.com>
Date: Thu, 20 Jul 2023 17:11:03 +0300
Subject: [PATCH] Prepare RSForm edit UI

---
 rsconcept/frontend/src/App.tsx                |   1 +
 .../frontend/src/components/Common/Button.tsx |  28 +-
 .../src/components/Common/Checkbox.tsx        |  10 +-
 .../src/components/Common/ConceptTab.tsx      |   2 +-
 .../src/components/Common/DataTableThemed.tsx |  13 +-
 .../src/components/Common/Divider.tsx         |  15 +-
 .../src/components/Common/Dropdown.tsx        |  17 +
 .../src/components/Common/TextArea.tsx        |  13 +-
 .../src/components/Common/TextInput.tsx       |   7 +-
 rsconcept/frontend/src/components/Footer.tsx  |  12 +-
 rsconcept/frontend/src/components/Icons.tsx   | 171 +++++---
 .../src/components/Navigation/Logo.tsx        |   2 +-
 .../Navigation/NavigationButton.tsx           |   2 +-
 .../components/Navigation/UserDropdown.tsx    |  27 +-
 .../src/components/Navigation/UserMenu.tsx    |  20 +-
 .../frontend/src/context/AuthContext.tsx      |   4 +-
 .../frontend/src/context/RSFormContext.tsx    |  41 +-
 .../frontend/src/context/ThemeContext.tsx     |   1 +
 .../frontend/src/context/UsersContext.tsx     |   4 +-
 .../frontend/src/hooks/useCheckExpression.ts  |  32 ++
 .../frontend/src/hooks/useClickedOutside.ts   |   8 +-
 rsconcept/frontend/src/hooks/useDropdown.ts   |  19 +
 rsconcept/frontend/src/hooks/useNewRSForm.ts  |   2 +-
 .../frontend/src/hooks/useRSFormDetails.ts    |   4 +-
 rsconcept/frontend/src/hooks/useRSForms.ts    |   4 +-
 .../frontend/src/hooks/useUserProfile.ts      |   4 +-
 rsconcept/frontend/src/index.css              |  20 +
 rsconcept/frontend/src/models.ts              | 265 ------------
 rsconcept/frontend/src/pages/LoginPage.tsx    |   2 +-
 rsconcept/frontend/src/pages/ManualsPage.tsx  |   2 +-
 .../frontend/src/pages/RSFormCreatePage.tsx   |   2 +-
 .../pages/RSFormPage/ConstituentEditor.tsx    |  32 +-
 .../pages/RSFormPage/ConstituentsSideList.tsx | 116 ++++++
 .../pages/RSFormPage/ConstituentsTable.tsx    | 161 +++++---
 .../src/pages/RSFormPage/ExpressionEditor.tsx | 130 +++++-
 .../src/pages/RSFormPage/ParsingResult.tsx    |  21 +
 .../src/pages/RSFormPage/RSEditButton.tsx     |  28 ++
 .../src/pages/RSFormPage/RSFormCard.tsx       |   6 +-
 .../src/pages/RSFormPage/RSFormStats.tsx      |   2 +-
 .../src/pages/RSFormPage/RSFormTabs.tsx       |  53 +--
 .../src/pages/RSFormPage/StatusBar.tsx        |  32 ++
 .../src/pages/RSFormPage/TablistTools.tsx     |  61 +++
 .../src/pages/RSFormsPage/RSFormsTable.tsx    |   2 +-
 .../frontend/src/pages/RSFormsPage/index.tsx  |   2 +-
 rsconcept/frontend/src/pages/RegisterPage.tsx |   4 +-
 .../src/pages/UserProfilePage/UserProfile.tsx |   2 +-
 .../src/pages/UserProfilePage/index.tsx       |   2 +-
 .../frontend/src/{ => utils}/backendAPI.ts    |  13 +-
 .../frontend/src/{ => utils}/constants.ts     |   0
 rsconcept/frontend/src/utils/models.ts        | 381 ++++++++++++++++++
 rsconcept/frontend/src/utils/staticUI.ts      | 253 ++++++++++++
 rsconcept/frontend/src/{ => utils}/utils.tsx  |   0
 52 files changed, 1562 insertions(+), 493 deletions(-)
 create mode 100644 rsconcept/frontend/src/components/Common/Dropdown.tsx
 create mode 100644 rsconcept/frontend/src/hooks/useCheckExpression.ts
 create mode 100644 rsconcept/frontend/src/hooks/useDropdown.ts
 delete mode 100644 rsconcept/frontend/src/models.ts
 create mode 100644 rsconcept/frontend/src/pages/RSFormPage/ConstituentsSideList.tsx
 create mode 100644 rsconcept/frontend/src/pages/RSFormPage/ParsingResult.tsx
 create mode 100644 rsconcept/frontend/src/pages/RSFormPage/RSEditButton.tsx
 create mode 100644 rsconcept/frontend/src/pages/RSFormPage/StatusBar.tsx
 create mode 100644 rsconcept/frontend/src/pages/RSFormPage/TablistTools.tsx
 rename rsconcept/frontend/src/{ => utils}/backendAPI.ts (94%)
 rename rsconcept/frontend/src/{ => utils}/constants.ts (100%)
 create mode 100644 rsconcept/frontend/src/utils/models.ts
 create mode 100644 rsconcept/frontend/src/utils/staticUI.ts
 rename rsconcept/frontend/src/{ => utils}/utils.tsx (100%)

diff --git a/rsconcept/frontend/src/App.tsx b/rsconcept/frontend/src/App.tsx
index cab942af..facc4913 100644
--- a/rsconcept/frontend/src/App.tsx
+++ b/rsconcept/frontend/src/App.tsx
@@ -22,6 +22,7 @@ function App() {
         className='mt-[4rem] text-sm'
         autoClose={3000}
         draggable={false}
+        pauseOnFocusLoss={false}
         limit={5}
       />
       <main className='min-h-[calc(100vh-6.8rem)] px-2 h-fit'>
diff --git a/rsconcept/frontend/src/components/Common/Button.tsx b/rsconcept/frontend/src/components/Common/Button.tsx
index 8a64e29d..d018df66 100644
--- a/rsconcept/frontend/src/components/Common/Button.tsx
+++ b/rsconcept/frontend/src/components/Common/Button.tsx
@@ -1,4 +1,7 @@
+import { MouseEventHandler } from 'react'
+
 interface ButtonProps {
+  id?: string
   text?: string
   icon?: React.ReactNode
   tooltip?: string
@@ -6,26 +9,31 @@ interface ButtonProps {
   dense?: boolean
   loading?: boolean
   colorClass?: string
-  onClick?: () => void
+  borderClass?: string
+  onClick?: MouseEventHandler<HTMLButtonElement> | undefined
 }
 
-function Button({text, icon, dense=false, disabled=false, tooltip, colorClass, loading, onClick}: ButtonProps) {
-  const padding = dense ? 'px-1 py-1' : 'px-3 py-2 '
+function Button({id, text, icon, tooltip,
+  dense, disabled,
+  colorClass, borderClass='border rounded',
+  loading, onClick
+}: ButtonProps) {
+  const padding = dense ? 'px-1' : 'px-3 py-2'
   const cursor = 'disabled:cursor-not-allowed ' + (loading ? 'cursor-progress ': 'cursor-pointer ')
-  const baseColor = 'dark:disabled:text-gray-800 disabled:text-gray-400 bg-gray-200 hover:bg-gray-300 dark:bg-gray-500 dark:hover:bg-gray-400'
-  const color = baseColor + ' ' + (colorClass || 'text-gray-600 dark:text-zinc-50')
+  const baseColor = 'dark:disabled:text-zinc-400 disabled:text-gray-400 bg-gray-100 hover:bg-gray-300 dark:bg-gray-600 dark:hover:bg-gray-400'
+  const color = baseColor + ' ' + (colorClass || 'text-gray-500 dark:text-zinc-200')
   return (
-    <button
+    <button id={id}
       type='button'
       disabled={disabled}
       onClick={onClick}
       title={tooltip}
-      className={padding + 
-        'inline-flex items-center  border rounded ' + cursor + color
+      className={padding + ' ' + borderClass + ' ' +
+        'inline-flex items-center gap-2 align-middle justify-center w-fit h-fit ' + cursor + color
       }
     >
-      <span>{icon}</span>
-      {text && <span className={'font-bold' + (icon ? ' ml-2': '')}>{text}</span>}
+      {icon && <span>{icon}</span>}
+      {text && <span className={'font-semibold'}>{text}</span>}
     </button>
   )
 }
diff --git a/rsconcept/frontend/src/components/Common/Checkbox.tsx b/rsconcept/frontend/src/components/Common/Checkbox.tsx
index c08a753c..8e928d60 100644
--- a/rsconcept/frontend/src/components/Common/Checkbox.tsx
+++ b/rsconcept/frontend/src/components/Common/Checkbox.tsx
@@ -1,8 +1,8 @@
 import Label from './Label';
 
-interface CheckboxProps {
-  id: string
-  label: string
+export interface CheckboxProps {
+  id?: string
+  label?: string
   required?: boolean
   disabled?: boolean
   widthClass?: string
@@ -20,11 +20,11 @@ function Checkbox({id, required, disabled, label, widthClass='w-full', value, on
         checked={value}
         onChange={onChange}
       />
-      <Label 
+      { label && <Label 
         text={label}
         required={required}
         htmlFor={id}
-      />
+      />}
       <svg
         className='absolute hidden w-3 h-3 mt-1 ml-0.5 text-white pointer-events-none peer-checked:block'
         viewBox='0 0 512 512'
diff --git a/rsconcept/frontend/src/components/Common/ConceptTab.tsx b/rsconcept/frontend/src/components/Common/ConceptTab.tsx
index 2b27a1bd..d0e0dee2 100644
--- a/rsconcept/frontend/src/components/Common/ConceptTab.tsx
+++ b/rsconcept/frontend/src/components/Common/ConceptTab.tsx
@@ -5,7 +5,7 @@ function ConceptTab({children, className, ...otherProps} : TabProps) {
   return (
   <Tab 
     className={
-      'px-2 py-1 text-sm text-gray-600 bg-gray-100 hover:cursor-pointer dark:text-zinc-200 hover:bg-gray-300 dark:bg-gray-600 dark:hover:bg-gray-400'
+      'px-2 py-1 text-sm text-gray-600 hover:cursor-pointer dark:text-zinc-200 hover:bg-gray-300  dark:hover:bg-gray-400'
       + ' ' + className
     }
     {...otherProps}
diff --git a/rsconcept/frontend/src/components/Common/DataTableThemed.tsx b/rsconcept/frontend/src/components/Common/DataTableThemed.tsx
index 2d27935e..aa298bb5 100644
--- a/rsconcept/frontend/src/components/Common/DataTableThemed.tsx
+++ b/rsconcept/frontend/src/components/Common/DataTableThemed.tsx
@@ -1,5 +1,4 @@
-import DataTable, { createTheme } from 'react-data-table-component';
-import { TableProps } from 'react-data-table-component';
+import DataTable, { createTheme, TableProps } from 'react-data-table-component';
 import { useTheme } from '../../context/ThemeContext';
 
 export interface SelectionInfo<T> {
@@ -18,9 +17,13 @@ createTheme('customDark', {
     default: '#002b36',
   },
   context: {
-    background: '#cb4b16',
+    background: '#3e014d',
     text: 'rgba(228, 228, 231, 0.87)',
   },
+  highlightOnHover: {
+    default: '#3e014d',
+		text: 'rgba(228, 228, 231, 1)',
+  },
   divider: {
     default: '#6b6b6b',
   },
@@ -28,6 +31,10 @@ createTheme('customDark', {
 		default: '#004859',
 		text: 'rgba(228, 228, 231, 1)',
 	},
+  selected: {
+		default: '#4b015c',
+		text: 'rgba(228, 228, 231, 1)',
+	},
 }, 'dark');
 
 function DataTableThemed<T>({theme, ...props}: TableProps<T>) {
diff --git a/rsconcept/frontend/src/components/Common/Divider.tsx b/rsconcept/frontend/src/components/Common/Divider.tsx
index 6f4e07eb..2f4f1a45 100644
--- a/rsconcept/frontend/src/components/Common/Divider.tsx
+++ b/rsconcept/frontend/src/components/Common/Divider.tsx
@@ -1,9 +1,14 @@
-function Divider() {
+interface DividerProps {
+  vertical?: boolean
+  margins?: string
+}
+
+function Divider({vertical, margins='2'}: DividerProps) {
   return (
-    <div 
-      className='my-2 border-b'
-      
-    />
+    <>
+    {vertical && <div className={`mx-${margins} border-x-2`} />}
+    {!vertical && <div className={`my-${margins} border-y-2`} />}
+    </>
   );
 }
 
diff --git a/rsconcept/frontend/src/components/Common/Dropdown.tsx b/rsconcept/frontend/src/components/Common/Dropdown.tsx
new file mode 100644
index 00000000..da455a44
--- /dev/null
+++ b/rsconcept/frontend/src/components/Common/Dropdown.tsx
@@ -0,0 +1,17 @@
+interface DropdownProps {
+  children: React.ReactNode
+  stretchLeft?: boolean
+  widthClass?: string
+}
+
+function Dropdown({children, widthClass='w-fit', stretchLeft}: DropdownProps) {
+  return (
+    <div className='relative'>
+    <div className={`absolute ${stretchLeft ? 'right-0': 'left-0'} z-10 flex flex-col items-stretch justify-start p-2 mt-2 text-sm origin-top-right bg-white border border-gray-100 divide-y rounded-md shadow-lg dark:border-gray-500 dark:bg-gray-900 ${widthClass}`}>
+      {children}
+    </div>
+    </div>
+  );
+}
+
+export default Dropdown;
\ No newline at end of file
diff --git a/rsconcept/frontend/src/components/Common/TextArea.tsx b/rsconcept/frontend/src/components/Common/TextArea.tsx
index 66f6229d..47913b15 100644
--- a/rsconcept/frontend/src/components/Common/TextArea.tsx
+++ b/rsconcept/frontend/src/components/Common/TextArea.tsx
@@ -5,14 +5,21 @@ interface TextAreaProps {
   label: string
   required?: boolean
   disabled?: boolean
+  spellCheck?: boolean
   placeholder?: string
   widthClass?: string
   rows?: number
   value?: any
   onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void
+  onFocus?: () => void
 }
 
-function TextArea({id, required, label, disabled, placeholder, widthClass='w-full', rows=4, value, onChange}: TextAreaProps) {
+function TextArea({
+  id, label, placeholder,
+  required, spellCheck, disabled, 
+  widthClass='w-full', rows=4, value,
+  onChange, onFocus
+}: TextAreaProps) {
   return (
     <div className='flex flex-col items-start [&:not(:first-child)]:mt-3'>
       <Label 
@@ -20,14 +27,16 @@ function TextArea({id, required, label, disabled, placeholder, widthClass='w-ful
         required={required}
         htmlFor={id}
       />
-      <textarea id='comment'
+      <textarea id={id}
           className={'px-3 py-2 mt-2 leading-tight border shadow dark:bg-gray-800 '+ widthClass}
           rows={rows}
           placeholder={placeholder}
           required={required}
           value={value}
           onChange={onChange}
+          onFocus={onFocus}
           disabled={disabled}
+          spellCheck={spellCheck}
       />
     </div>
   );
diff --git a/rsconcept/frontend/src/components/Common/TextInput.tsx b/rsconcept/frontend/src/components/Common/TextInput.tsx
index 492b9bfa..9b0b3a32 100644
--- a/rsconcept/frontend/src/components/Common/TextInput.tsx
+++ b/rsconcept/frontend/src/components/Common/TextInput.tsx
@@ -10,9 +10,13 @@ interface TextInputProps {
   widthClass?: string
   value?: any
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
+  onFocus?: () => void
 }
 
-function TextInput({id, type, required, label, disabled, placeholder, widthClass='w-full', value, onChange}: TextInputProps) {
+function TextInput({
+  id, type, required, label, disabled, placeholder, widthClass='w-full', value,
+  onChange, onFocus
+}: TextInputProps) {
   return (
     <div className='flex flex-col items-start [&:not(:first-child)]:mt-3'>
       <Label 
@@ -27,6 +31,7 @@ function TextInput({id, type, required, label, disabled, placeholder, widthClass
         placeholder={placeholder}
         value={value}
         onChange={onChange}
+        onFocus={onFocus}
         disabled={disabled}
       />
     </div>
diff --git a/rsconcept/frontend/src/components/Footer.tsx b/rsconcept/frontend/src/components/Footer.tsx
index 6b5ea01a..9b4ea119 100644
--- a/rsconcept/frontend/src/components/Footer.tsx
+++ b/rsconcept/frontend/src/components/Footer.tsx
@@ -1,24 +1,24 @@
 import { Link } from 'react-router-dom';
-import { urls } from '../constants';
+import { urls } from '../utils/constants';
 
 function Footer() {
   return (
     <footer className='z-50 px-4 py-4 text-gray-600 bg-white border-t-2 border-gray-400 dark:bg-gray-700 dark:border-gray-300 dark:text-gray-300'>
       <div className='flex items-stretch justify-center w-full mx-auto'>
         <div className='px-4 underline'>
-          <Link to='manuals'>Справка</Link> <br/>
-          <Link to='rsforms?filter=common'>Библиотека КС</Link> <br/>
+          <Link to='manuals' tabIndex={-1}>Справка</Link> <br/>
+          <Link to='rsforms?filter=common' tabIndex={-1}>Библиотека КС</Link> <br/>
         </div>
         <div className='px-4 underline border-gray-400 border-x dark:border-gray-300'>
           <ul>
             <li>
-              <a href={urls.concept}>Центр Концепт</a>
+              <a href={urls.concept} tabIndex={-1}>Центр Концепт</a>
             </li>
             <li>
-              <a href={urls.exteor64}>Exteor64bit</a>
+              <a href={urls.exteor64} tabIndex={-1}>Exteor64bit</a>
             </li>
             <li>
-              <a href={urls.exteor32}>Exteor32bit</a>
+              <a href={urls.exteor32} tabIndex={-1}>Exteor32bit</a>
             </li>
           </ul>
         </div>
diff --git a/rsconcept/frontend/src/components/Icons.tsx b/rsconcept/frontend/src/components/Icons.tsx
index ee9a2e3a..1b64fd32 100644
--- a/rsconcept/frontend/src/components/Icons.tsx
+++ b/rsconcept/frontend/src/components/Icons.tsx
@@ -2,15 +2,23 @@
 
 interface IconSVGProps {
   viewbox: string
-  rectangle?: string
+  size?: number
   props?: React.SVGProps<SVGSVGElement>
   children: React.ReactNode
 }
 
-function IconSVG({viewbox, rectangle='w-6 h-6', props, children} : IconSVGProps) {
+export interface IconProps {
+  size?: number
+}
+
+function IconSVG({viewbox, size=6, props, children} : IconSVGProps) {
+  const width = `${size*1/4}rem`
+  const sizeClass = `w-[${width}] h-[${width}]`;
   return (
     <svg
-      className={rectangle}
+      width={width}
+      height={width}
+      className={sizeClass}
       fill='currentColor'
       viewBox={viewbox}
       {...props}
@@ -20,137 +28,163 @@ function IconSVG({viewbox, rectangle='w-6 h-6', props, children} : IconSVGProps)
   );
 }
 
-export function MagnifyingGlassIcon() {
+export function MagnifyingGlassIcon({size}: IconProps) {
   return (
-      <IconSVG viewbox='0 0 20 20' rectangle='w-5 h-5'>
+      <IconSVG viewbox='0 0 20 20' size={size || 5}>
         <path d='M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z'/>
       </IconSVG>
     );
 }
 
-export function BellIcon() {
+export function BellIcon({size}: IconProps) {
   return (
-    <IconSVG viewbox='0 0 20 20'> 
+    <IconSVG viewbox='0 0 20 20' size={size}> 
       <path d='M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z' />
     </IconSVG>
   );
 }
 
-export function SquaresIcon() {
+export function EyeIcon({size}: IconProps) {
   return (
-    <IconSVG viewbox='0 0 20 20'> 
+    <IconSVG viewbox='0 0 1024 1024' size={size}> 
+      <path d='M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z' />
+    </IconSVG>
+  );
+}
+
+export function EyeOffIcon({size}: IconProps) {
+  return (
+    <IconSVG viewbox='0 0 1024 1024' size={size}>
+      <path d='M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z'/>
+      <path d='M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z' />
+    </IconSVG>
+  );
+}
+
+export function PenIcon({size}: IconProps) {
+  return (
+    <IconSVG viewbox='0 0 16 16' size={size}> 
+      <path d='M15.502 1.94a.5.5 0 010 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 01.707 0l1.293 1.293zm-1.75 2.456l-2-2L4.939 9.21a.5.5 0 00-.121.196l-.805 2.414a.25.25 0 00.316.316l2.414-.805a.5.5 0 00.196-.12l6.813-6.814z' />
+      <path d='M1 13.5A1.5 1.5 0 002.5 15h11a1.5 1.5 0 001.5-1.5v-6a.5.5 0 00-1 0v6a.5.5 0 01-.5.5h-11a.5.5 0 01-.5-.5v-11a.5.5 0 01.5-.5H9a.5.5 0 000-1H2.5A1.5 1.5 0 001 2.5v11z' />
+    </IconSVG>
+  );
+}
+
+export function SquaresIcon({size}: IconProps) {
+  return (
+    <IconSVG viewbox='0 0 20 20' size={size}> 
       <path d='M5 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2H5zM5 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2H5zM11 5a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V5zM11 13a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z' />
     </IconSVG>
   );
 }
 
-export function GroupIcon() {
+export function GroupIcon({size}: IconProps) {
   return (
-    <IconSVG viewbox='0 0 20 20'> 
+    <IconSVG viewbox='0 0 20 20' size={size}> 
       <path d='M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z' />
     </IconSVG>
   );
 }
 
-export function FrameIcon() {
+export function FrameIcon({size}: IconProps) {
   return (
-    <IconSVG viewbox='0 0 20 20'> 
+    <IconSVG viewbox='0 0 20 20' size={size}> 
       <path d='M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm0 2h10v7h-2l-1 2H8l-1-2H5V5z' />
     </IconSVG>
   );
 }
 
-export function AsteriskIcon() {
+export function AsteriskIcon({size}: IconProps) {
   return (
-    <IconSVG viewbox='0 0 20 20'> 
+    <IconSVG viewbox='0 0 20 20' size={size}> 
       <path d='M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z' />
     </IconSVG>
   );
 }
 
-export function MenuIcon() {
+export function MenuIcon({size}: IconProps) {
   return (
-    <IconSVG viewbox='0 0 24 24'> 
-      <path d='M19 17H5c-1.103 0-2 .897-2 2s.897 2 2 2h14c1.103 0 2-.897 2-2s-.897-2-2-2zm0-7H5c-1.103 0-2 .897-2 2s.897 2 2 2h14c1.103 0 2-.897 2-2s-.897-2-2-2zm0-7H5c-1.103 0-2 .897-2 2s.897 2 2 2h14c1.103 0 2-.897 2-2s-.897-2-2-2z' />
+    <IconSVG viewbox='0 0 24 24' size={size}> 
+      <path d='M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z' />
     </IconSVG>
   );
 }
 
-export function ShareIcon() {
+export function ShareIcon({size}: IconProps) {
   return (
-    <IconSVG viewbox='0 0 24 24'> 
+    <IconSVG viewbox='0 0 24 24' size={size}> 
       <path d='M5.5 15a3.51 3.51 0 002.36-.93l6.26 3.58a3.06 3.06 0 00-.12.85 3.53 3.53 0 101.14-2.57l-6.26-3.58a2.74 2.74 0 00.12-.76l6.15-3.52A3.49 3.49 0 1014 5.5a3.35 3.35 0 00.12.85L8.43 9.6A3.5 3.5 0 105.5 15zm12 2a1.5 1.5 0 11-1.5 1.5 1.5 1.5 0 011.5-1.5zm0-13A1.5 1.5 0 1116 5.5 1.5 1.5 0 0117.5 4zm-12 6A1.5 1.5 0 114 11.5 1.5 1.5 0 015.5 10z' />
     </IconSVG>
   );
 }
 
-export function FilterCogIcon() {
+export function FilterCogIcon({size}: IconProps) {
   return (
-    <IconSVG viewbox='0 0 24 24'> 
+    <IconSVG viewbox='0 0 24 24' size={size}> 
       <path d='M22.77 19.32l-1.07-.82c.02-.17.04-.33.04-.5s-.01-.33-.04-.5l1.06-.82a.26.26 0 00.06-.32l-1-1.73c-.06-.13-.19-.13-.32-.13l-1.23.5c-.27-.18-.54-.35-.85-.47l-.19-1.32A.236.236 0 0019 13h-2a.26.26 0 00-.26.21l-.19 1.32c-.3.13-.59.29-.85.47l-1.24-.5c-.11 0-.24 0-.31.13l-1 1.73c-.06.11-.04.24.06.32l1.06.82a4.193 4.193 0 000 1l-1.06.82a.26.26 0 00-.06.32l1 1.73c.06.13.19.13.31.13l1.24-.5c.26.18.54.35.85.47l.19 1.32c.02.12.12.21.26.21h2c.11 0 .22-.09.24-.21l.19-1.32c.3-.13.57-.29.84-.47l1.23.5c.13 0 .26 0 .33-.13l1-1.73a.26.26 0 00-.06-.32M18 19.5c-.84 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5M3 3c-.22 0-.43.08-.62.22a1 1 0 00-.17 1.4L7.97 12H8v5.87c-.04.29.06.6.29.83l2.01 2.01c.35.35.89.37 1.28.09-.38-.89-.58-1.84-.58-2.8 0-1.27.35-2.5 1-3.6V12h.03l5.76-7.38a1 1 0 00-.17-1.4c-.19-.14-.4-.22-.62-.22H3z' />
     </IconSVG>
   );
 }
 
-export function FilterIcon() {
+export function FilterIcon({size}: IconProps) {
   return (
-    <IconSVG viewbox='0 0 24 24'> 
+    <IconSVG viewbox='0 0 24 24' size={size}> 
       <path d='M22 3H2l8 9.46V19l4 2v-8.54L22 3z' />
     </IconSVG>
   );
 }
 
-export function SortIcon() {
+export function SortIcon({size}: IconProps) {
   return (
-    <IconSVG viewbox='0 0 24 24'> 
+    <IconSVG viewbox='0 0 24 24' size={size}> 
       <path d='M8 16H4l6 6V2H8zm6-11v17h2V8h4l-6-6z' />
     </IconSVG>
   );
 }
 
-export function BookmarkIcon() {
+export function BookmarkIcon({size}: IconProps) {
   return (
-    <IconSVG viewbox='0 0 20 20'> 
+    <IconSVG viewbox='0 0 20 20' size={size}> 
       <path d='M5 2a2 2 0 00-2 2v14l3.5-2 3.5 2 3.5-2 3.5 2V4a2 2 0 00-2-2H5zm2.5 3a1.5 1.5 0 100 3 1.5 1.5 0 000-3zm6.207.293a1 1 0 00-1.414 0l-6 6a1 1 0 101.414 1.414l6-6a1 1 0 000-1.414zM12.5 10a1.5 1.5 0 100 3 1.5 1.5 0 000-3z' />
     </IconSVG>
   );
 }
 
-export function UserIcon() {
+export function UserIcon({size}: IconProps) {
   return (
-    <IconSVG viewbox='0 0 512 512'> 
+    <IconSVG viewbox='0 0 512 512' size={size}> 
       <path d='M399 384.2c-22.1-38.4-63.6-64.2-111-64.2h-64c-47.4 0-88.9 25.8-111 64.2 35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM512 256c0 141.4-114.6 256-256 256S0 397.4 0 256 114.6 0 256 0s256 114.6 256 256zm-256 16c39.8 0 72-32.2 72-72s-32.2-72-72-72-72 32.2-72 72 32.2 72 72 72z' />
     </IconSVG>
   );
 }
 
-export function EducationIcon() {
+export function EducationIcon({size}: IconProps) {
   return (
-    <IconSVG viewbox='0 0 20 20'> 
+    <IconSVG viewbox='0 0 20 20' size={size}> 
       <path d='M3.33 8L10 12l10-6-10-6L0 6h10v2H3.33zM0 8v8l2-2.22V9.2L0 8zm10 12l-5-3-2-1.2v-6l7 4.2 7-4.2v6L10 20z' />
     </IconSVG>
   );
 }
 
-export function DarkThemeIcon() {
+export function DarkThemeIcon({size}: IconProps) {
   return (
-    <IconSVG viewbox='0 0 20 20'> 
+    <IconSVG viewbox='0 0 20 20' size={size}> 
       <path d='M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z' />
     </IconSVG>
   );
 }
 
-export function LightThemeIcon() {
+export function LightThemeIcon({size}: IconProps) {
   return (
-    <IconSVG viewbox='0 0 20 20'> 
+    <IconSVG viewbox='0 0 20 20' size={size}> 
       <path d='M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z' />
     </IconSVG>
   );
 }
 
-export function LibraryIcon() {
+export function LibraryIcon({size}: IconProps) {
   return (
-    <IconSVG viewbox='0 0 512 512'> 
+    <IconSVG viewbox='0 0 512 512' size={size}> 
       <path d='M64 480H48a32 32 0 01-32-32V112a32 32 0 0132-32h16a32 32 0 0132 32v336a32 32 0 01-32 32zM240 176a32 32 0 00-32-32h-64a32 32 0 00-32 32v28a4 4 0 004 4h120a4 4 0 004-4zM112 448a32 32 0 0032 32h64a32 32 0 0032-32v-30a2 2 0 00-2-2H114a2 2 0 00-2 2z' />
       <path d='M114 240 H238 A2 2 0 0 1 240 242 V382 A2 2 0 0 1 238 384 H114 A2 2 0 0 1 112 382 V242 A2 2 0 0 1 114 240 z' />
       <path d='M320 480h-32a32 32 0 01-32-32V64a32 32 0 0132-32h32a32 32 0 0132 32v384a32 32 0 01-32 32zM495.89 445.45l-32.23-340c-1.48-15.65-16.94-27-34.53-25.31l-31.85 3c-17.59 1.67-30.65 15.71-29.17 31.36l32.23 340c1.48 15.65 16.94 27 34.53 25.31l31.85-3c17.59-1.67 30.65-15.71 29.17-31.36z' />
@@ -158,44 +192,77 @@ export function LibraryIcon() {
   );
 }
 
-export function PlusIcon() {
+export function PlusIcon({size}: IconProps) {
   return (
-    <IconSVG viewbox='0 0 1024 1024'> 
+    <IconSVG viewbox='0 0 1024 1024' size={size}> 
       <path d='M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zM704 536c0 4.4-3.6 8-8 8H544v152c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V544H328c-4.4 0-8-3.6-8-8v-48c0-4.4 3.6-8 8-8h152V328c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v152h152c4.4 0 8 3.6 8 8v48z' />
     </IconSVG>
   );
 }
 
-export function UploadIcon() {
+export function SmallPlusIcon({size}: IconProps) {
   return (
-    <IconSVG viewbox='0 0 24 24'> 
-      <path d='M11 15h2V9h3l-4-5-4 5h3z' />
-      <path d='M20 18H4v-7H2v7c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2v-7h-2v7z' />
+    <IconSVG viewbox='0 0 24 24' size={size}> 
+      <path d='M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12zm10-8a8 8 0 100 16 8 8 0 000-16z'/>
+      <path d='M13 7a1 1 0 10-2 0v4H7a1 1 0 100 2h4v4a1 1 0 102 0v-4h4a1 1 0 100-2h-4V7z'/>
     </IconSVG>
   );
 }
 
-export function DownloadIcon() {
+export function UploadIcon({size}: IconProps) {
   return (
-    <IconSVG viewbox='0 0 24 24'> 
-      <path d="M12 16l4-5h-3V4h-2v7H8z" />
-      <path d="M20 18H4v-7H2v7c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2v-7h-2v7z" />
+    <IconSVG viewbox='0 0 24 24' size={size}> 
+      <path d='M11 15h2V9h3l-4-5-4 5h3z'/>
+      <path d='M20 18H4v-7H2v7c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2v-7h-2v7z'/>
     </IconSVG>
   );
 }
 
-export function CrownIcon() {
+export function DownloadIcon({size}: IconProps) {
   return (
-    <IconSVG viewbox='0 0 24 24'> 
+    <IconSVG viewbox='0 0 24 24' size={size}> 
+      <path d='M12 16l4-5h-3V4h-2v7H8z'/>
+      <path d='M20 18H4v-7H2v7c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2v-7h-2v7z'/>
+    </IconSVG>
+  );
+}
+
+export function CrownIcon({size}: IconProps) {
+  return (
+    <IconSVG viewbox='0 0 24 24' size={size}> 
       <path d='M5 16L3 5l5.5 5L12 4l3.5 6L21 5l-2 11H5m14 3c0 .6-.4 1-1 1H6c-.6 0-1-.4-1-1v-1h14v1z' />
     </IconSVG>
   );
 }
 
-export function DumpBinIcon() {
+export function ArrowUpIcon({size}: IconProps) {
   return (
-    <IconSVG viewbox='0 0 24 24'> 
+    <IconSVG viewbox='0 0 16 16' size={size}> 
+      <path d='M8 12a.5.5 0 00.5-.5V5.707l2.146 2.147a.5.5 0 00.708-.708l-3-3a.5.5 0 00-.708 0l-3 3a.5.5 0 10.708.708L7.5 5.707V11.5a.5.5 0 00.5.5z' />
+    </IconSVG>
+  );
+}
+
+export function ArrowDownIcon({size}: IconProps) {
+  return (
+    <IconSVG viewbox='0 0 16 16' size={size}> 
+      <path d='M8 4a.5.5 0 01.5.5v5.793l2.146-2.147a.5.5 0 01.708.708l-3 3a.5.5 0 01-.708 0l-3-3a.5.5 0 11.708-.708L7.5 10.293V4.5A.5.5 0 018 4z' />
+    </IconSVG>
+  );
+}
+
+export function DumpBinIcon({size}: IconProps) {
+  return (
+    <IconSVG viewbox='0 0 24 24' size={size}> 
       <path d='M19 4h-3.5l-1-1h-5l-1 1H5v2h14M6 19a2 2 0 002 2h8a2 2 0 002-2V7H6v12z' />
     </IconSVG>
   );
+}
+
+export function ArrowsRotateIcon({size}: IconProps) {
+  return (
+    <IconSVG viewbox='0 0 24 24' size={size}> 
+      <path d='M12 6v3l4-4-4-4v3a8 8 0 00-8 8c0 1.57.46 3.03 1.24 4.26L6.7 14.8A5.9 5.9 0 016 12a6 6 0 016-6m6.76 1.74L17.3 9.2c.44.84.7 1.8.7 2.8a6 6 0 01-6 6v-3l-4 4 4 4v-3a8 8 0 008-8c0-1.57-.46-3.03-1.24-4.26z' />
+    </IconSVG>
+  );
 }
\ No newline at end of file
diff --git a/rsconcept/frontend/src/components/Navigation/Logo.tsx b/rsconcept/frontend/src/components/Navigation/Logo.tsx
index d44adef6..4150685a 100644
--- a/rsconcept/frontend/src/components/Navigation/Logo.tsx
+++ b/rsconcept/frontend/src/components/Navigation/Logo.tsx
@@ -6,7 +6,7 @@ interface LogoProps {
 
 function Logo({title}: LogoProps) {
   return (
-    <Link to='/' className='flex items-center mr-4'>
+    <Link to='/' className='flex items-center mr-4' tabIndex={-1}>
       <img src='/favicon.svg' className='min-h-[2.5rem] mr-2 min-w-[2.5rem]' alt=''/>
       <span className='self-center hidden text-2xl font-semibold lg:block whitespace-nowrap dark:text-white'>{title}</span>
     </Link>
diff --git a/rsconcept/frontend/src/components/Navigation/NavigationButton.tsx b/rsconcept/frontend/src/components/Navigation/NavigationButton.tsx
index 7e2da8f9..f011ebdb 100644
--- a/rsconcept/frontend/src/components/Navigation/NavigationButton.tsx
+++ b/rsconcept/frontend/src/components/Navigation/NavigationButton.tsx
@@ -12,7 +12,7 @@ function NavigationButton({icon, description, colorClass=defaultColors, onClick}
     <button title={description}
       type='button'
       onClick={onClick}
-      className={'p-2 mr-1 focus:ring-4 rounded-lg focus:ring-gray-300 dark:focus:ring-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 ' + colorClass}
+      className={'min-w-fit p-2 mr-1 focus:ring-4 rounded-lg focus:ring-gray-300 dark:focus:ring-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 ' + colorClass}
     >
       {icon}
     </button>
diff --git a/rsconcept/frontend/src/components/Navigation/UserDropdown.tsx b/rsconcept/frontend/src/components/Navigation/UserDropdown.tsx
index 75f38aa7..7e256f49 100644
--- a/rsconcept/frontend/src/components/Navigation/UserDropdown.tsx
+++ b/rsconcept/frontend/src/components/Navigation/UserDropdown.tsx
@@ -2,6 +2,7 @@ import { useNavigate } from 'react-router-dom';
 import { useAuth } from '../../context/AuthContext';
 import NavigationTextItem from './NavigationTextItem';
 import { useTheme } from '../../context/ThemeContext';
+import Dropdown from '../Common/Dropdown';
 
 interface UserDropdownProps {
   hideDropdown: Function
@@ -28,20 +29,18 @@ function UserDropdown({hideDropdown}: UserDropdownProps) {
   };
 
   return (
-    <div className='relative'>
-      <div className='absolute right-0 z-10 flex flex-col items-stretch justify-start p-2 mt-4 text-sm origin-top-right bg-white border border-gray-100 divide-y rounded-md shadow-lg dark:border-gray-500 dark:bg-gray-900 w-36'>
-        <NavigationTextItem description='Профиль пользователя'
-          text={user?.username}
-          onClick={navigateProfile}
-        />
-        <NavigationTextItem description='Переключение темы оформления'
-          text={darkMode ? 'Светлая тема' : 'Темная тема'} 
-          onClick={toggleDarkMode}
-        />
-        <NavigationTextItem text={'Мои схемы'} onClick={navigateMyWork} />
-        <NavigationTextItem text={'Выйти...'} bold onClick={logoutAndRedirect} />
-      </div>
-    </div>
+    <Dropdown widthClass='w-36' stretchLeft >
+      <NavigationTextItem description='Профиль пользователя'
+        text={user?.username}
+        onClick={navigateProfile}
+      />
+      <NavigationTextItem description='Переключение темы оформления'
+        text={darkMode ? 'Светлая тема' : 'Темная тема'} 
+        onClick={toggleDarkMode}
+      />
+      <NavigationTextItem text={'Мои схемы'} onClick={navigateMyWork} />
+      <NavigationTextItem text={'Выйти...'} bold onClick={logoutAndRedirect} />
+    </Dropdown>
   );
 }
 
diff --git a/rsconcept/frontend/src/components/Navigation/UserMenu.tsx b/rsconcept/frontend/src/components/Navigation/UserMenu.tsx
index 56d2a7b7..1ef03586 100644
--- a/rsconcept/frontend/src/components/Navigation/UserMenu.tsx
+++ b/rsconcept/frontend/src/components/Navigation/UserMenu.tsx
@@ -1,10 +1,9 @@
 import { UserIcon } from '../Icons';
 import { useAuth } from '../../context/AuthContext';
-import { useRef, useState } from 'react';
 import UserDropdown from './UserDropdown';
-import { useClickedOutside } from '../../hooks/useClickedOutside';
 import NavigationButton from './NavigationButton';
 import { Link } from 'react-router-dom';
+import useDropdown from '../../hooks/useDropdown';
 
 function LoginRef() {
   return (
@@ -16,23 +15,20 @@ function LoginRef() {
 
 function UserMenu() {
   const {user} = useAuth();
-  const [showUserDropdown, setShowUserDropdown] = useState(false);
-  const dropdownRef = useRef(null);
-
-  const toggleUserDropdown = () => setShowUserDropdown(!showUserDropdown);
-  const hideDropdown = () => setShowUserDropdown(false);
-  useClickedOutside({ref: dropdownRef, callback: hideDropdown})
-
+  const menu = useDropdown();
   return (
-    <div ref={dropdownRef}>
+    <div ref={menu.ref}>
       { !user && <LoginRef />}
       { user && 
       <NavigationButton
         icon={<UserIcon />}
         description={`Пользователь ${user?.username}`}
-        onClick={toggleUserDropdown} 
+        onClick={menu.toggle} 
+      />}
+      { user && menu.isActive && 
+      <UserDropdown
+        hideDropdown={() => menu.hide()}
       />}
-      { user && showUserDropdown && <UserDropdown hideDropdown={hideDropdown} /> }
     </div>
   );
 }
diff --git a/rsconcept/frontend/src/context/AuthContext.tsx b/rsconcept/frontend/src/context/AuthContext.tsx
index dec48952..c88cc108 100644
--- a/rsconcept/frontend/src/context/AuthContext.tsx
+++ b/rsconcept/frontend/src/context/AuthContext.tsx
@@ -1,8 +1,8 @@
 import { createContext, useCallback, useContext, useEffect, useState } from 'react';
-import { ICurrentUser, IUserSignupData } from '../models';
+import { ICurrentUser, IUserSignupData } from '../utils/models';
 import { ErrorInfo } from '../components/BackendError';
 import useLocalStorage from '../hooks/useLocalStorage';
-import { getAuth, postLogin, postLogout, postSignup } from '../backendAPI';
+import { getAuth, postLogin, postLogout, postSignup } from '../utils/backendAPI';
 
 
 interface IAuthContext {
diff --git a/rsconcept/frontend/src/context/RSFormContext.tsx b/rsconcept/frontend/src/context/RSFormContext.tsx
index f33dfdf8..fdc3509e 100644
--- a/rsconcept/frontend/src/context/RSFormContext.tsx
+++ b/rsconcept/frontend/src/context/RSFormContext.tsx
@@ -1,9 +1,10 @@
-import { createContext, useState, useContext, useMemo } from 'react';
-import { IConstituenta, IRSForm } from '../models';
+import { createContext, useState, useContext, useMemo, useCallback } from 'react';
+import { IConstituenta, IRSForm } from '../utils/models';
 import { useRSFormDetails } from '../hooks/useRSFormDetails';
 import { ErrorInfo } from '../components/BackendError';
 import { useAuth } from './AuthContext';
-import { BackendCallback, deleteRSForm, getTRSFile, patchConstituenta, patchRSForm, postClaimRSForm } from '../backendAPI';
+import { BackendCallback, deleteRSForm, getTRSFile, patchConstituenta, patchRSForm, postClaimRSForm } from '../utils/backendAPI';
+import { toast } from 'react-toastify';
 
 interface IRSFormContext {
   schema?: IRSForm
@@ -13,8 +14,14 @@ interface IRSFormContext {
   processing: boolean
   isEditable: boolean
   isClaimable: boolean
+  forceAdmin: boolean
+  readonly: boolean
+  isTracking: boolean
   
   setActive: (cst: IConstituenta | undefined) => void
+  setForceAdmin: (value: boolean) => void
+  setReadonly: (value: boolean) => void
+  toggleTracking: () => void
   reload: () => void
   update: (data: any, callback?: BackendCallback) => void
   destroy: (callback: BackendCallback) => void
@@ -32,8 +39,14 @@ export const RSFormContext = createContext<IRSFormContext>({
   processing: false,
   isEditable: false,
   isClaimable: false,
+  forceAdmin: false,
+  readonly: false,
+  isTracking: true,
   
   setActive: () => {},
+  setForceAdmin: () => {},
+  setReadonly: () => {},
+  toggleTracking: () => {},
   reload: () => {},
   update: () => {},
   destroy: () => {},
@@ -54,7 +67,24 @@ export const RSFormState = ({ id, children }: RSFormStateProps) => {
   const [processing, setProcessing] = useState(false)
   const [active, setActive] = useState<IConstituenta | undefined>(undefined);
 
-  const isEditable = useMemo(() => (user?.id === schema?.owner || user?.is_staff || false), [user, schema]);
+  const [forceAdmin, setForceAdmin] = useState(false);
+  const [readonly, setReadonly] = useState(false);
+
+  const isEditable = useMemo(() => {
+    return (
+      !readonly && 
+      (user?.id === schema?.owner || (forceAdmin && user?.is_staff) || false)
+    )
+  }, [user, schema, readonly, forceAdmin]);
+  
+  const isTracking = useMemo(() => {
+    return true;
+  }, []);
+  const toggleTracking = useCallback(() => {
+    toast('not implemented yet');
+  }, []);
+
+
   const isClaimable = useMemo(() => (user?.id !== schema?.owner || false), [user, schema]);
 
   async function update(data: any, callback?: BackendCallback) {
@@ -113,7 +143,10 @@ export const RSFormState = ({ id, children }: RSFormStateProps) => {
     <RSFormContext.Provider value={{
       schema, error, loading, processing,
       active, setActive,
+      forceAdmin, setForceAdmin,
+      readonly, setReadonly,
       isEditable, isClaimable,
+      isTracking, toggleTracking,
       cstUpdate, 
       reload, update, download, destroy, claim
     }}>
diff --git a/rsconcept/frontend/src/context/ThemeContext.tsx b/rsconcept/frontend/src/context/ThemeContext.tsx
index d16892a0..78cefe58 100644
--- a/rsconcept/frontend/src/context/ThemeContext.tsx
+++ b/rsconcept/frontend/src/context/ThemeContext.tsx
@@ -26,6 +26,7 @@ export const ThemeState = ({ children }: ThemeStateProps) => {
     } else {
       root.classList.remove('dark');
     }
+    root.setAttribute('data-color-scheme', !isDark ? 'light' : 'dark');
   };
   
   const toggleDarkMode = () => {
diff --git a/rsconcept/frontend/src/context/UsersContext.tsx b/rsconcept/frontend/src/context/UsersContext.tsx
index b319a605..24a8ccdf 100644
--- a/rsconcept/frontend/src/context/UsersContext.tsx
+++ b/rsconcept/frontend/src/context/UsersContext.tsx
@@ -1,6 +1,6 @@
 import { createContext, useCallback, useContext, useEffect, useState } from 'react'
-import { IUserInfo } from '../models'
-import { getActiveUsers } from '../backendAPI'
+import { IUserInfo } from '../utils/models'
+import { getActiveUsers } from '../utils/backendAPI'
 
 
 interface IUsersContext {
diff --git a/rsconcept/frontend/src/hooks/useCheckExpression.ts b/rsconcept/frontend/src/hooks/useCheckExpression.ts
new file mode 100644
index 00000000..43cbf4dd
--- /dev/null
+++ b/rsconcept/frontend/src/hooks/useCheckExpression.ts
@@ -0,0 +1,32 @@
+import { useCallback, useState } from 'react'
+import { ErrorInfo } from '../components/BackendError';
+import { postCheckExpression } from '../utils/backendAPI';
+import { IRSForm } from '../utils/models';
+import { AxiosResponse } from 'axios';
+
+function useCheckExpression({schema}: {schema?: IRSForm}) {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<ErrorInfo>(undefined);
+  const [parseData, setParseData] = useState<any | undefined>(undefined);
+
+  const resetParse = useCallback(() => setParseData(undefined), []);
+  
+  async function checkExpression(expression: string, onSuccess?: (response: AxiosResponse) => void) {
+    setError(undefined);
+    setParseData(undefined);
+    postCheckExpression(String(schema!.id), {
+      data: {'expression': expression},
+      showError: true,
+      setLoading: setLoading,
+      onError: error => setError(error),
+      onSucccess: (response) => {
+        setParseData(response.data);
+        if (onSuccess) onSuccess(response);
+      }
+    });
+  }
+
+  return { parseData, checkExpression, resetParse, error, setError, loading };
+}
+
+export default useCheckExpression;
\ No newline at end of file
diff --git a/rsconcept/frontend/src/hooks/useClickedOutside.ts b/rsconcept/frontend/src/hooks/useClickedOutside.ts
index 1fe1c86e..af0b7038 100644
--- a/rsconcept/frontend/src/hooks/useClickedOutside.ts
+++ b/rsconcept/frontend/src/hooks/useClickedOutside.ts
@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
-import { assertIsNode } from '../utils';
+import { assertIsNode } from '../utils/utils';
 
-export function useClickedOutside({ref, callback}: {ref: React.RefObject<HTMLElement>, callback: Function}) {
+function useClickedOutside({ref, callback}: {ref: React.RefObject<HTMLElement>, callback: Function}) {
   useEffect(() => {
     function handleClickOutside(event: MouseEvent) {
       assertIsNode(event.target);
@@ -14,4 +14,6 @@ export function useClickedOutside({ref, callback}: {ref: React.RefObject<HTMLEle
       document.removeEventListener('mouseup', handleClickOutside);
     };
   }, [ref, callback]);
-};
\ No newline at end of file
+};
+
+export default useClickedOutside;
\ No newline at end of file
diff --git a/rsconcept/frontend/src/hooks/useDropdown.ts b/rsconcept/frontend/src/hooks/useDropdown.ts
new file mode 100644
index 00000000..eb0016c6
--- /dev/null
+++ b/rsconcept/frontend/src/hooks/useDropdown.ts
@@ -0,0 +1,19 @@
+import { useRef, useState } from 'react';
+import useClickedOutside from './useClickedOutside';
+
+function useDropdown() {
+  const [isActive, setIsActive] = useState(false);
+  const ref = useRef(null);
+
+  useClickedOutside({ref: ref, callback: () => setIsActive(false)})
+  
+  return {
+    ref: ref, 
+    isActive: isActive, 
+    setIsActive: setIsActive,
+    toggle: () => setIsActive(!isActive),
+    hide: () => setIsActive(false)
+  };
+};
+
+export default useDropdown;
\ No newline at end of file
diff --git a/rsconcept/frontend/src/hooks/useNewRSForm.ts b/rsconcept/frontend/src/hooks/useNewRSForm.ts
index 2598e29f..5b7724a4 100644
--- a/rsconcept/frontend/src/hooks/useNewRSForm.ts
+++ b/rsconcept/frontend/src/hooks/useNewRSForm.ts
@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { ErrorInfo } from '../components/BackendError';
-import { postNewRSForm } from '../backendAPI';
+import { postNewRSForm } from '../utils/backendAPI';
 
 function useNewRSForm() {
   const [loading, setLoading] = useState(false);
diff --git a/rsconcept/frontend/src/hooks/useRSFormDetails.ts b/rsconcept/frontend/src/hooks/useRSFormDetails.ts
index 29a22e0f..bcc44942 100644
--- a/rsconcept/frontend/src/hooks/useRSFormDetails.ts
+++ b/rsconcept/frontend/src/hooks/useRSFormDetails.ts
@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState } from 'react'
-import { CalculateStats, IRSForm } from '../models'
+import { CalculateStats, IRSForm } from '../utils/models'
 import { ErrorInfo } from '../components/BackendError';
-import { getRSFormDetails } from '../backendAPI';
+import { getRSFormDetails } from '../utils/backendAPI';
 
 export function useRSFormDetails({target}: {target?: string}) {
   const [schema, setSchema] = useState<IRSForm | undefined>();
diff --git a/rsconcept/frontend/src/hooks/useRSForms.ts b/rsconcept/frontend/src/hooks/useRSForms.ts
index 41c71a16..cfb41b2f 100644
--- a/rsconcept/frontend/src/hooks/useRSForms.ts
+++ b/rsconcept/frontend/src/hooks/useRSForms.ts
@@ -1,7 +1,7 @@
 import { useCallback, useState } from 'react'
-import { IRSForm } from '../models'
+import { IRSForm } from '../utils/models'
 import { ErrorInfo } from '../components/BackendError';
-import { getRSForms } from '../backendAPI';
+import { getRSForms } from '../utils/backendAPI';
 
 export enum FilterType {
   PERSONAL = 'personal',
diff --git a/rsconcept/frontend/src/hooks/useUserProfile.ts b/rsconcept/frontend/src/hooks/useUserProfile.ts
index 1e46b249..8d40c5cd 100644
--- a/rsconcept/frontend/src/hooks/useUserProfile.ts
+++ b/rsconcept/frontend/src/hooks/useUserProfile.ts
@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState } from 'react'
-import { IUserProfile } from '../models'
+import { IUserProfile } from '../utils/models'
 import { ErrorInfo } from '../components/BackendError'
-import { getProfile } from '../backendAPI'
+import { getProfile } from '../utils/backendAPI'
 
 export function useUserProfile() {
   const [user, setUser] = useState<IUserProfile | undefined>(undefined);
diff --git a/rsconcept/frontend/src/index.css b/rsconcept/frontend/src/index.css
index 4a8e0aa4..1a007929 100644
--- a/rsconcept/frontend/src/index.css
+++ b/rsconcept/frontend/src/index.css
@@ -6,6 +6,14 @@
   font-size: 14px;
 }
 
+[data-color-scheme="dark"] {
+  color-scheme: dark;
+}
+
+[data-color-scheme="light"] {
+  color-scheme: light;
+}
+
 @layer components {
   .border {
     @apply border-gray-300 rounded dark:border-gray-400
@@ -14,4 +22,16 @@
   .dark {
     @apply text-zinc-200 bg-gray-900
   }
+
+  .text-red {
+    @apply text-red-400 dark:text-red-600
+  }
+
+  .text-green {
+    @apply text-green-400 dark:text-green-500
+  }
+
+  .text-primary {
+    @apply text-blue-600 dark:text-orange-400
+  }
 }
\ No newline at end of file
diff --git a/rsconcept/frontend/src/models.ts b/rsconcept/frontend/src/models.ts
deleted file mode 100644
index 48db12c6..00000000
--- a/rsconcept/frontend/src/models.ts
+++ /dev/null
@@ -1,265 +0,0 @@
-// Current user info
-export interface ICurrentUser {
-    id: number
-    username: string
-    is_staff: boolean
-}
-
-// User profile data
-export interface IUserProfile {
-    id: number
-    username: string
-    email: string
-    first_name: string
-    last_name: string
-}
-
-// User base info
-export interface IUserInfo {
-    id: number
-    username: string
-    first_name: string
-    last_name: string
-}
-
-// User data for signup
-export interface IUserSignupData {
-    username: string
-    email: string
-    first_name: string
-    last_name: string
-    password: string
-    password2: string
-}
-
-// Constituenta type
-export enum CstType {
-    BASE = 'basic',
-    CONSTANT = 'constant',
-    STRUCTURED = 'structure',
-    AXIOM = 'axiom',
-    TERM = 'term',
-    FUNCTION = 'function',
-    PREDICATE = 'predicate',
-    THEOREM = 'theorem'
-}
-
-// ValueClass
-export enum ValueClass {
-    INVALID = 'invalid',
-    VALUE = 'value',
-    PROPERTY = 'property'
-}
-
-// Syntax
-export enum Syntax {
-    UNDEF = 'undefined',
-    ASCII = 'ascii',
-    MATH = 'math'
-}
-
-// ParsingStatus
-export enum ParsingStatus {
-    UNDEF = 'undefined',
-    VERIFIED = 'verified',
-    INCORRECT = 'incorrect'
-}
-
-// Constituenta data
-export interface IConstituenta {
-    entityUID: number
-    alias: string
-    cstType: CstType
-    convention?: string
-    term?: {
-        raw: string
-        resolved?: string
-        forms?: string[]
-    }
-    definition?: {
-        formal: string
-        text: {
-            raw: string
-            resolved?: string
-        }
-    }
-    parse?: {
-        status: ParsingStatus
-        valueClass: ValueClass
-        typification: string
-        syntaxTree: string
-    }
-}
-
-// RSForm stats
-export interface IRSFormStats {
-    count_all: number
-    count_errors: number
-    count_property: number
-    count_incalc: number
-
-    count_termin: number
-    
-    count_base: number
-    count_constant: number
-    count_structured: number
-    count_axiom: number
-    count_term: number
-    count_function: number
-    count_predicate: number
-    count_theorem: number
-}
-
-// RSForm data
-export interface IRSForm {
-    id: number
-    title: string
-    alias: string
-    comment: string
-    is_common: boolean
-    time_create: string
-    time_update: string
-    owner?: number
-    items?: IConstituenta[]
-    stats?: IRSFormStats
-}
-
-// RSForm user input
-export interface IRSFormCreateData {
-    title: string
-    alias: string
-    comment: string
-    is_common: boolean
-    file?: File
-}
-
-export function GetTypeLabel(cst: IConstituenta) {
-    if (cst.parse?.typification) {
-        return cst.parse.typification;
-    }
-    if (cst.parse?.status !==  ParsingStatus.VERIFIED) {
-        return 'N/A';
-    }
-    return 'Логический';
-}
-
-export function GetErrLabel(cst: IConstituenta) {
-    if (!cst.parse?.status) {
-        return 'N/A';
-    }
-    if (cst.parse?.status ===  ParsingStatus.UNDEF) {
-        return 'неизв';
-    }
-    if (cst.parse?.status ===  ParsingStatus.INCORRECT) {
-        return 'ошибка';
-    }
-    if (cst.parse?.valueClass ===  ValueClass.INVALID) {
-        return 'невыч';
-    }
-    if (cst.parse?.valueClass ===  ValueClass.PROPERTY) {
-        return 'св-во';
-    }
-    return 'ОК';
-}
-
-export function GetCstTypeLabel(type: CstType) {
-    switch(type) {
-    case CstType.BASE: return 'Базисное множество';
-    case CstType.CONSTANT: return 'Константное множество';
-    case CstType.STRUCTURED: return 'Родовая структура';
-    case CstType.AXIOM: return 'Аксиома';
-    case CstType.TERM: return 'Терм';
-    case CstType.FUNCTION: return 'Терм-функция';
-    case CstType.PREDICATE: return 'Предикат-функция';
-    case CstType.THEOREM: return 'Теорема';
-    }
-}
-
-export function CalculateStats(schema: IRSForm) {
-    if (!schema.items) {
-        schema.stats = {
-            count_all: 0,
-            count_errors: 0,
-            count_property: 0,
-            count_incalc: 0,
-
-            count_termin: 0,
-            
-            count_base: 0,
-            count_constant: 0,
-            count_structured: 0,
-            count_axiom: 0,
-            count_term: 0,
-            count_function: 0,
-            count_predicate: 0,
-            count_theorem: 0,
-        }
-        return;
-    }
-    schema.stats = {
-        count_all: schema.items?.length || 0,
-        count_errors: schema.items?.reduce(
-            (sum, cst) => sum + 
-                (cst.parse?.status === ParsingStatus.INCORRECT ? 1 : 0) || 0, 
-            0
-        ),
-        count_property: schema.items?.reduce(
-            (sum, cst) => sum + 
-                (cst.parse?.valueClass === ValueClass.PROPERTY ? 1 : 0) || 0, 
-            0
-        ),
-        count_incalc: schema.items?.reduce(
-            (sum, cst) => sum + 
-                ((cst.parse?.status === ParsingStatus.VERIFIED &&
-                    cst.parse?.valueClass === ValueClass.INVALID) ? 1 : 0) || 0, 
-            0
-        ),
-
-        count_termin: schema.items?.reduce(
-            (sum, cst) => (sum + 
-                (cst.term?.raw ? 1 : 0) || 0), 
-            0
-        ),
-        
-        count_base: schema.items?.reduce(
-            (sum, cst) => sum + 
-                (cst.cstType === CstType.BASE ? 1 : 0), 
-            0
-        ),
-        count_constant: schema.items?.reduce(
-            (sum, cst) => sum + 
-                (cst.cstType === CstType.CONSTANT ? 1 : 0), 
-            0
-        ),
-        count_structured: schema.items?.reduce(
-            (sum, cst) => sum + 
-                (cst.cstType === CstType.STRUCTURED ? 1 : 0), 
-            0
-        ),
-        count_axiom: schema.items?.reduce(
-            (sum, cst) => sum + 
-                (cst.cstType === CstType.AXIOM ? 1 : 0), 
-            0
-        ),
-        count_term: schema.items?.reduce(
-            (sum, cst) => sum + 
-                (cst.cstType === CstType.TERM ? 1 : 0), 
-            0
-        ),
-        count_function: schema.items?.reduce(
-            (sum, cst) => sum + 
-                (cst.cstType === CstType.FUNCTION ? 1 : 0), 
-            0
-        ),
-        count_predicate: schema.items?.reduce(
-            (sum, cst) => sum + 
-                (cst.cstType === CstType.PREDICATE ? 1 : 0), 
-            0
-        ),
-        count_theorem: schema.items?.reduce(
-            (sum, cst) => sum + 
-                (cst.cstType === CstType.THEOREM ? 1 : 0), 
-            0
-        ),
-    }
-}
\ No newline at end of file
diff --git a/rsconcept/frontend/src/pages/LoginPage.tsx b/rsconcept/frontend/src/pages/LoginPage.tsx
index 00652909..39c968ab 100644
--- a/rsconcept/frontend/src/pages/LoginPage.tsx
+++ b/rsconcept/frontend/src/pages/LoginPage.tsx
@@ -35,7 +35,7 @@ function LoginPage() {
   };
 
   return (
-    <div className='container py-2'> { user ? 
+    <div className='w-full py-2'> { user ? 
       <InfoMessage message={`Вы вошли в систему как ${user.username}`} /> 
       :
       <Form title='Ввод данных пользователя' onSubmit={handleSubmit} widthClass='w-[20rem]'>
diff --git a/rsconcept/frontend/src/pages/ManualsPage.tsx b/rsconcept/frontend/src/pages/ManualsPage.tsx
index 84ffccc3..9cdca64d 100644
--- a/rsconcept/frontend/src/pages/ManualsPage.tsx
+++ b/rsconcept/frontend/src/pages/ManualsPage.tsx
@@ -1,4 +1,4 @@
-import { urls } from '../constants';
+import { urls } from '../utils/constants';
 
 function ManualsPage() {
   return (
diff --git a/rsconcept/frontend/src/pages/RSFormCreatePage.tsx b/rsconcept/frontend/src/pages/RSFormCreatePage.tsx
index bd2a3fd8..ba9cabfd 100644
--- a/rsconcept/frontend/src/pages/RSFormCreatePage.tsx
+++ b/rsconcept/frontend/src/pages/RSFormCreatePage.tsx
@@ -4,7 +4,7 @@ import TextInput from '../components/Common/TextInput';
 import Form from '../components/Common/Form';
 import SubmitButton from '../components/Common/SubmitButton';
 import BackendError from '../components/BackendError';
-import { IRSFormCreateData } from '../models';
+import { IRSFormCreateData } from '../utils/models';
 import RequireAuth from '../components/RequireAuth';
 import useNewRSForm from '../hooks/useNewRSForm';
 import { useNavigate } from 'react-router-dom';
diff --git a/rsconcept/frontend/src/pages/RSFormPage/ConstituentEditor.tsx b/rsconcept/frontend/src/pages/RSFormPage/ConstituentEditor.tsx
index 47f7e8d0..fd99e592 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/ConstituentEditor.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/ConstituentEditor.tsx
@@ -1,23 +1,27 @@
 import { useCallback, useEffect, useState } from 'react';
-import PrettyJson from '../../components/Common/PrettyJSON';
 import { useRSForm } from '../../context/RSFormContext';
-import { GetCstTypeLabel } from '../../models';
+import { EditMode } from '../../utils/models';
 import { toast } from 'react-toastify';
 import TextArea from '../../components/Common/TextArea';
 import ExpressionEditor from './ExpressionEditor';
 import SubmitButton from '../../components/Common/SubmitButton';
+import { getCstTypeLabel } from '../../utils/staticUI';
+import ConstituentsSideList from './ConstituentsSideList';
 
 function ConstituentEditor() {
   const { 
     active, schema, setActive, processing, cstUpdate, isEditable, reload
   } = useRSForm();
 
+  const [editMode, setEditMode] = useState(EditMode.TEXT);
+
   const [alias, setAlias] = useState('');
   const [type, setType] = useState('');
   const [term, setTerm] = useState('');
   const [textDefinition, setTextDefinition] = useState('');
   const [expression, setExpression] = useState('');
   const [convention, setConvention] = useState('');
+  const [typification, setTypification] = useState('N/A');
 
   useEffect(() => {
     if (!active && schema?.items && schema?.items.length > 0) {
@@ -28,11 +32,12 @@ function ConstituentEditor() {
   useEffect(() => {
     if (active) {
       setAlias(active.alias);
-      setType(GetCstTypeLabel(active.cstType));
+      setType(getCstTypeLabel(active.cstType));
       setConvention(active.convention || '');
       setTerm(active.term?.raw || '');
       setTextDefinition(active.definition?.text?.raw || '');
       setExpression(active.definition?.formal || '');
+      setTypification(active?.parse?.typification || 'N/A');
     }
   }, [active]);
   
@@ -72,7 +77,7 @@ function ConstituentEditor() {
 
   return (
     <div className='flex items-start w-full gap-2'>
-      <form onSubmit={handleSubmit} className='flex-grow min-w-[50rem] px-4 py-2 border'>
+      <form onSubmit={handleSubmit} className='flex-grow min-w-[50rem] max-w-min px-4 py-2 border'>
         <div className='flex items-center justify-between gap-1'>
           <span className='mr-12'>
             <label 
@@ -100,35 +105,48 @@ function ConstituentEditor() {
           rows={2}
           value={term}
           disabled={!isEditable}
+          spellCheck
           onChange={event => setTerm(event.target.value)}
+          onFocus={() => setEditMode(EditMode.TEXT)}
+        />
+        <TextArea id='typification' label='Типизация'
+          rows={1}
+          value={typification}
+          disabled
         />
         <ExpressionEditor id='expression' label='Формальное выражение'
           placeholder='Родоструктурное выражение, задающее формальное определение'
           value={expression}
           disabled={!isEditable}
+          isActive={editMode==='rslang'}
+          toggleEditMode={() => setEditMode(EditMode.RSLANG)}
           onChange={event => setExpression(event.target.value)}
+          setTypification={setTypification}
         />
         <TextArea id='definition' label='Текстовое определение'
           placeholder='Лингвистическая интерпретация формального выражения'
           rows={4}
           value={textDefinition}
           disabled={!isEditable}
+          spellCheck
           onChange={event => setTextDefinition(event.target.value)}
+          onFocus={() => setEditMode(EditMode.TEXT)}
         />
         <TextArea id='convention' label='Конвенция / Комментарий'
           placeholder='Договоренность об интерпретации неопределяемых понятий или комментарий к производному понятию'
           rows={4}
           value={convention}
           disabled={!isEditable}
+          spellCheck
           onChange={event => setConvention(event.target.value)}
+          onFocus={() => setEditMode(EditMode.TEXT)}
         />
-        
         <div className='flex items-center justify-between gap-1 py-2 mt-2'>
           <SubmitButton text='Сохранить изменения' disabled={!isEditable} />
         </div>
       </form>
-      <PrettyJson data={active || ''} />
-      </div>
+      <ConstituentsSideList expression={expression}/>
+    </div>
   );
 }
 
diff --git a/rsconcept/frontend/src/pages/RSFormPage/ConstituentsSideList.tsx b/rsconcept/frontend/src/pages/RSFormPage/ConstituentsSideList.tsx
new file mode 100644
index 00000000..c66c5bfd
--- /dev/null
+++ b/rsconcept/frontend/src/pages/RSFormPage/ConstituentsSideList.tsx
@@ -0,0 +1,116 @@
+import { useCallback, useState, useMemo, useEffect } from 'react';
+import { useRSForm } from '../../context/RSFormContext';
+import { IConstituenta, matchConstituenta } from '../../utils/models';
+import Checkbox from '../../components/Common/Checkbox';
+import DataTableThemed from '../../components/Common/DataTableThemed';
+import useLocalStorage from '../../hooks/useLocalStorage';
+import { extractGlobals } from '../../utils/staticUI';
+
+interface ConstituentsSideListProps {
+  expression: string
+}
+
+function ConstituentsSideList({expression}: ConstituentsSideListProps) {
+  const { schema, setActive } = useRSForm();
+  const [filteredData, setFilteredData] = useState<IConstituenta[]>(schema?.items || []);
+  const [filterText, setFilterText] = useLocalStorage('side-filter-text', '')
+  const [onlyExpression, setOnlyExpression] = useLocalStorage('side-filter-flag', false);
+
+  useEffect(() => {
+    if (!schema?.items) {
+      setFilteredData([]);
+    } else if (onlyExpression) {
+      const aliases: string[] = extractGlobals(expression);
+      setFilteredData(schema?.items.filter((cst) => aliases.includes(cst.alias)));
+    } else if (!filterText) {
+      setFilteredData(schema?.items);
+    } else {
+      setFilteredData(schema?.items.filter((cst) => matchConstituenta(filterText, cst)));
+    }
+  }, [filterText, setFilteredData, onlyExpression, expression, schema]);
+
+  const handleRowClicked = useCallback(
+    (cst: IConstituenta, event: React.MouseEvent<Element, MouseEvent>) => {
+		if (event.ctrlKey) {
+      console.log('ctrl + click');
+    }
+	}, []);
+
+  const handleDoubleClick = useCallback(
+    (cst: IConstituenta, event: React.MouseEvent<Element, MouseEvent>) => {
+    console.log('activating')
+		setActive(cst);
+	}, [setActive]);
+
+  const columns = useMemo(() => 
+    [
+      {
+        id: 'id',
+        selector: (cst: IConstituenta) => cst.entityUID,
+        omit: true,
+      },
+      {
+        name: 'ID',
+        id: 'alias',
+        selector: (cst: IConstituenta) => cst.alias,
+        width: '62px',
+        maxWidth: '62px',
+      },
+      {
+        name: 'Описание',
+        id: 'description',
+        selector: (cst: IConstituenta) => cst.term?.resolved || cst.definition?.text.resolved || cst.definition?.formal || '',
+        minWidth: '350px',
+        wrap: true,
+      },
+      {
+        name: 'Выражение',
+        id: 'expression',
+        selector: (cst: IConstituenta) => cst.definition?.formal || '',
+        minWidth: '200px',
+        hide: 1600,
+        grow: 2,
+        wrap: true,
+      }
+    ], []
+  );
+
+  return (
+    <div className='max-h-[80vh] overflow-y-scroll border flex-grow w-full'>
+      <div className='sticky top-0 left-0 right-0 z-40 flex items-center justify-between w-full gap-1 px-2 py-1 bg-white border-b-2 border-gray-400 rounded dark:bg-gray-700 dark:border-gray-300'>
+        <div className='w-full'>
+          <input type='text'
+            className='w-full px-2 outline-none dark:bg-gray-700 hover:text-clip'
+            placeholder='текст для фильтрации списка'
+            value={filterText}
+            onChange={event => setFilterText(event.target.value)}
+            disabled={onlyExpression}
+          />
+        </div>
+        <div className='w-fit min-w-[8rem]'>
+          <Checkbox
+            label='из выражения'
+            value={onlyExpression}
+            onChange={event => setOnlyExpression(event.target.checked)}
+          />
+        </div>
+      </div>
+      <DataTableThemed
+        data={filteredData}
+        columns={columns}
+        keyField='id'
+        noContextMenu
+
+        striped
+        highlightOnHover
+        pointerOnHover
+
+        onRowDoubleClicked={handleDoubleClick}
+        onRowClicked={handleRowClicked}
+        dense
+      />
+    </div>
+);
+}
+
+export default ConstituentsSideList;
diff --git a/rsconcept/frontend/src/pages/RSFormPage/ConstituentsTable.tsx b/rsconcept/frontend/src/pages/RSFormPage/ConstituentsTable.tsx
index 5fd96348..a23941b8 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/ConstituentsTable.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/ConstituentsTable.tsx
@@ -1,39 +1,54 @@
-import { GetErrLabel, GetTypeLabel, IConstituenta, ParsingStatus, ValueClass } from '../../models'
+import { CstType, IConstituenta, ParsingStatus, ValueClass, inferStatus } from '../../utils/models'
 import { useCallback, useMemo, useState } from 'react';
 import DataTableThemed, { SelectionInfo } from '../../components/Common/DataTableThemed';
-import Button from '../../components/Common/Button';
 import { useRSForm } from '../../context/RSFormContext';
-
+import Button from '../../components/Common/Button';
+import { ArrowDownIcon, ArrowUpIcon, ArrowsRotateIcon, DumpBinIcon, SmallPlusIcon } from '../../components/Icons';
+import { toast } from 'react-toastify';
+import Divider from '../../components/Common/Divider';
+import { getCstTypeLabel, getCstTypePrefix, getStatusInfo, getTypeLabel } from '../../utils/staticUI';
 
 interface ConstituentsTableProps {
   onOpenEdit: (cst: IConstituenta) => void
 }
 
 function ConstituentsTable({onOpenEdit}: ConstituentsTableProps) {
-  const { schema } = useRSForm();
+  const { schema, isEditable } = useRSForm();
   const [selectedRows, setSelectedRows] = useState<IConstituenta[]>([]);
-  const [toggleCleared, setToggleCleared] = useState(false);
+  const nothingSelected = useMemo(() => selectedRows.length === 0, [selectedRows]);
 
   const handleRowSelected = useCallback(
     ({selectedRows} : SelectionInfo<IConstituenta>) => {
+    console.log('on selection change')
 		setSelectedRows(selectedRows);
 	}, []);
 
-  // const handleClearRows = () => setToggleCleared(!toggleCleared);
+  const handleRowClicked = useCallback(
+    (cst: IConstituenta, event: React.MouseEvent<Element, MouseEvent>) => {
+		if (event.ctrlKey) {
+      console.log('ctrl + click');
+    }
+	}, []);
 
-  const contextActions = useMemo(() => {
-		const handleDelete = () => {
-			
-			if (window.confirm(`Are you sure you want to delete:\r ${selectedRows.map((cst: IConstituenta) => cst.alias)}?`)) {
-				setToggleCleared(!toggleCleared);
-				// setData(differenceBy(data, selectedRows, 'title'));
-			}
-		};
+  const handleDelete = useCallback(() => {
+    toast.info('Удаление конституент');
+  }, []);
 
-		return (
-			<Button text='Удалить' key='delete' onClick={handleDelete} />
-		);
-	}, [selectedRows, toggleCleared]);
+  const handleMoveUp = useCallback(() => {
+    toast.info('Перемещение вверх');
+  }, []);
+
+  const handleMoveDown = useCallback(() => {
+    toast.info('Перемещение вниз');
+  }, []);
+
+  const handleReindex = useCallback(() => {
+    toast.info('Переиндексация');
+  }, []);
+  
+  const handleAddNew = useCallback((cstType?: CstType) => {
+    toast.info(`Новая конституента ${cstType || 'NEW'}`);
+  }, []);
   
   const columns = useMemo(() => 
     [
@@ -46,7 +61,10 @@ function ConstituentsTable({onOpenEdit}: ConstituentsTableProps) {
       {
         name: 'Статус',
         id: 'status',
-        cell: (cst: IConstituenta) => <div style={{fontSize: 12}}>{GetErrLabel(cst)}</div>,
+        cell: (cst: IConstituenta) => 
+          <div style={{fontSize: 12}}>
+            {getStatusInfo(inferStatus(cst.parse?.status, cst.parse?.valueClass)).text}
+          </div>,
         width: '80px',
         maxWidth: '80px',
         reorder: true,
@@ -76,11 +94,11 @@ function ConstituentsTable({onOpenEdit}: ConstituentsTableProps) {
         conditionalCellStyles: [
           {
             when: (cst: IConstituenta) => cst.parse?.status !== ParsingStatus.VERIFIED,
-            classNames: ['bg-[#ffc9c9]', 'dark:bg-[#592b2b]']
+            classNames: ['bg-[#ff8080]', 'dark:bg-[#800000]']
           },
           {
             when: (cst: IConstituenta) => cst.parse?.status === ParsingStatus.VERIFIED && cst.parse?.valueClass === ValueClass.INVALID,
-            classNames: ['bg-[#beeefa]', 'dark:bg-[#286675]']
+            classNames: ['bg-[#ffbb80]', 'dark:bg-[#964600]']
           },
           {
             when: (cst: IConstituenta) => cst.parse?.status === ParsingStatus.VERIFIED && cst.parse?.valueClass === ValueClass.PROPERTY,
@@ -91,7 +109,7 @@ function ConstituentsTable({onOpenEdit}: ConstituentsTableProps) {
       {
         name: 'Тип',
         id: 'type',
-        cell: (cst: IConstituenta) => <div style={{fontSize: 12}}>{GetTypeLabel(cst)}</div>,
+        cell: (cst: IConstituenta) => <div style={{fontSize: 12}}>{getTypeLabel(cst)}</div>,
         width: '140px',
         minWidth: '100px',
         maxWidth: '140px',
@@ -113,9 +131,9 @@ function ConstituentsTable({onOpenEdit}: ConstituentsTableProps) {
         name: 'Формальное определение',
         id: 'expression',
         selector: (cst: IConstituenta) => cst.definition?.formal || '',
-        width: '500px',
-        minWidth: '200px',
+        minWidth: '300px',
         maxWidth: '500px',
+        grow: 2,
         wrap: true,
         reorder: true,
       },
@@ -127,9 +145,8 @@ function ConstituentsTable({onOpenEdit}: ConstituentsTableProps) {
             {cst.definition?.text.resolved || cst.definition?.text.raw || ''}
           </div>
         ),
-        width: '450px',
         minWidth: '200px',
-        maxWidth: '450px',
+        grow: 2,
         wrap: true,
         reorder: true,
       },
@@ -137,8 +154,7 @@ function ConstituentsTable({onOpenEdit}: ConstituentsTableProps) {
         name: 'Конвенция / Комментарий',
         id: 'convention',
         cell: (cst: IConstituenta) => <div style={{fontSize: 12}}>{cst.convention || ''}</div>,
-        width: '250px',
-        minWidth: '0px',
+        minWidth: '100px',
         wrap: true,
         reorder: true,
         hide: 1800,
@@ -147,27 +163,78 @@ function ConstituentsTable({onOpenEdit}: ConstituentsTableProps) {
   );
 
   return (
-    <DataTableThemed
-      data={schema!.items!}
-      columns={columns}
-      keyField='id'
+    <div className='w-full'>
+      <div className='flex justify-start w-full gap-1 px-2 py-1 border-y'>
+        <div className='mr-3'>Выбраны <span className='ml-2'><b>{selectedRows.length}</b> из {schema?.stats?.count_all || 0}</span></div>
+        <Button
+          tooltip='Переместить вверх'
+          icon={<ArrowUpIcon size={5}/>}
+          disabled={nothingSelected || !isEditable}
+          dense
+          onClick={handleMoveUp}
+        />
+        <Button
+          tooltip='Переместить вниз'
+          icon={<ArrowDownIcon size={5}/>}
+          disabled={nothingSelected || !isEditable}
+          dense
+          onClick={handleMoveDown}
+        />
+        <Button
+          colorClass='text-red'
+          tooltip='Удалить выбранные'
+          icon={<DumpBinIcon size={5}/>}
+          disabled={nothingSelected || !isEditable}
+          dense
+          onClick={handleDelete}
+        />
+        <Divider vertical margins='1' />
+        <Button
+          tooltip='Переиндексировать имена'
+          icon={<ArrowsRotateIcon size={5}/>}
+          disabled={!isEditable}
+          dense
+          onClick={handleReindex}
+        />
+        <Button
+          colorClass='text-green'
+          tooltip='Новая конституента'
+          icon={<SmallPlusIcon size={5}/>}
+          disabled={!isEditable}
+          dense
+          onClick={() => handleAddNew()}
+        />
+        {(Object.values(CstType)).map(
+          (typeStr) => {
+            const type = typeStr as CstType;
+            return <Button
+              text={`${getCstTypePrefix(type)}`}
+              tooltip={getCstTypeLabel(type)}
+              disabled={!isEditable}
+              dense
+              onClick={() =>handleAddNew(type)}
+            />;
+        })
+        }
+      </div>
+      <DataTableThemed
+        data={schema!.items!}
+        columns={columns}
+        keyField='id'
 
-      striped
-      highlightOnHover
-      pointerOnHover
-      selectableRows
-      selectableRowsNoSelectAll
-      
-      pagination
-      paginationPerPage={100}
-      paginationRowsPerPageOptions={[10, 20, 30, 50, 100, 200]}
+        striped
+        highlightOnHover
+        pointerOnHover
 
-      clearSelectedRows={toggleCleared}
-      contextActions={contextActions}
-      onSelectedRowsChange={handleRowSelected}
-      onRowDoubleClicked={onOpenEdit}
-      dense
-    />
+        selectableRows
+        // selectableRowSelected={(cst) => selectedRows.indexOf(cst) < -1}
+        selectableRowsHighlight
+        onSelectedRowsChange={handleRowSelected}
+        onRowDoubleClicked={onOpenEdit}
+        onRowClicked={handleRowClicked}
+        dense
+      />
+    </div>
 );
 }
 
diff --git a/rsconcept/frontend/src/pages/RSFormPage/ExpressionEditor.tsx b/rsconcept/frontend/src/pages/RSFormPage/ExpressionEditor.tsx
index 445c1b77..65bfe741 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/ExpressionEditor.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/ExpressionEditor.tsx
@@ -1,17 +1,116 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import Button from '../../components/Common/Button';
 import Label from '../../components/Common/Label';
 import { useRSForm } from '../../context/RSFormContext';
+import { toast } from 'react-toastify';
+import RSEditButton from './RSEditButton';
+import { CstType, TokenID } from '../../utils/models';
+import useCheckExpression from '../../hooks/useCheckExpression';
+import ParsingResult from './ParsingResult';
+import { Loader } from '../../components/Common/Loader';
+import StatusBar from './StatusBar';
+import PrettyJson from '../../components/Common/PrettyJSON';
+import { AxiosResponse } from 'axios';
 
 interface ExpressionEditorProps {
   id: string
   label: string
+  isActive: boolean
   disabled?: boolean
   placeholder?: string
   value: any
   onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) => void
+  toggleEditMode: () => void
+  setTypification: (typificaiton: string) => void
 }
 
-function ExpressionEditor({id, label, disabled, placeholder, value, onChange}: ExpressionEditorProps) {
-  const { schema } = useRSForm();
+function ExpressionEditor({
+  id, label, disabled, isActive, placeholder, value, 
+  toggleEditMode, setTypification, onChange
+}: ExpressionEditorProps) {
+  const { schema, active } = useRSForm();
+  const [isModified, setIsModified] = useState(false);
+  const { parseData, checkExpression, resetParse, loading } = useCheckExpression({schema: schema});
+
+  useEffect(() => {
+    setIsModified(false);
+    resetParse();
+  }, [active, resetParse]);
+
+  const handleCheckExpression = useCallback(() => {
+    const prefix = active?.alias + (active?.cstType === CstType.STRUCTURED ? '::=' : ':==');
+    const expression = prefix + value;
+    checkExpression(expression, (response: AxiosResponse) => {
+      // TODO: update cursor position
+      setIsModified(false);
+      setTypification(response.data['typification']);
+      toast.success('проверка завершена');
+    });
+  }, [value, checkExpression, active, setTypification]);
+
+  const handleEdit = useCallback((id: TokenID) => {
+    toast.info(`Кнопка ${id}`);
+  }, []);
+
+  const handleChange = useCallback((event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    onChange(event);
+    setIsModified(true);
+  }, [setIsModified, onChange]);
+
+
+  const handleFocusIn = useCallback(() => {
+    toggleEditMode()
+  }, [toggleEditMode]);
+
+  const EditButtons = useMemo( () => {
+    return (<div className='w-full text-sm'>
+    <div className='flex justify-start'>
+      <RSEditButton id={TokenID.NT_DECLARATIVE_EXPR} onInsert={handleEdit}/>
+      <RSEditButton id={TokenID.NT_IMPERATIVE_EXPR} onInsert={handleEdit}/>
+      <RSEditButton id={TokenID.NT_RECURSIVE_FULL} onInsert={handleEdit}/>
+      <RSEditButton id={TokenID.BIGPR} onInsert={handleEdit}/>
+      <RSEditButton id={TokenID.SMALLPR} onInsert={handleEdit}/>
+      <RSEditButton id={TokenID.FILTER} onInsert={handleEdit}/>
+      <RSEditButton id={TokenID.REDUCE} onInsert={handleEdit}/>
+      <RSEditButton id={TokenID.CARD} onInsert={handleEdit}/>
+      <RSEditButton id={TokenID.BOOL} onInsert={handleEdit}/>
+      <RSEditButton id={TokenID.DEBOOL} onInsert={handleEdit}/>
+    </div>
+    <div className='flex justify-start'>
+      <RSEditButton id={TokenID.BOOLEAN} onInsert={handleEdit}/>
+      <RSEditButton id={TokenID.PUNC_PL} onInsert={handleEdit}/>
+      <RSEditButton id={TokenID.FORALL} onInsert={handleEdit}/>
+      <RSEditButton id={TokenID.IN} onInsert={handleEdit}/>
+      <RSEditButton id={TokenID.OR} onInsert={handleEdit}/>
+      <RSEditButton id={TokenID.SUBSET_OR_EQ} onInsert={handleEdit}/>
+      <RSEditButton id={TokenID.INTERSECTION} onInsert={handleEdit}/>
+      <RSEditButton id={TokenID.MINUS} onInsert={handleEdit}/>
+      <RSEditButton id={TokenID.LIT_EMPTYSET} onInsert={handleEdit}/>
+      <RSEditButton id={TokenID.SUBSET} onInsert={handleEdit}/>
+      <RSEditButton id={TokenID.EQUAL} onInsert={handleEdit}/>
+      <RSEditButton id={TokenID.NOT} onInsert={handleEdit}/>
+      <RSEditButton id={TokenID.GREATER_OR_EQ} onInsert={handleEdit}/>
+      <RSEditButton id={TokenID.LESSER_OR_EQ} onInsert={handleEdit}/>
+      
+    </div>
+    <div className='flex justify-start'>
+      <RSEditButton id={TokenID.DECART} onInsert={handleEdit}/>
+      <RSEditButton id={TokenID.PUNC_SL} onInsert={handleEdit}/>
+      <RSEditButton id={TokenID.EXISTS} onInsert={handleEdit}/>
+      <RSEditButton id={TokenID.NOTIN} onInsert={handleEdit}/>
+      <RSEditButton id={TokenID.AND} onInsert={handleEdit}/>
+      <RSEditButton id={TokenID.IMPLICATION} onInsert={handleEdit}/>
+      <RSEditButton id={TokenID.UNION} onInsert={handleEdit}/>
+      <RSEditButton id={TokenID.SYMMINUS} onInsert={handleEdit}/>
+      <RSEditButton id={TokenID.LIT_INTSET} onInsert={handleEdit}/>      
+      <RSEditButton id={TokenID.NOTSUBSET} onInsert={handleEdit}/>
+      <RSEditButton id={TokenID.NOTEQUAL} onInsert={handleEdit}/>
+      <RSEditButton id={TokenID.EQUIVALENT} onInsert={handleEdit}/>
+      <RSEditButton id={TokenID.PUNC_ASSIGN} onInsert={handleEdit}/>
+      <RSEditButton id={TokenID.PUNC_ITERATE} onInsert={handleEdit}/>
+    </div>
+    </div>);
+  }, [handleEdit])
   
   return (
     <div className='flex flex-col items-start [&:not(:first-child)]:mt-3 w-full'>
@@ -20,14 +119,37 @@ function ExpressionEditor({id, label, disabled, placeholder, value, onChange}: E
         required={false}
         htmlFor={id}
       />
-      <textarea id='comment'
+      <textarea id={id}
           className='w-full px-3 py-2 mt-2 leading-tight border shadow dark:bg-gray-800'
           rows={6}
           placeholder={placeholder}
           value={value}
-          onChange={onChange}
+          onChange={handleChange}
+          onFocus={handleFocusIn}
           disabled={disabled}
       />
+      <div className='flex gap-4 py-1 mt-1 justify-stretch items-stre'>
+        <div className='flex flex-col gap-2'>
+          {isActive && <StatusBar
+            isModified={isModified}
+            constituenta={active}
+            parseData={parseData}
+          />}
+          <Button
+            tooltip='Проверить формальное выражение'
+            text='Проверить'
+            onClick={handleCheckExpression}
+          />
+        </div>
+        {isActive && EditButtons}
+        {!isActive && <StatusBar
+            isModified={isModified}
+            constituenta={active}
+            parseData={parseData}
+        />}
+      </div>
+      { loading && <Loader />}
+      { parseData && <ParsingResult data={parseData} />}
     </div>
   );
 }
diff --git a/rsconcept/frontend/src/pages/RSFormPage/ParsingResult.tsx b/rsconcept/frontend/src/pages/RSFormPage/ParsingResult.tsx
new file mode 100644
index 00000000..0000332f
--- /dev/null
+++ b/rsconcept/frontend/src/pages/RSFormPage/ParsingResult.tsx
@@ -0,0 +1,21 @@
+import PrettyJson from '../../components/Common/PrettyJSON';
+
+interface ParsingResultProps {
+  data?: any
+}
+
+function ParsingResult({data}: ParsingResultProps) {
+  return (
+    <div className='w-full px-3 py-2 mt-2 border'>
+      <PrettyJson data={data} />
+      {/* <textarea
+          className={'leading-tight border shadow dark:bg-gray-800 '}
+          rows={3}
+          placeholder='Результаты анализа выражения'
+          value={data}
+      /> */}
+    </div>
+  )
+}
+
+export default ParsingResult;
\ No newline at end of file
diff --git a/rsconcept/frontend/src/pages/RSFormPage/RSEditButton.tsx b/rsconcept/frontend/src/pages/RSFormPage/RSEditButton.tsx
new file mode 100644
index 00000000..474ae886
--- /dev/null
+++ b/rsconcept/frontend/src/pages/RSFormPage/RSEditButton.tsx
@@ -0,0 +1,28 @@
+import { TokenID } from '../../utils/models'
+import { getRSButtonData } from '../../utils/staticUI'
+
+interface RSEditButtonProps {
+  id: TokenID
+  disabled?: boolean
+  onInsert: (token: TokenID) => void
+}
+
+function RSEditButton({id, disabled, onInsert}: RSEditButtonProps) {
+  const data = getRSButtonData(id);
+  const color = 'hover:bg-gray-300 dark:hover:bg-gray-400 text-gray-800 dark:text-zinc-200'
+  const width = data.text.length > 3 ? 'w-[4rem]' : 'w-[2rem]';
+  return (
+    <button
+      type='button'
+      disabled={disabled}
+      onClick={() => onInsert(id)}
+      title={data.tooltip}
+      tabIndex={-1}
+      className={`px-1 cursor-pointer border rounded-none h-7 ${width} ${color}`}
+    >
+      {data.text && <span className='whitespace-nowrap'>{data.text}</span>}
+    </button>
+  )
+}
+
+export default RSEditButton;
\ No newline at end of file
diff --git a/rsconcept/frontend/src/pages/RSFormPage/RSFormCard.tsx b/rsconcept/frontend/src/pages/RSFormPage/RSFormCard.tsx
index b28b3c8d..6399a092 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/RSFormCard.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/RSFormCard.tsx
@@ -4,7 +4,7 @@ import SubmitButton from '../../components/Common/SubmitButton';
 import TextArea from '../../components/Common/TextArea';
 import TextInput from '../../components/Common/TextInput';
 import { useRSForm } from '../../context/RSFormContext';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import Button from '../../components/Common/Button';
 import { CrownIcon, DownloadIcon, DumpBinIcon, ShareIcon } from '../../components/Icons';
 import { useUsers } from '../../context/UsersContext';
@@ -125,14 +125,14 @@ function RSFormCard() {
             tooltip={isClaimable ? 'Стать владельцем' : 'Вы уже являетесь владельцем' }
             disabled={!isClaimable || processing}
             icon={<CrownIcon />}
-            colorClass='text-green-400 dark:text-green-500'
+            colorClass='text-green'
             onClick={handleClaimOwner}
           />
           <Button 
             tooltip={ isEditable ? 'Удалить схему' : 'Вы не можете редактировать данную схему'}
             disabled={!isEditable || processing}
             icon={<DumpBinIcon />}
-            colorClass='text-red-400 dark:text-red-600'
+            colorClass='text-red'
             loading={processing}
             onClick={handleDelete}
           />
diff --git a/rsconcept/frontend/src/pages/RSFormPage/RSFormStats.tsx b/rsconcept/frontend/src/pages/RSFormPage/RSFormStats.tsx
index 248338d7..3f9b325a 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/RSFormStats.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/RSFormStats.tsx
@@ -1,7 +1,7 @@
 import Card from '../../components/Common/Card';
 import Divider from '../../components/Common/Divider';
 import LabeledText from '../../components/Common/LabeledText';
-import { IRSFormStats } from '../../models';
+import { IRSFormStats } from '../../utils/models';
 
 interface RSFormStatsProps {
   stats: IRSFormStats
diff --git a/rsconcept/frontend/src/pages/RSFormPage/RSFormTabs.tsx b/rsconcept/frontend/src/pages/RSFormPage/RSFormTabs.tsx
index a78d1ae5..4840512d 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/RSFormTabs.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/RSFormTabs.tsx
@@ -1,6 +1,6 @@
 import { Tabs, TabList, TabPanel } from 'react-tabs';
 import ConstituentsTable from './ConstituentsTable';
-import { IConstituenta } from '../../models';
+import { IConstituenta } from '../../utils/models';
 import { useRSForm } from '../../context/RSFormContext';
 import { useEffect } from 'react';
 import ConceptTab from '../../components/Common/ConceptTab';
@@ -10,6 +10,7 @@ import BackendError from '../../components/BackendError';
 import ConstituentEditor from './ConstituentEditor';
 import RSFormStats from './RSFormStats';
 import useLocalStorage from '../../hooks/useLocalStorage';
+import TablistTools from './TablistTools';
 
 enum TabsList {
   CARD = 0,
@@ -56,35 +57,39 @@ function RSFormTabs() {
   }, [tabIndex, active]);
 
   return (
-  <div className='container w-full'>
+  <div className='w-full'>
     { loading && <Loader /> }
     { error && <BackendError error={error} />}
     { schema && !loading &&
-      <Tabs 
-        selectedIndex={tabIndex}
-        onSelect={onSelectTab}
-        defaultFocus={true}
-        selectedTabClassName='font-bold'
-      >
-        <TabList className='flex items-start w-fit'>
-          <ConceptTab>Паспорт схемы</ConceptTab>
-          <ConceptTab className='border-gray-300 border-x-2 dark:border-gray-400'>Конституенты</ConceptTab>
-          <ConceptTab>Редактор</ConceptTab>
-        </TabList>
+    <Tabs 
+      selectedIndex={tabIndex}
+      onSelect={onSelectTab}
+      defaultFocus={true}
+      selectedTabClassName='font-bold'
+    >
+      <TabList className='flex items-start bg-gray-100 w-fit dark:bg-gray-600'>
+        <TablistTools />
+        <ConceptTab>Паспорт схемы</ConceptTab>
+        <ConceptTab className='border-gray-300 border-x-2 dark:border-gray-400 min-w-[10rem] flex justify-between gap-2'>
+          <span>Конституенты</span>
+          <span>{`${schema.stats?.count_errors} | ${schema.stats?.count_all}`}</span> 
+        </ConceptTab>
+        <ConceptTab>Редактор</ConceptTab>
+      </TabList>
 
-        <TabPanel className='flex items-start w-full gap-2'>
-          <RSFormCard />
-          {schema.stats && <RSFormStats stats={schema.stats}/>}
-        </TabPanel>
+      <TabPanel className='flex items-start w-full gap-2'>
+        <RSFormCard />
+        {schema.stats && <RSFormStats stats={schema.stats}/>}
+      </TabPanel>
 
-        <TabPanel className='w-fit'>
-          <ConstituentsTable onOpenEdit={onEditCst} />
-        </TabPanel>
+      <TabPanel className='w-full'>
+        <ConstituentsTable onOpenEdit={onEditCst} />
+      </TabPanel>
 
-        <TabPanel>
-          <ConstituentEditor />
-        </TabPanel>
-      </Tabs>
+      <TabPanel>
+        <ConstituentEditor />
+      </TabPanel>
+    </Tabs>
     }
   </div>);
 }
diff --git a/rsconcept/frontend/src/pages/RSFormPage/StatusBar.tsx b/rsconcept/frontend/src/pages/RSFormPage/StatusBar.tsx
new file mode 100644
index 00000000..139d66b2
--- /dev/null
+++ b/rsconcept/frontend/src/pages/RSFormPage/StatusBar.tsx
@@ -0,0 +1,32 @@
+import { useMemo } from 'react';
+import { ExpressionStatus, IConstituenta, ParsingStatus, inferStatus } from '../../utils/models';
+import { getStatusInfo } from '../../utils/staticUI';
+
+interface StatusBarProps {
+  isModified?: boolean
+  parseData?: any
+  constituenta?: IConstituenta
+}
+
+function StatusBar({isModified, constituenta, parseData}: StatusBarProps) {
+  const status = useMemo(() => {
+    if (isModified) {
+      return ExpressionStatus.UNKNOWN;
+    }
+    if (parseData) {
+      const parse = parseData['parseResult'] ? ParsingStatus.VERIFIED : ParsingStatus.INCORRECT;
+      return inferStatus(parse, parseData['valueClass']);
+    }
+    return inferStatus(constituenta?.parse?.status, constituenta?.parse?.valueClass);
+  }, [isModified, constituenta, parseData]);
+
+  const data = getStatusInfo(status);
+  return (
+    <div title={data.tooltip}
+      className={'min-h-[2rem] min-w-[6rem] font-semibold inline-flex border rounded-lg items-center justify-center align-middle ' + data.color}>
+      {data.text}
+    </div>
+  )
+}
+
+export default StatusBar;
\ No newline at end of file
diff --git a/rsconcept/frontend/src/pages/RSFormPage/TablistTools.tsx b/rsconcept/frontend/src/pages/RSFormPage/TablistTools.tsx
new file mode 100644
index 00000000..e480e45e
--- /dev/null
+++ b/rsconcept/frontend/src/pages/RSFormPage/TablistTools.tsx
@@ -0,0 +1,61 @@
+import Button from '../../components/Common/Button';
+import Dropdown from '../../components/Common/Dropdown';
+import { EyeIcon, EyeOffIcon, MenuIcon, PenIcon } from '../../components/Icons';
+import { useRSForm } from '../../context/RSFormContext';
+import useDropdown from '../../hooks/useDropdown';
+
+function TablistTools() {
+  const { isEditable, isTracking, toggleTracking } = useRSForm();
+  const schemaMenu = useDropdown();
+  const editMenu = useDropdown();
+  
+  return (
+    <div className='flex items-center w-fit'>
+      <div ref={schemaMenu.ref}>
+        <Button
+          tooltip='Действия'
+          icon={<MenuIcon size={5}/>}
+          borderClass=''
+          dense
+          onClick={schemaMenu.toggle} 
+        />
+        { schemaMenu.isActive &&
+        <Dropdown>
+          <p className='whitespace-nowrap'>стать владельцем</p>
+          <p>клонировать</p>
+          <p>поделиться</p>
+          <p>удалить</p>
+        </Dropdown>}
+      </div>
+      <div ref={editMenu.ref}>
+        <Button
+          tooltip={'измнение ' + (isEditable ? 'доступно': 'запрещено')}
+          colorClass={ isEditable ? 'text-green': 'text-red'}
+          borderClass=''
+          icon={<PenIcon size={5}/>}
+          dense
+          onClick={editMenu.toggle} 
+        />
+        { editMenu.isActive &&
+        <Dropdown>
+          <p className='whitespace-nowrap'>стать владельцем / уже владелец</p>
+          <p>ридонли</p>
+          <p>админ оверрайд</p>
+        </Dropdown>}
+      </div>
+      <div>
+        <Button
+          tooltip={'отслеживание: ' + (isTracking ? 'включено': 'выключено')}
+          icon={isTracking ? <EyeIcon size={5}/> : <EyeOffIcon size={5}/>}
+          borderClass=''
+          colorClass={isTracking ? 'text-primary': ''}
+          dense
+          onClick={toggleTracking} 
+          />
+      </div>
+    </div>
+  );
+}
+
+export default TablistTools
+
diff --git a/rsconcept/frontend/src/pages/RSFormsPage/RSFormsTable.tsx b/rsconcept/frontend/src/pages/RSFormsPage/RSFormsTable.tsx
index b698a2d6..c685a73a 100644
--- a/rsconcept/frontend/src/pages/RSFormsPage/RSFormsTable.tsx
+++ b/rsconcept/frontend/src/pages/RSFormsPage/RSFormsTable.tsx
@@ -1,4 +1,4 @@
-import { IRSForm } from '../../models'
+import { IRSForm } from '../../utils/models'
 import { useNavigate } from 'react-router-dom';
 import { useMemo } from 'react';
 import { useIntl } from 'react-intl';
diff --git a/rsconcept/frontend/src/pages/RSFormsPage/index.tsx b/rsconcept/frontend/src/pages/RSFormsPage/index.tsx
index ae947c4f..e5342edf 100644
--- a/rsconcept/frontend/src/pages/RSFormsPage/index.tsx
+++ b/rsconcept/frontend/src/pages/RSFormsPage/index.tsx
@@ -22,7 +22,7 @@ function RSFormsPage() {
   }, [search, user, loadList]);
   
   return (
-    <div className='container'>
+    <div className='w-full'>
       { loading && <Loader /> }
       { error && <BackendError error={error} />}
       { !loading && rsforms && <RSFormsTable schemas={rsforms} /> }
diff --git a/rsconcept/frontend/src/pages/RegisterPage.tsx b/rsconcept/frontend/src/pages/RegisterPage.tsx
index 1fcf8441..4d7ffeff 100644
--- a/rsconcept/frontend/src/pages/RegisterPage.tsx
+++ b/rsconcept/frontend/src/pages/RegisterPage.tsx
@@ -5,7 +5,7 @@ import Form from '../components/Common/Form';
 import { useAuth } from '../context/AuthContext';
 import SubmitButton from '../components/Common/SubmitButton';
 import BackendError from '../components/BackendError';
-import { IUserSignupData } from '../models';
+import { IUserSignupData } from '../utils/models';
 import InfoMessage from '../components/InfoMessage';
 import TextURL from '../components/Common/TextURL';
 
@@ -40,7 +40,7 @@ function RegisterPage() {
   };
 
   return (
-    <div className='container py-2'> 
+    <div className='w-full py-2'> 
     { success && 
       <div className='flex flex-col items-center'>
         <InfoMessage message={`Вы успешно зарегистрировали пользователя ${username}`}/>
diff --git a/rsconcept/frontend/src/pages/UserProfilePage/UserProfile.tsx b/rsconcept/frontend/src/pages/UserProfilePage/UserProfile.tsx
index 3f293a9c..f0a0d9b2 100644
--- a/rsconcept/frontend/src/pages/UserProfilePage/UserProfile.tsx
+++ b/rsconcept/frontend/src/pages/UserProfilePage/UserProfile.tsx
@@ -1,4 +1,4 @@
-import { IUserProfile } from '../../models';
+import { IUserProfile } from '../../utils/models';
 
 interface UserProfileProps {
   profile: IUserProfile
diff --git a/rsconcept/frontend/src/pages/UserProfilePage/index.tsx b/rsconcept/frontend/src/pages/UserProfilePage/index.tsx
index dd2a4549..f01eda97 100644
--- a/rsconcept/frontend/src/pages/UserProfilePage/index.tsx
+++ b/rsconcept/frontend/src/pages/UserProfilePage/index.tsx
@@ -7,7 +7,7 @@ function UserProfilePage() {
   const { user, error, loading } = useUserProfile();
 
   return (
-    <div className='container'>
+    <div className='w-full'>
       { loading && <Loader /> }
       { error && <BackendError error={error} />}
       { user && <UserProfile profile={user} /> }
diff --git a/rsconcept/frontend/src/backendAPI.ts b/rsconcept/frontend/src/utils/backendAPI.ts
similarity index 94%
rename from rsconcept/frontend/src/backendAPI.ts
rename to rsconcept/frontend/src/utils/backendAPI.ts
index a78d3695..49884e88 100644
--- a/rsconcept/frontend/src/backendAPI.ts
+++ b/rsconcept/frontend/src/utils/backendAPI.ts
@@ -1,9 +1,9 @@
 import axios, { AxiosResponse } from 'axios'
 import { config } from './constants'
-import { ErrorInfo } from './components/BackendError'
+import { ErrorInfo } from '../components/BackendError'
 import { toast } from 'react-toastify'
 import { ICurrentUser, IRSForm, IUserInfo, IUserProfile } from './models'
-import { FilterType, RSFormsFilter } from './hooks/useRSForms'
+import { FilterType, RSFormsFilter } from '../hooks/useRSForms'
 
 export type BackendCallback = (response: AxiosResponse) => void;
 
@@ -142,6 +142,15 @@ export async function postClaimRSForm(target: string, request?: IFrontRequest) {
   });
 }
 
+export async function postCheckExpression(schema: string, request?: IFrontRequest) {
+  AxiosPost({
+    title: `Check expression for RSForm id=${schema}: ${request?.data['expression']}`,
+    endpoint: `${config.url.BASE}rsforms/${schema}/check/`,
+    request: request
+  });
+}
+
+
 // ====== Helper functions ===========
 function AxiosGet<ReturnType>({endpoint, request, title}: IAxiosRequest) {
   if (title) console.log(`[[${title}]] requested`);
diff --git a/rsconcept/frontend/src/constants.ts b/rsconcept/frontend/src/utils/constants.ts
similarity index 100%
rename from rsconcept/frontend/src/constants.ts
rename to rsconcept/frontend/src/utils/constants.ts
diff --git a/rsconcept/frontend/src/utils/models.ts b/rsconcept/frontend/src/utils/models.ts
new file mode 100644
index 00000000..f6980900
--- /dev/null
+++ b/rsconcept/frontend/src/utils/models.ts
@@ -0,0 +1,381 @@
+// Current user info
+export interface ICurrentUser {
+    id: number
+    username: string
+    is_staff: boolean
+}
+
+// User profile data
+export interface IUserProfile {
+    id: number
+    username: string
+    email: string
+    first_name: string
+    last_name: string
+}
+
+// User base info
+export interface IUserInfo {
+    id: number
+    username: string
+    first_name: string
+    last_name: string
+}
+
+// User data for signup
+export interface IUserSignupData {
+    username: string
+    email: string
+    first_name: string
+    last_name: string
+    password: string
+    password2: string
+}
+
+// Constituenta type
+export enum CstType {
+    BASE = 'basic',
+    CONSTANT = 'constant',
+    STRUCTURED = 'structure',
+    AXIOM = 'axiom',
+    TERM = 'term',
+    FUNCTION = 'function',
+    PREDICATE = 'predicate',
+    THEOREM = 'theorem'
+}
+
+// ValueClass
+export enum ValueClass {
+    INVALID = 'invalid',
+    VALUE = 'value',
+    PROPERTY = 'property'
+}
+
+// Syntax
+export enum Syntax {
+    UNDEF = 'undefined',
+    ASCII = 'ascii',
+    MATH = 'math'
+}
+
+// ParsingStatus
+export enum ParsingStatus {
+    UNDEF = 'undefined',
+    VERIFIED = 'verified',
+    INCORRECT = 'incorrect'
+}
+
+// Constituenta data
+export interface IConstituenta {
+    entityUID: number
+    alias: string
+    cstType: CstType
+    convention?: string
+    term?: {
+        raw: string
+        resolved?: string
+        forms?: string[]
+    }
+    definition?: {
+        formal: string
+        text: {
+            raw: string
+            resolved?: string
+        }
+    }
+    parse?: {
+        status: ParsingStatus
+        valueClass: ValueClass
+        typification: string
+        syntaxTree: string
+    }
+}
+
+// RSForm stats
+export interface IRSFormStats {
+    count_all: number
+    count_errors: number
+    count_property: number
+    count_incalc: number
+
+    count_termin: number
+
+    count_base: number
+    count_constant: number
+    count_structured: number
+    count_axiom: number
+    count_term: number
+    count_function: number
+    count_predicate: number
+    count_theorem: number
+}
+
+// RSForm data
+export interface IRSForm {
+    id: number
+    title: string
+    alias: string
+    comment: string
+    is_common: boolean
+    time_create: string
+    time_update: string
+    owner?: number
+    items?: IConstituenta[]
+    stats?: IRSFormStats
+}
+
+// RSForm user input
+export interface IRSFormCreateData {
+    title: string
+    alias: string
+    comment: string
+    is_common: boolean
+    file?: File
+}
+
+//! RS language token types enumeration
+export enum TokenID {
+	// Global, local IDs and literals
+	ID_LOCAL = 258,
+	ID_GLOBAL,
+	ID_FUNCTION,
+	ID_PREDICATE,
+	ID_RADICAL,
+	LIT_INTEGER,
+	LIT_INTSET,
+	LIT_EMPTYSET,
+
+	// Aithmetic
+	PLUS,
+	MINUS,
+	MULTIPLY,
+
+	// Integer predicate symbols
+	GREATER,
+	LESSER,
+	GREATER_OR_EQ,
+	LESSER_OR_EQ,
+
+	// Equality comparison
+	EQUAL,
+	NOTEQUAL,
+
+	// Logic predicate symbols
+	FORALL,
+	EXISTS,
+	NOT,
+	EQUIVALENT,
+	IMPLICATION,
+	OR,
+	AND,
+
+	// Set theory predicate symbols
+	IN,
+	NOTIN,
+	SUBSET,
+	SUBSET_OR_EQ,
+	NOTSUBSET,
+
+	// Set theory operators
+	DECART,
+	UNION,
+	INTERSECTION,
+	SET_MINUS,
+	SYMMINUS,
+	BOOLEAN,
+
+	// Structure operations
+	BIGPR,
+	SMALLPR,
+	FILTER,
+	CARD,
+	BOOL,
+	DEBOOL,
+	REDUCE,
+
+	// Term constructions prefixes
+	DECLARATIVE,
+	RECURSIVE,
+	IMPERATIVE,
+
+	// Punctuation
+	PUNC_DEFINE,
+	PUNC_STRUCT,
+	PUNC_ASSIGN,
+	PUNC_ITERATE,
+	PUNC_PL,
+	PUNC_PR,
+	PUNC_CL,
+	PUNC_CR,
+	PUNC_SL,
+	PUNC_SR,
+	PUNC_BAR,
+	PUNC_COMMA,
+	PUNC_SEMICOLON,
+
+	// ======= Non-terminal tokens =========
+	NT_ENUM_DECL, // Перечисление переменных в кванторной декларации
+	NT_TUPLE, // Кортеж (a,b,c), типизация B(T(a)xT(b)xT(c))
+	NT_ENUMERATION, // Задание множества перечислением
+	NT_TUPLE_DECL,  // Декларация переменных с помощью кортежа
+	NT_ARG_DECL, // Объявление аргумента
+
+	NT_FUNC_DEFINITION, // Определение функции
+	NT_ARGUMENTS, // Задание аргументов функции
+	NT_FUNC_CALL, // Вызов функции
+
+	NT_DECLARATIVE_EXPR, // Задание множества с помощью выражения D{x из H | A(x) }
+	NT_IMPERATIVE_EXPR, // Императивное определение
+	NT_RECURSIVE_FULL, // Полная рекурсия
+	NT_RECURSIVE_SHORT, // Сокращенная рекурсия
+
+	NT_IMP_DECLARE, // Блок декларации
+	NT_IMP_ASSIGN, // Блок присвоения
+	NT_IMP_LOGIC, // Блок проверки
+
+	// ======= Helper tokens ========
+	INTERRUPT,
+	END,
+};
+
+// Constituenta edit mode
+export enum EditMode {
+    TEXT = 'text',
+    RSLANG = 'rslang'
+}
+
+// RSExpression status
+export enum ExpressionStatus {
+    UNDEFINED = 0,
+    UNKNOWN,
+    INCORRECT,
+    INCALCULABLE,
+    PROPERTY,
+    VERIFIED
+}
+
+export function inferStatus(parse?: ParsingStatus, value?: ValueClass): ExpressionStatus {
+    if (!parse || !value) {
+        return ExpressionStatus.UNDEFINED;
+    }
+    if (parse === ParsingStatus.UNDEF) {
+        return ExpressionStatus.UNKNOWN;
+    }
+    if (parse === ParsingStatus.INCORRECT) {
+        return ExpressionStatus.INCORRECT;
+    }
+    if (value === ValueClass.INVALID) {
+        return ExpressionStatus.INCALCULABLE;
+    }
+    if (value === ValueClass.PROPERTY) {
+        return ExpressionStatus.PROPERTY;
+    }
+    return ExpressionStatus.VERIFIED
+}
+
+export function CalculateStats(schema: IRSForm) {
+    if (!schema.items) {
+        schema.stats = {
+            count_all: 0,
+            count_errors: 0,
+            count_property: 0,
+            count_incalc: 0,
+
+            count_termin: 0,
+
+            count_base: 0,
+            count_constant: 0,
+            count_structured: 0,
+            count_axiom: 0,
+            count_term: 0,
+            count_function: 0,
+            count_predicate: 0,
+            count_theorem: 0,
+        }
+        return;
+    }
+    schema.stats = {
+        count_all: schema.items?.length || 0,
+        count_errors: schema.items?.reduce(
+            (sum, cst) => sum +
+                (cst.parse?.status === ParsingStatus.INCORRECT ? 1 : 0) || 0,
+            0
+        ),
+        count_property: schema.items?.reduce(
+            (sum, cst) => sum +
+                (cst.parse?.valueClass === ValueClass.PROPERTY ? 1 : 0) || 0,
+            0
+        ),
+        count_incalc: schema.items?.reduce(
+            (sum, cst) => sum +
+                ((cst.parse?.status === ParsingStatus.VERIFIED &&
+                    cst.parse?.valueClass === ValueClass.INVALID) ? 1 : 0) || 0,
+            0
+        ),
+
+        count_termin: schema.items?.reduce(
+            (sum, cst) => (sum +
+                (cst.term?.raw ? 1 : 0) || 0),
+            0
+        ),
+
+        count_base: schema.items?.reduce(
+            (sum, cst) => sum +
+                (cst.cstType === CstType.BASE ? 1 : 0),
+            0
+        ),
+        count_constant: schema.items?.reduce(
+            (sum, cst) => sum +
+                (cst.cstType === CstType.CONSTANT ? 1 : 0),
+            0
+        ),
+        count_structured: schema.items?.reduce(
+            (sum, cst) => sum +
+                (cst.cstType === CstType.STRUCTURED ? 1 : 0),
+            0
+        ),
+        count_axiom: schema.items?.reduce(
+            (sum, cst) => sum +
+                (cst.cstType === CstType.AXIOM ? 1 : 0),
+            0
+        ),
+        count_term: schema.items?.reduce(
+            (sum, cst) => sum +
+                (cst.cstType === CstType.TERM ? 1 : 0),
+            0
+        ),
+        count_function: schema.items?.reduce(
+            (sum, cst) => sum +
+                (cst.cstType === CstType.FUNCTION ? 1 : 0),
+            0
+        ),
+        count_predicate: schema.items?.reduce(
+            (sum, cst) => sum +
+                (cst.cstType === CstType.PREDICATE ? 1 : 0),
+            0
+        ),
+        count_theorem: schema.items?.reduce(
+            (sum, cst) => sum +
+                (cst.cstType === CstType.THEOREM ? 1 : 0),
+            0
+        ),
+    }
+}
+
+export function matchConstituenta(query: string, target?: IConstituenta) {
+    if (!target) {
+        return false;
+    } else if (target.alias.match(query)) {
+        return true;
+    } else if (target.term?.resolved?.match(query)) {
+        return true;
+    } else if (target.definition?.formal.match(query)) {
+        return true;
+    } else if (target.definition?.text.resolved?.match(query)) {
+        return true;
+    } else if (target.convention?.match(query)) {
+        return true;
+    }else {
+        return false;
+    }
+}
\ No newline at end of file
diff --git a/rsconcept/frontend/src/utils/staticUI.ts b/rsconcept/frontend/src/utils/staticUI.ts
new file mode 100644
index 00000000..7481a965
--- /dev/null
+++ b/rsconcept/frontend/src/utils/staticUI.ts
@@ -0,0 +1,253 @@
+import { CstType, ExpressionStatus, IConstituenta, ParsingStatus, TokenID } from './models';
+
+export interface IRSButtonData {
+  text: string
+  tooltip: string
+}
+
+export interface IStatusInfo {
+  text: string
+  color: string
+  tooltip: string
+}
+
+export function getTypeLabel(cst: IConstituenta) {
+  if (cst.parse?.typification) {
+      return cst.parse.typification;
+  }
+  if (cst.parse?.status !==  ParsingStatus.VERIFIED) {
+      return 'N/A';
+  }
+  return 'Логический';
+}
+
+export function getRSButtonData(id: TokenID): IRSButtonData {
+  switch(id) {
+  case TokenID.BOOLEAN: return {
+    text: 'ℬ',
+    tooltip: 'Булеан [Shift + B]',
+  };
+  case TokenID.DECART: return {
+    text: '×',
+    tooltip: 'Декартово произведение [Shift + 8]',
+  };
+  case TokenID.PUNC_PL: return {
+    text: '( )',
+    tooltip: 'Скобки вокруг выражения',
+  };
+  case TokenID.PUNC_SL: return {
+    text: '[ ]',
+    tooltip: 'Скобки вокруг выражения',
+  };
+  case TokenID.FORALL: return {
+    text: '∀',
+    tooltip: 'Квантор всеобщности [`]',
+  };
+  case TokenID.EXISTS: return {
+    text: '∃',
+    tooltip: 'Квантор существования [Shift + `]',
+  };
+  case TokenID.NOT: return {
+    text: '¬',
+    tooltip: 'Отрицание [Alt + Shift + -]',
+  };
+  case TokenID.AND: return {
+    text: '&',
+    tooltip: 'Конъюнкция [Shift + 7]',
+  };
+  case TokenID.OR: return {
+    text: '∨',
+    tooltip: 'дизъюнкция [Alt + Shift + 7]',
+  };
+  case TokenID.IMPLICATION: return {
+    text: '⇒',
+    tooltip: 'импликация [Alt + Shift + ]]',
+  };
+  case TokenID.EQUIVALENT: return {
+    text: '⇔',
+    tooltip: 'эквивалентность [Alt + Shift + []',
+  };
+  case TokenID.LIT_EMPTYSET: return {
+    text: '∅',
+    tooltip: 'пустое множество [Alt + Shift + 0]',
+  };
+  case TokenID.LIT_INTSET: return {
+    text: 'Z',
+    tooltip: 'целые числа',
+  };
+  case TokenID.EQUAL: return {
+    text: '=',
+    tooltip: 'равенство',
+  };
+  case TokenID.NOTEQUAL: return {
+    text: '≠',
+    tooltip: 'неравенство [Alt + Shift + =]',
+  };
+  case TokenID.GREATER_OR_EQ: return {
+    text: '≥',
+    tooltip: 'больше или равно',
+  };
+  case TokenID.LESSER_OR_EQ: return {
+    text: '≤',
+    tooltip: 'меньше или равно',
+  };
+  case TokenID.IN: return {
+    text: '∈',
+    tooltip: 'принадлежит [Alt + \']',
+  };
+  case TokenID.NOTIN: return {
+    text: '∉',
+    tooltip: 'не принадлежит [Alt + Shift + \']',
+  };
+  case TokenID.SUBSET_OR_EQ: return {
+    text: '⊆',
+    tooltip: 'быть частью (нестрогое подмножество) [Alt + Shift + L]',
+  };
+  case TokenID.SUBSET: return {
+    text: '⊂',
+    tooltip: 'строгое подмножество [Alt + ;]',
+  };
+  case TokenID.NOTSUBSET: return {
+    text: '⊄',
+    tooltip: 'не подмножество [Alt + Shift + ;]',
+  };
+  case TokenID.INTERSECTION: return {
+    text: '∩',
+    tooltip: 'пересечение [Alt + Y]',
+  };
+  case TokenID.UNION: return {
+    text: '∪',
+    tooltip: 'объединение [Alt + U]',
+  };
+  case TokenID.MINUS: return {
+    text: '\\',
+    tooltip: 'Разность множеств',
+  };
+  case TokenID.SYMMINUS: return {
+    text: '∆',
+    tooltip: 'Симметрическая разность',
+  };
+  case TokenID.NT_DECLARATIVE_EXPR: return {
+    text: 'D{}',
+    tooltip: 'Декларативная форма определения терма',
+  };
+  case TokenID.NT_IMPERATIVE_EXPR: return {
+    text: 'I{}',
+    tooltip: 'императивная форма определения терма',
+  };
+  case TokenID.NT_RECURSIVE_FULL: return {
+    text: 'R{}',
+    tooltip: 'рекурсивная (цикличная) форма определения терма',
+  };
+  case TokenID.BIGPR: return {
+    text: 'Pr1()',
+    tooltip: 'большая проекция [Alt + W]',
+  };
+  case TokenID.SMALLPR: return {
+    text: 'pr1()',
+    tooltip: 'малая проекция [Alt + Q]',
+  };
+  case TokenID.FILTER: return {
+    text: 'Fi[]()',
+    tooltip: 'фильтр [Alt + F]',
+  };
+  case TokenID.REDUCE: return {
+    text: 'red()',
+    tooltip: 'множество-сумма [Alt + R]',
+  };
+  case TokenID.CARD: return {
+    text: 'card()',
+    tooltip: 'мощность [Alt + C]',
+  };
+  case TokenID.BOOL: return {
+    text: 'bool()',
+    tooltip: 'синглетон [Alt + B]',
+  };
+  case TokenID.DEBOOL: return {
+    text: 'debool()',
+    tooltip: 'десинглетон [Alt + D]',
+  };
+  case TokenID.PUNC_ASSIGN: return {
+    text: ':=',
+    tooltip: 'присвоение (императивный синтаксис)',
+  };
+  case TokenID.PUNC_ITERATE: return {
+    text: ':∈',
+    tooltip: 'перебор элементов множества (императивный синтаксис)',
+  };
+  }
+  return {
+    text: 'undefined',
+    tooltip: 'undefined',
+  }
+}
+
+export function getCstTypeLabel(type: CstType) {
+  switch(type) {
+  case CstType.BASE: return 'Базисное множество';
+  case CstType.CONSTANT: return 'Константное множество';
+  case CstType.STRUCTURED: return 'Родовая структура';
+  case CstType.AXIOM: return 'Аксиома';
+  case CstType.TERM: return 'Терм';
+  case CstType.FUNCTION: return 'Терм-функция';
+  case CstType.PREDICATE: return 'Предикат-функция';
+  case CstType.THEOREM: return 'Теорема';
+  }
+}
+
+export function getCstTypePrefix(type: CstType) {
+  switch(type) {
+  case CstType.BASE: return 'X';
+  case CstType.CONSTANT: return 'C';
+  case CstType.STRUCTURED: return 'S';
+  case CstType.AXIOM: return 'A';
+  case CstType.TERM: return 'T';
+  case CstType.FUNCTION: return 'F';
+  case CstType.PREDICATE: return 'P';
+  case CstType.THEOREM: return 'T';
+  }
+}
+
+export function getStatusInfo(status?: ExpressionStatus): IStatusInfo {
+  switch (status) {
+  case ExpressionStatus.UNDEFINED: return {
+    text: 'N/A',
+    color: 'bg-[#b3bdff] dark:bg-[#1e00b3]',
+    tooltip: 'произошла ошибка при проверке выражения'
+  };
+  case ExpressionStatus.UNKNOWN: return {
+    text: 'неизв',
+    color: 'bg-[#b3bdff] dark:bg-[#1e00b3]',
+    tooltip: 'требует проверки выражения'
+  };
+  case ExpressionStatus.INCORRECT: return {
+    text: 'ошибка',
+    color: 'bg-[#ff8080] dark:bg-[#800000]',
+    tooltip: 'ошибка в выражении'
+  };
+  case ExpressionStatus.INCALCULABLE: return {
+    text: 'невыч',
+    color: 'bg-[#ffbb80] dark:bg-[#964600]',
+    tooltip: 'выражение не вычислимо (экспоненциальная сложность)'
+  };
+  case ExpressionStatus.PROPERTY: return {
+    text: 'св-во',
+    color: 'bg-[#a5e9fa] dark:bg-[#36899e]',
+    tooltip: 'можно проверить принадлежность, но нельзя получить значение'
+  };
+  case ExpressionStatus.VERIFIED: return {
+    text: 'ок',
+    color: 'bg-[#aaff80] dark:bg-[#2b8000]',
+    tooltip: 'выражение корректно и вычислимо'
+  };
+  }
+  return {
+    text: 'undefined',
+    color: '',
+    tooltip: '!ERROR!'
+  };
+}
+
+export function extractGlobals(expression: string) {
+  return expression.match(/[XCSADFPT]\d+/g) || [];
+}
\ No newline at end of file
diff --git a/rsconcept/frontend/src/utils.tsx b/rsconcept/frontend/src/utils/utils.tsx
similarity index 100%
rename from rsconcept/frontend/src/utils.tsx
rename to rsconcept/frontend/src/utils/utils.tsx