Use Symfony UX Twig

2024-07-21 14:03:21 +02:00 · 2024-07-21 14:03:21 +02:00 · 2c1e057283
commit 2c1e057283
parent 9e60830cd2
58 changed files with 716 additions and 766 deletions
--- a/.gitea/workflows/qs.yml
+++ b/.gitea/workflows/qs.yml
@ -20,8 +20,8 @@ jobs:
        working-directory: app/frontend
        run: "node ../node_modules/typescript/bin/tsc --noEmit"
      - name: "Stylelint"
-        working-directory: app/frontend/styles
-        run: "node ../../node_modules/stylelint/bin/stylelint.mjs ."
+        working-directory: app/frontend
+        run: "node ../node_modules/stylelint/bin/stylelint.mjs ."
      - name: "ESLint"
        working-directory: app
        run: "node node_modules/eslint/bin/eslint.js frontend"
--- a/app/Justfile
+++ b/app/Justfile
@ -1,8 +1,8 @@
 _default:
    @bin/just/choose.sh {{ source_file() }} choose

-mod backend
-mod frontend
+mod backend 'app/backend/mod.just'
+mod frontend 'app/frontend/mod.just'

 alias i := install
 alias start := up
@ -69,7 +69,7 @@ lint linter="":
        just frontend::lint all && just backend::lint;;
      *PHP*) just backend::lint ;;
      *TS*) just frontend::lint TS ;;
-      *SCSS*) just frontend::lint all SCSS ;;
+      *SCSS*) just frontend::lint SCSS ;;
      *Twig*) just frontend::lint TWIG ;;
    esac

--- a/app/frontend/templates/icons/euphcloud.svg.twig
+++ b/app/frontend/templates/icons/euphcloud.svg.twig
@ -1,5 +1,4 @@
 <svg
-        class="text-gray-800 dark:text-white {{ class|default('') }}"
        aria-hidden="true"
        xmlns="http://www.w3.org/2000/svg"
        xml:space="preserve"
--- a/app/assets/icons/symfony.svg
+++ b/app/assets/icons/symfony.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 257"><circle cx="128" cy="128.827" r="128" fill="#1a171b"/><path fill="#fff" d="M183.706 48.124c-12.986.453-24.32 7.61-32.757 17.51c-9.342 10.855-15.557 23.73-20.035 36.872c-8.01-6.565-14.19-15.064-27.041-18.77c-9.933-2.852-20.366-1.674-29.96 5.474c-4.545 3.395-7.676 8.527-9.165 13.351c-3.855 12.537 4.053 23.694 7.645 27.7l7.853 8.416c1.619 1.65 5.518 5.955 3.612 12.127c-2.06 6.71-10.15 11.055-18.448 8.495c-3.706-1.13-9.03-3.891-7.838-7.779c.493-1.59 1.631-2.78 2.241-4.155c.56-1.181.827-2.067.997-2.587c1.516-4.95-.555-11.39-5.857-13.025c-4.946-1.516-10.007-.315-11.969 6.054c-2.225 7.235 1.237 20.366 19.783 26.084c21.729 6.676 40.11-5.155 42.717-20.586c1.642-9.665-2.722-16.845-10.717-26.08l-6.514-7.204c-3.946-3.942-5.301-10.661-1.217-15.825c3.446-4.356 8.354-6.215 16.392-4.029c11.733 3.186 16.963 11.327 25.69 17.893c-3.603 11.819-5.958 23.682-8.09 34.32l-1.299 7.931c-6.238 32.721-11 50.688-23.375 61.003c-2.493 1.773-6.057 4.427-11.429 4.612c-2.816.087-3.726-1.85-3.765-2.694c-.067-1.977 1.599-2.883 2.706-3.773c1.654-.902 4.155-2.398 3.985-7.191c-.18-5.664-4.872-10.575-11.654-10.35c-5.08.173-12.823 4.954-12.532 13.705c.303 9.039 8.728 15.813 21.43 15.384c6.79-.233 21.952-2.997 36.895-20.76c17.392-20.362 22.256-43.705 25.915-60.79l4.084-22.556c2.269.272 4.695.453 7.334.516c21.661.457 32.496-10.763 32.657-18.924c.107-4.939-3.241-9.799-7.928-9.689c-3.355.095-7.57 2.328-8.582 6.968c-.988 4.552 6.893 8.66.733 12.65c-4.376 2.832-12.221 4.828-23.269 3.206l2.009-11.103c4.1-21.055 9.157-46.954 28.341-47.584c1.398-.071 6.514.063 6.633 3.446c.035 1.13-.245 1.418-1.568 4.005c-1.347 2.017-1.855 3.734-1.792 5.707c.185 5.376 4.273 8.909 10.185 8.696c7.916-.256 10.193-7.963 10.063-11.921c-.32-9.3-10.122-15.175-23.1-14.75"/></svg>
--- a/app/backend/TestController.php
+++ b/app/backend/TestController.php
@ -27,7 +27,7 @@ final readonly class TestController
    {
        return new Response(
            $this->twig->render(
-                'base.html.twig'
+                'sites/index.html.twig'
            )
        );
    }
--- a/app/backend/mod.just
+++ b/app/backend/mod.just
@ -1,17 +1,19 @@
 __default:
-    @../bin/just/choose.sh {{ source_file() }} choose
+    @../../bin/just/choose.sh {{ source_file() }} choose

 # Checks whether the requriements are met
 [group('main')]
 check:
    #!/bin/bash
-    source ../bin/just/colors.sh
-    source ../bin/just/check.sh
+    source ../../bin/just/colors.sh
+    source ../../bin/just/check.sh
    printf "${BLUE_BG}${BLACK_FG} Checking Backend Requirements ${CLEAR}\n"
    cd ..

    check_cmd "php" "Php"
    check_cmd "composer" "Composer"
+    check_cmd "symfony" "Symfony cli"
+
    current_composer_version=$(composer --version 2>/dev/null  | awk '{print $3}' | cut -d '.' -f 1)
    if [ "${current_composer_version}" = "2" ]; then
      printf >&2 "${GREEN_FG}✔ Composer${BLUE_FG} Version ${GREEN_FG}${current_composer_version}${BLUE_FG} is ${GREEN_FG}installed${BLUE_FG}.\n"
@ -19,8 +21,6 @@ check:
      printf >&2 "${RED_FG}✘ Wrong Composer Version${YELLOW_FG} is installed!\n  Version ${RED_FG}2${YELLOW_FG} is ${RED_FG}required${YELLOW_FG}.\n"
      error = 1
    fi
-
-    check_cmd "symfony" "Symfony cli"
    required_php_version=$(cat .php-version)
    current_php_version=$(symfony php -r "echo PHP_MAJOR_VERSION.'.'.PHP_MINOR_VERSION;")
    if [ "${current_php_version}" = "${required_php_version}" ]; then
@ -34,7 +34,12 @@ check:
    check "[ $(php -m | grep -c pdo_mysql)  -eq 1 ]" "Php Mysql PDO"

    check_cmd "docker" "Docker"
-    check "$(docker compose version >/dev/null 2>&1)" "Docker Compose"
+    if [[ "$(docker compose version 2>&1)" == "Docker Compose version v"* ]]; then
+        printf >&2 "${GREEN_FG}✔ Docker Compose${BLUE_FG} is ${GREEN_FG}installed${BLUE_FG}.\n"
+    else
+        printf >&2 "${RED_FG}✘ Docker Compose${YELLOW_FG} is ${RED_FG}not installed${YELLOW_FG}! \n"
+        error=1
+    fi

    if ((error > 0 )); then
      exit 1
--- a/app/compose.yaml
+++ b/app/compose.yaml
@ -1,5 +1,3 @@
-version: '3'
-
 services:
  mysql:
    container_name: 'euph-website_mysql'
--- a/app/composer.json
+++ b/app/composer.json
@ -23,11 +23,14 @@
    "symfony/flex": "^2",
    "symfony/form": "7.1.*",
    "symfony/framework-bundle": "7.1.*",
+    "symfony/http-client": "7.1.*",
    "symfony/monolog-bundle": "^3.0",
    "symfony/runtime": "7.1.*",
-    "symfony/stimulus-bundle": "^2.12",
+    "symfony/stimulus-bundle": "^2.18",
    "symfony/twig-bundle": "7.1.*",
    "symfony/uid": "7.1.*",
+    "symfony/ux-icons": "^2.18",
+    "symfony/ux-twig-component": "*",
    "symfony/validator": "7.1.*",
    "symfony/webpack-encore-bundle": "^2.1",
    "symfony/yaml": "7.1.*",
--- a/app/composer.lock
+++ b/app/composer.lock
@ -4,7 +4,7 @@
        "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
        "This file is @generated automatically"
    ],
-    "content-hash": "ee85551bd6012966efcff3c2d44a4b98",
+    "content-hash": "21f94f5ff4dac04b4bfc19b949fcea8c",
    "packages": [
        {
            "name": "dflydev/dot-access-data",
@ -3675,6 +3675,178 @@
            ],
            "time": "2024-06-28T08:00:31+00:00"
        },
