UI components refactoring and DOM optimization

rsconcept/frontend/src/components/BackendError.tsx

@@ -61,8 +61,7 @@ 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>);
-  );
 }
 
 export default BackendError;

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'> {

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
+    <TextInput noOutline
-      dimensions={`w-full pl-10 ${borderClass} rounded`}
       placeholder='Поиск'
-      noOutline
+      dimensions={`w-full pl-10 ${borderClass}`}
       noBorder={dense}
       value={value}
       onChange={event => (onChange ? onChange(event.target.value) : undefined)}

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;

rsconcept/frontend/src/components/Common/DropdownButton.tsx

@@ -16,8 +16,7 @@ function DropdownButton({ tooltip, onClick, disabled, children }: DropdownButton
     className={`px-3 py-1 text-left overflow-ellipsis whitespace-nowrap ${behavior} ${text}`}
   >
     {children}
-    </button>
+  </button>);
-  );
 }
 
 export default DropdownButton;

rsconcept/frontend/src/components/Common/DropdownCheckbox.tsx

@@ -21,8 +21,7 @@ function DropdownCheckbox({ tooltip, setValue, disabled, ...restProps }: Dropdow
       setValue={setValue}
       {...restProps}
     /> 
-    </div>
+  </div>);
-  );
 }
 
 export default DropdownCheckbox;

rsconcept/frontend/src/components/Common/EmbedYoutube.tsx

@@ -13,18 +13,16 @@ function EmbedYoutube({ videoID, pxHeight, pxWidth }: EmbedYoutubeProps) {
     className='relative'
     style={{height: 0, paddingBottom: `${pxHeight}px`, paddingLeft: `${pxWidth}px`}}
   >
-      <iframe
+    <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}`}
-        allow='accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture'
-        allowFullScreen
-        title='Встроенное видео Youtube'
     />
-    </div>
+  </div>);
-  );
 }
 
 export default EmbedYoutube;

rsconcept/frontend/src/components/Common/FileInput.tsx

@@ -55,8 +55,7 @@ function FileInput({
     <Label
       text={fileName}
     />
-    </div>
+  </div>);
-  );
 }
 
 export default FileInput;

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}`}
+    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>
+  </form>);
-  );
 }
 
 export default Form;

rsconcept/frontend/src/components/Common/Label.tsx

@@ -14,8 +14,7 @@ function Label({ text, tooltip, className, ...restProps }: LabelProps) {
     {...restProps}
   >
     {text}
-    </label>
+  </label>);
-  );
 }
 
 export default Label;

rsconcept/frontend/src/components/Common/LabeledText.tsx

@@ -15,13 +15,10 @@ function LabeledText({ id, label, text, tooltip }: LabeledTextProps) {
     >
       {label}
     </label>
-      <span
+    <span id={id}>
-        id={id}
-      >
       {text}
     </span>
-    </div>
+  </div>);
-  );
 }
 
 export default LabeledText;

rsconcept/frontend/src/components/Common/MiniButton.tsx

@@ -19,8 +19,7 @@ function MiniButton({
     {...restProps}
   >
     {icon}
-    </button>
+  </button>);
-  );
 }
 
 export default MiniButton;

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'>
+      <Overlay position='right-[-1rem] top-2' className='text-disabled'>
-      <div className='absolute right-[-1rem] top-2 text-disabled'>
         <MiniButton
           tooltip='Закрыть диалоговое окно [ESC]'
           icon={<CrossIcon size={5}/>}
           onClick={handleCancel}
         />
-      </div>
+      </Overlay>
-      </div>
       
       {title ? <h1 className='my-2 text-lg select-none'>{title}</h1> : null}
 

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;

rsconcept/frontend/src/components/Common/SelectMulti.tsx

@@ -66,8 +66,7 @@ function SelectMulti<Option, Group extends GroupBase<Option> = GroupBase<Option>
     menuPortalTarget={!noPortal ? document.body : null}
     styles={adjustedStyles}
     {...restProps}
