DRAFT: Add Tubearchivist Frontend React dev docker setup (#768)

* Add development docker-compose file * Add /new/ path in nginx conf * Add frontend production setup * Fix lint * Refac move prod docker compose into non suffixed file * Fix run.sh fileendings on windows * Fix docker file naming consistancies * Add frontend dev setup * Add docker compose dev command * Refac remove docker network * Fix potential error causes * Chore update react-router-dom * Add redirect to login after logout * Refac allow basic auth for session login in api * Fix loginresponsetype optional property * Refac move isAdmin check into page Base * Refac use node lts for dev container * Refac remove old setup in readme * Refac move getisAdmin into loader and rename * Refac remove manual csrf cookie handing from actions and loader * Fix post requiring csrf header & cookie * Fix remove empty files * Refac revert dockerfile changes * Refac revert gitatrributes changes * Refac revert docker changes * Refac revert nginx changes * Refac revert docker change * Refac move frontend into frontend folder * Add production steps to dockerfile * Refac implement endpoint renaming * Refac remove frontend dockerfile * Add credentials include for dev env * Fix allow cors with credentials for dev environment * Fix images in dev mode * Add credentials for dev mode to all loader and actions, except signin * Revert cors config * Revert cors config * Fix nginx not serving /youtube/ * Fix video url missing api * Fix media url missing api * Add application settings page * Add continue vids * Add csrf to delete requests * Refac use api/video endpoint with filter to home, channel, playlist pages * Add channel nav request * Add channel playlists * Fix filterbar for playlist in channel * Add playlist_nav to video page * Add downloads aggs * Refac remove basic auth * Fix credentials include in signin * Refac user config to user me config * Add ApiToken get
2024-08-10 19:53:50 +02:00 · 2024-08-10 19:53:50 +02:00 · 83bb7f678b
commit 83bb7f678b
parent 4dd7ac496a
221 changed files with 16165 additions and 2 deletions
--- a/13
+++ b/13
@ -1,6 +1,17 @@
 # multi stage to build tube archivist
 # build python wheel, download and extract ffmpeg, copy into final image

+FROM node:lts-alpine as node-builder
+
+# RUN npm config set registry https://registry.npmjs.org/
+
+COPY ./frontend /frontend
+
+WORKDIR /frontend
+RUN npm i
+RUN npm run build:deploy
+
+WORKDIR /

 # First stage to build python wheel
 FROM python:3.11.8-slim-bookworm AS builder
@ -60,6 +71,8 @@ COPY ./backend /app
 COPY ./docker_assets/run.sh /app
 COPY ./docker_assets/uwsgi.ini /app

+COPY --from=node-builder ./frontend/dist /app/static
+
 # volumes
 VOLUME /cache
 VOLUME /youtube
--- a/docker_assets/nginx.conf
+++ b/docker_assets/nginx.conf
@ -25,9 +25,23 @@ server {
        }
    }

-    location / {
+    location /youtube/ {
+        auth_request /api/ping/;
+        alias /youtube/;
+        types {
+            video/mp4 mp4;
+        }
+    }
+    
+    location /api {
        include uwsgi_params;
        uwsgi_pass localhost:8080;
    }

+    root   /app/static;
+    index  index.html;
+
+    location / {
+        try_files $uri $uri/ /index.html =404;
+    }
 }
