Add DetailsBackButton component for header navigation

src/features/online-board/components/DetailsBackButton/DetailsBackButton.scss

@@ -0,0 +1,22 @@
+.details-back-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  background: #e3f0ff;
+  color: #1a3a5c;
+  border-radius: 6px;
+  text-decoration: none;
+  font-size: 14px;
+  font-family: inherit;
+  cursor: pointer;
+
+  &:hover {
+    background: #c7dff5;
+  }
+
+  &__arrow {
+    display: inline-block;
+    font-size: 16px;
+  }
+}

src/features/online-board/components/DetailsBackButton/DetailsBackButton.test.tsx

@@ -0,0 +1,50 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { DetailsBackButton } from "./DetailsBackButton.js";
+
+vi.mock("@modern-js/runtime/router", () => ({
+  Link: ({
+    children,
+    to,
+    ...props
+  }: {
+    children: React.ReactNode;
+    to: string;
+    [key: string]: unknown;
+  }) => (
+    <a href={to} {...props}>
+      {children}
+    </a>
+  ),
+}));
+
+vi.mock("@/i18n/provider.js", () => ({
+  useTranslation: () => ({ t: (k: string) => k }),
+}));
+
+describe("DetailsBackButton", () => {
+  it("has data-testid details-back-button", () => {
+    render(<DetailsBackButton locale="ru" />);
+    expect(screen.getByTestId("details-back-button")).toBeTruthy();
+  });
+
+  it("links to /ru/onlineboard for locale='ru'", () => {
+    render(<DetailsBackButton locale="ru" />);
+    expect(screen.getByTestId("details-back-button").getAttribute("href")).toBe(
+      "/ru/onlineboard",
+    );
+  });
+
+  it("uses the provided locale", () => {
+    render(<DetailsBackButton locale="en" />);
+    expect(screen.getByTestId("details-back-button").getAttribute("href")).toBe(
+      "/en/onlineboard",
+    );
+  });
+
+  it("renders SHARED.BACK-BOARD label", () => {
+    render(<DetailsBackButton locale="ru" />);
+    expect(screen.getByText("SHARED.BACK-BOARD")).toBeTruthy();
+  });
+});

src/features/online-board/components/DetailsBackButton/DetailsBackButton.tsx

@@ -0,0 +1,24 @@
+import type { FC } from "react";
+import { Link } from "@modern-js/runtime/router";
+import { useTranslation } from "@/i18n/provider.js";
+import "./DetailsBackButton.scss";
+
+export interface DetailsBackButtonProps {
+  locale: string;
+}
+
+export const DetailsBackButton: FC<DetailsBackButtonProps> = ({ locale }) => {
+  const { t } = useTranslation();
+  return (
+    <Link
+      to={`/${locale}/onlineboard`}
+      className="details-back-button"
+      data-testid="details-back-button"
+    >
+      <span className="details-back-button__arrow" aria-hidden="true">
+        {"\u2190"}
+      </span>
+      <span>{t("SHARED.BACK-BOARD")}</span>
+    </Link>
+  );
+};

src/features/online-board/components/DetailsBackButton/index.ts

@@ -0,0 +1,2 @@
+export { DetailsBackButton } from "./DetailsBackButton.js";
+export type { DetailsBackButtonProps } from "./DetailsBackButton.js";