F: Rework location picker

rsconcept/frontend/src/features/library/components/pick-location/pick-location.tsx

@@ -5,7 +5,7 @@ import clsx from 'clsx';
 
 import { useAuthSuspense } from '@/features/auth';
 
-import { Label, TextArea } from '@/components/input';
+import { TextArea } from '@/components/input';
 import { type Styling } from '@/components/props';
 
 import { LocationHead } from '../../models/library';
@@ -35,18 +35,16 @@ export function PickLocation({
   const { user } = useAuthSuspense();
 
   return (
-    <div className={clsx('flex', className)} {...restProps}>
+    <div className={clsx('flex relative', className)} {...restProps}>
-      <div className='flex flex-col gap-2 min-w-28'>
+      <SelectLocationHead
-        <Label className='select-none' text='Корень' />
+        className='absolute right-0 top-0'
-        <SelectLocationHead
+        value={value.substring(0, 2) as LocationHead}
-          value={value.substring(0, 2) as LocationHead}
+        onChange={newValue => onChange(combineLocation(newValue, value.substring(3)))}
-          onChange={newValue => onChange(combineLocation(newValue, value.substring(3)))}
+        excluded={!user.is_staff ? [LocationHead.LIBRARY] : []}
-          excluded={!user.is_staff ? [LocationHead.LIBRARY] : []}
+      />
-        />
-      </div>
 
       <SelectLocationContext
-        className='-mt-1 -ml-8'
+        className='absolute left-28 -top-1'
         dropdownHeight={dropdownHeight} //
         value={value}
         onChange={onChange}
@@ -54,7 +52,7 @@ export function PickLocation({
 
       <TextArea
         id='dlg_location'
-        label='Путь'
+        label='Расположение'
         rows={rows}
         value={value.substring(3)}
         onChange={event => onChange(combineLocation(value.substring(0, 2), event.target.value))}

rsconcept/frontend/src/features/library/components/pick-location/select-location-context.tsx

@@ -38,13 +38,13 @@ export function SelectLocationContext({
     <div
       ref={menu.ref} //
       onBlur={menu.handleBlur}
-      className={clsx('relative text-right self-start', className)}
+      className={clsx('text-right self-start', className)}
       {...restProps}
     >
       <MiniButton
         title={title}
         hideTitle={menu.isOpen}
-        icon={<IconFolderTree size='1.25rem' className='icon-green' />}
+        icon={<IconFolderTree size='1.25rem' className='icon-primary' />}
         onClick={() => menu.toggle()}
       />
       <Dropdown isOpen={menu.isOpen} className={clsx('w-80 z-tooltip', dropdownHeight)}>

rsconcept/frontend/src/features/library/components/select-location-head.tsx

@@ -48,7 +48,7 @@ export function SelectLocationHead({
         onClick={menu.toggle}
       />
 
-      <Dropdown isOpen={menu.isOpen} margin='mt-2'>
+      <Dropdown isOpen={menu.isOpen} stretchLeft margin='mt-2'>
         {Object.values(LocationHead)
           .filter(head => !excluded.includes(head))
           .map((head, index) => {

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

@@ -171,13 +171,13 @@ export function ToolbarSearch({ className, total, filtered }: ToolbarSearchProps
               <DropdownButton
                 text='проводник...'
                 title='Переключение в режим Проводник'
-                icon={<IconFolderTree size='1rem' className='cc-controls' />}
+                icon={<IconFolderTree size='1rem' className='icon-primary' />}
                 onClick={handleToggleFolder}
               />
               <DropdownButton
                 text='отображать все'
                 title='Очистить фильтр по расположению'
-                icon={<IconFolder size='1rem' className='cc-controls' />}
+                icon={<IconFolder size='1rem' className='icon-primary' />}
                 onClick={() => handleChange(null)}
               />
               {Object.values(LocationHead).map((head, index) => {

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

@@ -42,7 +42,7 @@ export function useLibraryColumns() {
                 noHover
                 className='pl-2 max-h-4 -translate-y-0.5'
                 onClick={handleToggleFolder}
-                icon={<IconFolderTree size='1.25rem' className='text-muted-foreground hover:text-constructive' />}
+                icon={<IconFolderTree size='1.25rem' className='text-muted-foreground hover:text-primary' />}
               />
             ),
             size: 50,

rsconcept/frontend/src/features/library/pages/library-page/view-side-location.tsx

@@ -88,7 +88,7 @@ export function ViewSideLocation({ isVisible, onRenameLocation }: ViewSideLocati
           <MiniButton
             noHover
             title='Переключение в режим Таблица'
-            icon={<IconFolderTree size='1.25rem' className='text-muted-foreground hover:text-constructive' />}
+            icon={<IconFolderTree size='1.25rem' className='text-muted-foreground hover:text-primary' />}
             onClick={toggleFolderMode}
           />
         </div>