M: Minor UI fixes and refactoring

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 })}

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
       )}

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
       )}

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)) {
+    if (ref.current?.contains(event.relatedTarget as Node)) {
-      setIsOpen(false);
+      return;
     }
+    setIsOpen(false);
   }
 
   return {

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[];

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[];

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' />}

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'

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';
 

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';

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';
 

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'

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' />}

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';

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';

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';

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';

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}

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';

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'

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' />}

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';