Added favicon and changed page title. Changed message when there are apps/bookmarks created but they are not pinned to homescreen. Added functionality to set custom page title.

client/src/components/Apps/AppForm/AppForm.tsx

@@ -98,7 +98,7 @@ const AppForm = (props: ComponentProps): JSX.Element => {
           value={formData.url}
           onChange={(e) => inputChangeHandler(e)}
         />
-        <span>Use URL without protocol</span>
+        <span>Only urls without http[s]:// are supported</span>
       </InputGroup>
       <InputGroup>
         <label htmlFor='icon'>App Icon</label>

client/src/components/Apps/AppGrid/AppGrid.tsx

@@ -6,6 +6,7 @@ import AppCard from '../AppCard/AppCard';
 
 interface ComponentProps {
   apps: App[];
+  totalApps?: number;
 }
 
 const AppGrid = (props: ComponentProps): JSX.Element => {
@@ -23,9 +24,15 @@ const AppGrid = (props: ComponentProps): JSX.Element => {
       </div>
     )
   } else {
-    apps = (
-      <p className={classes.AppsMessage}>You don't have any applications. You can add a new one from <Link to='/applications'>/application</Link> menu</p>
-    );
+    if (props.totalApps) {
+      apps = (
+        <p className={classes.AppsMessage}>There are no pinned applications. You can pin them from the <Link to='/applications'>/applications</Link> menu</p>
+      );
+    } else {
+      apps = (
+        <p className={classes.AppsMessage}>You don't have any applications. You can add a new one from <Link to='/applications'>/applications</Link> menu</p>
+      );
+    }
   }
 
   return apps;

client/src/components/Bookmarks/BookmarkForm/BookmarkForm.tsx

@@ -177,6 +177,7 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
                 value={formData.url}
                 onChange={(e) => inputChangeHandler(e)}
               />
+              <span>Only urls without http[s]:// are supported</span>
             </InputGroup>
             <InputGroup>
               <label htmlFor='categoryId'>Bookmark Category</label>

client/src/components/Bookmarks/BookmarkGrid/BookmarkGrid.tsx

@@ -8,6 +8,7 @@ import BookmarkCard from '../BookmarkCard/BookmarkCard';
 
 interface ComponentProps {
   categories: Category[];
+  totalCategories?: number;
 }
 
 const BookmarkGrid = (props: ComponentProps): JSX.Element => {
@@ -20,9 +21,15 @@ const BookmarkGrid = (props: ComponentProps): JSX.Element => {
       </div>
     );
   } else {
-    bookmarks = (
-      <p className={classes.BookmarksMessage}>You don't have any bookmarks. You can add a new one from <Link to='/bookmarks'>/bookmarks</Link> menu</p>
-    );
+    if (props.totalCategories) {
+      bookmarks = (
+        <p className={classes.BookmarksMessage}>There are no pinned categories. You can pin them from the <Link to='/bookmarks'>/bookmarks</Link> menu</p>
+      );
+    } else {
+      bookmarks = (
+        <p className={classes.BookmarksMessage}>You don't have any bookmarks. You can add a new one from <Link to='/bookmarks'>/bookmarks</Link> menu</p>
+      );
+    }
   }
 
   return bookmarks;

client/src/components/Home/Home.tsx

@@ -81,7 +81,10 @@ const Home = (props: ComponentProps): JSX.Element => {
       <SectionHeadline title='Applications' link='/applications' />
       {props.appsLoading
         ? <Spinner />
-        : <AppGrid apps={props.apps.filter((app: App) => app.isPinned)} />
+        : <AppGrid
+          apps={props.apps.filter((app: App) => app.isPinned)}
+          totalApps={props.apps.length}
+        />
       }
 
       <div className={classes.HomeSpace}></div>
@@ -89,7 +92,10 @@ const Home = (props: ComponentProps): JSX.Element => {
       <SectionHeadline title='Bookmarks' link='/bookmarks' />
       {props.categoriesLoading
         ? <Spinner />
-        : <BookmarkGrid categories={props.categories.filter((category: Category) => category.isPinned)} />
+        : <BookmarkGrid
+            categories={props.categories.filter((category: Category) => category.isPinned)}
+            totalCategories={props.categories.length}
+        />
       }
 
       <Link to='/settings' className={classes.SettingsButton}>

client/src/components/Settings/OtherSettings/OtherSettings.tsx

@@ -0,0 +1,88 @@
+import { useState, useEffect, ChangeEvent, FormEvent } from 'react';
+import axios from 'axios';
+import { connect } from 'react-redux';
+
+import InputGroup from '../../UI/Forms/InputGroup/InputGroup';
+import Button from '../../UI/Buttons/Button/Button';
+import { createNotification } from '../../../store/actions';
+import { ApiResponse, Config, NewNotification } from '../../../interfaces';
+
+interface FormState {
+  customTitle: string;
+}
+
+interface ComponentProps {
+  createNotification: (notification: NewNotification) => void;
+}
+
+const OtherSettings = (props: ComponentProps): JSX.Element => {
+  const [formData, setFormData] = useState<FormState>({
+    customTitle: document.title
+  })
+
+  // get initial config
+  useEffect(() => {
+    axios.get<ApiResponse<Config[]>>('/api/config?keys=customTitle')
+      .then(data => {
+        let tmpFormData = { ...formData };
+
+        data.data.data.forEach((config: Config) => {
+          let value: string | number = config.value;
+          if (config.valueType === 'number') {
+            value = parseFloat(value);
+          }
+
+          tmpFormData = {
+            ...tmpFormData,
+            [config.key]: value
+          }
+        })
+
+        setFormData(tmpFormData);
+      })
+      .catch(err => console.log(err));
+  }, [])
+
+  const formSubmitHandler = (e: FormEvent) => {
+    e.preventDefault();
+
+    axios.put<ApiResponse<{}>>('/api/config', formData)
+      .then(() => {
+        props.createNotification({
+          title: 'Success',
+          message: 'Settings updated'
+        })
+      })
+      .catch((err) => console.log(err));
+
+    // update local page title
+    localStorage.setItem('customTitle', formData.customTitle);
+    document.title = formData.customTitle;
+  }
+
+  const inputChangeHandler = (e: ChangeEvent<HTMLInputElement>) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value
+    })
+  }
+
+  return (
+    <form onSubmit={(e) => formSubmitHandler(e)}>
+      <InputGroup>
+        <label htmlFor='customTitle'>Custom Page Title</label>
+        <input
+          type='text'
+          id='customTitle'
+          name='customTitle'
+          placeholder='Flame'
+          value={formData.customTitle}
+          onChange={(e) => inputChangeHandler(e)}
+        />
+      </InputGroup>
+    <Button>Save changes</Button>
+    </form>
+  )
+}
+
+export default connect(null, { createNotification })(OtherSettings);

client/src/components/Settings/Settings.tsx

@@ -6,6 +6,7 @@ import { Container } from '../UI/Layout/Layout';
 import Headline from '../UI/Headlines/Headline/Headline';
 import Themer from '../Themer/Themer';
 import WeatherSettings from './WeatherSettings/WeatherSettings';
+import OtherSettings from './OtherSettings/OtherSettings';
 
 const Settings = (): JSX.Element => {
   return (
@@ -30,11 +31,19 @@ const Settings = (): JSX.Element => {
             to='/settings/weather'>
             Weather
           </NavLink>
+          <NavLink
+            className={classes.SettingsNavLink}
+            activeClassName={classes.SettingsNavLinkActive}
+            exact
+            to='/settings/other'>
+            Other
+          </NavLink>
         </nav>
         <section className={classes.SettingsContent}>
           <Switch>
             <Route exact path='/settings' component={Themer} />
             <Route path='/settings/weather' component={WeatherSettings} />
+            <Route path='/settings/other' component={OtherSettings} />
           </Switch>
         </section>
       </div>