Refactoring: implement aliases and use client

.gitignore

@@ -56,6 +56,10 @@ bower_components
 
 *.sublime*
 
+# NextJS
+**/.next/
+**/out/
+
 
 # Environments
 venv/

rsconcept/frontend/.dockerignore

@@ -2,3 +2,4 @@
 .gitignore
 node_modules
 .env.local
+.next

rsconcept/frontend/src/App.tsx

@@ -1,4 +1,3 @@
-import { pdfjs } from 'react-pdf';
 import { createBrowserRouter, Outlet, RouterProvider } from 'react-router-dom';
 
 import ConceptToaster from './components/ConceptToaster';
@@ -18,11 +17,6 @@ import RSFormPage from './pages/RSFormPage';
 import UserProfilePage from './pages/UserProfilePage';
 import { globalIDs } from './utils/constants';
 
-pdfjs.GlobalWorkerOptions.workerSrc = new URL(
-  'pdfjs-dist/build/pdf.worker.min.js',
-  import.meta.url,
-).toString();
-
 function Root() {
   const { noNavigation, noFooter, viewportHeight, mainHeight, showScroll } = useConceptTheme();
   return (
@@ -45,7 +39,7 @@ function Root() {
         overflowY: showScroll ? 'scroll': 'auto'
       }}
     >
-      <main className='w-full h-full min-w-fit flex flex-col items-center' style={{minHeight: mainHeight}}>
+      <main className='flex flex-col items-center w-full h-full min-w-fit' style={{minHeight: mainHeight}}>
         <Outlet />
       </main>
       

rsconcept/frontend/src/GlobalProviders.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import { ErrorBoundary } from 'react-error-boundary';
+import { IntlProvider } from 'react-intl';
+import { pdfjs } from 'react-pdf';
+
+import { AuthState } from '@/context/AuthContext';
+import { LibraryState } from '@/context/LibraryContext';
+import { ThemeState } from '@/context/ThemeContext';
+import { UsersState } from '@/context/UsersContext';
+
+import ErrorFallback from './components/ErrorFallback';
+
+pdfjs.GlobalWorkerOptions.workerSrc = new URL(
+  'pdfjs-dist/build/pdf.worker.min.js',
+  import.meta.url,
+).toString();
+
+const resetState = () => {
+  console.log('Resetting state after error fallback')
+};
+
+const logError = (error: Error, info: { componentStack?: string | null | undefined }) => {
+  console.log('Error fallback: ' + error.message);
+  if (info.componentStack) {
+    console.log('Component stack: ' + info.componentStack);
+  }
+};
+
+function GlobalProviders({ children }: { children: React.ReactNode }) {
+  return (
+  <ErrorBoundary
+    FallbackComponent={ErrorFallback}
+    onReset={resetState}
+    onError={logError}
+  >
+  <IntlProvider locale='ru' defaultLocale='ru'>
+  <ThemeState>
+  <UsersState>
+  <AuthState>
+  <LibraryState>
+
+    {children}
+    
+  </LibraryState>
+  </AuthState>
+  </UsersState>
+  </ThemeState>
+  </IntlProvider>
+  </ErrorBoundary>);
+}
+
+export default GlobalProviders;

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/ConceptLoader.tsx

@@ -1,13 +1,15 @@
+'use client';
+
 import { ThreeDots } from 'react-loader-spinner';
 
-import { useConceptTheme } from '../../context/ThemeContext';
+import { useConceptTheme } from '@/context/ThemeContext';
 
 interface ConceptLoaderProps {
   size?: number
 }
 
 export function ConceptLoader({size=10}: ConceptLoaderProps) {
-  const {colors} = useConceptTheme()
+  const {colors} = useConceptTheme();
 
   return (
     <div className='flex justify-center w-full h-full'>

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

@@ -16,8 +16,7 @@ function ConceptTab({ label, tooltip, className, ...otherProps }: ConceptTabProp
     {...otherProps}
   >
     {label}
-  </Tab>
+  </Tab>);
-  );
 }
 
 ConceptTab.tabsRole = 'Tab';

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

@@ -1,7 +1,9 @@
+'use client';
+
 import { createPortal } from 'react-dom';
 import { ITooltip, Tooltip } from 'react-tooltip';
 
-import { useConceptTheme } from '../../context/ThemeContext';
+import { useConceptTheme } from '@/context/ThemeContext';
 
 interface ConceptTooltipProps
 extends Omit<ITooltip, 'variant'> {
@@ -17,6 +19,9 @@ function ConceptTooltip({
 }: ConceptTooltipProps) {
   const { darkMode } = useConceptTheme();
 
+  if (typeof window === 'undefined') {
+    return null;
+  }
   return createPortal(
   <Tooltip
     opacity={0.97}

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

@@ -1,3 +1,5 @@
+'use client';
+
 import { useRef, useState } from 'react';
 
 import { UploadIcon } from '../Icons';

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

@@ -0,0 +1,11 @@
+'use client';
+
+import { GraphCanvas as GraphUI } from 'reagraph';
+
+export {
+  type GraphEdge, type GraphNode, type GraphCanvasRef,
+  type LayoutTypes,
+  Sphere, useSelection
+} from 'reagraph';
+
+export default GraphUI;

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

@@ -1,6 +1,9 @@
+'use client';
+
 import { useRef } from 'react';
 
-import useEscapeKey from '../../hooks/useEscapeKey';
+import useEscapeKey from '@/hooks/useEscapeKey';
+
 import { CrossIcon } from '../Icons';
 import Button from './Button';
 import MiniButton from './MiniButton';

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

@@ -1,9 +1,12 @@
+'use client';
+
 import type { PDFDocumentProxy } from 'pdfjs-dist';
 import { useMemo, useState } from 'react';
 import { Document, Page } from 'react-pdf';
 
-import useWindowSize from '../../hooks/useWindowSize';
+import useWindowSize from '@/hooks/useWindowSize';
-import { graphLightT } from '../../utils/color';
+import { graphLightT } from '@/utils/color';
+
 import Overlay from './Overlay';
 import PageControls from './PageControls';
 
@@ -14,15 +17,12 @@ interface PDFViewerProps {
   file?: string | ArrayBuffer | Blob 
 }
 
-function PDFViewer({
+function PDFViewer({ file }: PDFViewerProps) {
-  file
-}: PDFViewerProps) {
   const windowSize = useWindowSize();
 
   const [pageCount, setPageCount] = useState(0);
   const [pageNumber, setPageNumber] = useState(1);
 
-  
   const pageWidth = useMemo(
   () => {
     return Math.max(MINIMUM_WIDTH, (Math.min((windowSize?.width ?? 0) - 300, MAXIMUM_WIDTH)));
@@ -48,7 +48,7 @@ function PDFViewer({
       />
     </Overlay>
     <Page
-      className='select-none pointer-events-none'
+      className='pointer-events-none select-none'
       renderTextLayer={false}
       renderAnnotationLayer={false}
       pageNumber={pageNumber}

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

@@ -1,4 +1,4 @@
-import { GotoFirstIcon, GotoLastIcon, GotoNextIcon, GotoPrevIcon } from '../Icons';
+import { GotoFirstIcon, GotoLastIcon, GotoNextIcon, GotoPrevIcon } from '@/components/Icons';
 
 interface PageControlsProps {
   pageNumber: number

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

@@ -3,7 +3,10 @@ interface PrettyJsonProps {
 }
 
 function PrettyJson({ data }: PrettyJsonProps) {
-  return (<pre>{JSON.stringify(data, null, 2)}</pre>);
+  return (
+  <pre>
+    {JSON.stringify(data, null, 2)}
+  </pre>);
 }
 
 export default PrettyJson;

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

@@ -1,8 +1,10 @@
+'use client';
+
 import { useMemo } from 'react';
 import Select, { GroupBase, Props, StylesConfig } from 'react-select';
 
-import { useConceptTheme } from '../../context/ThemeContext';
+import { useConceptTheme } from '@/context/ThemeContext';
-import { selectDarkT, selectLightT } from '../../utils/color';
+import { selectDarkT, selectLightT } from '@/utils/color';
 
 export interface SelectMultiProps<
   Option,
@@ -45,12 +47,11 @@ function SelectMulti<Option, Group extends GroupBase<Option> = GroupBase<Option>
     }),
     input: (styles) => ({...styles}),
     placeholder: (styles) => ({...styles}),
-    multiValue: styles => ({
+    multiValue: (styles) => ({
       ...styles,
       borderRadius: '0.5rem',
       backgroundColor: colors.bgSelected,
-    }),
+    })
-    
   }), [colors]);
 
   return (

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

@@ -1,8 +1,10 @@
+'use client';
+
 import { useMemo } from 'react';
 import Select, { GroupBase, Props, StylesConfig } from 'react-select';
 
-import { useConceptTheme } from '../../context/ThemeContext';
+import { useConceptTheme } from '@/context/ThemeContext';
-import { selectDarkT, selectLightT } from '../../utils/color';
+import { selectDarkT, selectLightT } from '@/utils/color';
 
 interface SelectSingleProps<
   Option,

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

@@ -1,6 +1,6 @@
 import { TextareaHTMLAttributes } from 'react';
 
-import { IColorsProps, IEditorProps } from '../commonInterfaces';
+import { IColorsProps, IEditorProps } from './commonInterfaces';
 import Label from './Label';
 
 export interface TextAreaProps 

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

@@ -1,4 +1,4 @@
-import { IColorsProps, IEditorProps } from '../commonInterfaces';
+import { IColorsProps, IEditorProps } from './commonInterfaces';
 import Label from './Label';
 
 interface TextInputProps 

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

@@ -1,5 +1,6 @@
 import { Link } from 'react-router-dom';
 
+
 interface TextURLProps {
   text: string
   tooltip?: string

rsconcept/frontend/src/components/ConceptToaster.tsx

@@ -1,6 +1,6 @@
 import { ToastContainer, type ToastContainerProps } from 'react-toastify';
 
-import { useConceptTheme } from '../context/ThemeContext';
+import { useConceptTheme } from '@/context/ThemeContext';
 
 interface ToasterThemedProps extends Omit<ToastContainerProps, 'theme'>{}
 

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

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   Cell, ColumnSort,
   createColumnHelper, flexRender, getCoreRowModel,
@@ -55,7 +57,7 @@ extends Pick<TableOptions<TData>,
  * @param headPosition - Top position of sticky header (0 if no other sticky elements are present). 
  * No sticky header if omitted
 */
-export default function DataTable<TData extends RowData>({
+function DataTable<TData extends RowData>({
   dense, headPosition, conditionalRowStyles, noFooter, noHeader,
   onRowClicked, onRowDoubleClicked, noDataComponent,
 
@@ -212,3 +214,5 @@ export default function DataTable<TData extends RowData>({
   {isEmpty ? (noDataComponent ?? <DefaultNoData />) : null}
   </div>);
 }
+
+export default DataTable;

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

@@ -1,7 +1,10 @@
+'use client';
+
 import { Table } from '@tanstack/react-table';
 import { useCallback } from 'react';
 
-import { prefixes } from '../../utils/constants';
+import { prefixes } from '@/utils/constants';
+
 import { GotoFirstIcon, GotoLastIcon, GotoNextIcon, GotoPrevIcon } from '../Icons';
 
 interface PaginationToolsProps<TData> {

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

@@ -1,6 +1,6 @@
 import { Table } from '@tanstack/react-table';
 
-import Tristate from '../Common/Tristate';
+import Tristate from '@/components/Common/Tristate';
 
 interface SelectAllProps<TData> {
   table: Table<TData>

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

@@ -1,6 +1,6 @@
 import { Row } from '@tanstack/react-table';
 
-import Checkbox from '../Common/Checkbox';
+import Checkbox from '@/components/Common/Checkbox';
 
 interface SelectRowProps<TData> {
   row: Row<TData>

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

@@ -1,6 +1,6 @@
 import { Column } from '@tanstack/react-table';
 
-import { AscendingIcon, DescendingIcon } from '../Icons';
+import { AscendingIcon, DescendingIcon } from '@/components/Icons';
 
 interface SortingIconProps<TData> {
   column: Column<TData>

rsconcept/frontend/src/components/ErrorFallback.tsx

@@ -1,16 +1,18 @@
 import { type FallbackProps } from 'react-error-boundary';
 
 import Button from './Common/Button';
+import InfoError from './InfoError';
 
 function ErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
-  reportError(error);
   return (
   <div className='flex flex-col items-center antialiased clr-app' role='alert'>
     <h1 className='text-lg font-semibold'>Что-то пошло не так!</h1>
-      {error}
+    <Button
-      <Button onClick={resetErrorBoundary} text='Попробовать еще раз' />
+      onClick={resetErrorBoundary}
-    </div>
+      text='Попробовать еще раз'
-  );
+    />
+    <InfoError error={error as Error} />
+  </div>);
 }
 
 export default ErrorFallback;

rsconcept/frontend/src/components/ExpectedAnonymous.tsx

@@ -1,20 +1,21 @@
-import { useAuth } from '../context/AuthContext';
+import { useAuth } from '@/context/AuthContext';
-import { useConceptNavigation } from '../context/NagivationContext';
+import { useConceptNavigation } from '@/context/NagivationContext';
+
 import TextURL from './Common/TextURL';
 
 function ExpectedAnonymous() {
   const { user, logout } = useAuth();
-  const { navigateTo } = useConceptNavigation();
+  const router = useConceptNavigation();
 
   function logoutAndRedirect() {
-    logout(() => navigateTo('/login/'));
+    logout(() => router.push('/login/'));
   }
 
   return (
   <div className='flex flex-col items-center gap-3 py-6'>
     <p className='font-semibold'>{`Вы вошли в систему как ${user?.username ?? ''}`}</p>
     <div className='flex gap-3'>
-      <TextURL text='Новая схема' href='/rsform-create'/>
+      <TextURL text='Новая схема' href='/library/create'/>
       <span> | </span>
       <TextURL text='Библиотека' href='/library'/>
       <span> | </span>

rsconcept/frontend/src/components/Footer.tsx

@@ -1,4 +1,4 @@
-import { urls } from '../utils/constants';
+import { urls } from '@/utils/constants';
 import TextURL from './Common/TextURL';
 
 function Footer() {

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

@@ -1,6 +1,6 @@
-import { IConstituenta } from '../../models/rsform';
+import ConceptTooltip from '@/components/Common/ConceptTooltip';
-import ConceptTooltip from '../Common/ConceptTooltip';
+import InfoConstituenta from '@/components/Shared/InfoConstituenta';
-import InfoConstituenta from '../Shared/InfoConstituenta';
+import { IConstituenta } from '@/models/rsform';
 
 interface ConstituentaTooltipProps {
   data: IConstituenta

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

@@ -1,5 +1,5 @@
-import { urls } from '../../utils/constants';
+import TextURL from '@/components/Common/TextURL';
-import TextURL from '../Common/TextURL';
+import { urls } from '@/utils/constants';
 
 function HelpAPI() {
   return (

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

@@ -1,7 +1,8 @@
-import { HelpTopic } from '../../models/miscelanious';
+import ConceptTooltip from '@/components/Common/ConceptTooltip';
-import ConceptTooltip from '../Common/ConceptTooltip';
+import TextURL from '@/components/Common/TextURL';
-import TextURL from '../Common/TextURL';
+import { HelpIcon } from '@/components/Icons';
-import { HelpIcon } from '../Icons';
+import { HelpTopic } from '@/models/miscelanious';
+
 import InfoTopic from './InfoTopic';
 
 interface HelpButtonProps {

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

@@ -1,5 +1,5 @@
-import Divider from '../Common/Divider';
+import Divider from '@/components/Common/Divider';
-import InfoCstStatus from '../Shared/InfoCstStatus';
+import InfoCstStatus from '@/components/Shared/InfoCstStatus';
 
 function HelpConstituenta() {
   return (

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

@@ -1,5 +1,5 @@
-import { urls } from '../../utils/constants';
+import TextURL from '@/components/Common/TextURL';
-import TextURL from '../Common/TextURL';
+import { urls } from '@/utils/constants';
 
 function HelpExteor() {
   return (

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

@@ -1,4 +1,4 @@
-import { EducationIcon, GroupIcon,SubscribedIcon } from '../Icons';
+import { EducationIcon, GroupIcon,SubscribedIcon } from '@/components/Icons';
 
 function HelpLibrary() {
   return (

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

@@ -1,5 +1,5 @@
-import { urls } from '../../utils/constants';
+import TextURL from '@/components/Common/TextURL';
-import TextURL from '../Common/TextURL';
+import { urls } from '@/utils/constants';
 
 function HelpMain() {
   return (

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

@@ -1,5 +1,5 @@
-import { resources } from '../../utils/constants';
+import PDFViewer from '@/components/Common/PDFViewer';
-import PDFViewer from '../Common/PDFViewer';
+import { resources } from '@/utils/constants';
 
 function HelpPrivacy() {
   return (

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

@@ -1,5 +1,5 @@
-import Divider from '../Common/Divider';
+import Divider from '@/components/Common/Divider';
-import InfoCstStatus from '../Shared/InfoCstStatus';
+import InfoCstStatus from '@/components/Shared/InfoCstStatus';
 
 function HelpRSFormItems() {
   return (

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

@@ -1,8 +1,8 @@
 import { useMemo } from 'react';
 
-import useWindowSize from '../../hooks/useWindowSize';
+import EmbedYoutube from '@/components/Common/EmbedYoutube';
-import { urls, youtube } from '../../utils/constants';
+import useWindowSize from '@/hooks/useWindowSize';
-import EmbedYoutube from '../Common/EmbedYoutube';
+import { urls, youtube } from '@/utils/constants';
 
 const OPT_VIDEO_H = 1080;
 

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

@@ -1,6 +1,6 @@
-import Divider from '../Common/Divider';
+import Divider from '@/components/Common/Divider';
-import InfoCstClass from '../Shared/InfoCstClass';
+import InfoCstClass from '@/components/Shared/InfoCstClass';
-import InfoCstStatus from '../Shared/InfoCstStatus';
+import InfoCstStatus from '@/components/Shared/InfoCstStatus';
 
 function HelpTermGraph() {
   return (

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

@@ -1,4 +1,5 @@
-import { HelpTopic } from '../../models/miscelanious';
+import { HelpTopic } from '@/models/miscelanious';
+
 import HelpAPI from './HelpAPI';
 import HelpConstituenta from './HelpConstituenta';
 import HelpExteor from './HelpExteor';

rsconcept/frontend/src/components/InfoError.tsx

@@ -1,15 +1,16 @@
-import axios, { type AxiosError,AxiosHeaderValue } from 'axios';
+import axios, { type AxiosError } from 'axios';
+
+import { isResponseHtml } from '@/utils/utils';
 
 import PrettyJson from './Common/PrettyJSON';
 
-export type ErrorInfo = string | Error | AxiosError | undefined;
+export type ErrorData = string | Error | AxiosError | undefined;
 
-interface BackendErrorProps {
+interface InfoErrorProps {
-  error: ErrorInfo
+  error: ErrorData
 }
 
-function DescribeError(error: ErrorInfo) {
+function DescribeError({error} : {error: ErrorData}) {
-  reportError(error);
   if (!error) {
     return <p>Ошибки отсутствуют</p>;
   } else if (typeof error === 'string') {
@@ -25,25 +26,11 @@ function DescribeError(error: ErrorInfo) {
     <div className='flex flex-col justify-start'>
       <p>{'Обращение к несуществующему API'}</p>
       <PrettyJson data={error} />
-      </div>
+    </div>);
-    );
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call
-  const isHtml = (() => {
+  const isHtml = isResponseHtml(error.response);
-    if (!error.response) {
-      return false;
-    }
-    const header = error.response.headers['content-type'] as AxiosHeaderValue;
-    if (!header) {
-      return false;
-    }
-    if (typeof header === 'number' || typeof header === 'boolean') {
-      return false;
-    }
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-call
-    return header.includes('text/html');
-  })();
   return (
     <div className='flex flex-col justify-start'>
       <p className='underline'>Ошибка</p>
@@ -57,11 +44,11 @@ function DescribeError(error: ErrorInfo) {
   );
 }
 
-function BackendError({ error }: BackendErrorProps) {
+function InfoError({ error }: InfoErrorProps) {
   return (
   <div className='px-3 py-2 min-w-[15rem] text-sm font-semibold select-text text-warning'>
-    {DescribeError(error)}
+    <DescribeError error={error} />
   </div>);
 }
 
-export default BackendError;
+export default InfoError;

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

@@ -1,34 +1,11 @@
-import { Link } from 'react-router-dom';
+import { useConceptTheme } from '@/context/ThemeContext';
-
-import { useConceptTheme } from '../../context/ThemeContext';
-import useWindowSize from '../../hooks/useWindowSize';
-
-const HIDE_LOGO_TEXT_LIMIT = 700;
 
 function Logo() {
   const { darkMode } = useConceptTheme();
-  const windowSize = useWindowSize();
-
   return (
-  <Link to='/' tabIndex={-1}
+  <img alt='Логотип КонцептПортал'
-    className='flex items-center h-full mr-2'
+    className='max-h-[1.6rem]'
-  >
+    src={!darkMode ? '/logo_full.svg' : '/logo_full_dark.svg'}
-    {(windowSize.width && windowSize.width >= HIDE_LOGO_TEXT_LIMIT && !darkMode) ?
+  />);
-    <img alt=''
-      src='/logo_full.svg'
-      className='max-h-[1.6rem] min-w-[1.6rem]'
-    /> : null}
-    {(windowSize.width && windowSize.width >= HIDE_LOGO_TEXT_LIMIT && darkMode) ?
-    <img alt=''
-      src='/logo_full_dark.svg'
-      className='max-h-[1.6rem] min-w-[1.6rem]'
-    /> : null}
-    {(!windowSize.width || windowSize.width < HIDE_LOGO_TEXT_LIMIT) ? 
-    <img alt=''
-      src='/logo_sign.svg'
-      className='max-h-[1.6rem] min-w-[2.2rem]'
-      
-    /> : null}
-  </Link>);
 }
 export default Logo;

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

@@ -1,25 +1,27 @@
-import { useConceptNavigation } from '../../context/NagivationContext';
+import { useConceptNavigation } from '@/context/NagivationContext';
-import { useConceptTheme } from '../../context/ThemeContext';
+import { useConceptTheme } from '@/context/ThemeContext';
-import { EducationIcon, LibraryIcon, PlusIcon } from '../Icons';
+
-import Logo from './Logo'
+import { EducationIcon, LibraryIcon, PlusIcon } from '@/components/Icons';
+import Logo from './Logo';
 import NavigationButton from './NavigationButton';
 import ToggleNavigationButton from './ToggleNavigationButton';
 import UserMenu from './UserMenu';
 
 function Navigation () {
-  const { navigateTo } = useConceptNavigation();
+  const router = useConceptNavigation();
   const { noNavigation } = useConceptTheme();
 
-  const navigateLibrary = () => navigateTo('/library');
+  const navigateHome = () => router.push('/');
-  const navigateHelp = () => navigateTo('/manuals');
+  const navigateLibrary = () => router.push('/library');
-  const navigateCreateNew = () => navigateTo('/rsform-create');
+  const navigateHelp = () => router.push('/manuals');
+  const navigateCreateNew = () => router.push('/library/create');
 
   return (
-  <nav className='sticky top-0 left-0 right-0 select-none clr-app z-navigation h-fit'>
+  <nav className='sticky top-0 left-0 right-0 select-none clr-app z-navigation'>
     <ToggleNavigationButton />
     {!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'>
+      <div className='flex items-center mr-2 cursor-pointer' onClick={navigateHome} tabIndex={-1}>
         <Logo />
       </div>
       <div className='flex items-center h-full'>

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

@@ -1,5 +1,6 @@
-import { useConceptTheme } from '../../context/ThemeContext';
+import { DarkThemeIcon, LightThemeIcon } from '@/components/Icons';
-import { DarkThemeIcon, LightThemeIcon } from '../Icons';
+import { useConceptTheme } from '@/context/ThemeContext';
+
 import NavigationButton from './NavigationButton';
 
 function ThemeSwitcher() {

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

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 
-import { useConceptTheme } from '../../context/ThemeContext';
+import { useConceptTheme } from '@/context/ThemeContext';
 
 function ToggleNavigationButton() {
   const { noNavigation, toggleNoNavigation } = useConceptTheme();

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

@@ -1,8 +1,8 @@
-import { useAuth } from '../../context/AuthContext';
+import Dropdown from '@/components/Common/Dropdown';
-import { useConceptNavigation } from '../../context/NagivationContext';
+import DropdownButton from '@/components/Common/DropdownButton';
-import { useConceptTheme } from '../../context/ThemeContext';
+import { useAuth } from '@/context/AuthContext';
-import Dropdown from '../Common/Dropdown';
+import { useConceptNavigation } from '@/context/NagivationContext';
-import DropdownButton from '../Common/DropdownButton';
+import { useConceptTheme } from '@/context/ThemeContext';
 
 interface UserDropdownProps {
   hideDropdown: () => void
@@ -10,18 +10,18 @@ interface UserDropdownProps {
 
 function UserDropdown({ hideDropdown }: UserDropdownProps) {
   const { darkMode, toggleDarkMode } = useConceptTheme();
-  const { navigateTo } = useConceptNavigation();
+  const router = useConceptNavigation();
   const { user, logout } = useAuth();
 
   const navigateProfile = () => {
     hideDropdown();
-    navigateTo('/profile');
+    router.push('/profile');
   };
 
   const logoutAndRedirect =
   () => {
     hideDropdown();
-    logout(() => navigateTo('/login/'));
+    logout(() => router.push('/login/'));
   };
 
   return (

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

@@ -1,22 +1,22 @@
-import { useAuth } from '../../context/AuthContext';
+import { InDoorIcon, UserIcon } from '@/components/Icons';
-import { useConceptNavigation } from '../../context/NagivationContext';
+import { useAuth } from '@/context/AuthContext';
-import useDropdown from '../../hooks/useDropdown';
+import { useConceptNavigation } from '@/context/NagivationContext';
-import { InDoorIcon, UserIcon } from '../Icons';
+import useDropdown from '@/hooks/useDropdown';
+
 import NavigationButton from './NavigationButton';
 import UserDropdown from './UserDropdown';
 
 function UserMenu() {
-  const { navigateTo } = useConceptNavigation();
+  const router = useConceptNavigation();
   const { user } = useAuth();
   const menu = useDropdown();
 
-  const navigateLogin = () => navigateTo('/login');
+  const navigateLogin = () => router.push('/login');
   return (
   <div ref={menu.ref} className='h-full'>
     <div className='flex items-center justify-end h-full w-fit'>
     {!user ?
     <NavigationButton
-      text='Войти...'
       description='Перейти на страницу логина'
       icon={<InDoorIcon />}
       onClick={navigateLogin}

rsconcept/frontend/src/components/RSInput/RSInput.tsx

@@ -6,9 +6,10 @@ import CodeMirror, { BasicSetupOptions, ReactCodeMirrorProps, ReactCodeMirrorRef
 import { EditorView } from 'codemirror';
 import { RefObject, useCallback, useMemo, useRef } from 'react';
 
-import { useRSForm } from '../../context/RSFormContext';
+import Label from '@/components/Common/Label';
-import { useConceptTheme } from '../../context/ThemeContext';
+import { useRSForm } from '@/context/RSFormContext';
-import Label from '../Common/Label';
+import { useConceptTheme } from '@/context/ThemeContext';
+
 import { ccBracketMatching } from './bracketMatching';
 import { RSLanguage } from './rslang';
 import { getSymbolSubstitute,RSTextWrapper } from './textEditing';

rsconcept/frontend/src/components/RSInput/bracketMatching.ts

@@ -1,7 +1,7 @@
 import { bracketMatching, MatchResult } from '@codemirror/language';
 import { Decoration, EditorView } from '@codemirror/view';
 
-import { bracketsDarkT, bracketsLightT } from '../../utils/color';
+import { bracketsDarkT, bracketsLightT } from '@/utils/color';
 
 const matchingMark = Decoration.mark({class: 'cc-matchingBracket'});
 const nonmatchingMark = Decoration.mark({class: 'cc-nonmatchingBracket'});

rsconcept/frontend/src/components/RSInput/rslang/parser.test.ts

@@ -28,9 +28,9 @@ const testData = [
   ['ℬℬ(X1)', '[Expression[Boolean[ℬ][Boolean[ℬ][(][Global][)]]]]'],
   ['P2[S1]', '[Expression[PredicateCall[Predicate][[][Global][]]]]'],
   ['[σ∈R1×R1] F6[σ]', '[Expression[FunctionDeclaration[[][Local][∈][BinaryOperation[Radical][×][Radical]][]][FunctionCall[Function][[][Local][]]]]]'],
-  ['D{ξ∈red(S1) | ξ=ξ}', '[Expression[Declarative[PrefixD][{][Variable[Local]][∈][TextFunctionExpression[TextFunction][(][Global][)]][LogicPredicate[Local][=][Local]][}]]]'],
+  ['D{ξ∈red(S1) | ξ=ξ}', '[Expression[Declarative[PrefixD][{][Variable[Local]][∈][TextFunctionExpression[TextFunction][(][Global][)]][|][LogicPredicate[Local][=][Local]][}]]]'],
-  ['I{(σ, γ) | σ:∈X1; γ:=F1[σ]; P1[σ, γ]}', '[Expression[Imperative[PrefixI][{][Tuple[(][Local][Local][)]][ImperativeBlocks[ImperativeBlocks[ImperativeBlocks[ImperativeIteration[Local][:∈][Global]]][ImperativeAssignment[Local][:=][FunctionCall[Function][[][Local][]]]]][ImperativeCondition[PredicateCall[Predicate][[][Local][Local][]]]]][}]]]'],
+  ['I{(σ, γ) | σ:∈X1; γ:=F1[σ]; P1[σ, γ]}', '[Expression[Imperative[PrefixI][{][Tuple[(][Local][Local][)]][|][ImperativeBlocks[ImperativeBlocks[ImperativeBlocks[ImperativeIteration[Local][:∈][Global]]][;][ImperativeAssignment[Local][:=][FunctionCall[Function][[][Local][]]]]][;][ImperativeCondition[PredicateCall[Predicate][[][Local][Local][]]]]][}]]]'],
-  ['R{ξ:=D1 | F1[ξ]≠∅ | ξ∪F1[ξ]}', '[Expression[Recursion[PrefixR][{][Variable[Local]][:=][Global][LogicPredicate[FunctionCall[Function][[][Local][]]][≠][Literal]][BinaryOperation[Local][∪][FunctionCall[Function][[][Local][]]]][}]]]'],
+  ['R{ξ:=D1 | F1[ξ]≠∅ | ξ∪F1[ξ]}', '[Expression[Recursion[PrefixR][{][Variable[Local]][:=][Global][|][LogicPredicate[FunctionCall[Function][[][Local][]]][≠][Literal]][|][BinaryOperation[Local][∪][FunctionCall[Function][[][Local][]]]][}]]]'],
   ['∀ξ∈∅ 1=1', '[Expression[LogicQuantor[∀][QuantorVariable[Variable[Local]]][∈][Literal][LogicPredicate[Literal][=][Literal]]]]'],
   ['∀ξ1∈β (ξ1≠∅ & ∀ξ2∈β ξ1∩ξ2=∅)', '[Expression[LogicQuantor[∀][QuantorVariable[Variable[Local[Index]]]][∈][Local][(][LogicBinary[LogicPredicate[Local[Index]][≠][Literal]][&][LogicQuantor[∀][QuantorVariable[Variable[Local[Index]]]][∈][Local][LogicPredicate[BinaryOperation[Local[Index]][∩][Local[Index]]][=][Literal]]]][)]]]']
 ];

rsconcept/frontend/src/components/RSInput/rslang/parser.ts

@@ -1,6 +1,6 @@
 // This file was generated by lezer-generator. You probably shouldn't edit it.
 import {LRParser} from "@lezer/lr"
-import {highlighting} from "./highlight.ts"
+import {highlighting} from "./highlight"
 export const parser = LRParser.deserialize({
   version: 14,
   states: "7WO!sQPOOOOQO'#C_'#C_O!zQPO'#C`O&bQPO'#D{OVQPO'#CdO&iQPO'#CqO'yQPO'#CsO(RQPO'#CuO(WQPO'#C|O(]QPO'#DVOOQO'#ES'#ESO(bQPO'#DXO(gQQO'#D]OOQO'#D]'#D]O(lQQO'#D_O(qQPO'#D[O(vQPO'#D[OOQO'#D}'#D}O({QPO'#DjOVQPO'#DlO)QQPO'#DnOOQO'#Ea'#EaO)YQPO'#D{OOQO'#D|'#D|O)TQPO'#DwQOQPOOOOQO'#Ca'#CaOOQO,58z,58zO&iQPO,59OO&iQPO,59OO&iQPO,59OO&iQPO,59OO&iQPO,59OO&iQPO,59OO&iQPO,59OO&iQPO,59OO&iQPO,58xO)kQPO'#ETO+PQPO,59OO+ZQPO'#EUO+`QPO,59^O+hQPO,5:}O,eQPO'#ETO&iQPO'#CdO,rQPO,59]OOQO'#ET'#ETO-fQPO,59aO&iQPO,59_OOQO,59_,59_O)QQPO,59aO&iQPO,59hO)QQPO,59qO&iQPO,59sOOQO,59w,59wOOQO,59y,59yO&iQPO,59vO&iQPO,59vO&iQPO,5:UO%TQPO'#C^OOQO,5:W,5:WOOQO'#Cy'#CyO)QQPO'#CyO-sQPO,5:YOOQO'#Dp'#DpOVQPO,5:^OVQPO,5:^OVQPO,5:^OVQPO,5:^O-{QPO'#EeOOQO'#Ed'#EdO.QQPO,5:cOOQO1G.j1G.jO0VQPO1G.jO0^QPO1G.jO2bQPO1G.jO4fQPO1G.jO4mQPO1G.jO4tQPO1G.jO5^QPO1G.jO7PQPO1G.dO&iQPO,5:pOOQO1G.x1G.xOOQO1G0i1G0iOOQO1G.w1G.wO&iQPO1G.{O7pQPO1G.yO7wQPO1G.{O7|QPO1G/SO8TQPO1G/]O8YQPO1G/_O8bQPO1G/bO8iQPO1G/bO8qQPO1G/pOOQO'#EW'#EWO8yQPO,59eO9RQPO'#CzO)QQPO,5:|O9WQPO1G/tOOQO1G/x1G/xO;SQPO1G/xO;ZQPO1G/xO;bQPO1G/xO&iQPO,5;PO)TQPO,5;OOVQPO1G/}O<PQPO1G0[O<aQPO7+$gOOQO7+$e7+$eO&iQPO7+$gOVQPO7+$nO&iQPO7+$wOOQO7+$y7+$yOOQO7+$|7+$|O<hQPO7+$|OOQO7+%[7+%[OOQO1G/P1G/PO)QQPO,59fOOQO1G0h1G0hOOQO'#C`'#C`O<mQPO7+%`O=ZQPO1G0kOOQO1G0j1G0jOOQO7+%i7+%iOVQPO<<HRO=eQPO<<HRO=lQPO'#D}O=vQPO'#DSOOQO'#EX'#EXOOQO'#C}'#C}O>[QPO<<HYO>dQPO<<HcO&iQPO<<HhOOQO1G/Q1G/QO>kQPO<<HzO?YQPOAN=mOVQPOAN=mO&iQPO,59jO&iQPO,59lOVQPO,59iOOQOAN=tAN=tOVQPOAN=}O?kQPOAN>SOOQOG23XG23XO?rQPOG23XO@TQPO1G/UO@_QPO1G/WOOQO1G/T1G/TO@iQPOG23iO@pQPOG23iOOQOG23nG23nOOQOLD(sLD(sOOQOLD)TLD)TO&iQPOLD)TOARQPO!$'LoOOQO!)9BZ!)9BZO9WQPO,59OO9WQPO,59OO9WQPO,59OO9WQPO,59OO9WQPO,59OO9WQPO,59OO9WQPO,59OO9WQPO,59OOAYQPO1G.jOCRQPO1G.jOF}QPO1G.jOIXQPO1G.jOI`QPO1G.jOIgQPO1G.jOInQPO1G.j",

rsconcept/frontend/src/components/RSInput/rslang/rslangFull.grammar

@@ -197,4 +197,4 @@ ImperativeCondition { logic }
 
 @detectDelim
 
-@external propSource highlighting from "./highlight.ts"
+@external propSource highlighting from "./highlight"

rsconcept/frontend/src/components/RSInput/rslang/rslangLex.grammar

@@ -51,4 +51,4 @@ token {
 
 @detectDelim
 
-@external propSource highlighting from "./highlight.ts"
+@external propSource highlighting from "./highlight"

rsconcept/frontend/src/components/RSInput/textEditing.ts

@@ -2,8 +2,8 @@
 
 import { ReactCodeMirrorRef } from '@uiw/react-codemirror';
 
-import { TokenID } from '../../models/rslang';
+import { TokenID } from '@/models/rslang';
-import { CodeMirrorWrapper } from '../../utils/codemirror';
+import { CodeMirrorWrapper } from '@/utils/codemirror';
 
 export function getSymbolSubstitute(keyCode: string, shiftPressed: boolean): string | undefined {
   if (shiftPressed) {

rsconcept/frontend/src/components/RSInput/tooltip.ts

@@ -3,9 +3,9 @@ import { Extension } from '@codemirror/state';
 import { hoverTooltip } from '@codemirror/view';
 import { EditorState } from '@uiw/react-codemirror';
 
-import { IConstituenta } from '../../models/rsform';
+import { IConstituenta } from '@/models/rsform';
-import { findEnvelopingNodes } from '../../utils/codemirror';
+import { findEnvelopingNodes } from '@/utils/codemirror';
-import { domTooltipConstituenta } from '../../utils/codemirror';
+import { domTooltipConstituenta } from '@/utils/codemirror';
 import { GlobalTokens } from './rslang';
 
 function findAliasAt(pos: number, state: EditorState) {

rsconcept/frontend/src/components/RefsInput/RefsInput.tsx

@@ -6,16 +6,17 @@ import CodeMirror, { BasicSetupOptions, ReactCodeMirrorProps, ReactCodeMirrorRef
 import { EditorView } from 'codemirror';
 import { RefObject, useCallback, useMemo, useRef, useState } from 'react';
 
-import { useRSForm } from '../../context/RSFormContext';
+import Label from '@/components/Common/Label';
-import { useConceptTheme } from '../../context/ThemeContext';
+import Modal from '@/components/Common/Modal';
-import DlgEditReference from '../../dialogs/DlgEditReference';
+import PrettyJson from '@/components/Common/PrettyJSON';
-import useResolveText from '../../hooks/useResolveText';
+import { useRSForm } from '@/context/RSFormContext';
-import { ReferenceType } from '../../models/language';
+import { useConceptTheme } from '@/context/ThemeContext';
-import { IConstituenta } from '../../models/rsform';
+import DlgEditReference from '@/dialogs/DlgEditReference';
-import { CodeMirrorWrapper } from '../../utils/codemirror';
+import useResolveText from '@/hooks/useResolveText';
-import Label from '../Common/Label';
+import { ReferenceType } from '@/models/language';
-import Modal from '../Common/Modal';
+import { IConstituenta } from '@/models/rsform';
-import PrettyJson from '../Common/PrettyJSON';
+import { CodeMirrorWrapper } from '@/utils/codemirror';
+
 import { NaturalLanguage, ReferenceTokens } from './parse';
 import { RefEntity } from './parse/parser.terms';
 import { refsHoverTooltip } from './tooltip';

rsconcept/frontend/src/components/RefsInput/parse/parser.ts

@@ -1,6 +1,6 @@
 // This file was generated by lezer-generator. You probably shouldn't edit it.
 import {LRParser} from "@lezer/lr"
-import {highlighting} from "./highlight.ts"
+import {highlighting} from "./highlight"
 export const parser = LRParser.deserialize({
   version: 14,
   states: "$nQVQPOOObQQO'#C^OOQO'#Cl'#ClOjQPO'#CuOxQPO'#CdOOQO'#Ce'#CeOOQO'#Ck'#CkOOQO'#Cf'#CfQVQPOOO}QPO,58xO!SQPO,58{OOQO,59a,59aO!XQPO,59OOOQO-E6d-E6dO!^QSO1G.dO!cQPO1G.gOOQO1G.j1G.jO!hQQO'#CpOOQO'#C`'#C`O!pQPO7+$OOOQO'#Cg'#CgO!uQPO'#CcO!}QPO7+$RO!^QSO,59[OOQO<<Gj<<GjOOQO-E6e-E6eOOQO<<Gm<<GmOOQO1G.v1G.v",

rsconcept/frontend/src/components/RefsInput/parse/refsText.grammar

@@ -56,4 +56,4 @@ Nominal { word+ }
 
 @detectDelim
 
-@external propSource highlighting from "./highlight.ts"
+@external propSource highlighting from "./highlight"

rsconcept/frontend/src/components/RefsInput/tooltip.ts

@@ -2,10 +2,10 @@ import { syntaxTree } from '@codemirror/language'
 import { Extension } from '@codemirror/state';
 import { hoverTooltip } from '@codemirror/view';
 
-import { parseEntityReference, parseSyntacticReference } from '../../models/languageAPI';
+import { parseEntityReference, parseSyntacticReference } from '@/models/languageAPI';
-import { IConstituenta } from '../../models/rsform';
+import { IConstituenta } from '@/models/rsform';
-import { domTooltipEntityReference, domTooltipSyntacticReference, findContainedNodes, findEnvelopingNodes } from '../../utils/codemirror';
+import { domTooltipEntityReference, domTooltipSyntacticReference, findContainedNodes, findEnvelopingNodes } from '@/utils/codemirror';
-import { IColorTheme } from '../../utils/color';
+import { IColorTheme } from '@/utils/color';
 import { ReferenceTokens } from './parse';
 import { RefEntity, RefSyntactic } from './parse/parser.terms';
 

rsconcept/frontend/src/components/RequireAuth.tsx

@@ -1,4 +1,7 @@
-import { useAuth } from '../context/AuthContext';
+'use client';
+
+import { useAuth } from '@/context/AuthContext';
+
 import TextURL from './Common/TextURL';
 
 interface RequireAuthProps {

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

@@ -1,9 +1,9 @@
-import { IConstituenta } from '../../models/rsform';
+import ConceptTooltip from '@/components/Common/ConceptTooltip';
-import { isMockCst } from '../../models/rsformAPI';
+import ConstituentaTooltip from '@/components/Help/ConstituentaTooltip';
-import { colorfgCstStatus,IColorTheme } from '../../utils/color';
+import { IConstituenta } from '@/models/rsform';
-import { describeExpressionStatus } from '../../utils/labels';
+import { isMockCst } from '@/models/rsformAPI';
-import ConceptTooltip from '../Common/ConceptTooltip';
+import { colorfgCstStatus,IColorTheme } from '@/utils/color';
-import ConstituentaTooltip from '../Help/ConstituentaTooltip';
+import { describeExpressionStatus } from '@/utils/labels';
 
 interface ConstituentaBadgeProps {
   prefixID?: string

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

@@ -1,13 +1,14 @@
 import { useEffect, useMemo, useState } from 'react';
 
-import { useConceptTheme } from '../../context/ThemeContext';
+import ConceptSearch from '@/components/Common/ConceptSearch';
-import { CstMatchMode } from '../../models/miscelanious';
+import DataTable, { createColumnHelper, IConditionalStyle } from '@/components/DataTable';
-import { IConstituenta } from '../../models/rsform';
+import { useConceptTheme } from '@/context/ThemeContext';
-import { matchConstituenta } from '../../models/rsformAPI';
+import { CstMatchMode } from '@/models/miscelanious';
-import { prefixes } from '../../utils/constants';
+import { IConstituenta } from '@/models/rsform';
-import { describeConstituenta } from '../../utils/labels';
+import { matchConstituenta } from '@/models/rsformAPI';
-import ConceptSearch from '../Common/ConceptSearch';
+import { prefixes } from '@/utils/constants';
-import DataTable, { createColumnHelper, IConditionalStyle } from '../DataTable';
+import { describeConstituenta } from '@/utils/labels';
+
 import ConstituentaBadge from './ConstituentaBadge';
 
 interface ConstituentaPickerProps {

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

@@ -1,7 +1,7 @@
-import { useConceptTheme } from '../../context/ThemeContext';
+import { useConceptTheme } from '@/context/ThemeContext';
-import { GramData } from '../../models/language';
+import { GramData } from '@/models/language';
-import { colorfgGrammeme } from '../../utils/color';
+import { colorfgGrammeme } from '@/utils/color';
-import { labelGrammeme } from '../../utils/labels';
+import { labelGrammeme } from '@/utils/labels';
 
 interface GrammemeBadgeProps {
   key?: string

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

@@ -1,5 +1,5 @@
-import { IConstituenta } from '../../models/rsform';
+import { IConstituenta } from '@/models/rsform';
-import { labelCstTypification } from '../../utils/labels';
+import { labelCstTypification } from '@/utils/labels';
 
 interface InfoConstituentaProps
 extends React.HTMLAttributes<HTMLDivElement> {

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

@@ -1,8 +1,8 @@
-import { useConceptTheme } from '../../context/ThemeContext';
+import { useConceptTheme } from '@/context/ThemeContext';
-import { CstClass } from '../../models/rsform';
+import { CstClass } from '@/models/rsform';
-import { colorbgCstClass } from '../../utils/color';
+import { colorbgCstClass } from '@/utils/color';
-import { prefixes } from '../../utils/constants';
+import { prefixes } from '@/utils/constants';
-import { describeCstClass, labelCstClass } from '../../utils/labels';
+import { describeCstClass, labelCstClass } from '@/utils/labels';
 
 interface InfoCstClassProps {
   title?: string

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

@@ -1,8 +1,8 @@
-import { useConceptTheme } from '../../context/ThemeContext';
+import { useConceptTheme } from '@/context/ThemeContext';
-import { ExpressionStatus } from '../../models/rsform';
+import { ExpressionStatus } from '@/models/rsform';
-import { colorbgCstStatus } from '../../utils/color';
+import { colorbgCstStatus } from '@/utils/color';
-import { prefixes } from '../../utils/constants';
+import { prefixes } from '@/utils/constants';
-import { describeExpressionStatus, labelExpressionStatus } from '../../utils/labels';
+import { describeExpressionStatus, labelExpressionStatus } from '@/utils/labels';
 
 interface InfoCstStatusProps {
   title?: string

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

@@ -1,7 +1,7 @@
 import { useIntl } from 'react-intl';
 
-import { useUsers } from '../../context/UsersContext';
+import { useUsers } from '@/context/UsersContext';
-import { ILibraryItemEx } from '../../models/library';
+import { ILibraryItemEx } from '@/models/library';
 
 interface InfoLibraryItemProps {
   item?: ILibraryItemEx

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

@@ -1,9 +1,9 @@
 import { useEffect, useState } from 'react';
 
-import { Grammeme } from '../../models/language';
+import SelectMulti, { SelectMultiProps } from '@/components/Common/SelectMulti';
-import { getCompatibleGrams } from '../../models/languageAPI';
+import { Grammeme } from '@/models/language';
-import { compareGrammemeOptions,IGrammemeOption, SelectorGrammems } from '../../utils/selectors';
+import { getCompatibleGrams } from '@/models/languageAPI';
-import SelectMulti, { SelectMultiProps } from '../Common/SelectMulti';
+import { compareGrammemeOptions,IGrammemeOption, SelectorGrammems } from '@/utils/selectors';
 
 interface SelectGrammemeProps extends
 Omit<SelectMultiProps<IGrammemeOption>, 'value' | 'onChange'> {

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

@@ -1,4 +1,4 @@
-import Overlay from '../Common/Overlay';
+import Overlay from '@/components/Common/Overlay';
 
 interface SelectedCounterProps {
   total: number

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

@@ -1,4 +1,5 @@
-import { IWordForm } from '../../models/language';
+import { IWordForm } from '@/models/language';
+
 import GrammemeBadge from './GrammemeBadge';
 
 interface WordFormBadgeProps {

rsconcept/frontend/src/context/AuthContext.tsx

@@ -1,14 +1,17 @@
+'use client';
+
 import { createContext, useCallback, useContext, useLayoutEffect, useState } from 'react';
 
-import { type ErrorInfo } from '../components/BackendError';
+import { type ErrorData } from '@/components/InfoError';
-import useLocalStorage from '../hooks/useLocalStorage';
+import useLocalStorage from '@/hooks/useLocalStorage';
-import { IUserLoginData } from '../models/library';
+import { IUserLoginData } from '@/models/library';
-import { ICurrentUser } from '../models/library';
+import { ICurrentUser } from '@/models/library';
-import { IUserSignupData } from '../models/library';
+import { IUserSignupData } from '@/models/library';
-import { IUserProfile } from '../models/library';
+import { IUserProfile } from '@/models/library';
-import { IUserInfo } from '../models/library';
+import { IUserInfo } from '@/models/library';
-import { IUserUpdatePassword } from '../models/library';
+import { IUserUpdatePassword } from '@/models/library';
-import { type DataCallback, getAuth, patchPassword,postLogin, postLogout, postSignup } from '../utils/backendAPI';
+import { type DataCallback, getAuth, patchPassword,postLogin, postLogout, postSignup } from '@/utils/backendAPI';
+
 import { useUsers } from './UsersContext';
 
 interface IAuthContext {
@@ -18,8 +21,8 @@ interface IAuthContext {
   signup: (data: IUserSignupData, callback?: DataCallback<IUserProfile>) => void
   updatePassword: (data: IUserUpdatePassword, callback?: () => void) => void
   loading: boolean
-  error: ErrorInfo
+  error: ErrorData
-  setError: (error: ErrorInfo) => void
+  setError: (error: ErrorData) => void
 }
 
 const AuthContext = createContext<IAuthContext | null>(null);
@@ -41,7 +44,7 @@ export const AuthState = ({ children }: AuthStateProps) => {
   const { users } = useUsers();
   const [user, setUser] = useLocalStorage<ICurrentUser | undefined>('user', undefined);
   const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<ErrorInfo>(undefined);
+  const [error, setError] = useState<ErrorData>(undefined);
 
   const reload = useCallback(
   (callback?: () => void) => {

rsconcept/frontend/src/context/LibraryContext.tsx

@@ -1,12 +1,15 @@
+'use client';
+
 import { createContext, useCallback, useContext, useEffect, useState } from 'react';
 
-import { ErrorInfo } from '../components/BackendError';
+import { ErrorData } from '@/components/InfoError';
-import { ILibraryItem } from '../models/library';
+import { ILibraryItem } from '@/models/library';
-import { matchLibraryItem } from '../models/libraryAPI';
+import { matchLibraryItem } from '@/models/libraryAPI';
-import { ILibraryFilter } from '../models/miscelanious';
+import { ILibraryFilter } from '@/models/miscelanious';
-import { IRSForm, IRSFormCreateData, IRSFormData } from '../models/rsform';
+import { IRSForm, IRSFormCreateData, IRSFormData } from '@/models/rsform';
-import { loadRSFormData } from '../models/rsformAPI';
+import { loadRSFormData } from '@/models/rsformAPI';
-import { DataCallback, deleteLibraryItem, getLibrary, getRSFormDetails, getTemplates, postCloneLibraryItem, postNewRSForm } from '../utils/backendAPI';
+import { DataCallback, deleteLibraryItem, getLibrary, getRSFormDetails, getTemplates, postCloneLibraryItem, postNewRSForm } from '@/utils/backendAPI';
+
 import { useAuth } from './AuthContext';
 
 interface ILibraryContext {
@@ -14,8 +17,8 @@ interface ILibraryContext {
   templates: ILibraryItem[]
   loading: boolean
   processing: boolean
-  error: ErrorInfo
+  error: ErrorData
-  setError: (error: ErrorInfo) => void
+  setError: (error: ErrorData) => void
   
   applyFilter: (params: ILibraryFilter) => ILibraryItem[]
   retrieveTemplate: (templateID: number, callback: (schema: IRSForm) => void) => void
@@ -49,7 +52,7 @@ export const LibraryState = ({ children }: LibraryStateProps) => {
   const [templates, setTemplates] = useState<ILibraryItem[]>([]);
   const [loading, setLoading] = useState(false);
   const [processing, setProcessing] = useState(false);
-  const [error, setError] = useState<ErrorInfo>(undefined);
+  const [error, setError] = useState<ErrorData>(undefined);
   const [cachedTemplates, setCachedTemplates] = useState<IRSForm[]>([]);
 
   const applyFilter = useCallback(

rsconcept/frontend/src/context/NagivationContext.tsx

@@ -1,11 +1,20 @@
-import { createContext, useCallback, useContext, useEffect } from 'react';
+'use client';
-import { NavigateOptions, useLocation, useNavigate } from 'react-router-dom';
 
-import { globalIDs } from '../utils/constants';
+import { createContext, useCallback, useContext, useEffect, useState } from 'react';
+import { unstable_usePrompt, useLocation, useNavigate } from 'react-router-dom';
+
+import { globalIDs } from '@/utils/constants';
 
 interface INagivationContext{
-  navigateTo: (path: string, options?: NavigateOptions) => void
+  push: (path: string) => void
-  navigateHistory: (offset: number) => void
+  replace: (path: string) => void
+  back: () => void
+  forward: () => void
+
+  canBack: () => boolean
+  
+  isBlocked: boolean
+  setIsBlocked: (value: boolean) => void
 }
 
 const NagivationContext = createContext<INagivationContext | null>(null);
@@ -22,37 +31,65 @@ interface NavigationStateProps {
 }
 
 export const NavigationState = ({ children }: NavigationStateProps) => {
-  const implNavigate = useNavigate();
+  const router = useNavigate();
   const { pathname } = useLocation();
 
-  function scrollTop() {
+  const [isBlocked, setIsBlocked] = useState(false);
+  unstable_usePrompt({
+    when: isBlocked,
+    message: 'Изменения не сохранены. Вы уверены что хотите совершить переход?'
+  });
+
+  const canBack = useCallback(
+  () => {
+    return (!!window.history && window.history?.length !== 0);
+  }, []);
+
+  const scrollTop = useCallback(
+  () => {
     window.scrollTo(0, 0);
     const mainScroll = document.getElementById(globalIDs.main_scroll);
     if (mainScroll) {
       mainScroll.scroll(0,0);
     }
-  }
+  }, []);
 
-  const navigateTo = useCallback(
+  const push = useCallback(
-  (path: string, options?: NavigateOptions) => {
+  (path: string) => {
     scrollTop();
-    implNavigate(path, options);
+    setIsBlocked(false);
-  }, [implNavigate]);
+    router(path);
+  }, [router, scrollTop]);
 
-  const navigateHistory = useCallback(
+  const replace = useCallback(
-  (offset: number) => {
+  (path: string) => {
     scrollTop();
-    implNavigate(offset);
+    setIsBlocked(false);
-  }, [implNavigate]);
+    router(path, {replace: true});
+  }, [router, scrollTop]);
+
+  const back = useCallback(
+  () => {
+    scrollTop();
+    setIsBlocked(false);
+    router(-1);
+  }, [router, scrollTop]);
+
+  const forward = useCallback(
+  () => {
+    scrollTop();
+    setIsBlocked(false);
+    router(1);
+  }, [router, scrollTop]);
 
   useEffect(() => {
     scrollTop();
-  }, [pathname]);
+  }, [pathname, scrollTop]);
-
 
   return (
   <NagivationContext.Provider value={{
-    navigateTo, navigateHistory
+    push, replace, back, forward, 
+    canBack, isBlocked, setIsBlocked
   }}>
     {children}
   </NagivationContext.Provider>);

rsconcept/frontend/src/context/RSFormContext.tsx

@@ -1,28 +1,32 @@
+'use client';
+
 import { createContext, useCallback, useContext, useMemo, useState } from 'react';
 
-import { type ErrorInfo } from '../components/BackendError';
+import { type ErrorData } from '@/components/InfoError';
-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,
+  getTRSFile,
   patchConstituenta, patchDeleteConstituenta,
-patchLibraryItem,
+  patchLibraryItem,
   patchMoveConstituenta, patchRenameConstituenta,
-  patchResetAliases,   patchUploadTRS,  postClaimLibraryItem, postNewConstituenta, postSubscribe} from '../utils/backendAPI';
+  patchResetAliases,   patchUploadTRS,  postClaimLibraryItem, postNewConstituenta, postSubscribe
+} from '@/utils/backendAPI';
+
 import { useAuth } from './AuthContext';
 import { useLibrary } from './LibraryContext';
 
 interface IRSFormContext {
   schema?: IRSForm
 
-  error: ErrorInfo
+  error: ErrorData
   loading: boolean
   processing: boolean
 

rsconcept/frontend/src/context/ThemeContext.tsx

@@ -1,7 +1,9 @@
+'use client';
+
 import { createContext, useContext, useLayoutEffect, useMemo, useState } from 'react';
 
-import useLocalStorage from '../hooks/useLocalStorage';
+import useLocalStorage from '@/hooks/useLocalStorage';
-import { darkT, IColorTheme, lightT } from '../utils/color';
+import { darkT, IColorTheme, lightT } from '@/utils/color';
 
 interface IThemeContext {
   viewportHeight: string
@@ -53,7 +55,7 @@ export const ThemeState = ({ children }: ThemeStateProps) => {
   }
 
   useLayoutEffect(() => {
-    setDarkClass(darkMode)
+    setDarkClass(darkMode);
   }, [darkMode]);
 
   useLayoutEffect(() => {

rsconcept/frontend/src/context/UserProfileContext.tsx

@@ -1,17 +1,20 @@
+'use client';
+
 import { createContext, useCallback, useContext, useEffect, useState } from 'react';
 
-import { ErrorInfo } from '../components/BackendError';
+import { ErrorData } from '@/components/InfoError';
-import { IUserProfile } from '../models/library';
+import { IUserProfile } from '@/models/library';
-import { IUserUpdateData } from '../models/library';
+import { IUserUpdateData } from '@/models/library';
-import { DataCallback, getProfile, patchProfile } from '../utils/backendAPI';
+import { DataCallback, getProfile, patchProfile } from '@/utils/backendAPI';
+
 import { useUsers } from './UsersContext';
 
 interface IUserProfileContext {
   user: IUserProfile | undefined
   loading: boolean
   processing: boolean
-  error: ErrorInfo
+  error: ErrorData
-  setError: (error: ErrorInfo) => void
+  setError: (error: ErrorData) => void
   updateUser: (data: IUserUpdateData, callback?: DataCallback<IUserProfile>) => void
 }
 
@@ -36,7 +39,7 @@ export const UserProfileState = ({ children }: UserProfileStateProps) => {
   const [user, setUser] = useState<IUserProfile | undefined>(undefined);
   const [loading, setLoading] = useState(false);
   const [processing, setProcessing] = useState(false);
-  const [error, setError] = useState<ErrorInfo>(undefined);
+  const [error, setError] = useState<ErrorData>(undefined);
 
   const reload = useCallback(
   () => {

rsconcept/frontend/src/context/UsersContext.tsx

@@ -1,7 +1,9 @@
+'use client';
+
 import { createContext, useCallback, useContext, useEffect, useState } from 'react';
 
-import { type IUserInfo } from '../models/library';
+import { type IUserInfo } from '@/models/library';
-import { getActiveUsers } from '../utils/backendAPI';
+import { getActiveUsers } from '@/utils/backendAPI';
 
 interface IUsersContext {
   users: IUserInfo[]

rsconcept/frontend/src/dialogs/DlgCloneLibraryItem.tsx

@@ -1,15 +1,17 @@
+'use client';
+
 import { useEffect, useMemo, useState } from 'react';
 import { toast } from 'react-toastify';
 
-import Checkbox from '../components/Common/Checkbox';
+import Checkbox from '@/components/Common/Checkbox';
-import Modal, { ModalProps } from '../components/Common/Modal';
+import Modal, { ModalProps } from '@/components/Common/Modal';
-import TextArea from '../components/Common/TextArea';
+import TextArea from '@/components/Common/TextArea';
-import TextInput from '../components/Common/TextInput';
+import TextInput from '@/components/Common/TextInput';
-import { useLibrary } from '../context/LibraryContext';
+import { useLibrary } from '@/context/LibraryContext';
-import { useConceptNavigation } from '../context/NagivationContext';
+import { useConceptNavigation } from '@/context/NagivationContext';
-import { ILibraryItem } from '../models/library';
+import { ILibraryItem } from '@/models/library';
-import { IRSFormCreateData } from '../models/rsform';
+import { IRSFormCreateData } from '@/models/rsform';
-import { cloneTitle } from '../utils/misc';
+import { cloneTitle } from '@/utils/misc';
 
 interface DlgCloneLibraryItemProps
 extends Pick<ModalProps, 'hideWindow'> {
@@ -17,7 +19,7 @@ extends Pick<ModalProps, 'hideWindow'> {
 }
 
 function DlgCloneLibraryItem({ hideWindow, base }: DlgCloneLibraryItemProps) {
-  const { navigateTo } = useConceptNavigation();
+  const router = useConceptNavigation();
   const [title, setTitle] = useState('');
   const [alias, setAlias] = useState('');
   const [comment, setComment] = useState('');
@@ -49,7 +51,7 @@ function DlgCloneLibraryItem({ hideWindow, base }: DlgCloneLibraryItemProps) {
     };
     cloneItem(base.id, data, newSchema => {
       toast.success(`Копия создана: ${newSchema.alias}`);
-      navigateTo(`/rsforms/${newSchema.id}`);
+      router.push(`/rsforms/${newSchema.id}`);
     });
   }
 

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

@@ -1,15 +1,17 @@
+'use client';
+
 import { createColumnHelper } from '@tanstack/react-table';
 import { Dispatch, useCallback, useEffect, useMemo, useState } from 'react';
 
-import MiniButton from '../../components/Common/MiniButton';
+import MiniButton from '@/components/Common/MiniButton';
-import DataTable, { IConditionalStyle } from '../../components/DataTable';
+import DataTable, { IConditionalStyle } from '@/components/DataTable';
-import { ArrowsRotateIcon, CheckIcon, CrossIcon } from '../../components/Icons';
+import { ArrowsRotateIcon, CheckIcon, CrossIcon } from '@/components/Icons';
-import RSInput from '../../components/RSInput';
+import RSInput from '@/components/RSInput';
-import ConstituentaPicker from '../../components/Shared/ConstituentaPicker';
+import ConstituentaPicker from '@/components/Shared/ConstituentaPicker';
-import { useConceptTheme } from '../../context/ThemeContext';
+import { useConceptTheme } from '@/context/ThemeContext';
-import { IConstituenta, IRSForm } from '../../models/rsform';
+import { IConstituenta, IRSForm } from '@/models/rsform';
-import { IArgumentValue } from '../../models/rslang';
+import { IArgumentValue } from '@/models/rslang';
-import { prefixes } from '../../utils/constants';
+import { prefixes } from '@/utils/constants';
 
 interface ArgumentsTabProps {
   state: IArgumentsState

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

@@ -1,12 +1,14 @@
+'use client';
+
 import { Dispatch } from 'react';
 
-import SelectSingle from '../../components/Common/SelectSingle';
+import SelectSingle from '@/components/Common/SelectSingle';
-import TextArea from '../../components/Common/TextArea';
+import TextArea from '@/components/Common/TextArea';
-import TextInput from '../../components/Common/TextInput';
+import TextInput from '@/components/Common/TextInput';
-import RSInput from '../../components/RSInput';
+import RSInput from '@/components/RSInput';
-import { CstType, ICstCreateData } from '../../models/rsform';
+import { CstType, ICstCreateData } from '@/models/rsform';
-import { labelCstType } from '../../utils/labels';
+import { labelCstType } from '@/utils/labels';
-import { SelectorCstType } from '../../utils/selectors';
+import { SelectorCstType } from '@/utils/selectors';
 
 interface ConstituentaTabProps {
   state: ICstCreateData

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

@@ -1,15 +1,18 @@
+'use client';
+
 import { useLayoutEffect, useState } from 'react';
 import { TabList, TabPanel, Tabs } from 'react-tabs';
 
-import ConceptTab from '../../components/Common/ConceptTab';
+import ConceptTab from '@/components/Common/ConceptTab';
-import Modal, { ModalProps } from '../../components/Common/Modal';
+import Modal, { ModalProps } from '@/components/Common/Modal';
-import Overlay from '../../components/Common/Overlay';
+import Overlay from '@/components/Common/Overlay';
-import HelpButton from '../../components/Help/HelpButton';
+import HelpButton from '@/components/Help/HelpButton';
-import usePartialUpdate from '../../hooks/usePartialUpdate';
+import usePartialUpdate from '@/hooks/usePartialUpdate';
-import { HelpTopic } from '../../models/miscelanious';
+import { HelpTopic } from '@/models/miscelanious';
-import { CstType, ICstCreateData, IRSForm } from '../../models/rsform';
+import { CstType, ICstCreateData, IRSForm } from '@/models/rsform';
-import { inferTemplatedType, substituteTemplateArgs } from '../../models/rslangAPI';
+import { inferTemplatedType, substituteTemplateArgs } from '@/models/rslangAPI';
-import { createAliasFor, validateCstAlias } from '../../utils/misc';
+import { createAliasFor, validateCstAlias } from '@/utils/misc';
+
 import ArgumentsTab, { IArgumentsState } from './ArgumentsTab';
 import ConstituentaTab from './ConstituentaTab';
 import TemplateTab, { ITemplateState } from './TemplateTab';

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

@@ -1,13 +1,15 @@
+'use client';
+
 import { Dispatch, useEffect, useMemo, useState } from 'react';
 
-import SelectSingle from '../../components/Common/SelectSingle';
+import SelectSingle from '@/components/Common/SelectSingle';
-import TextArea from '../../components/Common/TextArea';
+import TextArea from '@/components/Common/TextArea';
-import RSInput from '../../components/RSInput';
+import RSInput from '@/components/RSInput';
-import ConstituentaPicker from '../../components/Shared/ConstituentaPicker';
+import ConstituentaPicker from '@/components/Shared/ConstituentaPicker';
-import { useLibrary } from '../../context/LibraryContext';
+import { useLibrary } from '@/context/LibraryContext';
-import { CATEGORY_CST_TYPE, IConstituenta, IRSForm } from '../../models/rsform';
+import { CATEGORY_CST_TYPE, IConstituenta, IRSForm } from '@/models/rsform';
-import { applyFilterCategory } from '../../models/rsformAPI';
+import { applyFilterCategory } from '@/models/rsformAPI';
-import { prefixes } from '../../utils/constants';
+import { prefixes } from '@/utils/constants';
 export interface ITemplateState {
   templateID?: number
   prototype?: IConstituenta

rsconcept/frontend/src/dialogs/DlgCreateCst.tsx

@@ -1,15 +1,17 @@
+'use client';
+
 import { useEffect, useLayoutEffect, useState } from 'react';
 
-import Modal, { ModalProps } from '../components/Common/Modal';
+import Modal, { ModalProps } from '@/components/Common/Modal';
-import SelectSingle from '../components/Common/SelectSingle';
+import SelectSingle from '@/components/Common/SelectSingle';
-import TextArea from '../components/Common/TextArea';
+import TextArea from '@/components/Common/TextArea';
-import TextInput from '../components/Common/TextInput';
+import TextInput from '@/components/Common/TextInput';
-import RSInput from '../components/RSInput';
+import RSInput from '@/components/RSInput';
-import usePartialUpdate from '../hooks/usePartialUpdate';
+import usePartialUpdate from '@/hooks/usePartialUpdate';
-import { CstType,ICstCreateData, IRSForm } from '../models/rsform';
+import { CstType,ICstCreateData, IRSForm } from '@/models/rsform';
-import { labelCstType } from '../utils/labels';
+import { labelCstType } from '@/utils/labels';
-import { createAliasFor, validateCstAlias } from '../utils/misc';
+import { createAliasFor, validateCstAlias } from '@/utils/misc';
-import { SelectorCstType } from '../utils/selectors';
+import { SelectorCstType } from '@/utils/selectors';
 
 interface DlgCreateCstProps
 extends Pick<ModalProps, 'hideWindow'> {

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

@@ -1,5 +1,5 @@
-import { IConstituenta } from '../../models/rsform';
+import { IConstituenta } from '@/models/rsform';
-import { labelConstituenta } from '../../utils/labels';
+import { labelConstituenta } from '@/utils/labels';
 
 interface ConstituentsListProps {
   list: number[]

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

@@ -1,9 +1,12 @@
+'use client';
+
 import { useMemo, useState } from 'react';
 
-import Checkbox from '../../components/Common/Checkbox';
+import Checkbox from '@/components/Common/Checkbox';
-import Modal, { ModalProps } from '../../components/Common/Modal';
+import Modal, { ModalProps } from '@/components/Common/Modal';
-import { IRSForm } from '../../models/rsform';
+import { IRSForm } from '@/models/rsform';
-import { prefixes } from '../../utils/constants';
+import { prefixes } from '@/utils/constants';
+
 import ConstituentsList from './ConstituentsList';
 
 interface DlgDeleteCstProps

rsconcept/frontend/src/dialogs/DlgEditReference/DlgEditReference.tsx

@@ -1,14 +1,17 @@
+'use client';
+
 import { useState } from 'react';
 import { TabList, TabPanel, Tabs } from 'react-tabs';
 
-import ConceptTab from '../../components/Common/ConceptTab';
+import ConceptTab from '@/components/Common/ConceptTab';
-import Modal from '../../components/Common/Modal';
+import Modal from '@/components/Common/Modal';
-import Overlay from '../../components/Common/Overlay';
+import Overlay from '@/components/Common/Overlay';
-import HelpButton from '../../components/Help/HelpButton';
+import HelpButton from '@/components/Help/HelpButton';
-import { ReferenceType } from '../../models/language';
+import { ReferenceType } from '@/models/language';
-import { HelpTopic } from '../../models/miscelanious';
+import { HelpTopic } from '@/models/miscelanious';
-import { IConstituenta } from '../../models/rsform';
+import { IConstituenta } from '@/models/rsform';
-import { labelReferenceType } from '../../utils/labels';
+import { labelReferenceType } from '@/utils/labels';
+
 import EntityTab from './EntityTab';
 import SyntacticTab from './SyntacticTab';
 

rsconcept/frontend/src/dialogs/DlgEditReference/EntityTab.tsx

@@ -1,16 +1,19 @@
+'use client';
+
 import { useEffect, useLayoutEffect, useState } from 'react';
 
-import Label from '../../components/Common/Label';
+import Label from '@/components/Common/Label';
-import TextInput from '../../components/Common/TextInput';
+import TextInput from '@/components/Common/TextInput';
-import ConstituentaPicker from '../../components/Shared/ConstituentaPicker';
+import ConstituentaPicker from '@/components/Shared/ConstituentaPicker';
-import SelectGrammeme from '../../components/Shared/SelectGrammeme';
+import SelectGrammeme from '@/components/Shared/SelectGrammeme';
-import { ReferenceType } from '../../models/language';
+import { ReferenceType } from '@/models/language';
-import { parseEntityReference, parseGrammemes } from '../../models/languageAPI';
+import { parseEntityReference, parseGrammemes } from '@/models/languageAPI';
-import { CstMatchMode } from '../../models/miscelanious';
+import { CstMatchMode } from '@/models/miscelanious';
-import { IConstituenta } from '../../models/rsform';
+import { IConstituenta } from '@/models/rsform';
-import { matchConstituenta } from '../../models/rsformAPI';
+import { matchConstituenta } from '@/models/rsformAPI';
-import { prefixes } from '../../utils/constants';
+import { prefixes } from '@/utils/constants';
-import { IGrammemeOption, SelectorGrammems } from '../../utils/selectors';
+import { IGrammemeOption, SelectorGrammems } from '@/utils/selectors';
+
 import { IReferenceInputState } from './DlgEditReference';
 import SelectWordForm from './SelectWordForm';
 

rsconcept/frontend/src/dialogs/DlgEditReference/SelectWordForm.tsx

@@ -1,8 +1,11 @@
+'use client';
+
 import { useCallback } from 'react';
 
-import { Grammeme } from '../../models/language';
+import { Grammeme } from '@/models/language';
-import { prefixes } from '../../utils/constants';
+import { prefixes } from '@/utils/constants';
-import { IGrammemeOption, PremadeWordForms, SelectorGrammems } from '../../utils/selectors';
+import { IGrammemeOption, PremadeWordForms, SelectorGrammems } from '@/utils/selectors';
+
 import WordformButton from './WordformButton';
 
 interface SelectWordFormProps {

rsconcept/frontend/src/dialogs/DlgEditReference/SyntacticTab.tsx

@@ -1,8 +1,11 @@
+'use client';
+
 import { useEffect, useLayoutEffect, useMemo, useState } from 'react';
 
-import TextInput from '../../components/Common/TextInput';
+import TextInput from '@/components/Common/TextInput';
-import { ReferenceType } from '../../models/language';
+import { ReferenceType } from '@/models/language';
-import { parseSyntacticReference } from '../../models/languageAPI';
+import { parseSyntacticReference } from '@/models/languageAPI';
+
 import { IReferenceInputState } from './DlgEditReference';
 
 interface SyntacticTabProps {

rsconcept/frontend/src/dialogs/DlgEditReference/WordformButton.tsx

@@ -1,4 +1,4 @@
-import { Grammeme } from '../../models/language';
+import { Grammeme } from '@/models/language';
 
 interface WordformButtonProps {
   text: string

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

@@ -1,19 +1,22 @@
+'use client';
+
 import { useLayoutEffect, useState } from 'react';
 
-import Label from '../../components/Common/Label';
+import Label from '@/components/Common/Label';
-import MiniButton from '../../components/Common/MiniButton';
+import MiniButton from '@/components/Common/MiniButton';
-import Modal from '../../components/Common/Modal';
+import Modal from '@/components/Common/Modal';
-import Overlay from '../../components/Common/Overlay';
+import Overlay from '@/components/Common/Overlay';
-import TextArea from '../../components/Common/TextArea';
+import TextArea from '@/components/Common/TextArea';
-import HelpButton from '../../components/Help/HelpButton';
+import HelpButton from '@/components/Help/HelpButton';
-import { ArrowLeftIcon, ArrowRightIcon, CheckIcon, ChevronDoubleDownIcon } from '../../components/Icons';
+import { ArrowLeftIcon, ArrowRightIcon, CheckIcon, ChevronDoubleDownIcon } from '@/components/Icons';
-import SelectGrammeme from '../../components/Shared/SelectGrammeme';
+import SelectGrammeme from '@/components/Shared/SelectGrammeme';
-import useConceptText from '../../hooks/useConceptText';
+import useConceptText from '@/hooks/useConceptText';
-import { Grammeme, ITextRequest, IWordForm, IWordFormPlain } from '../../models/language';
+import { Grammeme, ITextRequest, IWordForm, IWordFormPlain } from '@/models/language';
-import { parseGrammemes, wordFormEquals } from '../../models/languageAPI';
+import { parseGrammemes, wordFormEquals } from '@/models/languageAPI';
-import { HelpTopic } from '../../models/miscelanious';
+import { HelpTopic } from '@/models/miscelanious';
-import { IConstituenta, TermForm } from '../../models/rsform';
+import { IConstituenta, TermForm } from '@/models/rsform';
-import { IGrammemeOption, SelectorGrammemesList, SelectorGrammems } from '../../utils/selectors';
+import { IGrammemeOption, SelectorGrammemesList, SelectorGrammems } from '@/utils/selectors';
+
 import WordFormsTable from './WordFormsTable';
 
 interface DlgEditWordFormsProps {

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

@@ -1,11 +1,13 @@
+'use client';
+
 import { useCallback, useMemo } from 'react';
 
-import MiniButton from '../../components/Common/MiniButton';
+import MiniButton from '@/components/Common/MiniButton';
-import Overlay from '../../components/Common/Overlay';
+import Overlay from '@/components/Common/Overlay';
-import DataTable, { createColumnHelper } from '../../components/DataTable';
+import DataTable, { createColumnHelper } from '@/components/DataTable';
-import { CrossIcon } from '../../components/Icons';
+import { CrossIcon } from '@/components/Icons';
-import WordFormBadge from '../../components/Shared/WordFormBadge';
+import WordFormBadge from '@/components/Shared/WordFormBadge';
-import { IWordForm } from '../../models/language';
+import { IWordForm } from '@/models/language';
 
 interface WordFormsTableProps {
   forms: IWordForm[]

rsconcept/frontend/src/dialogs/DlgGraphParams.tsx

@@ -1,9 +1,11 @@
-import Checkbox from '../components/Common/Checkbox';
+'use client';
-import Modal, { ModalProps } from '../components/Common/Modal';
+
-import usePartialUpdate from '../hooks/usePartialUpdate';
+import Checkbox from '@/components/Common/Checkbox';
-import { GraphFilterParams } from '../models/miscelanious';
+import Modal, { ModalProps } from '@/components/Common/Modal';
-import { CstType } from '../models/rsform';
+import usePartialUpdate from '@/hooks/usePartialUpdate';
-import { labelCstType } from '../utils/labels';
+import { GraphFilterParams } from '@/models/miscelanious';
+import { CstType } from '@/models/rsform';
+import { labelCstType } from '@/utils/labels';
 
 interface DlgGraphParamsProps
 extends Pick<ModalProps, 'hideWindow'> {

rsconcept/frontend/src/dialogs/DlgRenameCst.tsx

@@ -1,14 +1,16 @@
+'use client';
+
 import { useLayoutEffect, useState } from 'react';
 
-import Modal, { ModalProps } from '../components/Common/Modal';
+import Modal, { ModalProps } from '@/components/Common/Modal';
-import SelectSingle from '../components/Common/SelectSingle';
+import SelectSingle from '@/components/Common/SelectSingle';
-import TextInput from '../components/Common/TextInput';
+import TextInput from '@/components/Common/TextInput';
-import { useRSForm } from '../context/RSFormContext';
+import { useRSForm } from '@/context/RSFormContext';
-import usePartialUpdate from '../hooks/usePartialUpdate';
+import usePartialUpdate from '@/hooks/usePartialUpdate';
-import { CstType, ICstRenameData } from '../models/rsform';
+import { CstType, ICstRenameData } from '@/models/rsform';
-import { labelCstType } from '../utils/labels';
+import { labelCstType } from '@/utils/labels';
-import { createAliasFor, validateCstAlias } from '../utils/misc';
+import { createAliasFor, validateCstAlias } from '@/utils/misc';
-import { SelectorCstType } from '../utils/selectors';
+import { SelectorCstType } from '@/utils/selectors';
 
 interface DlgRenameCstProps
 extends Pick<ModalProps, 'hideWindow'> {

rsconcept/frontend/src/dialogs/DlgShowAST.tsx

@@ -1,13 +1,15 @@
-import { useCallback, useMemo, useState } from 'react';
+'use client';
-import { GraphCanvas,GraphEdge, GraphNode } from 'reagraph';
 
-import Modal, { ModalProps } from '../components/Common/Modal';
+import { useCallback, useMemo, useState } from 'react';
-import { useConceptTheme } from '../context/ThemeContext';
+
-import { SyntaxTree } from '../models/rslang';
+import GraphUI, { GraphEdge, GraphNode } from '@/components/Common/GraphUI';
-import { graphDarkT, graphLightT } from '../utils/color';
+import Modal, { ModalProps } from '@/components/Common/Modal';
-import { colorbgSyntaxTree } from '../utils/color';
+import { useConceptTheme } from '@/context/ThemeContext';
-import { resources } from '../utils/constants';
+import { SyntaxTree } from '@/models/rslang';
-import { labelSyntaxTree } from '../utils/labels';
+import { graphDarkT, graphLightT } from '@/utils/color';
+import { colorbgSyntaxTree } from '@/utils/color';
+import { resources } from '@/utils/constants';
+import { labelSyntaxTree } from '@/utils/labels';
 
 interface DlgShowASTProps
 extends Pick<ModalProps, 'hideWindow'> {
@@ -74,7 +76,7 @@ function DlgShowAST({ hideWindow, syntaxTree, expression }: DlgShowASTProps) {
         height: 'calc(100vh - 14rem - 2px)'
       }}
     >
-      <GraphCanvas
+      <GraphUI
         nodes={nodes}
         edges={edges}
         layoutType='hierarchicalTd'

rsconcept/frontend/src/dialogs/DlgUploadRSForm.tsx

@@ -1,12 +1,14 @@
+'use client';
+
 import { useState } from 'react';
 import { toast } from 'react-toastify';
 
-import Checkbox from '../components/Common/Checkbox';
+import Checkbox from '@/components/Common/Checkbox';
-import FileInput from '../components/Common/FileInput';
+import FileInput from '@/components/Common/FileInput';
-import Modal from '../components/Common/Modal';
+import Modal from '@/components/Common/Modal';
-import { useRSForm } from '../context/RSFormContext';
+import { useRSForm } from '@/context/RSFormContext';
-import { IRSFormUploadData } from '../models/rsform';
+import { IRSFormUploadData } from '@/models/rsform';
-import { EXTEOR_TRS_FILE } from '../utils/constants';
+import { EXTEOR_TRS_FILE } from '@/utils/constants';
 
 interface DlgUploadRSFormProps {
   hideWindow: () => void

rsconcept/frontend/src/hooks/useCheckExpression.ts

@@ -1,11 +1,13 @@
+'use client';
+
 import { useCallback, useState } from 'react';
 
-import { type ErrorInfo } from '../components/BackendError';
+import { type ErrorData } from '@/components/InfoError';
-import { CstType, IConstituenta, type IRSForm } from '../models/rsform';
+import { CstType, IConstituenta, type IRSForm } from '@/models/rsform';
-import { IArgumentInfo,IExpressionParse } from '../models/rslang';
+import { IArgumentInfo,IExpressionParse } from '@/models/rslang';
-import { RSErrorType } from '../models/rslang';
+import { RSErrorType } from '@/models/rslang';
-import { DataCallback, postCheckExpression } from '../utils/backendAPI';
+import { DataCallback, postCheckExpression } from '@/utils/backendAPI';
-import { getCstExpressionPrefix } from '../utils/misc';
+import { getCstExpressionPrefix } from '@/utils/misc';
 
 const LOGIC_TYPIIFCATION = 'LOGIC';
 
@@ -57,7 +59,7 @@ function adjustResults(parse: IExpressionParse, emptyExpression: boolean, cstTyp
 
 function useCheckExpression({ schema }: { schema?: IRSForm }) {
   const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<ErrorInfo>(undefined);
+  const [error, setError] = useState<ErrorData>(undefined);
   const [parseData, setParseData] = useState<IExpressionParse | undefined>(undefined);
 
   const resetParse = useCallback(() => setParseData(undefined), []);

rsconcept/frontend/src/hooks/useClickedOutside.ts

@@ -1,6 +1,8 @@
+'use client';
+
 import { useEffect } from 'react';
 
-import { assertIsNode } from '../utils/utils';
+import { assertIsNode } from '@/utils/utils';
 
 function useClickedOutside({ ref, callback }: { ref: React.RefObject<HTMLElement>, callback?: () => void }) {
   useEffect(() => {

rsconcept/frontend/src/hooks/useConceptText.ts

@@ -1,12 +1,14 @@
+'use client';
+
 import { useCallback, useState } from 'react';
 
-import { ErrorInfo } from '../components/BackendError';
+import { ErrorData } from '@/components/InfoError';
-import { ILexemeData, ITextRequest, ITextResult, IWordFormPlain } from '../models/language';
+import { ILexemeData, ITextRequest, ITextResult, IWordFormPlain } from '@/models/language';
-import { DataCallback, postGenerateLexeme, postInflectText, postParseText } from '../utils/backendAPI';
+import { DataCallback, postGenerateLexeme, postInflectText, postParseText } from '@/utils/backendAPI';
 
 function useConceptText() {
   const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<ErrorInfo>(undefined);
+  const [error, setError] = useState<ErrorData>(undefined);
 
   const inflect = useCallback(
   (data: IWordFormPlain, onSuccess: DataCallback<ITextResult>) => {