-    />
+  />);
-  );
 }
 
 export default SelectMulti;

rsconcept/frontend/src/components/Common/SelectSingle.tsx

@@ -61,8 +61,7 @@ function SelectSingle<Option, Group extends GroupBase<Option> = GroupBase<Option
     menuPortalTarget={!noPortal ? document.body : null}
     styles={adjustedStyles}
     {...restProps}
-    />
+  />);
-  );
 }
 
 export default SelectSingle;

rsconcept/frontend/src/components/Common/SelectorButton.tsx

@@ -28,8 +28,7 @@ function SelectorButton({
   >
     {icon ? icon : null}
     {text ? <div className={'font-semibold whitespace-nowrap pb-1'}>{text}</div> : null}
-    </button>
+  </button>);
-  );
 }
 
 export default SelectorButton;

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}
   >

rsconcept/frontend/src/components/Common/TextArea.tsx

@@ -31,8 +31,7 @@ function TextArea({
       required={required}
       {...restProps}
     />
-    </div>
+  </div>);
-  );
 }
 
 export default TextArea;

rsconcept/frontend/src/components/Common/TextInput.tsx

@@ -34,8 +34,7 @@ function TextInput({
       className={`px-3 py-2 leading-tight truncate hover:text-clip ${colors} ${outlineClass} ${borderClass} ${dense ? 'w-full' : dimensions}`}
       {...restProps}
     />
-    </div>
+  </div>);
-  );
 }
 
 export default TextInput;

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) {
+function TextURL({ text, href, tooltip, onClick }: TextURLProps) {
+  if (href) {
     return (
-    <Link className='hover:underline text-url' to={href}>
+    <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;

rsconcept/frontend/src/components/Common/Tristate.tsx

@@ -64,8 +64,7 @@ function Tristate({
       text={label}
       htmlFor={id}
     /> : null}
-    </button>
+  </button>);
-  );
 }
 
 export default Tristate;

rsconcept/frontend/src/components/ConceptToaster.tsx

@@ -11,8 +11,7 @@ function ToasterThemed(props: ToasterThemedProps) {
   <ToastContainer
     theme={ darkMode ? 'dark' : 'light'}
     {...props}
-    />
+  />);
-  );
 }
 
 export default ToasterThemed;

rsconcept/frontend/src/components/DataTable/DataTable.tsx

@@ -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 (

rsconcept/frontend/src/components/DataTable/PaginationTools.tsx

@@ -46,7 +46,7 @@ function PaginationTools<TData>({ table, paginationOptions, onChangePaginationOp
       >
         <GotoPrevIcon />
       </button>
-    <input type='text'
+      <input
         title='Номер страницы. Выделите для ручного ввода'
         className='w-6 text-center clr-app'
         value={table.getState().pagination.pageIndex + 1}

rsconcept/frontend/src/components/Footer.tsx

@@ -17,8 +17,7 @@ function Footer() {
       </div>
 
     </div>
-    </footer >
+  </footer>);
-  );
 }
 
 export default Footer;

rsconcept/frontend/src/components/Help/ConstituentaTooltip.tsx

@@ -14,8 +14,7 @@ function ConstituentaTooltip({ data, anchor }: ConstituentaTooltipProps) {
     className='max-w-[25rem] min-w-[25rem]'
   >
     <InfoConstituenta data={data} />
-    </ConceptTooltip>
+  </ConceptTooltip>);
-  );
 }
 
 export default ConstituentaTooltip;

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;

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>

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;

rsconcept/frontend/src/components/Icons.tsx

