F: Various UI fixes

rsconcept/frontend/src/components/data-table/table-body.tsx

@@ -75,7 +75,7 @@ export function TableBody<TData>({
           key={row.id}
           className={clsx(
             'cc-scroll-row',
-            'clr-hover cc-animate-background duration-300',
+            'clr-hover cc-animate-background duration-(--duration-fade)',
             !noHeader && 'scroll-mt-[calc(2px+2rem)]',
             table.options.enableRowSelection && row.getIsSelected()
               ? 'clr-selected'

rsconcept/frontend/src/components/icons.tsx

@@ -146,6 +146,7 @@ export { BiGitMerge       as IconGraphOutputs }   from 'react-icons/bi';
 export { LuAtom           as IconGraphCore }      from 'react-icons/lu';
 export { LuRotate3D       as IconRotate3D }       from 'react-icons/lu';
 export { MdOutlineFitScreen as IconFitImage }     from 'react-icons/md';
+export { RiFocus3Line     as IconFocus }          from 'react-icons/ri';
 export { LuSparkles       as IconClustering }     from 'react-icons/lu';
 export { LuSparkle        as IconClusteringOff }  from 'react-icons/lu';
 export { TbGridDots       as IconGrid }           from 'react-icons/tb';

rsconcept/frontend/src/features/help/items/ui/help-rsgraph-term.tsx

@@ -5,6 +5,7 @@ import {
   IconEdit,
   IconFilter,
   IconFitImage,
+  IconFocus,
   IconGraphCollapse,
   IconGraphCore,
   IconGraphExpand,
@@ -47,9 +48,7 @@ export function HelpRSGraphTerm() {
         <div className='sm:w-84'>
           <h1>Изменение узлов</h1>
           <li>Клик на узел – выделение</li>
-          <li>
+          <li>Левый клик – выбор фокус-конституенты</li>
-            Левый клик – выбор <span className='text-(--acc-fg-purple)'>фокус-конституенты</span>
-          </li>
           <li>
             <IconReset className='inline-icon' /> Esc – сбросить выделение
           </li>
@@ -76,6 +75,9 @@ export function HelpRSGraphTerm() {
           <li>
             <IconFilter className='inline-icon' /> Открыть настройки
           </li>
+          <li>
+            <IconFocus className='inline-icon' /> Задать фокус
+          </li>
           <li>
             <IconFitImage className='inline-icon' /> Вписать в экран
           </li>

rsconcept/frontend/src/features/library/pages/library-page/library-page.tsx

@@ -57,7 +57,7 @@ export function LibraryPage() {
       <div className='relative cc-fade-in flex'>
         <MiniButton
           title='Выгрузить в формате CSV'
-          className='absolute z-tooltip -top-8 right-6'
+          className='absolute z-tooltip -top-8 right-6 hidden sm:block'
           icon={<IconCSV size='1.25rem' className='icon-green' />}
           onClick={handleDownloadCSV}
         />

rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-rslist/editor-rslist.tsx

@@ -146,7 +146,7 @@ export function EditorRSList() {
       ) : null}
 
       <MiniButton
-        className='absolute z-pop top-18 right-4'
+        className='absolute z-pop top-18 right-4 hidden sm:block'
         title='Выгрузить в формате CSV'
         icon={<IconCSV size='1.25rem' className='icon-green' />}
         onClick={handleDownloadCSV}

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

@@ -27,10 +27,10 @@ interface TGNodeInternal {
 }
 
 export function TGNode(node: TGNodeInternal) {
-  const { focusCst, setFocus: setFocusCst, navigateCst } = useRSEdit();
+  const { focusCst, setFocus, navigateCst } = useRSEdit();
   const filter = useTermGraphStore(state => state.filter);
   const coloring = useTermGraphStore(state => state.coloring);
-  const isFocused = focusCst === node.data;
+  const isFocused = focusCst?.id === node.data.id;
 
   const label = node.data.alias;
   const description = !filter.noText ? node.data.term_resolved : '';
@@ -38,7 +38,7 @@ export function TGNode(node: TGNodeInternal) {
   function handleContextMenu(event: React.MouseEvent<HTMLElement>) {
     event.stopPropagation();
     event.preventDefault();
-    setFocusCst(isFocused ? null : node.data);
+    setFocus(isFocused ? null : node.data);
   }
 
   function handleDoubleClick(event: React.MouseEvent) {

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

@@ -12,7 +12,7 @@ export function ToolbarFocusedCst() {
   const filter = useTermGraphStore(state => state.filter);
   const setFilter = useTermGraphStore(state => state.setFilter);
 
-  function resetSelection() {
+  function resetFocus() {
     setFocus(null);
   }
 
@@ -36,17 +36,17 @@ export function ToolbarFocusedCst() {
 
   return (
     <div className='flex items-center cc-icons'>
-      <div className='w-31 mt-0.5 text-right select-none color-(--acc-fg-purple)'>
+      <div className='w-31 mt-0.5 text-right select-none text-(--acc-fg-purple)'>
         <span>
           Фокус
-          <b className='pr-1'> {focusCst.alias} </b>
+          <b> {focusCst.alias} </b>
         </span>
       </div>
 
       <MiniButton
         title='Сбросить фокус'
         icon={<IconReset size='1.25rem' className='icon-primary' />}
-        onClick={resetSelection}
+        onClick={resetFocus}
       />
       <MiniButton
         title={filter.focusShowInputs ? 'Скрыть поставщиков' : 'Отобразить поставщиков'}

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

@@ -11,6 +11,7 @@ import {
   IconDestroy,
   IconFilter,
   IconFitImage,
+  IconFocus,
   IconNewItem,
   IconText,
   IconTextOff,
@@ -31,6 +32,7 @@ export function ToolbarTermGraph() {
   const {
     schema, //
     selected,
+    setFocus,
     navigateOss,
     isContentEditable,
     canDeleteSelected,
@@ -78,6 +80,13 @@ export function ToolbarTermGraph() {
     }, PARAMETER.minimalTimeout);
   }
 
+  function handleSetFocus() {
+    const target = schema.cstByID.get(selected[0]);
+    if (target) {
+      setFocus(target);
+    }
+  }
+
   function handleFoldDerived() {
     setFilter({
       ...filter,
@@ -98,6 +107,12 @@ export function ToolbarTermGraph() {
         icon={<IconFilter size='1.25rem' className='icon-primary' />}
         onClick={showParams}
       />
+      <MiniButton
+        title='Задать фокус конституенту'
+        icon={<IconFocus size='1.25rem' className='icon-primary' />}
+        disabled={selected.length !== 1}
+        onClick={handleSetFocus}
+      />
       <MiniButton
         title='Граф целиком'
         icon={<IconFitImage size='1.25rem' className='icon-primary' />}

rsconcept/frontend/src/features/rsform/pages/rsform-page/rstabs.tsx

@@ -43,6 +43,8 @@ export function RSTabs({ activeID, activeTab }: RSTabsProps) {
     if (activeTab === RSTabID.CST_EDIT) {
       if (activeID && schema.cstByID.has(activeID)) {
         setSelected([activeID]);
+      } else if (schema.items.length > 0) {
+        setSelected([schema.items[0].id]);
       } else {
         deselectAll();
       }

rsconcept/frontend/src/styling/constants.css

@@ -41,7 +41,7 @@
   --clr-warn-600:     oklch(060% 0.250 27deg);
   --clr-ok-600:       oklch(060% 0.250 143deg);
 
-  --clr-select-node:  oklch(080% 0.150 165deg);
+  --clr-select-node:  oklch(080% 0.250 180deg);
 
   /* Highlight accents */
   --acc-bg-red:       oklch(085% 0.150 27deg);
@@ -51,8 +51,8 @@
   --acc-bg-teal:      oklch(085% 0.200 210deg);
   --acc-bg-orange:    oklch(085% 0.150 62deg);
 
-  --acc-bg-green25:   oklch(097% 0.131 138deg);
+  --acc-bg-green25:   oklch(097% 0.150 138deg);
-  --acc-bg-green50:   oklch(090% 0.175 138deg);
+  --acc-bg-green50:   oklch(090% 0.150 138deg);
   --acc-bg-orange50:  oklch(090% 0.044 62deg);
   
   --acc-fg-red:       oklch(060% 0.220 27deg);
@@ -83,11 +83,11 @@
   --clr-sec-600:      oklch(065% 0.250 295deg);
   --clr-sec-800:      oklch(075% 0.250 295deg);  
 
-  --clr-warn-100:     oklch(025% 0.108 27deg);
+  --clr-warn-100:     oklch(025% 0.100 27deg);
   --clr-warn-600:     oklch(070% 0.200 27deg);
   --clr-ok-600:       oklch(070% 0.200 143deg);
 
-  --clr-select-node:  oklch(070% 0.147 165deg);
+  --clr-select-node:  oklch(070% 0.250 180deg);
 
   /* Highlight accents */
   --acc-bg-red:       oklch(050% 0.150 27deg);