From dbe14368d6f08ee9b4969dae86ab06d768dbd4db Mon Sep 17 00:00:00 2001
From: Kuchuk Andrey <kreezag@gmail.com>
Date: Tue, 4 Jun 2024 22:48:32 +0400
Subject: [PATCH 1/7] [#131] add new event link to the preview-card head

---
 src/shared/ui/icon-svg/icon-svg.vue           | 21 +++++++++++++++++
 .../ui/preview-card/preview-card-header.vue   | 23 ++++++++++++++++++-
 2 files changed, 43 insertions(+), 1 deletion(-)

diff --git a/src/shared/ui/icon-svg/icon-svg.vue b/src/shared/ui/icon-svg/icon-svg.vue
index 49237ecc..45c41441 100644
--- a/src/shared/ui/icon-svg/icon-svg.vue
+++ b/src/shared/ui/icon-svg/icon-svg.vue
@@ -609,6 +609,27 @@ defineProps<Props>();
       <path d="M12 17v-6" />
       <path d="M9.5 14.5l2.5 2.5l2.5 -2.5" />
     </svg>
+
+    <svg
+      v-else-if="name === 'window-maximize'"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="icon icon-tabler icons-tabler-outline icon-tabler-window-maximize"
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+      <path
+        d="M3 16m0 1a1 1 0 0 1 1 -1h3a1 1 0 0 1 1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1z"
+      />
+      <path d="M4 12v-6a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-6" />
+      <path d="M12 8h4v4" />
+      <path d="M16 8l-5 5" />
+    </svg>
   </div>
 </template>
 
diff --git a/src/shared/ui/preview-card/preview-card-header.vue b/src/shared/ui/preview-card/preview-card-header.vue
index c7ef9b8b..0e6b926f 100644
--- a/src/shared/ui/preview-card/preview-card-header.vue
+++ b/src/shared/ui/preview-card/preview-card-header.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed } from "vue";
-import type { EventType } from "../../types";
+import { EVENT_TYPES, type EventType } from "../../types";
 import { IconSvg } from "../icon-svg";
 import { DownloadType } from "./types";
 
@@ -54,6 +54,12 @@ const lockEvent = () => {
 };
 
 const isVisibleTags = computed(() => props.tags.length > 0);
+
+const newPageLink = computed(() => {
+  if (!Object.values(EVENT_TYPES).includes(props.eventType)) return "";
+
+  return `/${props.eventType}/${props.eventId}`;
+});
 </script>
 
 <template>
@@ -80,6 +86,16 @@ const isVisibleTags = computed(() => props.tags.length > 0);
           {{ tag }}
         </div>
       </template>
+
+      <template v-if="newPageLink">
+        <NuxtLink
+          :to="newPageLink"
+          class="preview-card-header__open"
+          title="Open event in the new window"
+        >
+          <IconSvg name="window-maximize" />
+        </NuxtLink>
+      </template>
     </div>
 
     <div v-if="isVisibleControls" class="preview-card-header__buttons">
@@ -216,6 +232,11 @@ $eventTypeColorsMap: (
   }
 }
 