@@ -14,7 +14,7 @@ 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}
@@ -25,8 +25,7 @@ function IconSVG({ viewbox, size = 6, color, props, children }: IconSVGProps) {
     {...props}
   >
     {children}
-    </svg>
+  </svg>);
-  );
 }
 
 export function MagnifyingGlassIcon({ size, ...props }: IconProps) {

rsconcept/frontend/src/components/Navigation/Logo.tsx

@@ -29,7 +29,6 @@ function Logo() {
       className='max-h-[1.6rem] min-w-[2.2rem]'
       
     /> : null}
-    </Link>
+  </Link>);
-  );
 }
 export default Logo;

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 () {
@@ -15,22 +16,7 @@ function Navigation () {
 
   return (
   <nav className='sticky top-0 left-0 right-0 select-none clr-app z-navigation h-fit'>
-      {noNavigation ?
+    <ToggleNavigationButton noNavigation={noNavigation} toggleNoNavigation={toggleNoNavigation} />
-      <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'>
@@ -58,8 +44,7 @@ function Navigation () {
         <UserMenu />
       </div>
     </div> : null}
-    </nav>
+  </nav>);
-  );
 }
 
 export default Navigation;

rsconcept/frontend/src/components/Navigation/NavigationButton.tsx

@@ -15,8 +15,7 @@ function NavigationButton({ id, icon, description, onClick, text }: NavigationBu
   >
     {icon ? <span>{icon}</span> : null}
     {text ? <span className='font-semibold'>{text}</span> : null}
-    </button>
+  </button>);
-  );
 }
 
 export default NavigationButton;

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;

rsconcept/frontend/src/components/Navigation/UserDropdown.tsx

@@ -41,8 +41,7 @@ function UserDropdown({ hideDropdown }: UserDropdownProps) {
     <DropdownButton onClick={logoutAndRedirect}>
       <b>Выйти...</b>
     </DropdownButton>
-    </Dropdown>
+  </Dropdown>);
-  );
 }
 
 export default UserDropdown;

rsconcept/frontend/src/components/Navigation/UserMenu.tsx

@@ -32,8 +32,7 @@ function UserMenu() {
     <UserDropdown
       hideDropdown={() => menu.hide()}
     /> : null}
-    </div>
+  </div>);
-  );
 }
 
 export default UserMenu;

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;

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';

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}
     />

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';

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'

rsconcept/frontend/src/components/Shared/ConstituentaPicker.tsx

@@ -35,8 +35,8 @@ function ConstituentaPicker({
   onSelectValue
 } : ConstituentaPickerProps) {
   const { colors } = useConceptTheme();
-  const [ filteredData, setFilteredData ] = useState<IConstituenta[]>([]);
+  const [filteredData, setFilteredData] = useState<IConstituenta[]>([]);
-  const [ filterText, setFilterText ] = useState('');
+  const [filterText, setFilterText] = useState('');
 
   useEffect(
   () => {

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'>
+  <Overlay
-  <div className={`absolute px-2 select-none whitespace-nowrap small-caps clr-app ${position}`}>
+    position={`px-2 ${position}`}
+    className='select-none whitespace-nowrap small-caps clr-app'
+  >
     Выбор {selected} из {total}
-  </div>
+  </Overlay>);
-  </div>);
 }
 
 export default SelectedCounter;

rsconcept/frontend/src/context/AuthContext.tsx

@@ -118,6 +118,5 @@ export const AuthState = ({ children }: AuthStateProps) => {
     value={{ user, login, logout, signup, loading, error, setError, updatePassword }}
   >
     {children}
-    </AuthContext.Provider>
+  </AuthContext.Provider>);
-  );
 };

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) => {
@@ -194,7 +194,6 @@ export const LibraryState = ({ children }: LibraryStateProps) => {
     applyFilter, createItem, cloneItem, destroyItem, retrieveTemplate,
     localUpdateItem, localUpdateTimestamp
   }}>
-      { children }
+    {children}
-    </LibraryContext.Provider>
+  </LibraryContext.Provider>);
-  );
 }

rsconcept/frontend/src/context/NagivationContext.tsx

@@ -55,6 +55,5 @@ export const NavigationState = ({ children }: NavigationStateProps) => {
     navigateTo, navigateHistory
   }}>
     {children}
