style(home.html.twig): adjust centering of container element (#2)

Co-authored-by: Jan Klattenhoff <j.klattenhoff@neusta.de>
Reviewed-on: #2

.ddev/config.yaml

@@ -7,8 +7,8 @@ xdebug_enabled: false
 additional_hostnames: []
 additional_fqdns: []
 database:
-    type: mariadb
-    version: "10.11"
+    type: postgres
+    version: "17"
 use_dns_when_possible: true
 composer_version: "2"
 web_environment: []

.env

@@ -18,3 +18,5 @@
 APP_ENV=dev
 APP_SECRET=bfc9c288ee3dcce80dec8622c2870f27
 ###< symfony/framework-bundle ###
+
+DATA_DIR='/var/www/html/data'

.gitea/workflows/build.yaml

@@ -7,10 +7,10 @@ on:
       - main
 jobs:
   build:
-    runs-on: ubuntu-latest
+    runs-on: remote
     steps:
-      - uses: actions/checkout@v4
-      - uses: docker/login-action@v1
+      - uses: https://git.simonis.lol/actions/checkout@v4
+      - uses: https://git.simonis.lol/actions/login@v1
         with:
           registry: git.simonis.lol
           username: ${{ vars.DOCKER_USER }}
@@ -20,4 +20,4 @@ jobs:
         run: docker build -t git.simonis.lol/sites/file-explorer:latest .
 
       - name: push
-        run: docker push git.simonis.lol/sites/file-explorer:latest
+        run: docker push git.simonis.lol/sites/file-explorer:latest

Dockerfile

@@ -17,4 +17,4 @@ RUN docker-php-ext-install pdo pdo_mysql mysqli gd opcache intl zip calendar dom
 RUN pecl install apcu && docker-php-ext-enable apcu
 
 WORKDIR /var/www/project
-RUN composer install --no-dev --optimize-autoloader --no-suggest --no-progress
+RUN composer install --optimize-autoloader --no-suggest --no-progress

assets/app.js

@@ -1,3 +1,4 @@
+import './bootstrap.js';
 /*
  * Welcome to your app's main JavaScript file!
  *

assets/bootstrap.js

@@ -0,0 +1,5 @@
+import { startStimulusApp } from '@symfony/stimulus-bundle';
+
+const app = startStimulusApp();
+// register any custom, 3rd party controllers here
+// app.register('some_controller_name', SomeImportedController);

assets/controllers.json

@@ -0,0 +1,4 @@
+{
+    "controllers": [],
+    "entrypoints": []
+}

assets/controllers/upload_file_controller.js

@@ -0,0 +1,9 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+    connect() {
+        this.element.querySelector('input').addEventListener('change', () => {
+            this.element.querySelector('button[type="submit"]').click();
+        });
+    }
+}

assets/icons/file/upload.svg

@@ -0,0 +1,3 @@
+<svg class="w-8 h-8 mb-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
+    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"/>
+</svg>

assets/styles/app.css

@@ -1,3 +1,8 @@
 body {
     background-color: transparent;
 }
+
+a:hover {
+    color: deepskyblue;
+    text-decoration: underline;
+}

composer.json

@@ -13,11 +13,14 @@
         "symfony/dotenv": "7.1.*",
         "symfony/finder": "7.1.*",
         "symfony/flex": "^2",
+        "symfony/form": "^7.1",
         "symfony/framework-bundle": "7.1.*",
         "symfony/runtime": "7.1.*",
+        "symfony/stimulus-bundle": "^2.22",
         "symfony/twig-bundle": "7.1.*",
         "symfony/ux-icons": "^2.22",
         "symfony/yaml": "7.1.*",
+        "symfonycasts/tailwind-bundle": "^0.6.1",
         "twig/extra-bundle": "^2.12|^3.0",
         "twig/twig": "^2.12|^3.0"
     },
@@ -70,5 +73,9 @@
             "allow-contrib": false,
             "require": "7.1.*"
         }
+    },
+    "require-dev": {
+        "symfony/stopwatch": "7.1.*",
+        "symfony/web-profiler-bundle": "7.1.*"
     }
 }

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": "30e7d11432b7e0d9c34ff0d9d2c62e21",
+    "content-hash": "8278464727736866734f277693979fb2",
     "packages": [
         {
             "name": "composer/semver",
@@ -1385,6 +1385,103 @@
             ],
             "time": "2024-10-07T08:51:54+00:00"
         },
+        {
+            "name": "symfony/form",
+            "version": "v7.1.6",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/form.git",
+                "reference": "7a48dda96fe16711fc042df38ca1a7dd4d9d6387"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/form/zipball/7a48dda96fe16711fc042df38ca1a7dd4d9d6387",
+                "reference": "7a48dda96fe16711fc042df38ca1a7dd4d9d6387",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.2",
+                "symfony/deprecation-contracts": "^2.5|^3",
+                "symfony/event-dispatcher": "^6.4|^7.0",
+                "symfony/options-resolver": "^6.4|^7.0",
+                "symfony/polyfill-ctype": "~1.8",
+                "symfony/polyfill-intl-icu": "^1.21",
+                "symfony/polyfill-mbstring": "~1.0",
+                "symfony/property-access": "^6.4|^7.0",
+                "symfony/service-contracts": "^2.5|^3"
+            },
+            "conflict": {
+                "symfony/console": "<6.4",
+                "symfony/dependency-injection": "<6.4",
+                "symfony/doctrine-bridge": "<6.4",
+                "symfony/error-handler": "<6.4",
+                "symfony/framework-bundle": "<6.4",
+                "symfony/http-kernel": "<6.4",
+                "symfony/translation": "<6.4.3|>=7.0,<7.0.3",
+                "symfony/translation-contracts": "<2.5",
+                "symfony/twig-bridge": "<6.4"
+            },
+            "require-dev": {
+                "doctrine/collections": "^1.0|^2.0",
+                "symfony/config": "^6.4|^7.0",
+                "symfony/console": "^6.4|^7.0",
+                "symfony/dependency-injection": "^6.4|^7.0",
+                "symfony/expression-language": "^6.4|^7.0",
+                "symfony/html-sanitizer": "^6.4|^7.0",
+                "symfony/http-foundation": "^6.4|^7.0",
+                "symfony/http-kernel": "^6.4|^7.0",
+                "symfony/intl": "^6.4|^7.0",
+                "symfony/security-core": "^6.4|^7.0",
+                "symfony/security-csrf": "^6.4|^7.0",
+                "symfony/translation": "^6.4.3|^7.0.3",
+                "symfony/uid": "^6.4|^7.0",
+                "symfony/validator": "^6.4|^7.0",
+                "symfony/var-dumper": "^6.4|^7.0"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Component\\Form\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Tests/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Fabien Potencier",
+                    "email": "fabien@symfony.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Allows to easily create, process and reuse HTML forms",
+            "homepage": "https://symfony.com",
+            "support": {
+                "source": "https://github.com/symfony/form/tree/v7.1.6"
+            },
+            "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-10-09T08:46:59+00:00"
+        },
         {
             "name": "symfony/framework-bundle",
             "version": "v7.1.6",
@@ -1896,6 +1993,73 @@
             ],
             "time": "2024-11-13T14:25:32+00:00"
         },
+        {
+            "name": "symfony/options-resolver",
+            "version": "v7.1.9",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/options-resolver.git",
+                "reference": "0f4099f5306a92487d13b2a4589068c36a93c447"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/options-resolver/zipball/0f4099f5306a92487d13b2a4589068c36a93c447",
+                "reference": "0f4099f5306a92487d13b2a4589068c36a93c447",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.2",
+                "symfony/deprecation-contracts": "^2.5|^3"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Component\\OptionsResolver\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Tests/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Fabien Potencier",
+                    "email": "fabien@symfony.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Provides an improved replacement for the array_replace PHP function",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "config",
+                "configuration",
+                "options"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/options-resolver/tree/v7.1.9"
+            },
+            "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-11-20T11:08:58+00:00"
+        },
         {
             "name": "symfony/polyfill-intl-grapheme",
             "version": "v1.31.0",
@@ -1974,6 +2138,90 @@
             ],
             "time": "2024-09-09T11:45:10+00:00"
         },
+        {
+            "name": "symfony/polyfill-intl-icu",
+            "version": "v1.31.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/polyfill-intl-icu.git",
+                "reference": "d80a05e9904d2c2b9b95929f3e4b5d3a8f418d78"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/polyfill-intl-icu/zipball/d80a05e9904d2c2b9b95929f3e4b5d3a8f418d78",
+                "reference": "d80a05e9904d2c2b9b95929f3e4b5d3a8f418d78",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=7.2"
+            },
+            "suggest": {
+                "ext-intl": "For best performance and support of other locales than \"en\""
+            },
+            "type": "library",
+            "extra": {
+                "thanks": {
+                    "name": "symfony/polyfill",
+                    "url": "https://github.com/symfony/polyfill"
+                }
+            },
+            "autoload": {
+                "files": [
+                    "bootstrap.php"
+                ],
+                "psr-4": {
+                    "Symfony\\Polyfill\\Intl\\Icu\\": ""
+                },
+                "classmap": [
+                    "Resources/stubs"
+                ],
+                "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": "Symfony polyfill for intl's ICU-related data and classes",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "compatibility",
+                "icu",
+                "intl",
+                "polyfill",
+                "portable",
+                "shim"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/polyfill-intl-icu/tree/v1.31.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-09-09T11:45:10+00:00"
+        },
         {
             "name": "symfony/polyfill-intl-normalizer",
             "version": "v1.31.0",
@@ -2211,6 +2459,226 @@
             ],
             "time": "2024-09-09T11:45:10+00:00"
         },
+        {
+            "name": "symfony/process",
+            "version": "v7.1.8",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/process.git",
+                "reference": "42783370fda6e538771f7c7a36e9fa2ee3a84892"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/process/zipball/42783370fda6e538771f7c7a36e9fa2ee3a84892",
+                "reference": "42783370fda6e538771f7c7a36e9fa2ee3a84892",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.2"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Component\\Process\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Tests/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Fabien Potencier",
+                    "email": "fabien@symfony.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Executes commands in sub-processes",
+            "homepage": "https://symfony.com",
+            "support": {
+                "source": "https://github.com/symfony/process/tree/v7.1.8"
+            },
+            "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-11-06T14:23:19+00:00"
+        },
+        {
+            "name": "symfony/property-access",
+            "version": "v7.1.6",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/property-access.git",
+                "reference": "975d7f7fd8fcb952364c6badc46d01a580532bf9"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/property-access/zipball/975d7f7fd8fcb952364c6badc46d01a580532bf9",
+                "reference": "975d7f7fd8fcb952364c6badc46d01a580532bf9",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.2",
+                "symfony/property-info": "^6.4|^7.0"
+            },
+            "require-dev": {
+                "symfony/cache": "^6.4|^7.0"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Component\\PropertyAccess\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Tests/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Fabien Potencier",
+                    "email": "fabien@symfony.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Provides functions to read and write from/to an object or array using a simple string notation",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "access",
+                "array",
+                "extraction",
+                "index",
+                "injection",
+                "object",
+                "property",
+                "property-path",
+                "reflection"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/property-access/tree/v7.1.6"
+            },
+            "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-09-25T14:20:29+00:00"
+        },
+        {
+            "name": "symfony/property-info",
+            "version": "v7.1.9",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/property-info.git",
+                "reference": "e9a7b2a4984457c3849afd2b1a1ec7f2994cb1b5"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/property-info/zipball/e9a7b2a4984457c3849afd2b1a1ec7f2994cb1b5",
+                "reference": "e9a7b2a4984457c3849afd2b1a1ec7f2994cb1b5",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.2",
+                "symfony/string": "^6.4|^7.0",
+                "symfony/type-info": "^7.1"
+            },
+            "conflict": {
+                "phpdocumentor/reflection-docblock": "<5.2",
+                "phpdocumentor/type-resolver": "<1.5.1",
+                "symfony/dependency-injection": "<6.4"
+            },
+            "require-dev": {
+                "phpdocumentor/reflection-docblock": "^5.2",
+                "phpstan/phpdoc-parser": "^1.0|^2.0",
+                "symfony/cache": "^6.4|^7.0",
+                "symfony/dependency-injection": "^6.4|^7.0",
+                "symfony/serializer": "^6.4|^7.0"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Component\\PropertyInfo\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Tests/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Kévin Dunglas",
+                    "email": "dunglas@gmail.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Extracts information about PHP class' properties using metadata of popular sources",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "doctrine",
+                "phpdoc",
+                "property",
+                "symfony",
+                "type",
+                "validator"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/property-info/tree/v7.1.9"
+            },
+            "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-11-27T09:50:41+00:00"
+        },
         {
             "name": "symfony/routing",
             "version": "v7.1.6",
@@ -2454,6 +2922,75 @@
             ],
             "time": "2024-04-18T09:32:20+00:00"
         },
+        {
+            "name": "symfony/stimulus-bundle",
+            "version": "v2.22.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/stimulus-bundle.git",
+                "reference": "2e840a3b12f06b33441cc3eb8907f51b806a7e4b"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/stimulus-bundle/zipball/2e840a3b12f06b33441cc3eb8907f51b806a7e4b",
+                "reference": "2e840a3b12f06b33441cc3eb8907f51b806a7e4b",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.1",
+                "symfony/config": "^5.4|^6.0|^7.0",
+                "symfony/dependency-injection": "^5.4|^6.0|^7.0",
+                "symfony/deprecation-contracts": "^2.0|^3.0",
+                "symfony/finder": "^5.4|^6.0|^7.0",
+                "symfony/http-kernel": "^5.4|^6.0|^7.0",
+                "twig/twig": "^2.15.3|^3.8"
+            },
+            "require-dev": {
+                "symfony/asset-mapper": "^6.3|^7.0",
+                "symfony/framework-bundle": "^5.4|^6.0|^7.0",
+                "symfony/phpunit-bridge": "^5.4|^6.0|^7.0",
+                "symfony/twig-bundle": "^5.4|^6.0|^7.0",
+                "zenstruck/browser": "^1.4"
+            },
+            "type": "symfony-bundle",
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\UX\\StimulusBundle\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Integration with your Symfony app & Stimulus!",
+            "keywords": [
+                "symfony-ux"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/stimulus-bundle/tree/v2.22.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-11-20T07:57:38+00:00"
+        },
         {
             "name": "symfony/string",
             "version": "v7.1.8",
@@ -2812,6 +3349,88 @@
             ],
             "time": "2024-09-25T14:20:29+00:00"
         },
+        {
+            "name": "symfony/type-info",
+            "version": "v7.1.8",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/type-info.git",
+                "reference": "51535dde21c7abf65c9d000a30bb15f6478195e6"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/type-info/zipball/51535dde21c7abf65c9d000a30bb15f6478195e6",
+                "reference": "51535dde21c7abf65c9d000a30bb15f6478195e6",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.2",
+                "psr/container": "^1.1|^2.0"
+            },
+            "conflict": {
+                "phpstan/phpdoc-parser": "<1.0",
+                "symfony/dependency-injection": "<6.4",
+                "symfony/property-info": "<6.4"
+            },
+            "require-dev": {
+                "phpstan/phpdoc-parser": "^1.0|^2.0",
+                "symfony/dependency-injection": "^6.4|^7.0",
+                "symfony/property-info": "^6.4|^7.0"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Component\\TypeInfo\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Tests/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Mathias Arlaud",
+                    "email": "mathias.arlaud@gmail.com"
+                },
+                {
+                    "name": "Baptiste LEDUC",
+                    "email": "baptiste.leduc@gmail.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Extracts PHP types information.",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "PHPStan",
+                "phpdoc",
+                "symfony",
+                "type"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/type-info/tree/v7.1.8"
+            },
+            "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-11-07T15:49:33+00:00"
+        },
         {
             "name": "symfony/ux-icons",
             "version": "v2.22.0",
@@ -3131,6 +3750,61 @@
             ],
             "time": "2024-09-25T14:20:29+00:00"
         },
+        {
+            "name": "symfonycasts/tailwind-bundle",
+            "version": "v0.6.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/SymfonyCasts/tailwind-bundle.git",
+                "reference": "28db7cfe23758cffc79f25a7c75cdb2fca52e9d9"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/SymfonyCasts/tailwind-bundle/zipball/28db7cfe23758cffc79f25a7c75cdb2fca52e9d9",
+                "reference": "28db7cfe23758cffc79f25a7c75cdb2fca52e9d9",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.1",
+                "symfony/asset-mapper": "^6.3|^7.0",
+                "symfony/cache": "^6.3|^7.0",
+                "symfony/console": "^5.4|^6.3|^7.0",
+                "symfony/http-client": "^5.4|^6.3|^7.0",
+                "symfony/process": "^5.4|^6.3|^7.0"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "^9.6",
+                "symfony/filesystem": "^6.3|^7.0",
+                "symfony/framework-bundle": "^6.3|^7.0",
+                "symfony/phpunit-bridge": "^6.3.9|^7.0"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Symfonycasts\\TailwindBundle\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Ryan Weaver",
+                    "homepage": "https://symfonycasts.com"
+                }
+            ],
+            "description": "Delightful Tailwind Support for Symfony + AssetMapper",
+            "keywords": [
+                "asset-mapper",
+                "tailwind"
+            ],
+            "support": {
+                "issues": "https://github.com/SymfonyCasts/tailwind-bundle/issues",
+                "source": "https://github.com/SymfonyCasts/tailwind-bundle/tree/v0.6.1"
+            },
+            "time": "2024-11-06T18:41:22+00:00"
+        },
         {
             "name": "twig/extra-bundle",
             "version": "v3.16.0",
@@ -3286,7 +3960,151 @@
             "time": "2024-11-29T08:27:05+00:00"
         }
     ],
-    "packages-dev": [],
+    "packages-dev": [
+        {
+            "name": "symfony/stopwatch",
+            "version": "v7.1.6",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/stopwatch.git",
+                "reference": "8b4a434e6e7faf6adedffb48783a5c75409a1a05"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/stopwatch/zipball/8b4a434e6e7faf6adedffb48783a5c75409a1a05",
+                "reference": "8b4a434e6e7faf6adedffb48783a5c75409a1a05",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.2",
+                "symfony/service-contracts": "^2.5|^3"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Component\\Stopwatch\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Tests/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Fabien Potencier",
+                    "email": "fabien@symfony.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Provides a way to profile code",
+            "homepage": "https://symfony.com",
+            "support": {
+                "source": "https://github.com/symfony/stopwatch/tree/v7.1.6"
+            },
+            "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-09-25T14:20:29+00:00"
+        },
+        {
+            "name": "symfony/web-profiler-bundle",
+            "version": "v7.1.9",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/web-profiler-bundle.git",
+                "reference": "6f26474e0e8ff746cb0abaddf9ebe0b067172fb1"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/web-profiler-bundle/zipball/6f26474e0e8ff746cb0abaddf9ebe0b067172fb1",
+                "reference": "6f26474e0e8ff746cb0abaddf9ebe0b067172fb1",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.2",
+                "symfony/config": "^6.4|^7.0",
+                "symfony/framework-bundle": "^6.4|^7.0",
+                "symfony/http-kernel": "^6.4|^7.0",
+                "symfony/routing": "^6.4|^7.0",
+                "symfony/twig-bundle": "^6.4|^7.0",
+                "twig/twig": "^3.10"
+            },
+            "conflict": {
+                "symfony/form": "<6.4",
+                "symfony/mailer": "<6.4",
+                "symfony/messenger": "<6.4"
+            },
+            "require-dev": {
+                "symfony/browser-kit": "^6.4|^7.0",
+                "symfony/console": "^6.4|^7.0",
+                "symfony/css-selector": "^6.4|^7.0",
+                "symfony/stopwatch": "^6.4|^7.0"
+            },
+            "type": "symfony-bundle",
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Bundle\\WebProfilerBundle\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Tests/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Fabien Potencier",
+                    "email": "fabien@symfony.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Provides a development tool that gives detailed information about the execution of any request",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "dev"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/web-profiler-bundle/tree/v7.1.9"
+            },
+            "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-11-19T10:11:44+00:00"
+        }
+    ],
     "aliases": [],
     "minimum-stability": "stable",
     "stability-flags": {},

config/bundles.php

@@ -5,4 +5,7 @@ return [
     Symfony\Bundle\TwigBundle\TwigBundle::class => ['all' => true],
     Twig\Extra\TwigExtraBundle\TwigExtraBundle::class => ['all' => true],
     Symfony\UX\Icons\UXIconsBundle::class => ['all' => true],
+    Symfonycasts\TailwindBundle\SymfonycastsTailwindBundle::class => ['all' => true],
+    Symfony\UX\StimulusBundle\StimulusBundle::class => ['all' => true],
+    Symfony\Bundle\WebProfilerBundle\WebProfilerBundle::class => ['dev' => true, 'test' => true],
 ];

config/packages/twig.yaml

@@ -1,5 +1,7 @@
 twig:
     file_name_pattern: '*.twig'
+    globals:
+        routing_service: '@App\Service\Twig\RoutingService'
 
 when@test:
     twig:

config/packages/web_profiler.yaml

@@ -0,0 +1,17 @@
+when@dev:
+    web_profiler:
+        toolbar: true
+        intercept_redirects: false
+
+    framework:
+        profiler:
+            only_exceptions: false
+            collect_serializer_data: true
+
+when@test:
+    web_profiler:
+        toolbar: false
+        intercept_redirects: false
+
+    framework:
+        profiler: { collect: false }

config/routes/web_profiler.yaml

@@ -0,0 +1,8 @@
+when@dev:
+    web_profiler_wdt:
+        resource: '@WebProfilerBundle/Resources/config/routing/wdt.xml'
+        prefix: /_wdt
+
+    web_profiler_profiler:
+        resource: '@WebProfilerBundle/Resources/config/routing/profiler.xml'
+        prefix: /_profiler

importmap.php

@@ -16,4 +16,10 @@ return [
         'path' => './assets/app.js',
         'entrypoint' => true,
     ],
+    '@hotwired/stimulus' => [
+        'version' => '3.2.2',
+    ],
+    '@symfony/stimulus-bundle' => [
+        'path' => './vendor/symfony/stimulus-bundle/assets/dist/loader.js',
+    ],
 ];

src/Controller/EntrypointController.php

@@ -0,0 +1,18 @@
+<?php
+declare(strict_types=1);
+
+namespace App\Controller;
+
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Attribute\Route;
+
+class EntrypointController extends AbstractController
+{
+    #[Route(path: '/', name: 'app_root', methods: Request::METHOD_GET)]
+    public function __invoke(): Response
+    {
+        return $this->redirectToRoute('app_home');
+    }
+}

src/Controller/HomeController.php

@@ -2,6 +2,7 @@
 
 namespace App\Controller;
 
+use App\Forms\UploadFileForm;
 use App\Service\FileSystemService;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\HttpFoundation\Request;
@@ -10,11 +11,24 @@ use Symfony\Component\Routing\Attribute\Route;
 
 class HomeController extends AbstractController
 {
-    #[Route(path: '/', name: 'app_home', methods: Request::METHOD_GET)]
-    public function __invoke(
-        FileSystemService $fileSystemService
-    ): Response
+    #[Route(
+        path: '/files/{dirs?}',
+        name: 'app_home',
+        requirements: ['dirs' => '.+'],
+        defaults: ['dirs' => ''],
+        methods: [Request::METHOD_GET]
+    )]
+    public function __invoke(FileSystemService $fileSystemService, string $dirs): Response
     {
-        return $this->render('home.html.twig', ['content' => $fileSystemService->getDirs()]);
+        if ($fileSystemService->isFile(substr_replace($dirs, '', -1))) {
+            return $this->render('file.html.twig', [
+                'file' => $fileSystemService->getFile((string) substr_replace($dirs, '', -1)),
+            ]);
+        }
+
+        return $this->render('home.html.twig', [
+            'content' => $fileSystemService->getDirs($dirs),
+            'fileForm' => $this->createForm(UploadFileForm::class),
+        ]);
     }
 }

src/Controller/UploadController.php

@@ -0,0 +1,31 @@
+<?php
+declare(strict_types=1);
+
+namespace App\Controller;
+
+use App\Forms\UploadFileForm;
+use App\Objects\UploadedFileData;
+use App\Service\FileSystemService;
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Attribute\Route;
+
+class UploadController extends AbstractController
+{
+    #[Route(path: '/upload', name: 'app_upload', methods: Request::METHOD_POST)]
+    public function __invoke(
+        FileSystemService $fileSystemService,
+        Request $request,
+    ): Response
+    {
+        $fileData = new UploadedFileData();
+        $form  = $this->createForm(UploadFileForm::class, $fileData)->handleRequest($request);
+
+        if ($form->isSubmitted() && $form->isValid()) {
+            $fileSystemService->uploadFile($fileData->files);
+        }
+
+        return $this->redirectToRoute('app_home');
+    }
+}

src/Forms/UploadFileForm.php

@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Forms;
+
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\FileType;
+use Symfony\Component\Form\FormBuilderInterface;
+use Symfony\Component\Routing\Generator\UrlGeneratorInterface;
+
+class UploadFileForm extends AbstractType
+{
+    public function __construct(private readonly UrlGeneratorInterface $urlGenerator)
+    {
+    }
+
+    public function buildForm(FormBuilderInterface $builder, array $options)
+    {
+        $builder
+            ->setAction($this->urlGenerator->generate('app_upload'))
+            ->add('files', FileType::class, [
+            'attr' => ['class' => 'hidden'],
+            'multiple' => true,
+        ]);
+    }
+}

src/Objects/DirContent.php

@@ -6,22 +6,25 @@ namespace App\Objects;
 
 use SplFileInfo;
 
-class DirContent
+readonly class DirContent
 {
     private function __construct(
-        private readonly string $name,
-        private readonly int $size,
-        private readonly string $type,
-    )
-    {
+        private string $name,
+        private int $size,
+        private string $type,
+        private string $path,
+        private string $content,
+    ) {
     }
 
-    public static function make(SplFileInfo $fileInfo): DirContent
+    public static function make(SplFileInfo $fileInfo, string $content = ''): DirContent
     {
         return new self(
             $fileInfo->getBasename(),
             $fileInfo->getSize() ?? 0,
             $fileInfo->getType() ?? 'N/A',
+            $fileInfo->getPath(),
+            $content
         );
     }
 
@@ -44,10 +47,20 @@ class DirContent
         return $this->type;
     }
 
-    private function getHumanReadableSize()
+    public function getPath(): string
+    {
+        return $this->path;
+    }
+
+    public function getContent(): string
+    {
+        return $this->content;
+    }
+
+    private function getHumanReadableSize(): string
     {
         $bytes = $this->size;
-        $size = array('B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB');
+        $size = ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
         $factor = floor((strlen((string) $bytes) - 1) / 3);
 
         return sprintf("%.1f %s", $bytes / (1024 ** $factor), $size[$factor]);

src/Objects/UploadedFileData.php

@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Objects;
+
+use Symfony\Component\HttpFoundation\File\UploadedFile;
+
+class UploadedFileData
+{
+    /**
+     * @var UploadedFile[] $files
+     */
+    public array $files;
+}

