D: Add sidebar help documentation

rsconcept/frontend/src/features/help/components/badge-help.tsx

@@ -26,6 +26,9 @@ interface BadgeHelpProps extends Styling {
   /** Classname for padding. */
   padding?: string;
 
+  /** Size class for the tooltip. */
+  size?: string;
+
   /** Place of the tooltip in relation to the cursor. */
   place?: PlacesType;
 
@@ -36,7 +39,15 @@ interface BadgeHelpProps extends Styling {
 /**
  * Display help icon with a manual page tooltip.
  */
-export function BadgeHelp({ topic, padding = 'p-1', className, contentClass, style, ...restProps }: BadgeHelpProps) {
+export function BadgeHelp({
+  topic,
+  padding = 'p-1',
+  size = '1.25rem',
+  className,
+  contentClass,
+  style,
+  ...restProps
+}: BadgeHelpProps) {
   const showHelp = usePreferencesStore(state => state.showHelp);
 
   if (!showHelp) {
@@ -44,7 +55,7 @@ export function BadgeHelp({ topic, padding = 'p-1', className, contentClass, sty
   }
   return (
     <div tabIndex={-1} id={`help-${topic}`} className={cn(padding, className)} style={style}>
-      <IconHelp size='1.25rem' className='text-muted-foreground hover:text-primary cc-animate-color' />
+      <IconHelp size={size} className='text-muted-foreground hover:text-primary cc-animate-color' />
       <Tooltip
         clickable
         anchorSelect={`#help-${topic}`}

rsconcept/frontend/src/features/help/items/ui/help-oss-graph.tsx

@@ -30,7 +30,7 @@ import { HelpTopic } from '../../models/help-topic';
 export function HelpOssGraph() {
   return (
     <div className='flex flex-col'>
-      <h1 className='sm:pr-24'>Граф синтеза</h1>
+      <h1 className='sm:pr-24'>Операционная схема</h1>
       <div className='flex flex-col sm:flex-row'>
         <div className='sm:w-64'>
           <h2>Настройка графа</h2>

rsconcept/frontend/src/features/help/items/ui/help-oss-sidebar.tsx

@@ -0,0 +1,71 @@
+import {
+  IconClone,
+  IconDestroy,
+  IconEdit2,
+  IconGenerateNames,
+  IconLeftOpen,
+  IconMoveDown,
+  IconMoveUp,
+  IconNewItem,
+  IconRSForm,
+  IconSortList,
+  IconTree,
+  IconTypeGraph
+} from '@/components/icons';
+
+import { LinkTopic } from '../../components/link-topic';
+import { HelpTopic } from '../../models/help-topic';
+
+export function HelpOssSidebar() {
+  return (
+    <div className='flex flex-col'>
+      <h1>Боковая панель</h1>
+      <p className='m-0'>
+        <IconLeftOpen className='inline-icon' />
+        {'\u2009'} Боковая панель операционной схемы позволяет оперативно редактировать содержание{' '}
+        <LinkTopic text='Концептуальной схемы' topic={HelpTopic.CC_SYSTEM} />, не переходя к ней напрямую.
+      </p>
+      <p className='mt-1'>
+        Верхняя часть панели позволяет фильтровать список конституент аналогично{' '}
+        <LinkTopic text='редактору конституенты' topic={HelpTopic.UI_RS_EDITOR} />.
+      </p>
+      <ul>
+        <li>
+          <IconRSForm className='inline-icon' /> меню редактирования концептуальной схемы
+        </li>
+        <li>
+          <IconSortList className='inline-icon' /> упорядочить конституенты
+        </li>
+        <li>
+          <IconGenerateNames className='inline-icon' /> перенумеровать
+        </li>
+        <li>
+          <IconEdit2 className='inline-icon' /> редактировать конституенты
+        </li>
+        <li>
+          <IconNewItem className='inline-icon icon-green' /> новая конституента
+        </li>
+        <li>
+          <IconClone className='inline-icon icon-green' /> клонировать конституенту
+        </li>
+        <li>
+          <IconDestroy className='inline-icon icon-red' /> удалить конституенты
+        </li>
+        <li>
+          <IconMoveDown className='inline-icon' />
+          <IconMoveUp className='inline-icon' /> перемещение вверх/вниз
+        </li>
+        <li>
+          <IconTree className='inline-icon' />
+          {'\u2009'}
+          <LinkTopic text='граф термов' topic={HelpTopic.UI_GRAPH_TERM} />
+        </li>
+        <li>
+          <IconTypeGraph className='inline-icon' />
+          {'\u2009'}
+          <LinkTopic text='граф ступеней' topic={HelpTopic.UI_TYPE_GRAPH} />
+        </li>
+      </ul>
+    </div>
+  );
+}

rsconcept/frontend/src/features/help/labels.ts

@@ -16,7 +16,8 @@ const labelHelpTopicRecord: Record<HelpTopic, string> = {
   [HelpTopic.UI_TYPE_GRAPH]: 'Граф ступеней',
   [HelpTopic.UI_CST_STATUS]: 'Статус конституенты',
   [HelpTopic.UI_CST_CLASS]: 'Класс конституенты',
-  [HelpTopic.UI_OSS_GRAPH]: 'Граф синтеза',
+  [HelpTopic.UI_OSS_GRAPH]: 'Операционная схема',
+  [HelpTopic.UI_OSS_SIDEBAR]: 'Боковая панель',
   [HelpTopic.UI_SUBSTITUTIONS]: 'Отождествления',
   [HelpTopic.UI_RELOCATE_CST]: 'Перенос конституент',
 
@@ -67,6 +68,7 @@ const describeHelpTopicRecord: Record<HelpTopic, string> = {
   [HelpTopic.UI_CST_STATUS]: 'нотация статуса конституенты',
   [HelpTopic.UI_CST_CLASS]: 'нотация класса конституенты',
   [HelpTopic.UI_OSS_GRAPH]: 'графическая форма <br/>операционной схемы синтеза',
+  [HelpTopic.UI_OSS_SIDEBAR]: 'боковая панель для редактирования содержания выбранной операции',
   [HelpTopic.UI_SUBSTITUTIONS]: 'таблица отождествлений конституент',
   [HelpTopic.UI_RELOCATE_CST]: 'перенос конституент<br/>в рамках ОСС',
 

rsconcept/frontend/src/features/help/models/help-topic.ts

@@ -18,6 +18,7 @@ export const HelpTopic = {
   UI_CST_STATUS: 'ui-rsform-cst-status',
   UI_CST_CLASS: 'ui-rsform-cst-class',
   UI_OSS_GRAPH: 'ui-oss-graph',
+  UI_OSS_SIDEBAR: 'ui-oss-sidebar',
   UI_SUBSTITUTIONS: 'ui-substitutions',
   UI_RELOCATE_CST: 'ui-relocate-cst',
 
@@ -73,6 +74,7 @@ export const topicParent = new Map<HelpTopic, HelpTopic>([
   [HelpTopic.UI_CST_STATUS, HelpTopic.INTERFACE],
   [HelpTopic.UI_CST_CLASS, HelpTopic.INTERFACE],
   [HelpTopic.UI_OSS_GRAPH, HelpTopic.INTERFACE],
+  [HelpTopic.UI_OSS_SIDEBAR, HelpTopic.INTERFACE],
   [HelpTopic.UI_SUBSTITUTIONS, HelpTopic.INTERFACE],
   [HelpTopic.UI_RELOCATE_CST, HelpTopic.INTERFACE],
 

rsconcept/frontend/src/features/help/pages/manuals-page/topic-page.tsx

@@ -32,6 +32,7 @@ import { HelpCstStatus } from '../../items/ui/help-cst-status';
 import { HelpFormulaTree } from '../../items/ui/help-formula-tree';
 import { HelpLibrary } from '../../items/ui/help-library';
 import { HelpOssGraph } from '../../items/ui/help-oss-graph';
+import { HelpOssSidebar } from '../../items/ui/help-oss-sidebar';
 import { HelpRelocateCst } from '../../items/ui/help-relocate-cst';
 import { HelpRSCard } from '../../items/ui/help-rscard';
 import { HelpRSEditor } from '../../items/ui/help-rseditor';
@@ -71,6 +72,7 @@ export function TopicPage({ topic }: TopicPageProps) {
   if (topic === HelpTopic.UI_CST_STATUS) return <HelpCstStatus />;
   if (topic === HelpTopic.UI_CST_CLASS) return <HelpCstClass />;
   if (topic === HelpTopic.UI_OSS_GRAPH) return <HelpOssGraph />;
+  if (topic === HelpTopic.UI_OSS_SIDEBAR) return <HelpOssSidebar />;
   if (topic === HelpTopic.UI_SUBSTITUTIONS) return <HelpSubstitutions />;
   if (topic === HelpTopic.UI_RELOCATE_CST) return <HelpRelocateCst />;
 

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

@@ -1,6 +1,8 @@
 'use client';
 
 import { urls, useConceptNavigation } from '@/app';
+import { HelpTopic } from '@/features/help';
+import { BadgeHelp } from '@/features/help/components/badge-help';
 import { type IConstituenta, type IRSForm } from '@/features/rsform';
 import { CstType, type IConstituentaBasicsDTO, type ICreateConstituentaDTO } from '@/features/rsform/backend/types';
 import { useCreateConstituenta } from '@/features/rsform/backend/use-create-constituenta';
@@ -284,6 +286,8 @@ export function ToolbarSchema({
         title='Граф ступеней'
         onClick={handleShowTypeGraph}
       />
+
+      <BadgeHelp topic={HelpTopic.UI_OSS_SIDEBAR} size='1rem' contentClass='sm:max-w-100' offset={4} />
     </div>
   );
 }