From c5a18559dcd5c7ff297a02080ead88988e793436 Mon Sep 17 00:00:00 2001
From: Andrei Kuchuk <kreezag@gmail.com>
Date: Sat, 29 Jun 2024 18:58:43 +0400
Subject: [PATCH] rework page layouts

---
 app.vue                                       |   4 +-
 layouts/default.vue                           | 106 +---------
 pages/http-dump/[id].vue                      |  22 +-
 pages/http-dump/index.vue                     |  10 +-
 pages/index.vue                               |  11 +-
 pages/inspector/[id].vue                      |  22 +-
 pages/inspector/index.vue                     |  10 +-
 pages/login.vue                               |  46 ++--
 pages/monolog/[id].vue                        |  15 +-
 pages/monolog/index.vue                       |  10 +-
 pages/profiler/[id].vue                       |  17 +-
 pages/profiler/index.vue                      |  10 +-
 pages/ray/[id].vue                            |  20 +-
 pages/ray/index.vue                           |  10 +-
 pages/sentry/[id].vue                         |  21 +-
 pages/sentry/index.vue                        |  10 +-
 pages/settings.vue                            | 199 +++++++++---------
 pages/smtp/[id].vue                           |  23 +-
 pages/smtp/index.vue                          |  10 +-
 pages/var-dump/[id].vue                       |  21 +-
 pages/var-dump/index.vue                      |  10 +-
 src/assets/mixins.scss                        |   2 +-
 src/screens/ray/ui/ray-page/ray-page.vue      |   2 +-
 .../ui/var-dump-page/var-dump-page.vue        |   2 +-
 src/shared/constants/pages.ts                 |   2 +-
 src/shared/stores/cached-ids.ts               |   4 +-
 src/shared/types/index.ts                     |   1 +
 src/shared/types/pages.ts                     |   4 +
 src/widgets/ui/index.ts                       |   1 +
 29 files changed, 263 insertions(+), 362 deletions(-)
 create mode 100644 src/shared/types/pages.ts

diff --git a/app.vue b/app.vue
index e4450850..1b19bfa6 100644
--- a/app.vue
+++ b/app.vue
@@ -1,7 +1,5 @@
 <template>
-  <NuxtLayout>
-    <NuxtPage />
-  </NuxtLayout>
+  <NuxtPage />
 </template>
 
 <script lang="ts" setup>
diff --git a/layouts/default.vue b/layouts/default.vue
index ba630b85..dfeb0a9a 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,13 +1,8 @@
 <script lang="ts" setup>
-import { storeToRefs } from "pinia";
-import { computed, onMounted, watchEffect } from "vue";
-import { LayoutSidebar, PageHeader } from "~/src/widgets/ui";
-import { PAGE_TYPES } from "~/src/shared/constants";
+import { onMounted } from "vue";
+import { LayoutSidebar } from "~/src/widgets/ui";
 import { useEvents } from "~/src/shared/lib/use-events";
 import SfdumpWrap from "~/src/shared/lib/vendor/dumper";
-import { useSettingsStore } from "~/src/shared/stores";
-import type { EventType } from "~/src/shared/types";
-import { BadgeNumber, PauseButton } from "~/src/shared/ui";
 
 SfdumpWrap(window.document);
 
@@ -18,96 +13,18 @@ onMounted(() => {
     events.getAll();
   }
 });
-
-const { events, cachedEvents, getItemsCount } = useEvents();
-const { isVisibleEventCounts } = storeToRefs(useSettingsStore());
-
-const title = "Home";
-const props = {
-  type: PAGE_TYPES.ALL_EVENTS,
-};
-
-const clearEvents = () => {
-  if (props.type === PAGE_TYPES.ALL_EVENTS) {
-    return events.removeAll();
-  }
-
-  // TODO: fix types to sing EVENT_TYPES with PAGE_TYPES
-  return events.removeByType(props.type as unknown as EventType);
-};
-
-const isEventsPaused = computed(
-  () => cachedEvents.idsByType.value[props.type]?.length > 0
-);
-
-const allEvents = computed(() => {
-  if (props.type === PAGE_TYPES.ALL_EVENTS) {
-    return events.items.value;
-  }
-  return events.items.value.filter(({ type }) => type === props.type);
-});
-
-const visibleEvents = computed(() => {
-  if (!isEventsPaused.value) {
-    return allEvents.value;
-  }
-
-  return allEvents.value.filter(({ uuid }) =>
-    cachedEvents.idsByType.value[props.type]?.includes(uuid)
-  );
-});
-
-const hiddenEventsCount = computed(
-  () => events.items.value.length - visibleEvents.value.length
-);
-
-const toggleUpdate = () => {
-  if (isEventsPaused.value) {
-    cachedEvents.runUpdatesByType(props.type);
-  } else {
-    cachedEvents.stopUpdatesByType(props.type);
-  }
-};
-
-const badgeNumber = computed(() =>
-  getItemsCount.value(
-    props.type !== PAGE_TYPES.ALL_EVENTS
-      ? (props.type as unknown as EventType)
-      : undefined
-  )
-);
-
-watchEffect(() => {});
 </script>
 
 <template>
   <div class="main-layout">
