From c1a994bc0ce487285fd2d06629179050942358b8 Mon Sep 17 00:00:00 2001
From: IRBorisov <8611739+IRBorisov@users.noreply.github.com>
Date: Tue, 5 Dec 2023 01:22:44 +0300
Subject: [PATCH] UI components refactoring and DOM optimization

---
 .../frontend/src/components/BackendError.tsx  |   7 +-
 .../frontend/src/components/Common/Button.tsx |   2 +-
 .../src/components/Common/ConceptSearch.tsx   |   5 +-
 .../src/components/Common/Dropdown.tsx        |   3 +-
 .../src/components/Common/DropdownButton.tsx  |  17 ++-
 .../components/Common/DropdownCheckbox.tsx    |  23 ++--
 .../src/components/Common/EmbedYoutube.tsx    |  30 ++---
 .../src/components/Common/FileInput.tsx       |  37 +++---
 .../frontend/src/components/Common/Form.tsx   |  24 ++--
 .../frontend/src/components/Common/Label.tsx  |  15 +--
 .../src/components/Common/LabeledText.tsx     |  27 ++--
 .../src/components/Common/MiniButton.tsx      |  17 ++-
 .../frontend/src/components/Common/Modal.tsx  |   7 +-
 .../src/components/Common/Overlay.tsx         |  21 +++
 .../src/components/Common/SelectMulti.tsx     |  29 ++---
 .../src/components/Common/SelectSingle.tsx    |  29 ++---
 .../src/components/Common/SelectorButton.tsx  |  17 ++-
 .../src/components/Common/SubmitButton.tsx    |   2 +-
 .../src/components/Common/TextArea.tsx        |  29 ++---
 .../src/components/Common/TextInput.tsx       |  27 ++--
 .../src/components/Common/TextURL.tsx         |  28 +++-
 .../src/components/Common/Tristate.tsx        |  37 +++---
 .../src/components/ConceptToaster.tsx         |   9 +-
 .../src/components/DataTable/DataTable.tsx    |  10 +-
 .../components/DataTable/PaginationTools.tsx  | 120 +++++++++---------
 rsconcept/frontend/src/components/Footer.tsx  |  27 ++--
 .../components/Help/ConstituentaTooltip.tsx   |  13 +-
 .../src/components/Help/HelpButton.tsx        |  38 ++++++
 .../Help/HelpTerminologyControl.tsx           |   2 +-
 .../src/components/Help/InfoTopic.tsx         |  33 +++++
 rsconcept/frontend/src/components/Icons.tsx   |  29 ++---
 .../src/components/Navigation/Logo.tsx        |  41 +++---
 .../src/components/Navigation/Navigation.tsx  |  77 +++++------
 .../Navigation/NavigationButton.tsx           |  17 ++-
 .../Navigation/ToggleNavigationButton.tsx     |  28 ++++
 .../components/Navigation/UserDropdown.tsx    |  35 +++--
 .../src/components/Navigation/UserMenu.tsx    |  41 +++---
 .../src/components/RSInput/RSInput.tsx        |   6 +-
 .../src/components/RSInput/rslang/index.ts    |   2 +-
 .../src/components/RefsInput/RefsInput.tsx    |   1 -
 .../src/components/RefsInput/parse/index.ts   |   2 +-
 .../components/Shared/ConstituentaBadge.tsx   |   3 +-
 .../components/Shared/ConstituentaPicker.tsx  |   4 +-
 .../src/components/Shared/SelectedCounter.tsx |  11 +-
 .../frontend/src/context/AuthContext.tsx      |  11 +-
 .../frontend/src/context/LibraryContext.tsx   |  27 ++--
 .../src/context/NagivationContext.tsx         |  11 +-
 .../frontend/src/context/RSFormContext.tsx    |  71 +++++------
 .../frontend/src/context/ThemeContext.tsx     |  21 ++-
 .../src/context/UserProfileContext.tsx        |   2 +-
 .../frontend/src/context/UsersContext.tsx     |  15 +--
 .../DlgConstituentaTemplate.tsx               |  61 ++++-----
 .../DlgConstituentaTemplate/TemplateTab.tsx   |   2 +-
 .../frontend/src/dialogs/DlgDeleteCst.tsx     |   5 +-
 .../DlgEditReference/DlgEditReference.tsx     |  49 +++----
 .../frontend/src/dialogs/DlgEditWordForms.tsx |  42 ++----
 .../frontend/src/dialogs/DlgRenameCst.tsx     |   7 +-
 rsconcept/frontend/src/dialogs/DlgShowAST.tsx |   4 +-
 .../frontend/src/hooks/useCheckExpression.ts  |   4 +-
 .../frontend/src/hooks/useConceptText.ts      |   2 +-
 .../frontend/src/hooks/useRSFormDetails.ts    |   4 +-
 .../frontend/src/hooks/useResolveText.ts      |   2 +-
 rsconcept/frontend/src/models/language.ts     |  12 +-
 .../frontend/src/pages/CreateRSFormPage.tsx   |  88 +++++++------
 .../src/pages/LibraryPage/ItemIcons.tsx       |  31 +++++
 .../src/pages/LibraryPage/LibraryPage.tsx     |  12 +-
 .../src/pages/LibraryPage/ViewLibrary.tsx     |  72 ++++-------
 .../src/pages/ManualsPage/TopicsList.tsx      |  31 +++--
 .../src/pages/ManualsPage/ViewTopic.tsx       |  24 +---
 .../ConstituentaToolbar.tsx                   |  33 ++---
 .../EditorConstituenta/EditorRSExpression.tsx |  18 ++-
 .../EditorConstituenta/FormConstituenta.tsx   |  10 +-
 .../ViewSideConstituents.tsx                  |   2 +-
 .../RSFormPage/EditorRSForm/RSFormToolbar.tsx |  24 ++--
 .../RSFormPage/EditorRSList/EditorRSList.tsx  |   2 +-
 .../RSFormPage/EditorRSList/RSListToolbar.tsx |  20 +--
 .../EditorTermGraph/EditorTermGraph.tsx       |  18 +--
 .../EditorTermGraph/GraphSidebar.tsx          |   2 +-
 .../EditorTermGraph/GraphToolbar.tsx          |  24 ++--
 .../EditorTermGraph/useGraphFilter.ts         |   2 +-
 .../src/pages/RSFormPage/RSFormPage.tsx       |   7 +-
 .../src/pages/RSFormPage/RSTabsMenu.tsx       |  12 +-
 .../pages/UserProfilePage/EditorPassword.tsx  |   6 +-
 .../src/pages/UserProfilePage/UserTabs.tsx    |  29 ++---
 rsconcept/frontend/src/utils/codemirror.ts    |  16 +--
 rsconcept/frontend/src/utils/color.ts         |   8 +-
 rsconcept/frontend/src/utils/labels.ts        |   2 +-
 87 files changed, 915 insertions(+), 912 deletions(-)
 create mode 100644 rsconcept/frontend/src/components/Common/Overlay.tsx
 create mode 100644 rsconcept/frontend/src/components/Help/HelpButton.tsx
 create mode 100644 rsconcept/frontend/src/components/Help/InfoTopic.tsx
 create mode 100644 rsconcept/frontend/src/components/Navigation/ToggleNavigationButton.tsx
 create mode 100644 rsconcept/frontend/src/pages/LibraryPage/ItemIcons.tsx

diff --git a/rsconcept/frontend/src/components/BackendError.tsx b/rsconcept/frontend/src/components/BackendError.tsx
index 756a7fed..161bc68b 100644
--- a/rsconcept/frontend/src/components/BackendError.tsx
+++ b/rsconcept/frontend/src/components/BackendError.tsx
@@ -59,10 +59,9 @@ function DescribeError(error: ErrorInfo) {
 
 function BackendError({ error }: BackendErrorProps) {
   return (
-    <div className='px-3 py-2 min-w-[15rem] text-sm font-semibold select-text text-warning'>
-      {DescribeError(error)}
-    </div>
-  );
+  <div className='px-3 py-2 min-w-[15rem] text-sm font-semibold select-text text-warning'>
+    {DescribeError(error)}
+  </div>);
 }
 
 export default BackendError;
diff --git a/rsconcept/frontend/src/components/Common/Button.tsx b/rsconcept/frontend/src/components/Common/Button.tsx
index f0d6b17c..c4d4c206 100644
--- a/rsconcept/frontend/src/components/Common/Button.tsx
+++ b/rsconcept/frontend/src/components/Common/Button.tsx
@@ -1,4 +1,4 @@
-import { IColorsProps, IControlProps } from '../commonInterfaces'
+import { IColorsProps, IControlProps } from '../commonInterfaces';
 
 interface ButtonProps
 extends IControlProps, IColorsProps, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'children' | 'title'| 'type'> {
diff --git a/rsconcept/frontend/src/components/Common/ConceptSearch.tsx b/rsconcept/frontend/src/components/Common/ConceptSearch.tsx
index a12f3435..e6f1a3d7 100644
--- a/rsconcept/frontend/src/components/Common/ConceptSearch.tsx
+++ b/rsconcept/frontend/src/components/Common/ConceptSearch.tsx
@@ -14,10 +14,9 @@ function ConceptSearch({ value, onChange, dense }: ConceptSearchProps) {
     <div className='absolute inset-y-0 flex items-center pl-3 pointer-events-none text-controls'>
       <MagnifyingGlassIcon />
     </div>
-    <TextInput
-      dimensions={`w-full pl-10 ${borderClass} rounded`}
+    <TextInput noOutline
       placeholder='Поиск'
-      noOutline
+      dimensions={`w-full pl-10 ${borderClass}`}
       noBorder={dense}
       value={value}
       onChange={event => (onChange ? onChange(event.target.value) : undefined)}
diff --git a/rsconcept/frontend/src/components/Common/Dropdown.tsx b/rsconcept/frontend/src/components/Common/Dropdown.tsx
index 1ad70286..f2e9a239 100644
--- a/rsconcept/frontend/src/components/Common/Dropdown.tsx
+++ b/rsconcept/frontend/src/components/Common/Dropdown.tsx
@@ -10,8 +10,7 @@ function Dropdown({ children, dimensions = 'w-fit', stretchLeft }: DropdownProps
   <div className={`absolute ${stretchLeft ? 'right-0' : 'left-0'} mt-3 z-modal-tooltip flex flex-col items-stretch justify-start origin-top-right border rounded-md shadow-lg clr-input ${dimensions}`}>
     {children}
   </div>
-  </div>
-  );
+  </div>);
 }
 
 export default Dropdown;
diff --git a/rsconcept/frontend/src/components/Common/DropdownButton.tsx b/rsconcept/frontend/src/components/Common/DropdownButton.tsx
index 60999f63..62f56f63 100644
--- a/rsconcept/frontend/src/components/Common/DropdownButton.tsx
+++ b/rsconcept/frontend/src/components/Common/DropdownButton.tsx
@@ -9,15 +9,14 @@ function DropdownButton({ tooltip, onClick, disabled, children }: DropdownButton
   const behavior = onClick ? 'cursor-pointer disabled:cursor-not-allowed clr-hover' : 'cursor-default';
   const text = disabled ? 'text-controls' : '';
   return (
-    <button type='button'
-      disabled={disabled}
-      title={tooltip}
-      onClick={onClick}
-      className={`px-3 py-1 text-left overflow-ellipsis whitespace-nowrap ${behavior} ${text}`}
-    >
-      {children}
-    </button>
-  );
+  <button type='button'
+    disabled={disabled}
+    title={tooltip}
+    onClick={onClick}
+    className={`px-3 py-1 text-left overflow-ellipsis whitespace-nowrap ${behavior} ${text}`}
+  >
+    {children}
+  </button>);
 }
 
 export default DropdownButton;
diff --git a/rsconcept/frontend/src/components/Common/DropdownCheckbox.tsx b/rsconcept/frontend/src/components/Common/DropdownCheckbox.tsx
index 2fe4afe7..404a8725 100644
--- a/rsconcept/frontend/src/components/Common/DropdownCheckbox.tsx
+++ b/rsconcept/frontend/src/components/Common/DropdownCheckbox.tsx
@@ -11,18 +11,17 @@ interface DropdownCheckboxProps {
 function DropdownCheckbox({ tooltip, setValue, disabled, ...restProps }: DropdownCheckboxProps) {
   const behavior = (setValue && !disabled) ? 'clr-hover' : '';
   return (
-    <div
-      title={tooltip}
-      className={`px-4 py-1 text-left overflow-ellipsis ${behavior} w-full whitespace-nowrap`}
-    >
-      <Checkbox 
-        dimensions='w-full'
-        disabled={disabled}
-        setValue={setValue}
-        {...restProps}
-      /> 
-    </div>
-  );
+  <div
+    title={tooltip}
+    className={`px-4 py-1 text-left overflow-ellipsis ${behavior} w-full whitespace-nowrap`}
+  >
+    <Checkbox 
+      dimensions='w-full'
+      disabled={disabled}
+      setValue={setValue}
+      {...restProps}
+    /> 
+  </div>);
 }
 
 export default DropdownCheckbox;
diff --git a/rsconcept/frontend/src/components/Common/EmbedYoutube.tsx b/rsconcept/frontend/src/components/Common/EmbedYoutube.tsx
index f33f515b..88fd20d7 100644
--- a/rsconcept/frontend/src/components/Common/EmbedYoutube.tsx
+++ b/rsconcept/frontend/src/components/Common/EmbedYoutube.tsx
@@ -9,22 +9,20 @@ function EmbedYoutube({ videoID, pxHeight, pxWidth }: EmbedYoutubeProps) {
     pxWidth = pxHeight * 16 / 9;
   }
   return (
-    <div 
-      className='relative'
-      style={{height: 0, paddingBottom: `${pxHeight}px`, paddingLeft: `${pxWidth}px`}}
-    >
-      <iframe
-        className='absolute top-0 left-0 border'
-        style={{minHeight: `${pxHeight}px`, minWidth: `${pxWidth}px`}}
-        width={`${pxWidth}px`}
-        height={`${pxHeight}px`}
-        src={`https://www.youtube.com/embed/${videoID}`}
-        allow='accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture'
-        allowFullScreen
-        title='Встроенное видео Youtube'
-      />
-    </div>
-  );
+  <div 
+    className='relative'
+    style={{height: 0, paddingBottom: `${pxHeight}px`, paddingLeft: `${pxWidth}px`}}
+  >
+    <iframe allowFullScreen
+      title='Встроенное видео Youtube'
+      allow='accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture'
+      className='absolute top-0 left-0 border'
+      style={{minHeight: `${pxHeight}px`, minWidth: `${pxWidth}px`}}
+      width={`${pxWidth}px`}
+      height={`${pxHeight}px`}
+      src={`https://www.youtube.com/embed/${videoID}`}
+    />
+  </div>);
 }
 
 export default EmbedYoutube;
diff --git a/rsconcept/frontend/src/components/Common/FileInput.tsx b/rsconcept/frontend/src/components/Common/FileInput.tsx
index a6aaff04..47bc6433 100644
--- a/rsconcept/frontend/src/components/Common/FileInput.tsx
+++ b/rsconcept/frontend/src/components/Common/FileInput.tsx
@@ -38,25 +38,24 @@ function FileInput({
   };
 
   return (
-    <div className={`flex flex-col gap-2 py-2 items-start ${dimensions}`}>
-      <input type='file'
-        ref={inputRef}
-        style={{ display: 'none' }}
-        accept={acceptType}
-        onChange={handleFileChange}
-        {...restProps}
-      />
-      <Button
-        text={label}
-        icon={<UploadIcon/>}
-        onClick={handleUploadClick}
-        tooltip={tooltip}
-      />
-      <Label
-        text={fileName}
-      />
-    </div>
-  );
+  <div className={`flex flex-col gap-2 py-2 items-start ${dimensions}`}>
+    <input type='file'
+      ref={inputRef}
+      style={{ display: 'none' }}
+      accept={acceptType}
+      onChange={handleFileChange}
+      {...restProps}
+    />
+    <Button
+      text={label}
+      icon={<UploadIcon/>}
+      onClick={handleUploadClick}
+      tooltip={tooltip}
+    />
+    <Label
+      text={fileName}
+    />
+  </div>);
 }
 
 export default FileInput;
diff --git a/rsconcept/frontend/src/components/Common/Form.tsx b/rsconcept/frontend/src/components/Common/Form.tsx
index 3453196f..b241968a 100644
--- a/rsconcept/frontend/src/components/Common/Form.tsx
+++ b/rsconcept/frontend/src/components/Common/Form.tsx
@@ -1,20 +1,24 @@
 interface FormProps {
   title?: string
+  className?: string
   dimensions?: string
   onSubmit: (event: React.FormEvent<HTMLFormElement>) => void
   children: React.ReactNode
 }
 
-function Form({ title, onSubmit, dimensions = 'max-w-xs', children }: FormProps) {
+function Form({
+  title, className, onSubmit, 
+  dimensions='max-w-xs',
+  children
+}: FormProps) {
   return (
-    <form
-      className={`border shadow-md py-2 clr-app px-6 flex flex-col gap-3 ${dimensions}`}
-      onSubmit={onSubmit}
-    >
-      { title ? <h1 className='text-xl whitespace-nowrap'>{title}</h1> : null }
-      {children}
-    </form>
-  );
+  <form
+    className={`border shadow-md py-2 clr-app px-6 flex flex-col gap-3 ${dimensions} ${className}`}
+    onSubmit={onSubmit}
+  >
+    { title ? <h1 className='text-xl whitespace-nowrap'>{title}</h1> : null }
+    {children}
+  </form>);
 }
 
-export default Form;
+export default Form;
\ No newline at end of file
diff --git a/rsconcept/frontend/src/components/Common/Label.tsx b/rsconcept/frontend/src/components/Common/Label.tsx
index ba6eb9c2..6168f516 100644
--- a/rsconcept/frontend/src/components/Common/Label.tsx
+++ b/rsconcept/frontend/src/components/Common/Label.tsx
@@ -8,14 +8,13 @@ extends Omit<React.DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTML
 
 function Label({ text, tooltip, className, ...restProps }: LabelProps) {
   return (
-    <label
-      className={`text-sm font-semibold ${className} whitespace-nowrap`}
-      title={tooltip}
-      {...restProps}
-    >
-      {text}
-    </label>
-  );
+  <label
+    className={`text-sm font-semibold ${className} whitespace-nowrap`}
+    title={tooltip}
+    {...restProps}
+  >
+    {text}
+  </label>);
 }
 
 export default Label;
