From eab63814d5492f7774bb8642df729c24f17cdf81 Mon Sep 17 00:00:00 2001
From: IRBorisov <8611739+IRBorisov@users.noreply.github.com>
Date: Thu, 7 Dec 2023 01:21:27 +0300
Subject: [PATCH] Refactor and optimize dialogs

---
 .../frontend/src/components/Common/Label.tsx  |  2 +-
 .../frontend/src/components/Common/Modal.tsx  | 24 ++++---
 .../src/components/Common/SelectMulti.tsx     |  3 +-
 .../src/components/Common/SelectSingle.tsx    |  3 +-
 .../src/components/RSInput/RSInput.tsx        |  4 +-
 .../src/dialogs/DlgCloneLibraryItem.tsx       |  3 +-
 .../DlgConstituentaTemplate.tsx               | 38 +++++-----
 .../frontend/src/dialogs/DlgCreateCst.tsx     | 25 ++++---
 .../frontend/src/dialogs/DlgDeleteCst.tsx     | 69 -------------------
 .../dialogs/DlgDeleteCst/ConstituentsList.tsx | 31 +++++++++
 .../src/dialogs/DlgDeleteCst/DlgDeleteCst.tsx | 57 +++++++++++++++
 .../src/dialogs/DlgDeleteCst/index.tsx        |  1 +
 .../DlgEditReference/DlgEditReference.tsx     | 30 ++++----
 .../DlgEditReference/WordformButton.tsx       | 17 +++--
 .../frontend/src/dialogs/DlgEditWordForms.tsx | 12 ++--
 .../frontend/src/dialogs/DlgGraphParams.tsx   |  7 +-
 .../frontend/src/dialogs/DlgRenameCst.tsx     |  3 +-
 rsconcept/frontend/src/dialogs/DlgShowAST.tsx |  4 +-
 .../frontend/src/dialogs/DlgUploadRSForm.tsx  | 26 +++----
 .../frontend/src/pages/RSFormPage/RSTabs.tsx  |  1 +
 20 files changed, 196 insertions(+), 164 deletions(-)
 delete mode 100644 rsconcept/frontend/src/dialogs/DlgDeleteCst.tsx
 create mode 100644 rsconcept/frontend/src/dialogs/DlgDeleteCst/ConstituentsList.tsx
 create mode 100644 rsconcept/frontend/src/dialogs/DlgDeleteCst/DlgDeleteCst.tsx
 create mode 100644 rsconcept/frontend/src/dialogs/DlgDeleteCst/index.tsx

