Обновлены компоненты заголовка, страницы профиля и настроек для улучшения навигации. Реализованы новые кнопки для перехода к заметкам и профилю, добавлена логика выхода из системы. Обновлены стили кнопок навигации и улучшены визуальные эффекты при взаимодействии.

.cursor/rules/rules.mdc

@@ -1,5 +0,0 @@
----
-alwaysApply: true
----
-
-Никогда самостоятельно не пытайся запустить сервер. Если это требуется, то попроси это сделать меня!

.cursor/rules/start-server-rule.mdc

@@ -0,0 +1,5 @@
+---
+alwaysApply: true
+---
+
+Never try to start the server yourself. If it is required, then ask me to do it!

src/components/layout/Header.tsx

@@ -2,13 +2,11 @@ import React, { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import { Icon } from "@iconify/react";
 import { useAppSelector, useAppDispatch } from "../../store/hooks";
-import { clearAuth } from "../../store/slices/authSlice";
 import {
   setSelectedDate,
   setSelectedTag,
   setSearchQuery,
 } from "../../store/slices/notesSlice";
-import { authApi } from "../../api/authApi";
 import { userApi } from "../../api/userApi";
 import { ThemeToggle } from "../common/ThemeToggle";
 import { setUser, setAiSettings } from "../../store/slices/profileSlice";
@@ -26,7 +24,6 @@ export const Header: React.FC<HeaderProps> = ({
 }) => {
   const navigate = useNavigate();
   const dispatch = useAppDispatch();
-  const username = useAppSelector((state) => state.auth.username);
   const user = useAppSelector((state) => state.profile.user);
   const selectedDate = useAppSelector((state) => state.notes.selectedDate);
   const selectedTag = useAppSelector((state) => state.notes.selectedTag);
@@ -63,18 +60,6 @@ export const Header: React.FC<HeaderProps> = ({
     }
   };
 
-  const handleLogout = async () => {
-    try {
-      await authApi.logout();
-      dispatch(clearAuth());
-      navigate("/");
-    } catch (error) {
-      console.error("Ошибка выхода:", error);
-      dispatch(clearAuth());
-      navigate("/");
-    }
-  };
-
   const handleClearFilters = () => {
     dispatch(setSelectedDate(null));
     dispatch(setSelectedTag(null));
@@ -156,9 +141,6 @@ export const Header: React.FC<HeaderProps> = ({
           >
             <Icon icon="mdi:cog" />
           </button>
-          <button className="logout-btn" title="Выйти" onClick={handleLogout}>
-            <Icon icon="mdi:logout" />
-          </button>
         </div>
       </header>
     </>

src/pages/ProfilePage.tsx

@@ -240,18 +240,35 @@ const ProfilePage: React.FC = () => {
         <div className="user-info">
           <ThemeToggle />
           <button
-            className="back-btn"
+            className="notes-btn"
             onClick={() => navigate("/notes")}
             title="К заметкам"
           >
-            <Icon icon="mdi:note-text" /> К заметкам
+            <Icon icon="mdi:note-text" />
           </button>
           <button
-            className="back-btn"
+            className="settings-btn"
             onClick={() => navigate("/settings")}
             title="Настройки"
           >
-            <Icon icon="mdi:cog" /> Настройки
+            <Icon icon="mdi:cog" />
+          </button>
+          <button
+            className="logout-btn"
+            title="Выйти"
+            onClick={async () => {
+              try {
+                await authApi.logout();
+                dispatch(clearAuth());
+                navigate("/");
+              } catch (error) {
+                console.error("Ошибка выхода:", error);
+                dispatch(clearAuth());
+                navigate("/");
+              }
+            }}
+          >
+            <Icon icon="mdi:logout" />
           </button>
         </div>
       </header>

src/pages/SettingsPage.tsx

@@ -3,10 +3,12 @@ import { useNavigate } from "react-router-dom";
 import { Icon } from "@iconify/react";
 import { useAppSelector, useAppDispatch } from "../store/hooks";
 import { userApi } from "../api/userApi";
+import { authApi } from "../api/authApi";
 import { notesApi, logsApi, Log } from "../api/notesApi";
 import { Note } from "../types/note";
 import { setUser, setAiSettings } from "../store/slices/profileSlice";
 import { setAccentColor as setAccentColorAction } from "../store/slices/uiSlice";
+import { clearAuth } from "../store/slices/authSlice";
 import { setAccentColor } from "../utils/colorUtils";
 import { useNotification } from "../hooks/useNotification";
 import { Modal } from "../components/common/Modal";
@@ -330,18 +332,35 @@ const SettingsPage: React.FC = () => {
         <div className="user-info">
           <ThemeToggle />
           <button
-            className="back-btn"
+            className="notes-btn"
             onClick={() => navigate("/notes")}
             title="К заметкам"
           >
-            <Icon icon="mdi:note-text" /> К заметкам
+            <Icon icon="mdi:note-text" />
           </button>
           <button
-            className="back-btn"
+            className="profile-btn"
             onClick={() => navigate("/profile")}
             title="Профиль"
           >
-            <Icon icon="mdi:account" /> Профиль
+            <Icon icon="mdi:account" />
+          </button>
+          <button
+            className="logout-btn"
+            title="Выйти"
+            onClick={async () => {
+              try {
+                await authApi.logout();
+                dispatch(clearAuth());
+                navigate("/");
+              } catch (error) {
+                console.error("Ошибка выхода:", error);
+                dispatch(clearAuth());
+                navigate("/");
+              }
+            }}
+          >
+            <Icon icon="mdi:logout" />
           </button>
         </div>
       </header>
@@ -399,13 +418,6 @@ const SettingsPage: React.FC = () => {
                   />
                 ))}
               </div>
-              <input
-                type="color"
-                id="settings-accentColor"
-                value={selectedAccentColor}
-                style={{ marginTop: "10px" }}
-                onChange={(e) => setSelectedAccentColor(e.target.value)}
-              />
             </div>
 
             <button className="btnSave" onClick={handleUpdateAppearance}>

src/styles/style.css

@@ -119,6 +119,14 @@ button {
   -webkit-tap-highlight-color: transparent;
   -moz-tap-highlight-color: transparent;
   tap-highlight-color: transparent;
+  outline: none;
+  box-shadow: none;
+}
+
+button:focus,
+button:active {
+  outline: none;
+  box-shadow: none;
 }
 
 /* Применяем к другим интерактивным элементам */
@@ -130,6 +138,22 @@ div[role="button"] {
   -webkit-tap-highlight-color: transparent;
   -moz-tap-highlight-color: transparent;
   tap-highlight-color: transparent;
+  outline: none;
+  box-shadow: none;
+}
+
+input[type="button"]:focus,
+input[type="submit"]:focus,
+input[type="reset"]:focus,
+a:focus,
+div[role="button"]:focus,
+input[type="button"]:active,
+input[type="submit"]:active,
+input[type="reset"]:active,
+a:active,
+div[role="button"]:active {
+  outline: none;
+  box-shadow: none;
 }
 
 iconify-icon {
@@ -385,11 +409,11 @@ header {
   display: inline-block;
   margin-top: 5px;
   padding: 4px 10px;
-  background-color: var(--bg-hover);
+  background-color: rgba(var(--accent-color-rgb), 0.1);
-  border: 1px solid var(--border-focus);
+  border: 1px solid rgba(var(--accent-color-rgb), 0.3);
   border-radius: 15px;
   font-size: 12px;
-  color: var(--border-focus);
+  color: var(--accent-color);
   font-weight: 500;
 }
 
@@ -528,6 +552,106 @@ header {
   color: white;
 }
 
+/* Стили для кнопок навигации в профиле и настройках */
+.notes-btn {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: none;
+  background: var(--bg-secondary);
+  color: var(--text-secondary);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+  flex-shrink: 0;
+}
+
+.notes-btn:hover {
+  background-color: var(--accent-color, #007bff);
+}
+
+.notes-btn .iconify {
+  font-size: 20px;
+  color: #666;
+  transition: color 0.3s ease;
+  margin: 0;
+  padding: 0;
+  line-height: 1;
+  vertical-align: baseline;
+}
+
+.notes-btn:hover .iconify {
+  color: white;
+}
+
+.settings-btn {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: none;
+  background: var(--bg-secondary);
+  color: var(--text-secondary);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+  flex-shrink: 0;
+}
+
+.settings-btn:hover {
+  background-color: var(--accent-color, #007bff);
+}
+
+.settings-btn .iconify {
+  font-size: 20px;
+  color: #666;
+  transition: color 0.3s ease;
+  margin: 0;
+  padding: 0;
+  line-height: 1;
+  vertical-align: baseline;
+}
+
+.settings-btn:hover .iconify {
+  color: white;
+}
+
+.profile-btn {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: none;
+  background: var(--bg-secondary);
+  color: var(--text-secondary);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+  flex-shrink: 0;
+}
+
+.profile-btn:hover {
+  background-color: var(--accent-color, #007bff);
+}
+
+.profile-btn .iconify {
+  font-size: 20px;
+  color: #666;
+  transition: color 0.3s ease;
+  margin: 0;
+  padding: 0;
+  line-height: 1;
+  vertical-align: baseline;
+}
+
+.profile-btn:hover .iconify {
+  color: white;
+}
+
 .auth-link {
   text-align: center;
   margin-top: 15px;
@@ -1832,7 +1956,7 @@ textarea:focus {
 .calendar-day.has-notes::after {
   content: "";
   position: absolute;
-  bottom: 3px;
+  bottom: 2px;
   left: 50%;
   transform: translateX(-50%);
   width: 4px;
@@ -1845,7 +1969,7 @@ textarea:focus {
 .calendar-day.has-edited-notes::before {
   content: "";
   position: absolute;
-  bottom: 3px;
+  bottom: 2px;
   left: 50%;
   transform: translateX(-50%);
   width: 4px;
@@ -2018,15 +2142,20 @@ textarea:focus {
 .tag {
   display: inline-block;
   padding: 4px 8px;
-  background-color: var(--bg-secondary);
+  background-color: rgba(var(--accent-color-rgb), 0.1);
-  color: var(--accent-color, #007bff);
+  color: var(--accent-color);
-  border: 1px solid var(--accent-color, #007bff);
+  border: 1px solid rgba(var(--accent-color-rgb), 0.3);
   border-radius: 12px;
   font-size: 10px;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.2s ease;
   user-select: none;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: break-word;
 }
 
 .tag:hover {
@@ -2050,9 +2179,9 @@ textarea:focus {
 .textNote .tag-in-note {
   display: inline-block;
   padding: 2px 6px;
-  background-color: var(--bg-tertiary);
+  background-color: rgba(var(--accent-color-rgb), 0.1);
-  color: var(--accent-color, #007bff);
+  color: var(--accent-color);
-  border: 1px solid var(--accent-color, #007bff);
+  border: 1px solid rgba(var(--accent-color-rgb), 0.3);
   border-radius: 8px;
   font-size: 12px;
   font-weight: 500;
@@ -2387,16 +2516,20 @@ textarea:focus {
 .mobile-sidebar .tag {
   display: inline-block;
   padding: 4px 8px;
-  background-color: var(--bg-secondary);
+  background-color: rgba(var(--accent-color-rgb), 0.1);
-  color: var(--accent-color, #007bff);
+  color: var(--accent-color);
-  border: 1px solid var(--accent-color, #007bff);
+  border: 1px solid rgba(var(--accent-color-rgb), 0.3);
   border-radius: 12px;
   font-size: 9px;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.2s ease;
   user-select: none;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
   white-space: nowrap;
+  word-break: break-word;
 }
 
 .mobile-sidebar .tag:hover {