ux: better buttons toggle mechansim, new toast for no products selected

Author: shiftmed

angular/src/app/search-panel/search-panel.component.html

@@ -1,8 +1,25 @@
-<p-toast [baseZIndex]="5000">
+<p-toast
+  [baseZIndex]="5000"
+  [key]="toastKey"
+  position="top-right"
+  styleClass="product-toast"
+>
   <ng-template let-message pTemplate="message">
-    <div style="display: flex; align-items: center; margin: 5px">
-      <i class="pi pi-info-circle" style="font-size: 30px; padding: 0 10px"></i>
-      <div>{{ message.detail }}</div>
+    <div class="product-toast__card">
+      <span class="product-toast__icon">
+        <i class="pi pi-info-circle" aria-hidden="true"></i>
+      </span>
+      <div class="product-toast__text">
+        {{ message.detail }}
+      </div>
+      <button
+        type="button"
+        class="product-toast__close"
+        aria-label="Close notification"
+        (click)="messageService.clear(toastKey)"
+      >
+        <i class="pi pi-times" aria-hidden="true"></i>
+      </button>
     </div>
   </ng-template>
 </p-toast>
@@ -160,20 +177,11 @@ <h3 *ngIf="title" class="heading title has-text-black">{{ title }}</h3>
             class="product-type-chip"
             *ngFor="let product of visibleProductTypes"
             [class.product-type-chip--active]="isProductTypeActive(product.key)"
-            [class.product-type-chip--disabled]="product.comingSoon"
             (click)="onProductTypeToggle(product)"
             [attr.aria-pressed]="isProductTypeActive(product.key)"
-            [disabled]="product.comingSoon"
-            [attr.title]="product.comingSoon ? 'Coming soon' : null"
           >
             <i [ngClass]="product.icon" aria-hidden="true"></i>
             <span class="product-type-chip__label">{{ product.label }}</span>
-            <span
-              *ngIf="product.comingSoon"
-              class="product-type-chip__tag"
-              aria-hidden="true"
-              >soon</span
-            >
           </button>
         </div>
       </div>

angular/src/app/search-panel/search-panel.component.scss

@@ -335,24 +335,91 @@ body .p-highlight {
   opacity: 1;
 }
 
-.product-type-chip--disabled {
-  opacity: 0.55;
-  cursor: not-allowed;
-  border-style: dashed;
-}
-
 .product-type-chip__label {
   white-space: nowrap;
 }
 
-.product-type-chip__tag {
-  background: rgba(15, 23, 42, 0.9);
+/* Toast styling */
+:host ::ng-deep .product-toast.p-toast {
+  width: auto;
+  max-width: none;
+}
+
+:host ::ng-deep .product-toast .p-toast-message {
+  padding: 0;
+  background: transparent !important;
+  border: none !important;
+  border-left: none !important;
+  box-shadow: none !important;
+  width: auto;
+  max-width: none;
+}
+
+:host ::ng-deep .product-toast .p-toast-message-warn {
+  background: transparent !important;
+  border: none !important;
+  border-left: none !important;
+  box-shadow: none !important;
+}
+
+:host ::ng-deep .product-toast .p-toast-message-content {
+  padding: 0;
+  border: none;
+  background: transparent;
+}
+
+:host ::ng-deep .product-toast .p-toast-icon-close {
+  display: none;
+}
+
+.product-toast__card {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: 0.75rem;
+  background: #0a0a0a;
   color: #ffffff;
-  font-size: 0.68rem;
-  letter-spacing: 0.05em;
-  padding: 0.1rem 0.45rem;
+  border-radius: 14px;
+  border: 1px solid #1f1f1f;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
+  padding: 0.8rem 1rem 0.8rem 0.85rem;
+}
+
+.product-toast__icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 12px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #ffcc4d, #ffb200);
+  color: #0a0a0a;
+  font-size: 1.2rem;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
+}
+
+.product-toast__text {
+  font-size: 1rem;
+  font-weight: 500;
+  color: #ffffff;
+  line-height: 1.45;
+}
+
+.product-toast__close {
+  background: transparent;
+  border: none;
+  color: #ffffff;
+  cursor: pointer;
+  padding: 0.2rem;
   border-radius: 999px;
-  text-transform: uppercase;
+  transition: background 0.15s ease, color 0.15s ease;
+}
+
+.product-toast__close:hover,
+.product-toast__close:focus {
+  background: rgba(255, 255, 255, 0.12);
+  color: #ffffff;
+  outline: none;
 }
 
 