-    </NagivationContext.Provider>
+  </NagivationContext.Provider>);
-  );
 }

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 { type ErrorInfo } from '../components/BackendError';
-import { useRSFormDetails } from '../hooks/useRSFormDetails'
+import { useRSFormDetails } from '../hooks/useRSFormDetails';
-import { ILibraryItem } from '../models/library'
+import { ILibraryItem } from '../models/library';
-import { ILibraryUpdateData } 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'
+  patchResetAliases,   patchUploadTRS,  postClaimLibraryItem, postNewConstituenta, postSubscribe} from '../utils/backendAPI';
-import { useAuth } from './AuthContext'
+import { useAuth } from './AuthContext';
-import { useLibrary } from './LibraryContext'
+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
+  adminMode: boolean
-  toggleReadonly: () => void
+  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(
+    throw new Error('useRSForm has to be used within <RSFormState.Provider>');
-      '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 [adminMode, setAdminMode] = useState(false);
-  const [ isReadonly, setIsReadonly ] = useState(false);
+  const [readerMode, setReaderMode] = useState(false);
-  const [ toggleTracking, setToggleTracking ] = 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(
   () => {
@@ -322,14 +320,13 @@ export const RSFormState = ({ schemaID, children }: RSFormStateProps) => {
   <RSFormContext.Provider value={{
     schema,
     error, loading, processing,
-      adminMode, isReadonly, isOwned, isMutable,
+    adminMode, readerMode, isOwned, isMutable,
     isClaimable, isTracking,
-      toggleForceAdmin: () => setAdminMode(prev => !prev),
-      toggleReadonly: () => setIsReadonly(prev => !prev),
     update, download, upload, claim, resetAliases, subscribe, unsubscribe,
-      cstUpdate, cstCreate, cstRename, cstDelete, cstMoveTo
+    cstUpdate, cstCreate, cstRename, cstDelete, cstMoveTo,
+    toggleAdminMode: () => setAdminMode(prev => !prev),
+    toggleReaderMode: () => setReaderMode(prev => !prev)
   }}>
     { children }
-    </RSFormContext.Provider>
+  </RSFormContext.Provider>);
-  );
 }

rsconcept/frontend/src/context/ThemeContext.tsx

@@ -84,6 +84,5 @@ export const ThemeState = ({ children }: ThemeStateProps) => {
     viewportHeight, mainHeight
   }}>
     {children}
-    </ThemeContext.Provider>
+  </ThemeContext.Provider>);
-  );
 }

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();

rsconcept/frontend/src/context/UsersContext.tsx

@@ -67,6 +67,5 @@ export const UsersState = ({ children }: UsersStateProps) => {
     getUserLabel
   }}>
     { children }
-    </UsersContext.Provider>
+  </UsersContext.Provider>);
-  );
 }

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 Overlay from '../../components/Common/Overlay';
-import { HelpIcon } from '../../components/Icons';
+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,15 +115,17 @@ 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'>
+    <Overlay position='top-0 left-[12.3rem]'>
-      <TabList className='flex border'>
+      <HelpButton topic={HelpTopic.RSTEMPLATES} dimensions='max-w-[35rem]' />
+    </Overlay>
+    
+    <TabList className='flex mb-3 border'>
       <ConceptTab
         label='Шаблон'
         tooltip='Выбор шаблона выражения'