-    <LayoutSidebar class="main-layout__sidebar" />
+    <div class="main-layout__sidebar">
+      <slot name="sidebar">
+        <LayoutSidebar />
+      </slot>
+    </div>
 
     <div class="main-layout__header">
-      <PageHeader>
-        <NuxtLink to="/" :disabled="!title">Home</NuxtLink>
-
-        <template v-if="title">
-          <span>&nbsp;/&nbsp;</span>
-          <NuxtLink :disabled="true">{{ title }}</NuxtLink>
-        </template>
-
-        <template #controls>
-          <PauseButton
-            :disabled-pause="visibleEvents.length === 0"
-            :is-paused="isEventsPaused"
-            :total-new-events-count="hiddenEventsCount"
-            @toggle-update="toggleUpdate"
-          />
-
-          <BadgeNumber :number="badgeNumber" :is-visible="isVisibleEventCounts">
-            <button class="main-layout__clear-button" @click="clearEvents">
-              Clear events
-            </button>
-          </BadgeNumber>
-        </template>
-      </PageHeader>
+      <slot name="header" />
     </div>
 
     <div class="main-layout__content">
@@ -134,15 +51,10 @@ watchEffect(() => {});
 
 .main-layout__content {
   @include layout-body;
-  @apply flex flex-col h-full flex-1 w-full min-h-screen absolute top-0 left-0 pl-10 md:pl-14 lg:pl-16;
+  @apply flex flex-col h-full flex-1 w-full min-h-screen absolute top-0 left-0;
 
   & > div {
     @apply flex flex-col h-full flex-1;
   }
 }
-
-.main-layout__clear-button {
-  @include button;
-  @apply bg-red-800 hover:bg-red-700;
-}
 </style>
diff --git a/pages/http-dump/[id].vue b/pages/http-dump/[id].vue
index 92995452..5db3bc9a 100644
--- a/pages/http-dump/[id].vue
+++ b/pages/http-dump/[id].vue
@@ -54,8 +54,10 @@ onMounted(getEvent);
 </script>
 
 <template>
-  <main class="http-dump-event">
-    <PageEventHeader title="Http dumps" :event-id="eventId" />
+  <NuxtLayout>
+    <template #header>
+      <PageEventHeader title="Http dumps" :event-id="eventId" />
+    </template>
 
     <div v-if="isLoading && !event" class="http-dump-event__loading">
       <div></div>
@@ -63,28 +65,16 @@ onMounted(getEvent);
       <div></div>
     </div>
 
-    <div class="http-dump-event__body">
-      <HttpDumpPage v-if="event" :event="event" />
-    </div>
-  </main>
+    <HttpDumpPage v-if="event" :event="event" />
+  </NuxtLayout>
 </template>
 
 <style lang="scss" scoped>
 @import "src/assets/mixins";
 .http-dump-event {
-  @include layout;
-}
-
-.http-dump-event__head {
-  @include layout-head;
 }
 
 .http-dump-event__loading {
   @include loading;
-  @include layout-body;
-}
-
-.http-dump-event__body {
-  @include layout-body;
 }
 </style>
diff --git a/pages/http-dump/index.vue b/pages/http-dump/index.vue
index ca839913..b42fd6b6 100644
--- a/pages/http-dump/index.vue
+++ b/pages/http-dump/index.vue
@@ -1,8 +1,14 @@
 <script lang="ts" setup>
-import { PageLayout } from "~/src/widgets/ui/page-layout";
+import { PageHeader, PageLayout } from "~/src/widgets/ui";
 import { PAGE_TYPES } from "~/src/shared/constants";
 </script>
 
 <template>
-  <PageLayout :type="PAGE_TYPES.HTTP_DUMP" title="HttpDump" />
+  <NuxtLayout>
+    <template #header>
+      <PageHeader :type="PAGE_TYPES.HTTP_DUMP" title="Http-dump" />
+    </template>
+
+    <PageLayout :type="PAGE_TYPES.HTTP_DUMP" title="Http-dump" />
+  </NuxtLayout>
 </template>
diff --git a/pages/index.vue b/pages/index.vue
index 97946c56..fa5267b7 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,9 +1,14 @@
 <script lang="ts" setup>
-// eslint-disable-next-line @conarti/feature-sliced/public-api
-import { PageLayout } from "~/src/widgets/ui/page-layout";
+import { PageHeader, PageLayout } from "~/src/widgets/ui"; // eslint-disable-line @conarti/feature-sliced/public-api
 import { PAGE_TYPES } from "~/src/shared/constants";
 </script>
 
 <template>
