From e4651e2f1faaffcdbaac3b0fff46b80522581866 Mon Sep 17 00:00:00 2001
From: Giddh's Black Tiger <divyanshushrivastava123@gmail.com>
Date: Wed, 1 Apr 2026 17:16:54 +0530
Subject: [PATCH 1/3] refactor: improve search component styling and add client
 name tooltip

---
 apps/36-blocks/src/app/layout/layout.component.html | 4 +++-
 libs/ui/search/src/lib/search/search.component.html | 4 ++--
 libs/ui/search/src/lib/search/search.component.scss | 0
 libs/ui/search/src/lib/search/search.component.ts   | 2 +-
 4 files changed, 6 insertions(+), 4 deletions(-)
 delete mode 100644 libs/ui/search/src/lib/search/search.component.scss

diff --git a/apps/36-blocks/src/app/layout/layout.component.html b/apps/36-blocks/src/app/layout/layout.component.html
index ecdadc0f..9105457e 100644
--- a/apps/36-blocks/src/app/layout/layout.component.html
+++ b/apps/36-blocks/src/app/layout/layout.component.html
@@ -26,7 +26,9 @@
                     }
                 </div>
                 } @else {
-                <mat-icon class="mat-icon-22">apps</mat-icon>
+                <mat-icon class="mat-icon-22" [matTooltip]="clientSettings?.client?.name" matTooltipPosition="right"
+                    >apps</mat-icon
+                >
                 }
             </div>
             <mat-menu #clientsMenu="matMenu" class="w-[240px]" xPosition="after">
diff --git a/libs/ui/search/src/lib/search/search.component.html b/libs/ui/search/src/lib/search/search.component.html
index d3018a86..40758e2e 100644
--- a/libs/ui/search/src/lib/search/search.component.html
+++ b/libs/ui/search/src/lib/search/search.component.html
@@ -1,4 +1,4 @@
-<mat-form-field class="search-form-field" [class]="matFormFieldClass()?.length ? matFormFieldClass() : ''">
+<mat-form-field class="w-[260px]" [class]="matFormFieldClass()?.length ? matFormFieldClass() : ''">
     @if (!isRemoveChar()) {
     <input
         [attr.type]="type()"
@@ -30,7 +30,7 @@
     }
     <mat-icon matPrefix>search</mat-icon>
     @if (searchFormControl.value?.length && !hideCloseIcon()) {
-    <button (click)="clearSearch()" class="icon-btn-md" matIconButton matSuffix>
+    <button (click)="clearSearch()" class="icon-btn-md mr-1" matIconButton matSuffix>
         <mat-icon>close</mat-icon>
     </button>
     } @if (hint()) {
diff --git a/libs/ui/search/src/lib/search/search.component.scss b/libs/ui/search/src/lib/search/search.component.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/libs/ui/search/src/lib/search/search.component.ts b/libs/ui/search/src/lib/search/search.component.ts
index 304082e9..57378693 100644
--- a/libs/ui/search/src/lib/search/search.component.ts
+++ b/libs/ui/search/src/lib/search/search.component.ts
@@ -33,7 +33,7 @@ import { debounceTime } from 'rxjs/operators';
         RemoveCharacterDirective,
     ],
     templateUrl: './search.component.html',
