From 7e0c59709dd1c2198f817b7acb4e4462d1f07574 Mon Sep 17 00:00:00 2001
From: Ivan <8611739+IRBorisov@users.noreply.github.com>
Date: Sun, 13 Apr 2025 22:28:28 +0300
Subject: [PATCH] M: Minor UI fixes and refactoring

---
 rsconcept/frontend/src/app/navigation/user-menu.tsx          | 2 +-
 rsconcept/frontend/src/components/control/button.tsx         | 2 +-
 .../frontend/src/components/dropdown/dropdown-button.tsx     | 2 +-
 rsconcept/frontend/src/components/dropdown/use-dropdown.ts   | 5 +++--
 .../frontend/src/components/{ui => input}/combo-box.tsx      | 5 ++---
 .../frontend/src/components/{ui => input}/combo-multi.tsx    | 5 ++---
 rsconcept/frontend/src/components/{ui => input}/select.tsx   | 0
 .../src/features/help/pages/manuals-page/topics-dropdown.tsx | 1 -
 .../frontend/src/features/library/components/menu-role.tsx   | 2 --
 .../src/features/library/components/select-library-item.tsx  | 2 +-
 .../src/features/library/components/select-version.tsx       | 2 +-
 .../src/features/oss/components/select-operation.tsx         | 2 +-
 .../src/features/oss/pages/oss-page/menu-edit-oss.tsx        | 1 -
 .../frontend/src/features/oss/pages/oss-page/menu-main.tsx   | 1 -
 .../src/features/rsform/components/select-constituenta.tsx   | 2 +-
 .../src/features/rsform/components/select-cst-type.tsx       | 2 +-
 .../src/features/rsform/components/select-multi-grammeme.tsx | 2 +-
 .../rsform/dialogs/dlg-cst-template/tab-template.tsx         | 2 +-
 .../rsform-page/editor-constituenta/form-constituenta.tsx    | 2 +-
 .../pages/rsform-page/editor-term-graph/select-coloring.tsx  | 2 +-
 .../features/rsform/pages/rsform-page/menu-edit-schema.tsx   | 2 --
 .../src/features/rsform/pages/rsform-page/menu-main.tsx      | 1 -
 .../frontend/src/features/users/components/select-user.tsx   | 2 +-
 23 files changed, 20 insertions(+), 29 deletions(-)
 rename rsconcept/frontend/src/components/{ui => input}/combo-box.tsx (96%)
 rename rsconcept/frontend/src/components/{ui => input}/combo-multi.tsx (97%)
 rename rsconcept/frontend/src/components/{ui => input}/select.tsx (100%)