-  <PageLayout :type="PAGE_TYPES.ALL_EVENTS" title="" />
+  <NuxtLayout>
+    <template #header>
+      <PageHeader :type="PAGE_TYPES.ALL_EVENTS" title="" />
+    </template>
+
+    <PageLayout :type="PAGE_TYPES.ALL_EVENTS" title="" />
+  </NuxtLayout>
 </template>
diff --git a/pages/inspector/[id].vue b/pages/inspector/[id].vue
index 34f23fad..9d530603 100644
--- a/pages/inspector/[id].vue
+++ b/pages/inspector/[id].vue
@@ -53,8 +53,10 @@ onMounted(getEvent);
 </script>
 
 <template>
-  <main class="inspector-event">
-    <PageEventHeader title="Inspector" :event-id="eventId" />
+  <NuxtLayout>
+    <template #header>
+      <PageEventHeader title="Inspector" :event-id="eventId" />
+    </template>
 
     <div v-if="isLoading && !event" class="inspector-event__loading">
       <div></div>
@@ -62,28 +64,16 @@ onMounted(getEvent);
       <div></div>
     </div>
 
-    <div class="inspector-event__body">
-      <InspectorPage v-if="event" :event="event" />
-    </div>
-  </main>
+    <InspectorPage v-if="event" :event="event" />
+  </NuxtLayout>
 </template>
 
 <style lang="scss" scoped>
 @import "src/assets/mixins";
 .inspector-event {
-  @include layout;
-}
-
-.inspector-event__head {
-  @include layout-head;
 }
 
 .inspector-event__loading {
   @include loading;
-  @include layout-body;
-}
-
-.inspector-event__body {
-  @include layout-body;
 }
 </style>
diff --git a/pages/inspector/index.vue b/pages/inspector/index.vue
index e3ff6311..c54bc446 100644
--- a/pages/inspector/index.vue
+++ b/pages/inspector/index.vue
@@ -1,8 +1,14 @@
 <script lang="ts" setup>
-import { PageLayout } from "~/src/widgets/ui/page-layout";
+import { PageHeader, PageLayout } from "~/src/widgets/ui";
 import { PAGE_TYPES } from "~/src/shared/constants";
 </script>
 
 <template>
-  <PageLayout :type="PAGE_TYPES.INSPECTOR" title="Inspector" />
+  <NuxtLayout>
+    <template #header>
+      <PageHeader :type="PAGE_TYPES.INSPECTOR" title="Inspector" />
+    </template>
+
+    <PageLayout :type="PAGE_TYPES.INSPECTOR" title="Inspector" />
+  </NuxtLayout>
 </template>
