feat: display app and budget name in title bar

also use BudgetBudget as productName

ref #11

package.json

@@ -1,5 +1,6 @@
 {
   "name": "budgetbudget",
+  "productName": "BudgetBudget",
   "version": "0.0.0-development",
   "description": "work with monthly budgets alongside moneymoney",
   "main": "main.js",
@@ -24,6 +25,7 @@
     "@types/pouchdb": "6.4.0",
     "@types/react": "16.9.23",
     "@types/react-dom": "16.9.5",
+    "@types/react-helmet": "5.0.15",
     "classnames": "2.2.6",
     "concurrently": "5.1.0",
     "date-fns": "2.11.0",
@@ -37,6 +39,7 @@
     "pouchdb": "7.2.1",
     "react": "16.13.0",
     "react-dom": "16.13.0",
+    "react-helmet": "6.0.0",
     "react-scripts": "3.4.0",
     "ts-node": "8.8.1",
     "typescript": "3.8.3",

src/lib/electron.ts

@@ -7,4 +7,5 @@ import {
 const electron = window.require('electron');
 export const ipcRenderer: IpcRenderer = electron.ipcRenderer;
 export const Menu: typeof MenuClass = electron.remote.Menu;
+export const appName: string = electron.remote.app.name;
 export const MenuItem: typeof MenuItemClass = electron.remote.MenuItem;

src/views/Budget/Budget.tsx

@@ -1,7 +1,9 @@
 import React, { Dispatch } from 'react';
+import { Helmet } from 'react-helmet';
 import isAfter from 'date-fns/isAfter';
 import { BudgetState, Action, useBudgetData } from '../../budget';
-import { Header, Content } from '../../components';
+import { Header, Content, Loading } from '../../components';
+import { appName } from '../../lib';
 import Month from '../Month';
 import BudgetSlider from './BudgetSlider';
 import { UiProvider } from './UiContext';
@@ -23,10 +25,18 @@ export default function Budget({ state, dispatch }: Props) {
     currency,
     categories,
   } = useBudgetData(state);
+  const title = (
+    <Helmet>
+      <title>
+        {state.name} - {appName}
+      </title>
+    </Helmet>
+  );
 
   if (error) {
     return (
       <div>
+        {title}
         <p>Error: {error.message}</p>
         {retry && <button onClick={retry}>retry</button>}
       </div>
@@ -35,6 +45,7 @@ export default function Budget({ state, dispatch }: Props) {
 
   return (
     <UiProvider>
+      {title}
       <Header />
       <Content>
         <BudgetSlider

src/views/Budget/NewBudget.tsx

@@ -1,7 +1,9 @@
 import React, { useState } from 'react';
+import { Helmet } from 'react-helmet';
 import { BudgetState, VERSION } from '../../budget';
 import { useAccounts } from '../../moneymoney';
 import { Loading } from '../../components';
+import { appName } from '../../lib';
 
 type Props = {
   onCreate: (budget: BudgetState) => void;
@@ -57,6 +59,9 @@ export default function NewBudget({ onCreate }: Props) {
   const [selectedAccounts, setSelectedAccounts] = useState<string[]>([]);
   return (
     <>
+      <Helmet>
+        <title>New Budget - {appName}</title>
+      </Helmet>
       <h1>Creating a new Budget</h1>
       <label>
         Name