Merge pull request #432 from pawelmalak/v2.3.1

Version 2.3.1

.dev/build_dev.sh

@@ -0,0 +1 @@
+docker build -t flame:dev -f .docker/Dockerfile .

.dev/build_latest.sh

@@ -0,0 +1,2 @@
+docker build -t pawelmalak/flame -t "pawelmalak/flame:$1" -f .docker/Dockerfile . \
+  && docker push pawelmalak/flame && docker push "pawelmalak/flame:$1"

.dev/build_multiarch.sh

@@ -0,0 +1,6 @@
+docker buildx build \
+  --platform linux/arm/v7,linux/arm64,linux/amd64 \
+  -f .docker/Dockerfile.multiarch \
+  -t pawelmalak/flame:multiarch \
+  -t "pawelmalak/flame:multiarch$1" \
+  --push .

.docker/Dockerfile

@@ -27,4 +27,4 @@ EXPOSE 5005
 ENV NODE_ENV=production
 ENV PASSWORD=flame_password
 
-CMD ["node", "server.js"]
+CMD ["sh", "-c", "chown -R node /app/data && node server.js"]

.docker/Dockerfile.multiarch

@@ -28,4 +28,4 @@ EXPOSE 5005
 ENV NODE_ENV=production
 ENV PASSWORD=flame_password
 
-CMD ["node", "server.js"]
+CMD ["sh", "-c", "chown -R node /app/data && node server.js"]

.env

@@ -1,5 +1,5 @@
 PORT=5005
 NODE_ENV=development
-VERSION=2.2.1
+VERSION=2.3.1
 PASSWORD=flame_password
 SECRET=e02eb43d69953658c6d07311d6313f2d4467672cb881f96b29368ba1f3f4da4b

.gitignore

@@ -2,4 +2,3 @@ node_modules
 data
 public
 !client/public
-build.sh

CHANGELOG.md