@@ -141,18 +143,6 @@ function DlgConstituentaTemplate({ hideWindow, schema, onCreate, insertAfter }:
       />
     </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>
-    
     <div className='w-full'>
       <TabPanel style={{ display: activeTab === TabID.TEMPLATE ? '': 'none' }}>
         <TemplateTab
@@ -177,7 +167,6 @@ function DlgConstituentaTemplate({ hideWindow, schema, onCreate, insertAfter }:
       </TabPanel>
     </div>
   </Tabs>
-  </div>
   </Modal>);
 }
 

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[]>([]);
 

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]'>

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 Overlay from '../../components/Common/Overlay';
-import { HelpIcon } from '../../components/Icons';
+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,15 +48,17 @@ 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'>
+    <Overlay position='top-0 left-[12.2rem]'>
-      <TabList className='flex border'>
+      <HelpButton topic={HelpTopic.TERM_CONTROL} dimensions='max-w-[38rem]' offset={14} />
+    </Overlay>
+
+    <TabList className='flex mb-3 border'>
       <ConceptTab
         label={labelReferenceType(ReferenceType.ENTITY)}
         tooltip='Отсылка на термин в заданной словоформе'
@@ -69,18 +71,6 @@ function DlgEditReference({ hideWindow, items, initial, onSave }: DlgEditReferen
       />
     </TabList>
     
-      <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>
-    
     <div className='w-full'>
       <TabPanel>
       <EntityTab
@@ -100,7 +90,6 @@ function DlgEditReference({ hideWindow, items, initial, onSave }: DlgEditReferen
       </TabPanel>
     </div>
   </Tabs>
-  </div>
   </Modal>);
 }
 

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 HelpButton from '../components/Help/HelpButton';
-import { ArrowLeftIcon, ArrowRightIcon, CheckIcon, ChevronDoubleDownIcon, CrossIcon, HelpIcon } from '../components/Icons';
+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}

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 justify-center items-center gap-6 w-full min-w-[22rem] my-3'>
-  <div className='flex items-center gap-6'>
     <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>);
 }
 

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 my-2 text-lg text-center'>
-    <div className='w-full text-lg text-center'>
       {!hoverNode ? expression : null}
       {hoverNode ?
       <div>
@@ -86,7 +85,6 @@ function DlgShowAST({ hideWindow, syntaxTree, expression }: DlgShowASTProps) {
       />
     </div>
     </div>
-  </div>
   </Modal>);
 }
 

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';

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';

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';
 

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';

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.

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'>
+    <Overlay position='top-[-2.4rem] right-[-1rem]'>
-    <div className='absolute top-[-2.4rem] right-[-1rem] flex'>
       <input ref={inputRef} type='file'
         style={{ display: 'none' }}
         accept={EXTEOR_TRS_FILE}
@@ -95,10 +95,9 @@ function CreateRSFormPage() {
         icon={<DownloadIcon size={5} color='text-primary'/>}
         onClick={() => inputRef.current?.click()}
       />
-    </div>
+    </Overlay>
-    </div>
-    <div className='flex flex-col gap-3'>
     {fileName ? <Label text={`Загружен файл: ${fileName}`} /> : null}
+
     <TextInput
       label='Полное название'
       placeholder={file && 'Загрузить из файла'}
@@ -137,7 +136,6 @@ function CreateRSFormPage() {
       />
     </div>
     {error ? <BackendError error={error} /> : null}
-    </div>
   </Form>
   </div>
   </RequireAuth>);

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;

rsconcept/frontend/src/pages/LibraryPage/LibraryPage.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useLayoutEffect, useState } from 'react';
 
-import BackendError from '../../components/BackendError'
+import BackendError from '../../components/BackendError';
-import { ConceptLoader } from '../../components/Common/ConceptLoader'
+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 [filter, setFilter] = useState<ILibraryFilter>({});
-  const [ items, setItems ] = useState<ILibraryItem[]>([]);
+  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}
   </>);
 }
 

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 HelpButton from '../../components/Help/HelpButton';
-import { EducationIcon, GroupIcon, HelpIcon,SubscribedIcon } from '../../components/Icons';
 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 handleOpenItem = (item: ILibraryItem) => navigateTo(`/rsforms/${item.id}`);
-
-  const openRSForm = (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 => {
+      cell: props => 
-        const item = props.row.original;
+        <ItemIcons
-        return (<>
+          item={props.row.original}
-          <div
+          user={user}
-            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>
-        </>);
-      },
     }),
     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 className='absolute top-[0.125rem] left-[0.25rem] flex gap-1 ml-3 z-pop'>
