Merge pull request #180 from buggregator/issue/#177-fix-page-titles

Issue/#177 fix page titles

package.json

@@ -78,6 +78,7 @@
     "@storybook/vue3": "^7.6.5",
     "@types/lodash": "^4.14.200",
     "@vue/shared": "^3.2.45",
+    "@vueuse/core": "^10.11.0",
     "centrifuge": "^3.1.0",
     "cytoscape": "^3.26.0",
     "cytoscape-dagre": "^2.5.0",

pages/http-dump/[id].vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
+import { useTitle } from "@vueuse/core";
 import { computed, onMounted, ref } from "vue";
 import { HttpDumpPage } from "~/src/screens/http-dump";
-import { useFetch, useRoute, useRouter, useHead, useNuxtApp } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
+import { useFetch, useRoute, useRouter, useNuxtApp } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
 import { PageEventHeader } from "~/src/widgets/ui";
 import { useHttpDump } from "~/src/entities/http-dump";
 import type { HttpDumpServer } from "~/src/entities/http-dump/types";
@@ -14,9 +15,7 @@ const { params } = useRoute();
 const router = useRouter();
 const eventId = params.id as EventId;
 
-useHead({
-  title: `Http dumps > ${eventId} | Buggregator`,
-});
+useTitle(`Http dumps > ${eventId} | Buggregator`);
 
 const { events } = useEvents();
 const { $authToken } = useNuxtApp();

pages/inspector/[id].vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
+import { useTitle } from "@vueuse/core";
 import { onMounted, computed, ref } from "vue";
 import { InspectorPage } from "~/src/screens/inspector";
-import { useFetch, useHead, useRoute, useRouter, useNuxtApp } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
+import { useFetch, useRoute, useRouter, useNuxtApp } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
 import { PageEventHeader } from "~/src/widgets/ui";
 import { useInspector } from "~/src/entities/inspector";
 import type { Inspector } from "~/src/entities/inspector/types";
@@ -15,9 +16,7 @@ const { $authToken } = useNuxtApp();
 const router = useRouter();
 const eventId = params.id as EventId;
 
-useHead({
-  title: `Inspector > ${eventId} | Buggregator`,
-});
+useTitle(`Inspector > ${eventId} | Buggregator`);
 
 const { events } = useEvents();
 

pages/monolog/[id].vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
+import { useTitle } from "@vueuse/core";
 import { computed, onMounted, ref } from "vue";
 import { MonologPage } from "~/src/screens/monolog";
-import { useFetch, useHead, useNuxtApp, useRoute, useRouter } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
+import { useFetch, useNuxtApp, useRoute, useRouter } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
 import { PageEventHeader } from "~/src/widgets/ui";
 import { useMonolog } from "~/src/entities/monolog";
 import type { Monolog } from "~/src/entities/monolog/types";
@@ -15,9 +16,7 @@ const { $authToken } = useNuxtApp();
 const router = useRouter();
 const eventId = params.id as EventId;
 
-useHead({
-  title: `Monolog > ${eventId} | Buggregator`,
-});
+useTitle(`Monolog > ${eventId} | Buggregator`);
 
 const { events } = useEvents();
 

pages/profiler/[id].vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
+import { useTitle } from "@vueuse/core";
 import { computed, onMounted, ref } from "vue";
 import { ProfilerPage } from "~/src/screens/profiler";
-import { useFetch, useHead, useNuxtApp, useRoute, useRouter } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
+import { useFetch, useNuxtApp, useRoute, useRouter } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
 import { PageEventHeader } from "~/src/widgets/ui";
 import { useProfiler } from "~/src/entities/profiler";
 import type { Profiler } from "~/src/entities/profiler/types";
@@ -15,9 +16,7 @@ const { $authToken } = useNuxtApp();
 const router = useRouter();
 const eventId = params.id as EventId;
 
-useHead({
-  title: `Profiler > ${eventId} | Buggregator`,
-});
+useTitle(`Profiler > ${eventId} | Buggregator`);
 
 const { events } = useEvents();
 

pages/ray/[id].vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
+import { useTitle } from "@vueuse/core";
 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 { useFetch, useNuxtApp, useRoute, useRouter } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
 import { PageEventHeader } from "~/src/widgets/ui";
 import { useRay } from "~/src/entities/ray";
 import type { RayDump } from "~/src/entities/ray/types";
