#156 add store setting to show/hide events counts

pages/settings.vue

@@ -5,11 +5,13 @@ import { computed } from "vue";
 import { useHead } from "#app";
 import { PageHeader } from "~/src/widgets/ui";
 import { useSettingsStore, THEME_MODES } from "~/src/shared/stores/settings";
-import { IconSvg } from "~/src/shared/ui";
+import { BadgeNumber, IconSvg } from "~/src/shared/ui";
 
 const settingsStore = useSettingsStore();
-const { changeTheme, changeNavbar } = settingsStore;
-const { themeType, isFixedHeader } = storeToRefs(settingsStore);
+const { changeTheme, changeNavbar, changeEventCountsVisibility } =
+  settingsStore;
+const { themeType, isFixedHeader, isVisibleEventCounts } =
+  storeToRefs(settingsStore);
 
 useHead({
   title: "Settings | Buggregator",
@@ -77,6 +79,42 @@ const isDarkMode = computed(() => themeType.value === THEME_MODES.DARK);
             :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>
+
+          <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>
+        </div>
       </section>
     </div>
   </main>
@@ -98,11 +136,11 @@ const isDarkMode = computed(() => themeType.value === THEME_MODES.DARK);
 }
 
 .settings-page__content {
-  @apply p-4 grid grid-cols-2 gap-4 mr-auto;
+  @apply p-4 grid grid-cols-2 gap-4 mr-auto min-w-[50%];
 }
 
 .settings-page__title {
-  @apply text-xl font-bold flex items-center;
+  @apply text-xl font-bold flex items-center flex-shrink-0;
 }
 
 .settings-page__control {
@@ -113,6 +151,12 @@ const isDarkMode = computed(() => themeType.value === THEME_MODES.DARK);
   @apply opacity-10 w-8;
 }
 
+.settings-page__control-icon-badge {
+  :deep(.badge-number__badge) {
+    @apply scale-150;
+  }
+}
+
 .settings-page__control-icon--active {
   @apply opacity-100;
 }

src/shared/stores/settings.ts

@@ -1,5 +1,5 @@
 import { defineStore } from "pinia";
-import { LOCAL_STORAGE_KEYS } from "../types";
+import {type EventId, LOCAL_STORAGE_KEYS} from "../types";
 
 export const THEME_MODES = {
   LIGHT: "light",
@@ -26,30 +26,33 @@ const checkThemeActive = () => {
 };
 
 const checkHeaderFixed = () => {
-  if (process.client) {
-    const storedValue: string = window?.localStorage.getItem(LOCAL_STORAGE_KEYS.NAVBAR) || "true";
-
+  if (!process.client) {
+    return  false;
+  }
 
-    const isFixed: boolean = storedValue === "true"
+  const storedValue: string = window?.localStorage.getItem(LOCAL_STORAGE_KEYS.NAVBAR) || "true";
 
-    if (isFixed) {
-      document?.documentElement?.classList?.add("navbar-fixed");
-    } else {
-      document?.documentElement?.classList?.remove("navbar-fixed");
-    }
+  const isFixed: boolean = storedValue === "true"
 
-    return isFixed;
+  if (isFixed) {
+    document?.documentElement?.classList?.add("navbar-fixed");
+  } else {
+    document?.documentElement?.classList?.remove("navbar-fixed");
   }
 
-  return {
-    themeType: false,
-  };
+  return isFixed;
 }
+const checkIfEventsCountVisible = (): boolean => {
+  const storageValue = localStorage?.getItem(LOCAL_STORAGE_KEYS.EVENT_COUNTS) || "true";
+
+  return storageValue === "true";
+};
 
 export const useSettingsStore = defineStore("settingsStore", {
   state: () => ({
     themeType: checkThemeActive(),
     isFixedHeader: checkHeaderFixed(),
+    isVisibleEventCounts: checkIfEventsCountVisible(),
   }),
   actions: {
     changeTheme() {
@@ -75,6 +78,11 @@ export const useSettingsStore = defineStore("settingsStore", {
       } else {
         document?.documentElement?.classList?.remove("navbar-fixed");
       }
+    },
+    changeEventCountsVisibility() {
+      this.isVisibleEventCounts = !this.isVisibleEventCounts;
+
+      localStorage?.setItem(LOCAL_STORAGE_KEYS.EVENT_COUNTS, String(this.isVisibleEventCounts));
     }
   },
 });

src/shared/types/local-storage.ts

@@ -4,4 +4,5 @@ export enum LOCAL_STORAGE_KEYS {
   LOCKED_EVENTS = "locked_events",
   THEME = "theme",
   NAVBAR = "navbar",
+  EVENT_COUNTS = "event_counts",
 }

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

@@ -3,6 +3,7 @@ import { storeToRefs } from "pinia";
 import { computed, ref } from "vue";
 import { useNuxtApp, useRoute, useRouter } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
 import { useEvents } from "~/src/shared/lib/use-events";
+import { useSettingsStore } from "~/src/shared/stores";
 import { useConnectionStore } from "~/src/shared/stores/connections";
 import { useProfileStore } from "~/src/shared/stores/profile";
 import { type Profile } from "~/src/shared/types";
@@ -19,6 +20,7 @@ const props = defineProps<Props>();
 const app = useNuxtApp();
 
 const { isConnectedWS } = storeToRefs(useConnectionStore());
+const { isVisibleEventCounts } = storeToRefs(useSettingsStore());
 
 const profileStore = useProfileStore();
 
@@ -91,6 +93,7 @@ const isAuthEnabled = computed(() => app?.$appSettings?.auth?.enabled);
           <BadgeNumber
             :number="getItemsCount(EVENTS_LINKS_MAP[type].eventType)"
             class="layout-sidebar__link-badge"
+            :is-visible="isVisibleEventCounts"
           >
             <IconSvg
               class="layout-sidebar__link-icon"

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

@@ -1,9 +1,11 @@
 <script lang="ts" setup>
+import { storeToRefs } from "pinia";
 import { computed } from "vue";
 // eslint-disable-next-line @conarti/feature-sliced/layers-slices
 import { useHead } from "#app";
 import { PAGE_TYPES } from "~/src/shared/constants";
 import { useEvents } from "~/src/shared/lib/use-events";
+import { useSettingsStore } from "~/src/shared/stores";
 import type { TEventsGroup } from "~/src/shared/stores/cached-ids";
 import { type EventType } from "~/src/shared/types";
 import { BadgeNumber, PauseButton } from "~/src/shared/ui";
@@ -21,6 +23,7 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const { events, cachedEvents, getItemsCount } = useEvents();
+const { isVisibleEventCounts } = storeToRefs(useSettingsStore());
 
 const isEventsPaused = computed(
   () => cachedEvents.idsByType.value[props.type]?.length > 0
@@ -89,7 +92,7 @@ const badgeNumber = computed(() => getItemsCount.value(props.type));
           @toggle-update="toggleUpdate"
         />
 
-        <BadgeNumber :number="badgeNumber">
+        <BadgeNumber :number="badgeNumber" :is-visible="isVisibleEventCounts">
           <button class="page-layout__clear-button" @click="clearEvents">
             Clear events
           </button>