-      <div id='library-help' className='py-2 '>
+      <HelpButton
-        <HelpIcon color='text-primary' size={5} />
+        topic={HelpTopic.LIBRARY}
+        dimensions='max-w-[35rem]'
+        offset={0}
+      />
     </div>
-      <ConceptTooltip anchorSelect='#library-help'>
-        <div className='max-w-[35rem]'>
-          <HelpLibrary />
     </div>
-      </ConceptTooltip>
-    </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}>
+          <TextURL text='Очистить фильтр' onClick={cleanQuery} />
-            Очистить фильтр
-          </span>
         </p>
       </div>}
       
-      onRowClicked={openRSForm}
+      onRowClicked={handleOpenItem}
 
       enableSorting
       initialSorting={{

rsconcept/frontend/src/pages/ManualsPage/TopicsList.tsx

@@ -23,8 +23,7 @@ function TopicsList({ activeTopic, onChangeTopic }: TopicsListProps) {
           {labelHelpTopic(topic)}
         </div>);
     })}
-    </div>
+  </div>);
-  );
 }
 
 export default TopicsList;

rsconcept/frontend/src/pages/ManualsPage/ViewTopic.tsx

@@ -1,14 +1,4 @@
-import HelpAPI from '../../components/Help/HelpAPI';
+import InfoTopic from '../../components/Help/InfoTopic';
-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 { 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}
+    <InfoTopic topic={topic}/>
-    {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}
   </div>);
 }
 

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 MiniButton from '../../../components/Common/MiniButton'
+import Overlay from '../../../components/Common/Overlay';
-import HelpConstituenta from '../../../components/Help/HelpConstituenta'
+import HelpButton from '../../../components/Help/HelpButton';
-import { ArrowsRotateIcon, CloneIcon, DiamondIcon, DumpBinIcon, HelpIcon, SaveIcon, SmallPlusIcon } from '../../../components/Icons'
+import { 
+  ArrowsRotateIcon, CloneIcon, DiamondIcon, DumpBinIcon, SaveIcon, SmallPlusIcon
+} from '../../../components/Icons';
+import { HelpTopic } from '../../../models/miscelanious';
 
 interface ConstituentaToolbarProps {
   isMutable: boolean
@@ -25,9 +28,7 @@ function ConstituentaToolbar({
 }: ConstituentaToolbarProps) {
   const canSave = useMemo(() => (isModified && isMutable), [isModified, isMutable]);
   return (
-  <div className='relative w-full'>
+  <Overlay position='right-1/2 translate-x-1/2 top-1 flex items-start'>
-  <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'>
     <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'>
+    <HelpButton topic={HelpTopic.CONSTITUENTA} offset={4} />
-      <HelpIcon color='text-primary' size={5} />
+  </Overlay>);
-    </div>
-    <ConceptTooltip
-      anchorSelect='#cst-help'
-      offset={4}
-    >
-      <HelpConstituenta />
-    </ConceptTooltip>
-  </div>
-  </div>
-  </div>);
 }
 
 export default ConstituentaToolbar;

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'>
+    <Overlay position='top-[-0.2rem] left-[11rem]'>
-      <div className='absolute top-[-0.2rem] left-[11rem]'>
+      <MiniButton noHover
-      <MiniButton
         tooltip='Дерево разбора выражения'
-          noHover
         onClick={handleShowAST}
         icon={<ASTNetworkIcon size={5} color='text-primary' />}
       />