+        {
+            "name": "symfony/http-client",
+            "version": "v7.1.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/http-client.git",
+                "reference": "90ace27d17ccc9afc6f7ec0081e8529fb0e29425"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/http-client/zipball/90ace27d17ccc9afc6f7ec0081e8529fb0e29425",
+                "reference": "90ace27d17ccc9afc6f7ec0081e8529fb0e29425",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.2",
+                "psr/log": "^1|^2|^3",
+                "symfony/deprecation-contracts": "^2.5|^3",
+                "symfony/http-client-contracts": "^3.4.1",
+                "symfony/service-contracts": "^2.5|^3"
+            },
+            "conflict": {
+                "php-http/discovery": "<1.15",
+                "symfony/http-foundation": "<6.4"
+            },
+            "provide": {
+                "php-http/async-client-implementation": "*",
+                "php-http/client-implementation": "*",
+                "psr/http-client-implementation": "1.0",
+                "symfony/http-client-implementation": "3.0"
+            },
+            "require-dev": {
+                "amphp/amp": "^2.5",
+                "amphp/http-client": "^4.2.1",
+                "amphp/http-tunnel": "^1.0",
+                "amphp/socket": "^1.1",
+                "guzzlehttp/promises": "^1.4|^2.0",
+                "nyholm/psr7": "^1.0",
+                "php-http/httplug": "^1.0|^2.0",
+                "psr/http-client": "^1.0",
+                "symfony/dependency-injection": "^6.4|^7.0",
+                "symfony/http-kernel": "^6.4|^7.0",
+                "symfony/messenger": "^6.4|^7.0",
+                "symfony/process": "^6.4|^7.0",
+                "symfony/rate-limiter": "^6.4|^7.0",
+                "symfony/stopwatch": "^6.4|^7.0"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Component\\HttpClient\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Tests/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Nicolas Grekas",
+                    "email": "p@tchwork.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Provides powerful methods to fetch HTTP resources synchronously or asynchronously",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "http"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/http-client/tree/v7.1.2"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2024-06-28T08:00:31+00:00"
+        },
+        {
+            "name": "symfony/http-client-contracts",
+            "version": "v3.5.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/http-client-contracts.git",
+                "reference": "20414d96f391677bf80078aa55baece78b82647d"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/http-client-contracts/zipball/20414d96f391677bf80078aa55baece78b82647d",
+                "reference": "20414d96f391677bf80078aa55baece78b82647d",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.1"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-main": "3.5-dev"
+                },
+                "thanks": {
+                    "name": "symfony/contracts",
+                    "url": "https://github.com/symfony/contracts"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Contracts\\HttpClient\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Test/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Nicolas Grekas",
+                    "email": "p@tchwork.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Generic abstractions related to HTTP clients",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "abstractions",
+                "contracts",
+                "decoupling",
+                "interfaces",
+                "interoperability",
+                "standards"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/http-client-contracts/tree/v3.5.0"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2024-04-18T09:32:20+00:00"
+        },
        {
            "name": "symfony/http-foundation",
            "version": "v7.1.1",
@ -5786,6 +5958,177 @@
            ],
            "time": "2024-05-31T14:57:53+00:00"
        },
