data-primals-engine 1.4.0 → 1.4.2

package/client/src/PackGallery.scss

@@ -1,210 +1,231 @@
-.pack-gallery-container {
-  width: 100%;
-  max-width: 90vw;
-  height: 80vh;
-  display: flex;
-  flex-direction: column;
-
-  .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
-    }
-
-    .header-actions {
-      display: flex;
-      gap: 1rem;
-      align-items: center;
-
-      .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
-      }
-    }
-  }
-
-  .pack-list {
-    display: grid;
-    gap: 1rem;
-    padding: 0.5rem;
-    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-    @media only screen and (min-width: 480px) {
-      overflow-y: auto;
-    }
-  }
-
-  .pack-card {
-    border: 1px solid #ddd;
-    border-radius: 8px;
-    padding: 1rem;
-    cursor: pointer;
-    transition: box-shadow 0.2s, transform 0.2s;
-    background-color: #fff;
-
-    &:hover {
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-      transform: translateY(-3px);
-    }
-
-    .pack-card-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 0.5rem;
-      h3 {
-        margin: 0;
-        font-size: 1.2em;
-        color: var(--primary-color);
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-      }
-      .pack-stars {
-        display: flex;
-        align-items: center;
-        gap: 0.3rem;
-        color: #f0ad4e;
-      }
-    }
-
-    .pack-description {
-      font-size: 0.9em;
-      color: #666;
-      min-height: 50px;
-    }
-
-    .pack-card-footer {
-      margin-top: 1rem;
-      padding-top: 0.5rem;
-      border-top: 1px solid #eee;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      font-size: 0.8em;
-      color: #888;
-      .pack-author {
-        display: flex;
-        align-items: center;
-        gap: 0.3rem;
-      }
-      .pack-tags {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 0.5rem;
-        .tag {
-          background-color: #f0f0f0;
-          padding: 2px 6px;
-          border-radius: 4px;
-          display: flex;
-          align-items: center;
-          gap: 0.2rem;
-        }
-      }
-    }
-  }
-
-  .pack-detail {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    .back-button {
-      align-self: flex-start;
-      margin-bottom: 1rem;
-    }
-    .pack-detail-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      h1 { margin: 0; }
-    }
-    .pack-meta {
-      display: flex;
-      gap: 1rem;
-      color: #777;
-      margin: 0.5rem 0 1rem 0;
-      span {
-        display: flex;
-        align-items: center;
-        gap: 0.4rem;
-      }
-    }
-    .pack-content {
-      flex-grow: 1;
-      overflow-y: auto;
-      padding-right: 1rem;
-      h2 {
-        border-bottom: 1px solid #eee;
-        padding-bottom: 0.3rem;
-        margin-top: 1.5rem;
-      }
-      .data-preview {
-        background-color: #2d2d2d;
-        color: #f1f1f1;
-        padding: 1rem;
-        border-radius: 4px;
-        max-height: 300px;
-        overflow: auto;
-        pre {
-          margin: 0;
-          font-size: 0.85em;
-        }
-      }
-    }
-  }
-}
-
-// À 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;
-  }
-}
+.pack-gallery-container {
+  width: 100%;
+  max-width: 90vw;
+  height: 80vh;
+  display: flex;
+  flex-direction: column;
+
+  .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
+    }
+
+    .header-actions {
+      display: flex;
+      gap: 1rem;
+      align-items: center;
+
+      .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
+      }
+    }
+  }
+
+  .pack-list {
+    display: grid;
+    gap: 1rem;
+    padding: 0.5rem;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    @media only screen and (min-width: 480px) {
+      overflow-y: auto;
+    }
+  }
+
+  .pack-card {
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    padding: 1rem;
+    cursor: pointer;
+    transition: box-shadow 0.2s, transform 0.2s;
+    background-color: #fff;
+
+    &:hover {
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      transform: translateY(-3px);
+    }
+
+    .pack-card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 0.5rem;
+      h3 {
+        margin: 0;
+        font-size: 1.2em;
+        color: var(--primary-color);
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+      }
+      .pack-stars {
+        display: flex;
+        align-items: center;
+        gap: 0.3rem;
+        color: #f0ad4e;
+      }
+    }
+
+    .pack-description {
+      font-size: 0.9em;
+      color: #666;
+      min-height: 50px;
+    }
+
+    .pack-card-footer {
+      margin-top: 1rem;
+      padding-top: 0.5rem;
+      border-top: 1px solid #eee;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 0.8em;
+      color: #888;
+      .pack-author {
+        display: flex;
+        align-items: center;
+        gap: 0.3rem;
+      }
+      .pack-tags {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+        .tag {
+          background-color: #f0f0f0;
+          padding: 2px 6px;
+          border-radius: 4px;
+          display: flex;
+          align-items: center;
+          gap: 0.2rem;
+        }
+      }
+    }
+  }
+
+  .pack-detail {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    .back-button {
+      align-self: flex-start;
+      margin-bottom: 1rem;
+    }
+    .pack-detail-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      h1 { margin: 0; }
+
+      .pack-detail-actions {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+      }
+
+      .owner-actions {
+        display: flex;
+        align-items: center;
+        gap: 1rem; /* Espace entre l'indicateur et la case à cocher */
+        padding: 0.25rem 0.75rem;
+        border: 1px solid #e0e0e0;
+        border-radius: 8px;
+        background-color: #fafafa;
+        .my-pack-indicator {
+          display: flex;
+          align-items: center;
+          gap: 0.4rem;
+        }
+      }
+    }
+    .pack-meta {
+      display: flex;
+      gap: 1rem;
+      color: #777;
+      margin: 0.5rem 0 1rem 0;
+      span {
+        display: flex;
+        align-items: center;
+        gap: 0.4rem;
+      }
+    }
+    .pack-content {
+      flex-grow: 1;
+      overflow-y: auto;
+      padding-right: 1rem;
+      h2 {
+        border-bottom: 1px solid #eee;
+        padding-bottom: 0.3rem;
+        margin-top: 1.5rem;
+      }
+      .data-preview {
+        background-color: #2d2d2d;
+        color: #f1f1f1;
+        padding: 1rem;
+        border-radius: 4px;
+        max-height: 300px;
+        overflow: auto;
+        pre {
+          margin: 0;
+          font-size: 0.85em;
+        }
+      }
+    }
+  }
+}
+
+// À 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;
+  }
+}

