Added mass-import and mass-export to admin page.

Pages/Admin.php

@@ -74,8 +74,161 @@ $PageSection = "Admin";
                             Apply selected mutation fields to several mutations at once.
                         </span>
                     </a>
+
+                    <button
+                        id="AdminMassImportButton"
+                        class="ActionButton AdminEditorLink"
+                        type="button"
+                    >
+                        <strong>Mass import</strong>
+                        <span>
+                            Review and save several plant or mutation JSON files at once.
+                        </span>
+                    </button>
+
+                    <button
+                        id="AdminMassExportButton"
+                        class="ActionButton AdminEditorLink"
+                        type="button"
+                    >
+                        <strong>Mass export</strong>
+                        <span>
+                            Select plants and mutations to export together.
+                        </span>
+                    </button>
+
+                    <input
+                        id="AdminMassImportFiles"
+                        type="file"
+                        accept="application/json,.json"
+                        multiple
+                        hidden
+                    >
                 </div>
 
+                <section
+                    id="AdminMassImportPanel"
+                    class="Panel AdminTransferPanel"
+                    hidden
+                >
+                    <div class="PanelHeader AdminTransferPanelHeader">
+                        <h2>Mass import</h2>
+                        <button
+                            id="AdminMassImportCloseButton"
+                            class="ActionButton AdminTransferCloseButton"
+                            type="button"
+                        >
+                            Close
+                        </button>
+                    </div>
+
+                    <div class="AdminTransferPanelBody">
+                        <p>
+                            Review imported content before saving it. Nothing is changed until
+                            you press Save imported content.
+                        </p>
+
+                        <div class="AdminTransferToolbar">
+                            <button
+                                id="AdminMassImportChooseButton"
+                                class="ActionButton AdminInlineButton"
+                                type="button"
+                            >
+                                Choose JSON files
+                            </button>
+
+                            <span id="AdminMassImportSummary" class="AdminTransferSummary"></span>
+                        </div>
+
+                        <div
+                            id="AdminMassImportList"
+                            class="AdminTransferCardList"
+                        ></div>
+
+                        <p
+                            id="AdminMassImportMessage"
+                            class="PageMessage"
+                            aria-live="polite"
+                        ></p>
+
+                        <div class="AdminEditorActions AdminTransferFooter">
+                            <button
+                                id="AdminMassImportSaveButton"
+                                class="ActionButton AdminSaveButton"
+                                type="button"
+                                disabled
+                            >
+                                Save imported content
+                            </button>
+                        </div>
+                    </div>
+                </section>
+
+                <section
+                    id="AdminMassExportPanel"
+                    class="Panel AdminTransferPanel"
+                    hidden
+                >
+                    <div class="PanelHeader AdminTransferPanelHeader">
+                        <h2>Mass export</h2>
+                        <button
+                            id="AdminMassExportCloseButton"
+                            class="ActionButton AdminTransferCloseButton"
+                            type="button"
+                        >
+                            Close
+                        </button>
+                    </div>
+
+                    <div class="AdminTransferPanelBody">
+                        <p>
+                            Select any mix of plants and mutations. Each item stays as its own
+                            portable JSON file inside the exported ZIP.
+                        </p>
+
+                        <div class="CatalogueControls AdminTransferSearchControls">
+                            <input
+                                id="AdminMassExportSearchInput"
+                                type="search"
+                                placeholder="Search plants and mutations..."
+                                aria-label="Search exportable content"
+                                autocomplete="off"
+                            >
+
+                            <span id="AdminMassExportSummary" class="AdminTransferSummary"></span>
+                        </div>
+
+                        <div class="AdminTransferSelectionActions">
+                            <button id="AdminMassExportSelectAllButton" class="ActionButton AdminInlineButton" type="button">Select all</button>
+                            <button id="AdminMassExportSelectPlantsButton" class="ActionButton AdminInlineButton" type="button">Select plants</button>
+                            <button id="AdminMassExportSelectMutationsButton" class="ActionButton AdminInlineButton" type="button">Select mutations</button>
+                            <button id="AdminMassExportDeselectAllButton" class="ActionButton AdminInlineButton" type="button">Deselect all</button>
+                        </div>
+
+                        <div
+                            id="AdminMassExportList"
+                            class="AdminTransferCardList"
+                        ></div>
+
+                        <p
+                            id="AdminMassExportMessage"
+                            class="PageMessage"
+                            aria-live="polite"
+                        ></p>
+
+                        <div class="AdminEditorActions AdminTransferFooter">
+                            <button
+                                id="AdminMassExportSaveButton"
+                                class="ActionButton AdminSaveButton"
+                                type="button"
+                                disabled
+                            >
+                                Export selected
+                            </button>
+                        </div>
+                    </div>
+                </section>
+
                 <section
                     id="AdminOverview"
                     class="Panel AdminOverview"
@@ -115,6 +268,13 @@ $PageSection = "Admin";
         </main>
 
         <script src="/Scripts/Garden/PlantImages.js"></script>
