chore(admin-ui): Improve styling of filter presets

packages/admin-ui/src/lib/catalog/src/components/collection-data-table/collection-data-table.component.html

@@ -1,12 +1,12 @@
-<div class="bulk-actions">
-    <ng-content select="vdr-bulk-action-menu"></ng-content>
-</div>
+<vdr-data-table-filter-presets
+    *ngIf="filters"
+    [filters]="filters"
+    [dataTableId]="id"
+></vdr-data-table-filter-presets>
 <div class="table-wrapper">
-    <vdr-data-table-filter-presets
-        *ngIf="filters"
-        [filters]="filters"
-        [dataTableId]="id"
-    ></vdr-data-table-filter-presets>
+    <div class="bulk-actions">
+        <ng-content select="vdr-bulk-action-menu"></ng-content>
+    </div>
     <table class="" [class.no-select]="disableSelect">
         <thead [class.items-selected]="selectionManager?.selection.length">
             <tr class="heading-row">

packages/admin-ui/src/lib/core/src/providers/data-table/data-table-filter-collection.ts

@@ -218,14 +218,6 @@ export class DataTableFilterCollection<FilterInput extends Record<string, any> =
     }
 
     connectToRoute(route: ActivatedRoute) {
-        this.valueChanges.subscribe(() => {
-            this.router.navigate(['./'], {
-                queryParams: { [this.#filtersQueryParamName]: this.serialize(), page: 1 },
-                relativeTo: route,
-                queryParamsHandling: 'merge',
-            });
-        });
-
         route.queryParamMap
             .pipe(
                 map(params => params.get(this.#filtersQueryParamName)),

packages/admin-ui/src/lib/core/src/shared/components/data-table-2/data-table2.component.html

@@ -1,12 +1,12 @@
-<div class="bulk-actions">
-    <ng-content select="vdr-bulk-action-menu"></ng-content>
-</div>
+<vdr-data-table-filter-presets
+    *ngIf="filters"
+    [filters]="filters"
+    [dataTableId]="id"
+></vdr-data-table-filter-presets>
 <div class="table-wrapper">
-    <vdr-data-table-filter-presets
-        *ngIf="filters"
-        [filters]="filters"
-        [dataTableId]="id"
-    ></vdr-data-table-filter-presets>
+    <div class="bulk-actions">
+        <ng-content select="vdr-bulk-action-menu"></ng-content>
+    </div>
     <table class="" [class.no-select]="disableSelect">
         <thead [class.items-selected]="selectionManager?.selection.length">
             <tr class="heading-row">

packages/admin-ui/src/lib/core/src/shared/components/data-table-2/data-table2.component.scss

@@ -31,6 +31,7 @@
     display: block;
     overflow-y: hidden;
     overflow-x: auto;
+    position: relative;
     width: 100%;
     max-width: var(--surface-width);
 }

packages/admin-ui/src/lib/core/src/shared/components/data-table-filter-presets/add-filter-preset-button.component.ts

@@ -43,6 +43,7 @@ export class AddFilterPresetButtonComponent implements OnInit, OnDestroy {
                 takeUntil(this.destroy$),
             ),
             this.filterPresetService.presetChanges$,
+            this.filters.valueChanges,
         ).subscribe(() => {
             this.changeDetector.markForCheck();
             this.updateSelectedFilterPreset();

packages/admin-ui/src/lib/core/src/shared/components/data-table-filter-presets/data-table-filter-presets.component.html

@@ -19,7 +19,7 @@
             </div>
             <a
                 [routerLink]="['./']"
-                [queryParams]="preset.value === serializedActiveFilters ? {} : { filters: preset.value }"
+                [queryParams]="preset.value === serializedActiveFilters ? {} : { filters: preset.value, page: 1 }"
             >
                 <div>{{ preset.name }}</div>
             </a>

packages/admin-ui/src/lib/core/src/shared/components/data-table-filter-presets/data-table-filter-presets.component.scss

@@ -1,10 +1,11 @@
 .preset-tabs {
     padding-inline-start: var(--surface-margin-left);
     margin: var(--space-unit) 0;
+    gap: calc(var(--space-unit) * 0.5);
     display: flex;
     overflow-x: auto;
     overflow-y: hidden;
-    border-bottom: 1px solid var(--color-component-border-100);
+    //border-bottom: 1px solid var(--color-component-border-100);
 }
 
 .preset-tab {
@@ -16,20 +17,27 @@
     white-space: nowrap;
     text-transform: none;
     padding: 0 calc(var(--space-unit) * 1);
-    border-bottom: 1px solid var(--color-weight-300);
+    border: 1px solid var(--color-weight-300);
+    border-radius: var(--border-radius-lg);
     cursor: pointer;
 
     > a {
-        padding: calc(var(--space-unit) * 1) 0;
+        //padding: calc(var(--space-unit) * 1) 0;
         padding-inline-end: 0;
         color: var(--color-weight-600);
     }
 
     &.active {
-        border-bottom-color: var(--color-text-active);
+        border-color: var(--color-primary-700);
+        background-color: var(--color-primary-700);
+        color: var(--color-primary-100);
 
         > a {
-            color: var(--color-text-active);
+            color: var(--color-primary-100);
+        }
+
+        button.icon-button {
+            color: var(--color-primary-100);
         }
     }
 }
@@ -49,7 +57,7 @@
     opacity: 0.8;
     background: var(--color-weight-100);
     box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14),
-        0 3px 14px 2px rgba(0, 0, 0, 0.12);
+    0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
 
 .cdk-drag-placeholder {