Merge pull request #66 from pawelmalak/feature

v1.6 Release
Fixed bug with custom css not persisting
2026-02-28 17:33:13 +08:00 · 2021-07-17 23:29:02 +02:00 · 2021-07-17 23:11:24 +02:00 · 2021-07-16 11:55:26 +02:00 · 2021-07-16 11:23:58 +02:00 · 2021-07-15 11:57:18 +02:00
87 changed files with 1803 additions and 280 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -1,2 +1,3 @@
 node_modules
-github
+github
+public
--- a/.env
+++ b/.env
@@ -0,0 +1,2 @@
+PORT=5005
+NODE_ENV=development
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,3 @@
-node_modules/
-data/
-.env
+node_modules
+data
+public
--- a/5
+++ b/5
@@ -1,5 +1,7 @@
 FROM node:14-alpine

+RUN apk update && apk add --no-cache nano
+
 WORKDIR /app

 COPY package*.json ./
@@ -10,6 +12,7 @@ COPY . .

 RUN mkdir -p ./public ./data \
    && cd ./client \
+    && npm install --production \
    && npm run build \
    && cd .. \
    && mv ./client/build/* ./public \
@@ -19,4 +22,4 @@ EXPOSE 5005

 ENV NODE_ENV=production

-CMD ["node", "server.js"]
+CMD ["node", "server.js"]
--- a/Dockerfile.multiarch
+++ b/Dockerfile.multiarch
@@ -0,0 +1,27 @@
+FROM node:14-alpine
+
+RUN apk update && apk add --no-cache nano
+
+WORKDIR /app
+
+COPY package*.json ./
+
+RUN apk --no-cache --virtual build-dependencies add python make g++ \
+    && npm install --production
+
+COPY . .
+
+RUN mkdir -p ./public ./data \
+    && cd ./client \
+    && npm install --production \
+    && npm run build \
+    && cd .. \
+    && mv ./client/build/* ./public \
+    && rm -rf ./client \
+    && apk del build-dependencies
+
+EXPOSE 5005
+
+ENV NODE_ENV=production
+
+CMD ["node", "server.js"]
--- a/README.md
+++ b/README.md
@@ -2,12 +2,13 @@

 [![JS Badge](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black)](https://shields.io/)
 [![TS Badge](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)](https://shields.io/)
+[![Node Badge](https://img.shields.io/badge/Node.js-43853D?style=for-the-badge&logo=node.js&logoColor=white)](https://shields.io/)
 [![React Badge](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)](https://shields.io/)

 ![Homescreen screenshot](./github/_home.png)

 ## Description
-Flame is self-hosted startpage for your server. It's inspired (heavily) by [SUI](https://github.com/jeroenpardon/sui)
+Flame is self-hosted startpage for your server. Its design is inspired (heavily) by [SUI](https://github.com/jeroenpardon/sui). Flame is very easy to setup and use. With built-in editors it allows you to setup your very own appliaction hub in no time - no file editing necessary.

 ## Technology
 - Backend
@@ -22,6 +23,7 @@ Flame is self-hosted startpage for your server. It's inspired (heavily) by [SUI]

 ## Development
 ```sh
+# clone repository
 git clone https://github.com/pawelmalak/flame
 cd flame

@@ -32,36 +34,98 @@ npm run dev-init
 npm run dev
 ```

-## Deployment with Docker
+## Installation 
+
+### With Docker (recommended)
+
+[Docker Hub](https://hub.docker.com/r/pawelmalak/flame)
+
+#### Building images
 ```sh
-# build image
+# build image for amd64 only
 docker build -t flame .

-# run container
-docker run -p 5005:5005 -v <host_dir>:/app/data flame
+# build multiarch image for amd64, armv7 and arm64
+# building failed multiple times with 2GB memory usage limit so you might want to increase it
+docker buildx build \
+  --platform linux/arm/v7,linux/arm64,linux/amd64 \
+  -f Dockerfile.multiarch \
+  -t flame:multiarch .
 ```

+#### Deployment
+```sh
+# run container
+docker run -p 5005:5005 -v /path/to/data:/app/data flame
+```
+
+#### Docker-Compose
+```yaml
+version: "2.1"
+services:
+  flame:
+    image: pawelmalak/flame:latest
+    container_name: flame
+    volumes:
+      - <host_dir>:/app/data
+    ports:
+      - 5005:5005
+    restart: unless-stopped
+```
+
+### Without Docker
+Follow instructions from wiki: [Installation without Docker](https://github.com/pawelmalak/flame/wiki/Installation-without-docker)
+
 ## Functionality
 - Applications
-  - Create, update and delete applications using GUI
+  - Create, update, delete and organize applications using GUI
  - Pin your favourite apps to homescreen

 ![Homescreen screenshot](./github/_apps.png)

 - Bookmarks
-  - Create, update and delete bookmarks and categories using GUI
+  - Create, update, delete and organize bookmarks and categories using GUI
  - Pin your favourite categories to homescreen

 ![Homescreen screenshot](./github/_bookmarks.png)

 - Weather
  - Get current temperature, cloud coverage and weather status with animated icons
+
 - Themes
  - Customize your page by choosing from 12 color themes 

 ![Homescreen screenshot](./github/_themes.png)

 ## Usage
+### Search bar
+#### Searching
+To use search bar you need to type your search query with selected prefix. For example, to search for "what is docker" using google search you would type: `/g what is docker`.
+
+> You can change where to open search results (same/new tab) in the settings
+
+#### Supported search engines
+| Name       | Prefix | Search URL                          |
+|------------|--------|-------------------------------------|
+| Disroot    | /ds    | http://search.disroot.org/search?q= |
+| DuckDuckGo | /d     | https://duckduckgo.com/?q=          |
+| Google     | /g     | https://www.google.com/search?q=    |
+
+#### Supported services
+| Name               | Prefix | Search URL                                    |
+|--------------------|--------|-----------------------------------------------|
+| IMDb               | /im    | https://www.imdb.com/find?q=                  |
+| Reddit             | /r     | https://www.reddit.com/search?q=              |
+| Spotify            | /sp    | https://open.spotify.com/search/              |
+| The Movie Database | /mv    | https://www.themoviedb.org/search?query=      |
+| Youtube            | /yt    | https://www.youtube.com/results?search_query= |
+
+### Setting up weather module
+1. Obtain API Key from [Weather API](https://www.weatherapi.com/pricing.aspx).
+   > Free plan allows for 1M calls per month. Flame is making less then 3K API calls per month.
+2. Get lat/long for your location. You can get them from [latlong.net](https://www.latlong.net/convert-address-to-lat-long.html).
+3. Enter and save data. Weather widget will now update and should be visible on Home page.
+
 ### Supported URL formats for applications and bookmarks
 #### Rules
 - URL starts with `http://`
@@ -72,4 +136,14 @@ docker run -p 5005:5005 -v <host_dir>:/app/data flame
  - Redirect: `https://{dest}`
 - URL without protocol
  - Format: `www.domain.com`, `domain.com`, `sub.domain.com`, `local`, `ip`, `ip:port`
-  - Redirect: `http://{dest}`
+  - Redirect: `http://{dest}`
+
+### Custom CSS
+> This is an experimental feature. Its behaviour might change in the future.
+> 
+Follow instructions from wiki: [Custom CSS](https://github.com/pawelmalak/flame/wiki/Custom-CSS)
+
+## Support
+If you want to support development of Flame and my upcoming self-hosted and open source projects you can use the following link:
+
+[![PayPal Badge](https://img.shields.io/badge/PayPal-00457C?style=for-the-badge&logo=paypal&logoColor=white)](https://www.paypal.com/paypalme/pawelmalak)
--- a/Socket.js
+++ b/Socket.js
@@ -1,11 +1,13 @@
 const WebSocket = require('ws');
+const Logger = require('./utils/Logger');
+const logger = new Logger();

 class Socket {
  constructor(server) {
    this.webSocketServer = new WebSocket.Server({ server })

    this.webSocketServer.on('listening', () => {
-      console.log('Socket: listen');
+      logger.log('Socket: listen');
    })

    this.webSocketServer.on('connection', (webSocketClient) => {
--- a/api.js
+++ b/api.js
@@ -1,15 +1,17 @@
-const path = require('path');
+const { join } = require('path');
 const express = require('express');
 const errorHandler = require('./middleware/errorHandler');

 const api = express();

 // Static files
-api.use(express.static(path.join(__dirname, 'public')));
+api.use(express.static(join(__dirname, 'public')));
+api.use('/uploads', express.static(join(__dirname, 'data/uploads')));
 api.get(/^\/(?!api)/, (req, res) => {
-  res.sendFile(path.join(__dirname, 'public/index.html'));
+  res.sendFile(join(__dirname, 'public/index.html'));
 })

+
 // Body parser
 api.use(express.json());

--- a/client/.env
+++ b/client/.env
@@ -0,0 +1 @@
+REACT_APP_VERSION=1.6.0
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -2397,6 +2397,14 @@
        "csstype": "^3.0.2"
      }
    },
+    "@types/react-beautiful-dnd": {
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/@types/react-beautiful-dnd/-/react-beautiful-dnd-13.0.0.tgz",
+      "integrity": "sha512-by80tJ8aTTDXT256Gl+RfLRtFjYbUWOnZuEigJgNsJrSEGxvFe5eY6k3g4VIvf0M/6+xoLgfYWoWonlOo6Wqdg==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
    "@types/react-dom": {
      "version": "17.0.3",
      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.3.tgz",
@@ -4614,6 +4622,14 @@
        "postcss": "^7.0.5"
      }
    },
+    "css-box-model": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz",
+      "integrity": "sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==",
+      "requires": {
+        "tiny-invariant": "^1.0.6"
+      }
+    },
    "css-color-names": {
      "version": "0.0.4",
      "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@@ -9932,6 +9948,11 @@
      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
      "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
    },
+    "memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+    },
    "memory-fs": {
      "version": "0.4.1",
      "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
@@ -12300,6 +12321,11 @@
        "performance-now": "^2.1.0"
      }
    },
+    "raf-schd": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.3.tgz",
+      "integrity": "sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ=="
+    },
    "randombytes": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -12362,6 +12388,20 @@
        "whatwg-fetch": "^3.4.1"
      }
    },
+    "react-beautiful-dnd": {
+      "version": "13.1.0",
+      "resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-13.1.0.tgz",
+      "integrity": "sha512-aGvblPZTJowOWUNiwd6tNfEpgkX5OxmpqxHKNW/4VmvZTNTbeiq7bA3bn5T+QSF2uibXB0D1DmJsb1aC/+3cUA==",
+      "requires": {
+        "@babel/runtime": "^7.9.2",
+        "css-box-model": "^1.2.0",
+        "memoize-one": "^5.1.1",
+        "raf-schd": "^4.0.2",
+        "react-redux": "^7.2.0",
+        "redux": "^4.0.4",
+        "use-memo-one": "^1.1.1"
+      }
+    },
    "react-dev-utils": {
      "version": "11.0.4",
      "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",
@@ -15077,6 +15117,11 @@
      "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
      "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ=="
    },
+    "use-memo-one": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.2.tgz",
+      "integrity": "sha512-u2qFKtxLsia/r8qG0ZKkbytbztzRb317XCkT7yP8wxL0tZ/CzK2G+WWie5vWvpyeP7+YoPIwbJoIHJ4Ba4k0oQ=="
+    },
    "util": {
      "version": "0.11.1",
      "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",
--- a/client/package.json
+++ b/client/package.json
@@ -11,12 +11,14 @@
    "@types/jest": "^26.0.23",
    "@types/node": "^12.20.12",
    "@types/react": "^17.0.5",
+    "@types/react-beautiful-dnd": "^13.0.0",
    "@types/react-dom": "^17.0.3",
    "@types/react-redux": "^7.1.16",
    "@types/react-router-dom": "^5.1.7",
    "axios": "^0.21.1",
    "http-proxy-middleware": "^2.0.0",
    "react": "^17.0.2",
+    "react-beautiful-dnd": "^13.1.0",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.4",
    "react-router-dom": "^5.2.0",
--- a/client/public/flame.css
+++ b/client/public/flame.css
--- a/client/public/index.html
+++ b/client/public/index.html
@@ -4,15 +4,10 @@
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <meta name="description" content="Flame - self-hosted startpage for your server" />
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
+    <link rel="stylesheet" href="%PUBLIC_URL%/flame.css">
    <title>Flame</title>
  </head>
  <body>
@@ -21,4 +16,4 @@
    <div id="root"></div>
    
  </body>
-</html>
+</html>
--- a/client/public/robots.txt
+++ b/client/public/robots.txt
@@ -1,3 +1,2 @@
-# https://www.robotstxt.org/robotstxt.html
 User-agent: *
-Disallow:
+Disallow: /
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -5,6 +5,10 @@ import { getConfig, setTheme } from './store/actions';
 import { store } from './store/store';
 import { Provider } from 'react-redux';

+// Utils
+import { checkVersion } from './utility';
+
+// Routes
 import Home from './components/Home/Home';
 import Apps from './components/Apps/Apps';
 import Settings from './components/Settings/Settings';
@@ -14,10 +18,14 @@ import NotificationCenter from './components/NotificationCenter/NotificationCent
 // Get config pairs from database
 store.dispatch<any>(getConfig());

+// Set theme
 if (localStorage.theme) {
  store.dispatch<any>(setTheme(localStorage.theme));
 }

+// Check for updates
+checkVersion();
+
 const App = (): JSX.Element => {
  return (
    <Provider store={store}>
--- a/client/src/components/Apps/AppCard/AppCard.module.css
+++ b/client/src/components/Apps/AppCard/AppCard.module.css
@@ -39,4 +39,12 @@
  .AppCard:hover {
    background-color: rgba(0,0,0,0.2);
  }
+}
+
+.CustomIcon {
+  width: 90%;
+  height: 90%;
+  margin-top: 2px;
+  margin-left: 2px;
+  object-fit: contain;
 }
--- a/client/src/components/Apps/AppCard/AppCard.tsx
+++ b/client/src/components/Apps/AppCard/AppCard.tsx
@@ -3,6 +3,7 @@ import Icon from '../../UI/Icons/Icon/Icon';
 import { iconParser, urlParser } from '../../../utility';

 import { App } from '../../../interfaces';
+import { searchConfig } from '../../../utility';

 interface ComponentProps {
  app: App;
@@ -15,12 +16,19 @@ const AppCard = (props: ComponentProps): JSX.Element => {
  return (
    <a
      href={redirectUrl}
-      target='_blank'
+      target={searchConfig('appsSameTab', false) ? '' : '_blank'}
      rel='noreferrer'
      className={classes.AppCard}
    >
      <div className={classes.AppCardIcon}>
-        <Icon icon={iconParser(props.app.icon)} />
+        {(/.(jpeg|jpg|png)$/).test(props.app.icon)
+          ? <img
+              src={`/uploads/${props.app.icon}`}
+              alt={`${props.app.name} icon`}
+              className={classes.CustomIcon}
+            />
+          : <Icon icon={iconParser(props.app.icon)} />
+        }
      </div>
      <div className={classes.AppCardDetails}>
        <h5>{props.app.name}</h5>
--- a/client/src/components/Apps/AppForm/AppForm.module.css
+++ b/client/src/components/Apps/AppForm/AppForm.module.css
@@ -0,0 +1,7 @@
+.Switch {
+  text-decoration: underline;
+}
+
+.Switch:hover {
+  cursor: pointer;
+}
--- a/client/src/components/Apps/AppForm/AppForm.tsx
+++ b/client/src/components/Apps/AppForm/AppForm.tsx
@@ -3,18 +3,23 @@ import { connect } from 'react-redux';
 import { addApp, updateApp } from '../../../store/actions';
 import { App, NewApp } from '../../../interfaces';

+import classes from './AppForm.module.css';
+
 import ModalForm from '../../UI/Forms/ModalForm/ModalForm';
 import InputGroup from '../../UI/Forms/InputGroup/InputGroup';
 import Button from '../../UI/Buttons/Button/Button';
+import axios from 'axios';

 interface ComponentProps {
  modalHandler: () => void;
-  addApp: (formData: NewApp) => any;
+  addApp: (formData: NewApp | FormData) => any;
  updateApp: (id: number, formData: NewApp) => any;
  app?: App;
 }

 const AppForm = (props: ComponentProps): JSX.Element => {
+  const [useCustomIcon, toggleUseCustomIcon] = useState<boolean>(false);
+  const [customIcon, setCustomIcon] = useState<File | null>(null);
  const [formData, setFormData] = useState<NewApp>({
    name: '',
    url: '',
@@ -52,11 +57,27 @@ const AppForm = (props: ComponentProps): JSX.Element => {
    })
  }

+  const fileChangeHandler = (e: ChangeEvent<HTMLInputElement>): void => {
+    if (e.target.files) {
+      setCustomIcon(e.target.files[0]);
+    }
+  }
+
  const formSubmitHandler = (e: SyntheticEvent<HTMLFormElement>): void => {
    e.preventDefault();

    if (!props.app) {
-      props.addApp(formData);
+      if (customIcon) {
+        const data = new FormData();
+        data.append('icon', customIcon);
+
+        data.append('name', formData.name);
+        data.append('url', formData.url);
+
+        props.addApp(data);
+      } else {
+        props.addApp(formData);
+      }
    } else {
      props.updateApp(props.app.id, formData);
      props.modalHandler();
@@ -108,26 +129,51 @@ const AppForm = (props: ComponentProps): JSX.Element => {
          </a>
        </span>
      </InputGroup>
-      <InputGroup>
-        <label htmlFor='icon'>App Icon</label>
-        <input
-          type='text'
-          name='icon'
-          id='icon'
-          placeholder='book-open-outline'
-          required
-          value={formData.icon}
-          onChange={(e) => inputChangeHandler(e)}
-        />
-        <span>
-          Use icon name from MDI. 
-          <a
-            href='https://materialdesignicons.com/'
-            target='blank'>
-            {' '}Click here for reference
-          </a>
-        </span>
-      </InputGroup>
+      {!useCustomIcon
+        // use mdi icon
+        ? (<InputGroup>
+            <label htmlFor='icon'>App Icon</label>
+            <input
+              type='text'
+              name='icon'
+              id='icon'
+              placeholder='book-open-outline'
+              required
+              value={formData.icon}
+              onChange={(e) => inputChangeHandler(e)}
+            />
+            <span>
+              Use icon name from MDI. 
+              <a
+                href='https://materialdesignicons.com/'
+                target='blank'>
+                {' '}Click here for reference
+              </a>
+            </span>
+            <span
+              onClick={() => toggleUseCustomIcon(!useCustomIcon)}
+              className={classes.Switch}>
+              Switch to custom icon upload
+            </span>
+          </InputGroup>)
+        // upload custom icon
+        : (<InputGroup>
+            <label htmlFor='icon'>App Icon</label>
+            <input
+              type='file'
+              name='icon'
+              id='icon'
+              required
+              onChange={(e) => fileChangeHandler(e)}
+              accept='.jpg,.jpeg,.png'
+            />
+            <span
+              onClick={() => toggleUseCustomIcon(!useCustomIcon)}
+              className={classes.Switch}>
+              Switch to MDI
+            </span>
+          </InputGroup>)
+      }
      {!props.app
        ? <Button>Add new application</Button>
        : <Button>Update application</Button>
--- a/client/src/components/Apps/AppTable/AppTable.module.css
+++ b/client/src/components/Apps/AppTable/AppTable.module.css
@@ -9,4 +9,21 @@

 .TableAction:hover {
  cursor: pointer;
+}
+
+.Message {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: baseline;
+  color: var(--color-primary);
+  margin-bottom: 20px;
+}
+
+.Message a {
+  color: var(--color-accent);
+}
+
+.Message a:hover {
+  cursor: pointer;
 }
--- a/client/src/components/Apps/AppTable/AppTable.tsx
+++ b/client/src/components/Apps/AppTable/AppTable.tsx
@@ -1,20 +1,52 @@
-import { KeyboardEvent } from 'react';
-import { connect } from 'react-redux';
-import { App, GlobalState } from '../../../interfaces';
-import { pinApp, deleteApp } from '../../../store/actions';
+import { Fragment, KeyboardEvent, useState, useEffect } from 'react';
+import { DragDropContext, Droppable, Draggable, DropResult } from 'react-beautiful-dnd';
+import { Link } from 'react-router-dom';

+// Redux
+import { connect } from 'react-redux';
+import { pinApp, deleteApp, reorderApps, updateConfig, createNotification } from '../../../store/actions';
+
+// Typescript
+import { App, GlobalState, NewNotification } from '../../../interfaces';
+
+// CSS
 import classes from './AppTable.module.css';
+
+// UI
 import Icon from '../../UI/Icons/Icon/Icon';
 import Table from '../../UI/Table/Table';

+// Utils
+import { searchConfig } from '../../../utility';
+
 interface ComponentProps {
  apps: App[];
  pinApp: (app: App) => void;
  deleteApp: (id: number) => void;
  updateAppHandler: (app: App) => void;
+  reorderApps: (apps: App[]) => void;
+  updateConfig: (formData: any) => void;
+  createNotification: (notification: NewNotification) => void;
 }

 const AppTable = (props: ComponentProps): JSX.Element => {
+  const [localApps, setLocalApps] = useState<App[]>([]);
+  const [isCustomOrder, setIsCustomOrder] = useState<boolean>(false);
+
+  // Copy apps array
+  useEffect(() => {
+    setLocalApps([...props.apps]);
+  }, [props.apps])
+
+  // Check ordering
+  useEffect(() => {
+    const order = searchConfig('useOrdering', '');
+
+    if (order === 'orderId') {
+      setIsCustomOrder(true);
+    }
+  }, [])
+
  const deleteAppHandler = (app: App): void => {
    const proceed = window.confirm(`Are you sure you want to delete ${app.name} at ${app.url} ?`);

@@ -23,55 +55,111 @@ const AppTable = (props: ComponentProps): JSX.Element => {
    }
  }

+  // Support keyboard navigation for actions
  const keyboardActionHandler = (e: KeyboardEvent, app: App, handler: Function) => {
    if (e.key === 'Enter') {
      handler(app);
    }
  }

+  const dragEndHanlder = (result: DropResult): void => {
+    if (!isCustomOrder) {
+      props.createNotification({
+        title: 'Error',
+        message: 'Custom order is disabled'
+      })
+      return;
+    }
+
+    if (!result.destination) {
+      return;
+    }
+
+    const tmpApps = [...localApps];
+    const [movedApp] = tmpApps.splice(result.source.index, 1);
+    tmpApps.splice(result.destination.index, 0, movedApp);
+
+    setLocalApps(tmpApps);
+    props.reorderApps(tmpApps);
+  }
+
  return (
-    <Table headers={[
-      'Name',
-      'URL',
-      'Icon',
-      'Actions'
-    ]}>
-      {props.apps.map((app: App): JSX.Element => {
-        return (
-          <tr key={app.id}>
-            <td>{app.name}</td>
-            <td>{app.url}</td>
-            <td>{app.icon}</td>
-            <td className={classes.TableActions}>
-              <div
-                className={classes.TableAction}
-                onClick={() => deleteAppHandler(app)}
-                onKeyDown={(e) => keyboardActionHandler(e, app, deleteAppHandler)}
-                tabIndex={0}>
-                <Icon icon='mdiDelete' />
-              </div>
-              <div
-                className={classes.TableAction}
-                onClick={() => props.updateAppHandler(app)}
-                onKeyDown={(e) => keyboardActionHandler(e, app, props.updateAppHandler)}
-                tabIndex={0}>
-                <Icon icon='mdiPencil' />
-              </div>
-              <div
-                className={classes.TableAction}
-                onClick={() => props.pinApp(app)}
-                onKeyDown={(e) => keyboardActionHandler(e, app, props.pinApp)}
-                tabIndex={0}>
-                {app.isPinned
-                  ? <Icon icon='mdiPinOff' color='var(--color-accent)' />
-                  : <Icon icon='mdiPin' />
-                }
-              </div>
-            </td>
-          </tr>
-        )
-      })}
-    </Table>
+    <Fragment>
+      <div className={classes.Message}>
+        {isCustomOrder
+          ? <p>You can drag and drop single rows to reorder application</p>
+          : <p>Custom order is disabled. You can change it in <Link to='/settings/other'>settings</Link></p>
+        }
+      </div>
+      <DragDropContext onDragEnd={dragEndHanlder}>
+        <Droppable droppableId='apps'>
+          {(provided) => (
+            <Table headers={[
+              'Name',
+              'URL',
+              'Icon',
+              'Actions'
+            ]}
+            innerRef={provided.innerRef}>
+              {localApps.map((app: App, index): JSX.Element => {
+                return (
+                  <Draggable key={app.id} draggableId={app.id.toString()} index={index}>
+                    {(provided, snapshot) => {
+                      const style = {
+                        border: snapshot.isDragging ? '1px solid var(--color-accent)' : 'none',
+                        borderRadius: '4px',
+                        ...provided.draggableProps.style,
+                      };
+
+                      return (
+                        <tr
+                          {...provided.draggableProps}
+                          {...provided.dragHandleProps}
+                          ref={provided.innerRef}
+                          style={style}
+                        >
+                          <td style={{ width:'200px' }}>{app.name}</td>
+                          <td style={{ width:'200px' }}>{app.url}</td>
+                          <td style={{ width:'200px' }}>{app.icon}</td>
+                          {!snapshot.isDragging && (
+                            <td className={classes.TableActions}>
+                              <div
+                                className={classes.TableAction}
+                                onClick={() => deleteAppHandler(app)}
+                                onKeyDown={(e) => keyboardActionHandler(e, app, deleteAppHandler)}
+                                tabIndex={0}>
+                                <Icon icon='mdiDelete' />
+                              </div>
+                              <div
+                                className={classes.TableAction}
+                                onClick={() => props.updateAppHandler(app)}
+                                onKeyDown={(e) => keyboardActionHandler(e, app, props.updateAppHandler)}
+                                tabIndex={0}>
+                                <Icon icon='mdiPencil' />
+                              </div>
+                              <div
+                                className={classes.TableAction}
+                                onClick={() => props.pinApp(app)}
+                                onKeyDown={(e) => keyboardActionHandler(e, app, props.pinApp)}
+                                tabIndex={0}>
+                                {app.isPinned
+                                  ? <Icon icon='mdiPinOff' color='var(--color-accent)' />
+                                  : <Icon icon='mdiPin' />
+                                }
+                              </div>
+                            </td>
+                          )}
+                        </tr>
+                      )
+                    }}
+                  </Draggable>
+                )
+              })}
+            </Table>
+          )}
+        </Droppable>
+      </DragDropContext>
+    </Fragment>
  )
 }

@@ -81,4 +169,12 @@ const mapStateToProps = (state: GlobalState) => {
  }
 }

-export default connect(mapStateToProps, { pinApp, deleteApp })(AppTable);
+const actions = {
+  pinApp,
+  deleteApp,
+  reorderApps,
+  updateConfig,
+  createNotification
+}
+
+export default connect(mapStateToProps, actions)(AppTable);
--- a/client/src/components/Apps/Apps.tsx
+++ b/client/src/components/Apps/Apps.tsx
@@ -44,6 +44,7 @@ const Apps = (props: ComponentProps): JSX.Element => {
    url: 'string',
    icon: 'string',
    isPinned: false,
+    orderId: 0,
    id: 0,
    createdAt: new Date(),
    updatedAt: new Date()
@@ -53,7 +54,7 @@ const Apps = (props: ComponentProps): JSX.Element => {
    if (apps.length === 0) {
      getApps();
    }
-  }, [getApps, apps]);
+  }, [getApps]);

  const toggleModal = (): void => {
    setModalIsOpen(!modalIsOpen);
--- a/client/src/components/Bookmarks/BookmarkCard/BookmarkCard.tsx
+++ b/client/src/components/Bookmarks/BookmarkCard/BookmarkCard.tsx
@@ -2,7 +2,7 @@ import { Bookmark, Category } from '../../../interfaces';
 import classes from './BookmarkCard.module.css';

 import Icon from '../../UI/Icons/Icon/Icon';
-import { iconParser, urlParser } from '../../../utility';
+import { iconParser, urlParser, searchConfig } from '../../../utility';

 interface ComponentProps {
  category: Category;
@@ -19,7 +19,7 @@ const BookmarkCard = (props: ComponentProps): JSX.Element => {
          return (
            <a
              href={redirectUrl}
-              target='_blank'
+              target={searchConfig('bookmarksSameTab', false) ? '' : '_blank'}
              rel='noreferrer'
              key={`bookmark-${bookmark.id}`}>
              {bookmark.icon && (
--- a/client/src/components/Bookmarks/BookmarkTable/BookmarkTable.module.css
+++ b/client/src/components/Bookmarks/BookmarkTable/BookmarkTable.module.css
@@ -9,4 +9,21 @@

 .TableAction:hover {
  cursor: pointer;
+}
+
+.Message {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: baseline;
+  color: var(--color-primary);
+  margin-bottom: 20px;
+}
+
+.Message a {
+  color: var(--color-accent);
+}
+
+.Message a:hover {
+  cursor: pointer;
 }
--- a/client/src/components/Bookmarks/BookmarkTable/BookmarkTable.tsx
+++ b/client/src/components/Bookmarks/BookmarkTable/BookmarkTable.tsx
@@ -1,13 +1,25 @@
-import { ContentType } from '../Bookmarks';
-import classes from './BookmarkTable.module.css';
-import { connect } from 'react-redux';
-import { pinCategory, deleteCategory, deleteBookmark } from '../../../store/actions';
-import { KeyboardEvent } from 'react';
+import { KeyboardEvent, useState, useEffect, Fragment } from 'react';
+import { DragDropContext, Droppable, Draggable, DropResult } from 'react-beautiful-dnd';
+import { Link } from 'react-router-dom';

+// Redux
+import { connect } from 'react-redux';
+import { pinCategory, deleteCategory, deleteBookmark, createNotification, reorderCategories } from '../../../store/actions';
+
+// Typescript
+import { Bookmark, Category, NewNotification } from '../../../interfaces';
+import { ContentType } from '../Bookmarks';
+
+// CSS
+import classes from './BookmarkTable.module.css';
+
+// UI
 import Table from '../../UI/Table/Table';
-import { Bookmark, Category } from '../../../interfaces';
 import Icon from '../../UI/Icons/Icon/Icon';

+// Utils
+import { searchConfig } from '../../../utility';
+
 interface ComponentProps {
  contentType: ContentType;
  categories: Category[];
@@ -15,9 +27,28 @@ interface ComponentProps {
  deleteCategory: (id: number) => void;
  updateHandler: (data: Category | Bookmark) => void;
  deleteBookmark: (bookmarkId: number, categoryId: number) => void;
+  createNotification: (notification: NewNotification) => void;
+  reorderCategories: (categories: Category[]) => void;
 }

 const BookmarkTable = (props: ComponentProps): JSX.Element => {
+  const [localCategories, setLocalCategories] = useState<Category[]>([]);
+  const [isCustomOrder, setIsCustomOrder] = useState<boolean>(false);
+
+  // Copy categories array
+  useEffect(() => {
+    setLocalCategories([...props.categories]);
+  }, [props.categories])
+
+  // Check ordering
+  useEffect(() => {
+    const order = searchConfig('useOrdering', '');
+
+    if (order === 'orderId') {
+      setIsCustomOrder(true);
+    }
+  })
+
  const deleteCategoryHandler = (category: Category): void => {
    const proceed = window.confirm(`Are you sure you want to delete ${category.name}? It will delete ALL assigned bookmarks`);

@@ -40,46 +71,100 @@ const BookmarkTable = (props: ComponentProps): JSX.Element => {
    }
  }

+  const dragEndHanlder = (result: DropResult): void => {
+    if (!isCustomOrder) {
+      props.createNotification({
+        title: 'Error',
+        message: 'Custom order is disabled'
+      })
+      return;
+    }
+
+    if (!result.destination) {
+      return;
+    }
+
+    const tmpCategories = [...localCategories];
+    const [movedApp] = tmpCategories.splice(result.source.index, 1);
+    tmpCategories.splice(result.destination.index, 0, movedApp);
+
+    setLocalCategories(tmpCategories);
+    props.reorderCategories(tmpCategories);
+  }
+
  if (props.contentType === ContentType.category) {
    return (
-      <Table headers={[
-        'Name',
-        'Actions'
-      ]}>
-        {props.categories.map((category: Category) => {
-          return (
-            <tr key={category.id}>
-              <td>{category.name}</td>
-              <td className={classes.TableActions}>
-                <div
-                  className={classes.TableAction}
-                  onClick={() => deleteCategoryHandler(category)}
-                  onKeyDown={(e) => keyboardActionHandler(e, category, deleteCategoryHandler)}
-                  tabIndex={0}>
-                  <Icon icon='mdiDelete' />
-                </div>
-                <div
-                  className={classes.TableAction}
-                  onClick={() => props.updateHandler(category)}
-                  // onKeyDown={(e) => keyboardActionHandler(e, app, props.updateAppHandler)}
-                  tabIndex={0}>
-                  <Icon icon='mdiPencil' />
-                </div>
-                <div
-                  className={classes.TableAction}
-                  onClick={() => props.pinCategory(category)}
-                  onKeyDown={(e) => keyboardActionHandler(e, category, props.pinCategory)}
-                  tabIndex={0}>
-                  {category.isPinned
-                    ? <Icon icon='mdiPinOff' color='var(--color-accent)' />
-                    : <Icon icon='mdiPin' />
-                  }
-                </div>
-              </td>
-            </tr>
-          )
-        })}
-      </Table>
+      <Fragment>
+        <div className={classes.Message}>
+          {isCustomOrder
+            ? <p>You can drag and drop single rows to reorder categories</p>
+            : <p>Custom order is disabled. You can change it in <Link to='/settings/other'>settings</Link></p>
+          }
+        </div>
+        <DragDropContext onDragEnd={dragEndHanlder}>
+          <Droppable droppableId='categories'>
+            {(provided) => (
+              <Table headers={[
+                'Name',
+                'Actions'
+              ]}
+              innerRef={provided.innerRef}>
+                {localCategories.map((category: Category, index): JSX.Element => {
+                  return (
+                    <Draggable key={category.id} draggableId={category.id.toString()} index={index}>
+                      {(provided, snapshot) => {
+                        const style = {
+                          border: snapshot.isDragging ? '1px solid var(--color-accent)' : 'none',
+                          borderRadius: '4px',
+                          ...provided.draggableProps.style,
+                        };
+
+                        return (
+                          <tr
+                            {...provided.draggableProps}
+                            {...provided.dragHandleProps}
+                            ref={provided.innerRef}
+                            style={style}  
+                          >
+                            <td>{category.name}</td>
+                            {!snapshot.isDragging && (
+                              <td className={classes.TableActions}>
+                                <div
+                                  className={classes.TableAction}
+                                  onClick={() => deleteCategoryHandler(category)}
+                                  onKeyDown={(e) => keyboardActionHandler(e, category, deleteCategoryHandler)}
+                                  tabIndex={0}>
+                                  <Icon icon='mdiDelete' />
+                                </div>
+                                <div
+                                  className={classes.TableAction}
+                                  onClick={() => props.updateHandler(category)}
+                                  tabIndex={0}>
+                                  <Icon icon='mdiPencil' />
+                                </div>
+                                <div
+                                  className={classes.TableAction}
+                                  onClick={() => props.pinCategory(category)}
+                                  onKeyDown={(e) => keyboardActionHandler(e, category, props.pinCategory)}
+                                  tabIndex={0}>
+                                  {category.isPinned
+                                    ? <Icon icon='mdiPinOff' color='var(--color-accent)' />
+                                    : <Icon icon='mdiPin' />
+                                  }
+                                </div>
+                              </td>
+                            )}
+                          </tr>
+                        )
+                      }}
+                    </Draggable>
+                  )
+                })}
+              </Table>
+            )}
+          </Droppable>
+        </DragDropContext>
+      </Fragment>
    )
  } else {
    const bookmarks: {bookmark: Bookmark, categoryName: string}[] = [];
@@ -111,14 +196,12 @@ const BookmarkTable = (props: ComponentProps): JSX.Element => {
                <div
                  className={classes.TableAction}
                  onClick={() => deleteBookmarkHandler(bookmark.bookmark)}
-                  // onKeyDown={(e) => keyboardActionHandler(e, app, deleteAppHandler)}
                  tabIndex={0}>
                  <Icon icon='mdiDelete' />
                </div>
                <div
                  className={classes.TableAction}
                  onClick={() => props.updateHandler(bookmark.bookmark)}
-                  // onKeyDown={(e) => keyboardActionHandler(e, app, props.updateAppHandler)}
                  tabIndex={0}>
                  <Icon icon='mdiPencil' />
                </div>
@@ -131,4 +214,12 @@ const BookmarkTable = (props: ComponentProps): JSX.Element => {
  }
 }

-export default connect(null, { pinCategory, deleteCategory, deleteBookmark })(BookmarkTable);
+const actions = {
+  pinCategory,
+  deleteCategory,
+  deleteBookmark,
+  createNotification,
+  reorderCategories
+}
+
+export default connect(null, actions)(BookmarkTable);
--- a/client/src/components/Bookmarks/Bookmarks.tsx
+++ b/client/src/components/Bookmarks/Bookmarks.tsx
@@ -43,6 +43,7 @@ const Bookmarks = (props: ComponentProps): JSX.Element => {
    name: '',
    id: -1,
    isPinned: false,
+    orderId: 0,
    bookmarks: [],
    createdAt: new Date(),
    updatedAt: new Date()
@@ -61,7 +62,7 @@ const Bookmarks = (props: ComponentProps): JSX.Element => {
    if (categories.length === 0) {
      getCategories();
    }
-  }, [getCategories, categories])
+  }, [getCategories])

  const toggleModal = (): void => {
    setModalIsOpen(!modalIsOpen);
--- a/client/src/components/Home/Home.tsx
+++ b/client/src/components/Home/Home.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, Fragment } from 'react';
 import { Link } from 'react-router-dom';

 // Redux
@@ -22,6 +22,7 @@ import classes from './Home.module.css';
 import AppGrid from '../Apps/AppGrid/AppGrid';
 import BookmarkGrid from '../Bookmarks/BookmarkGrid/BookmarkGrid';
 import WeatherWidget from '../Widgets/WeatherWidget/WeatherWidget';
+import SearchBar from '../SearchBar/SearchBar';

 // Functions
 import { greeter } from './functions/greeter';
@@ -59,14 +60,14 @@ const Home = (props: ComponentProps): JSX.Element => {
    if (apps.length === 0) {
      getApps();
    }
-  }, [getApps, apps]);
+  }, [getApps]);

  // Load bookmark categories
  useEffect(() => {
    if (categories.length === 0) {
      getCategories();
    }
-  }, [getCategories, categories]);
+  }, [getCategories]);

  // Refresh greeter and time
  useEffect(() => {
@@ -87,6 +88,11 @@ const Home = (props: ComponentProps): JSX.Element => {
  
  return (
    <Container>
+      {searchConfig('hideSearch', 0) !== 1
+        ? <SearchBar />
+        : <div></div>
+      }
+
      {searchConfig('hideHeader', 0) !== 1
        ? (
          <header className={classes.Header}>
@@ -101,24 +107,33 @@ const Home = (props: ComponentProps): JSX.Element => {
        : <div></div>
      }
      
-      <SectionHeadline title='Applications' link='/applications' />
-      {appsLoading
-        ? <Spinner />
-        : <AppGrid
-          apps={apps.filter((app: App) => app.isPinned)}
-          totalApps={apps.length}
-        />
+      {searchConfig('hideApps', 0) !== 1
+        ? (<Fragment>
+            <SectionHeadline title='Applications' link='/applications' />
+            {appsLoading
+              ? <Spinner />
+              : <AppGrid
+                apps={apps.filter((app: App) => app.isPinned)}
+                totalApps={apps.length}
+              />
+            }
+            <div className={classes.HomeSpace}></div>
+          </Fragment>)
+        : <div></div>
      }

-      <div className={classes.HomeSpace}></div>
-
-      <SectionHeadline title='Bookmarks' link='/bookmarks' />
-      {categoriesLoading
-        ? <Spinner />
-        : <BookmarkGrid
-            categories={categories.filter((category: Category) => category.isPinned)}
-            totalCategories={categories.length}
-        />
+      {searchConfig('hideCategories', 0) !== 1
+        ? (<Fragment>
+            <SectionHeadline title='Bookmarks' link='/bookmarks' />
+            {categoriesLoading
+              ? <Spinner />
+              : <BookmarkGrid
+                  categories={categories.filter((category: Category) => category.isPinned)}
+                  totalCategories={categories.length}
+              />
+            }
+          </Fragment>)
+        : <div></div>
      }

      <Link to='/settings' className={classes.SettingsButton}>
--- a/client/src/components/SearchBar/SearchBar.module.css
+++ b/client/src/components/SearchBar/SearchBar.module.css
@@ -0,0 +1,17 @@
+.SearchBar {
+  width: 100%;
+  padding: 10px 0;
+  color: var(--color-primary);
+  /* font-size: 20px; */
+  margin-bottom: 20px;
+  background-color: transparent;
+  border: none;
+  border-bottom: 2px solid var(--color-accent);
+  opacity: 0.5;
+  transition: all 0.2s;
+}
+
+.SearchBar:focus {
+  opacity: 1;
+  outline: none;
+}
--- a/client/src/components/SearchBar/SearchBar.tsx
+++ b/client/src/components/SearchBar/SearchBar.tsx
@@ -0,0 +1,50 @@
+import { useRef, useEffect, KeyboardEvent } from 'react';
+
+// Redux
+import { connect } from 'react-redux';
+import { createNotification } from '../../store/actions';
+
+// Typescript
+import { NewNotification } from '../../interfaces';
+
+// CSS
+import classes from './SearchBar.module.css';
+
+// Utils
+import { searchParser } from '../../utility';
+
+interface ComponentProps {
+  createNotification: (notification: NewNotification) => void;
+}
+
+const SearchBar = (props: ComponentProps): JSX.Element => {
+  const inputRef = useRef<HTMLInputElement>(document.createElement('input'));
+
+  useEffect(() => {
+    inputRef.current.focus();
+  }, [])
+
+  const searchHandler = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.code === 'Enter') {
+      const prefixFound = searchParser(inputRef.current.value);
+
+      if (!prefixFound) {
+        props.createNotification({
+          title: 'Error',
+          message: 'Prefix not found'
+        })
+      }
+    }
+  }
+
+  return (
+    <input
+      ref={inputRef}
+      type='text'
+      className={classes.SearchBar}
+      onKeyDown={(e) => searchHandler(e)}
+    />
+  )
+}
+
+export default connect(null, { createNotification })(SearchBar);
--- a/client/src/components/Settings/AppDetails/AppDetails.module.css
+++ b/client/src/components/Settings/AppDetails/AppDetails.module.css
@@ -0,0 +1,8 @@
+.AppVersion {
+  color: var(--color-primary);
+  margin-bottom: 15px;
+}
+
+.AppVersion a {
+  color: var(--color-accent);
+}
--- a/client/src/components/Settings/AppDetails/AppDetails.tsx
+++ b/client/src/components/Settings/AppDetails/AppDetails.tsx
@@ -0,0 +1,25 @@
+import { Fragment } from 'react';
+
+import classes from './AppDetails.module.css';
+import Button from '../../UI/Buttons/Button/Button';
+import { checkVersion } from '../../../utility';
+
+const AppDetails = (): JSX.Element => {
+  return (
+    <Fragment>
+      <p className={classes.AppVersion}>
+        <a
+          href='https://github.com/pawelmalak/flame'
+          target='_blank'
+          rel='noreferrer'>
+          Flame
+        </a>
+        {' '}
+        version {process.env.REACT_APP_VERSION}
+      </p>
+      <Button click={() => checkVersion(true)}>Check for updates</Button>
+    </Fragment>
+  )
+}
+
+export default AppDetails;
--- a/client/src/components/Settings/OtherSettings/OtherSettings.module.css
+++ b/client/src/components/Settings/OtherSettings/OtherSettings.module.css
@@ -0,0 +1,9 @@
+.SettingsSection {
+  color: var(--color-primary);
+  padding-bottom: 3px;
+  margin-bottom: 10px;
+  font-size: 20px;
+  font-weight: 500;
+  border-bottom: 2px solid var(--color-accent);
+  display: inline-block;
+}
--- a/client/src/components/Settings/OtherSettings/OtherSettings.tsx
+++ b/client/src/components/Settings/OtherSettings/OtherSettings.tsx
@@ -2,21 +2,27 @@ import { useState, useEffect, ChangeEvent, FormEvent } from 'react';

 // Redux
 import { connect } from 'react-redux';
