Fix asset state when changing users

client/src/assets/index.ts

@@ -1,6 +1,8 @@
 import { useToast } from "vue-toastification";
 
 import type { ApiAsset, ApiAssetUpload } from "../apiTypes";
+import { registerSystem, type System } from "../core/systems";
+import type { SystemClearReason } from "../core/systems/models";
 import { callbackProvider, uuidv4 } from "../core/utils";
 import { router } from "../router";
 
@@ -15,12 +17,21 @@ const toast = useToast();
 
 const { raw, mutableReactive: $ } = assetState;
 
-class AssetSystem {
+class AssetSystem implements System {
     rootCallback = callbackProvider();
 
-    clear(): void {
+    clearLocal(): void {
         $.folders = [];
         $.files = [];
+        $.loadingFolder = false;
+    }
+
+    clear(reason: SystemClearReason): void {
+        if (reason === "logging-out") {
+            this.clearLocal();
+            $.idMap.clear();
+            $.folderPath = [];
+        }
     }
 
     clearFolderPath(): void {
@@ -82,7 +93,7 @@ class AssetSystem {
         if (folder === undefined) return;
 
         const data = typeof folder === "string" ? await getFolderByPath(folder) : await getFolder(folder);
-        this.clear();
+        this.clearLocal();
         this.setFolderData(data.folder.id, data.folder);
         if (data.path) assetSystem.setPath(data.path);
         assetState.mutableReactive.sharedParent = data.sharedParent;
@@ -270,3 +281,4 @@ class AssetSystem {
 export const assetSystem = new AssetSystem();
 // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
 (window as any).assetSystem = assetSystem;
+registerSystem("asset", assetSystem, false, assetState);

client/src/assets/ui/AssetListCore.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, nextTick, onMounted, ref } from "vue";
+import { computed, nextTick, ref } from "vue";
 import type { DeepReadonly } from "vue";
 
 import { assetSystem } from "..";
@@ -9,7 +9,6 @@ import { baseAdjust } from "../../core/http";
 import { ctrlOrCmdPressed } from "../../core/utils";
 import { coreStore } from "../../store/core";
 import type { AssetId } from "../models";
-import { socket } from "../socket";
 import { assetState } from "../state";
 import { getImageSrcFromAssetId } from "../utils";
 
@@ -52,19 +51,6 @@ const files = computed(() => {
     return assetState.reactive.files.map((f) => assetState.reactive.idMap.get(f)!);
 });
 
-async function load(): Promise<void> {
-    await assetSystem.loadFolder(assetState.currentFolder.value);
-}
-
-onMounted(async () => {
-    if (socket.connected) {
-        await load();
-    } else {
-        socket.connect();
-        socket.once("connect", load);
-    }
-});
-
 function dragStart(event: DragEvent, file: AssetId, assetHash: string | null): void {
     // emit("onDragStart", event);
     drag.startDrag(event, file, assetHash);

client/src/auth/logout.ts

@@ -1,6 +1,8 @@
 import { defineComponent } from "vue";
 
+import { socket } from "../assets/socket";
 import { http } from "../core/http";
+import { clearSystems } from "../core/systems";
 import { coreStore } from "../store/core";
 
 export const Logout = defineComponent({
@@ -10,6 +12,8 @@ export const Logout = defineComponent({
         await http.postJson("/api/logout");
         coreStore.setAuthenticated(false);
         coreStore.setUsername("");
+        clearSystems("logging-out");
+        socket.disconnect();
         next({ path: "/auth/login" });
     },
 });

client/src/core/systems/models.ts

@@ -1 +1 @@
-export type SystemClearReason = "full-loading" | "partial-loading" | "leaving";
+export type SystemClearReason = "full-loading" | "partial-loading" | "leaving" | "logging-out";

client/src/dashboard/Assets.vue

@@ -31,8 +31,12 @@ function getCurrentPath(path?: string): string {
 }
 
 async function loadFolder(path: string): Promise<void> {
-    if (!socket.connected) socket.connect();
-    await assetSystem.loadFolder(path);
+    if (socket.connected) {
+        await assetSystem.loadFolder(path);
+    } else {
+        socket.connect();
+        socket.once("connect", () => assetSystem.loadFolder(path));
+    }
 }
 
 onMounted(async () => {

client/src/game/ui/assets/AssetList.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { computed, ref } from "vue";
+import { computed, onMounted, ref } from "vue";
 import { useI18n } from "vue-i18n";
 
 import { assetSystem } from "../../../assets";
 import type { AssetId } from "../../../assets/models";
 import { useAssetSearch } from "../../../assets/search";
+import { socket } from "../../../assets/socket";
 import { assetState } from "../../../assets/state";
 import AssetListCore from "../../../assets/ui/AssetListCore.vue";
 import AssetUploadProgress from "../../../assets/ui/AssetUploadProgress.vue";
@@ -19,6 +20,19 @@ const assetsDialogFooter = ref<HTMLDivElement | null>(null);
 const searchBar = ref<HTMLInputElement | null>(null);
 const search = useAssetSearch(searchBar);
 
+async function load(): Promise<void> {
+    await assetSystem.loadFolder(assetState.currentFolder.value);
+}
+
+onMounted(async () => {
+    if (socket.connected) {
+        await load();
+    } else {
+        socket.connect();
+        socket.once("connect", load);
+    }
+});
+
 const shortcuts = computed(() => {
     const root = {
         name: t("assets.all_assets"),