{# # ============================================================================ # PAGE: MONALISIA — Studio d'infographies # ============================================================================ # # Interface unifiée : galerie masonry + drawer de création. # Structure : top bar sticky · galerie · drawer droit. # # DONNÉES REQUISES (depuis MonalisiaController::index) # | tokenStats | array | {remaining, energyConsumptionWh} | # | defaultPrimaryColor | string | Couleur primaire par défaut (#hex) | # | defaultSecondaryColor | string | Couleur secondaire par défaut (#hex) | # | infographics | array | Collection de MonalisiaInfographic | # | totalItems | int | Nombre total d'infographies | # ============================================================================ #} {% extends 'base.html.twig' %} {% block title %}Monalisia — Studio d'infographies{% endblock %} {% block main_class %}p-0 overflow-hidden bg-[#F5F5F5]{% endblock %} {% block body %} {% set mnColor = tool_color_details['monalisia'] %} {% set currentPlanSlug = app.user.company ? 'b2b' : (app.user.plan ? app.user.plan.slug : 'freemium') %} {% set createTooltipHtml %}{% include '_molecules/upgrade-tooltip/upgrade-tooltip.html.twig' with { minTokens: monalisiaMinTokens, currentPlanSlug: currentPlanSlug, upgradeUrl: path('app_upgrade') } only %}{% endset %}
{# ══════════════════════════════════════════ EN-TÊTE DE PAGE ══════════════════════════════════════════ #}
{# Branding #}
{% include '_atoms/icon/icon.html.twig' with { name: 'bubul-monalisia', size: 'lg', colorPrimary: mnColor.primary, colorSecondary: mnColor.secondary } only %}

Monalisia

{{ totalItems }} créée{{ totalItems != 1 ? 's' : '' }} {% if medianTokenCost is defined and medianTokenCost > 0 %} {% endif %}
{# Stats + action #}
{#- Plus d'infobulle « Passer en Pro » ici : ce bouton n'ouvre que le panneau, il ne génère rien. La barrière de tokens vit sur le bouton « Générer », au pied du panneau — c'est là qu'elle s'applique vraiment, et là qu'elle se comprend. -#} {# `data-tour-step` sur ce bouton : le tutoriel a besoin de lui pour OUVRIR le tiroir avant de désigner ce qu'il contient — sans quoi ses étapes visent des éléments hors de l'écran. Voir docs/tours.md. L'ancre est posée que la création soit autorisée ou non : elle identifie ce bouton, elle n'accorde rien. Réservée au seul cas autorisé, elle disparaissait pour un compte à court de tokens — et le tutoriel commentait alors un tiroir qu'il n'avait aucun moyen d'ouvrir. #} {% include '_atoms/button/button.html.twig' with { label: 'Créer', size: 'md', icon: 'plus', gradientFrom: mnColor.primary, gradientTo: mnColor.secondary, attr: { 'data-action': 'click->monalisia--generator#openDrawer', 'data-tour-step': 'monalisia-ouvrir' } } only %}
{# ══════════════════════════════════════════ GALERIE ══════════════════════════════════════════ #}
{# État vide #}
{% include '_atoms/icon/icon.html.twig' with { name: 'bubul-monalisia', size: '2xl', colorPrimary: mnColor.primary, colorSecondary: mnColor.secondary } only %}

Votre studio est vide

Transformez un texte ou un PDF en infographie visuelle prête à l'emploi avec Monalisia.

{#- Plus d'infobulle « Passer en Pro » ici : ce bouton n'ouvre que le panneau, il ne génère rien. La barrière de tokens vit sur le bouton « Générer », au pied du panneau — c'est là qu'elle s'applique vraiment, et là qu'elle se comprend. -#} {# `data-tour-step` sur ce bouton : le tutoriel a besoin de lui pour OUVRIR le tiroir avant de désigner ce qu'il contient — sans quoi ses étapes visent des éléments hors de l'écran. Voir docs/tours.md. L'ancre est posée que la création soit autorisée ou non : elle identifie ce bouton, elle n'accorde rien. Réservée au seul cas autorisé, elle disparaissait pour un compte à court de tokens — et le tutoriel commentait alors un tiroir qu'il n'avait aucun moyen d'ouvrir. #} {% include '_atoms/button/button.html.twig' with { label: 'Créer ma première infographie', size: 'lg', icon: 'plus', gradientFrom: mnColor.primary, gradientTo: mnColor.secondary, attr: { 'data-action': 'click->monalisia--generator#openDrawer', 'data-tour-step': 'monalisia-ouvrir' } } only %}
{# Grille masonry #}
{% for infographic in infographics %} {% include 'monalisia/_infographic_card.html.twig' with {infographic: infographic} only %} {% endfor %}
{# Sentinel scroll infini #} {% if hasMore %}
Chargement…
{% endif %}
{# ══════════════════════════════════════════ BACKDROP DRAWER ══════════════════════════════════════════ #} {# ══════════════════════════════════════════ DRAWER — FORMULAIRE DE CRÉATION ══════════════════════════════════════════ #}
{# Header #}
{% include '_atoms/icon/icon.html.twig' with { name: 'bubul-monalisia', size: 'sm', colorPrimary: mnColor.primary, colorSecondary: mnColor.secondary } only %}

Nouvelle infographie

{# Corps scrollable #}
{# Formulaire #}
{# ── Étape 1 : Mode ── #}
1 Mode de création
{# ── Étape 2 : Contenu ── #}
2 Contenu
{# Champ Nom (commun aux deux modes) #}
{# Panel Texte #}
Décrivez votre infographie {% include '_atoms/button/button.html.twig' with { label: 'Améliorer', variant: 'soft-primary', size: 'sm', icon: 'magic-stick', type: 'button', radius: 'full', attr: { 'data-action': 'click->monalisia--generator#improvePrompt', 'data-monalisia--generator-target': 'aiButton' } } only %}
0 / {{ constant('App\\Config\\AppLimits::MONALISIA_PROMPT_MAX_LENGTH')|number_format(0, ',', ' ') }}
{# Panel PDF #}
{# ── Étape 3 : Couleurs ── #}
3 Couleurs
{% include '_atoms/button/button.html.twig' with { label: 'Identifier mes couleurs', variant: 'soft-primary', size: 'md', icon: 'palette-2', type: 'button', radius: 'xl', attr: { 'data-action': 'click->monalisia--generator#extractColors', 'data-monalisia--generator-target': 'extractColorsBtn' } } only %}
{# ── Étape 4 : Format ── #}
4 Format
{# État de chargement (remplace le formulaire) #}
{# Footer drawer — bouton générer #}
{#- LA BARRIÈRE DE TOKENS EST ICI, et nulle part ailleurs : c'est ce bouton qui déclenche la dépense. Elle était posée sur « Créer », qui n'ouvre que le panneau — l'utilisateur se voyait refuser l'entrée sans avoir vu ce qu'il y avait dedans, et le tutoriel de l'outil devenait inatteignable avec elle. -#} {% include '_atoms/button/button.html.twig' with { label: 'Générer l\'infographie', size: 'lg', icon: 'magic-stick', type: 'button', width: 'full', gradientFrom: mnColor.primary, gradientTo: mnColor.secondary, disabled: not canCreate, attr: { 'data-monalisia--generator-target': 'submitBtn', 'data-action': 'click->monalisia--generator#generate' } } only %}

Monalisia peut faire des erreurs.

{# /drawer #} {# ══════════════════════════════════════════ MODAL — SUPPRIMER L'INFOGRAPHIE ══════════════════════════════════════════ #} {% embed '_organisms/delete-modal/delete-modal.html.twig' with { title: 'Supprimer cette infographie ?', modalAttr: {'data-monalisia--generator-target': 'deleteModal', 'data-action': 'keydown.esc@window->monalisia--generator#closeDeleteModal', 'style': 'z-index: 110;'}, cancelAttr: {'data-action': 'click->monalisia--generator#closeDeleteModal'}, confirmAttr: {'data-action': 'click->monalisia--generator#confirmDelete'} } only %} {% block description %}

sera supprimée définitivement.

{% endblock %} {% endembed %} {# ══════════════════════════════════════════ MODAL — RENOMMER L'INFOGRAPHIE ══════════════════════════════════════════ #} {% embed '_organisms/rename-modal/rename-modal.html.twig' with { title: "Renommer l'infographie", subtitle: 'Donnez un nom plus parlant à votre infographie.', placeholder: "Nom de l'infographie...", color: mnColor, modalAttr: {'data-monalisia--generator-target': 'renameModal', 'style': 'z-index: 110;'}, inputAttr: { 'data-monalisia--generator-target': 'renameInput', 'maxlength': '255' }, cancelAttr: {'data-action': 'click->monalisia--generator#closeRenameModal'}, confirmAttr: {'data-action': 'click->monalisia--generator#saveRename'} } only %} {% block hiddenInputs %} {% endblock %} {% endembed %} {# ══════════════════════════════════════════ LIGHTBOX ══════════════════════════════════════════ #}
{% endblock %}