src/Service/FileSystemService.php

@@ -4,23 +4,27 @@ namespace App\Service;
 
 use App\Objects\DirContent;
 use Symfony\Component\DependencyInjection\Attribute\Autowire;
+use Symfony\Component\Filesystem\Exception\IOException;
+use Symfony\Component\Filesystem\Filesystem;
 use Symfony\Component\Finder\Finder;
+use Symfony\Component\HttpFoundation\File\UploadedFile;
 
 class FileSystemService
 {
     public function __construct(
         #[Autowire(env: 'DATA_DIR')]
-        private readonly string $dir
+        private readonly string $dir,
+         private readonly Filesystem $filesystem,
     ) {
     }
 
     /**
      * @return DirContent[]
      */
-    public function getDirs(): array
+    public function getDirs(string $dirs): array
     {
         $finder = new Finder();
-        $finder->in($this->dir);
+        $finder->in($this->getTotalPath($dirs));
 
         $contents = [];
 
@@ -30,4 +34,47 @@ class FileSystemService
 
         return $contents;
     }
+
+    /**
+     * @param UploadedFile[] $files
+     */
+    public function uploadFile(array $files): void
+    {
+        foreach ($files as $file) {
+            $this->filesystem->dumpFile($this->getTotalPath($file->getClientOriginalName()), $file->getContent());
+        }
+    }
+
+    public function isFile(string $dirs): bool
+    {
+        try {
+            $this->filesystem->readFile($this->getTotalPath($dirs));
+        } catch (IOException) {
+            return false;
+        }
+
+        return true;
+    }
+
+    public function getFile(string $filePath): DirContent
+    {
+        $dirs = explode('/', $filePath);
+        $fileName = array_pop($dirs);
+
+        $finder = new Finder();
+        $finder->in($this->getTotalPath(implode('/', $dirs)));
+
+        foreach ($finder as $file) {
+            if ($file->getFilename() === $fileName) {
+                return DirContent::make($file, $this->filesystem->readFile($this->getTotalPath($filePath)));
+            }
+        }
+
+        throw new \RuntimeException('File not found');
+    }
+
+    private function getTotalPath(string $filePath): string
+    {
+        return $this->dir . '/' . $filePath;
+    }
 }