@@ -15,9 +16,7 @@ const { $authToken } = useNuxtApp();
 const router = useRouter();
 const eventId = params.id as EventId;
 
-useHead({
-  title: `Ray Dump > ${eventId} | Buggregator`,
-});
+useTitle(`Ray Dumo > ${eventId} | Buggregator`);
 
 const { events } = useEvents();
 

pages/sentry/[id].vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
+import { useTitle } from "@vueuse/core";
 import { computed, onMounted, ref } from "vue";
 import { SentryPage } from "~/src/screens/sentry";
-import { useRoute, useRouter, useFetch, useHead, useNuxtApp } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
+import { useRoute, useRouter, useFetch, useNuxtApp } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
 import { PageEventHeader } from "~/src/widgets/ui";
 import { useSentry } from "~/src/entities/sentry";
 import type { Sentry } from "~/src/entities/sentry/types";
@@ -14,9 +15,7 @@ const { params } = useRoute();
 const router = useRouter();
 const eventId = params.id as EventId;
 
-useHead({
-  title: `Sentry > ${eventId} | Buggregator`,
-});
+useTitle(`Sentry > ${eventId} | Buggregator`);
 
 const { events } = useEvents();
 const { $authToken } = useNuxtApp();

pages/settings.vue

@@ -1,8 +1,7 @@
 <script lang="ts" setup>
+import { useTitle } from "@vueuse/core";
 import { storeToRefs } from "pinia";
 import { computed } from "vue";
-// eslint-disable-next-line @conarti/feature-sliced/layers-slices
-import { useHead } from "#app";
 import { PageHeader } from "~/src/widgets/ui";
 import { useSettingsStore, THEME_MODES } from "~/src/shared/stores/settings";
 import { BadgeNumber, IconSvg } from "~/src/shared/ui";
@@ -13,9 +12,7 @@ const { changeTheme, changeNavbar, changeEventCountsVisibility } =
 const { themeType, isFixedHeader, isVisibleEventCounts } =
   storeToRefs(settingsStore);
 
-useHead({
-  title: "Settings | Buggregator",
-});
+useTitle("Settings | Buggregator");
 
 const isDarkMode = computed(() => themeType.value === THEME_MODES.DARK);
 </script>

pages/smtp/[id].vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
+import { useTitle } from "@vueuse/core";
 import { computed, onMounted, ref } from "vue";
 import { SmtpPage } from "~/src/screens/smtp";
-import { useRoute, useRouter, useFetch, useHead, useNuxtApp } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
+import { useRoute, useRouter, useFetch, useNuxtApp } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
 import { PageEventHeader } from "~/src/widgets/ui";
 import { useSmtp } from "~/src/entities/smtp";
 import type { SMTP } from "~/src/entities/smtp/types";
@@ -16,9 +17,7 @@ const { $authToken } = useNuxtApp();
 const router = useRouter();
 const eventId = params.id as EventId;
 
-useHead({
-  title: `SMTP > ${eventId} | Buggregator`,
-});
+useTitle(`SMTP > ${eventId} | Buggregator`);
 
 const { events } = useEvents();
 const { getAttachments } = useSmtp();

pages/var-dump/[id].vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
+import { useTitle } from "@vueuse/core";
 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 { useFetch, useNuxtApp, useRoute, useRouter } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
 import { PageEventHeader } from "~/src/widgets/ui";
 import { useVarDump } from "~/src/entities/var-dump";
 import type { VarDump } from "~/src/entities/var-dump/types";
@@ -15,9 +16,7 @@ const { $authToken } = useNuxtApp();
 const router = useRouter();
 const eventId = params.id as EventId;
 
-useHead({
-  title: `Var Dump > ${eventId} | Buggregator`,
-});
+useTitle(`Var Dump > ${eventId} | Buggregator`);
 
 const { events } = useEvents();
 

src/widgets/ui/page-layout/page-layout.vue

@@ -1,8 +1,7 @@
 <script lang="ts" setup>
+import { useTitle } from "@vueuse/core";
 import { storeToRefs } from "pinia";
