save movies release date in BDD, remove unused badge, add help to export movie from letterboxd

assets/bootstrap.js

@@ -2,11 +2,13 @@ import { startStimulusApp } from 'vite-plugin-symfony/stimulus/helpers';
 import DropdownController from './controllers/dropdown_controller.js';
 import ImportModalController from './controllers/import_modal_controller.js';
 import ImportStatusController from './controllers/import_status_controller.js';
+import ImportHelpController from './controllers/import_help_controller.js';
 
 const app = startStimulusApp();
 app.register('dropdown', DropdownController);
 app.register('import-modal', ImportModalController);
 app.register('import-status', ImportStatusController);
+app.register('import-help', ImportHelpController);
 
 // Register React components for {{ react_component() }} Twig function.
 // We register them manually because @symfony/ux-react's registerReactControllerComponents

assets/controllers/import_help_controller.js

@@ -0,0 +1,20 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+    static targets = ['overlay'];
+
+    open(event) {
+        event.stopPropagation();
+        this.overlayTarget.hidden = false;
+    }
+
+    close() {
+        this.overlayTarget.hidden = true;
+    }
+
+    closeOnBackdrop(event) {
+        if (event.target === this.overlayTarget) {
+            this.close();
+        }
+    }
+}

assets/controllers/import_status_controller.js

