refactor: clarify frontend module ownership

src/features/auth/model/auth-context.ts

@@ -7,6 +7,7 @@ type AuthContextValue = {
 	logout: () => Promise<void>;
 	ready: boolean;
 	register: (email: string, password: string) => Promise<void>;
+	signedOut: boolean;
 	user: undefined | User;
 };
 

src/features/auth/model/auth.vm.ts

@@ -31,6 +31,7 @@ function useAuthProviderVm() {
 	const [user, setUser] = useState<undefined | User>(undefined);
 	const accessTokenRef = useRef<string | undefined>(undefined);
 	const [ready, setReady] = useState(false);
+	const [signedOut, setSignedOut] = useState(false);
 
 	const generationRef = useRef(0);
 	const userRef = useRef<undefined | User>(undefined);
@@ -57,6 +58,7 @@ function useAuthProviderVm() {
 			const changedIdentity
 				= userRef.current && userRef.current.id !== authentication.user.id;
 
+			setSignedOut(false);
 			accessTokenRef.current = authentication.accessToken;
 
 			if (changedIdentity) {
@@ -136,6 +138,7 @@ function useAuthProviderVm() {
 	}
 
 	async function logout() {
+		setSignedOut(true);
 		clearSession();
 		await serialize(async () => {
 			await apiClient.POST("/api/v1/auth/logout");
@@ -159,6 +162,7 @@ function useAuthProviderVm() {
 		ready,
 		register: (email: string, password: string) =>
 			authenticate("/api/v1/auth/register", email, password),
+		signedOut,
 		user,
 	};
 

src/features/instrument-details/index.ts

@@ -1,10 +1,15 @@
 export { section, type SectionState } from "./model/section";
 export { useInstrumentParameters } from "./model/useInstrumentParameters";
 export { InstrumentChart } from "./ui/InstrumentChart/InstrumentChart.view";
-export { default as instrumentDetailsStyles } from "./ui/InstrumentDetails.module.css";
 export { InstrumentEvents } from "./ui/InstrumentEvents.view";
 export { InstrumentHeader } from "./ui/InstrumentHeader/InstrumentHeader.view";
-export { InstrumentMetric } from "./ui/InstrumentMetric.view";
+export {
+	InstrumentMetrics,
+	InstrumentPage,
+	InstrumentPrice,
+	InstrumentTerms,
+} from "./ui/InstrumentLayout.view";
+export { InstrumentMetric } from "./ui/InstrumentMetric/InstrumentMetric.view";
 export { InstrumentPageState } from "./ui/InstrumentPageState.view";
 export { InstrumentPosition } from "./ui/InstrumentPosition.view";
 export { InstrumentQuoteStatus } from "./ui/InstrumentQuoteStatus.view";

src/features/instrument-details/model/types.ts

@@ -1,10 +1,13 @@
+import type { BondCandles, BondPosition } from "@/entities/bond";
 import type { BrokerageOperation } from "@/entities/broker-operation";
-import type { paths } from "@/shared/api";
+import type { StockCandles, StockPosition } from "@/entities/stock";
 
 import type { SectionState } from "./section";
 
-type Candles = NonNullable<
-	paths["/api/v1/stocks/{uid}/candles"]["get"]["responses"][200]["content"]["application/json"]["data"]
+type Candles = Pick<BondCandles | StockCandles,
+	"candles"
+	| "currency"
+	| "historyFrom"
 >;
 
 type InstrumentChartProps = { priceUnit?: "percent"; vm: InstrumentChartVm };
@@ -33,8 +36,6 @@ type InstrumentPositionVm = {
 	positionState: SectionState;
 };
 
-type Position = NonNullable<
-	paths["/api/v1/stocks/{uid}/position"]["get"]["responses"][200]["content"]["application/json"]["data"]
->;
+type Position = BondPosition | StockPosition;
 
 export type { InstrumentChartProps, InstrumentEventsVm, InstrumentPositionVm };

src/features/instrument-details/ui/InstrumentDetails.module.css

@@ -75,15 +75,14 @@
 	overflow-wrap: anywhere;
 }
 .metricsGrid {
+	--instrument-metric-padding: var(--mantine-spacing-sm);
+	--instrument-metric-background: var(--wl-color-subtle);
+	--instrument-metric-radius: var(--mantine-radius-md);
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
 	gap: var(--mantine-spacing-lg);
 }
-.metricsGrid > div {
-	padding: var(--mantine-spacing-sm);
-	background: var(--wl-color-subtle);
-	border-radius: var(--mantine-radius-md);
-}
+
 @media (max-width: 48em) {
 	.metricsGrid {
 		grid-template-columns: repeat(2, minmax(0, 1fr));

src/features/instrument-details/ui/InstrumentLayout.view.tsx

@@ -0,0 +1,31 @@
+import type { FC, PropsWithChildren } from "react";
+
+import { Stack, Text, type TextProps, Title } from "@mantine/core";
+
+import classes from "./InstrumentDetails.module.css";
+
+type InstrumentPriceProps = PropsWithChildren<Pick<TextProps, "mt">>;
+
+type InstrumentTermsProps = PropsWithChildren<{ title: string }>;
+
+const InstrumentPage: FC<PropsWithChildren> = props => (
+	<Stack className={classes.page} gap="lg">{props.children}</Stack>
+);
+
+const InstrumentPrice: FC<InstrumentPriceProps> = props => (
+	<Text className={classes.price} mt={props.mt}>{props.children}</Text>
+);
+
+const InstrumentMetrics: FC<PropsWithChildren> = props => (
+	<div className={classes.metricsGrid}>{props.children}</div>
+);
+
+const InstrumentTerms: FC<InstrumentTermsProps> = props => (
+	<div className={classes.embeddedSection}>
+		<Title mb="md" order={2} size="h3">{props.title}</Title>
+
+		{props.children}
+	</div>
+);
+
+export { InstrumentMetrics, InstrumentPage, InstrumentPrice, InstrumentTerms };

src/features/instrument-details/ui/InstrumentMetric/InstrumentMetric.module.css

@@ -0,0 +1,5 @@
+.metric {
+	padding: var(--instrument-metric-padding, 0);
+	background: var(--instrument-metric-background, transparent);
+	border-radius: var(--instrument-metric-radius, 0);
+}

src/features/instrument-details/ui/InstrumentMetric/InstrumentMetric.view.tsx

@@ -2,10 +2,12 @@ import type { FC } from "react";
 
 import { Text } from "@mantine/core";
 
+import classes from "./InstrumentMetric.module.css";
+
 type InstrumentMetricProps = { label: string; value: string };
 
 const InstrumentMetric: FC<InstrumentMetricProps> = props => (
-	<div>
+	<div className={classes.metric}>
 		<Text c="dimmed" size="xs">
 			{props.label}
 		</Text>

src/features/tbank-connection/index.ts

@@ -1,2 +1,6 @@
 export { useScreenSync } from "./model/screen-sync";
+export {
+	InvestmentRefreshState,
+	type InvestmentRefreshStateProps,
+} from "./ui/InvestmentRefreshState/InvestmentRefreshState.view";
 export { TbankConnectionSection } from "./ui/TbankConnectionSection/TbankConnectionSection";

src/features/tbank-connection/model/connection-boundary.ts

@@ -9,7 +9,14 @@ import {
 type TbankConnectionStatus
 	= paths["/api/v1/tbank-connection"]["get"]["responses"][200]["content"]["application/json"];
 
-const brokerageAccountsPath = "/api/v1/brokerage-accounts";
+function isInvestmentPath(path: string) {
+	return [
+		"/api/v1/brokerage-accounts",
+		"/api/v1/stocks",
+		"/api/v1/bonds",
+		"/api/v1/tbank-sync",
+	].some(root => path === root || path.startsWith(`${root}/`));
+}
 
 const tbankConnectionQueryOptions = () =>
 	apiQueryClient.queryOptions("get", "/api/v1/tbank-connection");
@@ -20,13 +27,7 @@ function commitTbankConnectionBoundary(
 	queryClient: QueryClient,
 	status: TbankConnectionStatus,
 ) {
-	invalidateApiRequests(
-		path =>
-			path.startsWith("/api/v1/brokerage-accounts")
-			|| path.startsWith("/api/v1/stocks")
-			|| path.startsWith("/api/v1/bonds")
-			|| path.startsWith("/api/v1/tbank-sync"),
-	);
+	invalidateApiRequests(isInvestmentPath);
 	queryClient.setQueryData(tbankConnectionQueryKey, status);
 	void queryClient.resetQueries({
 		predicate: ({ queryKey }) => {
@@ -35,13 +36,7 @@ function commitTbankConnectionBoundary(
 			return (
 				method === "get"
 				&& typeof path === "string"
-				&& (path.startsWith("/api/v1/tbank-sync")
-					|| path === "/api/v1/bonds"
-					|| path.startsWith("/api/v1/bonds/")
-					|| path === "/api/v1/stocks"
-					|| path.startsWith("/api/v1/stocks/")
-					|| path === brokerageAccountsPath
-					|| path.startsWith(`${brokerageAccountsPath}/`))
+				&& isInvestmentPath(path)
 			);
 		},
 	});

src/features/tbank-connection/ui/InvestmentRefreshState/InvestmentRefreshState.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { Stack, Text } from "@mantine/core";
+import { fn } from "storybook/test";
+
+import { InvestmentRefreshState } from "./InvestmentRefreshState.view";
+
+const meta = {
+	args: { labelScope: "portfolio", refreshError: false, refreshing: false, retry: fn() },
+	argTypes: {
+		refreshError: { control: "boolean" },
+		refreshing: { control: "boolean" },
+		retry: { control: false },
+	},
+	component: InvestmentRefreshState,
+	parameters: {
+		docs: {
+			description: {
+				component:
+					"Обновление уже показанных данных портфеля. Синтетические суммы остаются видимыми вместе с InvestmentRefreshState при refetch и его ошибке. Суммы синтетические; это presentation Client Cached Snapshot, без QueryClient и запроса API. Retry регистрирует локальное действие в Actions и не доказывает восстановление API.",
+			},
+		},
+	},
+	render: arguments_ => (
+		<Stack>
+			<Text>125 000,50 ₽ · 320 USD</Text>
+
+			<InvestmentRefreshState {...arguments_} />
+		</Stack>
+	),
+	tags: ["autodocs"],
+	title: "Product/InvestmentRefreshState",
+} satisfies Meta<typeof InvestmentRefreshState>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Idle: Story = { name: "Сохранённые данные" };
+export const Refreshing: Story = {
+	args: { refreshing: true },
+	name: "Фоновое обновление",
+};
+export const RefreshError: Story = {
+	args: { labelScope: "portfolio", refreshError: true },
+	name: "Ошибка обновления с retry",
+};
+
+export const SourceFailure: Story = {
+	args: { labelScope: "portfolio", refreshError: true, sourceError: true },
+	name: "Ошибка синхронизации сохраняет суммы",
+};

src/features/tbank-connection/ui/InvestmentRefreshState/InvestmentRefreshState.view.tsx

@@ -0,0 +1,67 @@
+import type { FC } from "react";
+
+import { Alert, Button, Group, Loader, Stack, Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+
+import { formatSnapshotTime } from "@/shared/lib";
+
+type InvestmentRefreshStateProps = {
+	labelScope?: "accounts" | "portfolio";
+	lastSuccessfulAt?: null | string;
+	refreshError?: boolean;
+	refreshing?: boolean;
+	retry?: () => void;
+	sourceError?: boolean;
+};
+
+const InvestmentRefreshState: FC<InvestmentRefreshStateProps> = (props) => {
+	const { labelScope = "accounts", refreshError = false, refreshing = false, retry } = props;
+	const { t } = useTranslation();
+
+	return (
+		<>
+			{!!props.lastSuccessfulAt && (
+				<Text c="dimmed" size="xs">
+					{t("investment.sourceTime", {
+						date: formatSnapshotTime(props.lastSuccessfulAt),
+					})}
+				</Text>
+			)}
+
+			<Button
+				disabled={refreshing}
+				onClick={retry}
+				variant="light"
+				w="fit-content"
+			>
+				{t(refreshError ? "accounts.retry" : "investment.refresh")}
+			</Button>
+
+			{!!refreshing && (
+				<Group aria-label={t(`${labelScope}.refreshing`)} gap="xs" role="status">
+					<Loader size="sm" />
+
+					<Text c="dimmed" size="sm">
+						{t(`${labelScope}.refreshing`)}
+					</Text>
+				</Group>
+			)}
+
+			{!!refreshError && (
+				<Alert aria-live="polite" color="orange" role="status">
+					<Stack gap="sm">
+						<Text>
+							{t(
+								props.sourceError
+									? "investment.syncFailed"
+									: `${labelScope}.refreshError`,
+							)}
+						</Text>
+					</Stack>
+				</Alert>
+			)}
+		</>
+	);
+};
+
+export { InvestmentRefreshState, type InvestmentRefreshStateProps };