Add dynamic breadcrumbs to Header via React Context

Replace hardcoded "Coffee Project / Projects" with a BreadcrumbsContext
that each page registers into via useBreadcrumbs(). The Header reads
breadcrumb items dynamically, renders links for items with href, and
makes "Coffee Project" clickable to open the navigation drawer. Also
removes the unused currentScreenName from Redux appState.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/pages/HomePage/HomePage.tsx

@@ -1,8 +1,13 @@
+"use client"
+
+import { useBreadcrumbs } from "@shared/context/BreadcrumbsContext"
 import { Button } from "@shared/ui"
 
 import cls from "./HomePage.module.scss"
 
 const HomePage = () => {
+	useBreadcrumbs([{ label: "Home" }])
+
 	return (
 		<div className={cls.homepage}>
 			<p className={cls.title}>Coffee Project Starter</p>

src/pages/ProfilePage/ProfilePage.tsx

@@ -0,0 +1,101 @@
+"use client"
+
+import type { JSX } from "react"
+
+import moment from "moment"
+import { FunctionComponent } from "react"
+
+import {
+	AvatarUpload,
+	ChangePasswordForm,
+	EditProfileForm,
+	LogoutButton,
+} from "@features/profile"
+import api from "@shared/api"
+import { useBreadcrumbs } from "@shared/context/BreadcrumbsContext"
+import { StaticLoader } from "@shared/ui/Loader"
+import { Card } from "@shared/ui"
+
+import { IProfilePageProps } from "./ProfilePage.d"
+import styles from "./ProfilePage.module.scss"
+
+export const ProfilePage: FunctionComponent<
+	IProfilePageProps
+> = (): JSX.Element => {
+	useBreadcrumbs([{ label: "Profile" }])
+
+	const {
+		data: user,
+		isLoading,
+		refetch,
+	} = api.useQuery("get", "/api/users/me/")
+
+	const { mutate: updateUser } = api.useMutation(
+		"patch",
+		"/api/users/{user_id}/",
+	)
+
+	const handleAvatarChange = (url: string) => {
+		if (!user) return
+		updateUser(
+			{
+				params: { path: { user_id: user.id } },
+				body: { avatar: url },
+			},
+			{ onSuccess: () => refetch() },
+		)
+	}
+
+	if (isLoading) return <StaticLoader fullscreen />
+
+	if (!user) {
+		return (
+			<div className={styles.root} data-testid="ProfilePage">
+				<p>Не удалось загрузить данные пользователя</p>
+			</div>
+		)
+	}
+
+	return (
+		<div className={styles.root} data-testid="ProfilePage">
+			<div className={styles.container}>
+				<AvatarUpload
+					currentAvatarUrl={user.avatar}
+					onAvatarChange={handleAvatarChange}
+				/>
+
+				<Card className={styles.section}>
+					<EditProfileForm user={user} />
+				</Card>
+
+				<Card className={styles.section}>
+					<ChangePasswordForm />
+				</Card>
+
+				<Card className={styles.section}>
+					<h3 className={styles.sectionTitle}>Аккаунт</h3>
+					<div className={styles.infoList}>
+						<div className={styles.infoRow}>
+							<span className={styles.infoLabel}>Логин</span>
+							<span className={styles.infoValue}>{user.username}</span>
+						</div>
+						<div className={styles.infoRow}>
+							<span className={styles.infoLabel}>Дата регистрации</span>
+							<span className={styles.infoValue}>
+								{moment(user.date_joined).format("DD.MM.YYYY")}
+							</span>
+						</div>
+						<div className={styles.infoRow}>
+							<span className={styles.infoLabel}>Статус</span>
+							<span className={styles.infoValue}>
+								{user.is_active ? "Активен" : "Неактивен"}
+							</span>
+						</div>
+					</div>
+				</Card>
+
+				<LogoutButton />
+			</div>
+		</div>
+	)
+}

src/pages/ProjectWorkspacePage/ProjectWorkspacePage.tsx

@@ -1,13 +1,26 @@
+"use client"
+
 import type { JSX } from "react"
 
+import { useParams } from "next/navigation"
 import { FunctionComponent } from "react"
 
+import { useBreadcrumbs } from "@shared/context/BreadcrumbsContext"
+
 import { IProjectWorkspacePageProps } from "./ProjectWorkspacePage.d"
 import styles from "./ProjectWorkspacePage.module.scss"
 
 export const ProjectWorkspacePage: FunctionComponent<
 	IProjectWorkspacePageProps
 > = (): JSX.Element => {
+	const params = useParams<{ project_id: string }>()
+	const projectId = params?.project_id ?? ""
+
+	useBreadcrumbs([
+		{ label: "Projects", href: "/projects" },
+		{ label: `Project ${projectId}` },
+	])
+
 	return (
 		<div className={styles.root} data-testid="ProjectWorkspacePage">
 			ProjectWorkspacePage Component

src/pages/ProjectsPage/ProjectsPage.tsx

@@ -1,12 +1,21 @@
 "use client"
 
+import type { components } from "@shared/api/__generated__/openapi.types"
 import type { JSX } from "react"
 
 import { PlusIcon } from "lucide-react"
 import { FunctionComponent, useState } from "react"
 
+import { useRouter } from "next/navigation"
+
 import { ProjectCard } from "@entities/ProjectCard"
-import { CreateProjectModal } from "@features/CreateProjectModal"
+import { useBreadcrumbs } from "@shared/context/BreadcrumbsContext"
+import {
+	CreateProjectModal,
+	DeleteProjectModal,
+	EditProjectModal,
+	RenameProjectModal,
+} from "@features/project"
 import api from "@shared/api"
 import { Button } from "@shared/ui"
 import { StaticLoader } from "@shared/ui/Loader"
@@ -14,13 +23,18 @@ import { ProjectsHeader } from "@widgets/Projects/ProjectsHeader"
 
 import { IProjectsPageProps } from "./ProjectsPage.d"
 import styles from "./ProjectsPage.module.scss"
-import { useRouter } from "next/navigation"
+
+type ProjectRead = components["schemas"]["ProjectRead"]
 
 export const ProjectsPage: FunctionComponent<
 	IProjectsPageProps
 > = (): JSX.Element => {
-	const router = useRouter();
+	useBreadcrumbs([{ label: "Projects", href: "/projects" }])
+	const router = useRouter()
 	const [isCreateModalOpen, setIsCreateModalOpen] = useState(false)
+	const [editProject, setEditProject] = useState<ProjectRead | null>(null)
+	const [renameProject, setRenameProject] = useState<ProjectRead | null>(null)
+	const [deleteProject, setDeleteProject] = useState<ProjectRead | null>(null)
 
 	const {
 		data: projects,
@@ -57,6 +71,45 @@ export const ProjectsPage: FunctionComponent<
 				}}
 			/>
 
+			{editProject && (
+				<EditProjectModal
+					open
+					onOpenChange={(open) => {
+						if (!open) setEditProject(null)
+					}}
+					project={editProject}
+					onUpdated={async () => {
+						await refetchProjects()
+					}}
+				/>
+			)}
+
+			{renameProject && (
+				<RenameProjectModal
+					open
+					onOpenChange={(open) => {
+						if (!open) setRenameProject(null)
+					}}
+					project={renameProject}
+					onRenamed={async () => {
+						await refetchProjects()
+					}}
+				/>
+			)}
+
+			{deleteProject && (
+				<DeleteProjectModal
+					open
+					onOpenChange={(open) => {
+						if (!open) setDeleteProject(null)
+					}}
+					project={deleteProject}
+					onDeleted={async () => {
+						await refetchProjects()
+					}}
+				/>
+			)}
+
 			<ProjectsHeader />
 
 			<div className={styles.projectList}>
@@ -64,12 +117,14 @@ export const ProjectsPage: FunctionComponent<
 					<ProjectCard
 						key={project.id}
 						project={project}
-						// Mock random progress for demo since API doesn't provide it yet
 						progress={project.status === "PROCESSING" ? 45 : 0}
 						currentAction={
 							project.status === "PROCESSING" ? "Rendering" : undefined
 						}
 						onClick={() => router.push(`/projects/${project.id}`)}
+						onEdit={() => setEditProject(project)}
+						onRename={() => setRenameProject(project)}
+						onDelete={() => setDeleteProject(project)}
 					/>
 				))}
 			</div>