F: Improve Help UI for dialogs

2025-06-26 04:50:36 +03:00 · 2024-10-29 12:06:43 +03:00 · 2024-10-29 12:06:43 +03:00 · 8d5ce8b0cf
commit 8d5ce8b0cf
parent 9761cc2c9d
21 changed files with 78 additions and 86 deletions
--- a/rsconcept/frontend/src/components/Icons.tsx
+++ b/rsconcept/frontend/src/components/Icons.tsx
@ -40,7 +40,7 @@ export { LuFolderEdit     as IconFolderEdit }     from 'react-icons/lu';
 export { LuFolderOpen     as IconFolderOpened }   from 'react-icons/lu';
 export { LuFolderClosed   as IconFolderClosed }   from 'react-icons/lu';
 export { LuFolderDot      as IconFolderEmpty }    from 'react-icons/lu';
-export { LuLightbulb      as IconHelp }           from 'react-icons/lu';
+export { TbHelpOctagon    as IconHelp }           from 'react-icons/tb';
 export { LuLightbulbOff   as IconHelpOff }        from 'react-icons/lu';
 export { RiPushpinFill    as IconPin }            from 'react-icons/ri';
 export { RiUnpinLine      as IconUnpin }          from 'react-icons/ri';
--- a/rsconcept/frontend/src/components/info/BadgeHelp.tsx
+++ b/rsconcept/frontend/src/components/info/BadgeHelp.tsx
@ -1,5 +1,3 @@
-import clsx from 'clsx';
-
 import TextURL from '@/components/ui/TextURL';
 import Tooltip, { PlacesType } from '@/components/ui/Tooltip';
 import { useConceptOptions } from '@/context/ConceptOptionsContext';
@ -16,14 +14,14 @@ interface BadgeHelpProps extends CProps.Styling {
  place?: PlacesType;
 }

