.cursor/rules/rules.mdc

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

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

@@ -1,5 +0,0 @@
----
-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,11 +2,13 @@ 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";
@@ -24,6 +26,7 @@ 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);
@@ -60,6 +63,18 @@ 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));
@@ -104,10 +119,11 @@ export const Header: React.FC<HeaderProps> = ({
             <Icon icon="mdi:note-text" /> Мои заметки
           </span>
           {hasFilters && (
-            <div className="filter-indicator">
+            <div
-              <span className="filter-indicator-text">
+              className="filter-indicator"
-                Фильтр: {activeFilters.join(", ")}
+              style={{ display: "inline-block" }}
-              </span>{" "}
+            >
+              Фильтр: {activeFilters.join(", ")}{" "}
               <button onClick={handleClearFilters}>✕</button>
             </div>
           )}
@@ -140,6 +156,9 @@ 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/components/notes/NotesList.tsx

@@ -111,7 +111,7 @@ export const NotesList = forwardRef<NotesListRef>((props, ref) => {
 
     return (
       <div className="notes-container">
-        <p className="empty-message">
+        <p style={{ textAlign: "center", color: "#999", marginTop: "50px" }}>
           {message}
         </p>
       </div>

src/pages/ProfilePage.tsx

@@ -240,35 +240,18 @@ const ProfilePage: React.FC = () => {
         <div className="user-info">
           <ThemeToggle />
           <button
-            className="notes-btn"
+            className="back-btn"
             onClick={() => navigate("/notes")}
             title="К заметкам"
           >
-            <Icon icon="mdi:note-text" />
+            <Icon icon="mdi:note-text" /> К заметкам
           </button>
           <button
-            className="settings-btn"
+            className="back-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,12 +3,10 @@ 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";
@@ -332,35 +330,18 @@ const SettingsPage: React.FC = () => {
         <div className="user-info">
           <ThemeToggle />
           <button
-            className="notes-btn"
+            className="back-btn"
             onClick={() => navigate("/notes")}
             title="К заметкам"
           >
-            <Icon icon="mdi:note-text" />
+            <Icon icon="mdi:note-text" /> К заметкам
           </button>
           <button
-            className="profile-btn"
+            className="back-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>
@@ -418,6 +399,13 @@ 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,14 +119,6 @@ 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;
 }
 
 /* Применяем к другим интерактивным элементам */
@@ -138,22 +130,6 @@ 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 {
@@ -406,25 +382,15 @@ header {
 }
 
 .filter-indicator {
-  display: inline-flex;
+  display: inline-block;
-  align-items: center;
   margin-top: 5px;
   padding: 4px 10px;
-  background-color: rgba(var(--accent-color-rgb), 0.1);
+  background-color: var(--bg-hover);
-  border: 1px solid rgba(var(--accent-color-rgb), 0.3);
+  border: 1px solid var(--border-focus);
   border-radius: 15px;
   font-size: 12px;
-  color: var(--accent-color);
+  color: var(--border-focus);
   font-weight: 500;
-  max-width: 300px;
-}
-
-.filter-indicator-text {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  min-width: 0;
 }
 
 .filter-indicator button {
@@ -434,20 +400,12 @@ header {
   cursor: pointer;
   margin-left: 8px;
   font-weight: bold;
-  padding: 2px 4px;
+  padding: 0;
   font-size: 14px;
-  border-radius: 3px;
-  min-width: 20px;
-  min-height: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s ease;
 }
 
 .filter-indicator button:hover {
   color: #ff6b6b;
-  background-color: rgba(255, 107, 107, 0.1);
 }
 
 .user-info {
@@ -570,106 +528,6 @@ 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;
@@ -712,17 +570,6 @@ header {
   margin-top: 8px;
 }
 
-.empty-message {
-  text-align: center;
-  color: #999;
-  margin-top: 50px;
-  word-break: break-word;
-  overflow-wrap: break-word;
-  max-width: 100%;
-  padding: 0 20px;
-  box-sizing: border-box;
-}
-
 .login-form {
   margin-top: 20px;
 }
@@ -1985,7 +1832,7 @@ textarea:focus {
 .calendar-day.has-notes::after {
   content: "";
   position: absolute;
-  bottom: 2px;
+  bottom: 3px;
   left: 50%;
   transform: translateX(-50%);
   width: 4px;
@@ -1998,7 +1845,7 @@ textarea:focus {
 .calendar-day.has-edited-notes::before {
   content: "";
   position: absolute;
-  bottom: 2px;
+  bottom: 3px;
   left: 50%;
   transform: translateX(-50%);
   width: 4px;
@@ -2171,20 +2018,15 @@ textarea:focus {
 .tag {
   display: inline-block;
   padding: 4px 8px;
-  background-color: rgba(var(--accent-color-rgb), 0.1);
+  background-color: var(--bg-secondary);
-  color: var(--accent-color);
+  color: var(--accent-color, #007bff);
-  border: 1px solid rgba(var(--accent-color-rgb), 0.3);
+  border: 1px solid var(--accent-color, #007bff);
   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 {
@@ -2208,9 +2050,9 @@ textarea:focus {
 .textNote .tag-in-note {
   display: inline-block;
   padding: 2px 6px;
-  background-color: rgba(var(--accent-color-rgb), 0.1);
+  background-color: var(--bg-tertiary);
-  color: var(--accent-color);
+  color: var(--accent-color, #007bff);
-  border: 1px solid rgba(var(--accent-color-rgb), 0.3);
+  border: 1px solid var(--accent-color, #007bff);
   border-radius: 8px;
   font-size: 12px;
   font-weight: 500;
@@ -2545,20 +2387,16 @@ textarea:focus {
 .mobile-sidebar .tag {
   display: inline-block;
   padding: 4px 8px;
-  background-color: rgba(var(--accent-color-rgb), 0.1);
+  background-color: var(--bg-secondary);
-  color: var(--accent-color);
+  color: var(--accent-color, #007bff);
-  border: 1px solid rgba(var(--accent-color-rgb), 0.3);
+  border: 1px solid var(--accent-color, #007bff);
   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 {
@@ -4730,12 +4568,6 @@ textarea:focus {
     gap: 16px; /* Отступ между заметками на мобильных */
   }
 
-  /* Стили для пустого сообщения на мобильных */
-  .empty-message {
-    padding: 0 15px;
-    font-size: 14px;
-  }
-
   /* Header адаптация */
   .notes-header {
     gap: 10px;
@@ -4743,9 +4575,8 @@ textarea:focus {
   }
 
   .notes-header-left {
-    width: auto;
+    width: 100%;
-    min-width: 0;
+    flex-direction: column;
-    /* flex-direction: column; */
     align-items: flex-start;
     gap: 8px;
   }
@@ -4757,18 +4588,7 @@ textarea:focus {
   /* Фильтры */
   .filter-indicator {
     font-size: 12px;
-    display: inline-flex !important;
+    width: 100%;
-    width: auto !important;
-    min-width: 0 !important;
-    flex: 0 0 auto !important;
-    align-self: flex-start !important;
-    box-sizing: border-box !important;
-  }
-
-  .filter-indicator-text {
-    overflow: hidden !important;
-    text-overflow: ellipsis !important;
-    white-space: nowrap !important;
   }
 
   /* Markdown кнопки */