src/Service/Twig/RoutingService.php

@@ -0,0 +1,25 @@
+<?php
+declare(strict_types=1);
+
+namespace App\Service\Twig;
+
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\Routing\Generator\UrlGeneratorInterface;
+
+class RoutingService
+{
+    public function __construct(private UrlGeneratorInterface $urlGenerator)
+    {
+    }
+
+    public function goBack(Request $request): string
+    {
+        $dirsString = $request->attributes->get('dirs', '');
+        $dirs = explode('/', $dirsString);
+        if (array_pop($dirs) === '') {
+            array_pop($dirs);
+        }
+
+        return $this->urlGenerator->generate('app_home', ['dirs' => implode('/', $dirs)]);
+    }
+}

symfony.lock

@@ -82,6 +82,20 @@
             "config/routes.yaml"
         ]
     },
+    "symfony/stimulus-bundle": {
+        "version": "2.22",
+        "recipe": {
+            "repo": "github.com/symfony/recipes",
+            "branch": "main",
+            "version": "2.13",
+            "ref": "6acd9ff4f7fd5626d2962109bd4ebab351d43c43"
+        },
+        "files": [
+            "assets/bootstrap.js",
+            "assets/controllers.json",
+            "assets/controllers/hello_controller.js"
+        ]
+    },
     "symfony/twig-bundle": {
         "version": "7.1",
         "recipe": {
@@ -107,6 +121,22 @@
             "assets/icons/symfony.svg"
         ]
     },