-import { createNotification, updateConfig } from '../../../store/actions';
+import { createNotification, updateConfig, sortApps, sortCategories } from '../../../store/actions';

 // Typescript
-import { GlobalState, NewNotification, SettingsForm } from '../../../interfaces';
+import { GlobalState, NewNotification, Query, SettingsForm } from '../../../interfaces';

 // UI
 import InputGroup from '../../UI/Forms/InputGroup/InputGroup';
 import Button from '../../UI/Buttons/Button/Button';

+// CSS
+import classes from './OtherSettings.module.css';
+
 // Utils
 import { searchConfig } from '../../../utility';
+import { queries } from '../../../utility/searchQueries.json';

 interface ComponentProps {
  createNotification: (notification: NewNotification) => void;
  updateConfig: (formData: SettingsForm) => void;
+  sortApps: () => void;
+  sortCategories: () => void;
  loading: boolean;
 }

@@ -26,7 +32,15 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
    customTitle: document.title,
    pinAppsByDefault: 1,
    pinCategoriesByDefault: 1,
-    hideHeader: 0
+    hideHeader: 0,
+    hideApps: 0,
+    hideCategories: 0,
+    hideSearch: 0,
+    defaultSearchProvider: 'd',
+    useOrdering: 'createdAt',
+    appsSameTab: 0,
+    bookmarksSameTab: 0,
+    searchSameTab: 0
  })

  // Get config