+        {
+            "name": "symfony/ux-icons",
+            "version": "v2.18.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/ux-icons.git",
+                "reference": "a00140b15feb16a0d991ee04e115f2a15b0d9941"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/ux-icons/zipball/a00140b15feb16a0d991ee04e115f2a15b0d9941",
+                "reference": "a00140b15feb16a0d991ee04e115f2a15b0d9941",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.1",
+                "symfony/framework-bundle": "^6.4|^7.0",
+                "symfony/twig-bundle": "^6.4|^7.0"
+            },
+            "conflict": {
+                "symfony/flex": "<1.13"
+            },
+            "require-dev": {
+                "symfony/asset-mapper": "^6.4|^7.0",
+                "symfony/console": "^6.4|^7.0",
+                "symfony/http-client": "6.4|^7.0",
+                "symfony/phpunit-bridge": "^6.3|^7.0",
+                "symfony/ux-twig-component": "^2.14",
+                "zenstruck/console-test": "^1.5"
+            },
+            "type": "symfony-bundle",
+            "extra": {
+                "thanks": {
+                    "name": "symfony/ux",
+                    "url": "https://github.com/symfony/ux"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\UX\\Icons\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Kevin Bond",
+                    "email": "kevinbond@gmail.com"
+                },
+                {
+                    "name": "Simon André",
+                    "email": "smn.andre@gmail.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Renders local and remote SVG icons in your Twig templates.",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "icons",
+                "svg",
+                "symfony-ux",
+                "twig"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/ux-icons/tree/v2.18.1"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2024-06-07T23:22:02+00:00"
+        },
+        {
+            "name": "symfony/ux-twig-component",
+            "version": "v2.18.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/ux-twig-component.git",
+                "reference": "c5ba36dc0f55b75d4c6d7dc546dfdbe4002f82e7"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/ux-twig-component/zipball/c5ba36dc0f55b75d4c6d7dc546dfdbe4002f82e7",
+                "reference": "c5ba36dc0f55b75d4c6d7dc546dfdbe4002f82e7",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.1",
+                "symfony/dependency-injection": "^5.4|^6.0|^7.0",
+                "symfony/deprecation-contracts": "^2.2|^3.0",
+                "symfony/event-dispatcher": "^5.4|^6.0|^7.0",
+                "symfony/property-access": "^5.4|^6.0|^7.0",
+                "twig/twig": "^3.8"
+            },
+            "conflict": {
+                "symfony/config": "<5.4.0"
+            },
+            "require-dev": {
+                "symfony/console": "^5.4|^6.0|^7.0",
+                "symfony/css-selector": "^5.4|^6.0|^7.0",
+                "symfony/dom-crawler": "^5.4|^6.0|^7.0",
+                "symfony/framework-bundle": "^5.4|^6.0|^7.0",
+                "symfony/phpunit-bridge": "^6.0|^7.0",
+                "symfony/stimulus-bundle": "^2.9.1",
+                "symfony/stopwatch": "^5.4|^6.0|^7.0",
+                "symfony/twig-bundle": "^5.4|^6.0|^7.0",
+                "symfony/webpack-encore-bundle": "^1.15"
+            },
+            "type": "symfony-bundle",
+            "extra": {
+                "thanks": {
+                    "name": "symfony/ux",
+                    "url": "https://github.com/symfony/ux"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\UX\\TwigComponent\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Twig components for Symfony",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "components",
+                "symfony-ux",
+                "twig"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/ux-twig-component/tree/v2.18.1"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2024-06-11T18:51:33+00:00"
+        },
        {
            "name": "symfony/validator",
            "version": "v7.1.2",
--- a/app/config/bundles.php
+++ b/app/config/bundles.php
@ -16,4 +16,6 @@ return [
    Twig\Extra\TwigExtraBundle\TwigExtraBundle::class => ['all' => true],
    Presta\SitemapBundle\PrestaSitemapBundle::class => ['all' => true],
    Nelmio\CorsBundle\NelmioCorsBundle::class => ['all' => true],
+    Symfony\UX\TwigComponent\TwigComponentBundle::class => ['all' => true],
+    Symfony\UX\Icons\UXIconsBundle::class => ['all' => true],
 ];
--- a/app/config/packages/twig_component.yaml
+++ b/app/config/packages/twig_component.yaml
@ -0,0 +1,5 @@
+twig_component:
+    anonymous_template_directory: 'components/'
+    defaults:
+        # Namespace & directory for components
+        App\Components\: 'components/'
--- a/app/config/routes.yaml
+++ b/app/config/routes.yaml
@ -7,9 +7,9 @@ controllers:
 presta_sitemap:
  resource: "@PrestaSitemapBundle/config/routing.yml"

-when@dev:
-  test_style:
-    path: /test/styles
-    controller: Symfony\Bundle\FrameworkBundle\Controller\TemplateController
-    defaults:
-      template: 'test/styles.html.twig'
+#when@dev:
+#  test_style:
+#    path: /test/styles
+#    controller: Symfony\Bundle\FrameworkBundle\Controller\TemplateController
+#    defaults:
+#      template: 'test/styles.html.twig'
--- a/app/frontend/.eslintrc.json
+++ b/app/frontend/.eslintrc.json
@ -12,6 +12,12 @@
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
+  "overrides": [
+    {
+      "files": ["*.svelte"],
+      "parser": "svelte-eslint-parser"
+    }
+  ],
  "plugins": [
    "@typescript-eslint"
  ],
--- a/app/frontend/.stylelintignore
+++ b/app/frontend/.stylelintignore
@ -0,0 +1,4 @@
+*.ts
+*.twig
+*.json
+mod.just
--- a/app/frontend/styles/.stylelintrc.json
+++ b/app/frontend/styles/.stylelintrc.json
--- a/app/frontend/app.ts
+++ b/app/frontend/app.ts
@ -1,3 +1,45 @@
 import '@styles/app.scss';
 import '@pkg/stimulus';
-import '@pkg/flowbite';
+
+import {Theme, THEME_LOCAL_STORAGE_ID} from '#const/theme';
+
+const DARK_MODE_QUERY: MediaQueryList = window.matchMedia('(prefers-color-scheme: dark)');
+
+function initTheme(): void {
+    handleTheme(DARK_MODE_QUERY.matches);
+    DARK_MODE_QUERY.addEventListener('change', handleThemeChange);
+}
+
+function handleThemeChange(e: MediaQueryListEvent): void {
+    handleTheme(e.matches);
+}
+
+function handleTheme(prefersDark: boolean): void {
+    const theme = localStorage[THEME_LOCAL_STORAGE_ID];
+    if (theme === Theme.DARK) {
+        document.documentElement.classList.add(Theme.DARK);
+        console.log('explicit dark');
+    } else if (!(THEME_LOCAL_STORAGE_ID in localStorage) && prefersDark) {
+        document.documentElement.classList.add(Theme.DARK);
+        console.log('implicit dark');
+    } else {
+        document.documentElement.classList.remove(Theme.DARK);
+        console.log('light');
+    }
+}
+
+export {initTheme};
+
+// On page load or when changing themes, best to add inline in `head` to avoid FOUC
+
+
+// Whenever the user explicitly chooses light mode
+//localStorage.theme = 'light';
+
+// Whenever the user explicitly chooses dark mode
+//localStorage.theme = 'dark';
+
+// Whenever the user explicitly chooses to respect the OS preference
+//localStorage.removeItem('theme');
+
+initTheme();
--- a/app/frontend/constants/http.ts
+++ b/app/frontend/constants/http.ts
@ -1,5 +0,0 @@
-declare enum HttpCodes {
-    OK = 200
-}
-
-export {HttpCodes};
--- a/app/frontend/controllers/controllers.json
+++ b/app/frontend/controllers/controllers.json
--- a/app/frontend/controllers/hello_controller.ts
+++ b/app/frontend/controllers/hello_controller.ts
@ -1,12 +0,0 @@
-import {Controller} from '@hotwired/stimulus';
-
-export default class extends Controller {
-
-    static targets: Array<string> = ['container'];
-    declare readonly containerTarget: HTMLElement;
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    afterLoad(identifier: string, application: HTMLElement): void {
-        console.log(this.containerTarget);
-    }
-}
--- a/app/frontend/domain/theme.ts
+++ b/app/frontend/domain/theme.ts
@ -1,40 +0,0 @@
-import {Theme, THEME_LOCAL_STORAGE_ID} from '@const/theme';
-
-const DARK_MODE_QUERY: MediaQueryList = window.matchMedia('(prefers-color-scheme: dark)');
-
-function initTheme(): void {
-    handleTheme(DARK_MODE_QUERY.matches);
-    DARK_MODE_QUERY.addEventListener('change', handleThemeChange);
-}
-
-function handleThemeChange(e: MediaQueryListEvent): void {
-    handleTheme(e.matches);
-}
-
-function handleTheme(prefersDark: boolean): void {
-    const theme = localStorage[THEME_LOCAL_STORAGE_ID];
-    if (theme === Theme.DARK) {
-        document.documentElement.classList.add(Theme.DARK);
-        console.log('explicit dark');
-    } else if (!(THEME_LOCAL_STORAGE_ID in localStorage) && prefersDark) {
-        document.documentElement.classList.add(Theme.DARK);
-        console.log('implicit dark');
-    } else {
-        document.documentElement.classList.remove(Theme.DARK);
-        console.log('light');
-    }
-}
-
-export {initTheme};
-
-// On page load or when changing themes, best to add inline in `head` to avoid FOUC
-
-
-// Whenever the user explicitly chooses light mode
-//localStorage.theme = 'light';
-
-// Whenever the user explicitly chooses dark mode
-//localStorage.theme = 'dark';
-
-// Whenever the user explicitly chooses to respect the OS preference
-//localStorage.removeItem('theme');
--- a/app/frontend/mod.just
+++ b/app/frontend/mod.just
@ -1,14 +1,15 @@
 __default:
-    @../bin/just/choose.sh {{ source_file() }} choose
+    @../../bin/just/choose.sh {{ source_file() }} choose

 # Checks whether the requriements are met
 [group('main')]
 check:
    #!/bin/bash
-    source ../bin/just/colors.sh
-    source ../bin/just/check.sh
+    source ../../bin/just/colors.sh
+    source ../../bin/just/check.sh
    printf "${BLUE_BG}${BLACK_FG} Checking Frontend Requirements ${CLEAR}\n"

+    check_cmd "screen" "screen"
    check_cmd "volta" "Volta"
    check_cmd "node" "Node"
    check_cmd "npm" "NPM"
@ -39,7 +40,7 @@ session_name := "euph-website_frontend"
 [group('main')]
 up: halt
    #!/bin/bash
-    source ../bin/just/colors.sh
+    source ../../bin/just/colors.sh
    cd .. && screen -dmS {{ session_name }} npm run watch >> /dev/null
    if [ $? -eq 0 ]; then
    	printf "${GREEN_FG}Frontend was started${CLEAR}\n"
@ -51,7 +52,7 @@ up: halt
 [group('main')]
 halt:
    #!/bin/bash
-    source ../bin/just/colors.sh
+    source ../../bin/just/colors.sh
    screen -XS {{ session_name }} quit >> /dev/null
    if [ $? -eq 0 ]; then
    	printf "${GREEN_FG}Frontend was stopped${CLEAR}\n"
@ -60,7 +61,7 @@ halt:
 [group('main')]
 attach:
    #!/bin/bash
-    source ../bin/just/colors.sh
+    source ../../bin/just/colors.sh
    if screen -ls | grep -q {{ session_name }}; then
    	screen -r {{ session_name }}
    else
--- a/app/frontend/packages/flowbite.ts
+++ b/app/frontend/packages/flowbite.ts
@ -1,4 +0,0 @@
-import 'flowbite';
-import {initFlowbite} from 'flowbite';
-
-initFlowbite();
--- a/app/frontend/styles/app.scss
+++ b/app/frontend/styles/app.scss
@ -1,5 +1,5 @@
-@import "components/header";
-@import "components/burger-menu";
+@import "components/Header";
+@import "components/BurgerMenu/Index";
@tailwind base;
@tailwind components;
@tailwind utilities;
--- a/app/frontend/styles/components/BurgerMenu/Index.scss
+++ b/app/frontend/styles/components/BurgerMenu/Index.scss
@ -0,0 +1,27 @@
+@import "Nav";
+@import "Login";
+@import "User";
+
+.burger-menu {
+  @apply fixed top-0 right-0 h-screen overflow-y-auto z-40;
+  @apply flex flex-col p-2 gap-2 w-64;
+  @apply bg-gray-200 dark:bg-gray-600;
+
+  &__button-open {
+    @apply ml-auto h-full aspect-square;
+  }
+
+  &__button-close {
+    @apply h-8 w-8 absolute right-2 aspect-square;
+  }
+
+  &__icon {
+    @apply text-gray-900 dark:text-gray-100;
+    @apply h-6 w-6;
+  }
+
+  &__icon-full {
+    @apply text-gray-900 dark:text-gray-100;
+    @apply h-full w-full;
+  }
+}
--- a/app/frontend/styles/components/BurgerMenu/Login.scss
+++ b/app/frontend/styles/components/BurgerMenu/Login.scss
@ -0,0 +1,8 @@
+.burger-menu-login {
+  @apply flex p-2 gap-2 items-center justify-center;
+  @apply rounded-lg bg-blue-500 app__text;
+
+  &__icon {
+    @apply burger-menu__icon;
+  }
+}
--- a/app/frontend/styles/components/BurgerMenu/Nav.scss
+++ b/app/frontend/styles/components/BurgerMenu/Nav.scss
@ -0,0 +1,20 @@
+.burger-menu-nav {
+  @apply text-lg app__text;
+
+  &__list {
+    @apply flex flex-col gap-2;
+  }
+
+  &__item {
+    @apply h-8;
+  }
+
+  &__link {
+    @apply flex p-1 gap-2 items-center;
+    @apply rounded-md hover:bg-gray-200 dark:hover:bg-gray-600;
+  }
+
+  &__icon {
+    @apply burger-menu__icon;
+  }
+}
--- a/app/frontend/styles/components/BurgerMenu/User.scss
+++ b/app/frontend/styles/components/BurgerMenu/User.scss
@ -0,0 +1,47 @@
+.burger-menu-user {
+  @apply flex flex-col items-center;
+  @apply text-gray-900 dark:text-gray-100;
+
+
+  &__picture-wrapper {
+    @apply w-1/3 aspect-square mx-auto;
+  }
+
+  &__name {
+    @apply app__text-bold text-xl;
+    @apply h-6;
+  }
+
+  &__icon-full {
+    @apply burger-menu__icon-full;
+  }
+
+  &__email {
+    @apply app__text-light text-base;
+    @apply h-6;
+  }
+
+  &__info {
+    @apply app__text-light text-base;
+    @apply h-6;
+  }
+
+  &__actions {
+    @apply inline-flex  mt-2;
+
+    button {
+      @apply inline-flex p-1;
+      @apply bg-transparent;
+      @apply app__text text-sm;
+      @apply border border-r-0 border-gray-900 dark:border-gray-100;
+
+      &:first-of-type {
+        @apply rounded-s-lg;
+      }
+
+      &:last-of-type {
+        @apply rounded-e-lg border-r;
+      }
+    }
+  }
+}
--- a/app/frontend/styles/components/Header.scss
+++ b/app/frontend/styles/components/Header.scss
@ -1,4 +1,4 @@
-#header {
+.header {
  @apply flex h-12 p-2 gap-2 items-center;
  @apply bg-gray-300 dark:bg-gray-700;

--- a/app/frontend/styles/components/burger-menu.scss
+++ b/app/frontend/styles/components/burger-menu.scss
@ -1,79 +0,0 @@
-#burger-menu {
-  @apply fixed top-0 right-0 h-screen overflow-y-auto z-40;
-  @apply flex flex-col p-2 gap-2 w-64;
-  @apply bg-gray-100 dark:bg-gray-700;
-
-
-  &__button-open {
-    @apply ml-auto h-full aspect-square;
-  }
-
-  &__button-close {
-    @apply h-8 w-8 absolute right-2 aspect-square;
-  }
-
-  &__user-section {
-    @apply flex flex-col items-center;
-    @apply text-black dark:text-white;
-  }
-
-  &__user-picture-wrapper {
-    @apply w-1/3 aspect-square mx-auto;
-  }
-
-  &__user-name {
-    @apply app__text-bold text-xl;
-    @apply h-6;
-  }
-
-  &__user-email {
-    @apply app__text-light text-base;
-    @apply h-6;
-  }
-
-  &__user-info {
-    @apply app__text-light text-base;
-    @apply h-6;
-  }
-
-  &__user-actions {
-    @apply inline-flex  mt-2;
-
-    button {
-      @apply inline-flex p-1;
-      @apply bg-transparent;
-      @apply app__text text-sm;
-      @apply border border-r-0 border-gray-900 dark:border-white;
-
-      &:first-of-type {
-        @apply rounded-s-lg;
-      }
-
-      &:last-of-type {
-        @apply rounded-e-lg border-r;
-      }
-    }
-  }
-
-  &__login {
-    @apply flex p-2 gap-2 items-center justify-center;
-    @apply rounded-lg bg-blue-500 app__text;
-  }
-
-  &__nav {
-    @apply text-lg app__text;
-
-    &-list {
-      @apply flex flex-col gap-2;
-    }
-
-    &-item {
-      @apply h-8;
-    }
-
-    &-link {
-      @apply flex p-1 gap-2 items-center;
-      @apply rounded-md hover:bg-gray-200 dark:hover:bg-gray-600;
-    }
-  }
-}
--- a/app/frontend/templates/base.html.twig
+++ b/app/frontend/templates/base.html.twig
@ -15,14 +15,14 @@
    <link rel="mask-icon" href="{{ asset('/safari-pinned-tab.svg') }}" color="#000000">
    <meta name="msapplication-TileColor" content="#000000">
    <meta name="theme-color" content="#ffffff">
+
    {{ encore_entry_link_tags('app') }}
-    {{ encore_entry_script_tags('theme') }}
    {{ encore_entry_script_tags('app') }}

    <title>{% block title %}Euph{% endblock %}</title>
 </head>
-<body class="bg-gray-100 dark:bg-gray-600">
-{% include 'components/header.html.twig' %}
+<body>
+<twig:Header/>
 {% block body %}{% endblock %}
 </body>
 </html>
--- a/app/frontend/templates/components/BurgerMenu/Index.html.twig
+++ b/app/frontend/templates/components/BurgerMenu/Index.html.twig
@ -0,0 +1,21 @@
+{% set logged_in = true %}
+<button
+    class="burger-menu__button-open"
+>
+    <twig:ux:icon name="ph:list" class="burger-menu__icon-full"/>
+</button>
+<div
+    class="burger-menu"
+    tabindex="-1"
+>
+    <button
+        class="burger-menu__button-close"
+    >
+        <twig:ux:icon name="ph:x" class="burger-menu__icon-full"/>
+    </button>
+    <twig:BurgerMenu:User logged_in="{{ logged_in }}"/>
+    <twig:BurgerMenu:Login logged_in="{{ logged_in }}"/>
+    <hr/>
+    <twig:BurgerMenu:Nav/>
+</div>
+
--- a/app/frontend/templates/components/BurgerMenu/Login.html.twig
+++ b/app/frontend/templates/components/BurgerMenu/Login.html.twig
@ -0,0 +1,9 @@
+{% props logged_in = false %}
+
+{% if not logged_in %}
+    <hr/>
+    <a class="burger-menu-login">
+        <twig:ux:icon name="branding:euphcloud" class="burger-menu-login__icon"/>
+        <span>Login with Euphcloud</span>
+    </a>
+{% endif %}
--- a/app/frontend/templates/components/BurgerMenu/Nav.html.twig
+++ b/app/frontend/templates/components/BurgerMenu/Nav.html.twig
@ -0,0 +1,16 @@
+<nav class="burger-menu-nav">
+    <ul class="burger-menu-nav__list">
+        {{ _self.nav_item('Test1', '#test1', 'list') }}
+        {{ _self.nav_item('Test2', '#test2', 'list') }}
+        {{ _self.nav_item('Test3', '#test3', 'list') }}
+    </ul>
+</nav>
+
+{% macro nav_item(name, href, icon) %}
+    <li class="burger-menu-nav__item">
+        <a class="burger-menu-nav__link" href="{{ href }}">
+            <twig:ux:icon name="ph:{{ icon }}" class="burger-menu-nav__icon"/>
+            <span class="flex-1">{{ name }}</span>
+        </a>
+    </li>
+{% endmacro %}
--- a/app/frontend/templates/components/BurgerMenu/User.html.twig
+++ b/app/frontend/templates/components/BurgerMenu/User.html.twig
@ -0,0 +1,25 @@
+{% props logged_in = false %}
+
+<div class="burger-menu-user">
+    <div class="burger-menu-user__picture-wrapper">
+        <twig:ux:icon name="ph:user-circle-fill" class="burger-menu-user__icon-full"/>
+    </div>
+    {% if logged_in %}
+        <span class="burger-menu-user__name">Username</span>
+        <span class="burger-menu-user__email">username@email.com</span>
+        <div class="burger-menu-user__actions">
+            {{ _self.user_action('Profile', 'user') }}
+            {{ _self.user_action('Settings', 'gear') }}
+            {{ _self.user_action('Logout', 'sign-out') }}
+        </div>
+    {% else %}
+        <span class="burger-menu-user__info">not logged in</span>
+    {% endif %}
+</div>
+
+{% macro user_action(name, icon) %}
+    <button>
+        <twig:ux:icon name="ph:{{ icon }}" class="burger-menu__icon"/>
+        <span>{{ name }}</span>
+    </button>
+{% endmacro %}
--- a/app/frontend/templates/components/Header.html.twig
+++ b/app/frontend/templates/components/Header.html.twig
@ -1,14 +1,14 @@
-<header id="header">
+<header class="header">
    <img
-        id="header__logo"
+        class="header__logo"
        src="{{ asset("icons/logo/logo.svg") }}"
        alt="Euph Logo"
    >
    <img
-        id="header__logo-dark"
+        class="header__logo-dark"
        src="{{ asset("icons/logo/dark-logo.svg") }}"
        alt="Euph Logo"
    >
-    <h1 id="header__logo-text">Euph</h1>
-    {% include 'components/burger-menu.html.twig' %}
+    <span class="header__logo-text">Euph</span>
+    <twig:BurgerMenu:Index/>
 </header>
--- a/app/frontend/templates/components/burger-menu.html.twig
+++ b/app/frontend/templates/components/burger-menu.html.twig
@ -1,71 +0,0 @@
-<button
-    id="burger-menu__button-open"
-    type="button"
-    data-drawer-target="burger-menu"
-    data-drawer-show="burger-menu"
-    data-drawer-placement="right"
-    aria-controls="burger-menu"
->
-    {% include 'icons/bars.svg.twig' with {'class': 'h-full w-full'} %}
-</button>
-<div
-    id="burger-menu"
-    class="transition-transform translate-x-full"
-    tabindex="-1"
->
-    <button
-        type="button"
-        id="burger-menu__button-close"
-        data-drawer-hide="burger-menu"
-        aria-controls="burger-menu"
-    >
-        {% include 'icons/close.svg.twig'  with {'class': 'h-full w-full'} %}
-    </button>
-    <div id="burger-menu__user-section">
-        <div id="burger-menu__user-picture-wrapper">
-            {% include 'icons/user-placeholder.svg.twig' with {'class': 'h-full w-full'} %}
-        </div>
-        {% if logged_in %}
-            <span id="burger-menu__user-name">Username</span>
-            <span id="burger-menu__user-email">username@email.com</span>
-            <div id="burger-menu__user-actions">
-                {{ _self.user_action('Profile', 'user') }}
-                {{ _self.user_action('Settings', 'settings') }}
-                {{ _self.user_action('Logout', 'logout') }}
-            </div>
-        {% else %}
-            <span id="burger-menu__user-info">not logged in</span>
-        {% endif %}
-    </div>
-    {% if not logged_in %}
-        <hr/>
-        <a id="burger-menu__login">
-            {% include 'icons/euphcloud.svg.twig' with {'class': 'w-6 h-6'} %}
-            <span>Login with Euphcloud</span>
-        </a>
-    {% endif %}
-    <hr/>
-    <nav id="burger-menu__nav">
-        <ul id="burger-menu__nav-list">
-            {{ _self.nav_item('Test1', '#test1', 'bars') }}
-            {{ _self.nav_item('Test2', '#test2', 'bars') }}
-            {{ _self.nav_item('Test3', '#test3', 'bars') }}
-        </ul>
-    </nav>
-</div>
-
-{% macro user_action(name, icon) %}
-    <button>
-        {% include 'icons/' ~ icon ~ '.svg.twig' with {'class': 'h-6 w-6'} %}
-        <span>{{ name }}</span>
-    </button>
-{% endmacro %}
-
-{% macro nav_item(name, href, icon) %}
-    <li id="burger-menu__nav-item">
-        <a id="burger-menu__nav-link" href="{{ href }}">
-            {% include 'icons/' ~ icon ~ '.svg.twig' with {'class': 'h-6 w-6'} %}
-            <span class="flex-1">{{ name }}</span>
-        </a>
-    </li>
-{% endmacro %}
--- a/app/frontend/templates/icons/bars.svg.twig
+++ b/app/frontend/templates/icons/bars.svg.twig
@ -1,16 +0,0 @@
-<svg
-    class="text-gray-800 dark:text-white {{ class|default('') }}"
-    aria-hidden="true"
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    fill="none"
-    viewBox="0 0 24 24"
->
-    <path
-        stroke="currentColor"
-        stroke-linecap="round"
-        stroke-width="2"
-        d="M5 7h14M5 12h14M5 17h14"
-    />
-</svg>
--- a/app/frontend/templates/icons/close.svg.twig
+++ b/app/frontend/templates/icons/close.svg.twig
@ -1,17 +0,0 @@
-<svg
-    class="text-gray-800 dark:text-white {{ class|default('') }}"
-    aria-hidden="true"
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    fill="none"
-    viewBox="0 0 24 24"
->
-    <path
-        stroke="currentColor"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-        d="M6 18 17.94 6M18 18 6.06 6"
-    />
-</svg>
--- a/app/frontend/templates/icons/logout.svg.twig
+++ b/app/frontend/templates/icons/logout.svg.twig
@ -1,17 +0,0 @@
-<svg
-    class="text-gray-800 dark:text-white {{ class|default('') }}"
-    aria-hidden="true"
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    fill="none"
-    viewBox="0 0 24 24"
->
-    <path
-        stroke="currentColor"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-        d="M20 12H8m12 0-4 4m4-4-4-4M9 4H7a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h2"
-    />
-</svg>
--- a/app/frontend/templates/icons/settings.svg.twig
+++ b/app/frontend/templates/icons/settings.svg.twig
@ -1,14 +0,0 @@
-<svg
-    class="text-gray-800 dark:text-white {{ class|default('') }}"
-    aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    fill="currentColor"
-    viewBox="0 0 24 24"
->
-    <path
-        fill-rule="evenodd"
-        d="M17 10v1.126c.367.095.714.24 1.032.428l.796-.797 1.415 1.415-.797.796c.188.318.333.665.428 1.032H21v2h-1.126c-.095.367-.24.714-.428 1.032l.797.796-1.415 1.415-.796-.797a3.979 3.979 0 0 1-1.032.428V20h-2v-1.126a3.977 3.977 0 0 1-1.032-.428l-.796.797-1.415-1.415.797-.796A3.975 3.975 0 0 1 12.126 16H11v-2h1.126c.095-.367.24-.714.428-1.032l-.797-.796 1.415-1.415.796.797A3.977 3.977 0 0 1 15 11.126V10h2Zm.406 3.578.016.016c.354.358.574.85.578 1.392v.028a2 2 0 0 1-3.409 1.406l-.01-.012a2 2 0 0 1 2.826-2.83ZM5 8a4 4 0 1 1 7.938.703 7.029 7.029 0 0 0-3.235 3.235A4 4 0 0 1 5 8Zm4.29 5H7a4 4 0 0 0-4 4v1a2 2 0 0 0 2 2h6.101A6.979 6.979 0 0 1 9 15c0-.695.101-1.366.29-2Z"
-        clip-rule="evenodd"
-    />
-</svg>
--- a/app/frontend/templates/icons/user-placeholder.svg.twig
+++ b/app/frontend/templates/icons/user-placeholder.svg.twig
@ -1,14 +0,0 @@
-<svg
-    class="text-gray-800 dark:text-white {{ class|default('') }}"
-    aria-hidden="true"
-    xmlns="http://www.w3.org/2000/svg"
-    width="24" height="24"
-    fill="currentColor"
-    viewBox="0 0 24 24"
->
-    <path
-        fill-rule="evenodd"
-        d="M12 20a7.966 7.966 0 0 1-5.002-1.756l.002.001v-.683c0-1.794 1.492-3.25 3.333-3.25h3.334c1.84 0 3.333 1.456 3.333 3.25v.683A7.966 7.966 0 0 1 12 20ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10c0 5.5-4.44 9.963-9.932 10h-.138C6.438 21.962 2 17.5 2 12Zm10-5c-1.84 0-3.333 1.455-3.333 3.25S10.159 13.5 12 13.5c1.84 0 3.333-1.455 3.333-3.25S13.841 7 12 7Z"
-        clip-rule="evenodd"
-    />
-</svg>
--- a/app/frontend/templates/icons/user.svg.twig
+++ b/app/frontend/templates/icons/user.svg.twig
@ -1,15 +0,0 @@
-<svg
-    class="text-gray-800 dark:text-white {{ class|default('') }}"
-    aria-hidden="true"
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    fill="currentColor"
-    viewBox="0 0 24 24"
->
-    <path
-        d="M12 4a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm-2 9a4 4 0 0 0-4 4v1a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-1a4 4 0 0 0-4-4h-4Z"
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-    />
-</svg>
--- a/app/frontend/templates/sites/index.html.twig
+++ b/app/frontend/templates/sites/index.html.twig
@ -0,0 +1,4 @@
+{% extends 'base.html.twig' %}
+{% block body %}
+<p>A Phrase</p>
+{% endblock %}
--- a/app/frontend/templates/test/styles.twig
+++ b/app/frontend/templates/test/styles.twig
@ -1,53 +0,0 @@
-{% extends 'base.html.twig' %}
-
-{% block body %}
-    <h1>H1 Hello World</h1>
-    <h2>H2 Hello World</h2>
-    <h3>H3 Hello World</h3>
-    <h4>H4 Hello World</h4>
-    <h5>H5 Hello World</h5>
-    <h6>H6 Hello World</h6>
-    <p>P Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-        Ad consectetur consequuntur culpa debitis dignissimos
-        dolore est ex illo iure maxime, molestiae pariatur recusandae,
-        reiciendis saepe similique temporibus voluptatum? Eos,
-        repudiandae!
-    </p>
-    <a href="">A Link</a>
-    <button>Button</button>
-    <input type="text">
-    <input type="checkbox" name="" id="">
-    <button id="dropdownButton" data-dropdown-toggle="dropdownMenu" class="shadow" type="button">
-        Select an option
-    </button>
-    <ul id="dropdownMenu" class="hidden border-red-300 shadow">
-        <li>
-            <a href="#" class="block hover:bg-red-500" data-value="1">Option 1</a>
-        </li>
-        <li>
-            <a href="#" class="block hover:bg-green-500" data-value="2">Option 2</a>
-        </li>
-        <li>
-            <a href="#" class="block hover:bg-blue-500" data-value="3">Option 3</a>
-        </li>
-    </ul>
-    <script>
-        document.querySelectorAll('#dropdownMenu a').forEach(function (option) {
-            option.addEventListener('click', function (event) {
-                event.preventDefault();
-                console.log(this.dataset.value);
-                document.getElementById('dropdownButton').textContent = this.textContent;
-                console.log('close');
-                document.getElementById('dropdownMenu').classList.add('hidden');
-            });
-        });
-
-        document.getElementById('dropdownButton').addEventListener('click', function () {
-            let menu = document.getElementById('dropdownMenu');
-            console.log('open', menu);
-            menu.classList.remove('hidden');
-            console.log('open2', menu);
-        });
-    </script>
-
-{% endblock %}
--- a/app/frontend/theme.ts
+++ b/app/frontend/theme.ts
@ -1,3 +0,0 @@
-import {initTheme} from '@domain/theme';
-
-initTheme();
--- a/app/frontend/tsconfig.json
+++ b/app/frontend/tsconfig.json
@ -13,23 +13,23 @@
      "~*": [
        ".*"
      ],
-      "@styles/*": [
-        "./styles/*"
+      "@components/*": [
+        "./templates/components/*"
      ],
      "@controllers/*": [
        "./controllers/*"
      ],
+      "@styles/*": [
+        "./styles/*"
+      ],
      "@pkg/*": [
        "./packages/*"
      ],
-      "@domain/*": [
-        "./domain/*"
-      ],
-      "@const/*": [
-        "./constants/*"
-      ],
      "#types/*": [
        "./types/*"
+      ],
+      "#const/*": [
+        "./types/constants/*"
      ]
    }
  },
--- a/app/frontend/types/constants/theme.ts
+++ b/app/frontend/types/constants/theme.ts
--- a/app/package-lock.json
+++ b/app/package-lock.json
@ -5,10 +5,6 @@
  "packages": {
    "": {
      "license": "UNLICENSED",
-      "dependencies": {
-        "easymde": "^2.18.0",
-        "flowbite": "^2.4.1"
-      },
      "devDependencies": {
        "@babel/core": "^7.23.3",
        "@babel/eslint-parser": "^7.23.3",
@ -27,8 +23,6 @@
        "file-loader": "^6.2.0",
        "fork-ts-checker-webpack-plugin": "^9.0.0",
        "ignore-loader": "^0.1.2",
-        "jquery": "^3.7.1",
-        "junit-report-merger": "^6.0.3",
        "postcss": "^8.4.39",
        "postcss-loader": "^7.3.4",
        "prettier": "^2.8.8",
@ -2260,54 +2254,6 @@
        "webpack": "^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0"
      }
    },
-    "node_modules/@oozcitak/dom": {
-      "version": "1.15.10",
-      "resolved": "https://registry.npmjs.org/@oozcitak/dom/-/dom-1.15.10.tgz",
-      "integrity": "sha512-0JT29/LaxVgRcGKvHmSrUTEvZ8BXvZhGl2LASRUgHqDTC1M5g1pLmVv56IYNyt3bG2CUjDkc67wnyZC14pbQrQ==",
-      "dev": true,
-      "dependencies": {
-        "@oozcitak/infra": "1.0.8",
-        "@oozcitak/url": "1.0.4",
-        "@oozcitak/util": "8.3.8"
-      },
-      "engines": {
-        "node": ">=8.0"
-      }
-    },
-    "node_modules/@oozcitak/infra": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/@oozcitak/infra/-/infra-1.0.8.tgz",
-      "integrity": "sha512-JRAUc9VR6IGHOL7OGF+yrvs0LO8SlqGnPAMqyzOuFZPSZSXI7Xf2O9+awQPSMXgIWGtgUf/dA6Hs6X6ySEaWTg==",
-      "dev": true,
-      "dependencies": {
-        "@oozcitak/util": "8.3.8"
-      },
-      "engines": {
-        "node": ">=6.0"
-      }
-    },
-    "node_modules/@oozcitak/url": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@oozcitak/url/-/url-1.0.4.tgz",
-      "integrity": "sha512-kDcD8y+y3FCSOvnBI6HJgl00viO/nGbQoCINmQ0h98OhnGITrWR3bOGfwYCthgcrV8AnTJz8MzslTQbC3SOAmw==",
-      "dev": true,
-      "dependencies": {
-        "@oozcitak/infra": "1.0.8",
-        "@oozcitak/util": "8.3.8"
-      },
-      "engines": {
-        "node": ">=8.0"
-      }
-    },
-    "node_modules/@oozcitak/util": {
-      "version": "8.3.8",
-      "resolved": "https://registry.npmjs.org/@oozcitak/util/-/util-8.3.8.tgz",
-      "integrity": "sha512-T8TbSnGsxo6TDBJx/Sgv/BlVJL3tshxZP7Aq5R1mSnM5OcHY2dQaxLMu2+E8u3gN0MLOzdjurqN4ZRVuzQycOQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=8.0"
-      }
-    },
    "node_modules/@pkgjs/parseargs": {
      "version": "0.11.0",
      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@ -2322,56 +2268,12 @@
      "version": "2.11.8",
      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "dev": true,
      "funding": {
        "type": "opencollective",
        "url": "https://opencollective.com/popperjs"
      }
    },