-    styleUrls: ['./search.component.scss'],
+    styles: ``,
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SearchComponent implements OnInit {

From a4a88252730165a224c312832ca4ec6b49d37cfe Mon Sep 17 00:00:00 2001
From: Giddh's Black Tiger <divyanshushrivastava123@gmail.com>
Date: Wed, 1 Apr 2026 18:45:17 +0530
Subject: [PATCH 2/3] refactor: extract UI settings and side nav state into
 services, improve service list styling

- Create UiSettingsService to centralize theme and side nav state management with localStorage persistence and 30-day TTL
- Create SideNavService to manage sidebar open/close state
- Remove mat-card wrappers from service lists in create-feature and management components
- Add service icons to management sections (Roles, Permissions, Snippet, Settings)
- Implement getServiceListItems method to map services with dynamic icons based
---
 .../create-feature.component.html             | 18 ++----
 .../create-feature.component.ts               | 29 ++++++---
 .../src/app/layout/layout.component.html      | 28 ++++----
 .../src/app/layout/layout.component.ts        | 21 +++---
 .../main-left-side-nav.component.scss         |  7 --
 .../src/app/layout/side-nav.service.ts        | 25 ++++++++
 .../src/app/layout/ui-settings.service.ts     | 64 +++++++++++++++++++
 .../management/management.component.html      | 55 +++++++++++-----
 .../users/management/management.component.ts  | 12 ++--
 .../src/app/users/user/user.component.html    |  7 +-
 .../src/app/users/user/user.component.ts      |  8 +++
 apps/shared/scss/global.scss                  |  3 +
 .../src/lib/search/search.component.html      |  2 +-
 .../src/lib/service-list.component.html       | 27 ++++----
 .../src/lib/service-list.component.scss       |  3 -
 .../src/lib/service-list.component.ts         |  1 +
 16 files changed, 220 insertions(+), 90 deletions(-)
 create mode 100644 apps/36-blocks/src/app/layout/side-nav.service.ts
 create mode 100644 apps/36-blocks/src/app/layout/ui-settings.service.ts

diff --git a/apps/36-blocks/src/app/features/create-feature/create-feature.component.html b/apps/36-blocks/src/app/features/create-feature/create-feature.component.html
index a591bd17..92ba510b 100644
--- a/apps/36-blocks/src/app/features/create-feature/create-feature.component.html
+++ b/apps/36-blocks/src/app/features/create-feature/create-feature.component.html
@@ -558,17 +558,13 @@ <h3 class="template-card__title">Custom Mapping</h3>
 <ng-template #configureMethodTemplate let-selectedIndex="selectedIndex">
     <div class="flex gap-4 my-6 grow min-h-[400px] max-lg:flex-col">
         <div class="max-xl:flex-col flex gap-4 grow">
-            <mat-card class="shrink-0 self-start max-xl:w-full">
-                <mat-card-header> Services </mat-card-header>
-                <mat-card-content class="!p-2">
-                    <proxy-service-list
-                        [services]="(selectedMethod | async)?.method_services ?? []"
-                        [selectedIndex]="selectedServiceIndex"
-                        [getFormAt]="getServiceFormAt"
-                        (serviceSelect)="selectedServiceIndex = $event"
-                    ></proxy-service-list>
-                </mat-card-content>
-            </mat-card>
+            <proxy-service-list
+                class="shrink-0 self-start max-xl:w-full"
+                [services]="getServiceListItems((selectedMethod | async)?.method_services ?? [])"
+                [selectedIndex]="selectedServiceIndex"
+                [getFormAt]="getServiceFormAt"
+                (serviceSelect)="selectedServiceIndex = $event"
+            ></proxy-service-list>
             <ng-container *ngTemplateOutlet="configureMethodFormContent"></ng-container>
         </div>
         @if (isEditMode) {
diff --git a/apps/36-blocks/src/app/features/create-feature/create-feature.component.ts b/apps/36-blocks/src/app/features/create-feature/create-feature.component.ts
index 4d3b097d..805f7ea9 100644
--- a/apps/36-blocks/src/app/features/create-feature/create-feature.component.ts
+++ b/apps/36-blocks/src/app/features/create-feature/create-feature.component.ts
@@ -67,7 +67,8 @@ import { SimpleDialogComponent } from './simple-dialog/simple-dialog.component';
 import { CreatePlanDialogComponent } from './create-plan-dialog/create-plan-dialog.component';
 import { CreateTaxDialogComponent } from './create-tax-dialog/create-tax-dialog.component';
 import { ConfirmDialogComponent } from '@proxy/ui/confirm-dialog';
-import { ServiceListComponent } from '@proxy/ui/service-list';
+import { ServiceListComponent, ServiceListItem } from '@proxy/ui/service-list';
+import { UiSettingsService } from '../../layout/ui-settings.service';
 type ServiceFormGroup = FormGroup<{
     requirements: FormGroup<{
         [key: string]: FormControl<any>;
@@ -153,6 +154,7 @@ export class CreateFeatureComponent extends BaseComponent implements OnDestroy,
     private ngZone = inject(NgZone);
     private dialog = inject(MatDialog);
     private http = inject(HttpClient);
+    private uiSettings = inject(UiSettingsService);
 
     public taxes: any[] = [];
     public createPlanForm: any;
@@ -216,6 +218,22 @@ export class CreateFeatureComponent extends BaseComponent implements OnDestroy,
     public selectedServiceIndex = 0;
     public selectedSubscriptionServiceIndex = -2;
 
+    public getServiceListItems(services: IMethodService[]): ServiceListItem[] {
+        return (services ?? []).map((s) => ({ name: s.name, icon: this._serviceIcon(s.name) }));
+    }
+
+    private _serviceIcon(name: string): string {
+        const n = (name ?? '').toLowerCase();
+        if (n.includes('google')) return 'g_mobiledata';
+        if (n.includes('apple')) return 'apple';
+        if (n.includes('password') || n.includes('login')) return 'lock';
+        if (n.includes('otp') || n.includes('sms') || n.includes('msg')) return 'sms';
+        if (n.includes('email') || n.includes('mail')) return 'mail';
+        if (n.includes('whatsapp')) return 'chat';
+        if (n.includes('phone') || n.includes('mobile')) return 'smartphone';
+        return 'miscellaneous_services';
+    }
+
     /** Duplicate of service form used inside configure method dialog; patched back to serviceForm on close */
     public configureMethodDialogForm: ServiceFormGroup | null = null;
 
@@ -684,19 +702,14 @@ export class CreateFeatureComponent extends BaseComponent implements OnDestroy,
 
     /** Default primary color: black in light theme, white in dark theme */
     public getDefaultPrimaryColor(): string {
-        return typeof localStorage !== 'undefined' && localStorage.getItem('selected-theme') === 'dark-theme'
-            ? '#ffffff'
-            : '#000000';
+        return this.uiSettings.theme === 'dark-theme' ? '#ffffff' : '#000000';
     }
 
     /** Returns the effective primary color based on the selected branding theme */
     public getEffectivePrimaryColor(): string {
         const theme = this.featureForm.get('brandingDetails.theme')?.value;
         const isDark =
-            theme === WidgetTheme.Dark ||
-            (theme === WidgetTheme.System &&
-                typeof localStorage !== 'undefined' &&
-                localStorage.getItem('selected-theme') === 'dark-theme');
+            theme === WidgetTheme.Dark || (theme === WidgetTheme.System && this.uiSettings.theme === 'dark-theme');
         if (isDark) {
             return this.featureForm.get('brandingDetails.dark_theme_primary_color')?.value || '#ffffff';
         }
diff --git a/apps/36-blocks/src/app/layout/layout.component.html b/apps/36-blocks/src/app/layout/layout.component.html
index 9105457e..47da6536 100644
--- a/apps/36-blocks/src/app/layout/layout.component.html
+++ b/apps/36-blocks/src/app/layout/layout.component.html
@@ -1,20 +1,24 @@
-<div class="flex w-full h-full" [class.collapsed-sidebar]="!isSideNavOpen()">
+<div class="flex w-full h-full" [class.collapsed-sidebar]="!sideNavService.isSideNavOpen()">
     <div
         class="flex flex-col transition-all duration-200 mat-drawer-content max-desktop:fixed max-desktop:z-[999] max-desktop:top-0 max-desktop:bottom-0 bg-color p-2"
-        [class.mat-drawer-toggle-btn-hover]="isSideNavOpen()"
-        [class]="!isSideNavOpen() ? 'overflow-hidden !w-[56px] p-1.5' : 'w-[246px]'"
+        [class.mat-drawer-toggle-btn-hover]="sideNavService.isSideNavOpen()"
+        [class]="!sideNavService.isSideNavOpen() ? 'overflow-hidden !w-[56px] p-1.5' : 'w-[246px]'"
     >
         @let clientSettings = clientSettings$ | async; @let clientList = clients$ | async; @let isMultipleClients =
         (clientList?.data?.length ?? 0) > 1;
-        <div class="flex items-center pt-2" [class.flex-col]="!isSideNavOpen()" [class.gap-2]="!isSideNavOpen()">
+        <div
+            class="flex items-center pt-2"
+            [class.flex-col]="!sideNavService.isSideNavOpen()"
+            [class.gap-2]="!sideNavService.isSideNavOpen()"
+        >
             <div
                 class="flex items-center grow gap-2 mat-drawer-header-title pr-2"
                 #clientsMenuTrigger="matMenuTrigger"
                 [matMenuTriggerFor]="isMultipleClients ? clientsMenu : null"
-                [class.pl-2]="!isSideNavOpen()"
-                [class.pl-4]="isSideNavOpen()"
+                [class.pl-2]="!sideNavService.isSideNavOpen()"
+                [class.pl-4]="sideNavService.isSideNavOpen()"
             >
-                @if (isSideNavOpen()) {
+                @if (sideNavService.isSideNavOpen()) {
                 <div class="flex items-center gap-x-1 mat-drawer-header-subtitle cursor-pointer">
                     <span class="font-16 font-semibold max-w-[162px] overflow-hidden whitespace-nowrap text-ellipsis">
                         {{ clientSettings?.client?.name }}
@@ -55,24 +59,24 @@
                 matIconButton
                 class="sidebar-toggle-btn"
                 (click)="toggleSideBarEvent()"
-                [matTooltip]="isSideNavOpen() ? 'Collapse Menu' : 'Expand Menu'"
+                [matTooltip]="sideNavService.isSideNavOpen() ? 'Collapse Menu' : 'Expand Menu'"
                 matTooltipPosition="right"
                 type="button"
             >
                 <mat-icon>{{
-                    isSideNavOpen() ? 'keyboard_double_arrow_left' : 'keyboard_double_arrow_right'
+                    sideNavService.isSideNavOpen() ? 'keyboard_double_arrow_left' : 'keyboard_double_arrow_right'
                 }}</mat-icon>
             </button>
         </div>
         <!-- Proxy Sidenav::START -->
         <proxy-main-left-side-nav
             class="mat-drawer-nav proxy-left-menu"
-            [isSideNavOpen]="!isSideNavOpen()"
+            [isSideNavOpen]="!sideNavService.isSideNavOpen()"
         ></proxy-main-left-side-nav>
         <!-- Proxy Sidenav::END -->
         @if (logInData$ | async; as user) {
         <div class="mt-auto">
-            @if (isSideNavOpen()) {
+            @if (sideNavService.isSideNavOpen()) {
             <button
                 class="!rounded-lg !p-0 w-full"
                 matButton
@@ -84,7 +88,7 @@
                     <div class="flex items-center gap-2">
                         <ng-container *ngTemplateOutlet="displayPicture; context: { user: user }"></ng-container>
                         <h6
-                            [class.hidden]="!isSideNavOpen()"
+                            [class.hidden]="!sideNavService.isSideNavOpen()"
                             class="username m-0 max-w-[162px] overflow-hidden whitespace-nowrap text-ellipsis"
                         >
                             {{ user.displayName }}
diff --git a/apps/36-blocks/src/app/layout/layout.component.ts b/apps/36-blocks/src/app/layout/layout.component.ts
index d6ac687b..28add85b 100644
--- a/apps/36-blocks/src/app/layout/layout.component.ts
+++ b/apps/36-blocks/src/app/layout/layout.component.ts
@@ -19,7 +19,6 @@ import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { CDKScrollComponent } from '@proxy/ui/virtual-scroll';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import { MainLeftSideNavComponent } from './main-left-side-nav/main-left-side-nav.component';
 import { IClient, IClientSettings, IFirebaseUserModel, IPaginatedResponse } from '@proxy/models/root-models';
@@ -36,6 +35,8 @@ import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 import { RootService } from '@proxy/services/proxy/root';
 import { environment } from '../../environments/environment';
 import { AuthService } from '@proxy/services/proxy/auth';
+import { SideNavService } from './side-nav.service';
+import { UiSettingsService } from './ui-settings.service';
 @Component({
     changeDetection: ChangeDetectionStrategy.OnPush,
     selector: 'proxy-layout',
@@ -65,7 +66,6 @@ export class LayoutComponent extends BaseComponent implements OnInit, OnDestroy
     public clients$: Observable<IPaginatedResponse<IClient[]>>;
     public swtichClientSuccess$: Observable<boolean>;
 
-    public isSideNavOpen = signal<boolean>(true);
     public isDarkMode = signal<boolean>(false);
 
     public toggleMenuSideBar: boolean;
@@ -81,6 +81,8 @@ export class LayoutComponent extends BaseComponent implements OnInit, OnDestroy
     private rootService = inject(RootService);
     private authService = inject(AuthService);
     private cdr = inject(ChangeDetectorRef);
+    public sideNavService = inject(SideNavService);
+    private uiSettings = inject(UiSettingsService);
 
     constructor() {
         super();
@@ -122,7 +124,7 @@ export class LayoutComponent extends BaseComponent implements OnInit, OnDestroy
         this.getCurrentTheme();
 
         if (this.isMobileDevice()) {
-            this.toggleSideBarEvent();
+            this.sideNavService.close();
         }
         this.swtichClientSuccess$.pipe(takeUntil(this.destroy$)).subscribe((res) => {
             if (res) {
@@ -189,19 +191,12 @@ export class LayoutComponent extends BaseComponent implements OnInit, OnDestroy
     }
 
     public getCurrentTheme() {
-        if (
-            localStorage.getItem('selected-theme') === null ||
-            localStorage.getItem('selected-theme') === 'light-theme'
-        ) {
-            this.switchedDarkMode(false);
-        } else {
-            this.switchedDarkMode(true);
-        }
+        this.switchedDarkMode(this.uiSettings.theme === 'dark-theme');
     }
 
     switchedDarkMode(isDarkMode: boolean) {
         const hostClass = isDarkMode ? 'dark-theme' : 'light-theme';
-        localStorage.setItem('selected-theme', hostClass);
+        this.uiSettings.setTheme(hostClass);
         document.body.classList.remove('dark-theme', 'light-theme');
         document.body.classList.add(hostClass);
         this.isDarkMode.set(isDarkMode);
@@ -218,6 +213,6 @@ export class LayoutComponent extends BaseComponent implements OnInit, OnDestroy
     }
 
     public toggleSideBarEvent(): void {
-        this.isSideNavOpen.set(!this.isSideNavOpen());
+        this.sideNavService.toggle();
     }
 }
diff --git a/apps/36-blocks/src/app/layout/main-left-side-nav/main-left-side-nav.component.scss b/apps/36-blocks/src/app/layout/main-left-side-nav/main-left-side-nav.component.scss
index 7b74e3b3..e69de29b 100644
--- a/apps/36-blocks/src/app/layout/main-left-side-nav/main-left-side-nav.component.scss
+++ b/apps/36-blocks/src/app/layout/main-left-side-nav/main-left-side-nav.component.scss
@@ -1,7 +0,0 @@
-.service-list {
-    .mat-mdc-list-item {
-        border-radius: 8px !important;
-        height: 42px !important;
-        margin-bottom: 2px;
-    }
-}
diff --git a/apps/36-blocks/src/app/layout/side-nav.service.ts b/apps/36-blocks/src/app/layout/side-nav.service.ts
new file mode 100644
index 00000000..191d511c
--- /dev/null
+++ b/apps/36-blocks/src/app/layout/side-nav.service.ts
@@ -0,0 +1,25 @@
+import { Injectable, inject, signal } from '@angular/core';
+import { UiSettingsService } from './ui-settings.service';
+
+@Injectable({ providedIn: 'root' })
+export class SideNavService {
+    private uiSettings = inject(UiSettingsService);
+
+    public isSideNavOpen = signal<boolean>(this.uiSettings.sideNavOpen);
+
+    public toggle(): void {
+        const next = !this.isSideNavOpen();
+        this.isSideNavOpen.set(next);
+        this.uiSettings.setSideNavOpen(next);
+    }
+
+    public open(): void {
+        this.isSideNavOpen.set(true);
+        this.uiSettings.setSideNavOpen(true);
+    }
+
+    public close(): void {
+        this.isSideNavOpen.set(false);
+        this.uiSettings.setSideNavOpen(false);
+    }
+}
diff --git a/apps/36-blocks/src/app/layout/ui-settings.service.ts b/apps/36-blocks/src/app/layout/ui-settings.service.ts
new file mode 100644
index 00000000..a407ece4
--- /dev/null
+++ b/apps/36-blocks/src/app/layout/ui-settings.service.ts
@@ -0,0 +1,64 @@
+import { Injectable } from '@angular/core';
+
+export type AppTheme = 'light-theme' | 'dark-theme';
+
+interface UiSettings {
+    theme: AppTheme;
+    sideNavOpen: boolean;
+    _savedAt: number;
+}
+
+const STORAGE_KEY = 'ui-settings';
+const TTL_MS = 30 * 24 * 60 * 60 * 1000; // 30 days
+
+const DEFAULTS: Omit<UiSettings, '_savedAt'> = {
+    theme: 'light-theme',
+    sideNavOpen: true,
+};
+
+@Injectable({ providedIn: 'root' })
+export class UiSettingsService {
+    private _settings: UiSettings;
+
+    constructor() {
+        this._settings = this._load();
+    }
+
+    get theme(): AppTheme {
+        return this._settings.theme;
+    }
+
+    get sideNavOpen(): boolean {
+        return this._settings.sideNavOpen;
+    }
+
+    setTheme(value: AppTheme): void {
+        this._settings.theme = value;
+        this._save();
+    }
+
+    setSideNavOpen(value: boolean): void {
+        this._settings.sideNavOpen = value;
+        this._save();
+    }
+
+    private _load(): UiSettings {
+        try {
+            const raw = localStorage.getItem(STORAGE_KEY);
+            if (raw) {
+                const parsed: UiSettings = JSON.parse(raw);
+                if (parsed._savedAt && Date.now() - parsed._savedAt < TTL_MS) {
+                    return { ...DEFAULTS, ...parsed };
+                }
+            }
+        } catch {
+            // corrupted storage — fall through to defaults
+        }
+        return { ...DEFAULTS, _savedAt: Date.now() };
+    }
+
+    private _save(): void {
+        this._settings._savedAt = Date.now();
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(this._settings));
+    }
+}
diff --git a/apps/36-blocks/src/app/users/management/management.component.html b/apps/36-blocks/src/app/users/management/management.component.html
index b5afb087..0c51f659 100644
--- a/apps/36-blocks/src/app/users/management/management.component.html
+++ b/apps/36-blocks/src/app/users/management/management.component.html
@@ -1,9 +1,39 @@
 <div class="h-full flex flex-col gap-6">
-    <!-- Block Selector Header -->
+    @if (!roleForm.get('feature_id')?.value) {
+    <!-- Empty state: centered block selector -->
+    <div class="flex-1 flex flex-col items-center justify-center gap-5 text-center">
+        <div
+            class="flex items-center justify-center w-16 h-16 rounded-full"
+            style="background: color-mix(in srgb, var(--mat-sys-primary) 12%, transparent)"
+        >
+            <mat-icon class="mat-icon-36 material-icons-outlined" style="color: var(--mat-sys-primary)"
+                >featured_play_list</mat-icon
+            >
+        </div>
+        <div>
+            <p class="font-semibold text-base m-0 mb-1">Select a Block to get started</p>
+            <p class="text-sm secondary-text-color m-0">
+                Choose a block from the dropdown below to manage its roles, permissions, and settings.
+            </p>
+        </div>
+        <mat-form-field appearance="outline" class="no-padding w-72">
+            <mat-label>Block</mat-label>
+            <mat-select [formControl]="roleForm.get('feature_id')" placeholder="Select Block">
+                @for (feature of features; track feature.reference_id) {
+                <mat-option [value]="feature.reference_id">{{ feature.name }}</mat-option>
+                }
+            </mat-select>
+            @if (roleForm.get('feature_id')?.hasError('required')) {
+            <mat-error>Block is required</mat-error>
+            }
+        </mat-form-field>
+    </div>
+    } @else {
+    <!-- Block Selector Header (when a block is selected) -->
     <div class="flex flex-wrap items-center gap-4">
-        <mat-form-field appearance="outline" class="no-padding w-xs-100 mt-6">
-            <mat-label>Select Block</mat-label>
-            <mat-select [formControl]="roleForm.get('feature_id')">
+        <mat-form-field appearance="outline" class="no-padding w-full mt-6">
+            <mat-label>Block</mat-label>
+            <mat-select [formControl]="roleForm.get('feature_id')" placeholder="Select Block">
                 @for (feature of features; track feature.reference_id) {
                 <mat-option [value]="feature.reference_id">{{ feature.name }}</mat-option>
                 }
@@ -14,20 +44,15 @@
         </mat-form-field>
     </div>
 
-    @if (roleForm.get('feature_id')?.value) {
     <!-- Main Content Area -->
     <div class="flex max-md:flex-col gap-6 grow min-h-[400px] overflow-hidden">
         <!-- Sidebar Nav -->
-        <mat-card class="w-[200px] shrink-0 self-start max-md:w-full">
-            <mat-card-header> Settings </mat-card-header>
-            <mat-card-content class="!p-2">
-                <proxy-service-list
-                    [services]="managementSections"
-                    [selectedIndex]="selectedSectionIndex"
-                    (serviceSelect)="selectedSectionIndex = $event"
-                ></proxy-service-list>
-            </mat-card-content>
-        </mat-card>
+        <proxy-service-list
+            class="w-[200px] shrink-0 self-start max-md:w-full"
+            [services]="managementSections"
+            [selectedIndex]="selectedSectionIndex"
+            (serviceSelect)="selectedSectionIndex = $event"
+        ></proxy-service-list>
 
         <!-- Content Panel -->
         <div class="grow">
diff --git a/apps/36-blocks/src/app/users/management/management.component.ts b/apps/36-blocks/src/app/users/management/management.component.ts
index 3f934021..406f65ea 100644
--- a/apps/36-blocks/src/app/users/management/management.component.ts
+++ b/apps/36-blocks/src/app/users/management/management.component.ts
@@ -11,6 +11,7 @@ import {
 import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatTableModule } from '@angular/material/table';
+import { MatListModule } from '@angular/material/list';
 import { MatCardModule } from '@angular/material/card';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatButtonModule } from '@angular/material/button';
@@ -57,8 +58,10 @@ interface IRole {
         CommonModule,
         ReactiveFormsModule,
         MatTableModule,
+        MatListModule,
         MatCardModule,
         MatPaginatorModule,
+        ServiceListComponent,
         NoRecordFoundComponent,
         MatPaginatorGotoComponent,
         MatButtonModule,
@@ -70,7 +73,6 @@ interface IRole {
         MatTooltipModule,
         MatSlideToggleModule,
         MatDividerModule,
-        ServiceListComponent,
         CopyButtonComponent,
         MarkdownModule,
         MatChipsModule,
@@ -120,10 +122,10 @@ export class ManagementComponent implements OnInit, OnDestroy {
     public editingPermission: any | null = null;
     public selectedSectionIndex: number = 0;
     public readonly managementSections = [
-        { name: 'Roles' },
-        { name: 'Permissions' },
-        { name: 'Snippet' },
-        { name: 'Settings' },
+        { name: 'Roles', icon: 'person' },
+        { name: 'Permissions', icon: 'shield' },
+        { name: 'Snippet', icon: 'code' },
+        { name: 'Settings', icon: 'settings' },
     ];
     public features$: Observable<IPaginatedResponse<IFeature[]>> = this.featureComponentStore.feature$;
     public roles$: Observable<IPaginatedResponse<any[]>> = this.userComponentStore.roles$;
diff --git a/apps/36-blocks/src/app/users/user/user.component.html b/apps/36-blocks/src/app/users/user/user.component.html
index c517a61f..2f338031 100644
--- a/apps/36-blocks/src/app/users/user/user.component.html
+++ b/apps/36-blocks/src/app/users/user/user.component.html
@@ -1,6 +1,11 @@
 @if (loading$ | async; as loading) {
 <div class="flex flex-col h-full">
-    <mat-tab-group mat-stretch-tabs="false" animationDuration="200ms" class="h-full">
+    <mat-tab-group
+        mat-stretch-tabs="false"
+        animationDuration="200ms"
+        class="h-full"
+        (selectedTabChange)="onTabChange($event.index)"
+    >
         <!-- User Tab -->
         <mat-tab label="User">
             <div class="flex flex-col h-full">
diff --git a/apps/36-blocks/src/app/users/user/user.component.ts b/apps/36-blocks/src/app/users/user/user.component.ts
index 848fce78..aea306a4 100644
--- a/apps/36-blocks/src/app/users/user/user.component.ts
+++ b/apps/36-blocks/src/app/users/user/user.component.ts
@@ -32,6 +32,7 @@ import { SkeletonDirective } from '@proxy/directives/skeleton';
 import { MarkdownModule } from 'ngx-markdown';
 import { CopyButtonComponent } from '@proxy/ui/copy-button';
 import { ManagementComponent } from '../management/management.component';
+import { SideNavService } from '../../layout/side-nav.service';
 import { BaseComponent } from '@proxy/ui/base-component';
 import {
     DEFAULT_END_DATE,
@@ -94,6 +95,7 @@ export class UserComponent extends BaseComponent implements OnDestroy, OnInit {
     private componentStore = inject(UserComponentStore);
     private featureComponentStore = inject(FeatureComponentStore);
     private cdr = inject(ChangeDetectorRef);
+    private sideNavService = inject(SideNavService);
 
     /** Store current API inprogress state */
     public loading$: Observable<{ [key: string]: boolean }> = this.componentStore.loading$;
@@ -164,6 +166,12 @@ export class UserComponent extends BaseComponent implements OnDestroy, OnInit {
         this.features = features.filter((feature) => feature.feature_id === 1);
     }
 
+    public onTabChange(index: number): void {
+        if (index === 1) {
+            this.sideNavService.close();
+        }
+    }
+
     public ngOnDestroy(): void {
         super.ngOnDestroy();
     }
diff --git a/apps/shared/scss/global.scss b/apps/shared/scss/global.scss
index 4bb5cc9e..2c7541c7 100644
--- a/apps/shared/scss/global.scss
+++ b/apps/shared/scss/global.scss
@@ -5,6 +5,9 @@
 .service-list {
     &.mat-mdc-list-base {
         .mat-mdc-list-item {
+            border-radius: 8px !important;
+            height: 42px !important;
+            margin-bottom: 2px;
             .mdc-list-item__primary-text {
                 display: flex;
                 align-items: center;
diff --git a/libs/ui/search/src/lib/search/search.component.html b/libs/ui/search/src/lib/search/search.component.html
index 40758e2e..c93cf2d4 100644
--- a/libs/ui/search/src/lib/search/search.component.html
+++ b/libs/ui/search/src/lib/search/search.component.html
@@ -1,4 +1,4 @@
-<mat-form-field class="w-[260px]" [class]="matFormFieldClass()?.length ? matFormFieldClass() : ''">
+<mat-form-field class="!min-w-[280px]" [class]="matFormFieldClass()?.length ? matFormFieldClass() : ''">
     @if (!isRemoveChar()) {
     <input
         [attr.type]="type()"
diff --git a/libs/ui/service-list/src/lib/service-list.component.html b/libs/ui/service-list/src/lib/service-list.component.html
index e635fe80..7cec2050 100644
--- a/libs/ui/service-list/src/lib/service-list.component.html
+++ b/libs/ui/service-list/src/lib/service-list.component.html
@@ -1,18 +1,17 @@
-<mat-list role="list" class="pt-0 service-list">
+<mat-nav-list class="pt-0 service-list">
     @for (service of services(); track service; let i = $index) {
-    <mat-list-item
-        role="listitem"
-        class="rounded-4"
-        [class.active]="selectedIndex() === i"
-        (click)="serviceSelect.emit(i)"
-    >
-        <div class="flex items-center grow">
-            <span class="font-14">{{ service.name }}</span>
+    <button mat-list-item [class.mdc-list-item--activated]="selectedIndex() === i" (click)="serviceSelect.emit(i)">
+        @if (service.icon) {
+        <mat-icon matListItemIcon class="material-icons-outlined">{{ service.icon }}</mat-icon>
+        }
+        <span matListItemTitle class="font-14 flex items-center justify-between w-full">
+            {{ service.name }}
             @if (isInvalid(i)) {
-            <mat-icon class="material-icons-outlined mat-icon-18 text-danger ml-1 mt-1">error</mat-icon>
+            <mat-icon class="material-icons-outlined mat-icon-18 text-danger shrink-0">error</mat-icon>
+            } @else {
+            <mat-icon class="material-icons-outlined mat-icon-18 shrink-0">navigate_next</mat-icon>
             }
-        </div>
-        <mat-icon class="material-icons-outlined mat-icon-18">navigate_next</mat-icon>
-    </mat-list-item>
+        </span>
+    </button>
     }
-</mat-list>
+</mat-nav-list>
diff --git a/libs/ui/service-list/src/lib/service-list.component.scss b/libs/ui/service-list/src/lib/service-list.component.scss
index deb0766e..e69de29b 100644
--- a/libs/ui/service-list/src/lib/service-list.component.scss
+++ b/libs/ui/service-list/src/lib/service-list.component.scss
@@ -1,3 +0,0 @@
-:host ::ng-deep mat-list-item.active {
-    background-color: var(--color-dark-accent-light);
-}
diff --git a/libs/ui/service-list/src/lib/service-list.component.ts b/libs/ui/service-list/src/lib/service-list.component.ts
index 13a3ec88..b48d7643 100644
--- a/libs/ui/service-list/src/lib/service-list.component.ts
+++ b/libs/ui/service-list/src/lib/service-list.component.ts
@@ -5,6 +5,7 @@ import { AbstractControl } from '@angular/forms';
 
 export interface ServiceListItem {
     name: string;
+    icon?: string;
 }
 
 @Component({

From 3b3f25f534f183b06571e7e9883306183ca86b2d Mon Sep 17 00:00:00 2001
From: Giddh's Black Tiger <divyanshushrivastava123@gmail.com>
Date: Wed, 1 Apr 2026 19:07:32 +0530
Subject: [PATCH 3/3] refactor: improve create-feature component styling and
 template consistency

- Add h-full class to root container for proper height
- Update webhook events track expression to use event.value
- Increase gap spacing from gap-1 to gap-2 in Session & Token Settings and Webhook Configuration sections
- Change Button Container Div icon from 'html' to 'code'
- Fix indentation in preview template
- Update logo URL placeholder to be more descriptive example
---
 .../create-feature/create-feature.component.html    | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/apps/36-blocks/src/app/features/create-feature/create-feature.component.html b/apps/36-blocks/src/app/features/create-feature/create-feature.component.html
index 92ba510b..751ac27b 100644
--- a/apps/36-blocks/src/app/features/create-feature/create-feature.component.html
+++ b/apps/36-blocks/src/app/features/create-feature/create-feature.component.html
@@ -1,4 +1,4 @@
-<div class="flex flex-col">
+<div class="flex flex-col h-full">
     @if ((isLoading$ | async) || (loadingScript | async)) { <proxy-loader></proxy-loader> }
     <div class="flex justify-start gap-2 mb-6" [class.items-start]="isEditMode" [class.items-center]="!isEditMode">
         <button type="button" matIconButton [routerLink]="['/app', 'features']">
@@ -341,7 +341,7 @@ <h4 class="my-0 font-semibold text-base text-on-surface">Add New Block</h4>
                                 @if (webhookEventsData?.length) {
                                 <div class="bg-color p-4">
                                     <mat-accordion>
-                                        @for (event of webhookEventsData; track event) {
+                                        @for (event of webhookEventsData; track event.value) {
                                         <mat-expansion-panel class="!mb-2">
                                             <mat-expansion-panel-header>
                                                 <mat-panel-title>
@@ -961,7 +961,7 @@ <h2 class="mat-h2 font-semibold text-light-gray mb-0" [style.color]="getEffectiv
                     <mat-icon class="!text-base !w-4">settings</mat-icon>
                     <span class="mat-body-2 font-semibold">Session & Token Settings</span>
                 </div>
-                <div class="bg-color flex flex-col gap-1 px-4 pt-4 pb-4">
+                <div class="bg-color flex flex-col gap-2 px-4 pt-4 pb-4">
                     <ng-container
                         *ngTemplateOutlet="
                             inputField;
@@ -1067,7 +1067,7 @@ <h2 class="mat-h2 font-semibold text-light-gray mb-0" [style.color]="getEffectiv
         <div class="card-with-header">
             <div class="card-with-header--header justify-between">
                 <div class="flex items-center gap-2">
-                    <mat-icon class="!text-base !w-4 text-color">html</mat-icon>
+                    <mat-icon class="!text-base !w-4 text-color">code</mat-icon>
                     <span class="mat-body-2 font-semibold">Button Container Div</span>
                 </div>
                 <proxy-copy-button [copyData]="demoDiv()" tooltip="Copy Code"></proxy-copy-button>
@@ -1091,7 +1091,6 @@ <h2 class="mat-h2 font-semibold text-light-gray mb-0" [style.color]="getEffectiv
     <div class="flex items-center justify-start mt-6">
         <button type="button" matButton="filled" (click)="previewFeature()">Preview</button>
     </div>
-    <!-- <div id="userProxyContainer"></div> -->
     }
 </ng-template>
 
@@ -1102,7 +1101,7 @@ <h2 class="mat-h2 font-semibold text-light-gray mb-0" [style.color]="getEffectiv
                 <mat-icon class="!text-base !w-4">webhook</mat-icon>
                 <span class="mat-body-2 font-semibold">Webhook Configuration</span>
             </div>
-            <div class="bg-color flex flex-col gap-1 px-4 pt-4 pb-4">
+            <div class="bg-color flex flex-col gap-2 px-4 pt-4 pb-4">
                 <ng-container
                     *ngTemplateOutlet="
                         inputField;
@@ -1858,7 +1857,7 @@ <h5 class="mat-h5 my-0">Taxes</h5>
                         <input
                             matInput
                             type="text"
-                            placeholder="Enter logo URL"
+                            placeholder="https://example.com/logo.png"
                             [formControl]="featureForm.get('brandingDetails.logo_url')"
                         />
                     </mat-form-field>