-function BadgeHelp({ topic, padding, ...restProps }: BadgeHelpProps) {
+function BadgeHelp({ topic, padding = 'p-1', ...restProps }: BadgeHelpProps) {
  const { showHelp } = useConceptOptions();

  if (!showHelp) {
    return null;
  }
  return (
-    <div tabIndex={-1} id={`help-${topic}`} className={clsx('p-1', padding)}>
+    <div tabIndex={-1} id={`help-${topic}`} className={padding}>
      <IconHelp size='1.25rem' className='icon-primary' />
      <Tooltip clickable anchorSelect={`#help-${topic}`} layer='z-modalTooltip' {...restProps}>
        <div className='relative' onClick={event => event.stopPropagation()}>
--- a/rsconcept/frontend/src/components/select/PickConstituenta.tsx
+++ b/rsconcept/frontend/src/components/select/PickConstituenta.tsx
@ -92,7 +92,7 @@ function PickConstituenta({
    <div className='border divide-y'>
      <SearchBar
        id={id ? `${id}__search` : undefined}
-        className='clr-input'
+        className='clr-input rounded-t-md'
        noBorder
        value={filterText}
        onChange={newValue => setFilterText(newValue)}
--- a/rsconcept/frontend/src/components/ui/Modal.tsx
+++ b/rsconcept/frontend/src/components/ui/Modal.tsx
@ -5,10 +5,13 @@ import { motion } from 'framer-motion';
 import { useRef } from 'react';

 import useEscapeKey from '@/hooks/useEscapeKey';
+import { HelpTopic } from '@/models/miscellaneous';
 import { animateModal } from '@/styling/animations';
+import { PARAMETER } from '@/utils/constants';
 import { prepareTooltip } from '@/utils/labels';

 import { IconClose } from '../Icons';
+import BadgeHelp from '../info/BadgeHelp';
 import { CProps } from '../props';
 import Button from './Button';
 import MiniButton from './MiniButton';
@ -27,21 +30,30 @@ export interface ModalProps extends CProps.Styling {
  beforeSubmit?: () => boolean;
  onSubmit?: () => void;
  onCancel?: () => void;
+
+  helpTopic?: HelpTopic;
+  hideHelpWhen?: () => boolean;
 }

 function Modal({
+  children,
+
  header,
+  submitText = 'Продолжить',
+  submitInvalidTooltip,
+
+  readonly,
+  canSubmit,
+  overflowVisible,
+
  hideWindow,
  beforeSubmit,
  onSubmit,
-  readonly,
  onCancel,
-  canSubmit,
-  submitInvalidTooltip,
  className,
-  children,
-  overflowVisible,
-  submitText = 'Продолжить',
+
+  helpTopic,
+  hideHelpWhen,
  ...restProps
 }: React.PropsWithChildren<ModalProps>) {
  const ref = useRef(null);
@ -61,7 +73,7 @@ function Modal({
  };

  return (
-    <div className='fixed top-0 left-0 w-full h-full z-modal'>
+    <div className='fixed top-0 left-0 w-full h-full z-modal cursor-default'>
      <div className={clsx('z-navigation', 'fixed top-0 left-0', 'w-full h-full', 'cc-modal-blur')} />
      <div className={clsx('z-navigation', 'fixed top-0 left-0', 'w-full h-full', 'cc-modal-backdrop')} />
      <motion.div
@ -85,6 +97,11 @@ function Modal({
            onClick={handleCancel}
          />
        </Overlay>
+        {helpTopic && !hideHelpWhen?.() ? (
+          <Overlay position='left-2 top-2'>
+            <BadgeHelp topic={helpTopic} className={clsx(PARAMETER.TOOLTIP_WIDTH, 'sm:max-w-[40rem]')} padding='p-0' />
+          </Overlay>
+        ) : null}

        {header ? <h1 className='px-12 py-2 select-none'>{header}</h1> : null}

--- a/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/DlgConstituentaTemplate.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/DlgConstituentaTemplate.tsx
@ -4,9 +4,7 @@ import clsx from 'clsx';
 import { useLayoutEffect, useMemo, useState } from 'react';
 import { TabList, TabPanel, Tabs } from 'react-tabs';

-import BadgeHelp from '@/components/info/BadgeHelp';
 import Modal, { ModalProps } from '@/components/ui/Modal';
-import Overlay from '@/components/ui/Overlay';
 import TabLabel from '@/components/ui/TabLabel';
 import AnimateFade from '@/components/wrap/AnimateFade';
 import { useLibrary } from '@/context/LibraryContext';
@ -15,7 +13,6 @@ import { HelpTopic } from '@/models/miscellaneous';
 import { CstType, ICstCreateData, IRSForm } from '@/models/rsform';
 import { generateAlias, validateNewAlias } from '@/models/rsformAPI';
 import { inferTemplatedType, substituteTemplateArgs } from '@/models/rslangAPI';
-import { PARAMETER } from '@/utils/constants';
 import { prompts } from '@/utils/labels';

 import FormCreateCst from '../DlgCreateCst/FormCreateCst';
@ -165,14 +162,8 @@ function DlgConstituentaTemplate({ hideWindow, schema, onCreate, insertAfter }:
      canSubmit={validated}
      beforeSubmit={handlePrompt}
      onSubmit={handleSubmit}
+      helpTopic={HelpTopic.RSL_TEMPLATES}
    >
-      <Overlay position='top-0 right-[5.9rem]'>
-        <BadgeHelp
-          topic={HelpTopic.RSL_TEMPLATES}
-          className={clsx(PARAMETER.TOOLTIP_WIDTH, 'sm:max-w-[40rem]')}
-          offset={12}
-        />
-      </Overlay>
      <Tabs
        selectedTabClassName='clr-selected'
        className='flex flex-col'
--- a/rsconcept/frontend/src/dialogs/DlgCreateOperation/DlgCreateOperation.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgCreateOperation/DlgCreateOperation.tsx
@ -4,15 +4,12 @@ import clsx from 'clsx';
 import { useCallback, useLayoutEffect, useMemo, useState } from 'react';
 import { TabList, TabPanel, Tabs } from 'react-tabs';

-import BadgeHelp from '@/components/info/BadgeHelp';
 import Modal from '@/components/ui/Modal';
-import Overlay from '@/components/ui/Overlay';
 import TabLabel from '@/components/ui/TabLabel';
 import { useLibrary } from '@/context/LibraryContext';
 import { LibraryItemID } from '@/models/library';
 import { HelpTopic } from '@/models/miscellaneous';
 import { IOperationCreateData, IOperationSchema, OperationID, OperationType } from '@/models/oss';
-import { PARAMETER } from '@/utils/constants';
 import { describeOperationType, labelOperationType } from '@/utils/labels';

 import TabInputOperation from './TabInputOperation';
@ -148,11 +145,8 @@ function DlgCreateOperation({ hideWindow, oss, onCreate, initialInputs }: DlgCre
      canSubmit={isValid}
      onSubmit={handleSubmit}
      className='w-[40rem] px-6 h-[32rem]'
+      helpTopic={HelpTopic.CC_OSS}
    >
-      <Overlay position='top-0 right-0'>
-        <BadgeHelp topic={HelpTopic.CC_OSS} className={clsx(PARAMETER.TOOLTIP_WIDTH, 'sm:max-w-[40rem]')} offset={14} />
-      </Overlay>
-
      <Tabs
        selectedTabClassName='clr-selected'
        className='flex flex-col pt-2'
--- a/rsconcept/frontend/src/dialogs/DlgDeleteOperation.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgDeleteOperation.tsx
@ -3,14 +3,11 @@
 import clsx from 'clsx';
 import { useState } from 'react';

-import BadgeHelp from '@/components/info/BadgeHelp';
 import Checkbox from '@/components/ui/Checkbox';
 import Modal, { ModalProps } from '@/components/ui/Modal';
-import Overlay from '@/components/ui/Overlay';
 import TextInput from '@/components/ui/TextInput';
 import { HelpTopic } from '@/models/miscellaneous';
 import { IOperation } from '@/models/oss';
-import { PARAMETER } from '@/utils/constants';

 interface DlgDeleteOperationProps extends Pick<ModalProps, 'hideWindow'> {
  target: IOperation;
@ -34,15 +31,8 @@ function DlgDeleteOperation({ hideWindow, target, onSubmit }: DlgDeleteOperation
      canSubmit={true}
      onSubmit={handleSubmit}
      className={clsx('w-[35rem]', 'pb-3 px-6 cc-column', 'select-none')}
+      helpTopic={HelpTopic.CC_PROPAGATION}
    >
-      <Overlay position='top-[-2rem] right-[4rem]'>
-        <BadgeHelp
-          topic={HelpTopic.CC_PROPAGATION}
-          className={clsx(PARAMETER.TOOLTIP_WIDTH, 'sm:max-w-[40rem]')}
-          offset={14}
-        />
-      </Overlay>
-
      <TextInput disabled dense noBorder id='operation_alias' label='Операция' value={target.alias} />
      <Checkbox
        label='Сохранить наследованные конституенты'
--- a/rsconcept/frontend/src/dialogs/DlgEditOperation/DlgEditOperation.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgEditOperation/DlgEditOperation.tsx
@ -4,9 +4,7 @@ import clsx from 'clsx';
 import { useCallback, useLayoutEffect, useMemo, useState } from 'react';
 import { TabList, TabPanel, Tabs } from 'react-tabs';

-import BadgeHelp from '@/components/info/BadgeHelp';
 import Modal from '@/components/ui/Modal';
-import Overlay from '@/components/ui/Overlay';
 import TabLabel from '@/components/ui/TabLabel';
 import useRSFormCache from '@/hooks/useRSFormCache';
 import { HelpTopic } from '@/models/miscellaneous';
@ -19,7 +17,6 @@ import {
  OperationType
 } from '@/models/oss';
 import { SubstitutionValidator } from '@/models/ossAPI';
-import { PARAMETER } from '@/utils/constants';

 import TabArguments from './TabArguments';
 import TabOperation from './TabOperation';
@ -195,11 +192,9 @@ function DlgEditOperation({ hideWindow, oss, target, onSubmit }: DlgEditOperatio
      canSubmit={canSubmit}
      onSubmit={handleSubmit}
      className='w-[40rem] px-6 h-[32rem]'
+      helpTopic={HelpTopic.UI_SUBSTITUTIONS}
+      hideHelpWhen={() => activeTab !== TabID.SUBSTITUTION}
    >
-      <Overlay position='top-0 right-0'>
-        <BadgeHelp topic={HelpTopic.CC_OSS} className={clsx(PARAMETER.TOOLTIP_WIDTH, 'sm:max-w-[40rem]')} offset={14} />
-      </Overlay>
-
      <Tabs
        selectedTabClassName='clr-selected'
        className='flex flex-col'
--- a/rsconcept/frontend/src/dialogs/DlgEditReference/DlgEditReference.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgEditReference/DlgEditReference.tsx
@ -4,14 +4,11 @@ import clsx from 'clsx';
 import { useMemo, useState } from 'react';
 import { TabList, TabPanel, Tabs } from 'react-tabs';

-import BadgeHelp from '@/components/info/BadgeHelp';
 import Modal from '@/components/ui/Modal';
-import Overlay from '@/components/ui/Overlay';
 import TabLabel from '@/components/ui/TabLabel';
 import { ReferenceType } from '@/models/language';
 import { HelpTopic } from '@/models/miscellaneous';
 import { IRSForm } from '@/models/rsform';
-import { PARAMETER } from '@/utils/constants';
 import { labelReferenceType } from '@/utils/labels';

 import TabEntityReference from './TabEntityReference';
@ -71,15 +68,8 @@ function DlgEditReference({ hideWindow, schema, initial, onSave }: DlgEditRefere
      canSubmit={isValid}
      onSubmit={handleSubmit}
      className='w-[40rem] px-6 h-[32rem]'
+      helpTopic={HelpTopic.TERM_CONTROL}
    >
-      <Overlay position='top-0 right-0'>
-        <BadgeHelp
-          topic={HelpTopic.TERM_CONTROL}
-          className={clsx(PARAMETER.TOOLTIP_WIDTH, 'sm:max-w-[40rem]')}
-          offset={14}
-        />
-      </Overlay>
-
      <Tabs
        selectedTabClassName='clr-selected'
        className='flex flex-col'
--- a/rsconcept/frontend/src/dialogs/DlgEditWordForms/DlgEditWordForms.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgEditWordForms/DlgEditWordForms.tsx
@ -4,19 +4,16 @@ import clsx from 'clsx';
 import { useLayoutEffect, useState } from 'react';

 import { IconAccept, IconMoveDown, IconMoveLeft, IconMoveRight, IconRemove } from '@/components/Icons';
-import BadgeHelp from '@/components/info/BadgeHelp';
 import SelectMultiGrammeme from '@/components/select/SelectMultiGrammeme';
 import Label from '@/components/ui/Label';
 import MiniButton from '@/components/ui/MiniButton';
 import Modal from '@/components/ui/Modal';
-import Overlay from '@/components/ui/Overlay';
 import TextArea from '@/components/ui/TextArea';
 import useConceptText from '@/hooks/useConceptText';
 import { Grammeme, ITextRequest, IWordForm, IWordFormPlain } from '@/models/language';
 import { parseGrammemes, wordFormEquals } from '@/models/languageAPI';
 import { HelpTopic } from '@/models/miscellaneous';
 import { IConstituenta, TermForm } from '@/models/rsform';
-import { PARAMETER } from '@/utils/constants';
 import { prompts } from '@/utils/labels';
 import { IGrammemeOption, SelectorGrammemes, SelectorGrammemesList } from '@/utils/selectors';

@ -130,15 +127,8 @@ function DlgEditWordForms({ hideWindow, target, onSave }: DlgEditWordFormsProps)
      submitText='Сохранить'
      onSubmit={handleSubmit}
      className='flex flex-col w-[40rem] px-6'
+      helpTopic={HelpTopic.TERM_CONTROL}
    >
-      <Overlay position='top-[-0.2rem] left-[8rem]'>
-        <BadgeHelp
-          topic={HelpTopic.TERM_CONTROL}
-          className={clsx(PARAMETER.TOOLTIP_WIDTH, 'sm:max-w-[40rem]')}
-          offset={3}
-        />
-      </Overlay>
-
      <TextArea
        disabled
        spellCheck
--- a/rsconcept/frontend/src/dialogs/DlgRelocateConstituents.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgRelocateConstituents.tsx
@ -12,6 +12,7 @@ import DataLoader from '@/components/wrap/DataLoader';
 import { useLibrary } from '@/context/LibraryContext';
 import useRSFormDetails from '@/hooks/useRSFormDetails';
 import { ILibraryItem, LibraryItemID } from '@/models/library';
+import { HelpTopic } from '@/models/miscellaneous';
 import { ICstRelocateData, IOperation, IOperationSchema } from '@/models/oss';
 import { getRelocateCandidates } from '@/models/ossAPI';
 import { ConstituentaID } from '@/models/rsform';
@ -85,12 +86,13 @@ function DlgRelocateConstituents({ oss, hideWindow, initialTarget, onSubmit }: D

  return (
    <Modal
-      header='Перемещение конституент'
+      header='Перенос конституент'
      submitText='Переместить'
      hideWindow={hideWindow}
      canSubmit={isValid}
      onSubmit={handleSubmit}
      className={clsx('w-[40rem] h-[33rem]', 'py-3 px-6')}
+      helpTopic={HelpTopic.UI_RELOCATE_CST}
    >
      <div className='flex flex-col border'>
        <div className='flex gap-1 items-center clr-input border-b rounded-t-md'>
--- a/rsconcept/frontend/src/dialogs/DlgRenameCst.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgRenameCst.tsx
@ -3,7 +3,6 @@
 import clsx from 'clsx';
 import { useLayoutEffect, useState } from 'react';

-import BadgeHelp from '@/components/info/BadgeHelp';
 import Modal, { ModalProps } from '@/components/ui/Modal';
 import SelectSingle from '@/components/ui/SelectSingle';
 import TextInput from '@/components/ui/TextInput';
@ -12,7 +11,6 @@ import usePartialUpdate from '@/hooks/usePartialUpdate';
 import { HelpTopic } from '@/models/miscellaneous';
 import { CstType, ICstRenameData } from '@/models/rsform';
 import { generateAlias, validateNewAlias } from '@/models/rsformAPI';
-import { PARAMETER } from '@/utils/constants';
 import { labelCstType } from '@/utils/labels';
 import { SelectorCstType } from '@/utils/selectors';

@ -48,6 +46,7 @@ function DlgRenameCst({ hideWindow, initial, allowChangeType, onRename }: DlgRen
      canSubmit={validated}
      onSubmit={() => onRename(cstData)}
      className={clsx('w-[30rem]', 'py-6 pr-3 pl-6 flex gap-3 justify-center items-center ')}
+      helpTopic={HelpTopic.CC_CONSTITUENTA}
    >
      <SelectSingle
        id='dlg_cst_type'
@ -70,11 +69,6 @@ function DlgRenameCst({ hideWindow, initial, allowChangeType, onRename }: DlgRen
        value={cstData.alias}
        onChange={event => updateData({ alias: event.target.value })}
      />
-      <BadgeHelp
-        topic={HelpTopic.CC_CONSTITUENTA}
-        offset={16}
-        className={clsx(PARAMETER.TOOLTIP_WIDTH, 'sm:max-w-[40rem]')}
-      />
    </Modal>
  );
 }
--- a/rsconcept/frontend/src/dialogs/DlgShowAST.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgShowAST.tsx
@ -2,7 +2,6 @@

 import { useCallback, useMemo, useState } from 'react';

-import BadgeHelp from '@/components/info/BadgeHelp';
 import GraphUI, { GraphEdge, GraphNode } from '@/components/ui/GraphUI';
 import Modal, { ModalProps } from '@/components/ui/Modal';
 import Overlay from '@/components/ui/Overlay';
@ -11,7 +10,7 @@ import { HelpTopic } from '@/models/miscellaneous';
 import { SyntaxTree } from '@/models/rslang';
 import { graphDarkT, graphLightT } from '@/styling/color';
 import { colorBgSyntaxTree } from '@/styling/color';
-import { PARAMETER, resources } from '@/utils/constants';
+import { resources } from '@/utils/constants';
 import { labelSyntaxTree } from '@/utils/labels';

 interface DlgShowASTProps extends Pick<ModalProps, 'hideWindow'> {
@ -57,10 +56,8 @@ function DlgShowAST({ hideWindow, syntaxTree, expression }: DlgShowASTProps) {
      readonly
      hideWindow={hideWindow}
      className='flex flex-col justify-stretch w-[calc(100dvw-3rem)] h-[calc(100dvh-6rem)]'
+      helpTopic={HelpTopic.UI_FORMULA_TREE}
    >
-      <Overlay position='left-[0.5rem] top-[0.25rem]'>
-        <BadgeHelp topic={HelpTopic.UI_FORMULA_TREE} className={PARAMETER.TOOLTIP_WIDTH} />
-      </Overlay>
      <Overlay
        position='top-2 right-1/2 translate-x-1/2'
        className='px-2 py-1 rounded-2xl cc-blur max-w-[60ch] text-lg text-center'
--- a/rsconcept/frontend/src/dialogs/DlgSubstituteCst.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgSubstituteCst.tsx
@ -5,6 +5,7 @@ import { useMemo, useState } from 'react';

 import PickSubstitutions from '@/components/select/PickSubstitutions';
 import Modal, { ModalProps } from '@/components/ui/Modal';
+import { HelpTopic } from '@/models/miscellaneous';
 import { ICstSubstitute, ICstSubstituteData } from '@/models/oss';
 import { IRSForm } from '@/models/rsform';
 import { prefixes } from '@/utils/constants';
@ -35,6 +36,7 @@ function DlgSubstituteCst({ hideWindow, onSubstitute, schema }: DlgSubstituteCst
      canSubmit={canSubmit}
      onSubmit={handleSubmit}
      className={clsx('w-[40rem]', 'px-6 pb-3')}
+      helpTopic={HelpTopic.UI_SUBSTITUTIONS}
    >
      <PickSubstitutions
        allowSelfSubstitution
--- a/rsconcept/frontend/src/models/miscellaneous.ts
+++ b/rsconcept/frontend/src/models/miscellaneous.ts
@ -74,6 +74,8 @@ export enum HelpTopic {
  UI_CST_STATUS = 'ui-rsform-cst-status',
  UI_CST_CLASS = 'ui-rsform-cst-class',
  UI_OSS_GRAPH = 'ui-oss-graph',
+  UI_SUBSTITUTIONS = 'ui-substitutions',
+  UI_RELOCATE_CST = 'ui-relocate-cst',

  CONCEPTUAL = 'concept',
  CC_SYSTEM = 'concept-rsform',
@ -122,6 +124,8 @@ export const topicParent = new Map<HelpTopic, HelpTopic>([
  [HelpTopic.UI_CST_STATUS, HelpTopic.INTERFACE],
  [HelpTopic.UI_CST_CLASS, HelpTopic.INTERFACE],
  [HelpTopic.UI_OSS_GRAPH, HelpTopic.INTERFACE],
+  [HelpTopic.UI_SUBSTITUTIONS, HelpTopic.INTERFACE],
+  [HelpTopic.UI_RELOCATE_CST, HelpTopic.INTERFACE],

  [HelpTopic.CONCEPTUAL, HelpTopic.CONCEPTUAL],
  [HelpTopic.CC_SYSTEM, HelpTopic.CONCEPTUAL],
--- a/rsconcept/frontend/src/pages/ManualsPage/TopicPage.tsx
+++ b/rsconcept/frontend/src/pages/ManualsPage/TopicPage.tsx
@ -31,11 +31,13 @@ import HelpCstStatus from './items/ui/HelpCstStatus';
 import HelpFormulaTree from './items/ui/HelpFormulaTree';
 import HelpLibrary from './items/ui/HelpLibrary';
 import HelpOssGraph from './items/ui/HelpOssGraph';
+import HelpRelocateCst from './items/ui/HelpRelocateCst';
 import HelpRSCard from './items/ui/HelpRSCard';
 import HelpRSEditor from './items/ui/HelpRSEditor';
 import HelpRSGraphTerm from './items/ui/HelpRSGraphTerm';
 import HelpRSList from './items/ui/HelpRSList';
 import HelpRSMenu from './items/ui/HelpRSMenu';
+import HelpSubstitutions from './items/ui/HelpSubstitutions';

 // PDF Viewer setup
 const OFFSET_X_SMALL = 32;
@ -65,6 +67,8 @@ function TopicPage({ topic }: TopicPageProps) {
  if (topic === HelpTopic.UI_CST_STATUS) return <HelpCstStatus />;
  if (topic === HelpTopic.UI_CST_CLASS) return <HelpCstClass />;
  if (topic === HelpTopic.UI_OSS_GRAPH) return <HelpOssGraph />;
+  if (topic === HelpTopic.UI_SUBSTITUTIONS) return <HelpSubstitutions />;
+  if (topic === HelpTopic.UI_RELOCATE_CST) return <HelpRelocateCst />;

  if (topic === HelpTopic.CONCEPTUAL) return <HelpConcept />;
  if (topic === HelpTopic.CC_SYSTEM) return <HelpConceptSystem />;
--- a/rsconcept/frontend/src/pages/ManualsPage/items/ui/HelpRelocateCst.tsx
+++ b/rsconcept/frontend/src/pages/ManualsPage/items/ui/HelpRelocateCst.tsx
@ -0,0 +1,10 @@
+function HelpRelocateCst() {
+  return (
+    <div className='text-justify'>
+      <h1>Перенос конституент</h1>
+      <p>Раздел в разработке...</p>
+    </div>
+  );
+}
+
+export default HelpRelocateCst;
--- a/rsconcept/frontend/src/pages/ManualsPage/items/ui/HelpSubstitutions.tsx
+++ b/rsconcept/frontend/src/pages/ManualsPage/items/ui/HelpSubstitutions.tsx
@ -0,0 +1,10 @@
+function HelpSubstitutions() {
+  return (
+    <div className='text-justify'>
+      <h1>Таблица отождествлений</h1>
+      <p>Раздел в разработке...</p>
+    </div>
+  );
+}
+
+export default HelpSubstitutions;
--- a/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/NodeContextMenu.tsx
+++ b/rsconcept/frontend/src/pages/OssPage/EditorOssGraph/NodeContextMenu.tsx
@ -174,7 +174,7 @@ function NodeContextMenu({
        {controller.isMutable && operation.result ? (
          <DropdownButton
            text='Конституенты'
-            titleHtml='Перемещение конституент</br>между схемами'
+            titleHtml='Перенос конституент</br>между схемами'
            icon={<IconChild size='1rem' className='icon-green' />}
            disabled={controller.isProcessing}
            onClick={handleRelocateConstituents}
--- a/rsconcept/frontend/src/pages/OssPage/MenuOssTabs.tsx
+++ b/rsconcept/frontend/src/pages/OssPage/MenuOssTabs.tsx
@ -135,7 +135,7 @@ function MenuOssTabs({ onDestroy }: MenuOssTabsProps) {
          <Dropdown isOpen={editMenu.isOpen}>
            <DropdownButton
              text='Конституенты'
-              titleHtml='Перемещение конституент</br>между схемами'
+              titleHtml='Перенос конституент</br>между схемами'
              icon={<IconChild size='1rem' className='icon-green' />}
              disabled={controller.isProcessing}
              onClick={handleRelocate}
--- a/rsconcept/frontend/src/utils/labels.ts
+++ b/rsconcept/frontend/src/utils/labels.ts
@ -377,6 +377,8 @@ export function labelHelpTopic(topic: HelpTopic): string {
    case HelpTopic.UI_CST_STATUS:   return 'Статус конституенты';
    case HelpTopic.UI_CST_CLASS:    return 'Класс конституенты';
    case HelpTopic.UI_OSS_GRAPH:    return 'Граф синтеза';
+    case HelpTopic.UI_SUBSTITUTIONS:return 'Отождествления';
+    case HelpTopic.UI_RELOCATE_CST: return 'Перенос конституент';

    case HelpTopic.CONCEPTUAL:      return '♨️ Концептуализация';
    case HelpTopic.CC_SYSTEM:       return 'Система определений';
@ -428,6 +430,8 @@ export function describeHelpTopic(topic: HelpTopic): string {
    case HelpTopic.UI_CST_STATUS:   return 'нотация статуса конституенты';
    case HelpTopic.UI_CST_CLASS:    return 'нотация класса конституенты';
    case HelpTopic.UI_OSS_GRAPH:    return 'графическая форма <br/>операционной схемы синтеза';
+    case HelpTopic.UI_SUBSTITUTIONS:return 'таблица отождествлений конституент';
+    case HelpTopic.UI_RELOCATE_CST: return 'перенос конституент<br/>в рамках ОСС';

    case HelpTopic.CONCEPTUAL:      return 'основы концептуализации';
    case HelpTopic.CC_SYSTEM:       return 'концептуальная схема <br/>как система понятий';
@ -435,7 +439,7 @@ export function describeHelpTopic(topic: HelpTopic): string {
    case HelpTopic.CC_RELATIONS:    return 'отношения между конституентами';
    case HelpTopic.CC_SYNTHESIS:    return 'операция синтеза концептуальных схем';
    case HelpTopic.CC_OSS:          return 'операционная схема синтеза';
-    case HelpTopic.CC_PROPAGATION:  return 'протаскивание изменений в ОСС';
+    case HelpTopic.CC_PROPAGATION:  return 'сквозные изменения в ОСС';

    case HelpTopic.RSLANG:          return 'экспликация и язык родов структур';
    case HelpTopic.RSL_TYPES:       return 'система типов в <br/>родоструктурной экспликации';