F: Implement react-query pt2

F: Implement react-query pt1
npm update
2025-01-21 20:33:05 +03:00 · 2025-01-21 12:00:09 +03:00 · 2025-01-17 12:19:21 +03:00 · 2025-01-16 16:31:03 +03:00 · 2025-01-15 23:03:23 +03:00 · 2025-01-15 22:16:06 +03:00
146 changed files with 3144 additions and 2778 deletions
--- a/.github/workflows/frontend.yml
+++ b/.github/workflows/frontend.yml
@ -23,7 +23,6 @@ jobs:
    strategy:
      matrix:
        node-version: [22.x]
        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
    steps:
      - uses: actions/checkout@v4
@ -35,10 +34,17 @@ jobs:
          cache: "npm"
      - name: Build
        run: |
-          npm install -g typescript vite jest
+          npm install -g typescript vite jest playwright
          npx playwright install --with-deps
          npm ci
          npm run build --if-present
      - name: Run CI
        run: |
          npm run lint
          npm test
      - uses: actions/upload-artifact@v4
        if: ${{ !cancelled() }}
        with:
          name: playwright-report
          path: playwright-report/
          retention-days: 30
--- a/.gitignore
+++ b/.gitignore
@ -67,3 +67,5 @@ bower_components
 venv/
 /GitExtensions.settings
 rsconcept/frontend/public/privacy.pdf
 /rsconcept/frontend/playwright-report
 /rsconcept/frontend/test-results
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -19,7 +19,8 @@
    "ms-python.pylint",
    "ms-python.autopep8",
    "ms-python.vscode-pylance",
-    "vscode-icons-team.vscode-icons"
+    "vscode-icons-team.vscode-icons",
    "ms-playwright.playwright"
  ],
  "unwantedRecommendations": []
 }
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -119,6 +119,7 @@
    "NUMR",
    "Opencorpora",
    "overscroll",
    "partialize",
    "passwordreset",
    "perfectivity",
    "PNCT",
--- a/README.md
+++ b/README.md
@ -44,7 +44,10 @@ This readme file is used mostly to document project dependencies and conventions
  - use-debounce
  - qrcode.react
  - html-to-image
  - zustand
  - @tanstack/react-table
  - @tanstack/react-query
  - @tanstack/react-query-devtools
  - @uiw/react-codemirror
  - @uiw/codemirror-themes
  - @lezer/lr
@ -67,6 +70,7 @@ This readme file is used mostly to document project dependencies and conventions
  - ts-jest
  - @types/jest
  - @lezer/generator
  - @playwright/test
  </pre>
 </details>
 <details>
@ -132,6 +136,7 @@ This readme file is used mostly to document project dependencies and conventions
  - isort
  - Django
  - SQLite
  - Playwright
  </pre>
 </details>
--- a/rsconcept/frontend/index.html
+++ b/rsconcept/frontend/index.html
@ -20,22 +20,6 @@
    />
    <title>Концепт Портал</title>
    <!-- <script src="https://unpkg.com/react-scan/dist/auto.global.js"></script> -->
    <script>
      let isDark = false;
      if ('portal.theme.dark' in localStorage) {
        isDark = localStorage.getItem('portal.theme.dark') === 'true';
      } else if (window.matchMedia) {
        isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
        localStorage.setItem('portal.theme.dark', isDark ? 'true' : 'false');
      }
      if (isDark) {
        document.documentElement.classList.add('dark');
      } else {
        document.documentElement.classList.remove('dark');
      }
    </script>
  </head>
  <body>
    <div id="root"></div>