-      </div>
+     </Overlay>
-    </div>
     <RSInput innerref={rsInput}
       value={value}
       minHeight='3.8rem'

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 ?
+  <Overlay position='top-0 left-[3rem]' className='flex justify-start select-none' >
-  <div className='relative'>
-  <div className='absolute top-0 right-[-3rem] w-full 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>
+  </Overlay>
-  </div> : null}
   <form id={id}
     className='flex flex-col gap-3 mt-1'
     onSubmit={handleSubmit}

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>

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 MiniButton from '../../../components/Common/MiniButton'
+import Overlay from '../../../components/Common/Overlay';
-import HelpRSFormMeta from '../../../components/Help/HelpRSFormMeta'
+import HelpButton from '../../../components/Help/HelpButton';
-import { DownloadIcon, DumpBinIcon, HelpIcon, OwnerIcon, SaveIcon, ShareIcon } from '../../../components/Icons'
+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'>
+  <Overlay position='w-full top-1 flex items-start justify-center'>
-  <div className='absolute flex mt-1'>
     <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'>
+    <HelpButton topic={HelpTopic.RSFORM} offset={4} />
-      <HelpIcon color='text-primary' size={5} />
+  </Overlay>);
-    </div>
-    <ConceptTooltip anchorSelect='#rsform-help' offset={4}>
-      <HelpRSFormMeta />
-    </ConceptTooltip>
-  </div>
-  </div>);
 }
 
 export default RSFormToolbar;

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';
 

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 Overlay from '../../../components/Common/Overlay';
-import { ArrowDownIcon, ArrowDropdownIcon, ArrowUpIcon, CloneIcon, DiamondIcon, DumpBinIcon, HelpIcon, SmallPlusIcon, UpdateIcon } from '../../../components/Icons';
+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'>
+  <Overlay position='w-full top-1 flex items-start justify-center'>
-  <div className='absolute flex items-start justify-center w-full top-1'>
     <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'>
+    <HelpButton topic={HelpTopic.CSTLIST} offset={5} />
-      <HelpIcon color='text-primary' size={5} />
+  </Overlay>);
-    </div>
-    <ConceptTooltip anchorSelect='#items-table-help' offset={5}>
-      <HelpRSFormItems />
-    </ConceptTooltip>
-  </div>
-  </div>);
 }
 
 export default RSListToolbar;

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}
+    </Overlay> : null}
     
-    <div className='relative z-pop'>
+    <Overlay position='top-0 left-0 max-w-[13.5rem] min-w-[13.5rem]' className='flex flex-col gap-3'>
-    <div className='absolute top-0 left-0 flex flex-col gap-3 max-w-[13.5rem] min-w-[13.5rem]'>
       <GraphSidebar 
         coloring={coloringScheme}
         layout={layout}
@@ -248,8 +251,7 @@ function EditorTermGraph({ onOpenEdit, onCreateCst, onDeleteCst }: EditorTermGra
         toggleSelection={toggleDismissed}
         onEdit={onOpenEdit}
       />
-    </div>
+    </Overlay>
-    </div>
 
     <TermGraph 
       nodes={nodes}

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}

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 MiniButton from '../../../components/Common/MiniButton'
+import Overlay from '../../../components/Common/Overlay';
-import HelpTermGraph from '../../../components/Help/HelpTermGraph'
+import HelpButton from '../../../components/Help/HelpButton';
-import { ArrowsFocusIcon, DumpBinIcon, FilterIcon, HelpIcon, LetterAIcon, LetterALinesIcon, PlanetIcon, SmallPlusIcon } from '../../../components/Icons'
+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'>
+  <Overlay position='w-full top-1 right-0 flex items-start justify-center'>
-  <div className='absolute right-0 flex items-start justify-center w-full top-1'>
     <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'>