diff --git a/rsconcept/frontend/src/components/Common/Label.tsx b/rsconcept/frontend/src/components/Common/Label.tsx
index 6168f516..d6b8c12b 100644
--- a/rsconcept/frontend/src/components/Common/Label.tsx
+++ b/rsconcept/frontend/src/components/Common/Label.tsx
@@ -9,7 +9,7 @@ extends Omit<React.DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTML
 function Label({ text, tooltip, className, ...restProps }: LabelProps) {
   return (
   <label
-    className={`text-sm font-semibold ${className} whitespace-nowrap`}
+    className={`text-sm font-semibold whitespace-nowrap ${className}`}
     title={tooltip}
     {...restProps}
   >
diff --git a/rsconcept/frontend/src/components/Common/Modal.tsx b/rsconcept/frontend/src/components/Common/Modal.tsx
index 29d7e8bd..b3364017 100644
--- a/rsconcept/frontend/src/components/Common/Modal.tsx
+++ b/rsconcept/frontend/src/components/Common/Modal.tsx
@@ -16,12 +16,13 @@ export interface ModalProps {
   onSubmit?: () => void
   onCancel?: () => void
   children: React.ReactNode
+  className?: string
 }
 
 function Modal({ 
   title, hideWindow, onSubmit,
   readonly, onCancel, canSubmit,
-  submitInvalidTooltip,
+  submitInvalidTooltip, className,
   children,
   submitText = 'Продолжить'
 }: ModalProps) {
@@ -42,9 +43,9 @@ function Modal({
   <>
     <div className='fixed top-0 left-0 w-full h-full z-navigation clr-modal-backdrop' />
     <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'
+      className='fixed -translate-x-1/2 translate-y-1/2 border shadow-md bottom-1/2 left-1/2 z-modal clr-app'
     >
-      <Overlay position='right-[-1rem] top-2' className='text-disabled'>
+      <Overlay position='right-[0.3rem] top-2' className='text-disabled'>
         <MiniButton
           tooltip='Закрыть диалоговое окно [ESC]'
           icon={<CrossIcon size={5}/>}
@@ -52,25 +53,32 @@ function Modal({
         />
       </Overlay>
       
-      {title ? <h1 className='my-2 text-lg select-none'>{title}</h1> : null}
+      {title ? <h1 className='px-12 py-2 text-lg select-none'>{title}</h1> : null}
 
-      <div className='max-h-[calc(100vh-8rem)] overflow-auto flex flex-col justify-start '>
+      <div
+        className={`w-full h-fit ${className}`}
+        style={{
+          maxHeight: 'calc(100vh - 8rem)',
+          maxWidth: 'calc(100vw - 2rem)',
+          overflow: 'auto'
+        }}
+      >
         {children}
       </div>
 
-      <div className='flex justify-center w-full gap-6 my-3 z-modal-controls'>
+      <div className='flex justify-center w-full gap-12 px-6 py-3 z-modal-controls min-w-fit'>
         {!readonly ? 
         <Button autoFocus
           text={submitText}
           tooltip={!canSubmit ? submitInvalidTooltip: ''}
-          dimensions='min-w-[8rem] min-h-[2.6rem] w-fit h-fit'
+          dimensions='min-w-[8rem] min-h-[2.6rem]'
           colors='clr-btn-primary'
           disabled={!canSubmit}
           onClick={handleSubmit}
         /> : null}
         <Button
           text={readonly ? 'Закрыть' : 'Отмена'}
-          dimensions='min-w-[8rem] min-h-[2.6rem] w-fit h-fit'
+          dimensions='min-w-[8rem] min-h-[2.6rem]'
           onClick={handleCancel}
         />
       </div>
diff --git a/rsconcept/frontend/src/components/Common/SelectMulti.tsx b/rsconcept/frontend/src/components/Common/SelectMulti.tsx
index 3a21de77..d210151f 100644
--- a/rsconcept/frontend/src/components/Common/SelectMulti.tsx
+++ b/rsconcept/frontend/src/components/Common/SelectMulti.tsx
@@ -25,7 +25,8 @@ function SelectMulti<Option, Group extends GroupBase<Option> = GroupBase<Option>
     control: (styles, { isDisabled }) => ({
       ...styles,
       borderRadius: '0.25rem',
-      cursor: isDisabled ? 'not-allowed' : 'pointer'
+      cursor: isDisabled ? 'not-allowed' : 'pointer',
+      boxShadow: 'none'
     }),
     option: (styles, { isSelected }) => ({
       ...styles,
diff --git a/rsconcept/frontend/src/components/Common/SelectSingle.tsx b/rsconcept/frontend/src/components/Common/SelectSingle.tsx
index a9d189df..8eb3a3d9 100644
--- a/rsconcept/frontend/src/components/Common/SelectSingle.tsx
+++ b/rsconcept/frontend/src/components/Common/SelectSingle.tsx
@@ -25,7 +25,8 @@ function SelectSingle<Option, Group extends GroupBase<Option> = GroupBase<Option
     control: (styles, { isDisabled }) => ({
       ...styles,
       borderRadius: '0.25rem',
-      cursor: isDisabled ? 'not-allowed' : 'pointer'
+      cursor: isDisabled ? 'not-allowed' : 'pointer',
+      boxShadow: 'none'
     }),
     menuPortal: (styles) => ({
       ...styles,
diff --git a/rsconcept/frontend/src/components/RSInput/RSInput.tsx b/rsconcept/frontend/src/components/RSInput/RSInput.tsx
index 309607a6..e3696c3e 100644
--- a/rsconcept/frontend/src/components/RSInput/RSInput.tsx
+++ b/rsconcept/frontend/src/components/RSInput/RSInput.tsx
@@ -87,7 +87,7 @@ function RSInput({
       { tag: tags.literal, color: colors.fgBlue }, // literals
       { tag: tags.controlKeyword, fontWeight: '500'}, // R | I | D
       { tag: tags.unit, fontSize: '0.75rem' }, // indicies
-      { tag: tags.brace, color:colors.fgPurple, fontWeight: '500' }, // braces (curly brackets)
+      { tag: tags.brace, color:colors.fgPurple, fontWeight: '700' }, // braces (curly brackets)
     ]
   }), [disabled, colors, darkMode]);
 
@@ -108,12 +108,14 @@ function RSInput({
     if (event.altKey) {
       if (text.processAltKey(event.code, event.shiftKey)) {
         event.preventDefault();
+        event.stopPropagation();
       }
     } else if (!event.ctrlKey) {
       const newSymbol = getSymbolSubstitute(event.code, event.shiftKey);
       if (newSymbol) {
         text.replaceWith(newSymbol);
         event.preventDefault();
+        event.stopPropagation();
       }
     }
   }, [thisRef]);
diff --git a/rsconcept/frontend/src/dialogs/DlgCloneLibraryItem.tsx b/rsconcept/frontend/src/dialogs/DlgCloneLibraryItem.tsx
index 39683fab..468e7f48 100644
--- a/rsconcept/frontend/src/dialogs/DlgCloneLibraryItem.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgCloneLibraryItem.tsx
@@ -60,8 +60,8 @@ function DlgCloneLibraryItem({ hideWindow, base }: DlgCloneLibraryItemProps) {
     canSubmit={canSubmit}
     submitText='Создать'
     onSubmit={handleSubmit}
+    className='flex flex-col gap-3 px-6 py-2'
   >
-  <div className='flex flex-col gap-3'>
     <TextInput
       label='Полное название'
       value={title}
@@ -83,7 +83,6 @@ function DlgCloneLibraryItem({ hideWindow, base }: DlgCloneLibraryItemProps) {
       value={common}
       setValue={value => setCommon(value)}
     />
-  </div>
   </Modal>);
 }
 
diff --git a/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/DlgConstituentaTemplate.tsx b/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/DlgConstituentaTemplate.tsx
index b46f517a..e7dd2870 100644
--- a/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/DlgConstituentaTemplate.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/DlgConstituentaTemplate.tsx
@@ -114,33 +114,35 @@ function DlgConstituentaTemplate({ hideWindow, schema, onCreate, insertAfter }:
     canSubmit={validated}
     onSubmit={handleSubmit}
     submitText='Создать'
+    className='max-w-[43rem] min-w-[43rem] min-h-[35rem] px-6'
   >
   <Tabs defaultFocus forceRenderTabPanel
-    className='flex flex-col items-center max-w-[40rem] min-w-[40rem] min-h-[35rem] mb-1'
     selectedTabClassName='clr-selected'
     selectedIndex={activeTab}
     onSelect={setActiveTab}
   >
-    <Overlay position='top-0 left-[12.3rem]'>
+    <Overlay position='top-0 right-[6rem]'>
       <HelpButton topic={HelpTopic.RSTEMPLATES} dimensions='max-w-[35rem]' />
     </Overlay>
     
-    <TabList className='flex mb-3 border'>
-      <ConceptTab
-        label='Шаблон'
-        tooltip='Выбор шаблона выражения'
-        className='border-r w-[8rem]'
-      />
-      <ConceptTab
-        label='Аргументы'
-        tooltip='Подстановка аргументов шаблона'
-        className='border-r w-[8rem]'
-      />
-      <ConceptTab
-        label='Конституента'
-        tooltip='Редактирование атрибутов конституенты'
-        className='w-[8rem]'
-      />
+    <TabList className='flex justify-center mb-3'>
+      <div className='flex border w-fit'>
+        <ConceptTab
+          label='Шаблон'
+          tooltip='Выбор шаблона выражения'
+          className='border-r w-[8rem]'
+        />
+        <ConceptTab
+          label='Аргументы'
+          tooltip='Подстановка аргументов шаблона'
+          className='border-r w-[8rem]'
+        />
+        <ConceptTab
+          label='Конституента'
+          tooltip='Редактирование атрибутов конституенты'
+          className='w-[8rem]'
+        />
+      </div>
     </TabList>
     
     <div className='w-full'>
diff --git a/rsconcept/frontend/src/dialogs/DlgCreateCst.tsx b/rsconcept/frontend/src/dialogs/DlgCreateCst.tsx
index f0aeea17..113b2096 100644
--- a/rsconcept/frontend/src/dialogs/DlgCreateCst.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgCreateCst.tsx
@@ -20,7 +20,6 @@ extends Pick<ModalProps, 'hideWindow'> {
 
 function DlgCreateCst({ hideWindow, initial, schema, onCreate }: DlgCreateCstProps) {
   const [validated, setValidated] = useState(false);
-
   const [cstData, updateCstData] = usePartialUpdate(
     initial || {
       cst_type: CstType.BASE,
@@ -53,51 +52,51 @@ function DlgCreateCst({ hideWindow, initial, schema, onCreate }: DlgCreateCstPro
     canSubmit={validated}
     onSubmit={handleSubmit}
     submitText='Создать'
+    className='h-fit min-w-[35rem] py-2 flex flex-col justify-stretch gap-3 px-6'
   >
-  <div className='h-fit w-[35rem] px-2 my-2 flex flex-col justify-stretch gap-3'>
     <div className='flex justify-center w-full gap-6'>
       <SelectSingle
-        className='min-w-[15rem] self-center'
         placeholder='Выберите тип'
+        className='min-w-[15rem] self-center'
         options={SelectorCstType}
         value={{ value: cstData.cst_type, label: labelCstType(cstData.cst_type) }}
         onChange={data => updateCstData({ cst_type: data?.value ?? CstType.BASE})}
       />
-      <TextInput id='alias' label='Имя'
-        dense
+      <TextInput dense
+        label='Имя'
         dimensions='w-[7rem]'
         value={cstData.alias}
         onChange={event => updateCstData({ alias: event.target.value})}
       />
     </div>
-    <TextArea id='term' label='Термин'
+    <TextArea spellCheck
+      label='Термин'
       placeholder='Схемный или предметный термин, обозначающий данное понятие или утверждение'
       rows={2}
       value={cstData.term_raw}
-      spellCheck
       onChange={event => updateCstData({ term_raw: event.target.value })}
     />
-    <RSInput id='expression' label='Формальное определение'
+    <RSInput
+      label='Формальное определение'
       placeholder='Родоструктурное выражение, задающее формальное определение'
       height='5.1rem'
       value={cstData.definition_formal}
       onChange={value => updateCstData({definition_formal: value})}
     />
-    <TextArea id='definition' label='Текстовое определение'
+    <TextArea spellCheck
+      label='Текстовое определение'
       placeholder='Лингвистическая интерпретация формального выражения'
       rows={2}
       value={cstData.definition_raw}
-      spellCheck
       onChange={event => updateCstData({ definition_raw: event.target.value })}
     />
-    <TextArea id='convention' label='Конвенция / Комментарий'
+    <TextArea spellCheck
+      label='Конвенция / Комментарий'
       placeholder='Договоренность об интерпретации или пояснение'
       rows={2}
       value={cstData.convention}
-      spellCheck
       onChange={event => updateCstData({ convention: event.target.value })}
     />
-  </div>
   </Modal>);
 }
 
diff --git a/rsconcept/frontend/src/dialogs/DlgDeleteCst.tsx b/rsconcept/frontend/src/dialogs/DlgDeleteCst.tsx
deleted file mode 100644
index 49d85f3e..00000000
--- a/rsconcept/frontend/src/dialogs/DlgDeleteCst.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { useMemo, useState } from 'react';
-
-import Checkbox from '../components/Common/Checkbox';
-import Modal, { ModalProps } from '../components/Common/Modal';
-import { useRSForm } from '../context/RSFormContext';
-import { prefixes } from '../utils/constants';
-import { labelConstituenta } from '../utils/labels';
-
-interface DlgDeleteCstProps
-extends Pick<ModalProps, 'hideWindow'> {
-  selected: number[]
-  onDelete: (items: number[]) => void
-}
-
-function DlgDeleteCst({ hideWindow, selected, onDelete }: DlgDeleteCstProps) {
-  const { schema } = useRSForm();
-
-  const [expandOut, setExpandOut] = useState(false);
-  const expansion: number[] = useMemo(() => schema?.graph.expandOutputs(selected) ?? [], [selected, schema?.graph]);
-
-  function handleSubmit() {
-    hideWindow();
-    if (expandOut) {
-      onDelete(selected.concat(expansion));
-    } else {
-      onDelete(selected);
-    }
-  }
-
-  return (
-  <Modal canSubmit
-    title='Удаление конституент'
-    submitText={expandOut ? 'Удалить с зависимыми' : 'Удалить'}
-    hideWindow={hideWindow}
-    onSubmit={handleSubmit}
-  >
-  <div className='max-w-[60vw] min-w-[30rem]'>
-    <p>Выбраны к удалению: <b>{selected.length}</b></p>
-    <div className='px-3 border h-[9rem] mt-1 overflow-y-auto whitespace-nowrap'>
-    {selected.map(
-    (id) => {
-      const cst = schema!.items.find(cst => cst.id === id);
-      return (cst ?
-      <p key={`${prefixes.cst_delete_list}${cst.id}`}>
-        {labelConstituenta(cst)}
-      </p> : null);
-    })}
-    </div>
-    <p className='mt-4'>Зависимые конституенты: <b>{expansion.length}</b></p>
-    <div className='mt-1 mb-3 px-3 border h-[9rem] overflow-y-auto whitespace-nowrap'>
-    {expansion.map(
-    (id) => {
-      const cst = schema!.items.find(cst => cst.id === id);
-      return (cst ?
-      <p key={`${prefixes.cst_dependant_list}${cst.id}`}>
-        {labelConstituenta(cst)}
-      </p> : null);
-    })}
-    </div>
-    <Checkbox
-      label='Удалить зависимые конституенты'
-      value={expandOut}
-      setValue={value => setExpandOut(value)}
-    />
-  </div>
-  </Modal>);
-}
-
-export default DlgDeleteCst;
diff --git a/rsconcept/frontend/src/dialogs/DlgDeleteCst/ConstituentsList.tsx b/rsconcept/frontend/src/dialogs/DlgDeleteCst/ConstituentsList.tsx
new file mode 100644
index 00000000..9b5dc1aa
--- /dev/null
+++ b/rsconcept/frontend/src/dialogs/DlgDeleteCst/ConstituentsList.tsx
@@ -0,0 +1,31 @@
+import { IConstituenta } from '../../models/rsform';
+import { labelConstituenta } from '../../utils/labels';
+
+interface ConstituentsListProps {
+  list: number[]
+  items: IConstituenta[]
+  prefix: string
+  title?: string
+}
+
+function ConstituentsList({ list, items, title, prefix }: ConstituentsListProps) {
+  return (
+  <div>
+    {title ? 
+    <p className='pb-1'>
+      {title}: <b>{list.length}</b>
+    </p> : null}
+    <div className='px-3 border h-[9rem] overflow-y-auto whitespace-nowrap'>
+      {list.map(
+      (id) => {
+        const cst = items.find(cst => cst.id === id);
+        return (cst ?
+        <p key={`${prefix}${cst.id}`}>
+          {labelConstituenta(cst)}
+        </p> : null);
+      })}
+    </div>
+  </div>);
+}
+
+export default ConstituentsList;
\ No newline at end of file
diff --git a/rsconcept/frontend/src/dialogs/DlgDeleteCst/DlgDeleteCst.tsx b/rsconcept/frontend/src/dialogs/DlgDeleteCst/DlgDeleteCst.tsx
new file mode 100644
index 00000000..d9a844cc
--- /dev/null
+++ b/rsconcept/frontend/src/dialogs/DlgDeleteCst/DlgDeleteCst.tsx
@@ -0,0 +1,57 @@
+import { useMemo, useState } from 'react';
+
+import Checkbox from '../../components/Common/Checkbox';
+import Modal, { ModalProps } from '../../components/Common/Modal';
+import { IRSForm } from '../../models/rsform';
+import { prefixes } from '../../utils/constants';
+import ConstituentsList from './ConstituentsList';
+
+interface DlgDeleteCstProps
+extends Pick<ModalProps, 'hideWindow'> {
+  selected: number[]
+  onDelete: (items: number[]) => void
+  schema: IRSForm
+}
+
+function DlgDeleteCst({ hideWindow, selected, schema, onDelete }: DlgDeleteCstProps) {
+  const [expandOut, setExpandOut] = useState(false);
+  const expansion: number[] = useMemo(() => schema.graph.expandOutputs(selected), [selected, schema.graph]);
+
+  function handleSubmit() {
+    hideWindow();
+    if (expandOut) {
+      onDelete(selected.concat(expansion));
+    } else {
+      onDelete(selected);
+    }
+  }
+
+  return (
+  <Modal canSubmit
+    title='Удаление конституент'
+    submitText={expandOut ? 'Удалить с зависимыми' : 'Удалить'}
+    hideWindow={hideWindow}
+    onSubmit={handleSubmit}
+    className='max-w-[60vw] min-w-[30rem] px-6 flex flex-col gap-3'
+  >
+    <ConstituentsList
+      title='Выбраны к удалению'
+      list={selected}
+      items={schema.items}
+      prefix={prefixes.cst_delete_list}
+    />
+    <ConstituentsList
+      title='Зависимые конституенты'
+      list={expansion}
+      items={schema.items}
+      prefix={prefixes.cst_dependant_list}
+    />
+    <Checkbox
+      label='Удалить зависимые конституенты'
+      value={expandOut}
+      setValue={value => setExpandOut(value)}
+    />
+  </Modal>);
+}
+
+export default DlgDeleteCst;
diff --git a/rsconcept/frontend/src/dialogs/DlgDeleteCst/index.tsx b/rsconcept/frontend/src/dialogs/DlgDeleteCst/index.tsx
new file mode 100644
index 00000000..1ff9e3ee
--- /dev/null
+++ b/rsconcept/frontend/src/dialogs/DlgDeleteCst/index.tsx
@@ -0,0 +1 @@
+export { default } from './DlgDeleteCst';
\ No newline at end of file
diff --git a/rsconcept/frontend/src/dialogs/DlgEditReference/DlgEditReference.tsx b/rsconcept/frontend/src/dialogs/DlgEditReference/DlgEditReference.tsx
index 89cb981f..93117f50 100644
--- a/rsconcept/frontend/src/dialogs/DlgEditReference/DlgEditReference.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgEditReference/DlgEditReference.tsx
@@ -47,28 +47,30 @@ function DlgEditReference({ hideWindow, items, initial, onSave }: DlgEditReferen
     hideWindow={hideWindow}
     canSubmit={isValid}
     onSubmit={handleSubmit}
+    className='items-center min-w-[40rem] max-w-[40rem] px-6 min-h-[34rem]'
   >
   <Tabs defaultFocus
-    className='flex flex-col items-center min-w-[40rem] max-w-[40rem] mb-2 min-h-[34rem]'
     selectedTabClassName='clr-selected'
     selectedIndex={activeTab}
     onSelect={setActiveTab}
   >
-    <Overlay position='top-0 left-[12.2rem]'>
-      <HelpButton topic={HelpTopic.TERM_CONTROL} dimensions='max-w-[38rem]' offset={14} />
+    <Overlay position='top-0 right-[4rem]'>
+      <HelpButton topic={HelpTopic.TERM_CONTROL} dimensions='max-w-[35rem]' offset={14} />
     </Overlay>
 
-    <TabList className='flex mb-3 border'>
-      <ConceptTab
-        label={labelReferenceType(ReferenceType.ENTITY)}
-        tooltip='Отсылка на термин в заданной словоформе'
-        className='w-[12rem] border-r-2'
-      />
-      <ConceptTab
-        label={labelReferenceType(ReferenceType.SYNTACTIC)}
-        tooltip='Установление синтаксической связи с отсылкой на термин'
-        className='w-[12rem]'
-      />
+    <TabList className='flex justify-center mb-3'>
+      <div className='flex border w-fit'>
+        <ConceptTab
+          label={labelReferenceType(ReferenceType.ENTITY)}
+          tooltip='Отсылка на термин в заданной словоформе'
+          className='w-[12rem] border-r-2'
+        />
+        <ConceptTab
+          label={labelReferenceType(ReferenceType.SYNTACTIC)}
+          tooltip='Установление синтаксической связи с отсылкой на термин'
+          className='w-[12rem]'
+        />
+      </div>
     </TabList>
     
     <div className='w-full'>
diff --git a/rsconcept/frontend/src/dialogs/DlgEditReference/WordformButton.tsx b/rsconcept/frontend/src/dialogs/DlgEditReference/WordformButton.tsx
index f22a6ca3..ccf04608 100644
--- a/rsconcept/frontend/src/dialogs/DlgEditReference/WordformButton.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgEditReference/WordformButton.tsx
@@ -10,15 +10,14 @@ interface WordformButtonProps {
 
 function WordformButton({ text, example, grams, onSelectGrams, isSelected, ...restProps }: WordformButtonProps) {
   return (
-    <button type='button' tabIndex={-1}
-      onClick={() => onSelectGrams(grams)}
-      className={`min-w-[6rem] p-1 border rounded-none cursor-pointer clr-btn-clear clr-hover ${isSelected ? 'clr-selected': ''}`}
-      {...restProps}
-    >
-      <p className='font-semibold'>{text}</p>
-      <p>{example}</p>
-    </button>
-  );
+  <button type='button' tabIndex={-1}
+    onClick={() => onSelectGrams(grams)}
+    className={`min-w-[6rem] p-1 border rounded-none cursor-pointer clr-btn-clear clr-hover ${isSelected ? 'clr-selected': ''}`}
+    {...restProps}
+  >
+    <p className='font-semibold'>{text}</p>
+    <p>{example}</p>
+  </button>);
 }
 
 export default WordformButton;
diff --git a/rsconcept/frontend/src/dialogs/DlgEditWordForms.tsx b/rsconcept/frontend/src/dialogs/DlgEditWordForms.tsx
index 8b0f49ac..909adbc5 100644
--- a/rsconcept/frontend/src/dialogs/DlgEditWordForms.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgEditWordForms.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useLayoutEffect, useMemo, useState } from 'react';
 
+import Label from '../components/Common/Label';
 import MiniButton from '../components/Common/MiniButton';
 import Modal from '../components/Common/Modal';
 import Overlay from '../components/Common/Overlay';
@@ -210,28 +211,28 @@ function DlgEditWordForms({ hideWindow, target, onSave }: DlgEditWordFormsProps)
     hideWindow={hideWindow}
     submitText='Сохранить'
     onSubmit={handleSubmit}
+    className='min-w-[40rem] max-w-[40rem] px-6'
   >
-  <div className='min-w-[40rem] max-w-[40rem]'>
     <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='Начальная форма'
+      placeholder='Термин в начальной форме'
       rows={1}
       value={term}
     />
 
-    <div className='mt-3 mb-2 text-sm font-semibold'>
-      Параметры словоформы
+    <div className='mt-3 mb-2'>
+      <Label text='Параметры словоформы' />
     </div>
 
     <div className='flex items-start justify-between w-full'>
       <div className='flex items-center'>
         <TextArea
           placeholder='Введите текст'
-          dimensions='min-w-[18rem] w-full min-h-[4.2rem]'
+          dimensions='min-w-[18rem] w-full min-h-[5rem]'
           rows={2}
           value={inputText}
           onChange={event => setInputText(event.target.value)}
@@ -309,7 +310,6 @@ function DlgEditWordForms({ hideWindow, target, onSave }: DlgEditWordFormsProps)
         onRowClicked={handleRowClicked}
       />
     </div>
-  </div>
   </Modal>);
 }
 
diff --git a/rsconcept/frontend/src/dialogs/DlgGraphParams.tsx b/rsconcept/frontend/src/dialogs/DlgGraphParams.tsx
index a8cbfaf7..d27f3599 100644
--- a/rsconcept/frontend/src/dialogs/DlgGraphParams.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgGraphParams.tsx
@@ -25,10 +25,10 @@ function DlgGraphParams({ hideWindow, initial, onConfirm } : DlgGraphParamsProps
     title='Настройки графа термов'
     onSubmit={handleSubmit}
     submitText='Применить'
+    className='flex gap-12 px-6 py-2'
   >
-  <div className='flex gap-6 my-2'>
     <div className='flex flex-col gap-1'>
-      <h1>Преобразования</h1>
+      <h1 className='mb-2'>Преобразования</h1>
       <Checkbox
         label='Скрыть текст'
         tooltip='Не отображать термины'
@@ -55,7 +55,7 @@ function DlgGraphParams({ hideWindow, initial, onConfirm } : DlgGraphParamsProps
       />
     </div>
     <div className='flex flex-col gap-1'>
-      <h1>Типы конституент</h1>
+      <h1 className='mb-2'>Типы конституент</h1>
       <Checkbox
         label={labelCstType(CstType.BASE)}
         value={params.allowBase} 
@@ -97,7 +97,6 @@ function DlgGraphParams({ hideWindow, initial, onConfirm } : DlgGraphParamsProps
         setValue={value => updateParams({ allowTheorem: value})}
       />
     </div>
-  </div>
   </Modal>);
 }
 
diff --git a/rsconcept/frontend/src/dialogs/DlgRenameCst.tsx b/rsconcept/frontend/src/dialogs/DlgRenameCst.tsx
index c6222b3f..4107cb72 100644
--- a/rsconcept/frontend/src/dialogs/DlgRenameCst.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgRenameCst.tsx
@@ -47,8 +47,8 @@ function DlgRenameCst({ hideWindow, initial, onRename }: DlgRenameCstProps) {
     hideWindow={hideWindow}
     canSubmit={validated}
     onSubmit={handleSubmit}
+    className='flex justify-center items-center gap-6 w-full min-w-[24rem] py-6 px-6'
   >
-  <div className='flex justify-center items-center gap-6 w-full min-w-[22rem] my-3'>
     <SelectSingle
       placeholder='Выберите тип'
       className='min-w-[14rem] self-center'
@@ -67,7 +67,6 @@ function DlgRenameCst({ hideWindow, initial, onRename }: DlgRenameCstProps) {
       onChange={event => updateData({alias: event.target.value})}
     />
     </div>
-  </div>
   </Modal>);
 }
 
diff --git a/rsconcept/frontend/src/dialogs/DlgShowAST.tsx b/rsconcept/frontend/src/dialogs/DlgShowAST.tsx
index 60e9d4bd..134e7cb3 100644
--- a/rsconcept/frontend/src/dialogs/DlgShowAST.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgShowAST.tsx
@@ -53,9 +53,9 @@ function DlgShowAST({ hideWindow, syntaxTree, expression }: DlgShowASTProps) {
   , []);
 
   return (
-  <Modal
+  <Modal readonly
     hideWindow={hideWindow}
-    readonly
+    className='px-6'
   >
     <div className='w-full my-2 text-lg text-center'>
       {!hoverNode ? expression : null}
diff --git a/rsconcept/frontend/src/dialogs/DlgUploadRSForm.tsx b/rsconcept/frontend/src/dialogs/DlgUploadRSForm.tsx
index 0a6666a8..ff009558 100644
--- a/rsconcept/frontend/src/dialogs/DlgUploadRSForm.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgUploadRSForm.tsx
@@ -44,20 +44,20 @@ function DlgUploadRSForm({ hideWindow }: DlgUploadRSFormProps) {
     canSubmit={!!file}
     onSubmit={handleSubmit}
     submitText='Загрузить'
+    className='w-[20rem] px-6'
   >
-    <div className='flex flex-col items-start min-w-[20rem] max-w-[20rem]'>
-      <FileInput
-        label='Выбрать файл'
-        acceptType={EXTEOR_TRS_FILE}
-        onChange={handleFile}
-      />
-      <Checkbox
-        label='Загружать название и комментарий'
-        dimensions='w-fit pb-2'
-        value={loadMetadata}
-        setValue={value => setLoadMetadata(value)}
-      />
-    </div>
+    <FileInput
+      label='Выбрать файл'
+      dimensions='w-full flex items-center'
+      acceptType={EXTEOR_TRS_FILE}
+      onChange={handleFile}
+    />
+    <Checkbox
+      label='Загружать название и комментарий'
+      dimensions='w-fit py-2'
+      value={loadMetadata}
+      setValue={value => setLoadMetadata(value)}
+    />
   </Modal>);
 }
 
diff --git a/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx b/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx
index 4977bf1d..bba0ff58 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx
@@ -362,6 +362,7 @@ function RSTabs() {
   /> : null}
   {showDeleteCst ? 
   <DlgDeleteCst
+    schema={schema!}
     hideWindow={() => setShowDeleteCst(false)}
     onDelete={handleDeleteCst}
     selected={toBeDeleted}