Improve navigation

rsconcept/frontend/src/components/Icons.tsx

@@ -76,6 +76,14 @@ export function MenuIcon() {
   );
 }
 
+export function ShareIcon() {
+  return (
+    <IconSVG viewbox='0 0 24 24'> 
+      <path d='M5.5 15a3.51 3.51 0 002.36-.93l6.26 3.58a3.06 3.06 0 00-.12.85 3.53 3.53 0 101.14-2.57l-6.26-3.58a2.74 2.74 0 00.12-.76l6.15-3.52A3.49 3.49 0 1014 5.5a3.35 3.35 0 00.12.85L8.43 9.6A3.5 3.5 0 105.5 15zm12 2a1.5 1.5 0 11-1.5 1.5 1.5 1.5 0 011.5-1.5zm0-13A1.5 1.5 0 1116 5.5 1.5 1.5 0 0117.5 4zm-12 6A1.5 1.5 0 114 11.5 1.5 1.5 0 015.5 10z' />
+    </IconSVG>
+  );
+}
+
 export function FilterCogIcon() {
   return (
     <IconSVG viewbox='0 0 24 24'> 

rsconcept/frontend/src/components/Navigation/Logo.tsx

@@ -7,8 +7,8 @@ interface LogoProps {
 function Logo({title}: LogoProps) {
   return (
     <Link to='/' className='flex items-center mr-4'>
-      <img src='/favicon.svg' className='h-10 mr-2' alt=''/>
+      <img src='/favicon.svg' className='min-h-[2.5rem] mr-2 min-w-[2.5rem]' alt=''/>
-      <span className='hidden lg:block self-center text-2xl font-semibold whitespace-nowrap dark:text-white'>{title}</span>
+      <span className='self-center hidden text-2xl font-semibold lg:block whitespace-nowrap dark:text-white'>{title}</span>
     </Link>
   );
 }

rsconcept/frontend/src/components/Navigation/Navigation.tsx

@@ -3,7 +3,6 @@ import TopSearch from './TopSearch';
 import { EducationIcon, LibraryIcon } from '../Icons';
 import NavigationButton from './NavigationButton';
 import UserMenu from './UserMenu';
-import ThemeSwitcher from './ThemeSwitcher';
 import { useAuth } from '../../context/AuthContext';
 import UserTools from './UserTools';
 import Logo from './Logo';
@@ -26,9 +25,8 @@ function Navigation() {
         <div className='flex items-center'>
           {user && <UserTools/>}
           <div className='flex items-center pl-2'>
-            <NavigationButton icon={<LibraryIcon />} description='Библиотека конструктов' onClick={navigateCommon} />
+            <NavigationButton icon={<LibraryIcon />} description='Общие схемы' onClick={navigateCommon} />
             <NavigationButton icon={<EducationIcon />} description='Справка' onClick={navigateHelp} />
-            <ThemeSwitcher />
             <UserMenu />
           </div>
         </div>

rsconcept/frontend/src/components/Navigation/NavigationTextItem.tsx

@@ -5,7 +5,7 @@ interface NavigationTextItemProps {
   bold?: boolean
 }
 
-function NavigationTextItem({text='', description='', onClick, bold=true}: NavigationTextItemProps) {
+function NavigationTextItem({text='', description='', onClick, bold}: NavigationTextItemProps) {
   return (
     <button 
       title={description}

rsconcept/frontend/src/components/Navigation/UserDropdown.tsx

@@ -22,18 +22,24 @@ function UserDropdown({hideDropdown}: UserDropdownProps) {
     logout(() => {navigate('/login/');})
   };
 
+  const navigateMyWork = () => {
+    hideDropdown()
+    navigate('/rsforms?filter=personal');
+  };
+
   return (
     <div className='relative'>
       <div className='absolute right-0 z-10 flex flex-col items-stretch justify-start p-2 mt-4 text-sm origin-top-right bg-white border border-gray-100 divide-y rounded-md shadow-lg dark:border-gray-500 dark:bg-gray-900 w-36'>
-        <NavigationTextItem description='Профиль пользователя' bold={false}
+        <NavigationTextItem description='Профиль пользователя'
           text={user?.username}
           onClick={navigateProfile}
         />
-        <NavigationTextItem description='Переключение темы оформления' bold={false}
+        <NavigationTextItem description='Переключение темы оформления'
           text={darkMode ? 'Светлая тема' : 'Темная тема'} 
           onClick={toggleDarkMode}
         />
-        <NavigationTextItem text={'Выйти...'} onClick={logoutAndRedirect} />
+        <NavigationTextItem text={'Мои схемы'} onClick={navigateMyWork} />
+        <NavigationTextItem text={'Выйти...'} bold onClick={logoutAndRedirect} />
       </div>
     </div>
   );

rsconcept/frontend/src/components/Navigation/UserMenu.tsx

@@ -26,7 +26,12 @@ function UserMenu() {
   return (
     <div ref={dropdownRef}>
       { !user && <LoginRef />}
-      { user && <NavigationButton icon={<UserIcon />} description='Пользователь' onClick={toggleUserDropdown} /> }
+      { user && 
+      <NavigationButton
+        icon={<UserIcon />}
+        description={`Пользователь ${user?.username}`}
+        onClick={toggleUserDropdown} 
+      />}
       { user && showUserDropdown && <UserDropdown hideDropdown={hideDropdown} /> }
     </div>
   );

rsconcept/frontend/src/components/Navigation/UserTools.tsx

@@ -1,16 +1,16 @@
 import { useNavigate } from 'react-router-dom';
 import NavigationButton from './NavigationButton';
-import { PlusIcon, SquaresIcon } from '../Icons';
+import { BellIcon, PlusIcon, SquaresIcon } from '../Icons';
+import { toast } from 'react-toastify';
 
 function UserTools() {
-  const navigate = useNavigate();;
+  const navigate = useNavigate();
   
-  const navigateCreateRSForm = () => {
+  const navigateCreateRSForm = () => navigate('/rsform-create');
-    navigate('/rsform-create');
+  const navigateMyWork = () => navigate('/rsforms?filter=personal');
-  };
 
-  const navigateMyWork = () => {
+  const handleNotifications = () => {
-    navigate('/rsforms?filter=personal');
+    toast.info('Уведомления в разработке');
   };
   
   return (
@@ -22,7 +22,8 @@ function UserTools() {
           colorClass='text-blue-500 hover:text-blue-700 dark:text-orange-500 dark:hover:text-orange-300'
         />
       </span>
-      <NavigationButton icon={<SquaresIcon />} description='Рабочие схемы' onClick={navigateMyWork} />
+      <NavigationButton icon={<SquaresIcon />} description='Мои схемы' onClick={navigateMyWork} />
+      <NavigationButton icon={<BellIcon />} description='Уведомления' onClick={handleNotifications} />
     </div>
   );
 }

rsconcept/frontend/src/pages/RSFormPage/RSFormCard.tsx

@@ -6,7 +6,7 @@ import TextInput from '../../components/Common/TextInput';
 import { useRSForm } from '../../context/RSFormContext';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import Button from '../../components/Common/Button';
-import { CrownIcon, DownloadIcon, DumpBinIcon } from '../../components/Icons';
+import { CrownIcon, DownloadIcon, DumpBinIcon, ShareIcon } from '../../components/Icons';
 import { useUsers } from '../../context/UsersContext';
 import { useNavigate } from 'react-router-dom';
 import { toast } from 'react-toastify';
@@ -79,6 +79,12 @@ function RSFormCard() {
     });
   }, [download, schema?.alias, fileURL]);
   
+  const handleShare = useCallback(() => {
+    const url = window.location.href + '&share';
+    navigator.clipboard.writeText(url);
+    toast.success(`Ссылка скопирована: ${url}`);
+  }, []);
+
   return (
     <form onSubmit={handleSubmit} className='flex-grow max-w-xl px-4 py-2 border'>
       <TextInput id='title' label='Полное название' type='text'
@@ -108,6 +114,11 @@ function RSFormCard() {
       <div className='flex items-center justify-between gap-1 py-2 mt-2'>
         <SubmitButton text='Сохранить изменения' loading={processing} disabled={!isEditable || processing} />
         <div className='flex justify-end gap-1'>
+          <Button 
+            tooltip='Поделиться схемой'
+            icon={<ShareIcon />}
+            onClick={handleShare}
+          />
           <Button 
             disabled={processing}
             tooltip='Скачать TRS файл'