@@ -35,7 +49,15 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
      customTitle: searchConfig('customTitle', 'Flame'),
      pinAppsByDefault: searchConfig('pinAppsByDefault', 1),
      pinCategoriesByDefault: searchConfig('pinCategoriesByDefault', 1),
-      hideHeader: searchConfig('hideHeader', 0)
+      hideHeader: searchConfig('hideHeader', 0),
+      hideApps: searchConfig('hideApps', 0),
+      hideCategories: searchConfig('hideCategories', 0),
+      hideSearch: searchConfig('hideSearch', 0),
+      defaultSearchProvider: searchConfig('defaultSearchProvider', 'd'),
+      useOrdering: searchConfig('useOrdering', 'createdAt'),
+      appsSameTab: searchConfig('appsSameTab', 0),
+      bookmarksSameTab: searchConfig('bookmarksSameTab', 0),
+      searchSameTab: searchConfig('searchSameTab', 0)
    })
  }, [props.loading]);

@@ -46,8 +68,12 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
    // Save settings
    await props.updateConfig(formData);

-    // update local page title
+    // Update local page title
    document.title = formData.customTitle;
+
+    // Sort apps and categories with new settings
+    props.sortApps();
+    props.sortCategories();
  }

  // Input handler
@@ -66,6 +92,8 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {

  return (
    <form onSubmit={(e) => formSubmitHandler(e)}>
+      {/* OTHER OPTIONS */}
+      <h2 className={classes.SettingsSection}>Miscellaneous</h2>
      <InputGroup>
        <label htmlFor='customTitle'>Custom page title</label>
        <input
@@ -77,6 +105,9 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
          onChange={(e) => inputChangeHandler(e)}
        />
      </InputGroup>
+
+      {/* BEAHVIOR OPTIONS */}
+      <h2 className={classes.SettingsSection}>App Behavior</h2>
      <InputGroup>
        <label htmlFor='pinAppsByDefault'>Pin new applications by default</label>
        <select
@@ -101,6 +132,81 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
          <option value={0}>False</option>
        </select>
      </InputGroup>
+      <InputGroup>
+        <label htmlFor='useOrdering'>Sorting type</label>
+        <select
+          id='useOrdering'
+          name='useOrdering'
+          value={formData.useOrdering}
+          onChange={(e) => inputChangeHandler(e)}
+        >
+          <option value='createdAt'>By creation date</option>
+          <option value='name'>Alphabetical order</option>
+          <option value='orderId'>Custom order</option>
+        </select>
+      </InputGroup>
+      <InputGroup>
+        <label htmlFor='defaultSearchProvider'>Default Search Provider</label>
+        <select
+          id='defaultSearchProvider'
+          name='defaultSearchProvider'
+          value={formData.defaultSearchProvider}
+          onChange={(e) => inputChangeHandler(e)}
+        >
+          {queries.map((query: Query) => (<option value={query.prefix}>{query.name}</option>))}
+        </select>
+      </InputGroup>
+      <InputGroup>
+        <label htmlFor='searchSameTab'>Open search results in the same tab</label>
+        <select
+          id='searchSameTab'
+          name='searchSameTab'
+          value={formData.searchSameTab}
+          onChange={(e) => inputChangeHandler(e, true)}
+        >
+          <option value={1}>True</option>
+          <option value={0}>False</option>
+        </select>
+      </InputGroup>
+      <InputGroup>
+        <label htmlFor='appsSameTab'>Open applications in the same tab</label>
+        <select
+          id='appsSameTab'
+          name='appsSameTab'
+          value={formData.appsSameTab}
+          onChange={(e) => inputChangeHandler(e, true)}
+        >
+          <option value={1}>True</option>
+          <option value={0}>False</option>
+        </select>
+      </InputGroup>
+      <InputGroup>
+        <label htmlFor='bookmarksSameTab'>Open bookmarks in the same tab</label>
+        <select
+          id='bookmarksSameTab'
+          name='bookmarksSameTab'
+          value={formData.bookmarksSameTab}
+          onChange={(e) => inputChangeHandler(e, true)}
+        >
+          <option value={1}>True</option>
+          <option value={0}>False</option>
+        </select>
+      </InputGroup>
+
+      {/* MODULES OPTIONS */}
+      <h2 className={classes.SettingsSection}>Modules</h2>
+      <InputGroup>
+        <label htmlFor='hideSearch'>Hide search bar</label>
+        <select
+          id='hideSearch'
+          name='hideSearch'
+          value={formData.hideSearch}
+          onChange={(e) => inputChangeHandler(e, true)}
+        >
+          <option value={1}>True</option>
+          <option value={0}>False</option>
+        </select>
+      </InputGroup>
      <InputGroup>
        <label htmlFor='hideHeader'>Hide greeting and date</label>
        <select
@@ -113,6 +219,30 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
          <option value={0}>False</option>
        </select>
      </InputGroup>
+      <InputGroup>
+        <label htmlFor='hideApps'>Hide applications</label>
+        <select
+          id='hideApps'
+          name='hideApps'
+          value={formData.hideApps}
+          onChange={(e) => inputChangeHandler(e, true)}
+        >
+          <option value={1}>True</option>
+          <option value={0}>False</option>
+        </select>
+      </InputGroup>
+      <InputGroup>
+        <label htmlFor='hideCategories'>Hide categories</label>
+        <select
+          id='hideCategories'
+          name='hideCategories'
+          value={formData.hideCategories}
+          onChange={(e) => inputChangeHandler(e, true)}
+        >
+          <option value={1}>True</option>
+          <option value={0}>False</option>
+        </select>
+      </InputGroup>
    <Button>Save changes</Button>
    </form>
  )
@@ -124,4 +254,11 @@ const mapStateToProps = (state: GlobalState) => {
  }
 }

