feat: AI bulk generate button + progress modal on product list (P0 #2)

src/Resources/app/administration/src/extension/component/frosh-ai-bulk-generate-modal/frosh-ai-bulk-generate-modal.html.twig

@@ -0,0 +1,130 @@
+{% block frosh_ai_bulk_generate_modal %}
+<sw-modal
+    class="frosh-ai-bulk-generate-modal"
+    :title="$tc('frosh-ai-product.bulk.title')"
+    @modal-close="onClose"
+>
+    {# Options phase: collect tone / max words before enqueueing the job. #}
+    <div
+        v-if="phase === 'options'"
+        class="frosh-ai-bulk-generate-modal__body"
+    >
+        <p class="frosh-ai-bulk-generate-modal__intro">
+            {{ $tc('frosh-ai-product.bulk.intro') }}
+        </p>
+        <p class="frosh-ai-bulk-generate-modal__count">
+            {{ $tc('frosh-ai-product.bulk.selectedCount', selectedCount, { count: selectedCount }) }}
+        </p>
+        <p class="frosh-ai-bulk-generate-modal__language">
+            {{ languageHint }}
+        </p>
+
+        <mt-select
+            class="frosh-ai-bulk-generate-modal__tone"
+            v-model="tone"
+            :options="toneOptions"
+            :label="$tc('frosh-ai-product.bulk.tone')"
+            :disabled="isSubmitting"
+            hide-clearable-button
+        />
+
+        <mt-number-field
+            class="frosh-ai-bulk-generate-modal__max-words"
+            v-model="maxWords"
+            number-type="int"
+            :min="20"
+            :max="2000"
+            :label="$tc('frosh-ai-product.bulk.maxWords')"
+            :help-text="$tc('frosh-ai-product.bulk.maxWordsHelp')"
+            :disabled="isSubmitting"
+        />
+
+        <p
+            v-if="fieldError"
+            class="frosh-ai-bulk-generate-modal__error"
+        >
+            {{ fieldError }}
+        </p>
+    </div>
+
+    {# Progress phase: poll the bulk job until it reaches a terminal status. #}
+    <div
+        v-if="phase === 'progress'"
+        class="frosh-ai-bulk-generate-modal__body"
+    >
+        <p class="frosh-ai-bulk-generate-modal__status">
+            {{ $tc('frosh-ai-product.bulk.statusLabel') }}: {{ jobStatusLabel }}
+        </p>
+
+        <sw-progress-bar
+            class="frosh-ai-bulk-generate-modal__progress"
+            :value="processed"
+            :max-value="total"
+        />
+
+        <p class="frosh-ai-bulk-generate-modal__counts">
+            {{ $tc('frosh-ai-product.bulk.progressCounts', 0, {
+                processed,
+                total,
+                succeeded,
+                failed
+            }) }}
+        </p>
+
+        <p
+            v-if="isJobFinished"
+            class="frosh-ai-bulk-generate-modal__summary"
+        >
+            {{ $tc('frosh-ai-product.bulk.summary', 0, { succeeded, failed }) }}
+        </p>
+
+        <template v-if="isJobFinished && errorEntries.length">
+            <p class="frosh-ai-bulk-generate-modal__errors-title">
+                {{ $tc('frosh-ai-product.bulk.errorsTitle') }}
+            </p>
+            <ul class="frosh-ai-bulk-generate-modal__errors">
+                <li
+                    v-for="entry in errorEntries"
+                    :key="entry.entityId"
+                >
+                    {{ entry.message }}
+                </li>
+            </ul>
+            <p
+                v-if="hasMoreErrors"
+                class="frosh-ai-bulk-generate-modal__hint"
+            >
+                {{ $tc('frosh-ai-product.bulk.moreErrors') }}
+            </p>
+        </template>
+
+        <p
+            v-if="fieldError"
+            class="frosh-ai-bulk-generate-modal__error"
+        >
+            {{ fieldError }}
+        </p>
+    </div>
+
+    <template #modal-footer>
+        <mt-button
+            variant="secondary"
+            size="default"
+            :disabled="isSubmitting"
+            @click="onClose"
+        >
+            {{ footerCloseLabel }}
+        </mt-button>
+        <mt-button
+            v-if="phase === 'options'"
+            variant="primary"
+            size="default"
+            :is-loading="isSubmitting"
+            :disabled="!canSubmit"
+            @click="onStart"
+        >
+            {{ $tc('frosh-ai-product.bulk.start') }}
+        </mt-button>
+    </template>
+</sw-modal>
+{% endblock %}

src/Resources/app/administration/src/extension/component/frosh-ai-bulk-generate-modal/frosh-ai-bulk-generate-modal.scss

@@ -0,0 +1,76 @@
+.frosh-ai-bulk-generate-modal {
+    &__body {
+        display: flex;
+        flex-direction: column;
+        gap: 0;
+    }
+
+    &__intro {
+        margin: 0 0 6px;
+        font-size: 13px;
+        line-height: 1.45;
+        color: var(--color-text-primary-default, #2b3640);
+    }
+
+    &__count {
+        margin: 0 0 6px;
+        font-size: 13px;
+        font-weight: 600;
+        line-height: 1.45;
+        color: var(--color-text-primary-default, #2b3640);
+    }
+
+    &__language {
+        margin: 0 0 16px;
+        font-size: 12px;
+        line-height: 1.4;
+        color: var(--color-text-secondary-default, #758CA3);
+    }
+
+    &__tone {
+        margin-bottom: 12px;
+    }
+
+    &__max-words {
+        margin-bottom: 12px;
+    }
+
+    &__status,
+    &__counts,
+    &__summary,
+    &__errors-title {
+        margin: 0 0 8px;
+        font-size: 13px;
+        line-height: 1.4;
+        color: var(--color-text-primary-default, #2b3640);
+    }
+
+    &__summary {
+        font-weight: 600;
+    }
+
+    &__progress {
+        margin: 0 0 12px;
+    }
+
+    &__errors {
+        margin: 0 0 8px;
+        padding-left: 18px;
+        font-size: 12px;
+        line-height: 1.4;
+        color: var(--color-text-secondary-default, #758CA3);
+    }
+
+    &__hint {
+        margin: 0 0 8px;
+        font-size: 12px;
+        color: var(--color-text-secondary-default, #758CA3);
+    }
+
+    &__error {
+        margin: 0 0 8px;
+        font-size: 13px;
+        line-height: 1.4;
+        color: var(--color-text-critical-default, #b02020);
+    }
+}