+        <script src="/Scripts/Garden/Plants.js"></script>
+        <script src="/Scripts/Garden/Mutations.js"></script>
+        <script src="/Scripts/Garden/FunctionalEffects.js"></script>
+        <script src="/Scripts/Garden/Save.js"></script>
+        <script src="/Scripts/Garden/Economy.js"></script>
+        <script src="/Scripts/Garden/AdminValidation.js"></script>
         <script src="/Scripts/Garden/AdminOverview.js"></script>
+        <script src="/Scripts/Garden/AdminContentTransfer.js"></script>
     </body>
 </html>

Styles/Style.css

@@ -2515,3 +2515,190 @@ input, button, textarea, select {
         margin-top: 0;
     }
 }
+
+.AdminTransferPanel {
+    margin-top: 1.5rem;
+    overflow: hidden;
+    box-shadow: 3px 3px 0 var(--Crust);
+}
+
+.AdminTransferPanel[hidden] {
+    display: none;
+}
+
+.AdminTransferPanelHeader {
+    justify-content: space-between;
+}
+
+.AdminTransferPanelHeader h2 {
+    margin-bottom: 0;
+}
+
+.AdminTransferCloseButton {
+    width: auto;
+    min-width: 6rem;
+    padding: 0.35rem 0.65rem;
+}
+
+.AdminTransferPanelBody {
+    padding: 1rem;
+}
+
+.AdminTransferPanelBody > p:first-child {
+    margin-top: 0;
+}
+
+.AdminTransferToolbar,
+.AdminTransferSelectionActions {
+    display: flex;
+    gap: 0.75rem;
+    margin-bottom: 1rem;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.AdminTransferToolbar .AdminInlineButton,
+.AdminTransferSelectionActions .AdminInlineButton {
+    width: auto;
+}
+
+.AdminTransferSummary {
+    color: var(--Subtext1);
+}
+
+.AdminTransferSearchControls {
+    grid-template-columns: minmax(0, 1fr) auto;
+}
+
+.AdminTransferCardList {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.AdminTransferCardHeader {
+    flex-wrap: wrap;
+}
+
+.AdminTransferCardMeta {
+    display: flex;
+    margin-left: auto;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 0.65rem;
+    min-width: 0;
+}
+
+.AdminTransferStatus {
+    flex: 0 0 auto;
+    padding: 0.2rem 0.45rem;
+    color: var(--Green);
+    background-color: var(--Surface0);
+    border: 2px solid var(--Green);
+}
+
+.AdminTransferStatusError {
+    color: var(--Red);
+    border-color: var(--Red);
+}
+
+.AdminTransferFileName {
+    min-width: 0;
+    margin: 0;
+    color: var(--Overlay2);
+    overflow-wrap: anywhere;
+}
+
+.AdminTransferErrorCard,
+.AdminTransferCardInvalid {
+    border-color: var(--Red);
+}
+
+.AdminTransferErrorHeader {
+    justify-content: space-between;
+}
+
+.AdminTransferErrorHeader h2 {
+    margin-bottom: 0;
+    color: var(--Red);
+}
+
+.AdminTransferErrorBody {
+    padding: 1rem;
+}
+
+.AdminTransferErrorBody p:last-child {
+    margin-bottom: 0;
+}
+
+.AdminTransferInlineError {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: var(--Red);
+    background-color: var(--Mantle);
+    border-top: 3px solid var(--Red);
+}
+
+.AdminTransferSelectableCard {
+    cursor: pointer;
+}
+
+.AdminTransferSelectableCard[data-selected="true"] {
+    border-color: var(--Sky);
+}
+
+.AdminTransferSelectableCard[data-selected="true"] > .PanelHeader {
+    border-bottom-color: var(--Sky);
+}
+
+.AdminTransferSelectToggle {
+    display: flex;
+    margin-left: auto;
+    align-items: center;
+    gap: 0.4rem;
+    color: var(--Subtext1);
+    cursor: pointer;
+}
+
+.AdminTransferSelectToggle input {
+    width: 1.1rem;
+    height: 1.1rem;
+    margin: 0;
+    accent-color: var(--Sky);
+}
+
+.AdminTransferFooter {
+    margin-top: 1rem;
+}
+
+@media (max-width: 700px) {
+    .AdminTransferPanelHeader,
+    .AdminTransferCardHeader,
+    .AdminTransferCardMeta {
+        align-items: flex-start;
+    }
+
+    .AdminTransferPanelHeader {
+        flex-direction: column;
+    }
+
+    .AdminTransferCloseButton {
+        width: 100%;
+    }
+
+    .AdminTransferCardMeta {
+        width: 100%;
+        margin-left: 0;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+    }
+
+    .AdminTransferSearchControls {
+        grid-template-columns: 1fr;
+    }
+
+    .AdminTransferToolbar .AdminInlineButton,
+    .AdminTransferSelectionActions .AdminInlineButton {
+        width: 100%;
+    }
+}