@@ -1,7 +1,7 @@
 import { Controller } from '@hotwired/stimulus';
 
 export default class extends Controller {
-    static targets = ['item', 'importBtn', 'badge'];
+    static targets = ['item', 'importBtn'];
 
     connect() {
         this._poll();
@@ -50,7 +50,6 @@ export default class extends Controller {
         this.importBtnTarget.disabled = false;
         this.importBtnTarget.textContent = 'Importer ses films';
         this._removeStatus();
-        this.badgeTarget.hidden = true;
     }
 
     _showActive(data) {
@@ -62,7 +61,6 @@ export default class extends Controller {
             : 0;
 
         this._setStatus(`${progress}% — ${data.totalFilms} films`, 'active');
-        this.badgeTarget.hidden = true;
     }
 
     _showCompleted(data) {
@@ -71,14 +69,12 @@ export default class extends Controller {
 
         const imported = data.totalFilms - data.failedFilms;
         this._setStatus(`Dernier import : ${imported}/${data.totalFilms} films`, 'completed');
-        this.badgeTarget.hidden = true;
     }
 
     _showFailed() {
         this.importBtnTarget.disabled = false;
         this.importBtnTarget.textContent = 'Importer ses films';
         this._setStatus('Dernier import : échoué', 'failed');
-        this.badgeTarget.hidden = true;
     }
 
     _setStatus(text, type) {

assets/styles/app.css

@@ -296,22 +296,6 @@ body {
 
 /* ── Badge ── */
 
-.badge {
-    position: absolute;
-    top: 2px;
-    right: 2px;
-    background: var(--orange);
-    color: white;
-    font-size: 10px;
-    font-weight: 700;
-    min-width: 16px;
-    height: 16px;
-    border-radius: 8px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0 4px;
-}
 
 /* ── Dropdown ── */
 
@@ -367,6 +351,70 @@ body {
     margin: 0;
 }
 
+/* ── Dropdown item row ── */
+
+.dropdown-item-row {
+    display: flex;
+    align-items: center;
+}
+
+.dropdown-item-row .dropdown-item {
+    flex: 1;
+}
+
+.info-btn {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    border: 1.5px solid var(--text-faint);
+    background: none;
+    color: var(--text-faint);
+    font-size: 12px;
+    font-weight: 700;
+    font-style: italic;
+    font-family: 'Georgia', serif;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    margin-right: 10px;
+    transition: border-color 0.15s, color 0.15s, background 0.15s;
+}
+
+.info-btn:hover {
+    border-color: var(--orange);
+    color: var(--orange);
+    background: var(--surface-tint);
+}
+
+/* ── Help steps ── */
+
+.help-steps {
+    margin: 0;
+    padding-left: 20px;
+    color: var(--text-muted);
+    font-size: 14px;
+    line-height: 1.8;
+}
+
+.help-steps code {
+    background: var(--surface-tint);
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-size: 13px;
+}
+
+.help-steps a {
+    color: var(--orange);
+    font-weight: 600;
+    text-decoration: none;
+}
+
+.help-steps a:hover {
+    text-decoration: underline;
+}
+
 /* ── Import status ── */
 
 .import-status-item {

migrations/Version20260331000002.php

@@ -0,0 +1,26 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+final class Version20260331000002 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return 'Add year column to movie table';
+    }
+
+    public function up(Schema $schema): void
+    {
+        $this->addSql('ALTER TABLE movie ADD year INT DEFAULT NULL');
+    }
+
+    public function down(Schema $schema): void
+    {
+        $this->addSql('ALTER TABLE movie DROP COLUMN year');
+    }
+}

src/Entity/Movie.php

@@ -24,6 +24,9 @@ class Movie
     #[ORM\Column(length: 255)]
     private ?string $title = null;
 
+    #[ORM\Column(nullable: true)]
+    private ?int $year = null;
+
     /**
      * @var Collection<int, MovieRole>
      */
@@ -76,6 +79,18 @@ class Movie
         return $this;
     }
 
+    public function getYear(): ?int
+    {
+        return $this->year;
+    }
+
+    public function setYear(?int $year): static
+    {
+        $this->year = $year;
+
+        return $this;
+    }
+
     /**
      * @return Collection<int, MovieRole>
      */

src/Service/FilmImporter.php

@@ -38,7 +38,8 @@ readonly class FilmImporter
         $movie = new Movie()
             ->setLtbxdRef($ltbxdMovie->getLtbxdRef())
             ->setTitle($ltbxdMovie->getName())
-            ->setTmdbId($tmdbMovie->getId());
+            ->setTmdbId($tmdbMovie->getId())
+            ->setYear($ltbxdMovie->getYear());
 
         $this->em->persist($movie);
 

templates/_navbar.html.twig

@@ -1,5 +1,5 @@
 {% if app.user %}
-<div data-controller="import-modal">
+<div data-controller="import-modal import-help">
 <nav class="navbar">
     <div class="navbar-left">
         <a href="{{ path('app_homepage') }}" class="navbar-brand"><span class="brand-prefix">Ltbxd</span>Actorle</a>
@@ -19,13 +19,17 @@
                     <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
                     <circle cx="12" cy="7" r="4"/>
                 </svg>
-                <span class="badge" data-import-status-target="badge" hidden></span>
             </button>
             <div class="dropdown-menu" data-dropdown-target="menu" hidden>
                 <div class="import-status-item" data-import-status-target="item">
+                    <div class="dropdown-item-row">
                         <button class="dropdown-item" data-action="click->import-modal#open" data-import-status-target="importBtn">
                             Importer ses films
                         </button>
+                        <button class="info-btn" data-action="click->import-help#open" title="Comment exporter depuis Letterboxd">
+                            i
+                        </button>
+                    </div>
                 </div>
                 <a href="{{ path('app_logout') }}" class="dropdown-item">Se déconnecter</a>
             </div>
@@ -52,6 +56,25 @@
         </div>
     </div>
 </div>
+{# Help Modal #}
+<div class="modal-overlay" data-import-help-target="overlay" data-action="click->import-help#closeOnBackdrop" hidden>
+    <div class="modal">
+        <div class="modal-header">
+            <h2>Comment exporter ses films</h2>
+            <button class="modal-close" data-action="click->import-help#close">&times;</button>
+        </div>
+        <div class="modal-body">
+            <ol class="help-steps">
+                <li>Connectez-vous à votre compte <a href="https://letterboxd.com" target="_blank" rel="noopener noreferrer">Letterboxd</a></li>
+                <li>Allez dans <strong>Settings</strong> (Paramètres)</li>
+                <li>Cliquez sur l'onglet <strong>Import &amp; Export</strong></li>
+                <li>Cliquez sur <strong>Export Your Data</strong></li>
+                <li>Un fichier ZIP sera téléchargé. Décompressez-le.</li>
+                <li>Utilisez le fichier <code>watched.csv</code> pour l'import.</li>
+            </ol>
+        </div>
+    </div>
+</div>
 </div>
 {% else %}
 <nav class="navbar">