-import { computed } from "vue";
-// eslint-disable-next-line @conarti/feature-sliced/layers-slices
-import { useHead } from "#app";
+import { computed, watchEffect } from "vue";
 import { PAGE_TYPES } from "~/src/shared/constants";
 import { useEvents } from "~/src/shared/lib/use-events";
 import { useSettingsStore } from "~/src/shared/stores";
@@ -36,10 +35,6 @@ const allEvents = computed(() => {
   return events.items.value.filter(({ type }) => type === props.type);
 });
 
-useHead({
-  title: `${props.title || "Events"}: ${allEvents.value.length} | Buggregator`,
-});
-
 const visibleEvents = computed(() => {
   if (!isEventsPaused.value) {
     return allEvents.value;
@@ -71,7 +66,14 @@ const toggleUpdate = () => {
   }
 };
 
+
 const badgeNumber = computed(() => getItemsCount.value(props.type));
+
+watchEffect(() => {
+  useTitle(
+    `${props.title || "Events"}: ${allEvents.value.length} | Buggregator`
+  );
+});
 </script>
 
 <template>

yarn.lock

@@ -4819,6 +4819,16 @@
     "@vueuse/shared" "10.9.0"
     vue-demi ">=0.14.7"
 
+"@vueuse/core@^10.11.0":
+  version "10.11.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-10.11.0.tgz#b042585a8bf98bb29c177b33999bd0e3fcd9e65d"
+  integrity sha512-x3sD4Mkm7PJ+pcq3HX8PLPBadXCAlSDR/waK87dz0gQE+qJnaaFhc/dZVfJz+IUYzTMVGum2QlR7ImiJQN4s6g==
+  dependencies:
+    "@types/web-bluetooth" "^0.0.20"
+    "@vueuse/metadata" "10.11.0"
+    "@vueuse/shared" "10.11.0"
+    vue-demi ">=0.14.8"
+
 "@vueuse/integrations@^10.9.0":
   version "10.9.0"
   resolved "https://registry.yarnpkg.com/@vueuse/integrations/-/integrations-10.9.0.tgz#2b1a9556215ad3c1f96d39cbfbef102cf6e0ec05"
@@ -4828,11 +4838,23 @@
     "@vueuse/shared" "10.9.0"
     vue-demi ">=0.14.7"
 
+"@vueuse/metadata@10.11.0":
+  version "10.11.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-10.11.0.tgz#27be47cf115ee98e947a1bfcd0b1b5b35d785fb6"
+  integrity sha512-kQX7l6l8dVWNqlqyN3ePW3KmjCQO3ZMgXuBMddIu83CmucrsBfXlH+JoviYyRBws/yLTQO8g3Pbw+bdIoVm4oQ==
+
 "@vueuse/metadata@10.9.0":
   version "10.9.0"
   resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-10.9.0.tgz#769a1a9db65daac15cf98084cbf7819ed3758620"
   integrity sha512-iddNbg3yZM0X7qFY2sAotomgdHK7YJ6sKUvQqbvwnf7TmaVPxS4EJydcNsVejNdS8iWCtDk+fYXr7E32nyTnGA==
 
+"@vueuse/shared@10.11.0":
+  version "10.11.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-10.11.0.tgz#be09262b2c5857069ed3dadd1680f22c4cb6f984"
+  integrity sha512-fyNoIXEq3PfX1L3NkNhtVQUSRtqYwJtJg+Bp9rIzculIZWHTkKSysujrOk2J+NrRulLTQH9+3gGSfYLWSEWU1A==
+  dependencies:
+    vue-demi ">=0.14.8"
+
 "@vueuse/shared@10.9.0":
   version "10.9.0"
   resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-10.9.0.tgz#13af2a348de15d07b7be2fd0c7fc9853a69d8fe0"
@@ -13668,6 +13690,11 @@ vue-demi@>=0.14.5, vue-demi@>=0.14.7:
   resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.7.tgz#8317536b3ef74c5b09f268f7782e70194567d8f2"
   integrity sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==
 
+vue-demi@>=0.14.8:
+  version "0.14.8"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.8.tgz#00335e9317b45e4a68d3528aaf58e0cec3d5640a"
+  integrity sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==
+
 vue-devtools-stub@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/vue-devtools-stub/-/vue-devtools-stub-0.1.0.tgz#a65b9485edecd4273cedcb8102c739b83add2c81"