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

---
 src/components/notes/MarkdownToolbar.tsx |  64 ++++++++--
 src/styles/style-calendar.css            |  32 +++--
 src/styles/style.css                     | 153 ++++++++++++++++++-----
 3 files changed, 197 insertions(+), 52 deletions(-)

diff --git a/src/components/notes/MarkdownToolbar.tsx b/src/components/notes/MarkdownToolbar.tsx
index 7b9a57c..e9babc4 100644
--- a/src/components/notes/MarkdownToolbar.tsx
+++ b/src/components/notes/MarkdownToolbar.tsx
@@ -21,28 +21,55 @@ 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 () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
+      return () => {
+        clearTimeout(timeoutId);
+        document.removeEventListener("mousedown", handleClickOutside);
+        window.removeEventListener("resize", updateMenuPosition);
+        window.removeEventListener("scroll", updateMenuPosition);
+      };
+    } else {
+      setMenuPosition(null);
+    }
   }, [showHeaderDropdown]);
 
   const handleMouseDown = (e: React.MouseEvent) => {
@@ -118,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" />
@@ -128,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}
diff --git a/src/styles/style-calendar.css b/src/styles/style-calendar.css
index e0e4c9c..e290515 100644
--- a/src/styles/style-calendar.css
+++ b/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 {
diff --git a/src/styles/style.css b/src/styles/style.css
index 3e23d6a..fd46132 100644
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -1261,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;
 }
@@ -1702,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 версии (темный стиль как на изображении) */
@@ -1765,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);
   }
 }
 
@@ -1878,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 {
@@ -2165,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 {