diff --git a/pages/login.vue b/pages/login.vue
index 42640808..b6bbe7ef 100644
--- a/pages/login.vue
+++ b/pages/login.vue
@@ -22,31 +22,33 @@ const redirect = async () => {
 </script>
 
 <template>
-  <div class="login-page">
-    <div class="login-form-container">
-      <IconSvg class="login-form--logo" name="logo" />
-      <div class="login-form">
-        <div class="login-form-left-block">
-          <h1 class="login-form--title">Welcome Back</h1>
-          <p class="pb-2 text-center text-sm text-gray-800">
-            Let's get you signed in.
-          </p>
-          <button class="login-form--button" @click="redirect">
-            <IconSvg class="w-6" name="lock" fill="currentcolor" />
-            Continue to SSO
-          </button>
+  <NuxtLayout>
+    <div class="login-page">
+      <div class="login-form-container">
+        <IconSvg class="login-form--logo" name="logo" />
+        <div class="login-form">
+          <div class="login-form-left-block">
+            <h1 class="login-form--title">Welcome Back</h1>
+            <p class="pb-2 text-center text-sm text-gray-800">
+              Let's get you signed in.
+            </p>
+            <button class="login-form--button" @click="redirect">
+              <IconSvg class="w-6" name="lock" fill="currentcolor" />
+              Continue to SSO
+            </button>
+          </div>
+          <div
+            class="login-form-right-block"
+            style="
+              background: url('/bg.jpg');
+              background-size: cover;
+              background-position: center center;
+            "
+          ></div>
         </div>
-        <div
-          class="login-form-right-block"
-          style="
-            background: url('/bg.jpg');
-            background-size: cover;
-            background-position: center center;
-          "
-        ></div>
       </div>
     </div>
-  </div>
+  </NuxtLayout>
 </template>
 
 <style lang="scss" scoped>
diff --git a/pages/monolog/[id].vue b/pages/monolog/[id].vue
index 90cc92bf..a82814db 100644
--- a/pages/monolog/[id].vue
+++ b/pages/monolog/[id].vue
@@ -49,8 +49,10 @@ onMounted(getEvent);
 </script>
 
 <template>
-  <main class="monolog">
-    <PageEventHeader title="Monolog" :event-id="eventId" />
+  <NuxtLayout>
+    <template #header>
+      <PageEventHeader title="Monolog" :event-id="eventId" />
+    </template>
 
     <div v-if="isLoading && !event" class="monolog__loading">
       <div></div>
@@ -58,25 +60,20 @@ onMounted(getEvent);
       <div></div>
     </div>
 
-    <div v-if="event" class="monolog__body">
+    <div v-if="event">
       <MonologPage :event="event" />
     </div>
-  </main>
+  </NuxtLayout>
 </template>
 
 <style lang="scss" scoped>
 @import "src/assets/mixins";
 
 .monolog {
-  @include layout;
 }
 
 .monolog__loading {
   @include loading;
   @include layout-body;
 }
-
-.monolog__body {
-  @include layout-body;
-}
 </style>
diff --git a/pages/monolog/index.vue b/pages/monolog/index.vue
index 9f324730..0375390d 100644
--- a/pages/monolog/index.vue
+++ b/pages/monolog/index.vue
@@ -1,8 +1,14 @@
 <script lang="ts" setup>
-import { PageLayout } from "~/src/widgets/ui/page-layout";
+import { PageHeader, PageLayout } from "~/src/widgets/ui";
 import { PAGE_TYPES } from "~/src/shared/constants";
 </script>
 
 <template>
-  <PageLayout :type="PAGE_TYPES.MONOLOG" title="Monolog" />
+  <NuxtLayout>
+    <template #header>
+      <PageHeader :type="PAGE_TYPES.MONOLOG" title="Monolog" />
+    </template>
+
+    <PageLayout :type="PAGE_TYPES.MONOLOG" title="Monolog" />
+  </NuxtLayout>
 </template>
diff --git a/pages/profiler/[id].vue b/pages/profiler/[id].vue
index 3530d39f..32652542 100644
--- a/pages/profiler/[id].vue
+++ b/pages/profiler/[id].vue
@@ -52,8 +52,10 @@ onMounted(getEvent);
 </script>
 
 <template>
-  <main class="profiler-event">
-    <PageEventHeader title="Profiler" :event-id="eventId" />
+  <NuxtLayout>
+    <template #header>
+      <PageEventHeader title="Profiler" :event-id="eventId" />
+    </template>
 
     <div v-if="isLoading && !event" class="profiler-event__loading">
       <div></div>
@@ -61,10 +63,8 @@ onMounted(getEvent);
       <div></div>
     </div>
 
-    <div class="profiler-event__body">
-      <ProfilerPage v-if="event" :event="event" class="p-5" />
-    </div>
-  </main>
+    <ProfilerPage v-if="event" :event="event" class="p-5" />
+  </NuxtLayout>
 </template>
 
 <style lang="scss" scoped>
@@ -82,9 +82,4 @@ onMounted(getEvent);
   @include loading;
   @include layout-body;
 }
-
-.profiler-event__body {
-  @include layout-body;
-  @apply h-full;
-}
 </style>
diff --git a/pages/profiler/index.vue b/pages/profiler/index.vue
index b5261d7c..19da5202 100644
--- a/pages/profiler/index.vue
+++ b/pages/profiler/index.vue
@@ -1,8 +1,14 @@
 <script lang="ts" setup>
-import { PageLayout } from "~/src/widgets/ui/page-layout";
+import { PageHeader, PageLayout } from "~/src/widgets/ui";
 import { PAGE_TYPES } from "~/src/shared/constants";
 </script>
 
 <template>
-  <PageLayout :type="PAGE_TYPES.PROFILER" title="Profiler" />
+  <NuxtLayout>
+    <template #header>
+      <PageHeader :type="PAGE_TYPES.PROFILER" title="Profiler" />
+    </template>
+
+    <PageLayout :type="PAGE_TYPES.PROFILER" title="Profiler" />
+  </NuxtLayout>
 </template>
diff --git a/pages/ray/[id].vue b/pages/ray/[id].vue
index cf46157c..976deffd 100644
--- a/pages/ray/[id].vue
+++ b/pages/ray/[id].vue
@@ -49,8 +49,10 @@ onMounted(getEvent);
 </script>
 
 <template>
-  <main class="ray-dump">
-    <PageEventHeader title="Ray Dump" :event-id="eventId" />
+  <NuxtLayout>
+    <template #header>
+      <PageEventHeader title="Ray Dump" :event-id="eventId" />
+    </template>
 
     <div v-if="isLoading && !event" class="ray-dump__loading">
       <div></div>
@@ -58,29 +60,19 @@ onMounted(getEvent);
       <div></div>
     </div>
 
-    <div v-if="event" class="ray-dump__body">
+    <div v-if="event">
       <RayPage :event="event" />
     </div>
