data-primals-engine 1.2.6 → 1.3.0

package/README.md

@@ -84,6 +84,8 @@ MONGO_DB_URL=mongodb://127.0.0.1:27017
 | JWT_SECRET            | 	Secret key for signing JWT authentication tokens.	                     | a_long_random_secret_string              |
 | OPENAI_API_KEY        | 	Your optional OpenAI API key for AI features.	                         | sk-xxxxxxxxxxxxxxxxxxxx                  |
 | GOOGLE_API_KEY        | 	Your optional Google (Gemini) API key for AI features.	                | AIzaSyxxxxxxxxxxxxxxxxxxxx               |
+| DEEPSEEK_API_KEY      | 	Your optional DeepSeek API key for AI features.	                       | AIzaSyxxxxxxxxxxxxxxxxxxxx               |
+| ANTHROPIC_API_KEY     | 	Your optional Anthropic API key for AI features.	                      | AIzaSyxxxxxxxxxxxxxxxxxxxx               |
 | AWS_ACCESS_KEY_ID     | 	AWS access key for S3 storage (files, backups). Keep empty to disable	 | AKIAIOSFODNN7EXAMPLE                     |
 | AWS_SECRET_ACCESS_KEY | 	AWS secret access key.	                                                | wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY |                                 |
 | AWS_REGION            | 	Region for your S3 bucket.                                             | 	eu-west-3                               |                                                                 |
@@ -489,15 +491,49 @@ await loadFromDump(currentUser, { modelsOnly: false });
 
 ### installPack(packId, user, lang)
 
-> Installs a predefined data pack.
+> Installs a data pack.
 
 Example:
 
+```javascript
+const result = await installPack([
+    {
+        "name": "My custom pack",
+        "description": "Markdown **description** of the pack",
+        "tags": ["customPack", "tag1", "tag2"],
+        "models": [
+            "env", // default model 
+            {
+                "name": "post",
+                "description": "Defines a post",
+                "fields": [
+                    {"name": "subject", "type": "string", "required": true},
+                ]
+            }, // or custom
+        ],
+        "data": {
+            "all": { // all languages installed data
+                "post": [
+                    {"subject": "My pack first data"}
+                ]
+            },
+            "en": { // English specific installed data
+                "post": [
+                    {"subject": "My english first post"}
+                ]
+            }
+        }
+    }
+], user, "en");
+// Returns installation summary
+```
+
 ```javascript
 const result = await installPack("61d1f1a9e3f1a9e3f1a9e3f1", user, "en");
 // Returns installation summary
 ```
 
+> You can also open the pack gallery to see the JSON structure of each pack, before installing them.
 
 ---
 
@@ -538,7 +574,7 @@ A workflow is composed of two main parts: **Triggers** and **Actions**.
 - **CreateData**: Create a new document in any model.
 - **UpdateData**: Modify one or more existing documents that match a filter.
 - **SendEmail**: Send a transactional email using dynamic data from the trigger.
-- **CallWebhook**: Make an HTTP request (GET, POST, etc.) to an external service or API.
+- **HttpRequest**: Make an HTTP request (GET, POST, etc.) to an external service or API.
 - **ExecuteScript**: Run a custom JavaScript snippet for complex logic, data transformation, or conditional branching.
 - **GenerateAIContent**: Use an integrated AI provider (like OpenAI or Gemini) to generate text, summarize content, or make decisions.
 - **Wait**: Pause the workflow for a specific duration before continuing to the next step

package/client/src/App.jsx

@@ -61,6 +61,7 @@ import i18next from "i18next";
 import {websiteTranslations} from "./translations.js";
 
 import { Tooltip } from 'react-tooltip';
+import {providers} from "../../src/modules/assistant/constants.js";
 
 let queryClient = new QueryClient();
 
