Refactoring and small UI fix

.vscode/settings.json

@@ -50,6 +50,7 @@
 		"forceatlas",
 		"Grammeme",
 		"Grammemes",
+		"Keymap",
 		"lezer",
 		"moprho",
 		"nooverlap",

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

@@ -6,7 +6,7 @@ import { createTheme } from '@uiw/codemirror-themes';
 import CodeMirror, { BasicSetupOptions, ReactCodeMirrorProps, ReactCodeMirrorRef } from '@uiw/react-codemirror';
 import clsx from 'clsx';
 import { EditorView } from 'codemirror';
-import { RefObject, useCallback, useMemo, useRef } from 'react';
+import { forwardRef, useCallback, useMemo, useRef } from 'react';
 
 import Label from '@/components/Common/Label';
 import { useRSForm } from '@/context/RSFormContext';
@@ -53,25 +53,22 @@ extends Pick<ReactCodeMirrorProps,
   label?: string
   disabled?: boolean
   noTooltip?: boolean
-  innerref?: RefObject<ReactCodeMirrorRef> | undefined
   onChange?: (newValue: string) => void
   onAnalyze?: () => void
 }
 
-function RSInput({ 
-  id, label, innerref, onChange, onAnalyze,
+const RSInput = forwardRef<ReactCodeMirrorRef, RSInputProps>(
+  ({ 
+    id, label, onChange, onAnalyze,
     disabled, noTooltip,
     className, style,
     ...restProps 
-}: RSInputProps) {
+  }, ref) => {
   const { darkMode, colors } = useConceptTheme();
   const { schema } = useRSForm();
 
   const internalRef = useRef<ReactCodeMirrorRef>(null);
-  const thisRef = useMemo(
-  () => {
-    return innerref ?? internalRef;
-  }, [internalRef, innerref]);
+  const thisRef = useMemo(() => (!ref || typeof ref === 'function' ? internalRef : ref), [internalRef, ref]);
 
   const cursor = useMemo(() => !disabled ? 'cursor-text': 'cursor-default', [disabled]);
   const customTheme: Extension = useMemo(
@@ -90,7 +87,7 @@ function RSInput({
       { tag: tags.keyword, color: colors.fgBlue }, // keywords
       { tag: tags.literal, color: colors.fgBlue }, // literals
       { tag: tags.controlKeyword, fontWeight: '500'}, // R | I | D
-      { tag: tags.unit, fontSize: '0.75rem' }, // indicies
+      { tag: tags.unit, fontSize: '0.75rem' }, // indices
       { tag: tags.brace, color:colors.fgPurple, fontWeight: '700' }, // braces (curly brackets)
     ]
   }), [disabled, colors, darkMode]);
@@ -150,6 +147,6 @@ function RSInput({
       {...restProps}
     />
   </div>);
-}
+});
 
 export default RSInput;

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

