M: Improve UI for creating new elements

rsconcept/frontend/src/components/icons.tsx

@@ -1,5 +1,6 @@
 // Search new icons at https://reactsvgicons.com/
 // Note: save this file using Ctrl + K, Ctrl + Shift + S to disable autoformat
+// Note: For Cursor hotkeys are Ctrl + M, Ctrl + Shift + S
 
 /* eslint-disable simple-import-sort/exports */
 // ==== General actions =======

rsconcept/frontend/src/features/oss/pages/oss-page/editor-oss-graph/context-menu/menu-operation.tsx

@@ -1,7 +1,6 @@
 'use client';
 import { toast } from 'react-toastify';
 
-import { urls, useConceptNavigation } from '@/app';
 import { useLibrary } from '@/features/library/backend/use-library';
 
 import { DropdownButton } from '@/components/dropdown';
@@ -33,7 +32,6 @@ interface MenuOperationProps {
 }
 
 export function MenuOperation({ operation, onHide }: MenuOperationProps) {
-  const router = useConceptNavigation();
   const { items: libraryItems } = useLibrary();
   const { schema, navigateOperationSchema, isMutable, canDeleteOperation } = useOssEdit();
   const isProcessing = useMutatingOss();
@@ -134,7 +132,7 @@ export function MenuOperation({ operation, onHide }: MenuOperationProps) {
     void inputCreate({
       itemID: schema.id,
       data: { target: operation.id, layout: getLayout() }
-    }).then(new_schema => router.push({ path: urls.schema(new_schema.id), force: true }));
+    });
   }
 
   function handleRelocateConstituents() {

rsconcept/frontend/src/features/oss/pages/oss-page/editor-oss-graph/oss-flow.tsx

@@ -163,14 +163,16 @@ export function OssFlow() {
       handleSavePositions();
       return;
     }
-    if ((event.ctrlKey || event.metaKey) && event.code === 'KeyQ') {
+    if (event.altKey && event.code === 'Key1') {
       event.preventDefault();
       event.stopPropagation();
-      if (event.shiftKey) {
+      handleCreateBlock();
-        handleCreateBlock();
+      return;
-      } else {
+    }
-        handleCreateOperation();
+    if (event.altKey && event.code === 'Key2') {
-      }
+      event.preventDefault();
+      event.stopPropagation();
+      handleCreateOperation();
       return;
     }
     if (event.key === 'Delete') {
@@ -200,8 +202,10 @@ export function OssFlow() {
 
       <ToolbarOssGraph
         className='absolute z-pop top-8 right-1/2 translate-x-1/2'
-        onCreateOperation={handleCreateOperation}
         onCreateBlock={handleCreateBlock}
+        onCreateSchema={handleCreateOperation}
+        onImportSchema={handleCreateOperation}
+        onCreateSynthesis={handleCreateOperation}
         onDelete={handleDeleteSelected}
         onResetPositions={resetGraph}
         openContextMenu={openContextMenu}

rsconcept/frontend/src/features/oss/pages/oss-page/editor-oss-graph/toolbar-oss-graph.tsx

@@ -2,16 +2,21 @@
 
 import React from 'react';
 
+import { useAuthSuspense } from '@/features/auth/backend/use-auth';
 import { HelpTopic } from '@/features/help';
 import { BadgeHelp } from '@/features/help/components/badge-help';
 import { IconShowSidebar } from '@/features/library/components/icon-show-sidebar';
 import { type OssNode } from '@/features/oss/models/oss-layout';
 
 import { MiniButton } from '@/components/control';
+import { Dropdown, DropdownButton, useDropdown } from '@/components/dropdown';
 import {
+  IconClustering,
   IconConceptBlock,
   IconDestroy,
+  IconDownload,
   IconEdit2,
+  IconFilter,
   IconFitImage,
   IconNewItem,
   IconReset,
@@ -22,7 +27,7 @@ import { type Styling } from '@/components/props';
 import { cn } from '@/components/utils';
 import { useDialogsStore } from '@/stores/dialogs';
 import { usePreferencesStore } from '@/stores/preferences';
-import { isIOS, prepareTooltip } from '@/utils/utils';
+import { isIOS, notImplemented, prepareTooltip } from '@/utils/utils';
 
 import { useMutatingOss } from '../../../backend/use-mutating-oss';
 import { useUpdateLayout } from '../../../backend/use-update-layout';
@@ -33,8 +38,10 @@ import { useOssFlow } from './oss-flow-context';
 import { useGetLayout } from './use-get-layout';
 
 interface ToolbarOssGraphProps extends Styling {
-  onCreateOperation: () => void;
   onCreateBlock: () => void;
+  onCreateSchema: () => void;
+  onImportSchema: () => void;
+  onCreateSynthesis: () => void;
   onDelete: () => void;
   onResetPositions: () => void;
 
@@ -44,8 +51,10 @@ interface ToolbarOssGraphProps extends Styling {
 }
 
 export function ToolbarOssGraph({
-  onCreateOperation,
   onCreateBlock,
+  onCreateSchema,
+  onImportSchema,
+  onCreateSynthesis,
   onDelete,
   onResetPositions,
 
@@ -58,18 +67,25 @@ export function ToolbarOssGraph({
   const { schema, selectedItems, isMutable, canDeleteOperation: canDelete } = useOssEdit();
   const isProcessing = useMutatingOss();
   const { resetView, nodes } = useOssFlow();
-  const selectedOperation =
-    selectedItems.length === 1 && selectedItems[0].nodeType === NodeType.OPERATION ? selectedItems[0] : null;
-  const selectedBlock =
-    selectedItems.length === 1 && selectedItems[0].nodeType === NodeType.BLOCK ? selectedItems[0] : null;
   const getLayout = useGetLayout();
-
   const { updateLayout } = useUpdateLayout();
+  const { user } = useAuthSuspense();
+  const menu = useDropdown();
 
   const showOptions = useDialogsStore(state => state.showOssOptions);
   const showSidePanel = usePreferencesStore(state => state.showOssSidePanel);
   const toggleShowSidePanel = usePreferencesStore(state => state.toggleShowOssSidePanel);
 
+  const selectedOperation =
+    selectedItems.length === 1 && selectedItems[0].nodeType === NodeType.OPERATION ? selectedItems[0] : null;
+  const selectedBlock =
+    selectedItems.length === 1 && selectedItems[0].nodeType === NodeType.BLOCK ? selectedItems[0] : null;
+
+  function handleMenuToggle() {
+    hideContextMenu();
+    menu.toggle();
+  }
+
   function handleShowOptions() {
     showOptions();
   }
@@ -127,40 +143,80 @@ export function ToolbarOssGraph({
         <BadgeHelp topic={HelpTopic.UI_OSS_GRAPH} contentClass='sm:max-w-160' offset={4} />
       </div>
       {isMutable ? (
-        <div className='cc-icons'>
+        <div className='cc-icons items-start'>
           <MiniButton
-            titleHtml={prepareTooltip('Сохранить изменения', 'Ctrl + S')}
             aria-label='Сохранить изменения'
+            titleHtml={prepareTooltip('Сохранить изменения', 'Ctrl + S')}
+            hideTitle={menu.isOpen}
             icon={<IconSave size='1.25rem' className='icon-primary' />}
             onClick={handleSavePositions}
             disabled={isProcessing}
           />
           <MiniButton
-            titleHtml={prepareTooltip('Редактировать выбранную', isIOS() ? '' : 'Правый клик')}
-            hideTitle={isContextMenuOpen}
             aria-label='Редактировать выбранную'
+            titleHtml={prepareTooltip('Редактировать выбранную', isIOS() ? '' : 'Правый клик')}
+            hideTitle={isContextMenuOpen || menu.isOpen}
             icon={<IconEdit2 size='1.25rem' className='icon-primary' />}
             onClick={handleEditItem}
             disabled={selectedItems.length !== 1 || isProcessing}
           />
+          <div ref={menu.ref} onBlur={menu.handleBlur} className='relative'>
+            <MiniButton
+              title='Добавить...'
+              hideTitle={menu.isOpen}
+              icon={<IconNewItem size='1.25rem' className='icon-green' />}
+              onClick={handleMenuToggle}
+              disabled={isProcessing}
+            />
+            <Dropdown isOpen={menu.isOpen} className='-translate-x-1/2'>
+              <DropdownButton
+                text='Новый блок'
+                titleHtml={prepareTooltip('Новый блок', 'Alt + 1')}
+                icon={<IconConceptBlock size='1.25rem' className='text-constructive' />}
+                onClick={onCreateBlock}
+              />
+              <DropdownButton
+                text='Новая КС'
+                titleHtml={prepareTooltip('Новая концептуальная схема', 'Alt + 2')}
+                icon={<IconNewItem size='1.25rem' className='text-constructive' />}
+                onClick={onCreateSchema}
+              />
+              <DropdownButton
+                text='Импорт КС'
+                titleHtml={prepareTooltip('Импорт концептуальной схемы', 'Alt + 3')}
+                icon={<IconDownload size='1.25rem' className='text-constructive' />}
+                onClick={onImportSchema}
+              />
+              <DropdownButton
+                text='Синтез'
+                titleHtml={prepareTooltip('Синтез концептуальных схем', 'Alt + 4')}
+                icon={<IconConceptBlock size='1.25rem' className='text-primary' />}
+                onClick={onCreateSynthesis}
+              />
+              {user.is_staff ? (
+                <DropdownButton
+                  disabled
+                  text='Фильтр'
+                  titleHtml={prepareTooltip('Фильтрация конституент', 'Alt + 5')}
+                  icon={<IconFilter size='1.25rem' className='icon-primary' />}
+                  onClick={notImplemented}
+                />
+              ) : null}
+              {user.is_staff ? (
+                <DropdownButton
+                  disabled
+                  text='Релятивизация'
+                  titleHtml={prepareTooltip('Релятивизация концептуальных схем', 'Alt + 6')}
+                  icon={<IconClustering size='1.25rem' className='icon-primary' />}
+                  onClick={notImplemented}
+                />
+              ) : null}
+            </Dropdown>
+          </div>
           <MiniButton
-            titleHtml={prepareTooltip('Новая операция', 'Ctrl + Q')}
-            aria-label='Новая операция'
-            icon={<IconNewItem size='1.25rem' className='icon-green' />}
-            onClick={onCreateOperation}
-            disabled={isProcessing}
-          />
-          <MiniButton
-            titleHtml={prepareTooltip('Новый блок', 'Ctrl + Shift + Q')}
-            aria-label='Новый блок'
-            icon={<IconConceptBlock size='1.25rem' className='icon-green' />}
-            onClick={onCreateBlock}
-            disabled={isProcessing}
-          />
-
-          <MiniButton
-            titleHtml={prepareTooltip('Удалить выбранную', 'Delete')}
             aria-label='Удалить выбранную'
+            titleHtml={prepareTooltip('Удалить выбранную', 'Delete')}
+            hideTitle={menu.isOpen}
             icon={<IconDestroy size='1.25rem' className='icon-red' />}
             onClick={onDelete}
             disabled={

rsconcept/frontend/src/utils/utils.ts

@@ -176,6 +176,25 @@ export function sharePage() {
     .catch(console.error);
 }
 
+/**
+ * Show error message about not implemented function.
+ */
+export function notImplemented() {
+  toast.error('Данная функция еще не реализована');
+  console.error('Not implemented');
+}
+
+/**
+ * Wrap event handler to prevent default and stop propagation.
+ */
+export function withPreventDefault<T extends React.SyntheticEvent>(handler: (event: T) => void) {
+  return (event: T) => {
+    event.preventDefault();
+    event.stopPropagation();
+    handler(event);
+  };
+}
+
 /**
  * Remove html tags from target string.
  */