From 6ed6e045fe7f3af16dd4df9a9043edb17b80cefc Mon Sep 17 00:00:00 2001
From: Fovway <fovway@gmail.com>
Date: Sat, 1 Nov 2025 12:48:00 +0700
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=BE=20=D1=83=D0=BF=D1=80=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD?=
 =?UTF-8?q?=D0=B8=D0=B5=20=D1=86=D0=B2=D0=B5=D1=82=D0=BE=D0=BC=20=D0=B0?=
 =?UTF-8?q?=D0=BA=D1=86=D0=B5=D0=BD=D1=82=D0=B0=20=D0=BF=D0=BE=D0=BB=D1=8C?=
 =?UTF-8?q?=D0=B7=D0=BE=D0=B2=D0=B0=D1=82=D0=B5=D0=BB=D1=8F=20=D0=B2=20?=
 =?UTF-8?q?=D0=B7=D0=B0=D0=B3=D0=BE=D0=BB=D0=BE=D0=B2=D0=BA=D0=B5=20=D0=B8?=
 =?UTF-8?q?=20=D0=BD=D0=B0=20=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86?=
 =?UTF-8?q?=D0=B5=20=D0=BF=D1=80=D0=BE=D1=84=D0=B8=D0=BB=D1=8F,=20=D1=83?=
 =?UTF-8?q?=D0=BB=D1=83=D1=87=D1=88=D0=B5=D0=BD=D0=B0=20=D0=BB=D0=BE=D0=B3?=
 =?UTF-8?q?=D0=B8=D0=BA=D0=B0=20=D0=BE=D1=82=D0=BE=D0=B1=D1=80=D0=B0=D0=B6?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D1=8F=20=D0=B4=D0=BB=D0=B8=D0=BD=D0=BD=D1=8B?=
 =?UTF-8?q?=D1=85=20=D0=B7=D0=B0=D0=BC=D0=B5=D1=82=D0=BE=D0=BA=20=D1=81=20?=
 =?UTF-8?q?=D0=B2=D0=BE=D0=B7=D0=BC=D0=BE=D0=B6=D0=BD=D0=BE=D1=81=D1=82?=
 =?UTF-8?q?=D1=8C=D1=8E=20=D0=B8=D1=85=20=D1=80=D0=B0=D1=81=D0=BA=D1=80?=
 =?UTF-8?q?=D1=8B=D1=82=D0=B8=D1=8F,=20=D0=B0=20=D1=82=D0=B0=D0=BA=D0=B6?=
 =?UTF-8?q?=D0=B5=20=D0=BE=D0=B1=D0=BD=D0=BE=D0=B2=D0=BB=D0=B5=D0=BD=D1=8B?=
 =?UTF-8?q?=20=D1=81=D1=82=D0=B8=D0=BB=D0=B8=20=D0=BA=D0=BD=D0=BE=D0=BF?=
 =?UTF-8?q?=D0=BA=D0=B8=20"=D0=9F=D0=BE=D0=BA=D0=B0=D0=B7=D0=B0=D1=82?=
 =?UTF-8?q?=D1=8C=20=D0=B1=D0=BE=D0=BB=D1=8C=D1=88=D0=B5".?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/Header.tsx         |  7 +++
 src/components/notes/MarkdownToolbar.tsx | 24 +++++----
 src/components/notes/NoteItem.tsx        | 64 +++++++++++++++++++++++-
 src/pages/ProfilePage.tsx                |  7 +++
 src/styles/style.css                     | 21 ++++----
 5 files changed, 103 insertions(+), 20 deletions(-)

diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 3e3f414..a703257 100644
--- a/src/components/layout/Header.tsx
+++ b/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();
diff --git a/src/components/notes/MarkdownToolbar.tsx b/src/components/notes/MarkdownToolbar.tsx
index b25316d..7b9a57c 100644
--- a/src/components/notes/MarkdownToolbar.tsx
+++ b/src/components/notes/MarkdownToolbar.tsx
@@ -45,10 +45,9 @@ export const MarkdownToolbar: React.FC<MarkdownToolbarProps> = ({
     };
   }, [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 +70,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 +90,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
diff --git a/src/components/notes/NoteItem.tsx b/src/components/notes/NoteItem.tsx
index dc5233b..f939c77 100644
--- a/src/components/notes/NoteItem.tsx
+++ b/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">
diff --git a/src/pages/ProfilePage.tsx b/src/pages/ProfilePage.tsx
index 9c3c88f..800462b 100644
--- a/src/pages/ProfilePage.tsx
+++ b/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);
diff --git a/src/styles/style.css b/src/styles/style.css
index 0735660..3e23d6a 100644
--- a/src/styles/style.css
+++ b/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 {
@@ -1656,14 +1659,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 {
@@ -1733,17 +1735,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 {
@@ -2133,14 +2135,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);
 }
 
 /* Календарь дней в слайдере */