feat: transform collaborative store into app store

src/main/webapp/src/components/FileMenu.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useConfigurationStore } from '@/stores/configurationStore.ts';
+import { useAppStore } from '@/stores/appStore.ts';
 import { useFileStore } from '@/stores/fileStore.ts';
 import { useHomeStore } from '@/stores/homeStore.ts';
 import { Tabs } from '@/types/enums/Tabs.ts';
@@ -11,8 +11,8 @@ import { useI18n } from 'vue-i18n';
 
 const isDev = import.meta.env.DEV;
 
-const configurationStore = useConfigurationStore();
-const { isApp } = storeToRefs(configurationStore);
+const appStore = useAppStore();
+const { isApp } = storeToRefs(appStore);
 
 const fileStore = useFileStore();
 const { loadFile } = fileStore;

src/main/webapp/src/components/dialogs/ShareInRoomDialog.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import { useCollaborativeStore } from '@/stores/collaborativeStore.ts';
+import { useAppStore } from '@/stores/appStore.ts';
 import { useFileStore } from '@/stores/fileStore.ts';
 import { useHomeStore } from '@/stores/homeStore.ts';
+import type { AppSlug } from '@/types/enums/AppSlug.ts';
 import { charOTP } from '@/utils/stringUtils.ts';
 import debounce from 'lodash.debounce';
 import { storeToRefs } from 'pinia';
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
 
-const collaborativeStore = useCollaborativeStore();
-const { initFileId } = storeToRefs(collaborativeStore);
+const appStore = useAppStore();
+const { initRoom } = appStore;
 
 const fileStore = useFileStore();
 const { file } = storeToRefs(fileStore);
@@ -19,7 +19,6 @@ const homeStore = useHomeStore();
 const { isShareInRoom } = storeToRefs(homeStore);
 
 const { t } = useI18n();
-const router = useRouter();
 
 const modelValue = computed<boolean>({
   get() {
@@ -32,9 +31,8 @@ const joinCode = ref<string>(charOTP());
 
 const onCreateAndJoin = (): void => {
   if (file.value == undefined) return;
-  initFileId.value = file.value.id;
-  router.push({ name: `collaborative-${file.value.associatedApp.slug}`, params: { roomId: joinCode.value } });
   onClose();
+  initRoom(joinCode.value, file.value.associatedApp.slug as AppSlug, file.value.id, false);
 };
 
 const onClose = (): void => {

src/main/webapp/src/stores/appStore.ts

@@ -0,0 +1,45 @@
+import type { AppSlug } from '@/types/enums/AppSlug.ts';
+import { useSessionStorage } from '@vueuse/core';
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+export const useAppStore = defineStore('app', () => {
+  const router = useRouter();
+
+  /**
+   * App context state
+   */
+  const isApp = ref<boolean>(false);
+
+  /* -- Rooms -- */
+
+  const ownedRooms = useSessionStorage<
+    Array<{ roomId: string; appType: AppSlug; fileId: number | undefined; saveOnFile: boolean }>
+  >(`${__APP_SLUG__}.owned-rooms`, []);
+
+  /**
+   * Id of file to load in the room
+   */
+  const initFileId = ref<number | undefined>();
+
+  const initRoom = (roomId: string, appType: AppSlug, fileId: number | undefined, saveOnFile: boolean): void => {
+    initFileId.value = fileId;
+    ownedRooms.value.push({ roomId, appType, fileId, saveOnFile });
+    router.push({ name: `collaborative-${appType}`, params: { roomId } });
+  };
+
+  /* -- Store actions -- */
+
+  const reset = (): void => {
+    initFileId.value = undefined;
+  };
+
+  return {
+    isApp,
+    ownedRooms,
+    initFileId,
+    initRoom,
+    reset,
+  };
+});

src/main/webapp/src/stores/configurationStore.ts

@@ -40,11 +40,6 @@ export const useConfigurationStore = defineStore('configuration', () => {
 
   const lastNavigation = ref<string | undefined>();
 
-  /**
-   * App context state
-   */
-  const isApp = ref<boolean>(false);
-
   /**
    * Dialog settings state
    */
@@ -58,7 +53,6 @@ export const useConfigurationStore = defineStore('configuration', () => {
     user,
     isSoffitOk,
     lastNavigation,
-    isApp,
     isSettings,
   };
 });

src/main/webapp/src/stores/homeStore.ts

@@ -1,5 +1,6 @@
 import { useFileStore } from '@/stores/fileStore.ts';
 import { Tabs } from '@/types/enums/Tabs.ts';
+import { useSessionStorage } from '@vueuse/core';
 import { defineStore, storeToRefs } from 'pinia';
 import { computed, ref } from 'vue';
 
@@ -55,7 +56,7 @@ export const useHomeStore = defineStore('home', () => {
   /**
    * Files diplay state
    */
-  const isGrid = ref<boolean>(false);
+  const isGrid = useSessionStorage<boolean>(`${__APP_SLUG__}.is-grid`, false);
 
   /* -- Store actions -- */
 

src/main/webapp/src/views/AppView.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import FileMenu from '@/components/FileMenu.vue';
 import InformationDrawer from '@/components/drawers/information/InformationDrawer.vue';
-import { useConfigurationStore } from '@/stores/configurationStore.ts';
+import { useAppStore } from '@/stores/appStore.ts';
 import { useFileStore } from '@/stores/fileStore.ts';
 import { useHomeStore } from '@/stores/homeStore.ts';
 import { Navigation } from '@/types/enums/Navigation.ts';
@@ -13,8 +13,8 @@ import { useRoute, useRouter } from 'vue-router';
 
 const isDev = import.meta.env.DEV;
 
-const configurationStore = useConfigurationStore();
-const { isApp } = storeToRefs(configurationStore);
+const appStore = useAppStore();
+const { isApp } = storeToRefs(appStore);
 
 const fileStore = useFileStore();
 const { loadFile } = fileStore;

src/main/webapp/src/views/app/tldraw/CollaborativeTldrawView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useCollaborativeStore } from '@/stores/collaborativeStore.ts';
+import { useAppStore } from '@/stores/appStore.ts';
 import { useConfigurationStore } from '@/stores/configurationStore.ts';
 import { AppSlug } from '@/types/enums/AppSlug.ts';
 import { headObserver, styleObserver } from '@/utils/tldrawUtils.ts';
@@ -13,8 +13,9 @@ const { VITE_API_URI } = import.meta.env;
 const configurationStore = useConfigurationStore();
 const { configuration } = configurationStore;
 
-const collaborativeStore = useCollaborativeStore();
-const { initFileId } = storeToRefs(collaborativeStore);
+const appStore = useAppStore();
+const { reset: resetApp } = appStore;
+const { initFileId } = storeToRefs(appStore);
 
 const route = useRoute();
 const router = useRouter();
@@ -28,7 +29,7 @@ onMounted(() => {
 });
 
 onUnmounted(() => {
-  initFileId.value = undefined;
+  resetApp();
   styleObserver.disconnect();
   headObserver.disconnect();
   router.go(0); // force page reload to disconnect websocket