@@ -1,3 +1,24 @@
+### v2.3.1 (2023-07-23)
+- Fixed bug where "Open search results in the same tab" setting was not respected if "Local search" was set as primary search provider ([#270](https://github.com/pawelmalak/flame/issues/270))
+- Fixed bug where search bar had rounded input field on iOS ([#394](https://github.com/pawelmalak/flame/issues/394))
+- Updated link to Material Design Icons reference page ([#414](https://github.com/pawelmalak/flame/issues/414))
+- Fixed bug where color inputs in theme creator/editor were too small ([#429](https://github.com/pawelmalak/flame/issues/429))
+- Changed input labels in settings for more consistent naming ([#430](https://github.com/pawelmalak/flame/issues/430))
+
+### v2.3.0 (2022-03-25)
+- Added custom theme editor ([#246](https://github.com/pawelmalak/flame/issues/246))
+- Added option to set secondary search provider ([#295](https://github.com/pawelmalak/flame/issues/295))
+- Fixed bug where pressing Enter with empty search bar would redirect to search results ([#325](https://github.com/pawelmalak/flame/issues/325))
+- Fixed bug where user could create empty app or bookmark which was causing page to go blank ([#332](https://github.com/pawelmalak/flame/issues/332))
+- Added new theme: Mint
+
+### v2.2.2 (2022-03-21)
+- Added option to get user location directly from the app ([#287](https://github.com/pawelmalak/flame/issues/287))
+- Fixed bug with local search not working when using prefix ([#289](https://github.com/pawelmalak/flame/issues/289))
+- Fixed bug with app description not updating when using custom icon ([#310](https://github.com/pawelmalak/flame/issues/310))
+- Changed permissions to some files and directories created by Flame
+- Changed some of the settings tabs
+
 ### v2.2.1 (2022-01-08)
 - Local search will now include app descriptions ([#266](https://github.com/pawelmalak/flame/issues/266))
 - Fixed bug with unsupported characters in local search [#279](https://github.com/pawelmalak/flame/issues/279))

README.md

@@ -11,7 +11,7 @@ Flame is self-hosted startpage for your server. Its design is inspired (heavily)
 - 📌 Pin your favourite items to the homescreen for quick and easy access
 - 🔍 Integrated search bar with local filtering, 11 web search providers and ability to add your own
 - 🔑 Authentication system to protect your settings, apps and bookmarks
-- 🔨 Dozens of options to customize Flame interface to your needs, including support for custom CSS and 15 built-in color themes
+- 🔨 Dozens of options to customize Flame interface to your needs, including support for custom CSS, 15 built-in color themes and custom theme builder
 - ☀️ Weather widget with current temperature, cloud coverage and animated weather status
 - 🐳 Docker integration to automatically pick and add apps based on their labels
 

api.js

@@ -22,6 +22,7 @@ api.use('/api/categories', require('./routes/category'));
 api.use('/api/bookmarks', require('./routes/bookmark'));
 api.use('/api/queries', require('./routes/queries'));
 api.use('/api/auth', require('./routes/auth'));
+api.use('/api/themes', require('./routes/themes'));
 
 // Custom error handler
 api.use(errorHandler);

client/.env

@@ -1 +1 @@
-REACT_APP_VERSION=2.2.1
+REACT_APP_VERSION=2.3.1

client/package.json

@@ -24,7 +24,7 @@
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.6",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.3",
+    "react-scripts": "^5.0.1",
     "redux": "^4.1.2",
     "redux-devtools-extension": "^2.13.9",
     "redux-thunk": "^2.4.0",

client/src/App.tsx

@@ -10,7 +10,7 @@ import { actionCreators, store } from './store';
 import { State } from './store/reducers';
 
 // Utils
-import { checkVersion, decodeToken } from './utility';
+import { checkVersion, decodeToken, parsePABToTheme } from './utility';
 
 // Routes
 import { Home } from './components/Home/Home';
@@ -31,7 +31,7 @@ export const App = (): JSX.Element => {
   const { config, loading } = useSelector((state: State) => state.config);
 
   const dispath = useDispatch();
-  const { fetchQueries, setTheme, logout, createNotification } =
+  const { fetchQueries, setTheme, logout, createNotification, fetchThemes } =
     bindActionCreators(actionCreators, dispath);
 
   useEffect(() => {
@@ -51,9 +51,12 @@ export const App = (): JSX.Element => {
       }
     }, 1000);
 
+    // load themes
+    fetchThemes();
+
     // set user theme if present
     if (localStorage.theme) {
-      setTheme(localStorage.theme);
+      setTheme(parsePABToTheme(localStorage.theme));
     }
 
     // check for updated
@@ -68,7 +71,7 @@ export const App = (): JSX.Element => {
   // If there is no user theme, set the default one
   useEffect(() => {
     if (!loading && !localStorage.theme) {
-      setTheme(config.defaultTheme, false);
+      setTheme(parsePABToTheme(config.defaultTheme), false);
     }
   }, [loading]);
 

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

@@ -18,10 +18,8 @@ export const AppForm = ({ modalHandler }: Props): JSX.Element => {
   const { appInUpdate } = useSelector((state: State) => state.apps);
 
   const dispatch = useDispatch();
-  const { addApp, updateApp, setEditApp } = bindActionCreators(
+  const { addApp, updateApp, setEditApp, createNotification } =
-    actionCreators,
+    bindActionCreators(actionCreators, dispatch);
-    dispatch
-  );
 
   const [useCustomIcon, toggleUseCustomIcon] = useState<boolean>(false);
   const [customIcon, setCustomIcon] = useState<File | null>(null);
@@ -58,13 +56,26 @@ export const AppForm = ({ modalHandler }: Props): JSX.Element => {
   const formSubmitHandler = (e: SyntheticEvent<HTMLFormElement>): void => {
     e.preventDefault();
 
+    for (let field of ['name', 'url', 'icon'] as const) {
+      if (/^ +$/.test(formData[field])) {
+        createNotification({
+          title: 'Error',
+          message: `Field cannot be empty: ${field}`,
+        });
+
+        return;
+      }
+    }
+
     const createFormData = (): FormData => {
       const data = new FormData();
 
       if (customIcon) {
         data.append('icon', customIcon);
       }
+
       data.append('name', formData.name);
+      data.append('description', formData.description);
       data.append('url', formData.url);
       data.append('isPublic', `${formData.isPublic ? 1 : 0}`);
 
@@ -154,7 +165,7 @@ export const AppForm = ({ modalHandler }: Props): JSX.Element => {
           />
           <span>
             Use icon name from MDI or pass a valid URL.
-            <a href="https://materialdesignicons.com/" target="blank">
+            <a href="https://pictogrammers.com/library/mdi/" target="blank">
               {' '}
               Click here for reference
             </a>

client/src/components/Apps/AppTable/AppTable.tsx

@@ -94,7 +94,7 @@ export const AppTable = (props: Props): JSX.Element => {
         ) : (
           <p>
             Custom order is disabled. You can change it in the{' '}
-            <Link to="/settings/interface">settings</Link>
+            <Link to="/settings/general">settings</Link>
           </p>
         )}
       </Message>

client/src/components/Bookmarks/Form/BookmarksForm.tsx

@@ -69,6 +69,17 @@ export const BookmarksForm = ({
   const formSubmitHandler = (e: FormEvent): void => {
     e.preventDefault();
 
+    for (let field of ['name', 'url', 'icon'] as const) {
+      if (/^ +$/.test(formData[field])) {
+        createNotification({
+          title: 'Error',
+          message: `Field cannot be empty: ${field}`,
+        });
+
+        return;
+      }
+    }
+
     const createFormData = (): FormData => {
       const data = new FormData();
       if (customIcon) {

client/src/components/Bookmarks/Table/CategoryTable.tsx

@@ -102,7 +102,7 @@ export const CategoryTable = ({ openFormForUpdating }: Props): JSX.Element => {
         ) : (
           <p>
             Custom order is disabled. You can change it in the{' '}
-            <Link to="/settings/interface">settings</Link>
+            <Link to="/settings/general">settings</Link>
           </p>
         )}
       </Message>

client/src/components/SearchBar/SearchBar.module.css

@@ -9,6 +9,7 @@
   border-bottom: 2px solid var(--color-accent);
   opacity: 0.5;
   transition: all 0.2s;
+  border-radius: 0px;
 }
 
 .SearchBar:focus {

client/src/components/SearchBar/SearchBar.tsx

@@ -64,17 +64,22 @@ export const SearchBar = (props: Props): JSX.Element => {
   };
 
   const searchHandler = (e: KeyboardEvent<HTMLInputElement>) => {
-    const { isLocal, search, query, isURL, sameTab } = searchParser(
+    const {
-      inputRef.current.value
+      isLocal,
-    );
+      encodedURL,
+      primarySearch,
+      secondarySearch,
+      isURL,
+      sameTab,
+      rawQuery,
+    } = searchParser(inputRef.current.value);
 
     if (isLocal) {
-      // no additional encoding required for local search
+      setLocalSearch(encodedURL);
-      setLocalSearch(inputRef.current.value);
     }
 
     if (e.code === 'Enter' || e.code === 'NumpadEnter') {
-      if (!query.prefix) {
+      if (!primarySearch.prefix) {
         // Prefix not found -> emit notification
         createNotification({
           title: 'Error',
@@ -91,19 +96,21 @@ export const SearchBar = (props: Props): JSX.Element => {
         } else if (bookmarkSearchResult?.[0]?.bookmarks?.length) {
           redirectUrl(bookmarkSearchResult[0].bookmarks[0].url, sameTab);
         } else {
-          // no local results -> search the internet with the default search provider
+          // no local results -> search the internet with the default search provider if query is not empty
-          let template = query.template;
+          if (!/^ *$/.test(rawQuery)) {
+            let template = primarySearch.template;
 
-          if (query.prefix === 'l') {
+            if (primarySearch.prefix === 'l') {
-            template = 'https://duckduckgo.com/?q=';
+              template = secondarySearch.template;
             }
 
-          const url = `${template}${search}`;
+            const url = `${template}${encodedURL}`;
             redirectUrl(url, sameTab);
           }
+        }
       } else {
         // Valid query -> redirect to search results
-        const url = `${query.template}${search}`;
+        const url = `${primarySearch.template}${encodedURL}`;
         redirectUrl(url, sameTab);
       }
     } else if (e.code === 'Escape') {

client/src/components/Settings/GeneralSettings/CustomQueries/CustomQueries.tsx

@@ -9,11 +9,8 @@ import { actionCreators } from '../../../../store';
 // Typescript
 import { Query } from '../../../../interfaces';
 
-// CSS
-import classes from './CustomQueries.module.css';
-
 // UI
-import { Modal, Icon, Button } from '../../../UI';
+import { Modal, Icon, Button, CompactTable, ActionIcons } from '../../../UI';
 
 // Components
 import { QueriesForm } from './QueriesForm';
@@ -67,33 +64,27 @@ export const CustomQueries = (): JSX.Element => {
         )}
       </Modal>
 
-      <div>
+      <section>
-        <div className={classes.QueriesGrid}>
+        {customQueries.length ? (
-          {customQueries.length > 0 && (
+          <CompactTable headers={['Name', 'Prefix', 'Actions']}>
-            <Fragment>
-              <span>Name</span>
-              <span>Prefix</span>
-              <span>Actions</span>
-
-              <div className={classes.Separator}></div>
-            </Fragment>
-          )}
-
             {customQueries.map((q: Query, idx) => (
               <Fragment key={idx}>
                 <span>{q.name}</span>
                 <span>{q.prefix}</span>
-              <span className={classes.ActionIcons}>
+                <ActionIcons>
                   <span onClick={() => updateHandler(q)}>
                     <Icon icon="mdiPencil" />
                   </span>
                   <span onClick={() => deleteHandler(q)}>
                     <Icon icon="mdiDelete" />
                   </span>
-              </span>
+                </ActionIcons>
               </Fragment>
             ))}
-        </div>
+          </CompactTable>
+        ) : (
+          <></>
+        )}
 
         <Button
           click={() => {
@@ -103,7 +94,7 @@ export const CustomQueries = (): JSX.Element => {
         >
           Add new search provider
         </Button>
-      </div>
+      </section>
     </Fragment>
   );
 };

client/src/components/Settings/GeneralSettings/GeneralSettings.tsx

@@ -0,0 +1,242 @@
+// React
+import { useState, useEffect, FormEvent, ChangeEvent, Fragment } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+// Typescript
+import { Query, GeneralForm } from '../../../interfaces';
+
+// Components
+import { CustomQueries } from './CustomQueries/CustomQueries';
+
+// UI
+import { Button, SettingsHeadline, InputGroup } from '../../UI';
+
+// Utils
+import { inputHandler, generalSettingsTemplate } from '../../../utility';
+
+// Data
+import searchQueries from '../../../utility/searchQueries.json';
+
+// Redux
+import { State } from '../../../store/reducers';
+import { bindActionCreators } from 'redux';
+import { actionCreators } from '../../../store';
+
+export const GeneralSettings = (): JSX.Element => {
+  const {
+    config: { loading, customQueries, config },
+    bookmarks: { categories },
+  } = useSelector((state: State) => state);
+
+  const dispatch = useDispatch();
+  const { updateConfig, sortApps, sortCategories, sortBookmarks } =
+    bindActionCreators(actionCreators, dispatch);
+
+  const queries = searchQueries.queries;
+
+  // Initial state
+  const [formData, setFormData] = useState<GeneralForm>(
+    generalSettingsTemplate
+  );
+
+  // Get config
+  useEffect(() => {
+    setFormData({
+      ...config,
+    });
+  }, [loading]);
+
+  // Form handler
+  const formSubmitHandler = async (e: FormEvent) => {
+    e.preventDefault();
+
+    // Save settings
+    await updateConfig(formData);
+
+    // Sort entities with new settings
+    if (formData.useOrdering !== config.useOrdering) {
+      sortApps();
+      sortCategories();
+
+      for (let { id } of categories) {
+        sortBookmarks(id);
+      }
+    }
+  };
+
+  // Input handler
+  const inputChangeHandler = (
+    e: ChangeEvent<HTMLInputElement | HTMLSelectElement>,
+    options?: { isNumber?: boolean; isBool?: boolean }
+  ) => {
+    inputHandler<GeneralForm>({
+      e,
+      options,
+      setStateHandler: setFormData,
+      state: formData,
+    });
+  };
+
+  return (
+    <Fragment>
+      <form
+        onSubmit={(e) => formSubmitHandler(e)}
+        style={{ marginBottom: '30px' }}
+      >
+        {/* === GENERAL OPTIONS === */}
+        <SettingsHeadline text="General" />
+        {/* SORT TYPE */}
+        <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>
+
+        {/* === APPS OPTIONS === */}
+        <SettingsHeadline text="Apps" />
+        {/* PIN APPS */}
+        <InputGroup>
+          <label htmlFor="pinAppsByDefault">
+            Pin new applications by default
+          </label>
+          <select
+            id="pinAppsByDefault"
+            name="pinAppsByDefault"
+            value={formData.pinAppsByDefault ? 1 : 0}
+            onChange={(e) => inputChangeHandler(e, { isBool: true })}
+          >
+            <option value={1}>True</option>
+            <option value={0}>False</option>
+          </select>
+        </InputGroup>
+
+        {/* APPS OPPENING */}
+        <InputGroup>
+          <label htmlFor="appsSameTab">Open applications in the same tab</label>
+          <select
+            id="appsSameTab"
+            name="appsSameTab"
+            value={formData.appsSameTab ? 1 : 0}
+            onChange={(e) => inputChangeHandler(e, { isBool: true })}
+          >
+            <option value={1}>True</option>
+            <option value={0}>False</option>
+          </select>
+        </InputGroup>
+
+        {/* === BOOKMARKS OPTIONS === */}
+        <SettingsHeadline text="Bookmarks" />
+        {/* PIN CATEGORIES */}
+        <InputGroup>
+          <label htmlFor="pinCategoriesByDefault">
+            Pin new categories by default
+          </label>
+          <select
+            id="pinCategoriesByDefault"
+            name="pinCategoriesByDefault"
+            value={formData.pinCategoriesByDefault ? 1 : 0}
+            onChange={(e) => inputChangeHandler(e, { isBool: true })}
+          >
+            <option value={1}>True</option>
+            <option value={0}>False</option>
+          </select>
+        </InputGroup>
+
+        {/* BOOKMARKS OPPENING */}
+        <InputGroup>
+          <label htmlFor="bookmarksSameTab">
+            Open bookmarks in the same tab
+          </label>
+          <select
+            id="bookmarksSameTab"
+            name="bookmarksSameTab"
+            value={formData.bookmarksSameTab ? 1 : 0}
+            onChange={(e) => inputChangeHandler(e, { isBool: true })}
+          >
+            <option value={1}>True</option>
+            <option value={0}>False</option>
+          </select>
+        </InputGroup>
+
+        {/* === SEARCH OPTIONS === */}
+        <SettingsHeadline text="Search" />
+        <InputGroup>
+          <label htmlFor="defaultSearchProvider">Primary search provider</label>
+          <select
+            id="defaultSearchProvider"
+            name="defaultSearchProvider"
+            value={formData.defaultSearchProvider}
+            onChange={(e) => inputChangeHandler(e)}
+          >
+            {[...queries, ...customQueries].map((query: Query, idx) => {
+              const isCustom = idx >= queries.length;
+
+              return (
+                <option key={idx} value={query.prefix}>
+                  {isCustom && '+'} {query.name}
+                </option>
+              );
+            })}
+          </select>
+        </InputGroup>
+
+        {formData.defaultSearchProvider === 'l' && (
+          <InputGroup>
+            <label htmlFor="secondarySearchProvider">
+              Secondary search provider
+            </label>
+            <select
+              id="secondarySearchProvider"
+              name="secondarySearchProvider"
+              value={formData.secondarySearchProvider}
+              onChange={(e) => inputChangeHandler(e)}
+            >
+              {[...queries, ...customQueries].map((query: Query, idx) => {
+                const isCustom = idx >= queries.length;
+
+                return (
+                  <option key={idx} value={query.prefix}>
+                    {isCustom && '+'} {query.name}
+                  </option>
+                );
+              })}
+            </select>
+            <span>
+              Will be used when "Local search" is primary search provider and
+              there are not any local results
+            </span>
+          </InputGroup>
+        )}
+
+        <InputGroup>
+          <label htmlFor="searchSameTab">
+            Open search results in the same tab
+          </label>
+          <select
+            id="searchSameTab"
+            name="searchSameTab"
+            value={formData.searchSameTab ? 1 : 0}
+            onChange={(e) => inputChangeHandler(e, { isBool: true })}
+          >
+            <option value={1}>True</option>
+            <option value={0}>False</option>
+          </select>
+        </InputGroup>
+
+        <Button>Save changes</Button>
+      </form>
+
+      {/* CUSTOM QUERIES */}
+      <SettingsHeadline text="Custom search providers" />
+      <CustomQueries />
+    </Fragment>
+  );
+};

client/src/components/Settings/SearchSettings/CustomQueries/CustomQueries.module.css

@@ -1,30 +0,0 @@
-.QueriesGrid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-}
-
-.QueriesGrid span {
-  color: var(--color-primary);
-}
-
-.QueriesGrid span:last-child {
-  margin-bottom: 10px;
-}
-
-.ActionIcons {
-  display: flex;
-}
-
-.ActionIcons svg {
-  width: 20px;
-}
-
-.ActionIcons svg:hover {
-  cursor: pointer;
-}
-
-.Separator {
-  grid-column: 1 / 4;
-  border-bottom: 1px solid var(--color-primary);
-  margin: 10px 0;
-}

client/src/components/Settings/SearchSettings/SearchSettings.tsx

@@ -1,141 +0,0 @@
-// React
-import { useState, useEffect, FormEvent, ChangeEvent, Fragment } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-
-// Typescript
-import { Query, SearchForm } from '../../../interfaces';
-
-// Components
-import { CustomQueries } from './CustomQueries/CustomQueries';
-
-// UI
-import { Button, SettingsHeadline, InputGroup } from '../../UI';
-
-// Utils
-import { inputHandler, searchSettingsTemplate } from '../../../utility';
-
-// Data
-import { queries } from '../../../utility/searchQueries.json';
-
-// Redux
-import { State } from '../../../store/reducers';
-import { bindActionCreators } from 'redux';
-import { actionCreators } from '../../../store';
-
-export const SearchSettings = (): JSX.Element => {
-  const { loading, customQueries, config } = useSelector(
-    (state: State) => state.config
-  );
-
-  const dispatch = useDispatch();
-  const { updateConfig } = bindActionCreators(actionCreators, dispatch);
-
-  // Initial state
-  const [formData, setFormData] = useState<SearchForm>(searchSettingsTemplate);
-
-  // Get config
-  useEffect(() => {
-    setFormData({
-      ...config,
-    });
-  }, [loading]);
-
-  // Form handler
-  const formSubmitHandler = async (e: FormEvent) => {
-    e.preventDefault();
-
-    // Save settings
-    await updateConfig(formData);
-  };
-
-  // Input handler
-  const inputChangeHandler = (
-    e: ChangeEvent<HTMLInputElement | HTMLSelectElement>,
-    options?: { isNumber?: boolean; isBool?: boolean }
-  ) => {
-    inputHandler<SearchForm>({
-      e,
-      options,
-      setStateHandler: setFormData,
-      state: formData,
-    });
-  };
-
-  return (
-    <Fragment>
-      {/* GENERAL SETTINGS */}
-      <form
-        onSubmit={(e) => formSubmitHandler(e)}
-        style={{ marginBottom: '30px' }}
-      >
-        <SettingsHeadline text="General" />
-        <InputGroup>
-          <label htmlFor="defaultSearchProvider">Default search provider</label>
-          <select
-            id="defaultSearchProvider"
-            name="defaultSearchProvider"
-            value={formData.defaultSearchProvider}
-            onChange={(e) => inputChangeHandler(e)}
-          >
-            {[...queries, ...customQueries].map((query: Query, idx) => {
-              const isCustom = idx >= queries.length;
-
-              return (
-                <option key={idx} value={query.prefix}>
-                  {isCustom && '+'} {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 ? 1 : 0}
-            onChange={(e) => inputChangeHandler(e, { isBool: true })}
-          >
-            <option value={1}>True</option>
-            <option value={0}>False</option>
-          </select>
-        </InputGroup>
-
-        <InputGroup>
-          <label htmlFor="hideSearch">Hide search bar</label>
-          <select
-            id="hideSearch"
-            name="hideSearch"
-            value={formData.hideSearch ? 1 : 0}
-            onChange={(e) => inputChangeHandler(e, { isBool: true })}
-          >
-            <option value={1}>True</option>
-            <option value={0}>False</option>
-          </select>
-        </InputGroup>
-
-        <InputGroup>
-          <label htmlFor="disableAutofocus">Disable search bar autofocus</label>
-          <select
-            id="disableAutofocus"
-            name="disableAutofocus"
-            value={formData.disableAutofocus ? 1 : 0}
-            onChange={(e) => inputChangeHandler(e, { isBool: true })}
-          >
-            <option value={1}>True</option>
-            <option value={0}>False</option>
-          </select>
-        </InputGroup>
-
-        <Button>Save changes</Button>
-      </form>
-
-      {/* CUSTOM QUERIES */}
-      <SettingsHeadline text="Custom search providers" />
-      <CustomQueries />
-    </Fragment>
-  );
-};

client/src/components/Settings/Settings.tsx

@@ -16,7 +16,7 @@ import { WeatherSettings } from './WeatherSettings/WeatherSettings';
 import { UISettings } from './UISettings/UISettings';
 import { AppDetails } from './AppDetails/AppDetails';
 import { StyleSettings } from './StyleSettings/StyleSettings';
-import { SearchSettings } from './SearchSettings/SearchSettings';
+import { GeneralSettings } from './GeneralSettings/GeneralSettings';
 import { DockerSettings } from './DockerSettings/DockerSettings';
 import { ProtectedRoute } from '../Routing/ProtectedRoute';
 
@@ -24,9 +24,11 @@ import { ProtectedRoute } from '../Routing/ProtectedRoute';
 import { Container, Headline } from '../UI';
 
 // Data
-import { routes } from './settings.json';
+import clientRoutes from './settings.json';
 
 export const Settings = (): JSX.Element => {
+  const routes = clientRoutes.routes;
+
   const { isAuthenticated } = useSelector((state: State) => state.auth);
 
   const tabs = isAuthenticated ? routes : routes.filter((r) => !r.authRequired);
@@ -59,8 +61,8 @@ export const Settings = (): JSX.Element => {
               component={WeatherSettings}
             />
             <ProtectedRoute
-              path="/settings/search"
+              path="/settings/general"
-              component={SearchSettings}
+              component={GeneralSettings}
             />
             <ProtectedRoute path="/settings/interface" component={UISettings} />
             <ProtectedRoute

client/src/components/Settings/Themer/ThemeBuilder/ThemeBuilder.module.css

@@ -0,0 +1,7 @@
+.ThemeBuilder {
+  margin-bottom: 30px;
+}
+
+.Buttons button:not(:last-child) {
+  margin-right: 10px;
+}

client/src/components/Settings/Themer/ThemeBuilder/ThemeBuilder.tsx

@@ -0,0 +1,95 @@
+import { useState, useEffect } from 'react';
+
+// Redux
+import { useSelector, useDispatch } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { actionCreators } from '../../../../store';
+import { State } from '../../../../store/reducers';
+
+// Other
+import { Theme } from '../../../../interfaces';
+
+// UI
+import { Button, Modal } from '../../../UI';
+import { ThemeGrid } from '../ThemeGrid/ThemeGrid';
+import classes from './ThemeBuilder.module.css';
+import { ThemeCreator } from './ThemeCreator';
+import { ThemeEditor } from './ThemeEditor';
+
+interface Props {
+  themes: Theme[];
+}
+
+export const ThemeBuilder = ({ themes }: Props): JSX.Element => {
+  const {
+    auth: { isAuthenticated },
+    theme: { themeInEdit, userThemes },
+  } = useSelector((state: State) => state);
+
+  const { editTheme } = bindActionCreators(actionCreators, useDispatch());
+
+  const [showModal, toggleShowModal] = useState(false);
+  const [isInEdit, toggleIsInEdit] = useState(false);
+
+  useEffect(() => {
+    if (themeInEdit) {
+      toggleIsInEdit(false);
+      toggleShowModal(true);
+    }
+  }, [themeInEdit]);
+
+  useEffect(() => {
+    if (isInEdit && !userThemes.length) {
+      toggleIsInEdit(false);
+      toggleShowModal(false);
+    }
+  }, [userThemes]);
+
+  return (
+    <div className={classes.ThemeBuilder}>
+      {/* MODALS */}
+      <Modal
+        isOpen={showModal}
+        setIsOpen={() => toggleShowModal(!showModal)}
+        cb={() => editTheme(null)}
+      >
+        {isInEdit ? (
+          <ThemeEditor modalHandler={() => toggleShowModal(!showModal)} />
+        ) : (
+          <ThemeCreator modalHandler={() => toggleShowModal(!showModal)} />
+        )}
+      </Modal>
+
+      {/* USER THEMES */}
+      <ThemeGrid themes={themes} />
+
+      {/* BUTTONS */}
+      {isAuthenticated && (
+        <div className={classes.Buttons}>
+          <Button
+            click={() => {
+              editTheme(null);
+              toggleIsInEdit(false);
+              toggleShowModal(!showModal);
+            }}
+          >
+            Create new theme
+          </Button>
+
+          {themes.length ? (
+            <Button
+              click={() => {
+                toggleIsInEdit(true);
+                toggleShowModal(!showModal);
+              }}
+            >
+              Edit user themes
+            </Button>
+          ) : (
+            <></>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};

client/src/components/Settings/Themer/ThemeBuilder/ThemeCreator.module.css

@@ -0,0 +1,5 @@
+.ColorsContainer {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+}

client/src/components/Settings/Themer/ThemeBuilder/ThemeCreator.tsx

@@ -0,0 +1,152 @@
+import { ChangeEvent, FormEvent, useState, useEffect } from 'react';
+
+// Redux
+import { useDispatch, useSelector } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { actionCreators } from '../../../../store';
+import { State } from '../../../../store/reducers';
+
+// UI
+import { Button, InputGroup, ModalForm } from '../../../UI';
+import classes from './ThemeCreator.module.css';
+
+// Other
+import { Theme } from '../../../../interfaces';
+
+interface Props {
+  modalHandler: () => void;
+}
+
+export const ThemeCreator = ({ modalHandler }: Props): JSX.Element => {
+  const {
+    theme: { activeTheme, themeInEdit },
+  } = useSelector((state: State) => state);
+
+  const { addTheme, updateTheme, editTheme } = bindActionCreators(
+    actionCreators,
+    useDispatch()
+  );
+
+  const [formData, setFormData] = useState<Theme>({
+    name: '',
+    isCustom: true,
+    colors: {
+      primary: '#ffffff',
+      accent: '#ffffff',
+      background: '#ffffff',
+    },
+  });
+
+  useEffect(() => {
+    setFormData({ ...formData, colors: activeTheme.colors });
+  }, [activeTheme]);
+
+  useEffect(() => {
+    if (themeInEdit) {
+      setFormData(themeInEdit);
+    }
+  }, [themeInEdit]);
+
+  const inputChangeHandler = (e: ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+
+    setFormData({
+      ...formData,
+      [name]: value,
+    });
+  };
+
+  const setColor = ({
+    target: { value, name },
+  }: ChangeEvent<HTMLInputElement>) => {
+    setFormData({
+      ...formData,
+      colors: {
+        ...formData.colors,
+        [name]: value,
+      },
+    });
+  };
+
+  const closeModal = () => {
+    editTheme(null);
+    modalHandler();
+  };
+
+  const formHandler = (e: FormEvent) => {
+    e.preventDefault();
+
+    if (!themeInEdit) {
+      addTheme(formData);
+    } else {
+      updateTheme(formData, themeInEdit.name);
+    }
+
+    // close modal
+    closeModal();
+
+    // clear theme name
+    setFormData({ ...formData, name: '' });
+  };
+
+  return (
+    <ModalForm formHandler={formHandler} modalHandler={closeModal}>
+      <InputGroup>
+        <label htmlFor="name">Theme name</label>
+        <input
+          type="text"
+          name="name"
+          id="name"
+          placeholder="my_theme"
+          required
+          value={formData.name}
+          onChange={(e) => inputChangeHandler(e)}
+        />
+      </InputGroup>
+
+      <div className={classes.ColorsContainer}>
+        <InputGroup>
+          <label htmlFor="primary">Primary color</label>
+          <input
+            type="color"
+            name="primary"
+            id="primary"
+            required
+            value={formData.colors.primary}
+            onChange={(e) => setColor(e)}
+          />
+        </InputGroup>
+
+        <InputGroup>
+          <label htmlFor="accent">Accent color</label>
+          <input
+            type="color"
+            name="accent"
+            id="accent"
+            required
+            value={formData.colors.accent}
+            onChange={(e) => setColor(e)}
+          />
+        </InputGroup>
+
+        <InputGroup>
+          <label htmlFor="background">Background color</label>
+          <input
+            type="color"
+            name="background"
+            id="background"
+            required
+            value={formData.colors.background}
+            onChange={(e) => setColor(e)}
+          />
+        </InputGroup>
+      </div>
+
+      {!themeInEdit ? (
+        <Button>Add theme</Button>
+      ) : (
+        <Button>Update theme</Button>
+      )}
+    </ModalForm>
+  );
+};

client/src/components/Settings/Themer/ThemeBuilder/ThemeEditor.tsx

@@ -0,0 +1,57 @@
+import { Fragment } from 'react';
+
+// Redux
+import { useSelector, useDispatch } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { Theme } from '../../../../interfaces';
+import { actionCreators } from '../../../../store';
+import { State } from '../../../../store/reducers';
+
+// Other
+import { ActionIcons, CompactTable, Icon, ModalForm } from '../../../UI';
+
+interface Props {
+  modalHandler: () => void;
+}
+
+export const ThemeEditor = (props: Props): JSX.Element => {
+  const {
+    theme: { userThemes },
+  } = useSelector((state: State) => state);
+
+  const { deleteTheme, editTheme } = bindActionCreators(
+    actionCreators,
+    useDispatch()
+  );
+
+  const updateHandler = (theme: Theme) => {
+    props.modalHandler();
+    editTheme(theme);
+  };
+
+  const deleteHandler = (theme: Theme) => {
+    if (window.confirm(`Are you sure you want to delete this theme?`)) {
+      deleteTheme(theme.name);
+    }
+  };
+
+  return (
+    <ModalForm formHandler={() => {}} modalHandler={props.modalHandler}>
+      <CompactTable headers={['Name', 'Actions']}>
+        {userThemes.map((t, idx) => (
+          <Fragment key={idx}>
+            <span>{t.name}</span>
+            <ActionIcons>
+              <span onClick={() => updateHandler(t)}>
+                <Icon icon="mdiPencil" />
+              </span>
+              <span onClick={() => deleteHandler(t)}>
+                <Icon icon="mdiDelete" />
+              </span>
+            </ActionIcons>
+          </Fragment>
+        ))}
+      </CompactTable>
+    </ModalForm>
+  );
+};

client/src/components/Settings/Themer/ThemeGrid/ThemeGrid.tsx

@@ -0,0 +1,22 @@
+// Components
+import { ThemePreview } from '../ThemePreview/ThemePreview';
+
+// Other
+import { Theme } from '../../../../interfaces';
+import classes from './ThemeGrid.module.css';
+
+interface Props {
+  themes: Theme[];
+}
+
+export const ThemeGrid = ({ themes }: Props): JSX.Element => {
+  return (
+    <div className={classes.ThemerGrid}>
+      {themes.map(
+        (theme: Theme, idx: number): JSX.Element => (
+          <ThemePreview key={idx} theme={theme} />
+        )
+      )}
+    </div>
+  );
+};

client/src/components/Settings/Themer/ThemePreview.tsx

@@ -1,32 +0,0 @@
-import { Theme } from '../../../interfaces/Theme';
-import classes from './ThemePreview.module.css';
-
-interface Props {
-  theme: Theme;
-  applyTheme: Function;
-}
-
-export const ThemePreview = (props: Props): JSX.Element => {
-  return (
-    <div
-      className={classes.ThemePreview}
-      onClick={() => props.applyTheme(props.theme.name)}
-    >
-      <div className={classes.ColorsPreview}>
-        <div
-          className={classes.ColorPreview}
-          style={{ backgroundColor: props.theme.colors.background }}
-        ></div>
-        <div
-          className={classes.ColorPreview}
-          style={{ backgroundColor: props.theme.colors.primary }}
-        ></div>
-        <div
-          className={classes.ColorPreview}
-          style={{ backgroundColor: props.theme.colors.accent }}
-        ></div>
-      </div>
-      <p>{props.theme.name}</p>
-    </div>
-  );
-};

client/src/components/Settings/Themer/ThemePreview/ThemePreview.tsx

@@ -0,0 +1,38 @@
+// Redux
+import { useDispatch } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { actionCreators } from '../../../../store';
+
+// Other
+import { Theme } from '../../../../interfaces/Theme';
+import classes from './ThemePreview.module.css';
+
+interface Props {
+  theme: Theme;
+}
+
+export const ThemePreview = ({
+  theme: { colors, name },
+}: Props): JSX.Element => {
+  const { setTheme } = bindActionCreators(actionCreators, useDispatch());
+
+  return (
+    <div className={classes.ThemePreview} onClick={() => setTheme(colors)}>
+      <div className={classes.ColorsPreview}>
+        <div
+          className={classes.ColorPreview}
+          style={{ backgroundColor: colors.background }}
+        ></div>
+        <div
+          className={classes.ColorPreview}
+          style={{ backgroundColor: colors.primary }}
+        ></div>
+        <div
+          className={classes.ColorPreview}
+          style={{ backgroundColor: colors.accent }}
+        ></div>
+      </div>
+      <p>{name}</p>
+    </div>
+  );
+};

client/src/components/Settings/Themer/Themer.tsx

@@ -4,31 +4,32 @@ import { ChangeEvent, FormEvent, Fragment, useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { actionCreators } from '../../../store';
+import { State } from '../../../store/reducers';
 
 // Typescript
 import { Theme, ThemeSettingsForm } from '../../../interfaces';
 
 // Components
-import { ThemePreview } from './ThemePreview';
+import { Button, InputGroup, SettingsHeadline, Spinner } from '../../UI';
-import { Button, InputGroup, SettingsHeadline } from '../../UI';
+import { ThemeBuilder } from './ThemeBuilder/ThemeBuilder';
+import { ThemeGrid } from './ThemeGrid/ThemeGrid';
 
 // Other
-import classes from './Themer.module.css';
+import {
-import { themes } from './themes.json';
+  inputHandler,
-import { State } from '../../../store/reducers';
+  parseThemeToPAB,
-import { inputHandler, themeSettingsTemplate } from '../../../utility';
+  themeSettingsTemplate,
+} from '../../../utility';
 
 export const Themer = (): JSX.Element => {
   const {
     auth: { isAuthenticated },
     config: { loading, config },
+    theme: { themes, userThemes },
   } = useSelector((state: State) => state);
 
   const dispatch = useDispatch();
-  const { setTheme, updateConfig } = bindActionCreators(
+  const { updateConfig } = bindActionCreators(actionCreators, dispatch);
-    actionCreators,
-    dispatch
-  );
 
   // Initial state
   const [formData, setFormData] = useState<ThemeSettingsForm>(
@@ -47,7 +48,7 @@ export const Themer = (): JSX.Element => {
     e.preventDefault();
 
     // Save settings
-    await updateConfig(formData);
+    await updateConfig({ ...formData });
   };
 
   // Input handler
@@ -63,31 +64,34 @@ export const Themer = (): JSX.Element => {
     });
   };
 
+  const customThemesEl = (
+    <Fragment>
+      <SettingsHeadline text="User themes" />
+      <ThemeBuilder themes={userThemes} />
+    </Fragment>
+  );
+
   return (
     <Fragment>
-      <SettingsHeadline text="Set theme" />
+      <SettingsHeadline text="App themes" />
-      <div className={classes.ThemerGrid}>
+      {!themes.length ? <Spinner /> : <ThemeGrid themes={themes} />}
-        {themes.map(
+
-          (theme: Theme, idx: number): JSX.Element => (
+      {!userThemes.length ? isAuthenticated && customThemesEl : customThemesEl}
-            <ThemePreview key={idx} theme={theme} applyTheme={setTheme} />
-          )
-        )}
-      </div>
 
       {isAuthenticated && (
         <form onSubmit={formSubmitHandler}>
           <SettingsHeadline text="Other settings" />
           <InputGroup>
-            <label htmlFor="defaultTheme">Default theme (for new users)</label>
+            <label htmlFor="defaultTheme">Default theme for new users</label>
             <select
               id="defaultTheme"
               name="defaultTheme"
               value={formData.defaultTheme}
               onChange={(e) => inputChangeHandler(e)}
             >
-              {themes.map((theme: Theme, idx) => (
+              {[...themes, ...userThemes].map((theme: Theme, idx) => (
-                <option key={idx} value={theme.name}>
+                <option key={idx} value={parseThemeToPAB(theme.colors)}>
-                  {theme.name}
+                  {theme.isCustom && '+'} {theme.name}
                 </option>
               ))}
             </select>

client/src/components/Settings/UISettings/UISettings.tsx

@@ -7,28 +7,22 @@ import { bindActionCreators } from 'redux';
 import { actionCreators } from '../../../store';
 
 // Typescript
-import { OtherSettingsForm } from '../../../interfaces';
+import { UISettingsForm } from '../../../interfaces';
 
 // UI
 import { InputGroup, Button, SettingsHeadline } from '../../UI';
 
 // Utils
-import { otherSettingsTemplate, inputHandler } from '../../../utility';
+import { uiSettingsTemplate, inputHandler } from '../../../utility';
 
 export const UISettings = (): JSX.Element => {
-  const {
+  const { loading, config } = useSelector((state: State) => state.config);
-    config: { loading, config },
-    bookmarks: { categories },
-  } = useSelector((state: State) => state);
 
   const dispatch = useDispatch();
-  const { updateConfig, sortApps, sortCategories, sortBookmarks } =
+  const { updateConfig } = bindActionCreators(actionCreators, dispatch);
-    bindActionCreators(actionCreators, dispatch);
 
   // Initial state
-  const [formData, setFormData] = useState<OtherSettingsForm>(
+  const [formData, setFormData] = useState<UISettingsForm>(uiSettingsTemplate);
-    otherSettingsTemplate
-  );
 
   // Get config
   useEffect(() => {
@@ -46,16 +40,6 @@ export const UISettings = (): JSX.Element => {
 
     // Update local page title
     document.title = formData.customTitle;
-
-    // Sort entities with new settings
-    if (formData.useOrdering !== config.useOrdering) {
-      sortApps();
-      sortCategories();
-
-      for (let { id } of categories) {
-        sortBookmarks(id);
-      }
-    }
   };
 
   // Input handler
@@ -63,7 +47,7 @@ export const UISettings = (): JSX.Element => {
     e: ChangeEvent<HTMLInputElement | HTMLSelectElement>,
     options?: { isNumber?: boolean; isBool?: boolean }
   ) => {
-    inputHandler<OtherSettingsForm>({
+    inputHandler<UISettingsForm>({
       e,
       options,
       setStateHandler: setFormData,
@@ -88,6 +72,36 @@ export const UISettings = (): JSX.Element => {
         />
       </InputGroup>
 
+      {/* === SEARCH OPTIONS === */}
+      <SettingsHeadline text="Search" />
+      {/* HIDE SEARCHBAR */}
+      <InputGroup>
+        <label htmlFor="hideSearch">Hide search bar</label>
+        <select
+          id="hideSearch"
+          name="hideSearch"
+          value={formData.hideSearch ? 1 : 0}
+          onChange={(e) => inputChangeHandler(e, { isBool: true })}
+        >
+          <option value={1}>True</option>
+          <option value={0}>False</option>
+        </select>
+      </InputGroup>
+
+      {/* AUTOFOCUS SEARCHBAR */}
+      <InputGroup>
+        <label htmlFor="disableAutofocus">Disable search bar autofocus</label>
+        <select
+          id="disableAutofocus"
+          name="disableAutofocus"
+          value={formData.disableAutofocus ? 1 : 0}
+          onChange={(e) => inputChangeHandler(e, { isBool: true })}
+        >
+          <option value={1}>True</option>
+          <option value={0}>False</option>
+        </select>
+      </InputGroup>
+
       {/* === HEADER OPTIONS === */}
       <SettingsHeadline text="Header" />
       {/* HIDE HEADER */}
@@ -160,8 +174,8 @@ export const UISettings = (): JSX.Element => {
           onChange={(e) => inputChangeHandler(e)}
         />
         <span>
-          Greetings must be separated with semicolon. Only 4 messages can be
+          Greetings must be separated with semicolon. All 4 messages must be
-          used
+          filled, even if they are the same
         </span>
       </InputGroup>
 
@@ -193,85 +207,8 @@ export const UISettings = (): JSX.Element => {
         <span>Names must be separated with semicolon</span>
       </InputGroup>
 
-      {/* === BEAHVIOR OPTIONS === */}
+      {/* === SECTIONS OPTIONS === */}
-      <SettingsHeadline text="App Behavior" />
+      <SettingsHeadline text="Sections" />
-      {/* PIN APPS */}
-      <InputGroup>
-        <label htmlFor="pinAppsByDefault">
-          Pin new applications by default
-        </label>
-        <select
-          id="pinAppsByDefault"
-          name="pinAppsByDefault"
-          value={formData.pinAppsByDefault ? 1 : 0}
-          onChange={(e) => inputChangeHandler(e, { isBool: true })}
-        >
-          <option value={1}>True</option>
-          <option value={0}>False</option>
-        </select>
-      </InputGroup>
-
-      {/* PIN CATEGORIES */}
-      <InputGroup>
-        <label htmlFor="pinCategoriesByDefault">
-          Pin new categories by default
-        </label>
-        <select
-          id="pinCategoriesByDefault"
-          name="pinCategoriesByDefault"
-          value={formData.pinCategoriesByDefault ? 1 : 0}
-          onChange={(e) => inputChangeHandler(e, { isBool: true })}
-        >
-          <option value={1}>True</option>
-          <option value={0}>False</option>
-        </select>
-      </InputGroup>
-
-      {/* SORT TYPE */}
-      <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>
-
-      {/* APPS OPPENING */}
-      <InputGroup>
-        <label htmlFor="appsSameTab">Open applications in the same tab</label>
-        <select
-          id="appsSameTab"
-          name="appsSameTab"
-          value={formData.appsSameTab ? 1 : 0}
-          onChange={(e) => inputChangeHandler(e, { isBool: true })}
-        >
-          <option value={1}>True</option>
-          <option value={0}>False</option>
-        </select>
-      </InputGroup>
-
-      {/* BOOKMARKS OPPENING */}
-      <InputGroup>
-        <label htmlFor="bookmarksSameTab">Open bookmarks in the same tab</label>
-        <select
-          id="bookmarksSameTab"
-          name="bookmarksSameTab"
-          value={formData.bookmarksSameTab ? 1 : 0}
-          onChange={(e) => inputChangeHandler(e, { isBool: true })}
-        >
-          <option value={1}>True</option>
-          <option value={0}>False</option>
-        </select>
-      </InputGroup>
-
-      {/* === MODULES OPTIONS === */}
-      <SettingsHeadline text="Modules" />
       {/* HIDE APPS */}
       <InputGroup>
         <label htmlFor="hideApps">Hide applications</label>
@@ -286,9 +223,9 @@ export const UISettings = (): JSX.Element => {
         </select>
       </InputGroup>
 
-      {/* HIDE CATEGORIES */}
+      {/* HIDE BOOKMARK CATEGORIES */}
       <InputGroup>
-        <label htmlFor="hideCategories">Hide categories</label>
+        <label htmlFor="hideCategories">Hide bookmarks</label>
         <select
           id="hideCategories"
           name="hideCategories"

client/src/components/Settings/WeatherSettings/WeatherSettings.tsx

@@ -82,6 +82,19 @@ export const WeatherSettings = (): JSX.Element => {
     });
   };
 
+  // Get user location
+  const getLocation = () => {
+    window.navigator.geolocation.getCurrentPosition(
+      ({ coords: { latitude, longitude } }) => {
+        setFormData({
+          ...formData,
+          lat: latitude,
+          long: longitude,
+        });
+      }
+    );
+  };
+
   return (
     <form onSubmit={(e) => formSubmitHandler(e)}>
       <SettingsHeadline text="API" />
@@ -120,15 +133,8 @@ export const WeatherSettings = (): JSX.Element => {
           step="any"
           lang="en-150"
         />
-        <span>
+        <span onClick={getLocation}>
-          You can use
+          <a href="#">Click to get current location</a>
-          <a
-            href="https://www.latlong.net/convert-address-to-lat-long.html"
-            target="blank"
-          >
-            {' '}
-            latlong.net
-          </a>
         </span>
       </InputGroup>
 

client/src/components/Settings/settings.json

@@ -6,13 +6,8 @@
       "authRequired": false
     },
     {
-      "name": "Weather",
+      "name": "General",
-      "dest": "/settings/weather",
+      "dest": "/settings/general",
-      "authRequired": true
-    },
-    {
-      "name": "Search",
-      "dest": "/settings/search",
       "authRequired": true
     },
     {
@@ -20,6 +15,11 @@
       "dest": "/settings/interface",
       "authRequired": true
     },
+    {
+      "name": "Weather",
+      "dest": "/settings/weather",
+      "authRequired": true
+    },
     {
       "name": "Docker",
       "dest": "/settings/docker",

client/src/components/UI/Forms/InputGroup/InputGroup.module.css

@@ -23,7 +23,7 @@
 
 .InputGroup span {
   font-size: 12px;
-  color: var(--color-primary)
+  color: var(--color-primary);
 }
 
 .InputGroup span a {
@@ -38,3 +38,13 @@
   resize: none;
   height: 50vh;
 }
+
+.InputGroup input[type='color'] {
+  margin: 0;
+  padding: 0;
+  background-color: transparent;
+}
+
+.InputGroup input[type='color']:hover {
+  cursor: pointer;
+}

client/src/components/UI/Headlines/SettingsHeadline/SettingsHeadline.tsx

@@ -1,4 +1,4 @@
-const classes = require('./SettingsHeadline.module.css');
+import classes from './SettingsHeadline.module.css';
 
 interface Props {
   text: string;

client/src/components/UI/Icons/ActionIcons/ActionIcons.module.css

@@ -0,0 +1,11 @@
+.ActionIcons {
+  display: flex;
+}
+
+.ActionIcons svg {
+  width: 20px;
+}
+
+.ActionIcons svg:hover {
+  cursor: pointer;
+}

client/src/components/UI/Icons/ActionIcons/ActionIcons.tsx

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import styles from './ActionIcons.module.css';
+
+interface Props {
+  children: ReactNode;
+}
+
+export const ActionIcons = ({ children }: Props): JSX.Element => {
+  return <span className={styles.ActionIcons}>{children}</span>;
+};

client/src/components/UI/Icons/WeatherIcon/WeatherIcon.tsx

@@ -10,7 +10,7 @@ interface Props {
 }
 
 export const WeatherIcon = (props: Props): JSX.Element => {
-  const { theme } = useSelector((state: State) => state.theme);
+  const { activeTheme } = useSelector((state: State) => state.theme);
 
   const icon = props.isDay
     ? new IconMapping().mapIcon(props.weatherStatusCode, TimeOfDay.day)
@@ -18,7 +18,7 @@ export const WeatherIcon = (props: Props): JSX.Element => {
 
   useEffect(() => {
     const delay = setTimeout(() => {
-      const skycons = new Skycons({ color: theme.colors.accent });
+      const skycons = new Skycons({ color: activeTheme.colors.accent });
       skycons.add(`weather-icon`, icon);
       skycons.play();
     }, 1);
@@ -26,7 +26,7 @@ export const WeatherIcon = (props: Props): JSX.Element => {
     return () => {
       clearTimeout(delay);
     };
-  }, [props.weatherStatusCode, icon, theme.colors.accent]);
+  }, [props.weatherStatusCode, icon, activeTheme.colors.accent]);
 
   return <canvas id={`weather-icon`} width="50" height="50"></canvas>;
 };

client/src/components/UI/Modal/Modal.tsx

@@ -6,24 +6,32 @@ interface Props {
   isOpen: boolean;
   setIsOpen: Function;
   children: ReactNode;
+  cb?: Function;
 }
 
-export const Modal = (props: Props): JSX.Element => {
+export const Modal = ({
+  isOpen,
+  setIsOpen,
+  children,
+  cb,
+}: Props): JSX.Element => {
   const modalRef = useRef(null);
   const modalClasses = [
     classes.Modal,
-    props.isOpen ? classes.ModalOpen : classes.ModalClose,
+    isOpen ? classes.ModalOpen : classes.ModalClose,
   ].join(' ');
 
   const clickHandler = (e: MouseEvent) => {
     if (e.target === modalRef.current) {
-      props.setIsOpen(false);
+      setIsOpen(false);
+
+      if (cb) cb();
     }
   };
 
   return (
     <div className={modalClasses} onClick={clickHandler} ref={modalRef}>
-      {props.children}
+      {children}
     </div>
   );
 };

client/src/components/UI/Tables/CompactTable/CompactTable.module.css

@@ -0,0 +1,16 @@
+.CompactTable {
+  display: grid;
+}
+
+.CompactTable span {
+  color: var(--color-primary);
+}
+
+.CompactTable span:last-child {
+  margin-bottom: 10px;
+}
+
+.Separator {
+  border-bottom: 1px solid var(--color-primary);
+  margin: 10px 0;
+}

client/src/components/UI/Tables/CompactTable/CompactTable.tsx

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+import classes from './CompactTable.module.css';
+
+interface Props {
+  headers: string[];
+  children?: ReactNode;
+}
+
+export const CompactTable = ({ headers, children }: Props): JSX.Element => {
+  return (
+    <div
+      className={classes.CompactTable}
+      style={{ gridTemplateColumns: `repeat(${headers.length}, 1fr)` }}
+    >
+      {headers.map((h, idx) => (
+        <span key={idx}>{h}</span>
+      ))}
+
+      <div
+        className={classes.Separator}
+        style={{ gridColumn: `1 / ${headers.length + 1}` }}
+      ></div>
+
+      {children}
+    </div>
+  );
+};

client/src/components/UI/index.ts

@@ -1,10 +1,12 @@
-export * from './Table/Table';
+export * from './Tables/Table/Table';
+export * from './Tables/CompactTable/CompactTable';
 export * from './Spinner/Spinner';
 export * from './Notification/Notification';
 export * from './Modal/Modal';
 export * from './Layout/Layout';
 export * from './Icons/Icon/Icon';
 export * from './Icons/WeatherIcon/WeatherIcon';
+export * from './Icons/ActionIcons/ActionIcons';
 export * from './Headlines/Headline/Headline';
 export * from './Headlines/SectionHeadline/SectionHeadline';
 export * from './Headlines/SettingsHeadline/SettingsHeadline';

client/src/interfaces/Config.ts

@@ -17,6 +17,7 @@ export interface Config {
   hideCategories: boolean;
   hideSearch: boolean;
   defaultSearchProvider: string;
+  secondarySearchProvider: string;
   dockerApps: boolean;
   dockerHost: string;
   kubernetesApps: boolean;

client/src/interfaces/Forms.ts

@@ -8,29 +8,30 @@ export interface WeatherForm {
   weatherData: WeatherData;
 }
 
-export interface SearchForm {
+export interface GeneralForm {
-  hideSearch: boolean;
   defaultSearchProvider: string;
+  secondarySearchProvider: string;
   searchSameTab: boolean;
-  disableAutofocus: boolean;
-}
-
-export interface OtherSettingsForm {
-  customTitle: string;
   pinAppsByDefault: boolean;
   pinCategoriesByDefault: boolean;
-  hideHeader: boolean;
-  hideApps: boolean;
-  hideCategories: boolean;
   useOrdering: string;
   appsSameTab: boolean;
   bookmarksSameTab: boolean;
+}
+
+export interface UISettingsForm {
+  customTitle: string;
+  hideHeader: boolean;
+  hideApps: boolean;
+  hideCategories: boolean;
   useAmericanDate: boolean;
   greetingsSchema: string;
   daySchema: string;
   monthSchema: string;
   showTime: boolean;
   hideDate: boolean;
+  hideSearch: boolean;
+  disableAutofocus: boolean;
 }
 
 export interface DockerSettingsForm {

client/src/interfaces/SearchResult.ts

@@ -4,6 +4,8 @@ export interface SearchResult {
   isLocal: boolean;
   isURL: boolean;
   sameTab: boolean;
-  search: string;
+  encodedURL: string;
-  query: Query;
+  primarySearch: Query;
+  secondarySearch: Query;
+  rawQuery: string;
 }

client/src/interfaces/Theme.ts

@@ -1,8 +1,11 @@
-export interface Theme {
+export interface ThemeColors {
-  name: string;
-  colors: {
   background: string;
   primary: string;
   accent: string;
 }
+
+export interface Theme {
+  name: string;
+  colors: ThemeColors;
+  isCustom: boolean;
 }

client/src/store/action-creators/config.ts

@@ -7,7 +7,7 @@ import {
   UpdateConfigAction,
   UpdateQueryAction,
 } from '../actions/config';
-import axios from 'axios';
+import axios, { AxiosError } from 'axios';
 import { ApiResponse, Config, Query } from '../../interfaces';
 import { ActionType } from '../action-types';
 import { storeUIConfig, applyAuth } from '../../utility';
@@ -103,7 +103,15 @@ export const addQuery =
         payload: res.data.data,
       });
     } catch (err) {
-      console.log(err);
+      const error = err as AxiosError<{ error: string }>;
+
+      dispatch<any>({
+        type: ActionType.createNotification,
+        payload: {
+          title: 'Error',
+          message: error.response?.data.error,
+        },
+      });
     }
   };
 

client/src/store/action-creators/theme.ts

@@ -1,30 +1,128 @@
 import { Dispatch } from 'redux';
-import { SetThemeAction } from '../actions/theme';
+import {
+  AddThemeAction,
+  DeleteThemeAction,
+  EditThemeAction,
+  FetchThemesAction,
+  SetThemeAction,
+  UpdateThemeAction,
+} from '../actions/theme';
 import { ActionType } from '../action-types';
-import { Theme } from '../../interfaces/Theme';
+import { Theme, ApiResponse, ThemeColors } from '../../interfaces';
-import { themes } from '../../components/Settings/Themer/themes.json';
+import { applyAuth, parseThemeToPAB } from '../../utility';
+import axios, { AxiosError } from 'axios';
 
 export const setTheme =
-  (name: string, remeberTheme: boolean = true) =>
+  (colors: ThemeColors, remeberTheme: boolean = true) =>
   (dispatch: Dispatch<SetThemeAction>) => {
-    const theme = themes.find((theme) => theme.name === name);
-
-    if (theme) {
     if (remeberTheme) {
-        localStorage.setItem('theme', name);
+      localStorage.setItem('theme', parseThemeToPAB(colors));
     }
 
-      loadTheme(theme);
+    for (const [key, value] of Object.entries(colors)) {
+      document.body.style.setProperty(`--color-${key}`, value);
+    }
 
     dispatch({
       type: ActionType.setTheme,
-        payload: theme,
+      payload: colors,
+    });
+  };
+
+export const fetchThemes =
+  () => async (dispatch: Dispatch<FetchThemesAction>) => {
+    try {
+      const res = await axios.get<ApiResponse<Theme[]>>('/api/themes');
+
+      dispatch({
+        type: ActionType.fetchThemes,
+        payload: res.data.data,
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+export const addTheme =
+  (theme: Theme) => async (dispatch: Dispatch<AddThemeAction>) => {
+    try {
+      const res = await axios.post<ApiResponse<Theme>>('/api/themes', theme, {
+        headers: applyAuth(),
+      });
+
+      dispatch({
+        type: ActionType.addTheme,
+        payload: res.data.data,
+      });
+
+      dispatch<any>({
+        type: ActionType.createNotification,
+        payload: {
+          title: 'Success',
+          message: 'Theme added',
+        },
+      });
+    } catch (err) {
+      const error = err as AxiosError<{ error: string }>;
+
+      dispatch<any>({
+        type: ActionType.createNotification,
+        payload: {
+          title: 'Error',
+          message: error.response?.data.error,
+        },
       });
     }
   };
 
-export const loadTheme = (theme: Theme): void => {
+export const deleteTheme =
-  for (const [key, value] of Object.entries(theme.colors)) {
+  (name: string) => async (dispatch: Dispatch<DeleteThemeAction>) => {
-    document.body.style.setProperty(`--color-${key}`, value);
+    try {
+      const res = await axios.delete<ApiResponse<Theme[]>>(
+        `/api/themes/${name}`,
+        { headers: applyAuth() }
+      );
+
+      dispatch({
+        type: ActionType.deleteTheme,
+        payload: res.data.data,
+      });
+
+      dispatch<any>({
+        type: ActionType.createNotification,
+        payload: {
+          title: 'Success',
+          message: 'Theme deleted',
+        },
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+export const editTheme =
+  (theme: Theme | null) => (dispatch: Dispatch<EditThemeAction>) => {
+    dispatch({
+      type: ActionType.editTheme,
+      payload: theme,
+    });
+  };
+
+export const updateTheme =
+  (theme: Theme, originalName: string) =>
+  async (dispatch: Dispatch<UpdateThemeAction>) => {
+    try {
+      const res = await axios.put<ApiResponse<Theme[]>>(
+        `/api/themes/${originalName}`,
+        theme,
+        { headers: applyAuth() }
+      );
+
+      dispatch({
+        type: ActionType.updateTheme,
+        payload: res.data.data,
+      });
+    } catch (err) {
+      console.log(err);
     }
   };

client/src/store/action-types/index.ts

@@ -1,6 +1,11 @@
 export enum ActionType {
   // THEME
   setTheme = 'SET_THEME',
+  fetchThemes = 'FETCH_THEMES',
+  addTheme = 'ADD_THEME',
+  deleteTheme = 'DELETE_THEME',
+  updateTheme = 'UPDATE_THEME',
+  editTheme = 'EDIT_THEME',
   // CONFIG
   getConfig = 'GET_CONFIG',
   updateConfig = 'UPDATE_CONFIG',

client/src/store/actions/index.ts

@@ -1,6 +1,13 @@
 import { App } from '../../interfaces';
 
-import { SetThemeAction } from './theme';
+import {
+  AddThemeAction,
+  DeleteThemeAction,
+  EditThemeAction,
+  FetchThemesAction,
+  SetThemeAction,
+  UpdateThemeAction,
+} from './theme';
 
 import {
   AddQueryAction,
@@ -54,6 +61,11 @@ import {
 export type Action =
   // Theme
   | SetThemeAction
+  | FetchThemesAction
+  | AddThemeAction
+  | DeleteThemeAction
+  | UpdateThemeAction
+  | EditThemeAction
   // Config
   | GetConfigAction
   | UpdateConfigAction

client/src/store/actions/theme.ts

@@ -1,7 +1,32 @@
 import { ActionType } from '../action-types';
-import { Theme } from '../../interfaces';
+import { Theme, ThemeColors } from '../../interfaces';
 
 export interface SetThemeAction {
   type: ActionType.setTheme;
+  payload: ThemeColors;
+}
+
+export interface FetchThemesAction {
+  type: ActionType.fetchThemes;
+  payload: Theme[];
+}
+
+export interface AddThemeAction {
+  type: ActionType.addTheme;
   payload: Theme;
 }
+
+export interface DeleteThemeAction {
+  type: ActionType.deleteTheme;
+  payload: Theme[];
+}
+
+export interface UpdateThemeAction {
+  type: ActionType.updateTheme;
+  payload: Theme[];
+}
+
+export interface EditThemeAction {
+  type: ActionType.editTheme;
+  payload: Theme | null;
+}

client/src/store/reducers/theme.ts

@@ -1,20 +1,30 @@
 import { Action } from '../actions';
 import { ActionType } from '../action-types';
 import { Theme } from '../../interfaces/Theme';
+import { arrayPartition, parsePABToTheme } from '../../utility';
 
 interface ThemeState {
-  theme: Theme;
+  activeTheme: Theme;
+  themes: Theme[];
+  userThemes: Theme[];
+  themeInEdit: Theme | null;
 }
 
+const savedTheme = localStorage.theme
+  ? parsePABToTheme(localStorage.theme)
+  : parsePABToTheme('#effbff;#6ee2ff;#242b33');
+
 const initialState: ThemeState = {
-  theme: {
+  activeTheme: {
-    name: 'tron',
+    name: 'main',
+    isCustom: false,
     colors: {
-      background: '#242B33',
+      ...savedTheme,
-      primary: '#EFFBFF',
-      accent: '#6EE2FF',
     },
   },
+  themes: [],
+  userThemes: [],
+  themeInEdit: null,
 };
 
 export const themeReducer = (
@@ -22,8 +32,56 @@ export const themeReducer = (
   action: Action
 ): ThemeState => {
   switch (action.type) {
-    case ActionType.setTheme:
+    case ActionType.setTheme: {
-      return { theme: action.payload };
+      return {
+        ...state,
+        activeTheme: {
+          ...state.activeTheme,
+          colors: action.payload,
+        },
+      };
+    }
+
+    case ActionType.fetchThemes: {
+      const [themes, userThemes] = arrayPartition<Theme>(
+        action.payload,
+        (e) => !e.isCustom
+      );
+
+      return {
+        ...state,
+        themes,
+        userThemes,
+      };
+    }
+
+    case ActionType.addTheme: {
+      return {
+        ...state,
+        userThemes: [...state.userThemes, action.payload],
+      };
+    }
+
+    case ActionType.deleteTheme: {
+      return {
+        ...state,
+        userThemes: action.payload,
+      };
+    }
+
+    case ActionType.editTheme: {
+      return {
+        ...state,
+        themeInEdit: action.payload,
+      };
+    }
+
+    case ActionType.updateTheme: {
+      return {
+        ...state,
+        userThemes: action.payload,
+      };
+    }
 
     default:
       return state;

client/src/types/ConfigFormData.ts

@@ -1,14 +1,14 @@
 import {
   DockerSettingsForm,
-  OtherSettingsForm,
+  UISettingsForm,
-  SearchForm,
+  GeneralForm,
   ThemeSettingsForm,
   WeatherForm,
 } from '../interfaces';
 
 export type ConfigFormData =
   | WeatherForm
-  | SearchForm
+  | GeneralForm
   | DockerSettingsForm
-  | OtherSettingsForm
+  | UISettingsForm
   | ThemeSettingsForm;

client/src/utility/arrayPartition.ts

@@ -0,0 +1,11 @@
+export const arrayPartition = <T>(
+  arr: T[],
+  isValid: (e: T) => boolean
+): T[][] => {
+  let pass: T[] = [];
+  let fail: T[] = [];
+
+  arr.forEach((e) => (isValid(e) ? pass : fail).push(e));
+
+  return [pass, fail];
+};

client/src/utility/index.ts

@@ -12,3 +12,5 @@ export * from './parseTime';
 export * from './decodeToken';
 export * from './applyAuth';
 export * from './escapeRegex';
+export * from './parseTheme';
+export * from './arrayPartition';

client/src/utility/parseTheme.ts

@@ -0,0 +1,20 @@
+import { ThemeColors } from '../interfaces';
+
+// parse theme in PAB (primary;accent;background) format to theme colors object
+export const parsePABToTheme = (themeStr: string): ThemeColors => {
+  const [primary, accent, background] = themeStr.split(';');
+
+  return {
+    primary,
+    accent,
+    background,
+  };
+};
+
+export const parseThemeToPAB = ({
+  primary: p,
+  accent: a,
+  background: b,
+}: ThemeColors): string => {
+  return `${p};${a};${b}`;
+};

client/src/utility/redirectUrl.ts

@@ -4,7 +4,7 @@ export const redirectUrl = (url: string, sameTab: boolean) => {
   const parsedUrl = urlParser(url)[1];
 
   if (sameTab) {
-    document.location.replace(parsedUrl);
+    document.location.assign(parsedUrl);
   } else {
     window.open(parsedUrl);
   }

client/src/utility/searchParser.ts

@@ -1,19 +1,27 @@
-import { queries } from './searchQueries.json';
+import searchQueries from './searchQueries.json';
-import { Query, SearchResult } from '../interfaces';
+import { SearchResult } from '../interfaces';
 import { store } from '../store/store';
 import { isUrlOrIp } from '.';
 
 export const searchParser = (searchQuery: string): SearchResult => {
+  const queries = searchQueries.queries;
+
   const result: SearchResult = {
     isLocal: false,
     isURL: false,
     sameTab: false,
-    search: '',
+    encodedURL: '',
-    query: {
+    primarySearch: {
       name: '',
       prefix: '',
       template: '',
     },
+    secondarySearch: {
+      name: '',
+      prefix: '',
+      template: '',
+    },
+    rawQuery: searchQuery,
   };
 
   const { customQueries, config } = store.getState().config;
@@ -24,25 +32,35 @@ export const searchParser = (searchQuery: string): SearchResult => {
   // Match prefix and query
   const splitQuery = searchQuery.match(/^\/([a-z]+)[ ](.+)$/i);
 
+  // Extract prefix
   const prefix = splitQuery ? splitQuery[1] : config.defaultSearchProvider;
 
-  const search = splitQuery
+  // Encode url
+  const encodedURL = splitQuery
     ? encodeURIComponent(splitQuery[2])
     : encodeURIComponent(searchQuery);
 
-  const query = [...queries, ...customQueries].find(
+  // Find primary search engine template
-    (q: Query) => q.prefix === prefix
+  const findProvider = (prefix: string) => {
-  );
+    return [...queries, ...customQueries].find((q) => q.prefix === prefix);
+  };
 
-  // If search provider was found
+  const primarySearch = findProvider(prefix);
-  if (query) {
+  const secondarySearch = findProvider(config.secondarySearchProvider);
-    result.query = query;
+
-    result.search = search;
+  // If search providers were found
+  if (primarySearch) {
+    result.primarySearch = primarySearch;
+    result.encodedURL = encodedURL;
 
     if (prefix === 'l') {
       result.isLocal = true;
-    } else {
+    }
+
     result.sameTab = config.searchSameTab;
+
+    if (secondarySearch) {
+      result.secondarySearch = secondarySearch;
     }
 
     return result;

client/src/utility/templateObjects/configTemplate.ts

@@ -17,6 +17,7 @@ export const configTemplate: Config = {
   hideCategories: false,
   hideSearch: false,
   defaultSearchProvider: 'l',
+  secondarySearchProvider: 'd',
   dockerApps: false,
   dockerHost: 'localhost',
   kubernetesApps: false,

client/src/utility/templateObjects/settingsTemplate.ts

@@ -1,21 +1,16 @@
 import {
   DockerSettingsForm,
-  OtherSettingsForm,
+  UISettingsForm,
-  SearchForm,
+  GeneralForm,
   ThemeSettingsForm,
   WeatherForm,
 } from '../../interfaces';
 
-export const otherSettingsTemplate: OtherSettingsForm = {
+export const uiSettingsTemplate: UISettingsForm = {
   customTitle: document.title,
-  pinAppsByDefault: true,
-  pinCategoriesByDefault: true,
   hideHeader: false,
   hideApps: false,
   hideCategories: false,
-  useOrdering: 'createdAt',
-  appsSameTab: false,
-  bookmarksSameTab: false,
   useAmericanDate: false,
   greetingsSchema: 'Good evening!;Good afternoon!;Good morning!;Good night!',
   daySchema: 'Sunday;Monday;Tuesday;Wednesday;Thursday;Friday;Saturday',
@@ -23,6 +18,8 @@ export const otherSettingsTemplate: OtherSettingsForm = {
     'January;February;March;April;May;June;July;August;September;October;November;December',
   showTime: false,
   hideDate: false,
+  hideSearch: false,
+  disableAutofocus: false,
 };
 
 export const weatherSettingsTemplate: WeatherForm = {
@@ -33,11 +30,15 @@ export const weatherSettingsTemplate: WeatherForm = {
   weatherData: 'cloud',
 };
 
-export const searchSettingsTemplate: SearchForm = {
+export const generalSettingsTemplate: GeneralForm = {
-  hideSearch: false,
   searchSameTab: false,
   defaultSearchProvider: 'l',
-  disableAutofocus: false,
+  secondarySearchProvider: 'd',
+  pinAppsByDefault: true,
+  pinCategoriesByDefault: true,
+  useOrdering: 'createdAt',
+  appsSameTab: false,
+  bookmarksSameTab: false,
 };
 
 export const dockerSettingsTemplate: DockerSettingsForm = {

controllers/queries/addQuery.js

@@ -1,4 +1,5 @@
 const asyncWrapper = require('../../middleware/asyncWrapper');
+const ErrorResponse = require('../../utils/ErrorResponse');
 const File = require('../../utils/File');
 
 // @desc      Add custom search query
@@ -8,6 +9,12 @@ const addQuery = asyncWrapper(async (req, res, next) => {
   const file = new File('data/customQueries.json');
   let content = JSON.parse(file.read());
 
+  const prefixes = content.queries.map((q) => q.prefix);
+
+  if (prefixes.includes(req.body.prefix)) {
+    return next(new ErrorResponse('Prefix must be unique', 400));
+  }
+
   // Add new query
   content.queries.push(req.body);
   file.write(content, true);

controllers/themes/addTheme.js

@@ -0,0 +1,28 @@
+const asyncWrapper = require('../../middleware/asyncWrapper');
+const ErrorResponse = require('../../utils/ErrorResponse');
+const File = require('../../utils/File');
+
+// @desc      Create new theme
+// @route     POST /api/themes
+// @access    Private
+const addTheme = asyncWrapper(async (req, res, next) => {
+  const file = new File('data/themes.json');
+  let content = JSON.parse(file.read());
+
+  const themeNames = content.themes.map((t) => t.name);
+
+  if (themeNames.includes(req.body.name)) {
+    return next(new ErrorResponse('Name must be unique', 400));
+  }
+
+  // Add new theme
+  content.themes.push(req.body);
+  file.write(content, true);
+
+  res.status(201).json({
+    success: true,
+    data: req.body,
+  });
+});
+
+module.exports = addTheme;

controllers/themes/deleteTheme.js

@@ -0,0 +1,22 @@
+const asyncWrapper = require('../../middleware/asyncWrapper');
+const File = require('../../utils/File');
+
+// @desc      Delete theme
+// @route     DELETE /api/themes/:name
+// @access    Public
+const deleteTheme = asyncWrapper(async (req, res, next) => {
+  const file = new File('data/themes.json');
+  let content = JSON.parse(file.read());
+
+  content.themes = content.themes.filter((t) => t.name != req.params.name);
+  file.write(content, true);
+
+  const userThemes = content.themes.filter((t) => t.isCustom);
+
+  res.status(200).json({
+    success: true,
+    data: userThemes,
+  });
+});
+
+module.exports = deleteTheme;

controllers/themes/getThemes.js

@@ -0,0 +1,17 @@
+const asyncWrapper = require('../../middleware/asyncWrapper');
+const File = require('../../utils/File');
+
+// @desc      Get themes file
+// @route     GET /api/themes
+// @access    Public
+const getThemes = asyncWrapper(async (req, res, next) => {
+  const file = new File('data/themes.json');
+  const content = JSON.parse(file.read());
+
+  res.status(200).json({
+    success: true,
+    data: content.themes,
+  });
+});
+
+module.exports = getThemes;

controllers/themes/index.js

@@ -0,0 +1,6 @@
+module.exports = {
+  getThemes: require('./getThemes'),
+  addTheme: require('./addTheme'),
+  deleteTheme: require('./deleteTheme'),
+  updateTheme: require('./updateTheme'),
+};

controllers/themes/updateTheme.js

@@ -0,0 +1,32 @@
+const asyncWrapper = require('../../middleware/asyncWrapper');
+const File = require('../../utils/File');
+
+// @desc      Update theme
+// @route     PUT /api/themes/:name
+// @access    Public
+const updateTheme = asyncWrapper(async (req, res, next) => {
+  const file = new File('data/themes.json');
+  let content = JSON.parse(file.read());
+
+  let themeIdx = content.themes.findIndex((t) => t.name == req.params.name);
+
+  // theme found
+  if (themeIdx > -1) {
+    content.themes = [
+      ...content.themes.slice(0, themeIdx),
+      req.body,
+      ...content.themes.slice(themeIdx + 1),
+    ];
+  }
+
+  file.write(content, true);
+
+  const userThemes = content.themes.filter((t) => t.isCustom);
+
+  res.status(200).json({
+    success: true,
+    data: userThemes,
+  });
+});
+
+module.exports = updateTheme;

routes/queries.js

@@ -2,7 +2,7 @@ const express = require('express');
 const router = express.Router();
 
 // middleware
-const { auth, requireAuth } = require('../middleware');
+const { auth, requireAuth, requireBody } = require('../middleware');
 
 const {
   getQueries,
@@ -11,7 +11,16 @@ const {
   updateQuery,
 } = require('../controllers/queries/');
 
-router.route('/').post(auth, requireAuth, addQuery).get(getQueries);
+router
+  .route('/')
+  .post(
+    auth,
+    requireAuth,
+    requireBody(['name', 'prefix', 'template']),
+    addQuery
+  )
+  .get(getQueries);
+
 router
   .route('/:prefix')
   .delete(auth, requireAuth, deleteQuery)

routes/themes.js

@@ -0,0 +1,29 @@
+const express = require('express');
+const router = express.Router();
+
+// middleware
+const { auth, requireAuth, requireBody } = require('../middleware');
+
+const {
+  getThemes,
+  addTheme,
+  deleteTheme,
+  updateTheme,
+} = require('../controllers/themes/');
+
+router
+  .route('/')
+  .get(getThemes)
+  .post(
+    auth,
+    requireAuth,
+    requireBody(['name', 'colors', 'isCustom']),
+    addTheme
+  );
+
+router
+  .route('/:name')
+  .delete(auth, requireAuth, deleteTheme)
+  .put(auth, requireAuth, updateTheme);
+
+module.exports = router;

utils/Logger.js

@@ -1,6 +1,6 @@
 class Logger {
   log(message, level = 'INFO') {
-    console.log(`[${this.generateTimestamp()}] [${level}] ${message}`)
+    console.log(`[${this.generateTimestamp()}] [${level}] ${message}`);
   }
 
   generateTimestamp() {
@@ -20,7 +20,9 @@ class Logger {
     // Timezone
     const tz = -d.getTimezoneOffset() / 60;
 
-    return `${year}-${month}-${day} ${hour}:${minutes}:${seconds}.${miliseconds} UTC${tz >= 0 ? '+' + tz : tz}`;
+    return `${year}-${month}-${day} ${hour}:${minutes}:${seconds}.${miliseconds} UTC${
+      tz >= 0 ? '+' + tz : tz
+    }`;
   }
 
   parseDate(date, ms = false) {

utils/init/index.js

@@ -1,11 +1,13 @@
 const initConfig = require('./initConfig');
 const initFiles = require('./initFiles');
 const initDockerSecrets = require('./initDockerSecrets');
+const normalizeTheme = require('./normalizeTheme');
 
 const initApp = async () => {
   initDockerSecrets();
   await initFiles();
   await initConfig();
+  await normalizeTheme();
 };
 
 module.exports = initApp;

utils/init/initialConfig.json

@@ -15,6 +15,7 @@
   "hideCategories": false,
   "hideSearch": false,
   "defaultSearchProvider": "l",
+  "secondarySearchProvider": "d",
   "dockerApps": false,
   "dockerHost": "localhost",
   "kubernetesApps": false,

utils/init/initialFiles.json

@@ -27,6 +27,166 @@
         "queries": []
       },
       "isJSON": true
+    },
+    {
+      "name": "themes.json",
+      "msg": {
+        "created": "Created default theme file",
+        "found": "Found theme file"
+      },
+      "paths": {
+        "src": "../../data",
+        "dest": "../../data"
+      },
+      "template": {
+        "themes": [
+          {
+            "name": "blackboard",
+            "colors": {
+              "background": "#1a1a1a",
+              "primary": "#FFFDEA",
+              "accent": "#5c5c5c"
+            },
+            "isCustom": false
+          },
+          {
+            "name": "gazette",
+            "colors": {
+              "background": "#F2F7FF",
+              "primary": "#000000",
+              "accent": "#5c5c5c"
+            },
+            "isCustom": false
+          },
+          {
+            "name": "espresso",
+            "colors": {
+              "background": "#21211F",
+              "primary": "#D1B59A",
+              "accent": "#4E4E4E"
+            },
+            "isCustom": false
+          },
+          {
+            "name": "cab",
+            "colors": {
+              "background": "#F6D305",
+              "primary": "#1F1F1F",
+              "accent": "#424242"
+            },
+            "isCustom": false
+          },
+          {
+            "name": "cloud",
+            "colors": {
+              "background": "#f1f2f0",
+              "primary": "#35342f",
+              "accent": "#37bbe4"
+            },
+            "isCustom": false
+          },
+          {
+            "name": "lime",
+            "colors": {
+              "background": "#263238",
+              "primary": "#AABBC3",
+              "accent": "#aeea00"
+            },
+            "isCustom": false
+          },
+          {
+            "name": "white",
+            "colors": {
+              "background": "#ffffff",
+              "primary": "#222222",
+              "accent": "#dddddd"
+            },
+            "isCustom": false
+          },
+          {
+            "name": "tron",
+            "colors": {
+              "background": "#242B33",
+              "primary": "#EFFBFF",
+              "accent": "#6EE2FF"
+            },
+            "isCustom": false
+          },
+          {
+            "name": "blues",
+            "colors": {
+              "background": "#2B2C56",
+              "primary": "#EFF1FC",
+              "accent": "#6677EB"
+            },
+            "isCustom": false
+          },
+          {
+            "name": "passion",
+            "colors": {
+              "background": "#f5f5f5",
+              "primary": "#12005e",
+              "accent": "#8e24aa"
+            },
+            "isCustom": false
+          },
+          {
+            "name": "chalk",
+            "colors": {
+              "background": "#263238",
+              "primary": "#AABBC3",
+              "accent": "#FF869A"
+            },
+            "isCustom": false
+          },
+          {
+            "name": "paper",
+            "colors": {
+              "background": "#F8F6F1",
+              "primary": "#4C432E",
+              "accent": "#AA9A73"
+            },
+            "isCustom": false
+          },
+          {
+            "name": "neon",
+            "colors": {
+              "background": "#091833",
+              "primary": "#EFFBFF",
+              "accent": "#ea00d9"
+            },
+            "isCustom": false
+          },
+          {
+            "name": "pumpkin",
+            "colors": {
+              "background": "#2d3436",
+              "primary": "#EFFBFF",
+              "accent": "#ffa500"
+            },
+            "isCustom": false
+          },
+          {
+            "name": "onedark",
+            "colors": {
+              "background": "#282c34",
+              "primary": "#dfd9d6",
+              "accent": "#98c379"
+            },
+            "isCustom": false
+          },
+          {
+            "name": "mint",
+            "colors": {
+              "background": "#282525",
+              "primary": "#d9d9d9",
+              "accent": "#50fbc2"
+            },
+            "isCustom": false
+          }
+        ]
+      },
+      "isJSON": true
     }
   ]
 }

utils/init/normalizeTheme.js

@@ -0,0 +1,28 @@
+const { readFile, writeFile } = require('fs/promises');
+
+const normalizeTheme = async () => {
+  // open main config file
+  const configFile = await readFile('data/config.json', 'utf8');
+  const config = JSON.parse(configFile);
+
+  // open default themes file
+  const themesFile = await readFile('utils/init/themes.json', 'utf8');
+  const { themes } = JSON.parse(themesFile);
+
+  // find theme
+  const theme = themes.find((t) => t.name === config.defaultTheme);
+
+  if (theme) {
+    // save theme in new format
+    // PAB - primary;accent;background
+    const { primary: p, accent: a, background: b } = theme.colors;
+    const normalizedTheme = `${p};${a};${b}`;
+
+    await writeFile(
+      'data/config.json',
+      JSON.stringify({ ...config, defaultTheme: normalizedTheme })
+    );
+  }
+};
+
+module.exports = normalizeTheme;

utils/init/themes.json

@@ -6,7 +6,8 @@
         "background": "#1a1a1a",
         "primary": "#FFFDEA",
         "accent": "#5c5c5c"
-      }
+      },
+      "isCustom": false
     },
     {
       "name": "gazette",
@@ -14,7 +15,8 @@
         "background": "#F2F7FF",
         "primary": "#000000",
         "accent": "#5c5c5c"
-      }
+      },
+      "isCustom": false
     },
     {
       "name": "espresso",
@@ -22,7 +24,8 @@
         "background": "#21211F",
         "primary": "#D1B59A",
         "accent": "#4E4E4E"
-      }
+      },
+      "isCustom": false
     },
     {
       "name": "cab",
@@ -30,7 +33,8 @@
         "background": "#F6D305",
         "primary": "#1F1F1F",
         "accent": "#424242"
-      }
+      },
+      "isCustom": false
     },
     {
       "name": "cloud",
@@ -38,7 +42,8 @@
         "background": "#f1f2f0",
         "primary": "#35342f",
         "accent": "#37bbe4"
-      }
+      },
+      "isCustom": false
     },
     {
       "name": "lime",
@@ -46,7 +51,8 @@
         "background": "#263238",
         "primary": "#AABBC3",
         "accent": "#aeea00"
-      }
+      },
+      "isCustom": false
     },
     {
       "name": "white",
@@ -54,7 +60,8 @@
         "background": "#ffffff",
         "primary": "#222222",
         "accent": "#dddddd"
-      }
+      },
+      "isCustom": false
     },
     {
       "name": "tron",
@@ -62,7 +69,8 @@
         "background": "#242B33",
         "primary": "#EFFBFF",
         "accent": "#6EE2FF"
-      }
+      },
+      "isCustom": false
     },
     {
       "name": "blues",
@@ -70,7 +78,8 @@
         "background": "#2B2C56",
         "primary": "#EFF1FC",
         "accent": "#6677EB"
-      }
+      },
+      "isCustom": false
     },
     {
       "name": "passion",
@@ -78,7 +87,8 @@
         "background": "#f5f5f5",
         "primary": "#12005e",
         "accent": "#8e24aa"
-      }
+      },
+      "isCustom": false
     },
     {
       "name": "chalk",
@@ -86,7 +96,8 @@
         "background": "#263238",
         "primary": "#AABBC3",
         "accent": "#FF869A"
-      }
+      },
+      "isCustom": false
     },
     {
       "name": "paper",
@@ -94,7 +105,8 @@
         "background": "#F8F6F1",
         "primary": "#4C432E",
         "accent": "#AA9A73"
-      }
+      },
+      "isCustom": false
     },
     {
       "name": "neon",
@@ -102,7 +114,8 @@
         "background": "#091833",
         "primary": "#EFFBFF",
         "accent": "#ea00d9"
-      }
+      },
+      "isCustom": false
     },
     {
       "name": "pumpkin",
@@ -110,7 +123,8 @@
         "background": "#2d3436",
         "primary": "#EFFBFF",
         "accent": "#ffa500"
-      }
+      },
+      "isCustom": false
     },
     {
       "name": "onedark",
@@ -118,7 +132,17 @@
         "background": "#282c34",
         "primary": "#dfd9d6",
         "accent": "#98c379"
-      }
+      },
+      "isCustom": false
+    },
+    {
+      "name": "mint",
+      "colors": {
+        "background": "#282525",
+        "primary": "#d9d9d9",
+        "accent": "#50fbc2"
+      },
+      "isCustom": false
     }
   ]
 }