diff --git a/rsconcept/frontend/src/components/Common/LabeledText.tsx b/rsconcept/frontend/src/components/Common/LabeledText.tsx
index 786c1fce..e44cc2a7 100644
--- a/rsconcept/frontend/src/components/Common/LabeledText.tsx
+++ b/rsconcept/frontend/src/components/Common/LabeledText.tsx
@@ -7,21 +7,18 @@ interface LabeledTextProps {
 
 function LabeledText({ id, label, text, tooltip }: LabeledTextProps) {
   return (
-    <div className='flex justify-between gap-4'>
-      <label
-        className='font-semibold'
-        title={tooltip}
-        htmlFor={id}
-      >
-        {label}
-      </label>
-      <span
-        id={id}
-      >
-        {text}
-      </span>
-    </div>
-  );
+  <div className='flex justify-between gap-4'>
+    <label
+      className='font-semibold'
+      title={tooltip}
+      htmlFor={id}
+    >
+      {label}
+    </label>
+    <span id={id}>
+      {text}
+    </span>
+  </div>);
 }
 
 export default LabeledText;
diff --git a/rsconcept/frontend/src/components/Common/MiniButton.tsx b/rsconcept/frontend/src/components/Common/MiniButton.tsx
index 65584882..0a5cad0b 100644
--- a/rsconcept/frontend/src/components/Common/MiniButton.tsx
+++ b/rsconcept/frontend/src/components/Common/MiniButton.tsx
@@ -12,15 +12,14 @@ function MiniButton({
   ...restProps
 }: MiniButtonProps) {
   return (
-    <button type='button'
-      title={tooltip}
-      tabIndex={tabIndex ?? -1}
-      className={`px-1 py-1 rounded-full cursor-pointer disabled:cursor-not-allowed clr-btn-clear ${noHover ? 'outline-none' : 'clr-hover'} ${dimensions}`}
-      {...restProps}
-    >
-      {icon}
-    </button>
-  );
+  <button type='button'
+    title={tooltip}
+    tabIndex={tabIndex ?? -1}
+    className={`px-1 py-1 rounded-full cursor-pointer disabled:cursor-not-allowed clr-btn-clear ${noHover ? 'outline-none' : 'clr-hover'} ${dimensions}`}
+    {...restProps}
+  >
+    {icon}
+  </button>);
 }
 
 export default MiniButton;
diff --git a/rsconcept/frontend/src/components/Common/Modal.tsx b/rsconcept/frontend/src/components/Common/Modal.tsx
index 0c0a4735..29d7e8bd 100644
--- a/rsconcept/frontend/src/components/Common/Modal.tsx
+++ b/rsconcept/frontend/src/components/Common/Modal.tsx
@@ -4,6 +4,7 @@ import useEscapeKey from '../../hooks/useEscapeKey';
 import { CrossIcon } from '../Icons';
 import Button from './Button';
 import MiniButton from './MiniButton';
+import Overlay from './Overlay';
 
 export interface ModalProps {
   title?: string
@@ -43,15 +44,13 @@ function Modal({
     <div ref={ref}
       className='fixed bottom-1/2 left-1/2 translate-y-1/2 -translate-x-1/2 px-6 w-fit max-w-[calc(100vw-2rem)] h-fit z-modal clr-app border shadow-md'
     >
-      <div className='relative'>
-      <div className='absolute right-[-1rem] top-2 text-disabled'>
+      <Overlay position='right-[-1rem] top-2' className='text-disabled'>
         <MiniButton
           tooltip='Закрыть диалоговое окно [ESC]'
           icon={<CrossIcon size={5}/>}
           onClick={handleCancel}
         />
-      </div>
-      </div>
+      </Overlay>
       
       {title ? <h1 className='my-2 text-lg select-none'>{title}</h1> : null}
 
diff --git a/rsconcept/frontend/src/components/Common/Overlay.tsx b/rsconcept/frontend/src/components/Common/Overlay.tsx
new file mode 100644
index 00000000..f1420172
--- /dev/null
+++ b/rsconcept/frontend/src/components/Common/Overlay.tsx
@@ -0,0 +1,21 @@
+interface OverlayProps {
+  children: React.ReactNode
+  position?: string
+  className?: string
+  layer?: string
+}
+
+function Overlay({
+  children, className,
+  position='top-0 right-0',
+  layer='z-pop'
+}: OverlayProps) {
+  return (
+  <div className='relative'>
+  <div className={`absolute ${className} ${position} ${layer}`}>
+    {children}
+  </div>
+  </div>);
+}
+
+export default Overlay;
diff --git a/rsconcept/frontend/src/components/Common/SelectMulti.tsx b/rsconcept/frontend/src/components/Common/SelectMulti.tsx
index 1469a8dc..3a21de77 100644
--- a/rsconcept/frontend/src/components/Common/SelectMulti.tsx
+++ b/rsconcept/frontend/src/components/Common/SelectMulti.tsx
@@ -53,21 +53,20 @@ function SelectMulti<Option, Group extends GroupBase<Option> = GroupBase<Option>
   }), [colors]);
 
   return (
-    <Select isMulti
-      noOptionsMessage={() => 'Список пуст'}
-      theme={theme => ({
-        ...theme,
-        borderRadius: 0,
-        colors: {
-          ...theme.colors,
-          ...themeColors
-        },
-      })}
-      menuPortalTarget={!noPortal ? document.body : null}
-      styles={adjustedStyles}
-      {...restProps}
-    />
-  );
+  <Select isMulti
+    noOptionsMessage={() => 'Список пуст'}
+    theme={theme => ({
+      ...theme,
+      borderRadius: 0,
+      colors: {
+        ...theme.colors,
+        ...themeColors
+      },
+    })}
+    menuPortalTarget={!noPortal ? document.body : null}
+    styles={adjustedStyles}
+    {...restProps}
+  />);
 }
 
 export default SelectMulti;
diff --git a/rsconcept/frontend/src/components/Common/SelectSingle.tsx b/rsconcept/frontend/src/components/Common/SelectSingle.tsx
index 26a54f06..a9d189df 100644
--- a/rsconcept/frontend/src/components/Common/SelectSingle.tsx
+++ b/rsconcept/frontend/src/components/Common/SelectSingle.tsx
@@ -48,21 +48,20 @@ function SelectSingle<Option, Group extends GroupBase<Option> = GroupBase<Option
   }), [colors]);
 
   return (
-    <Select
-      noOptionsMessage={() => 'Список пуст'}
-      theme={theme => ({
-        ...theme,
-        borderRadius: 0,
-        colors: {
-          ...theme.colors,
-          ...themeColors
-        },
-      })}
-      menuPortalTarget={!noPortal ? document.body : null}
-      styles={adjustedStyles}
-      {...restProps}
-    />
-  );
+  <Select
+    noOptionsMessage={() => 'Список пуст'}
+    theme={theme => ({
+      ...theme,
+      borderRadius: 0,
+      colors: {
+        ...theme.colors,
+        ...themeColors
+      },
+    })}
+    menuPortalTarget={!noPortal ? document.body : null}
+    styles={adjustedStyles}
+    {...restProps}
+  />);
 }
 
 export default SelectSingle;
diff --git a/rsconcept/frontend/src/components/Common/SelectorButton.tsx b/rsconcept/frontend/src/components/Common/SelectorButton.tsx
index c638db13..cb70d01f 100644
--- a/rsconcept/frontend/src/components/Common/SelectorButton.tsx
+++ b/rsconcept/frontend/src/components/Common/SelectorButton.tsx
@@ -21,15 +21,14 @@ function SelectorButton({
   const position = `px-1 flex flex-start items-center gap-1 ${dimensions}`;
   const design = (transparent ? 'clr-hover' : `border ${colors}`) + ' text-btn text-controls';
   return (
-    <button type='button'
-      className={`text-sm small-caps select-none ${cursor} ${position} ${design}`}
-      title={tooltip}
-      {...restProps}
-    >
-      {icon ? icon : null}
-      {text ? <div className={'font-semibold whitespace-nowrap pb-1'}>{text}</div> : null}
-    </button>
-  );
+  <button type='button'
+    className={`text-sm small-caps select-none ${cursor} ${position} ${design}`}
+    title={tooltip}
+    {...restProps}
+  >
+    {icon ? icon : null}
+    {text ? <div className={'font-semibold whitespace-nowrap pb-1'}>{text}</div> : null}
+  </button>);
 }
 
 export default SelectorButton;