package/client/src/contexts/UIContext.jsx

@@ -11,6 +11,8 @@ export const UIProvider = ({ children }) => {
     const [isTourOpen, setIsTourOpen] = useState(false);
     const [allTourSteps, setAllTourSteps] = useState({});
 
+    const [chartToAdd, setChartToAdd] = useState(null);
+
     const [currentTour, setCurrentTour] = useLocalStorage("spotlight-tour", null);
 // This is the single source of truth for tours that have been launched.
     // It correctly reads from localStorage on initial load and persists any changes.
@@ -36,14 +38,15 @@ export const UIProvider = ({ children }) => {
         launchedTours, setLaunchedTours, addLaunchedTour,
         currentTour, setCurrentTour,
         isTourOpen, setIsTourOpen, setAllTourSteps, allTourSteps,
-        tourStepIndex, setTourStepIndex
+        tourStepIndex, setTourStepIndex, chartToAdd, setChartToAdd
     }), [isLocked,
         setLocked,
         currentTourSteps, setCurrentTourSteps,
         launchedTours,setLaunchedTours,
         currentTour, setCurrentTour,
         isTourOpen, setIsTourOpen, setAllTourSteps, allTourSteps,
-        tourStepIndex, setTourStepIndex, addLaunchedTour]);
+        tourStepIndex, setTourStepIndex, addLaunchedTour,
+        chartToAdd, setChartToAdd]);
 
     return (
         <UIContext.Provider value={contextValue}>