--- a/frontend/.eslintrc.cjs
+++ b/frontend/.eslintrc.cjs
@ -0,0 +1,16 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+    'prettier',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+  },
+};
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/frontend/.prettierignore
+++ b/frontend/.prettierignore
@ -0,0 +1,5 @@
+# Ignore artifacts:
+build
+dist
+coverage
+node_modules
--- a/frontend/.prettierrc
+++ b/frontend/.prettierrc
@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "arrowParens": "avoid",
+  "printWidth": 100
+}
--- a/frontend/README.md
+++ b/frontend/README.md
@ -0,0 +1,17 @@
+# Tubearchivist Frontend React
+
+# Folder structure
+
+```
+src ┐
+    ├───api
+    │   ├───action    // Functions that do write (POST,DELETE) calls to the backend
+    │   └───loader    // Functions that do read-only (GET,HEAD) calls to the backend
+    ├───components    // React components to be used in pages
+    ├───configuration // Application configuration.
+    │   ├───colours   // Css loader for themes
+    │   ├───constants // global constants that have no good place
+    │   └───routes    // Routes definitions used in Links and react-router-dom configuration
+    ├───functions     // Useful functions
+    └───pages         // React components that define a page/route
+```
--- a/frontend/index.html
+++ b/frontend/index.html
@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+
+    <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png" />
+    <link rel="manifest" href="/favicon/site.webmanifest" />
+    <link rel="mask-icon" href="/favicon/safari-pinned-tab.svg" color="#01202e" />
+    <link rel="shortcut icon" href="/favicon/favicon.ico" />
+
+    <meta name="apple-mobile-web-app-title" content="TubeArchivist" />
+    <meta name="application-name" content="TubeArchivist" />
+    <meta name="msapplication-TileColor" content="#01202e" />
+    <meta name="msapplication-config" content="/favicon/browserconfig.xml" />
+    <meta name="theme-color" content="#01202e" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>TubeArchivist</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@ -0,0 +1,35 @@
+{
+  "name": "tubearchivist-frontend",
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "build:deploy": "vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "dompurify": "^3.1.6",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-helmet": "^6.1.0",
+    "react-router-dom": "^6.25.1"
+  },
+  "devDependencies": {
+    "@types/dompurify": "^3.0.5",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@types/react-helmet": "^6.1.11",
+    "@typescript-eslint/eslint-plugin": "^7.16.1",
+    "@typescript-eslint/parser": "^7.16.1",
+    "@vitejs/plugin-react-swc": "^3.7.0",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.8",
+    "prettier": "3.3.3",
+    "typescript": "^5.5.3",
+    "vite": "^5.3.4"
+  }
+}
--- a/frontend/public/favicon/android-chrome-192x192.png
+++ b/frontend/public/favicon/android-chrome-192x192.png
--- a/frontend/public/favicon/android-chrome-512x512.png
+++ b/frontend/public/favicon/android-chrome-512x512.png
--- a/frontend/public/favicon/apple-touch-icon-114x114-precomposed.png
+++ b/frontend/public/favicon/apple-touch-icon-114x114-precomposed.png
--- a/frontend/public/favicon/apple-touch-icon-114x114.png
+++ b/frontend/public/favicon/apple-touch-icon-114x114.png
--- a/frontend/public/favicon/apple-touch-icon-120x120-precomposed.png
+++ b/frontend/public/favicon/apple-touch-icon-120x120-precomposed.png
--- a/frontend/public/favicon/apple-touch-icon-120x120.png
+++ b/frontend/public/favicon/apple-touch-icon-120x120.png
--- a/frontend/public/favicon/apple-touch-icon-144x144-precomposed.png
+++ b/frontend/public/favicon/apple-touch-icon-144x144-precomposed.png
--- a/frontend/public/favicon/apple-touch-icon-144x144.png
+++ b/frontend/public/favicon/apple-touch-icon-144x144.png
--- a/frontend/public/favicon/apple-touch-icon-152x152-precomposed.png
+++ b/frontend/public/favicon/apple-touch-icon-152x152-precomposed.png
--- a/frontend/public/favicon/apple-touch-icon-152x152.png
+++ b/frontend/public/favicon/apple-touch-icon-152x152.png
--- a/frontend/public/favicon/apple-touch-icon-180x180-precomposed.png
+++ b/frontend/public/favicon/apple-touch-icon-180x180-precomposed.png
--- a/frontend/public/favicon/apple-touch-icon-180x180.png
+++ b/frontend/public/favicon/apple-touch-icon-180x180.png
--- a/frontend/public/favicon/apple-touch-icon-57x57-precomposed.png
+++ b/frontend/public/favicon/apple-touch-icon-57x57-precomposed.png
--- a/frontend/public/favicon/apple-touch-icon-57x57.png
+++ b/frontend/public/favicon/apple-touch-icon-57x57.png
--- a/frontend/public/favicon/apple-touch-icon-60x60-precomposed.png
+++ b/frontend/public/favicon/apple-touch-icon-60x60-precomposed.png
--- a/frontend/public/favicon/apple-touch-icon-60x60.png
+++ b/frontend/public/favicon/apple-touch-icon-60x60.png
--- a/frontend/public/favicon/apple-touch-icon-72x72-precomposed.png
+++ b/frontend/public/favicon/apple-touch-icon-72x72-precomposed.png
--- a/frontend/public/favicon/apple-touch-icon-72x72.png
+++ b/frontend/public/favicon/apple-touch-icon-72x72.png
--- a/frontend/public/favicon/apple-touch-icon-76x76-precomposed.png
+++ b/frontend/public/favicon/apple-touch-icon-76x76-precomposed.png
--- a/frontend/public/favicon/apple-touch-icon-76x76.png
+++ b/frontend/public/favicon/apple-touch-icon-76x76.png
--- a/frontend/public/favicon/apple-touch-icon-precomposed.png
+++ b/frontend/public/favicon/apple-touch-icon-precomposed.png
--- a/frontend/public/favicon/apple-touch-icon.png
+++ b/frontend/public/favicon/apple-touch-icon.png
--- a/frontend/public/favicon/browserconfig.xml
+++ b/frontend/public/favicon/browserconfig.xml
@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/static/favicon/mstile-150x150.png"/>
+            <TileColor>#01202e</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
--- a/frontend/public/favicon/favicon-16x16.png
+++ b/frontend/public/favicon/favicon-16x16.png
--- a/frontend/public/favicon/favicon-32x32.png
+++ b/frontend/public/favicon/favicon-32x32.png
--- a/frontend/public/favicon/favicon.ico
+++ b/frontend/public/favicon/favicon.ico
--- a/frontend/public/favicon/mstile-150x150.png
+++ b/frontend/public/favicon/mstile-150x150.png
--- a/frontend/public/favicon/safari-pinned-tab.svg
+++ b/frontend/public/favicon/safari-pinned-tab.svg
@ -0,0 +1,100 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="1000.000000pt" height="1000.000000pt" viewBox="0 0 1000.000000 1000.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.14, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,1000.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M4521 9370 c-4 -3 -7 -31 -6 -63 1 -32 -3 -61 -9 -66 -6 -5 -36 -12
+-66 -16 -55 -7 -68 -9 -125 -19 -16 -3 -48 -8 -70 -12 -161 -24 -504 -118
+-709 -193 -208 -77 -507 -215 -636 -294 -19 -12 -47 -29 -62 -37 -14 -8 -41
+-24 -60 -34 -84 -48 -288 -189 -423 -293 -309 -239 -654 -606 -886 -943 -53
+-78 -169 -258 -169 -264 0 -3 -21 -40 -47 -83 -97 -164 -313 -646 -294 -658
+14 -8 670 -195 686 -195 8 0 15 9 15 19 0 11 5 23 10 26 6 3 10 13 10 21 0 8
+14 44 30 79 17 35 30 67 30 70 0 3 21 48 47 100 l47 95 148 0 c81 0 276 1 433
+1 157 0 310 -1 340 -1 l55 0 0 -615 0 -615 415 1 415 0 1 142 c0 78 0 355 1
+615 l1 472 46 0 c25 0 322 0 659 0 l612 1 0 32 c1 44 -1 538 -2 660 0 63 -5
+97 -12 98 -6 1 -581 1 -1278 0 -698 0 -1268 2 -1268 5 0 7 143 147 241 235 94
+85 232 193 329 260 36 24 67 47 68 52 2 4 7 7 12 7 4 0 52 28 106 62 126 79
+371 202 510 257 60 23 118 46 129 51 131 56 685 193 713 176 4 -2 7 -34 6 -70
+l0 -66 162 0 162 0 0 503 0 502 -155 0 c-85 0 -158 -2 -162 -5z"/>
+<path d="M5210 8905 l0 -365 48 -1 c26 0 54 -2 62 -4 8 -1 45 -5 82 -9 72 -6
+198 -23 232 -31 12 -3 32 -7 46 -9 284 -48 643 -169 935 -314 527 -262 984
+-651 1324 -1127 39 -55 75 -105 81 -112 5 -7 10 -17 10 -23 0 -5 4 -10 9 -10
+5 0 14 -12 20 -27 6 -16 24 -48 40 -73 31 -47 61 -101 117 -208 30 -57 32 -65
+16 -69 -75 -20 -117 -40 -113 -53 9 -35 83 -285 85 -287 1 -2 18 2 37 8 19 5
+41 12 49 14 49 12 856 241 876 249 11 4 10 14 -2 57 -9 29 -17 60 -19 68 -7
+32 -53 183 -57 186 -2 2 -22 -2 -43 -9 -93 -31 -88 -33 -126 46 -232 488 -557
+933 -950 1303 -285 269 -647 520 -1014 705 -533 268 -1067 412 -1682 455 l-63
+4 0 -364z"/>
+<path d="M6122 7336 c-4 -6 -14 -31 -23 -56 -17 -47 -238 -630 -288 -760 -16
+-41 -61 -160 -100 -265 -40 -104 -76 -199 -80 -210 -10 -23 -54 -138 -104
+-275 -20 -52 -41 -108 -48 -125 -7 -16 -13 -32 -13 -35 -1 -3 -7 -18 -13 -35
+-6 -16 -55 -145 -108 -285 -53 -140 -102 -271 -110 -290 -8 -19 -48 -125 -89
+-235 -41 -110 -90 -240 -109 -290 -19 -49 -76 -200 -127 -335 -133 -356 -151
+-402 -166 -437 -8 -17 -14 -34 -14 -37 0 -3 -15 -45 -34 -94 -19 -48 -61 -160
+-95 -248 -33 -89 -65 -174 -72 -190 -22 -55 -28 -70 -98 -258 -39 -103 -71
+-192 -71 -197 0 -5 182 -8 441 -7 l441 3 114 320 c63 176 126 352 140 390 14
+39 46 129 70 200 25 72 50 139 55 150 5 11 22 58 38 105 29 84 89 254 171 480
+23 63 47 133 54 155 12 36 70 199 131 365 13 36 60 169 105 295 44 127 85 239
+90 250 4 11 62 173 129 360 197 557 186 530 195 504 3 -8 18 -52 35 -99 16
+-47 54 -155 84 -240 30 -85 96 -272 146 -415 51 -143 96 -269 100 -280 5 -11
+27 -72 49 -135 120 -343 143 -407 152 -422 6 -10 10 -24 10 -33 0 -8 6 -29 14
+-47 8 -18 44 -116 80 -218 182 -521 327 -927 336 -942 6 -10 10 -23 10 -29 0
+-9 134 -393 176 -502 8 -21 28 -78 45 -128 l31 -90 -49 -56 c-26 -31 -78 -88
+-115 -127 -64 -68 -68 -70 -81 -51 -8 11 -28 37 -44 57 l-30 37 -124 -91 c-68
+-50 -123 -96 -123 -104 1 -9 281 -404 327 -459 4 -5 62 -84 128 -175 65 -91
+124 -166 129 -168 8 -3 73 39 90 58 3 3 42 32 88 64 l82 58 -40 56 -39 56 94
+96 c558 566 945 1258 1130 2025 18 77 38 167 44 200 6 33 13 69 15 80 6 33 19
+119 21 140 2 11 6 43 9 70 35 253 40 715 11 930 -2 17 -9 75 -15 129 -7 55
+-16 109 -20 122 -5 12 -7 24 -5 26 11 11 -85 428 -98 428 -11 0 -680 -190
+-685 -195 -2 -1 8 -47 21 -101 14 -55 28 -115 31 -134 3 -19 8 -46 11 -60 10
+-53 19 -109 29 -195 4 -33 9 -70 11 -82 8 -53 18 -259 18 -369 -1 -400 -74
+-812 -213 -1194 -23 -63 -44 -123 -47 -132 -9 -29 -20 -21 -35 25 -22 62 -198
+529 -208 552 -5 11 -69 178 -141 370 -72 193 -187 499 -256 680 -68 182 -164
+436 -213 565 -48 129 -93 246 -98 260 -6 14 -27 70 -47 125 -19 55 -40 109
+-45 120 -8 18 -191 503 -224 595 -15 42 -95 253 -139 366 l-31 80 -398 0
+c-270 0 -401 -3 -406 -10z"/>
+<path d="M720 6002 c-47 -160 -68 -237 -64 -243 2 -4 28 -13 56 -19 29 -7 56
+-14 59 -16 4 -2 3 -23 -1 -46 -5 -24 -11 -61 -14 -83 -4 -23 -8 -50 -10 -60
+-2 -11 -7 -47 -10 -80 -4 -33 -9 -73 -11 -90 -31 -231 -26 -701 11 -955 3 -25
+8 -61 10 -80 2 -19 5 -44 8 -55 3 -11 8 -42 12 -70 3 -27 8 -53 10 -56 2 -4 6
+-24 10 -45 20 -134 154 -594 209 -719 7 -16 27 -66 45 -110 59 -147 189 -400
+297 -579 89 -147 270 -400 359 -502 11 -12 39 -46 64 -75 74 -89 358 -369 465
+-459 55 -46 110 -92 121 -102 22 -19 22 -19 107 99 48 65 90 123 94 128 35 42
+243 336 242 342 0 5 -38 40 -85 78 -313 258 -611 618 -818 988 -63 114 -176
+341 -176 355 0 5 -9 26 -19 48 -54 113 -171 502 -200 669 -6 33 -13 69 -15 80
+-8 43 -21 134 -31 210 -19 156 -24 420 -12 605 8 119 13 166 33 295 5 28 7 53
+6 58 -2 8 24 3 99 -18 l45 -13 23 82 c12 44 29 106 38 136 30 104 34 95 -54
+118 -43 11 -109 29 -148 40 -38 11 -104 30 -145 41 -41 12 -79 23 -85 25 -5 1
+-28 8 -50 14 -22 7 -112 33 -200 58 -88 25 -181 52 -207 59 l-48 14 -20 -67z"/>
+<path d="M2693 5210 c-48 -11 -119 -56 -148 -95 -112 -146 -57 -352 115 -428
+43 -19 68 -20 560 -21 449 -1 521 1 563 15 65 22 114 64 151 129 27 48 31 64
+31 130 0 116 -49 200 -149 253 -41 22 -44 22 -566 23 -289 1 -539 -2 -557 -6z"/>
+<path d="M6425 5138 c-50 -19 -102 -55 -128 -90 -56 -73 -55 -54 -55 -901 -1
+-430 -1 -793 -2 -807 0 -21 -26 1 -169 148 -93 94 -173 172 -178 172 -4 0 -58
+-50 -118 -110 l-110 -110 25 -24 c14 -12 202 -204 419 -424 217 -221 397 -402
+401 -402 3 0 199 192 435 426 l429 425 -114 114 -115 114 -177 -178 -178 -178
+-1 381 c-2 1238 -2 1258 -24 1301 -26 52 -71 98 -126 126 -51 26 -166 35 -214
+17z"/>
+<path d="M2814 4501 c-2 -2 -4 -415 -4 -918 l0 -913 415 0 415 0 0 28 c4 223
+0 1795 -4 1799 -6 7 -816 10 -822 4z"/>
+<path d="M3181 2038 c-8 -13 -44 -63 -81 -113 -36 -49 -101 -137 -143 -195
+-42 -58 -80 -109 -84 -115 -16 -20 -88 -119 -103 -141 -8 -13 -48 -68 -89
+-124 -40 -55 -72 -103 -70 -105 2 -2 60 -44 129 -94 l125 -91 25 32 c62 79 35
+81 231 -15 382 -187 717 -298 1149 -382 8 -1 36 -5 61 -9 25 -4 57 -9 70 -11
+45 -7 183 -24 264 -32 105 -10 629 -10 725 0 116 13 131 14 195 22 58 7 70 9
+125 19 14 3 42 8 63 11 48 7 174 32 252 51 33 8 67 16 76 19 145 33 419 126
+599 202 122 52 413 195 418 206 2 4 8 7 12 7 11 0 193 108 273 162 53 36 57
+41 45 59 -107 155 -406 558 -415 558 -7 1 -44 -19 -82 -44 -236 -153 -537
+-295 -814 -386 -97 -31 -291 -85 -342 -94 -16 -2 -41 -7 -55 -10 -39 -9 -240
+-43 -288 -49 -212 -28 -609 -29 -822 -2 -14 2 -52 7 -85 11 -33 4 -69 9 -80
+12 -11 2 -33 6 -50 9 -211 34 -520 123 -735 211 -86 36 -291 130 -299 138 -2
+3 15 30 38 60 24 31 41 58 39 60 -11 11 -243 178 -252 181 -6 2 -17 -6 -25
+-18z"/>
+</g>
+</svg>
--- a/frontend/public/favicon/site.webmanifest
+++ b/frontend/public/favicon/site.webmanifest
@ -0,0 +1,19 @@
+{
+  "name": "TubeArchivist",
+  "short_name": "TubeArchivist",
+  "icons": [
+    {
+      "src": "/static/favicon/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/static/favicon/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#01202e",
+  "background_color": "#01202e",
+  "display": "standalone"
+}
--- a/frontend/public/font/OFL_License.txt
+++ b/frontend/public/font/OFL_License.txt
@ -0,0 +1,94 @@
+Copyright (c) 2015, Kosal Sen, Philatype (<http://philatype.com>),
+with Reserved Font Name Sen.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
--- a/frontend/public/font/Sen-Bold.woff
+++ b/frontend/public/font/Sen-Bold.woff
--- a/frontend/public/font/Sen-Regular.woff
+++ b/frontend/public/font/Sen-Regular.woff
--- a/frontend/public/img/banner-tube-archivist-dark.png
+++ b/frontend/public/img/banner-tube-archivist-dark.png
--- a/frontend/public/img/banner-tube-archivist-light.png
+++ b/frontend/public/img/banner-tube-archivist-light.png
--- a/frontend/public/img/default-channel-art.jpg
+++ b/frontend/public/img/default-channel-art.jpg
--- a/frontend/public/img/default-channel-banner.jpg
+++ b/frontend/public/img/default-channel-banner.jpg
--- a/frontend/public/img/default-channel-icon.jpg
+++ b/frontend/public/img/default-channel-icon.jpg
--- a/frontend/public/img/default-playlist-thumb.jpg
+++ b/frontend/public/img/default-playlist-thumb.jpg
--- a/frontend/public/img/default-video-thumb.jpg
+++ b/frontend/public/img/default-video-thumb.jpg
--- a/frontend/public/img/icon-add.svg
+++ b/frontend/public/img/icon-add.svg
@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1"
+	 id="svg1303" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 500"
+	 style="enable-background:new 0 0 500 500;" xml:space="preserve">
+<sodipodi:namedview  bordercolor="#666666" borderopacity="1.0" id="base" inkscape:current-layer="layer1" inkscape:cx="-97.380081" inkscape:cy="261.09215" inkscape:document-units="mm" inkscape:guide-bbox="true" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:window-height="1017" inkscape:window-maximized="1" inkscape:window-width="1920" inkscape:window-x="-8" inkscape:window-y="-8" inkscape:zoom="0.85859018" pagecolor="#ffffff" showgrid="false" showguides="true" units="px">
+	<sodipodi:guide  id="guide1072" inkscape:locked="false" orientation="1,0" position="-221.87586,143.2945"></sodipodi:guide>
+</sodipodi:namedview>
+<path d="M431.9,194.4H305.6V68.1c0-30.6-25-55.6-55.6-55.6h0c-30.6,0-55.6,25-55.6,55.6v126.3H68.1c-30.6,0-55.6,25-55.6,55.6v0
+	c0,30.6,25,55.6,55.6,55.6h126.3v126.3c0,30.6,25,55.6,55.6,55.6h0c30.6,0,55.6-25,55.6-55.6V305.6h126.3c30.6,0,55.6-25,55.6-55.6
+	v0C487.5,219.4,462.5,194.4,431.9,194.4z"/>
+</svg>
--- a/frontend/public/img/icon-arrow-bottom.svg
+++ b/frontend/public/img/icon-arrow-bottom.svg
@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1"
+	 id="svg1303" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 500"
+	 style="enable-background:new 0 0 500 500;" xml:space="preserve">
+<g>
+	<path d="M231.3,382c4.8,5.3,11.6,8.3,18.7,8.3c7.1,0,13.9-3,18.7-8.3l112.1-124.2c6.7-7.4,8.4-18,4.3-27.1
+		c-4-9.1-13.1-14.9-23-14.9h-52.9V64.9c0-13.9-11.3-25.2-25.2-25.2h-68c-13.9,0-25.2,11.3-25.2,25.2v150.9h-52.9
+		c-10,0-19,5.9-23,14.9c-4,9.1-2.3,19.7,4.3,27.1L231.3,382z"/>
+	<path d="M436.1,408.8H63.9c-13.6,0-24.7,11.1-24.7,24.7c0,13.6,11.1,24.7,24.7,24.7h372.2c13.6,0,24.7-11.1,24.7-24.7
+		C460.8,419.9,449.7,408.8,436.1,408.8z"/>
+</g>
+</svg>
--- a/frontend/public/img/icon-arrow-down.svg
+++ b/frontend/public/img/icon-arrow-down.svg
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xmlns="http://www.w3.org/2000/svg">
+  <g style="" transform="matrix(0.9999999999999999, 0, 0, -0.9999999999999999, 0, 497.9000392526395)">
+    <path d="M 231.3 48 C 236.1 42.7 242.9 39.7 250 39.7 C 257.1 39.7 263.9 42.7 268.7 48 L 380.8 172.2 C 387.5 179.6 389.2 190.2 385.1 199.3 C 381.1 208.4 372 214.2 362.1 214.2 L 309.2 214.2 L 309.2 365.1 C 309.2 379 297.9 390.3 284 390.3 L 216 390.3 C 202.1 390.3 190.8 379 190.8 365.1 L 190.8 214.2 L 137.9 214.2 C 127.9 214.2 118.9 208.3 114.9 199.3 C 110.9 190.2 112.6 179.6 119.2 172.2 L 231.3 48 Z" style=""/>
+  </g>
+</svg>
--- a/frontend/public/img/icon-arrow-top.svg
+++ b/frontend/public/img/icon-arrow-top.svg
@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xmlns="http://www.w3.org/2000/svg">
+  <g style="" transform="matrix(0.9999999999999999, 0, 0, -0.9999999999999999, 0, 497.9000392526395)">
+    <path d="M231.3,382c4.8,5.3,11.6,8.3,18.7,8.3c7.1,0,13.9-3,18.7-8.3l112.1-124.2c6.7-7.4,8.4-18,4.3-27.1 c-4-9.1-13.1-14.9-23-14.9h-52.9V64.9c0-13.9-11.3-25.2-25.2-25.2h-68c-13.9,0-25.2,11.3-25.2,25.2v150.9h-52.9 c-10,0-19,5.9-23,14.9c-4,9.1-2.3,19.7,4.3,27.1L231.3,382z"/>
+    <path d="M436.1,408.8H63.9c-13.6,0-24.7,11.1-24.7,24.7c0,13.6,11.1,24.7,24.7,24.7h372.2c13.6,0,24.7-11.1,24.7-24.7 C460.8,419.9,449.7,408.8,436.1,408.8z"/>
+  </g>
+</svg>
--- a/frontend/public/img/icon-arrow-up.svg
+++ b/frontend/public/img/icon-arrow-up.svg
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xmlns="http://www.w3.org/2000/svg">
+  <g style="" transform="matrix(0.9999999999999999, 0, 0, -0.9999999999999999, 0, 497.9000392526395)">
+    <path d="M231.3,382c4.8,5.3,11.6,8.3,18.7,8.3c7.1,0,13.9-3,18.7-8.3l112.1-124.2c6.7-7.4,8.4-18,4.3-27.1 c-4-9.1-13.1-14.9-23-14.9h-52.9V64.9c0-13.9-11.3-25.2-25.2-25.2h-68c-13.9,0-25.2,11.3-25.2,25.2v150.9h-52.9 c-10,0-19,5.9-23,14.9c-4,9.1-2.3,19.7,4.3,27.1L231.3,382z"/>
+  </g>
+</svg>
--- a/frontend/public/img/icon-close.svg
+++ b/frontend/public/img/icon-close.svg
@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1"
+	 id="svg1303" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 500"
+	 style="enable-background:new 0 0 500 500;" xml:space="preserve">
+<path d="M473.5,392.9L329.1,250.5l144.3-145.6c21.6-21.6,21.6-57,0-78.6l0,0c-21.6-21.6-57-21.6-78.6,0L250.5,171.9L106.3,26.2
+	c-21.6-21.6-57-21.6-78.6,0l0,0C6,47.9,6,83.2,27.6,104.9l144.2,145.6L26.4,393.9c-21.6,21.6-21.6,57,0,78.6l0,0
+	c21.6,21.6,57,21.6,78.6,0l145.4-143.4l144.3,142.4c21.6,21.6,57,21.6,78.6,0l0,0C495.1,449.9,495.1,414.6,473.5,392.9z"/>
+</svg>
--- a/frontend/public/img/icon-dot-menu.svg
+++ b/frontend/public/img/icon-dot-menu.svg
@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#000000" class="bi bi-three-dots-vertical">
+  <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
+</svg>
--- a/frontend/public/img/icon-download.svg
+++ b/frontend/public/img/icon-download.svg
@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1"
+	 id="svg1303" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 500"
+	 style="enable-background:new 0 0 500 500;" xml:space="preserve">
+<g>
+	<path d="M231.3,382c4.8,5.3,11.6,8.3,18.7,8.3c7.1,0,13.9-3,18.7-8.3l112.1-124.2c6.7-7.4,8.4-18,4.3-27.1
+		c-4-9.1-13.1-14.9-23-14.9h-52.9V64.9c0-13.9-11.3-25.2-25.2-25.2h-68c-13.9,0-25.2,11.3-25.2,25.2v150.9h-52.9
+		c-10,0-19,5.9-23,14.9c-4,9.1-2.3,19.7,4.3,27.1L231.3,382z"/>
+	<path d="M436.1,408.8H63.9c-13.6,0-24.7,11.1-24.7,24.7c0,13.6,11.1,24.7,24.7,24.7h372.2c13.6,0,24.7-11.1,24.7-24.7
+		C460.8,419.9,449.7,408.8,436.1,408.8z"/>
+</g>
+</svg>
--- a/frontend/public/img/icon-exit.svg
+++ b/frontend/public/img/icon-exit.svg
@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1"
+	 id="svg1566" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 595.3 595.3"
+	 style="enable-background:new 0 0 595.3 595.3;" xml:space="preserve">
+<g>
+	<path d="M99,295.1c0,105.5,75.4,194.1,177.1,209.1c68.9,10.1,128.8-9.3,179.1-57.3c14.4-13.7,30.2-19,49-11.3
+		c27.8,11.3,35.3,47.2,14.3,68.5c-43.9,44.6-96.7,72.7-158.4,83.6c-65,11.4-127.4,2.9-185.7-27.8c-85.2-44.9-138.5-115-155.9-210.1
+		C2.5,261.9,23,182,78.9,112.4C129,50.1,194.6,13.3,274.5,4.6c94.2-10.3,175.3,18.6,243,84.9c13.3,13,16.6,31.3,9.4,47.7
+		c-7.1,16-23.4,26.2-40.9,25.4c-11.6-0.6-21.3-5.5-29.6-13.7c-28.7-28.3-62.6-47.1-102-56.1c-117-26.9-234.8,53.1-252.9,171.9
+		C99.9,275.4,98.7,286.2,99,295.1z"/>
+	<path d="M434.1,339.9c-2.6,0-5.2,0-7.8,0c-69,0-138.1,0-207.1,0c-19.1,0-34.3-10.6-40.8-28.2c-6-16.2-1.2-34.6,12.4-46.4
+		c8-7,17.5-10.2,28.3-10.2c69,0.1,138.1,0,207.1,0c2.6,0,5.2,0,8.7,0c-2.2-4.7-5.9-7-8.7-10.1c-11.1-12.6-15.3-26.9-9.9-43.1
+		c5.3-15.8,16.6-25.5,32.9-28.6c14.2-2.7,27.1,1.3,37.3,11.4c28,27.6,55.9,55.3,83.4,83.5c16.1,16.5,16.1,42.2,0.1,58.7
+		c-27.6,28.3-55.6,56.3-83.9,83.8c-12.7,12.3-28.4,15.4-44.9,8.8c-16.7-6.7-25.9-19.8-27.1-37.7c-0.8-12,3.7-22.7,12.1-31.5
+		c2.8-3,6.1-5.5,9.2-8.3C435,341.3,434.5,340.6,434.1,339.9z"/>
+</g>
+</svg>
--- a/frontend/public/img/icon-eye.svg
+++ b/frontend/public/img/icon-eye.svg
@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1"
+	 id="svg1303" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 500"
+	 style="enable-background:new 0 0 500 500;" xml:space="preserve">
+<g>
+	<path d="M249.8,406.5C142.2,401.9,59.2,355.3,3.6,261.9c-4.7-8-4.8-16.2-0.1-24.2c46.6-79.1,115-127.3,205.9-141.1
+		c113.5-17.1,224.7,36.5,283.5,134.6c1,1.7,1.9,3.5,3,5.2c5.6,8.8,5.4,17.5,0.1,26.5c-29,50.1-69.2,88.2-121,113.9
+		c-33.4,16.6-68.7,26.2-106,28.5C262.7,405.7,256.4,406.2,249.8,406.5z M139.6,249.7c0,61.4,49.1,110.5,110.6,110.5
+		c61.2,0,110.3-49.1,110.4-110.2c0.1-61.5-48.9-110.7-110.4-110.7C188.7,139.2,139.6,188.3,139.6,249.7z"/>
+	<path d="M174.9,249.8c0-42.1,33.2-75.3,75.4-75.2c41.7,0,75,33.3,75,75.2c0,42.1-33.3,75.3-75.5,75.3
+		C208.1,324.9,174.9,291.6,174.9,249.8z"/>
+</g>
+</svg>
--- a/frontend/public/img/icon-gear.svg
+++ b/frontend/public/img/icon-gear.svg
@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="500"
+   height="500"
+   viewBox="0 0 132.29197 132.29167"
+   version="1.1"
+   id="svg1303"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
+   sodipodi:docname="Icons_Settings02.svg">
+  <defs
+     id="defs1297" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.0105705"
+     inkscape:cx="-25.63665"
+     inkscape:cy="191.7261"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata1300">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Ebene 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-164.70764)">
+    <path
+       style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers fill stroke"
+       d="m 57.383938,165.28042 c -4.849506,0 -8.753067,3.9047 -8.753067,8.75416 v 9.09569 a 50.663505,50.95301 0 0 0 -15.06221,8.94072 l -8.089206,-4.6705 c -4.199751,-2.42477 -9.533198,-0.99601 -11.957934,3.20377 l -8.61619,14.92534 c -2.4247365,4.19977 -0.9959782,9.53208 3.2037853,11.95684 l 8.3097237,4.79724 a 50.663505,50.95301 0 0 0 -0.791619,8.56976 50.663505,50.95301 0 0 0 0.811977,8.72482 l -8.0405786,4.64225 c -4.1997499,2.42476 -5.6285156,7.75707 -3.2037853,11.95677 l 8.6161899,14.92541 c 2.424737,4.19978 7.758197,5.62854 11.95794,3.20377 l 7.930877,-4.57893 a 50.663505,50.95301 0 0 0 14.93103,8.81636 v 9.12958 c 0,4.84953 3.903561,8.75306 8.753067,8.75306 h 17.234564 c 4.849471,0 8.753032,-3.90353 8.753032,-8.75306 v -8.90228 a 50.663505,50.95301 0 0 0 15.393578,-8.94415 l 7.757848,4.47942 c 4.19982,2.42477 9.53324,0.99601 11.95796,-3.20377 l 8.61621,-14.92541 c 2.42472,-4.1997 0.99596,-9.53201 -3.20378,-11.95677 l -7.78614,-4.49524 a 50.663505,50.95301 0 0 0 0.84705,-8.87183 50.663505,50.95301 0 0 0 -0.81197,-8.72475 l 8.0405,-4.64225 c 4.19982,-2.42476 5.62859,-7.75707 3.20385,-11.95684 l -8.6162,-14.92534 c -2.42474,-4.19978 -7.75823,-5.62854 -11.95797,-3.20377 l -7.930861,4.57893 a 50.663505,50.95301 0 0 0 -15.510075,-9.02895 v -8.91589 c 0,-4.84946 -3.903561,-8.75416 -8.753032,-8.75416 z m 8.9068,28.59545 A 36.767228,36.977328 0 0 1 103.05797,230.85344 36.767228,36.977328 0 0 1 66.290738,267.83108 36.767228,36.977328 0 0 1 29.5235,230.85344 36.767228,36.977328 0 0 1 66.290738,193.87587 Z"
+       id="path981"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>
--- a/frontend/public/img/icon-gridview.svg
+++ b/frontend/public/img/icon-gridview.svg
@ -0,0 +1,122 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="2000"
+   height="2000"
+   viewBox="0 0 529.16666 529.16735"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
+   sodipodi:docname="Gridview.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.35729063"
+     inkscape:cx="901.7564"
+     inkscape:cy="1021.9111"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1">
+    <sodipodi:guide
+       position="247.25932,291.92959"
+       orientation="1,0"
+       id="guide853"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="337.22901,167.98535"
+       orientation="0,1"
+       id="guide855"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="266.76325,305.4565"
+       orientation="0,1"
+       id="guide857"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="257.79774,279.50371"
+       orientation="0,1"
+       id="guide861"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Ebene 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,232.16736)">
+    <g
+       id="g873"
+       transform="matrix(1.3431799,0,0,1.3431799,-84.854433,26.13855)"
+       style="stroke:none">
+      <rect
+         ry="7.445024"
+         rx="7.445024"
+         y="-121.39048"
+         x="79.903137"
+         height="113.24854"
+         width="167.35619"
+         id="rect815"
+         style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.56300002;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:1.12600005, 0.56300002999999998;stroke-dashoffset:0;stroke-opacity:0.22508042;paint-order:markers fill stroke" />
+      <rect
+         ry="7.445024"
+         rx="7.445024"
+         y="-121.7837"
+         x="273.05484"
+         height="113.24854"
+         width="167.35619"
+         id="rect815-4"
+         style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.56300002;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:1.12600006, 0.56300004000000003;stroke-dashoffset:0;stroke-opacity:0.22508042;paint-order:markers fill stroke" />
+      <rect
+         ry="7.445024"
+         rx="7.445024"
+         y="17.882772"
+         x="79.903137"
+         height="113.24854"
+         width="167.35619"
+         id="rect815-2"
+         style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.56300002;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:1.12600006, 0.56300004000000003;stroke-dashoffset:0;stroke-opacity:0.22508042;paint-order:markers fill stroke" />
+      <rect
+         ry="7.445024"
+         rx="7.445024"
+         y="17.453594"
+         x="273.05484"
+         height="113.24854"
+         width="167.35619"
+         id="rect815-7"
+         style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.56300002;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:1.12600006, 0.56300004000000003;stroke-dashoffset:0;stroke-opacity:0.22508042;paint-order:markers fill stroke" />
+    </g>
+  </g>
+</svg>
--- a/frontend/public/img/icon-heart.svg
+++ b/frontend/public/img/icon-heart.svg
@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
+<path d="M499.9,159L499.9,159c0.1-1.7,0.1-3.4,0.1-5.2c0-69.5-58.6-129.7-130.9-129.7c-52.9,0-98.4,34-119,77.4h0
+	c-20.7-43.4-66.2-77.4-119-77.4C58.6,24.1,0,84.4,0,153.9c0,1.7,0.1,3.4,0.1,5.2h0c0,0-7.4,82.6,84.5,172.7
+	c41.8,41.9,88.5,81.6,165.4,144.1c76.9-62.5,123.6-102.3,165.4-144.1C507.2,241.6,499.9,159,499.9,159z"/>
+</svg>
--- a/frontend/public/img/icon-listview.svg
+++ b/frontend/public/img/icon-listview.svg
@ -0,0 +1,122 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="2000"
+   height="2000"
+   viewBox="0 0 529.16666 529.16735"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
+   sodipodi:docname="Listview.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.42053519"
+     inkscape:cx="851.82064"
+     inkscape:cy="1105.7974"
+     inkscape:document-units="mm"
+     inkscape:current-layer="g873"
+     showgrid="false"
+     units="px"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1">
+    <sodipodi:guide
+       position="247.25932,291.92959"
+       orientation="1,0"
+       id="guide853"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="337.22901,167.98535"
+       orientation="0,1"
+       id="guide855"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="266.76325,305.4565"
+       orientation="0,1"
+       id="guide857"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="257.79774,279.50371"
+       orientation="0,1"
+       id="guide861"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="22.413775,336.67894"
+       orientation="1,0"
+       id="guide926"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="503.71355,217.50031"
+       orientation="1,0"
+       id="guide928"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Ebene 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,232.16736)">
+    <g
+       id="g873"
+       transform="matrix(1.3431799,0,0,1.3431799,-84.854433,26.13855)">
+      <rect
+         ry="7.445024"
+         rx="7.445024"
+         y="-121.34892"
+         x="79.944702"
+         height="70.107315"
+         width="358.24551"
+         id="rect815"
+         style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.64810181;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:1.29620369, 0.64810185;stroke-dashoffset:0;stroke-opacity:0.22508042;paint-order:markers fill stroke" />
+      <rect
+         ry="7.4450235"
+         rx="7.4450235"
+         y="-31.167784"
+         x="79.861153"
+         height="70.107315"
+         width="358.32907"
+         id="rect815-20"
+         style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.64817739;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:1.29635485, 0.64817743;stroke-dashoffset:0;stroke-opacity:0.22508042;paint-order:markers fill stroke" />
+      <rect
+         ry="7.4450235"
+         rx="7.4450231"
+         y="60.024326"
+         x="79.908524"
+         height="70.106117"
+         width="358.28171"
+         id="rect815-8"
+         style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.64812905;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:1.29625813, 0.64812907;stroke-dashoffset:0;stroke-opacity:0.22508042;paint-order:markers fill stroke" />
+    </g>
+  </g>
+</svg>
--- a/frontend/public/img/icon-play.svg
+++ b/frontend/public/img/icon-play.svg
@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1"
+	 id="svg1303" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 500"
+	 style="enable-background:new 0 0 500 500;" xml:space="preserve">
+<g>
+	<path d="M175.5,421.6c-4,0-8,0-12.1,0c-13.9-3.4-21-13-24.1-26.3c-1-4.5-1.5-9-1.5-13.6c0-87.7,0-175.4,0-263.1
+		c0-5.5,0.6-10.9,2.2-16.2c3.7-12.5,11-21.5,24.5-23.6c9-1.4,17.6,0.7,25.5,5c10.9,5.9,21.6,12.1,32.4,18.2
+		c66.6,38.2,133.2,76.4,199.8,114.6c7.1,4.1,13.7,8.7,18.8,15.4c8.7,11.5,8.7,25,0,36.5c-5,6.6-11.7,11.3-18.8,15.4
+		c-74,42.5-148.1,84.9-222.1,127.4C192.2,415.7,184.4,419.8,175.5,421.6z"/>
+</g>
+</svg>
--- a/frontend/public/img/icon-remove.svg
+++ b/frontend/public/img/icon-remove.svg
@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xmlns="http://www.w3.org/2000/svg">
+  <path d="M 408.514 358.563 L 303.835 255.003 L 408.441 149.115 C 424.1 133.406 424.1 107.662 408.441 91.953 C 392.783 76.245 367.12 76.245 351.463 91.953 L 246.857 197.841 L 142.323 91.881 C 126.665 76.172 101.002 76.172 85.344 91.881 C 69.613 107.662 69.613 133.334 85.272 149.115 L 189.805 255.003 L 84.401 359.291 C 68.743 375 68.743 400.744 84.401 416.453 C 100.06 432.161 125.722 432.161 141.381 416.453 L 246.784 312.165 L 351.39 415.726 C 367.048 431.434 392.711 431.434 408.369 415.726 C 424.172 400.017 424.172 374.345 408.514 358.563 Z" style="" transform="matrix(0.9999999999999999, 0, 0, 0.9999999999999999, 0, 0)"/>
+</svg>
--- a/frontend/public/img/icon-rescan.svg
+++ b/frontend/public/img/icon-rescan.svg
@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1"
+	 id="svg1303" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 500"
+	 style="enable-background:new 0 0 500 500;" xml:space="preserve">
+<sodipodi:namedview  bordercolor="#666666" borderopacity="1.0" id="base" inkscape:current-layer="layer1" inkscape:cx="125.63373" inkscape:cy="156.7016" inkscape:document-units="mm" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:window-height="1017" inkscape:window-maximized="1" inkscape:window-width="1920" inkscape:window-x="-8" inkscape:window-y="-8" inkscape:zoom="0.85859018" pagecolor="#ffffff" showgrid="false" units="px">
+	</sodipodi:namedview>
+<g>
+	<path d="M269,28.7c10.8,1.6,21.6,2.8,32.3,5.3c38.3,9.2,71.9,27.2,100.7,54.1c3.4,3.2,4.7,2.4,6.8-1.1c3.3-5.5,7.1-10.9,10.7-16.2
+		c4.8-7,11.3-9.7,18.5-7.6c6.8,1.9,11.5,8.2,11.5,16.5c-0.1,26.3,0.3,52.7-0.5,79c-0.4,12.5-0.1,25-0.2,37.6
+		c-0.1,14-11.1,21.3-23.9,15.6c-35.2-15.7-70.3-31.6-105.5-47.4c-7.7-3.5-11.8-10.1-10.8-16.9c1.1-7.8,6.9-13.2,15.6-14.4
+		c4-0.6,8-1.2,11.9-1.8c0.9-0.1,2.3,0.2,2.6-1.1c0.3-1.2-1-1.6-1.8-2.2c-12.2-8.9-25.5-15.7-39.8-20.3
+		c-72.7-23.2-148.9,9.9-181.6,78.9c-4.1,8.7-8.3,17-17.1,22.1c-13.7,8-30.1,6.6-42.2-3.8c-11.3-9.6-15.6-26.6-9.6-40.5
+		c15.7-36.9,39.4-67.7,71.6-91.8c29.8-22.4,63.2-36.3,100-41.9c4.8-0.7,9.7-1.3,14.5-2C244.8,28.7,256.9,28.7,269,28.7z"/>
+	<path d="M52.1,361.3c0.6-20,0.8-39,0.8-58c0-14,11.1-21.2,23.9-15.5c25.2,11.2,50.4,22.6,75.6,33.9c10.1,4.5,20.2,9,30.3,13.7
+		c6.4,2.9,10.5,7.8,10.5,15c0,6.4-3.2,11.2-9,14.2c-3.8,2-8.1,2-12.1,2.8c-2.1,0.4-4.3,0.6-6.4,1c-0.9,0.1-2.3-0.2-2.6,1.1
+		c-0.3,1.2,1,1.6,1.8,2.2c12.2,8.9,25.5,15.7,39.8,20.3c72.7,23.2,148.9-9.9,181.6-78.9c4.2-8.8,8.5-17.3,17.4-22.4
+		c13.6-7.7,29.8-6.3,41.8,4c11.3,9.6,15.6,26.6,9.7,40.5c-15.7,36.9-39.4,67.7-71.6,91.8c-29.7,22.3-62.9,36.5-99.6,41.8
+		c-57.8,8.3-110.9-4-159.1-36.9c-9.3-6.3-17.9-13.5-26.1-21.2c-2.1-2-3.3-2.1-4.9,0.5c-3.4,5.5-7.1,10.8-10.7,16.2
+		c-5.7,8.5-12.2,11.4-19.9,8.9c-7.3-2.3-11.1-8.6-11.1-18.5C52.1,398.6,52.1,379.4,52.1,361.3z"/>
+</g>
+</svg>
--- a/frontend/public/img/icon-search.svg
+++ b/frontend/public/img/icon-search.svg
@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1"
+	 id="svg1303" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 500"
+	 style="enable-background:new 0 0 500 500;" xml:space="preserve">
+<g>
+	<path d="M492.4,462.2c-1,2.5-1.8,5.1-3,7.6C478,495,448.2,501.9,427.2,484c-1.8-1.5-3.5-3.2-5.2-4.9
+		c-34.1-34.8-68.3-69.5-102.3-104.4c-3.3-3.4-5.6-3.6-9.5-1c-30.5,20.3-64.1,31.1-100.6,32c-60.1,1.5-110.4-20.8-151.1-65.6
+		c-28.2-31-45.1-67.8-49.5-109.8C1.6,161.2,23.6,102.8,74.3,56.1c28.7-26.4,62.7-42.4,101-47.9c52.7-7.6,101,4.5,143.9,36.5
+		c43.7,32.6,70,76.6,78.4,131c7.1,45.8-1.1,89.2-23.7,129.6c-3.7,6.6-3.8,6.6,1.5,11.9c33.3,34,66.6,68,100.1,101.9
+		c7.6,7.7,14.2,15.9,16.9,26.7C494.1,451.5,493.6,456.9,492.4,462.2z M335.2,205.9c0.5-72.8-58.3-134.2-131.9-134
+		C132.9,72,72,129.3,72,206c0,74.8,58.1,134.2,131.7,134.2C278.8,340.2,335.8,278.1,335.2,205.9z"/>
+</g>
+</svg>
--- a/frontend/public/img/icon-seen.svg
+++ b/frontend/public/img/icon-seen.svg
@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="500"
+   height="500"
+   viewBox="0 0 132.29197 132.29167"
+   version="1.1"
+   id="svg1303"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
+   sodipodi:docname="Icons_seen-02.svg">
+  <defs
+     id="defs1297" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.0316211"
+     inkscape:cx="67.654116"
+     inkscape:cy="175.0818"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata1300">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Ebene 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-164.70764)">
+    <path
+       style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers fill stroke"
+       d="M 9.4628906 4.9277344 C 6.9502624 4.9277344 4.9277344 6.6131716 4.9277344 8.7070312 L 4.9277344 491.29297 C 4.9277344 493.38683 6.9502624 495.07227 9.4628906 495.07227 L 490.53711 495.07227 C 493.04974 495.07227 495.07227 493.38683 495.07227 491.29297 L 495.07227 8.7070312 C 495.07227 6.6131716 493.04974 4.9277344 490.53711 4.9277344 L 9.4628906 4.9277344 z M 53.607422 49.070312 L 446.39258 49.070312 C 448.90521 49.070312 450.92969 50.757703 450.92969 52.851562 L 450.92969 447.14844 C 450.92969 449.2423 448.90521 450.92969 446.39258 450.92969 L 53.607422 450.92969 C 51.094794 450.92969 49.070313 449.2423 49.070312 447.14844 L 49.070312 52.851562 C 49.070312 50.757703 51.094794 49.070312 53.607422 49.070312 z M 394.99414 104.48242 C 392.62745 104.47692 390.27922 105.49181 388.64453 107.46484 L 212.35547 320.24414 L 111.90625 232.94141 C 108.46825 229.95328 103.29681 230.31403 100.30859 233.75195 L 73.150391 264.99805 C 70.162261 268.43605 70.524968 273.60942 73.962891 276.59766 L 212.05469 396.62109 C 214.1632 398.4537 216.92406 399.02085 219.43359 398.39648 C 221.58781 398.24033 223.67676 397.24363 225.16992 395.44141 L 249.54883 366.01758 L 250.8125 364.5625 C 251.04106 364.29953 251.24412 364.0237 251.43359 363.74219 L 433.18555 144.36914 C 436.09166 140.86148 435.60727 135.69713 432.09961 132.79102 L 400.2207 106.37891 C 398.68612 105.10748 396.8349 104.4867 394.99414 104.48242 z "
+       transform="matrix(0.26458394,0,0,0.26458394,0,164.70749)"
+       id="rect816" />
+  </g>
+</svg>
--- a/frontend/public/img/icon-sort.svg
+++ b/frontend/public/img/icon-sort.svg
@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1"
+	 id="svg1303" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 500"
+	 style="enable-background:new 0 0 500 500;" xml:space="preserve">
+<g>
+	<path d="M147.7,416.2c-8.7-3.4-11.9-8.1-11.9-17.5c0-53.5,0-107,0-160.5c0-9.3-4.2-15-12.6-16.7c-1.7-0.4-3.4-0.4-5.2-0.4
+		c-8.3,0-16.6,0-25,0c-7.3,0-12.9-3-16-9.5c-3.1-6.6-2.4-13,2.3-18.8c21.1-26.4,42.1-52.9,63.2-79.4c5.7-7.2,11.4-14.4,17.1-21.6
+		c3.2-4.1,7-7.4,12.5-7.9c6.6-0.6,11.4,2.3,15.3,7.3c5.7,7.4,11.5,14.9,17.3,22.3c20.5,26.4,40.9,52.8,61.5,79
+		c7.2,9.2,4.3,19.8-2,24.9c-3.2,2.6-6.8,3.6-10.8,3.6c-8.6,0-17.3,0-25.9,0c-10.6,0.1-16.2,5.6-16.2,16.2
+		c0,53.1-0.1,106.1,0.1,159.2c0,9.6-3.4,16.3-12.6,19.7C181.9,416.2,164.8,416.2,147.7,416.2z"/>
+</g>
+<g>
+	<path d="M369.5,83.8c8.7,3.4,11.9,8.1,11.9,17.5c0,53.5,0,106.9,0,160.4c0,9.3,4.2,15,12.6,16.7c1.7,0.3,3.4,0.4,5.2,0.4
+		c8.3,0,16.6,0,25,0c7.3,0,12.9,3,16,9.5c3.1,6.6,2.4,13-2.3,18.8c-21.1,26.4-42.1,52.9-63.2,79.3c-5.7,7.2-11.4,14.4-17.1,21.6
+		c-3.2,4.1-6.9,7.4-12.5,7.9c-6.6,0.6-11.4-2.3-15.3-7.3c-5.7-7.4-11.5-14.8-17.3-22.3c-20.5-26.4-40.8-52.8-61.5-79
+		c-7.2-9.2-4.3-19.8,2-24.9c3.2-2.6,6.8-3.6,10.8-3.6c8.6,0,17.3,0,25.9,0c10.6-0.1,16.2-5.6,16.2-16.2c0-53,0.1-106.1-0.1-159.1
+		c0-9.6,3.4-16.3,12.6-19.7C335.4,83.8,352.5,83.8,369.5,83.8z"/>
+</g>
+</svg>
--- a/frontend/public/img/icon-star-empty.svg
+++ b/frontend/public/img/icon-star-empty.svg
@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1"
+	 id="svg1303" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 500"
+	 style="enable-background:new 0 0 500 500;" xml:space="preserve">
+<g>
+	<path d="M492.6,214.8c-2.7,7.3-7.9,12.7-13.8,17.7c-32.6,28.4-65.1,57-97.7,85.5c-2.4,2.1-2.4,4.1-1.8,6.7
+		c9.9,43.5,19.8,87.1,29.7,130.6c3.8,16.8-4.6,30.8-20.6,34.1c-7.2,1.5-13.7-0.8-19.8-4.4c-37.7-22.5-75.4-45-113-67.7
+		c-4.2-2.6-7.2-2.5-11.4,0.1c-37.7,22.8-75.6,45.3-113.4,67.9c-17.6,10.5-37.4,1.6-40.9-18.2c-0.7-3.8,0-7.5,0.8-11.2
+		c9.8-43.4,19.7-86.8,29.6-130.2c0.8-3.7,0.4-5.9-2.6-8.5c-33.2-28.9-66.3-58.1-99.5-87c-4.9-4.3-8.5-9.3-10.9-15.2
+		c-1-4.4-1.4-8.8,0-13.3c4.9-13.7,14.9-19.5,29.3-20.4c22.5-1.4,44.9-4,67.4-6.1c19-1.7,38-3.6,57-5c6.3-0.5,10.3-2.2,13-8.8
+		c16.4-39.3,33.3-78.3,50-117.4c2.6-6.2,5.7-12,11.5-15.8c13.6-8.9,31.4-4.1,38.3,11.1c8.8,19.4,17,39.1,25.3,58.7
+		c9.4,22.1,18.9,44.1,28.2,66.2c1.4,3.3,3.3,4.9,6.9,5.2c15.9,1.3,31.7,2.8,47.6,4.3c23.1,2.1,46.2,4.2,69.2,6.4
+		c4.2,0.4,8.5,1.1,12.7,1.1c14.3,0.2,23.9,6.8,28.8,20.3C494,206,493.8,210.4,492.6,214.8z M50.8,211.9c-1.9,0.3-2.5,2.7-1.1,3.9
+		c0.1,0.1,0.2,0.2,0.3,0.3c16.9,14.8,33.7,29.6,50.6,44.4c14.2,12.5,28.5,25,42.7,37.5c8.8,7.7,11.7,17.1,9,28.6
+		c-8.4,36.3-16.6,72.6-24.8,108.9c-0.9,4.1-2.1,8.1-2.8,12.2c-0.3,2.1,2.1,3.6,3.8,2.4c0.4-0.3,0.8-0.5,1.1-0.8
+		c34.9-20.8,69.7-41.6,104.5-62.4c3.7-2.2,7.4-4,11.8-4.7c8.6-1.4,15.6,2.2,22.7,6.4c34.1,20.5,68.3,40.9,102.5,61.3
+		c1.2,0.7,2.6,2.6,4.1,1.3c1.1-1,0-2.7-0.3-4c-9-39.7-17.7-79.5-27-119.1c-3-12.8,0.1-22.8,9.9-31.3c24.3-21.1,48.5-42.4,72.7-63.6
+		c6.7-5.8,13.3-11.7,20.2-17.8c1.4-1.2,0.7-3.6-1.2-3.8c0,0,0,0,0,0c-17.9-1.6-35.8-3.3-53.7-4.8c-22.6-2-45.2-4.2-67.9-5.9
+		c-14.2-1.1-22.9-8-28.4-21.2c-15.4-37.2-31.5-74.1-47.3-111.1c-0.5-1.2-0.6-3.2-2.3-3.2s-1.8,2-2.3,3.2c-7.7,18-15.4,36-23.1,54
+		c-8.6,20.2-17.2,40.4-25.9,60.6c-4,9.2-10.6,15.6-20.7,16.7c-20.2,2.3-40.5,4-60.8,5.8c-19,1.7-38,3.2-57,5.1
+		C57.2,211,54.2,211.3,50.8,211.9z"/>
+</g>
+</svg>
--- a/frontend/public/img/icon-star-full.svg
+++ b/frontend/public/img/icon-star-full.svg
@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1"
+	 id="svg1303" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 500"
+	 style="enable-background:new 0 0 500 500;" xml:space="preserve">
+<sodipodi:namedview  bordercolor="#666666" borderopacity="1.0" id="base" inkscape:current-layer="layer1" inkscape:cx="61.891881" inkscape:cy="148.25167" inkscape:document-units="mm" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:window-height="1017" inkscape:window-maximized="1" inkscape:window-width="1920" inkscape:window-x="-8" inkscape:window-y="-8" inkscape:zoom="1.0105705" pagecolor="#ffffff" showgrid="false" units="px">
+	</sodipodi:namedview>
+<g>
+	<path d="M493.2,207.8c-2.7,7.3-7.9,12.7-13.8,17.7c-32.6,28.4-65.1,57-97.7,85.5c-2.4,2.1-2.4,4.1-1.8,6.7
+		c9.9,43.5,19.8,87.1,29.7,130.6c3.8,16.8-4.6,30.8-20.6,34.1c-7.2,1.5-13.7-0.8-19.8-4.4c-37.7-22.5-75.4-45-113-67.7
+		c-4.2-2.6-7.2-2.5-11.4,0.1c-37.7,22.8-75.6,45.3-113.4,67.9c-17.6,10.5-37.4,1.6-40.9-18.2c-0.7-3.8,0-7.5,0.8-11.2
+		c9.8-43.4,19.7-86.8,29.6-130.2c0.8-3.7,0.4-5.9-2.6-8.5C85.1,281.1,52,252,18.8,223c-4.9-4.3-8.5-9.3-10.9-15.2
+		c-1-4.4-1.4-8.8,0-13.3c4.9-13.7,14.9-19.5,29.3-20.4c22.5-1.4,44.9-4,67.4-6.1c19-1.7,38-3.6,57-5c6.3-0.5,10.3-2.2,13-8.8
+		c16.3-39.2,33.2-78.2,49.8-117.2c2.6-6.2,5.7-12,11.5-15.8c13.6-8.9,31.4-4.1,38.3,11.1c8.8,19.4,17,39.1,25.3,58.7
+		c9.4,22.1,18.9,44.1,28.2,66.2c1.4,3.3,3.3,4.9,6.9,5.2c15.9,1.3,31.7,2.8,47.6,4.3c23.1,2.1,46.2,4.2,69.2,6.4
+		c4.2,0.4,8.5,1.1,12.7,1.1c14.3,0.2,23.9,6.8,28.8,20.3C494.5,199,494.3,203.4,493.2,207.8z"/>
+</g>
+</svg>
--- a/frontend/public/img/icon-star-half.svg
+++ b/frontend/public/img/icon-star-half.svg
@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1"
+	 id="svg1303" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:cc="http://creativecommons.org/ns#"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 500"
+	 style="enable-background:new 0 0 500 500;" xml:space="preserve">
+<g>
+	<path d="M7.5,207.8c2.8,7.3,8,12.6,13.8,17.7C54,253.9,86.4,282.6,119,311c2.4,2.1,2.4,4.1,1.8,6.7c-9.9,43.5-19.8,87.1-29.7,130.6
+		c-3.9,16.9,4.6,30.9,20.6,34.1c7.2,1.5,13.7-0.7,19.8-4.4c37.7-22.6,75.4-45,112.9-68c1.9-1.3,3.7-1.9,5.4-1.9v0.3
+		c1.9,0,3.7,0.6,5.8,1.9c37.7,22.8,75.5,45.4,113.4,67.9c17.6,10.5,37.4,1.6,40.9-18.2c0.7-3.8,0-7.5-0.8-11.2
+		c-9.8-43.4-19.6-86.8-29.6-130.2c-0.9-3.6-0.4-5.9,2.6-8.5c33.3-28.9,66.3-58,99.5-87c4.9-4.3,8.5-9.3,10.9-15.2
+		c1-4.5,1.4-8.9,0-13.3c-5-13.7-14.9-19.5-29.3-20.4c-22.5-1.4-44.9-4.1-67.4-6.1c-19-1.8-38-3.6-57-5c-6.3-0.5-10.2-2.2-13-8.8
+		c-16.2-39.2-33.2-78.1-49.8-117.2c-2.6-6.2-5.7-12-11.5-15.8c-4.6-3-9.5-4.5-14.5-4.5v-0.1c-9.8,0-19.2,5.5-23.8,15.6
+		c-8.8,19.4-16.9,39.1-25.3,58.7c-9.5,22-18.9,44.1-28.2,66.2c-1.4,3.3-3.3,4.9-6.9,5.2c-15.9,1.3-31.7,2.8-47.6,4.3
+		c-23,2.2-46.1,4.3-69.2,6.4c-4.2,0.4-8.5,1-12.7,1.1C22,174.4,12.4,181,7.5,194.5C6.1,199,6.3,203.4,7.5,207.8z M250,374.9V58.2
+		c1.6,0.1,1.7,2,2.2,3.2c7.7,18,15.4,36,23.1,54c8.7,20.2,17.3,40.4,25.9,60.6c3.9,9.2,10.6,15.6,20.7,16.7
+		c20.3,2.3,40.5,4,60.8,5.8c19,1.7,38,3.1,57,5.1l6,0.6c3.3,0.3,4.6,4.3,2.1,6.5c-15.6,13.8-33.6,29.7-48.4,42.7
+		c-14.2,12.5-28.5,25-42.7,37.5c-8.7,7.7-11.6,17.2-9,28.6c8.4,36.2,16.6,72.6,24.8,108.9c0.9,4,2.1,8,2.8,12.1
+		c0.3,2.2-2.1,3.7-3.9,2.5c-0.4-0.3-0.7-0.5-1.1-0.7c-34.8-20.8-69.7-41.6-104.5-62.4c-3.7-2.2-7.5-4-11.8-4.7
+		C252.8,375,251.6,374.9,250,374.9L250,374.9z"/>
+</g>
+</svg>
--- a/frontend/public/img/icon-stop.svg
+++ b/frontend/public/img/icon-stop.svg
@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="500"
+   height="500"
+   viewBox="0 0 132.29197 132.29167"
+   version="1.1"
+   id="svg1303"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
+   sodipodi:docname="Icons_stop.svg">
+  <defs
+     id="defs1297" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.0105705"
+     inkscape:cx="43.182711"
+     inkscape:cy="168.09972"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata1300">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Ebene 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-164.70764)">
+    <rect
+       style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers fill stroke"
+       id="rect836"
+       width="118.86465"
+       height="118.86465"
+       x="6.7136617"
+       y="171.42116"
+       rx="10.00003"
+       ry="10.00003" />
+  </g>
+</svg>
--- a/frontend/public/img/icon-substract.svg
+++ b/frontend/public/img/icon-substract.svg
@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1"
+	 id="svg1303" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 475 111.2"
+	 style="enable-background:new 0 0 475 111.2;" xml:space="preserve">
+<sodipodi:namedview  bordercolor="#666666" borderopacity="1.0" id="base" inkscape:current-layer="layer1" inkscape:cx="-97.380081" inkscape:cy="261.09215" inkscape:deskcolor="#d1d1d1" inkscape:document-units="mm" inkscape:guide-bbox="true" inkscape:pagecheckerboard="0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:showpageshadow="2" inkscape:window-height="1017" inkscape:window-maximized="1" inkscape:window-width="1920" inkscape:window-x="-8" inkscape:window-y="-8" inkscape:zoom="0.85859018" pagecolor="#ffffff" showgrid="false" showguides="true" units="px">
+	<sodipodi:guide  id="guide1072" inkscape:locked="false" orientation="1,0" position="-225.18364,87.524084"></sodipodi:guide>
+</sodipodi:namedview>
+<path d="M181.9,0H55.6C25,0,0,25,0,55.6l0,0c0,30.6,25,55.6,55.6,55.6h126.3h111.2h126.3c30.6,0,55.6-25,55.6-55.6l0,0
+	C475,25,450,0,419.4,0H293.1H181.9z"/>
+</svg>
--- a/frontend/public/img/icon-thumb.svg
+++ b/frontend/public/img/icon-thumb.svg
@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1"
+	 id="svg1303" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 500"
+	 style="enable-background:new 0 0 500 500;" xml:space="preserve">
+<sodipodi:namedview  bordercolor="#666666" borderopacity="1.0" id="base" inkscape:current-layer="layer1" inkscape:cx="35.718548" inkscape:cy="203.39339" inkscape:document-units="mm" inkscape:guide-bbox="true" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:window-height="1009" inkscape:window-maximized="1" inkscape:window-width="1920" inkscape:window-x="-8" inkscape:window-y="-8" inkscape:zoom="1.5046797" pagecolor="#ffffff" showgrid="false" showguides="true" units="px">
+	<sodipodi:guide  id="guide816" inkscape:locked="false" orientation="0,1" position="80.99058,65.965029"></sodipodi:guide>
+	<sodipodi:guide  id="guide818" inkscape:locked="false" orientation="1,0" position="65.965178,49.107299"></sodipodi:guide>
+</sodipodi:namedview>
+<g>
+	<path d="M142.3,330.2c0-38.6,0.1-77.1,0-115.7c-0.1-16.2,4.1-31,12.8-44.7c29.5-46.9,58.7-94,88.1-141C256.7,7.3,281-3.8,304.5,0.5
+		c25.2,4.7,43.6,22.6,48.9,47.9c2.4,11.8,0.8,23.2-3.4,34.3c-12.5,33.1-24.8,66.3-37.2,99.4c-2.7,7.1-2.6,7.1,5.2,7.1
+		c40.9,0,81.9-0.2,122.8,0.1c21.5,0.1,37.7,9.5,46.8,29.6c4.4,9.8,4.4,20,2.7,30.5c-8.1,52.1-15.9,104.3-24.2,156.4
+		c-2.6,16.4-3.3,33.3-9.6,48.9c-10.7,26.5-36.5,44.1-65,44.2c-66.5,0.1-133,0.1-199.5,0c-29,0-49.6-20.7-49.7-49.9
+		C142.3,409.6,142.3,369.9,142.3,330.2z"/>
+	<path d="M0,338.5c0-37.3-0.1-74.5,0-111.8c0.1-23.5,14.9-43.1,37.5-47.5c15.4-3,31.5-3.1,46.9,0.4c21.7,5,35.5,24,35.6,49.1
+		c0.3,73.2,0.3,146.5,0,219.7c-0.1,26.4-15.1,45.5-38.9,49.7c-13.8,2.5-28.2,2.4-42.1,0.1c-23.3-3.9-39-23.9-39.1-47.9
+		C-0.1,413,0,375.8,0,338.5z"/>
+</g>
+</svg>
--- a/frontend/public/img/icon-unseen.svg
+++ b/frontend/public/img/icon-unseen.svg
@ -0,0 +1,65 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="500"
+   height="500"
+   viewBox="0 0 132.29197 132.29167"
+   version="1.1"
+   id="svg1303"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
+   sodipodi:docname="icon-unseen.svg">
+  <defs
+     id="defs1297" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.72946627"
+     inkscape:cx="216.49148"
+     inkscape:cy="168.6324"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata1300">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Ebene 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-164.70764)">
+    <path
+       style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers fill stroke"
+       d="m 9.6367188,5.1015625 c -2.5126284,0 -4.5351563,1.6854372 -4.5351563,3.7792969 V 491.11914 c 0,2.09386 2.022528,3.7793 4.5351563,3.7793 H 490.36328 c 2.51263,0 4.53516,-1.68544 4.53516,-3.7793 V 8.8808594 c 0,-2.0938597 -2.02253,-3.7792969 -4.53516,-3.7792969 z M 53.748047,49.212891 H 446.25195 c 2.51263,0 4.53516,1.685437 4.53516,3.779297 V 447.00781 c 0,2.09386 -2.02253,3.7793 -4.53516,3.7793 H 53.748047 c -2.512628,0 -4.535156,-1.68544 -4.535156,-3.7793 V 52.992188 c 0,-2.09386 2.022528,-3.779297 4.535156,-3.779297 z"
+       transform="matrix(0.26458394,0,0,0.26458394,0,164.70749)"
+       id="rect816"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ssssssssssssssssss" />
+  </g>
+</svg>
--- a/frontend/public/img/logo-tube-archivist-dark.png
+++ b/frontend/public/img/logo-tube-archivist-dark.png
--- a/frontend/public/img/logo-tube-archivist-light.png
+++ b/frontend/public/img/logo-tube-archivist-light.png
--- a/frontend/src/api/actions/createCustomPlaylist.ts
+++ b/frontend/src/api/actions/createCustomPlaylist.ts
@ -0,0 +1,30 @@
+import defaultHeaders from '../../configuration/defaultHeaders';
+import getApiUrl from '../../configuration/getApiUrl';
+import getFetchCredentials from '../../configuration/getFetchCredentials';
+import getCookie from '../../functions/getCookie';
+import isDevEnvironment from '../../functions/isDevEnvironment';
+
+const createCustomPlaylist = async (playlistId: string) => {
+  const apiUrl = getApiUrl();
+  const csrfCookie = getCookie('csrftoken');
+
+  const response = await fetch(`${apiUrl}/api/playlist/`, {
+    method: 'POST',
+    headers: {
+      ...defaultHeaders,
+      'X-CSRFToken': csrfCookie || '',
+    },
+    credentials: getFetchCredentials(),
+
+    body: JSON.stringify({ data: { create: playlistId } }),
+  });
+
+  const customPlaylist = await response.json();
+  if (isDevEnvironment()) {
+    console.log('createCustomPlaylist', customPlaylist);
+  }
+
+  return customPlaylist;
+};
+
+export default createCustomPlaylist;
--- a/frontend/src/api/actions/deleteApiToken.ts
+++ b/frontend/src/api/actions/deleteApiToken.ts
@ -0,0 +1,28 @@
+import defaultHeaders from '../../configuration/defaultHeaders';
+import getApiUrl from '../../configuration/getApiUrl';
+import getFetchCredentials from '../../configuration/getFetchCredentials';
+import getCookie from '../../functions/getCookie';
+import isDevEnvironment from '../../functions/isDevEnvironment';
+
+const deleteApiToken = async () => {
+  const apiUrl = getApiUrl();
+  const csrfCookie = getCookie('csrftoken');
+
+  const response = await fetch(`${apiUrl}/api/appsettings/token/`, {
+    method: 'DELETE',
+    headers: {
+      ...defaultHeaders,
+      'X-CSRFToken': csrfCookie || '',
+    },
+    credentials: getFetchCredentials(),
+  });
+
+  const resetToken = await response.json();
+  if (isDevEnvironment()) {
+    console.log('deleteApiToken', resetToken);
+  }
+
+  return resetToken;
+};
+
+export default deleteApiToken;
--- a/frontend/src/api/actions/deleteChannel.ts
+++ b/frontend/src/api/actions/deleteChannel.ts
@ -0,0 +1,29 @@
+import defaultHeaders from '../../configuration/defaultHeaders';
+import getApiUrl from '../../configuration/getApiUrl';
+import getFetchCredentials from '../../configuration/getFetchCredentials';
+import getCookie from '../../functions/getCookie';
+import isDevEnvironment from '../../functions/isDevEnvironment';
+
+const deleteChannel = async (channelId: string) => {
+  const apiUrl = getApiUrl();
+  const csrfCookie = getCookie('csrftoken');
+
+  const response = await fetch(`${apiUrl}/api/channel/${channelId}/`, {
+    method: 'DELETE',
+    headers: {
+      ...defaultHeaders,
+      'X-CSRFToken': csrfCookie || '',
+    },
+    credentials: getFetchCredentials(),
+  });
+
+  const channelDeleted = await response.json();
+
+  if (isDevEnvironment()) {
+    console.log('deleteChannel', channelDeleted);
+  }
+
+  return channelDeleted;
+};
+
+export default deleteChannel;
--- a/frontend/src/api/actions/deleteDownloadById.ts
+++ b/frontend/src/api/actions/deleteDownloadById.ts
@ -0,0 +1,29 @@
+import defaultHeaders from '../../configuration/defaultHeaders';
+import getApiUrl from '../../configuration/getApiUrl';
+import getFetchCredentials from '../../configuration/getFetchCredentials';
+import getCookie from '../../functions/getCookie';
+import isDevEnvironment from '../../functions/isDevEnvironment';
+
+const deleteDownloadById = async (youtubeId: string) => {
+  const apiUrl = getApiUrl();
+  const csrfCookie = getCookie('csrftoken');
+
+  const response = await fetch(`${apiUrl}/api/download/${youtubeId}/`, {
+    method: 'DELETE',
+    headers: {
+      ...defaultHeaders,
+      'X-CSRFToken': csrfCookie || '',
+    },
+    credentials: getFetchCredentials(),
+  });
+
+  const downloadState = await response.json();
+
+  if (isDevEnvironment()) {
+    console.log('deleteDownloadById', downloadState);
+  }
+
+  return downloadState;
+};
+
+export default deleteDownloadById;
--- a/frontend/src/api/actions/deleteDownloadQueueByFilter.ts
+++ b/frontend/src/api/actions/deleteDownloadQueueByFilter.ts
@ -0,0 +1,37 @@
+import defaultHeaders from '../../configuration/defaultHeaders';
+import getApiUrl from '../../configuration/getApiUrl';
+import getFetchCredentials from '../../configuration/getFetchCredentials';
+import getCookie from '../../functions/getCookie';
+import isDevEnvironment from '../../functions/isDevEnvironment';
+
+type FilterType = 'ignore' | 'pending';
+
+const deleteDownloadQueueByFilter = async (filter: FilterType) => {
+  const apiUrl = getApiUrl();
+  const csrfCookie = getCookie('csrftoken');
+
+  const searchParams = new URLSearchParams();
+
+  if (filter) {
+    searchParams.append('filter', filter);
+  }
+
+  const response = await fetch(`${apiUrl}/api/download/?${searchParams.toString()}`, {
+    method: 'DELETE',
+    headers: {
+      ...defaultHeaders,
+      'X-CSRFToken': csrfCookie || '',
+    },
+    credentials: getFetchCredentials(),
+  });
+
+  const downloadState = await response.json();
+
+  if (isDevEnvironment()) {
+    console.log('deleteDownloadQueueByFilter', downloadState);
+  }
+
+  return downloadState;
+};
+
+export default deleteDownloadQueueByFilter;
--- a/frontend/src/api/actions/deletePlaylist.ts
+++ b/frontend/src/api/actions/deletePlaylist.ts
@ -0,0 +1,34 @@
+import defaultHeaders from '../../configuration/defaultHeaders';
+import getApiUrl from '../../configuration/getApiUrl';
+import getFetchCredentials from '../../configuration/getFetchCredentials';
+import getCookie from '../../functions/getCookie';
+import isDevEnvironment from '../../functions/isDevEnvironment';
+
+const deletePlaylist = async (playlistId: string, allVideos = false) => {
+  const apiUrl = getApiUrl();
+  const csrfCookie = getCookie('csrftoken');
+
+  let params = '';
+  if (allVideos) {
+    params = '?delete-videos=true';
+  }
+
+  const response = await fetch(`${apiUrl}/api/playlist/${playlistId}/${params}`, {
+    method: 'DELETE',
+    headers: {
+      ...defaultHeaders,
+      'X-CSRFToken': csrfCookie || '',
+    },
+    credentials: getFetchCredentials(),
+  });
+
+  const playlistDeleted = await response.json();
+
+  if (isDevEnvironment()) {
+    console.log('deletePlaylist', playlistDeleted);
+  }
+
+  return playlistDeleted;
+};
+
+export default deletePlaylist;
--- a/frontend/src/api/actions/deleteVideo.ts
+++ b/frontend/src/api/actions/deleteVideo.ts
@ -0,0 +1,29 @@
+import defaultHeaders from '../../configuration/defaultHeaders';
+import getApiUrl from '../../configuration/getApiUrl';
+import getFetchCredentials from '../../configuration/getFetchCredentials';
+import getCookie from '../../functions/getCookie';
+import isDevEnvironment from '../../functions/isDevEnvironment';
+
+const deleteVideo = async (videoId: string) => {
+  const apiUrl = getApiUrl();
+  const csrfCookie = getCookie('csrftoken');
+
+  const response = await fetch(`${apiUrl}/api/video/${videoId}/`, {
+    method: 'DELETE',
+    headers: {
+      ...defaultHeaders,
+      'X-CSRFToken': csrfCookie || '',
+    },
+    credentials: getFetchCredentials(),
+  });
+
+  const videoDeleted = await response.json();
+
+  if (isDevEnvironment()) {
+    console.log('deleteVideo', videoDeleted);
+  }
+
+  return videoDeleted;
+};
+
+export default deleteVideo;
--- a/frontend/src/api/actions/deleteVideoProgressById.ts
+++ b/frontend/src/api/actions/deleteVideoProgressById.ts
@ -0,0 +1,29 @@
+import defaultHeaders from '../../configuration/defaultHeaders';
+import getApiUrl from '../../configuration/getApiUrl';
+import getFetchCredentials from '../../configuration/getFetchCredentials';
+import getCookie from '../../functions/getCookie';
+import isDevEnvironment from '../../functions/isDevEnvironment';
+
+const deleteVideoProgressById = async (youtubeId: string) => {
+  const apiUrl = getApiUrl();
+  const csrfCookie = getCookie('csrftoken');
+
+  const response = await fetch(`${apiUrl}/api/video/${youtubeId}/progress/`, {
+    method: 'DELETE',
+    headers: {
+      ...defaultHeaders,
+      'X-CSRFToken': csrfCookie || '',
+    },
+    credentials: getFetchCredentials(),
+  });
+
+  const watchedState = await response.json();
+
+  if (isDevEnvironment()) {
+    console.log('deleteVideoProgressById', watchedState);
+  }
+
+  return watchedState;
+};
+
+export default deleteVideoProgressById;
--- a/frontend/src/api/actions/queueBackup.ts
+++ b/frontend/src/api/actions/queueBackup.ts
@ -0,0 +1,29 @@
+import defaultHeaders from '../../configuration/defaultHeaders';
+import getApiUrl from '../../configuration/getApiUrl';
+import getFetchCredentials from '../../configuration/getFetchCredentials';
+import getCookie from '../../functions/getCookie';
+import isDevEnvironment from '../../functions/isDevEnvironment';
+
+const queueBackup = async () => {
+  const apiUrl = getApiUrl();
+  const csrfCookie = getCookie('csrftoken');
+
+  const response = await fetch(`${apiUrl}/api/appsettings/backup/`, {
+    method: 'POST',
+    headers: {
+      ...defaultHeaders,
+      'X-CSRFToken': csrfCookie || '',
+    },
+    credentials: getFetchCredentials(),
+  });
+
+  const backupQueued = await response.json();
+
+  if (isDevEnvironment()) {
+    console.log('queueBackup', backupQueued);
+  }
+
+  return backupQueued;
+};
+
+export default queueBackup;
--- a/frontend/src/api/actions/queueReindex.ts
+++ b/frontend/src/api/actions/queueReindex.ts
@ -0,0 +1,48 @@
+import defaultHeaders from '../../configuration/defaultHeaders';
+import getApiUrl from '../../configuration/getApiUrl';
+import getFetchCredentials from '../../configuration/getFetchCredentials';
+import getCookie from '../../functions/getCookie';
+import isDevEnvironment from '../../functions/isDevEnvironment';
+
+export type ReindexType = 'channel' | 'video' | 'playlist';
+
+export const ReindexTypeEnum = {
+  channel: 'channel',
+  video: 'video',
+  playlist: 'playlist',
+};
+
+const queueReindex = async (id: string, type: ReindexType, reindexVideos = false) => {
+  const apiUrl = getApiUrl();
+  const csrfCookie = getCookie('csrftoken');
+
+  let params = '';
+  if (reindexVideos) {
+    params = '?extract_videos=true';
+  }
+
+  const body = JSON.stringify({
+    [type]: id,
+  });
+
+  const response = await fetch(`${apiUrl}/api/refresh/${params}`, {
+    method: 'POST',
+    headers: {
+      ...defaultHeaders,
+      'X-CSRFToken': csrfCookie || '',
+    },
+    credentials: getFetchCredentials(),
+
+    body,
+  });
+
+  const channelDeleted = await response.json();
+
+  if (isDevEnvironment()) {
+    console.log('queueReindex', channelDeleted);
+  }
+
+  return channelDeleted;
+};
+
+export default queueReindex;
--- a/frontend/src/api/actions/queueSnapshot.ts
+++ b/frontend/src/api/actions/queueSnapshot.ts
@ -0,0 +1,29 @@
+import defaultHeaders from '../../configuration/defaultHeaders';
+import getApiUrl from '../../configuration/getApiUrl';
+import getFetchCredentials from '../../configuration/getFetchCredentials';
+import getCookie from '../../functions/getCookie';
+import isDevEnvironment from '../../functions/isDevEnvironment';
+
+const queueSnapshot = async () => {
+  const apiUrl = getApiUrl();
+  const csrfCookie = getCookie('csrftoken');
+
+  const response = await fetch(`${apiUrl}/api/appsettings/snapshot/`, {
+    method: 'POST',
+    headers: {
+      ...defaultHeaders,
+      'X-CSRFToken': csrfCookie || '',
+    },
+    credentials: getFetchCredentials(),
+  });
+
+  const snapshotQueued = await response.json();
+
+  if (isDevEnvironment()) {
+    console.log('queueSnapshot', snapshotQueued);
+  }
+
+  return snapshotQueued;
+};
+
+export default queueSnapshot;
--- a/frontend/src/api/actions/restoreBackup.ts
+++ b/frontend/src/api/actions/restoreBackup.ts
@ -0,0 +1,29 @@
+import defaultHeaders from '../../configuration/defaultHeaders';
+import getApiUrl from '../../configuration/getApiUrl';
+import getFetchCredentials from '../../configuration/getFetchCredentials';
+import getCookie from '../../functions/getCookie';
+import isDevEnvironment from '../../functions/isDevEnvironment';
+
+const restoreBackup = async (fileName: string) => {
+  const apiUrl = getApiUrl();
+  const csrfCookie = getCookie('csrftoken');
+
+  const response = await fetch(`${apiUrl}/api/appsettings/backup/${fileName}/`, {
+    method: 'POST',
+    headers: {
+      ...defaultHeaders,
+      'X-CSRFToken': csrfCookie || '',
+    },
+    credentials: getFetchCredentials(),
+  });
+
+  const backupRestored = await response.json();
+
+  if (isDevEnvironment()) {
+    console.log('restoreBackup', backupRestored);
+  }
+
+  return backupRestored;
+};
+
+export default restoreBackup;
--- a/frontend/src/api/actions/restoreSnapshot.ts
+++ b/frontend/src/api/actions/restoreSnapshot.ts
@ -0,0 +1,29 @@
+import defaultHeaders from '../../configuration/defaultHeaders';
+import getApiUrl from '../../configuration/getApiUrl';
+import getFetchCredentials from '../../configuration/getFetchCredentials';
+import getCookie from '../../functions/getCookie';
+import isDevEnvironment from '../../functions/isDevEnvironment';
+
+const restoreSnapshot = async (snapshotId: string) => {
+  const apiUrl = getApiUrl();
+  const csrfCookie = getCookie('csrftoken');
+
+  const response = await fetch(`${apiUrl}/api/appsettings/snapshot/${snapshotId}/`, {
+    method: 'POST',
+    headers: {
+      ...defaultHeaders,
+      'X-CSRFToken': csrfCookie || '',
+    },
+    credentials: getFetchCredentials(),
+  });
+
+  const backupRestored = await response.json();
+
+  if (isDevEnvironment()) {
+    console.log('restoreSnapshot', backupRestored);
+  }
+
+  return backupRestored;
+};
+
+export default restoreSnapshot;
--- a/frontend/src/api/actions/signIn.ts
+++ b/frontend/src/api/actions/signIn.ts
@ -0,0 +1,39 @@
+import defaultHeaders from '../../configuration/defaultHeaders';
+import getApiUrl from '../../configuration/getApiUrl';
+import getFetchCredentials from '../../configuration/getFetchCredentials';
+import getCookie from '../../functions/getCookie';
+
+export type LoginResponseType = {
+  token?: string;
+  user_id: number;
+  is_superuser: boolean;
+  is_staff: boolean;
+  user_groups: [];
+};
+
+const signIn = async (username: string, password: string, saveLogin: boolean) => {
+  const apiUrl = getApiUrl();
+  const csrfCookie = getCookie('csrftoken');
+
+  const response = await fetch(`${apiUrl}/api/user/login/`, {
+    method: 'POST',
+    headers: {
+      ...defaultHeaders,
+      'X-CSRFToken': csrfCookie || '',
+    },
+    credentials: getFetchCredentials(),
+    body: JSON.stringify({
+      username,
+      password,
+      remember_me: saveLogin ? 'on' : 'off',
+    }),
+  });
+
+  if (response.status === 403) {
+    console.log('Might be already logged in.', await response.json());
+  }
+
+  return response;
+};
+
+export default signIn;
--- a/frontend/src/api/actions/stopTaskByName.ts
+++ b/frontend/src/api/actions/stopTaskByName.ts
@ -0,0 +1,27 @@
+import defaultHeaders from '../../configuration/defaultHeaders';
+import getApiUrl from '../../configuration/getApiUrl';
+import getFetchCredentials from '../../configuration/getFetchCredentials';
+import getCookie from '../../functions/getCookie';
+
+const stopTaskByName = async (taskId: string) => {
+  const apiUrl = getApiUrl();
+  const csrfCookie = getCookie('csrftoken');
+
+  const response = await fetch(`${apiUrl}/api/task/by-id/${taskId}/`, {
+    method: 'POST',
+    headers: {
+      ...defaultHeaders,
+      'X-CSRFToken': csrfCookie || '',
+    },
+    credentials: getFetchCredentials(),
+
+    body: JSON.stringify({ command: 'stop' }),
+  });
+
+  const downloadQueueState = await response.json();
+  console.log('stopTaskByName', downloadQueueState);
+
+  return downloadQueueState;
+};
+
+export default stopTaskByName;
--- a/frontend/src/api/actions/updateAppsettingsConfig.ts
+++ b/frontend/src/api/actions/updateAppsettingsConfig.ts
@ -0,0 +1,27 @@
+import defaultHeaders from '../../configuration/defaultHeaders';
+import getApiUrl from '../../configuration/getApiUrl';
+import getFetchCredentials from '../../configuration/getFetchCredentials';
+import getCookie from '../../functions/getCookie';
+import { AppSettingsConfigType } from '../loader/loadAppsettingsConfig';
+
+const updateAppsettingsConfig = async (config: AppSettingsConfigType) => {
+  const apiUrl = getApiUrl();
+  const csrfCookie = getCookie('csrftoken');
+
+  const response = await fetch(`${apiUrl}/api/appsettings/config/`, {
+    method: 'POST',
+    headers: {
+      ...defaultHeaders,
+      'X-CSRFToken': csrfCookie || '',
+    },
+    credentials: getFetchCredentials(),
+    body: JSON.stringify(config),
+  });
+
+  const appSettingsConfig = await response.json();
+  console.log('updateAppsettingsConfig', appSettingsConfig);
+
+  return appSettingsConfig;
+};
+
+export default updateAppsettingsConfig;
--- a/frontend/src/api/actions/updateChannelSubscription.ts
+++ b/frontend/src/api/actions/updateChannelSubscription.ts
@ -0,0 +1,29 @@
+import defaultHeaders from '../../configuration/defaultHeaders';
+import getApiUrl from '../../configuration/getApiUrl';
+import getFetchCredentials from '../../configuration/getFetchCredentials';
+import getCookie from '../../functions/getCookie';
+
+const updateChannelSubscription = async (channelId: string, status: boolean) => {
+  const apiUrl = getApiUrl();
+  const csrfCookie = getCookie('csrftoken');
+
+  const response = await fetch(`${apiUrl}/api/channel/`, {
+    method: 'POST',
+    headers: {
+      ...defaultHeaders,
+      'X-CSRFToken': csrfCookie || '',
+    },
+    credentials: getFetchCredentials(),
+
+    body: JSON.stringify({
+      data: [{ channel_id: channelId, channel_subscribed: status }],
+    }),
+  });
+
+  const channelSubscription = await response.json();
+  console.log('updateChannelSubscription', channelSubscription);
+
+  return channelSubscription;
+};
+
+export default updateChannelSubscription;
--- a/frontend/src/api/actions/updateCookie.ts
+++ b/frontend/src/api/actions/updateCookie.ts
@ -0,0 +1,32 @@
+import defaultHeaders from '../../configuration/defaultHeaders';
+import getApiUrl from '../../configuration/getApiUrl';
+import getFetchCredentials from '../../configuration/getFetchCredentials';
+import getCookie from '../../functions/getCookie';
+
+export type ValidatedCookieType = {
+  cookie_enabled: boolean;
+  status: boolean;
+  validated: number;
+  validated_str: string;
+};
+
+const updateCookie = async (): Promise<ValidatedCookieType> => {
+  const apiUrl = getApiUrl();
+  const csrfCookie = getCookie('csrftoken');
+
+  const response = await fetch(`${apiUrl}/api/appsettings/cookie/`, {
+    method: 'POST',
+    headers: {
+      ...defaultHeaders,
+      'X-CSRFToken': csrfCookie || '',
+    },
+    credentials: getFetchCredentials(),
+  });
+
+  const validatedCookie = await response.json();
+  console.log('updateCookie', validatedCookie);
+
+  return validatedCookie;
+};
+
+export default updateCookie;
--- a/frontend/src/api/actions/updateCustomPlaylist.ts
+++ b/frontend/src/api/actions/updateCustomPlaylist.ts
@ -0,0 +1,33 @@
+import defaultHeaders from '../../configuration/defaultHeaders';
+import getApiUrl from '../../configuration/getApiUrl';
+import getFetchCredentials from '../../configuration/getFetchCredentials';
+import getCookie from '../../functions/getCookie';
+
+type CustomPlaylistActionType = 'create' | 'up' | 'down' | 'top' | 'bottom' | 'remove';
+
+const updateCustomPlaylist = async (
+  action: CustomPlaylistActionType,
+  playlistId: string,
+  videoId: string,
+) => {
+  const apiUrl = getApiUrl();
+  const csrfCookie = getCookie('csrftoken');
+
+  const response = await fetch(`${apiUrl}/api/playlist/${playlistId}/`, {
+    method: 'POST',
+    headers: {
+      ...defaultHeaders,
+      'X-CSRFToken': csrfCookie || '',
+    },
+    credentials: getFetchCredentials(),
+
+    body: JSON.stringify({ action, video_id: videoId }),
+  });
+
+  const customPlaylist = await response.json();
+  console.log('updateCustomPlaylist', action, customPlaylist);
+
+  return customPlaylist;
+};
+
+export default updateCustomPlaylist;
--- a/frontend/src/api/actions/updateDownloadQueue.ts
+++ b/frontend/src/api/actions/updateDownloadQueue.ts
@ -0,0 +1,34 @@
+import defaultHeaders from '../../configuration/defaultHeaders';
+import getApiUrl from '../../configuration/getApiUrl';
+import getFetchCredentials from '../../configuration/getFetchCredentials';
+import getCookie from '../../functions/getCookie';
+
+const updateDownloadQueue = async (download: string, autostart: boolean) => {
+  const apiUrl = getApiUrl();
+  const csrfCookie = getCookie('csrftoken');
+
+  let params = '';
+  if (autostart) {
+    params = '?autostart=true';
+  }
+
+  const response = await fetch(`${apiUrl}/api/download/${params}`, {
+    method: 'POST',
+    headers: {
+      ...defaultHeaders,
+      'X-CSRFToken': csrfCookie || '',
+    },
+    credentials: getFetchCredentials(),
+
+    body: JSON.stringify({
+      data: [{ youtube_id: download, status: 'pending' }],
+    }),
+  });
+
+  const downloadState = await response.json();
+  console.log('updateDownloadQueue', downloadState);
+
+  return downloadState;
+};
+
+export default updateDownloadQueue;
--- a/frontend/src/api/actions/updateDownloadQueueStatusById.ts
+++ b/frontend/src/api/actions/updateDownloadQueueStatusById.ts
@ -0,0 +1,31 @@
+import defaultHeaders from '../../configuration/defaultHeaders';
+import getApiUrl from '../../configuration/getApiUrl';
+import getFetchCredentials from '../../configuration/getFetchCredentials';
+import getCookie from '../../functions/getCookie';
+
+export type DownloadQueueStatus = 'ignore' | 'pending' | 'priority';
+
+const updateDownloadQueueStatusById = async (youtubeId: string, status: DownloadQueueStatus) => {
+  const apiUrl = getApiUrl();
+  const csrfCookie = getCookie('csrftoken');
+
+  const response = await fetch(`${apiUrl}/api/download/${youtubeId}/`, {
+    method: 'POST',
+    headers: {
+      ...defaultHeaders,
+      'X-CSRFToken': csrfCookie || '',
+    },
+    credentials: getFetchCredentials(),
+
+    body: JSON.stringify({
+      status,
+    }),
+  });
+
+  const downloadQueueState = await response.json();
+  console.log('updateDownloadQueueStatusById', downloadQueueState);
+
+  return downloadQueueState;
+};
+
+export default updateDownloadQueueStatusById;
--- a/frontend/src/api/actions/updatePlaylistSubscription.ts
+++ b/frontend/src/api/actions/updatePlaylistSubscription.ts
@ -0,0 +1,29 @@
+import defaultHeaders from '../../configuration/defaultHeaders';
+import getApiUrl from '../../configuration/getApiUrl';
+import getFetchCredentials from '../../configuration/getFetchCredentials';
+import getCookie from '../../functions/getCookie';
+
+const updatePlaylistSubscription = async (playlistId: string, status: boolean) => {
+  const apiUrl = getApiUrl();
+  const csrfCookie = getCookie('csrftoken');
+
+  const response = await fetch(`${apiUrl}/api/playlist/`, {
+    method: 'POST',
+    headers: {
+      ...defaultHeaders,
+      'X-CSRFToken': csrfCookie || '',
+    },
+    credentials: getFetchCredentials(),
+
+    body: JSON.stringify({
+      data: [{ playlist_id: playlistId, playlist_subscribed: status }],
+    }),
+  });
+
+  const playlistSubscription = await response.json();
+  console.log('updatePlaylistSubscription', playlistSubscription);
+
+  return playlistSubscription;
+};
+
+export default updatePlaylistSubscription;
--- a/Show More
+++ b/Show More