-    "node_modules/@rollup/plugin-node-resolve": {
-      "version": "15.2.3",
-      "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.2.3.tgz",
-      "integrity": "sha512-j/lym8nf5E21LwBT4Df1VD6hRO2L2iwUeUmP7litikRsVp1H6NWx20NEp0Y7su+7XGc476GnXXc4kFeZNGmaSQ==",
-      "dependencies": {
-        "@rollup/pluginutils": "^5.0.1",
-        "@types/resolve": "1.20.2",
-        "deepmerge": "^4.2.2",
-        "is-builtin-module": "^3.2.1",
-        "is-module": "^1.0.0",
-        "resolve": "^1.22.1"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "peerDependencies": {
-        "rollup": "^2.78.0||^3.0.0||^4.0.0"
-      },
-      "peerDependenciesMeta": {
-        "rollup": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@rollup/pluginutils": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.0.tgz",
-      "integrity": "sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==",
-      "dependencies": {
-        "@types/estree": "^1.0.0",
-        "estree-walker": "^2.0.2",
-        "picomatch": "^2.3.1"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "peerDependencies": {
-        "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
-      },
-      "peerDependenciesMeta": {
-        "rollup": {
-          "optional": true
-        }
-      }
-    },
    "node_modules/@sinclair/typebox": {
      "version": "0.27.8",
      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
@ -2696,14 +2598,6 @@
        "@types/node": "*"
      }
    },
-    "node_modules/@types/codemirror": {
-      "version": "5.60.15",
-      "resolved": "https://registry.npmjs.org/@types/codemirror/-/codemirror-5.60.15.tgz",
-      "integrity": "sha512-dTOvwEQ+ouKJ/rE9LT1Ue2hmP6H1mZv5+CCnNWu2qtiOe2LQa9lCprEY20HxiDmV/Bxh+dXjywmy5aKvoGjULA==",
-      "dependencies": {
-        "@types/tern": "*"
-      }
-    },
    "node_modules/@types/connect": {
      "version": "3.4.37",
      "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.37.tgz",
@ -2761,7 +2655,8 @@
    "node_modules/@types/estree": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.3.tgz",
-      "integrity": "sha512-CS2rOaoQ/eAgAfcTfq6amKG7bsN+EMcgGY4FAFQdvSj2y1ixvOZTUA9mOtCai7E1SYu283XNw7urKK30nP3wkQ=="
+      "integrity": "sha512-CS2rOaoQ/eAgAfcTfq6amKG7bsN+EMcgGY4FAFQdvSj2y1ixvOZTUA9mOtCai7E1SYu283XNw7urKK30nP3wkQ==",
+      "dev": true
    },
    "node_modules/@types/express": {
      "version": "4.17.20",
@ -2842,11 +2737,6 @@
      "integrity": "sha512-U3PUjAudAdJBeC2pgN8uTIKgxrb4nlDF3SF0++EldXQvQBGkpFZMSnwQiIoDU77tv45VgNkl/L4ouD+rEomujw==",
      "dev": true
    },
-    "node_modules/@types/marked": {
-      "version": "4.3.2",
-      "resolved": "https://registry.npmjs.org/@types/marked/-/marked-4.3.2.tgz",
-      "integrity": "sha512-a79Yc3TOk6dGdituy8hmTTJXjOkZ7zsFYV10L337ttq/rec8lRMDBpV7fL3uLx6TgbFCa5DU/h8FmIBQPSbU0w=="
-    },
    "node_modules/@types/mime": {
      "version": "1.3.4",
      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.4.tgz",
@ -2886,11 +2776,6 @@
      "integrity": "sha512-+0autS93xyXizIYiyL02FCY8N+KkKPhILhcUSA276HxzreZ16kl+cmwvV2qAM/PuCCwPXzOXOWhiPcw20uSFcA==",
      "dev": true
    },
-    "node_modules/@types/resolve": {
-      "version": "1.20.2",
-      "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
-      "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q=="
-    },
    "node_modules/@types/retry": {
      "version": "0.12.0",
      "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
@ -2942,14 +2827,6 @@
        "@types/node": "*"
      }
    },
-    "node_modules/@types/tern": {
-      "version": "0.23.9",
-      "resolved": "https://registry.npmjs.org/@types/tern/-/tern-0.23.9.tgz",
-      "integrity": "sha512-ypzHFE/wBzh+BlH6rrBgS5I/Z7RD21pGhZ2rltb/+ZrVM1awdZwjx7hE5XfuYgHWk9uvV5HLZN3SloevCAp3Bw==",
-      "dependencies": {
-        "@types/estree": "*"
-      }
-    },
    "node_modules/@types/webpack-env": {
      "version": "1.18.3",
      "resolved": "https://registry.npmjs.org/@types/webpack-env/-/webpack-env-1.18.3.tgz",
@ -4494,17 +4371,6 @@
      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
      "dev": true
    },
-    "node_modules/builtin-modules": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.3.0.tgz",
-      "integrity": "sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==",
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
    "node_modules/bytes": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
@ -4757,19 +4623,6 @@
        "node": ">=6"
      }
    },
