feat(layout): enhance topbar with customizable templates and full-page support

- Updated app.layout.component.html to include start, center, and end templates for the topbar.
- Modified app.layout.component.ts to manage new template references and added isFullPage getter.
- Refactored app.topbar.component.html to utilize new templates and improved layout structure.
- Enhanced app.topbar.component.ts to accept new input properties for templates.
- Updated layout.service.ts to manage full-page state and new topbar slots.
- Added new payment bridge services for POS functionality.
- Introduced greater validator for form validation.
- Improved dialog component to support mobile drawer and responsive design.
- Updated styles for better mobile support and layout adjustments.
- Added new main menu sidebar for POS with dynamic content.

src/app/domains/pos/modules/landing/components/goods.component.html

@@ -1,29 +1,40 @@
-<div class="flex flex-col">
-  <div class="sticky top-0 bg-surface-ground z-10 pb-4">
-    <div class="flex items-center justify-between">
-      <div class="flex items-center gap-2 text-muted-color">
+<div class="flex flex-col min-h-full">
+  <div class="bg-surface-ground z-10 p-4 border-b border-surface-border shadow-[0_-4px_16px_rgba(0,0,0,0.08)]">
+    <div class="flex items-center justify-end mb-4">
+      <!-- <div class="flex items-center gap-2 text-muted-color">
         <i class="pi pi-list"></i>
         <span class="text-base font-bold">لیست کالاها</span>
-      </div>
-      <div class="flex items-center gap-2">
-        <app-search-input (search)="onSearch($event)"></app-search-input>
-
-        <div class="card p-2! flex justify-center">
-          <p-selectbutton [options]="viewOptions" [(ngModel)]="viewType" optionValue="value">
-            <ng-template #item let-item>
-              <i [class]="item.icon"></i>
-            </ng-template>
-          </p-selectbutton>
-        </div>
+      </div> -->
+      <div class="flex items-center gap-2 w-full">
+        <app-search-input class="sm:w-auto w-full max-w-xs" (search)="onSearch($event)"></app-search-input>
+        <p-divider layout="vertical" />
+        <p-selectbutton
+          [options]="viewOptions"
+          [(ngModel)]="viewType"
+          optionValue="value"
+          [allowEmpty]="false"
+          class="shrink-0 border border-surface-border bg-surface-ground"
+        >
+          <ng-template #item let-item>
+            <i [class]="item.icon"></i>
+          </ng-template>
+        </p-selectbutton>
       </div>
     </div>
     <pos-good-categories (categoryChange)="onCategoryChange($event)" />
   </div>
-  @if (viewType === "grid") {
-    <pos-good-grid-view (onAdd)="addGood($event)" />
-  } @else {
-    <pos-goods-list-view (onAdd)="addGood($event)" />
-  }
+  <div [class]="`p-4 ${!loading() && !goods()?.length ? ' grow flex items-center justify-center' : ''}`">
+    @if (!loading() && !goods()?.length) {
+      <div class="flex flex-col items-center gap-4 mt-10">
+        <i class="pi pi-box text-6xl! text-muted-color"></i>
+        <span class="text-xl font-semibold text-muted-color">کالایی برای نمایش وجود ندارد.</span>
+      </div>
+    } @else if (viewType === "grid") {
+      <pos-good-grid-view (onAdd)="addGood($event)" />
+    } @else {
+      <pos-goods-list-view (onAdd)="addGood($event)" />
+    }
+  </div>
 
   @if (selectedGoodToAdd()) {
     <pos-payload-form-dialog