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 {