-  </main>
+  </NuxtLayout>
 </template>
 
 <style lang="scss" scoped>
 @import "src/assets/mixins";
 
 .ray-dump {
-  @include layout;
-}
-
-.ray-dump__head {
-  @include layout-head;
 }
 
 .ray-dump__loading {
   @include loading;
-  @include layout-body;
-}
-
-.ray-dump__body {
-  @include layout-body;
 }
 </style>
diff --git a/pages/ray/index.vue b/pages/ray/index.vue
index 313ba239..daf31565 100644
--- a/pages/ray/index.vue
+++ b/pages/ray/index.vue
@@ -1,8 +1,14 @@
 <script lang="ts" setup>
-import { PageLayout } from "~/src/widgets/ui/page-layout";
+import { PageHeader, PageLayout } from "~/src/widgets/ui";
 import { PAGE_TYPES } from "~/src/shared/constants";
 </script>
 
 <template>
-  <PageLayout :type="PAGE_TYPES.RAY_DUMP" title="Ray Dumps" />
+  <NuxtLayout>
+    <template #header>
+      <PageHeader :type="PAGE_TYPES.RAY_DUMP" title="Ray Dumps" />
+    </template>
+
+    <PageLayout :type="PAGE_TYPES.RAY_DUMP" title="Ray Dumps" />
+  </NuxtLayout>
 </template>
diff --git a/pages/sentry/[id].vue b/pages/sentry/[id].vue
index 8134b508..28feb20c 100644
--- a/pages/sentry/[id].vue
+++ b/pages/sentry/[id].vue
@@ -50,8 +50,10 @@ onMounted(getEvent);
 </script>
 
 <template>
-  <main class="sentry-event">
-    <PageEventHeader title="Sentry" :event-id="eventId" />
+  <NuxtLayout>
+    <template #header>
+      <PageEventHeader title="Sentry" :event-id="eventId" />
+    </template>
 
     <div v-if="isLoading && !event" class="sentry-event__loading">
       <div></div>
@@ -59,27 +61,18 @@ onMounted(getEvent);
       <div></div>
     </div>
 
-    <SentryPage v-if="event" :event="event" class="sentry-event__body" />
-  </main>
+    <SentryPage v-if="event" :event="event" />
+  </NuxtLayout>
 </template>
 
 <style lang="scss" scoped>
 @import "src/assets/mixins";
 
 .sentry-event {
-  @include layout;
-}
-
-.sentry-event__head {
-  @include layout-head;
+  display: block;
 }
 
 .sentry-event__loading {
   @include loading;
-  @include layout-body;
-}
-
-.sentry-event__body {
-  @include layout-body;
 }
 </style>
diff --git a/pages/sentry/index.vue b/pages/sentry/index.vue
index fac5a584..64089c00 100644
--- a/pages/sentry/index.vue
+++ b/pages/sentry/index.vue
@@ -1,8 +1,14 @@
 <script lang="ts" setup>
-import { PageLayout } from "~/src/widgets/ui/page-layout";
+import { PageHeader, PageLayout } from "~/src/widgets/ui";
 import { PAGE_TYPES } from "~/src/shared/constants";
 </script>
 
 <template>
-  <PageLayout :type="PAGE_TYPES.SENTRY" title="Sentry" />
+  <NuxtLayout>
+    <template #header>
+      <PageHeader :type="PAGE_TYPES.SENTRY" title="Sentry" />
+    </template>
+
+    <PageLayout :type="PAGE_TYPES.SENTRY" title="Sentry" />
+  </NuxtLayout>
 </template>
diff --git a/pages/settings.vue b/pages/settings.vue
index 6a53f12d..18a8df5b 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -2,9 +2,8 @@
 import { useTitle } from "@vueuse/core";
 import { storeToRefs } from "pinia";
 import { computed } from "vue";
-import { PageHeader } from "~/src/widgets/ui";
 import { useSettingsStore, THEME_MODES } from "~/src/shared/stores/settings";
-import { BadgeNumber, IconSvg } from "~/src/shared/ui";
+import { AppHeader, BadgeNumber, IconSvg } from "~/src/shared/ui";
 
 const settingsStore = useSettingsStore();
 const { changeTheme, changeNavbar, changeEventCountsVisibility } =
@@ -18,118 +17,110 @@ const isDarkMode = computed(() => themeType.value === THEME_MODES.DARK);
 </script>
 
 <template>
