Обновлены компоненты заголовка, страницы профиля и настроек для улучшения навигации. Реализованы новые кнопки для перехода к заметкам и профилю, добавлена логика выхода из системы. Обновлены стили кнопок навигации и улучшены визуальные эффекты при взаимодействии.
This commit is contained in:
parent
561bf35f13
commit
212a30d9d4
@ -1,5 +0,0 @@
|
||||
---
|
||||
alwaysApply: true
|
||||
---
|
||||
|
||||
Никогда самостоятельно не пытайся запустить сервер. Если это требуется, то попроси это сделать меня!
|
||||
5
.cursor/rules/start-server-rule.mdc
Normal file
5
.cursor/rules/start-server-rule.mdc
Normal file
@ -0,0 +1,5 @@
|
||||
---
|
||||
alwaysApply: true
|
||||
---
|
||||
|
||||
Never try to start the server yourself. If it is required, then ask me to do it!
|
||||
@ -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>
|
||||
</>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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}>
|
||||
|
||||
@ -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);
|
||||
border: 1px solid var(--border-focus);
|
||||
background-color: rgba(var(--accent-color-rgb), 0.1);
|
||||
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);
|
||||
color: var(--accent-color, #007bff);
|
||||
border: 1px solid var(--accent-color, #007bff);
|
||||
background-color: rgba(var(--accent-color-rgb), 0.1);
|
||||
color: var(--accent-color);
|
||||
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);
|
||||
color: var(--accent-color, #007bff);
|
||||
border: 1px solid var(--accent-color, #007bff);
|
||||
background-color: rgba(var(--accent-color-rgb), 0.1);
|
||||
color: var(--accent-color);
|
||||
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);
|
||||
color: var(--accent-color, #007bff);
|
||||
border: 1px solid var(--accent-color, #007bff);
|
||||
background-color: rgba(var(--accent-color-rgb), 0.1);
|
||||
color: var(--accent-color);
|
||||
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 {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user