diff --git a/rsconcept/frontend/src/components/Common/SubmitButton.tsx b/rsconcept/frontend/src/components/Common/SubmitButton.tsx
index 7c9deb32..39265f68 100644
--- a/rsconcept/frontend/src/components/Common/SubmitButton.tsx
+++ b/rsconcept/frontend/src/components/Common/SubmitButton.tsx
@@ -14,7 +14,7 @@ function SubmitButton({
   return (
   <button type='submit'
     title={tooltip}
-    className={`px-4 py-2 inline-flex items-center gap-2 align-middle justify-center font-semibold select-none disabled:cursor-not-allowed border rounded clr-btn-primary ${dimensions} ${loading ? ' cursor-progress' : ''}`}
+    className={`px-3 py-2 inline-flex items-center gap-2 align-middle justify-center font-semibold select-none disabled:cursor-not-allowed border clr-btn-primary ${dimensions} ${loading ? ' cursor-progress' : ''}`}
     disabled={disabled ?? loading}
     {...restProps}
   >
diff --git a/rsconcept/frontend/src/components/Common/TextArea.tsx b/rsconcept/frontend/src/components/Common/TextArea.tsx
index fbd9e5b6..066d178b 100644
--- a/rsconcept/frontend/src/components/Common/TextArea.tsx
+++ b/rsconcept/frontend/src/components/Common/TextArea.tsx
@@ -18,21 +18,20 @@ function TextArea({
   const borderClass = noBorder ? '': 'border';
   const outlineClass = noOutline ? '': 'clr-outline';
   return (
-    <div className={`flex ${dense ? 'items-center gap-4 ' + dimensions : 'flex-col items-start gap-2'}`}>
-      {label && 
-      <Label
-        text={label}
-        htmlFor={id}
-      />}
-      <textarea id={id}
-        title={tooltip}
-        className={`px-3 py-2 leading-tight ${outlineClass} ${borderClass} ${colors} ${dense ? 'w-full' : dimensions}`}
-        rows={rows}
-        required={required}
-        {...restProps}
-      />
-    </div>
-  );
+  <div className={`flex ${dense ? 'items-center gap-4 ' + dimensions : 'flex-col items-start gap-2'}`}>
+    {label && 
+    <Label
+      text={label}
+      htmlFor={id}
+    />}
+    <textarea id={id}
+      title={tooltip}
+      className={`px-3 py-2 leading-tight ${outlineClass} ${borderClass} ${colors} ${dense ? 'w-full' : dimensions}`}
+      rows={rows}
+      required={required}
+      {...restProps}
+    />
+  </div>);
 }
 
 export default TextArea;
diff --git a/rsconcept/frontend/src/components/Common/TextInput.tsx b/rsconcept/frontend/src/components/Common/TextInput.tsx
index cc4961fb..9f6c1b17 100644
--- a/rsconcept/frontend/src/components/Common/TextInput.tsx
+++ b/rsconcept/frontend/src/components/Common/TextInput.tsx
@@ -22,20 +22,19 @@ function TextInput({
   const borderClass = noBorder ? '' : 'border';
   const outlineClass = noOutline ? '' : 'clr-outline';
   return (
-    <div className={`flex ${dense ? 'items-center gap-4 ' + dimensions : 'flex-col items-start gap-2'}`}>
-      {label ?
-      <Label
-        text={label}
-        htmlFor={id}
-      /> : null}
-      <input id={id}
-        title={tooltip}
-        onKeyDown={!allowEnter && !onKeyDown ? preventEnterCapture : onKeyDown}
-        className={`px-3 py-2 leading-tight truncate hover:text-clip ${colors} ${outlineClass} ${borderClass} ${dense ? 'w-full' : dimensions}`}
-        {...restProps}
-      />
-    </div>
-  );
+  <div className={`flex ${dense ? 'items-center gap-4 ' + dimensions : 'flex-col items-start gap-2'}`}>
+    {label ?
+    <Label
+      text={label}
+      htmlFor={id}
+    /> : null}
+    <input id={id}
+      title={tooltip}
+      onKeyDown={!allowEnter && !onKeyDown ? preventEnterCapture : onKeyDown}
+      className={`px-3 py-2 leading-tight truncate hover:text-clip ${colors} ${outlineClass} ${borderClass} ${dense ? 'w-full' : dimensions}`}
+      {...restProps}
+    />
+  </div>);
 }
 
 export default TextInput;
diff --git a/rsconcept/frontend/src/components/Common/TextURL.tsx b/rsconcept/frontend/src/components/Common/TextURL.tsx
index abcfd4f3..9e5c41fa 100644
--- a/rsconcept/frontend/src/components/Common/TextURL.tsx
+++ b/rsconcept/frontend/src/components/Common/TextURL.tsx
@@ -2,15 +2,33 @@ import { Link } from 'react-router-dom';
 
 interface TextURLProps {
   text: string
-  href: string
+  tooltip?: string
+  href?: string
+  onClick?: () => void
 }
 
-function TextURL({ text, href }: TextURLProps) {
-  return (
-    <Link className='hover:underline text-url' to={href}>
+function TextURL({ text, href, tooltip, onClick }: TextURLProps) {
+  if (href) {
+    return (
+    <Link
+      className='cursor-pointer hover:underline text-url'
+      title={tooltip}
+      to={href}
+    >
       {text}
     </Link>
-  );
+    );
+  } else if (onClick) {
+    return (
+    <span
+      className='cursor-pointer hover:underline text-url'
+      onClick={onClick}
+    >
+      {text}
+    </span>);
+  } else {
+    return null;
+  }
 }
 
 export default TextURL;
diff --git a/rsconcept/frontend/src/components/Common/Tristate.tsx b/rsconcept/frontend/src/components/Common/Tristate.tsx
index 2889d7d5..5f89b919 100644
--- a/rsconcept/frontend/src/components/Common/Tristate.tsx
+++ b/rsconcept/frontend/src/components/Common/Tristate.tsx
@@ -47,25 +47,24 @@ function Tristate({
   }
 
   return (
-    <button type='button' id={id}
-      className={`flex items-center clr-outline focus:outline-dotted focus:outline-1 ${dimensions}`}
-      title={tooltip}
-      disabled={disabled}
-      onClick={handleClick}
-      {...restProps}
-    >
-      <div className={`w-4 h-4 shrink-0 mt-0.5 border rounded-sm ${bgColor} ${cursor}`} >
-        {value ? <div className='mt-[1px] ml-[1px]'><CheckboxCheckedIcon /></div> : null}
-        {value == null ? <div className='mt-[1px] ml-[1px]'><CheckboxNullIcon /></div> : null}
-      </div>
-      {label ? 
-      <Label
-        className={`${cursor} px-2 text-start`}
-        text={label}
-        htmlFor={id}
-      /> : null}
-    </button>
-  );
+  <button type='button' id={id}
+    className={`flex items-center clr-outline focus:outline-dotted focus:outline-1 ${dimensions}`}
+    title={tooltip}
+    disabled={disabled}
+    onClick={handleClick}
+    {...restProps}
+  >
+    <div className={`w-4 h-4 shrink-0 mt-0.5 border rounded-sm ${bgColor} ${cursor}`} >
+      {value ? <div className='mt-[1px] ml-[1px]'><CheckboxCheckedIcon /></div> : null}
+      {value == null ? <div className='mt-[1px] ml-[1px]'><CheckboxNullIcon /></div> : null}
+    </div>
+    {label ? 
+    <Label
+      className={`${cursor} px-2 text-start`}
+      text={label}
+      htmlFor={id}
+    /> : null}
+  </button>);
 }
 
 export default Tristate;
diff --git a/rsconcept/frontend/src/components/ConceptToaster.tsx b/rsconcept/frontend/src/components/ConceptToaster.tsx
index 061075dc..b69822dc 100644
--- a/rsconcept/frontend/src/components/ConceptToaster.tsx
+++ b/rsconcept/frontend/src/components/ConceptToaster.tsx
@@ -8,11 +8,10 @@ function ToasterThemed(props: ToasterThemedProps) {
   const { darkMode } = useConceptTheme();
 
   return (
-    <ToastContainer
-      theme={ darkMode ? 'dark' : 'light'}
-      {...props}
-    />
-  );
+  <ToastContainer
+    theme={ darkMode ? 'dark' : 'light'}
+    {...props}
+  />);
 }
 
 export default ToasterThemed;
diff --git a/rsconcept/frontend/src/components/DataTable/DataTable.tsx b/rsconcept/frontend/src/components/DataTable/DataTable.tsx
index 9514352a..cb88b401 100644
--- a/rsconcept/frontend/src/components/DataTable/DataTable.tsx
+++ b/rsconcept/frontend/src/components/DataTable/DataTable.tsx
@@ -1,7 +1,7 @@
 import {
   Cell, ColumnSort,
   createColumnHelper, flexRender, getCoreRowModel,
-  getPaginationRowModel,   getSortedRowModel, Header, HeaderGroup,
+  getPaginationRowModel, getSortedRowModel, Header, HeaderGroup,
   PaginationState, Row, RowData, type RowSelectionState,
   SortingState, TableOptions, useReactTable, type VisibilityState
 } from '@tanstack/react-table';
@@ -73,7 +73,7 @@ export default function DataTable<TData extends RowData>({
   paginationOptions=[10, 20, 30, 40, 50],
   onChangePaginationOption,
 
-  ...options
+  ...restProps
 }: DataTableProps<TData>) {
   const [sorting, setSorting] = useState<SortingState>(initialSorting ? [initialSorting] : []);
 
@@ -97,16 +97,16 @@ export default function DataTable<TData extends RowData>({
     onPaginationChange: enablePagination ? setPagination : undefined,
     onSortingChange: enableSorting ? setSorting : undefined,
     enableMultiRowSelection: enableRowSelection,
-    ...options
+    ...restProps
   });
 
   const isEmpty = tableImpl.getRowModel().rows.length === 0;
 
   function getRowStyles(row: Row<TData>) {
-    return  {...conditionalRowStyles!
+    return ({...conditionalRowStyles!
       .filter(item => item.when(row.original))
       .reduce((prev, item) => ({...prev, ...item.style}), {})
-  };
+    });
   }
 
   return (
diff --git a/rsconcept/frontend/src/components/DataTable/PaginationTools.tsx b/rsconcept/frontend/src/components/DataTable/PaginationTools.tsx
index 792b0bc3..caf58885 100644
--- a/rsconcept/frontend/src/components/DataTable/PaginationTools.tsx
+++ b/rsconcept/frontend/src/components/DataTable/PaginationTools.tsx
@@ -22,68 +22,68 @@ function PaginationTools<TData>({ table, paginationOptions, onChangePaginationOp
   
   return (
   <div className='flex items-center justify-end w-full my-2 text-sm select-none text-controls'>
-  <div className='flex items-center gap-1 mr-3'>
-    <div className=''>
-      {table.getState().pagination.pageIndex * table.getState().pagination.pageSize + 1}
-      -
-      {Math.min(table.getFilteredRowModel().rows.length, (table.getState().pagination.pageIndex + 1) * table.getState().pagination.pageSize)}
+    <div className='flex items-center gap-1 mr-3'>
+      <div className=''>
+        {table.getState().pagination.pageIndex * table.getState().pagination.pageSize + 1}
+        -
+        {Math.min(table.getFilteredRowModel().rows.length, (table.getState().pagination.pageIndex + 1) * table.getState().pagination.pageSize)}
+      </div>
+      <span>из</span>
+      <div className=''>{table.getFilteredRowModel().rows.length}</div>
     </div>
-    <span>из</span>
-    <div className=''>{table.getFilteredRowModel().rows.length}</div>
-  </div>
-  <div className='flex'>
-    <button type='button'
-      className='clr-hover text-controls'
-      onClick={() => table.setPageIndex(0)}
-      disabled={!table.getCanPreviousPage()}
+    <div className='flex'>
+      <button type='button'
+        className='clr-hover text-controls'
+        onClick={() => table.setPageIndex(0)}
+        disabled={!table.getCanPreviousPage()}
+      >
+        <GotoFirstIcon />
+      </button>
+      <button type='button'
+        className='clr-hover text-controls'
+        onClick={() => table.previousPage()}
+        disabled={!table.getCanPreviousPage()}
+      >
+        <GotoPrevIcon />
+      </button>
+      <input
+        title='Номер страницы. Выделите для ручного ввода'
+        className='w-6 text-center clr-app'
+        value={table.getState().pagination.pageIndex + 1}
+        onChange={event => {
+          const page = event.target.value ? Number(event.target.value) - 1 : 0;
+          if (page + 1 <= table.getPageCount()) {
+            table.setPageIndex(page);
+          }
+        }}
+      />
+      <button type='button'
+        className='clr-hover text-controls'
+        onClick={() => table.nextPage()}
+        disabled={!table.getCanNextPage()}
+      >
+        <GotoNextIcon />
+      </button>
+      <button type='button'
+        className='clr-hover text-controls'
+        onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+        disabled={!table.getCanNextPage()}
+      >
+        <GotoLastIcon />
+      </button>
+    </div>
+    <select
+      value={table.getState().pagination.pageSize}
+      onChange={handlePaginationOptionsChange}
+      className='mx-2 cursor-pointer clr-app'
     >
-      <GotoFirstIcon />
-    </button>
-    <button type='button'
-      className='clr-hover text-controls'
-      onClick={() => table.previousPage()}
-      disabled={!table.getCanPreviousPage()}
-    >
-      <GotoPrevIcon />
-    </button>
-    <input type='text'
-      title='Номер страницы. Выделите для ручного ввода'
-      className='w-6 text-center clr-app'
-      value={table.getState().pagination.pageIndex + 1}
-      onChange={event => {
-        const page = event.target.value ? Number(event.target.value) - 1 : 0;
-        if (page + 1 <= table.getPageCount()) {
-          table.setPageIndex(page);
-        }
-      }}
-    />
-    <button type='button'
-      className='clr-hover text-controls'
-      onClick={() => table.nextPage()}
-      disabled={!table.getCanNextPage()}
-    >
-      <GotoNextIcon />
-    </button>
-    <button type='button'
-      className='clr-hover text-controls'
-      onClick={() => table.setPageIndex(table.getPageCount() - 1)}
-      disabled={!table.getCanNextPage()}
-    >
-      <GotoLastIcon />
-    </button>
-  </div>
-  <select
-    value={table.getState().pagination.pageSize}
-    onChange={handlePaginationOptionsChange}
-    className='mx-2 cursor-pointer clr-app'
-  >
-  {paginationOptions.map(
-  (pageSize) => (
-    <option key={`${prefixes.page_size}${pageSize}`} value={pageSize}>
-      {pageSize} на стр
-    </option>
-  ))}
-  </select>
+    {paginationOptions.map(
+    (pageSize) => (
+      <option key={`${prefixes.page_size}${pageSize}`} value={pageSize}>
+        {pageSize} на стр
+      </option>
+    ))}
+    </select>
   </div>);
 }
 
diff --git a/rsconcept/frontend/src/components/Footer.tsx b/rsconcept/frontend/src/components/Footer.tsx
index 4bb0a44b..9121e790 100644
--- a/rsconcept/frontend/src/components/Footer.tsx
+++ b/rsconcept/frontend/src/components/Footer.tsx
@@ -4,21 +4,20 @@ import { urls } from '../utils/constants';
 
 function Footer() {
   return (
-    <footer className='px-4 py-2 text-sm select-none z-navigation whitespace-nowrap clr-footer'>
-      <div className='justify-center w-full mx-auto'>
-        <div className='mb-2 text-center'>
-          <Link className='mx-2 hover:underline' to='/library' tabIndex={-1}>Библиотека</Link> 
-          <Link className='mx-2 hover:underline' to='/manuals' tabIndex={-1}>Справка</Link>
-          <Link className='mx-2 hover:underline' to={urls.concept} tabIndex={-1}>Центр Концепт</Link>
-          <Link className='mx-2 hover:underline' to='/manuals?topic=exteor' tabIndex={-1}>Экстеор</Link>
-        </div>
-        <div>
-          <p className='mt-0.5 text-center'>© 2023 ЦИВТ КОНЦЕПТ</p>
-        </div>
-
+  <footer className='px-4 py-2 text-sm select-none z-navigation whitespace-nowrap clr-footer'>
+    <div className='justify-center w-full mx-auto'>
+      <div className='mb-2 text-center'>
+        <Link className='mx-2 hover:underline' to='/library' tabIndex={-1}>Библиотека</Link> 
+        <Link className='mx-2 hover:underline' to='/manuals' tabIndex={-1}>Справка</Link>
+        <Link className='mx-2 hover:underline' to={urls.concept} tabIndex={-1}>Центр Концепт</Link>
+        <Link className='mx-2 hover:underline' to='/manuals?topic=exteor' tabIndex={-1}>Экстеор</Link>
       </div>
-    </footer >
-  );
+      <div>
+        <p className='mt-0.5 text-center'>© 2023 ЦИВТ КОНЦЕПТ</p>
+      </div>
+
+    </div>
+  </footer>);
 }
 
 export default Footer;
diff --git a/rsconcept/frontend/src/components/Help/ConstituentaTooltip.tsx b/rsconcept/frontend/src/components/Help/ConstituentaTooltip.tsx
index e7cb75d3..eefaa18c 100644
--- a/rsconcept/frontend/src/components/Help/ConstituentaTooltip.tsx
+++ b/rsconcept/frontend/src/components/Help/ConstituentaTooltip.tsx
@@ -9,13 +9,12 @@ interface ConstituentaTooltipProps {
 
 function ConstituentaTooltip({ data, anchor }: ConstituentaTooltipProps) {
   return (
-    <ConceptTooltip
-      anchorSelect={anchor}
-      className='max-w-[25rem] min-w-[25rem]'
-    >
-      <InfoConstituenta data={data} />
-    </ConceptTooltip>
-  );
+  <ConceptTooltip
+    anchorSelect={anchor}
+    className='max-w-[25rem] min-w-[25rem]'
+  >
+    <InfoConstituenta data={data} />
+  </ConceptTooltip>);
 }
 
 export default ConstituentaTooltip;
diff --git a/rsconcept/frontend/src/components/Help/HelpButton.tsx b/rsconcept/frontend/src/components/Help/HelpButton.tsx
new file mode 100644
index 00000000..9d43208b
--- /dev/null
+++ b/rsconcept/frontend/src/components/Help/HelpButton.tsx
@@ -0,0 +1,38 @@
+import { HelpTopic } from '../../models/miscelanious';
+import ConceptTooltip from '../Common/ConceptTooltip';
+import TextURL from '../Common/TextURL';
+import { HelpIcon } from '../Icons';
+import InfoTopic from './InfoTopic';
+
+interface HelpButtonProps {
+  topic: HelpTopic
+  offset?: number
+  dimensions?: string
+}
+
+function HelpButton({ topic, offset, dimensions }: HelpButtonProps) {
+  return (
+  <>
+    <div
+      id={`help-${topic}`}
+      className='px-1 py-1'
+    >
+      <HelpIcon color='text-primary' size={5} />
+    </div>
+    <ConceptTooltip clickable
+      anchorSelect={`#help-${topic}`}
+      layer='z-modal-tooltip'
+      className={dimensions}
+      offset={offset}
+    >
+      <div className='relative'>
+      <div className='absolute right-0 text-sm top-[0.4rem]'>
+        <TextURL text='Справка...' href={`/manuals?topic=${topic}`} />
+      </div>
+      </div>
+      <InfoTopic topic={topic} />
+    </ConceptTooltip>
+  </>);
+}
+
+export default HelpButton;
diff --git a/rsconcept/frontend/src/components/Help/HelpTerminologyControl.tsx b/rsconcept/frontend/src/components/Help/HelpTerminologyControl.tsx
index 1cb2ac4d..03360fb3 100644
--- a/rsconcept/frontend/src/components/Help/HelpTerminologyControl.tsx
+++ b/rsconcept/frontend/src/components/Help/HelpTerminologyControl.tsx
@@ -2,7 +2,7 @@
 function HelpTerminologyControl() {
   return (
   <div className='flex flex-col gap-1'>
-    <h1>Терминологизация: Контроль терминологии</h1>
+    <h1>Терминологизация</h1>
     <p>Портал позволяет контролировать употребление терминов, привязанных к сущностям в концептуальных схемах.</p>
     <p>Для этого используется механизм текстовых отсылок: <i>использование термина</i> и <i>связывание слов.</i></p>
     <p>При отсылке к термину указывается параметры словоформы так, обеспечивающие корректное согласование слов.</p>
diff --git a/rsconcept/frontend/src/components/Help/InfoTopic.tsx b/rsconcept/frontend/src/components/Help/InfoTopic.tsx
new file mode 100644
index 00000000..50f55c03
--- /dev/null
+++ b/rsconcept/frontend/src/components/Help/InfoTopic.tsx
@@ -0,0 +1,33 @@
+import { HelpTopic } from '../../models/miscelanious';
+import HelpAPI from './HelpAPI';
+import HelpConstituenta from './HelpConstituenta';
+import HelpExteor from './HelpExteor';
+import HelpLibrary from './HelpLibrary';
+import HelpMain from './HelpMain';
+import HelpRSFormItems from './HelpRSFormItems';
+import HelpRSFormMeta from './HelpRSFormMeta';
+import HelpRSLang from './HelpRSLang';
+import HelpRSTemplates from './HelpRSTemplates';
+import HelpTermGraph from './HelpTermGraph';
+import HelpTerminologyControl from './HelpTerminologyControl';
+
+interface InfoTopicProps {
+  topic: HelpTopic
+}
+
+function InfoTopic({ topic }: InfoTopicProps) {
+  if (topic === HelpTopic.MAIN) return <HelpMain />;
+  if (topic === HelpTopic.LIBRARY) return <HelpLibrary />;
+  if (topic === HelpTopic.RSFORM) return <HelpRSFormMeta />;
+  if (topic === HelpTopic.CSTLIST) return <HelpRSFormItems />;
+  if (topic === HelpTopic.CONSTITUENTA) return <HelpConstituenta />;
+  if (topic === HelpTopic.GRAPH_TERM) return <HelpTermGraph />;
+  if (topic === HelpTopic.RSTEMPLATES) return <HelpRSTemplates />;
+  if (topic === HelpTopic.RSLANG) return <HelpRSLang />;
+  if (topic === HelpTopic.TERM_CONTROL) return <HelpTerminologyControl />;
+  if (topic === HelpTopic.EXTEOR) return <HelpExteor />;
+  if (topic === HelpTopic.API) return <HelpAPI />;
+  return null;
+}
+
+export default InfoTopic;
diff --git a/rsconcept/frontend/src/components/Icons.tsx b/rsconcept/frontend/src/components/Icons.tsx
index 6a8f7cf3..fa3e21f5 100644
--- a/rsconcept/frontend/src/components/Icons.tsx
+++ b/rsconcept/frontend/src/components/Icons.tsx
@@ -14,26 +14,25 @@ export interface IconProps {
 }
 
 function IconSVG({ viewbox, size = 6, color, props, children }: IconSVGProps) {
-  const width = `${size * 1 / 4}rem`
+  const width = `${size * 1 / 4}rem`;
   return (
-    <svg
-      width={width}
-      height={width}
-      className={`w-[${width}] h-[${width}] ${color}`}
-      fill='currentColor'
-      viewBox={viewbox}
-      {...props}
-    >
-      {children}
-    </svg>
-  );
+  <svg
+    width={width}
+    height={width}
+    className={`w-[${width}] h-[${width}] ${color}`}
+    fill='currentColor'
+    viewBox={viewbox}
+    {...props}
+  >
+    {children}
+  </svg>);
 }
 
 export function MagnifyingGlassIcon({ size, ...props }: IconProps) {
   return (
-      <IconSVG viewbox='0 0 20 20' size={size ?? 5} {...props} >
-        <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>
+    <IconSVG viewbox='0 0 20 20' size={size ?? 5} {...props} >
+      <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>
   );
 }
 
diff --git a/rsconcept/frontend/src/components/Navigation/Logo.tsx b/rsconcept/frontend/src/components/Navigation/Logo.tsx
index 75e330eb..a36aa8ea 100644
--- a/rsconcept/frontend/src/components/Navigation/Logo.tsx
+++ b/rsconcept/frontend/src/components/Navigation/Logo.tsx
@@ -10,26 +10,25 @@ function Logo() {
   const windowSize = useWindowSize();
 
   return (
-    <Link to='/' tabIndex={-1}
-      className='flex items-center h-full mr-2'
-    >
-      {(windowSize.width && windowSize.width >= HIDE_LOGO_TEXT_LIMIT && !darkMode) ?
-      <img alt=''
-        src='/logo_full.svg'
-        className='max-h-[1.6rem] min-w-[1.6rem]'
-      /> : null}
-      {(windowSize.width && windowSize.width >= HIDE_LOGO_TEXT_LIMIT && darkMode) ?
-      <img alt=''
-        src='/logo_full_dark.svg'
-        className='max-h-[1.6rem] min-w-[1.6rem]'
-      /> : null}
-      {(!windowSize.width || windowSize.width < HIDE_LOGO_TEXT_LIMIT) ? 
-      <img alt=''
-        src='/logo_sign.svg'
-        className='max-h-[1.6rem] min-w-[2.2rem]'
-        
-      /> : null}
-    </Link>
-  );
+  <Link to='/' tabIndex={-1}
+    className='flex items-center h-full mr-2'
+  >
+    {(windowSize.width && windowSize.width >= HIDE_LOGO_TEXT_LIMIT && !darkMode) ?
+    <img alt=''
+      src='/logo_full.svg'
+      className='max-h-[1.6rem] min-w-[1.6rem]'
+    /> : null}
+    {(windowSize.width && windowSize.width >= HIDE_LOGO_TEXT_LIMIT && darkMode) ?
+    <img alt=''
+      src='/logo_full_dark.svg'
+      className='max-h-[1.6rem] min-w-[1.6rem]'
+    /> : null}
+    {(!windowSize.width || windowSize.width < HIDE_LOGO_TEXT_LIMIT) ? 
+    <img alt=''
+      src='/logo_sign.svg'
+      className='max-h-[1.6rem] min-w-[2.2rem]'
+      
+    /> : null}
+  </Link>);
 }
 export default Logo;
diff --git a/rsconcept/frontend/src/components/Navigation/Navigation.tsx b/rsconcept/frontend/src/components/Navigation/Navigation.tsx
index f25dde2f..9fae5495 100644
--- a/rsconcept/frontend/src/components/Navigation/Navigation.tsx
+++ b/rsconcept/frontend/src/components/Navigation/Navigation.tsx
@@ -3,6 +3,7 @@ import { useConceptTheme } from '../../context/ThemeContext';
 import { EducationIcon, LibraryIcon, PlusIcon } from '../Icons';
 import Logo from './Logo'
 import NavigationButton from './NavigationButton';
+import ToggleNavigationButton from './ToggleNavigationButton';
 import UserMenu from './UserMenu';
 
 function Navigation () {
@@ -14,52 +15,36 @@ function Navigation () {
   const navigateCreateNew = () => navigateTo('/rsform-create');
 
   return (
-    <nav className='sticky top-0 left-0 right-0 select-none clr-app z-navigation h-fit'>
-      {noNavigation ?
-      <button type='button' tabIndex={-1}
-        title='Показать навигацию'
-        className='absolute top-0 right-0 z-navigation px-1 h-[1.6rem] border-b-2 border-l-2 clr-btn-nav rounded-none'
-        onClick={toggleNoNavigation}
-      >
-        {'∨∨∨'}
-      </button> : null}
-      {!noNavigation ?
-      <button type='button' tabIndex={-1}
-        title='Скрыть навигацию'
-        className='absolute top-0 right-0 z-navigation w-[1.2rem] h-[3rem] border-b-2 border-l-2 clr-btn-nav rounded-none'
-        onClick={toggleNoNavigation}
-      >
-        <p>{'>'}</p><p>{'>'}</p>
-      </button> : null}
-      {!noNavigation ?
-      <div className='flex items-stretch justify-between pl-2 pr-[0.8rem] border-b-2 rounded-none h-[3rem]'>
-        <div className='flex items-center justify-start'>
-          <Logo />
-        </div>
-        <div className='flex items-center h-full'>
-          <NavigationButton
-            text='Новая схема'
-            description='Создать новую схему'
-            icon={<PlusIcon />}
-            onClick={navigateCreateNew}
-          />
-          <NavigationButton
-            text='Библиотека'
-            description='Библиотека концептуальных схем'
-            icon={<LibraryIcon />}
-            onClick={navigateLibrary}
-          />
-          <NavigationButton
-            text='Справка'
-            description='Справочные материалы и обучение'
-            icon={<EducationIcon />}
-            onClick={navigateHelp}
-          />
-          <UserMenu />
-        </div>
-      </div> : null}
-    </nav>
-  );
+  <nav className='sticky top-0 left-0 right-0 select-none clr-app z-navigation h-fit'>
+    <ToggleNavigationButton noNavigation={noNavigation} toggleNoNavigation={toggleNoNavigation} />
+    {!noNavigation ?
+    <div className='flex items-stretch justify-between pl-2 pr-[0.8rem] border-b-2 rounded-none h-[3rem]'>
+      <div className='flex items-center justify-start'>
+        <Logo />
+      </div>
+      <div className='flex items-center h-full'>
+        <NavigationButton
+          text='Новая схема'
+          description='Создать новую схему'
+          icon={<PlusIcon />}
+          onClick={navigateCreateNew}
+        />
+        <NavigationButton
+          text='Библиотека'
+          description='Библиотека концептуальных схем'
+          icon={<LibraryIcon />}
+          onClick={navigateLibrary}
+        />
+        <NavigationButton
+          text='Справка'
+          description='Справочные материалы и обучение'
+          icon={<EducationIcon />}
+          onClick={navigateHelp}
+        />
+        <UserMenu />
+      </div>
+    </div> : null}
+  </nav>);
 }
 
 export default Navigation;
diff --git a/rsconcept/frontend/src/components/Navigation/NavigationButton.tsx b/rsconcept/frontend/src/components/Navigation/NavigationButton.tsx
index 03827ce1..e5bb44ff 100644
--- a/rsconcept/frontend/src/components/Navigation/NavigationButton.tsx
+++ b/rsconcept/frontend/src/components/Navigation/NavigationButton.tsx
@@ -8,15 +8,14 @@ interface NavigationButtonProps {
 
 function NavigationButton({ id, icon, description, onClick, text }: NavigationButtonProps) {
   return (
-    <button id={id} type='button' tabIndex={-1}
-      title={description}
-      onClick={onClick}
-      className={`flex items-center h-full gap-1 ${text ? 'px-2' : 'px-4'} mr-1 small-caps whitespace-nowrap clr-btn-nav`}
-    >
-      {icon ? <span>{icon}</span> : null}
-      {text ? <span className='font-semibold'>{text}</span> : null}
-    </button>
-  );
+  <button id={id} type='button' tabIndex={-1}
+    title={description}
+    onClick={onClick}
+    className={`flex items-center h-full gap-1 ${text ? 'px-2' : 'px-4'} mr-1 small-caps whitespace-nowrap clr-btn-nav`}
+  >
+    {icon ? <span>{icon}</span> : null}
+    {text ? <span className='font-semibold'>{text}</span> : null}
+  </button>);
 }
 
 export default NavigationButton;
diff --git a/rsconcept/frontend/src/components/Navigation/ToggleNavigationButton.tsx b/rsconcept/frontend/src/components/Navigation/ToggleNavigationButton.tsx
new file mode 100644
index 00000000..0c0d6a80
--- /dev/null
+++ b/rsconcept/frontend/src/components/Navigation/ToggleNavigationButton.tsx
@@ -0,0 +1,28 @@
+interface ToggleNavigationButtonProps {
+  noNavigation?: boolean
+  toggleNoNavigation: () => void
+}
+
+function ToggleNavigationButton({ noNavigation, toggleNoNavigation }: ToggleNavigationButtonProps) {
+  if (noNavigation) {
+    return (
+    <button type='button' tabIndex={-1}
+      title='Показать навигацию'
+      className='absolute top-0 right-0 z-navigation px-1 h-[1.6rem] border-b-2 border-l-2 clr-btn-nav rounded-none'
+      onClick={toggleNoNavigation}
+    >
+      {'∨∨∨'}
+    </button>);
+  } else {
+    return (
+    <button type='button' tabIndex={-1}
+      title='Скрыть навигацию'
+      className='absolute top-0 right-0 z-navigation w-[1.2rem] h-[3rem] border-b-2 border-l-2 clr-btn-nav rounded-none'
+      onClick={toggleNoNavigation}
+    >
+      <p>{'>'}</p><p>{'>'}</p>
+    </button>);
+  }
+}
+
+export default ToggleNavigationButton;
\ No newline at end of file
diff --git a/rsconcept/frontend/src/components/Navigation/UserDropdown.tsx b/rsconcept/frontend/src/components/Navigation/UserDropdown.tsx
index f26946b0..55f436db 100644
--- a/rsconcept/frontend/src/components/Navigation/UserDropdown.tsx
+++ b/rsconcept/frontend/src/components/Navigation/UserDropdown.tsx
@@ -25,24 +25,23 @@ function UserDropdown({ hideDropdown }: UserDropdownProps) {
   };
 
   return (
-    <Dropdown dimensions='w-36' stretchLeft>
-      <DropdownButton
-        tooltip='Профиль пользователя'
-        onClick={navigateProfile}
-      >
-        {user?.username}
-      </DropdownButton>
-      <DropdownButton
-        tooltip='Переключение темы оформления'
-        onClick={toggleDarkMode}
-      >
-        {darkMode ? 'Светлая тема' : 'Темная тема'}
-      </DropdownButton>
-      <DropdownButton onClick={logoutAndRedirect}>
-        <b>Выйти...</b>
-      </DropdownButton>
-    </Dropdown>
-  );
+  <Dropdown dimensions='w-36' stretchLeft>
+    <DropdownButton
+      tooltip='Профиль пользователя'
+      onClick={navigateProfile}
+    >
+      {user?.username}
+    </DropdownButton>
+    <DropdownButton
+      tooltip='Переключение темы оформления'
+      onClick={toggleDarkMode}
+    >
+      {darkMode ? 'Светлая тема' : 'Темная тема'}
+    </DropdownButton>
+    <DropdownButton onClick={logoutAndRedirect}>
+      <b>Выйти...</b>
+    </DropdownButton>
+  </Dropdown>);
 }
 
 export default UserDropdown;
diff --git a/rsconcept/frontend/src/components/Navigation/UserMenu.tsx b/rsconcept/frontend/src/components/Navigation/UserMenu.tsx
index 2ae7c1c0..a356aac2 100644
--- a/rsconcept/frontend/src/components/Navigation/UserMenu.tsx
+++ b/rsconcept/frontend/src/components/Navigation/UserMenu.tsx
@@ -12,28 +12,27 @@ function UserMenu() {
 
   const navigateLogin = () => navigateTo('/login');
   return (
-    <div ref={menu.ref} className='h-full'>
-      <div className='flex items-center justify-end h-full w-fit'>
-      {!user ?
-      <NavigationButton
-        text='Войти...'
-        description='Перейти на страницу логина'
-        icon={<InDoorIcon />}
-        onClick={navigateLogin}
-      /> : null}
-      {user ?
-      <NavigationButton
-        description={`Пользователь ${user?.username}`}
-        icon={<UserIcon />}
-        onClick={menu.toggle}
-      /> : null}
-      </div>
-      {(user && menu.isActive) ?
-      <UserDropdown
-        hideDropdown={() => menu.hide()}
-      /> : null}
+  <div ref={menu.ref} className='h-full'>
+    <div className='flex items-center justify-end h-full w-fit'>
+    {!user ?
+    <NavigationButton
+      text='Войти...'
+      description='Перейти на страницу логина'
+      icon={<InDoorIcon />}
+      onClick={navigateLogin}
+    /> : null}
+    {user ?
+    <NavigationButton
+      description={`Пользователь ${user?.username}`}
+      icon={<UserIcon />}
+      onClick={menu.toggle}
+    /> : null}
     </div>
-  );
+    {(user && menu.isActive) ?
+    <UserDropdown
+      hideDropdown={() => menu.hide()}
+    /> : null}
+  </div>);
 }
 
 export default UserMenu;
diff --git a/rsconcept/frontend/src/components/RSInput/RSInput.tsx b/rsconcept/frontend/src/components/RSInput/RSInput.tsx
index 6b5a8157..17d11b61 100644
--- a/rsconcept/frontend/src/components/RSInput/RSInput.tsx
+++ b/rsconcept/frontend/src/components/RSInput/RSInput.tsx
@@ -118,12 +118,11 @@ function RSInput({
   }, [thisRef]);
 
   return (
-    <div className={`flex flex-col ${dimensions} ${cursor}`}>
+  <div className={`flex flex-col gap-2 ${dimensions} ${cursor}`}>
     {label ?
     <Label
       text={label}
       htmlFor={id}
-      className='mb-2'
     /> : null}
     <CodeMirror id={id}
       ref={thisRef}
@@ -136,8 +135,7 @@ function RSInput({
       onKeyDown={handleInput}
       {...restProps}
     />
-    </div>
-  );
+  </div>);
 }
 
 export default RSInput;
diff --git a/rsconcept/frontend/src/components/RSInput/rslang/index.ts b/rsconcept/frontend/src/components/RSInput/rslang/index.ts
index 8278433b..3e756452 100644
--- a/rsconcept/frontend/src/components/RSInput/rslang/index.ts
+++ b/rsconcept/frontend/src/components/RSInput/rslang/index.ts
@@ -1,4 +1,4 @@
-import {LRLanguage} from '@codemirror/language'
+import {LRLanguage} from '@codemirror/language';
 
 import { parser } from './parser';
 import { Function, Global, Predicate } from './parser.terms';
diff --git a/rsconcept/frontend/src/components/RefsInput/RefsInput.tsx b/rsconcept/frontend/src/components/RefsInput/RefsInput.tsx
index 9c931939..cb2f1ae5 100644
--- a/rsconcept/frontend/src/components/RefsInput/RefsInput.tsx
+++ b/rsconcept/frontend/src/components/RefsInput/RefsInput.tsx
@@ -219,7 +219,6 @@ function RefsInput({
       onKeyDown={handleInput}
       onFocus={handleFocusIn}
       onBlur={handleFocusOut}
-      spellCheck
       // spellCheck= // TODO: figure out while automatic spellcheck doesnt work or implement with extension
       {...restProps}
     />
diff --git a/rsconcept/frontend/src/components/RefsInput/parse/index.ts b/rsconcept/frontend/src/components/RefsInput/parse/index.ts
index 47ee5022..653364ea 100644
--- a/rsconcept/frontend/src/components/RefsInput/parse/index.ts
+++ b/rsconcept/frontend/src/components/RefsInput/parse/index.ts
@@ -1,4 +1,4 @@
-import {LRLanguage} from '@codemirror/language'
+import {LRLanguage} from '@codemirror/language';
 
 import { parser } from './parser';
 import { RefEntity, RefSyntactic } from './parser.terms';
diff --git a/rsconcept/frontend/src/components/Shared/ConstituentaBadge.tsx b/rsconcept/frontend/src/components/Shared/ConstituentaBadge.tsx
index ba221ba7..9114530c 100644
--- a/rsconcept/frontend/src/components/Shared/ConstituentaBadge.tsx
+++ b/rsconcept/frontend/src/components/Shared/ConstituentaBadge.tsx
@@ -13,7 +13,8 @@ interface ConstituentaBadgeProps {
 }
 
 function ConstituentaBadge({ value, prefixID, shortTooltip, theme }: ConstituentaBadgeProps) {
-  return (<div className='w-fit'>
+  return (
+  <div className='w-fit'>
     <div
       id={`${prefixID}${value.alias}`}
       className='min-w-[3.1rem] max-w-[3.1rem] px-1 text-center rounded-md whitespace-nowrap'
diff --git a/rsconcept/frontend/src/components/Shared/ConstituentaPicker.tsx b/rsconcept/frontend/src/components/Shared/ConstituentaPicker.tsx
index 9e6db6ba..4d243a6b 100644
--- a/rsconcept/frontend/src/components/Shared/ConstituentaPicker.tsx
+++ b/rsconcept/frontend/src/components/Shared/ConstituentaPicker.tsx
@@ -35,8 +35,8 @@ function ConstituentaPicker({
   onSelectValue
 } : ConstituentaPickerProps) {
   const { colors } = useConceptTheme();
-  const [ filteredData, setFilteredData ] = useState<IConstituenta[]>([]);
-  const [ filterText, setFilterText ] = useState('');
+  const [filteredData, setFilteredData] = useState<IConstituenta[]>([]);
+  const [filterText, setFilterText] = useState('');
 
   useEffect(
   () => {
diff --git a/rsconcept/frontend/src/components/Shared/SelectedCounter.tsx b/rsconcept/frontend/src/components/Shared/SelectedCounter.tsx
index fdce7cbb..166a3083 100644
--- a/rsconcept/frontend/src/components/Shared/SelectedCounter.tsx
+++ b/rsconcept/frontend/src/components/Shared/SelectedCounter.tsx
@@ -1,3 +1,5 @@
+import Overlay from '../Common/Overlay';
+
 interface SelectedCounterProps {
   total: number
   selected: number
@@ -13,11 +15,12 @@ function SelectedCounter({
     return null;
   }
   return (
-  <div className='relative w-full z-pop'>
-  <div className={`absolute px-2 select-none whitespace-nowrap small-caps clr-app ${position}`}>
+  <Overlay
+    position={`px-2 ${position}`}
+    className='select-none whitespace-nowrap small-caps clr-app'
+  >
     Выбор {selected} из {total}
-  </div>
-  </div>);
+  </Overlay>);
 }
 
 export default SelectedCounter;
\ No newline at end of file
diff --git a/rsconcept/frontend/src/context/AuthContext.tsx b/rsconcept/frontend/src/context/AuthContext.tsx
index 228df7ba..2dd3d7ae 100644
--- a/rsconcept/frontend/src/context/AuthContext.tsx
+++ b/rsconcept/frontend/src/context/AuthContext.tsx
@@ -114,10 +114,9 @@ export const AuthState = ({ children }: AuthStateProps) => {
   }, [reload])
 
   return (
-    <AuthContext.Provider
-      value={{ user, login, logout, signup, loading, error, setError, updatePassword }}
-    >
-      {children}
-    </AuthContext.Provider>
-  );
+  <AuthContext.Provider
+    value={{ user, login, logout, signup, loading, error, setError, updatePassword }}
+  >
+    {children}
+  </AuthContext.Provider>);
 };
diff --git a/rsconcept/frontend/src/context/LibraryContext.tsx b/rsconcept/frontend/src/context/LibraryContext.tsx
index 2fd63290..f9c5378a 100644
--- a/rsconcept/frontend/src/context/LibraryContext.tsx
+++ b/rsconcept/frontend/src/context/LibraryContext.tsx
@@ -43,14 +43,14 @@ interface LibraryStateProps {
 }
 
 export const LibraryState = ({ children }: LibraryStateProps) => {
-  const [ items, setItems ] = useState<ILibraryItem[]>([]);
-  const [ templates, setTemplates ] = useState<ILibraryItem[]>([]);
-  const [ loading, setLoading ] = useState(false);
-  const [ processing, setProcessing ] = useState(false);
-  const [ error, setError ] = useState<ErrorInfo>(undefined);
   const { user } = useAuth();
 
-  const [ cachedTemplates, setCachedTemplates ] = useState<IRSForm[]>([]);
+  const [items, setItems] = useState<ILibraryItem[]>([]);
+  const [templates, setTemplates] = useState<ILibraryItem[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [processing, setProcessing] = useState(false);
+  const [error, setError] = useState<ErrorInfo>(undefined);
+  const [cachedTemplates, setCachedTemplates] = useState<IRSForm[]>([]);
 
   const applyFilter = useCallback(
   (params: ILibraryFilter) => {
@@ -189,12 +189,11 @@ export const LibraryState = ({ children }: LibraryStateProps) => {
   }, [reload, setError, user]);
 
   return (
-    <LibraryContext.Provider value={{ 
-      items, templates, loading, processing, error, setError, 
-      applyFilter, createItem, cloneItem, destroyItem, retrieveTemplate,
-      localUpdateItem, localUpdateTimestamp
-    }}>
-      { children }
-    </LibraryContext.Provider>
-  );
+  <LibraryContext.Provider value={{ 
+    items, templates, loading, processing, error, setError, 
+    applyFilter, createItem, cloneItem, destroyItem, retrieveTemplate,
+    localUpdateItem, localUpdateTimestamp
+  }}>
+    {children}
+  </LibraryContext.Provider>);
 }
diff --git a/rsconcept/frontend/src/context/NagivationContext.tsx b/rsconcept/frontend/src/context/NagivationContext.tsx
index 4d9cf695..d37170f6 100644
--- a/rsconcept/frontend/src/context/NagivationContext.tsx
+++ b/rsconcept/frontend/src/context/NagivationContext.tsx
@@ -51,10 +51,9 @@ export const NavigationState = ({ children }: NavigationStateProps) => {
 
 
   return (
-    <NagivationContext.Provider value={{
-      navigateTo, navigateHistory
-    }}>
-      {children}
-    </NagivationContext.Provider>
-  );
+  <NagivationContext.Provider value={{
+    navigateTo, navigateHistory
+  }}>
+    {children}
+  </NagivationContext.Provider>);
 }
diff --git a/rsconcept/frontend/src/context/RSFormContext.tsx b/rsconcept/frontend/src/context/RSFormContext.tsx
index 0c62ee87..3b7f7a64 100644
--- a/rsconcept/frontend/src/context/RSFormContext.tsx
+++ b/rsconcept/frontend/src/context/RSFormContext.tsx
@@ -1,23 +1,23 @@
-import { createContext, useCallback, useContext, useMemo, useState } from 'react'
+import { createContext, useCallback, useContext, useMemo, useState } from 'react';
 
-import { type ErrorInfo } from '../components/BackendError'
-import { useRSFormDetails } from '../hooks/useRSFormDetails'
-import { ILibraryItem } from '../models/library'
-import { ILibraryUpdateData } from '../models/library'
+import { type ErrorInfo } from '../components/BackendError';
+import { useRSFormDetails } from '../hooks/useRSFormDetails';
+import { ILibraryItem } from '../models/library';
+import { ILibraryUpdateData } from '../models/library';
 import {
   IConstituentaList, IConstituentaMeta, ICstCreateData,
   ICstMovetoData, ICstRenameData, ICstUpdateData, 
   IRSForm, IRSFormUploadData
-} from '../models/rsform'
+} from '../models/rsform';
 import {
   type DataCallback, deleteUnsubscribe,
 getTRSFile,
   patchConstituenta, patchDeleteConstituenta,
 patchLibraryItem,
   patchMoveConstituenta, patchRenameConstituenta,
-  patchResetAliases,   patchUploadTRS,  postClaimLibraryItem, postNewConstituenta, postSubscribe} from '../utils/backendAPI'
-import { useAuth } from './AuthContext'
-import { useLibrary } from './LibraryContext'
+  patchResetAliases,   patchUploadTRS,  postClaimLibraryItem, postNewConstituenta, postSubscribe} from '../utils/backendAPI';
+import { useAuth } from './AuthContext';
+import { useLibrary } from './LibraryContext';
 
 interface IRSFormContext {
   schema?: IRSForm
@@ -27,14 +27,14 @@ interface IRSFormContext {
   processing: boolean
 
   isMutable: boolean
-  adminMode: boolean
   isOwned: boolean
   isClaimable: boolean
-  isReadonly: boolean
   isTracking: boolean
-
-  toggleForceAdmin: () => void
-  toggleReadonly: () => void
+  
+  adminMode: boolean
+  toggleAdminMode: () => void
+  readerMode: boolean
+  toggleReaderMode: () => void
   
   update: (data: ILibraryUpdateData, callback?: DataCallback<ILibraryItem>) => void
   claim: (callback?: DataCallback<ILibraryItem>) => void
@@ -56,11 +56,9 @@ const RSFormContext = createContext<IRSFormContext | null>(null)
 export const useRSForm = () => {
   const context = useContext(RSFormContext)
   if (context === null) {
-    throw new Error(
-      'useRSForm has to be used within <RSFormState.Provider>'
-    )
+    throw new Error('useRSForm has to be used within <RSFormState.Provider>');
   }
-  return context
+  return context;
 }
 
 interface RSFormStateProps {
@@ -72,11 +70,11 @@ export const RSFormState = ({ schemaID, children }: RSFormStateProps) => {
   const library = useLibrary();
   const { user } = useAuth();
   const { schema, reload, error, setError, setSchema, loading } = useRSFormDetails({ target: schemaID });
-  const [ processing, setProcessing ] = useState(false);
+  const [processing, setProcessing] = useState(false);
 
-  const [ adminMode, setAdminMode ] = useState(false);
-  const [ isReadonly, setIsReadonly ] = useState(false);
-  const [ toggleTracking, setToggleTracking ] = useState(false);
+  const [adminMode, setAdminMode] = useState(false);
+  const [readerMode, setReaderMode] = useState(false);
+  const [toggleTracking, setToggleTracking] = useState(false);
 
   const isOwned = useMemo(
   () => {
@@ -91,10 +89,10 @@ export const RSFormState = ({ schemaID, children }: RSFormStateProps) => {
   const isMutable = useMemo(
   () => {
     return (
-      !loading && !processing && !isReadonly &&
+      !loading && !processing && !readerMode &&
       ((isOwned || (adminMode && user?.is_staff)) ?? false)
     );
-  }, [user?.is_staff, isReadonly, adminMode, isOwned, loading, processing]);
+  }, [user?.is_staff, readerMode, adminMode, isOwned, loading, processing]);
 
   const isTracking = useMemo(
   () => {
@@ -319,17 +317,16 @@ export const RSFormState = ({ schemaID, children }: RSFormStateProps) => {
   }, [schemaID, setError, library, setSchema]);
 
   return (
-    <RSFormContext.Provider value={{
-      schema,
-      error, loading, processing,
-      adminMode, isReadonly, isOwned, isMutable,
-      isClaimable, isTracking,
-      toggleForceAdmin: () => setAdminMode(prev => !prev),
-      toggleReadonly: () => setIsReadonly(prev => !prev),
-      update, download, upload, claim, resetAliases, subscribe, unsubscribe,
-      cstUpdate, cstCreate, cstRename, cstDelete, cstMoveTo
-    }}>
-      { children }
-    </RSFormContext.Provider>
-  );
+  <RSFormContext.Provider value={{
+    schema,
+    error, loading, processing,
+    adminMode, readerMode, isOwned, isMutable,
+    isClaimable, isTracking,
+    update, download, upload, claim, resetAliases, subscribe, unsubscribe,
+    cstUpdate, cstCreate, cstRename, cstDelete, cstMoveTo,
+    toggleAdminMode: () => setAdminMode(prev => !prev),
+    toggleReaderMode: () => setReaderMode(prev => !prev)
+  }}>
+    { children }
+  </RSFormContext.Provider>);
 }
diff --git a/rsconcept/frontend/src/context/ThemeContext.tsx b/rsconcept/frontend/src/context/ThemeContext.tsx
index 75c7625d..0e38ad77 100644
--- a/rsconcept/frontend/src/context/ThemeContext.tsx
+++ b/rsconcept/frontend/src/context/ThemeContext.tsx
@@ -75,15 +75,14 @@ export const ThemeState = ({ children }: ThemeStateProps) => {
   }, [noNavigation]);
 
   return (
-    <ThemeContext.Provider value={{
-      darkMode, colors,
-      noNavigation, noFooter, showScroll,
-      toggleDarkMode: () => setDarkMode(prev => !prev),
-      toggleNoNavigation: () => setNoNavigation(prev => !prev),
-      setNoFooter, setShowScroll,
-      viewportHeight, mainHeight
-    }}>
-      {children}
-    </ThemeContext.Provider>
-  );
+  <ThemeContext.Provider value={{
+    darkMode, colors,
+    noNavigation, noFooter, showScroll,
+    toggleDarkMode: () => setDarkMode(prev => !prev),
+    toggleNoNavigation: () => setNoNavigation(prev => !prev),
+    setNoFooter, setShowScroll,
+    viewportHeight, mainHeight
+  }}>
+    {children}
+  </ThemeContext.Provider>);
 }
diff --git a/rsconcept/frontend/src/context/UserProfileContext.tsx b/rsconcept/frontend/src/context/UserProfileContext.tsx
index 3bfa5d36..874341fc 100644
--- a/rsconcept/frontend/src/context/UserProfileContext.tsx
+++ b/rsconcept/frontend/src/context/UserProfileContext.tsx
@@ -68,7 +68,7 @@ export const UserProfileState = ({ children }: UserProfileStateProps) => {
         if (callback) callback(newData);
       }
     });
-  }, [setUser, users]);
+  }, [setUser, users, user?.id]);
 
   useEffect(() => {
     reload();
diff --git a/rsconcept/frontend/src/context/UsersContext.tsx b/rsconcept/frontend/src/context/UsersContext.tsx
index c8fd1ee2..0cb384b4 100644
--- a/rsconcept/frontend/src/context/UsersContext.tsx
+++ b/rsconcept/frontend/src/context/UsersContext.tsx
@@ -61,12 +61,11 @@ export const UsersState = ({ children }: UsersStateProps) => {
   }, [reload]);
 
   return (
-    <UsersContext.Provider value={{
-      users,
-      reload,
-      getUserLabel
-    }}>
-      { children }
-    </UsersContext.Provider>
-  );
+  <UsersContext.Provider value={{
+    users,
+    reload,
+    getUserLabel
+  }}>
+    { children }
+  </UsersContext.Provider>);
 }