-  <main class="settings-page">
-    <PageHeader class="settings-page__header">
-      <NuxtLink to="/">Home</NuxtLink>&nbsp;/&nbsp;Settings
-    </PageHeader>
-
-    <div class="settings-page__content-wr">
-      <section class="settings-page__content">
-        <div class="settings-page__title">
-          Theme: {{ isDarkMode ? "Dark" : "Light" }}
+  <NuxtLayout class="settings-page">
+    <template #header>
+      <AppHeader>
+        <NuxtLink to="/">Home</NuxtLink>&nbsp;/&nbsp;Settings
+      </AppHeader>
+    </template>
+
+    <main class="settings-page__content">
+      <div class="settings-page__title">
+        Theme: {{ isDarkMode ? "Dark" : "Light" }}
+      </div>
+
+      <div class="settings-page__control">
+        <IconSvg
+          name="sun"
+          class="settings-page__control-icon"
+          :class="{ 'settings-page__control-icon--active': !isDarkMode }"
+        />
+
+        <button
+          class="settings-page__control-button"
+          :class="{ 'settings-page__control-button--active': isDarkMode }"
+          @click="changeTheme"
+        >
+          <span class="settings-page__control-button-in" />
+        </button>
+
+        <IconSvg
+          class="settings-page__control-icon"
+          name="moon"
+          :class="{ 'settings-page__control-icon--active': isDarkMode }"
+        />
+      </div>
+
+      <div class="settings-page__title">
+        Fixed Header: {{ isFixedHeader ? "On" : "Off" }}
+      </div>
+
+      <div class="settings-page__control">
+        <IconSvg
+          name="lock-off"
+          class="settings-page__control-icon"
+          :class="{ 'settings-page__control-icon--active': !isFixedHeader }"
+        />
+
+        <button
+          class="settings-page__control-button"
+          :class="{ 'settings-page__control-button--active': isFixedHeader }"
+          @click="changeNavbar"
+        >
+          <span class="settings-page__control-button-in" />
+        </button>
+
+        <IconSvg
+          class="settings-page__control-icon"
+          name="lock"
+          :class="{ 'settings-page__control-icon--active': isFixedHeader }"
+        />
+      </div>
+
+      <div class="settings-page__title">
+        Events Counts: {{ isVisibleEventCounts ? "On" : "Off" }}
+      </div>
+
+      <div class="settings-page__control">
+        <div
+          class="settings-page__control-icon"
+          :class="{
+            'settings-page__control-icon--active': !isVisibleEventCounts,
+          }"
+        >
+          <IconSvg name="inspector" />
         </div>
 
-        <div class="settings-page__control">
-          <IconSvg
-            name="sun"
-            class="settings-page__control-icon"
-            :class="{ 'settings-page__control-icon--active': !isDarkMode }"
-          />
-
-          <button
-            class="settings-page__control-button"
-            :class="{ 'settings-page__control-button--active': isDarkMode }"
-            @click="changeTheme"
-          >
-            <span class="settings-page__control-button-in" />
-          </button>
-
-          <IconSvg
-            class="settings-page__control-icon"
-            name="moon"
-            :class="{ 'settings-page__control-icon--active': isDarkMode }"
-          />
-        </div>
-
-        <div class="settings-page__title">
-          Fixed Header: {{ isFixedHeader ? "On" : "Off" }}
-        </div>
-
-        <div class="settings-page__control">
-          <IconSvg
-            name="lock-off"
-            class="settings-page__control-icon"
-            :class="{ 'settings-page__control-icon--active': !isFixedHeader }"
-          />
-
-          <button
-            class="settings-page__control-button"
-            :class="{ 'settings-page__control-button--active': isFixedHeader }"
-            @click="changeNavbar"
-          >
-            <span class="settings-page__control-button-in" />
-          </button>
-
-          <IconSvg
-            class="settings-page__control-icon"
-            name="lock"
-            :class="{ 'settings-page__control-icon--active': isFixedHeader }"
-          />
-        </div>
-
-        <div class="settings-page__title">
-          Events Counts: {{ isVisibleEventCounts ? "On" : "Off" }}
-        </div>
-
-        <div class="settings-page__control">
-          <div
-            class="settings-page__control-icon"
-            :class="{
-              'settings-page__control-icon--active': !isVisibleEventCounts,
-            }"
-          >
+        <button
+          class="settings-page__control-button"
+          :class="{
+            'settings-page__control-button--active': isVisibleEventCounts,
+          }"
+          @click="changeEventCountsVisibility"
+        >
+          <span class="settings-page__control-button-in" />
+        </button>
+
+        <div
+          class="settings-page__control-icon"
+          :class="{
+            'settings-page__control-icon--active': isVisibleEventCounts,
+          }"
+        >
+          <BadgeNumber class="settings-page__control-icon-badge" :number="15">
             <IconSvg name="inspector" />
-          </div>
-
-          <button
-            class="settings-page__control-button"
-            :class="{
-              'settings-page__control-button--active': isVisibleEventCounts,
-            }"
-            @click="changeEventCountsVisibility"
-          >
-            <span class="settings-page__control-button-in" />
-          </button>
-
-          <div
-            class="settings-page__control-icon"
-            :class="{
-              'settings-page__control-icon--active': isVisibleEventCounts,
-            }"
-          >
-            <BadgeNumber class="settings-page__control-icon-badge" :number="15">
-              <IconSvg name="inspector" />
-            </BadgeNumber>
-          </div>
+          </BadgeNumber>
         </div>
