Minor UI refactoring

rsconcept/frontend/src/components/select/PickConstituenta.tsx

@@ -12,7 +12,7 @@ import { prefixes } from '@/utils/constants';
 import { describeConstituenta } from '@/utils/labels';
 
 import BadgeConstituenta from '../info/BadgeConstituenta';
-import FlexColumn from '../ui/FlexColumn';
+import NoData from '../ui/NoData';
 
 interface PickConstituentaProps {
   id?: string;
@@ -106,10 +106,10 @@ function PickConstituenta({
         columns={columns}
         conditionalRowStyles={conditionalRowStyles}
         noDataComponent={
-          <FlexColumn className='p-3 items-center min-h-[6rem]'>
+          <NoData className='min-h-[6rem]'>
             <p>Список конституент пуст</p>
             <p>Измените параметры фильтра</p>
-          </FlexColumn>
+          </NoData>
         }
         onRowClicked={onSelectValue}
       />

rsconcept/frontend/src/components/select/PickMultiConstituenta.tsx

@@ -10,7 +10,7 @@ import { isBasicConcept } from '@/models/rsformAPI';
 import { describeConstituenta } from '@/utils/labels';
 
 import BadgeConstituenta from '../info/BadgeConstituenta';
-import FlexColumn from '../ui/FlexColumn';
+import NoData from '../ui/NoData';
 import GraphSelectionToolbar from './GraphSelectionToolbar';
 
 interface PickMultiConstituentaProps {
@@ -103,9 +103,9 @@ function PickMultiConstituenta({ id, schema, prefixID, rows, selected, setSelect
         rowSelection={rowSelection}
         onRowSelectionChange={handleRowSelection}
         noDataComponent={
-          <FlexColumn className='items-center p-3'>
+          <NoData>
             <p>Список пуст</p>
-          </FlexColumn>
+          </NoData>
         }
       />
     </div>

rsconcept/frontend/src/components/select/PickSchema.tsx

@@ -104,7 +104,7 @@ function PickSchema({ id, initialFilter = '', rows = 4, value, onSelectValue }:
         columns={columns}
         conditionalRowStyles={conditionalRowStyles}
         noDataComponent={
-          <FlexColumn className='p-3 items-center min-h-[6rem]'>
+          <FlexColumn className='dense p-3 items-center min-h-[6rem]'>
             <p>Список схем пуст</p>
             <p>Измените параметры фильтра</p>
           </FlexColumn>

rsconcept/frontend/src/components/select/PickSubstitutions.tsx

@@ -23,6 +23,7 @@ import {
   IconRemove,
   IconReplace
 } from '../Icons';
+import NoData from '../ui/NoData';
 
 interface PickSubstitutionsProps {
   prefixID: string;
@@ -259,10 +260,10 @@ function PickSubstitutions({
         columns={columns}
         headPosition='0'
         noDataComponent={
-          <span className='p-2 text-center min-h-[2rem]'>
+          <NoData className='min-h-[2rem]'>
             <p>Список пуст</p>
             <p>Добавьте отождествление</p>
-          </span>
+          </NoData>
         }
       />
     </div>

rsconcept/frontend/src/components/select/SelectLocationHead.tsx

@@ -14,7 +14,7 @@ import DropdownButton from '../ui/DropdownButton';
 
 interface SelectLocationHeadProps {
   value: LocationHead;
-  onChange: (value: LocationHead) => void;
+  onChange: (newValue: LocationHead) => void;
   excluded?: LocationHead[];
 }
 

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

@@ -2,9 +2,7 @@ import clsx from 'clsx';
 
 import { CProps } from '../props';
 
-export interface FlexColumnProps extends CProps.Div {}
+function FlexColumn({ className, children, ...restProps }: CProps.Div) {
-
-function FlexColumn({ className, children, ...restProps }: FlexColumnProps) {
   return (
     <div className={clsx('cc-column', className)} {...restProps}>
       {children}

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

@@ -0,0 +1,13 @@
+import clsx from 'clsx';
+
+import { CProps } from '../props';
+
+function NoData({ className, children, ...restProps }: CProps.Div) {
+  return (
+    <div className={clsx('p-3 flex flex-col items-center text-center select-none w-full', className)} {...restProps}>
+      {children}
+    </div>
+  );
+}
+
+export default NoData;

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

@@ -18,9 +18,9 @@ function TextURL({ text, href, title, color = 'clr-text-url', onClick }: TextURL
     );
   } else if (onClick) {
     return (
-      <span tabIndex={-1} className={design} onClick={onClick}>
+      <button type='button' tabIndex={-1} className={design} onClick={onClick}>
         {text}
-      </span>
+      </button>
     );
   } else {
     return null;

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

@@ -9,6 +9,7 @@ import RSInput from '@/components/RSInput';
 import PickConstituenta from '@/components/select/PickConstituenta';
 import DataTable, { IConditionalStyle } from '@/components/ui/DataTable';
 import MiniButton from '@/components/ui/MiniButton';
+import NoData from '@/components/ui/NoData';
 import AnimateFade from '@/components/wrap/AnimateFade';
 import { useConceptOptions } from '@/context/OptionsContext';
 import { IConstituenta, IRSForm } from '@/models/rsform';
@@ -160,7 +161,7 @@ function ArgumentsTab({ state, schema, partialUpdate }: ArgumentsTabProps) {
         data={state.arguments}
         columns={columns}
         conditionalRowStyles={conditionalRowStyles}
-        noDataComponent={<p className={clsx('min-h-[3.6rem]', 'p-2', 'text-center')}>Аргументы отсутствуют</p>}
+        noDataComponent={<NoData className='min-h-[3.6rem]'>Аргументы отсутствуют</NoData>}
         onRowClicked={handleSelectArgument}
       />
 

rsconcept/frontend/src/dialogs/DlgEditWordForms/WordFormsTable.tsx

@@ -7,6 +7,7 @@ import { IconRemove } from '@/components/Icons';
 import BadgeWordForm from '@/components/info/BadgeWordForm';
 import DataTable, { createColumnHelper } from '@/components/ui/DataTable';
 import MiniButton from '@/components/ui/MiniButton';
+import NoData from '@/components/ui/NoData';
 import { IWordForm } from '@/models/language';
 
 interface WordFormsTableProps {
@@ -78,10 +79,10 @@ function WordFormsTable({ forms, setForms, onFormSelect }: WordFormsTableProps)
       columns={columns}
       headPosition='0'
       noDataComponent={
-        <span className='p-2 text-center min-h-[2rem]'>
+        <NoData className='min-h-[2rem]'>
           <p>Список пуст</p>
           <p>Добавьте словоформу</p>
-        </span>
+        </NoData>
       }
       onRowClicked={onFormSelect}
     />

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

@@ -164,7 +164,7 @@ function LibraryTable({ items, resetQuery, folderMode, toggleFolderMode }: Libra
       className={clsx('text-xs sm:text-sm cc-scroll-y', { 'border-l border-b': folderMode })}
       style={{ maxHeight: tableHeight }}
       noDataComponent={
-        <FlexColumn className='p-3 items-center min-h-[6rem]'>
+        <FlexColumn className='dense p-3 items-center min-h-[6rem]'>
           <p>Список схем пуст</p>
           <p className='flex gap-6'>
             <TextURL text='Создать схему' href='/library/create' />

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

@@ -221,8 +221,8 @@ function FormConstituenta({
             <button
               key='cst_disable_comment'
               id='cst_disable_comment'
-              tabIndex={-1}
               type='button'
+              tabIndex={-1}
               className='self-start cc-label clr-text-url hover:underline'
               onClick={() => setForceComment(true)}
             >

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

@@ -13,6 +13,7 @@ import useDropdown from '@/hooks/useDropdown';
 import { ILibraryItemData, ILibraryItemEditor } from '@/models/library';
 import { UserID, UserLevel } from '@/models/user';
 import { prefixes } from '@/utils/constants';
+import { prompts } from '@/utils/labels';
 
 import LabeledValue from '../../../components/ui/LabeledValue';
 
@@ -34,11 +35,7 @@ function EditorLibraryItem({ item, isModified, controller }: EditorLibraryItemPr
       if (newValue === item?.owner) {
         return;
       }
-      if (
+      if (!window.confirm(prompts.ownerChange)) {
-        !window.confirm(
-          'Вы уверены, что хотите изменить владельца? Вы потеряете право управления данной схемой. Данное действие отменить нельзя'
-        )
-      ) {
         return;
       }
       controller.setOwner(newValue);
@@ -59,7 +56,11 @@ function EditorLibraryItem({ item, isModified, controller }: EditorLibraryItemPr
           />
         </Overlay>
       ) : null}
-      <LabeledValue className='max-w-[30rem] sm:mb-1 text-ellipsis' label='Путь' text={item?.location ?? ''} />
+      <LabeledValue
+        className='max-w-[30rem] sm:mb-1 text-ellipsis' //
+        label='Путь'
+        text={item?.location ?? ''}
+      />
 
       {accessLevel >= UserLevel.OWNER ? (
         <Overlay position='top-[-0.5rem] left-[5.5rem] cc-icons'>
@@ -82,7 +83,11 @@ function EditorLibraryItem({ item, isModified, controller }: EditorLibraryItemPr
           </div>
         </Overlay>
       ) : null}
-      <LabeledValue className='sm:mb-1' label='Владелец' text={getUserLabel(item?.owner ?? null)} />
+      <LabeledValue
+        className='sm:mb-1' //
+        label='Владелец'
+        text={getUserLabel(item?.owner ?? null)}
+      />
 
       {accessLevel >= UserLevel.OWNER ? (
         <Overlay position='top-[-0.5rem] left-[5.5rem] cc-icons'>
@@ -97,12 +102,22 @@ function EditorLibraryItem({ item, isModified, controller }: EditorLibraryItemPr
           </div>
         </Overlay>
       ) : null}
-      <LabeledValue id='editor_stats' className='sm:mb-1' label='Редакторы' text={item?.editors.length ?? 0} />
+      <LabeledValue
+        id='editor_stats' //
+        className='sm:mb-1'
+        label='Редакторы'
+        text={item?.editors.length ?? 0}
+      />
       <Tooltip anchorSelect='#editor_stats' layer='z-modalTooltip'>
         <InfoUsers items={item?.editors ?? []} prefix={prefixes.user_editors} />
       </Tooltip>
 
-      <LabeledValue id='sub_stats' className='sm:mb-1' label='Отслеживают' text={item?.subscribers.length ?? 0} />
+      <LabeledValue
+        id='sub_stats' //
+        className='sm:mb-1'
+        label='Отслеживают'
+        text={item?.subscribers.length ?? 0}
+      />
       <Tooltip anchorSelect='#sub_stats' layer='z-modalTooltip'>
         <InfoUsers items={item?.subscribers ?? []} prefix={prefixes.user_subs} />
       </Tooltip>

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

@@ -6,7 +6,8 @@ import { useCallback, useLayoutEffect, useMemo, useState } from 'react';
 import BadgeConstituenta from '@/components/info/BadgeConstituenta';
 import { CProps } from '@/components/props';
 import DataTable, { createColumnHelper, RowSelectionState, VisibilityState } from '@/components/ui/DataTable';
-import FlexColumn from '@/components/ui/FlexColumn';
+import NoData from '@/components/ui/NoData';
+import TextURL from '@/components/ui/TextURL';
 import { useConceptOptions } from '@/context/OptionsContext';
 import useWindowSize from '@/hooks/useWindowSize';
 import { ConstituentaID, IConstituenta } from '@/models/rsform';
@@ -135,12 +136,12 @@ function RSTable({ items, maxHeight, enableSelection, selected, setSelected, onE
       rowSelection={selected}
       onRowSelectionChange={setSelected}
       noDataComponent={
-        <FlexColumn className='items-center p-3'>
+        <NoData>
           <p>Список пуст</p>
-          <p className='cursor-pointer clr-text-primary hover:underline' onClick={() => onCreateNew()}>
+          <p>
-            Создать новую конституенту
+            <TextURL text='Создать конституенту...' onClick={onCreateNew} />
           </p>
-        </FlexColumn>
+        </NoData>
       }
     />
   );

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

@@ -98,10 +98,11 @@ function ViewHidden({ items, selected, toggleSelection, setFocus, schema, colori
           const id = `${prefixes.cst_hidden_list}${cst.alias}`;
           return (
             <div key={`wrap-${id}`}>
-              <div
+              <button
+                type='button'
                 key={id}
                 id={id}
-                className='min-w-[3rem] rounded-md text-center cursor-pointer select-none'
+                className='min-w-[3rem] rounded-md text-center select-none'
                 style={{
                   backgroundColor: colorBgGraphNode(cst, adjustedColoring, colors),
                   ...(localSelected.includes(cstID) ? { outlineWidth: '2px', outlineStyle: 'solid' } : {})
@@ -110,7 +111,7 @@ function ViewHidden({ items, selected, toggleSelection, setFocus, schema, colori
                 onDoubleClick={() => onEdit(cstID)}
               >
                 {cst.alias}
-              </div>
+              </button>
               <ConstituentaTooltip data={cst} anchor={`#${id}`} />
             </div>
           );

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

@@ -1,10 +1,10 @@
 'use client';
 
-import clsx from 'clsx';
 import { useCallback, useLayoutEffect, useMemo, useState } from 'react';
 
 import BadgeConstituenta from '@/components/info/BadgeConstituenta';
 import DataTable, { createColumnHelper, IConditionalStyle, VisibilityState } from '@/components/ui/DataTable';
+import NoData from '@/components/ui/NoData';
 import { useConceptOptions } from '@/context/OptionsContext';
 import useWindowSize from '@/hooks/useWindowSize';
 import { ConstituentaID, IConstituenta } from '@/models/rsform';
@@ -155,10 +155,10 @@ function ConstituentsTable({ items, activeCst, onOpenEdit, maxHeight, denseThres
       columnVisibility={columnVisibility}
       onColumnVisibilityChange={setColumnVisibility}
       noDataComponent={
-        <div className={clsx('min-h-[5rem]', 'p-3', 'text-center', 'select-none')}>
+        <NoData className='min-h-[5rem]'>
           <p>Список конституент пуст</p>
           <p>Измените параметры фильтра</p>
-        </div>
+        </NoData>
       }
       onRowClicked={handleRowClicked}
     />

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

@@ -6,6 +6,7 @@ import { useIntl } from 'react-intl';
 
 import { urls } from '@/app/urls';
 import DataTable, { createColumnHelper } from '@/components/ui/DataTable';
+import NoData from '@/components/ui/NoData';
 import { useConceptNavigation } from '@/context/NavigationContext';
 import { ILibraryItem } from '@/models/library';
 import { animateSideView } from '@/styling/animations';
@@ -74,7 +75,7 @@ function ViewSubscriptions({ items }: ViewSubscriptionsProps) {
           id: 'time_update',
           desc: true
         }}
-        noDataComponent={<div className='h-[10rem]'>Отслеживаемые схемы отсутствуют</div>}
+        noDataComponent={<NoData className='h-[10rem]'>Отслеживаемые схемы отсутствуют</NoData>}
         onRowClicked={openRSForm}
       />
     </motion.div>

rsconcept/frontend/src/utils/labels.ts

@@ -942,7 +942,9 @@ export const prompts = {
   promptUnsaved: 'Присутствуют несохраненные изменения. Продолжить без их учета?',
   deleteLibraryItem: 'Вы уверены, что хотите удалить данную схему?',
   generateWordforms: 'Данное действие приведет к перезаписи словоформ при совпадении граммем. Продолжить?',
-  restoreArchive: 'При восстановлении архивной версии актуальная схему будет заменена. Продолжить?'
+  restoreArchive: 'При восстановлении архивной версии актуальная схему будет заменена. Продолжить?',
+  ownerChange:
+    'Вы уверены, что хотите изменить владельца? Вы потеряете право управления данной схемой. Данное действие отменить нельзя'
 };
 
 // ============== INTERNAL LABELS FOR DEVELOPERS TEXT ================