Refactoring Icons

rsconcept/frontend/src/app/Footer.tsx

@@ -15,7 +15,7 @@ function Footer() {
       className={clsx(
         'z-navigation',
         'mx-auto',
-        'sm:px-4 sm:py-2 flex flex-col items-center gap-1',
+        'px-3 py-2 flex flex-col items-center gap-1',
         'text-xs sm:text-sm select-none whitespace-nowrap'
       )}
     >

rsconcept/frontend/src/components/DomainIcons.tsx

@@ -1,5 +1,6 @@
 import { AccessPolicy, LibraryItemType, LocationHead } from '@/models/library';
 import { CstMatchMode, DependencyMode } from '@/models/miscellaneous';
+import { ExpressionStatus } from '@/models/rsform';
 
 import {
   IconAlias,
@@ -21,6 +22,10 @@ import {
   IconRSForm,
   IconSettings,
   IconShow,
+  IconStatusError,
+  IconStatusIncalculable,
+  IconStatusOK,
+  IconStatusUnknown,
   IconTemplates,
   IconTerm,
   IconText,
@@ -80,34 +85,51 @@ export function LocationIcon({ value, size = '1.25rem', className }: DomIconProp
   }
 }
 
-export function DependencyIcon(mode: DependencyMode, size: string, color?: string) {
+export function DependencyIcon({ value, size = '1.25rem', className }: DomIconProps<DependencyMode>) {
-  switch (mode) {
+  switch (value) {
     case DependencyMode.ALL:
-      return <IconSettings size={size} className={color} />;
+      return <IconSettings size={size} className={className} />;
     case DependencyMode.EXPRESSION:
-      return <IconText size={size} className={color} />;
+      return <IconText size={size} className={className ?? 'clr-text-primary'} />;
     case DependencyMode.OUTPUTS:
-      return <IconGraphOutputs size={size} className={color} />;
+      return <IconGraphOutputs size={size} className={className ?? 'clr-text-primary'} />;
     case DependencyMode.INPUTS:
-      return <IconGraphInputs size={size} className={color} />;
+      return <IconGraphInputs size={size} className={className ?? 'clr-text-primary'} />;
     case DependencyMode.EXPAND_OUTPUTS:
-      return <IconGraphExpand size={size} className={color} />;
+      return <IconGraphExpand size={size} className={className ?? 'clr-text-primary'} />;
     case DependencyMode.EXPAND_INPUTS:
-      return <IconGraphCollapse size={size} className={color} />;
+      return <IconGraphCollapse size={size} className={className ?? 'clr-text-primary'} />;
   }
 }
 
-export function MatchModeIcon(mode: CstMatchMode, size: string, color?: string) {
+export function MatchModeIcon({ value, size = '1.25rem', className }: DomIconProps<CstMatchMode>) {
-  switch (mode) {
+  switch (value) {
     case CstMatchMode.ALL:
-      return <IconFilter size={size} className={color} />;
+      return <IconFilter size={size} className={className} />;
     case CstMatchMode.TEXT:
-      return <IconText size={size} className={color} />;
+      return <IconText size={size} className={className ?? 'clr-text-primary'} />;
     case CstMatchMode.EXPR:
-      return <IconFormula size={size} className={color} />;
+      return <IconFormula size={size} className={className ?? 'clr-text-primary'} />;
     case CstMatchMode.TERM:
-      return <IconTerm size={size} className={color} />;
+      return <IconTerm size={size} className={className ?? 'clr-text-primary'} />;
     case CstMatchMode.NAME:
-      return <IconAlias size={size} className={color} />;
+      return <IconAlias size={size} className={className ?? 'clr-text-primary'} />;
+  }
+}
+
+export function StatusIcon({ value, size = '1.25rem', className }: DomIconProps<ExpressionStatus>) {
+  switch (value) {
+    case ExpressionStatus.VERIFIED:
+    case ExpressionStatus.PROPERTY:
+      return <IconStatusOK size={size} className={className} />;
+
+    case ExpressionStatus.UNKNOWN:
+      return <IconStatusUnknown size={size} className={className} />;
+    case ExpressionStatus.INCALCULABLE:
+      return <IconStatusIncalculable size={size} className={className} />;
+
+    case ExpressionStatus.INCORRECT:
+    case ExpressionStatus.UNDEFINED:
+      return <IconStatusError size={size} className={className} />;
   }
 }

rsconcept/frontend/src/components/select/SelectGraphFilter.tsx

@@ -39,7 +39,7 @@ function SelectGraphFilter({ value, dense, onChange }: SelectGraphFilterProps) {
         title='Настройка фильтрации по графу термов'
         hideTitle={menu.isOpen}
         className='h-full pr-2'
-        icon={DependencyIcon(value, '1rem', value !== DependencyMode.ALL ? 'icon-primary' : '')}
+        icon={<DependencyIcon value={value} size='1rem' />}
         text={dense || size.isSmall ? undefined : labelCstSource(value)}
         onClick={menu.toggle}
       />
@@ -55,7 +55,7 @@ function SelectGraphFilter({ value, dense, onChange }: SelectGraphFilterProps) {
                 onClick={() => handleChange(source)}
               >
                 <div className='inline-flex items-center gap-1'>
-                  {DependencyIcon(source, '1rem')}
+                  {<DependencyIcon value={source} size='1rem' />}
                   {!dense ? (
                     <span>
                       <b>{labelCstSource(source)}:</b> {describeCstSource(source)}

rsconcept/frontend/src/components/select/SelectMatchMode.tsx

@@ -38,7 +38,7 @@ function SelectMatchMode({ value, dense, onChange }: SelectMatchModeProps) {
         title='Настройка фильтрации по проверяемым атрибутам'
         hideTitle={menu.isOpen}
         className='h-full pr-2'
-        icon={MatchModeIcon(value, '1rem', value !== CstMatchMode.ALL ? 'icon-primary' : '')}
+        icon={<MatchModeIcon value={value} size='1rem' />}
         text={dense || size.isSmall ? undefined : labelCstMatchMode(value)}
         onClick={menu.toggle}
       />
@@ -54,7 +54,7 @@ function SelectMatchMode({ value, dense, onChange }: SelectMatchModeProps) {
                 onClick={() => handleChange(matchMode)}
               >
                 <div className='inline-flex items-center gap-1'>
-                  {MatchModeIcon(matchMode, '1rem')}
+                  {<MatchModeIcon value={matchMode} size='1rem' />}
                   {!dense ? (
                     <span>
                       <b>{labelCstMatchMode(matchMode)}:</b> {describeCstMatchMode(matchMode)}

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

@@ -79,7 +79,7 @@ function SearchPanel({
         'clr-input'
       )}
     >
-      <div className={clsx('px-3 self-center', 'min-w-[5.5rem]', 'select-none', 'whitespace-nowrap')}>
+      <div className={clsx('px-3 pt-1 self-center', 'min-w-[5.5rem]', 'select-none', 'whitespace-nowrap')}>
         {filtered} из {total}
       </div>
 

rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/StatusBar.tsx

@@ -4,6 +4,7 @@ import clsx from 'clsx';
 import { AnimatePresence } from 'framer-motion';
 import { useMemo } from 'react';
 
+import { StatusIcon } from '@/components/DomainIcons';
 import Loader from '@/components/ui/Loader';
 import { useConceptOptions } from '@/context/OptionsContext';
 import { ExpressionStatus } from '@/models/rsform';
@@ -14,8 +15,6 @@ import { colorBgCstStatus } from '@/styling/color';
 import { globals } from '@/utils/constants';
 import { labelExpressionStatus, prepareTooltip } from '@/utils/labels';
 
-import StatusIcon from './StatusIcon';
-
 interface StatusBarProps {
   processing?: boolean;
   isModified?: boolean;
@@ -58,7 +57,7 @@ function StatusBar({ isModified, processing, constituenta, parseData, onAnalyze
         {processing ? <Loader key='status-loader' size={3} /> : null}
         {!processing ? (
           <>
-            <StatusIcon key='status-icon' status={status} />
+            <StatusIcon key='status-icon' size='1rem' value={status} />
             <span key='status-text' className='pb-[0.125rem] font-controls pr-2'>
               {labelExpressionStatus(status)}
             </span>

rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/StatusIcon.tsx

@@ -1,22 +0,0 @@
-'use client';
-
-import { IconStatusError, IconStatusIncalculable, IconStatusOK, IconStatusUnknown } from '@/components/Icons';
-import { ExpressionStatus } from '@/models/rsform';
-
-interface StatusIconProps {
-  status: ExpressionStatus;
-}
-
-function StatusIcon({ status }: StatusIconProps) {
-  if (status === ExpressionStatus.VERIFIED || status === ExpressionStatus.PROPERTY) {
-    return <IconStatusOK size='1rem' />;
-  } else if (status === ExpressionStatus.UNKNOWN) {
-    return <IconStatusUnknown size='1rem' />;
-  } else if (status === ExpressionStatus.INCALCULABLE) {
-    return <IconStatusIncalculable size='1rem' />;
-  } else {
-    return <IconStatusError size='1rem' />;
-  }
-}
-
-export default StatusIcon;

rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/FocusToolbar.tsx

@@ -36,7 +36,7 @@ function FocusToolbar({
   }, [reset, controller]);
 
   return (
-    <div className='cc-icons items-center'>
+    <div className='items-center cc-icons'>
       <div className='w-[7.8rem] text-right select-none' style={{ color: colors.fgPurple }}>
         Фокус
         <b className='px-1'> {center.alias} </b>
@@ -48,24 +48,12 @@ function FocusToolbar({
       />
       <MiniButton
         title={showInputs ? 'Скрыть поставщиков' : 'Отобразить поставщиков'}
-        icon={
+        icon={<IconGraphInputs size='1.25rem' className={showInputs ? 'icon-green' : 'icon-primary'} />}
-          showInputs ? (
-            <IconGraphInputs size='1.25rem' className='icon-green' />
-          ) : (
-            <IconGraphInputs size='1.25rem' className='icon-primary' />
-          )
-        }
         onClick={toggleShowInputs}
       />
       <MiniButton
         title={showOutputs ? 'Скрыть потребителей' : 'Отобразить потребителей'}
-        icon={
+        icon={<IconGraphOutputs size='1.25rem' className={showOutputs ? 'icon-green' : 'icon-primary'} />}
-          showOutputs ? (
-            <IconGraphOutputs size='1.25rem' className='icon-green' />
-          ) : (
-            <IconGraphOutputs size='1.25rem' className='icon-primary' />
-          )
-        }
         onClick={toggleShowOutputs}
       />
     </div>

rsconcept/frontend/src/pages/UserProfilePage/UserTabs.tsx

@@ -3,7 +3,7 @@
 import { AnimatePresence } from 'framer-motion';
 import { useMemo, useState } from 'react';
 
-import { IconFollow, IconFollowOff } from '@/components/Icons';
+import { SubscribeIcon } from '@/components/DomainIcons';
 import MiniButton from '@/components/ui/MiniButton';
 import Overlay from '@/components/ui/Overlay';
 import AnimateFade from '@/components/wrap/AnimateFade';
@@ -39,13 +39,7 @@ function UserTabs() {
           <Overlay position='top-0 right-0'>
             <MiniButton
               title='Отслеживаемые схемы'
-              icon={
+              icon={<SubscribeIcon value={showSubs} className='icon-primary' />}
-                showSubs ? (
-                  <IconFollow size='1.25rem' className='icon-primary' />
-                ) : (
-                  <IconFollowOff size='1.25rem' className='icon-primary' />
-                )
-              }
               onClick={() => setShowSubs(prev => !prev)}
             />
           </Overlay>