refactor: move the layout store from Vuex to Pinia (CM-1548)

frontend/cycles-allowlist.json

@@ -3,7 +3,6 @@
   "modules/index.ts > modules/integration/integration-module.js > modules/integration/integration-store.js > modules/integration/helpers/integration-progress-notification.ts > modules/integration/components/integration-progress-wrapper.vue > modules/integration/integration-service.js > router/index.js",
   "modules/index.ts > modules/integration/integration-module.js > modules/integration/integration-store.js > modules/integration/integration-service.js > router/index.js",
   "modules/index.ts > modules/integration/integration-module.js > modules/integration/integration-store.js > router/index.js",
-  "modules/index.ts > modules/layout/layout-module.js > modules/layout/layout-store.js > router/index.js",
   "modules/index.ts > modules/member/member-module.js > modules/member/store/index.js > modules/member/store/actions.js > router/index.js",
   "modules/index.ts > modules/member/member-module.js > modules/member/store/index.js > modules/member/store/actions.js > shared/store/actions.js > router/index.js",
   "modules/index.ts > modules/settings/settings-module.js > modules/settings/settings-store.js > router/index.js",

frontend/src/app.vue

@@ -21,7 +21,6 @@
 </template>
 
 <script>
-import { mapActions } from 'vuex';
 import AppResizePage from '@/modules/layout/pages/resize-page.vue';
 import { storeToRefs } from 'pinia';
 import { useAuthStore } from '@/modules/auth/store/auth.store';
@@ -66,8 +65,6 @@ export default {
   },
 
   async created() {
-    window.addEventListener('resize', this.handleResize);
-    this.handleResize();
     const queryParameters = new URLSearchParams(window.location.search);
     if (queryParameters.get('state') === 'noconnect' && window.location.pathname.includes('/integration')) {
       return;
@@ -80,20 +77,6 @@ export default {
 
   unmounted() {
     this.detachListeners();
-    window.removeEventListener('resize', this.handleResize);
-  },
-
-  methods: {
-    ...mapActions({
-      resize: 'layout/resize',
-    }),
-
-    handleResize() {
-      this.resize({
-        width: window.innerWidth,
-        height: window.innerHeight,
-      });
-    },
   },
 };
 </script>

frontend/src/modules/layout/components/menu/menu.vue

@@ -87,8 +87,7 @@ import { useActivityTypeStore } from '@/modules/activity/store/type';
 import { useLfSegmentsStore } from '@/modules/lf/segments/store';
 import { storeToRefs } from 'pinia';
 import AppLfMenuProjectGroupSelection from '@/modules/lf/layout/components/lf-menu-project-group-selection.vue';
-import { mapGetters } from '@/shared/vuex/vuex.helpers';
-import { useStore } from 'vuex';
+import { useLayoutStore } from '@/modules/layout/pinia/layout.store';
 import { useActivityStore } from '@/modules/activity/store/pinia';
 import { useMemberStore } from '@/modules/member/store/pinia';
 import allMembers from '@/modules/member/config/saved-views/views/all-members';
@@ -99,9 +98,9 @@ import { LfPermission } from '@/shared/modules/permissions/types/Permissions';
 import LfMenuLink from '@/modules/layout/components/menu/menu-link.vue';
 import LfIcon from '@/ui-kit/icon/Icon.vue';
 
-const store = useStore();
-
-const { menuCollapsed: isCollapsed } = mapGetters('layout');
+const layoutStore = useLayoutStore();
+const { menuCollapsed: isCollapsed } = storeToRefs(layoutStore);
+const { toggleMenu } = layoutStore;
 
 const { fetchActivityTypes } = useActivityTypeStore();
 const { fetchActivityChannels } = useActivityStore();
@@ -136,10 +135,6 @@ watch(
   { immediate: true, deep: true },
 );
 
-function toggleMenu() {
-  store.dispatch('layout/toggleMenu');
-}
-
 </script>
 
 <script>

frontend/src/modules/layout/layout-module.js

@@ -1,13 +1,10 @@
 import Layout from '@/modules/layout/components/layout.vue';
-import store from '@/modules/layout/layout-store';
 import routes from '@/modules/layout/layout-routes';
 
 export default {
   components: {
     'app-layout': Layout,
   },
 
-  store,
-
   routes,
 };

frontend/src/modules/layout/pinia/layout.store.ts

@@ -0,0 +1,14 @@
+// Copyright (c) 2026 The Linux Foundation and each contributor.
+// SPDX-License-Identifier: MIT
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+export const useLayoutStore = defineStore('layout', () => {
+  const menuCollapsed = ref(false);
+
+  function toggleMenu() {
+    menuCollapsed.value = !menuCollapsed.value;
+  }
+
+  return { menuCollapsed, toggleMenu };
+});