+.preview-card-header__open {
+  @apply flex justify-end;
+  @apply h-4 md:h-5;
+}
+
 .preview-card-header__buttons {
   @apply flex justify-end;
   @apply gap-2 md:gap-3;

From b601b1cdb5075f7397a1cacc6f1a5e4569e3cbef Mon Sep 17 00:00:00 2001
From: Kuchuk Andrey <kreezag@gmail.com>
Date: Tue, 4 Jun 2024 22:51:25 +0400
Subject: [PATCH 2/7] [#131] remove link from preview-card bodies

---
 .../http-dump/ui/preview-card/preview-card.vue     |  9 ++++-----
 .../inspector/ui/preview-card/preview-card.vue     | 14 ++++++--------
 .../profiler/ui/preview-card/preview-card.vue      |  9 +++------
 .../sentry/ui/preview-card/preview-card.vue        | 14 ++++++--------
 src/entities/smtp/ui/preview-card/preview-card.vue |  6 ++----
 5 files changed, 21 insertions(+), 31 deletions(-)

diff --git a/src/entities/http-dump/ui/preview-card/preview-card.vue b/src/entities/http-dump/ui/preview-card/preview-card.vue
index cba68b0b..cfe418a4 100644
--- a/src/entities/http-dump/ui/preview-card/preview-card.vue
+++ b/src/entities/http-dump/ui/preview-card/preview-card.vue
@@ -9,18 +9,17 @@ type Props = {
 
 const props = defineProps<Props>();
 
-const eventLink = `/http-dumps/${props.event.id}`;
 const uri = decodeURI(props.event.payload.request.uri);
 </script>
 
 <template>
   <PreviewCard class="preview-card" :event="event">
-    <NuxtLink :to="eventLink" class="preview-card__link">
+    <div class="preview-card__content">
       <span class="preview-card__method">
         {{ event.payload.request.method }} </span
       >:
       <span class="preview-card__uri">/{{ uri }}</span>
-    </NuxtLink>
+    </div>
   </PreviewCard>
 </template>
 
@@ -31,8 +30,8 @@ const uri = decodeURI(props.event.payload.request.uri);
   @apply flex flex-col text-2xs md:text-xs;
 }
 
-.preview-card__link {
-  @apply cursor-pointer p-2 md:p-3 bg-gray-200 dark:bg-gray-800;
+.preview-card__content {
+  @apply p-2 md:p-3 bg-gray-200 dark:bg-gray-800;
 }
 
 .preview-card__method {
diff --git a/src/entities/inspector/ui/preview-card/preview-card.vue b/src/entities/inspector/ui/preview-card/preview-card.vue
index 869f1213..7f364f7d 100644
--- a/src/entities/inspector/ui/preview-card/preview-card.vue
+++ b/src/entities/inspector/ui/preview-card/preview-card.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, defineProps } from "vue";
+import { defineProps } from "vue";
 import type { NormalizedEvent } from "~/src/shared/types";
 import { PreviewCard } from "~/src/shared/ui";
 import type { Inspector } from "../../types";
@@ -9,16 +9,14 @@ type Props = {
   event: NormalizedEvent<Inspector>;
 };
 
-const props = defineProps<Props>();
-
-const eventLink = computed(() => `/inspector/${props.event.id}`);
+defineProps<Props>();
 </script>
 
 <template>
   <PreviewCard class="preview-card" :event="event">
-    <NuxtLink :to="eventLink" class="preview-card__link">
+    <div class="preview-card__content">
       <InspectorStatBoard :transaction="event.payload[0]" />
-    </NuxtLink>
+    </div>
   </PreviewCard>
 </template>
 
@@ -29,7 +27,7 @@ const eventLink = computed(() => `/inspector/${props.event.id}`);
   @apply flex flex-col;
 }
 
-.preview-card__link {
-  @apply cursor-pointer pb-2 flex-grow;
+.preview-card__content {
+  @apply pb-2 flex-grow;
 }
 </style>
diff --git a/src/entities/profiler/ui/preview-card/preview-card.vue b/src/entities/profiler/ui/preview-card/preview-card.vue
index 91bdd194..e52245b1 100644
--- a/src/entities/profiler/ui/preview-card/preview-card.vue
+++ b/src/entities/profiler/ui/preview-card/preview-card.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { computed } from "vue";
 import type { NormalizedEvent } from "~/src/shared/types";
 import { PreviewCard, StatBoard } from "~/src/shared/ui";
 import type { Profiler } from "../../types";
@@ -8,16 +7,14 @@ type Props = {
   event: NormalizedEvent<Profiler>;
 };
 
-const props = defineProps<Props>();
-
-const eventLink = computed(() => `/profiler/${props.event.id}`);
+defineProps<Props>();
 </script>
 
 <template>
   <PreviewCard class="profiler-preview" :event="event">
-    <NuxtLink tag="div" :to="eventLink" class="profiler-preview__link">
+    <div class="profiler-preview__link">
       <StatBoard :cost="event.payload.peaks" />
-    </NuxtLink>
+    </div>
   </PreviewCard>
 </template>
 
diff --git a/src/entities/sentry/ui/preview-card/preview-card.vue b/src/entities/sentry/ui/preview-card/preview-card.vue
index fd8eb6b1..8e541d04 100644
--- a/src/entities/sentry/ui/preview-card/preview-card.vue
+++ b/src/entities/sentry/ui/preview-card/preview-card.vue
@@ -15,8 +15,6 @@ const props = withDefaults(defineProps<Props>(), {
   maxFrames: 3,
 });
 
-const eventLink = computed(() => `/sentry/${props.event.id}`);
-
 const exceptionValues = computed(
   () => props.event?.payload?.exception?.values || []
 );
@@ -45,19 +43,19 @@ const exception: Ref<Exception> = computed(() =>
       :exception="exception"
       :max-frames="maxFrames"
     >
-      <NuxtLink :to="eventLink" class="preview-card__link">
+      <div class="preview-card__content">
         <h3 class="preview-card__title">
           {{ exception.type }}
         </h3>
 
         <pre class="preview-card__text" v-html="exception.value" />
-      </NuxtLink>
+      </div>
     </SentryException>
 
     <div v-if="message">
-      <NuxtLink :to="eventLink" class="preview-card__link">
+      <div class="preview-card__content">
         <pre class="preview-card__text" v-html="message" />
-      </NuxtLink>
+      </div>
     </div>
   </PreviewCard>
 </template>
@@ -68,8 +66,8 @@ const exception: Ref<Exception> = computed(() =>
   @apply flex flex-col;
 }
 
-.preview-card__link {
-  @apply cursor-pointer block dark:bg-gray-900 bg-gray-100 p-3 rounded-t-md border border-purple-300 dark:border-gray-400;
+.preview-card__content {
+  @apply block dark:bg-gray-900 bg-gray-100 p-3 rounded-t-md border border-purple-300 dark:border-gray-400;
 }
 
 .preview-card__title {
diff --git a/src/entities/smtp/ui/preview-card/preview-card.vue b/src/entities/smtp/ui/preview-card/preview-card.vue
index 68244c14..84d9394e 100644
--- a/src/entities/smtp/ui/preview-card/preview-card.vue
+++ b/src/entities/smtp/ui/preview-card/preview-card.vue
@@ -13,8 +13,6 @@ const props = defineProps<Props>();
 
 const dateFormat = computed(() => moment(props.event.date).fromNow());
 
-const eventLink = computed(() => `/smtp/${props.event.id}`);
-
 const emailRecipient = computed(
   () => props?.event?.payload?.to?.[0]?.email || null
 );
@@ -22,7 +20,7 @@ const emailRecipient = computed(
 
 <template>
   <PreviewCard class="smtp-preview" :event="event">
-    <NuxtLink :to="eventLink" class="smtp-preview__link">
+    <div class="smtp-preview__link">
       <h3 class="smtp-preview__link-title">
         {{ event.payload.subject }}
       </h3>
@@ -34,7 +32,7 @@ const emailRecipient = computed(
 
         <span>{{ dateFormat }}</span>
       </div>
-    </NuxtLink>
+    </div>
   </PreviewCard>
 </template>
 

From d9e49971f62d1c0d96feee7139c076aecbb5d199 Mon Sep 17 00:00:00 2001
From: Kuchuk Andrey <kreezag@gmail.com>
Date: Tue, 4 Jun 2024 23:04:04 +0400
Subject: [PATCH 3/7] #131 create blank pages for var and ray dumbs

---
 pages/ray-dump/[id].vue                       | 104 ++++++++++++++++++
 pages/ray-dump/index.vue                      |   8 ++
 pages/var-dump/[id].vue                       | 104 ++++++++++++++++++
 pages/var-dump/index.vue                      |   8 ++
 .../ui/layout-sidebar/layout-sidebar.vue      |  18 +++
 5 files changed, 242 insertions(+)
 create mode 100644 pages/ray-dump/[id].vue
 create mode 100644 pages/ray-dump/index.vue
 create mode 100644 pages/var-dump/[id].vue
 create mode 100644 pages/var-dump/index.vue

diff --git a/pages/ray-dump/[id].vue b/pages/ray-dump/[id].vue
new file mode 100644
index 00000000..35811f1d
--- /dev/null
+++ b/pages/ray-dump/[id].vue
@@ -0,0 +1,104 @@
+<script lang="ts" setup>
+import { computed, onMounted, ref } from "vue";
+import { useFetch, useHead, useNuxtApp, useRoute, useRouter } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
+import { PageHeader } from "~/src/widgets/ui";
+import { useProfiler } from "~/src/entities/profiler";
+import type { Profiler } from "~/src/entities/profiler/types";
+import { useEvents } from "~/src/shared/lib/use-events";
+import type { EventId, ServerEvent } from "~/src/shared/types";
+
+const { normalizeProfilerEvent } = useProfiler();
+
+const { params } = useRoute();
+const { $authToken } = useNuxtApp();
+const router = useRouter();
+const eventId = params.id as EventId;
+
+useHead({
+  title: `Ray Dump > ${eventId} | Buggregator`,
+});
+
+const { events } = useEvents();
+
+const isLoading = ref(false);
+const serverEvent = ref<Event | null>(null);
+
+const event = computed(() =>
+  serverEvent.value
+    ? normalizeProfilerEvent(
+        serverEvent.value as unknown as ServerEvent<Profiler>
+      )
+    : null
+);
+
+const onDelete = () => {
+  events.removeById(eventId);
+
+  router.push("/");
+};
+
+const getEvent = async () => {
+  isLoading.value = true;
+
+  await useFetch(events.getUrl(eventId), {
+    headers: { "X-Auth-Token": $authToken.token || "" },
+    onResponse({ response: { _data } }) {
+      serverEvent.value = _data;
+      isLoading.value = false;
+    },
+    onResponseError() {
+      router.push("/404");
+    },
+    onRequestError() {
+      router.push("/404");
+    },
+  });
+};
+
+onMounted(getEvent);
+</script>
+
+<template>
+  <main class="ray-dump">
+    <PageHeader
+      class="ray-dump__head"
+      button-title="Delete event"
+      @delete="onDelete"
+    >
+      <NuxtLink to="/">Home</NuxtLink>&nbsp;/&nbsp;
+      <NuxtLink to="/ray-dump">Ray Dump</NuxtLink>&nbsp;/&nbsp;
+      <NuxtLink :disabled="true">{{ eventId }}</NuxtLink>
+    </PageHeader>
+
+    <div v-if="isLoading && !event" class="ray-dump__loading">
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="ray-dump__body">
+      {{ JSON.stringify(event) }}
+    </div>
+  </main>
+</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-dump/index.vue b/pages/ray-dump/index.vue
new file mode 100644
index 00000000..313ba239
--- /dev/null
+++ b/pages/ray-dump/index.vue
@@ -0,0 +1,8 @@
+<script lang="ts" setup>
+import { PageLayout } from "~/src/widgets/ui/page-layout";
+import { PAGE_TYPES } from "~/src/shared/constants";
+</script>
+
+<template>
+  <PageLayout :type="PAGE_TYPES.RAY_DUMP" title="Ray Dumps" />
+</template>
diff --git a/pages/var-dump/[id].vue b/pages/var-dump/[id].vue
new file mode 100644
index 00000000..55caae8f
--- /dev/null
+++ b/pages/var-dump/[id].vue
@@ -0,0 +1,104 @@
+<script lang="ts" setup>
+import { computed, onMounted, ref } from "vue";
+import { useFetch, useHead, useNuxtApp, useRoute, useRouter } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
+import { PageHeader } from "~/src/widgets/ui";
+import { useProfiler } from "~/src/entities/profiler";
+import type { Profiler } from "~/src/entities/profiler/types";
+import { useEvents } from "~/src/shared/lib/use-events";
+import type { EventId, ServerEvent } from "~/src/shared/types";
+
+const { normalizeProfilerEvent } = useProfiler();
+
+const { params } = useRoute();
+const { $authToken } = useNuxtApp();
+const router = useRouter();
+const eventId = params.id as EventId;
+
+useHead({
+  title: `Var Dump > ${eventId} | Buggregator`,
+});
+
+const { events } = useEvents();
+
+const isLoading = ref(false);
+const serverEvent = ref<Event | null>(null);
+
+const event = computed(() =>
+  serverEvent.value
+    ? normalizeProfilerEvent(
+        serverEvent.value as unknown as ServerEvent<Profiler>
+      )
+    : null
+);
+
+const onDelete = () => {
+  events.removeById(eventId);
+
+  router.push("/");
+};
+
+const getEvent = async () => {
+  isLoading.value = true;
+
+  await useFetch(events.getUrl(eventId), {
+    headers: { "X-Auth-Token": $authToken.token || "" },
+    onResponse({ response: { _data } }) {
+      serverEvent.value = _data;
+      isLoading.value = false;
+    },
+    onResponseError() {
+      router.push("/404");
+    },
+    onRequestError() {
+      router.push("/404");
+    },
+  });
+};
+
+onMounted(getEvent);
+</script>
+
+<template>
+  <main class="var-dump">
+    <PageHeader
+      class="var-dump__head"
+      button-title="Delete event"
+      @delete="onDelete"
+    >
+      <NuxtLink to="/">Home</NuxtLink>&nbsp;/&nbsp;
+      <NuxtLink to="/var-dump">Var Dump</NuxtLink>&nbsp;/&nbsp;
+      <NuxtLink :disabled="true">{{ eventId }}</NuxtLink>
+    </PageHeader>
+
+    <div v-if="isLoading && !event" class="var-dump__loading">
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="var-dump__body">
+      {{ JSON.stringify(event) }}
+    </div>
+  </main>
+</template>
+
+<style lang="scss" scoped>
+@import "src/assets/mixins";
+
+.var-dump {
+  @include layout;
+}
+
+.var-dump__head {
+  @include layout-head;
+}
+
+.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
new file mode 100644
index 00000000..1d4f563b
--- /dev/null
+++ b/pages/var-dump/index.vue
@@ -0,0 +1,8 @@
+<script lang="ts" setup>
+import { PageLayout } from "~/src/widgets/ui/page-layout";
+import { PAGE_TYPES } from "~/src/shared/constants";
+</script>
+
+<template>
+  <PageLayout :type="PAGE_TYPES.VAR_DUMP" title="Var Dumps" />
+</template>
diff --git a/src/widgets/ui/layout-sidebar/layout-sidebar.vue b/src/widgets/ui/layout-sidebar/layout-sidebar.vue
index b97cc1ef..5c7e3e24 100644
--- a/src/widgets/ui/layout-sidebar/layout-sidebar.vue
+++ b/src/widgets/ui/layout-sidebar/layout-sidebar.vue
@@ -119,6 +119,24 @@ const { path } = useRoute();
         <IconSvg class="layout-sidebar__link-icon" name="inspector" />
       </NuxtLink>
 
+      <NuxtLink
+        to="/var-dump"
+        title="Var Dump logs"
+        class="layout-sidebar__link"
+        :class="{ 'router-link-active': path.includes('/var-dump') }"
+      >
+        <IconSvg class="layout-sidebar__link-icon" name="inspector" />
+      </NuxtLink>
+
+      <NuxtLink
+        to="/ray-dump"
+        title="Ray Dump logs"
+        class="layout-sidebar__link"
+        :class="{ 'router-link-active': path.includes('/ray-dump') }"
+      >
+        <IconSvg class="layout-sidebar__link-icon" name="inspector" />
+      </NuxtLink>
+
       <NuxtLink to="/settings" title="Settings" class="layout-sidebar__link">
         <IconSvg class="layout-sidebar__link-icon" name="settings" />
       </NuxtLink>

From eb0fdd753fc3dcb6d099c6f1c544ad00925ff13e Mon Sep 17 00:00:00 2001
From: Kuchuk Andrey <kreezag@gmail.com>
Date: Thu, 6 Jun 2024 18:06:59 +0400
Subject: [PATCH 4/7] [#131] fix active icon in sidebar

---
 src/shared/ui/preview-card/preview-card-header.vue | 2 +-
 src/widgets/ui/layout-sidebar/layout-sidebar.vue   | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/shared/ui/preview-card/preview-card-header.vue b/src/shared/ui/preview-card/preview-card-header.vue
index 0e6b926f..7f33c7be 100644
--- a/src/shared/ui/preview-card/preview-card-header.vue
+++ b/src/shared/ui/preview-card/preview-card-header.vue
@@ -91,7 +91,7 @@ const newPageLink = computed(() => {
         <NuxtLink
           :to="newPageLink"
           class="preview-card-header__open"
-          title="Open event in the new window"
+          title="Open full event"
         >
           <IconSvg name="window-maximize" />
         </NuxtLink>
diff --git a/src/widgets/ui/layout-sidebar/layout-sidebar.vue b/src/widgets/ui/layout-sidebar/layout-sidebar.vue
index 5c7e3e24..112a7329 100644
--- a/src/widgets/ui/layout-sidebar/layout-sidebar.vue
+++ b/src/widgets/ui/layout-sidebar/layout-sidebar.vue
@@ -56,7 +56,7 @@ const logout = () => {
   router.push("/login");
 };
 
-const { path } = useRoute();
+const path = computed(() => useRoute().path);
 </script>
 
 <template>
@@ -129,10 +129,10 @@ const { path } = useRoute();
       </NuxtLink>
 
       <NuxtLink
-        to="/ray-dump"
+        to="/ray"
         title="Ray Dump logs"
         class="layout-sidebar__link"
-        :class="{ 'router-link-active': path.includes('/ray-dump') }"
+        :class="{ 'router-link-active': path.includes('/ray') }"
       >
         <IconSvg class="layout-sidebar__link-icon" name="inspector" />
       </NuxtLink>

From 06ba1cdc1aa63a80d841aaf9074857bf70034430 Mon Sep 17 00:00:00 2001
From: Kuchuk Andrey <kreezag@gmail.com>
Date: Thu, 6 Jun 2024 18:16:39 +0400
Subject: [PATCH 5/7] [#131] create blank pages for ray and var-dump

---
 pages/{ray-dump => ray}/[id].vue              |  14 +--
 pages/{ray-dump => ray}/index.vue             |   0
 pages/var-dump/[id].vue                       |  19 ++-
 .../profiler/ui/preview-card/preview-card.vue |   2 +-
 src/entities/var-dump/types.ts                |   8 +-
 src/screens/var-dump/index.ts                 |   1 +
 src/screens/var-dump/ui/index.ts              |   1 +
 .../var-dump/ui/var-dump-page/index.ts        |   1 +
 .../ui/var-dump-page/var-dump-page.stories.ts |  18 +++
 .../ui/var-dump-page/var-dump-page.vue        | 114 ++++++++++++++++++
 src/shared/ui/code-snippet/code-snippet.vue   |   7 +-
 src/shared/ui/value-dump/value-dump.vue       |  36 ++++--
 12 files changed, 183 insertions(+), 38 deletions(-)
 rename pages/{ray-dump => ray}/[id].vue (85%)
 rename pages/{ray-dump => ray}/index.vue (100%)
 create mode 100644 src/screens/var-dump/index.ts
 create mode 100644 src/screens/var-dump/ui/index.ts
 create mode 100644 src/screens/var-dump/ui/var-dump-page/index.ts
 create mode 100644 src/screens/var-dump/ui/var-dump-page/var-dump-page.stories.ts
 create mode 100644 src/screens/var-dump/ui/var-dump-page/var-dump-page.vue

diff --git a/pages/ray-dump/[id].vue b/pages/ray/[id].vue
similarity index 85%
rename from pages/ray-dump/[id].vue
rename to pages/ray/[id].vue
index 35811f1d..7ef215dc 100644
--- a/pages/ray-dump/[id].vue
+++ b/pages/ray/[id].vue
@@ -2,12 +2,12 @@
 import { computed, onMounted, ref } from "vue";
 import { useFetch, useHead, useNuxtApp, useRoute, useRouter } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
 import { PageHeader } from "~/src/widgets/ui";
-import { useProfiler } from "~/src/entities/profiler";
-import type { Profiler } from "~/src/entities/profiler/types";
+import { useRay } from "~/src/entities/ray";
+import type { RayDump } from "~/src/entities/ray/types";
 import { useEvents } from "~/src/shared/lib/use-events";
 import type { EventId, ServerEvent } from "~/src/shared/types";
 
-const { normalizeProfilerEvent } = useProfiler();
+const { normalizeRayEvent } = useRay();
 
 const { params } = useRoute();
 const { $authToken } = useNuxtApp();
@@ -21,14 +21,10 @@ useHead({
 const { events } = useEvents();
 
 const isLoading = ref(false);
-const serverEvent = ref<Event | null>(null);
+const serverEvent = ref<ServerEvent<RayDump> | null>(null);
 
 const event = computed(() =>
-  serverEvent.value
-    ? normalizeProfilerEvent(
-        serverEvent.value as unknown as ServerEvent<Profiler>
-      )
-    : null
+  serverEvent.value ? normalizeRayEvent(serverEvent.value) : null
 );
 
 const onDelete = () => {
diff --git a/pages/ray-dump/index.vue b/pages/ray/index.vue
similarity index 100%
rename from pages/ray-dump/index.vue
rename to pages/ray/index.vue
diff --git a/pages/var-dump/[id].vue b/pages/var-dump/[id].vue
index 55caae8f..e6b4793d 100644
--- a/pages/var-dump/[id].vue
+++ b/pages/var-dump/[id].vue
@@ -1,13 +1,14 @@
 <script lang="ts" setup>
 import { computed, onMounted, ref } from "vue";
+import { VarDumpPage } from "~/src/screens/var-dump";
 import { useFetch, useHead, useNuxtApp, useRoute, useRouter } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
 import { PageHeader } from "~/src/widgets/ui";
-import { useProfiler } from "~/src/entities/profiler";
-import type { Profiler } from "~/src/entities/profiler/types";
+import { useVarDump } from "~/src/entities/var-dump";
+import type { VarDump } from "~/src/entities/var-dump/types";
 import { useEvents } from "~/src/shared/lib/use-events";
 import type { EventId, ServerEvent } from "~/src/shared/types";
 
-const { normalizeProfilerEvent } = useProfiler();
+const { normalizeVarDumpEvent } = useVarDump();
 
 const { params } = useRoute();
 const { $authToken } = useNuxtApp();
@@ -21,14 +22,10 @@ useHead({
 const { events } = useEvents();
 
 const isLoading = ref(false);
-const serverEvent = ref<Event | null>(null);
+const serverEvent = ref<ServerEvent<VarDump> | null>(null);
 
 const event = computed(() =>
-  serverEvent.value
-    ? normalizeProfilerEvent(
-        serverEvent.value as unknown as ServerEvent<Profiler>
-      )
-    : null
+  serverEvent.value ? normalizeVarDumpEvent(serverEvent.value) : null
 );
 
 const onDelete = () => {
@@ -76,8 +73,8 @@ onMounted(getEvent);
       <div></div>
     </div>
 
-    <div class="var-dump__body">
-      {{ JSON.stringify(event) }}
+    <div v-if="event" class="var-dump__body">
+      <VarDumpPage :event="event" />
     </div>
   </main>
 </template>
diff --git a/src/entities/profiler/ui/preview-card/preview-card.vue b/src/entities/profiler/ui/preview-card/preview-card.vue
index e52245b1..15e295b5 100644
--- a/src/entities/profiler/ui/preview-card/preview-card.vue
+++ b/src/entities/profiler/ui/preview-card/preview-card.vue
@@ -26,6 +26,6 @@ defineProps<Props>();
 }
 
 .profiler-preview__link {
-  @apply cursor-pointer pb-2 flex-grow;
+  @apply pb-2 flex-grow;
 }
 </style>
diff --git a/src/entities/var-dump/types.ts b/src/entities/var-dump/types.ts
index bdef55a7..a509c1b9 100644
--- a/src/entities/var-dump/types.ts
+++ b/src/entities/var-dump/types.ts
@@ -5,10 +5,16 @@ export interface VarDump {
   },
   context: {
     timestamp: number,
-    cli: {
+    cli?: {
       command_line: string,
       identifier: string
     },
+    request?: {
+      identifier?: string,
+      method?: string,
+      uri?: string,
+      controller?: string,
+    },
     source: {
       name: string,
       file: string,
diff --git a/src/screens/var-dump/index.ts b/src/screens/var-dump/index.ts
new file mode 100644
index 00000000..ed584959
--- /dev/null
+++ b/src/screens/var-dump/index.ts
@@ -0,0 +1 @@
+export * from './ui'
diff --git a/src/screens/var-dump/ui/index.ts b/src/screens/var-dump/ui/index.ts
new file mode 100644
index 00000000..489079ec
--- /dev/null
+++ b/src/screens/var-dump/ui/index.ts
@@ -0,0 +1 @@
+export * from './var-dump-page'
diff --git a/src/screens/var-dump/ui/var-dump-page/index.ts b/src/screens/var-dump/ui/var-dump-page/index.ts
new file mode 100644
index 00000000..72e59de8
--- /dev/null
+++ b/src/screens/var-dump/ui/var-dump-page/index.ts
@@ -0,0 +1 @@
+export { default as VarDumpPage } from './var-dump-page.vue';
diff --git a/src/screens/var-dump/ui/var-dump-page/var-dump-page.stories.ts b/src/screens/var-dump/ui/var-dump-page/var-dump-page.stories.ts
new file mode 100644
index 00000000..344dc9e1
--- /dev/null
+++ b/src/screens/var-dump/ui/var-dump-page/var-dump-page.stories.ts
@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { useVarDump } from "~/src/entities/var-dump";
+import { varDumpObjectMock } from '~/src/entities/var-dump/mocks';
+import VarDump from './var-dump-page.vue';
+
+const { normalizeVarDumpEvent } = useVarDump();
+
+export default {
+  title: "Screens/VarDump/VarDumpPage",
+  component: VarDump
+} as Meta<typeof VarDump>;
+
+
+export const Default: StoryObj<typeof VarDump> = {
+  args: {
+    event: normalizeVarDumpEvent(varDumpObjectMock),
+  }
+}
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
new file mode 100644
index 00000000..4d538c6d
--- /dev/null
+++ b/src/screens/var-dump/ui/var-dump-page/var-dump-page.vue
@@ -0,0 +1,114 @@
+<script lang="ts" setup>
+import moment from "moment/moment";
+import { computed } from "vue";
+import type { VarDump } from "~/src/entities/var-dump/types";
+import type { NormalizedEvent } from "~/src/shared/types";
+import { TableBase, TableBaseRow, ValueDump } from "~/src/shared/ui";
+
+type Props = {
+  event: NormalizedEvent<VarDump>;
+};
+
+const props = defineProps<Props>();
+
+const title = computed(() => {
+  const type = String(props.event.payload.payload.type || "Unknown type");
+
+  return type[0].toUpperCase() + type.slice(1);
+});
+
+const date = computed(() =>
+  moment(props.event.date).format("DD.MM.YYYY HH:mm:ss")
+);
+</script>
+
+<template>
+  <div ref="main" class="var-dump">
+    <main class="var-dump__in">
+      <header class="var-dump__header">
+        <h2 class="var-dump__header-title">
+          {{ title }}
+        </h2>
+        <div class="var-dump__header-meta">
+          <span class="var-dump__header-date">{{ date }}</span>
+        </div>
+      </header>
+
+      <section class="var-dump__body">
+        <ValueDump
+          :value="event.payload.payload.value"
+          :type="event.payload.payload.type"
+        />
+      </section>
+
+      <section class="var-dump__body">
+        <h3 class="var-dump__body-text">Source</h3>
+        <TableBase class="var-dump__body-table">
+          <TableBaseRow
+            v-for="(value, name) in event.payload.context.source"
+            :key="name"
+            :title="String(name)"
+          >
+            {{ value }}
+          </TableBaseRow>
+        </TableBase>
+      </section>
+
+      <section class="var-dump__body">
+        <h3 class="var-dump__body-text">Request</h3>
+        <TableBase class="var-dump__body-table">
+          <template
+            v-for="(value, name) in event.payload.context.request"
+            :key="name"
+          >
+            <TableBaseRow v-if="name && value" :title="String(name)">
+              {{ value }}
+            </TableBaseRow>
+          </template>
+        </TableBase>
+      </section>
+    </main>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import "src/assets/mixins";
+
+.var-dump {
+  @apply relative;
+}
+
+.var-dump__in {
+  @apply flex flex-col h-full flex-grow py-5 px-4 md:px-6 lg:px-8;
+}
+
+.var-dump__header {
+  @apply flex flex-col md:flex-row justify-between items-center;
+}
+
+.var-dump__header-meta {
+  @apply flex flex-col md:flex-row items-center gap-x-5;
+}
+
+.var-dump__header-title {
+  @apply text-sm sm:text-base md:text-lg lg:text-2xl;
+}
+
+.var-dump__header-date {
+  @include text-muted;
+  @apply text-sm font-semibold;
+}
+
+.var-dump__body {
+  @apply py-5;
+}
+
+.var-dump__body-text {
+  @include text-muted;
+  @apply font-bold uppercase text-sm mb-5;
+}
+
+.var-dump__body-table {
+  @apply mt-3;
+}
+</style>
diff --git a/src/shared/ui/code-snippet/code-snippet.vue b/src/shared/ui/code-snippet/code-snippet.vue
index a8ab3fbf..93465393 100644
--- a/src/shared/ui/code-snippet/code-snippet.vue
+++ b/src/shared/ui/code-snippet/code-snippet.vue
@@ -7,12 +7,13 @@ import { IconSvg } from "../icon-svg";
 const CodeHighlight = highlightPlugin.component;
 
 type Props = {
-  code: string | unknown;
-  language: string;
+  code?: string;
+  language?: string;
 };
 
 const props = withDefaults(defineProps<Props>(), {
   language: "plaintext",
+  code: "",
 });
 
 const isCopied = ref(false);
@@ -51,7 +52,7 @@ const copyCode = (): void => {
       :class="{ 'code-snippet__copy--active': isCopied }"
       @click="copyCode"
     >
-      <IconSvg name="copy" class="code-snippet__copy-icon"/>
+      <IconSvg name="copy" class="code-snippet__copy-icon" />
       Copy
     </button>
   </div>
diff --git a/src/shared/ui/value-dump/value-dump.vue b/src/shared/ui/value-dump/value-dump.vue
index 3c56dd84..f13ccb16 100644
--- a/src/shared/ui/value-dump/value-dump.vue
+++ b/src/shared/ui/value-dump/value-dump.vue
@@ -1,13 +1,13 @@
 <script lang="ts" setup>
 import isString from "lodash/isString";
-import { onMounted } from "vue";
+import { computed, onMounted } from "vue";
 import SfdumpWrap from "../../lib/vendor/dumper";
 import { CodeSnippet } from "../code-snippet";
 
 type Props = {
-  value: string;
-  type: string;
-  language: string;
+  value: string | number | boolean;
+  type?: string;
+  language?: string;
 };
 
 const props = withDefaults(defineProps<Props>(), {
@@ -15,23 +15,25 @@ const props = withDefaults(defineProps<Props>(), {
   language: "plaintext",
 });
 
-const isValueString = isString(props.value) && props.type === "string";
-const isValueCode = isString(props.value) && (props.type === "code");
+const isValueString = computed(
+  () => isString(props.value) && props.type === "string"
+);
+const isValueCode = computed(
+  () => isString(props.value) && props.type === "code"
+);
 
 const dumpId = String(props.value).match(/(sf-dump-[0-9]+)/i)?.[0] || null;
-const makeDumpBody = () => {
+const dumpBody = computed(() => {
   if (props.type === "boolean") {
     return props.value === "1" ? "true" : "false";
   }
 
-  if (isValueString && !props.value.replace(/\s/g, '').length) {
+  if (isValueString.value) {
     return `"${props.value}"`;
   }
 
   return props.value;
-};
-
-const dumpBody = makeDumpBody();
+});
 
 onMounted(() => {
   const sfdump = SfdumpWrap(window.document);
@@ -44,8 +46,16 @@ onMounted(() => {
 
 <template>
   <div class="value-dump">
-    <CodeSnippet v-if="isValueString || isValueCode" :language="language" :code="dumpBody"/>
-    <div v-else class="value-dump__html" v-html="dumpBody"/>
+    <CodeSnippet
+      v-if="isValueString || isValueCode"
+      :language="language"
+      :code="dumpBody"
+    />
+    <div
+      v-if="!isValueString && !isValueCode"
+      class="value-dump__html"
+      v-html="dumpBody"
+    />
   </div>
 </template>
 

From 5ffccb8083324200fe88a46587ca5964e8f5290d Mon Sep 17 00:00:00 2001
From: Kuchuk Andrey <kreezag@gmail.com>
Date: Thu, 6 Jun 2024 21:00:51 +0400
Subject: [PATCH 6/7] #131 create ray event page

---
 pages/ray/[id].vue                            |   7 +-
 src/entities/ray/lib/use-ray/config.ts        | 145 +++++++++++++++
 src/entities/ray/lib/use-ray/use-ray.ts       |   5 +-
 src/entities/ray/types.ts                     |  50 +++---
 .../ray/ui/preview-card/preview-card.vue      | 165 ++----------------
 .../ray/ui/ray-exception/ray-exception.vue    |  43 +++--
 src/entities/ray/ui/ray-trace/ray-trace.vue   |  18 +-
 .../ui/sentry-exception/sentry-exception.vue  |   2 +-
 src/screens/ray/index.ts                      |   1 +
 src/screens/ray/ui/index.ts                   |   1 +
 src/screens/ray/ui/ray-page/index.ts          |   1 +
 .../ray/ui/ray-page/ray-page.stories.ts       |  18 ++
 src/screens/ray/ui/ray-page/ray-page.vue      | 140 +++++++++++++++
 13 files changed, 397 insertions(+), 199 deletions(-)
 create mode 100644 src/entities/ray/lib/use-ray/config.ts
 create mode 100644 src/screens/ray/index.ts
 create mode 100644 src/screens/ray/ui/index.ts
 create mode 100644 src/screens/ray/ui/ray-page/index.ts
 create mode 100644 src/screens/ray/ui/ray-page/ray-page.stories.ts
 create mode 100644 src/screens/ray/ui/ray-page/ray-page.vue

diff --git a/pages/ray/[id].vue b/pages/ray/[id].vue
index 7ef215dc..b5bbce44 100644
--- a/pages/ray/[id].vue
+++ b/pages/ray/[id].vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { computed, onMounted, ref } from "vue";
+import { RayPage } from "~/src/screens/ray";
 import { useFetch, useHead, useNuxtApp, useRoute, useRouter } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
 import { PageHeader } from "~/src/widgets/ui";
 import { useRay } from "~/src/entities/ray";
@@ -62,7 +63,7 @@ onMounted(getEvent);
       @delete="onDelete"
     >
       <NuxtLink to="/">Home</NuxtLink>&nbsp;/&nbsp;
-      <NuxtLink to="/ray-dump">Ray Dump</NuxtLink>&nbsp;/&nbsp;
+      <NuxtLink to="/ray">Ray Dump</NuxtLink>&nbsp;/&nbsp;
       <NuxtLink :disabled="true">{{ eventId }}</NuxtLink>
     </PageHeader>
 
@@ -72,8 +73,8 @@ onMounted(getEvent);
       <div></div>
     </div>
 
-    <div class="ray-dump__body">
-      {{ JSON.stringify(event) }}
+    <div v-if="event" class="ray-dump__body">
+      <RayPage :event="event" />
     </div>
   </main>
 </template>
diff --git a/src/entities/ray/lib/use-ray/config.ts b/src/entities/ray/lib/use-ray/config.ts
new file mode 100644
index 00000000..3d3288a2
--- /dev/null
+++ b/src/entities/ray/lib/use-ray/config.ts
@@ -0,0 +1,145 @@
+import { computed } from "vue";
+import type { OneOfValues } from "~/src/shared/types";
+import {
+  RAY_EVENT_TYPES,
+  type RayContentApplicationLog,
+  type RayContentCarbon,
+  type RayContentCustom,
+  type RayContentEloquent,
+  type RayContentEvent,
+  type RayContentException,
+  type RayContentFrame,
+  type RayContentFrames,
+  type RayContentJob,
+  type RayContentLock,
+  type RayContentLog,
+  type RayContentMail,
+  type RayContentMeasure,
+  type RayContentObject,
+  type RayContentSQL,
+  type RayContentView,
+  type RayPayload
+} from "../../types";
+import { RayApplicationLog } from "../../ui/ray-application-log";
+import { RayCarbon } from "../../ui/ray-carbon";
+import { RayCustom } from "../../ui/ray-custom";
+import { RayEloquent } from "../../ui/ray-eloquent";
+import { RayEvent } from "../../ui/ray-event";
+import { RayException } from "../../ui/ray-exception";
+import { RayFrame } from "../../ui/ray-frame";
+import { RayJob } from "../../ui/ray-job";
+import { RayLock } from "../../ui/ray-lock";
+import { RayLog } from "../../ui/ray-log";
+import { RayMail } from "../../ui/ray-mail";
+import { RayMeasure } from "../../ui/ray-measure";
+import { RayOrigin } from "../../ui/ray-origin";
+import { RayQuery } from "../../ui/ray-query";
+import { RayTable } from "../../ui/ray-table";
+import { RayTrace } from "../../ui/ray-trace";
+import { RayView } from "../../ui/ray-view";
+
+export const COMPONENT_TYPE_MAP: Record<RAY_EVENT_TYPES, {
+  view: unknown,
+  getProps: (payload: RayPayload) => Record<string, unknown>
+}> = {
+  [RAY_EVENT_TYPES.LOG]: {
+    view: RayLog,
+    getProps: (payload: RayPayload) => ({
+      log: (payload.content as RayContentLog).values[0],
+    }),
+  },
+  [RAY_EVENT_TYPES.CUSTOM]: {
+    view: RayCustom,
+    getProps: (payload: RayPayload) => ({
+      content: payload.content as RayContentCustom,
+    }),
+  },
+  [RAY_EVENT_TYPES.CALLER]: {
+    view: RayFrame,
+    getProps: (payload: RayPayload) => ({
+      frame: (payload.content as RayContentFrame).frame,
+    }),
+  },
+  [RAY_EVENT_TYPES.CARBON]: {
+    view: RayCarbon,
+    getProps: (payload: RayPayload) => ({
+      carbon: payload.content as RayContentCarbon,
+    }),
+  },
+  [RAY_EVENT_TYPES.TRACE]: {
+    view: RayTrace,
+    getProps: (payload: RayPayload) => ({
+      frames: (payload.content as RayContentFrames).frames,
+    }),
+  },
+  [RAY_EVENT_TYPES.EXCEPTION]: {
+    view: RayException,
+    getProps: (payload: RayPayload) => ({
+      exception: payload.content as RayContentException,
+    }),
+  },
+  [RAY_EVENT_TYPES.TABLE]: {
+    view: RayTable,
+    getProps: (payload: RayPayload) => ({
+      table: payload.content as RayContentObject,
+    }),
+  },
+  [RAY_EVENT_TYPES.MEASURE]: {
+    view: RayMeasure,
+    getProps: (payload: RayPayload) => ({
+      measure: payload.content as RayContentMeasure,
+    }),
+  },
+  [RAY_EVENT_TYPES.QUERY]: {
+    view: RayQuery,
+    getProps: (payload: RayPayload) => ({
+      content: payload.content as RayContentSQL,
+    }),
+  },
+  [RAY_EVENT_TYPES.ELOQUENT]: {
+    view: RayEloquent,
+    getProps: (payload: RayPayload) => ({
+      content: payload.content as RayContentEloquent,
+    }),
+  },
+  [RAY_EVENT_TYPES.APPLICATION_LOG]: {
+    view: RayApplicationLog,
+    getProps: (payload: RayPayload) => ({
+      content: payload.content as RayContentApplicationLog,
+    }),
+  },
+  [RAY_EVENT_TYPES.VIEW]: {
+    view: RayView,
+    getProps: (payload: RayPayload) => ({
+      view: payload.content as RayContentView,
+    }),
+  },
+  [RAY_EVENT_TYPES.EVENT]: {
+    view: RayEvent,
+    getProps: (payload: RayPayload) => ({
+      content: payload.content as RayContentEvent,
+    }),
+  },
+  [RAY_EVENT_TYPES.JOB]: {
+    view: RayJob,
+    getProps: (payload: RayPayload) => ({
+      content: payload.content as RayContentJob,
+    }),
+  },
+  [RAY_EVENT_TYPES.LOCK]: {
+    view: RayLock,
+    getProps: (payload: RayPayload) => ({
+      name: (payload.content as RayContentLock).name,
+    }),
+  },
+  [RAY_EVENT_TYPES.MAILABLE]: {
+    view: RayMail,
+    getProps: (payload: RayPayload) => ({
+      content: payload.content as RayContentMail,
+    }),
+  },
+  [RAY_EVENT_TYPES.NOTIFY]: {
+    view: RayOrigin,
+    getProps: (payload: RayPayload) => ({ origin: payload.origin }),
+  },
+};
diff --git a/src/entities/ray/lib/use-ray/use-ray.ts b/src/entities/ray/lib/use-ray/use-ray.ts
index 58c80f31..28b7a1fa 100644
--- a/src/entities/ray/lib/use-ray/use-ray.ts
+++ b/src/entities/ray/lib/use-ray/use-ray.ts
@@ -1,11 +1,14 @@
 import type { ServerEvent } from '~/src/shared/types';
 import type { EnhancedRayEvent, RayDump } from "../../types";
+import { COMPONENT_TYPE_MAP } from "./config";
 import { normalizeRayEvent } from "./normalize-ray-event";
 
 type TUseRay = () => {
   normalizeRayEvent: (event: ServerEvent<RayDump>) => EnhancedRayEvent
+  COMPONENT_TYPE_MAP: typeof COMPONENT_TYPE_MAP
 }
 
 export const useRay: TUseRay = () => ({
-  normalizeRayEvent
+  normalizeRayEvent,
+  COMPONENT_TYPE_MAP
 })
diff --git a/src/entities/ray/types.ts b/src/entities/ray/types.ts
index 5a656d6b..e0a6749b 100644
--- a/src/entities/ray/types.ts
+++ b/src/entities/ray/types.ts
@@ -1,5 +1,29 @@
 import type { NormalizedEvent } from "~/src/shared/types";
 
+export enum RAY_EVENT_TYPES {
+  LOG = "log",
+  // SIZE = "size",
+  CUSTOM = "custom",
+  // LABEL = "label",
+  CALLER = "caller",
+  CARBON = "carbon",
+  // COLOR = "color",
+  EXCEPTION = "exception",
+  // HIDE = "hide",
+  MEASURE = "measure",
+  NOTIFY = "notify",
+  MAILABLE = "mailable",
+  TABLE = "table",
+  TRACE = "trace",
+  QUERY = "executed_query",
+  APPLICATION_LOG = "application_log",
+  ELOQUENT = "eloquent_model",
+  VIEW = "view",
+  EVENT = "event",
+  JOB = "job_event",
+  LOCK = "create_lock",
+}
+
 export interface RayFrame {
   file_name: string,
   line_number: number,
@@ -138,7 +162,7 @@ export interface RayContentCustom {
 }
 
 export interface RayPayload {
-  type: string,
+  type: RAY_EVENT_TYPES | string,
   origin?: RayPayloadOrigin,
   content: RayContentException
     | RayContent
@@ -184,27 +208,3 @@ export interface EnhancedRayEvent extends NormalizedEvent<RayDump> {
     size: 'sm' | 'md' | 'lg' | 'xl',
   }
 }
-
-export enum RAY_EVENT_TYPES {
-  LOG = "log",
-  // SIZE = "size",
-  CUSTOM = "custom",
-  // LABEL = "label",
-  CALLER = "caller",
-  CARBON = "carbon",
-  // COLOR = "color",
-  EXCEPTION = "exception",
-  // HIDE = "hide",
-  MEASURE = "measure",
-  NOTIFY = "notify",
-  MAILABLE = "mailable",
-  TABLE = "table",
-  TRACE = "trace",
-  QUERY = "executed_query",
-  APPLICATION_LOG = "application_log",
-  ELOQUENT = "eloquent_model",
-  VIEW = "view",
-  EVENT = "event",
-  JOB = "job_event",
-  LOCK = "create_lock",
-}
diff --git a/src/entities/ray/ui/preview-card/preview-card.vue b/src/entities/ray/ui/preview-card/preview-card.vue
index ca6ab1d5..0575420f 100644
--- a/src/entities/ray/ui/preview-card/preview-card.vue
+++ b/src/entities/ray/ui/preview-card/preview-card.vue
@@ -1,46 +1,10 @@
 <script lang="ts" setup>
 import { computed } from "vue";
-import type { NormalizedEvent } from "~/src/shared/types";
+import type { NormalizedEvent, OneOfValues } from "~/src/shared/types";
 import { PreviewCard } from "~/src/shared/ui";
-import type {
-  EnhancedRayEvent,
-  RayContentCarbon,
-  RayContentCustom,
-  RayContentEloquent,
-  RayContentApplicationLog,
-  RayContentEvent,
-  RayContentException,
-  RayContentFrame,
-  RayContentFrames,
-  RayContentJob,
-  RayContentLock,
-  RayContentLog,
-  RayContentMail,
-  RayContentMeasure,
-  RayContentObject,
-  RayContentSQL,
-  RayContentView,
-  RayDump,
-  RayPayload,
-} from "../../types";
+import { COMPONENT_TYPE_MAP } from "../../lib/use-ray/config";
+import type { EnhancedRayEvent, RayDump } from "../../types";
 import { RAY_EVENT_TYPES } from "../../types";
-import { RayApplicationLog } from "../ray-application-log";
-import { RayCarbon } from "../ray-carbon";
-import { RayCustom } from "../ray-custom";
-import { RayEloquent } from "../ray-eloquent";
-import { RayEvent } from "../ray-event";
-import { RayException } from "../ray-exception";
-import { RayFrame } from "../ray-frame";
-import { RayJob } from "../ray-job";
-import { RayLock } from "../ray-lock";
-import { RayLog } from "../ray-log";
-import { RayMail } from "../ray-mail";
-import { RayMeasure } from "../ray-measure";
-import { RayOrigin } from "../ray-origin";
-import { RayQuery } from "../ray-query";
-import { RayTable } from "../ray-table";
-import { RayTrace } from "../ray-trace";
-import { RayView } from "../ray-view";
 
 type Props = {
   event: EnhancedRayEvent;
@@ -56,111 +20,13 @@ const normalizedEvent = computed(() => {
 
 const classes = computed(() => [
   `text-${props.event.meta.size}`,
-  `text-${props.event.meta.color}-900 dark:text-${props.event.meta.color}-200`,
+  `text-${props.event.meta.color}-500`,
 ]);
 
-const COMPONENT_TYPE_MAP = {
-  [RAY_EVENT_TYPES.LOG]: {
-    view: RayLog,
-    getProps: (payload: RayPayload) => ({
-      log: (payload.content as RayContentLog).values[0],
-    }),
-  },
-  [RAY_EVENT_TYPES.CUSTOM]: {
-    view: RayCustom,
-    getProps: (payload: RayPayload) => ({
-      content: payload.content as RayContentCustom,
-    }),
-  },
-  [RAY_EVENT_TYPES.CALLER]: {
-    view: RayFrame,
-    getProps: (payload: RayPayload) => ({
-      frame: (payload.content as RayContentFrame).frame,
-    }),
-  },
-  [RAY_EVENT_TYPES.CARBON]: {
-    view: RayCarbon,
-    getProps: (payload: RayPayload) => ({
-      carbon: payload.content as RayContentCarbon,
-    }),
-  },
-  [RAY_EVENT_TYPES.TRACE]: {
-    view: RayTrace,
-    getProps: (payload: RayPayload) => ({
-      frames: (payload.content as RayContentFrames).frames,
-    }),
-  },
-  [RAY_EVENT_TYPES.EXCEPTION]: {
-    view: RayException,
-    getProps: (payload: RayPayload) => ({
-      exception: payload.content as RayContentException,
-    }),
-  },
-  [RAY_EVENT_TYPES.TABLE]: {
-    view: RayTable,
-    getProps: (payload: RayPayload) => ({
-      table: payload.content as RayContentObject,
-    }),
-  },
-  [RAY_EVENT_TYPES.MEASURE]: {
-    view: RayMeasure,
-    getProps: (payload: RayPayload) => ({
-      measure: payload.content as RayContentMeasure,
-    }),
-  },
-  [RAY_EVENT_TYPES.QUERY]: {
-    view: RayQuery,
-    getProps: (payload: RayPayload) => ({
-      content: payload.content as RayContentSQL,
-    }),
-  },
-  [RAY_EVENT_TYPES.ELOQUENT]: {
-    view: RayEloquent,
-    getProps: (payload: RayPayload) => ({
-      content: payload.content as RayContentEloquent,
-    }),
-  },
-  [RAY_EVENT_TYPES.APPLICATION_LOG]: {
-    view: RayApplicationLog,
-    getProps: (payload: RayPayload) => ({
-      content: payload.content as RayContentApplicationLog,
-    }),
-  },
-  [RAY_EVENT_TYPES.VIEW]: {
-    view: RayView,
-    getProps: (payload: RayPayload) => ({
-      view: payload.content as RayContentView,
-    }),
-  },
-  [RAY_EVENT_TYPES.EVENT]: {
-    view: RayEvent,
-    getProps: (payload: RayPayload) => ({
-      content: payload.content as RayContentEvent,
-    }),
-  },
-  [RAY_EVENT_TYPES.JOB]: {
-    view: RayJob,
-    getProps: (payload: RayPayload) => ({
-      content: payload.content as RayContentJob,
-    }),
-  },
-  [RAY_EVENT_TYPES.LOCK]: {
-    view: RayLock,
-    getProps: (payload: RayPayload) => ({
-      name: (payload.content as RayContentLock).name,
-    }),
-  },
-  [RAY_EVENT_TYPES.MAILABLE]: {
-    view: RayMail,
-    getProps: (payload: RayPayload) => ({
-      content: payload.content as RayContentMail,
-    }),
-  },
-  [RAY_EVENT_TYPES.NOTIFY]: {
-    view: RayOrigin,
-    getProps: (payload: RayPayload) => ({ origin: payload.origin }),
-  },
-};
+const getComponent: (
+  type: RAY_EVENT_TYPES | string
+) => OneOfValues<typeof COMPONENT_TYPE_MAP> = (type) =>
+  COMPONENT_TYPE_MAP[type as RAY_EVENT_TYPES];
 </script>
 
 <template>
@@ -171,14 +37,13 @@ const COMPONENT_TYPE_MAP = {
         payload.origin ? payload.origin.line_number : ''
       }`"
     >
-      <Component
-        :is="COMPONENT_TYPE_MAP[payload.type].view"
-        v-if="payload.type && COMPONENT_TYPE_MAP[payload.type]"
-        v-bind="{ ...COMPONENT_TYPE_MAP[payload.type].getProps(payload) }"
-        :class="classes"
-      />
+      <div v-if="payload.type && getComponent(payload.type)">
+        <Component
+          :is="getComponent(payload.type).view"
+          v-bind="{ ...getComponent(payload.type).getProps(payload) }"
+          :class="classes"
+        />
+      </div>
     </template>
   </PreviewCard>
 </template>
-
-
diff --git a/src/entities/ray/ui/ray-exception/ray-exception.vue b/src/entities/ray/ui/ray-exception/ray-exception.vue
index 7af15f4e..1fceb65d 100644
--- a/src/entities/ray/ui/ray-exception/ray-exception.vue
+++ b/src/entities/ray/ui/ray-exception/ray-exception.vue
@@ -11,14 +11,15 @@ defineProps<Props>();
 
 <template>
   <div class="ray-exception">
-    <div class="ray-exception__texts">
-      <h3 class="ray-exception__texts-in">
-        <code class="ray-exception__texts-code">{{ exception.class }}</code>
+    <header class="ray-exception__header">
+      <h3 class="ray-exception__title">
+        {{ exception.class }}
       </h3>
-      <div class="ray-exception__text">
+
+      <div class="ray-exception__title-code">
         {{ exception.message }}
       </div>
-    </div>
+    </header>
 
     <div class="ray-exception__files">
       <RayFile
@@ -34,21 +35,37 @@ defineProps<Props>();
 <style lang="scss" scoped>
 @import "src/assets/mixins";
 .ray-exception {
-  @apply block;
+  @apply flex flex-col;
+}
+
+.ray-exception__header {
+  @apply dark:bg-gray-900 bg-gray-100 p-3 rounded-t-md border border-purple-300 dark:border-gray-400 border-b-0;
 }
 
-.ray-exception__texts {
-  @apply block;
+.ray-exception__title {
+  @apply mb-3 font-semibold text-lg;
 }
 
-.ray-exception__texts-code {
-  @apply block mb-2;
-  @apply text-xs sm:text-sm md:text-base font-semibold;
+.ray-exception__title-code {
+  @include code-example();
+  @apply text-sm break-words whitespace-pre-wrap rounded text-opacity-60;
 }
 
 .ray-exception__text {
   @include code-example();
-  @apply mb-2;
-  @apply text-xs break-words whitespace-pre-wrap overflow-auto text-opacity-60;
+  @apply mb-2 text-xs break-words whitespace-pre-wrap overflow-auto text-opacity-60;
+}
+
+.ray-exception__files {
+  @apply flex-col justify-center w-full border border-purple-300 dark:border-gray-400 border-t-0 rounded-b-md overflow-hidden;
+}
+
+.ray__body-text {
+  @include text-muted;
+  @apply font-bold uppercase text-sm mb-5;
+}
+
+.ray__body-table {
+  @apply mt-3;
 }
 </style>
diff --git a/src/entities/ray/ui/ray-trace/ray-trace.vue b/src/entities/ray/ui/ray-trace/ray-trace.vue
index 0cb96a7c..5677c110 100644
--- a/src/entities/ray/ui/ray-trace/ray-trace.vue
+++ b/src/entities/ray/ui/ray-trace/ray-trace.vue
@@ -11,16 +11,22 @@ defineProps<Props>();
 
 <template>
   <div class="ray-trace">
-    <RayFile
-      v-for="frame in frames"
-      :key="`${frame.file_name}-${frame.line_number}`"
-      :file="frame"
-    />
+    <div class="ray-trace__files">
+      <RayFile
+        v-for="frame in frames"
+        :key="`${frame.file_name}-${frame.line_number}`"
+        :file="frame"
+      />
+    </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
 .ray-trace {
-  display: block;
+  @apply flex flex-col;
+}
+
+.ray-trace__files {
+  @apply flex-col justify-center w-full border border-purple-300 dark:border-gray-400 rounded overflow-hidden;
 }
 </style>
diff --git a/src/entities/sentry/ui/sentry-exception/sentry-exception.vue b/src/entities/sentry/ui/sentry-exception/sentry-exception.vue
index 6bfaf955..7ce911f6 100644
--- a/src/entities/sentry/ui/sentry-exception/sentry-exception.vue
+++ b/src/entities/sentry/ui/sentry-exception/sentry-exception.vue
@@ -71,6 +71,6 @@ const exceptionFrames = computed(() => {
 }
 
 .sentry-exception__frames {
-  @apply border border-purple-200 dark:border-gray-600 flex-col justify-center w-full border border-purple-300 dark:border-gray-400 border-t-0 rounded-b-md overflow-hidden;
+  @apply flex-col justify-center w-full border border-purple-300 dark:border-gray-400 border-t-0 rounded-b-md overflow-hidden;
 }
 </style>
diff --git a/src/screens/ray/index.ts b/src/screens/ray/index.ts
new file mode 100644
index 00000000..ed584959
--- /dev/null
+++ b/src/screens/ray/index.ts
@@ -0,0 +1 @@
+export * from './ui'
diff --git a/src/screens/ray/ui/index.ts b/src/screens/ray/ui/index.ts
new file mode 100644
index 00000000..33e1479b
--- /dev/null
+++ b/src/screens/ray/ui/index.ts
@@ -0,0 +1 @@
+export * from './ray-page'
diff --git a/src/screens/ray/ui/ray-page/index.ts b/src/screens/ray/ui/ray-page/index.ts
new file mode 100644
index 00000000..31da5ef9
--- /dev/null
+++ b/src/screens/ray/ui/ray-page/index.ts
@@ -0,0 +1 @@
+export { default as RayPage } from './ray-page.vue';
diff --git a/src/screens/ray/ui/ray-page/ray-page.stories.ts b/src/screens/ray/ui/ray-page/ray-page.stories.ts
new file mode 100644
index 00000000..9cd30116
--- /dev/null
+++ b/src/screens/ray/ui/ray-page/ray-page.stories.ts
@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { useRay } from "~/src/entities/ray";
+import { rayCallerMock } from '~/src/entities/ray/mocks';
+import RayPage from './ray-page.vue';
+
+const { normalizeRayEvent } = useRay();
+
+export default {
+  title: "Screens/Ray/RayPage",
+  component: RayPage
+} as Meta<typeof RayPage>;
+
+
+export const Default: StoryObj<typeof RayPage> = {
+  args: {
+    event: normalizeRayEvent(rayCallerMock),
+  }
+}
diff --git a/src/screens/ray/ui/ray-page/ray-page.vue b/src/screens/ray/ui/ray-page/ray-page.vue
new file mode 100644
index 00000000..f02c0e47
--- /dev/null
+++ b/src/screens/ray/ui/ray-page/ray-page.vue
@@ -0,0 +1,140 @@
+<script lang="ts" setup>
+import moment from "moment/moment";
+import { computed } from "vue";
+import { useRay } from "~/src/entities/ray";
+import {
+  type EnhancedRayEvent,
+  RAY_EVENT_TYPES,
+} from "~/src/entities/ray/types";
+import type { OneOfValues } from "~/src/shared/types";
+import { TableBase, TableBaseRow } from "~/src/shared/ui";
+
+type Props = {
+  event: EnhancedRayEvent;
+};
+
+const { COMPONENT_TYPE_MAP } = useRay();
+
+const props = defineProps<Props>();
+
+const title = computed(() => {
+  const type = String(props.event.payload.payloads[0].type || "Unknown type");
+
+  return type[0].toUpperCase() + type.slice(1);
+});
+
+const date = computed(() =>
+  moment(props.event.date).format("DD.MM.YYYY HH:mm:ss")
+);
+
+const classes = computed(() =>
+  props.event?.meta
+    ? [`text-${props.event.meta?.size}`, `text-${props.event.meta?.color}-500`]
+    : []
+);
+
+const getComponent: (
+  type: RAY_EVENT_TYPES | string
+) => OneOfValues<typeof COMPONENT_TYPE_MAP> = (type) =>
+  COMPONENT_TYPE_MAP[type as RAY_EVENT_TYPES];
+</script>
+
+<template>
+  <div ref="main" class="ray">
+    <main class="ray__in">
+      <header class="ray__header">
+        <h2 class="ray__header-title">
+          {{ title }}
+        </h2>
+        <div class="ray__header-meta">
+          <span class="ray__header-date">{{ date }}</span>
+        </div>
+      </header>
+
+      <section class="ray__body">
+        <template
+          v-for="payload in event.payload.payloads"
+          :key="`${payload.type}-${
+            payload.origin ? payload.origin.line_number : ''
+          }`"
+        >
+          <div v-if="payload.type && getComponent(payload.type)">
+            <Component
+              :is="getComponent(payload.type).view"
+              v-bind="{ ...getComponent(payload.type).getProps(payload) }"
+              :class="classes"
+            />
+          </div>
+        </template>
+      </section>
+
+      <section class="ray__body">
+        <h3 class="ray__body-text">Origin</h3>
+        <TableBase class="ray__body-table">
+          <TableBaseRow
+            v-for="(value, name) in event.payload.payloads[0].origin"
+            :key="name"
+            :title="String(name)"
+          >
+            {{ value }}
+          </TableBaseRow>
+        </TableBase>
+      </section>
+
+      <section class="ray__body">
+        <h3 class="ray__body-text">Meta</h3>
+        <TableBase class="ray__body-table">
+          <TableBaseRow
+            v-for="(value, name) in event.payload.meta"
+            :key="name"
+            :title="String(name)"
+          >
+            {{ value }}
+          </TableBaseRow>
+        </TableBase>
+      </section>
+    </main>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import "src/assets/mixins";
+
+.ray {
+  @apply relative;
+}
+
+.ray__in {
+  @apply flex flex-col h-full flex-grow py-5 px-4 md:px-6 lg:px-8;
+}
+
+.ray__header {
+  @apply flex flex-col md:flex-row justify-between items-center;
+}
+
+.ray__header-meta {
+  @apply flex flex-col md:flex-row items-center gap-x-5;
+}
+
+.ray__header-title {
+  @apply text-sm sm:text-base md:text-lg lg:text-2xl;
+}
+
+.ray__header-date {
+  @include text-muted;
+  @apply text-sm font-semibold;
+}
+
+.ray__body {
+  @apply py-5;
+}
+
+.ray__body-text {
+  @include text-muted;
+  @apply font-bold uppercase text-sm mb-5;
+}
+
+.ray__body-table {
+  @apply mt-3;
+}
+</style>

From 49f029caebf96197fc87ff4732e9bf58f308c514 Mon Sep 17 00:00:00 2001
From: Kuchuk Andrey <kreezag@gmail.com>
Date: Thu, 6 Jun 2024 21:57:26 +0400
Subject: [PATCH 7/7] [#131] add var-dump and ray icons to sidebar

---
 .../ui/icon-svg/icon-svg-originals/ray.svg    | 10 +++
 .../icon-svg/icon-svg-originals/var_dump.svg  | 17 +++++
 src/shared/ui/icon-svg/icon-svg.vue           | 76 +++++++++++++++++++
 .../ui/layout-sidebar/layout-sidebar.vue      |  4 +-
 4 files changed, 105 insertions(+), 2 deletions(-)
 create mode 100644 src/shared/ui/icon-svg/icon-svg-originals/ray.svg
 create mode 100644 src/shared/ui/icon-svg/icon-svg-originals/var_dump.svg

diff --git a/src/shared/ui/icon-svg/icon-svg-originals/ray.svg b/src/shared/ui/icon-svg/icon-svg-originals/ray.svg
new file mode 100644
index 00000000..b68ee46c
--- /dev/null
+++ b/src/shared/ui/icon-svg/icon-svg-originals/ray.svg
@@ -0,0 +1,10 @@
+<svg width="162px" height="149px" viewBox="0 0 162 149" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g fill-rule="nonzero" stroke="currentColor" stroke-opacity="0.99" stroke-width="10">
+            <path d="M128.25,8.54545455 C142.198959,8.54545455 153.5,19.884546 153.5,33.8636364 L153.5,115.136364 C153.5,129.115454 142.198959,140.454545 128.25,140.454545 L33.75,140.454545 C19.8010408,140.454545 8.5,129.115454 8.5,115.136364 L8.5,33.8636364 C8.5,19.884546 19.8010408,8.54545455 33.75,8.54545455 L128.25,8.54545455 Z M33.75,5 C17.8755827,5 5,17.9189349 5,33.8636364 L5,115.136364 C5,131.081065 17.8755827,144 33.75,144 L128.25,144 C144.124417,144 157,131.081065 157,115.136364 L157,33.8636364 C157,26.2049896 153.968246,18.861044 148.573383,13.4480163 C143.181747,8.03822678 135.871433,5 128.25,5 L33.75,5 Z"></path>
+        </g>
+        <g transform="translate(56.000000, 30.000000)" fill="currentColor" fill-rule="nonzero">
+            <path d="M47.9265939,45.165 L30.254532,32.875 L39.1634847,7.22 C39.4385038,6.55 39.5926812,5.795 39.5926812,5 C39.5926812,2.24 37.7383856,0 35.4382257,0 C34.4006535,0.02 33.5339266,0.415 32.8463788,1.07 C32.7088693,1.2 32.6255301,1.28 32.5546919,1.37 L1.30251918,36.87 C0.34828617,37.955 -0.122579899,39.515 0.02743053,41.08 C0.177440959,42.645 0.939993973,44.035 2.0734061,44.83 L19.749635,57.13 L10.7365084,83.08 C9.97395536,85.26 10.5948319,87.78 12.2116109,89.12 C12.9283274,89.71 13.7617187,90 14.5784421,90 C15.6118473,90 16.6452525,89.535 17.4453081,88.63 L48.6974808,53.12 C49.6517138,52.035 50.1225799,50.475 49.9725695,48.91 C49.822559,47.345 49.060006,45.955 47.9265939,45.165 Z"></path>
+        </g>
+    </g>
+</svg>
diff --git a/src/shared/ui/icon-svg/icon-svg-originals/var_dump.svg b/src/shared/ui/icon-svg/icon-svg-originals/var_dump.svg
new file mode 100644
index 00000000..d34553ad
--- /dev/null
+++ b/src/shared/ui/icon-svg/icon-svg-originals/var_dump.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="162px" height="149px" viewBox="0 0 162 149" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
+    <title>Artboard</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Artboard" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="inspector" fill-rule="nonzero" stroke="#000000" stroke-opacity="0.99" stroke-width="10">
+            <path d="M128.25,8.54545455 C142.198959,8.54545455 153.5,19.884546 153.5,33.8636364 L153.5,115.136364 C153.5,129.115454 142.198959,140.454545 128.25,140.454545 L33.75,140.454545 C19.8010408,140.454545 8.5,129.115454 8.5,115.136364 L8.5,33.8636364 C8.5,19.884546 19.8010408,8.54545455 33.75,8.54545455 L128.25,8.54545455 Z M33.75,5 C17.8755827,5 5,17.9189349 5,33.8636364 L5,115.136364 C5,131.081065 17.8755827,144 33.75,144 L128.25,144 C144.124417,144 157,131.081065 157,115.136364 L157,33.8636364 C157,26.2049896 153.968246,18.861044 148.573383,13.4480163 C143.181747,8.03822678 135.871433,5 128.25,5 L33.75,5 Z" id="Shape"></path>
+        </g>
+        <g id="Group" transform="translate(37.000000, 42.000000)" fill="#000000">
+            <text id="dump" font-family="ArialRoundedMTBold, Arial Rounded MT Bold" font-size="38" font-weight="normal" letter-spacing="3">
+                <tspan x="0.562011719" y="36">VAR</tspan>
+            </text>
+            <path d="M3,61.5792683 C3,57.6317073 5.76666667,55 9.91666667,55 L79.0833333,55 C82.9033029,55 86,57.9456387 86,61.5792683 C86,65.2128978 82.9033029,68.1585366 79.0833333,68.1585366 L9.91666667,68.1585366 C6.09669715,68.1585366 3,65.2128978 3,61.5792683 Z" id="Path" fill-rule="nonzero"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/shared/ui/icon-svg/icon-svg.vue b/src/shared/ui/icon-svg/icon-svg.vue
index 45c41441..ea9f63d8 100644
--- a/src/shared/ui/icon-svg/icon-svg.vue
+++ b/src/shared/ui/icon-svg/icon-svg.vue
@@ -154,6 +154,82 @@ defineProps<Props>();
       />
     </svg>
 
+    <svg
+      v-else-if="name === 'ray'"
+      viewBox="0 0 162 149"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g
+          fill-rule="nonzero"
+          stroke="currentColor"
+          stroke-opacity="0.99"
+          stroke-width="10"
+        >
+          <path
+            d="M128.25,8.54545455 C142.198959,8.54545455 153.5,19.884546 153.5,33.8636364 L153.5,115.136364 C153.5,129.115454 142.198959,140.454545 128.25,140.454545 L33.75,140.454545 C19.8010408,140.454545 8.5,129.115454 8.5,115.136364 L8.5,33.8636364 C8.5,19.884546 19.8010408,8.54545455 33.75,8.54545455 L128.25,8.54545455 Z M33.75,5 C17.8755827,5 5,17.9189349 5,33.8636364 L5,115.136364 C5,131.081065 17.8755827,144 33.75,144 L128.25,144 C144.124417,144 157,131.081065 157,115.136364 L157,33.8636364 C157,26.2049896 153.968246,18.861044 148.573383,13.4480163 C143.181747,8.03822678 135.871433,5 128.25,5 L33.75,5 Z"
+          ></path>
+        </g>
+        <g
+          transform="translate(56.000000, 30.000000)"
+          fill="currentColor"
+          fill-rule="nonzero"
+        >
+          <path
+            d="M47.9265939,45.165 L30.254532,32.875 L39.1634847,7.22 C39.4385038,6.55 39.5926812,5.795 39.5926812,5 C39.5926812,2.24 37.7383856,0 35.4382257,0 C34.4006535,0.02 33.5339266,0.415 32.8463788,1.07 C32.7088693,1.2 32.6255301,1.28 32.5546919,1.37 L1.30251918,36.87 C0.34828617,37.955 -0.122579899,39.515 0.02743053,41.08 C0.177440959,42.645 0.939993973,44.035 2.0734061,44.83 L19.749635,57.13 L10.7365084,83.08 C9.97395536,85.26 10.5948319,87.78 12.2116109,89.12 C12.9283274,89.71 13.7617187,90 14.5784421,90 C15.6118473,90 16.6452525,89.535 17.4453081,88.63 L48.6974808,53.12 C49.6517138,52.035 50.1225799,50.475 49.9725695,48.91 C49.822559,47.345 49.060006,45.955 47.9265939,45.165 Z"
+          ></path>
+        </g>
+      </g>
+    </svg>
+
+    <svg
+      v-else-if="name === 'var-dump'"
+      viewBox="0 0 162 149"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g
+        id="Artboard"
+        stroke="none"
+        stroke-width="1"
+        fill="none"
+        fill-rule="evenodd"
+      >
+        <g
+          id="inspector"
+          fill-rule="nonzero"
+          stroke="currentColor"
+          stroke-opacity="0.99"
+          stroke-width="10"
+        >
+          <path
+            id="Shape"
+            d="M128.25,8.54545455 C142.198959,8.54545455 153.5,19.884546 153.5,33.8636364 L153.5,115.136364 C153.5,129.115454 142.198959,140.454545 128.25,140.454545 L33.75,140.454545 C19.8010408,140.454545 8.5,129.115454 8.5,115.136364 L8.5,33.8636364 C8.5,19.884546 19.8010408,8.54545455 33.75,8.54545455 L128.25,8.54545455 Z M33.75,5 C17.8755827,5 5,17.9189349 5,33.8636364 L5,115.136364 C5,131.081065 17.8755827,144 33.75,144 L128.25,144 C144.124417,144 157,131.081065 157,115.136364 L157,33.8636364 C157,26.2049896 153.968246,18.861044 148.573383,13.4480163 C143.181747,8.03822678 135.871433,5 128.25,5 L33.75,5 Z"
+          ></path>
+        </g>
+        <g
+          id="Group"
+          transform="translate(37.000000, 42.000000)"
+          fill="currentColor"
+        >
+          <text
+            id="dump"
+            font-family="ArialRoundedMTBold, Arial Rounded MT Bold"
+            font-size="38"
+            font-weight="normal"
+            letter-spacing="3"
+          >
+            <tspan x="0.562011719" y="36">VAR</tspan>
+          </text>
+          <path
+            id="Path"
+            d="M3,61.5792683 C3,57.6317073 5.76666667,55 9.91666667,55 L79.0833333,55 C82.9033029,55 86,57.9456387 86,61.5792683 C86,65.2128978 82.9033029,68.1585366 79.0833333,68.1585366 L9.91666667,68.1585366 C6.09669715,68.1585366 3,65.2128978 3,61.5792683 Z"
+            fill-rule="nonzero"
+          ></path>
+        </g>
+      </g>
+    </svg>
+
     <svg
       v-else-if="name === 'logo'"
       xmlns="http://www.w3.org/2000/svg"
diff --git a/src/widgets/ui/layout-sidebar/layout-sidebar.vue b/src/widgets/ui/layout-sidebar/layout-sidebar.vue
index 112a7329..5320fe55 100644
--- a/src/widgets/ui/layout-sidebar/layout-sidebar.vue
+++ b/src/widgets/ui/layout-sidebar/layout-sidebar.vue
@@ -125,7 +125,7 @@ const path = computed(() => useRoute().path);
         class="layout-sidebar__link"
         :class="{ 'router-link-active': path.includes('/var-dump') }"
       >
-        <IconSvg class="layout-sidebar__link-icon" name="inspector" />
+        <IconSvg class="layout-sidebar__link-icon" name="var-dump" />
       </NuxtLink>
 
       <NuxtLink
@@ -134,7 +134,7 @@ const path = computed(() => useRoute().path);
         class="layout-sidebar__link"
         :class="{ 'router-link-active': path.includes('/ray') }"
       >
-        <IconSvg class="layout-sidebar__link-icon" name="inspector" />
+        <IconSvg class="layout-sidebar__link-icon" name="ray" />
       </NuxtLink>
 
       <NuxtLink to="/settings" title="Settings" class="layout-sidebar__link">