M: Minor UI fixes

rsconcept/frontend/src/components/control/mini-button.tsx

@@ -38,8 +38,8 @@ export function MiniButton({
       tabIndex={tabIndex ?? -1}
       className={cn(
         'rounded-lg',
-        'cc-controls cc-animate-background',
+        'text-muted-foreground cc-animate-color',
-        'cursor-pointer disabled:cursor-auto',
+        'cursor-pointer disabled:cursor-auto disabled:opacity-75',
         (!tabIndex || tabIndex === -1) && 'outline-hidden',
         !noHover && 'cc-hover-pulse',
         !noPadding && 'px-1 py-1',

rsconcept/frontend/src/components/control/selector-button.tsx

@@ -30,9 +30,9 @@ export function SelectorButton({
       className={cn(
         'px-1 flex flex-start items-center gap-1',
         'text-sm font-controls select-none',
-        'text-btn cc-controls',
+        'disabled:cursor-auto cursor-pointer outline-hidden',
-        'disabled:cursor-auto cursor-pointer',
+        'text-muted-foreground cc-hover-text cc-animate-color disabled:opacity-75',
-        'cc-hover-text cc-animate-color',
+        !text && 'cc-hover-pulse',
         className
       )}
       data-tooltip-id={!!title || !!titleHtml ? globalIDs.tooltip : undefined}

rsconcept/frontend/src/components/data-table/pagination-tools.tsx

@@ -21,9 +21,9 @@ export function PaginationTools<TData>({
   paginationOptions
 }: PaginationToolsProps<TData>) {
   const buttonClass =
-    'cc-hover-text cc-controls cc-animate-color focus-outline rounded-md not-[:disabled]:cursor-pointer';
+    'cc-hover-text cc-animate-color focus-outline rounded-md disabled:opacity-75 not-[:disabled]:cursor-pointer';
   return (
-    <div className='flex justify-end items-center my-2 text-sm cc-controls select-none'>
+    <div className='flex justify-end items-center my-2 text-muted-foreground text-sm select-none'>
       <span className='mr-3'>
         {`${table.getState().pagination.pageIndex * table.getState().pagination.pageSize + 1}
       -

rsconcept/frontend/src/components/dropdown/dropdown-button.tsx

@@ -36,7 +36,7 @@ export function DropdownButton({
       className={cn(
         'px-3 py-1 inline-flex items-center gap-2',
         'text-left text-sm text-ellipsis whitespace-nowrap',
-        'disabled:cc-controls disabled:opacity-75',
+        'disabled:text-muted-foreground disabled:opacity-75',
         'focus-outline cc-animate-background',
         !!onClick ? 'cc-hover-bg cursor-pointer disabled:cursor-auto' : 'bg-secondary text-secondary-foreground',
         className

rsconcept/frontend/src/components/view/indicator.tsx

@@ -1,8 +1,8 @@
-import clsx from 'clsx';
-
 import { type Styling, type Titled } from '@/components/props';
 import { globalIDs } from '@/utils/constants';
 
+import { cn } from '../utils';
+
 interface IndicatorProps extends Titled, Styling {
   /** Icon to display. */
   icon: React.ReactNode;
@@ -17,8 +17,8 @@ interface IndicatorProps extends Titled, Styling {
 export function Indicator({ icon, title, titleHtml, hideTitle, noPadding, className, ...restProps }: IndicatorProps) {
   return (
     <div
-      className={clsx(
+      className={cn(
-        'cc-controls', //
+        'text-muted-foreground', //
         'outline-hidden',
         !noPadding && 'px-1 py-1',
         className

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

@@ -92,7 +92,7 @@ export function SelectLocation({ value, dense, prefix, onClick, className, style
                 {item.filesInside ? (
                   <IconFolder size='1rem' className='text-foreground' />
                 ) : (
-                  <IconFolderEmpty size='1rem' className='cc-controls' />
+                  <IconFolderEmpty size='1rem' className='text-foreground-muted' />
                 )}
               </div>
             )}

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

@@ -156,15 +156,8 @@ export function ToolbarSearch({ className, total, filtered }: ToolbarSearchProps
                 (head ? describeLocationHead(head) : 'Выберите каталог') + '<br/><kbd>Ctrl + клик</kbd> - Проводник'
               }
               hideTitle={headMenu.isOpen}
-              icon={
+              icon={head ? <IconLocationHead value={head} size='1.25rem' /> : <IconFolderSearch size='1.25rem' />}
-                head ? (
-                  <IconLocationHead value={head} size='1.25rem' />
-                ) : (
-                  <IconFolderSearch size='1.25rem' className='cc-controls' />
-                )
-              }
               onClick={handleFolderClick}
-              text={head ?? '//'}
             />
 
             <Dropdown isOpen={headMenu.isOpen} stretchLeft>
@@ -200,7 +193,7 @@ export function ToolbarSearch({ className, total, filtered }: ToolbarSearchProps
             placeholder='Путь'
             noIcon
             noBorder
-            className='w-18 sm:w-20 grow'
+            className='w-18 sm:w-20 grow ml-1'
             query={path}
             onChangeQuery={setPath}
           />

rsconcept/frontend/src/features/oss/pages/oss-page/editor-oss-graph/oss-flow.tsx

@@ -135,7 +135,7 @@ export function OssFlow() {
         });
       }
     } else {
-      if (node.data.operation?.result) {
+      if (node.data.operation) {
         navigateOperationSchema(node.data.operation.id);
       }
     }

rsconcept/frontend/src/features/rsform/components/wordform-button.tsx

@@ -21,7 +21,7 @@ export function WordformButton({ text, example, grams, onSelectGrams, isSelected
         'p-1',
         'border rounded-none',
         'cursor-pointer',
-        'cc-controls hover:bg-accent hover:text-foreground cc-animate-color',
+        'text-muted-foreground hover:bg-accent hover:text-foreground cc-animate-color',
         isSelected && 'cc-selected'
       )}
       {...restProps}

rsconcept/frontend/src/features/rsform/dialogs/dlg-show-type-graph/graph/mgraph-node.tsx

@@ -20,8 +20,9 @@ interface MGraphNodeInternal {
 
 export function MGraphNode(node: MGraphNodeInternal) {
   const tooltipText =
-    (node.data.annotations.length === 0 ? '' : `Конституенты: ${node.data.annotations.join(' ')}<br/>`) +
+    `Ступень ${node.data.text}` +
-    node.data.text;
+    '<br/>' +
+    (node.data.annotations.length === 0 ? '' : `Конституенты: ${node.data.annotations.join(' ')}`);
 
   return (
     <>

rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-rsexpression/rs-local-button.tsx

@@ -34,7 +34,7 @@ export function RSLocalButton({
         'w-7 sm:w-8 h-5 sm:h-6',
         'cursor-pointer disabled:cursor-default',
         'rounded-md',
-        'cc-hover-text cc-controls cc-animate-color',
+        'cc-hover-text cc-hover-pulse text-muted-foreground cc-animate-color',
         'font-math',
         className
       )}

rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-rsexpression/rs-token-button.tsx

@@ -22,7 +22,7 @@ export function RSTokenButton({ token, disabled, onInsert }: RSTokenButtonProps)
         'h-5 sm:h-6',
         'px-1 rounded-md',
         'outline-hidden',
-        'cc-hover-text cc-controls cc-animate-color',
+        'cc-hover-text cc-hover-pulse text-muted-foreground cc-animate-color',
         'font-math',
         'cursor-pointer disabled:cursor-default',
         label.length > 3 ? 'w-14.5 md:w-18' : 'w-7.25 md:w-9'

rsconcept/frontend/src/features/rsform/pages/rsform-page/view-constituents/constituents-search.tsx

@@ -41,7 +41,7 @@ export function ConstituentsSearch({ dense }: ConstituentsSearchProps) {
         <MiniButton
           titleHtml={`Наследованные: <b>${includeInherited ? 'отображать' : 'скрывать'}</b>`}
           aria-label={`Отображение наследованных: ${includeInherited ? 'отображать' : 'скрывать'}`}
-          icon={<IconChild size='1rem' className={includeInherited ? 'icon-primary' : 'cc-controls'} />}
+          icon={<IconChild size='1rem' className={includeInherited ? 'icon-primary' : undefined} />}
           className='h-fit self-center'
           onClick={toggleInherited}
         />

rsconcept/frontend/src/index.css

@@ -92,6 +92,23 @@
   --duration-fade: 300ms;
   --duration-move: 500ms;
 
+  /* Custom animations */
+  --animate-pulse-scale: pulse-scale 1s infinite;
+
+  @keyframes pulse-scale {
+    0% {
+      transform: scale(1);
+    }
+
+    70% {
+      transform: scale(1.2);
+    }
+
+    100% {
+      transform: scale(1);
+    }
+  }
+
   /* ========= shadcn theme ============ */
 
   /* --radius-sm: calc(var(--radius) - 4px);
@@ -123,19 +140,4 @@
   --color-border: var(--clr-prim-400);
   --color-input: var(--color-card);
   --color-ring: var(--color-primary);
-
-  /* --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-
-  --color-sidebar: var(--color-background);
-  --color-sidebar-foreground: var(--color-foreground);
-  --color-sidebar-primary: var(--color-primary);
-  --color-sidebar-primary-foreground: var(--color-primary-foreground);
-  --color-sidebar-accent: var(--color-accent);
-  --color-sidebar-accent-foreground: var(--color-accent-foreground);
-  --color-sidebar-border: var(--color-border);
-  --color-sidebar-ring: var(--color-ring); */
 }

rsconcept/frontend/src/styling/utilities.css

@@ -33,20 +33,6 @@
   }
 }
 
-@keyframes pulse-scale {
-  0% {
-    transform: scale(1);
-  }
-
-  70% {
-    transform: scale(1.2);
-  }
-
-  100% {
-    transform: scale(1);
-  }
-}
-
 @utility cc-hover-text {
   &:hover:not(:disabled) {
     color: var(--color-foreground);
@@ -80,16 +66,6 @@
   }
 }
 
-@utility cc-controls {
-  color: var(--color-muted-foreground);
-  background-color: transparent;
-
-  &:disabled {
-    color: var(--color-muted-foreground);
-    opacity: 0.75;
-  }
-}
-
 @utility cc-remove {
   color: var(--color-muted-foreground);
 

rsconcept/frontend/src/utils/utils.ts

@@ -99,9 +99,9 @@ export function toggleTristateFlag(prev: boolean | null): boolean | null {
 /**
  * Toggle tristate color: gray - green - red .
  */
-export function tripleToggleColor(value: boolean | null): string {
+export function tripleToggleColor(value: boolean | null): string | undefined {
   if (value === null) {
-    return 'cc-controls';
+    return undefined;
   }
   return value ? 'text-constructive' : 'text-destructive';
 }