classnames refactoring + small ui fixes

rsconcept/frontend/src/components/ui/Checkbox.tsx

@@ -76,7 +76,7 @@ function Checkbox({
           </div>
         ) : null}
       </div>
-      {label ? <span className={clsx('text-start text-sm whitespace-nowrap', cursor)}>{label}</span> : null}
+      {label ? <span className={clsx('text-start text-sm whitespace-nowrap select-text', cursor)}>{label}</span> : null}
     </button>
   );
 }

rsconcept/frontend/src/components/ui/CheckboxTristate.tsx

@@ -84,7 +84,7 @@ function CheckboxTristate({
           </div>
         ) : null}
       </div>
-      {label ? <span className={clsx('text-start text-sm whitespace-nowrap', cursor)}>{label}</span> : null}
+      {label ? <span className={clsx('text-start text-sm whitespace-nowrap select-text', cursor)}>{label}</span> : null}
     </button>
   );
 }

rsconcept/frontend/src/components/ui/FlexColumn.tsx

@@ -1,14 +1,12 @@
 import clsx from 'clsx';
 
-import { classnames } from '@/utils/constants';
-
 import { CProps } from '../props';
 
 export interface FlexColumnProps extends CProps.Div {}
 
 function FlexColumn({ className, children, ...restProps }: FlexColumnProps) {
   return (
-    <div className={clsx(classnames.flex_col, className)} {...restProps}>
+    <div className={clsx('cc-column', className)} {...restProps}>
       {children}
     </div>
   );

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

@@ -12,13 +12,13 @@ function Label({ text, className, ...restProps }: LabelProps) {
   }
   if (restProps.htmlFor) {
     return (
-      <label className={clsx('text-sm font-medium whitespace-nowrap', className)} {...restProps}>
+      <label className={clsx('cc-label', className)} {...restProps}>
         {text}
       </label>
     );
   } else {
     return (
-      <span className={clsx('text-sm font-medium whitespace-nowrap', className)} {...restProps}>
+      <span className={clsx('cc-label', className)} {...restProps}>
         {text}
       </span>
     );

rsconcept/frontend/src/dialogs/DlgCloneLibraryItem.tsx

@@ -13,7 +13,6 @@ import { useConceptNavigation } from '@/context/NavigationContext';
 import { ILibraryItem } from '@/models/library';
 import { cloneTitle } from '@/models/libraryAPI';
 import { IRSFormCreateData } from '@/models/rsform';
-import { classnames } from '@/utils/constants';
 
 interface DlgCloneLibraryItemProps extends Pick<ModalProps, 'hideWindow'> {
   base: ILibraryItem;
@@ -63,7 +62,7 @@ function DlgCloneLibraryItem({ hideWindow, base }: DlgCloneLibraryItemProps) {
       canSubmit={canSubmit}
       submitText='Создать'
       onSubmit={handleSubmit}
-      className={clsx('px-6 py-2', classnames.flex_col)}
+      className={clsx('px-6 py-2', 'cc-column')}
     >
       <TextInput
         id='dlg_full_name'

rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/DlgConstituentaTemplate.tsx

@@ -13,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 { classnames } from '@/utils/constants';
 
 import ArgumentsTab, { IArgumentsState } from './ArgumentsTab';
 import ConstituentaTab from './ConstituentaTab';
@@ -138,7 +137,7 @@ function DlgConstituentaTemplate({ hideWindow, schema, onCreate, insertAfter }:
           <ArgumentsTab schema={schema} state={substitutes} partialUpdate={updateSubstitutes} />
         </TabPanel>
 
-        <TabPanel className={classnames.flex_col} style={{ display: activeTab === TabID.CONSTITUENTA ? '' : 'none' }}>
+        <TabPanel className='cc-column' style={{ display: activeTab === TabID.CONSTITUENTA ? '' : 'none' }}>
           <ConstituentaTab state={constituenta} partialUpdate={updateConstituenta} />
         </TabPanel>
       </Tabs>

rsconcept/frontend/src/dialogs/DlgCreateCst.tsx

@@ -11,7 +11,6 @@ import TextInput from '@/components/ui/TextInput';
 import usePartialUpdate from '@/hooks/usePartialUpdate';
 import { CstType, ICstCreateData, IRSForm } from '@/models/rsform';
 import { generateAlias, validateNewAlias } from '@/models/rsformAPI';
-import { classnames } from '@/utils/constants';
 import { labelCstType } from '@/utils/labels';
 import { SelectorCstType } from '@/utils/selectors';
 
@@ -53,7 +52,7 @@ function DlgCreateCst({ hideWindow, initial, schema, onCreate }: DlgCreateCstPro
       canSubmit={validated}
       onSubmit={handleSubmit}
       submitText='Создать'
-      className={clsx('w-[35rem]', 'py-2 px-6', classnames.flex_col)}
+      className={clsx('cc-column', 'w-[35rem]', 'py-2 px-6')}
     >
       <div className='flex self-center gap-6'>
         <SelectSingle

rsconcept/frontend/src/dialogs/DlgCreateVersion.tsx

@@ -8,7 +8,6 @@ import TextArea from '@/components/ui/TextArea';
 import TextInput from '@/components/ui/TextInput';
 import { IVersionData, IVersionInfo } from '@/models/library';
 import { nextVersion } from '@/models/libraryAPI';
-import { classnames } from '@/utils/constants';
 
 interface DlgCreateVersionProps extends Pick<ModalProps, 'hideWindow'> {
   versions: IVersionInfo[];
@@ -38,7 +37,7 @@ function DlgCreateVersion({ hideWindow, versions, onCreate }: DlgCreateVersionPr
       canSubmit={canSubmit}
       onSubmit={handleSubmit}
       submitText='Создать'
-      className={clsx('w-[30rem]', 'py-2 px-6', classnames.flex_col)}
+      className={clsx('cc-column', 'w-[30rem]', 'py-2 px-6')}
     >
       <TextInput
         id='dlg_version'

rsconcept/frontend/src/dialogs/DlgDeleteCst/DlgDeleteCst.tsx

@@ -6,7 +6,7 @@ import { useMemo, useState } from 'react';
 import Checkbox from '@/components/ui/Checkbox';
 import Modal, { ModalProps } from '@/components/ui/Modal';
 import { IRSForm } from '@/models/rsform';
-import { classnames, prefixes } from '@/utils/constants';
+import { prefixes } from '@/utils/constants';
 
 import ConstituentsList from './ConstituentsList';
 
@@ -36,7 +36,7 @@ function DlgDeleteCst({ hideWindow, selected, schema, onDelete }: DlgDeleteCstPr
       submitText={expandOut ? 'Удалить с зависимыми' : 'Удалить'}
       hideWindow={hideWindow}
       onSubmit={handleSubmit}
-      className={clsx('max-w-[60vw] min-w-[30rem]', 'px-6', classnames.flex_col)}
+      className={clsx('cc-column', 'max-w-[60vw] min-w-[30rem]', 'px-6')}
     >
       <ConstituentsList
         title='Выбраны к удалению'

rsconcept/frontend/src/dialogs/DlgInlineSynthesis/DlgInlineSynthesis.tsx

@@ -53,7 +53,7 @@ function DlgInlineSynthesis({ hideWindow, receiver, onInlineSynthesis }: DlgInli
     <Modal
       header='Импорт концептуальной схем'
       submitText='Добавить конституенты'
-      className='w-[35rem] h-[30rem] px-6'
+      className='w-[40rem] h-[40rem] px-6'
       hideWindow={hideWindow}
       canSubmit={validated}
       onSubmit={handleSubmit}
@@ -66,9 +66,9 @@ function DlgInlineSynthesis({ hideWindow, receiver, onInlineSynthesis }: DlgInli
         onSelect={setActiveTab}
       >
         <TabList className={clsx('mb-3 self-center', 'flex', 'border divide-x rounded-none')}>
-          <TabLabel label='Схема' title='Выбор импортируемой схемы' className='w-[8rem]' />
+          <TabLabel label='Схема' title='Источник конституент' className='w-[8rem]' />
-          <TabLabel label='Содержание' title='Выбор переносимого содержания' className='w-[8rem]' />
+          <TabLabel label='Содержание' title='Перечень конституент' className='w-[8rem]' />
-          <TabLabel label='Отождествления' title='Отождествление добавляемый конституент' className='w-[8rem]' />
+          <TabLabel label='Отождествления' title='Таблица отождествлений' className='w-[8rem]' />
         </TabList>
 
         <TabPanel style={{ display: activeTab === TabID.SCHEMA ? '' : 'none' }}>

rsconcept/frontend/src/dialogs/DlgInlineSynthesis/SchemaTab.tsx

@@ -28,7 +28,7 @@ function SchemaTab({ selected, setSelected }: SchemaTabProps) {
         disabled
         dense
       />
-      <SchemaPicker rows={6} value={selected} onSelectValue={setSelected} />
+      <SchemaPicker rows={16} value={selected} onSelectValue={setSelected} />
     </FlexColumn>
   );
 }

rsconcept/frontend/src/pages/CreateRSFormPage.tsx

@@ -20,7 +20,7 @@ import { useLibrary } from '@/context/LibraryContext';
 import { useConceptNavigation } from '@/context/NavigationContext';
 import { LibraryItemType } from '@/models/library';
 import { IRSFormCreateData } from '@/models/rsform';
-import { classnames, EXTEOR_TRS_FILE, limits, patterns } from '@/utils/constants';
+import { EXTEOR_TRS_FILE, limits, patterns } from '@/utils/constants';
 
 function CreateRSFormPage() {
   const router = useConceptNavigation();
@@ -81,7 +81,7 @@ function CreateRSFormPage() {
   return (
     <AnimateFade>
       <RequireAuth>
-        <form className={clsx('px-6 py-3', classnames.flex_col)} onSubmit={handleSubmit}>
+        <form className={clsx('cc-column', 'px-6 py-3')} onSubmit={handleSubmit}>
           <h1>Создание концептуальной схемы</h1>
           <Overlay position='top-[-2.4rem] right-[-1rem]'>
             <input

rsconcept/frontend/src/pages/LoginPage.tsx

@@ -14,7 +14,7 @@ import { useAuth } from '@/context/AuthContext';
 import { useConceptNavigation } from '@/context/NavigationContext';
 import useQueryStrings from '@/hooks/useQueryStrings';
 import { IUserLoginData } from '@/models/library';
-import { classnames, resources } from '@/utils/constants';
+import { resources } from '@/utils/constants';
 
 function ProcessError({ error }: { error: ErrorData }): React.ReactElement {
   if (axios.isAxiosError(error) && error.response && error.response.status === 400) {
@@ -64,7 +64,7 @@ function LoginPage() {
   }
   return (
     <AnimateFade>
-      <form className={clsx('w-[24rem]', 'pt-12 pb-6 px-6', classnames.flex_col)} onSubmit={handleSubmit}>
+      <form className={clsx('cc-column', 'w-[24rem]', 'pt-12 pb-6 px-6')} onSubmit={handleSubmit}>
         <img alt='Концепт Портал' src={resources.logo} className='max-h-[2.5rem] min-w-[2.5rem] mb-3' />
         <TextInput
           id='username'

rsconcept/frontend/src/pages/PasswordChangePage.tsx

@@ -12,7 +12,6 @@ import { useAuth } from '@/context/AuthContext';
 import { useConceptNavigation } from '@/context/NavigationContext';
 import useQueryStrings from '@/hooks/useQueryStrings';
 import { IPasswordTokenData, IResetPasswordData } from '@/models/library';
-import { classnames } from '@/utils/constants';
 
 function ProcessError({ error }: { error: ErrorData }): React.ReactElement {
   if (axios.isAxiosError(error) && error.response && error.response.status === 404) {
@@ -78,7 +77,7 @@ function PasswordChangePage() {
       isLoading={loading}
       hasNoData={!isTokenValid}
     >
-      <form className={clsx('w-[24rem]', 'px-6 mt-3', classnames.flex_col)} onSubmit={handleSubmit}>
+      <form className={clsx('cc-column', 'w-[24rem]', 'px-6 mt-3')} onSubmit={handleSubmit}>
         <TextInput
           id='new_password'
           type='password'

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

@@ -55,7 +55,7 @@ function ConstituentaToolbar({
         icon={<BiPlusCircle size={'1.25rem'} className='icon-green' />}
       />
       <MiniButton
-        titleHtml={prepareTooltip('Клонировать конституенту', 'Alt + V]')}
+        titleHtml={prepareTooltip('Клонировать конституенту', 'Alt + V')}
         disabled={!isMutable || isModified}
         onClick={onClone}
         icon={<BiDuplicate size='1.25rem' className='icon-green' />}

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

@@ -29,6 +29,7 @@ function ControlsOverlay({ constituenta, isMutable, processing, onRename, onEdit
         className={clsx(
           'pt-1 pl-[1.375rem]', // prettier: split lines
           'text-sm font-medium whitespace-nowrap',
+          'select-text cursor-default',
           !isMutable && !processing && 'pl-[2.8rem]'
         )}
       >

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

@@ -10,7 +10,6 @@ import SubmitButton from '@/components/ui/SubmitButton';
 import TextArea from '@/components/ui/TextArea';
 import { useRSForm } from '@/context/RSFormContext';
 import { IConstituenta, ICstUpdateData } from '@/models/rsform';
-import { classnames } from '@/utils/constants';
 import { labelCstTypification } from '@/utils/labels';
 
 import EditorRSExpression from '../EditorRSExpression';
@@ -123,7 +122,7 @@ function FormConstituenta({
       />
       <form
         id={id}
-        className={clsx('mt-1 w-full md:w-[47.8rem] shrink-0', 'px-4 py-1', classnames.flex_col)}
+        className={clsx('cc-column', 'mt-1 w-full md:w-[47.8rem] shrink-0', 'px-4 py-1')}
         onSubmit={handleSubmit}
       >
         <RefsInput

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

@@ -90,7 +90,7 @@ interface RSEditorControlsProps {
 function RSEditorControls({ isOpen, disabled, onEdit }: RSEditorControlsProps) {
   return (
     <motion.div
-      className='flex-wrap text-xs sm:text-sm divide-solid'
+      className='flex-wrap text-xs select-none sm:text-sm divide-solid'
       initial={false}
       animate={isOpen ? 'open' : 'closed'}
       variants={animateRSControl}

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

@@ -20,7 +20,7 @@ import { useRSForm } from '@/context/RSFormContext';
 import { LibraryItemType } from '@/models/library';
 import { HelpTopic } from '@/models/miscellaneous';
 import { IRSFormCreateData } from '@/models/rsform';
-import { classnames, limits, patterns } from '@/utils/constants';
+import { limits, patterns } from '@/utils/constants';
 
 import { useRSEdit } from '../RSEditContext';
 
@@ -95,11 +95,7 @@ function FormRSForm({ id, isModified, setIsModified }: FormRSFormProps) {
   };
 
   return (
-    <form
+    <form id={id} className={clsx('cc-column', 'mt-1 min-w-[22rem] sm:w-[30rem]', 'py-1')} onSubmit={handleSubmit}>
-      id={id}
-      className={clsx('mt-1 min-w-[22rem] sm:w-[30rem]', 'py-1', classnames.flex_col)}
-      onSubmit={handleSubmit}
-    >
       <TextInput
         id='schema_title'
         required

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

@@ -14,7 +14,7 @@ import useLocalStorage from '@/hooks/useLocalStorage';
 import { GraphColoringScheme, GraphFilterParams } from '@/models/miscellaneous';
 import { ConstituentaID, CstType } from '@/models/rsform';
 import { colorBgGraphNode } from '@/styling/color';
-import { classnames, TIMEOUT_GRAPH_REFRESH } from '@/utils/constants';
+import { TIMEOUT_GRAPH_REFRESH } from '@/utils/constants';
 
 import { useRSEdit } from '../RSEditContext';
 import GraphSidebar from './GraphSidebar';
@@ -222,7 +222,7 @@ function EditorTermGraph({ selected, setSelected, onOpenEdit }: EditorTermGraphP
         </Overlay>
       ) : null}
 
-      <Overlay position='top-0 left-0' className={clsx('w-[13.5rem]', classnames.flex_col)}>
+      <Overlay position='top-0 left-0' className='cc-column w-[13.5rem]'>
         <GraphSidebar
           coloring={coloringScheme}
           layout={layout}

rsconcept/frontend/src/pages/RegisterPage.tsx

@@ -19,7 +19,7 @@ import Tooltip from '@/components/ui/Tooltip';
 import { useAuth } from '@/context/AuthContext';
 import { useConceptNavigation } from '@/context/NavigationContext';
 import { type IUserSignupData } from '@/models/library';
-import { classnames, globalIDs, patterns } from '@/utils/constants';
+import { globalIDs, patterns } from '@/utils/constants';
 
 function RegisterPage() {
   const router = useConceptNavigation();
@@ -69,7 +69,7 @@ function RegisterPage() {
   }
   return (
     <AnimateFade>
-      <form className={clsx('px-6 py-3', classnames.flex_col)} onSubmit={handleSubmit}>
+      <form className={clsx('cc-column', 'px-6 py-3')} onSubmit={handleSubmit}>
         <h1>Новый пользователь</h1>
         <div className='flex gap-12'>
           <FlexColumn>

rsconcept/frontend/src/pages/RestorePasswordPage.tsx

@@ -11,7 +11,6 @@ import TextInput from '@/components/ui/TextInput';
 import TextURL from '@/components/ui/TextURL';
 import { useAuth } from '@/context/AuthContext';
 import { IRequestPasswordData } from '@/models/library';
-import { classnames } from '@/utils/constants';
 
 function ProcessError({ error }: { error: ErrorData }): React.ReactElement {
   if (axios.isAxiosError(error) && error.response && error.response.status === 400) {
@@ -44,7 +43,7 @@ function RestorePasswordPage() {
   return (
     <AnimateFade>
       {!isCompleted ? (
-        <form className={clsx('w-[24rem]', 'px-6 mt-3', classnames.flex_col)} onSubmit={handleSubmit}>
+        <form className={clsx('cc-column', 'w-[24rem]', 'px-6 mt-3')} onSubmit={handleSubmit}>
           <TextInput
             id='email'
             allowEnter

rsconcept/frontend/src/pages/UserProfilePage/EditorProfile.tsx

@@ -9,7 +9,6 @@ import TextInput from '@/components/ui/TextInput';
 import { useBlockNavigation } from '@/context/NavigationContext';
 import { useUserProfile } from '@/context/UserProfileContext';
 import { IUserUpdateData } from '@/models/library';
-import { classnames } from '@/utils/constants';
 
 function EditorProfile() {
   const { updateUser, user, processing } = useUserProfile();
@@ -48,7 +47,7 @@ function EditorProfile() {
   }
 
   return (
-    <form onSubmit={handleSubmit} className={clsx('min-w-[18rem]', 'px-6 py-2', classnames.flex_col)}>
+    <form onSubmit={handleSubmit} className={clsx('cc-column', 'min-w-[18rem]', 'px-6 py-2')}>
       <TextInput
         id='username'
         autoComplete='username'

rsconcept/frontend/src/styling/styles.css

@@ -192,4 +192,12 @@
       @apply clr-text-green;
     }
   }
+
+  .cc-label {
+    @apply text-sm font-medium cursor-default select-text whitespace-nowrap;
+  }
+
+  .cc-column {
+    @apply flex flex-col gap-3;
+  }
 }

rsconcept/frontend/src/utils/constants.ts

@@ -60,14 +60,6 @@ export const youtube = {
   intro: '0Ty9mu9sOJo'
 };
 
-/**
- * Tailwind CSS combinations.
- * Note: using clsx in conjunction with tailwindCss is preferred to creating custom CSS
- */
-export const classnames = {
-  flex_col: 'flex flex-col gap-3'
-};
-
 /**
  * Constant URLs.
  */
@@ -101,6 +93,7 @@ export const globalIDs = {
 export const prefixes = {
   page_size: 'page_size_',
   cst_list: 'cst_list_',
+  cst_inline_synth_list: 'cst_inline_synth_list',
   cst_side_table: 'cst_side_table_',
   cst_hidden_list: 'cst_hidden_list_',
   cst_modal_list: 'cst_modal_list_',