angular/src/app/search-panel/search-panel.component.ts

@@ -48,7 +48,6 @@ type ProductTypeOption = {
   label: string;
   icon: string;
   external?: boolean;
-  comingSoon?: boolean;
   description?: string;
 };
 
@@ -129,14 +128,12 @@ export class SearchPanelComponent implements OnInit, OnDestroy {
       label: "Papers",
       icon: "pi pi-book",
       external: true,
-      comingSoon: true,
     },
     {
       key: "patents",
       label: "Patents",
       icon: "pi pi-briefcase",
       external: true,
-      comingSoon: true,
     },
   ];
   private productTypesSub?: Subscription;
@@ -145,6 +142,7 @@ export class SearchPanelComponent implements OnInit, OnDestroy {
     "Toggle to include external products like open-source code (patents & papers coming soon). Results and filters will blend with NIST data.";
   externalInfoVisible: boolean = false;
   examplesDialogVisible = false;
+  toastKey = "productToast";
   placeHolderText: string[] = [
     "Artificial Intelligence",
     "Kinetics database",
@@ -345,6 +343,22 @@ export class SearchPanelComponent implements OnInit, OnDestroy {
   onExternalToggle(enabled: boolean) {
     this.includeExternalProducts = enabled;
     this.searchService.setExternalProducts(enabled);
+    if (enabled) {
+      // Turn on all external products; keep data as-is.
+      this.searchService.setProductTypes({
+        code: true,
+        papers: true,
+        patents: true,
+      });
+    } else {
+      // Disable external products and ensure data stays on.
+      this.searchService.setProductTypes({
+        code: false,
+        papers: false,
+        patents: false,
+        data: true,
+      });
+    }
   }
 
   openExternalInfo() {
@@ -356,20 +370,37 @@ export class SearchPanelComponent implements OnInit, OnDestroy {
   }
 
   get visibleProductTypes(): ProductTypeOption[] {
-    return this.productTypeOptions.filter(
-      (option) => this.includeExternalProducts || !option.external
-    );
+    return this.productTypeOptions;
   }
 
   isProductTypeActive(key: ProductTypeKey): boolean {
     return !!this.productTypes && !!this.productTypes[key];
   }
 
   onProductTypeToggle(option: ProductTypeOption) {
-    if (option.comingSoon) return;
-    if (option.external && !this.includeExternalProducts) return;
+    // If external toggle is off and user taps an external product, turn external on first.
+    if (option.external && !this.includeExternalProducts) {
+      this.includeExternalProducts = true;
+      this.searchService.setExternalProducts(true);
+    }
+    // When external is off, data is locked on.
+    if (!this.includeExternalProducts && option.key === "data") {
+      return;
+    }
     const nextState = !this.isProductTypeActive(option.key);
     this.searchService.setProductTypeEnabled(option.key, nextState);
+
+    // If external is on but no external products remain active, switch external off.
+    if (this.includeExternalProducts && !this.hasActiveExternalProducts()) {
+      this.includeExternalProducts = false;
+      this.searchService.setExternalProducts(false);
+    }
+  }
+
+  private hasActiveExternalProducts(): boolean {
+    const state: ProductTypeState =
+      this.productTypes || { ...DEFAULT_PRODUCT_TYPES };
+    return !!(state.code || state.papers || state.patents);
   }
 
   /**
@@ -530,6 +561,17 @@ export class SearchPanelComponent implements OnInit, OnDestroy {
    * @param searchTaxonomyKey
    */
   search(searchValue: string, searchTaxonomyKey: string) {
+    const activeProducts = this.searchService.getActiveProductTypes();
+    if (!activeProducts || activeProducts.length === 0) {
+      this.messageService.add({
+        severity: "warn",
+        summary: "Select a product",
+        detail: "Choose at least one product type before searching.",
+        life: 3500,
+        key: this.toastKey,
+      });
+      return;
+    }
     this.searchTaxonomyKey = searchTaxonomyKey;
 
     this.searchService.search(searchValue, this.router.url);