refactor: simplify auth and instrument pages

src/features/instrument-details/ui/InstrumentChart/InstrumentChart.vm.ts

@@ -4,6 +4,8 @@ import { formatDate, formatDecimal, formatMoney } from "@/shared/lib";
 
 import type { InstrumentChartProps } from "../../model/types";
 
+import { instrumentPeriods } from "../../model/useInstrumentParameters";
+
 function useInstrumentChartVm(props: InstrumentChartProps) {
 	const { vm } = props;
 	const { t } = useTranslation();
@@ -34,7 +36,7 @@ function useInstrumentChartVm(props: InstrumentChartProps) {
 		return { ...candle, price };
 	});
 
-	const periodOptions = ["month", "halfYear", "year", "all"].map(value => ({
+	const periodOptions = instrumentPeriods.map(value => ({
 		label: t(`stock.periods.${value}`),
 		value,
 	}));

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

@@ -0,0 +1,17 @@
+.header {
+	padding: var(--mantine-spacing-lg);
+	border-radius: var(--mantine-radius-lg);
+	min-width: 0;
+	overflow-wrap: anywhere;
+}
+.identity {
+	display: flex;
+	align-items: center;
+	gap: var(--mantine-spacing-md);
+	min-width: 0;
+}
+@media (max-width: 48em) {
+	.header {
+		padding: var(--mantine-spacing-md);
+	}
+}

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

@@ -0,0 +1,45 @@
+import type { FC, PropsWithChildren, ReactNode } from "react";
+
+import { Avatar, Button, Group, Paper, Text, Title } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+
+import classes from "./InstrumentHeader.module.css";
+
+type InstrumentHeaderProps = PropsWithChildren<{
+	logoSrc: null | string;
+	name: string;
+	onRefresh: () => void;
+	refreshing: boolean;
+	subtitle: ReactNode;
+}>;
+
+const InstrumentHeader: FC<InstrumentHeaderProps> = (props) => {
+	const { children, logoSrc, name, onRefresh, refreshing, subtitle } = props;
+	const { t } = useTranslation();
+
+	return (
+		<Paper className={classes.header} component="header" withBorder>
+			<Group align="start" justify="space-between">
+				<div className={classes.identity}>
+					<Avatar alt="" key={logoSrc} radius="md" size={56} src={logoSrc}>
+						{name[0]}
+					</Avatar>
+
+					<div>
+						<Title order={1} size="h2">{name}</Title>
+
+						<Text c="dimmed" size="sm">{subtitle}</Text>
+					</div>
+				</div>
+
+				<Button disabled={refreshing} onClick={onRefresh} variant="subtle">
+					{t("investment.refresh")}
+				</Button>
+			</Group>
+
+			{children}
+		</Paper>
+	);
+};
+
+export { InstrumentHeader };

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

@@ -0,0 +1,66 @@
+import type { FC } from "react";
+
+import { Anchor, Button, Skeleton, Stack, Text, Title } from "@mantine/core";
+import { LoadingSkeleton } from "@wealthledger/ui";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router";
+
+import { ApiErrorCode, isApiErrorCode } from "@/shared/api";
+
+type InstrumentPageStateProps = {
+	code?: string;
+	kind: "bond" | "stock";
+	loading: boolean;
+	retry: () => void;
+};
+
+const InstrumentPageState: FC<InstrumentPageStateProps> = (props) => {
+	const { code, kind, loading, retry } = props;
+	const { t } = useTranslation();
+	if (loading) return (
+		<LoadingSkeleton label={t(`${kind}.loading`)}>
+			<Stack>
+				<Skeleton h={110} />
+
+				<Skeleton h={350} />
+
+				<Skeleton h={170} />
+			</Stack>
+		</LoadingSkeleton>
+	);
+
+	const ambiguousCode = kind === "stock"
+		? ApiErrorCode.StockTickerAmbiguous
+		: ApiErrorCode.BondTickerAmbiguous;
+
+	let message = t(`${kind}.unavailableText`);
+	if (isApiErrorCode(code, ambiguousCode))
+		message = t(`${kind}.ambiguousTicker`);
+	if (
+		isApiErrorCode(code, ApiErrorCode.TbankNotConnected)
+		|| isApiErrorCode(code, ApiErrorCode.InvalidTbankToken)
+	)
+		message = t(`${kind}.connect`);
+
+	return (
+		<Stack role="alert">
+			<Title order={1}>{t(`${kind}.unavailable`)}</Title>
+
+			<Text>{message}</Text>
+
+			<Anchor component={Link} to={`/${kind}s`}>
+				{t(`${kind}.backToSearch`)}
+			</Anchor>
+
+			<Anchor component={Link} to="/settings">
+				{t("accounts.openSettings")}
+			</Anchor>
+
+			<Button onClick={retry} variant="default">
+				{t("accounts.retry")}
+			</Button>
+		</Stack>
+	);
+};
+
+export { InstrumentPageState };