Add title tag

ui/package-lock.json

@@ -8933,6 +8933,24 @@
         "scheduler": "^0.18.0"
       }
     },
+    "react-fast-compare": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
+      "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==",
+      "dev": true
+    },
+    "react-helmet": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-5.2.1.tgz",
+      "integrity": "sha512-CnwD822LU8NDBnjCpZ4ySh8L6HYyngViTZLfBBb3NjtrpN8m49clH8hidHouq20I51Y6TpCTISCBbqiY5GamwA==",
+      "dev": true,
+      "requires": {
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.5.4",
+        "react-fast-compare": "^2.0.2",
+        "react-side-effect": "^1.1.0"
+      }
+    },
     "react-is": {
       "version": "16.8.6",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz",
@@ -8998,6 +9016,15 @@
         "prop-types": "^15.6.1"
       }
     },
+    "react-side-effect": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-1.2.0.tgz",
+      "integrity": "sha512-v1ht1aHg5k/thv56DRcjw+WtojuuDHFUgGfc+bFHOWsF4ZK6C2V57DO0Or0GPsg6+LSTE0M6Ry/gfzhzSwbc5w==",
+      "dev": true,
+      "requires": {
+        "shallowequal": "^1.0.1"
+      }
+    },
     "react-spring": {
       "version": "8.0.27",
       "resolved": "https://registry.npmjs.org/react-spring/-/react-spring-8.0.27.tgz",

ui/package.json

@@ -49,6 +49,7 @@
     "isarray": "^2.0.5",
     "lint-staged": "^10.0.7",
     "parcel-plugin-sw-cache": "^0.3.1",
+    "react-helmet": "^5.2.1",
     "react-router-prop-types": "^1.0.4"
   },
   "cache": {

ui/src/App.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import { createGlobalStyle } from 'styled-components'
+import { Helmet } from 'react-helmet'
 import Routes from './Routes'
 import Messages from './components/messages/Messages'
 
@@ -14,6 +15,12 @@ class App extends Component {
   render() {
     return (
       <>
+        <Helmet>
+          <meta
+            name="description"
+            content="Simple and User-friendly Photo Gallery for Personal Servers"
+          />
+        </Helmet>
         <GlobalStyle />
         <Routes />
         <Messages />

ui/src/Layout.js

@@ -7,6 +7,7 @@ import Sidebar from './components/sidebar/Sidebar'
 import { Query } from 'react-apollo'
 import gql from 'graphql-tag'
 import { Authorized } from './AuthorizedRoute'
+import Helmet from 'react-helmet'
 
 const adminQuery = gql`
   query adminQuery {
@@ -90,52 +91,52 @@ const Title = styled.h1`
   padding: 5px 12px;
 `
 
-class Layout extends Component {
-  render() {
-    return (
-      <Container>
-        <Authorized>
-          <SideMenu>
-            <SideButton to="/photos" exact>
-              <Icon name="image outline" />
-              <SideButtonLabel>Photos</SideButtonLabel>
-            </SideButton>
-            <SideButton to="/albums" exact>
-              <Icon name="images outline" />
-              <SideButtonLabel>Albums</SideButtonLabel>
-            </SideButton>
-            <Query query={adminQuery}>
-              {({ loading, error, data }) => {
-                if (data && data.myUser && data.myUser.admin) {
-                  return (
-                    <SideButton to="/settings" exact>
-                      <Icon name="settings" />
-                      <SideButtonLabel>Settings</SideButtonLabel>
-                    </SideButton>
-                  )
-                }
+const Layout = ({ children, title }) => (
+  <Container>
+    <Helmet>
+      <title>{title ? `${title} - Photoview` : `Photoview`}</title>
+    </Helmet>
+    <Authorized>
+      <SideMenu>
+        <SideButton to="/photos" exact>
+          <Icon name="image outline" />
+          <SideButtonLabel>Photos</SideButtonLabel>
+        </SideButton>
+        <SideButton to="/albums" exact>
+          <Icon name="images outline" />
+          <SideButtonLabel>Albums</SideButtonLabel>
+        </SideButton>
+        <Query query={adminQuery}>
+          {({ loading, error, data }) => {
+            if (data && data.myUser && data.myUser.admin) {
+              return (
+                <SideButton to="/settings" exact>
+                  <Icon name="settings" />
+                  <SideButtonLabel>Settings</SideButtonLabel>
+                </SideButton>
+              )
+            }
 
-                return null
-              }}
-            </Query>
-          </SideMenu>
-        </Authorized>
-        <Sidebar>
-          <Content id="layout-content">
-            {this.props.children}
-            <div style={{ height: 24 }}></div>
-          </Content>
-        </Sidebar>
-        <Header>
-          <Title>Photoview</Title>
-        </Header>
-      </Container>
-    )
-  }
-}
+            return null
+          }}
+        </Query>
+      </SideMenu>
+    </Authorized>
+    <Sidebar>
+      <Content id="layout-content">
+        {children}
+        <div style={{ height: 24 }}></div>
+      </Content>
+    </Sidebar>
+    <Header>
+      <Title>Photoview</Title>
+    </Header>
+  </Container>
+)
 
 Layout.propTypes = {
   children: PropTypes.any.isRequired,
+  title: PropTypes.string,
 }
 
 export default Layout

ui/src/Pages/AllAlbumsPage/AlbumsPage.js

@@ -21,7 +21,7 @@ const getAlbumsQuery = gql`
 class AlbumsPage extends Component {
   render() {
     return (
-      <Layout>
+      <Layout title="Albums">
         <h1>Albums</h1>
         <Query query={getAlbumsQuery}>
           {({ loading, error, data }) => (

ui/src/Pages/PhotosPage/PhotosPage.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import { Helmet } from 'react-helmet'
 import Layout from '../../Layout'
 import gql from 'graphql-tag'
 import { Query } from 'react-apollo'
@@ -87,7 +88,7 @@ class PhotosPage extends Component {
 
   render() {
     return (
-      <Layout>
+      <Layout title="Photos">
         <Query query={photoQuery}>
           {({ loading, error, data }) => {
             if (error) return error

ui/src/components/albumGallery/AlbumGallery.js

@@ -70,7 +70,7 @@ const AlbumGallery = ({ album, loading = false, customAlbumLink }) => {
   }
 
   return (
-    <Layout>
+    <Layout title={album ? album.title : 'Loading album'}>
       <AlbumTitle album={album} disableLink />
       {subAlbumElement}
       {