@@ -113,40 +114,32 @@ function Layout ({header, routes, body, footer}) {
                 },
                 body: JSON.stringify({
                     model: 'env', // On cible le modèle 'env'
-                    filter: {
-                        // On cherche les enregistrements dont le nom est SOIT l'un, SOIT l'autre
-                        "$or": [
-                            { "name": "OPENAI_API_KEY" },
-                            { "name": "GOOGLE_API_KEY" }
-                        ]
-                    },
-                    limit: 2 // Pas besoin de plus de 2 résultats
+                    filter: { "name": { "$in": Object.values(providers).map(p => p.key) } },
+                    limit: Object.values(providers).length
                 })
             }).then(res => res.json());
         },
         {
             enabled: !!me && models.find(f => f.name === 'env' && me?.username === f.username), // Toujours activé uniquement si l'utilisateur est connecté
-            staleTime: 60000, // On peut réduire le staleTime, car l'utilisateur peut ajouter/supprimer une clé à tout moment
+            staleTime: 60000,
             onSuccess: (response) => {
-
-                // La réponse de l'API de recherche est un objet { success: true, data: [...] }
                 if (!response.data) {
                     setAssistantConfig(null);
                     return;
                 }
-
                 const availableKeys = response.data;
+                const newConfig = Object.keys(providers).reduce((config, providerKey) => {
+                    const envVarName = providers[providerKey].key;
+                    const foundKey = availableKeys.find(key => key.name === envVarName);
+                    if (foundKey) {
+                        config[providerKey] = foundKey.value;
+                    }
+                    return config;
+                }, {});
 
-                const newConfig = {
-                    openai: availableKeys.find(key => key.name === 'OPENAI_API_KEY')?.value || (useAI ? process.env.OPENAI_API_KEY : undefined),
-                    google: availableKeys.find(key => key.name === 'GOOGLE_API_KEY')?.value || (useAI ? process.env.GOOGLE_API_KEY : undefined),
-                };
-
-                // On met à jour l'état si au moins une clé est disponible
-                if (newConfig.openai || newConfig.google) {
+                if (Object.values(newConfig).filter(Boolean).length > 0) {
                     setAssistantConfig(newConfig);
                 } else {
-                    // Important : on s'assure de remettre à null si aucune clé n'est trouvée
                     setAssistantConfig(null);
                 }
             },

package/client/src/AssistantChat.jsx

@@ -7,6 +7,7 @@ import { useModelContext } from "./contexts/ModelContext.jsx";
 import { Trans, useTranslation } from "react-i18next";
 import Markdown from 'react-markdown';
 import {useQueryClient} from "react-query";
+import {providers} from "../../src/modules/assistant/constants.js";
 
 const AssistantChat = ({ config }) => {
     const { selectedModel } = useModelContext();
@@ -170,10 +171,10 @@ const AssistantChat = ({ config }) => {
 
     // Logique pour le sélecteur de fournisseur (OpenAI/Google)
     const availableProviders = useMemo(() => {
-        const providers = [];
-        if (config?.openai) providers.push({ value: 'openai', label: 'OpenAI' });
-        if (config?.google) providers.push({ value: 'google', label: 'Google' });
-        return providers;
+        const prs = Object.keys(providers).map(p => {
+            return config?.[p] ? ({value: p, label: p}) : null;
+        })
+        return prs.filter(Boolean);
     }, [config]);
 
     const [selectedProvider, setSelectedProvider] = useState(null);

package/client/src/DataEditor.jsx

@@ -241,7 +241,7 @@ export const DataEditor = forwardRef(function MyDataEditor({
                 return <CheckboxField
                     help={t('field_' + model.name + '_' + field.name + '_hint', field.hint || '')}
                     key={field.name} {...inputProps} checked={value}
-                    onChange={(e) => handleChange({name: field.name, value: e.target.checked})}/>
+                    onChange={(e) => handleChange({name: field.name, value: e})}/>
             case 'string':
             case 'string_t':
                 {

package/client/src/DataTable.jsx

@@ -165,6 +165,51 @@ const Header = ({
     ;
 }
 
+
+const RichText = ({ value, initialLang }) => {
+    const availableLangs = useMemo(() => (value ? Object.keys(value).filter(k => value[k]) : []), [value]);
+
+    const [selectedLang, setSelectedLang] = useState(() => {
+        if (availableLangs.includes(initialLang)) {
+            return initialLang;
+        }
+        return availableLangs[0] || null;
+    });
+
+    useEffect(() => {
+        setSelectedLang(initialLang);
+    }, [initialLang]);
+
+    if (!value || availableLangs.length === 0) {
+        return null;
+    }
+
+    if (availableLangs.length === 1) {
+        return <div className="rte-value" dangerouslySetInnerHTML={{ __html: value[availableLangs[0]] || '' }} />;
+    }
+
+    return (
+        <div className="richtext-t-cell">
+            <div className="lang-switcher">
+                {availableLangs.map(langCode => (
+                    <button
+                        key={langCode}
+                        className={`lang-btn ${selectedLang === langCode ? 'active' : ''}`}
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            setSelectedLang(langCode);
+                        }}
+                        title={langCode.toUpperCase()}
+                    >
+                        {langCode.toUpperCase()}
+                    </button>
+                ))}
+            </div>
+            <div className="rte-value" dangerouslySetInnerHTML={{ __html: value[selectedLang] || '' }} />
+        </div>
+    );
+};
+
 export function DataTable({
                               model,
                               checkedItems,
@@ -458,7 +503,7 @@ export function DataTable({
                                         <CheckboxField className={"input-ref"}
                                                        checked={checkedItems.some(i => i._id === item._id)}
                                                        onChange={(e) => {
-                                                           if (e.target.checked) {
+                                                           if (e) {
                                                                setCheckedItems(items => {
                                                                    return [...items, item];
                                                                });
@@ -630,8 +675,7 @@ export function DataTable({
                                         }
                                         if (field.type === 'richtext_t') {
                                             return <td key={field.name}  className={isLightColor(field.color)?"lighted":""}>
-                                                {hiddenable(<div className="rte-value"
-                                                     dangerouslySetInnerHTML={{__html: item[field.name]?.[lang] || ''}}></div>)}
+                                                {hiddenable(<RichText value={item[field.name]} initialLang={lang} />)}
                                             </td>;
                                         }
                                         if (field.type === 'color') {

package/client/src/ExportDialog.jsx

@@ -99,7 +99,7 @@ function ExportDialog({ isOpen, onClose, onExport, currentModel, availableModels
                     name="exportSelection"
                     label={t('exportDialog.exportSelection.label', "Exporter la sélection")}
                     checked={exportSelection}
-                    onChange={(e) => setExportSelection(e.target.checked)}
+                    onChange={(e) => setExportSelection(e)}
                     disabled={!hasSelection}
                     hint={hasSelection
                         ? t('exportDialog.exportSelection.hint', "Exportera uniquement les lignes actuellement sélectionnées dans le tableau.")
@@ -119,7 +119,7 @@ function ExportDialog({ isOpen, onClose, onExport, currentModel, availableModels
                     multiple={true}
                 />
 
-                <CheckboxField label={t('exportDialog.withModels.label', "Inclure les modèles ?")} checked={withModels} onChange={(e) => setWithModels(e.target.checked)} />
+                <CheckboxField label={t('exportDialog.withModels.label', "Inclure les modèles ?")} checked={withModels} onChange={(e) => setWithModels(e)} />
 
                 {/* OU: Utiliser un composant MultiSelectField (à créer/importer) pour plusieurs modèles */}
                 {/*

package/client/src/Field.jsx

@@ -1431,8 +1431,8 @@ export const ModelField = ({field, disableable=false, showModel=true, value, fie
         <CheckboxField
             checked={checked}
             onChange={e => {
-                setChecked(e.target.checked);
-                if (!e.target.checked) {
+                setChecked(e);
+                if (!e) {
                     onChange({name: field?.name, value: null});
                 }
             }}

package/client/src/KanbanCard.jsx

@@ -12,9 +12,9 @@ const KanbanCard = ({ card, model, subItemsField }) => {
     const subItems = subItemsField && card[subItemsField] ? card[subItemsField] : [];
     const tr = useTranslation();
     // Logique du Drag & Drop natif pour la carte
-
     const lang = (tr.i18n.resolvedLanguage || tr.i18n.language).split(/[-_]/)?.[0];
 
+    console.log(subItems)
     const getfield = (model, data) => {
         const v = getDataAsString(model, data, tr, models);
         if(!v){
@@ -66,6 +66,8 @@ const KanbanCard = ({ card, model, subItemsField }) => {
                 <div className="kanban-card-subitems">
                     {subItems.map((subItem, index) => {
                         const it = subItem;
+                        if( typeof(subItem) === 'string')
+                            return subItem;
                         const v = getDataAsString(model, subItem, tr, models);
                         if (!v) {
                             const r = `
@@ -81,7 +83,7 @@ const KanbanCard = ({ card, model, subItemsField }) => {
                                 className="image" src={`/resources/${it.guid}`}
                                 alt={`${it.name} (${it.guid})`}/></a>
                         }
-                        return '';
+                        return v;
                     })}
                 </div>
             )}

package/client/src/KanbanConfigModal.jsx

@@ -19,7 +19,7 @@ const KanbanConfigModal = ({ isOpen, onClose, onSave, model, initialSettings })
     const groupableFields = useMemo(() => {
         // ... (pas de changement ici)
         return modelFields
-            .filter(field => ['select', 'string', 'string_t'].includes(field.type))
+            .filter(field => ['enum', 'model', 'string', 'string_t'].includes(field.type))
             .map(field => ({
                 label: t(`field_${model.name}_${field.name}`, field.name),
                 value: field.name,
@@ -29,7 +29,7 @@ const KanbanConfigModal = ({ isOpen, onClose, onSave, model, initialSettings })
     const subItemFields = useMemo(() => {
         // ... (pas de changement ici)
         return modelFields
-            .filter(field => field.type === 'relation' && field.multiple)
+            .filter(field => (field.type === 'relation' && field.multiple) || field.type === 'array')
             .map(field => ({
                 label: t(`field_${field.name}`, { defaultValue: field.name }),
                 value: field.name,
@@ -64,11 +64,9 @@ const KanbanConfigModal = ({ isOpen, onClose, onSave, model, initialSettings })
         onSave({ groupByField, subItemsField: subItemsField || '' });
     };
 
-    // --- MODIFICATION 3 : Supprimer le useEffect fautif ---
-    // useEffect(() => {
-    //     setGroupByField(groupableFields[0]?.value || '');
-    // }, []); // <--- CE BLOC EST SUPPRIMÉ
-
+    useEffect(() => {
+        setSubItemsField(subItemFields[0]?.value);
+    })
     if (!isOpen) return null;
 
     return (

package/client/src/ModelCreatorField.jsx

@@ -284,7 +284,7 @@ const ModelCreatorField = ({model, handleRenameField, handleRemoveField, handleU
                                         checked={field.multiline}
                                         onChange={(e) => {
                                             const newFields = [...fields];
-                                            newFields[index].multiline = e.target.checked;
+                                            newFields[index].multiline = e;
                                             setFields(newFields);
                                         }}
                                         help={field.multiline && t('modelcreator.multiline.hint')}
@@ -373,7 +373,7 @@ const ModelCreatorField = ({model, handleRenameField, handleRemoveField, handleU
                                     checked={field.multiple}
                                     onChange={(e) => {
                                         const newFields = [...fields];
-                                        newFields[index].multiple = e.target.checked;
+                                        newFields[index].multiple = e;
                                         setFields(newFields);
                                     }}
                                 /></div>
@@ -422,7 +422,7 @@ const ModelCreatorField = ({model, handleRenameField, handleRemoveField, handleU
                                         checked={field.required}
                                         onChange={(e) => {
                                             const newFields = [...fields];
-                                            newFields[index].required = e.target.checked;
+                                            newFields[index].required = e;
                                             setFields(newFields);
                                         }}
                                         help={field.required && t('modelcreator.required.hint')}
@@ -440,7 +440,7 @@ const ModelCreatorField = ({model, handleRenameField, handleRemoveField, handleU
                                         checked={field.unique}
                                         onChange={(e) => {
                                             const newFields = [...fields];
-                                            newFields[index].unique = e.target.checked;
+                                            newFields[index].unique = e;
                                             setFields(newFields);
                                         }}
                                         help={field.unique && t('modelcreator.unique.hint')}
@@ -522,7 +522,7 @@ const ModelCreatorField = ({model, handleRenameField, handleRemoveField, handleU
                                             disabled={modelLocked || (isLocalUser(me) && field.locked)}
                                             onChange={(e) => {
                                                 const newFields = [...fields];
-                                                newFields[index].default = e.target.checked;
+                                                newFields[index].default = e;
                                                 setFields(newFields);
                                             }}
                                         />
@@ -612,7 +612,7 @@ const ModelCreatorField = ({model, handleRenameField, handleRemoveField, handleU
                                         checked={field.condition !== undefined}
                                         onChange={(e) => {
                                             const newFields = [...fields];
-                                            if (e.target.checked) {
+                                            if (e) {
                                                 newFields[index].condition = null;
                                             } else {
                                                 delete newFields[index].condition;
@@ -701,7 +701,7 @@ const ModelCreatorField = ({model, handleRenameField, handleRemoveField, handleU
                                         checked={field.asMain}
                                         onChange={(e) => {
                                             const newFields = [...fields];
-                                            newFields[index].asMain = e.target.checked;
+                                            newFields[index].asMain = e;
                                             setFields(newFields);
                                         }}
                                         help={field.asMain && t('modelcreator.asMain.hint')}
@@ -752,7 +752,7 @@ const ModelCreatorField = ({model, handleRenameField, handleRemoveField, handleU
                                         checked={field.hiddenable}
                                         onChange={(e) => {
                                             const newFields = [...fields];
-                                            newFields[index].hiddenable = e.target.checked;
+                                            newFields[index].hiddenable = e;
                                             setFields(newFields);
                                         }}
                                         help={field.unique && t('modelcreator.hiddenable.hint')}
@@ -768,7 +768,7 @@ const ModelCreatorField = ({model, handleRenameField, handleRemoveField, handleU
                                     checked={field.anonymized}
                                     onChange={(e) => {
                                         const newFields = [...fields];
-                                        newFields[index].anonymized = e.target.checked;
+                                        newFields[index].anonymized = e;
                                         setFields(newFields);
                                     }}
                                 />

package/client/src/PackGallery.jsx

@@ -1,13 +1,16 @@
 import React, { useState } from 'react';
 import {useMutation, useQuery, useQueryClient} from 'react-query';
 import { Trans, useTranslation } from 'react-i18next';
-import { FaBoxOpen, FaChevronLeft, FaDownload, FaStar, FaTag, FaUser } from 'react-icons/fa';
+import {FaBoxOpen, FaChevronLeft, FaDownload, FaPlus, FaStar, FaTag, FaUser} from 'react-icons/fa';
 import Button from './Button.jsx';
 import { useNotificationContext } from './NotificationProvider.jsx';
 import { useModelContext } from './contexts/ModelContext.jsx';
 
 import './PackGallery.scss';
 import {elementsPerPage} from "../../src/constants.js";
+import Markdown from "react-markdown";
+import {Dialog, DialogProvider} from "./Dialog.jsx";
+import {TextField} from "./Field.jsx";
 
 // --- API Fetching Functions ---
 const fetchPacks = async (sortBy, lang) => {
@@ -117,7 +120,8 @@ const PackDetail = ({ packId, onBack }) => {
             </div>
             <div className="pack-content">
                 <h2><Trans i18nKey="packs.description">Description</Trans></h2>
-                <div className="description-content" dangerouslySetInnerHTML={{__html: pack.description || ''}}/>
+
+                <div className="description-content"><Markdown>{pack.description}</Markdown></div>
 
                 <h2><Trans i18nKey="packs.modelsIncluded">Modèles inclus</Trans></h2>
                 <p>{renderModelsList(pack.models)}</p>
@@ -127,6 +131,8 @@ const PackDetail = ({ packId, onBack }) => {
                     <pre>{JSON.stringify(pack.data, null, 2)}</pre>
                 </div>
             </div>
+
+
         </div>
     );
 };
@@ -151,11 +157,15 @@ const installPackMutationFn = async ({packId, lang}) => {
 const PackGallery = () => {
     const { t, i18n } = useTranslation();
     const lang = (i18n.resolvedLanguage || i18n.language).split(/[-_]/)?.[0];
+    const { addNotification } = useNotificationContext();
 
+    const [showManualInstallDialog, setShowManualInstallDialog] = useState(false);
+    const [manualPackJson, setManualPackJson] = useState('');
     const [view, setView] = useState('list'); // 'list' ou 'detail'
     const [selectedPackId, setSelectedPackId] = useState(null);
     const [sortBy, setSortBy] = useState({ field: '_updatedAt', order: -1 });
 
+    const queryClient = useQueryClient()
     const { data: packs, isLoading, isError } = useQuery(['packs', sortBy], () => fetchPacks(sortBy, lang));
 
     const handleSelectPack = (packId) => {
@@ -163,6 +173,40 @@ const PackGallery = () => {
         setView('detail');
     };
 
+    const handleManualInstall = async () => {
+        try {
+            const packData = JSON.parse(manualPackJson.trim());
+            addNotification({ status: 'info', title: t('packs.install.started', `Installation du pack personnalisé...`) });
+
+            const response = await fetch('/api/packs/install', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ packData, lang }),
+            });
+
+            if (!response.ok) {
+                throw new Error(await response.text());
+            }
+
+            addNotification({
+                status: 'completed',
+                title: t('datatable.pack.install.success', 'Pack installé avec succès !')
+            });
+            setShowManualInstallDialog(false);
+            setManualPackJson('');
+            queryClient.invalidateQueries(['packs', sortBy]); // Rafraîchir la liste
+
+        } catch (error) {
+            addNotification({
+                status: 'error',
+                title: t('datatable.pack.install.error', `Échec de l'installation`),
+                message: error.message
+            });
+        }
+    };
+
     const handleBackToList = () => {
         setSelectedPackId(null);
         setView('list');
@@ -182,16 +226,52 @@ const PackGallery = () => {
             <>
                 <div className="gallery-header">
                     <h1><Trans i18nKey="packs.galleryTitle">Galerie de Packs</Trans></h1>
-                    <div className="sort-options">
-                        <span><Trans i18nKey="packs.sortBy">Trier par :</Trans></span>
-                        <Button onClick={() => setSortBy({ field: '_updatedAt', order: -1 })} className={sortBy.field === '_updatedAt' ? 'active' : ''}>
-                            <Trans i18nKey="packs.sort.lastUpdated">Derniers ajouts</Trans>
-                        </Button>
-                        <Button onClick={() => setSortBy({ field: 'stars', order: -1 })} className={sortBy.field === 'stars' ? 'active' : ''}>
-                            <Trans i18nKey="packs.sort.mostStarred">Plus populaires</Trans>
+                    <div className="header-actions">
+                        <div className="sort-options">
+                            <span><Trans i18nKey="packs.sortBy">Trier par :</Trans></span>
+                            <Button onClick={() => setSortBy({ field: '_updatedAt', order: -1 })} className={sortBy.field === '_updatedAt' ? 'active' : ''}>
+                                <Trans i18nKey="packs.sort.lastUpdated">Derniers ajouts</Trans>
+                            </Button>
+                            <Button onClick={() => setSortBy({ field: 'stars', order: -1 })} className={sortBy.field === 'stars' ? 'active' : ''}>
+                                <Trans i18nKey="packs.sort.mostStarred">Plus populaires</Trans>
+                            </Button>
+                        </div>
+                        <Button
+                            onClick={() => setShowManualInstallDialog(true)}
+                            className="add-pack-button"
+                        >
+                            <FaPlus /> <Trans i18nKey="packs.manualInstall">Importer</Trans>
                         </Button>
                     </div>
                 </div>
+                {showManualInstallDialog && (
+                    <DialogProvider>
+                        <Dialog
+                            isModal={true}
+                            onClose={() => setShowManualInstallDialog(false)}
+                            title={t('packs.manualInstall.title', 'Installation manuelle de pack')}
+                        >
+                            <div className="manual-install-dialog">
+                                <p>
+                                    <Trans i18nKey="packs.manualInstall.instructions">
+                                        Collez ici le JSON de configuration du pack que vous souhaitez installer.
+                                    </Trans>
+                                </p>
+                                <TextField
+                                    multiline={true}
+                                    value={manualPackJson}
+                                    onChange={(e) => setManualPackJson(e.target.value)}
+                                    placeholder={t('packs.manualInstall.placeholder', '{"name": "Mon Pack", "description": "...", "models": [...], "data": [...]}')}
+                                    rows={15}
+                                />
+                                <div className="flex actions right">
+                                    <Button onClick={() => setShowManualInstallDialog(false)}><Trans i18nKey={"btns.cancel"}>Annuler</Trans></Button>
+                                    <Button disabled={!manualPackJson.trim()} className="btn-primary" onClick={() => handleManualInstall()}><Trans i18nKey={"packs.install"}>Installer</Trans></Button>
+                                </div>
+                            </div>
+                        </Dialog>
+                    </DialogProvider>
+                )}
                 <div className="pack-list">
                     {packs.map(pack => (
                         <PackCard key={pack._id} pack={pack} onSelect={handleSelectPack} />

package/client/src/PackGallery.scss

@@ -7,20 +7,38 @@
 
   .gallery-header {
     display: flex;
+    flex-wrap: wrap;
+    gap: 1rem ;
     justify-content: space-between;
     align-items: center;
     padding-bottom: 1rem;
     border-bottom: 1px solid #e0e0e0;
     margin-bottom: 1rem;
+
     h1 {
       margin: 0;
+      flex: 1; // Permet au titre de prendre l'espace disponible
+      min-width: 200px; // Empêche le titre de devenir trop petit
     }
-    .sort-options {
+
+    .header-actions {
       display: flex;
-      gap: 0.5rem;
+      gap: 1rem;
       align-items: center;
-      .btn.active {
-        color: white;
+
+      .sort-options {
+        display: flex;
+        gap: 0.5rem;
+        align-items: center;
+        flex-wrap: wrap; // Pour le responsive
+
+        .btn.active {
+          color: white;
+        }
+      }
+
+      .add-pack-button {
+        white-space: nowrap; // Empêche le texte du bouton de se casser
       }
     }
   }
@@ -153,4 +171,40 @@
       }
     }
   }
+}
+
+// À ajouter à la fin de votre fichier CSS
+.manual-install-dialog {
+  width: 100%;
+
+  p {
+    margin-top: 0;
+    color: #666;
+    font-size: 0.9em;
+  }
+
+  textarea {
+    width: 100%;
+    padding: 1rem;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-family: monospace;
+    resize: vertical;
+    min-height: 300px;
+    background-color: #f9f9f9;
+    color: #333;
+
+    &:focus {
+      outline: none;
+      border-color: var(--primary-color);
+      box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.2);
+    }
+  }
+
+  .dialog-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    margin-top: 1rem;
+  }
 }