--- a/rsconcept/frontend/package-lock.json
+++ b/rsconcept/frontend/package-lock.json
--- a/rsconcept/frontend/package.json
+++ b/rsconcept/frontend/package.json
@ -5,7 +5,7 @@
  "type": "module",
  "scripts": {
    "generate": "lezer-generator src/components/RSInput/rslang/rslangFast.grammar -o src/components/RSInput/rslang/parser.ts && lezer-generator src/components/RSInput/rslang/rslangAST.grammar -o src/components/RSInput/rslang/parserAST.ts && lezer-generator src/components/RefsInput/parse/refsText.grammar -o src/components/RefsInput/parse/parser.ts",
-    "test": "jest",
+    "test": "jest && playwright test",
    "dev": "vite --host",
    "build": "tsc && vite build",
    "lint": "eslint . --report-unused-disable-directives --max-warnings 0",
@ -14,6 +14,8 @@
  "dependencies": {
    "@dagrejs/dagre": "^1.1.4",
    "@lezer/lr": "^1.4.2",
    "@tanstack/react-query": "^5.64.1",
    "@tanstack/react-query-devtools": "^5.64.1",
    "@tanstack/react-table": "^8.20.6",
    "@uiw/codemirror-themes": "^4.23.7",
    "@uiw/react-codemirror": "^4.23.7",
@ -24,42 +26,44 @@
    "qrcode.react": "^4.2.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
-    "react-error-boundary": "^4.1.2",
+    "react-error-boundary": "^5.0.0",
    "react-icons": "^5.4.0",
-    "react-intl": "^7.0.4",
+    "react-intl": "7.0.4",
-    "react-router": "^7.0.2",
+    "react-router": "^7.1.2",
    "react-select": "^5.9.0",
-    "react-tabs": "^6.0.2",
+    "react-tabs": "^6.1.0",
-    "react-toastify": "^11.0.0",
+    "react-toastify": "^11.0.3",
    "react-tooltip": "^5.28.0",
    "react-zoom-pan-pinch": "^3.6.1",
    "reactflow": "^11.11.4",
-    "use-debounce": "^10.0.4"
+    "use-debounce": "^10.0.4",
    "zustand": "^5.0.3"
  },
  "devDependencies": {
    "@lezer/generator": "^1.7.2",
    "@playwright/test": "^1.49.1",
    "@types/jest": "^29.5.14",
-    "@types/node": "^22.10.2",
+    "@types/node": "^22.10.7",
-    "@types/react": "^19.0.1",
+    "@types/react": "^19.0.7",
-    "@types/react-dom": "^19.0.2",
+    "@types/react-dom": "^19.0.3",
    "@typescript-eslint/eslint-plugin": "^8.0.1",
    "@typescript-eslint/parser": "^8.0.1",
    "@vitejs/plugin-react": "^4.3.4",
    "autoprefixer": "^10.4.20",
    "babel-plugin-react-compiler": "^19.0.0-beta-37ed2a7-20241206",
-    "eslint": "^9.17.0",
+    "eslint": "^9.18.0",
-    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react": "^7.37.4",
    "eslint-plugin-react-compiler": "^19.0.0-beta-37ed2a7-20241206",
    "eslint-plugin-react-hooks": "^5.1.0",
    "eslint-plugin-simple-import-sort": "^12.1.1",
-    "globals": "^15.13.0",
+    "globals": "^15.14.0",
    "jest": "^29.7.0",
-    "postcss": "^8.4.49",
+    "postcss": "^8.5.1",
    "tailwindcss": "^3.4.17",
    "ts-jest": "^29.2.5",
-    "typescript": "^5.7.2",
+    "typescript": "^5.7.3",
-    "typescript-eslint": "^8.18.1",
+    "typescript-eslint": "^8.20.0",
-    "vite": "^6.0.3"
+    "vite": "^6.0.7"
  },
  "overrides": {
    "react": "^19.0.0"
@ -67,6 +71,9 @@
  "jest": {
    "preset": "ts-jest",
    "testEnvironment": "node",
    "testPathIgnorePatterns": [
      "<rootDir>/tests/"
    ],
    "transform": {
      "node_modules/variables/.+\\.(j|t)sx?$": "ts-jest"
    },
--- a/rsconcept/frontend/playwright.config.ts
+++ b/rsconcept/frontend/playwright.config.ts
@ -0,0 +1,31 @@
 import { defineConfig, devices } from '@playwright/test';
 export default defineConfig({
  testDir: 'tests',
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  reporter: 'html',
  projects: [
    {
      name: 'Desktop Chrome',
      use: { ...devices['Desktop Chrome'] }
    },
    {
      name: 'Desktop Firefox',
      use: { ...devices['Desktop Firefox'] }
    },
    {
      name: 'Desktop Safari',
      use: { ...devices['Desktop Safari'] }
    }
  ],
  use: {
    baseURL: 'http://localhost:3000',
    trace: 'on-first-retry'
  },
  webServer: {
    command: 'npm run dev',
    url: 'http://localhost:3000',
    reuseExistingServer: !process.env.CI
  }
 });
--- a/rsconcept/frontend/src/app/ApplicationLayout.tsx
+++ b/rsconcept/frontend/src/app/ApplicationLayout.tsx
@ -5,12 +5,23 @@ import ConceptToaster from '@/app/ConceptToaster';
 import Footer from '@/app/Footer';
 import Navigation from '@/app/Navigation';
 import Loader from '@/components/ui/Loader';
 import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import { NavigationState } from '@/context/NavigationContext';
 import { useAppLayoutStore, useMainHeight, useViewportHeight } from '@/stores/appLayout';
 import { globals } from '@/utils/constants';
 import { GlobalDialogs } from './GlobalDialogs';
 import { GlobalTooltips } from './GlobalTooltips';
 function ApplicationLayout() {
-  const { viewportHeight, mainHeight, showScroll, noNavigationAnimation } = useConceptOptions();
+  const mainHeight = useMainHeight();
  const viewportHeight = useViewportHeight();
  const showScroll = useAppLayoutStore(state => !state.noScroll);
  const noNavigationAnimation = useAppLayoutStore(state => state.noNavigationAnimation);
  const noNavigation = useAppLayoutStore(state => state.noNavigation);
  const noFooter = useAppLayoutStore(state => state.noFooter);
  // TODO: prefetch data
  return (
    <NavigationState>
      <div className='min-w-[20rem] antialiased h-full max-w-[120rem] mx-auto'>
@ -22,6 +33,9 @@ function ApplicationLayout() {
          pauseOnFocusLoss={false}
        />
        <GlobalDialogs />
        <GlobalTooltips />
        <Navigation />
        <div
@ -36,7 +50,7 @@ function ApplicationLayout() {
              <Outlet />
            </Suspense>
          </main>
-          <Footer />
+          {!noNavigation && !noFooter ? <Footer /> : null}
        </div>
      </div>
    </NavigationState>
--- a/rsconcept/frontend/src/app/ConceptToaster.tsx
+++ b/rsconcept/frontend/src/app/ConceptToaster.tsx
@ -1,11 +1,11 @@
 import { ToastContainer, type ToastContainerProps } from 'react-toastify';
-import { useConceptOptions } from '@/context/ConceptOptionsContext';
+import { usePreferencesStore } from '@/stores/preferences';
 interface ToasterThemedProps extends Omit<ToastContainerProps, 'theme'> {}
 function ToasterThemed(props: ToasterThemedProps) {
-  const { darkMode } = useConceptOptions();
+  const darkMode = usePreferencesStore(state => state.darkMode);
  return <ToastContainer theme={darkMode ? 'dark' : 'light'} {...props} />;
 }
--- a/rsconcept/frontend/src/app/Footer.tsx
+++ b/rsconcept/frontend/src/app/Footer.tsx
@ -1,15 +1,10 @@
 import clsx from 'clsx';
 import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import { external_urls } from '@/utils/constants';
 import TextURL from '../components/ui/TextURL';
 function Footer() {
  const { noNavigation, noFooter } = useConceptOptions();
  if (noNavigation || noFooter) {
    return null;
  }
  return (
    <footer
      className={clsx(
--- a/rsconcept/frontend/src/app/GlobalDialogs.tsx
+++ b/rsconcept/frontend/src/app/GlobalDialogs.tsx
@ -0,0 +1,83 @@
 'use client';
 import DlgChangeInputSchema from '@/dialogs/DlgChangeInputSchema';
 import DlgChangeLocation from '@/dialogs/DlgChangeLocation';
 import DlgCloneLibraryItem from '@/dialogs/DlgCloneLibraryItem';
 import DlgCreateCst from '@/dialogs/DlgCreateCst';
 import DlgCreateOperation from '@/dialogs/DlgCreateOperation';
 import DlgCreateVersion from '@/dialogs/DlgCreateVersion';
 import DlgCstTemplate from '@/dialogs/DlgCstTemplate';
 import DlgDeleteCst from '@/dialogs/DlgDeleteCst';
 import DlgDeleteOperation from '@/dialogs/DlgDeleteOperation';
 import DlgEditEditors from '@/dialogs/DlgEditEditors';
 import DlgEditOperation from '@/dialogs/DlgEditOperation';
 import DlgEditReference from '@/dialogs/DlgEditReference';
 import DlgEditVersions from '@/dialogs/DlgEditVersions';
 import DlgEditWordForms from '@/dialogs/DlgEditWordForms';
 import DlgGraphParams from '@/dialogs/DlgGraphParams';
 import DlgInlineSynthesis from '@/dialogs/DlgInlineSynthesis';
 import DlgRelocateConstituents from '@/dialogs/DlgRelocateConstituents';
 import DlgRenameCst from '@/dialogs/DlgRenameCst';
 import DlgShowAST from '@/dialogs/DlgShowAST';
 import DlgShowQR from '@/dialogs/DlgShowQR';
 import DlgShowTypeGraph from '@/dialogs/DlgShowTypeGraph';
 import DlgSubstituteCst from '@/dialogs/DlgSubstituteCst';
 import DlgUploadRSForm from '@/dialogs/DlgUploadRSForm';
 import { DialogType } from '@/models/miscellaneous';
 import { useDialogsStore } from '@/stores/dialogs';
 export const GlobalDialogs = () => {
  const active = useDialogsStore(state => state.active);
  if (active === undefined) {
    return null;
  }
  switch (active) {
    case DialogType.CONSTITUENTA_TEMPLATE:
      return <DlgCstTemplate />;
    case DialogType.CREATE_CONSTITUENTA:
      return <DlgCreateCst />;
    case DialogType.CREATE_OPERATION:
      return <DlgCreateOperation />;
    case DialogType.DELETE_CONSTITUENTA:
      return <DlgDeleteCst />;
    case DialogType.EDIT_EDITORS:
      return <DlgEditEditors />;
    case DialogType.EDIT_OPERATION:
      return <DlgEditOperation />;
    case DialogType.EDIT_REFERENCE:
      return <DlgEditReference />;
    case DialogType.EDIT_VERSIONS:
      return <DlgEditVersions />;
    case DialogType.EDIT_WORD_FORMS:
      return <DlgEditWordForms />;
    case DialogType.INLINE_SYNTHESIS:
      return <DlgInlineSynthesis />;
    case DialogType.SHOW_AST:
      return <DlgShowAST />;
    case DialogType.SHOW_TYPE_GRAPH:
      return <DlgShowTypeGraph />;
    case DialogType.CHANGE_INPUT_SCHEMA:
      return <DlgChangeInputSchema />;
    case DialogType.CHANGE_LOCATION:
      return <DlgChangeLocation />;
    case DialogType.CLONE_LIBRARY_ITEM:
      return <DlgCloneLibraryItem />;
    case DialogType.CREATE_VERSION:
      return <DlgCreateVersion />;
    case DialogType.DELETE_OPERATION:
      return <DlgDeleteOperation />;
    case DialogType.GRAPH_PARAMETERS:
      return <DlgGraphParams />;
    case DialogType.RELOCATE_CONSTITUENTS:
      return <DlgRelocateConstituents />;
    case DialogType.RENAME_CONSTITUENTA:
      return <DlgRenameCst />;
    case DialogType.SHOW_QR_CODE:
      return <DlgShowQR />;
    case DialogType.SUBSTITUTE_CONSTITUENTS:
      return <DlgSubstituteCst />;
    case DialogType.UPLOAD_RSFORM:
      return <DlgUploadRSForm />;
  }
 };
--- a/rsconcept/frontend/src/app/GlobalProviders.tsx
+++ b/rsconcept/frontend/src/app/GlobalProviders.tsx
@ -1,13 +1,13 @@
 'use client';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { ErrorBoundary } from 'react-error-boundary';
 import { IntlProvider } from 'react-intl';
-import { AuthState } from '@/context/AuthContext';
+import { queryClient } from '@/backend/queryClient';
 import { OptionsState } from '@/context/ConceptOptionsContext';
 import { GlobalOssState } from '@/context/GlobalOssContext';
 import { LibraryState } from '@/context/LibraryContext';
 import { UsersState } from '@/context/UsersContext';
 import ErrorFallback from './ErrorFallback';
@ -31,19 +31,16 @@ function GlobalProviders({ children }: React.PropsWithChildren) {
    onError={logError}
  >
  <IntlProvider locale='ru' defaultLocale='ru'>
-  <OptionsState>
+  <QueryClientProvider client={queryClient}>
  <UsersState>
  <AuthState>
  <LibraryState>
  <GlobalOssState>
-
+  
    <ReactQueryDevtools initialIsOpen={false} />
    {children}
  </GlobalOssState>
  </LibraryState>
-  </AuthState>
+  </QueryClientProvider>
  </UsersState>
  </OptionsState>
  </IntlProvider>
  </ErrorBoundary>);
 }
--- a/rsconcept/frontend/src/app/GlobalTooltips.tsx
+++ b/rsconcept/frontend/src/app/GlobalTooltips.tsx
@ -0,0 +1,32 @@
 'use client';
 import InfoConstituenta from '@/components/info/InfoConstituenta';
 import Loader from '@/components/ui/Loader';
 import Tooltip from '@/components/ui/Tooltip';
 import { useTooltipsStore } from '@/stores/tooltips';
 import { globals } from '@/utils/constants';
 export const GlobalTooltips = () => {
  const hoverCst = useTooltipsStore(state => state.activeCst);
  return (
    <>
      <Tooltip
        float
        id={globals.tooltip}
        layer='z-topmost'
        place='right-start'
        className='mt-8 max-w-[20rem] break-words'
      />
      <Tooltip
        float
        id={globals.value_tooltip}
        layer='z-topmost'
        className='max-w-[calc(min(40rem,100dvw-2rem))] text-justify'
      />
      <Tooltip clickable id={globals.constituenta_tooltip} layer='z-modalTooltip' className='max-w-[30rem]'>
        {hoverCst ? <InfoConstituenta data={hoverCst} onClick={event => event.stopPropagation()} /> : <Loader />}
      </Tooltip>
    </>
  );
 };
--- a/rsconcept/frontend/src/app/Navigation/Logo.tsx
+++ b/rsconcept/frontend/src/app/Navigation/Logo.tsx
@ -1,8 +1,8 @@
 import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import useWindowSize from '@/hooks/useWindowSize';
 import { usePreferencesStore } from '@/stores/preferences';
 function Logo() {
-  const { darkMode } = useConceptOptions();
+  const darkMode = usePreferencesStore(state => state.darkMode);
  const size = useWindowSize();
  return (
--- a/rsconcept/frontend/src/app/Navigation/Navigation.tsx
+++ b/rsconcept/frontend/src/app/Navigation/Navigation.tsx
@ -2,9 +2,9 @@ import clsx from 'clsx';
 import { IconLibrary2, IconManuals, IconNewItem2 } from '@/components/Icons';
 import { CProps } from '@/components/props';
 import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import { useConceptNavigation } from '@/context/NavigationContext';
 import useWindowSize from '@/hooks/useWindowSize';
 import { useAppLayoutStore } from '@/stores/appLayout';
 import { PARAMETER } from '@/utils/constants';
 import { urls } from '../urls';
@ -16,7 +16,7 @@ import UserMenu from './UserMenu';
 function Navigation() {
  const router = useConceptNavigation();
  const size = useWindowSize();
-  const { noNavigationAnimation } = useConceptOptions();
+  const noNavigationAnimation = useAppLayoutStore(state => state.noNavigationAnimation);
  const navigateHome = (event: CProps.EventMouse) => router.push(urls.home, event.ctrlKey || event.metaKey);
  const navigateLibrary = (event: CProps.EventMouse) => router.push(urls.library, event.ctrlKey || event.metaKey);
@ -29,7 +29,8 @@ function Navigation() {
      className={clsx(
        'z-navigation', // prettier: split lines
        'sticky top-0 left-0 right-0',
-        'select-none'
+        'select-none',
        'bg-prim-100'
      )}
    >
      <ToggleNavigation />
@ -57,6 +58,7 @@ function Navigation() {
          <NavigationButton text='Новая схема' icon={<IconNewItem2 size='1.5rem' />} onClick={navigateCreateNew} />
          <NavigationButton text='Библиотека' icon={<IconLibrary2 size='1.5rem' />} onClick={navigateLibrary} />
          <NavigationButton text='Справка' icon={<IconManuals size='1.5rem' />} onClick={navigateHelp} />
          <UserMenu />
        </div>
      </div>
--- a/rsconcept/frontend/src/app/Navigation/ToggleNavigation.tsx
+++ b/rsconcept/frontend/src/app/Navigation/ToggleNavigation.tsx
@ -1,11 +1,16 @@
 import clsx from 'clsx';
 import { IconDarkTheme, IconLightTheme, IconPin, IconUnpin } from '@/components/Icons';
-import { useConceptOptions } from '@/context/ConceptOptionsContext';
+import { useAppLayoutStore } from '@/stores/appLayout';
 import { usePreferencesStore } from '@/stores/preferences';
 import { globals, PARAMETER } from '@/utils/constants';
 function ToggleNavigation() {
-  const { noNavigationAnimation, noNavigation, toggleNoNavigation, toggleDarkMode, darkMode } = useConceptOptions();
+  const darkMode = usePreferencesStore(state => state.darkMode);
  const toggleDarkMode = usePreferencesStore(state => state.toggleDarkMode);
  const noNavigation = useAppLayoutStore(state => state.noNavigation);
  const noNavigationAnimation = useAppLayoutStore(state => state.noNavigationAnimation);
  const toggleNoNavigation = useAppLayoutStore(state => state.toggleNoNavigation);
  const iconSize = !noNavigationAnimation ? '0.75rem' : '1rem';
  return (
    <div
--- a/rsconcept/frontend/src/app/Navigation/UserButton.tsx
+++ b/rsconcept/frontend/src/app/Navigation/UserButton.tsx
@ -0,0 +1,35 @@
 import { useAuthSuspense } from '@/backend/auth/useAuth';
 import { IconLogin, IconUser2 } from '@/components/Icons';
 import { usePreferencesStore } from '@/stores/preferences';
 import NavigationButton from './NavigationButton';
 interface UserButtonProps {
  onLogin: () => void;
  onClickUser: () => void;
 }
 function UserButton({ onLogin, onClickUser }: UserButtonProps) {
  const { user } = useAuthSuspense();
  const adminMode = usePreferencesStore(state => state.adminMode);
  if (!user) {
    return (
      <NavigationButton
        className='cc-fade-in'
        title='Перейти на страницу логина'
        icon={<IconLogin size='1.5rem' className='icon-primary' />}
        onClick={onLogin}
      />
    );
  } else {
    return (
      <NavigationButton
        className='cc-fade-in'
        icon={<IconUser2 size='1.5rem' className={adminMode && user.is_staff ? 'icon-primary' : ''} />}
        onClick={onClickUser}
      />
    );
  }
 }
 export default UserButton;
--- a/rsconcept/frontend/src/app/Navigation/UserDropdown.tsx
+++ b/rsconcept/frontend/src/app/Navigation/UserDropdown.tsx
@ -1,3 +1,5 @@
 import { useAuth } from '@/backend/auth/useAuth';
 import { useLogout } from '@/backend/auth/useLogout';
 import {
  IconAdmin,
  IconAdminOff,
@ -15,9 +17,8 @@ import {
 import { CProps } from '@/components/props';
 import Dropdown from '@/components/ui/Dropdown';
 import DropdownButton from '@/components/ui/DropdownButton';
 import { useAuth } from '@/context/AuthContext';
 import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import { useConceptNavigation } from '@/context/NavigationContext';
 import { usePreferencesStore } from '@/stores/preferences';
 import { urls } from '../urls';
@ -27,9 +28,16 @@ interface UserDropdownProps {
 }
 function UserDropdown({ isOpen, hideDropdown }: UserDropdownProps) {
  const { darkMode, adminMode, toggleAdminMode, toggleDarkMode, showHelp, toggleShowHelp } = useConceptOptions();
  const router = useConceptNavigation();
-  const { user, logout } = useAuth();
+  const { user } = useAuth();
  const { logout } = useLogout();
  const darkMode = usePreferencesStore(state => state.darkMode);
  const toggleDarkMode = usePreferencesStore(state => state.toggleDarkMode);
  const showHelp = usePreferencesStore(state => state.showHelp);
  const toggleShowHelp = usePreferencesStore(state => state.toggleShowHelp);
  const adminMode = usePreferencesStore(state => state.adminMode);
  const toggleAdminMode = usePreferencesStore(state => state.toggleAdminMode);
  function navigateProfile(event: CProps.EventMouse) {
    hideDropdown();
--- a/rsconcept/frontend/src/app/Navigation/UserMenu.tsx
+++ b/rsconcept/frontend/src/app/Navigation/UserMenu.tsx
@ -1,41 +1,22 @@
-import { IconLogin, IconUser2 } from '@/components/Icons';
+import { Suspense } from 'react';
 import Loader from '@/components/ui/Loader';
 import { useAuth } from '@/context/AuthContext';
 import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import { useConceptNavigation } from '@/context/NavigationContext';
 import useDropdown from '@/hooks/useDropdown';
 import { urls } from '../urls';
-import NavigationButton from './NavigationButton';
+import UserButton from './UserButton';
 import UserDropdown from './UserDropdown';
 function UserMenu() {
  const router = useConceptNavigation();
  const { user, loading } = useAuth();
  const { adminMode } = useConceptOptions();
  const menu = useDropdown();
  const navigateLogin = () => router.push(urls.login);
  return (
    <div ref={menu.ref} className='h-full w-[4rem] flex items-center justify-center'>
-      {loading ? <Loader circular scale={1.5} /> : null}
+      <Suspense fallback={<Loader circular scale={1.5} />}>
-      {!user && !loading ? (
+        <UserButton onLogin={() => router.push(urls.login)} onClickUser={menu.toggle} />
-        <NavigationButton
+      </Suspense>
-          className='cc-fade-in'
+      <UserDropdown isOpen={menu.isOpen} hideDropdown={() => menu.hide()} />
          title='Перейти на страницу логина'
          icon={<IconLogin size='1.5rem' className='icon-primary' />}
          onClick={navigateLogin}
        />
      ) : null}
      {user && !loading ? (
        <NavigationButton
          className='cc-fade-in'
          icon={<IconUser2 size='1.5rem' className={adminMode && user.is_staff ? 'icon-primary' : ''} />}
          onClick={menu.toggle}
        />
      ) : null}
      <UserDropdown isOpen={!!user && menu.isOpen} hideDropdown={() => menu.hide()} />
    </div>
  );
 }
--- a/rsconcept/frontend/src/backend/apiTransport.ts
+++ b/rsconcept/frontend/src/backend/apiTransport.ts
@ -42,17 +42,17 @@ export interface IAxiosRequest<RequestData, ResponseData> {
 // ================ Transport API calls ================
 export function AxiosGet<ResponseData>({ endpoint, request, options }: IAxiosRequest<undefined, ResponseData>) {
-  if (request.setLoading) request.setLoading(true);
+  request.setLoading?.(true);
  axiosInstance
    .get<ResponseData>(endpoint, options)
    .then(response => {
-      if (request.setLoading) request.setLoading(false);
+      request.setLoading?.(false);
-      if (request.onSuccess) request.onSuccess(response.data);
+      request.onSuccess?.(response.data);
    })
    .catch((error: Error | AxiosError) => {
-      if (request.setLoading) request.setLoading(false);
+      request.setLoading?.(false);
      if (request.showError) toast.error(extractErrorMessage(error));
-      if (request.onError) request.onError(error);
+      request.onError?.(error);
    });
 }
@ -61,17 +61,17 @@ export function AxiosPost<RequestData, ResponseData>({
  request,
  options
 }: IAxiosRequest<RequestData, ResponseData>) {
-  if (request.setLoading) request.setLoading(true);
+  request.setLoading?.(true);
  axiosInstance
    .post<ResponseData>(endpoint, request.data, options)
    .then(response => {
-      if (request.setLoading) request.setLoading(false);
+      request.setLoading?.(false);
-      if (request.onSuccess) request.onSuccess(response.data);
+      request.onSuccess?.(response.data);
    })
    .catch((error: Error | AxiosError) => {
-      if (request.setLoading) request.setLoading(false);
+      request.setLoading?.(false);
      if (request.showError) toast.error(extractErrorMessage(error));
-      if (request.onError) request.onError(error);
+      request.onError?.(error);
    });
 }
@ -80,17 +80,17 @@ export function AxiosDelete<RequestData, ResponseData>({
  request,
  options
 }: IAxiosRequest<RequestData, ResponseData>) {
-  if (request.setLoading) request.setLoading(true);
+  request.setLoading?.(true);
  axiosInstance
    .delete<ResponseData>(endpoint, options)
    .then(response => {
-      if (request.setLoading) request.setLoading(false);
+      request.setLoading?.(false);
-      if (request.onSuccess) request.onSuccess(response.data);
+      request.onSuccess?.(response.data);
    })
    .catch((error: Error | AxiosError) => {
-      if (request.setLoading) request.setLoading(false);
+      request.setLoading?.(false);
      if (request.showError) toast.error(extractErrorMessage(error));
-      if (request.onError) request.onError(error);
+      request.onError?.(error);
    });
 }
@ -99,17 +99,17 @@ export function AxiosPatch<RequestData, ResponseData>({
  request,
  options
 }: IAxiosRequest<RequestData, ResponseData>) {
-  if (request.setLoading) request.setLoading(true);
+  request.setLoading?.(true);
  axiosInstance
    .patch<ResponseData>(endpoint, request.data, options)
    .then(response => {
-      if (request.setLoading) request.setLoading(false);
+      request.setLoading?.(false);
-      if (request.onSuccess) request.onSuccess(response.data);
+      request.onSuccess?.(response.data);
      return response.data;
    })
    .catch((error: Error | AxiosError) => {
-      if (request.setLoading) request.setLoading(false);
+      request.setLoading?.(false);
      if (request.showError) toast.error(extractErrorMessage(error));
-      if (request.onError) request.onError(error);
+      request.onError?.(error);
    });
 }
--- a/rsconcept/frontend/src/backend/auth/api.ts
+++ b/rsconcept/frontend/src/backend/auth/api.ts
@ -0,0 +1,67 @@
 import { queryOptions } from '@tanstack/react-query';
 import { ICurrentUser, IUser } from '@/models/user';
 import { axiosInstance } from '../apiConfiguration';
 /**
 * Represents login data, used to authenticate users.
 */
 export interface IUserLoginDTO {
  username: string;
  password: string;
 }
 /**
 * Represents data needed to update password for current user.
 */
 export interface IChangePasswordDTO {
  old_password: string;
  new_password: string;
 }
 /**
 * Represents password reset request data.
 */
 export interface IRequestPasswordDTO extends Pick<IUser, 'email'> {}
 /**
 * Represents password reset data.
 */
 export interface IResetPasswordDTO {
  password: string;
  token: string;
 }
 /**
 * Represents password token data.
 */
 export interface IPasswordTokenDTO extends Pick<IResetPasswordDTO, 'token'> {}
 /**
 * Authentication API.
 */
 export const authApi = {
  baseKey: 'auth',
  getAuthQueryOptions: () => {
    return queryOptions({
      queryKey: [authApi.baseKey, 'user'],
      queryFn: meta =>
        axiosInstance
          .get<ICurrentUser>('/users/api/auth', {
            signal: meta.signal
          })
          .then(response => (response.data.id === null ? null : response.data)),
      placeholderData: null,
      staleTime: 24 * 60 * 60 * 1000
    });
  },
  logout: () => axiosInstance.post('/users/api/logout'),
  login: (data: IUserLoginDTO) => axiosInstance.post('/users/api/login', data),
  changePassword: (data: IChangePasswordDTO) => axiosInstance.post('/users/api/change-password', data),
  requestPasswordReset: (data: IRequestPasswordDTO) => axiosInstance.post('/users/api/password-reset', data),
  validatePasswordToken: (data: IPasswordTokenDTO) => axiosInstance.post('/users/api/password-reset/validate', data),
  resetPassword: (data: IResetPasswordDTO) => axiosInstance.post('/users/api/password-reset/confirm', data)
 };
--- a/rsconcept/frontend/src/backend/auth/useAuth.tsx
+++ b/rsconcept/frontend/src/backend/auth/useAuth.tsx
@ -0,0 +1,21 @@
 import { useQuery, useSuspenseQuery } from '@tanstack/react-query';
 import { authApi } from './api';
 export function useAuth() {
  const {
    data: user,
    isLoading,
    error
  } = useQuery({
    ...authApi.getAuthQueryOptions()
  });
  return { user, isLoading, error };
 }
 export function useAuthSuspense() {
  const { data: user } = useSuspenseQuery({
    ...authApi.getAuthQueryOptions()
  });
  return { user };
 }
--- a/rsconcept/frontend/src/backend/auth/useChangePassword.tsx
+++ b/rsconcept/frontend/src/backend/auth/useChangePassword.tsx
@ -0,0 +1,18 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { authApi, IChangePasswordDTO } from './api';
 export const useChangePassword = () => {
  const queryClient = useQueryClient();
  const mutation = useMutation({
    mutationKey: ['change-password'],
    mutationFn: authApi.changePassword,
    onSettled: () => queryClient.invalidateQueries({ queryKey: [authApi.baseKey] })
  });
  return {
    changePassword: (data: IChangePasswordDTO, onSuccess?: () => void) => mutation.mutate(data, { onSuccess }),
    isPending: mutation.isPending,
    error: mutation.error,
    reset: mutation.reset
  };
 };
--- a/rsconcept/frontend/src/backend/auth/useLogin.tsx
+++ b/rsconcept/frontend/src/backend/auth/useLogin.tsx
@ -0,0 +1,19 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { authApi } from './api';
 export const useLogin = () => {
  const queryClient = useQueryClient();
  const mutation = useMutation({
    mutationKey: ['login'],
    mutationFn: authApi.login,
    onSettled: () => queryClient.invalidateQueries({ queryKey: [authApi.baseKey] })
  });
  return {
    login: (username: string, password: string, onSuccess?: () => void) =>
      mutation.mutate({ username, password }, { onSuccess }),
    isPending: mutation.isPending,
    error: mutation.error,
    reset: mutation.reset
  };
 };
--- a/rsconcept/frontend/src/backend/auth/useLogout.tsx
+++ b/rsconcept/frontend/src/backend/auth/useLogout.tsx
@ -0,0 +1,13 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { authApi } from './api';
 export const useLogout = () => {
  const queryClient = useQueryClient();
  const mutation = useMutation({
    mutationKey: ['logout'],
    mutationFn: authApi.logout,
    onSettled: () => queryClient.invalidateQueries({ queryKey: [authApi.baseKey] })
  });
  return { logout: (onSuccess?: () => void) => mutation.mutate(undefined, { onSuccess }) };
 };
--- a/rsconcept/frontend/src/backend/auth/useRequestPasswordReset.tsx
+++ b/rsconcept/frontend/src/backend/auth/useRequestPasswordReset.tsx
@ -0,0 +1,16 @@
 import { useMutation } from '@tanstack/react-query';
 import { authApi, IRequestPasswordDTO } from './api';
 export const useRequestPasswordReset = () => {
  const mutation = useMutation({
    mutationKey: ['request-password-reset'],
    mutationFn: authApi.requestPasswordReset
  });
  return {
    requestPasswordReset: (data: IRequestPasswordDTO, onSuccess?: () => void) => mutation.mutate(data, { onSuccess }),
    isPending: mutation.isPending,
    error: mutation.error,
    reset: mutation.reset
  };
 };
--- a/rsconcept/frontend/src/backend/auth/useResetPassword.tsx
+++ b/rsconcept/frontend/src/backend/auth/useResetPassword.tsx
@ -0,0 +1,24 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { authApi, IPasswordTokenDTO, IResetPasswordDTO } from './api';
 export const useResetPassword = () => {
  const queryClient = useQueryClient();
  const validateMutation = useMutation({
    mutationKey: ['reset-password'],
    mutationFn: authApi.validatePasswordToken,
    onSuccess: () => queryClient.invalidateQueries({ queryKey: [authApi.baseKey] })
  });
  const resetMutation = useMutation({
    mutationKey: ['reset-password'],
    mutationFn: authApi.resetPassword,
    onSuccess: () => queryClient.invalidateQueries({ queryKey: [authApi.baseKey] })
  });
  return {
    validateToken: (data: IPasswordTokenDTO, onSuccess?: () => void) => validateMutation.mutate(data, { onSuccess }),
    resetPassword: (data: IResetPasswordDTO, onSuccess?: () => void) => resetMutation.mutate(data, { onSuccess }),
    isPending: resetMutation.isPending,
    error: resetMutation.error,
    reset: resetMutation.reset
  };
 };
--- a/rsconcept/frontend/src/backend/queryClient.ts
+++ b/rsconcept/frontend/src/backend/queryClient.ts
@ -0,0 +1,21 @@
 import { QueryClient } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 declare module '@tanstack/react-query' {
  interface Register {
    defaultError: AxiosError;
  }
 }
 export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 5 * 60 * 1000,
      gcTime: 24 * 60 * 60 * 1000,
      retry: 3,
      refetchOnWindowFocus: true,
      refetchOnMount: true,
      refetchOnReconnect: true
    }
  }
 });
--- a/rsconcept/frontend/src/backend/users.ts
+++ b/rsconcept/frontend/src/backend/users.ts
@ -1,99 +0,0 @@
 /**
 * Endpoints: users.
 */
 import {
  ICurrentUser,
  IPasswordTokenData,
  IRequestPasswordData,
  IResetPasswordData,
  IUserInfo,
  IUserLoginData,
  IUserProfile,
  IUserSignupData,
  IUserUpdateData,
  IUserUpdatePassword
 } from '@/models/user';
 import { AxiosGet, AxiosPatch, AxiosPost, FrontAction, FrontExchange, FrontPull, FrontPush } from './apiTransport';
 export function getAuth(request: FrontPull<ICurrentUser>) {
  AxiosGet({
    endpoint: `/users/api/auth`,
    request: request
  });
 }
 export function postLogin(request: FrontPush<IUserLoginData>) {
  AxiosPost({
    endpoint: '/users/api/login',
    request: request
  });
 }
 export function postLogout(request: FrontAction) {
  AxiosPost({
    endpoint: '/users/api/logout',
    request: request
  });
 }
 export function postSignup(request: FrontExchange<IUserSignupData, IUserProfile>) {
  AxiosPost({
    endpoint: '/users/api/signup',
    request: request
  });
 }
 export function getProfile(request: FrontPull<IUserProfile>) {
  AxiosGet({
    endpoint: '/users/api/profile',
    request: request
  });
 }
 export function patchProfile(request: FrontExchange<IUserUpdateData, IUserProfile>) {
  AxiosPatch({
    endpoint: '/users/api/profile',
    request: request
  });
 }
 export function patchPassword(request: FrontPush<IUserUpdatePassword>) {
  AxiosPatch({
    endpoint: '/users/api/change-password',
    request: request
  });
 }
 export function postRequestPasswordReset(request: FrontPush<IRequestPasswordData>) {
  // title: 'Request password reset',
  AxiosPost({
    endpoint: '/users/api/password-reset',
    request: request
  });
 }
 export function postValidatePasswordToken(request: FrontPush<IPasswordTokenData>) {
  // title: 'Validate password token',
  AxiosPost({
    endpoint: '/users/api/password-reset/validate',
    request: request
  });
 }
 export function postResetPassword(request: FrontPush<IResetPasswordData>) {
  // title: 'Reset password',
  AxiosPost({
    endpoint: '/users/api/password-reset/confirm',
    request: request
  });
 }
 export function getActiveUsers(request: FrontPull<IUserInfo[]>) {
  // title: 'Active users list',
  AxiosGet({
    endpoint: '/users/api/active-users',
    request: request
  });
 }
--- a/rsconcept/frontend/src/backend/users/api.ts
+++ b/rsconcept/frontend/src/backend/users/api.ts
@ -0,0 +1,40 @@
 import { queryOptions } from '@tanstack/react-query';
 import { IUser, IUserInfo, IUserProfile, IUserSignupData } from '@/models/user';
 import { axiosInstance } from '../apiConfiguration';
 /**
 * Represents user data, intended to update user profile in persistent storage.
 */
 export interface IUpdateProfileDTO extends Omit<IUser, 'is_staff' | 'id'> {}
 export const usersApi = {
  baseKey: 'users',
  getUsersQueryOptions: () =>
    queryOptions({
      queryKey: [usersApi.baseKey, 'list'],
      queryFn: meta =>
        axiosInstance
          .get<IUserInfo[]>('/users/api/active-users', {
            signal: meta.signal
          })
          .then(response => response.data),
      placeholderData: []
    }),
  getProfileQueryOptions: () =>
    queryOptions({
      queryKey: [usersApi.baseKey, 'profile'],
      queryFn: meta =>
        axiosInstance
          .get<IUserProfile>('/users/api/profile', {
            signal: meta.signal
          })
          .then(response => response.data)
    }),
  signup: (data: IUserSignupData) => axiosInstance.post('/users/api/signup', data),
  updateProfile: (data: IUpdateProfileDTO) => axiosInstance.patch('/users/api/profile', data)
 };
 //DataCallback<IUserProfile>
--- a/rsconcept/frontend/src/backend/users/useLabelUser.tsx
+++ b/rsconcept/frontend/src/backend/users/useLabelUser.tsx
@ -0,0 +1,25 @@
 import { useUsers } from './useUsers';
 export function useLabelUser() {
  const { users } = useUsers();
  function getUserLabel(userID: number | null): string {
    const user = users.find(({ id }) => id === userID);
    if (!user || userID === null) {
      return userID ? `Аноним ${userID.toString()}` : 'Отсутствует';
    }
    const hasFirstName = user.first_name !== '';
    const hasLastName = user.last_name !== '';
    if (hasFirstName || hasLastName) {
      if (!hasLastName) {
        return user.first_name;
      }
      if (!hasFirstName) {
        return user.last_name;
      }
      return user.last_name + ' ' + user.first_name;
    }
    return `Аноним ${userID.toString()}`;
  }
  return getUserLabel;
 }
--- a/rsconcept/frontend/src/backend/users/useProfile.tsx
+++ b/rsconcept/frontend/src/backend/users/useProfile.tsx
@ -0,0 +1,21 @@
 import { useQuery, useSuspenseQuery } from '@tanstack/react-query';
 import { usersApi } from './api';
 export function useProfile() {
  const {
    data: profile,
    isLoading,
    error
  } = useQuery({
    ...usersApi.getProfileQueryOptions()
  });
  return { profile, isLoading, error };
 }
 export function useProfileSuspense() {
  const { data: profile } = useSuspenseQuery({
    ...usersApi.getProfileQueryOptions()
  });
  return { profile };
 }
--- a/rsconcept/frontend/src/backend/users/useSignup.tsx
+++ b/rsconcept/frontend/src/backend/users/useSignup.tsx
@ -0,0 +1,22 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { usersApi } from '@/backend/users/api';
 import { IUserProfile, IUserSignupData } from '@/models/user';
 import { DataCallback } from '../apiTransport';
 export const useSignup = () => {
  const queryClient = useQueryClient();
  const mutation = useMutation({
    mutationKey: ['signup'],
    mutationFn: usersApi.signup,
    onSuccess: () => queryClient.invalidateQueries({ queryKey: [usersApi.baseKey] })
  });
  return {
    signup: (data: IUserSignupData, onSuccess?: DataCallback<IUserProfile>) =>
      mutation.mutate(data, { onSuccess: response => onSuccess?.(response.data as IUserProfile) }),
    isPending: mutation.isPending,
    error: mutation.error,
    reset: mutation.reset
  };
 };
--- a/rsconcept/frontend/src/backend/users/useUpdateProfile.tsx
+++ b/rsconcept/frontend/src/backend/users/useUpdateProfile.tsx
@ -0,0 +1,23 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { IUserProfile } from '@/models/user';
 import { IUpdateProfileDTO, usersApi } from './api';
 // TODO: reload users / optimistic update
 export const useUpdateProfile = () => {
  const queryClient = useQueryClient();
  const mutation = useMutation({
    mutationKey: ['update-profile'],
    mutationFn: usersApi.updateProfile,
    onSuccess: () => queryClient.invalidateQueries({ queryKey: [usersApi.baseKey] })
  });
  return {
    updateProfile: (data: IUpdateProfileDTO, onSuccess?: (newUser: IUserProfile) => void) =>
      mutation.mutate(data, { onSuccess: response => onSuccess?.(response.data as IUserProfile) }),
    isPending: mutation.isPending,
    error: mutation.error,
    reset: mutation.reset
  };
 };
--- a/rsconcept/frontend/src/backend/users/useUsers.tsx
+++ b/rsconcept/frontend/src/backend/users/useUsers.tsx
@ -0,0 +1,18 @@
 import { useQuery, useSuspenseQuery } from '@tanstack/react-query';
 import { usersApi } from './api';
 export function useUsersSuspense() {
  const { data: users } = useSuspenseQuery({
    ...usersApi.getUsersQueryOptions(),
    initialData: []
  });
  return { users };
 }
 export function useUsers() {
  const { data: users } = useQuery({
    ...usersApi.getUsersQueryOptions()
  });
  return { users: users ?? [] };
 }
--- a/rsconcept/frontend/src/components/RSInput/RSInput.tsx
+++ b/rsconcept/frontend/src/components/RSInput/RSInput.tsx
@ -9,10 +9,10 @@ import { EditorView } from 'codemirror';
 import { forwardRef, useRef } from 'react';
 import Label from '@/components/ui/Label';
 import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import { ConstituentaID, IRSForm } from '@/models/rsform';
 import { generateAlias, getCstTypePrefix, guessCstType } from '@/models/rsformAPI';
 import { extractGlobals } from '@/models/rslangAPI';
 import { usePreferencesStore } from '@/stores/preferences';
 import { APP_COLORS } from '@/styling/color';
 import { ccBracketMatching } from './bracketMatching';
@ -64,7 +64,7 @@ const RSInput = forwardRef<ReactCodeMirrorRef, RSInputProps>(
    },
    ref
  ) => {
-    const { darkMode } = useConceptOptions();
+    const darkMode = usePreferencesStore(state => state.darkMode);
    const internalRef = useRef<ReactCodeMirrorRef>(null);
    const thisRef = !ref || typeof ref === 'function' ? internalRef : ref;
--- a/rsconcept/frontend/src/components/RefsInput/RefsInput.tsx
+++ b/rsconcept/frontend/src/components/RefsInput/RefsInput.tsx
@ -9,13 +9,13 @@ import { EditorView } from 'codemirror';
 import { forwardRef, useRef, useState } from 'react';
 import Label from '@/components/ui/Label';
 import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import DlgEditReference from '@/dialogs/DlgEditReference';
 import { ReferenceType } from '@/models/language';
 import { DialogType } from '@/models/miscellaneous';
 import { ConstituentaID, IRSForm } from '@/models/rsform';
 import { useDialogsStore } from '@/stores/dialogs';
 import { usePreferencesStore } from '@/stores/preferences';
 import { APP_COLORS } from '@/styling/color';
 import { CodeMirrorWrapper } from '@/utils/codemirror';
 import { PARAMETER } from '@/utils/constants';
 import { refsNavigation } from './clickNavigation';
 import { NaturalLanguage, ReferenceTokens } from './parse';
@ -92,11 +92,14 @@ const RefsInput = forwardRef<ReactCodeMirrorRef, RefsInputInputProps>(
    },
    ref
  ) => {
-    const { darkMode } = useConceptOptions();
+    const darkMode = usePreferencesStore(state => state.darkMode);
    const [isFocused, setIsFocused] = useState(false);
-    const [showEditor, setShowEditor] = useState(false);
+    const showEditReference = useDialogsStore(state => state.showEditReference);
    const activeDialog = useDialogsStore(state => state.active);
    const isActive = activeDialog === DialogType.EDIT_REFERENCE;
    const [currentType, setCurrentType] = useState<ReferenceType>(ReferenceType.ENTITY);
    const [refText, setRefText] = useState('');
    const [hintText, setHintText] = useState('');
@ -146,7 +149,7 @@ const RefsInput = forwardRef<ReactCodeMirrorRef, RefsInputInputProps>(
    }
    function handleInput(event: React.KeyboardEvent<HTMLDivElement>) {
-      if (!thisRef.current?.view) {
+      if (!thisRef.current?.view || !schema) {
        event.preventDefault();
        event.stopPropagation();
        return;
@ -174,7 +177,17 @@ const RefsInput = forwardRef<ReactCodeMirrorRef, RefsInputInputProps>(
        setMainRefs(mainNodes.map(node => wrap.getText(node.from, node.to)));
        setBasePosition(mainNodes.filter(node => node.to <= selection.from).length);
-        setShowEditor(true);
+        showEditReference({
          schema: schema,
          initial: {
            type: currentType,
            refRaw: refText,
            text: hintText,
            basePosition: basePosition,
            mainRefs: mainRefs
          },
          onSave: handleInputReference
        });
      }
    }
@ -187,27 +200,8 @@ const RefsInput = forwardRef<ReactCodeMirrorRef, RefsInputInputProps>(
      wrap.replaceWith(referenceText);
    }
    function hideEditReference() {
      setShowEditor(false);
      setTimeout(() => thisRef.current?.view?.focus(), PARAMETER.refreshTimeout);
    }
    return (
      <div className={clsx('flex flex-col gap-2', cursor)}>
        {showEditor && schema ? (
          <DlgEditReference
            hideWindow={hideEditReference}
            schema={schema}
            initial={{
              type: currentType,
              refRaw: refText,
              text: hintText,
              basePosition: basePosition,
              mainRefs: mainRefs
            }}
            onSave={handleInputReference}
          />
        ) : null}
        <Label text={label} />
        <CodeMirror
          id={id}
@ -215,10 +209,10 @@ const RefsInput = forwardRef<ReactCodeMirrorRef, RefsInputInputProps>(
          basicSetup={editorSetup}
          theme={customTheme}
          extensions={editorExtensions}
-          value={isFocused ? value : value !== initialValue || showEditor ? value : resolved}
+          value={isFocused ? value : value !== initialValue || isActive ? value : resolved}
          indentWithTab={false}
          onChange={handleChange}
-          editable={!disabled && !showEditor}
+          editable={!disabled && !isActive}
          onKeyDown={handleInput}
          onFocus={handleFocusIn}
          onBlur={handleFocusOut}
--- a/rsconcept/frontend/src/components/info/BadgeConstituenta.tsx
+++ b/rsconcept/frontend/src/components/info/BadgeConstituenta.tsx
@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import { CstClass, IConstituenta } from '@/models/rsform';
 import { useTooltipsStore } from '@/stores/tooltips';
 import { APP_COLORS, colorFgCstStatus } from '@/styling/color';
 import { globals } from '@/utils/constants';
@ -19,7 +19,7 @@ interface BadgeConstituentaProps extends CProps.Styling {
 * Displays a badge with a constituenta alias and information tooltip.
 */
 function BadgeConstituenta({ value, prefixID, className, style }: BadgeConstituentaProps) {
-  const { setHoverCst } = useConceptOptions();
+  const setActiveCst = useTooltipsStore(state => state.setActiveCst);
  return (
    <div
@ -39,7 +39,7 @@ function BadgeConstituenta({ value, prefixID, className, style }: BadgeConstitue
        ...style
      }}
      data-tooltip-id={globals.constituenta_tooltip}
-      onMouseEnter={() => setHoverCst(value)}
+      onMouseEnter={() => setActiveCst(value)}
    >
      {value.alias}
    </div>
--- a/rsconcept/frontend/src/components/info/BadgeHelp.tsx
+++ b/rsconcept/frontend/src/components/info/BadgeHelp.tsx
@ -2,8 +2,8 @@ import React, { Suspense } from 'react';
 import TextURL from '@/components/ui/TextURL';
 import Tooltip, { PlacesType } from '@/components/ui/Tooltip';
 import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import { HelpTopic } from '@/models/miscellaneous';
 import { usePreferencesStore } from '@/stores/preferences';
 import { IconHelp } from '../Icons';
 import { CProps } from '../props';
@ -29,7 +29,7 @@ interface BadgeHelpProps extends CProps.Styling {
 * Display help icon with a manual page tooltip.
 */
 function BadgeHelp({ topic, padding = 'p-1', ...restProps }: BadgeHelpProps) {
-  const { showHelp } = useConceptOptions();
+  const showHelp = usePreferencesStore(state => state.showHelp);
  if (!showHelp) {
    return null;
--- a/rsconcept/frontend/src/components/info/InfoUsers.tsx
+++ b/rsconcept/frontend/src/components/info/InfoUsers.tsx
@ -1,6 +1,6 @@
 import clsx from 'clsx';
-import { useUsers } from '@/context/UsersContext';
+import { useLabelUser } from '@/backend/users/useLabelUser';
 import { UserID } from '@/models/user';
 import { CProps } from '../props';
@ -12,8 +12,7 @@ interface InfoUsersProps extends CProps.Styling {
 }
 function InfoUsers({ items, className, prefix, header, ...restProps }: InfoUsersProps) {
-  const { getUserLabel } = useUsers();
+  const getUserLabel = useLabelUser();
  return (
    <div className={clsx('flex flex-col dense', className)} {...restProps}>
      {header ? <h2>{header}</h2> : null}
--- a/rsconcept/frontend/src/components/select/SelectUser.tsx
+++ b/rsconcept/frontend/src/components/select/SelectUser.tsx
@ -2,17 +2,18 @@
 import clsx from 'clsx';
-import { useUsers } from '@/context/UsersContext';
+import { useLabelUser } from '@/backend/users/useLabelUser';
-import { IUserInfo, UserID } from '@/models/user';
+import { useUsers } from '@/backend/users/useUsers';
 import { UserID } from '@/models/user';
 import { matchUser } from '@/models/userAPI';
 import { CProps } from '../props';
 import SelectSingle from '../ui/SelectSingle';
 interface SelectUserProps extends CProps.Styling {
  items?: IUserInfo[];
  value?: UserID;
  onSelectValue: (newValue: UserID) => void;
  filter?: (userID: UserID) => boolean;
  placeholder?: string;
  noBorder?: boolean;
@ -20,20 +21,23 @@ interface SelectUserProps extends CProps.Styling {
 function SelectUser({
  className,
-  items,
+  filter,
  value,
  onSelectValue,
  placeholder = 'Выберите пользователя',
  ...restProps
 }: SelectUserProps) {
-  const { getUserLabel } = useUsers();
+  const { users } = useUsers();
  const getUserLabel = useLabelUser();
  const items = filter ? users.filter(user => filter(user.id)) : users;
  const options =
    items?.map(user => ({
      value: user.id,
      label: getUserLabel(user.id)
    })) ?? [];
-  function filter(option: { value: UserID | undefined; label: string }, inputValue: string) {
+  function filterLabel(option: { value: UserID | undefined; label: string }, inputValue: string) {
    const user = items?.find(item => item.id === option.value);
    return !user ? false : matchUser(user, inputValue);
  }
@ -47,7 +51,7 @@ function SelectUser({
        if (data?.value !== undefined) onSelectValue(data.value);
      }}
      // @ts-expect-error: TODO: use type definitions from react-select in filter object
-      filterOption={filter}
+      filterOption={filterLabel}
      placeholder={placeholder}
      {...restProps}
    />
--- a/rsconcept/frontend/src/components/ui/Modal.tsx
+++ b/rsconcept/frontend/src/components/ui/Modal.tsx
@ -4,6 +4,7 @@ import clsx from 'clsx';
 import useEscapeKey from '@/hooks/useEscapeKey';
 import { HelpTopic } from '@/models/miscellaneous';
 import { useDialogsStore } from '@/stores/dialogs';
 import { PARAMETER } from '@/utils/constants';
 import { prepareTooltip } from '@/utils/labels';
@ -32,9 +33,6 @@ export interface ModalProps extends CProps.Styling {
  /** Indicates that the modal window should be scrollable. */
  overflowVisible?: boolean;
  /** Callback to be called when the modal window is closed. */
  hideWindow: () => void;
  /** Callback to be called before submit. */
  beforeSubmit?: () => boolean;
@ -65,7 +63,6 @@ function Modal({
  canSubmit,
  overflowVisible,
  hideWindow,
  beforeSubmit,
  onSubmit,
  onCancel,
@ -75,10 +72,11 @@ function Modal({
  hideHelpWhen,
  ...restProps
 }: React.PropsWithChildren<ModalProps>) {
-  useEscapeKey(hideWindow);
+  const hideDialog = useDialogsStore(state => state.hideDialog);
  useEscapeKey(hideDialog);
  const handleCancel = () => {
-    hideWindow();
+    hideDialog();
    onCancel?.();
  };
@ -87,7 +85,7 @@ function Modal({
      return;
    }
    onSubmit?.();
-    hideWindow();
+    hideDialog();
  };
  return (
@ -95,7 +93,7 @@ function Modal({
      <div className={clsx('z-navigation', 'fixed top-0 left-0', 'w-full h-full', 'backdrop-blur-[3px] opacity-50')} />
      <div
        className={clsx('z-navigation', 'fixed top-0 left-0', 'w-full h-full', 'bg-prim-0 opacity-25')}
-        onClick={hideWindow}
+        onClick={hideDialog}
      />
      <div
        className={clsx(
--- a/rsconcept/frontend/src/components/ui/PDFViewer/PDFViewer.tsx
+++ b/rsconcept/frontend/src/components/ui/PDFViewer/PDFViewer.tsx
@ -1,7 +1,7 @@
 'use client';
 import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import useWindowSize from '@/hooks/useWindowSize';
 import { useFitHeight } from '@/stores/appLayout';
 /** Maximum width of the viewer. */
 const MAXIMUM_WIDTH = 1600;
@ -25,10 +25,9 @@ interface PDFViewerProps {
 */
 function PDFViewer({ file, offsetXpx, minWidth = MINIMUM_WIDTH }: PDFViewerProps) {
  const windowSize = useWindowSize();
  const { calculateHeight } = useConceptOptions();
  const pageWidth = Math.max(minWidth, Math.min((windowSize?.width ?? 0) - (offsetXpx ?? 0) - 10, MAXIMUM_WIDTH));
-  const pageHeight = calculateHeight('1rem');
+  const pageHeight = useFitHeight('1rem');
  return <embed src={`${file}#toolbar=0`} className='p-3' style={{ width: pageWidth, height: pageHeight }} />;
 }
--- a/rsconcept/frontend/src/components/ui/SubmitButton.tsx
+++ b/rsconcept/frontend/src/components/ui/SubmitButton.tsx
@ -29,7 +29,7 @@ function SubmitButton({ text = 'ОК', icon, disabled, loading, className, ...re
        loading && 'cursor-progress',
        className
      )}
-      disabled={disabled ?? loading}
+      disabled={disabled || loading}
      {...restProps}
    >
      {icon ? <span>{icon}</span> : null}
--- a/rsconcept/frontend/src/components/ui/Tooltip.tsx
+++ b/rsconcept/frontend/src/components/ui/Tooltip.tsx
@ -5,7 +5,7 @@ import { ReactNode } from 'react';
 import { createPortal } from 'react-dom';
 import { ITooltip, Tooltip as TooltipImpl } from 'react-tooltip';
-import { useConceptOptions } from '@/context/ConceptOptionsContext';
+import { usePreferencesStore } from '@/stores/preferences';
 export type { PlacesType } from 'react-tooltip';
@ -29,7 +29,7 @@ function Tooltip({
  style,
  ...restProps
 }: TooltipProps) {
-  const { darkMode } = useConceptOptions();
+  const darkMode = usePreferencesStore(state => state.darkMode);
  if (typeof window === 'undefined') {
    return null;
  }
--- a/rsconcept/frontend/src/components/wrap/ExpectedAnonymous.tsx
+++ b/rsconcept/frontend/src/components/wrap/ExpectedAnonymous.tsx
@ -1,11 +1,13 @@
 import { urls } from '@/app/urls';
-import { useAuth } from '@/context/AuthContext';
+import { useAuth } from '@/backend/auth/useAuth';
 import { useLogout } from '@/backend/auth/useLogout';
 import { useConceptNavigation } from '@/context/NavigationContext';
 import TextURL from '../ui/TextURL';
 function ExpectedAnonymous() {
-  const { user, logout } = useAuth();
+  const { user } = useAuth();
  const { logout } = useLogout();
  const router = useConceptNavigation();
  function logoutAndRedirect() {
--- a/rsconcept/frontend/src/components/wrap/RequireAuth.tsx
+++ b/rsconcept/frontend/src/components/wrap/RequireAuth.tsx
@ -1,14 +1,14 @@
 'use client';
-import { useAuth } from '@/context/AuthContext';
+import { useAuth } from '@/backend/auth/useAuth';
 import Loader from '../ui/Loader';
 import TextURL from '../ui/TextURL';
 function RequireAuth({ children }: React.PropsWithChildren) {
-  const { user, loading } = useAuth();
+  const { user, isLoading } = useAuth();
-  if (loading) {
+  if (isLoading) {
    return <Loader key='auth-loader' />;
  }
  if (user) {
--- a/rsconcept/frontend/src/context/AccessModeContext.tsx
+++ b/rsconcept/frontend/src/context/AccessModeContext.tsx
@ -1,25 +0,0 @@
 'use client';
 import { createContext, useContext, useState } from 'react';
 import { UserLevel } from '@/models/user';
 import { contextOutsideScope } from '@/utils/labels';
 interface IAccessModeContext {
  accessLevel: UserLevel;
  setAccessLevel: React.Dispatch<React.SetStateAction<UserLevel>>;
 }
 const AccessContext = createContext<IAccessModeContext | null>(null);
 export const useAccessMode = () => {
  const context = useContext(AccessContext);
  if (!context) {
    throw new Error(contextOutsideScope('useAccessMode', 'AccessModeState'));
  }
  return context;
 };
 export const AccessModeState = ({ children }: React.PropsWithChildren) => {
  const [accessLevel, setAccessLevel] = useState<UserLevel>(UserLevel.READER);
  return <AccessContext value={{ accessLevel, setAccessLevel }}>{children}</AccessContext>;
 };
--- a/rsconcept/frontend/src/context/AuthContext.tsx
+++ b/rsconcept/frontend/src/context/AuthContext.tsx
@ -1,207 +0,0 @@
 'use client';
 import { createContext, useCallback, useContext, useEffect, useState } from 'react';
 import { DataCallback } from '@/backend/apiTransport';
 import {
  getAuth,
  patchPassword,
  postLogin,
  postLogout,
  postRequestPasswordReset,
  postResetPassword,
  postSignup,
  postValidatePasswordToken
 } from '@/backend/users';
 import { type ErrorData } from '@/components/info/InfoError';
 import {
  ICurrentUser,
  IPasswordTokenData,
  IRequestPasswordData,
  IResetPasswordData,
  IUserInfo,
  IUserLoginData,
  IUserProfile,
  IUserSignupData,
  IUserUpdatePassword
 } from '@/models/user';
 import { contextOutsideScope } from '@/utils/labels';
 import { useUsers } from './UsersContext';
 interface IAuthContext {
  user: ICurrentUser | undefined;
  login: (data: IUserLoginData, callback?: DataCallback) => void;
  logout: (callback?: DataCallback) => void;
  signup: (data: IUserSignupData, callback?: DataCallback<IUserProfile>) => void;
  updatePassword: (data: IUserUpdatePassword, callback?: () => void) => void;
  requestPasswordReset: (data: IRequestPasswordData, callback?: () => void) => void;
  validateToken: (data: IPasswordTokenData, callback?: () => void) => void;
  resetPassword: (data: IResetPasswordData, callback?: () => void) => void;
  loading: boolean;
  error: ErrorData;
  setError: (error: ErrorData) => void;
 }
 const AuthContext = createContext<IAuthContext | null>(null);
 export const useAuth = () => {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error(contextOutsideScope('useAuth', 'AuthState'));
  }
  return context;
 };
 export const AuthState = ({ children }: React.PropsWithChildren) => {
  const { users } = useUsers();
  const [user, setUser] = useState<ICurrentUser | undefined>(undefined);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<ErrorData>(undefined);
  const reload = useCallback(
    (callback?: () => void) => {
      getAuth({
        onError: () => setUser(undefined),
        setLoading: setLoading,
        onSuccess: currentUser => {
          if (currentUser.id) {
            setUser(currentUser);
          } else {
            setUser(undefined);
          }
          callback?.();
        }
      });
    },
    [setUser]
  );
  function login(data: IUserLoginData, callback?: DataCallback) {
    setError(undefined);
    postLogin({
      data: data,
      showError: false,
      setLoading: setLoading,
      onError: setError,
      onSuccess: newData =>
        reload(() => {
          callback?.(newData);
        })
    });
  }
  function logout(callback?: DataCallback) {
    setError(undefined);
    postLogout({
      showError: true,
      onSuccess: newData =>
        reload(() => {
          callback?.(newData);
        })
    });
  }
  function signup(data: IUserSignupData, callback?: DataCallback<IUserProfile>) {
    setError(undefined);
    postSignup({
      data: data,
      showError: true,
      setLoading: setLoading,
      onError: setError,
      onSuccess: newData =>
        reload(() => {
          users.push(newData as IUserInfo);
          callback?.(newData);
        })
    });
  }
  const updatePassword = useCallback(
    (data: IUserUpdatePassword, callback?: () => void) => {
      setError(undefined);
      patchPassword({
        data: data,
        showError: true,
        setLoading: setLoading,
        onError: setError,
        onSuccess: () => reload(callback)
      });
    },
    [reload]
  );
  const requestPasswordReset = useCallback(
    (data: IRequestPasswordData, callback?: () => void) => {
      setError(undefined);
      postRequestPasswordReset({
        data: data,
        showError: false,
        setLoading: setLoading,
        onError: setError,
        onSuccess: () =>
          reload(() => {
            callback?.();
          })
      });
    },
    [reload]
  );
  const validateToken = useCallback(
    (data: IPasswordTokenData, callback?: () => void) => {
      setError(undefined);
      postValidatePasswordToken({
        data: data,
        showError: false,
        setLoading: setLoading,
        onError: setError,
        onSuccess: () =>
          reload(() => {
            callback?.();
          })
      });
    },
    [reload]
  );
  const resetPassword = useCallback(
    (data: IResetPasswordData, callback?: () => void) => {
      setError(undefined);
      postResetPassword({
        data: data,
        showError: false,
        setLoading: setLoading,
        onError: setError,
        onSuccess: () =>
          reload(() => {
            callback?.();
          })
      });
    },
    [reload]
  );
  useEffect(() => {
    reload();
  }, [reload]);
  return (
    <AuthContext
      value={{
        user,
        login,
        logout,
        signup,
        loading,
        error,
        setError,
        updatePassword,
        requestPasswordReset,
        validateToken,
        resetPassword
      }}
    >
      {children}
    </AuthContext>
  );
 };
--- a/rsconcept/frontend/src/context/ConceptOptionsContext.tsx
+++ b/rsconcept/frontend/src/context/ConceptOptionsContext.tsx
@ -1,194 +0,0 @@
 'use client';
 import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { flushSync } from 'react-dom';
 import InfoConstituenta from '@/components/info/InfoConstituenta';
 import Loader from '@/components/ui/Loader';
 import Tooltip from '@/components/ui/Tooltip';
 import useLocalStorage from '@/hooks/useLocalStorage';
 import { IConstituenta } from '@/models/rsform';
 import { globals, PARAMETER, storage } from '@/utils/constants';
 import { contextOutsideScope } from '@/utils/labels';
 interface IOptionsContext {
  viewportHeight: string;
  mainHeight: string;
  darkMode: boolean;
  toggleDarkMode: () => void;
  adminMode: boolean;
  toggleAdminMode: () => void;
  noNavigationAnimation: boolean;
  noNavigation: boolean;
  toggleNoNavigation: () => void;
  noFooter: boolean;
  setNoFooter: React.Dispatch<React.SetStateAction<boolean>>;
  showScroll: boolean;
  setShowScroll: React.Dispatch<React.SetStateAction<boolean>>;
  showHelp: boolean;
  toggleShowHelp: () => void;
  folderMode: boolean;
  setFolderMode: React.Dispatch<React.SetStateAction<boolean>>;
  location: string;
  setLocation: React.Dispatch<React.SetStateAction<string>>;
  setHoverCst: (newValue: IConstituenta | undefined) => void;
  calculateHeight: (offset: string, minimum?: string) => string;
 }
 const OptionsContext = createContext<IOptionsContext | null>(null);
 export const useConceptOptions = () => {
  const context = useContext(OptionsContext);
  if (!context) {
    throw new Error(contextOutsideScope('useConceptTheme', 'ThemeState'));
  }
  return context;
 };
 export const OptionsState = ({ children }: React.PropsWithChildren) => {
  const [darkMode, setDarkMode] = useLocalStorage(storage.themeDark, false);
  const [adminMode, setAdminMode] = useLocalStorage(storage.optionsAdmin, false);
  const [showHelp, setShowHelp] = useLocalStorage(storage.optionsHelp, true);
  const [noNavigation, setNoNavigation] = useState(false);
  const [folderMode, setFolderMode] = useLocalStorage<boolean>(storage.librarySearchFolderMode, true);
  const [location, setLocation] = useLocalStorage<string>(storage.librarySearchLocation, '');
  const [noNavigationAnimation, setNoNavigationAnimation] = useState(false);
  const [noFooter, setNoFooter] = useState(false);
  const [showScroll, setShowScroll] = useState(false);
  const [hoverCst, setHoverCst] = useState<IConstituenta | undefined>(undefined);
  function setDarkClass(isDark: boolean) {
    const root = window.document.documentElement;
    if (isDark) {
      root.classList.add('dark');
    } else {
      root.classList.remove('dark');
    }
    root.setAttribute('data-color-scheme', !isDark ? 'light' : 'dark');
  }
  useEffect(() => {
    setDarkClass(darkMode);
  }, [darkMode]);
  const toggleNoNavigation = useCallback(() => {
    if (noNavigation) {
      setNoNavigationAnimation(false);
      setNoNavigation(false);
    } else {
      setNoNavigationAnimation(true);
      setTimeout(() => setNoNavigation(true), PARAMETER.moveDuration);
    }
  }, [noNavigation]);
  const calculateHeight = useCallback(
    (offset: string, minimum: string = '0px') => {
      if (noNavigation) {
        return `max(calc(100dvh - (${offset})), ${minimum})`;
      } else if (noFooter) {
        return `max(calc(100dvh - 3rem - (${offset})), ${minimum})`;
      } else {
        return `max(calc(100dvh - 6.75rem - (${offset})), ${minimum})`;
      }
    },
    [noNavigation, noFooter]
  );
  const toggleDarkMode = useCallback(() => {
    if (!document.startViewTransition) {
      setDarkMode(prev => !prev);
    } else {
      const style = document.createElement('style');
      style.innerHTML = `
        * {
          animation: none !important;
          transition: none !important;
        }
      `;
      document.head.appendChild(style);
      document.startViewTransition(() => {
        flushSync(() => {
          setDarkMode(prev => !prev);
        });
      });
      setTimeout(() => document.head.removeChild(style), PARAMETER.moveDuration);
    }
  }, [setDarkMode]);
  const mainHeight = useMemo(() => {
    if (noNavigation) {
      return '100dvh';
    } else if (noFooter) {
      return 'calc(100dvh - 3rem)';
    } else {
      return 'calc(100dvh - 6.75rem)';
    }
  }, [noNavigation, noFooter]);
  const viewportHeight = useMemo(() => {
    return !noNavigation ? 'calc(100dvh - 3rem)' : '100dvh';
  }, [noNavigation]);
  return (
    <OptionsContext
      value={{
        darkMode,
        adminMode,
        noNavigationAnimation,
        noNavigation,
        noFooter,
        folderMode,
        setFolderMode,
        location,
        setLocation,
        showScroll,
        showHelp,
        toggleDarkMode: toggleDarkMode,
        toggleAdminMode: () => setAdminMode(prev => !prev),
        toggleNoNavigation: toggleNoNavigation,
        setNoFooter,
        setShowScroll,
        toggleShowHelp: () => setShowHelp(prev => !prev),
        viewportHeight,
        mainHeight,
        calculateHeight,
        setHoverCst
      }}
    >
      <>
        <Tooltip
          float
          id={globals.tooltip}
          layer='z-topmost'
          place='right-start'
          className='mt-8 max-w-[20rem] break-words'
        />
        <Tooltip
          float
          id={globals.value_tooltip}
          layer='z-topmost'
          className='max-w-[calc(min(40rem,100dvw-2rem))] text-justify'
        />
        <Tooltip clickable id={globals.constituenta_tooltip} layer='z-modalTooltip' className='max-w-[30rem]'>
          {hoverCst ? <InfoConstituenta data={hoverCst} onClick={event => event.stopPropagation()} /> : <Loader />}
        </Tooltip>
        {children}
      </>
    </OptionsContext>
  );
 };
--- a/rsconcept/frontend/src/context/LibraryContext.tsx
+++ b/rsconcept/frontend/src/context/LibraryContext.tsx
@ -3,6 +3,7 @@
 import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { DataCallback } from '@/backend/apiTransport';
 import { useAuth } from '@/backend/auth/useAuth';
 import {
  deleteLibraryItem,
  getAdminLibrary,
@ -21,11 +22,9 @@ import { matchLibraryItem, matchLibraryItemLocation } from '@/models/libraryAPI'
 import { ILibraryFilter } from '@/models/miscellaneous';
 import { IRSForm, IRSFormCloneData, IRSFormData } from '@/models/rsform';
 import { RSFormLoader } from '@/models/RSFormLoader';
 import { usePreferencesStore } from '@/stores/preferences';
 import { contextOutsideScope } from '@/utils/labels';
 import { useAuth } from './AuthContext';
 import { useConceptOptions } from './ConceptOptionsContext';
 interface ILibraryContext {
  items: ILibraryItem[];
  templates: ILibraryItem[];
@ -62,8 +61,8 @@ export const useLibrary = (): ILibraryContext => {
 };
 export const LibraryState = ({ children }: React.PropsWithChildren) => {
-  const { user, loading: userLoading } = useAuth();
+  const { user, isLoading: userLoading } = useAuth();
-  const { adminMode } = useConceptOptions();
+  const adminMode = usePreferencesStore(state => state.adminMode);
  const [items, setItems] = useState<ILibraryItem[]>([]);
  const [templates, setTemplates] = useState<ILibraryItem[]>([]);
--- a/rsconcept/frontend/src/context/OssContext.tsx
+++ b/rsconcept/frontend/src/context/OssContext.tsx
@ -3,6 +3,7 @@
 import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { DataCallback } from '@/backend/apiTransport';
 import { useAuth } from '@/backend/auth/useAuth';
 import {
  patchLibraryItem,
  patchSetAccessPolicy,
@ -38,7 +39,6 @@ import {
 import { UserID } from '@/models/user';
 import { contextOutsideScope } from '@/utils/labels';
 import { useAuth } from './AuthContext';
 import { useGlobalOss } from './GlobalOssContext';
 import { useLibrary } from './LibraryContext';
--- a/rsconcept/frontend/src/context/RSFormContext.tsx
+++ b/rsconcept/frontend/src/context/RSFormContext.tsx
@ -3,6 +3,7 @@
 import { createContext, useCallback, useContext, useMemo, useState } from 'react';
 import { DataCallback } from '@/backend/apiTransport';
 import { useAuth } from '@/backend/auth/useAuth';
 import {
  patchLibraryItem,
  patchSetAccessPolicy,
@ -50,7 +51,6 @@ import {
 import { UserID } from '@/models/user';
 import { contextOutsideScope } from '@/utils/labels';
 import { useAuth } from './AuthContext';
 import { useGlobalOss } from './GlobalOssContext';
 import { useLibrary } from './LibraryContext';
--- a/rsconcept/frontend/src/context/UserProfileContext.tsx
+++ b/rsconcept/frontend/src/context/UserProfileContext.tsx
@ -1,83 +0,0 @@
 'use client';
 import { createContext, useCallback, useContext, useEffect, useState } from 'react';
 import { DataCallback } from '@/backend/apiTransport';
 import { getProfile, patchProfile } from '@/backend/users';
 import { ErrorData } from '@/components/info/InfoError';
 import { IUserProfile, IUserUpdateData } from '@/models/user';
 import { contextOutsideScope } from '@/utils/labels';
 import { useUsers } from './UsersContext';
 interface IUserProfileContext {
  user: IUserProfile | undefined;
  loading: boolean;
  processing: boolean;
  error: ErrorData;
  errorProcessing: ErrorData;
  setError: (error: ErrorData) => void;
  updateUser: (data: IUserUpdateData, callback?: DataCallback<IUserProfile>) => void;
 }
 const ProfileContext = createContext<IUserProfileContext | null>(null);
 export const useUserProfile = () => {
  const context = useContext(ProfileContext);
  if (!context) {
    throw new Error(contextOutsideScope('useUserProfile', 'UserProfileState'));
  }
  return context;
 };
 export const UserProfileState = ({ children }: React.PropsWithChildren) => {
  const { users } = useUsers();
  const [user, setUser] = useState<IUserProfile | undefined>(undefined);
  const [loading, setLoading] = useState(true);
  const [processing, setProcessing] = useState(false);
  const [error, setError] = useState<ErrorData>(undefined);
  const [errorProcessing, setErrorProcessing] = useState<ErrorData>(undefined);
  const reload = useCallback(() => {
    setError(undefined);
    setUser(undefined);
    getProfile({
      showError: true,
      setLoading: setLoading,
      onError: setError,
      onSuccess: newData => setUser(newData)
    });
  }, [setUser]);
  const updateUser = useCallback(
    (data: IUserUpdateData, callback?: DataCallback<IUserProfile>) => {
      setErrorProcessing(undefined);
      patchProfile({
        data: data,
        showError: true,
        setLoading: setProcessing,
        onError: setErrorProcessing,
        onSuccess: newData => {
          setUser(newData);
          const libraryUser = users.find(item => item.id === user?.id);
          if (libraryUser) {
            libraryUser.first_name = newData.first_name;
            libraryUser.last_name = newData.last_name;
          }
          callback?.(newData);
        }
      });
    },
    [setUser, users, user?.id]
  );
  useEffect(() => {
    reload();
  }, [reload]);
  return (
    <ProfileContext value={{ user, updateUser, error, loading, setError, processing, errorProcessing }}>
      {children}
    </ProfileContext>
  );
 };
--- a/rsconcept/frontend/src/context/UsersContext.tsx
+++ b/rsconcept/frontend/src/context/UsersContext.tsx
@ -1,94 +0,0 @@
 'use client';
 import { createContext, useCallback, useContext, useEffect, useState } from 'react';
 import { getActiveUsers } from '@/backend/users';
 import { IUserInfo } from '@/models/user';
 import { contextOutsideScope } from '@/utils/labels';
 interface IUsersContext {
  users: IUserInfo[];
  reload: (callback?: () => void) => void;
  getUserLabel: (userID: number | null) => string;
 }
 const UsersContext = createContext<IUsersContext | null>(null);
 export const useUsers = (): IUsersContext => {
  const context = useContext(UsersContext);
  if (context === null) {
    throw new Error(contextOutsideScope('useUsers', 'UsersState'));
  }
  return context;
 };
 export const UsersState = ({ children }: React.PropsWithChildren) => {
  const [users, setUsers] = useState<IUserInfo[]>([]);
  function getUserLabel(userID: number | null) {
    const user = users.find(({ id }) => id === userID);
    if (!user) {
      return userID ? userID.toString() : 'Отсутствует';
    }
    const hasFirstName = user.first_name !== '';
    const hasLastName = user.last_name !== '';
    if (hasFirstName || hasLastName) {
      if (!hasLastName) {
        return user.first_name;
      }
      if (!hasFirstName) {
        return user.last_name;
      }
      return user.last_name + ' ' + user.first_name;
    }
    return `Аноним ${userID}`;
  }
  const reload = useCallback(
    (callback?: () => void) => {
      getActiveUsers({
        showError: true,
        onError: () => setUsers([]),
        onSuccess: newData => {
          newData.sort((a, b) => {
            if (a.last_name === '') {
              if (b.last_name === '') {
                return a.id - b.id;
              } else {
                return 1;
              }
            } else if (b.last_name === '') {
              if (a.last_name === '') {
                return a.id - b.id;
              } else {
                return -1;
              }
            } else if (a.last_name !== b.last_name) {
              return a.last_name.localeCompare(b.last_name);
            } else {
              return a.first_name.localeCompare(b.first_name);
            }
          });
          setUsers(newData);
          callback?.();
        }
      });
    },
    [setUsers]
  );
  useEffect(() => {
    reload();
  }, [reload]);
  return (
    <UsersContext
      value={{
        users,
        reload,
        getUserLabel
      }}
    >
      {children}
    </UsersContext>
  );
 };
--- a/rsconcept/frontend/src/dialogs/DlgChangeInputSchema.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgChangeInputSchema.tsx
@ -7,19 +7,21 @@ import { IconReset } from '@/components/Icons';
 import PickSchema from '@/components/select/PickSchema';
 import Label from '@/components/ui/Label';
 import MiniButton from '@/components/ui/MiniButton';
-import Modal, { ModalProps } from '@/components/ui/Modal';
+import Modal from '@/components/ui/Modal';
 import { useLibrary } from '@/context/LibraryContext';
 import { ILibraryItem, LibraryItemID, LibraryItemType } from '@/models/library';
-import { IOperation, IOperationSchema } from '@/models/oss';
+import { IOperation, IOperationSchema, OperationID } from '@/models/oss';
 import { sortItemsForOSS } from '@/models/ossAPI';
 import { useDialogsStore } from '@/stores/dialogs';
-interface DlgChangeInputSchemaProps extends Pick<ModalProps, 'hideWindow'> {
+export interface DlgChangeInputSchemaProps {
  oss: IOperationSchema;
  target: IOperation;
-  onSubmit: (newSchema: LibraryItemID | undefined) => void;
+  onSubmit: (target: OperationID, newSchema: LibraryItemID | undefined) => void;
 }
-function DlgChangeInputSchema({ oss, hideWindow, target, onSubmit }: DlgChangeInputSchemaProps) {
+function DlgChangeInputSchema() {
  const { oss, target, onSubmit } = useDialogsStore(state => state.props as DlgChangeInputSchemaProps);
  const [selected, setSelected] = useState<LibraryItemID | undefined>(target.result ?? undefined);
  const library = useLibrary();
  const sortedItems = sortItemsForOSS(oss, library.items);
@ -38,9 +40,8 @@ function DlgChangeInputSchema({ oss, hideWindow, target, onSubmit }: DlgChangeIn
      overflowVisible
      header='Выбор концептуальной схемы'
      submitText='Подтвердить выбор'
      hideWindow={hideWindow}
      canSubmit={isValid}
-      onSubmit={() => onSubmit(selected)}
+      onSubmit={() => onSubmit(target.id, selected)}
      className={clsx('w-[35rem]', 'pb-3 px-6 cc-column')}
    >
      <div className='flex justify-between gap-3 items-center'>
--- a/rsconcept/frontend/src/dialogs/DlgChangeLocation.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgChangeLocation.tsx
@ -3,23 +3,25 @@
 import clsx from 'clsx';
 import { useState } from 'react';
 import { useAuth } from '@/backend/auth/useAuth';
 import SelectLocationContext from '@/components/select/SelectLocationContext';
 import SelectLocationHead from '@/components/select/SelectLocationHead';
 import Label from '@/components/ui/Label';
-import Modal, { ModalProps } from '@/components/ui/Modal';
+import Modal from '@/components/ui/Modal';
 import TextArea from '@/components/ui/TextArea';
 import { useAuth } from '@/context/AuthContext';
 import { useLibrary } from '@/context/LibraryContext';
 import { LocationHead } from '@/models/library';
 import { combineLocation, validateLocation } from '@/models/libraryAPI';
 import { useDialogsStore } from '@/stores/dialogs';
 import { limits } from '@/utils/constants';
-interface DlgChangeLocationProps extends Pick<ModalProps, 'hideWindow'> {
+export interface DlgChangeLocationProps {
  initial: string;
  onChangeLocation: (newLocation: string) => void;
 }
-function DlgChangeLocation({ hideWindow, initial, onChangeLocation }: DlgChangeLocationProps) {
+function DlgChangeLocation() {
  const { initial, onChangeLocation } = useDialogsStore(state => state.props as DlgChangeLocationProps);
  const { user } = useAuth();
  const [head, setHead] = useState<LocationHead>(initial.substring(0, 2) as LocationHead);
  const [body, setBody] = useState<string>(initial.substring(3));
@ -40,7 +42,6 @@ function DlgChangeLocation({ hideWindow, initial, onChangeLocation }: DlgChangeL
      header='Изменение расположения'
      submitText='Переместить'
      submitInvalidTooltip={`Допустимы буквы, цифры, подчерк, пробел и "!". Сегмент пути не может начинаться и заканчиваться пробелом. Общая длина (с корнем) не должна превышать ${limits.location_len}`}
      hideWindow={hideWindow}
      canSubmit={isValid}
      onSubmit={() => onChangeLocation(location)}
      className={clsx('w-[35rem]', 'pb-3 px-6 flex gap-3 h-[9rem]')}
--- a/rsconcept/frontend/src/dialogs/DlgCloneLibraryItem.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgCloneLibraryItem.tsx
@ -5,6 +5,7 @@ import { useState } from 'react';
 import { toast } from 'react-toastify';
 import { urls } from '@/app/urls';
 import { useAuth } from '@/backend/auth/useAuth';
 import { VisibilityIcon } from '@/components/DomainIcons';
 import SelectAccessPolicy from '@/components/select/SelectAccessPolicy';
 import SelectLocationContext from '@/components/select/SelectLocationContext';
@ -12,27 +13,31 @@ import SelectLocationHead from '@/components/select/SelectLocationHead';
 import Checkbox from '@/components/ui/Checkbox';
 import Label from '@/components/ui/Label';
 import MiniButton from '@/components/ui/MiniButton';
-import Modal, { ModalProps } from '@/components/ui/Modal';
+import Modal from '@/components/ui/Modal';
 import TextArea from '@/components/ui/TextArea';
 import TextInput from '@/components/ui/TextInput';
 import { useAuth } from '@/context/AuthContext';
 import { useLibrary } from '@/context/LibraryContext';
 import { useConceptNavigation } from '@/context/NavigationContext';
 import { AccessPolicy, ILibraryItem, LocationHead } from '@/models/library';
 import { cloneTitle, combineLocation, validateLocation } from '@/models/libraryAPI';
 import { ConstituentaID, IRSFormCloneData } from '@/models/rsform';
 import { useDialogsStore } from '@/stores/dialogs';
 import { information } from '@/utils/labels';
-interface DlgCloneLibraryItemProps extends Pick<ModalProps, 'hideWindow'> {
+export interface DlgCloneLibraryItemProps {
  base: ILibraryItem;
  initialLocation: string;
  selected: ConstituentaID[];
  totalCount: number;
 }
-function DlgCloneLibraryItem({ hideWindow, base, initialLocation, selected, totalCount }: DlgCloneLibraryItemProps) {
+function DlgCloneLibraryItem() {
  const { base, initialLocation, selected, totalCount } = useDialogsStore(
    state => state.props as DlgCloneLibraryItemProps
  );
  const router = useConceptNavigation();
  const { user } = useAuth();
  const [title, setTitle] = useState(cloneTitle(base));
  const [alias, setAlias] = useState(base.alias);
  const [comment, setComment] = useState(base.comment);
@ -77,7 +82,6 @@ function DlgCloneLibraryItem({ hideWindow, base, initialLocation, selected, tota
  return (
    <Modal
      header='Создание копии концептуальной схемы'
      hideWindow={hideWindow}
      canSubmit={canSubmit}
      submitText='Создать'
      onSubmit={handleSubmit}
--- a/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/index.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/index.tsx
@ -1 +0,0 @@
 export { default } from './DlgConstituentaTemplate';
--- a/rsconcept/frontend/src/dialogs/DlgCreateCst/DlgCreateCst.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgCreateCst/DlgCreateCst.tsx
@ -2,20 +2,22 @@
 import { useState } from 'react';
-import Modal, { ModalProps } from '@/components/ui/Modal';
+import Modal from '@/components/ui/Modal';
 import usePartialUpdate from '@/hooks/usePartialUpdate';
 import { CstType, ICstCreateData, IRSForm } from '@/models/rsform';
 import { generateAlias } from '@/models/rsformAPI';
 import { useDialogsStore } from '@/stores/dialogs';
 import FormCreateCst from './FormCreateCst';
-interface DlgCreateCstProps extends Pick<ModalProps, 'hideWindow'> {
+export interface DlgCreateCstProps {
  initial?: ICstCreateData;
  schema: IRSForm;
  onCreate: (data: ICstCreateData) => void;
 }
-function DlgCreateCst({ hideWindow, initial, schema, onCreate }: DlgCreateCstProps) {
+function DlgCreateCst() {
  const { initial, schema, onCreate } = useDialogsStore(state => state.props as DlgCreateCstProps);
  const [validated, setValidated] = useState(false);
  const [cstData, updateCstData] = usePartialUpdate(
    initial || {
@ -35,7 +37,6 @@ function DlgCreateCst({ hideWindow, initial, schema, onCreate }: DlgCreateCstPro
  return (
    <Modal
      header='Создание конституенты'
      hideWindow={hideWindow}
      canSubmit={validated}
      onSubmit={handleSubmit}
      submitText='Создать'
--- a/rsconcept/frontend/src/dialogs/DlgCreateOperation/DlgCreateOperation.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgCreateOperation/DlgCreateOperation.tsx
@ -10,13 +10,13 @@ import { useLibrary } from '@/context/LibraryContext';
 import { LibraryItemID } from '@/models/library';
 import { HelpTopic } from '@/models/miscellaneous';
 import { IOperationCreateData, IOperationSchema, OperationID, OperationType } from '@/models/oss';
 import { useDialogsStore } from '@/stores/dialogs';
 import { describeOperationType, labelOperationType } from '@/utils/labels';
 import TabInputOperation from './TabInputOperation';
 import TabSynthesisOperation from './TabSynthesisOperation';
-interface DlgCreateOperationProps {
+export interface DlgCreateOperationProps {
  hideWindow: () => void;
  oss: IOperationSchema;
  onCreate: (data: IOperationCreateData) => void;
  initialInputs: OperationID[];
@ -27,7 +27,8 @@ export enum TabID {
  SYNTHESIS = 1
 }
-function DlgCreateOperation({ hideWindow, oss, onCreate, initialInputs }: DlgCreateOperationProps) {
+function DlgCreateOperation() {
  const { oss, onCreate, initialInputs } = useDialogsStore(state => state.props as DlgCreateOperationProps);
  const library = useLibrary();
  const [activeTab, setActiveTab] = useState(initialInputs.length > 0 ? TabID.SYNTHESIS : TabID.INPUT);
@ -98,7 +99,6 @@ function DlgCreateOperation({ hideWindow, oss, onCreate, initialInputs }: DlgCre
    <Modal
      header='Создание операции'
      submitText='Создать'
      hideWindow={hideWindow}
      canSubmit={isValid}
      onSubmit={handleSubmit}
      className='w-[40rem] px-6 h-[32rem]'
--- a/rsconcept/frontend/src/dialogs/DlgCreateVersion.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgCreateVersion.tsx
@ -4,21 +4,23 @@ import clsx from 'clsx';
 import { useState } from 'react';
 import Checkbox from '@/components/ui/Checkbox';
-import Modal, { ModalProps } from '@/components/ui/Modal';
+import Modal from '@/components/ui/Modal';
 import TextArea from '@/components/ui/TextArea';
 import TextInput from '@/components/ui/TextInput';
 import { IVersionCreateData, IVersionInfo } from '@/models/library';
 import { nextVersion } from '@/models/libraryAPI';
 import { ConstituentaID } from '@/models/rsform';
 import { useDialogsStore } from '@/stores/dialogs';
-interface DlgCreateVersionProps extends Pick<ModalProps, 'hideWindow'> {
+export interface DlgCreateVersionProps {
  versions: IVersionInfo[];
  onCreate: (data: IVersionCreateData) => void;
  selected: ConstituentaID[];
  totalCount: number;
 }
-function DlgCreateVersion({ hideWindow, versions, selected, totalCount, onCreate }: DlgCreateVersionProps) {
+function DlgCreateVersion() {
  const { versions, selected, totalCount, onCreate } = useDialogsStore(state => state.props as DlgCreateVersionProps);
  const [version, setVersion] = useState(versions.length > 0 ? nextVersion(versions[0].version) : '1.0.0');
  const [description, setDescription] = useState('');
  const [onlySelected, setOnlySelected] = useState(false);
@ -39,7 +41,6 @@ function DlgCreateVersion({ hideWindow, versions, selected, totalCount, onCreate
  return (
    <Modal
      header='Создание версии'
      hideWindow={hideWindow}
      canSubmit={canSubmit}
      onSubmit={handleSubmit}
      submitText='Создать'
--- a/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/DlgConstituentaTemplate.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/DlgConstituentaTemplate.tsx
@ -4,7 +4,7 @@ import clsx from 'clsx';
 import { useEffect, useState } from 'react';
 import { TabList, TabPanel, Tabs } from 'react-tabs';
-import Modal, { ModalProps } from '@/components/ui/Modal';
+import Modal from '@/components/ui/Modal';
 import TabLabel from '@/components/ui/TabLabel';
 import { useLibrary } from '@/context/LibraryContext';
 import usePartialUpdate from '@/hooks/usePartialUpdate';
@ -12,13 +12,14 @@ import { HelpTopic } from '@/models/miscellaneous';
 import { CstType, ICstCreateData, IRSForm } from '@/models/rsform';
 import { generateAlias, validateNewAlias } from '@/models/rsformAPI';
 import { inferTemplatedType, substituteTemplateArgs } from '@/models/rslangAPI';
 import { useDialogsStore } from '@/stores/dialogs';
 import { prompts } from '@/utils/labels';
 import FormCreateCst from '../DlgCreateCst/FormCreateCst';
 import TabArguments, { IArgumentsState } from './TabArguments';
 import TabTemplate, { ITemplateState } from './TabTemplate';
-interface DlgConstituentaTemplateProps extends Pick<ModalProps, 'hideWindow'> {
+export interface DlgCstTemplateProps {
  schema: IRSForm;
  onCreate: (data: ICstCreateData) => void;
  insertAfter?: number;
@ -30,7 +31,8 @@ export enum TabID {
  CONSTITUENTA = 2
 }
-function DlgConstituentaTemplate({ hideWindow, schema, onCreate, insertAfter }: DlgConstituentaTemplateProps) {
+function DlgCstTemplate() {
  const { schema, onCreate, insertAfter } = useDialogsStore(state => state.props as DlgCstTemplateProps);
  const { retrieveTemplate } = useLibrary();
  const [activeTab, setActiveTab] = useState(TabID.TEMPLATE);
@ -128,7 +130,6 @@ function DlgConstituentaTemplate({ hideWindow, schema, onCreate, insertAfter }:
      header='Создание конституенты из шаблона'
      submitText='Создать'
      className='w-[43rem] h-[35rem] px-6'
      hideWindow={hideWindow}
      canSubmit={validated}
      beforeSubmit={handlePrompt}
      onSubmit={handleSubmit}
@ -164,4 +165,4 @@ function DlgConstituentaTemplate({ hideWindow, schema, onCreate, insertAfter }:
  );
 }
-export default DlgConstituentaTemplate;
+export default DlgCstTemplate;
--- a/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/TabArguments.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/TabArguments.tsx
--- a/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/TabTemplate.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/TabTemplate.tsx
--- a/rsconcept/frontend/src/dialogs/DlgCstTemplate/index.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgCstTemplate/index.tsx
@ -0,0 +1 @@
 export { default } from './DlgCstTemplate';
--- a/rsconcept/frontend/src/dialogs/DlgDeleteCst/DlgDeleteCst.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgDeleteCst/DlgDeleteCst.tsx
@ -4,19 +4,22 @@ import clsx from 'clsx';
 import { useState } from 'react';
 import Checkbox from '@/components/ui/Checkbox';
-import Modal, { ModalProps } from '@/components/ui/Modal';
+import Modal from '@/components/ui/Modal';
 import { ConstituentaID, IRSForm } from '@/models/rsform';
 import { useDialogsStore } from '@/stores/dialogs';
 import { prefixes } from '@/utils/constants';
 import ListConstituents from './ListConstituents';
-interface DlgDeleteCstProps extends Pick<ModalProps, 'hideWindow'> {
+export interface DlgDeleteCstProps {
  schema: IRSForm;
  selected: ConstituentaID[];
  onDelete: (items: ConstituentaID[]) => void;
 }
-function DlgDeleteCst({ hideWindow, selected, schema, onDelete }: DlgDeleteCstProps) {
+function DlgDeleteCst() {
  const { selected, schema, onDelete } = useDialogsStore(state => state.props as DlgDeleteCstProps);
  const hideDialog = useDialogsStore(state => state.hideDialog);
  const [expandOut, setExpandOut] = useState(false);
  const expansion: ConstituentaID[] = schema.graph.expandAllOutputs(selected);
  const hasInherited = selected.some(
@ -25,7 +28,7 @@ function DlgDeleteCst({ hideWindow, selected, schema, onDelete }: DlgDeleteCstPr
  );
  function handleSubmit() {
-    hideWindow();
+    hideDialog();
    if (expandOut) {
      onDelete(selected.concat(expansion));
    } else {
@ -38,7 +41,6 @@ function DlgDeleteCst({ hideWindow, selected, schema, onDelete }: DlgDeleteCstPr
      canSubmit
      header='Удаление конституент'
      submitText={expandOut ? 'Удалить с зависимыми' : 'Удалить'}
      hideWindow={hideWindow}
      onSubmit={handleSubmit}
      className={clsx('cc-column', 'max-w-[60vw] min-w-[30rem]', 'px-6')}
    >
--- a/rsconcept/frontend/src/dialogs/DlgDeleteOperation.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgDeleteOperation.tsx
@ -4,22 +4,24 @@ import clsx from 'clsx';
 import { useState } from 'react';
 import Checkbox from '@/components/ui/Checkbox';
-import Modal, { ModalProps } from '@/components/ui/Modal';
+import Modal from '@/components/ui/Modal';
 import TextInput from '@/components/ui/TextInput';
 import { HelpTopic } from '@/models/miscellaneous';
-import { IOperation } from '@/models/oss';
+import { IOperation, OperationID } from '@/models/oss';
 import { useDialogsStore } from '@/stores/dialogs';
-interface DlgDeleteOperationProps extends Pick<ModalProps, 'hideWindow'> {
+export interface DlgDeleteOperationProps {
  target: IOperation;
-  onSubmit: (keepConstituents: boolean, deleteSchema: boolean) => void;
+  onSubmit: (targetID: OperationID, keepConstituents: boolean, deleteSchema: boolean) => void;
 }
-function DlgDeleteOperation({ hideWindow, target, onSubmit }: DlgDeleteOperationProps) {
+function DlgDeleteOperation() {
  const { target, onSubmit } = useDialogsStore(state => state.props as DlgDeleteOperationProps);
  const [keepConstituents, setKeepConstituents] = useState(false);
  const [deleteSchema, setDeleteSchema] = useState(false);
  function handleSubmit() {
-    onSubmit(keepConstituents, deleteSchema);
+    onSubmit(target.id, keepConstituents, deleteSchema);
  }
  return (
@ -27,7 +29,6 @@ function DlgDeleteOperation({ hideWindow, target, onSubmit }: DlgDeleteOperation
      overflowVisible
      header='Удаление операции'
      submitText='Подтвердить удаление'
      hideWindow={hideWindow}
      canSubmit={true}
      onSubmit={handleSubmit}
      className={clsx('w-[35rem]', 'pb-3 px-6 cc-column', 'select-none')}
--- a/rsconcept/frontend/src/dialogs/DlgEditEditors/DlgEditEditors.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgEditEditors/DlgEditEditors.tsx
@ -3,26 +3,26 @@
 import clsx from 'clsx';
 import { useState } from 'react';
 import { useUsers } from '@/backend/users/useUsers';
 import { IconRemove } from '@/components/Icons';
 import SelectUser from '@/components/select/SelectUser';
 import Label from '@/components/ui/Label';
 import MiniButton from '@/components/ui/MiniButton';
 import Modal from '@/components/ui/Modal';
 import { useUsers } from '@/context/UsersContext';
 import { UserID } from '@/models/user';
 import { useDialogsStore } from '@/stores/dialogs';
 import TableUsers from './TableUsers';
-interface DlgEditEditorsProps {
+export interface DlgEditEditorsProps {
  editors: UserID[];
  setEditors: (newValue: UserID[]) => void;
  hideWindow: () => void;
 }
-function DlgEditEditors({ hideWindow, editors, setEditors }: DlgEditEditorsProps) {
+function DlgEditEditors() {
  const { editors, setEditors } = useDialogsStore(state => state.props as DlgEditEditorsProps);
  const [selected, setSelected] = useState<UserID[]>(editors);
  const { users } = useUsers();
  const filtered = users.filter(user => !selected.includes(user.id));
  function handleSubmit() {
    setEditors(selected);
@ -41,7 +41,6 @@ function DlgEditEditors({ hideWindow, editors, setEditors }: DlgEditEditorsProps
      canSubmit
      header='Список редакторов'
      submitText='Сохранить список'
      hideWindow={hideWindow}
      className='flex flex-col w-[35rem] px-6 gap-3 pb-6'
      onSubmit={handleSubmit}
    >
@ -61,7 +60,12 @@ function DlgEditEditors({ hideWindow, editors, setEditors }: DlgEditEditorsProps
      <div className='flex items-center gap-3'>
        <Label text='Добавить' />
-        <SelectUser items={filtered} value={undefined} onSelectValue={onAddEditor} className='w-[25rem]' />
+        <SelectUser
          filter={id => !selected.includes(id)}
          value={undefined}
          onSelectValue={onAddEditor}
          className='w-[25rem]'
        />
      </div>
    </Modal>
  );
--- a/rsconcept/frontend/src/dialogs/DlgEditOperation/DlgEditOperation.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgEditOperation/DlgEditOperation.tsx
@ -19,13 +19,13 @@ import {
 } from '@/models/oss';
 import { SubstitutionValidator } from '@/models/ossAPI';
 import { ConstituentaID } from '@/models/rsform';
 import { useDialogsStore } from '@/stores/dialogs';
 import TabArguments from './TabArguments';
 import TabOperation from './TabOperation';
 import TabSynthesis from './TabSynthesis';
-interface DlgEditOperationProps {
+export interface DlgEditOperationProps {
  hideWindow: () => void;
  oss: IOperationSchema;
  target: IOperation;
  onSubmit: (data: IOperationUpdateData) => void;
@ -37,7 +37,8 @@ export enum TabID {
  SUBSTITUTION = 2
 }
-function DlgEditOperation({ hideWindow, oss, target, onSubmit }: DlgEditOperationProps) {
+function DlgEditOperation() {
  const { oss, target, onSubmit } = useDialogsStore(state => state.props as DlgEditOperationProps);
  const [activeTab, setActiveTab] = useState(TabID.CARD);
  const [alias, setAlias] = useState(target.alias);
@ -142,7 +143,6 @@ function DlgEditOperation({ hideWindow, oss, target, onSubmit }: DlgEditOperatio
    <Modal
      header='Редактирование операции'
      submitText='Сохранить'
      hideWindow={hideWindow}
      canSubmit={canSubmit}
      onSubmit={handleSubmit}
      className='w-[40rem] px-6 h-[32rem]'
--- a/rsconcept/frontend/src/dialogs/DlgEditReference/DlgEditReference.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgEditReference/DlgEditReference.tsx
@ -9,6 +9,7 @@ import TabLabel from '@/components/ui/TabLabel';
 import { ReferenceType } from '@/models/language';
 import { HelpTopic } from '@/models/miscellaneous';
 import { IRSForm } from '@/models/rsform';
 import { useDialogsStore } from '@/stores/dialogs';
 import { labelReferenceType } from '@/utils/labels';
 import TabEntityReference from './TabEntityReference';
@ -22,8 +23,7 @@ export interface IReferenceInputState {
  basePosition: number;
 }
-interface DlgEditReferenceProps {
+export interface DlgEditReferenceProps {
  hideWindow: () => void;
  schema: IRSForm;
  initial: IReferenceInputState;
  onSave: (newRef: string) => void;
@ -34,7 +34,8 @@ export enum TabID {
  SYNTACTIC = 1
 }
-function DlgEditReference({ hideWindow, schema, initial, onSave }: DlgEditReferenceProps) {
+function DlgEditReference() {
  const { schema, initial, onSave } = useDialogsStore(state => state.props as DlgEditReferenceProps);
  const [activeTab, setActiveTab] = useState(initial.type === ReferenceType.ENTITY ? TabID.ENTITY : TabID.SYNTACTIC);
  const [reference, setReference] = useState('');
  const [isValid, setIsValid] = useState(false);
@ -43,7 +44,6 @@ function DlgEditReference({ hideWindow, schema, initial, onSave }: DlgEditRefere
    <Modal
      header='Редактирование ссылки'
      submitText='Сохранить ссылку'
      hideWindow={hideWindow}
      canSubmit={isValid}
      onSubmit={() => onSave(reference)}
      className='w-[40rem] px-6 h-[32rem]'
--- a/rsconcept/frontend/src/dialogs/DlgEditVersions/DlgEditVersions.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgEditVersions/DlgEditVersions.tsx
@ -7,21 +7,21 @@ import MiniButton from '@/components/ui/MiniButton';
 import Modal from '@/components/ui/Modal';
 import TextArea from '@/components/ui/TextArea';
 import TextInput from '@/components/ui/TextInput';
 import { useRSForm } from '@/context/RSFormContext';
 import { IVersionData, IVersionInfo, VersionID } from '@/models/library';
 import { useDialogsStore } from '@/stores/dialogs';
 import TableVersions from './TableVersions';
-interface DlgEditVersionsProps {
+export interface DlgEditVersionsProps {
  hideWindow: () => void;
  versions: IVersionInfo[];
  onDelete: (versionID: VersionID) => void;
  onUpdate: (versionID: VersionID, data: IVersionData) => void;
 }
-function DlgEditVersions({ hideWindow, versions, onDelete, onUpdate }: DlgEditVersionsProps) {
+function DlgEditVersions() {
-  const { processing } = useRSForm();
+  const { versions, onDelete, onUpdate } = useDialogsStore(state => state.props as DlgEditVersionsProps);
  const [selected, setSelected] = useState<IVersionInfo | undefined>(undefined);
  const processing = false; // TODO: fix processing hook and versions update
  const [version, setVersion] = useState('');
  const [description, setDescription] = useState('');
@ -54,12 +54,7 @@ function DlgEditVersions({ hideWindow, versions, onDelete, onUpdate }: DlgEditVe
  }, [selected]);
  return (
-    <Modal
+    <Modal readonly header='Редактирование версий' className='flex flex-col w-[40rem] px-6 gap-3 pb-6'>
      readonly
      header='Редактирование версий'
      hideWindow={hideWindow}
      className='flex flex-col w-[40rem] px-6 gap-3 pb-6'
    >
      <TableVersions
        processing={processing}
        items={versions}
--- a/rsconcept/frontend/src/dialogs/DlgEditWordForms/DlgEditWordForms.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgEditWordForms/DlgEditWordForms.tsx
@ -14,18 +14,19 @@ import { Grammeme, ITextRequest, IWordForm, IWordFormPlain } from '@/models/lang
 import { parseGrammemes, wordFormEquals } from '@/models/languageAPI';
 import { HelpTopic } from '@/models/miscellaneous';
 import { IConstituenta, TermForm } from '@/models/rsform';
 import { useDialogsStore } from '@/stores/dialogs';
 import { prompts } from '@/utils/labels';
 import { IGrammemeOption, SelectorGrammemes, SelectorGrammemesList } from '@/utils/selectors';
 import TableWordForms from './TableWordForms';
-interface DlgEditWordFormsProps {
+export interface DlgEditWordFormsProps {
  hideWindow: () => void;
  target: IConstituenta;
  onSave: (data: TermForm[]) => void;
 }
-function DlgEditWordForms({ hideWindow, target, onSave }: DlgEditWordFormsProps) {
+function DlgEditWordForms() {
  const { target, onSave } = useDialogsStore(state => state.props as DlgEditWordFormsProps);
  const textProcessor = useConceptText();
  const [term, setTerm] = useState('');
@ -123,7 +124,6 @@ function DlgEditWordForms({ hideWindow, target, onSave }: DlgEditWordFormsProps)
    <Modal
      canSubmit
      header='Редактирование словоформ'
      hideWindow={hideWindow}
      submitText='Сохранить'
      onSubmit={handleSubmit}
      className='flex flex-col w-[40rem] px-6'
--- a/rsconcept/frontend/src/dialogs/DlgGraphParams.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgGraphParams.tsx
@ -1,24 +1,25 @@
 'use client';
 import Checkbox from '@/components/ui/Checkbox';
-import Modal, { ModalProps } from '@/components/ui/Modal';
+import Modal from '@/components/ui/Modal';
 import usePartialUpdate from '@/hooks/usePartialUpdate';
 import { GraphFilterParams } from '@/models/miscellaneous';
 import { CstType } from '@/models/rsform';
 import { useDialogsStore } from '@/stores/dialogs';
 import { labelCstType } from '@/utils/labels';
-interface DlgGraphParamsProps extends Pick<ModalProps, 'hideWindow'> {
+export interface DlgGraphParamsProps {
  initial: GraphFilterParams;
  onConfirm: (params: GraphFilterParams) => void;
 }
-function DlgGraphParams({ hideWindow, initial, onConfirm }: DlgGraphParamsProps) {
+function DlgGraphParams() {
  const { initial, onConfirm } = useDialogsStore(state => state.props as DlgGraphParamsProps);
  const [params, updateParams] = usePartialUpdate(initial);
  return (
    <Modal
      canSubmit
      hideWindow={hideWindow}
      header='Настройки графа термов'
      onSubmit={() => onConfirm(params)}
      submitText='Применить'
--- a/rsconcept/frontend/src/dialogs/DlgInlineSynthesis/DlgInlineSynthesis.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgInlineSynthesis/DlgInlineSynthesis.tsx
@ -4,18 +4,19 @@ import clsx from 'clsx';
 import { useEffect, useState } from 'react';
 import { TabList, TabPanel, Tabs } from 'react-tabs';
-import Modal, { ModalProps } from '@/components/ui/Modal';
+import Modal from '@/components/ui/Modal';
 import TabLabel from '@/components/ui/TabLabel';
 import useRSFormDetails from '@/hooks/useRSFormDetails';
 import { LibraryItemID } from '@/models/library';
 import { ICstSubstitute } from '@/models/oss';
 import { ConstituentaID, IInlineSynthesisData, IRSForm } from '@/models/rsform';
 import { useDialogsStore } from '@/stores/dialogs';
 import TabConstituents from './TabConstituents';
 import TabSchema from './TabSchema';
 import TabSubstitutions from './TabSubstitutions';
-interface DlgInlineSynthesisProps extends Pick<ModalProps, 'hideWindow'> {
+export interface DlgInlineSynthesisProps {
  receiver: IRSForm;
  onInlineSynthesis: (data: IInlineSynthesisData) => void;
 }
@ -26,7 +27,8 @@ export enum TabID {
  SUBSTITUTIONS = 2
 }
-function DlgInlineSynthesis({ hideWindow, receiver, onInlineSynthesis }: DlgInlineSynthesisProps) {
+function DlgInlineSynthesis() {
  const { receiver, onInlineSynthesis } = useDialogsStore(state => state.props as DlgInlineSynthesisProps);
  const [activeTab, setActiveTab] = useState(TabID.SCHEMA);
  const [donorID, setDonorID] = useState<LibraryItemID | undefined>(undefined);
@ -60,7 +62,6 @@ function DlgInlineSynthesis({ hideWindow, receiver, onInlineSynthesis }: DlgInli
      header='Импорт концептуальной схем'
      submitText='Добавить конституенты'
      className='w-[40rem] h-[33rem] px-6'
      hideWindow={hideWindow}
      canSubmit={validated}
      onSubmit={handleSubmit}
    >
--- a/rsconcept/frontend/src/dialogs/DlgRelocateConstituents.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgRelocateConstituents.tsx
@ -7,7 +7,7 @@ import { RelocateUpIcon } from '@/components/DomainIcons';
 import PickMultiConstituenta from '@/components/select/PickMultiConstituenta';
 import SelectLibraryItem from '@/components/select/SelectLibraryItem';
 import MiniButton from '@/components/ui/MiniButton';
-import Modal, { ModalProps } from '@/components/ui/Modal';
+import Modal from '@/components/ui/Modal';
 import DataLoader from '@/components/wrap/DataLoader';
 import { useLibrary } from '@/context/LibraryContext';
 import useRSFormDetails from '@/hooks/useRSFormDetails';
@ -16,15 +16,17 @@ import { HelpTopic } from '@/models/miscellaneous';
 import { ICstRelocateData, IOperation, IOperationSchema } from '@/models/oss';
 import { getRelocateCandidates } from '@/models/ossAPI';
 import { ConstituentaID } from '@/models/rsform';
 import { useDialogsStore } from '@/stores/dialogs';
 import { prefixes } from '@/utils/constants';
-interface DlgRelocateConstituentsProps extends Pick<ModalProps, 'hideWindow'> {
+export interface DlgRelocateConstituentsProps {
  oss: IOperationSchema;
  initialTarget?: IOperation;
  onSubmit: (data: ICstRelocateData) => void;
 }
-function DlgRelocateConstituents({ oss, hideWindow, initialTarget, onSubmit }: DlgRelocateConstituentsProps) {
+function DlgRelocateConstituents() {
  const { oss, initialTarget, onSubmit } = useDialogsStore(state => state.props as DlgRelocateConstituentsProps);
  const library = useLibrary();
  const [directionUp, setDirectionUp] = useState(true);
@ -88,7 +90,6 @@ function DlgRelocateConstituents({ oss, hideWindow, initialTarget, onSubmit }: D
    <Modal
      header='Перенос конституент'
      submitText='Переместить'
      hideWindow={hideWindow}
      canSubmit={isValid}
      onSubmit={handleSubmit}
      className={clsx('w-[40rem] h-[33rem]', 'py-3 px-6')}
--- a/rsconcept/frontend/src/dialogs/DlgRenameCst.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgRenameCst.tsx
@ -3,25 +3,26 @@
 import clsx from 'clsx';
 import { useEffect, useState } from 'react';
-import Modal, { ModalProps } from '@/components/ui/Modal';
+import Modal from '@/components/ui/Modal';
 import SelectSingle from '@/components/ui/SelectSingle';
 import TextInput from '@/components/ui/TextInput';
 import { useRSForm } from '@/context/RSFormContext';
 import usePartialUpdate from '@/hooks/usePartialUpdate';
 import { HelpTopic } from '@/models/miscellaneous';
-import { CstType, ICstRenameData } from '@/models/rsform';
+import { CstType, ICstRenameData, IRSForm } from '@/models/rsform';
 import { generateAlias, validateNewAlias } from '@/models/rsformAPI';
 import { useDialogsStore } from '@/stores/dialogs';
 import { labelCstType } from '@/utils/labels';
 import { SelectorCstType } from '@/utils/selectors';
-interface DlgRenameCstProps extends Pick<ModalProps, 'hideWindow'> {
+export interface DlgRenameCstProps {
  schema: IRSForm;
  initial: ICstRenameData;
  allowChangeType: boolean;
  onRename: (data: ICstRenameData) => void;
 }
-function DlgRenameCst({ hideWindow, initial, allowChangeType, onRename }: DlgRenameCstProps) {
+function DlgRenameCst() {
-  const { schema } = useRSForm();
+  const { schema, initial, allowChangeType, onRename } = useDialogsStore(state => state.props as DlgRenameCstProps);
  const [validated, setValidated] = useState(false);
  const [cstData, updateData] = usePartialUpdate(initial);
@ -42,7 +43,6 @@ function DlgRenameCst({ hideWindow, initial, allowChangeType, onRename }: DlgRen
      header='Переименование конституенты'
      submitText='Переименовать'
      submitInvalidTooltip='Введите незанятое имя, соответствующее типу'
      hideWindow={hideWindow}
      canSubmit={validated}
      onSubmit={() => onRename(cstData)}
      className={clsx('w-[30rem]', 'py-6 pr-3 pl-6 flex gap-3 justify-center items-center ')}
--- a/rsconcept/frontend/src/dialogs/DlgShowAST/DlgShowAST.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgShowAST/DlgShowAST.tsx
@ -3,19 +3,21 @@
 import { useState } from 'react';
 import { ReactFlowProvider } from 'reactflow';
-import Modal, { ModalProps } from '@/components/ui/Modal';
+import Modal from '@/components/ui/Modal';
 import Overlay from '@/components/ui/Overlay';
 import { HelpTopic } from '@/models/miscellaneous';
 import { SyntaxTree } from '@/models/rslang';
 import { useDialogsStore } from '@/stores/dialogs';
 import ASTFlow from './ASTFlow';
-interface DlgShowASTProps extends Pick<ModalProps, 'hideWindow'> {
+export interface DlgShowASTProps {
  syntaxTree: SyntaxTree;
  expression: string;
 }
-function DlgShowAST({ hideWindow, syntaxTree, expression }: DlgShowASTProps) {
+function DlgShowAST() {
  const { syntaxTree, expression } = useDialogsStore(state => state.props as DlgShowASTProps);
  const [hoverID, setHoverID] = useState<number | undefined>(undefined);
  const hoverNode = syntaxTree.find(node => node.uid === hoverID);
@ -24,7 +26,6 @@ function DlgShowAST({ hideWindow, syntaxTree, expression }: DlgShowASTProps) {
  return (
    <Modal
      readonly
      hideWindow={hideWindow}
      className='flex flex-col justify-stretch w-[calc(100dvw-3rem)] h-[calc(100dvh-6rem)]'
      helpTopic={HelpTopic.UI_FORMULA_TREE}
    >
--- a/rsconcept/frontend/src/dialogs/DlgShowQR.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgShowQR.tsx
@ -3,19 +3,17 @@
 import clsx from 'clsx';
 import { QRCodeSVG } from 'qrcode.react';
-import Modal, { ModalProps } from '@/components/ui/Modal';
+import Modal from '@/components/ui/Modal';
 import { useDialogsStore } from '@/stores/dialogs';
-interface DlgShowQRProps extends Pick<ModalProps, 'hideWindow'> {
+export interface DlgShowQRProps {
  target: string;
 }
-function DlgShowQR({ hideWindow, target }: DlgShowQRProps) {
+function DlgShowQR() {
  const { target } = useDialogsStore(state => state.props as DlgShowQRProps);
  return (
-    <Modal
+    <Modal readonly className={clsx('w-[30rem]', 'py-12 pr-3 pl-6 flex gap-3 justify-center items-center')}>
      readonly
      hideWindow={hideWindow}
      className={clsx('w-[30rem]', 'py-12 pr-3 pl-6 flex gap-3 justify-center items-center')}
    >
      <div className='bg-[#ffffff] p-4 border'>
        <QRCodeSVG value={target} size={256} />
      </div>
--- a/rsconcept/frontend/src/dialogs/DlgShowTypeGraph/DlgShowTypeGraph.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgShowTypeGraph/DlgShowTypeGraph.tsx
@ -3,19 +3,22 @@
 import { toast } from 'react-toastify';
 import { ReactFlowProvider } from 'reactflow';
-import Modal, { ModalProps } from '@/components/ui/Modal';
+import Modal from '@/components/ui/Modal';
 import { HelpTopic } from '@/models/miscellaneous';
 import { ITypeInfo } from '@/models/rslang';
 import { TMGraph } from '@/models/TMGraph';
 import { useDialogsStore } from '@/stores/dialogs';
 import { errors } from '@/utils/labels';
 import MGraphFlow from './MGraphFlow';
-interface DlgShowTypeGraphProps extends Pick<ModalProps, 'hideWindow'> {
+export interface DlgShowTypeGraphProps {
  items: ITypeInfo[];
 }
-function DlgShowTypeGraph({ hideWindow, items }: DlgShowTypeGraphProps) {
+function DlgShowTypeGraph() {
  const { items } = useDialogsStore(state => state.props as DlgShowTypeGraphProps);
  const hideDialog = useDialogsStore(state => state.hideDialog);
  const graph = (() => {
    const result = new TMGraph();
    items.forEach(item => result.addConstituenta(item.alias, item.result, item.args));
@ -24,7 +27,7 @@ function DlgShowTypeGraph({ hideWindow, items }: DlgShowTypeGraphProps) {
  if (graph.nodes.length === 0) {
    toast.error(errors.typeStructureFailed);
-    hideWindow();
+    hideDialog();
    return null;
  }
@ -32,7 +35,6 @@ function DlgShowTypeGraph({ hideWindow, items }: DlgShowTypeGraphProps) {
    <Modal
      header='Граф ступеней'
      readonly
      hideWindow={hideWindow}
      className='flex flex-col justify-stretch w-[calc(100dvw-3rem)] h-[calc(100dvh-6rem)]'
      helpTopic={HelpTopic.UI_TYPE_GRAPH}
    >
--- a/rsconcept/frontend/src/dialogs/DlgSubstituteCst.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgSubstituteCst.tsx
@ -4,18 +4,20 @@ import clsx from 'clsx';
 import { useState } from 'react';
 import PickSubstitutions from '@/components/select/PickSubstitutions';
-import Modal, { ModalProps } from '@/components/ui/Modal';
+import Modal from '@/components/ui/Modal';
 import { HelpTopic } from '@/models/miscellaneous';
 import { ICstSubstitute, ICstSubstituteData } from '@/models/oss';
 import { IRSForm } from '@/models/rsform';
 import { useDialogsStore } from '@/stores/dialogs';
 import { prefixes } from '@/utils/constants';
-interface DlgSubstituteCstProps extends Pick<ModalProps, 'hideWindow'> {
+export interface DlgSubstituteCstProps {
  schema: IRSForm;
  onSubstitute: (data: ICstSubstituteData) => void;
 }
-function DlgSubstituteCst({ hideWindow, onSubstitute, schema }: DlgSubstituteCstProps) {
+function DlgSubstituteCst() {
  const { onSubstitute, schema } = useDialogsStore(state => state.props as DlgSubstituteCstProps);
  const [substitutions, setSubstitutions] = useState<ICstSubstitute[]>([]);
  const canSubmit = substitutions.length > 0;
@ -31,7 +33,6 @@ function DlgSubstituteCst({ hideWindow, onSubstitute, schema }: DlgSubstituteCst
      header='Отождествление'
      submitText='Отождествить'
      submitInvalidTooltip='Выберите две различные конституенты'
      hideWindow={hideWindow}
      canSubmit={canSubmit}
      onSubmit={handleSubmit}
      className={clsx('w-[40rem]', 'px-6 pb-3')}
--- a/rsconcept/frontend/src/dialogs/DlgUploadRSForm.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgUploadRSForm.tsx
@ -6,16 +6,16 @@ import { toast } from 'react-toastify';
 import Checkbox from '@/components/ui/Checkbox';
 import FileInput from '@/components/ui/FileInput';
 import Modal from '@/components/ui/Modal';
 import { useRSForm } from '@/context/RSFormContext';
 import { IRSFormUploadData } from '@/models/rsform';
 import { useDialogsStore } from '@/stores/dialogs';
 import { EXTEOR_TRS_FILE } from '@/utils/constants';
-interface DlgUploadRSFormProps {
+export interface DlgUploadRSFormProps {
-  hideWindow: () => void;
+  upload: (data: IRSFormUploadData, callback: () => void) => void;
 }
-function DlgUploadRSForm({ hideWindow }: DlgUploadRSFormProps) {
+function DlgUploadRSForm() {
-  const { upload } = useRSForm();
+  const { upload } = useDialogsStore(state => state.props as DlgUploadRSFormProps);
  const [loadMetadata, setLoadMetadata] = useState(false);
  const [file, setFile] = useState<File | undefined>();
@ -42,7 +42,6 @@ function DlgUploadRSForm({ hideWindow }: DlgUploadRSFormProps) {
  return (
    <Modal
      header='Импорт схемы из Экстеора'
      hideWindow={hideWindow}
      canSubmit={!!file}
      onSubmit={handleSubmit}
      submitText='Загрузить'
--- a/rsconcept/frontend/src/hooks/useLocalStorage.ts
+++ b/rsconcept/frontend/src/hooks/useLocalStorage.ts
@ -1,31 +0,0 @@
 'use client';
 import { useEffect, useState } from 'react';
 import { storage } from '@/utils/constants';
 function useLocalStorage<ValueType>(key: string, defaultValue: ValueType | (() => ValueType)) {
  const prefixedKey = `${storage.PREFIX}${key}`;
  const [value, setValue] = useState<ValueType>(() => {
    const loadedJson = localStorage.getItem(prefixedKey);
    if (loadedJson != null) {
      return JSON.parse(loadedJson) as ValueType;
    } else if (typeof defaultValue === 'function') {
      return (defaultValue as () => ValueType)();
    } else {
      return defaultValue;
    }
  });
  useEffect(() => {
    if (value === undefined) {
      localStorage.removeItem(prefixedKey);
    } else {
      localStorage.setItem(prefixedKey, JSON.stringify(value));
    }
  }, [prefixedKey, value]);
  return [value, setValue] as [ValueType, typeof setValue];
 }
 export default useLocalStorage;
--- a/rsconcept/frontend/src/hooks/useOssDetails.ts
+++ b/rsconcept/frontend/src/hooks/useOssDetails.ts
@ -2,15 +2,15 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useAuth } from '@/backend/auth/useAuth';
 import { getOssDetails } from '@/backend/oss';
 import { type ErrorData } from '@/components/info/InfoError';
 import { useAuth } from '@/context/AuthContext';
 import { useLibrary } from '@/context/LibraryContext';
 import { IOperationSchema, IOperationSchemaData } from '@/models/oss';
 import { OssLoader } from '@/models/OssLoader';
 function useOssDetails({ target }: { target?: string }) {
-  const { loading: userLoading } = useAuth();
+  const { isLoading: userLoading } = useAuth();
  const library = useLibrary();
  const [schema, setInner] = useState<IOperationSchema | undefined>(undefined);
  const [loading, setLoading] = useState(target != undefined);
--- a/rsconcept/frontend/src/hooks/useRSFormDetails.ts
+++ b/rsconcept/frontend/src/hooks/useRSFormDetails.ts
@ -2,14 +2,14 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useAuth } from '@/backend/auth/useAuth';
 import { getRSFormDetails } from '@/backend/rsforms';
 import { type ErrorData } from '@/components/info/InfoError';
 import { useAuth } from '@/context/AuthContext';
 import { IRSForm, IRSFormData } from '@/models/rsform';
 import { RSFormLoader } from '@/models/RSFormLoader';
 function useRSFormDetails({ target, version }: { target?: string; version?: string }) {
-  const { loading: userLoading } = useAuth();
+  const { isLoading: userLoading } = useAuth();
  const [schema, setInnerSchema] = useState<IRSForm | undefined>(undefined);
  const [loading, setLoading] = useState(target != undefined);
  const [error, setError] = useState<ErrorData>(undefined);
--- a/rsconcept/frontend/src/models/miscellaneous.ts
+++ b/rsconcept/frontend/src/models/miscellaneous.ts
@ -224,3 +224,32 @@ export interface Position2D {
  x: number;
  y: number;
 }
 /**
 * Represents global dialog.
 */
 export enum DialogType {
  CONSTITUENTA_TEMPLATE = 1,
  CREATE_CONSTITUENTA,
  CREATE_OPERATION,
  DELETE_CONSTITUENTA,
  EDIT_EDITORS,
  EDIT_OPERATION,
  EDIT_REFERENCE,
  EDIT_VERSIONS,
  EDIT_WORD_FORMS,
  INLINE_SYNTHESIS,
  SHOW_AST,
  SHOW_TYPE_GRAPH,
  CHANGE_INPUT_SCHEMA,
  CHANGE_LOCATION,
  CLONE_LIBRARY_ITEM,
  CREATE_VERSION,
  DELETE_OPERATION,
  GRAPH_PARAMETERS,
  RELOCATE_CONSTITUENTS,
  RENAME_CONSTITUENTA,
  SHOW_QR_CODE,
  SUBSTITUTE_CONSTITUENTS,
  UPLOAD_RSFORM
 }
--- a/rsconcept/frontend/src/models/user.ts
+++ b/rsconcept/frontend/src/models/user.ts
@ -26,35 +26,9 @@ export interface IUser {
 * Represents CurrentUser information.
 */
 export interface ICurrentUser extends Pick<IUser, 'id' | 'username' | 'is_staff'> {
  subscriptions: LibraryItemID[];
  editor: LibraryItemID[];
 }
 /**
 * Represents login data, used to authenticate users.
 */
 export interface IUserLoginData extends Pick<IUser, 'username'> {
  password: string;
 }
 /**
 * Represents password reset data.
 */
 export interface IResetPasswordData {
  password: string;
  token: string;
 }
 /**
 * Represents password token data.
 */
 export interface IPasswordTokenData extends Pick<IResetPasswordData, 'token'> {}
 /**
 * Represents password reset request data.
 */
 export interface IRequestPasswordData extends Pick<IUser, 'email'> {}
 /**
 * Represents signup data, used to create new users.
 */
@ -63,11 +37,6 @@ export interface IUserSignupData extends Omit<IUser, 'is_staff' | 'id'> {
  password2: string;
 }
 /**
 * Represents user data, intended to update user profile in persistent storage.
 */
 export interface IUserUpdateData extends Omit<IUser, 'is_staff' | 'id'> {}
 /**
 * Represents user profile for viewing and editing {@link IUser}.
 */
@ -78,14 +47,6 @@ export interface IUserProfile extends Omit<IUser, 'is_staff'> {}
 */
 export interface IUserInfo extends Omit<IUserProfile, 'email' | 'username'> {}
 /**
 * Represents data needed to update password for current user.
 */
 export interface IUserUpdatePassword {
  old_password: string;
  new_password: string;
 }
 /**
 * Represents target {@link User}.
 */
@ -103,7 +64,7 @@ export interface ITargetUsers {
 /**
 * Represents user access mode.
 */
-export enum UserLevel {
+export enum UserRole {
  READER = 0,
  EDITOR,
  OWNER,
--- a/rsconcept/frontend/src/pages/CreateItemPage/FormCreateItem.tsx
+++ b/rsconcept/frontend/src/pages/CreateItemPage/FormCreateItem.tsx
@ -5,6 +5,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { toast } from 'react-toastify';
 import { urls } from '@/app/urls';
 import { useAuth } from '@/backend/auth/useAuth';
 import { VisibilityIcon } from '@/components/DomainIcons';
 import { IconDownload } from '@/components/Icons';
 import InfoError from '@/components/info/InfoError';
@ -19,22 +20,23 @@ import Overlay from '@/components/ui/Overlay';
 import SubmitButton from '@/components/ui/SubmitButton';
 import TextArea from '@/components/ui/TextArea';
 import TextInput from '@/components/ui/TextInput';
 import { useAuth } from '@/context/AuthContext';
 import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import { useLibrary } from '@/context/LibraryContext';
 import { useConceptNavigation } from '@/context/NavigationContext';
 import { AccessPolicy, LibraryItemType, LocationHead } from '@/models/library';
 import { ILibraryCreateData } from '@/models/library';
 import { combineLocation, validateLocation } from '@/models/libraryAPI';
 import { useLibrarySearchStore } from '@/stores/librarySearch';
 import { EXTEOR_TRS_FILE } from '@/utils/constants';
 import { information } from '@/utils/labels';
 function FormCreateItem() {
  const router = useConceptNavigation();
  const options = useConceptOptions();
  const { user } = useAuth();
  const { createItem, processingError, setProcessingError, processing, folders } = useLibrary();
  const searchLocation = useLibrarySearchStore(state => state.location);
  const setSearchLocation = useLibrarySearchStore(state => state.setLocation);
  const [itemType, setItemType] = useState(LibraryItemType.RSFORM);
  const [title, setTitle] = useState('');
  const [alias, setAlias] = useState('');
@ -81,7 +83,7 @@ function FormCreateItem() {
      file: file,
      fileName: file?.name
    };
-    options.setLocation(location);
+    setSearchLocation(location);
    createItem(data, newItem => {
      toast.success(information.newLibraryItem);
      if (itemType == LibraryItemType.RSFORM) {
@ -108,11 +110,11 @@ function FormCreateItem() {
  }, []);
  useEffect(() => {
-    if (!options.location) {
+    if (!searchLocation) {
      return;
    }
-    handleSelectLocation(options.location);
+    handleSelectLocation(searchLocation);
-  }, [options.location, handleSelectLocation]);
+  }, [searchLocation, handleSelectLocation]);
  useEffect(() => {
    if (itemType !== LibraryItemType.RSFORM) {
--- a/rsconcept/frontend/src/pages/DatabaseSchemaPage.tsx
+++ b/rsconcept/frontend/src/pages/DatabaseSchemaPage.tsx
@ -3,18 +3,18 @@
 import { useEffect } from 'react';
 import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch';
-import { useConceptOptions } from '@/context/ConceptOptionsContext';
+import { useAppLayoutStore, useFitHeight } from '@/stores/appLayout';
 import { resources } from '@/utils/constants';
 function DatabaseSchemaPage() {
-  const { calculateHeight, setNoFooter } = useConceptOptions();
+  const hideFooter = useAppLayoutStore(state => state.hideFooter);
-  const panelHeight = calculateHeight('0px');
+  const panelHeight = useFitHeight('0px');
  useEffect(() => {
-    setNoFooter(true);
+    hideFooter(true);
-    return () => setNoFooter(false);
+    return () => hideFooter(false);
-  }, [setNoFooter]);
+  }, [hideFooter]);
  return (
    <div className='cc-fade-in flex justify-center overflow-hidden' style={{ maxHeight: panelHeight }}>
--- a/rsconcept/frontend/src/pages/HomePage.tsx
+++ b/rsconcept/frontend/src/pages/HomePage.tsx
@ -1,17 +1,17 @@
 import { useEffect } from 'react';
 import { urls } from '@/app/urls';
 import { useAuth } from '@/backend/auth/useAuth';
 import Loader from '@/components/ui/Loader';
 import { useAuth } from '@/context/AuthContext';
 import { useConceptNavigation } from '@/context/NavigationContext';
 import { PARAMETER } from '@/utils/constants';
 function HomePage() {
  const router = useConceptNavigation();
-  const { user, loading } = useAuth();
+  const { user, isLoading } = useAuth();
  useEffect(() => {
-    if (!loading) {
+    if (!isLoading) {
      if (!user) {
        setTimeout(() => {
          router.replace(urls.manuals);
@ -22,7 +22,7 @@ function HomePage() {
        }, PARAMETER.refreshTimeout);
      }
    }
-  }, [router, user, loading]);
+  }, [router, user, isLoading]);
  return <Loader />;
 }
--- a/rsconcept/frontend/src/pages/LibraryPage/LibraryPage.tsx
+++ b/rsconcept/frontend/src/pages/LibraryPage/LibraryPage.tsx
@ -1,24 +1,19 @@
 'use client';
 import fileDownload from 'js-file-download';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { toast } from 'react-toastify';
 import { IconCSV } from '@/components/Icons';
 import MiniButton from '@/components/ui/MiniButton';
 import Overlay from '@/components/ui/Overlay';
 import DataLoader from '@/components/wrap/DataLoader';
 import { useAuth } from '@/context/AuthContext';
 import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import { useLibrary } from '@/context/LibraryContext';
-import DlgChangeLocation from '@/dialogs/DlgChangeLocation';
+import { IRenameLocationData } from '@/models/library';
-import useLocalStorage from '@/hooks/useLocalStorage';
+import { useAppLayoutStore } from '@/stores/appLayout';
-import { ILibraryItem, IRenameLocationData, LocationHead } from '@/models/library';
+import { useDialogsStore } from '@/stores/dialogs';
-import { ILibraryFilter } from '@/models/miscellaneous';
+import { useLibraryFilter, useLibrarySearchStore } from '@/stores/librarySearch';
 import { UserID } from '@/models/user';
 import { storage } from '@/utils/constants';
 import { information } from '@/utils/labels';
-import { convertToCSV, toggleTristateFlag } from '@/utils/utils';
+import { convertToCSV } from '@/utils/utils';
 import TableLibraryItems from './TableLibraryItems';
 import ToolbarSearch from './ToolbarSearch';
@ -26,91 +21,29 @@ import ViewSideLocation from './ViewSideLocation';
 function LibraryPage() {
  const library = useLibrary();
-  const { user } = useAuth();
+  const noNavigation = useAppLayoutStore(state => state.noNavigation);
  const [items, setItems] = useState<ILibraryItem[]>([]);
  const options = useConceptOptions();
-  const [query, setQuery] = useState('');
+  const folderMode = useLibrarySearchStore(state => state.folderMode);
-  const [path, setPath] = useState('');
+  const location = useLibrarySearchStore(state => state.location);
  const setLocation = useLibrarySearchStore(state => state.setLocation);
-  const [head, setHead] = useLocalStorage<LocationHead | undefined>(storage.librarySearchHead, undefined);
+  const filter = useLibraryFilter();
-  const [subfolders, setSubfolders] = useLocalStorage<boolean>(storage.librarySearchSubfolders, false);
+  const items = library.applyFilter(filter);
  const [isVisible, setIsVisible] = useLocalStorage<boolean | undefined>(storage.librarySearchVisible, true);
  const [isOwned, setIsOwned] = useLocalStorage<boolean | undefined>(storage.librarySearchOwned, undefined);
  const [isEditor, setIsEditor] = useLocalStorage<boolean | undefined>(storage.librarySearchEditor, undefined);
  const [filterUser, setFilterUser] = useLocalStorage<UserID | undefined>(storage.librarySearchUser, undefined);
  const [showRenameLocation, setShowRenameLocation] = useState(false);
-  const filter: ILibraryFilter = useMemo(
+  const showChangeLocation = useDialogsStore(state => state.showChangeLocation);
    () => ({
      head: head,
      path: path,
      query: query,
      isEditor: user ? isEditor : undefined,
      isOwned: user ? isOwned : undefined,
      isVisible: user ? isVisible : true,
      folderMode: options.folderMode,
      subfolders: subfolders,
      location: options.location,
      filterUser: filterUser
    }),
    [
      head,
      path,
      query,
      isEditor,
      isOwned,
      isVisible,
      user,
      options.folderMode,
      options.location,
      subfolders,
      filterUser
    ]
  );
-  const hasCustomFilter =
+  function handleRenameLocation(newLocation: string) {
-    !!filter.path ||
+    const data: IRenameLocationData = {
-    !!filter.query ||
+      target: location,
-    filter.head !== undefined ||
+      new_location: newLocation
-    filter.isEditor !== undefined ||
+    };
-    filter.isOwned !== undefined ||
+    library.renameLocation(data, () => {
-    filter.isVisible !== true ||
+      setLocation(newLocation);
-    filter.filterUser !== undefined ||
+      toast.success(information.locationRenamed);
-    !!filter.location;
+    });
  }
-  useEffect(() => {
+  function handleDownloadCSV() {
    setItems(library.applyFilter(filter));
  }, [library, library.items.length, filter]);
  const toggleFolderMode = () => options.setFolderMode(prev => !prev);
  const resetFilter = useCallback(() => {
    setQuery('');
    setPath('');
    setHead(undefined);
    setIsVisible(true);
    setIsOwned(undefined);
    setIsEditor(undefined);
    setFilterUser(undefined);
    options.setLocation('');
  }, [setHead, setIsVisible, setIsOwned, setIsEditor, setFilterUser, options]);
  const handleRenameLocation = useCallback(
    (newLocation: string) => {
      const data: IRenameLocationData = {
        target: options.location,
        new_location: newLocation
      };
      library.renameLocation(data, () => {
        options.setLocation(newLocation);
        toast.success(information.locationRenamed);
      });
    },
    [options, library]
  );
  const handleDownloadCSV = useCallback(() => {
    if (items.length === 0) {
      toast.error(information.noDataToExport);
      return;
@ -121,19 +54,12 @@ function LibraryPage() {
    } catch (error) {
      console.error(error);
    }
-  }, [items]);
+  }
  return (
    <DataLoader isLoading={library.loading} error={library.loadingError} hasNoData={library.items.length === 0}>
      {showRenameLocation ? (
        <DlgChangeLocation
          initial={options.location}
          onChangeLocation={handleRenameLocation}
          hideWindow={() => setShowRenameLocation(false)}
        />
      ) : null}
      <Overlay
-        position={options.noNavigation ? 'top-[0.25rem] right-[3rem]' : 'top-[0.25rem] right-0'}
+        position={noNavigation ? 'top-[0.25rem] right-[3rem]' : 'top-[0.25rem] right-0'}
        layer='z-tooltip'
        className='cc-animate-position'
      >
@ -143,47 +69,16 @@ function LibraryPage() {
          onClick={handleDownloadCSV}
        />
      </Overlay>
-      <ToolbarSearch
+      <ToolbarSearch total={library.items.length ?? 0} filtered={items.length} />
        total={library.items.length ?? 0}
        filtered={items.length}
        hasCustomFilter={hasCustomFilter}
        query={query}
        onChangeQuery={setQuery}
        path={path}
        onChangePath={setPath}
        head={head}
        onChangeHead={setHead}
        isVisible={isVisible}
        isOwned={isOwned}
        toggleOwned={() => setIsOwned(prev => toggleTristateFlag(prev))}
        toggleVisible={() => setIsVisible(prev => toggleTristateFlag(prev))}
        isEditor={isEditor}
        toggleEditor={() => setIsEditor(prev => toggleTristateFlag(prev))}
        filterUser={filterUser}
        onChangeFilterUser={setFilterUser}
        resetFilter={resetFilter}
        folderMode={options.folderMode}
        toggleFolderMode={toggleFolderMode}
      />
      <div className='cc-fade-in flex'>
        <ViewSideLocation
-          isVisible={options.folderMode}
+          isVisible={folderMode}
          activeLocation={options.location}
          onChangeActiveLocation={options.setLocation}
          subfolders={subfolders}
          folderTree={library.folders}
-          toggleFolderMode={toggleFolderMode}
+          onRenameLocation={() => showChangeLocation({ initial: location, onChangeLocation: handleRenameLocation })}
          toggleSubfolders={() => setSubfolders(prev => !prev)}
          onRenameLocation={() => setShowRenameLocation(true)}
        />
-        <TableLibraryItems
+        <TableLibraryItems items={items} />
          resetQuery={resetFilter}
          items={items}
          folderMode={options.folderMode}
          toggleFolderMode={toggleFolderMode}
        />
      </div>
    </DataLoader>
  );
--- a/rsconcept/frontend/src/pages/LibraryPage/TableLibraryItems.tsx
+++ b/rsconcept/frontend/src/pages/LibraryPage/TableLibraryItems.tsx
@ -5,6 +5,7 @@ import { useLayoutEffect, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { urls } from '@/app/urls';
 import { useLabelUser } from '@/backend/users/useLabelUser';
 import { IconFolderTree } from '@/components/Icons';
 import BadgeLocation from '@/components/info/BadgeLocation';
 import { CProps } from '@/components/props';
@ -12,30 +13,31 @@ import DataTable, { createColumnHelper, IConditionalStyle, VisibilityState } fro
 import FlexColumn from '@/components/ui/FlexColumn';
 import MiniButton from '@/components/ui/MiniButton';
 import TextURL from '@/components/ui/TextURL';
 import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import { useConceptNavigation } from '@/context/NavigationContext';
 import { useUsers } from '@/context/UsersContext';
 import useLocalStorage from '@/hooks/useLocalStorage';
 import useWindowSize from '@/hooks/useWindowSize';
 import { ILibraryItem, LibraryItemType } from '@/models/library';
 import { useFitHeight } from '@/stores/appLayout';
 import { useLibrarySearchStore } from '@/stores/librarySearch';
 import { usePreferencesStore } from '@/stores/preferences';
 import { APP_COLORS } from '@/styling/color';
 import { storage } from '@/utils/constants';
 interface TableLibraryItemsProps {
  items: ILibraryItem[];
  resetQuery: () => void;
  folderMode: boolean;
  toggleFolderMode: () => void;
 }
 const columnHelper = createColumnHelper<ILibraryItem>();
-function TableLibraryItems({ items, resetQuery, folderMode, toggleFolderMode }: TableLibraryItemsProps) {
+function TableLibraryItems({ items }: TableLibraryItemsProps) {
  const router = useConceptNavigation();
  const intl = useIntl();
-  const { getUserLabel } = useUsers();
+  const getUserLabel = useLabelUser();
-  const { calculateHeight } = useConceptOptions();
+
-  const [itemsPerPage, setItemsPerPage] = useLocalStorage<number>(storage.libraryPagination, 50);
+  const folderMode = useLibrarySearchStore(state => state.folderMode);
  const toggleFolderMode = useLibrarySearchStore(state => state.toggleFolderMode);
  const resetFilter = useLibrarySearchStore(state => state.resetFilter);
  const itemsPerPage = usePreferencesStore(state => state.libraryPagination);
  const setItemsPerPage = usePreferencesStore(state => state.setLibraryPagination);
  function handleOpenItem(item: ILibraryItem, event: CProps.EventMouse) {
    const selection = window.getSelection();
@ -140,7 +142,7 @@ function TableLibraryItems({ items, resetQuery, folderMode, toggleFolderMode }:
    })
  ];
-  const tableHeight = calculateHeight('2.2rem');
+  const tableHeight = useFitHeight('2.2rem');
  const conditionalRowStyles: IConditionalStyle<ILibraryItem>[] = [
    {
@ -164,7 +166,7 @@ function TableLibraryItems({ items, resetQuery, folderMode, toggleFolderMode }:
          <p>Список схем пуст</p>
          <p className='flex gap-6'>
            <TextURL text='Создать схему' href='/library/create' />
-            <TextURL text='Очистить фильтр' onClick={resetQuery} />
+            <TextURL text='Очистить фильтр' onClick={resetFilter} />
          </p>
        </FlexColumn>
      }
--- a/rsconcept/frontend/src/pages/LibraryPage/ToolbarSearch.tsx
+++ b/rsconcept/frontend/src/pages/LibraryPage/ToolbarSearch.tsx
@ -19,10 +19,9 @@ import DropdownButton from '@/components/ui/DropdownButton';
 import MiniButton from '@/components/ui/MiniButton';
 import SearchBar from '@/components/ui/SearchBar';
 import SelectorButton from '@/components/ui/SelectorButton';
 import { useUsers } from '@/context/UsersContext';
 import useDropdown from '@/hooks/useDropdown';
 import { LocationHead } from '@/models/library';
-import { UserID } from '@/models/user';
+import { useHasCustomFilter, useLibrarySearchStore } from '@/stores/librarySearch';
 import { prefixes } from '@/utils/constants';
 import { describeLocationHead, labelLocationHead } from '@/utils/labels';
 import { tripleToggleColor } from '@/utils/utils';
@ -30,65 +29,37 @@ import { tripleToggleColor } from '@/utils/utils';
 interface ToolbarSearchProps {
  total: number;
  filtered: number;
  hasCustomFilter: boolean;
  query: string;
  onChangeQuery: (newValue: string) => void;
  path: string;
  onChangePath: (newValue: string) => void;
  head: LocationHead | undefined;
  onChangeHead: (newValue: LocationHead | undefined) => void;
  folderMode: boolean;
  toggleFolderMode: () => void;
  isVisible: boolean | undefined;
  toggleVisible: () => void;
  isOwned: boolean | undefined;
  toggleOwned: () => void;
  isEditor: boolean | undefined;
  toggleEditor: () => void;
  filterUser: UserID | undefined;
  onChangeFilterUser: (newValue: UserID | undefined) => void;
  resetFilter: () => void;
 }
-function ToolbarSearch({
+function ToolbarSearch({ total, filtered }: ToolbarSearchProps) {
  total,
  filtered,
  hasCustomFilter,
  query,
  onChangeQuery,
  path,
  onChangePath,
  head,
  onChangeHead,
  folderMode,
  toggleFolderMode,
  isVisible,
  toggleVisible,
  isOwned,
  toggleOwned,
  isEditor,
  toggleEditor,
  filterUser,
  onChangeFilterUser,
  resetFilter
 }: ToolbarSearchProps) {
  const headMenu = useDropdown();
  const userMenu = useDropdown();
-  const { users } = useUsers();
+
  const query = useLibrarySearchStore(state => state.query);
  const setQuery = useLibrarySearchStore(state => state.setQuery);
  const path = useLibrarySearchStore(state => state.path);
  const setPath = useLibrarySearchStore(state => state.setPath);
  const head = useLibrarySearchStore(state => state.head);
  const setHead = useLibrarySearchStore(state => state.setHead);
  const folderMode = useLibrarySearchStore(state => state.folderMode);
  const toggleFolderMode = useLibrarySearchStore(state => state.toggleFolderMode);
  const isOwned = useLibrarySearchStore(state => state.isOwned);
  const toggleOwned = useLibrarySearchStore(state => state.toggleOwned);
  const isEditor = useLibrarySearchStore(state => state.isEditor);
  const toggleEditor = useLibrarySearchStore(state => state.toggleEditor);
  const isVisible = useLibrarySearchStore(state => state.isVisible);
  const toggleVisible = useLibrarySearchStore(state => state.toggleVisible);
  const filterUser = useLibrarySearchStore(state => state.filterUser);
  const setFilterUser = useLibrarySearchStore(state => state.setFilterUser);
  const resetFilter = useLibrarySearchStore(state => state.resetFilter);
  const hasCustomFilter = useHasCustomFilter();
  const userActive = isOwned !== undefined || isEditor !== undefined || filterUser !== undefined;
  function handleChange(newValue: LocationHead | undefined) {
    headMenu.hide();
-    onChangeHead(newValue);
+    setHead(newValue);
  }
  function handleToggleFolder() {
@ -155,9 +126,8 @@ function ToolbarSearch({
              noBorder
              placeholder='Выберите владельца'
              className='min-w-[15rem] text-sm mx-1 mb-1'
              items={users}
              value={filterUser}
-              onSelectValue={onChangeFilterUser}
+              onSelectValue={setFilterUser}
            />
          </Dropdown>
        </div>
@ -177,7 +147,7 @@ function ToolbarSearch({
          noBorder
          className={clsx('min-w-[7rem] sm:min-w-[10rem] max-w-[20rem]', folderMode && 'flex-grow')}
          query={query}
-          onChangeQuery={onChangeQuery}
+          onChangeQuery={setQuery}
        />
        {!folderMode ? (
          <div ref={headMenu.ref} className='flex items-center h-full py-1 select-none'>
@ -236,7 +206,7 @@ function ToolbarSearch({
            noBorder
            className='w-[4.5rem] sm:w-[5rem] flex-grow'
            query={path}
-            onChangeQuery={onChangePath}
+            onChangeQuery={setPath}
          />
        ) : null}
      </div>
--- a/rsconcept/frontend/src/pages/LibraryPage/ViewSideLocation.tsx
+++ b/rsconcept/frontend/src/pages/LibraryPage/ViewSideLocation.tsx
@ -1,62 +1,52 @@
 import clsx from 'clsx';
 import { toast } from 'react-toastify';
 import { useAuth } from '@/backend/auth/useAuth';
 import { SubfoldersIcon } from '@/components/DomainIcons';
 import { IconFolderEdit, IconFolderTree } from '@/components/Icons';
 import BadgeHelp from '@/components/info/BadgeHelp';
 import { CProps } from '@/components/props';
 import SelectLocation from '@/components/select/SelectLocation';
 import MiniButton from '@/components/ui/MiniButton';
 import { useAuth } from '@/context/AuthContext';
 import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import { useLibrary } from '@/context/LibraryContext';
 import useWindowSize from '@/hooks/useWindowSize';
 import { FolderNode, FolderTree } from '@/models/FolderTree';
 import { HelpTopic } from '@/models/miscellaneous';
 import { useFitHeight } from '@/stores/appLayout';
 import { useLibrarySearchStore } from '@/stores/librarySearch';
 import { PARAMETER, prefixes } from '@/utils/constants';
 import { information } from '@/utils/labels';
 interface ViewSideLocationProps {
  folderTree: FolderTree;
  isVisible: boolean;
  subfolders: boolean;
  activeLocation: string;
  onChangeActiveLocation: (newValue: string) => void;
  toggleFolderMode: () => void;
  toggleSubfolders: () => void;
  onRenameLocation: () => void;
 }
-function ViewSideLocation({
+function ViewSideLocation({ folderTree, isVisible, onRenameLocation }: ViewSideLocationProps) {
  folderTree,
  activeLocation,
  subfolders,
  isVisible,
  onChangeActiveLocation,
  toggleFolderMode,
  toggleSubfolders,
  onRenameLocation
 }: ViewSideLocationProps) {
  const { user } = useAuth();
  const { items } = useLibrary();
  const { calculateHeight } = useConceptOptions();
  const windowSize = useWindowSize();
  const location = useLibrarySearchStore(state => state.location);
  const setLocation = useLibrarySearchStore(state => state.setLocation);
  const toggleFolderMode = useLibrarySearchStore(state => state.toggleFolderMode);
  const subfolders = useLibrarySearchStore(state => state.subfolders);
  const toggleSubfolders = useLibrarySearchStore(state => state.toggleSubfolders);
  const canRename = (() => {
-    if (activeLocation.length <= 3 || !user) {
+    if (location.length <= 3 || !user) {
      return false;
    }
    if (user.is_staff) {
      return true;
    }
    const owned = items.filter(item => item.owner == user.id);
-    const located = owned.filter(
+    const located = owned.filter(item => item.location == location || item.location.startsWith(`${location}/`));
      item => item.location == activeLocation || item.location.startsWith(`${activeLocation}/`)
    );
    return located.length !== 0;
  })();
-  const maxHeight = calculateHeight('4.5rem');
+  const maxHeight = useFitHeight('4.5rem');
  function handleClickFolder(event: CProps.EventMouse, target: FolderNode) {
    event.preventDefault();
@ -67,7 +57,7 @@ function ViewSideLocation({
        .then(() => toast.success(information.pathReady))
        .catch(console.error);
    } else {
-      onChangeActiveLocation(target.getPath());
+      setLocation(target.getPath());
    }
  }
@ -98,7 +88,7 @@ function ViewSideLocation({
              onClick={onRenameLocation}
            />
          ) : null}
-          {!!activeLocation ? (
+          {!!location ? (
            <MiniButton
              title={subfolders ? 'Вложенные папки: Вкл' : 'Вложенные папки: Выкл'} // prettier: split-lines
              icon={<SubfoldersIcon value={subfolders} />}
@ -113,7 +103,7 @@ function ViewSideLocation({
        </div>
      </div>
      <SelectLocation
-        value={activeLocation}
+        value={location}
        folderTree={folderTree}
        prefix={prefixes.folders_list}
        onClick={handleClickFolder}
--- a/rsconcept/frontend/src/pages/LoginPage.tsx
+++ b/rsconcept/frontend/src/pages/LoginPage.tsx
@ -5,15 +5,15 @@ import clsx from 'clsx';
 import { useEffect, useState } from 'react';
 import { urls } from '@/app/urls';
 import { useAuth } from '@/backend/auth/useAuth';
 import { useLogin } from '@/backend/auth/useLogin';
 import InfoError, { ErrorData } from '@/components/info/InfoError';
 import SubmitButton from '@/components/ui/SubmitButton';
 import TextInput from '@/components/ui/TextInput';
 import TextURL from '@/components/ui/TextURL';
 import ExpectedAnonymous from '@/components/wrap/ExpectedAnonymous';
 import { useAuth } from '@/context/AuthContext';
 import { useConceptNavigation } from '@/context/NavigationContext';
 import useQueryStrings from '@/hooks/useQueryStrings';
 import { IUserLoginData } from '@/models/user';
 import { resources } from '@/utils/constants';
 function LoginPage() {
@ -21,23 +21,20 @@ function LoginPage() {
  const query = useQueryStrings();
  const userQuery = query.get('username');
-  const { user, login, loading, error, setError } = useAuth();
+  const { user } = useAuth();
  const { login, isPending, error, reset } = useLogin();
  const [username, setUsername] = useState(userQuery || '');
  const [password, setPassword] = useState('');
  useEffect(() => {
-    setError(undefined);
+    reset();
-  }, [username, password, setError]);
+  }, [username, password, reset]);
  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
-    if (!loading) {
+    if (!isPending) {
-      const data: IUserLoginData = {
+      login(username, password, () => {
        username: username,
        password: password
      };
      login(data, () => {
        if (router.canBack()) {
          router.back();
        } else {
@ -78,7 +75,7 @@ function LoginPage() {
      <SubmitButton
        text='Войти'
        className='self-center w-[12rem] mt-3'
-        loading={loading}
+        loading={isPending}
        disabled={!username || !password}
      />
      <div className='flex flex-col text-sm'>
--- a/rsconcept/frontend/src/pages/ManualsPage/ManualsPage.tsx
+++ b/rsconcept/frontend/src/pages/ManualsPage/ManualsPage.tsx
@ -3,10 +3,10 @@
 import { useCallback } from 'react';
 import { urls } from '@/app/urls';
 import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import { useConceptNavigation } from '@/context/NavigationContext';
 import useQueryStrings from '@/hooks/useQueryStrings';
 import { HelpTopic } from '@/models/miscellaneous';
 import { useMainHeight } from '@/stores/appLayout';
 import { PARAMETER } from '@/utils/constants';
 import TopicsList from './TopicsList';
@ -17,7 +17,7 @@ function ManualsPage() {
  const query = useQueryStrings();
  const activeTopic = (query.get('topic') || HelpTopic.MAIN) as HelpTopic;
-  const { mainHeight } = useConceptOptions();
+  const mainHeight = useMainHeight();
  const onSelectTopic = useCallback(
    (newTopic: HelpTopic) => {
--- a/rsconcept/frontend/src/pages/ManualsPage/TopicsDropdown.tsx
+++ b/rsconcept/frontend/src/pages/ManualsPage/TopicsDropdown.tsx
@ -6,9 +6,9 @@ import { useCallback } from 'react';
 import { IconMenuFold, IconMenuUnfold } from '@/components/Icons';
 import Button from '@/components/ui/Button';
 import SelectTree from '@/components/ui/SelectTree';
 import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import useDropdown from '@/hooks/useDropdown';
 import { HelpTopic, topicParent } from '@/models/miscellaneous';
 import { useAppLayoutStore, useFitHeight } from '@/stores/appLayout';
 import { PARAMETER, prefixes } from '@/utils/constants';
 import { describeHelpTopic, labelHelpTopic } from '@/utils/labels';
@ -19,7 +19,8 @@ interface TopicsDropdownProps {
 function TopicsDropdown({ activeTopic, onChangeTopic }: TopicsDropdownProps) {
  const menu = useDropdown();
-  const { noNavigation, calculateHeight } = useConceptOptions();
+  const noNavigation = useAppLayoutStore(state => state.noNavigation);
  const treeHeight = useFitHeight('4rem + 2px');
  const handleSelectTopic = useCallback(
    (topic: HelpTopic) => {
@ -67,7 +68,7 @@ function TopicsDropdown({ activeTopic, onChangeTopic }: TopicsDropdownProps) {
          'bg-prim-200'
        )}
        style={{
-          maxHeight: calculateHeight('4rem + 2px'),
+          maxHeight: treeHeight,
          transitionProperty: 'clip-path',
          transitionDuration: `${PARAMETER.moveDuration}ms`,
          clipPath: menu.isOpen ? 'inset(0% 0% 0% 0%)' : 'inset(0% 100% 0% 0%)'
--- a/rsconcept/frontend/src/pages/ManualsPage/TopicsStatic.tsx
+++ b/rsconcept/frontend/src/pages/ManualsPage/TopicsStatic.tsx
@ -1,8 +1,8 @@
 import clsx from 'clsx';
 import SelectTree from '@/components/ui/SelectTree';
 import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import { HelpTopic, topicParent } from '@/models/miscellaneous';
 import { useFitHeight } from '@/stores/appLayout';
 import { prefixes } from '@/utils/constants';
 import { describeHelpTopic, labelHelpTopic } from '@/utils/labels';
@ -12,7 +12,7 @@ interface TopicsStaticProps {
 }
 function TopicsStatic({ activeTopic, onChangeTopic }: TopicsStaticProps) {
-  const { calculateHeight } = useConceptOptions();
+  const topicsHeight = useFitHeight('1rem + 2px');
  return (
    <SelectTree
      items={Object.values(HelpTopic).map(item => item as HelpTopic)}
@ -31,7 +31,7 @@ function TopicsStatic({ activeTopic, onChangeTopic }: TopicsStaticProps) {
        'text-xs sm:text-sm bg-prim-200',
        'select-none'
      )}
-      style={{ maxHeight: calculateHeight('1rem + 2px') }}
+      style={{ maxHeight: topicsHeight }}
    />
  );
 }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Ivan	76aee5bea7	F: Implement react-query pt2 Some checks failed Frontend CI / build (22.x) (push) Has been cancelled Details	2025-01-21 20:33:05 +03:00
Ivan	d899e17fcd	F: Implement react-query pt1	2025-01-21 12:00:09 +03:00
Ivan	bfae07c7b6	npm update	2025-01-17 12:19:21 +03:00
Ivan	6f23ec5354	R: Refactor dialogs using zustand store	2025-01-16 16:31:03 +03:00
Ivan	539ed87ddf	R: Replace AccessMode with RoleStore	2025-01-15 23:03:23 +03:00
Ivan	55fa09c6fb	R: Migrating to zustand for local state management pt3	2025-01-15 22:16:06 +03:00
Ivan	f526efd0ee	B: Fix nodes not being selectable through hidden div	2025-01-15 19:15:52 +03:00
Ivan	08fd26e687	R: Migrating to zustand for local state management pt2	2025-01-15 16:06:18 +03:00
Ivan	26bd0ce16b	R: Migrating to zustand for local state management pt1	2025-01-14 21:57:32 +03:00
Ivan	2e03756646	R: Integrate Playwrght as end-to-end testing	2025-01-14 16:24:46 +03:00
Ivan	50d29f5fee	npm update	2025-01-13 15:49:15 +03:00
Ivan	a47ea5d32d	M: Fix layout for small screens	2025-01-09 20:35:51 +03:00
Ivan	68dd1aa3c4	B: Fix intl version	2025-01-09 16:15:49 +03:00
Ivan	12a4b740bc	npm update	2025-01-03 11:05:33 +03:00
		`@ -1 +0,0 @@`
			`export { default } from './DlgConstituentaTemplate';`