Улучшено управление положением выпадающего меню в панели инструментов Markdown, добавлены ссылки на кнопки и обработка кликов вне меню. Обновлены стили календаря для поддержки переменных цвета акцента, улучшена визуализация элементов при наведении и выделении.

src/components/layout/Header.tsx

@@ -12,6 +12,8 @@ import { authApi } from "../../api/authApi";
 import { userApi } from "../../api/userApi";
 import { ThemeToggle } from "../common/ThemeToggle";
 import { setUser, setAiSettings } from "../../store/slices/profileSlice";
+import { setAccentColor as setAccentColorAction } from "../../store/slices/uiSlice";
+import { setAccentColor } from "../../utils/colorUtils";
 
 interface HeaderProps {
   onFilterChange?: (hasFilters: boolean) => void;
@@ -44,6 +46,11 @@ export const Header: React.FC<HeaderProps> = ({
       const userData = await userApi.getProfile();
       dispatch(setUser(userData));
 
+      // Устанавливаем цвет акцента из профиля пользователя
+      const accent = userData.accent_color || "#007bff";
+      dispatch(setAccentColorAction(accent));
+      setAccentColor(accent);
+
       // Загружаем AI настройки
       try {
         const aiSettings = await userApi.getAiSettings();

src/components/notes/MarkdownToolbar.tsx

@@ -21,34 +21,60 @@ export const MarkdownToolbar: React.FC<MarkdownToolbarProps> = ({
   const [showHeaderDropdown, setShowHeaderDropdown] = useState(false);
   const dispatch = useAppDispatch();
   const dropdownRef = useRef<HTMLDivElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const [isDragging, setIsDragging] = useState(false);
   const [startX, setStartX] = useState(0);
   const [scrollLeft, setScrollLeft] = useState(0);
+  const [menuPosition, setMenuPosition] = useState<{ top: number; left: number } | null>(null);
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (
         dropdownRef.current &&
-        !dropdownRef.current.contains(event.target as Node)
+        !dropdownRef.current.contains(event.target as Node) &&
+        menuRef.current &&
+        !menuRef.current.contains(event.target as Node)
       ) {
         setShowHeaderDropdown(false);
+        setMenuPosition(null);
+      }
+    };
+
+    const updateMenuPosition = () => {
+      if (buttonRef.current && showHeaderDropdown) {
+        const rect = buttonRef.current.getBoundingClientRect();
+        setMenuPosition({
+          top: rect.bottom + window.scrollY + 2,
+          left: rect.left + window.scrollX,
+        });
       }
     };
 
     if (showHeaderDropdown) {
-      document.addEventListener("mousedown", handleClickOutside);
+      updateMenuPosition();
+      // Используем небольшой таймаут, чтобы не перехватить клик на кнопке
+      const timeoutId = setTimeout(() => {
+        document.addEventListener("mousedown", handleClickOutside);
+        window.addEventListener("resize", updateMenuPosition);
+        window.addEventListener("scroll", updateMenuPosition);
+      }, 100);
+
+      return () => {
+        clearTimeout(timeoutId);
+        document.removeEventListener("mousedown", handleClickOutside);
+        window.removeEventListener("resize", updateMenuPosition);
+        window.removeEventListener("scroll", updateMenuPosition);
+      };
+    } else {
+      setMenuPosition(null);
     }
-
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
   }, [showHeaderDropdown]);
 
-
   const handleMouseDown = (e: React.MouseEvent) => {
     // Не начинаем перетаскивание если кликнули на кнопку
-    if ((e.target as HTMLElement).closest('.btnMarkdown')) return;
+    if ((e.target as HTMLElement).closest(".btnMarkdown")) return;
 
     if (!containerRef.current) return;
     setIsDragging(true);
@@ -71,16 +97,16 @@ export const MarkdownToolbar: React.FC<MarkdownToolbarProps> = ({
   // Обработчики для document чтобы отслеживать mouseMove и mouseUp даже вне элемента
   useEffect(() => {
     if (isDragging) {
-      document.addEventListener('mousemove', handleMouseMove);
-      document.addEventListener('mouseup', handleMouseUp);
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
     } else {
-      document.removeEventListener('mousemove', handleMouseMove);
-      document.removeEventListener('mouseup', handleMouseUp);
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
     }
 
     return () => {
-      document.removeEventListener('mousemove', handleMouseMove);
-      document.removeEventListener('mouseup', handleMouseUp);
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
     };
   }, [isDragging]);
 
@@ -91,7 +117,14 @@ export const MarkdownToolbar: React.FC<MarkdownToolbarProps> = ({
       className="markdown-buttons"
       ref={containerRef}
       onMouseDown={handleMouseDown}
-      style={{ cursor: isDragging ? 'grabbing' : (containerRef.current && containerRef.current.scrollWidth > containerRef.current.clientWidth ? 'grab' : 'default') }}
+      style={{
+        cursor: isDragging
+          ? "grabbing"
+          : containerRef.current &&
+            containerRef.current.scrollWidth > containerRef.current.clientWidth
+          ? "grab"
+          : "default",
+      }}
     >
       {buttons.map((btn) => (
         <button
@@ -112,8 +145,15 @@ export const MarkdownToolbar: React.FC<MarkdownToolbarProps> = ({
 
       <div className="header-dropdown" ref={dropdownRef}>
         <button
+          ref={buttonRef}
           className="btnMarkdown"
-          onClick={() => setShowHeaderDropdown(!showHeaderDropdown)}
+          onMouseDown={(e) => {
+            e.stopPropagation();
+          }}
+          onClick={(e) => {
+            e.stopPropagation();
+            setShowHeaderDropdown(!showHeaderDropdown);
+          }}
           title="Заголовок"
         >
           <Icon icon="mdi:format-header-pound" />
@@ -122,14 +162,24 @@ export const MarkdownToolbar: React.FC<MarkdownToolbarProps> = ({
             style={{ fontSize: "10px", marginLeft: "-2px" }}
           />
         </button>
-        {showHeaderDropdown && (
-          <div className="header-dropdown-menu">
+        {showHeaderDropdown && menuPosition && (
+          <div 
+            ref={menuRef}
+            className="header-dropdown-menu"
+            style={{
+              position: "fixed",
+              top: `${menuPosition.top}px`,
+              left: `${menuPosition.left}px`,
+            }}
+          >
             {[1, 2, 3, 4, 5].map((level) => (
               <button
                 key={level}
-                onClick={() => {
+                onClick={(e) => {
+                  e.stopPropagation();
                   onInsert("#".repeat(level) + " ", "");
                   setShowHeaderDropdown(false);
+                  setMenuPosition(null);
                 }}
               >
                 H{level}

src/components/notes/NoteItem.tsx

@@ -53,9 +53,12 @@ export const NoteItem: React.FC<NoteItemProps> = ({
     strikethrough: false,
   });
   const [localPreviewMode, setLocalPreviewMode] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isLongNote, setIsLongNote] = useState(false);
   const editTextareaRef = useRef<HTMLTextAreaElement>(null);
   const imageInputRef = useRef<HTMLInputElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
+  const textNoteRef = useRef<HTMLDivElement>(null);
   const searchQuery = useAppSelector((state) => state.notes.searchQuery);
   const isPreviewMode = useAppSelector((state) => state.ui.isPreviewMode);
   const aiEnabled = useAppSelector((state) => state.profile.aiEnabled);
@@ -964,6 +967,54 @@ export const NoteItem: React.FC<NoteItemProps> = ({
     dispatch(setSelectedTag(tag));
   };
 
+  const toggleExpand = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  // Проверка, является ли заметка длинной
+  useEffect(() => {
+    if (isEditing) {
+      setIsExpanded(false);
+      setIsLongNote(false);
+      return;
+    }
+
+    if (!textNoteRef.current) return;
+
+    const checkNoteLength = () => {
+      const element = textNoteRef.current;
+      if (!element) return;
+
+      // Временно убираем класс collapsed для точного измерения
+      const wasCollapsed = element.classList.contains("collapsed");
+      if (wasCollapsed) {
+        element.classList.remove("collapsed");
+      }
+
+      // Получаем реальную высоту контента
+      const scrollHeight = element.scrollHeight;
+
+      // Восстанавливаем класс если он был
+      if (wasCollapsed && !isExpanded) {
+        element.classList.add("collapsed");
+      }
+
+      // Считаем заметку длинной, если она больше 300px (максимальная высота свернутой заметки)
+      const isLong = scrollHeight > 300;
+      setIsLongNote(isLong);
+    };
+
+    // Небольшая задержка для того, чтобы контент успел отрендериться
+    const timer = setTimeout(checkNoteLength, 100);
+
+    return () => clearTimeout(timer);
+  }, [note.content, isEditing, isExpanded]);
+
+  // Сбрасываем состояние раскрытия при изменении заметки
+  useEffect(() => {
+    setIsExpanded(false);
+  }, [note.id]);
+
   return (
     <>
       <div
@@ -1271,7 +1322,8 @@ export const NoteItem: React.FC<NoteItemProps> = ({
         ) : (
           <>
             <div
-              className="textNote"
+              ref={textNoteRef}
+              className={`textNote ${isLongNote && !isExpanded ? "collapsed" : ""}`}
               data-original-content={note.content}
               dangerouslySetInnerHTML={{ __html: formatContent() }}
               onClick={(e) => {
@@ -1284,6 +1336,16 @@ export const NoteItem: React.FC<NoteItemProps> = ({
                 }
               }}
             />
+            {isLongNote && (
+              <button
+                className="show-more-btn"
+                onClick={toggleExpand}
+                type="button"
+              >
+                <Icon icon={isExpanded ? "mdi:chevron-up" : "mdi:chevron-down"} />
+                <span>{isExpanded ? "Скрыть" : "Раскрыть"}</span>
+              </button>
+            )}
 
             {note.images && note.images.length > 0 && (
               <div className="note-images-container">

src/pages/ProfilePage.tsx

@@ -6,6 +6,8 @@ import { userApi } from "../api/userApi";
 import { authApi } from "../api/authApi";
 import { clearAuth } from "../store/slices/authSlice";
 import { setUser, setAiSettings } from "../store/slices/profileSlice";
+import { setAccentColor as setAccentColorAction } from "../store/slices/uiSlice";
+import { setAccentColor } from "../utils/colorUtils";
 import { useNotification } from "../hooks/useNotification";
 import { Modal } from "../components/common/Modal";
 import { ThemeToggle } from "../components/common/ThemeToggle";
@@ -42,6 +44,11 @@ const ProfilePage: React.FC = () => {
       setUsername(userData.username || "");
       setEmail(userData.email || "");
 
+      // Устанавливаем цвет акцента из профиля пользователя
+      const accent = userData.accent_color || "#007bff";
+      dispatch(setAccentColorAction(accent));
+      setAccentColor(accent);
+
       if (userData.avatar) {
         setAvatarUrl(userData.avatar);
         setHasAvatar(true);

src/styles/style-calendar.css

@@ -45,9 +45,9 @@
 }
 
 .calendar-nav-btn:hover {
-  background: #007bff;
+  background: var(--accent-color, #007bff);
   color: white;
-  border-color: #007bff;
+  border-color: var(--accent-color, #007bff);
 }
 
 .calendar-weekdays {
@@ -80,7 +80,7 @@
   font-size: 10px;
   border-radius: 3px;
   cursor: pointer;
-  background: #f8f9fa;
+  background: transparent;
   color: #666;
   border: 1px solid transparent;
   transition: all 0.2s ease;
@@ -88,35 +88,41 @@
 }
 
 .calendar-day:hover {
-  background: #e8f4f8;
-  border-color: #007bff;
+  background: transparent;
+  border-color: var(--accent-color, #007bff);
 }
 
 .calendar-day.other-month {
   color: #ccc;
-  background: #fafafa;
+  background: transparent;
+}
+
+.calendar-day.other-month:hover {
+  border-color: var(--accent-color, #007bff);
 }
 
 .calendar-day.today {
-  background: #007bff;
-  color: white;
+  background: transparent;
+  color: #666;
   font-weight: 600;
-  border-color: #0056cc;
+  border-color: var(--accent-color, #007bff);
 }
 
 .calendar-day.today:hover {
-  background: #0056cc;
+  background: transparent;
+  border-color: var(--accent-color, #007bff);
 }
 
 .calendar-day.selected {
-  background: #28a745;
+  background: var(--accent-color, #007bff);
   color: white;
   font-weight: 600;
-  border-color: #1e7e34;
+  border-color: var(--accent-color, #007bff);
 }
 
 .calendar-day.selected:hover {
-  background: #1e7e34;
+  background: var(--accent-color, #007bff);
+  border-color: var(--accent-color, #007bff);
 }
 
 .main {

src/styles/style.css

@@ -909,7 +909,9 @@ textarea:focus {
 }
 
 .show-more-btn {
-  display: block;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 100%;
   margin-top: 10px;
   padding: 8px;
@@ -921,6 +923,7 @@ textarea:focus {
   cursor: pointer;
   transition: all 0.3s ease;
   text-align: center;
+  gap: 5px;
 }
 
 .show-more-btn:hover {
@@ -1258,19 +1261,17 @@ textarea:focus {
   position: relative;
   display: inline-block;
   overflow: visible;
+  z-index: 1;
 }
 
 .header-dropdown-menu {
   display: block;
-  position: absolute;
-  top: 100%;
-  right: 0;
+  position: fixed;
   background: var(--bg-secondary);
   border: 1px solid var(--border-secondary);
   border-radius: 5px;
   box-shadow: 0 2px 8px var(--shadow-medium);
-  z-index: 1000;
-  margin-top: 2px;
+  z-index: 1001;
   min-width: 60px;
   max-width: 120px;
 }
@@ -1656,14 +1657,13 @@ textarea:focus {
   border: none;
   font-size: 18px;
   cursor: pointer;
-  color: var(--accent-color, #007bff);
+  color: var(--text-secondary);
   padding: 0 3px;
   transition: color 0.3s ease;
 }
 
 .calendar-nav:hover {
-  color: var(--accent-color, #007bff);
-  opacity: 0.8;
+  color: var(--accent-color);
 }
 
 .calendar-weekdays {
@@ -1700,27 +1700,48 @@ textarea:focus {
   padding: 2px;
   font-weight: 500;
   position: relative;
+  background-color: transparent;
+  border: 1px solid transparent;
 }
 
 .calendar-day:hover {
-  background-color: var(--bg-hover);
+  background-color: transparent;
+  border-color: var(--accent-color, #007bff);
 }
 
 .calendar-day.today {
-  background-color: var(--accent-color, #007bff);
-  color: white;
+  background-color: transparent;
+  color: var(--text-primary);
   font-weight: bold;
+  border: 1px solid var(--accent-color, #007bff);
+}
+
+.calendar-day.today:hover {
+  background-color: transparent;
+  border-color: var(--accent-color, #007bff);
 }
 
 .calendar-day.other-month {
   color: var(--text-muted);
+  background-color: transparent;
+  border: 1px solid transparent;
+}
+
+.calendar-day.other-month:hover {
+  border-color: var(--accent-color, #007bff);
 }
 
 .calendar-day.selected {
   background-color: var(--accent-color, #007bff);
   color: white;
   font-weight: bold;
-  opacity: 0.9;
+  opacity: 1;
+  border: 1px solid var(--accent-color, #007bff);
+}
+
+.calendar-day.selected:hover {
+  background-color: var(--accent-color, #007bff);
+  border-color: var(--accent-color, #007bff);
 }
 
 /* Стили календаря для PC версии (темный стиль как на изображении) */
@@ -1733,17 +1754,17 @@ textarea:focus {
   .calendar-month-year {
     font-size: 14px;
     font-weight: 600;
-    color: #ffffff;
+    color: var(--text-primary);
   }
 
   .calendar-nav {
     font-size: 20px;
-    color: #ffffff;
+    color: var(--text-secondary);
     font-weight: 400;
   }
 
   .calendar-nav:hover {
-    opacity: 0.8;
+    color: var(--accent-color);
   }
 
   .calendar-weekdays {
@@ -1763,29 +1784,48 @@ textarea:focus {
     color: #ffffff;
     font-weight: 400;
     background-color: transparent;
+    border: 1px solid transparent;
   }
 
   .calendar-day:hover {
-    background-color: rgba(255, 255, 255, 0.1);
+    background-color: transparent;
+    border-color: var(--accent-color, #007bff);
   }
 
   .calendar-day.other-month {
     color: #999999;
     background-color: transparent;
+    border: 1px solid transparent;
+  }
+
+  .calendar-day.other-month:hover {
+    border-color: var(--accent-color, #007bff);
   }
 
   .calendar-day.selected {
-    background-color: #007bff;
+    background-color: var(--accent-color, #007bff);
     color: white;
     font-weight: 500;
     opacity: 1;
     border-radius: 4px;
+    border: 1px solid var(--accent-color, #007bff);
+  }
+
+  .calendar-day.selected:hover {
+    background-color: var(--accent-color, #007bff);
+    border-color: var(--accent-color, #007bff);
   }
 
   .calendar-day.today {
-    background-color: #007bff;
-    color: white;
+    background-color: transparent;
+    color: #ffffff;
     font-weight: 500;
+    border: 1px solid var(--accent-color, #007bff);
+  }
+
+  .calendar-day.today:hover {
+    background-color: transparent;
+    border-color: var(--accent-color, #007bff);
   }
 }
 
@@ -1876,26 +1916,45 @@ textarea:focus {
   [data-theme="dark"] .calendar-day {
     background-color: transparent;
     color: #ffffff;
+    border: 1px solid transparent;
   }
 
   [data-theme="dark"] .calendar-day:hover {
-    background-color: rgba(255, 255, 255, 0.1);
+    background-color: transparent;
+    border-color: var(--accent-color, #007bff);
   }
 
   [data-theme="dark"] .calendar-day.other-month {
     background-color: transparent;
     color: #999999;
+    border: 1px solid transparent;
+  }
+
+  [data-theme="dark"] .calendar-day.other-month:hover {
+    border-color: var(--accent-color, #007bff);
   }
 
   [data-theme="dark"] .calendar-day.today {
-    background-color: #007bff;
-    color: white;
+    background-color: transparent;
+    color: #ffffff;
+    border: 1px solid var(--accent-color, #007bff);
+  }
+
+  [data-theme="dark"] .calendar-day.today:hover {
+    background-color: transparent;
+    border-color: var(--accent-color, #007bff);
   }
 
   [data-theme="dark"] .calendar-day.selected {
-    background-color: #007bff;
+    background-color: var(--accent-color, #007bff);
     color: white;
     opacity: 1;
+    border: 1px solid var(--accent-color, #007bff);
+  }
+
+  [data-theme="dark"] .calendar-day.selected:hover {
+    background-color: var(--accent-color, #007bff);
+    border-color: var(--accent-color, #007bff);
   }
 
   [data-theme="dark"] .calendar-nav {
@@ -2133,14 +2192,13 @@ textarea:focus {
   border: none;
   font-size: 16px;
   cursor: pointer;
-  color: var(--accent-color, #007bff);
+  color: var(--text-secondary);
   padding: 0 3px;
   transition: color 0.3s ease;
 }
 
 .mobile-sidebar .calendar-nav:hover {
-  color: var(--accent-color, #007bff);
-  opacity: 0.8;
+  color: var(--accent-color);
 }
 
 /* Календарь дней в слайдере */
@@ -2164,55 +2222,93 @@ textarea:focus {
   padding: 1px;
   font-weight: 500;
   position: relative;
-  background-color: var(--bg-tertiary);
+  background-color: transparent;
+  border: 1px solid transparent;
 }
 
 .mobile-sidebar .calendar-day:hover {
-  background-color: var(--bg-quaternary);
+  background-color: transparent;
+  border-color: var(--accent-color, #007bff);
 }
 
 .mobile-sidebar .calendar-day.today {
-  background-color: var(--accent-color, #007bff);
-  color: white;
+  background-color: transparent;
+  color: var(--text-primary);
   font-weight: bold;
+  border: 1px solid var(--accent-color, #007bff);
+}
+
+.mobile-sidebar .calendar-day.today:hover {
+  background-color: transparent;
+  border-color: var(--accent-color, #007bff);
 }
 
 .mobile-sidebar .calendar-day.selected {
   background-color: var(--accent-color, #007bff);
   color: white;
   font-weight: bold;
-  opacity: 0.9;
+  opacity: 1;
+  border: 1px solid var(--accent-color, #007bff);
+}
+
+.mobile-sidebar .calendar-day.selected:hover {
+  background-color: var(--accent-color, #007bff);
+  border-color: var(--accent-color, #007bff);
 }
 
 .mobile-sidebar .calendar-day.other-month {
   color: var(--text-muted);
-  background-color: var(--bg-primary);
+  background-color: transparent;
+  border: 1px solid transparent;
+}
+
+.mobile-sidebar .calendar-day.other-month:hover {
+  border-color: var(--accent-color, #007bff);
 }
 
 /* Темная тема для календаря в мобильном сайдбаре */
 [data-theme="dark"] .mobile-sidebar .calendar-day {
-  background-color: var(--bg-tertiary);
+  background-color: transparent;
   color: var(--text-primary);
+  border: 1px solid transparent;
 }
 
 [data-theme="dark"] .mobile-sidebar .calendar-day:hover {
-  background-color: var(--bg-quaternary);
+  background-color: transparent;
+  border-color: var(--accent-color, #007bff);
 }
 
 [data-theme="dark"] .mobile-sidebar .calendar-day.other-month {
-  background-color: var(--bg-primary);
+  background-color: transparent;
   color: var(--text-muted);
+  border: 1px solid transparent;
+}
+
+[data-theme="dark"] .mobile-sidebar .calendar-day.other-month:hover {
+  border-color: var(--accent-color, #007bff);
 }
 
 [data-theme="dark"] .mobile-sidebar .calendar-day.today {
-  background-color: var(--accent-color, #007bff);
-  color: white;
+  background-color: transparent;
+  color: var(--text-primary);
+  border: 1px solid var(--accent-color, #007bff);
+}
+
+[data-theme="dark"] .mobile-sidebar .calendar-day.today:hover {
+  background-color: transparent;
+  border-color: var(--accent-color, #007bff);
 }
 
 [data-theme="dark"] .mobile-sidebar .calendar-day.selected {
   background-color: var(--accent-color, #007bff);
   color: white;
-  opacity: 0.9;
+  opacity: 1;
+  border: 1px solid var(--accent-color, #007bff);
+}
+
+[data-theme="dark"] .mobile-sidebar .calendar-day.selected:hover {
+  background-color: var(--accent-color, #007bff);
+  border-color: var(--accent-color, #007bff);
 }
 
 [data-theme="dark"] .mobile-sidebar .calendar-nav:hover {