Add toggle for side list

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

@@ -3,6 +3,7 @@
 import { Dispatch, SetStateAction, useMemo, useState } from 'react';
 
 import { useRSForm } from '@/context/RSFormContext';
+import useLocalStorage from '@/hooks/useLocalStorage';
 import useWindowSize from '@/hooks/useWindowSize';
 import { CstType, IConstituenta, ICstCreateData, ICstRenameData } from '@/models/rsform';
 import { globalIDs } from '@/utils/constants';
@@ -39,6 +40,7 @@ function EditorConstituenta({
   const windowSize = useWindowSize();
   const { schema } = useRSForm();
 
+  const [showList, setShowList] = useLocalStorage('rseditor-show-list', true);
   const [toggleReset, setToggleReset] = useState(false);
 
   const disabled = useMemo(() => (!activeCst || !isMutable), [activeCst, isMutable]);
@@ -136,16 +138,18 @@ function EditorConstituenta({
       onKeyDown={handleInput}
     >
       <FormConstituenta disabled={disabled}
+        showList={showList}
         id={globalIDs.constituenta_editor}
         constituenta={activeCst}
         isModified={isModified}
         toggleReset={toggleReset}
+        onToggleList={() => setShowList(prev => !prev)}
         
         setIsModified={setIsModified}
         onEditTerm={onEditTerm}
         onRenameCst={onRenameCst}
       />
-      {(windowSize.width && windowSize.width >= SIDELIST_HIDE_THRESHOLD) ?
+      {(showList && windowSize.width && windowSize.width >= SIDELIST_HIDE_THRESHOLD) ?
       <ViewConstituents
         schema={schema}
         expression={activeCst?.definition_formal ?? ''}

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

@@ -20,6 +20,7 @@ import EditorRSExpression from '../EditorRSExpression';
 
 interface FormConstituentaProps {
   disabled?: boolean
+  showList: boolean
   
   id?: string
   constituenta?: IConstituenta
@@ -28,15 +29,16 @@ interface FormConstituentaProps {
   toggleReset: boolean
   setIsModified: Dispatch<SetStateAction<boolean>>
 
+  onToggleList: () => void
   onRenameCst: (initial: ICstRenameData) => void
   onEditTerm: () => void
 }
 
 function FormConstituenta({
-  disabled,
+  disabled, showList,
   id, isModified, setIsModified,
   constituenta, toggleReset,
-  onRenameCst, onEditTerm
+  onRenameCst, onEditTerm, onToggleList
 }: FormConstituentaProps) {
   const { schema, cstUpdate, processing } = useRSForm();
   
@@ -158,11 +160,13 @@ function FormConstituenta({
     />
     <EditorRSExpression
       label='Формальное определение'
-      activeCst={constituenta}
       placeholder='Родоструктурное выражение, задающее формальное определение'
       value={expression}
+      activeCst={constituenta}
+      showList={showList}
       disabled={disabled}
       toggleReset={toggleReset}
+      onToggleList={onToggleList}
       onChange={newValue => setExpression(newValue)}
       setTypification={setTypification}
     />

rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/EditorRSExpression.tsx

@@ -2,6 +2,7 @@
 
 import { ReactCodeMirrorRef } from '@uiw/react-codemirror';
 import { useCallback, useLayoutEffect, useRef, useState } from 'react';
+import { BiListUl } from 'react-icons/bi';
 import { FaRegKeyboard } from 'react-icons/fa6';
 import { RiNodeTree } from 'react-icons/ri'
 import { toast } from 'react-toastify';
@@ -27,18 +28,23 @@ import StatusBar from './StatusBar';
 interface EditorRSExpressionProps {
   id?: string
   activeCst?: IConstituenta
+  value: string
   label: string
+  placeholder?: string
+
   disabled?: boolean
   toggleReset?: boolean
-  placeholder?: string
+  showList: boolean
+  
   setTypification: (typificaiton: string) => void
-  value: string
   onChange: (newValue: string) => void
+  onToggleList: () => void
 }
 
 function EditorRSExpression({
-  activeCst, disabled, value, toggleReset,
+  activeCst, disabled, value, toggleReset, showList,
-  setTypification, onChange, ...restProps
+  setTypification, onChange, onToggleList,
+  ...restProps
 }: EditorRSExpressionProps) {
   const { schema } = useRSForm();
 
@@ -138,10 +144,15 @@ function EditorRSExpression({
   <div>
     <Overlay position='top-0 right-0 flex'>
       <MiniButton noHover
-        title='Включение специальной клавиатуры'
+        title='Отображение специальной клавиатуры'
         onClick={() => setShowControls(prev => !prev)}
         icon={<FaRegKeyboard size='1.25rem' className={showControls ? 'clr-text-primary': ''} />}
       />
+      <MiniButton noHover
+        title='Отображение списка конституент'
+        onClick={onToggleList}
+        icon={<BiListUl size='1.25rem' className={showList ? 'clr-text-primary': ''} />}
+      />
       <MiniButton noHover
         title='Дерево разбора выражения'
         onClick={handleShowAST}