M: Improve focus cst layout

rsconcept/frontend/src/features/oss/dialogs/dlg-show-term-graph/tg-readonly-flow.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react';
 import { type Edge, MarkerType, type Node, useEdgesState, useNodesState } from 'reactflow';
 
 import { type IConstituenta, type IRSForm } from '@/features/rsform';
+import { FocusLabel } from '@/features/rsform/components/term-graph/focus-label';
 import { TGEdgeTypes } from '@/features/rsform/components/term-graph/graph/tg-edge-types';
 import { TGNodeTypes } from '@/features/rsform/components/term-graph/graph/tg-node-types';
 import { SelectColoring } from '@/features/rsform/components/term-graph/select-coloring';
@@ -100,9 +101,10 @@ export function TGReadonlyFlow({ schema }: TGReadonlyFlowProps) {
 
   return (
     <div className='relative w-full h-full flex flex-col'>
-      <div className='cc-tab-tools flex mt-2 items-start rounded-b-2xl backdrop-blur-xs'>
-        {focusCst ? <ToolbarFocusedCst focus={focusCst} resetFocus={() => setFocusCst(null)} /> : null}
+      <div className='cc-tab-tools mt-2 flex flex-col items-center  rounded-b-2xl backdrop-blur-xs'>
         <ToolbarGraphFilter />
+        {focusCst ? <ToolbarFocusedCst resetFocus={() => setFocusCst(null)} /> : null}
+        {focusCst ? <FocusLabel label={focusCst.alias} /> : null}
       </div>
       <div className='absolute z-pop top-24 sm:top-16 left-2 sm:left-3 w-54 flex flex-col pointer-events-none'>
         <SelectColoring className='rounded-b-none' schema={schema} />

rsconcept/frontend/src/features/rsform/components/term-graph/focus-label.tsx

@@ -0,0 +1,16 @@
+import clsx from 'clsx';
+
+interface FocusLabelProps {
+  label: string;
+}
+
+export function FocusLabel({ label }: FocusLabelProps) {
+  return (
+    <div className={clsx('px-1', 'select-none', 'hover:bg-background', 'text-accent-purple-foreground rounded-md')}>
+      <span aria-label='Фокус-конституента' className='whitespace-nowrap'>
+        Фокус
+        <b> {label} </b>
+      </span>
+    </div>
+  );
+}

rsconcept/frontend/src/features/rsform/components/term-graph/toolbar-focused-cst.tsx

@@ -1,9 +1,5 @@
 'use client';
 
-import clsx from 'clsx';
-
-import { type IConstituenta } from '@/features/rsform/models/rsform';
-
 import { MiniButton } from '@/components/control';
 import { IconGraphInputs, IconGraphOutputs, IconReset } from '@/components/icons';
 import { cn } from '@/components/utils';
@@ -12,11 +8,10 @@ import { useTermGraphStore } from '../../stores/term-graph';
 
 interface ToolbarFocusedCstProps {
   className?: string;
-  focus: IConstituenta;
   resetFocus: () => void;
 }
 
-export function ToolbarFocusedCst({ focus, resetFocus, className }: ToolbarFocusedCstProps) {
+export function ToolbarFocusedCst({ resetFocus, className }: ToolbarFocusedCstProps) {
   const filter = useTermGraphStore(state => state.filter);
   const toggleFocusInputs = useTermGraphStore(state => state.toggleFocusInputs);
   const toggleFocusOutputs = useTermGraphStore(state => state.toggleFocusOutputs);
@@ -40,21 +35,6 @@ export function ToolbarFocusedCst({ focus, resetFocus, className }: ToolbarFocus
           onClick={toggleFocusOutputs}
         />
       </div>
-      <div
-        className={clsx(
-          'translate-x-1/2',
-          'w-full text-right',
-          'px-1',
-          'select-none',
-          'hover:bg-background',
-          'text-accent-purple-foreground rounded-md'
-        )}
-      >
-        <span aria-label='Фокус-конституента' className='whitespace-nowrap'>
-          Фокус
-          <b> {focus.alias} </b>
-        </span>
-      </div>
     </div>
   );
 }

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

@@ -6,6 +6,7 @@ import { HelpTopic } from '@/features/help';
 import { BadgeHelp } from '@/features/help/components/badge-help';
 import { type ILibraryItemReference } from '@/features/library';
 import { MiniSelectorOSS } from '@/features/library/components/mini-selector-oss';
+import { FocusLabel } from '@/features/rsform/components/term-graph/focus-label';
 import { ToolbarFocusedCst } from '@/features/rsform/components/term-graph/toolbar-focused-cst';
 import { ToolbarGraphSelection } from '@/features/rsform/components/toolbar-graph-selection';
 import { isBasicConcept } from '@/features/rsform/models/rsform-api';
@@ -162,10 +163,7 @@ export function ToolbarTermGraph({ className }: ToolbarTermGraphProps) {
       </div>
       <div className='cc-icons items-start'>
         {focusCst ? (
-          <ToolbarFocusedCst
-            focus={focusCst} //
-            resetFocus={() => setFocus(null)}
-          />
+          <ToolbarFocusedCst resetFocus={() => setFocus(null)} />
         ) : (
           <ToolbarGraphSelection
             graph={filteredGraph}
@@ -201,6 +199,7 @@ export function ToolbarTermGraph({ className }: ToolbarTermGraphProps) {
           onClick={handleShowTypeGraph}
         />
       </div>
+      {focusCst ? <FocusLabel label={focusCst.alias} /> : null}
     </div>
   );
 }