F: Add schema-title for visibility

rsconcept/frontend/src/app/application-layout.tsx

@@ -49,11 +49,7 @@ export function ApplicationLayout() {
 
         <Navigation />
 
-        <div
+        <div className='overflow-x-auto max-w-dvw' style={{ maxHeight: viewportHeight }} inert={activeDialog !== null}>
-          className='overflow-x-auto max-w-[100dvw]'
-          style={{ maxHeight: viewportHeight }}
-          inert={activeDialog !== null}
-        >
           <main className='cc-scroll-y overflow-y-auto' style={{ minHeight: mainHeight }}>
             <GlobalLoader />
             <MutationErrors />

rsconcept/frontend/src/app/navigation/logo.tsx

@@ -11,7 +11,7 @@ export function Logo() {
     <img
       alt=''
       aria-hidden
-      className='max-h-7 w-fit max-w-46'
+      className='max-h-7 w-fit max-w-46 cursor-pointer'
       src={size.isSmall ? '/logo_sign.svg' : !darkMode ? '/logo_full.svg' : '/logo_full_dark.svg'}
     />
   );

rsconcept/frontend/src/app/navigation/navigation-button.tsx

@@ -24,7 +24,7 @@ export function NavigationButton({ icon, title, hideTitle, className, style, onC
       style={style}
     >
       {icon ? icon : null}
-      {text ? <span className='hidden md:inline'>{text}</span> : null}
+      {text ? <span className='hidden lg:inline'>{text}</span> : null}
     </button>
   );
 }

rsconcept/frontend/src/app/navigation/navigation.tsx

@@ -2,6 +2,8 @@
 
 import clsx from 'clsx';
 
+import { useAIStore } from '@/features/ai/stores/ai-context';
+
 import { IconLibrary2, IconManuals, IconNewItem2 } from '@/components/icons';
 import { useWindowSize } from '@/hooks/use-window-size';
 import { useAppLayoutStore } from '@/stores/app-layout';
@@ -14,6 +16,7 @@ import { MenuAI } from './menu-ai';
 import { MenuUser } from './menu-user';
 import { NavigationButton } from './navigation-button';
 import { useConceptNavigation } from './navigation-context';
+import { SchemaTitle } from './schema-title';
 import { ToggleNavigation } from './toggle-navigation';
 
 export function Navigation() {
@@ -22,6 +25,10 @@ export function Navigation() {
   const noNavigationAnimation = useAppLayoutStore(state => state.noNavigationAnimation);
   const activeDialog = useDialogsStore(state => state.active);
 
+  const currentSchema = useAIStore(state => state.currentSchema);
+  const currentOSS = useAIStore(state => state.currentOSS);
+  const schemaTitle = currentSchema?.title || currentOSS?.title;
+
   const navigateHome = (event: React.MouseEvent<Element>) =>
     push({ path: urls.home, newTab: event.ctrlKey || event.metaKey });
   const navigateLibrary = (event: React.MouseEvent<Element>) =>
@@ -36,15 +43,16 @@ export function Navigation() {
       <ToggleNavigation />
       <div
         className={clsx(
-          'pl-2 sm:pr-4 h-12 flex cc-shadow-border',
+          'pl-2 sm:pr-4 h-12 flex gap-2 justify-between cc-shadow-border',
           'transition-[max-height,translate] ease-bezier duration-move',
           noNavigationAnimation ? '-translate-y-6 max-h-0' : 'max-h-12'
         )}
       >
-        <div className='flex items-center mr-auto cursor-pointer' onClick={!size.isSmall ? navigateHome : undefined}>
+        <div className='flex items-center shrink-0' onClick={!size.isSmall ? navigateHome : undefined}>
           <Logo />
         </div>
-        <div className='flex gap-2 items-center pr-2'>
+        {schemaTitle ? <SchemaTitle isRSForm={!!currentSchema} title={schemaTitle} /> : null}
+        <div className='flex gap-2 items-center pr-2 shrink-0'>
           <NavigationButton text='Новая схема' icon={<IconNewItem2 size='1.5rem' />} onClick={navigateCreateNew} />
           <NavigationButton text='Библиотека' icon={<IconLibrary2 size='1.5rem' />} onClick={navigateLibrary} />
           <NavigationButton text='Справка' icon={<IconManuals size='1.5rem' />} onClick={navigateHelp} />

rsconcept/frontend/src/app/navigation/schema-title.tsx

@@ -0,0 +1,28 @@
+import clsx from 'clsx';
+
+import { IconOSS, IconRSForm } from '@/components/icons';
+import { globalIDs } from '@/utils/constants';
+
+interface SchemaTitleProps {
+  isRSForm: boolean;
+  title: string;
+}
+
+export function SchemaTitle({ isRSForm, title }: SchemaTitleProps) {
+  return (
+    <div
+      tabIndex={-1}
+      className={clsx(
+        'min-w-0 overflow-hidden max-w-fit',
+        'flex flex-1 items-center gap-2',
+        'text-md text-muted-foreground pointer-events-auto'
+      )}
+      aria-label='Название схемы'
+      data-tooltip-id={globalIDs.tooltip}
+      data-tooltip-content={title}
+    >
+      {isRSForm ? <IconRSForm size='1.5rem' /> : <IconOSS size='1.5rem' />}
+      <span className='pt-0.5 font-medium truncate'>{title}</span>
+    </div>
+  );
+}