diff --git a/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/DlgConstituentaTemplate.tsx b/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/DlgConstituentaTemplate.tsx
index 9081c557..b46f517a 100644
--- a/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/DlgConstituentaTemplate.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/DlgConstituentaTemplate.tsx
@@ -2,11 +2,11 @@ import { useLayoutEffect, useState } from 'react';
 import { TabList, TabPanel, Tabs } from 'react-tabs';
 
 import ConceptTab from '../../components/Common/ConceptTab';
-import ConceptTooltip from '../../components/Common/ConceptTooltip';
 import Modal, { ModalProps } from '../../components/Common/Modal';
-import HelpRSTemplates from '../../components/Help/HelpRSTemplates';
-import { HelpIcon } from '../../components/Icons';
+import Overlay from '../../components/Common/Overlay';
+import HelpButton from '../../components/Help/HelpButton';
 import usePartialUpdate from '../../hooks/usePartialUpdate';
+import { HelpTopic } from '../../models/miscelanious';
 import { CstType, ICstCreateData, IRSForm } from '../../models/rsform';
 import { inferTemplatedType, substituteTemplateArgs } from '../../models/rslangAPI';
 import { createAliasFor, validateCstAlias } from '../../utils/misc';
@@ -115,43 +115,33 @@ function DlgConstituentaTemplate({ hideWindow, schema, onCreate, insertAfter }:
     onSubmit={handleSubmit}
     submitText='Создать'
   >
-  <div className='max-w-[40rem] min-w-[40rem] min-h-[35rem] px-2 mb-1'>
   <Tabs defaultFocus forceRenderTabPanel
-    className='flex flex-col items-center'
+    className='flex flex-col items-center max-w-[40rem] min-w-[40rem] min-h-[35rem] mb-1'
     selectedTabClassName='clr-selected'
     selectedIndex={activeTab}
     onSelect={setActiveTab}
   >
-    <div className='flex gap-1 pl-6 mb-3'>
-      <TabList className='flex border'>
-        <ConceptTab
-          label='Шаблон'
-          tooltip='Выбор шаблона выражения'
-          className='border-r w-[8rem]'
-        />
-        <ConceptTab
-          label='Аргументы'
-          tooltip='Подстановка аргументов шаблона'
-          className='border-r w-[8rem]'
-        />
-        <ConceptTab
-          label='Конституента'
-          tooltip='Редактирование атрибутов конституенты'
-          className='w-[8rem]'
-        />
-      </TabList>
-
-      <div id='templates-help' className='px-1 py-1'>
-        <HelpIcon color='text-primary' size={5} />
-      </div>
-      <ConceptTooltip
-        anchorSelect='#templates-help'
-        className='max-w-[35rem] z-modal-tooltip'
-        offset={12}
-      >
-        <HelpRSTemplates />
-      </ConceptTooltip>
-    </div>
+    <Overlay position='top-0 left-[12.3rem]'>
+      <HelpButton topic={HelpTopic.RSTEMPLATES} dimensions='max-w-[35rem]' />
+    </Overlay>
+    
+    <TabList className='flex mb-3 border'>
+      <ConceptTab
+        label='Шаблон'
+        tooltip='Выбор шаблона выражения'
+        className='border-r w-[8rem]'
+      />
+      <ConceptTab
+        label='Аргументы'
+        tooltip='Подстановка аргументов шаблона'
+        className='border-r w-[8rem]'
+      />
+      <ConceptTab
+        label='Конституента'
+        tooltip='Редактирование атрибутов конституенты'
+        className='w-[8rem]'
+      />
+    </TabList>
     
     <div className='w-full'>
       <TabPanel style={{ display: activeTab === TabID.TEMPLATE ? '': 'none' }}>
@@ -177,7 +167,6 @@ function DlgConstituentaTemplate({ hideWindow, schema, onCreate, insertAfter }:
       </TabPanel>
     </div>
   </Tabs>
-  </div>
   </Modal>);
 }
 
