feat: show page title in html title

frontend/src/pages/Accounts.tsx

@@ -1,5 +1,5 @@
 import { Button, Checkbox, CloseButton, Container, Group, Input, Table } from '@mantine/core';
-import { useInputState, useLocalStorage } from '@mantine/hooks';
+import { useDocumentTitle, useInputState, useLocalStorage } from '@mantine/hooks';
 import { useEffect } from 'react';
 import AccountLine from '../components/AccountLine';
 import { LoadingState } from '../rest-model';
@@ -16,6 +16,9 @@ export default function Accounts() {
   const dispatch = useAppDispatch();
   const accountStatus = useAppSelector((state) => state.accounts.status);
   const accountTrie = useAppSelector(getAccountsTrie(hideClosedAccount, filterKeyword));
+  const ledgerTitle = useAppSelector((state) => state.basic.title ?? 'Zhang Accounting');
+
+  useDocumentTitle(`Accounts - ${ledgerTitle}`);
 
   useEffect(() => {
     if (accountStatus === LoadingState.NotReady) {

frontend/src/pages/Budgets.tsx

@@ -1,5 +1,5 @@
 import { ActionIcon, Button, Chip, Container, Group, Popover, Table, Title } from '@mantine/core';
-import { useLocalStorage } from '@mantine/hooks';
+import { useDocumentTitle, useLocalStorage } from '@mantine/hooks';
 import { useState } from 'react';
 import { BudgetListItem } from '../rest-model';
 import { useTranslation } from 'react-i18next';
@@ -10,15 +10,18 @@ import BudgetCategory from '../components/budget/BudgetCategory';
 import { format } from 'date-fns';
 import { MonthPicker } from '@mantine/dates';
 import { IconChevronLeft, IconChevronRight } from '@tabler/icons';
+import { useAppSelector } from '../states';
 
 export default function Budgets() {
   const { t } = useTranslation();
   const [hideZeroAssignBudget, setHideZeroAssignBudget] = useLocalStorage({
     key: 'hideZeroAssignBudget',
     defaultValue: false,
   });
-
   const [date, setDate] = useState<Date>(new Date());
+  const ledgerTitle = useAppSelector((state) => state.basic.title ?? 'Zhang Accounting');
+
+  useDocumentTitle(`Budgets - ${ledgerTitle}`);
 
   const { data: budgets, error } = useSWR<BudgetListItem[]>(`/api/budgets?year=${date.getFullYear()}&month=${date.getMonth() + 1}`, fetcher);
   if (error) return <div>failed to load</div>;

frontend/src/pages/Commodities.tsx

@@ -4,10 +4,14 @@ import { useAppSelector } from '../states';
 import { Heading } from '../components/basic/Heading';
 import { groupBy } from 'lodash-es';
 import CommodityBox from '../components/CommodityBox';
+import { useDocumentTitle } from '@mantine/hooks';
 
 const FRONTEND_DEFAULT_GROUP = '__ZHANG__FRONTEND_DEFAULT__GROUP__';
 export default function Commodities() {
   const { value: commodities, status } = useAppSelector((state) => state.commodities);
+  const ledgerTitle = useAppSelector((state) => state.basic.title ?? 'Zhang Accounting');
+
+  useDocumentTitle(`Commodities - ${ledgerTitle}`);
 
   if (status === LoadingState.Loading || status === LoadingState.NotReady) return <>loading</>;
 

frontend/src/pages/Documents.tsx

@@ -1,5 +1,5 @@
 import { Button, Container, Group, SimpleGrid, Table, Title } from '@mantine/core';
-import { useLocalStorage } from '@mantine/hooks';
+import { useDocumentTitle, useLocalStorage } from '@mantine/hooks';
 import { openContextModal } from '@mantine/modals';
 import { IconLayout2, IconListDetails } from '@tabler/icons';
 import { format } from 'date-fns';
@@ -11,10 +11,14 @@ import { Heading } from '../components/basic/Heading';
 import { groupBy, reverse, sortBy } from 'lodash-es';
 import { TextBadge } from '../components/basic/TextBadge';
 import { useNavigate } from 'react-router';
+import { useAppSelector } from '../states';
 
 export default function Documents() {
   let navigate = useNavigate();
   const [layout, setLayout] = useLocalStorage({ key: `document-list-layout`, defaultValue: 'Grid' });
+  const ledgerTitle = useAppSelector((state) => state.basic.title ?? 'Zhang Accounting');
+
+  useDocumentTitle(`Documents - ${ledgerTitle}`);
 
   const { data: documents, error } = useSWR<Document[]>('/api/documents', fetcher);
 

frontend/src/pages/Home.tsx

@@ -9,9 +9,14 @@ import { StatisticGraphResponse } from '../rest-model';
 import { useAppSelector } from '../states';
 import ReportGraph from '../components/ReportGraph';
 import { Heading } from '../components/basic/Heading';
+import { useDocumentTitle } from '@mantine/hooks';
 
 function Home() {
   const error_total_number = useAppSelector((state) => state.errors.total_number);
+  const ledgerTitle = useAppSelector((state) => state.basic.title ?? 'Zhang Accounting');
+
+  useDocumentTitle(`Dashboard - ${ledgerTitle}`);
+
   const now = new Date();
   const beginning_time = new Date(now.getFullYear(), now.getMonth() - 1, now.getDate(), 0, 0, 1);
   const end_time = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59);

frontend/src/pages/Journals.tsx

@@ -8,7 +8,7 @@ import { useAppDispatch, useAppSelector } from '../states';
 import { fetchJournals, journalsSlice } from '../states/journals';
 import { Heading } from '../components/basic/Heading';
 import { useTranslation } from 'react-i18next';
-import { useDebouncedValue } from '@mantine/hooks';
+import { useDebouncedValue, useDocumentTitle } from '@mantine/hooks';
 import { IconFilter } from '@tabler/icons';
 
 function Journals() {
@@ -17,6 +17,10 @@ function Journals() {
   const [debouncedFilter] = useDebouncedValue(filter, 200);
   const { current_page, status: journalStatus, items, total_number, total_page } = useAppSelector((state) => state.journals);
   const dispatch = useAppDispatch();
+  const ledgerTitle = useAppSelector((state) => state.basic.title ?? 'Zhang Accounting');
+
+  useDocumentTitle(`Journals - ${ledgerTitle}`);
+
   useEffect(() => {
     if (journalStatus === LoadingState.NotReady) {
       dispatch(fetchJournals(debouncedFilter));

frontend/src/pages/RawEdit.tsx

@@ -4,10 +4,15 @@ import { fetcher } from '..';
 import SingleFileEdit from '../components/SingleFileEdit';
 import { TableOfContentsFloating, Tier, ZHANG_VALUE } from '../components/basic/TableOfContentsFloating';
 import { useState } from 'react';
+import { useAppSelector } from '../states';
+import { useDocumentTitle } from '@mantine/hooks';
 
 function RawEdit() {
   const { data, error } = useSWR<string[]>('/api/files', fetcher);
   const [selectedFile, setSelectedFile] = useState<string | null>(null);
+  const ledgerTitle = useAppSelector((state) => state.basic.title ?? 'Zhang Accounting');
+
+  useDocumentTitle(selectedFile ? `${selectedFile} | Raw Editing - ${ledgerTitle}` : `Raw Editing - ${ledgerTitle}`);
 
   if (error) return <div>failed to load</div>;
   if (!data) return <>loading</>;

frontend/src/pages/Report.tsx

@@ -12,6 +12,8 @@ import { StatisticGraphResponse, StatisticResponse, StatisticTypeResponse } from
 import PayeeNarration from '../components/basic/PayeeNarration';
 import BigNumber from 'bignumber.js';
 import { Heading } from '../components/basic/Heading';
+import { useAppSelector } from '../states';
+import { useDocumentTitle } from '@mantine/hooks';
 
 const color_set = ['pink', 'grape', 'violet'];
 
@@ -25,6 +27,9 @@ export default function Report() {
     new Date(new Date().getFullYear(), new Date().getMonth(), 1, 0, 0, 1),
     new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0, 23, 59, 59),
   ]);
+  const ledgerTitle = useAppSelector((state) => state.basic.title ?? 'Zhang Accounting');
+
+  useDocumentTitle(`Report - ${ledgerTitle}`);
 
   useEffect(() => {
     if (value[0] !== null && value[1] !== null) {

frontend/src/pages/Settings.tsx

@@ -1,5 +1,5 @@
 import { Container, Grid, SegmentedControl, SimpleGrid, Skeleton, Table } from '@mantine/core';
-import { useLocalStorage } from '@mantine/hooks';
+import { useDocumentTitle, useLocalStorage } from '@mantine/hooks';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Setting } from '../components/basic/Setting';
@@ -17,6 +17,10 @@ export default function Settings() {
   const { data } = useSWR<Option[]>('/api/options', fetcher);
   const { data: plugins } = useSWR<PluginResponse[]>('/api/plugins', fetcher);
 
+  const ledgerTitle = useAppSelector((state) => state.basic.title ?? 'Zhang Accounting');
+
+  useDocumentTitle(`Settings - ${ledgerTitle}`);
+
   const onLanguageChange = (lang: string) => {
     setLang(lang);
   };

frontend/src/pages/SingleAccount.tsx

@@ -11,6 +11,8 @@ import LoadingComponent from '../components/basic/LoadingComponent';
 import PayeeNarration from '../components/basic/PayeeNarration';
 import { AccountInfo, AccountJournalItem, Document } from '../rest-model';
 import DocumentPreview from '../components/journalPreview/DocumentPreview';
+import { useAppSelector } from '../states';
+import { useDocumentTitle } from '@mantine/hooks';
 
 const useStyles = createStyles((theme) => ({
   calculatedAmount: {
@@ -28,6 +30,10 @@ function SingleAccount() {
 
   const { data: account, error } = useSWR<AccountInfo>(`/api/accounts/${accountName}`, fetcher);
 
+  const ledgerTitle = useAppSelector((state) => state.basic.title ?? 'Zhang Accounting');
+
+  useDocumentTitle(`${accountName} | Accounts - ${ledgerTitle}`);
+
   if (error) return <div>failed to load</div>;
   if (!account) return <div>{error}</div>;
   return (

frontend/src/pages/SingleBudget.tsx

@@ -9,10 +9,15 @@ import PayeeNarration from '../components/basic/PayeeNarration';
 import { BudgetInfoResponse, BudgetIntervalEventResponse } from '../rest-model';
 import { MonthPicker } from '@mantine/dates';
 import { useState } from 'react';
+import { useAppSelector } from '../states';
+import { useDocumentTitle } from '@mantine/hooks';
 
 function SingleBudget() {
   let { budgetName } = useParams();
   const [date, setDate] = useState<Date>(new Date());
+  const ledgerTitle = useAppSelector((state) => state.basic.title ?? 'Zhang Accounting');
+
+  useDocumentTitle(`${budgetName} | Budgets - ${ledgerTitle}`);
 
   const goToMonth = (gap: number) => {
     let newDate = new Date(date);

frontend/src/pages/SingleCommodity.tsx

@@ -6,11 +6,17 @@ import { fetcher } from '..';
 import Amount from '../components/Amount';
 import { CommodityDetail } from '../rest-model';
 import { Heading } from '../components/basic/Heading';
+import { useAppSelector } from '../states';
+import { useDocumentTitle } from '@mantine/hooks';
 
 export default function SingleCommodity() {
   let { commodityName } = useParams();
   const { data, error } = useSWR<CommodityDetail>(`/api/commodities/${commodityName}`, fetcher);
 
+  const ledgerTitle = useAppSelector((state) => state.basic.title ?? 'Zhang Accounting');
+
+  useDocumentTitle(`${commodityName} | Commodities - ${ledgerTitle}`);
+
   if (error) return <div>failed to load</div>;
   if (!data) return <div>loading123</div>;