@@ -7,7 +7,7 @@ import CodeMirror, { BasicSetupOptions, ReactCodeMirrorProps, ReactCodeMirrorRef
 import clsx from 'clsx';
 import { EditorView } from 'codemirror';
 import { AnimatePresence } from 'framer-motion';
-import { RefObject, useCallback, useMemo, useRef, useState } from 'react';
+import { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
 
 import Label from '@/components/Common/Label';
 import { useRSForm } from '@/context/RSFormContext';
@@ -54,7 +54,6 @@ extends Pick<ReactCodeMirrorProps,
   'id'| 'height' | 'value' | 'className' | 'onFocus' | 'onBlur' | 'placeholder'
 > {
   label?: string
-  innerref?: RefObject<ReactCodeMirrorRef> | undefined
   onChange?: (newValue: string) => void
   items?: IConstituenta[]
   disabled?: boolean
@@ -64,12 +63,13 @@ extends Pick<ReactCodeMirrorProps,
   resolved?: string
 }
 
-function RefsInput({ 
-  id, label, innerref, disabled, items,
+const RefsInput = forwardRef<ReactCodeMirrorRef, RefsInputInputProps>(
+  ({ 
+    id, label, disabled, items,
     initialValue, value, resolved,
     onFocus, onBlur, onChange,
     ...restProps
-}: RefsInputInputProps) {
+  }, ref) => {
   const { darkMode, colors } = useConceptTheme();
   const { schema } = useRSForm();
 
@@ -83,10 +83,7 @@ function RefsInput({
   const [mainRefs, setMainRefs] = useState<string[]>([]);
 
   const internalRef = useRef<ReactCodeMirrorRef>(null);
-  const thisRef = useMemo(
-  () => {
-    return innerref ?? internalRef;
-  }, [internalRef, innerref]);
+  const thisRef = useMemo(() => (!ref || typeof ref === 'function' ? internalRef : ref), [internalRef, ref]);
 
   const cursor = useMemo(() => !disabled ? 'cursor-text': 'cursor-default', [disabled]);
   const customTheme: Extension = useMemo(
@@ -204,6 +201,6 @@ function RefsInput({
     />
   </div>
   </>);
-}
+});
 
 export default RefsInput;

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

@@ -173,7 +173,7 @@ function EditorRSExpression({
       />
     </Overlay>
 
-    <RSInput innerref={rsInput}
+    <RSInput ref={rsInput}
       value={value}
       minHeight='3.8rem'
       disabled={disabled}

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

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import { motion } from 'framer-motion';
 
 import { IExpressionParse, IRSErrorDescription } from '@/models/rslang';
-import { animateRSControl } from '@/utils/animations';
+import { animateParseResults } from '@/utils/animations';
 import { describeRSError } from '@/utils/labels';
 import { getRSErrorPrefix } from '@/utils/misc';
 
@@ -22,15 +22,13 @@ function ParsingResult({ isOpen, data, disabled, onShowError }: ParsingResultPro
   return (
   <motion.div 
     className={clsx(
-      'px-2 pt-1',
-      'h-[4.5rem] mt-3',
-      'text-sm',
       'border',
+      'text-sm',
       'overflow-y-auto'
     )}
     initial={false}
     animate={isOpen ? 'open' : 'closed'}
-    variants={animateRSControl}
+    variants={animateParseResults}
   >
     <p>Ошибок: <b>{errorCount}</b> | Предупреждений: <b>{warningsCount}</b></p>
     {data?.errors.map(

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

@@ -90,7 +90,7 @@ interface RSEditorControlsProps {
 function RSEditorControls({ isOpen, disabled, onEdit }: RSEditorControlsProps) {
   return (
   <motion.div
-    className='flex-wrap mt-1 text-sm divide-solid'
+    className='flex-wrap text-sm divide-solid'
     initial={false}
     animate={isOpen ? 'open' : 'closed'}
     variants={animateRSControl}

rsconcept/frontend/src/utils/animations.ts

@@ -97,6 +97,7 @@ export const animateDropdownItem: Variants = {
 export const animateRSControl: Variants = {
   open: {
     clipPath: 'inset(0% 0% 0% 0%)',
+    marginTop: '0.25rem',
     height: 'max-content',
     transition: {
       type: 'spring',
@@ -106,6 +107,34 @@ export const animateRSControl: Variants = {
   },
   closed: {
     clipPath: 'inset(0% 0% 100% 0%)',
+    marginTop: '0',
+    height: 0,
+    transition: {
+      type: 'spring',
+      bounce: 0,
+      duration: 0.3
+    }
+  }
+};
+
+export const animateParseResults: Variants = {
+  open: {
+    clipPath: 'inset(0% 0% 0% 0%)',
+    marginTop: '0.75rem',
+    padding: '0.25rem 0.5rem 0.25rem 0.5rem',
+    borderWidth: '1px',
+    height: '4.5rem',
+    transition: {
+      type: 'spring',
+      bounce: 0,
+      duration: 0.4
+    }
+  },
+  closed: {
+    clipPath: 'inset(0% 0% 100% 0%)',
+    marginTop: '0',
+    borderWidth: '0',
+    padding: '0 0 0 0',
     height: 0,
     transition: {
       type: 'spring',