diff --git a/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/TemplateTab.tsx b/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/TemplateTab.tsx
index c7fd0e55..db44f72c 100644
--- a/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/TemplateTab.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/TemplateTab.tsx
@@ -21,7 +21,7 @@ interface TemplateTabProps {
 
 function TemplateTab({ state, partialUpdate }: TemplateTabProps) { 
   const { templates, retrieveTemplate } = useLibrary();
-  const [ selectedSchema, setSelectedSchema ] = useState<IRSForm | undefined>(undefined);
+  const [selectedSchema, setSelectedSchema] = useState<IRSForm | undefined>(undefined);
   
   const [filteredData, setFilteredData] = useState<IConstituenta[]>([]);
 
diff --git a/rsconcept/frontend/src/dialogs/DlgDeleteCst.tsx b/rsconcept/frontend/src/dialogs/DlgDeleteCst.tsx
index 496d21d5..49d85f3e 100644
--- a/rsconcept/frontend/src/dialogs/DlgDeleteCst.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgDeleteCst.tsx
@@ -15,7 +15,7 @@ extends Pick<ModalProps, 'hideWindow'> {
 function DlgDeleteCst({ hideWindow, selected, onDelete }: DlgDeleteCstProps) {
   const { schema } = useRSForm();
 
-  const [ expandOut, setExpandOut ] = useState(false);
+  const [expandOut, setExpandOut] = useState(false);
   const expansion: number[] = useMemo(() => schema?.graph.expandOutputs(selected) ?? [], [selected, schema?.graph]);
 
   function handleSubmit() {
@@ -28,11 +28,10 @@ function DlgDeleteCst({ hideWindow, selected, onDelete }: DlgDeleteCstProps) {
   }
 
   return (
-  <Modal
+  <Modal canSubmit
     title='Удаление конституент'
     submitText={expandOut ? 'Удалить с зависимыми' : 'Удалить'}
     hideWindow={hideWindow}
-    canSubmit={true}
     onSubmit={handleSubmit}
   >
   <div className='max-w-[60vw] min-w-[30rem]'>
diff --git a/rsconcept/frontend/src/dialogs/DlgEditReference/DlgEditReference.tsx b/rsconcept/frontend/src/dialogs/DlgEditReference/DlgEditReference.tsx
index 66db38d3..89cb981f 100644
--- a/rsconcept/frontend/src/dialogs/DlgEditReference/DlgEditReference.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgEditReference/DlgEditReference.tsx
@@ -2,11 +2,11 @@ import { useState } from 'react';
 import { TabList, TabPanel, Tabs } from 'react-tabs';
 
 import ConceptTab from '../../components/Common/ConceptTab';
-import ConceptTooltip from '../../components/Common/ConceptTooltip';
 import Modal from '../../components/Common/Modal';
-import HelpTerminologyControl from '../../components/Help/HelpTerminologyControl';
-import { HelpIcon } from '../../components/Icons';
+import Overlay from '../../components/Common/Overlay';
+import HelpButton from '../../components/Help/HelpButton';
 import { ReferenceType } from '../../models/language';
+import { HelpTopic } from '../../models/miscelanious';
 import { IConstituenta } from '../../models/rsform';
 import { labelReferenceType } from '../../utils/labels';
 import EntityTab from './EntityTab';
@@ -48,38 +48,28 @@ function DlgEditReference({ hideWindow, items, initial, onSave }: DlgEditReferen
     canSubmit={isValid}
     onSubmit={handleSubmit}
   >
-  <div className='min-w-[40rem] max-w-[40rem] flex flex-col gap-3 mb-2 min-h-[34rem]'>
   <Tabs defaultFocus
-    className='flex flex-col items-center'
+    className='flex flex-col items-center min-w-[40rem] max-w-[40rem] mb-2 min-h-[34rem]'
     selectedTabClassName='clr-selected'
     selectedIndex={activeTab}
     onSelect={setActiveTab}
   >
-    <div className='flex gap-1 pl-6 mb-3'>
-      <TabList className='flex border'>
-        <ConceptTab
-          label={labelReferenceType(ReferenceType.ENTITY)}
-          tooltip='Отсылка на термин в заданной словоформе'
-          className='w-[12rem] border-r-2'
-        />
-        <ConceptTab
-          label={labelReferenceType(ReferenceType.SYNTACTIC)}
-          tooltip='Установление синтаксической связи с отсылкой на термин'
-          className='w-[12rem]'
-        />
-      </TabList>
+    <Overlay position='top-0 left-[12.2rem]'>
+      <HelpButton topic={HelpTopic.TERM_CONTROL} dimensions='max-w-[38rem]' offset={14} />
+    </Overlay>
 
-      <div id='terminology-help' className='px-1 py-1'>
-        <HelpIcon color='text-primary' size={5} />
-      </div>
-      <ConceptTooltip
-        anchorSelect='#terminology-help'
-        className='max-w-[30rem] z-modal-tooltip'
-        offset={10}
-      >
-        <HelpTerminologyControl />
-      </ConceptTooltip>
-    </div>
+    <TabList className='flex mb-3 border'>
+      <ConceptTab
+        label={labelReferenceType(ReferenceType.ENTITY)}
+        tooltip='Отсылка на термин в заданной словоформе'
+        className='w-[12rem] border-r-2'
+      />
+      <ConceptTab
+        label={labelReferenceType(ReferenceType.SYNTACTIC)}
+        tooltip='Установление синтаксической связи с отсылкой на термин'
+        className='w-[12rem]'
+      />
+    </TabList>
     
     <div className='w-full'>
       <TabPanel>
@@ -100,7 +90,6 @@ function DlgEditReference({ hideWindow, items, initial, onSave }: DlgEditReferen
       </TabPanel>
     </div>
   </Tabs>
-  </div>
   </Modal>);
 }
 
diff --git a/rsconcept/frontend/src/dialogs/DlgEditWordForms.tsx b/rsconcept/frontend/src/dialogs/DlgEditWordForms.tsx
index ba4c61b0..8b0f49ac 100644
--- a/rsconcept/frontend/src/dialogs/DlgEditWordForms.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgEditWordForms.tsx
@@ -1,17 +1,18 @@
 import { useEffect, useLayoutEffect, useMemo, useState } from 'react';
 
-import ConceptTooltip from '../components/Common/ConceptTooltip';
 import MiniButton from '../components/Common/MiniButton';
 import Modal from '../components/Common/Modal';
+import Overlay from '../components/Common/Overlay';
 import SelectMulti from '../components/Common/SelectMulti';
 import TextArea from '../components/Common/TextArea';
 import DataTable, { createColumnHelper } from '../components/DataTable';
-import HelpTerminologyControl from '../components/Help/HelpTerminologyControl';
-import { ArrowLeftIcon, ArrowRightIcon, CheckIcon, ChevronDoubleDownIcon, CrossIcon, HelpIcon } from '../components/Icons';
+import HelpButton from '../components/Help/HelpButton';
+import { ArrowLeftIcon, ArrowRightIcon, CheckIcon, ChevronDoubleDownIcon, CrossIcon } from '../components/Icons';
 import { useConceptTheme } from '../context/ThemeContext';
 import useConceptText from '../hooks/useConceptText';
 import { Grammeme, ITextRequest, IWordForm, IWordFormPlain } from '../models/language';
 import { getCompatibleGrams, parseGrammemes,wordFormEquals } from '../models/languageAPI';
+import { HelpTopic } from '../models/miscelanious';
 import { IConstituenta, TermForm } from '../models/rsform';
 import { colorfgGrammeme } from '../utils/color';
 import { labelGrammeme } from '../utils/labels';
@@ -204,37 +205,22 @@ function DlgEditWordForms({ hideWindow, target, onSave }: DlgEditWordFormsProps)
   ], [colors]);
 
   return (
-  <Modal
+  <Modal canSubmit
     title='Редактирование словоформ'
     hideWindow={hideWindow}
     submitText='Сохранить'
-    canSubmit
     onSubmit={handleSubmit}
   >
-    <div className='relative w-full'>
-    <div className='absolute top-0 right-0'>
-      <div id='terminology-help' className='px-1 py-1'>
-        <HelpIcon color='text-primary' size={5} />
-      </div>
-      <ConceptTooltip
-        anchorSelect='#terminology-help'
-        className='max-w-[40rem]'
-        layer='z-modal-tooltip'
-        offset={1}
-      >
-        <HelpTerminologyControl />
-      </ConceptTooltip>
-    </div>
-    </div>
-      
   <div className='min-w-[40rem] max-w-[40rem]'>
-    <TextArea id='nominal' label='Начальная форма'
+    <Overlay position='top-[-0.2rem] left-[7.5rem]'>
+      <HelpButton topic={HelpTopic.TERM_CONTROL} dimensions='max-w-[38rem]' offset={3} />
+    </Overlay>
+  
+    <TextArea disabled spellCheck
+      label='Начальная форма'
       placeholder='Начальная форма'
       rows={1}
-      
       value={term}
-      disabled={true}
-      spellCheck
     />
 
     <div className='mt-3 mb-2 text-sm font-semibold'>
@@ -245,8 +231,8 @@ function DlgEditWordForms({ hideWindow, target, onSave }: DlgEditWordFormsProps)
       <div className='flex items-center'>
         <TextArea
           placeholder='Введите текст'
-          rows={2}
           dimensions='min-w-[18rem] w-full min-h-[4.2rem]'
+          rows={2}
           value={inputText}
           onChange={event => setInputText(event.target.value)}
         />
@@ -289,7 +275,7 @@ function DlgEditWordForms({ hideWindow, target, onSave }: DlgEditWordFormsProps)
           onClick={handleAddForm}
         />
         <MiniButton
-          tooltip='Генерировать все словоформы'
+          tooltip='Генерировать стандартные словоформы'
           icon={<ChevronDoubleDownIcon
             size={5}
             color={!inputText ? 'text-disabled' : 'text-primary'}
@@ -302,7 +288,7 @@ function DlgEditWordForms({ hideWindow, target, onSave }: DlgEditWordFormsProps)
         Заданные вручную словоформы [{forms.length}]
       </div>
       <MiniButton
-        tooltip='Сбросить ВСЕ словоформы'
+        tooltip='Сбросить все словоформы'
         icon={<CrossIcon size={5} color={forms.length === 0 ? 'text-disabled' : 'text-warning'} />}
         disabled={textProcessor.loading || forms.length === 0}
         onClick={handleResetAll}
diff --git a/rsconcept/frontend/src/dialogs/DlgRenameCst.tsx b/rsconcept/frontend/src/dialogs/DlgRenameCst.tsx
index 2bff81f7..c6222b3f 100644
--- a/rsconcept/frontend/src/dialogs/DlgRenameCst.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgRenameCst.tsx
@@ -48,8 +48,7 @@ function DlgRenameCst({ hideWindow, initial, onRename }: DlgRenameCstProps) {
     canSubmit={validated}
     onSubmit={handleSubmit}
   >
-  <div className='flex justify-center w-full min-w-[22rem] my-3'>
-  <div className='flex items-center gap-6'>
+  <div className='flex justify-center items-center gap-6 w-full min-w-[22rem] my-3'>
     <SelectSingle
       placeholder='Выберите тип'
       className='min-w-[14rem] self-center'
@@ -61,14 +60,14 @@ function DlgRenameCst({ hideWindow, initial, onRename }: DlgRenameCstProps) {
       onChange={data => updateData({cst_type: data?.value ?? CstType.BASE})}
     />
     <div>
-    <TextInput id='alias' label='Имя' dense
+    <TextInput dense
+      label='Имя'
       dimensions='w-[7rem]'
       value={cstData.alias}
       onChange={event => updateData({alias: event.target.value})}
     />
     </div>
   </div>
-  </div>
   </Modal>);
 }
 
diff --git a/rsconcept/frontend/src/dialogs/DlgShowAST.tsx b/rsconcept/frontend/src/dialogs/DlgShowAST.tsx
index 1ca23a67..60e9d4bd 100644
--- a/rsconcept/frontend/src/dialogs/DlgShowAST.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgShowAST.tsx
@@ -57,8 +57,7 @@ function DlgShowAST({ hideWindow, syntaxTree, expression }: DlgShowASTProps) {
     hideWindow={hideWindow}
     readonly
   >
-  <div className='flex flex-col items-start gap-2 mt-2'>
-    <div className='w-full text-lg text-center'>
+    <div className='w-full my-2 text-lg text-center'>
       {!hoverNode ? expression : null}
       {hoverNode ?
       <div>
@@ -86,7 +85,6 @@ function DlgShowAST({ hideWindow, syntaxTree, expression }: DlgShowASTProps) {
       />
     </div>
     </div>
-  </div>
   </Modal>);
 }
 
diff --git a/rsconcept/frontend/src/hooks/useCheckExpression.ts b/rsconcept/frontend/src/hooks/useCheckExpression.ts
index 96acf30d..e939248f 100644
--- a/rsconcept/frontend/src/hooks/useCheckExpression.ts
+++ b/rsconcept/frontend/src/hooks/useCheckExpression.ts
@@ -1,8 +1,8 @@
-import { useCallback, useState } from 'react'
+import { useCallback, useState } from 'react';
 
 import { type ErrorInfo } from '../components/BackendError';
 import { CstType, IConstituenta, type IRSForm } from '../models/rsform';
-import { IExpressionParse, IArgumentInfo } from '../models/rslang';
+import { IArgumentInfo,IExpressionParse } from '../models/rslang';
 import { RSErrorType } from '../models/rslang';
 import { DataCallback, postCheckExpression } from '../utils/backendAPI';
 import { getCstExpressionPrefix } from '../utils/misc';
diff --git a/rsconcept/frontend/src/hooks/useConceptText.ts b/rsconcept/frontend/src/hooks/useConceptText.ts
index db69d9d5..7f23e2f1 100644
--- a/rsconcept/frontend/src/hooks/useConceptText.ts
+++ b/rsconcept/frontend/src/hooks/useConceptText.ts
@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react'
+import { useCallback, useState } from 'react';
 
 import { ErrorInfo } from '../components/BackendError';
 import { ILexemeData, ITextRequest, ITextResult, IWordFormPlain } from '../models/language';
diff --git a/rsconcept/frontend/src/hooks/useRSFormDetails.ts b/rsconcept/frontend/src/hooks/useRSFormDetails.ts
index 62bac629..47ea9020 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 { useCallback, useEffect, useState } from 'react';
 
 import { type ErrorInfo } from '../components/BackendError';
-import { IRSForm, IRSFormData } from '../models/rsform'
+import { IRSForm, IRSFormData } from '../models/rsform';
 import { loadRSFormData } from '../models/rsformAPI';
 import { getRSFormDetails } from '../utils/backendAPI';
 
diff --git a/rsconcept/frontend/src/hooks/useResolveText.ts b/rsconcept/frontend/src/hooks/useResolveText.ts
index ab7a32ae..3a69c815 100644
--- a/rsconcept/frontend/src/hooks/useResolveText.ts
+++ b/rsconcept/frontend/src/hooks/useResolveText.ts
@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react'
+import { useCallback, useState } from 'react';
 
 import { ErrorInfo } from '../components/BackendError';
 import { IResolutionData } from '../models/language';
diff --git a/rsconcept/frontend/src/models/language.ts b/rsconcept/frontend/src/models/language.ts
index ba4f0dae..0634cab9 100644
--- a/rsconcept/frontend/src/models/language.ts
+++ b/rsconcept/frontend/src/models/language.ts
@@ -100,42 +100,42 @@ export const Case = [
  * 
  * Implemented as a list of mututally exclusive {@link Grammeme}s.
 */
-export const Plurality = [ Grammeme.sing, Grammeme.plur ];
+export const Plurality = [Grammeme.sing, Grammeme.plur];
 
 /**
  * Represents verb perfectivity language concept.
  * 
  * Implemented as a list of mututally exclusive {@link Grammeme}s.
 */
-export const Perfectivity = [ Grammeme.perf, Grammeme.impf ];
+export const Perfectivity = [Grammeme.perf, Grammeme.impf];
 
 /**
  * Represents verb transitivity language concept.
  * 
  * Implemented as a list of mututally exclusive {@link Grammeme}s.
 */
-export const Transitivity = [ Grammeme.tran, Grammeme.intr ];
+export const Transitivity = [Grammeme.tran, Grammeme.intr];
 
 /**
  * Represents verb mood language concept.
  * 
  * Implemented as a list of mututally exclusive {@link Grammeme}s.
 */
-export const Mood = [ Grammeme.indc, Grammeme.impr ];
+export const Mood = [Grammeme.indc, Grammeme.impr];
 
 /**
  * Represents verb self-inclusion language concept.
  * 
  * Implemented as a list of mututally exclusive {@link Grammeme}s.
 */
-export const Inclusion = [ Grammeme.incl, Grammeme.excl ];
+export const Inclusion = [Grammeme.incl, Grammeme.excl];
 
 /**
  * Represents verb voice language concept.
  * 
  * Implemented as a list of mututally exclusive {@link Grammeme}s.
 */
-export const Voice = [ Grammeme.actv, Grammeme.pssv ];
+export const Voice = [Grammeme.actv, Grammeme.pssv];
 
 /**
  * Represents verb tense language concept.
diff --git a/rsconcept/frontend/src/pages/CreateRSFormPage.tsx b/rsconcept/frontend/src/pages/CreateRSFormPage.tsx
index a4ad074d..a1cca443 100644
--- a/rsconcept/frontend/src/pages/CreateRSFormPage.tsx
+++ b/rsconcept/frontend/src/pages/CreateRSFormPage.tsx
@@ -8,6 +8,7 @@ import Checkbox from '../components/Common/Checkbox';
 import Form from '../components/Common/Form';
 import Label from '../components/Common/Label';
 import MiniButton from '../components/Common/MiniButton';
+import Overlay from '../components/Common/Overlay';
 import SubmitButton from '../components/Common/SubmitButton';
 import TextArea from '../components/Common/TextArea';
 import TextInput from '../components/Common/TextInput';
@@ -78,13 +79,12 @@ function CreateRSFormPage() {
 
   return (
   <RequireAuth>
-  <div className='flex justify-center w-full'>
+  <div className='flex justify-center'>
   <Form title='Создание концептуальной схемы' 
     onSubmit={handleSubmit}
     dimensions='max-w-lg w-full mt-4'
   >
-    <div className='relative w-full'>
-    <div className='absolute top-[-2.4rem] right-[-1rem] flex'>
+    <Overlay position='top-[-2.4rem] right-[-1rem]'>
       <input ref={inputRef} type='file'
         style={{ display: 'none' }}
         accept={EXTEOR_TRS_FILE}
@@ -95,49 +95,47 @@ function CreateRSFormPage() {
         icon={<DownloadIcon size={5} color='text-primary'/>}
         onClick={() => inputRef.current?.click()}
       />
+    </Overlay>
+    {fileName ? <Label text={`Загружен файл: ${fileName}`} /> : null}
+
+    <TextInput
+      label='Полное название'
+      placeholder={file && 'Загрузить из файла'}
+      required={!file}
+      value={title}
+      onChange={event => setTitle(event.target.value)}
+    />
+    <TextInput dense
+      label='Сокращение' 
+      placeholder={file && 'Загрузить из файла'}
+      required={!file}
+      value={alias}
+      onChange={event => setAlias(event.target.value)}
+    />
+    <TextArea
+      label='Комментарий'
+      placeholder={file && 'Загрузить из файла'}
+      value={comment}
+      onChange={event => setComment(event.target.value)}
+    />
+    <Checkbox 
+      label='Общедоступная схема'
+      value={common}
+      setValue={value => setCommon(value ?? false)}
+    />
+    <div className='flex items-center justify-center gap-4 py-2'>
+      <SubmitButton 
+        text='Создать схему'
+        loading={processing}
+        dimensions='min-w-[10rem]'
+      />
+      <Button
+        text='Отмена'
+        dimensions='min-w-[10rem]'
+        onClick={() => handleCancel()}
+      />
     </div>
-    </div>
-    <div className='flex flex-col gap-3'>
-      {fileName ? <Label text={`Загружен файл: ${fileName}`} /> : null}
-      <TextInput
-        label='Полное название'
-        placeholder={file && 'Загрузить из файла'}
-        required={!file}
-        value={title}
-        onChange={event => setTitle(event.target.value)}
-      />
-      <TextInput dense
-        label='Сокращение' 
-        placeholder={file && 'Загрузить из файла'}
-        required={!file}
-        value={alias}
-        onChange={event => setAlias(event.target.value)}
-      />
-      <TextArea
-        label='Комментарий'
-        placeholder={file && 'Загрузить из файла'}
-        value={comment}
-        onChange={event => setComment(event.target.value)}
-      />
-      <Checkbox 
-        label='Общедоступная схема'
-        value={common}
-        setValue={value => setCommon(value ?? false)}
-      />
-      <div className='flex items-center justify-center gap-4 py-2'>
-        <SubmitButton 
-          text='Создать схему'
-          loading={processing}
-          dimensions='min-w-[10rem]'
-        />
-        <Button
-          text='Отмена'
-          dimensions='min-w-[10rem]'
-          onClick={() => handleCancel()}
-        />
-      </div>
-      {error ? <BackendError error={error} /> : null}
-    </div>
+    {error ? <BackendError error={error} /> : null}
   </Form>
   </div>
   </RequireAuth>);
diff --git a/rsconcept/frontend/src/pages/LibraryPage/ItemIcons.tsx b/rsconcept/frontend/src/pages/LibraryPage/ItemIcons.tsx
new file mode 100644
index 00000000..2cf5ff7b
--- /dev/null
+++ b/rsconcept/frontend/src/pages/LibraryPage/ItemIcons.tsx
@@ -0,0 +1,31 @@
+import { EducationIcon, GroupIcon, SubscribedIcon } from '../../components/Icons';
+import { ICurrentUser, ILibraryItem } from '../../models/library';
+import { prefixes } from '../../utils/constants';
+
+interface ItemIconsProps {
+  user?: ICurrentUser
+  item: ILibraryItem
+}
+
+function ItemIcons({ user, item }: ItemIconsProps) {
+  return (
+  <div
+    className='inline-flex items-center justify-start gap-1 min-w-[2.75rem]'
+    id={`${prefixes.library_list}${item.id}`}
+  >
+    {(user && user.subscriptions.includes(item.id)) ?
+    <span title='Отслеживаемая'>
+      <SubscribedIcon size={3} />
+    </span> : null}
+    {item.is_common ?
+    <span title='Общедоступная'>
+      <GroupIcon size={3}/>
+    </span> : null}
+    {item.is_canonical ?
+    <span title='Неизменная'>
+      <EducationIcon size={3}/>
+    </span> : null}
+  </div>);
+}
+
+export default ItemIcons;
diff --git a/rsconcept/frontend/src/pages/LibraryPage/LibraryPage.tsx b/rsconcept/frontend/src/pages/LibraryPage/LibraryPage.tsx
index 79a22f88..e8b42182 100644
--- a/rsconcept/frontend/src/pages/LibraryPage/LibraryPage.tsx
+++ b/rsconcept/frontend/src/pages/LibraryPage/LibraryPage.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useLayoutEffect, useState } from 'react';
 
-import BackendError from '../../components/BackendError'
-import { ConceptLoader } from '../../components/Common/ConceptLoader'
+import BackendError from '../../components/BackendError';
+import { ConceptLoader } from '../../components/Common/ConceptLoader';
 import { useLibrary } from '../../context/LibraryContext';
 import { useConceptTheme } from '../../context/ThemeContext';
 import useLocalStorage from '../../hooks/useLocalStorage';
@@ -14,8 +14,8 @@ function LibraryPage() {
   const library = useLibrary();
   const { setShowScroll } = useConceptTheme();
   
-  const [ filter, setFilter ] = useState<ILibraryFilter>({});
-  const [ items, setItems ] = useState<ILibraryItem[]>([]);
+  const [filter, setFilter] = useState<ILibraryFilter>({});
+  const [items, setItems] = useState<ILibraryItem[]>([]);
 
   const [query, setQuery] = useState('');
   const [strategy, setStrategy] = useLocalStorage<LibraryFilterStrategy>('search_strategy', LibraryFilterStrategy.MANUAL);
@@ -42,7 +42,7 @@ function LibraryPage() {
     {library.loading ? <ConceptLoader/> : null}
     {library.error ? <BackendError error={library.error}/> : null}
     {(!library.loading && library.items) ? 
-    <div className='flex flex-col w-full'>
+    <>
       <SearchPanel
         query={query}
         setQuery={setQuery}
@@ -56,7 +56,7 @@ function LibraryPage() {
         resetQuery={resetQuery}
         items={items} 
       />
-    </div> : null}
+    </> : null}
   </>);
 }
 
diff --git a/rsconcept/frontend/src/pages/LibraryPage/ViewLibrary.tsx b/rsconcept/frontend/src/pages/LibraryPage/ViewLibrary.tsx
index f635fdc2..7cbc4e81 100644
--- a/rsconcept/frontend/src/pages/LibraryPage/ViewLibrary.tsx
+++ b/rsconcept/frontend/src/pages/LibraryPage/ViewLibrary.tsx
@@ -1,17 +1,16 @@
 import { useMemo } from 'react';
 import { useIntl } from 'react-intl';
 
-import ConceptTooltip from '../../components/Common/ConceptTooltip';
 import TextURL from '../../components/Common/TextURL';
 import DataTable, { createColumnHelper } from '../../components/DataTable';
-import HelpLibrary from '../../components/Help/HelpLibrary';
-import { EducationIcon, GroupIcon, HelpIcon,SubscribedIcon } from '../../components/Icons';
+import HelpButton from '../../components/Help/HelpButton';
 import { useAuth } from '../../context/AuthContext';
 import { useConceptNavigation } from '../../context/NagivationContext';
 import { useUsers } from '../../context/UsersContext';
 import useLocalStorage from '../../hooks/useLocalStorage';
 import { ILibraryItem } from '../../models/library';
-import { prefixes } from '../../utils/constants';
+import { HelpTopic } from '../../models/miscelanious';
+import ItemIcons from './ItemIcons';
 
 interface ViewLibraryProps {
   items: ILibraryItem[]
@@ -25,10 +24,9 @@ function ViewLibrary({ items, resetQuery: cleanQuery }: ViewLibraryProps) {
   const intl = useIntl();
   const { user } = useAuth();
   const { getUserLabel } = useUsers();
+  const [itemsPerPage, setItemsPerPage] = useLocalStorage<number>('library_per_page', 50);
 
-  const [ itemsPerPage, setItemsPerPage ] = useLocalStorage<number>('library_per_page', 50);
-
-  const openRSForm = (item: ILibraryItem) => navigateTo(`/rsforms/${item.id}`);
+  const handleOpenItem = (item: ILibraryItem) => navigateTo(`/rsforms/${item.id}`);
 
   const columns = useMemo(
   () => [
@@ -38,28 +36,11 @@ function ViewLibrary({ items, resetQuery: cleanQuery }: ViewLibraryProps) {
       size: 60,
       minSize: 60,
       maxSize: 60,
-      cell: props => {
-        const item = props.row.original;
-        return (<>
-          <div
-            className='flex items-center justify-start gap-1 min-w-[2.75rem]'
-            id={`${prefixes.library_list}${item.id}`}
-          >
-            {(user && user.subscriptions.includes(item.id)) ?
-            <p title='Отслеживаемая'>
-              <SubscribedIcon size={3}/>
-            </p> : null}
-            {item.is_common ?
-            <p title='Общедоступная'>
-              <GroupIcon size={3}/>
-            </p> : null}
-            {item.is_canonical ?
-            <p title='Неизменная'>
-              <EducationIcon size={3}/>
-            </p> : null}
-          </div>
-        </>);
-      },
+      cell: props => 
+        <ItemIcons
+          item={props.row.original}
+          user={user}
+        />,
     }),
     columnHelper.accessor('alias', {
       id: 'alias',
@@ -95,7 +76,10 @@ function ViewLibrary({ items, resetQuery: cleanQuery }: ViewLibraryProps) {
       size: 150,
       minSize: 150,
       maxSize: 150,
-      cell: props => <div className='text-sm min-w-[8.25rem]'>{new Date(props.cell.getValue()).toLocaleString(intl.locale)}</div>,
+      cell: props =>
+        <div className='text-sm min-w-[8.25rem]'>
+          {new Date(props.cell.getValue()).toLocaleString(intl.locale)}
+        </div>,
       enableSorting: true,
       sortingFn: 'datetime',
       sortDescFirst: true
@@ -104,36 +88,30 @@ function ViewLibrary({ items, resetQuery: cleanQuery }: ViewLibraryProps) {
   
   return (
   <>
-    {items.length !== 0 ?
     <div className='sticky top-[2.3rem] w-full'>
-    <div className='absolute top-[-0.125rem] left-0 flex gap-1 ml-3 z-pop'>
-      <div id='library-help' className='py-2 '>
-        <HelpIcon color='text-primary' size={5} />
-      </div>
-      <ConceptTooltip anchorSelect='#library-help'>
-        <div className='max-w-[35rem]'>
-          <HelpLibrary />
-        </div>
-      </ConceptTooltip>
+    <div className='absolute top-[0.125rem] left-[0.25rem] flex gap-1 ml-3 z-pop'>
+      <HelpButton
+        topic={HelpTopic.LIBRARY}
+        dimensions='max-w-[35rem]'
+        offset={0}
+      />
+    </div>
     </div>
-    </div> : null}
     <DataTable
       columns={columns}
       data={items}
 
       headPosition='2.3rem'
       noDataComponent={
-      <div className='flex flex-col gap-4 justify-center p-2 text-center min-h-[6rem]'>
+      <div className='p-3 text-center min-h-[6rem]'>
         <p>Список схем пуст</p>
-        <p className='flex justify-center gap-4'>
+        <p className='flex justify-center gap-6 mt-3'>
           <TextURL text='Создать схему' href='/rsform-create'/>
-          <span className='cursor-pointer hover:underline text-url' onClick={cleanQuery}>
-            Очистить фильтр
-          </span>
+          <TextURL text='Очистить фильтр' onClick={cleanQuery} />
         </p>
       </div>}
       
-      onRowClicked={openRSForm}
+      onRowClicked={handleOpenItem}
 
       enableSorting
       initialSorting={{
diff --git a/rsconcept/frontend/src/pages/ManualsPage/TopicsList.tsx b/rsconcept/frontend/src/pages/ManualsPage/TopicsList.tsx
index 37fcfe17..2d6c2c42 100644
--- a/rsconcept/frontend/src/pages/ManualsPage/TopicsList.tsx
+++ b/rsconcept/frontend/src/pages/ManualsPage/TopicsList.tsx
@@ -9,22 +9,21 @@ interface TopicsListProps {
 
 function TopicsList({ activeTopic, onChangeTopic }: TopicsListProps) {
   return (
-    <div className='sticky top-0 left-0 border-x min-w-[13rem] select-none flex flex-col clr-controls small-caps h-fit'>
-      <div className='my-2 text-lg text-center'>Справка</div>
-      {Object.values(HelpTopic).map(
-      (topic, index) => {
-        const isActive = activeTopic === topic;
-        return (
-          <div key={`${prefixes.topic_list}${index}`}
-            className={`px-3 py-1 border-y cursor-pointer clr-hover ${isActive ? 'clr-selected ' : ''}`}
-            title={describeHelpTopic(topic)}
-            onClick={() => onChangeTopic(topic)}
-          >
-            {labelHelpTopic(topic)}
-          </div>);
-      })}
-    </div>
-  );
+  <div className='sticky top-0 left-0 border-x min-w-[13rem] select-none flex flex-col clr-controls small-caps h-fit'>
+    <div className='my-2 text-lg text-center'>Справка</div>
+    {Object.values(HelpTopic).map(
+    (topic, index) => {
+      const isActive = activeTopic === topic;
+      return (
+        <div key={`${prefixes.topic_list}${index}`}
+          className={`px-3 py-1 border-y cursor-pointer clr-hover ${isActive ? 'clr-selected ' : ''}`}
+          title={describeHelpTopic(topic)}
+          onClick={() => onChangeTopic(topic)}
+        >
+          {labelHelpTopic(topic)}
+        </div>);
+    })}
+  </div>);
 }
 
 export default TopicsList;
diff --git a/rsconcept/frontend/src/pages/ManualsPage/ViewTopic.tsx b/rsconcept/frontend/src/pages/ManualsPage/ViewTopic.tsx
index 78881347..f694773d 100644
--- a/rsconcept/frontend/src/pages/ManualsPage/ViewTopic.tsx
+++ b/rsconcept/frontend/src/pages/ManualsPage/ViewTopic.tsx
@@ -1,14 +1,4 @@
-import HelpAPI from '../../components/Help/HelpAPI';
-import HelpConstituenta from '../../components/Help/HelpConstituenta';
-import HelpExteor from '../../components/Help/HelpExteor';
-import HelpLibrary from '../../components/Help/HelpLibrary';
-import HelpMain from '../../components/Help/HelpMain';
-import HelpRSFormItems from '../../components/Help/HelpRSFormItems';
-import HelpRSFormMeta from '../../components/Help/HelpRSFormMeta';
-import HelpRSLang from '../../components/Help/HelpRSLang';
-import HelpRSTemplates from '../../components/Help/HelpRSTemplates';
-import HelpTermGraph from '../../components/Help/HelpTermGraph';
-import HelpTerminologyControl from '../../components/Help/HelpTerminologyControl';
+import InfoTopic from '../../components/Help/InfoTopic';
 import { HelpTopic } from '../../models/miscelanious';
 
 interface ViewTopicProps {
@@ -18,17 +8,7 @@ interface ViewTopicProps {
 function ViewTopic({ topic }: ViewTopicProps) {
   return (
   <div className='w-full px-2 py-2'>
-    {topic === HelpTopic.MAIN ? <HelpMain /> : null}
-    {topic === HelpTopic.LIBRARY ? <HelpLibrary /> : null}
-    {topic === HelpTopic.RSFORM ? <HelpRSFormMeta /> : null}
-    {topic === HelpTopic.CSTLIST ? <HelpRSFormItems /> : null}
-    {topic === HelpTopic.CONSTITUENTA ? <HelpConstituenta /> : null}
-    {topic === HelpTopic.GRAPH_TERM ? <HelpTermGraph /> : null}
-    {topic === HelpTopic.RSTEMPLATES ? <HelpRSTemplates /> : null}
-    {topic === HelpTopic.RSLANG ? <HelpRSLang /> : null}
-    {topic === HelpTopic.TERM_CONTROL ? <HelpTerminologyControl /> : null}
-    {topic === HelpTopic.EXTEOR ? <HelpExteor /> : null}
-    {topic === HelpTopic.API ? <HelpAPI /> : null}
+    <InfoTopic topic={topic}/>
   </div>);
 }
 
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/ConstituentaToolbar.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/ConstituentaToolbar.tsx
index 279cdeff..41626681 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/ConstituentaToolbar.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/ConstituentaToolbar.tsx
@@ -1,9 +1,12 @@
-import { useMemo } from 'react'
+import { useMemo } from 'react';
 
-import ConceptTooltip from '../../../components/Common/ConceptTooltip'
-import MiniButton from '../../../components/Common/MiniButton'
-import HelpConstituenta from '../../../components/Help/HelpConstituenta'
-import { ArrowsRotateIcon, CloneIcon, DiamondIcon, DumpBinIcon, HelpIcon, SaveIcon, SmallPlusIcon } from '../../../components/Icons'
+import MiniButton from '../../../components/Common/MiniButton';
+import Overlay from '../../../components/Common/Overlay';
+import HelpButton from '../../../components/Help/HelpButton';
+import { 
+  ArrowsRotateIcon, CloneIcon, DiamondIcon, DumpBinIcon, SaveIcon, SmallPlusIcon
+} from '../../../components/Icons';
+import { HelpTopic } from '../../../models/miscelanious';
 
 interface ConstituentaToolbarProps {
   isMutable: boolean
@@ -24,10 +27,8 @@ function ConstituentaToolbar({
   onDelete, onClone, onCreate, onTemplates
 }: ConstituentaToolbarProps) {
   const canSave = useMemo(() => (isModified && isMutable), [isModified, isMutable]);
-  return (    
-  <div className='relative w-full'>
-  <div className='absolute right-0 flex items-start justify-center w-full top-1'>
-  <div className='flex justify-start select-auto w-fit z-tooltip'>
+  return (
+  <Overlay position='right-1/2 translate-x-1/2 top-1 flex items-start'>
     <MiniButton
       tooltip='Сохранить изменения'
       disabled={!canSave}
@@ -64,18 +65,8 @@ function ConstituentaToolbar({
       onClick={onDelete}
       icon={<DumpBinIcon size={5} color={isMutable ? 'text-warning' : ''} />}
     />
-    <div id='cst-help' className='px-1 py-1'>
-      <HelpIcon color='text-primary' size={5} />
-    </div>
-    <ConceptTooltip
-      anchorSelect='#cst-help'
-      offset={4}
-    >
-      <HelpConstituenta />
-    </ConceptTooltip>
-  </div>
-  </div>
-  </div>);
+    <HelpButton topic={HelpTopic.CONSTITUENTA} offset={4} />
+  </Overlay>);
 }
 
 export default ConstituentaToolbar;
\ No newline at end of file
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/EditorRSExpression.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/EditorRSExpression.tsx
index 45894061..9df4c77a 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/EditorRSExpression.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/EditorRSExpression.tsx
@@ -5,6 +5,7 @@ import { toast } from 'react-toastify';
 import Button from '../../../components/Common/Button';
 import { ConceptLoader } from '../../../components/Common/ConceptLoader';
 import MiniButton from '../../../components/Common/MiniButton';
+import Overlay from '../../../components/Common/Overlay';
 import { ASTNetworkIcon } from '../../../components/Icons';
 import RSInput from '../../../components/RSInput';
 import { RSTextWrapper } from '../../../components/RSInput/textEditing';
@@ -118,16 +119,13 @@ function EditorRSExpression({
 
   return (
   <div className='flex flex-col items-start w-full'>
-    <div className='relative w-full'>
-      <div className='absolute top-[-0.2rem] left-[11rem]'>
-      <MiniButton
-          tooltip='Дерево разбора выражения'
-          noHover
-          onClick={handleShowAST}
-          icon={<ASTNetworkIcon size={5} color='text-primary' />}
-        />
-      </div>
-    </div>
+    <Overlay position='top-[-0.2rem] left-[11rem]'>
+      <MiniButton noHover
+        tooltip='Дерево разбора выражения'
+        onClick={handleShowAST}
+        icon={<ASTNetworkIcon size={5} color='text-primary' />}
+      />
+     </Overlay>
     <RSInput innerref={rsInput}
       value={value}
       minHeight='3.8rem'
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx
index 62231da0..88510116 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx
@@ -2,6 +2,7 @@ import { Dispatch, SetStateAction, useLayoutEffect, useMemo, useState } from 're
 import { toast } from 'react-toastify';
 
 import MiniButton from '../../../components/Common/MiniButton';
+import Overlay from '../../../components/Common/Overlay';
 import SubmitButton from '../../../components/Common/SubmitButton';
 import TextArea from '../../../components/Common/TextArea';
 import { EditIcon, SaveIcon } from '../../../components/Icons';
@@ -101,11 +102,9 @@ function FormConstituenta({
   }
 
   return (<>
-  {readyForEdit ?
-  <div className='relative'>
-  <div className='absolute top-0 right-[-3rem] w-full flex justify-start select-none'>
+  <Overlay position='top-0 left-[3rem]' className='flex justify-start select-none' >
     <MiniButton
-      tooltip={`Редактировать словоформы термина: ${constituenta!.term_forms.length}`}
+      tooltip={`Редактировать словоформы термина: ${constituenta?.term_forms.length ?? 0}`}
       disabled={!readyForEdit}
       noHover
       onClick={onEditTerm}
@@ -121,8 +120,7 @@ function FormConstituenta({
       onClick={handleRename}
       icon={<EditIcon size={4} color={readyForEdit ? 'text-primary' : ''} />}
     />
-  </div>
-  </div> : null}
+  </Overlay>
   <form id={id}
     className='flex flex-col gap-3 mt-1'
     onSubmit={handleSubmit}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/ViewSideConstituents.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/ViewSideConstituents.tsx
index 6e568695..9b96bb1d 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/ViewSideConstituents.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/ViewSideConstituents.tsx
@@ -194,7 +194,7 @@ function ViewSideConstituents({ expression, baseHeight, activeID, onOpenEdit }:
   }, [noNavigation, baseHeight]);
 
   return (<>
-    <div className='sticky top-0 left-0 right-0 flex items-stretch justify-between gap-1 pl-2 border-b clr-input'>
+    <div className='relative top-0 left-0 right-0 flex items-stretch justify-between gap-1 pl-2 border-b clr-input'>
       <div className='absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-controls'>
         <MagnifyingGlassIcon />
       </div>
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/RSFormToolbar.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/RSFormToolbar.tsx
index 943cdeef..96f63828 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/RSFormToolbar.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/RSFormToolbar.tsx
@@ -1,9 +1,10 @@
-import { useMemo } from 'react'
+import { useMemo } from 'react';
 
-import ConceptTooltip from '../../../components/Common/ConceptTooltip'
-import MiniButton from '../../../components/Common/MiniButton'
-import HelpRSFormMeta from '../../../components/Help/HelpRSFormMeta'
-import { DownloadIcon, DumpBinIcon, HelpIcon, OwnerIcon, SaveIcon, ShareIcon } from '../../../components/Icons'
+import MiniButton from '../../../components/Common/MiniButton';
+import Overlay from '../../../components/Common/Overlay';
+import HelpButton from '../../../components/Help/HelpButton';
+import { DownloadIcon, DumpBinIcon, OwnerIcon, SaveIcon, ShareIcon } from '../../../components/Icons';
+import { HelpTopic } from '../../../models/miscelanious';
 
 interface RSFormToolbarProps {
   isMutable: boolean
@@ -25,8 +26,7 @@ function RSFormToolbar({
 }: RSFormToolbarProps) {
   const canSave = useMemo(() => (modified && isMutable), [modified, isMutable]);
   return (    
-  <div className='relative flex items-start justify-center w-full'>
-  <div className='absolute flex mt-1'>
+  <Overlay position='w-full top-1 flex items-start justify-center'>
     <MiniButton
       tooltip='Сохранить изменения'
       disabled={!canSave}
@@ -55,14 +55,8 @@ function RSFormToolbar({
       onClick={onDestroy}
       icon={<DumpBinIcon size={5} color={isMutable ? 'text-warning' : ''} />}
     />
-    <div id='rsform-help' className='py-1 ml-1'>
-      <HelpIcon color='text-primary' size={5} />
-    </div>
-    <ConceptTooltip anchorSelect='#rsform-help' offset={4}>
-      <HelpRSFormMeta />
-    </ConceptTooltip>
-  </div>
-  </div>);
+    <HelpButton topic={HelpTopic.RSFORM} offset={4} />
+  </Overlay>);
 }
 
 export default RSFormToolbar;
\ No newline at end of file
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSList/EditorRSList.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSList/EditorRSList.tsx
index 113471da..45865773 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSList/EditorRSList.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSList/EditorRSList.tsx
@@ -4,7 +4,7 @@ import { toast } from 'react-toastify';
 import { type RowSelectionState } from '../../../components/DataTable';
 import SelectedCounter from '../../../components/Shared/SelectedCounter';
 import { useRSForm } from '../../../context/RSFormContext';
-import { CstType, ICstCreateData, ICstMovetoData } from '../../../models/rsform'
+import { CstType, ICstCreateData, ICstMovetoData } from '../../../models/rsform';
 import RSListToolbar from './RSListToolbar';
 import RSTable from './RSTable';
 
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSList/RSListToolbar.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSList/RSListToolbar.tsx
index 695508ea..1dc893fc 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSList/RSListToolbar.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSList/RSListToolbar.tsx
@@ -1,12 +1,13 @@
 import { useMemo } from 'react';
 
-import ConceptTooltip from '../../../components/Common/ConceptTooltip';
 import Dropdown from '../../../components/Common/Dropdown';
 import DropdownButton from '../../../components/Common/DropdownButton';
 import MiniButton from '../../../components/Common/MiniButton';
-import HelpRSFormItems from '../../../components/Help/HelpRSFormItems';
-import { ArrowDownIcon, ArrowDropdownIcon, ArrowUpIcon, CloneIcon, DiamondIcon, DumpBinIcon, HelpIcon, SmallPlusIcon, UpdateIcon } from '../../../components/Icons';
+import Overlay from '../../../components/Common/Overlay';
+import HelpButton from '../../../components/Help/HelpButton';
+import { ArrowDownIcon, ArrowDropdownIcon, ArrowUpIcon, CloneIcon, DiamondIcon, DumpBinIcon, SmallPlusIcon, UpdateIcon } from '../../../components/Icons';
 import useDropdown from '../../../hooks/useDropdown';
+import { HelpTopic } from '../../../models/miscelanious';
 import { CstType } from '../../../models/rsform';
 import { prefixes } from '../../../utils/constants';
 import { labelCstType } from '../../../utils/labels';
@@ -34,8 +35,7 @@ function RSListToolbar({
   const nothingSelected = useMemo(() => selectedCount === 0, [selectedCount]);
   
   return (
-  <div className='relative w-full z-pop'>
-  <div className='absolute flex items-start justify-center w-full top-1'>
+  <Overlay position='w-full top-1 flex items-start justify-center'>
     <MiniButton
       tooltip='Переместить вверх [Alt + вверх]'
       icon={<ArrowUpIcon size={5}/>}
@@ -103,14 +103,8 @@ function RSListToolbar({
       disabled={!isMutable || nothingSelected}
       onClick={onDelete}
     />
-    <div className='px-1 py-1' id='items-table-help'>
-      <HelpIcon color='text-primary' size={5} />
-    </div>
-    <ConceptTooltip anchorSelect='#items-table-help' offset={5}>
-      <HelpRSFormItems />
-    </ConceptTooltip>
-  </div>
-  </div>);
+    <HelpButton topic={HelpTopic.CSTLIST} offset={5} />
+  </Overlay>);
 }
 
 export default RSListToolbar;
\ No newline at end of file
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/EditorTermGraph.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/EditorTermGraph.tsx
index aec70936..11c46b8b 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/EditorTermGraph.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/EditorTermGraph.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useLayoutEffect, useMemo, useState } from 'react';
 import { GraphEdge, GraphNode, LayoutTypes } from 'reagraph';
 
+import Overlay from '../../../components/Common/Overlay';
 import InfoConstituenta from '../../../components/Shared/InfoConstituenta';
 import SelectedCounter from '../../../components/Shared/SelectedCounter';
 import { useRSForm } from '../../../context/RSFormContext';
@@ -225,15 +226,17 @@ function EditorTermGraph({ onOpenEdit, onCreateCst, onDeleteCst }: EditorTermGra
     />
 
     {hoverCst ?
-    <div className='relative'>
+    <Overlay
+      position='top-[1.6rem] left-[2.6rem] px-3 w-[25rem] h-fit min-h-[11rem] overflow-y-auto'
+      layer='z-tooltip'
+      className='border shadow-md clr-app'
+    >
       <InfoConstituenta
         data={hoverCst}
-        className='absolute top-[1.6rem] left-[2.6rem] z-tooltip w-[25rem] min-h-[11rem] shadow-md overflow-y-auto border h-fit clr-app px-3' 
       />
-    </div> : null}
-
-    <div className='relative z-pop'>
-    <div className='absolute top-0 left-0 flex flex-col gap-3 max-w-[13.5rem] min-w-[13.5rem]'>
+    </Overlay> : null}
+    
+    <Overlay position='top-0 left-0 max-w-[13.5rem] min-w-[13.5rem]' className='flex flex-col gap-3'>
       <GraphSidebar 
         coloring={coloringScheme}
         layout={layout}
@@ -248,8 +251,7 @@ function EditorTermGraph({ onOpenEdit, onCreateCst, onDeleteCst }: EditorTermGra
         toggleSelection={toggleDismissed}
         onEdit={onOpenEdit}
       />
-    </div>
-    </div>
+    </Overlay>
 
     <TermGraph 
       nodes={nodes}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/GraphSidebar.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/GraphSidebar.tsx
index bb0a80e7..33b89a23 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/GraphSidebar.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/GraphSidebar.tsx
@@ -18,7 +18,7 @@ function GraphSidebar({
   layout, setLayout
 } : GraphSidebarProps) {
   return (
-    <div className='flex flex-col px-2 pb-2 text-sm select-none mt-9 h-fit'>        
+    <div className='flex flex-col px-2 text-sm select-none mt-9 h-fit'>        
     <SelectSingle
       placeholder='Выберите цвет'
       options={SelectorGraphColoring}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/GraphToolbar.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/GraphToolbar.tsx
index 267a28b1..9c1b11f7 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/GraphToolbar.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/GraphToolbar.tsx
@@ -1,7 +1,8 @@
-import ConceptTooltip from '../../../components/Common/ConceptTooltip'
-import MiniButton from '../../../components/Common/MiniButton'
-import HelpTermGraph from '../../../components/Help/HelpTermGraph'
-import { ArrowsFocusIcon, DumpBinIcon, FilterIcon, HelpIcon, LetterAIcon, LetterALinesIcon, PlanetIcon, SmallPlusIcon } from '../../../components/Icons'
+import MiniButton from '../../../components/Common/MiniButton';
+import Overlay from '../../../components/Common/Overlay';
+import HelpButton from '../../../components/Help/HelpButton';
+import { ArrowsFocusIcon, DumpBinIcon, FilterIcon, LetterAIcon, LetterALinesIcon, PlanetIcon, SmallPlusIcon } from '../../../components/Icons';
+import { HelpTopic } from '../../../models/miscelanious';
 
 interface GraphToolbarProps {
   isMutable: boolean
@@ -28,8 +29,7 @@ function GraphToolbar({
   onCreate, onDelete, onResetViewpoint
 } : GraphToolbarProps) {
   return (
-  <div className='relative w-full z-pop'>
-  <div className='absolute right-0 flex items-start justify-center w-full top-1'>
+  <Overlay position='w-full top-1 right-0 flex items-start justify-center'>
     <MiniButton
       tooltip='Настройки фильтрации узлов и связей'
       icon={<FilterIcon color='text-primary' size={5} />}
@@ -67,16 +67,8 @@ function GraphToolbar({
       disabled={!is3D}
       onClick={toggleOrbit}
     />
-    <div className='px-1 py-1' id='items-graph-help'>
-      <HelpIcon color='text-primary' size={5} />
-    </div>
-    <ConceptTooltip anchorSelect='#items-graph-help' offset={4}>
-      <div className='text-sm max-w-[calc(100vw-20rem)]'>
-        <HelpTermGraph />
-      </div>
-    </ConceptTooltip>
-  </div>
-  </div>);
+    <HelpButton topic={HelpTopic.GRAPH_TERM} dimensions='max-w-[calc(100vw-20rem)]' offset={4} />
+  </Overlay>);
 }
 
 export default GraphToolbar;
\ No newline at end of file
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/useGraphFilter.ts b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/useGraphFilter.ts
index fb2565f9..bb8d7634 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/useGraphFilter.ts
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/useGraphFilter.ts
@@ -5,7 +5,7 @@ import { CstType, IRSForm } from '../../../models/rsform';
 import { Graph } from '../../../utils/Graph';
 
 function useGraphFilter(schema: IRSForm | undefined, params: GraphFilterParams, toggleUpdate: boolean) {
-  const [ filtered, setFiltered ] = useState<Graph>(new Graph());
+  const [filtered, setFiltered] = useState<Graph>(new Graph());
 
   const allowedTypes: CstType[] = useMemo(
   () => {
diff --git a/rsconcept/frontend/src/pages/RSFormPage/RSFormPage.tsx b/rsconcept/frontend/src/pages/RSFormPage/RSFormPage.tsx
index ae9a5c34..e2b6037c 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/RSFormPage.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/RSFormPage.tsx
@@ -6,10 +6,9 @@ import RSTabs from './RSTabs';
 function RSFormPage() {
   const { id } = useParams();
   return (
-    <RSFormState schemaID={id ?? ''}>
-      <RSTabs />
-    </RSFormState>
-  );
+  <RSFormState schemaID={id ?? ''}>
+    <RSTabs />
+  </RSFormState>);
 }
 
 export default RSFormPage;
diff --git a/rsconcept/frontend/src/pages/RSFormPage/RSTabsMenu.tsx b/rsconcept/frontend/src/pages/RSFormPage/RSTabsMenu.tsx
index f2ce5f17..5546f444 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/RSTabsMenu.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/RSTabsMenu.tsx
@@ -30,8 +30,8 @@ function RSTabsMenu({
   const navigate = useNavigate();
   const { user } = useAuth();
   const {
-    isOwned, isMutable, isTracking, isReadonly, isClaimable, adminMode: isForceAdmin,
-    toggleForceAdmin, toggleReadonly, processing
+    isOwned, isMutable, isTracking, readerMode, isClaimable, adminMode,
+    toggleAdminMode, toggleReaderMode, processing
   } = useRSForm();
   const schemaMenu = useDropdown();
   const editMenu = useDropdown();
@@ -147,15 +147,15 @@ function RSTabsMenu({
         </DropdownButton>
         {(isOwned || user?.is_staff) ?
         <DropdownCheckbox
-          value={isReadonly}
-          setValue={toggleReadonly}
+          value={readerMode}
+          setValue={toggleReaderMode}
           label='Я — читатель!'
           tooltip='Режим чтения'
         /> : null}
         {user?.is_staff ?
         <DropdownCheckbox
-          value={isForceAdmin}
-          setValue={toggleForceAdmin}
+          value={adminMode}
+          setValue={toggleAdminMode}
           label='Я — администратор!'
           tooltip='Режим редактирования для администраторов'
         /> : null}
diff --git a/rsconcept/frontend/src/pages/UserProfilePage/EditorPassword.tsx b/rsconcept/frontend/src/pages/UserProfilePage/EditorPassword.tsx
index 94ddcd23..c2fccb35 100644
--- a/rsconcept/frontend/src/pages/UserProfilePage/EditorPassword.tsx
+++ b/rsconcept/frontend/src/pages/UserProfilePage/EditorPassword.tsx
@@ -68,9 +68,8 @@ function EditorPassword() {
   }, [newPassword, oldPassword, newPasswordRepeat, setError]);
 
   return (
-  <div className='flex py-2 border-l-2 max-w-[14rem]'>
   <form
-    className='flex flex-col justify-between px-6'
+    className='flex flex-col justify-between px-6 border-l-2 max-w-[14rem] py-2'
     onSubmit={handleSubmit}
   >
     <div className='flex flex-col gap-3'>
@@ -104,8 +103,7 @@ function EditorPassword() {
         loading={loading}
       />
     </div>
-  </form>
-  </div>);
+  </form>);
 }
 
 export default EditorPassword;
diff --git a/rsconcept/frontend/src/pages/UserProfilePage/UserTabs.tsx b/rsconcept/frontend/src/pages/UserProfilePage/UserTabs.tsx
index 0cbca8b7..86d8ef9b 100644
--- a/rsconcept/frontend/src/pages/UserProfilePage/UserTabs.tsx
+++ b/rsconcept/frontend/src/pages/UserProfilePage/UserTabs.tsx
@@ -3,6 +3,7 @@ import { useMemo, useState } from 'react';
 import BackendError from '../../components/BackendError';
 import { ConceptLoader } from '../../components/Common/ConceptLoader';
 import MiniButton from '../../components/Common/MiniButton';
+import Overlay from '../../components/Common/Overlay';
 import { NotSubscribedIcon,SubscribedIcon } from '../../components/Icons';
 import { useAuth } from '../../context/AuthContext';
 import { useLibrary } from '../../context/LibraryContext';
@@ -24,24 +25,22 @@ function UserTabs() {
   }, [auth, items]);
 
   return (
-  <div className='w-full'>
+  <>
     {loading ? <ConceptLoader /> : null}
     {error ? <BackendError error={error} /> : null}
     {user ? 
     <div className='flex justify-center gap-2 py-2'>
       <div className='flex flex-col gap-2 min-w-max'>
-        <div className='relative w-full'>
-          <div className='absolute top-0 right-0 mt-2'>
-            <MiniButton
-              tooltip='Показать/Скрыть список отслеживаний'
-              icon={showSubs
-                ? <SubscribedIcon color='text-primary' size={5}/>
-                : <NotSubscribedIcon color='text-primary' size={5}/>
-              }
-              onClick={() => setShowSubs(prev => !prev)}
-            />
-          </div>
-        </div>
+        <Overlay position='mt-2 top-0 right-0'>
+          <MiniButton
+            tooltip='Показать/Скрыть список отслеживаний'
+            icon={showSubs
+              ? <SubscribedIcon color='text-primary' size={5}/>
+              : <NotSubscribedIcon color='text-primary' size={5}/>
+            }
+            onClick={() => setShowSubs(prev => !prev)}
+          />
+        </Overlay>
         <h1>Учетные данные пользователя</h1>
         <div className='flex justify-center py-2 max-w-fit'>
           <EditorProfile />
@@ -54,7 +53,7 @@ function UserTabs() {
         <ViewSubscriptions items={subscriptions} />
       </div> : null}
     </div> : null}
-  </div>);
+  </>);
 }
 
-export default UserTabs;
+export default UserTabs;
\ No newline at end of file
diff --git a/rsconcept/frontend/src/utils/codemirror.ts b/rsconcept/frontend/src/utils/codemirror.ts
index e23daeee..5c92827c 100644
--- a/rsconcept/frontend/src/utils/codemirror.ts
+++ b/rsconcept/frontend/src/utils/codemirror.ts
@@ -2,15 +2,15 @@
  * Module: CodeMirror customizations.
  */
 
-import { syntaxTree } from '@codemirror/language'
-import { NodeType, Tree, TreeCursor } from '@lezer/common'
-import { ReactCodeMirrorRef, SelectionRange } from '@uiw/react-codemirror'
+import { syntaxTree } from '@codemirror/language';
+import { NodeType, Tree, TreeCursor } from '@lezer/common';
+import { ReactCodeMirrorRef, SelectionRange } from '@uiw/react-codemirror';
 
-import { IEntityReference, ISyntacticReference } from '../models/language'
-import { parseGrammemes } from '../models/languageAPI'
-import { IConstituenta } from '../models/rsform'
-import { colorfgGrammeme,IColorTheme } from './color'
-import { describeConstituentaTerm, labelCstTypification, labelGrammeme } from './labels'
+import { IEntityReference, ISyntacticReference } from '../models/language';
+import { parseGrammemes } from '../models/languageAPI';
+import { IConstituenta } from '../models/rsform';
+import { colorfgGrammeme,IColorTheme } from './color';
+import { describeConstituentaTerm, labelCstTypification, labelGrammeme } from './labels';
 
 /**
  * Represents syntax tree node data.
diff --git a/rsconcept/frontend/src/utils/color.ts b/rsconcept/frontend/src/utils/color.ts
index a5be43a2..b96f42f5 100644
--- a/rsconcept/frontend/src/utils/color.ts
+++ b/rsconcept/frontend/src/utils/color.ts
@@ -2,10 +2,10 @@
  * Module: Single place for all color definitions in code (see index.css for full defs).
  */
 
-import { GramData, Grammeme, NounGrams, PartOfSpeech, VerbGrams } from '../models/language'
-import { GraphColoringScheme } from '../models/miscelanious'
-import { CstClass, ExpressionStatus, IConstituenta } from '../models/rsform'
-import { ISyntaxTreeNode, TokenID } from '../models/rslang'
+import { GramData, Grammeme, NounGrams, PartOfSpeech, VerbGrams } from '../models/language';
+import { GraphColoringScheme } from '../models/miscelanious';
+import { CstClass, ExpressionStatus, IConstituenta } from '../models/rsform';
+import { ISyntaxTreeNode, TokenID } from '../models/rslang';
 
 
 /**
diff --git a/rsconcept/frontend/src/utils/labels.ts b/rsconcept/frontend/src/utils/labels.ts
index b80e34ee..af80c067 100644
--- a/rsconcept/frontend/src/utils/labels.ts
+++ b/rsconcept/frontend/src/utils/labels.ts
@@ -482,7 +482,7 @@ export function labelSyntaxTree(node: ISyntaxTreeNode): string {
 }
 
 export function labelGrammeme(gram: GramData): string {
-  switch (gram) {
+  switch (gram as Grammeme) {
   default: return `Неизв: ${gram}`;
 
   case Grammeme.NOUN: return 'ЧР: сущ';