Solara

solara/lib/core/dashboard/brand/BrandView.js

@@ -1,4 +1,5 @@
 import {DataSource} from './BrandModel.js';
+import '../component/onboard_bottom_sheet/OnboardBottomSheet.js';
 
 class BrandView {
     constructor(model) {
@@ -15,6 +16,8 @@ class BrandView {
         this.uploadBrandBtn = document.getElementById('uploadBrandBtn');
         this.addNewBrandBtn = document.getElementById('newBrandBtn');
 
+        this.onboardSheet = document.getElementById('onboardBottomSheet');
+
         this.initializeApp();
     }
 
@@ -33,15 +36,19 @@ class BrandView {
         this.toggleAddBrandContainer(true);
 
         this.addNewBrandBtn.addEventListener('click', async () => {
-            await this.addNewBrand('TODO', 'TODO');
+            this.showOnboardBrandForm((key, name) => {
+                this.addNewBrand(key, name)
+            })
         });
 
         this.uploadBrandBtn.addEventListener('click', async () => {
             try {
                 const dirHandle = await window.showDirectoryPicker();
                 const sections = await this.createBrandSectionsFromFolder(dirHandle);
 
-                await this.addBrand(dirHandle.name, "TODO", sections)
+                this.showOnboardBrandForm((key, name) => {
+                    this.addBrand(key, name, sections)
+                })
             } catch (error) {
                 console.error('Error:', error);
             }
@@ -54,7 +61,6 @@ class BrandView {
         await this.addBrand(key, name, sections)
     }
 
-
     async addBrand(key, name, sections) {
         // TODO: remove later
         const json = JSON.stringify(sections, null, 2);
@@ -417,6 +423,15 @@ class BrandView {
     setOnDeleteFieldHandler(handler) {
         this.onDeleteField = handler;
     }
+
+    showOnboardBrandForm(onSubmit) {
+        this.onboardSheet.show(onSubmit);
+    }
+
+    async hideOnboardBrandForm() {
+        this.onboardSheet.hide();
+    }
+
 }
 
 export default BrandView;

solara/lib/core/dashboard/brand/brand.html

@@ -541,7 +541,7 @@
                 padding: 40px;
                 border-radius: 20px;
                 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
-                z-index: 1001;
+                z-index: 1000;
                 animation: fadeIn 0.5s ease-out;
                 display: none;
             }
@@ -605,6 +605,8 @@ <h1><span id="brandNametitle"></span></h1>
             <button id="newBrandBtn">New Brand</button>
         </div>
 
+        <onboard-bottom-sheet id="onboardBottomSheet"></onboard-bottom-sheet>
+
         <div id="brand-details-container">
             <button id="error-button">
                 ⚠️

solara/lib/core/dashboard/brands/BrandsController.js

@@ -31,22 +31,14 @@ class BrandsController {
 
     showOnboardBrandForm() {
         this.view.showOnboardBrandForm();
-        const form = document.getElementById('onboardBrandForm');
-        form.onsubmit = (event) => this.handleOnboardBrandSubmit(event);
+        this.view.onboardSheet.addEventListener('onboard', async (event) => {
+            event.preventDefault();
+            const {brandKey, brandName} = event.detail;
+            await this.handleOnboardBrandSubmit(brandKey, brandName);
+        });
     }
 
-    async handleOnboardBrandSubmit(event) {
-        event.preventDefault();
-        const brandName = document.getElementById('brandName').value;
-        const brandKey = document.getElementById('brandKey').value;
-
-        const brandKeyRegex = /^[A-Za-z][A-Za-z0-9_-]*$/;
-
-        if (!brandKeyRegex.test(brandKey)) {
-            alert('Brand key must start with a letter and contain no spaces. Only letters, numbers, underscores, and hyphens are allowed.');
-            return;
-        }
-
+    async handleOnboardBrandSubmit(brandKey, brandName) {
         try {
             await this.model.onboardBrand(brandName, brandKey);
             await this.view.hideOnboardBrandForm();

solara/lib/core/dashboard/brands/BrandsView.js

@@ -1,4 +1,4 @@
-import './OnboardBottomSheet.js';
+import '../component/onboard_bottom_sheet/OnboardBottomSheet.js';
 
 class BrandsView {
     constructor() {
@@ -81,15 +81,10 @@ class BrandsView {
 
     showOnboardBrandForm() {
         this.onboardSheet.show();
-        this.overlay.style.display = 'block';
-        this.overlay.onclick = () => this.hideOnboardBrandForm();
     }
 
     async hideOnboardBrandForm() {
         this.onboardSheet.hide();
-        setTimeout(() => {
-            this.overlay.style.display = 'none';
-        }, 300);
     }
 
     showAliasesBottomSheet(aliases, brand) {