-    "node_modules/codemirror": {
-      "version": "5.65.16",
-      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.65.16.tgz",
-      "integrity": "sha512-br21LjYmSlVL0vFCPWPfhzUCT34FM/pAdK7rRIZwa0rrtrIdotvP4Oh4GUHsu2E3IrQMCfRkL/fN3ytMNxVQvg=="
-    },
-    "node_modules/codemirror-spell-checker": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/codemirror-spell-checker/-/codemirror-spell-checker-1.1.2.tgz",
-      "integrity": "sha512-2Tl6n0v+GJRsC9K3MLCdLaMOmvWL0uukajNJseorZJsslaxZyZMgENocPU8R0DyoTAiKsyqiemSOZo7kjGV0LQ==",
-      "dependencies": {
-        "typo-js": "*"
-      }
-    },
    "node_modules/color-convert": {
      "version": "1.9.3",
      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@ -5433,6 +5286,7 @@
      "version": "4.3.1",
      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
+      "dev": true,
      "engines": {
        "node": ">=0.10.0"
      }
@ -5663,18 +5517,6 @@
        "node": ">= 4.0.0"
      }
    },
-    "node_modules/easymde": {
-      "version": "2.18.0",
-      "resolved": "https://registry.npmjs.org/easymde/-/easymde-2.18.0.tgz",
-      "integrity": "sha512-IxVVUxNWIoXLeqtBU4BLc+eS/ScYhT1Dcb6yF5Wchoj1iXAV+TIIDWx+NCaZhY7RcSHqDPKllbYq7nwGKILnoA==",
-      "dependencies": {
-        "@types/codemirror": "^5.60.4",
-        "@types/marked": "^4.0.7",
-        "codemirror": "^5.63.1",
-        "codemirror-spell-checker": "1.1.2",
-        "marked": "^4.1.0"
-      }
-    },
    "node_modules/eazy-logger": {
      "version": "4.0.1",
      "resolved": "https://registry.npmjs.org/eazy-logger/-/eazy-logger-4.0.1.tgz",
@ -6249,19 +6091,6 @@
        "url": "https://opencollective.com/eslint"
      }
    },
