refactor: simplify auth and instrument pages

src/pages/bond/ui/BondPage/BondPage.view.tsx

@@ -2,11 +2,8 @@ import type { FC } from "react";
 
 import {
 	Alert,
-	Avatar,
 	Badge,
-	Button,
 	Group,
-	Paper,
 	Skeleton,
 	Stack,
 	Text,
@@ -18,6 +15,7 @@ import { useTranslation } from "react-i18next";
 import {
 	InstrumentChart,
 	InstrumentEvents,
+	InstrumentHeader,
 	InstrumentPosition,
 } from "@/features/instrument-details";
 import {
@@ -42,6 +40,8 @@ const BondPageView: FC<BondPageViewProps> = (props) => {
 	const bond = vm.bond;
 	if (!bond) return;
 
+	const subtitle = `${bond.ticker ?? ""} · ${bond.isin ?? ""}`;
+
 	const maturity = bond.maturityDate
 		? formatDate(bond.maturityDate)
 		: t("bond.unknown");
@@ -144,32 +144,13 @@ const BondPageView: FC<BondPageViewProps> = (props) => {
 
 	return (
 		<Stack className={classes.page} gap="lg">
-			<Paper className={classes.section} component="header" withBorder>
-				<Group align="start" justify="space-between">
-					<div className={classes.identity}>
-						<Avatar alt="" radius="md" size={56} src={vm.logoSrc}>
-							{bond.name[0]}
-						</Avatar>
-
-						<div>
-							<Title order={1} size="h2">
-								{bond.name}
-							</Title>
-
-							<Text c="dimmed" size="sm">
-								{bond.ticker} · {bond.isin}
-							</Text>
-						</div>
-					</div>
-
-					<Button
-						disabled={vm.refreshing}
-						onClick={vm.refresh}
-						variant="subtle"
-					>
-						{t("investment.refresh")}
-					</Button>
-				</Group>
+			<InstrumentHeader
+				logoSrc={vm.logoSrc}
+				name={bond.name}
+				onRefresh={vm.refresh}
+				refreshing={vm.refreshing}
+				subtitle={subtitle}
+			>
 
 				<Group gap="xs" mt="md">
 					{!!bond.floatingCoupon && <Badge variant="light">{t("bond.floatingCoupon")}</Badge>}
@@ -224,7 +205,7 @@ const BondPageView: FC<BondPageViewProps> = (props) => {
 						<Metric label={t("bond.lot")} value={lotSize} />
 					</div>
 				</div>
-			</Paper>
+			</InstrumentHeader>
 
 			<BondMetrics metrics={vm.metrics} state={vm.metricsState} />