Update icons and help

rsconcept/frontend/src/components/Icons.tsx

@@ -32,9 +32,10 @@ export { RiMenuUnfoldFill as IconMenuUnfold }     from 'react-icons/ri';
 export { LuMoon           as IconDarkTheme }      from 'react-icons/lu';
 export { LuSun            as IconLightTheme }     from 'react-icons/lu';
 export { LuFolderTree     as IconFolderTree }     from 'react-icons/lu';
-export { FaRegFolder      as IconFolder }         from 'react-icons/fa6';
+export { LuFolder         as IconFolder }         from 'react-icons/lu';
-export { FaRegFolderOpen  as IconFolderOpened }   from 'react-icons/fa6';
+export { LuFolderOpen     as IconFolderOpened }   from 'react-icons/lu';
-export { FaRegFolderClosed as IconFolderClosed }  from 'react-icons/fa6';
+export { LuFolderClosed   as IconFolderClosed }   from 'react-icons/lu';
+export { LuFolderDot      as IconFolderEmpty }    from 'react-icons/lu';
 export { LuLightbulb      as IconHelp }           from 'react-icons/lu';
 export { LuLightbulbOff   as IconHelpOff }        from 'react-icons/lu';
 export { RiPushpinFill    as IconPin }            from 'react-icons/ri';

rsconcept/frontend/src/pages/LibraryPage/LibraryFolders.tsx

@@ -4,12 +4,14 @@ import clsx from 'clsx';
 import { AnimatePresence, motion } from 'framer-motion';
 import { useCallback, useLayoutEffect, useMemo, useState } from 'react';
 
-import { IconFolder, IconFolderClosed, IconFolderOpened, IconFolderTree } from '@/components/Icons';
+import { IconFolder, IconFolderClosed, IconFolderEmpty, IconFolderOpened, IconFolderTree } from '@/components/Icons';
+import BadgeHelp from '@/components/info/BadgeHelp';
 import { CProps } from '@/components/props';
 import MiniButton from '@/components/ui/MiniButton';
 import { FolderNode, FolderTree } from '@/models/FolderTree';
+import { HelpTopic } from '@/models/miscellaneous';
 import { animateSideAppear, animateSideView } from '@/styling/animations';
-import { globals, prefixes } from '@/utils/constants';
+import { globals, PARAMETER, prefixes } from '@/utils/constants';
 import { describeFolderNode, labelFolderNode } from '@/utils/labels';
 
 interface LibraryTableProps {
@@ -72,7 +74,13 @@ function LibraryFolders({ folders, currentFolder, setFolder, toggleFolderMode }:
       animate={{ ...animateSideView.animate }}
       exit={{ ...animateSideView.exit }}
     >
-      <div className='h-[2.08rem] flex justify-end pr-1'>
+      <div className='h-[2.08rem] flex justify-between items-center pr-1'>
+        <BadgeHelp
+          topic={HelpTopic.UI_LIBRARY}
+          className={clsx(PARAMETER.TOOLTIP_WIDTH, 'text-sm')}
+          offset={5}
+          place='right-start'
+        />
         <MiniButton
           icon={<IconFolderTree size='1.25rem' className='icon-green' />}
           title='Режим: проводник'
@@ -114,7 +122,11 @@ function LibraryFolders({ folders, currentFolder, setFolder, toggleFolderMode }:
                     noHover
                     icon={
                       folded.includes(item) ? (
+                        item.filesInside ? (
                           <IconFolderClosed size='1rem' className='icon-primary' />
+                        ) : (
+                          <IconFolderEmpty size='1rem' className='icon-primary' />
+                        )
                       ) : (
                         <IconFolderOpened size='1rem' className='icon-green' />
                       )
@@ -123,7 +135,11 @@ function LibraryFolders({ folders, currentFolder, setFolder, toggleFolderMode }:
                   />
                 ) : (
                   <div>
-                    <IconFolder size='1rem' />
+                    {item.filesInside ? (
+                      <IconFolder size='1rem' className='clr-text-default' />
+                    ) : (
+                      <IconFolderEmpty size='1rem' className='clr-text-controls' />
+                    )}
                   </div>
                 )}
                 <div className='self-center'>{labelFolderNode(item)}</div>

rsconcept/frontend/src/pages/ManualsPage/items/HelpLibrary.tsx

@@ -1,4 +1,14 @@
-import { IconFolder, IconSearch, IconShow, IconSortAsc, IconSortDesc } from '@/components/Icons';
+import {
+  IconFolder,
+  IconFolderClosed,
+  IconFolderEmpty,
+  IconFolderOpened,
+  IconFolderTree,
+  IconSearch,
+  IconShow,
+  IconSortAsc,
+  IconSortDesc
+} from '@/components/Icons';
 
 function HelpLibrary() {
   return (
@@ -21,6 +31,25 @@ function HelpLibrary() {
       <li>
         <IconFolder size='1rem' className='inline-icon' /> фильтр по расположению
       </li>
+
+      <h2>Проводник</h2>
+      <li>клик по папке отображает справа файлы в ней</li>
+      <li>клик по иконке сворачивает/разворачивает вложенные</li>
+      <li>
+        <IconFolderTree size='1rem' className='inline-icon' /> скрыть / отобразить Проводник
+      </li>
+      <li>
+        <IconFolderEmpty size='1rem' className='inline-icon' /> папка без файлов
+      </li>
+      <li>
+        <IconFolder size='1rem' className='inline-icon' /> папка без вложенных
+      </li>
+      <li>
+        <IconFolderClosed size='1rem' className='inline-icon' /> папка с вложенными
+      </li>
+      <li>
+        <IconFolderOpened size='1rem' className='inline-icon icon-green' /> развернутая папка
+      </li>
     </div>
   );
 }