-      </section>
-    </div>
-  </main>
+      </div>
+    </main>
+  </NuxtLayout>
 </template>
 
 <style lang="scss" scoped>
 @import "src/assets/mixins";
 
 .settings-page {
-  @include layout;
-}
-
-.settings-page__header {
-  @include layout-head;
-}
-
-.settings-page__content-wr {
-  @include layout-body;
+  display: block;
 }
 
 .settings-page__content {
diff --git a/pages/smtp/[id].vue b/pages/smtp/[id].vue
index 8872d094..16ff9396 100644
--- a/pages/smtp/[id].vue
+++ b/pages/smtp/[id].vue
@@ -34,7 +34,7 @@ const event = computed(() =>
 const attachments = computed(() => serverAttachments.value);
 
 const html = computed(
-  () => `<iframe srcdoc="${htmlEncode(serverEvent.value.payload.html)}"/>`
+  () => `<iframe srcdoc="${htmlEncode(serverEvent.value?.payload?.html)}"/>`
 );
 
 const getEvent = async () => {
@@ -63,8 +63,10 @@ onMounted(getEvent);
 </script>
 
 <template>
-  <main class="smtp-event">
-    <PageEventHeader title="Smtp" :event-id="eventId" />
+  <NuxtLayout>
+    <template #header>
+      <PageEventHeader title="Smtp" :event-id="eventId" />
+    </template>
 
     <div v-if="isLoading && !event" class="smtp-event__loading">
       <div></div>
@@ -72,7 +74,7 @@ onMounted(getEvent);
       <div></div>
     </div>
 
-    <div class="smtp-event__body">
+    <div>
       <SmtpPage
         v-if="event"
         :event="event"
@@ -80,27 +82,16 @@ onMounted(getEvent);
         :html-source="html"
       />
     </div>
-  </main>
+  </NuxtLayout>
 </template>
 
 <style lang="scss" scoped>
 @import "src/assets/mixins";
 
 .smtp-event {
-  @include layout;
-}
-
-.smtp-event__head {
-  @include layout-head;
 }
 
 .smtp-event__loading {
   @include loading;
-  @include layout-body;
-}
-
-.smtp-event__body {
-  @include layout-body;
-  @apply h-full;
 }
 </style>
diff --git a/pages/smtp/index.vue b/pages/smtp/index.vue
index 2eb34474..34b33628 100644
--- a/pages/smtp/index.vue
+++ b/pages/smtp/index.vue
@@ -1,8 +1,14 @@
 <script lang="ts" setup>
-import { PageLayout } from "~/src/widgets/ui/page-layout";
+import { PageHeader, PageLayout } from "~/src/widgets/ui";
 import { PAGE_TYPES } from "~/src/shared/constants";
 </script>
 
 <template>
-  <PageLayout :type="PAGE_TYPES.SMTP" title="Smtp" />
+  <NuxtLayout>
+    <template #header>
+      <PageHeader :type="PAGE_TYPES.SMTP" title="Smtp" />
+    </template>
+
+    <PageLayout :type="PAGE_TYPES.SMTP" title="Smtp" />
+  </NuxtLayout>
 </template>
diff --git a/pages/var-dump/[id].vue b/pages/var-dump/[id].vue
index 96a94f62..51cc097c 100644
--- a/pages/var-dump/[id].vue
+++ b/pages/var-dump/[id].vue
@@ -49,8 +49,10 @@ onMounted(getEvent);
 </script>
 
 <template>
-  <main class="var-dump">
-    <PageEventHeader title="Var Dump" :event-id="eventId" />
+  <NuxtLayout>
+    <template #header>
+      <PageEventHeader title="Var Dump" :event-id="eventId" />
+    </template>
 
     <div v-if="isLoading && !event" class="var-dump__loading">
       <div></div>
@@ -58,29 +60,20 @@ onMounted(getEvent);
       <div></div>
     </div>
 
-    <div v-if="event" class="var-dump__body">
+    <div v-if="event">
       <VarDumpPage :event="event" />
     </div>
-  </main>
+  </NuxtLayout>
 </template>
 
 <style lang="scss" scoped>
 @import "src/assets/mixins";
 
 .var-dump {
-  @include layout;
-}
-
-.var-dump__head {
-  @include layout-head;
+  display: block;
 }
 
 .var-dump__loading {
   @include loading;
-  @include layout-body;
-}
-
-.var-dump__body {
-  @include layout-body;
 }
 </style>
diff --git a/pages/var-dump/index.vue b/pages/var-dump/index.vue
index 1d4f563b..10877f53 100644
--- a/pages/var-dump/index.vue
+++ b/pages/var-dump/index.vue
@@ -1,8 +1,14 @@
 <script lang="ts" setup>
-import { PageLayout } from "~/src/widgets/ui/page-layout";
+import { PageHeader, PageLayout } from "~/src/widgets/ui";
 import { PAGE_TYPES } from "~/src/shared/constants";
 </script>
 
 <template>
-  <PageLayout :type="PAGE_TYPES.VAR_DUMP" title="Var Dumps" />
+  <NuxtLayout>
+    <template #header>
+      <PageHeader :type="PAGE_TYPES.VAR_DUMP" title="Var Dumps" />
+    </template>
+
+    <PageLayout :type="PAGE_TYPES.VAR_DUMP" title="Var Dumps" />
+  </NuxtLayout>
 </template>
diff --git a/src/assets/mixins.scss b/src/assets/mixins.scss
index 407ecaae..4964c359 100644
--- a/src/assets/mixins.scss
+++ b/src/assets/mixins.scss
@@ -19,7 +19,7 @@
 }
 
 @mixin layout-body {
-  @apply flex flex-col flex-1 pt-10 md:pt-14;
+  @apply flex flex-col flex-1 pt-10 md:pt-14 pl-10 md:pl-14 lg:pl-16;
 }
 
 @mixin text-muted {
diff --git a/src/screens/ray/ui/ray-page/ray-page.vue b/src/screens/ray/ui/ray-page/ray-page.vue
index f02c0e47..560da593 100644
--- a/src/screens/ray/ui/ray-page/ray-page.vue
+++ b/src/screens/ray/ui/ray-page/ray-page.vue
@@ -105,7 +105,7 @@ const getComponent: (
 }
 
 .ray__in {
-  @apply flex flex-col h-full flex-grow py-5 px-4 md:px-6 lg:px-8;
+  @apply flex flex-col h-full flex-grow py-5 px-3 md:px-4 lg:px-6;
 }
 
 .ray__header {
diff --git a/src/screens/var-dump/ui/var-dump-page/var-dump-page.vue b/src/screens/var-dump/ui/var-dump-page/var-dump-page.vue
index b6fd57f6..8660e796 100644
--- a/src/screens/var-dump/ui/var-dump-page/var-dump-page.vue
+++ b/src/screens/var-dump/ui/var-dump-page/var-dump-page.vue
@@ -79,7 +79,7 @@ const date = computed(() =>
 }
 
 .var-dump__in {
-  @apply flex flex-col h-full flex-grow py-5 px-4 md:px-6 lg:px-8;
+  @apply flex flex-col h-full flex-grow py-5 px-3 md:px-4 lg:px-5;
 }
 
 .var-dump__header {
diff --git a/src/shared/constants/pages.ts b/src/shared/constants/pages.ts
index d7da168a..29f161dd 100644
--- a/src/shared/constants/pages.ts
+++ b/src/shared/constants/pages.ts
@@ -1,4 +1,4 @@
-import {EVENT_TYPES} from "../types";
+import {EVENT_TYPES} from "../types/events";
 
 // TODO convert it to enum
 export const PAGE_TYPES = {
diff --git a/src/shared/stores/cached-ids.ts b/src/shared/stores/cached-ids.ts
index b1e6506d..532f9368 100644
--- a/src/shared/stores/cached-ids.ts
+++ b/src/shared/stores/cached-ids.ts
@@ -1,10 +1,8 @@
 import { defineStore } from "pinia";
 import { PAGE_TYPES } from "../constants";
-import { type EventId, type OneOfValues, LOCAL_STORAGE_KEYS } from '../types';
+import {type EventId, LOCAL_STORAGE_KEYS, type TEventsGroup} from '../types';
 import { useEventStore } from "./events";
 
-export type TEventsGroup = OneOfValues<typeof PAGE_TYPES>
-
 export type TCachedEventsEmptyMap = Record<TEventsGroup, EventId[]>;
 
 const initialCachedIds: TCachedEventsEmptyMap = {
diff --git a/src/shared/types/index.ts b/src/shared/types/index.ts
index 0eac8678..d97b4ccf 100644
--- a/src/shared/types/index.ts
+++ b/src/shared/types/index.ts
@@ -3,3 +3,4 @@ export * from "./profile";
 export * from "./generics";
 export * from "./local-storage";
 export * from "./partials";
+export * from "./pages";
diff --git a/src/shared/types/pages.ts b/src/shared/types/pages.ts
new file mode 100644
index 00000000..90958edf
--- /dev/null
+++ b/src/shared/types/pages.ts
@@ -0,0 +1,4 @@
+import { PAGE_TYPES } from "../constants/pages";
+import type {OneOfValues} from "./generics";
+
+export type TEventsGroup = OneOfValues<typeof PAGE_TYPES>
diff --git a/src/widgets/ui/index.ts b/src/widgets/ui/index.ts
index 45b58a1d..9d7612c2 100644
--- a/src/widgets/ui/index.ts
+++ b/src/widgets/ui/index.ts
@@ -5,3 +5,4 @@ export * from './event-card';
 export * from './preview-card-default';
 export * from './page-placeholder';
 export * from './layout-sidebar';
+export * from './page-layout';