From fd9b5d272851e16ec3778828c25e640ee25cea15 Mon Sep 17 00:00:00 2001
From: IRBorisov <8611739+IRBorisov@users.noreply.github.com>
Date: Fri, 15 Mar 2024 14:35:06 +0300
Subject: [PATCH] Add vertical layout for constituent search

---
 .../EditorConstituenta/EditorConstituenta.tsx | 20 +++++++++++++++----
 .../EditorConstituenta/FormConstituenta.tsx   |  4 ++--
 .../src/pages/RSFormPage/RSTabsMenu.tsx       | 15 +++++++-------
 .../ViewConstituents/ViewConstituents.tsx     | 14 ++++++++++---
 4 files changed, 37 insertions(+), 16 deletions(-)

diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/EditorConstituenta.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/EditorConstituenta.tsx
index ac702651..2fb1d458 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/EditorConstituenta.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/EditorConstituenta.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import clsx from 'clsx';
 import { AnimatePresence } from 'framer-motion';
 import { useMemo, useState } from 'react';
 
@@ -16,8 +17,8 @@ import FormConstituenta from './FormConstituenta';
 // Max height of content for left editor pane.
 const UNFOLDED_HEIGHT = '59.1rem';
 
-// Threshold window width to hide side constituents list.
-const SIDELIST_HIDE_THRESHOLD = 1100; // px
+// Threshold window width to switch layout.
+const SIDELIST_LAYOUT_THRESHOLD = 1100; // px
 
 interface EditorConstituentaProps {
   activeCst?: IConstituenta;
@@ -38,6 +39,8 @@ function EditorConstituenta({ activeCst, isModified, setIsModified, onOpenEdit }
     [activeCst, controller.isContentEditable]
   );
 
+  const isNarrow = useMemo(() => !!windowSize.width && windowSize.width <= SIDELIST_LAYOUT_THRESHOLD, [windowSize]);
+
   function handleInput(event: React.KeyboardEvent<HTMLDivElement>) {
     if (disabled) {
       return;
@@ -89,7 +92,15 @@ function EditorConstituenta({ activeCst, isModified, setIsModified, onOpenEdit }
           onCreate={() => controller.createCst(activeCst?.cst_type, false)}
         />
       ) : null}
-      <div tabIndex={-1} className='flex max-w-[95rem]' onKeyDown={handleInput}>
+      <div
+        tabIndex={-1}
+        className={clsx(
+          'max-w-[95rem]', // prettier: split lines
+          'flex',
+          { 'flex-col items-center': isNarrow }
+        )}
+        onKeyDown={handleInput}
+      >
         <FormConstituenta
           isMutable={!disabled}
           showList={showList}
@@ -103,10 +114,11 @@ function EditorConstituenta({ activeCst, isModified, setIsModified, onOpenEdit }
           onRename={controller.renameCst}
         />
         <AnimatePresence>
-          {showList && windowSize.width && windowSize.width >= SIDELIST_HIDE_THRESHOLD ? (
+          {showList ? (
             <ViewConstituents
               schema={controller.schema}
               expression={activeCst?.definition_formal ?? ''}
+              isBottom={isNarrow}
               baseHeight={UNFOLDED_HEIGHT}
               activeID={activeCst?.id}
               onOpenEdit={onOpenEdit}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx
index d8ad1a6a..dc069983 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx
@@ -113,7 +113,7 @@ function FormConstituenta({
   }
 
   return (
-    <>
+    <div>
       <ControlsOverlay
         isMutable={isMutable}
         processing={processing}
@@ -189,7 +189,7 @@ function FormConstituenta({
           />
         ) : null}
       </form>
-    </>
+    </div>
   );
 }
 
diff --git a/rsconcept/frontend/src/pages/RSFormPage/RSTabsMenu.tsx b/rsconcept/frontend/src/pages/RSFormPage/RSTabsMenu.tsx
index a6a06929..d7ee6493 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/RSTabsMenu.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/RSTabsMenu.tsx
@@ -194,13 +194,6 @@ function RSTabsMenu({ onDestroy }: RSTabsMenuProps) {
             onClick={editMenu.toggle}
           />
           <Dropdown isOpen={editMenu.isOpen}>
-            <DropdownButton
-              disabled={!controller.isContentEditable}
-              text='Сброс имён'
-              title='Присвоить порядковые имена и обновить выражения'
-              icon={<BiAnalyse size='1rem' className='icon-primary' />}
-              onClick={handleReindex}
-            />
             <DropdownButton
               disabled={!controller.isContentEditable}
               text='Банк выражений'
@@ -208,6 +201,14 @@ function RSTabsMenu({ onDestroy }: RSTabsMenuProps) {
               icon={<BiDiamond size='1rem' className='icon-green' />}
               onClick={handleTemplates}
             />
+            <DropdownButton
+              disabled={!controller.isContentEditable}
+              className='border-t-2'
+              text='Сброс имён'
+              title='Присвоить порядковые имена и обновить выражения'
+              icon={<BiAnalyse size='1rem' className='icon-primary' />}
+              onClick={handleReindex}
+            />
             <DropdownButton
               disabled={!controller.isContentEditable || !controller.canProduceStructure}
               text='Порождение структуры'
diff --git a/rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/ViewConstituents.tsx b/rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/ViewConstituents.tsx
index 67e6a529..96a786b6 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/ViewConstituents.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/ViewConstituents.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import clsx from 'clsx';
 import { motion } from 'framer-motion';
 import { useMemo, useState } from 'react';
 
@@ -18,13 +19,14 @@ const COLUMN_EXPRESSION_HIDE_THRESHOLD = 1500;
 
 interface ViewConstituentsProps {
   expression: string;
+  isBottom?: boolean;
   baseHeight: string;
   activeID?: number;
   schema?: IRSForm;
   onOpenEdit: (cstID: number) => void;
 }
 
-function ViewConstituents({ expression, baseHeight, schema, activeID, onOpenEdit }: ViewConstituentsProps) {
+function ViewConstituents({ expression, schema, activeID, isBottom, baseHeight, onOpenEdit }: ViewConstituentsProps) {
   const { noNavigation } = useConceptTheme();
 
   const [filteredData, setFilteredData] = useState<IConstituenta[]>(schema?.items ?? []);
@@ -38,7 +40,13 @@ function ViewConstituents({ expression, baseHeight, schema, activeID, onOpenEdit
 
   return (
     <motion.div
-      className='mt-[2.25rem] border'
+      className={clsx(
+        'border', // prettier: split-lines
+        {
+          'mt-[2.25rem]': !isBottom, // prettier: split-lines
+          'mt-3 mx-6': isBottom
+        }
+      )}
       initial={{ ...animateSideView.initial }}
       animate={{ ...animateSideView.animate }}
       exit={{ ...animateSideView.exit }}
@@ -50,7 +58,7 @@ function ViewConstituents({ expression, baseHeight, schema, activeID, onOpenEdit
         setFiltered={setFilteredData}
       />
       <ConstituentsTable
-        maxHeight={maxHeight}
+        maxHeight={isBottom ? '12rem' : maxHeight}
         items={filteredData}
         activeID={activeID}
         onOpenEdit={onOpenEdit}