+    <HelpButton topic={HelpTopic.GRAPH_TERM} dimensions='max-w-[calc(100vw-20rem)]' offset={4} />
-      <HelpIcon color='text-primary' size={5} />
+  </Overlay>);
-    </div>
-    <ConceptTooltip anchorSelect='#items-graph-help' offset={4}>
-      <div className='text-sm max-w-[calc(100vw-20rem)]'>
-        <HelpTermGraph />
-      </div>
-    </ConceptTooltip>
-  </div>
-  </div>);
 }
 
 export default GraphToolbar;

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(
   () => {

rsconcept/frontend/src/pages/RSFormPage/RSFormPage.tsx

@@ -8,8 +8,7 @@ function RSFormPage() {
   return (
   <RSFormState schemaID={id ?? ''}>
     <RSTabs />
-    </RSFormState>
+  </RSFormState>);
-  );
 }
 
 export default RSFormPage;

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,
+    isOwned, isMutable, isTracking, readerMode, isClaimable, adminMode,
-    toggleForceAdmin, toggleReadonly, processing
+    toggleAdminMode, toggleReaderMode, processing
   } = useRSForm();
   const schemaMenu = useDropdown();
   const editMenu = useDropdown();
@@ -147,15 +147,15 @@ function RSTabsMenu({
         </DropdownButton>
         {(isOwned || user?.is_staff) ?
         <DropdownCheckbox
-          value={isReadonly}
+          value={readerMode}
-          setValue={toggleReadonly}
+          setValue={toggleReaderMode}
           label='Я — читатель!'
           tooltip='Режим чтения'
         /> : null}
         {user?.is_staff ?
         <DropdownCheckbox
-          value={isForceAdmin}
+          value={adminMode}
-          setValue={toggleForceAdmin}
+          setValue={toggleAdminMode}
           label='Я — администратор!'
           tooltip='Режим редактирования для администраторов'
         /> : null}

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>
+  </form>);
-  </div>);
 }
 
 export default EditorPassword;

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,14 +25,13 @@ 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'>
+        <Overlay position='mt-2 top-0 right-0'>
-          <div className='absolute top-0 right-0 mt-2'>
           <MiniButton
             tooltip='Показать/Скрыть список отслеживаний'
             icon={showSubs
@@ -40,8 +40,7 @@ function UserTabs() {
             }
             onClick={() => setShowSubs(prev => !prev)}
           />
-          </div>
+        </Overlay>
-        </div>
         <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;

rsconcept/frontend/src/utils/codemirror.ts

@@ -2,15 +2,15 @@
  * Module: CodeMirror customizations.
  */
 
-import { syntaxTree } from '@codemirror/language'
+import { syntaxTree } from '@codemirror/language';
-import { NodeType, Tree, TreeCursor } from '@lezer/common'
+import { NodeType, Tree, TreeCursor } from '@lezer/common';
-import { ReactCodeMirrorRef, SelectionRange } from '@uiw/react-codemirror'
+import { ReactCodeMirrorRef, SelectionRange } from '@uiw/react-codemirror';
 
-import { IEntityReference, ISyntacticReference } from '../models/language'
+import { IEntityReference, ISyntacticReference } from '../models/language';
-import { parseGrammemes } from '../models/languageAPI'
+import { parseGrammemes } from '../models/languageAPI';
-import { IConstituenta } from '../models/rsform'
+import { IConstituenta } from '../models/rsform';
-import { colorfgGrammeme,IColorTheme } from './color'
+import { colorfgGrammeme,IColorTheme } from './color';
-import { describeConstituentaTerm, labelCstTypification, labelGrammeme } from './labels'
+import { describeConstituentaTerm, labelCstTypification, labelGrammeme } from './labels';
 
 /**
  * Represents syntax tree node data.

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 { GramData, Grammeme, NounGrams, PartOfSpeech, VerbGrams } from '../models/language';
-import { GraphColoringScheme } from '../models/miscelanious'
+import { GraphColoringScheme } from '../models/miscelanious';
-import { CstClass, ExpressionStatus, IConstituenta } from '../models/rsform'
+import { CstClass, ExpressionStatus, IConstituenta } from '../models/rsform';
-import { ISyntaxTreeNode, TokenID } from '../models/rslang'
+import { ISyntaxTreeNode, TokenID } from '../models/rslang';
 
 
 /**

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 'ЧР: сущ';