-    "node_modules/esprima": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
-      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
-      "dev": true,
-      "bin": {
-        "esparse": "bin/esparse.js",
-        "esvalidate": "bin/esvalidate.js"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
    "node_modules/esquery": {
      "version": "1.5.0",
      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.5.0.tgz",
@ -6313,11 +6142,6 @@
        "node": ">=4.0"
      }
    },
-    "node_modules/estree-walker": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
-      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
-    },
    "node_modules/esutils": {
      "version": "2.0.3",
      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@ -6657,25 +6481,6 @@
      "integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==",
      "dev": true
    },
-    "node_modules/flowbite": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/flowbite/-/flowbite-2.4.1.tgz",
-      "integrity": "sha512-I++vDsSOOlzHNuxY2OcFMNVC4CNzpPU2K14YHJ81cYrANXdzgizqniMB/1KQ219x8fqw+S0msY9Q45ZSXDqAPw==",
-      "dependencies": {
-        "@popperjs/core": "^2.9.3",
-        "flowbite-datepicker": "^1.3.0",
-        "mini-svg-data-uri": "^1.4.3"
-      }
-    },
-    "node_modules/flowbite-datepicker": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/flowbite-datepicker/-/flowbite-datepicker-1.3.0.tgz",
-      "integrity": "sha512-CLVqzuoE2vkUvWYK/lJ6GzT0be5dlTbH3uuhVwyB67+PjqJWABm2wv68xhBf5BqjpBxvTSQ3mrmLHpPJ2tvrSQ==",
-      "dependencies": {
-        "@rollup/plugin-node-resolve": "^15.2.3",
-        "flowbite": "^2.0.0"
-      }
-    },
    "node_modules/follow-redirects": {
      "version": "1.15.3",
      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz",
@ -6916,6 +6721,7 @@
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
      "funding": {
        "url": "https://github.com/sponsors/ljharb"
      }
@ -7175,6 +6981,7 @@
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz",
      "integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==",
+      "dev": true,
      "dependencies": {
        "function-bind": "^1.1.2"
      },
@ -7575,24 +7382,11 @@
        "node": ">=8"
      }
    },