-export default connect(mapStateToProps, { createNotification, updateConfig })(OtherSettings);
+const actions = {
+  createNotification,
+  updateConfig,
+  sortApps,
+  sortCategories
+}
+
+export default connect(mapStateToProps, actions)(OtherSettings);
--- a/client/src/components/Settings/Settings.tsx
+++ b/client/src/components/Settings/Settings.tsx
@@ -1,12 +1,15 @@
-import { NavLink, Link, Switch, Route, withRouter } from 'react-router-dom';
+import { NavLink, Link, Switch, Route } from 'react-router-dom';

 import classes from './Settings.module.css';

 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';
+import AppDetails from './AppDetails/AppDetails';
+import StyleSettings from './StyleSettings/StyleSettings';

 const Settings = (): JSX.Element => {
  return (
@@ -38,12 +41,28 @@ const Settings = (): JSX.Element => {
            to='/settings/other'>
            Other
          </NavLink>
+          <NavLink
+            className={classes.SettingsNavLink}
+            activeClassName={classes.SettingsNavLinkActive}
+            exact
+            to='/settings/css'>
+            CSS
+          </NavLink>
+          <NavLink
+            className={classes.SettingsNavLink}
+            activeClassName={classes.SettingsNavLinkActive}
+            exact
+            to='/settings/app'>
+            App
+          </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} />
+            <Route path='/settings/css' component={StyleSettings} />
+            <Route path='/settings/app' component={AppDetails} />
          </Switch>
        </section>
      </div>
@@ -51,4 +70,4 @@ const Settings = (): JSX.Element => {
  )
 }

-export default withRouter(Settings);
+export default Settings;
--- a/client/src/components/Settings/StyleSettings/StyleSettings.tsx
+++ b/client/src/components/Settings/StyleSettings/StyleSettings.tsx
@@ -0,0 +1,63 @@
+import { useState, useEffect, ChangeEvent, FormEvent } from 'react';
+import axios from 'axios';
+
+// Redux
+import { connect } from 'react-redux';
+import { createNotification } from '../../../store/actions';
+
+// Typescript
+import { ApiResponse, NewNotification } from '../../../interfaces';
+
+// UI
+import InputGroup from '../../UI/Forms/InputGroup/InputGroup';
+import Button from '../../UI/Buttons/Button/Button';
+
+interface ComponentProps {
+  createNotification: (notification: NewNotification) => void;
+}
+
+const StyleSettings = (props: ComponentProps): JSX.Element => {
+  const [customStyles, setCustomStyles] = useState<string>('');
+
+  useEffect(() => {
+    axios.get<ApiResponse<string>>('/api/config/0/css')
+      .then(data => setCustomStyles(data.data.data))
+      .catch(err => console.log(err.response));
+  }, [])
+
+  const inputChangeHandler = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    e.preventDefault();
+    setCustomStyles(e.target.value);
+  }
+
+  const formSubmitHandler = (e: FormEvent) => {
+    e.preventDefault();
+
+    axios.put<ApiResponse<{}>>('/api/config/0/css', { styles: customStyles })
+      .then(() => {
+        props.createNotification({
+          title: 'Success',
+          message: 'CSS saved. Reload page to see changes'
+        })
+      })
+      .catch(err => console.log(err.response));
+  }
+
+  return (
+    <form onSubmit={(e) => formSubmitHandler(e)}>
+      <InputGroup>
+        <label htmlFor='customStyles'>Custom CSS</label>
+        <textarea
+          id='customStyles'
+          name='customStyles'
+          value={customStyles}
+          onChange={(e) => inputChangeHandler(e)}
+          spellCheck={false}
+        ></textarea>
+      </InputGroup>
+      <Button>Save CSS</Button>
+    </form>
+  )
+}
+
+export default connect(null, { createNotification })(StyleSettings);
--- a/client/src/components/Settings/WeatherSettings/WeatherSettings.tsx
+++ b/client/src/components/Settings/WeatherSettings/WeatherSettings.tsx
@@ -116,6 +116,8 @@ const WeatherSettings = (props: ComponentProps): JSX.Element => {
          placeholder='52.22'
          value={formData.lat}
          onChange={(e) => inputChangeHandler(e, true)}
+          step='any'
+          lang='en-150'
        />
        <span>
          You can use
@@ -135,6 +137,8 @@ const WeatherSettings = (props: ComponentProps): JSX.Element => {
          placeholder='21.01'
          value={formData.long}
          onChange={(e) => inputChangeHandler(e, true)}
+          step='any'
+          lang='en-150'
        />
      </InputGroup>
      <InputGroup>
--- a/client/src/components/UI/Buttons/Button/Button.module.css
+++ b/client/src/components/UI/Buttons/Button/Button.module.css
@@ -6,8 +6,7 @@
  border-radius: 4px;
 }

-.Button:hover,
-.Button:focus {
+.Button:hover {
  cursor: pointer;
  background-color: var(--color-accent);
  color: var(--color-background);
--- a/client/src/components/UI/Buttons/Button/Button.tsx
+++ b/client/src/components/UI/Buttons/Button/Button.tsx
@@ -2,10 +2,20 @@ import classes from './Button.module.css';

 interface ComponentProps {
  children: string;
+  click?: any;
 }

 const Button = (props: ComponentProps): JSX.Element => {
-  return <button className={classes.Button}>{props.children}</button>
+  const {
+    children,
+    click
+  } = props;
+
+  return (
+    <button className={classes.Button} onClick={click ? click : () => {}} >
+      {children}
+    </button>
+  )
 }

 export default Button;
--- a/client/src/components/UI/Forms/InputGroup/InputGroup.module.css
+++ b/client/src/components/UI/Forms/InputGroup/InputGroup.module.css
@@ -4,12 +4,14 @@

 .InputGroup label,
 .InputGroup span,
-.InputGroup input {
+.InputGroup input,
+.InputGroup textarea {
  display: block;
 }

 .InputGroup input,
-.InputGroup select {
+.InputGroup select,
+.InputGroup textarea {
  margin: 8px 0;
  width: 100%;
  border: none;
@@ -30,4 +32,9 @@

 .InputGroup label {
  color: var(--color-primary);
+}
+
+.InputGroup textarea {
+  resize: none;
+  height: 50vh;
 }
--- a/client/src/components/UI/Table/Table.module.css
+++ b/client/src/components/UI/Table/Table.module.css
@@ -8,15 +8,17 @@
  text-align: left;
  font-size: 16px;
  color: var(--color-primary);
+  table-layout: fixed;
 }

 .Table th,
 .Table td {
  padding: 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }

 /* Head */
-
 .Table th {
  --header-radius: 4px;
  background-color: var(--color-primary);
@@ -34,8 +36,6 @@
 }

 /* Body */
-
 .Table td {
-  /* opacity: 0.5; */
  transition: all 0.2s;
 }
--- a/client/src/components/UI/Table/Table.tsx
+++ b/client/src/components/UI/Table/Table.tsx
@@ -3,11 +3,12 @@ import classes from './Table.module.css';
 interface ComponentProps {
  children: JSX.Element | JSX.Element[];
  headers: string[];
+  innerRef?: any;
 }

 const Table = (props: ComponentProps): JSX.Element => {
  return (
-    <div className={classes.TableContainer}>
+    <div className={classes.TableContainer} ref={props.innerRef}>
      <table className={classes.Table}>
        <thead className={classes.TableHead}>
          <tr>
--- a/client/src/interfaces/App.ts
+++ b/client/src/interfaces/App.ts
@@ -5,6 +5,7 @@ export interface App extends Model {
  url: string;
  icon: string;
  isPinned: boolean;
+  orderId: number;
 }

 export interface NewApp {
--- a/client/src/interfaces/Category.ts
+++ b/client/src/interfaces/Category.ts
@@ -3,6 +3,7 @@ import { Model, Bookmark } from '.';
 export interface Category extends Model {
  name: string;
  isPinned: boolean;
+  orderId: number;
  bookmarks: Bookmark[];
 }

--- a/client/src/interfaces/Forms.ts
+++ b/client/src/interfaces/Forms.ts
@@ -10,4 +10,12 @@ export interface SettingsForm {
  pinAppsByDefault: number;
  pinCategoriesByDefault: number;
  hideHeader: number;
-}
+  hideApps: number;
+  hideCategories: number;
+  hideSearch: number;
+  defaultSearchProvider: string;
+  useOrdering: string;
+  appsSameTab: number;
+  bookmarksSameTab: number;
+  searchSameTab: number;
+}
--- a/client/src/interfaces/Query.ts
+++ b/client/src/interfaces/Query.ts
@@ -0,0 +1,5 @@
+export interface Query {
+  name: string;
+  prefix: string;
+  template: string;
+}
--- a/client/src/interfaces/index.ts
+++ b/client/src/interfaces/index.ts
@@ -7,4 +7,5 @@ export * from './Bookmark';
 export * from './Category';
 export * from './Notification';
 export * from './Config';
-export * from './Forms';
+export * from './Forms';
+export * from './Query';
--- a/client/src/setupProxy.js
+++ b/client/src/setupProxy.js
@@ -5,11 +5,16 @@ module.exports = function (app) {
    target: 'http://localhost:5005'
  })

+  const assetsProxy = createProxyMiddleware('/uploads', {
+    target: 'http://localhost:5005'
+  })
+
  const wsProxy = createProxyMiddleware('/socket', {
    target: 'http://localhost:5005',
    ws: true
  })

  app.use(apiProxy);
+  app.use(assetsProxy);
  app.use(wsProxy);
 };
--- a/client/src/store/actions/actionTypes.ts
+++ b/client/src/store/actions/actionTypes.ts
@@ -7,12 +7,16 @@ import {
  AddAppAction,
  DeleteAppAction,
  UpdateAppAction,
+  ReorderAppsAction,
+  SortAppsAction,
  // Categories
  GetCategoriesAction,
  AddCategoryAction,
  PinCategoryAction,
  DeleteCategoryAction,
  UpdateCategoryAction,
+  SortCategoriesAction,
+  ReorderCategoriesAction,
  // Bookmarks
  AddBookmarkAction,
  DeleteBookmarkAction,
@@ -37,6 +41,8 @@ export enum ActionTypes {
  addAppSuccess = 'ADD_APP_SUCCESS',
  deleteApp = 'DELETE_APP',
  updateApp = 'UPDATE_APP',
+  reorderApps = 'REORDER_APPS',
+  sortApps = 'SORT_APPS',
  // Categories
  getCategories = 'GET_CATEGORIES',
  getCategoriesSuccess = 'GET_CATEGORIES_SUCCESS',
@@ -45,6 +51,8 @@ export enum ActionTypes {
  pinCategory = 'PIN_CATEGORY',
  deleteCategory = 'DELETE_CATEGORY',
  updateCategory = 'UPDATE_CATEGORY',
+  sortCategories = 'SORT_CATEGORIES',
+  reorderCategories = 'REORDER_CATEGORIES',
  // Bookmarks
  addBookmark = 'ADD_BOOKMARK',
  deleteBookmark = 'DELETE_BOOKMARK',
@@ -66,12 +74,16 @@ export type Action =
  AddAppAction |
  DeleteAppAction |
  UpdateAppAction |
+  ReorderAppsAction |
+  SortAppsAction |
  // Categories
  GetCategoriesAction<any> |
  AddCategoryAction |
  PinCategoryAction |
  DeleteCategoryAction |
  UpdateCategoryAction |
+  SortCategoriesAction |
+  ReorderCategoriesAction |
  // Bookmarks
  AddBookmarkAction |
  DeleteBookmarkAction |
--- a/client/src/store/actions/app.ts
+++ b/client/src/store/actions/app.ts
@@ -1,7 +1,7 @@
 import axios from 'axios';
 import { Dispatch } from 'redux';
 import { ActionTypes } from './actionTypes';
-import { App, ApiResponse, NewApp } from '../../interfaces';
+import { App, ApiResponse, NewApp, Config } from '../../interfaces';
 import { CreateNotificationAction } from './notification';

 export interface GetAppsAction<T> {
@@ -61,7 +61,7 @@ export interface AddAppAction {
  payload: App;
 }

-export const addApp = (formData: NewApp) => async (dispatch: Dispatch) => {
+export const addApp = (formData: NewApp | FormData) => async (dispatch: Dispatch) => {
  try {
    const res = await axios.post<ApiResponse<App>>('/api/apps', formData);

@@ -69,14 +69,17 @@ export const addApp = (formData: NewApp) => async (dispatch: Dispatch) => {
      type: ActionTypes.createNotification,
      payload: {
        title: 'Success',
-        message: `App ${formData.name} added`
+        message: `App added`
      }
    })

-    dispatch<AddAppAction>({
+    await dispatch<AddAppAction>({
      type: ActionTypes.addAppSuccess,
      payload: res.data.data
    })
+
+    // Sort apps
+    dispatch<any>(sortApps())
  } catch (err) {
    console.log(err);
  }
@@ -113,7 +116,7 @@ export interface UpdateAppAction {
  payload: App;
 }

-export const updateApp = (id: number, formData: NewApp) => async (dispatch: Dispatch) => {
+export const updateApp = (id: number, formData: NewApp | FormData) => async (dispatch: Dispatch) => {
  try {
    const res = await axios.put<ApiResponse<App>>(`/api/apps/${id}`, formData);

@@ -121,14 +124,67 @@ export const updateApp = (id: number, formData: NewApp) => async (dispatch: Disp
      type: ActionTypes.createNotification,
      payload: {
        title: 'Success',
-        message: `App ${formData.name} updated`
+        message: `App updated`
      }
    })

-    dispatch<UpdateAppAction>({
+    await dispatch<UpdateAppAction>({
      type: ActionTypes.updateApp,
      payload: res.data.data
    })
+
+    // Sort apps
+    dispatch<any>(sortApps())
+  } catch (err) {
+    console.log(err);
+  }
+}
+
+export interface ReorderAppsAction {
+  type: ActionTypes.reorderApps;
+  payload: App[]
+}
+
+interface ReorderQuery {
+  apps: {
+    id: number;
+    orderId: number;
+  }[]
+}
+
+export const reorderApps = (apps: App[]) => async (dispatch: Dispatch) => {
+  try {
+    const updateQuery: ReorderQuery = { apps: [] }
+
+    apps.forEach((app, index) => updateQuery.apps.push({
+      id: app.id,
+      orderId: index + 1
+    }))
+
+    await axios.put<ApiResponse<{}>>('/api/apps/0/reorder', updateQuery);
+
+    dispatch<ReorderAppsAction>({
+      type: ActionTypes.reorderApps,
+      payload: apps
+    })
+  } catch (err) {
+    console.log(err);
+  }
+}
+
+export interface SortAppsAction {
+  type: ActionTypes.sortApps;
+  payload: string;
+}
+
+export const sortApps = () => async (dispatch: Dispatch) => {
+  try {
+    const res = await axios.get<ApiResponse<Config>>('/api/config/useOrdering');
+
+    dispatch<SortAppsAction>({
+      type: ActionTypes.sortApps,
+      payload: res.data.data.value
+    })
  } catch (err) {
    console.log(err);
  }
--- a/client/src/store/actions/bookmark.ts
+++ b/client/src/store/actions/bookmark.ts
@@ -1,7 +1,7 @@
 import axios from 'axios';
 import { Dispatch } from 'redux';
 import { ActionTypes } from './actionTypes';
-import { Category, ApiResponse, NewCategory, Bookmark, NewBookmark } from '../../interfaces';
+import { Category, ApiResponse, NewCategory, Bookmark, NewBookmark, Config } from '../../interfaces';
 import { CreateNotificationAction } from './notification';

 /**
@@ -54,6 +54,8 @@ export const addCategory = (formData: NewCategory) => async (dispatch: Dispatch)
      type: ActionTypes.addCategory,
      payload: res.data.data
    })
+
+    dispatch<any>(sortCategories());
  } catch (err) {
    console.log(err);
  }
@@ -173,6 +175,8 @@ export const updateCategory = (id: number, formData: NewCategory) => async (disp
      type: ActionTypes.updateCategory,
      payload: res.data.data
    })
+
+    dispatch<any>(sortCategories());
  } catch (err) {
    console.log(err);
  }
@@ -261,4 +265,60 @@ export const updateBookmark = (bookmarkId: number, formData: NewBookmark, previo
  } catch (err) {
    console.log(err);
  }
+}
+
+/**
+ * SORT CATEGORIES
+ */
+export interface SortCategoriesAction {
+  type: ActionTypes.sortCategories;
+  payload: string;
+}
+
+export const sortCategories = () => async (dispatch: Dispatch) => {
+  try {
+    const res = await axios.get<ApiResponse<Config>>('/api/config/useOrdering');
+
+    dispatch<SortCategoriesAction>({
+      type: ActionTypes.sortCategories,
+      payload: res.data.data.value
+    })
+  } catch (err) {
+    console.log(err);
+  }
+}
+
+/**
+ * REORDER CATEGORIES
+ */
+export interface ReorderCategoriesAction {
+  type: ActionTypes.reorderCategories;
+  payload: Category[];
+}
+
+interface ReorderQuery {
+  categories: {
+    id: number;
+    orderId: number;
+  }[]
+}
+
+export const reorderCategories = (categories: Category[]) => async (dispatch: Dispatch) => {
+  try {
+    const updateQuery: ReorderQuery = { categories: [] }
+
+    categories.forEach((category, index) => updateQuery.categories.push({
+      id: category.id,
+      orderId: index + 1
+    }))
+
+    await axios.put<ApiResponse<{}>>('/api/categories/0/reorder', updateQuery);
+
+    dispatch<ReorderCategoriesAction>({
+      type: ActionTypes.reorderCategories,
+      payload: categories
+    })
+  } catch (err) {
+    console.log(err);
+  }
 }
--- a/client/src/store/reducers/app.ts
+++ b/client/src/store/reducers/app.ts
@@ -1,5 +1,6 @@
 import { ActionTypes, Action } from '../actions';
 import { App } from '../../interfaces/App';
+import { sortData } from '../../utility';

 export interface State {
  loading: boolean;
@@ -52,11 +53,9 @@ const pinApp = (state: State, action: Action): State => {
 }

 const addAppSuccess = (state: State, action: Action): State => {
-  const tmpApps = [...state.apps, action.payload];
-
  return {
    ...state,
-    apps: tmpApps
+    apps: [...state.apps, action.payload]
  }
 }

@@ -85,6 +84,22 @@ const updateApp = (state: State, action: Action): State => {
  }
 }

+const reorderApps = (state: State, action: Action): State => {
+  return {
+    ...state,
+    apps: action.payload
+  }
+}
+
+const sortApps = (state: State, action: Action): State => {
+  const sortedApps = sortData<App>(state.apps, action.payload);
+
+  return {
+    ...state,
+    apps: sortedApps
+  }
+}
+
 const appReducer = (state = initialState, action: Action) => {
  switch (action.type) {
    case ActionTypes.getApps: return getApps(state, action);
@@ -94,6 +109,8 @@ const appReducer = (state = initialState, action: Action) => {
    case ActionTypes.addAppSuccess: return addAppSuccess(state, action);
    case ActionTypes.deleteApp: return deleteApp(state, action);
    case ActionTypes.updateApp: return updateApp(state, action);
+    case ActionTypes.reorderApps: return reorderApps(state, action);
+    case ActionTypes.sortApps: return sortApps(state, action);
    default: return state;
  }
 }
--- a/client/src/store/reducers/bookmark.ts
+++ b/client/src/store/reducers/bookmark.ts
@@ -1,5 +1,6 @@
 import { ActionTypes, Action } from '../actions';
 import { Category, Bookmark } from '../../interfaces';
+import { sortData } from '../../utility';

 export interface State {
  loading: boolean;
@@ -141,6 +142,22 @@ const updateBookmark = (state: State, action: Action): State => {
  }
 }

+const sortCategories = (state: State, action: Action): State => {
+  const sortedCategories = sortData<Category>(state.categories, action.payload);
+
+  return {
+    ...state,
+    categories: sortedCategories
+  }
+}
+
+const reorderCategories = (state: State, action: Action): State => {
+  return {
+    ...state,
+    categories: action.payload
+  }
+}
+
 const bookmarkReducer = (state = initialState, action: Action) => {
  switch (action.type) {
    case ActionTypes.getCategories: return getCategories(state, action);
@@ -152,6 +169,8 @@ const bookmarkReducer = (state = initialState, action: Action) => {
    case ActionTypes.updateCategory: return updateCategory(state, action);
    case ActionTypes.deleteBookmark: return deleteBookmark(state, action);
    case ActionTypes.updateBookmark: return updateBookmark(state, action);
+    case ActionTypes.sortCategories: return sortCategories(state, action);
+    case ActionTypes.reorderCategories: return reorderCategories(state, action);
    default: return state;
  }
 }
--- a/client/src/utility/checkVersion.ts
+++ b/client/src/utility/checkVersion.ts
@@ -0,0 +1,27 @@
+import axios from 'axios';
+import { store } from '../store/store';
+import { createNotification } from '../store/actions';
+
+export const checkVersion = async (isForced: boolean = false) => {
+  try {
+    const res = await axios.get<string>('https://raw.githubusercontent.com/pawelmalak/flame/master/client/.env');
+
+    const githubVersion = res.data
+      .split('\n')
+      .map(pair => pair.split('='))[0][1];
+
+    if (githubVersion !== process.env.REACT_APP_VERSION) {
+      store.dispatch<any>(createNotification({
+        title: 'Info',
+        message: 'New version is available!'
+      }))
+    } else if (isForced) {
+      store.dispatch<any>(createNotification({
+        title: 'Info',
+        message: 'You are using the latest version!'
+      }))
+    }
+  } catch (err) {
+    console.log(err);
+  }
+}
--- a/client/src/utility/index.ts
+++ b/client/src/utility/index.ts
@@ -1,3 +1,6 @@
 export * from './iconParser';
 export * from './urlParser';
-export * from './searchConfig';
+export * from './searchConfig';
+export * from './checkVersion';
+export * from './sortData';
+export * from './searchParser';
--- a/client/src/utility/searchConfig.ts
+++ b/client/src/utility/searchConfig.ts
@@ -18,7 +18,7 @@ export const searchConfig = (key: string, _default: any) => {
    } else {
      return pair.value;
    }
-  } else {
-    return _default;
  }
+  
+  return _default;
 }
--- a/client/src/utility/searchParser.ts
+++ b/client/src/utility/searchParser.ts
@@ -0,0 +1,26 @@
+import { queries } from './searchQueries.json';
+import { Query } from '../interfaces';
+
+import { searchConfig } from '.';
+
+export const searchParser = (searchQuery: string): boolean => {
+  const splitQuery = searchQuery.match(/^\/([a-z]+)[ ](.+)$/i);
+  const prefix = splitQuery ? splitQuery[1] : searchConfig('defaultSearchProvider', 'd');
+  const search = splitQuery ? encodeURIComponent(splitQuery[2]) : encodeURIComponent(searchQuery);
+
+  const query = queries.find((q: Query) => q.prefix === prefix);
+
+  if (query) {
+    const sameTab = searchConfig('searchSameTab', false);
+
+    if (sameTab) {
+      document.location.replace(`${query.template}${search}`);
+    } else {
+      window.open(`${query.template}${search}`);
+    }
+
+    return true;
+  }
+
+  return false;
+}
--- a/client/src/utility/searchQueries.json
+++ b/client/src/utility/searchQueries.json
@@ -0,0 +1,44 @@
+{
+  "queries": [
+    {
+      "name": "Google",
+      "prefix": "g",
+      "template": "https://www.google.com/search?q="
+    },
+    {
+      "name": "DuckDuckGo",
+      "prefix": "d",
+      "template": "https://duckduckgo.com/?q="
+    },
+    {
+      "name": "Disroot",
+      "prefix": "ds",
+      "template": "http://search.disroot.org/search?q="
+    },
+    {
+      "name": "YouTube",
+      "prefix": "yt",
+      "template": "https://www.youtube.com/results?search_query="
+    },
+    {
+      "name": "Reddit",
+      "prefix": "r",
+      "template": "https://www.reddit.com/search?q="
+    },
+    {
+      "name": "IMDb",
+      "prefix": "im",
+      "template": "https://www.imdb.com/find?q="
+    },
+    {
+      "name": "The Movie Database",
+      "prefix": "mv",
+      "template": "https://www.themoviedb.org/search?query="
+    },
+    {
+      "name": "Spotify",
+      "prefix": "sp",
+      "template": "https://open.spotify.com/search/"
+    }
+  ]
+}
--- a/client/src/utility/sortData.ts
+++ b/client/src/utility/sortData.ts
@@ -0,0 +1,29 @@
+interface Data {
+  name: string;
+  orderId: number;
+  createdAt: Date;
+}
+
+export const sortData = <T extends Data>(array: T[], field: string): T[] => {
+  const sortedData = array.slice();
+
+  if (field === 'name') {
+    sortedData.sort((a: T, b: T) => {
+      return a.name.localeCompare(b.name, 'en', { sensitivity: 'base' })
+    })
+  } else if (field === 'orderId') {
+    sortedData.sort((a: T, b: T) => {
+      if (a.orderId < b.orderId) { return -1 }
+      if (a.orderId > b.orderId) { return 1 }
+      return 0;
+    })
+  } else {
+    sortedData.sort((a: T, b: T) => {
+      if (a.createdAt < b.createdAt) { return -1 }
+      if (a.createdAt > b.createdAt) { return 1 }
+      return 0;
+    })
+  }
+
+  return sortedData;
+}
--- a/client/src/utility/urlParser.ts
+++ b/client/src/utility/urlParser.ts
@@ -2,8 +2,8 @@ export const urlParser = (url: string): string[] => {
  let parsedUrl: string;
  let displayUrl: string;

-  if (/https?:\/\//.test(url)) {
-    // Url starts with http[s]:// -> leave it as it is
+  if (/(https?|steam):\/\//.test(url)) {
+    // Url starts with http[s]:// or steam:// -> leave it as it is
    parsedUrl = url;
  } else {
    // No protocol -> apply http:// prefix
@@ -11,10 +11,14 @@ export const urlParser = (url: string): string[] => {
  }

  // Create simplified url to display as text
-  displayUrl = url
+  if (/steam:\/\//.test(url)) {
+    displayUrl = 'Run Steam App';
+  } else {
+    displayUrl = url
    .replace(/https?:\/\//, '')
    .replace('www.', '')
    .replace(/\/$/, '');
-
+  }
+  
  return [displayUrl, parsedUrl]
 }
--- a/controllers/apps.js
+++ b/controllers/apps.js
@@ -2,6 +2,7 @@ const asyncWrapper = require('../middleware/asyncWrapper');
 const ErrorResponse = require('../utils/ErrorResponse');
 const App = require('../models/App');
 const Config = require('../models/Config');
+const { Sequelize } = require('sequelize');

 // @desc      Create new app
 // @route     POST /api/apps
@@ -13,11 +14,17 @@ exports.createApp = asyncWrapper(async (req, res, next) => {
  });

  let app;
+  let _body = { ...req.body };
+
+  if (req.file) {
+    _body.icon = req.file.filename;
+  }
+

  if (pinApps) {
    if (parseInt(pinApps.value)) {
      app = await App.create({
-        ...req.body,
+        ..._body,
        isPinned: true
      })
    } else {
@@ -35,10 +42,24 @@ exports.createApp = asyncWrapper(async (req, res, next) => {
 // @route     GET /api/apps
 // @access    Public
 exports.getApps = asyncWrapper(async (req, res, next) => {
-  const apps = await App.findAll({
-    order: [['name', 'ASC']]
+  // Get config from database
+  const useOrdering = await Config.findOne({
+    where: { key: 'useOrdering' }
  });

+  const orderType = useOrdering ? useOrdering.value : 'createdAt';
+  let apps;
+
+  if (orderType == 'name') {
+    apps = await App.findAll({
+      order: [[ Sequelize.fn('lower', Sequelize.col('name')), 'ASC' ]]
+    });
+  } else {
+    apps = await App.findAll({
+      order: [[ orderType, 'ASC' ]]
+    });
+  }
+
  res.status(200).json({
    success: true,
    data: apps
@@ -91,6 +112,22 @@ exports.deleteApp = asyncWrapper(async (req, res, next) => {
    where: { id: req.params.id }
  })

+  res.status(200).json({
+    success: true,
+    data: {}
+  })
+})
+
+// @desc      Reorder apps
+// @route     PUT /api/apps/0/reorder
+// @access    Public
+exports.reorderApps = asyncWrapper(async (req, res, next) => {
+  req.body.apps.forEach(async ({ id, orderId }) => {
+    await App.update({ orderId }, {
+      where: { id }
+    })
+  })
+
  res.status(200).json({
    success: true,
    data: {}
--- a/controllers/bookmark.js
+++ b/controllers/bookmark.js
@@ -1,6 +1,7 @@
 const asyncWrapper = require('../middleware/asyncWrapper');
 const ErrorResponse = require('../utils/ErrorResponse');
 const Bookmark = require('../models/Bookmark');
+const { Sequelize } = require('sequelize');

 // @desc      Create new bookmark
 // @route     POST /api/bookmarks
@@ -19,7 +20,7 @@ exports.createBookmark = asyncWrapper(async (req, res, next) => {
 // @access    Public
 exports.getBookmarks = asyncWrapper(async (req, res, next) => {
  const bookmarks = await Bookmark.findAll({
-    order: [['name', 'ASC']]
+    order: [[ Sequelize.fn('lower', Sequelize.col('name')), 'ASC' ]]
  });

  res.status(200).json({
--- a/controllers/category.js
+++ b/controllers/category.js
@@ -3,6 +3,7 @@ const ErrorResponse = require('../utils/ErrorResponse');
 const Category = require('../models/Category');
 const Bookmark = require('../models/Bookmark');
 const Config = require('../models/Config');
+const { Sequelize } = require('sequelize')

 // @desc      Create new category
 // @route     POST /api/categories
@@ -36,14 +37,32 @@ exports.createCategory = asyncWrapper(async (req, res, next) => {
 // @route     GET /api/categories
 // @access    Public
 exports.getCategories = asyncWrapper(async (req, res, next) => {
-  const categories = await Category.findAll({
-    include: [{
-      model: Bookmark,
-      as: 'bookmarks'
-    }],
-    order: [['name', 'ASC']]
+  // Get config from database
+  const useOrdering = await Config.findOne({
+    where: { key: 'useOrdering' }
  });

+  const orderType = useOrdering ? useOrdering.value : 'createdAt';
+  let categories;
+
+  if (orderType == 'name') {
+    categories = await Category.findAll({
+      include: [{
+        model: Bookmark,
+        as: 'bookmarks'
+      }],
+      order: [[ Sequelize.fn('lower', Sequelize.col('Category.name')), 'ASC' ]]
+    });
+  } else {
+    categories = await Category.findAll({
+      include: [{
+        model: Bookmark,
+        as: 'bookmarks'
+      }],
+      order: [[ orderType, 'ASC' ]]
+    });
+  }
+
  res.status(200).json({
    success: true,
    data: categories
@@ -118,6 +137,22 @@ exports.deleteCategory = asyncWrapper(async (req, res, next) => {
    where: { id: req.params.id }
  })

+  res.status(200).json({
+    success: true,
+    data: {}
+  })
+})
+
+// @desc      Reorder categories
+// @route     PUT /api/categories/0/reorder
+// @access    Public
+exports.reorderCategories = asyncWrapper(async (req, res, next) => {
+  req.body.categories.forEach(async ({ id, orderId }) => {
+    await Category.update({ orderId }, {
+      where: { id }
+    })
+  })
+
  res.status(200).json({
    success: true,
    data: {}
--- a/controllers/config.js
+++ b/controllers/config.js
@@ -2,6 +2,9 @@ const asyncWrapper = require('../middleware/asyncWrapper');
 const ErrorResponse = require('../utils/ErrorResponse');
 const Config = require('../models/Config');
 const { Op } = require('sequelize');
+const File = require('../utils/File');
+const { join } = require('path');
+const fs = require('fs');

 // @desc      Insert new key:value pair
 // @route     POST /api/config
@@ -122,6 +125,36 @@ exports.deletePair = asyncWrapper(async (req, res, next) => {

  await pair.destroy();

+  res.status(200).json({
+    success: true,
+    data: {}
+  })
+})
+
+// @desc      Get custom CSS file
+// @route     GET /api/config/0/css
+// @access    Public
+exports.getCss = asyncWrapper(async (req, res, next) => {
+  const file = new File(join(__dirname, '../public/flame.css'));
+  const content = file.read();
+
+  res.status(200).json({
+    success: true,
+    data: content
+  })
+})
+
+
+// @desc      Update custom CSS file
+// @route     PUT /api/config/0/css
+// @access    Public
+exports.updateCss = asyncWrapper(async (req, res, next) => {
+  const file = new File(join(__dirname, '../public/flame.css'));
+  file.write(req.body.styles);
+
+  // Copy file to docker volume
+  fs.copyFileSync(join(__dirname, '../public/flame.css'), join(__dirname, '../data/flame.css'));
+
  res.status(200).json({
    success: true,
    data: {}
--- a/db.js
+++ b/db.js
@@ -1,24 +1,32 @@
 const { Sequelize } = require('sequelize');
+const Logger = require('./utils/Logger');
+const logger = new Logger();

 const sequelize = new Sequelize({
  dialect: 'sqlite',
  storage: './data/db.sqlite',
  logging: false
-});
+})

 const connectDB = async () => {
  try {
    await sequelize.authenticate();
-    console.log('Connected to database');
+    logger.log('Connected to database');
    
-    await sequelize.sync({ alter: true });
-    console.log('All models were synced');
+    const syncModels = true;
+    
+    if (syncModels) {
+      logger.log('Starting model synchronization');
+      await sequelize.sync({ alter: true });
+      logger.log('All models were synchronized');
+    }
  } catch (error) {
-    console.error('Unable to connect to the database:', error);
+    logger.log(`Unable to connect to the database: ${error.message}`, 'ERROR');
+    process.exit(1);
  }
 }

 module.exports = {
  connectDB,
  sequelize
-};
+}
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -0,0 +1,10 @@
+version: "3"
+services:
+  flame:
+    image: pawelmalak/flame
+    container_name: flame
+    volumes:
+      - /path/to/data:/app/data
+    ports:
+      - 5005:5005
+    restart: unless-stopped
--- a/github/_apps.png
+++ b/github/_apps.png
--- a/github/_bookmarks.png
+++ b/github/_bookmarks.png
--- a/github/_home.png
+++ b/github/_home.png
--- a/github/_themes.png
+++ b/github/_themes.png
--- a/middleware/errorHandler.js
+++ b/middleware/errorHandler.js
@@ -1,5 +1,7 @@
 const ErrorResponse = require('../utils/ErrorResponse');
 const colors = require('colors');
+const Logger = require('../utils/Logger');
+const logger = new Logger();

 const errorHandler = (err, req, res, next) => {
  let error = { ...err };
@@ -10,8 +12,7 @@ const errorHandler = (err, req, res, next) => {
  //   error = new ErrorResponse(`Field ${msg}`, 400);
  // }

-  console.log(error);
-  console.log(`${err}`);
+  logger.log(error.message.split(',')[0], 'ERROR');

  res.status(err.statusCode || 500).json({
    success: false,
--- a/middleware/multer.js
+++ b/middleware/multer.js
@@ -0,0 +1,29 @@
+const fs = require('fs');
+const multer = require('multer');
+
+if (!fs.existsSync('data/uploads')) {
+  fs.mkdirSync('data/uploads', { recursive: true });
+}
+
+const storage = multer.diskStorage({
+  destination: (req, file, cb) => {
+    cb(null, './data/uploads');
+  },
+  filename: (req, file, cb) => {
+    cb(null, Date.now() + '--' + file.originalname);
+  }
+})
+
+const supportedTypes = ['jpg', 'jpeg', 'png'];
+
+const fileFilter = (req, file, cb) => {
+  if (supportedTypes.includes(file.mimetype.split('/')[1])) {
+    cb(null, true);
+  } else {
+    cb(null, false);
+  }
+}
+
+const upload = multer({ storage, fileFilter });
+
+module.exports = upload.single('icon');
--- a/models/App.js
+++ b/models/App.js
@@ -18,6 +18,11 @@ const App = sequelize.define('App', {
  isPinned: {
    type: DataTypes.BOOLEAN,
    defaultValue: false
+  },
+  orderId: {
+    type: DataTypes.INTEGER,
+    allowNull: true,
+    defaultValue: null
  }
 }, {
  tableName: 'apps'
--- a/models/Category.js
+++ b/models/Category.js
@@ -9,6 +9,11 @@ const Category = sequelize.define('Category', {
  isPinned: {
    type: DataTypes.BOOLEAN,
    defaultValue: false
+  },
+  orderId: {
+    type: DataTypes.INTEGER,
+    allowNull: true,
+    defaultValue: null
  }
 }, {
  tableName: 'categories'
--- a/models/associateModels.js
+++ b/models/associateModels.js
@@ -2,12 +2,14 @@ const Category = require('./Category');
 const Bookmark = require('./Bookmark');

 const associateModels = () => {
-  // Category <> Bookmark
  Category.hasMany(Bookmark, {
-    as: 'bookmarks',
+    foreignKey: 'categoryId',
+    as: 'bookmarks'
+  });
+
+  Bookmark.belongsTo(Category, {
    foreignKey: 'categoryId'
  });
-  Bookmark.belongsTo(Category, { foreignKey: 'categoryId' });
 }

 module.exports = associateModels;
--- a/package-lock.json
+++ b/package-lock.json
@@ -224,6 +224,11 @@
        "picomatch": "^2.0.4"
      }
    },
+    "append-field": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/append-field/-/append-field-1.0.0.tgz",
+      "integrity": "sha1-HjRA6RXwsSA9I3SOeO3XubW0PlY="
+    },
    "aproba": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
@@ -364,6 +369,43 @@
        "fill-range": "^7.0.1"
      }
    },
+    "buffer-from": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
+      "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A=="
+    },
+    "busboy": {
+      "version": "0.2.14",
+      "resolved": "https://registry.npmjs.org/busboy/-/busboy-0.2.14.tgz",
+      "integrity": "sha1-bCpiLvz0fFe7vh4qnDetNseSVFM=",
+      "requires": {
+        "dicer": "0.2.5",
+        "readable-stream": "1.1.x"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+        },
+        "readable-stream": {
+          "version": "1.1.14",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
+          "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=",
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.1",
+            "isarray": "0.0.1",
+            "string_decoder": "~0.10.x"
+          }
+        },
+        "string_decoder": {
+          "version": "0.10.31",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+          "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
+        }
+      }
+    },
    "bytes": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
@@ -553,6 +595,17 @@
      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
    },
+    "concat-stream": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz",
+      "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==",
+      "requires": {
+        "buffer-from": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^2.2.2",
+        "typedarray": "^0.0.6"
+      }
+    },
    "concurrently": {
      "version": "6.0.2",
      "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-6.0.2.tgz",
@@ -741,6 +794,38 @@
      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
      "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups="
    },
+    "dicer": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/dicer/-/dicer-0.2.5.tgz",
+      "integrity": "sha1-WZbAhrszIYyBLAkL3cCc0S+stw8=",
+      "requires": {
+        "readable-stream": "1.1.x",
+        "streamsearch": "0.1.2"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+        },
+        "readable-stream": {
+          "version": "1.1.14",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
+          "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=",
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.1",
+            "isarray": "0.0.1",
+            "string_decoder": "~0.10.x"
+          }
+        },
+        "string_decoder": {
+          "version": "0.10.31",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+          "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
+        }
+      }
+    },
    "dot-prop": {
      "version": "5.3.0",
      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz",
@@ -1611,6 +1696,21 @@
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
    },
+    "multer": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/multer/-/multer-1.4.2.tgz",
+      "integrity": "sha512-xY8pX7V+ybyUpbYMxtjM9KAiD9ixtg5/JkeKUTD6xilfDv0vzzOFcCp4Ljb1UU3tSOM3VTZtKo63OmzOrGi3Cg==",
+      "requires": {
+        "append-field": "^1.0.0",
+        "busboy": "^0.2.11",
+        "concat-stream": "^1.5.2",
+        "mkdirp": "^0.5.1",
+        "object-assign": "^4.1.1",
+        "on-finished": "^2.3.0",
+        "type-is": "^1.6.4",
+        "xtend": "^4.0.0"
+      }
+    },
    "needle": {
      "version": "2.6.0",
      "resolved": "https://registry.npmjs.org/needle/-/needle-2.6.0.tgz",
@@ -2411,6 +2511,11 @@
      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
      "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow="
    },
+    "streamsearch": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-0.1.2.tgz",
+      "integrity": "sha1-gIudDlb8Jz2Am6VzOOkpkZoanxo="
+    },
    "string-width": {
      "version": "4.2.2",
      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.2.tgz",
@@ -2577,6 +2682,11 @@
        "mime-types": "~2.1.24"
      }
    },
+    "typedarray": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
+      "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
+    },
    "typedarray-to-buffer": {
      "version": "3.1.5",
      "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
@@ -2804,6 +2914,11 @@
      "integrity": "sha512-PSNhEJDejZYV7h50BohL09Er9VaIefr2LMAf3OEmpCkjOi34eYyQYAXUTjEQtZJTKcF0E2UKTh+osDLsgNim9Q==",
      "dev": true
    },
+    "xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
+    },
    "y18n": {
      "version": "5.0.8",
      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
    "concurrently": "^6.0.2",
    "dotenv": "^9.0.0",
    "express": "^4.17.1",
+    "multer": "^1.4.2",
    "node-schedule": "^2.0.0",
    "sequelize": "^6.6.2",
    "sqlite3": "^5.0.2",
--- a/routes/apps.js
+++ b/routes/apps.js
@@ -1,17 +1,19 @@
 const express = require('express');
 const router = express.Router();
+const upload = require('../middleware/multer');

 const {
  createApp,
  getApps,
  getApp,
  updateApp,
-  deleteApp
+  deleteApp,
+  reorderApps
 } = require('../controllers/apps');

 router
  .route('/')
-  .post(createApp)
+  .post(upload, createApp)
  .get(getApps);

 router
@@ -20,4 +22,8 @@ router
  .put(updateApp)
  .delete(deleteApp);

+router
+  .route('/0/reorder')
+  .put(reorderApps);
+
 module.exports = router;
--- a/routes/category.js
+++ b/routes/category.js
@@ -6,7 +6,8 @@ const {
  getCategories,
  getCategory,
  updateCategory,
-  deleteCategory
+  deleteCategory,
+  reorderCategories
 } = require('../controllers/category');

 router
@@ -20,4 +21,8 @@ router
  .put(updateCategory)
  .delete(deleteCategory);

+router
+  .route('/0/reorder')
+  .put(reorderCategories);
+
 module.exports = router;
--- a/routes/config.js
+++ b/routes/config.js
@@ -8,6 +8,8 @@ const {
  updateValue,
  updateValues,
  deletePair,
+  updateCss,
+  getCss,
 } = require('../controllers/config');

 router
@@ -22,4 +24,9 @@ router
  .put(updateValue)
  .delete(deletePair);

+router
+  .route('/0/css')
+  .get(getCss)
+  .put(updateCss);
+
 module.exports = router;
--- a/server.js
+++ b/server.js
@@ -7,23 +7,27 @@ const Socket = require('./Socket');
 const Sockets = require('./Sockets');
 const associateModels = require('./models/associateModels');
 const initConfig = require('./utils/initConfig');
+const findCss = require('./utils/findCss');
+const Logger = require('./utils/Logger');
+const logger = new Logger();

 const PORT = process.env.PORT || 5005;

-connectDB()
-  .then(() => {
-    associateModels();
-    initConfig();
-  });
+(async () => {
+  await connectDB();
+  await associateModels();
+  await initConfig();
+  findCss();

-// Create server for Express API and WebSockets
-const server = http.createServer();
-server.on('request', api);
+  // Create server for Express API and WebSockets
+  const server = http.createServer();
+  server.on('request', api);

-// Register weatherSocket
-const weatherSocket = new Socket(server);
-Sockets.registerSocket('weather', weatherSocket);
+  // Register weatherSocket
+  const weatherSocket = new Socket(server);
+  Sockets.registerSocket('weather', weatherSocket);

-server.listen(PORT, () => {
-  console.log(`Server is running on port ${PORT} in ${process.env.NODE_ENV} mode`);
-})
+  server.listen(PORT, () => {
+    logger.log(`Server is running on port ${PORT} in ${process.env.NODE_ENV} mode`);
+  })
+})();
--- a/utils/File.js
+++ b/utils/File.js
@@ -0,0 +1,25 @@
+const fs = require('fs');
+
+class File {
+  constructor(path) {
+    this.path = path;
+    this.content = '';
+  }
+
+  read() {
+    try {
+      const content = fs.readFileSync(this.path, { encoding: 'utf-8' });
+      this.content = content;
+      return this.content;
+    } catch (err) {
+      return err.message;
+    }
+  }
+
+  write(data) {
+    this.content = data;
+    fs.writeFileSync(this.path, this.content);
+  }
+}
+
+module.exports = File;
--- a/utils/Logger.js
+++ b/utils/Logger.js
@@ -1,40 +1,39 @@
-const fs = require('fs');
-
 class Logger {
-  constructor() {
-    this.logFileHandler();
+  log(message, level = 'INFO') {
+    console.log(`[${this.generateTimestamp()}] [${level}] ${message}`)
  }

-  logFileHandler() {
-    if (!fs.existsSync('./flame.log')) {
-      fs.writeFileSync('./flame.log', '');
-    } else {
-      console.log('file exists');
+  generateTimestamp() {
+    const d = new Date();
+
+    // Date
+    const year = d.getFullYear();
+    const month = this.parseDate(d.getMonth() + 1);
+    const day = this.parseDate(d.getDate());
+
+    // Time
+    const hour = this.parseDate(d.getHours());
+    const minutes = this.parseDate(d.getMinutes());
+    const seconds = this.parseDate(d.getSeconds());
+    const miliseconds = this.parseDate(d.getMilliseconds(), true);
+
+    // Timezone
+    const tz = -d.getTimezoneOffset() / 60;
+
+    return `${year}-${month}-${day} ${hour}:${minutes}:${seconds}.${miliseconds} UTC${tz >= 0 ? '+' + tz : tz}`;
+  }
+
+  parseDate(date, ms = false) {
+    if (ms) {
+      if (date >= 10 && date < 100) {
+        return `0${date}`;
+      } else if (date < 10) {
+        return `00${date}`;
+      }
    }
-  }

-  writeLog(logMsg, logType) {
-
-  }
-
-  generateLog(logMsg, logType) {
-    const now = new Date();
-    const date = `${this.parseNumber(now.getDate())}-${this.parseNumber(now.getMonth() + 1)}-${now.getFullYear()}`;
-    const time = `${this.parseNumber(now.getHours())}:${this.parseNumber(now.getMinutes())}:${this.parseNumber(now.getSeconds())}.${now.getMilliseconds()}`;
-    const log = `[${date} ${time}]: ${logType} ${logMsg}`;
-    return log;
-    //  const timestamp = new Date().toISOString();
-  }
-
-  parseNumber(number) {
-    if (number > 9) {
-      return number;
-    } else {
-      return `0${number}`;
-    }
+    return date < 10 ? `0${date}` : date.toString();
  }
 }

-// console.log(logger.generateLog('testMsg', 'INFO'));
-
-module.exports = new Logger();
+module.exports = Logger;
--- a/utils/clearWeatherData.js
+++ b/utils/clearWeatherData.js
@@ -1,5 +1,7 @@
 const { Op } = require('sequelize');
 const Weather = require('../models/Weather');
+const Logger = require('./Logger');
+const logger = new Logger();

 const clearWeatherData = async () => {
  const weather = await Weather.findOne({
@@ -16,7 +18,7 @@ const clearWeatherData = async () => {
    })
  }

-  console.log('Old weather data was deleted');
+  logger.log('Old weather data was deleted');
 }

 module.exports = clearWeatherData;
--- a/utils/findCss.js
+++ b/utils/findCss.js
@@ -0,0 +1,22 @@
+const fs = require('fs');
+const { join } = require('path');
+const Logger = require('./Logger');
+const logger = new Logger();
+
+// Check if flame.css exists in mounted docker volume. Create new file if not
+const findCss = () => {
+  const srcPath = join(__dirname, '../data/flame.css');
+  const destPath = join(__dirname, '../public/flame.css');
+
+  if (fs.existsSync(srcPath)) {
+    fs.copyFileSync(srcPath, destPath);
+    logger.log('Custom CSS file found');
+    return;
+  }
+
+  logger.log('Creating empty CSS file');
+  fs.writeFileSync(destPath, '');
+
+}
+
+module.exports = findCss;
--- a/utils/initConfig.js
+++ b/utils/initConfig.js
@@ -1,6 +1,8 @@
 const { Op } = require('sequelize');
 const Config = require('../models/Config');
 const { config } = require('./initialConfig.json');
+const Logger = require('./Logger');
+const logger = new Logger();

 const initConfig = async () => {
  // Get config values
@@ -26,7 +28,7 @@ const initConfig = async () => {
    }
  })

-  console.log('Initial config created');
+  logger.log('Initial config created');
  return;
 }

--- a/utils/initialConfig.json
+++ b/utils/initialConfig.json
@@ -31,6 +31,38 @@
    {
      "key": "hideHeader",
      "value": false
+    },
+    {
+      "key": "useOrdering",
+      "value": "createdAt"
+    },
+    {
+      "key": "appsSameTab",
+      "value": false
+    },
+    {
+      "key": "bookmarksSameTab",
+      "value": false
+    },
+    {
+      "key": "searchSameTab",
+      "value": false
+    },
+    {
+      "key": "hideApps",
+      "value": false
+    },
+    {
+      "key": "hideCategories",
+      "value": false
+    },
+    {
+      "key": "hideSearch",
+      "value": false
+    },
+    {
+      "key": "defaultSearchProvider",
+      "value": "d"
    }
  ]
-}
+}
--- a/utils/jobs.js
+++ b/utils/jobs.js
@@ -2,15 +2,17 @@ const schedule = require('node-schedule');
 const getExternalWeather = require('./getExternalWeather');
 const clearWeatherData = require('./clearWeatherData');
 const Sockets = require('../Sockets');
+const Logger = require('./Logger');
+const logger = new Logger();

 // Update weather data every 15 minutes
 const weatherJob = schedule.scheduleJob('updateWeather', '0 */15 * * * *', async () => {
  try {
    const weatherData = await getExternalWeather();
-    console.log('weather updated');
+    logger.log('Weather updated');
    Sockets.getSocket('weather').socket.send(JSON.stringify(weatherData));
  } catch (err) {
-    console.log(err.message);
+    logger.log(err.message, 'ERROR');
  }
 })
Author	SHA1	Message	Date
pawelmalak	f93659b661	Merge pull request #66 from pawelmalak/feature v1.6 Release	2021-07-17 23:29:02 +02:00
unknown	88785aaa32	Fixed bug with custom css not persisting	2021-07-17 23:11:24 +02:00
unknown	4143ae8198	Added support for Steam URLs. Changed default prefix setting options to be dynamically rendered	2021-07-16 11:55:26 +02:00
pawelmalak	f1c48e8a15	Merge pull request #61 from jjack/master Adding a default search provider option, with DuckDuckGo as the default	2021-07-16 11:23:58 +02:00
pawelmalak	6445a5009a	Merge pull request #56 from strig/patch-1 Add docker-compose instructions and link in readme	2021-07-15 11:57:18 +02:00
Jeremy Jack	112a35c08f	Adding a default search provider option, with DuckDuckGo as the default	2021-07-05 23:04:03 -05:00
Neal Striegler-Pettersson	7970ac3031	Add docker-compose instructions and link in readme	2021-06-27 19:33:27 -04:00
unknown	c03f302fa6	Added option to open links in the same tab for apps/bookamrs/search separately	2021-06-25 11:24:29 +02:00
unknown	0c3a27febd	Added warning about unsupported prefix. Added support for Spotify search. Edited README file	2021-06-25 10:42:44 +02:00
pawelmalak	aec00982ba	Merge pull request #49 from pawelmalak/feature v1.5 Release	2021-06-24 13:32:26 +02:00
unknown	8026533a06	Added search bar	2021-06-24 12:53:45 +02:00
unknown	550e1e155b	Added option to hide apps and categories from home screen	2021-06-24 10:54:48 +02:00
unknown	12974ab01b	Upload custom icon on client	2021-06-23 15:27:46 +02:00
unknown	6c067bee31	Option to open links in the same tab. Api upload icon. Render image icon instead of MDI. Dockerfile client dependencies fix.	2021-06-23 14:15:14 +02:00
pawelmalak	db4a10171e	Merge pull request #46 from rgriffogoes/master Adding npm install on client code	2021-06-23 11:09:17 +02:00
Rafael Griffo Goes	472cfd6610	Adding npm install on client code	2021-06-22 22:54:24 -04:00
unknown	e3ed429da1	Imporved logger	2021-06-22 14:49:00 +02:00
unknown	5ae4d6e7c4	Read/write css file from app settings. Changed order of operations at app startup. Added nano to Dockerfile	2021-06-22 13:07:32 +02:00
unknown	4c3255107c	Updated README.md with new screenshots, new installation guide and weather module instructions	2021-06-21 13:59:17 +02:00
pawelmalak	41a3f5dae3	Merge pull request #42 from pawelmalak/feature v1.4 Release	2021-06-18 15:12:44 +02:00
pawelmalak	4ca3b509cf	Merge branch 'master' into feature	2021-06-18 15:12:36 +02:00
unknown	28680bec1a	Fixed bug with decimal input values in Safari browser	2021-06-18 14:12:17 +02:00
unknown	ae3141e37b	Sorting and custom ordering for categories	2021-06-18 13:42:55 +02:00
unknown	5b900872af	Apps reordering with drag-and-drop functionality	2021-06-18 12:09:59 +02:00
unknown	754dc3a7b9	Sorting settings. Sort apps on change/add/update	2021-06-18 10:38:05 +02:00
unknown	8974fb3b49	Preparation for custom sorting	2021-06-17 10:56:27 +02:00
unknown	ce173f2c42	Apps reordering. Sorting apps while adding them	2021-06-15 16:02:57 +02:00
unknown	9a1ec76ffd	Case-insensitive sorting. App version checking	2021-06-15 12:36:23 +02:00
pawelmalak	a9be4df157	Create client/.env	2021-06-15 12:05:46 +02:00
unknown	e884c84aa8	Fixes for apps and bookmarks tabs	2021-06-14 12:19:53 +02:00
unknown	ad5e7646c1	Fixed infinite data fetching bug on homescreen. Docker files	2021-06-14 12:13:38 +02:00