+    "symfony/web-profiler-bundle": {
+        "version": "7.1",
+        "recipe": {
+            "repo": "github.com/symfony/recipes",
+            "branch": "main",
+            "version": "6.1",
+            "ref": "e42b3f0177df239add25373083a564e5ead4e13a"
+        },
+        "files": [
+            "config/packages/web_profiler.yaml",
+            "config/routes/web_profiler.yaml"
+        ]
+    },
+    "symfonycasts/tailwind-bundle": {
+        "version": "v0.6.1"
+    },
     "twig/extra-bundle": {
         "version": "v3.16.0"
     }

tailwind.config.js

@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: [
+        "./assets/**/*.js",
+        "./templates/**/*.html.twig",
+    ],
+    plugins: [
+        require("@tailwindcss/forms")
+    ],
+    darkMode: 'class',
+}
+

templates/_partials/_row.html.twig

@@ -1,11 +1,26 @@
-<tr>
-    <td>
-        {% if file.type == 'dir' %}
-            {{ ux_icon('folder:closed', {height: '32px', width: '32px'}) }}
-        {% else %}
-            {{ ux_icon('file:default', {height: '32px', width: '32px'}) }}
-        {% endif %}
+{% if file.name == '..' %}
+    {% set link = routing_service.goBack(app.request) %}
+{% else %}
+    {% set link = path('app_home', {dirs: app.request.attributes.get('dirs', '/') ~ file.name ~ '/'}) %}
+{% endif %}
+
+
+<tr class="border-b">
+    <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+        <a href="{{ link }}">
+            {% if file.type == 'dir' %}
+                {{ ux_icon('folder:closed', {height: '32px', width: '32px'}) }}
+            {% else %}
+                {{ ux_icon('file:default', {height: '32px', width: '32px'}) }}
+            {% endif %}
+        </a>
+    </th>
+    <td class="px-6 py-4">
+        <a href="{{ link }}">
+            {{ file.name }}
+        </a>
     </td>