-    "node_modules/is-builtin-module": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-3.2.1.tgz",
-      "integrity": "sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==",
-      "dependencies": {
-        "builtin-modules": "^3.3.0"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
    "node_modules/is-core-module": {
      "version": "2.13.1",
      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
      "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==",
+      "dev": true,
      "dependencies": {
        "hasown": "^2.0.0"
      },
@ -7645,11 +7439,6 @@
        "node": ">=0.10.0"
      }
    },
-    "node_modules/is-module": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
-      "integrity": "sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g=="
-    },
    "node_modules/is-number": {
      "version": "7.0.0",
      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
@ -7923,12 +7712,6 @@
        "jiti": "bin/jiti.js"
      }
    },
-    "node_modules/jquery": {
-      "version": "3.7.1",
-      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
-      "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
-      "dev": true
-    },
    "node_modules/js-tokens": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@ -8007,33 +7790,6 @@
        "graceful-fs": "^4.1.6"
      }
    },
-    "node_modules/junit-report-merger": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/junit-report-merger/-/junit-report-merger-6.0.3.tgz",
-      "integrity": "sha512-gtGHrq+otZLtSP1FPDSKYiFkDayCoEx1wslgzodLVxckwL8XgdbQlko1mz9wdXqieeniCQjkJFrTtqDEsTWzTQ==",
-      "dev": true,
-      "dependencies": {
-        "commander": "~11.1.0",
-        "fast-glob": "~3.3.0",
-        "xmlbuilder2": "3.1.1"
-      },
-      "bin": {
-        "jrm": "cli.js",
-        "junit-report-merger": "cli.js"
-      },
-      "engines": {
-        "node": ">=14"
-      }
-    },
-    "node_modules/junit-report-merger/node_modules/commander": {
-      "version": "11.1.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-11.1.0.tgz",
-      "integrity": "sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=16"
-      }
-    },
    "node_modules/keyv": {
      "version": "4.5.4",
      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@ -8314,17 +8070,6 @@
        "yallist": "^3.0.2"
      }
    },
-    "node_modules/marked": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/marked/-/marked-4.3.0.tgz",
-      "integrity": "sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==",
-      "bin": {
-        "marked": "bin/marked.js"
-      },
-      "engines": {
-        "node": ">= 12"
-      }
-    },
    "node_modules/mathml-tag-names": {
      "version": "2.1.3",
      "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz",
@ -8531,14 +8276,6 @@
        "url": "https://opencollective.com/webpack"
      }
    },
-    "node_modules/mini-svg-data-uri": {
-      "version": "1.4.4",
-      "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
-      "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
-      "bin": {
-        "mini-svg-data-uri": "cli.js"
-      }
-    },
    "node_modules/minimalistic-assert": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
@ -9047,7 +8784,8 @@
    "node_modules/path-parse": {
      "version": "1.0.7",
      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true
    },
    "node_modules/path-scurry": {
      "version": "1.11.1",
@ -9099,6 +8837,7 @@
      "version": "2.3.1",
      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
      "engines": {
        "node": ">=8.6"
      },
@ -10320,6 +10059,7 @@
      "version": "1.22.8",
      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
      "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
+      "dev": true,
      "dependencies": {
        "is-core-module": "^2.13.0",
        "path-parse": "^1.0.7",
@ -11014,12 +10754,6 @@
        "wbuf": "^1.7.3"
      }
    },
-    "node_modules/sprintf-js": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
-      "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
-      "dev": true
-    },
    "node_modules/stackframe": {
      "version": "1.3.4",
      "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.3.4.tgz",
@ -11678,6 +11412,7 @@
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
      "engines": {
        "node": ">= 0.4"
      },
@ -12375,11 +12110,6 @@
        "node": ">=14.17"
      }
    },
-    "node_modules/typo-js": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/typo-js/-/typo-js-1.2.3.tgz",
-      "integrity": "sha512-67Hyl94beZX8gmTap7IDPrG5hy2cHftgsCAcGvE1tzuxGT+kRB+zSBin0wIMwysYw8RUCBCvv9UfQl8TNM75dA=="
-    },
    "node_modules/ua-parser-js": {
      "version": "1.0.38",
      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.38.tgz",
@ -13131,43 +12861,6 @@
        }
      }
    },
-    "node_modules/xmlbuilder2": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/xmlbuilder2/-/xmlbuilder2-3.1.1.tgz",
-      "integrity": "sha512-WCSfbfZnQDdLQLiMdGUQpMxxckeQ4oZNMNhLVkcekTu7xhD4tuUDyAPoY8CwXvBYE6LwBHd6QW2WZXlOWr1vCw==",
-      "dev": true,
-      "dependencies": {
-        "@oozcitak/dom": "1.15.10",
-        "@oozcitak/infra": "1.0.8",
-        "@oozcitak/util": "8.3.8",
-        "js-yaml": "3.14.1"
-      },
-      "engines": {
-        "node": ">=12.0"
-      }
-    },
-    "node_modules/xmlbuilder2/node_modules/argparse": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
-      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
-      "dev": true,
-      "dependencies": {
-        "sprintf-js": "~1.0.2"
-      }
-    },
-    "node_modules/xmlbuilder2/node_modules/js-yaml": {
-      "version": "3.14.1",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
-      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
-      "dev": true,
-      "dependencies": {
-        "argparse": "^1.0.7",
-        "esprima": "^4.0.0"
-      },
-      "bin": {
-        "js-yaml": "bin/js-yaml.js"
-      }
-    },
    "node_modules/xmlhttprequest-ssl": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz",