diff --git a/rsconcept/frontend/src/app/navigation/user-menu.tsx b/rsconcept/frontend/src/app/navigation/user-menu.tsx
index 5ff80daa..49db1775 100644
--- a/rsconcept/frontend/src/app/navigation/user-menu.tsx
+++ b/rsconcept/frontend/src/app/navigation/user-menu.tsx
@@ -13,7 +13,7 @@ export function UserMenu() {
   const router = useConceptNavigation();
   const menu = useDropdown();
   return (
-    <div ref={menu.ref} className='flex items-center justify-start relative h-full pr-2'>
+    <div ref={menu.ref} onBlur={menu.handleBlur} className='flex items-center justify-start relative h-full pr-2'>
       <Suspense fallback={<Loader circular scale={1.5} />}>
         <UserButton
           onLogin={() => router.push({ path: urls.login, force: true })}
diff --git a/rsconcept/frontend/src/components/control/button.tsx b/rsconcept/frontend/src/components/control/button.tsx
index 7a79e8a9..c130874b 100644
--- a/rsconcept/frontend/src/components/control/button.tsx
+++ b/rsconcept/frontend/src/components/control/button.tsx
@@ -43,7 +43,7 @@ export function Button({
         'bg-secondary text-secondary-foreground cc-hover cc-animate-color',
         dense ? 'px-1' : 'px-3 py-1',
         loading ? 'cursor-progress' : 'cursor-pointer',
-        noOutline ? 'outline-hidden' : 'focus-outline',
+        noOutline ? 'outline-hidden focus-visible:bg-selected' : 'focus-outline',
         !noBorder && 'border rounded-sm',
         className
       )}
diff --git a/rsconcept/frontend/src/components/dropdown/dropdown-button.tsx b/rsconcept/frontend/src/components/dropdown/dropdown-button.tsx
index 244a7b89..54ebc53b 100644
--- a/rsconcept/frontend/src/components/dropdown/dropdown-button.tsx
+++ b/rsconcept/frontend/src/components/dropdown/dropdown-button.tsx
@@ -37,7 +37,7 @@ export function DropdownButton({
         'px-3 py-1 inline-flex items-center gap-2',
         'text-left text-sm text-ellipsis whitespace-nowrap',
         'disabled:cc-controls disabled:opacity-75',
-        'cc-animate-background',
+        'focus-outline cc-animate-background',
         !!onClick ? 'cc-hover cursor-pointer disabled:cursor-auto' : 'bg-secondary text-secondary-foreground',
         className
       )}
diff --git a/rsconcept/frontend/src/components/dropdown/use-dropdown.ts b/rsconcept/frontend/src/components/dropdown/use-dropdown.ts
index 0364a66c..4a2d8d81 100644
--- a/rsconcept/frontend/src/components/dropdown/use-dropdown.ts
+++ b/rsconcept/frontend/src/components/dropdown/use-dropdown.ts
@@ -7,9 +7,10 @@ export function useDropdown() {
   const ref = useRef<HTMLDivElement>(null);
 
   function handleBlur(event: React.FocusEvent<HTMLDivElement>) {
-    if (!ref.current?.contains(event.relatedTarget as Node)) {
-      setIsOpen(false);
+    if (ref.current?.contains(event.relatedTarget as Node)) {
+      return;
     }
+    setIsOpen(false);
   }
 
   return {
diff --git a/rsconcept/frontend/src/components/ui/combo-box.tsx b/rsconcept/frontend/src/components/input/combo-box.tsx
similarity index 96%
rename from rsconcept/frontend/src/components/ui/combo-box.tsx
rename to rsconcept/frontend/src/components/input/combo-box.tsx
index 45b21b46..d764ddfc 100644
--- a/rsconcept/frontend/src/components/ui/combo-box.tsx
+++ b/rsconcept/frontend/src/components/input/combo-box.tsx
@@ -5,11 +5,10 @@ import { ChevronDownIcon } from 'lucide-react';
 
 import { IconRemove } from '../icons';
 import { type Styling } from '../props';
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '../ui/command';
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
 import { cn } from '../utils';
 
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from './command';
-import { Popover, PopoverContent, PopoverTrigger } from './popover';
-
 interface ComboBoxProps<Option> extends Styling {
   id?: string;
   items?: Option[];
diff --git a/rsconcept/frontend/src/components/ui/combo-multi.tsx b/rsconcept/frontend/src/components/input/combo-multi.tsx
similarity index 97%
rename from rsconcept/frontend/src/components/ui/combo-multi.tsx
rename to rsconcept/frontend/src/components/input/combo-multi.tsx
index 29d8ad3f..2883c0b8 100644
--- a/rsconcept/frontend/src/components/ui/combo-multi.tsx
+++ b/rsconcept/frontend/src/components/input/combo-multi.tsx
@@ -5,11 +5,10 @@ import { ChevronDownIcon } from 'lucide-react';
 
 import { IconRemove } from '../icons';
 import { type Styling } from '../props';
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '../ui/command';
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
 import { cn } from '../utils';
 
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from './command';
-import { Popover, PopoverContent, PopoverTrigger } from './popover';
-
 interface ComboMultiProps<Option> extends Styling {
   id?: string;
   items?: Option[];
diff --git a/rsconcept/frontend/src/components/ui/select.tsx b/rsconcept/frontend/src/components/input/select.tsx
similarity index 100%
rename from rsconcept/frontend/src/components/ui/select.tsx
rename to rsconcept/frontend/src/components/input/select.tsx
diff --git a/rsconcept/frontend/src/features/help/pages/manuals-page/topics-dropdown.tsx b/rsconcept/frontend/src/features/help/pages/manuals-page/topics-dropdown.tsx
index 334394b5..c21a5ec2 100644
--- a/rsconcept/frontend/src/features/help/pages/manuals-page/topics-dropdown.tsx
+++ b/rsconcept/frontend/src/features/help/pages/manuals-page/topics-dropdown.tsx
@@ -42,7 +42,6 @@ export function TopicsDropdown({ activeTopic, onChangeTopic }: TopicsDropdownPro
     >
       <Button
         noOutline
-        tabIndex={-1}
         title='Список тем'
         hideTitle={menu.isOpen}
         icon={!menu.isOpen ? <IconMenuUnfold size='1.25rem' /> : <IconMenuFold size='1.25rem' />}
diff --git a/rsconcept/frontend/src/features/library/components/menu-role.tsx b/rsconcept/frontend/src/features/library/components/menu-role.tsx
index 0ceb3d3d..df6d8c48 100644
--- a/rsconcept/frontend/src/features/library/components/menu-role.tsx
+++ b/rsconcept/frontend/src/features/library/components/menu-role.tsx
@@ -33,7 +33,6 @@ export function MenuRole({ isOwned, isEditor }: MenuRoleProps) {
         dense
         noBorder
         noOutline
-        tabIndex={-1}
         titleHtml='<b>Анонимный режим</b><br />Войти в Портал'
         hideTitle={accessMenu.isOpen}
         className='h-full pr-2'
@@ -49,7 +48,6 @@ export function MenuRole({ isOwned, isEditor }: MenuRoleProps) {
         dense
         noBorder
         noOutline
-        tabIndex={-1}
         title={`Режим ${labelUserRole(role)}`}
         hideTitle={accessMenu.isOpen}
         className='h-full pr-2'
diff --git a/rsconcept/frontend/src/features/library/components/select-library-item.tsx b/rsconcept/frontend/src/features/library/components/select-library-item.tsx
index 3eab73e0..e0d6bab6 100644
--- a/rsconcept/frontend/src/features/library/components/select-library-item.tsx
+++ b/rsconcept/frontend/src/features/library/components/select-library-item.tsx
@@ -1,5 +1,5 @@
+import { ComboBox } from '@/components/input/combo-box';
 import { type Styling } from '@/components/props';
-import { ComboBox } from '@/components/ui/combo-box';
 
 import { type ILibraryItem } from '../backend/types';
 
diff --git a/rsconcept/frontend/src/features/library/components/select-version.tsx b/rsconcept/frontend/src/features/library/components/select-version.tsx
index 22b31df4..7370ce89 100644
--- a/rsconcept/frontend/src/features/library/components/select-version.tsx
+++ b/rsconcept/frontend/src/features/library/components/select-version.tsx
@@ -1,7 +1,7 @@
 'use client';
 
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/input/select';
 import { type Styling } from '@/components/props';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { cn } from '@/components/utils';
 
 import { labelVersion } from '../../rsform/labels';
diff --git a/rsconcept/frontend/src/features/oss/components/select-operation.tsx b/rsconcept/frontend/src/features/oss/components/select-operation.tsx
index 28289c08..963529be 100644
--- a/rsconcept/frontend/src/features/oss/components/select-operation.tsx
+++ b/rsconcept/frontend/src/features/oss/components/select-operation.tsx
@@ -1,5 +1,5 @@
+import { ComboBox } from '@/components/input/combo-box';
 import { type Styling } from '@/components/props';
-import { ComboBox } from '@/components/ui/combo-box';
 
 import { type IOperation } from '../models/oss';
 
diff --git a/rsconcept/frontend/src/features/oss/pages/oss-page/menu-edit-oss.tsx b/rsconcept/frontend/src/features/oss/pages/oss-page/menu-edit-oss.tsx
index 49d19c3c..6ec908ff 100644
--- a/rsconcept/frontend/src/features/oss/pages/oss-page/menu-edit-oss.tsx
+++ b/rsconcept/frontend/src/features/oss/pages/oss-page/menu-edit-oss.tsx
@@ -35,7 +35,6 @@ export function MenuEditOss() {
         dense
         noBorder
         noOutline
-        tabIndex={-1}
         title='Редактирование'
         hideTitle={menu.isOpen}
         className='h-full px-2'
diff --git a/rsconcept/frontend/src/features/oss/pages/oss-page/menu-main.tsx b/rsconcept/frontend/src/features/oss/pages/oss-page/menu-main.tsx
index 67d4652d..4b363749 100644
--- a/rsconcept/frontend/src/features/oss/pages/oss-page/menu-main.tsx
+++ b/rsconcept/frontend/src/features/oss/pages/oss-page/menu-main.tsx
@@ -51,7 +51,6 @@ export function MenuMain() {
         dense
         noBorder
         noOutline
-        tabIndex={-1}
         title='Меню'
         hideTitle={menu.isOpen}
         icon={<IconMenu size='1.25rem' className='cc-controls' />}
diff --git a/rsconcept/frontend/src/features/rsform/components/select-constituenta.tsx b/rsconcept/frontend/src/features/rsform/components/select-constituenta.tsx
index ed47e7d3..69f0404a 100644
--- a/rsconcept/frontend/src/features/rsform/components/select-constituenta.tsx
+++ b/rsconcept/frontend/src/features/rsform/components/select-constituenta.tsx
@@ -1,4 +1,4 @@
-import { ComboBox } from '@/components/ui/combo-box';
+import { ComboBox } from '@/components/input/combo-box';
 
 import { describeConstituenta, describeConstituentaTerm } from '../labels';
 import { type IConstituenta } from '../models/rsform';
diff --git a/rsconcept/frontend/src/features/rsform/components/select-cst-type.tsx b/rsconcept/frontend/src/features/rsform/components/select-cst-type.tsx
index b8df1164..70924e0b 100644
--- a/rsconcept/frontend/src/features/rsform/components/select-cst-type.tsx
+++ b/rsconcept/frontend/src/features/rsform/components/select-cst-type.tsx
@@ -1,5 +1,5 @@
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/input/select';
 import { type Styling } from '@/components/props';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { cn } from '@/components/utils';
 
 import { CstType } from '../backend/types';
diff --git a/rsconcept/frontend/src/features/rsform/components/select-multi-grammeme.tsx b/rsconcept/frontend/src/features/rsform/components/select-multi-grammeme.tsx
index 8cd76079..edc5c31c 100644
--- a/rsconcept/frontend/src/features/rsform/components/select-multi-grammeme.tsx
+++ b/rsconcept/frontend/src/features/rsform/components/select-multi-grammeme.tsx
@@ -1,5 +1,5 @@
+import { ComboMulti } from '@/components/input/combo-multi';
 import { type Styling } from '@/components/props';
-import { ComboMulti } from '@/components/ui/combo-multi';
 
 import { labelGrammeme } from '../labels';
 import { type Grammeme, supportedGrammemes } from '../models/language';
diff --git a/rsconcept/frontend/src/features/rsform/dialogs/dlg-cst-template/tab-template.tsx b/rsconcept/frontend/src/features/rsform/dialogs/dlg-cst-template/tab-template.tsx
index b47e7ab9..1e8efa95 100644
--- a/rsconcept/frontend/src/features/rsform/dialogs/dlg-cst-template/tab-template.tsx
+++ b/rsconcept/frontend/src/features/rsform/dialogs/dlg-cst-template/tab-template.tsx
@@ -3,7 +3,7 @@
 import { useTemplatesSuspense } from '@/features/library/backend/use-templates';
 
 import { TextArea } from '@/components/input';
-import { ComboBox } from '@/components/ui/combo-box';
+import { ComboBox } from '@/components/input/combo-box';
 
 import { useRSForm } from '../../backend/use-rsform';
 import { PickConstituenta } from '../../components/pick-constituenta';
diff --git a/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-constituenta/form-constituenta.tsx b/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-constituenta/form-constituenta.tsx
index 9b5cfd51..43ca6afe 100644
--- a/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-constituenta/form-constituenta.tsx
+++ b/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-constituenta/form-constituenta.tsx
@@ -189,8 +189,8 @@ export function FormConstituenta({ disabled, id, toggleReset, schema, activeCst,
         dense
         noResize
         noBorder
-        transparent
         noOutline
+        transparent
         readOnly
         label='Типизация'
         value={typification}
diff --git a/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/select-coloring.tsx b/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/select-coloring.tsx
index 47afcd94..ce332c95 100644
--- a/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/select-coloring.tsx
+++ b/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/select-coloring.tsx
@@ -1,7 +1,7 @@
 import { HelpTopic } from '@/features/help';
 import { BadgeHelp } from '@/features/help/components';
 
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/input/select';
 
 import { mapLabelColoring } from '../../../labels';
 import { useTermGraphStore } from '../../../stores/term-graph';
diff --git a/rsconcept/frontend/src/features/rsform/pages/rsform-page/menu-edit-schema.tsx b/rsconcept/frontend/src/features/rsform/pages/rsform-page/menu-edit-schema.tsx
index 1380e2fd..85c564ca 100644
--- a/rsconcept/frontend/src/features/rsform/pages/rsform-page/menu-edit-schema.tsx
+++ b/rsconcept/frontend/src/features/rsform/pages/rsform-page/menu-edit-schema.tsx
@@ -107,7 +107,6 @@ export function MenuEditSchema() {
         dense
         noBorder
         noOutline
-        tabIndex={-1}
         titleHtml='<b>Архив</b>: Редактирование запрещено<br />Перейти к актуальной версии'
         hideTitle={menu.isOpen}
         className='h-full px-2'
@@ -123,7 +122,6 @@ export function MenuEditSchema() {
         dense
         noBorder
         noOutline
-        tabIndex={-1}
         title='Редактирование'
         hideTitle={menu.isOpen}
         className='h-full px-2'
diff --git a/rsconcept/frontend/src/features/rsform/pages/rsform-page/menu-main.tsx b/rsconcept/frontend/src/features/rsform/pages/rsform-page/menu-main.tsx
index 70d67a88..73506e39 100644
--- a/rsconcept/frontend/src/features/rsform/pages/rsform-page/menu-main.tsx
+++ b/rsconcept/frontend/src/features/rsform/pages/rsform-page/menu-main.tsx
@@ -118,7 +118,6 @@ export function MenuMain() {
         dense
         noBorder
         noOutline
-        tabIndex={-1}
         title='Меню'
         hideTitle={menu.isOpen}
         icon={<IconMenu size='1.25rem' className='cc-controls' />}
diff --git a/rsconcept/frontend/src/features/users/components/select-user.tsx b/rsconcept/frontend/src/features/users/components/select-user.tsx
index 2d4f0f02..913430aa 100644
--- a/rsconcept/frontend/src/features/users/components/select-user.tsx
+++ b/rsconcept/frontend/src/features/users/components/select-user.tsx
@@ -1,7 +1,7 @@
 'use client';
 
+import { ComboBox } from '@/components/input/combo-box';
 import { type Styling } from '@/components/props';
-import { ComboBox } from '@/components/ui/combo-box';
 
 import { type IUserInfo } from '../backend/types';
 import { useLabelUser } from '../backend/use-label-user';