-    <td>{{ file.name }}</td>
-    <td>{{ file.size }}</td>
-</tr>
+    <td class="px-6 py-4">
+        {{ file.size }}
+    </td>
+</tr>

templates/_partials/_table.html.twig

@@ -1,13 +1,41 @@
-<table class="table table-striped table-bordered w-75 mt-5">
-    <thead>
-    <tr>
-        <td>Expand</td>
-        <th>Name</th>
-        <th>Size</th>
-    </thead>
-    <tbody>
-    {% for dirContent in content %}
-    {% include '_partials/_row.html.twig' with {file: dirContent} %}
-    {% endfor %}
-    </tbody>
-</table>
+<div class="max-w-4xl overflow-x-auto shadow-md sm:rounded-lg ">
+    <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
+        <thead class="text-xs text-gray-700 uppercase bg-gray-200 dark:bg-gray-700 dark:text-gray-400">
+        <tr>
+            <th scope="col" class="px-6 py-3" style="width: 5%;">
+
+            </th>
+            <th scope="col" class="px-6 py-3">
+                name
+            </th>
+            <th scope="col" class="px-6 py-3">
+                Size
+            </th>
+        </tr>
+        </thead>
+        <tbody>
+        {% if app.request.requestUri != '/files' %}
+            {% include '_partials/_row.html.twig' with {file: {name: '..', size: '-', type: 'dir'}} %}
+        {% endif %}
+        {% for dirContent in content %}
+            {% include '_partials/_row.html.twig' with {file: dirContent} %}
+        {% endfor %}
+        </tbody>
+    </table>
+</div>
+
+
+{{ form_start(fileForm, {'attr': {'data-controller': 'upload-file'}}) }}
+<div class="flex items-center justify-center max-w-4xl mt-5">
+    <label for="upload_file_form_files"
+           class="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-gray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600">
+        <div class="flex flex-col items-center justify-center pt-5 pb-6">
+            {{ ux_icon('file:upload', {height: '64px', width: '64px'}) }}
+            <p class="mb-2 text-sm text-gray-500 dark:text-gray-400"><span class="font-semibold">Click to upload</span>
+                or drag and drop</p>
+        </div>
+        {{ form_widget(fileForm.files) }}
+        <button type="submit" class="hidden"></button>
+    </label>
+</div>
+{{ form_end(fileForm) }}