--- a/app/package.json
+++ b/app/package.json
@ -8,12 +8,8 @@
    "build": "encore production --progress",
    "lint:ts": "cd frontend && eslint .",
    "lint:ts:fix": "cd frontend && eslint . --fix",
-    "lint:scss": "cd frontend/styles && stylelint .",
-    "lint:scss:fix": "cd frontend/styles && stylelint . --fix"
-  },
-  "dependencies": {
-    "easymde": "^2.18.0",
-    "flowbite": "^2.4.1"
+    "lint:scss": "cd frontend && stylelint .",
+    "lint:scss:fix": "cd frontend && stylelint . --fix"
  },
  "devDependencies": {
    "@babel/core": "^7.23.3",
@ -33,8 +29,6 @@
    "file-loader": "^6.2.0",
    "fork-ts-checker-webpack-plugin": "^9.0.0",
    "ignore-loader": "^0.1.2",
-    "jquery": "^3.7.1",
-    "junit-report-merger": "^6.0.3",
    "postcss": "^8.4.39",
    "postcss-loader": "^7.3.4",
    "prettier": "^2.8.8",
--- a/app/postcss.config.js
+++ b/app/postcss.config.js
@ -1,6 +1,6 @@
 module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
 }
--- a/app/symfony.lock
+++ b/app/symfony.lock
@ -249,6 +249,42 @@
            "config/packages/uid.yaml"
        ]
    },
+    "symfony/ux-icons": {
+        "version": "2.18",
+        "recipe": {
+            "repo": "github.com/symfony/recipes",
+            "branch": "main",
+            "version": "2.17",
+            "ref": "803a3bbd5893f9584969ab8670290cdfb6a0a5b5"
+        },
+        "files": [
+            "assets/icons/symfony.svg"
+        ]
+    },
+    "symfony/ux-svelte": {
+        "version": "2.18",
+        "recipe": {
+            "repo": "github.com/symfony/recipes",
+            "branch": "main",
+            "version": "2.9",
+            "ref": "4a6ee82d817d4e9be8d4a861476a112011d701e1"
+        },
+        "files": [
+            "assets/svelte/controllers/Hello.svelte"
+        ]
+    },
+    "symfony/ux-twig-component": {
+        "version": "2.18",
+        "recipe": {
+            "repo": "github.com/symfony/recipes",
+            "branch": "main",
+            "version": "2.13",
+            "ref": "67814b5f9794798b885cec9d3f48631424449a01"
+        },
+        "files": [
+            "config/packages/twig_component.yaml"
+        ]
+    },
    "symfony/validator": {
        "version": "6.3",
        "recipe": {
--- a/app/tailwind.config.js
+++ b/app/tailwind.config.js
@ -1,18 +1,13 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [
-    "./frontend/**/*.ts",
-    "./frontend/templates/**/*.html.twig",
-    "./node_modules/flowbite/**/*.js"
-  ],
-  theme: {
-    extend: {
+    content: [
+        "./frontend/**/*.ts",
+        "./frontend/templates/**/*.html.twig",
+    ],
+    theme: {
+        extend: {

+        },
    },
-  },
-  plugins: [
-    require('flowbite/plugin')
-  ],
-  darkMode: 'selector'
+    darkMode: 'selector'
 }
-
--- a/app/webpack.config.js
+++ b/app/webpack.config.js
@ -14,16 +14,9 @@ Encore
    .setPublicPath('/build')
    .copyFiles({
        from: './assets/',
-        to: '../[path][name].[ext]',
-        pattern: /\.(?!scss|stylelint.*|json|woff).*$/
+        to: '../[path][name].[ext]'
    })
-
-    // Code Entries
    .addEntry('app', './frontend/app.ts')
-    .addEntry('theme', './frontend/theme.ts')
-
-    // Style Entries
-    //.addStyleEntry('name', './frontend/styles/name.scss')

    // Webpack
    .splitEntryChunks()
@ -38,7 +31,7 @@ Encore
        config.useBuiltIns = 'usage';
        config.corejs = '3.23';
    })
-    .enableStimulusBridge('./frontend/controllers.json')
+    .enableStimulusBridge('./frontend/controllers/controllers.json')
    .enableSassLoader()
    .enablePostCssLoader()
    .enableTypeScriptLoader(function tsconfigCallback(tsConfig) {
--- a/app/bin/deploy.sh
+++ b/app/bin/deploy.sh
--- a/bin/just/.gitignore
+++ b/bin/just/.gitignore
@ -0,0 +1 @@
+.cache/
--- a/app/bin/just/check.sh
+++ b/app/bin/just/check.sh
@ -9,5 +9,5 @@ check() {
 }

 check_cmd() {
-  check "$(command -v $1 >/dev/null 2>&1)" $2
+  check "$(command -v $1 >/dev/null 2>&1)" "$2"
 }
--- a/app/bin/just/choose.sh
+++ b/app/bin/just/choose.sh
@ -9,9 +9,9 @@ function preview() {
  if [[ -z "$recipe" ]] || echo $recipe | grep -q "^\["; then
    printf "${RED_FG}Select this to Exit${CLEAR}"
  elif [[ "$content" == *" ..." ]]; then
-    just_wrapper --list $recipe | highlight --out-format xterm256 --syntax conf
+      hash_highlight "$(just_wrapper --list $recipe)" "conf"
  else
-    just_wrapper --show $recipe | highlight --out-format xterm256 --syntax sh
+      hash_highlight "$(just_wrapper --show $recipe)" "sh"
  fi
 }

@ -33,7 +33,19 @@ function choose_truncate() {
 function choose_list() {
    just_wrapper -l --no-aliases --list-heading="" | awk '{$1=$1};1'
 }
-
+function hash_highlight() {
+    cache_dir="$(dirname ${BASH_SOURCE[0]})/.cache"
+    hash=$(echo $1 | md5sum | cut -d ' ' -f1)
+    file="$cache_dir/$hash"
+	if [[ -e $file ]]; then
+        cat $file
+    else
+        mkdir -p $cache_dir
+        data=$(printf "$1" | highlight --out-format xterm256 --syntax "$2")
+        printf "$data"
+        printf "$data" > $file
+    fi
+}
 case "$action" in
  *choose) choose;;
  *preview) preview;;
--- a/app/bin/just/colors.sh
+++ b/app/bin/just/colors.sh
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 257"><circle cx="128" cy="128.827" r="128" fill="#1a171b"/><path fill="#fff" d="M183.706 48.124c-12.986.453-24.32 7.61-32.757 17.51c-9.342 10.855-15.557 23.73-20.035 36.872c-8.01-6.565-14.19-15.064-27.041-18.77c-9.933-2.852-20.366-1.674-29.96 5.474c-4.545 3.395-7.676 8.527-9.165 13.351c-3.855 12.537 4.053 23.694 7.645 27.7l7.853 8.416c1.619 1.65 5.518 5.955 3.612 12.127c-2.06 6.71-10.15 11.055-18.448 8.495c-3.706-1.13-9.03-3.891-7.838-7.779c.493-1.59 1.631-2.78 2.241-4.155c.56-1.181.827-2.067.997-2.587c1.516-4.95-.555-11.39-5.857-13.025c-4.946-1.516-10.007-.315-11.969 6.054c-2.225 7.235 1.237 20.366 19.783 26.084c21.729 6.676 40.11-5.155 42.717-20.586c1.642-9.665-2.722-16.845-10.717-26.08l-6.514-7.204c-3.946-3.942-5.301-10.661-1.217-15.825c3.446-4.356 8.354-6.215 16.392-4.029c11.733 3.186 16.963 11.327 25.69 17.893c-3.603 11.819-5.958 23.682-8.09 34.32l-1.299 7.931c-6.238 32.721-11 50.688-23.375 61.003c-2.493 1.773-6.057 4.427-11.429 4.612c-2.816.087-3.726-1.85-3.765-2.694c-.067-1.977 1.599-2.883 2.706-3.773c1.654-.902 4.155-2.398 3.985-7.191c-.18-5.664-4.872-10.575-11.654-10.35c-5.08.173-12.823 4.954-12.532 13.705c.303 9.039 8.728 15.813 21.43 15.384c6.79-.233 21.952-2.997 36.895-20.76c17.392-20.362 22.256-43.705 25.915-60.79l4.084-22.556c2.269.272 4.695.453 7.334.516c21.661.457 32.496-10.763 32.657-18.924c.107-4.939-3.241-9.799-7.928-9.689c-3.355.095-7.57 2.328-8.582 6.968c-.988 4.552 6.893 8.66.733 12.65c-4.376 2.832-12.221 4.828-23.269 3.206l2.009-11.103c4.1-21.055 9.157-46.954 28.341-47.584c1.398-.071 6.514.063 6.633 3.446c.035 1.13-.245 1.418-1.568 4.005c-1.347 2.017-1.855 3.734-1.792 5.707c.185 5.376 4.273 8.909 10.185 8.696c7.916-.256 10.193-7.963 10.063-11.921c-.32-9.3-10.122-15.175-23.1-14.75"/></svg>