templates/base.html.twig

@@ -4,7 +4,9 @@
         <meta charset="UTF-8">
         <title>Files | {% block title %}{% endblock %}</title>
         <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text><text y=%221.3em%22 x=%220.2em%22 font-size=%2276%22 fill=%22%23fff%22>sf</text></svg>">
-        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+        <link href="https://cdn.jsdelivr.net/npm/flowbite@2.5.2/dist/flowbite.min.css" rel="stylesheet" />
+        <script src="https://cdn.jsdelivr.net/npm/flowbite@2.5.2/dist/flowbite.min.js"></script>
+
         {% block stylesheets %}
         {% endblock %}
 
@@ -12,7 +14,7 @@
             {% block importmap %}{{ importmap('app') }}{% endblock %}
         {% endblock %}
     </head>
-    <body>
+    <body data-turbo="true">
         {% block body %}{% endblock %}
     </body>
 </html>

templates/file.html.twig

@@ -0,0 +1,21 @@
+{% extends 'base.html.twig' %}
+
+{% block title %}
+    {{ file.name }}
+{% endblock %}
+
+{% block body %}
+    <div class="max-w-2xl mx-auto my-8 p-6 bg-white shadow-lg rounded-lg border">
+        <a href="{{ routing_service.goBack(app.request) }}" class="inline-flex items-center text-blue-600 hover:text-blue-800 font-medium transition-colors">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
+                 stroke="currentColor" class="w-5 h-5 mr-2">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/>
+            </svg>
+            Back
+        </a>
+
+        <div class="mt-6 text-gray-700 overflow-auto max-h-96">
+            <p class="whitespace-pre-wrap leading-relaxed break-all text-balance">{{ file.content|raw }}</p>
+        </div>
+    </div>
+{% endblock %}

templates/home.html.twig

@@ -3,9 +3,7 @@
 {% block title %}Home{% endblock %}
 
 {% block body %}
-    <center class="mt-5">
-        <h1>Welcome to the File Explorer</h1>
-        <p>Use the navigation bar to explore the files and directories.</p>
+    <center class="container mt-5 mx-auto">
         {% include '_partials/_table.html.twig' %}
     </center>
-{% endblock %}
+{% endblock %}