From 715a7d3a1fb4e859784beabf18bae5e0783a497f Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Fri, 28 Jun 2024 10:56:01 +0200
Subject: [PATCH 01/33] main navigation components extracted

---
 .../components/common/Navigation/HomeBtn.vue  |  17 +
 .../common/Navigation/MainAppBar.vue          |  29 ++
 .../common/Navigation/MainDrawer.vue          |  43 +++
 .../common/Navigation/PlatformsBtn.vue        |  19 ++
 .../common/Navigation/PlatformsDrawer.vue     |  31 ++
 .../components/common/Navigation/ScanBtn.vue  |  21 ++
 .../common/Navigation/SearchBtn.vue           |  15 +
 .../common/Navigation/SettingsDrawer.vue      | 102 ++++++
 .../common/Navigation/UploadBtn.vue           |  20 ++
 .../components/common/Navigation/UserBtn.vue  |  28 ++
 frontend/src/plugins/pinia.ts                 |   6 +-
 frontend/src/stores/navigation.ts             |  10 +
 frontend/src/views/Home.vue                   | 292 +-----------------
 13 files changed, 350 insertions(+), 283 deletions(-)
 create mode 100644 frontend/src/components/common/Navigation/HomeBtn.vue
 create mode 100644 frontend/src/components/common/Navigation/MainAppBar.vue
 create mode 100644 frontend/src/components/common/Navigation/MainDrawer.vue
 create mode 100644 frontend/src/components/common/Navigation/PlatformsBtn.vue
 create mode 100644 frontend/src/components/common/Navigation/PlatformsDrawer.vue
 create mode 100644 frontend/src/components/common/Navigation/ScanBtn.vue
 create mode 100644 frontend/src/components/common/Navigation/SearchBtn.vue
 create mode 100644 frontend/src/components/common/Navigation/SettingsDrawer.vue
 create mode 100644 frontend/src/components/common/Navigation/UploadBtn.vue
 create mode 100644 frontend/src/components/common/Navigation/UserBtn.vue

diff --git a/frontend/src/components/common/Navigation/HomeBtn.vue b/frontend/src/components/common/Navigation/HomeBtn.vue
new file mode 100644
index 000000000..e88bc2158
--- /dev/null
+++ b/frontend/src/components/common/Navigation/HomeBtn.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import RommIso from "@/components/common/RommIso.vue";
+import storeNavigation from "@/stores/navigation";
+
+const navigationStore = storeNavigation();
+</script>
+<template>
+  <v-hover v-slot="{ isHovering, props: hoverProps }">
+    <romm-iso
+      @click="navigationStore.goHome"
+      v-bind="hoverProps"
+      class="pointer"
+      :class="{ 'border-romm-accent-1': isHovering }"
+      :size="35"
+    />
+  </v-hover>
+</template>
diff --git a/frontend/src/components/common/Navigation/MainAppBar.vue b/frontend/src/components/common/Navigation/MainAppBar.vue
new file mode 100644
index 000000000..9f59e7390
--- /dev/null
+++ b/frontend/src/components/common/Navigation/MainAppBar.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import HomeBtn from "@/components/common/Navigation/HomeBtn.vue";
+import PlatformsBtn from "@/components/common/Navigation/PlatformsBtn.vue";
+import ScanBtn from "@/components/common/Navigation/ScanBtn.vue";
+import SearchBtn from "@/components/common/Navigation/SearchBtn.vue";
+import UploadBtn from "@/components/common/Navigation/UploadBtn.vue";
+import UserBtn from "@/components/common/Navigation/UserBtn.vue";
+</script>
+<template>
+  <v-app-bar
+    :elevation="0"
+    class="bg-primary justify-center px-1"
+    mode="shift"
+    height="45"
+  >
+    <template #prepend>
+      <home-btn />
+    </template>
+
+    <platforms-btn />
+    <scan-btn />
+
+    <template #append>
+      <search-btn />
+      <upload-btn />
+      <user-btn />
+    </template>
+  </v-app-bar>
+</template>
diff --git a/frontend/src/components/common/Navigation/MainDrawer.vue b/frontend/src/components/common/Navigation/MainDrawer.vue
new file mode 100644
index 000000000..f44e3d2d1
--- /dev/null
+++ b/frontend/src/components/common/Navigation/MainDrawer.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import HomeBtn from "@/components/common/Navigation/HomeBtn.vue";
+import PlatformsBtn from "@/components/common/Navigation/PlatformsBtn.vue";
+import ScanBtn from "@/components/common/Navigation/ScanBtn.vue";
+import SearchBtn from "@/components/common/Navigation/SearchBtn.vue";
+import UploadBtn from "@/components/common/Navigation/UploadBtn.vue";
+import UserBtn from "@/components/common/Navigation/UserBtn.vue";
+import storeNavigation from "@/stores/navigation";
+import { storeToRefs } from "pinia";
+
+// Props
+const navigationStore = storeNavigation();
+const { activePlatformsDrawer, activeSettingsDrawer } =
+  storeToRefs(navigationStore);
+</script>
+<template>
+  <v-navigation-drawer
+    permanent
+    rail
+    :floating="activePlatformsDrawer || activeSettingsDrawer"
+    rail-width="60"
+  >
+    <template #prepend>
+      <v-row no-gutters class="my-2 justify-center">
+        <home-btn />
+      </v-row>
+      <v-row no-gutters class="my-4 justify-center">
+        <search-btn />
+        <upload-btn />
+      </v-row>
+    </template>
+
+    <v-row no-gutters class="justify-center">
+      <platforms-btn />
+      <scan-btn />
+    </v-row>
+    <template #append>
+      <v-row no-gutters class="my-2 justify-center">
+        <user-btn />
+      </v-row>
+    </template>
+  </v-navigation-drawer>
+</template>
diff --git a/frontend/src/components/common/Navigation/PlatformsBtn.vue b/frontend/src/components/common/Navigation/PlatformsBtn.vue
new file mode 100644
index 000000000..d2571f0fe
--- /dev/null
+++ b/frontend/src/components/common/Navigation/PlatformsBtn.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import storeNavigation from "@/stores/navigation";
+import { storeToRefs } from "pinia";
+
+const navigationStore = storeNavigation();
+const { activePlatformsDrawer } = storeToRefs(navigationStore);
+</script>
+<template>
+  <v-btn
+    rounded="0"
+    variant="flat"
+    :color="activePlatformsDrawer ? 'terciary' : ''"
+    icon
+    @click="navigationStore.switchActivePlatformsDrawer"
+    ><v-icon :color="$route.name == 'platform' ? 'romm-accent-1' : ''"
+      >mdi-controller</v-icon
+    ></v-btn
+  >
+</template>
diff --git a/frontend/src/components/common/Navigation/PlatformsDrawer.vue b/frontend/src/components/common/Navigation/PlatformsDrawer.vue
new file mode 100644
index 000000000..f622a98fd
--- /dev/null
+++ b/frontend/src/components/common/Navigation/PlatformsDrawer.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { useDisplay } from "vuetify";
+import { storeToRefs } from "pinia";
+import storeNavigation from "@/stores/navigation";
+import storePlatforms from "@/stores/platforms";
+import PlatformListItem from "@/components/common/Platform/ListItem.vue";
+
+// Props
+const navigationStore = storeNavigation();
+const { smAndDown } = useDisplay();
+const platformsStore = storePlatforms();
+const { activePlatformsDrawer } = storeToRefs(navigationStore);
+</script>
+<template>
+  <v-navigation-drawer
+    :location="smAndDown ? 'top' : 'left'"
+    mobile
+    width="400"
+    v-model="activePlatformsDrawer"
+    class="bg-terciary"
+  >
+    <v-list rounded="0" class="pa-0">
+      <platform-list-item
+        v-for="platform in platformsStore.filledPlatforms"
+        :key="platform.slug"
+        :platform="platform"
+        class="py-4"
+      />
+    </v-list>
+  </v-navigation-drawer>
+</template>
diff --git a/frontend/src/components/common/Navigation/ScanBtn.vue b/frontend/src/components/common/Navigation/ScanBtn.vue
new file mode 100644
index 000000000..a6ef5e925
--- /dev/null
+++ b/frontend/src/components/common/Navigation/ScanBtn.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import storeAuth from "@/stores/auth";
+import storeNavigation from "@/stores/navigation";
+
+// Props
+const navigationStore = storeNavigation();
+const auth = storeAuth();
+</script>
+<template>
+  <v-btn
+    v-if="auth.scopes.includes('platforms.write')"
+    rounded="0"
+    variant="flat"
+    color="primary"
+    icon
+    @click="navigationStore.goScan"
+    ><v-icon :color="$route.name == 'scan' ? 'romm-accent-1' : ''"
+      >mdi-magnify-scan</v-icon
+    ></v-btn
+  >
+</template>
diff --git a/frontend/src/components/common/Navigation/SearchBtn.vue b/frontend/src/components/common/Navigation/SearchBtn.vue
new file mode 100644
index 000000000..f1854310a
--- /dev/null
+++ b/frontend/src/components/common/Navigation/SearchBtn.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { Events } from "@/types/emitter";
+import type { Emitter } from "mitt";
+import { inject } from "vue";
+
+const emitter = inject<Emitter<Events>>("emitter");
+</script>
+<template>
+  <v-btn
+    icon="mdi-magnify"
+    size="small"
+    variant="flat"
+    @click="emitter?.emit('showSearchRomDialog', null)"
+  />
+</template>
diff --git a/frontend/src/components/common/Navigation/SettingsDrawer.vue b/frontend/src/components/common/Navigation/SettingsDrawer.vue
new file mode 100644
index 000000000..2e60c9193
--- /dev/null
+++ b/frontend/src/components/common/Navigation/SettingsDrawer.vue
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import identityApi from "@/services/api/identity";
+import storeAuth from "@/stores/auth";
+import storeNavigation from "@/stores/navigation";
+import type { Events } from "@/types/emitter";
+import { defaultAvatarPath } from "@/utils";
+import type { Emitter } from "mitt";
+import { storeToRefs } from "pinia";
+import { inject } from "vue";
+import { useRouter } from "vue-router";
+import { useDisplay } from "vuetify";
+
+// Props
+const navigationStore = storeNavigation();
+const router = useRouter();
+const auth = storeAuth();
+const emitter = inject<Emitter<Events>>("emitter");
+const { activeSettingsDrawer } = storeToRefs(navigationStore);
+const { smAndDown } = useDisplay();
+
+// Functions
+async function logout() {
+  identityApi
+    .logout()
+    .then(({ data }) => {
+      emitter?.emit("snackbarShow", {
+        msg: data.msg,
+        icon: "mdi-check-bold",
+        color: "green",
+      });
+      router.push({ name: "login" });
+    })
+    .catch(() => {
+      router.push({ name: "login" });
+    })
+    .finally(() => {
+      auth.setUser(null);
+    });
+}
+</script>
+<template>
+  <v-navigation-drawer
+    :location="smAndDown ? 'top' : 'left'"
+    mobile
+    width="300"
+    v-model="activeSettingsDrawer"
+    class="bg-terciary"
+  >
+    <v-list rounded="0" class="pa-0">
+      <v-list-img>
+        <v-img
+          :src="
+            auth.user?.avatar_path
+              ? `/assets/romm/assets/${auth.user?.avatar_path}?ts=${auth.user?.updated_at}`
+              : defaultAvatarPath
+          "
+          cover
+        >
+        </v-img>
+      </v-list-img>
+      <v-list-item class="mb-1 text-shadow text-white">
+        <template #title>
+          <span>{{ auth.user?.username }}</span>
+        </template>
+        <template #subtitle>
+          <span>{{ auth.user?.role }}</span>
+        </template>
+      </v-list-item>
+    </v-list>
+    <v-list rounded="0" class="pa-0">
+      <v-list-item :to="{ name: 'settings' }" append-icon="mdi-palette"
+        >UI Settings</v-list-item
+      >
+      <v-list-item
+        v-if="auth.scopes.includes('platforms.write')"
+        append-icon="mdi-table-cog"
+        :to="{ name: 'management' }"
+        >Library Management
+      </v-list-item>
+      <v-list-item
+        v-if="auth.scopes.includes('users.write')"
+        :to="{ name: 'administration' }"
+        append-icon="mdi-security"
+        >Administration</v-list-item
+      >
+      <template v-if="smAndDown">
+        <v-divider />
+        <v-list-item @click="logout" append-icon="mdi-location-exit"
+          >Logout</v-list-item
+        >
+      </template>
+    </v-list>
+    <template v-if="!smAndDown" #append>
+      <v-list rounded="0" class="pa-0">
+        <v-divider />
+        <v-list-item @click="logout" append-icon="mdi-location-exit"
+          >Logout</v-list-item
+        >
+      </v-list>
+    </template>
+  </v-navigation-drawer>
+</template>
diff --git a/frontend/src/components/common/Navigation/UploadBtn.vue b/frontend/src/components/common/Navigation/UploadBtn.vue
new file mode 100644
index 000000000..c3e76fe7a
--- /dev/null
+++ b/frontend/src/components/common/Navigation/UploadBtn.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import storeAuth from "@/stores/auth";
+import type { Events } from "@/types/emitter";
+import type { Emitter } from "mitt";
+import { inject } from "vue";
+
+// Props
+const emitter = inject<Emitter<Events>>("emitter");
+const auth = storeAuth();
+</script>
+<template>
+  <v-btn
+    v-if="auth.scopes.includes('roms.write')"
+    icon="mdi-upload"
+    size="small"
+    variant="flat"
+    class="mr-1"
+    @click="emitter?.emit('showUploadRomDialog', null)"
+  />
+</template>
diff --git a/frontend/src/components/common/Navigation/UserBtn.vue b/frontend/src/components/common/Navigation/UserBtn.vue
new file mode 100644
index 000000000..c4765a0f4
--- /dev/null
+++ b/frontend/src/components/common/Navigation/UserBtn.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import storeAuth from "@/stores/auth";
+import storeNavigation from "@/stores/navigation";
+import { defaultAvatarPath } from "@/utils";
+
+// Props
+const navigationStore = storeNavigation();
+const auth = storeAuth();
+</script>
+<template>
+  <v-hover v-slot="{ isHovering, props: hoverProps }">
+    <v-avatar
+      @click="navigationStore.switchActiveSettingsDrawer"
+      class="pointer"
+      size="35"
+      v-bind="hoverProps"
+      :class="{ 'border-romm-accent-1': isHovering }"
+    >
+      <v-img
+        :src="
+          auth.user?.avatar_path
+            ? `/assets/romm/assets/${auth.user?.avatar_path}?ts=${auth.user?.updated_at}`
+            : defaultAvatarPath
+        "
+      />
+    </v-avatar>
+  </v-hover>
+</template>
diff --git a/frontend/src/plugins/pinia.ts b/frontend/src/plugins/pinia.ts
index b0b380854..4b3a8a582 100644
--- a/frontend/src/plugins/pinia.ts
+++ b/frontend/src/plugins/pinia.ts
@@ -1,5 +1,9 @@
 import { createPinia } from "pinia";
+import { markRaw } from "vue";
+import router from "@/plugins/router";
 
 const pinia = createPinia();
-
+pinia.use(({ store }) => {
+  store.$router = markRaw(router);
+});
 export default pinia;
diff --git a/frontend/src/stores/navigation.ts b/frontend/src/stores/navigation.ts
index 61c710c86..3bb9ad9b2 100644
--- a/frontend/src/stores/navigation.ts
+++ b/frontend/src/stores/navigation.ts
@@ -8,11 +8,21 @@ export default defineStore("navigation", {
 
   actions: {
     switchActivePlatformsDrawer() {
+      this.activeSettingsDrawer = false;
       this.activePlatformsDrawer = !this.activePlatformsDrawer;
     },
     switchActiveSettingsDrawer() {
+      this.activePlatformsDrawer = false;
       this.activeSettingsDrawer = !this.activeSettingsDrawer;
     },
+    goHome() {
+      this.resetDrawers();
+      this.$router.push({ name: "dashboard" });
+    },
+    goScan() {
+      this.resetDrawers();
+      this.$router.push({ name: "scan" });
+    },
     resetDrawers() {
       this.activePlatformsDrawer = false;
       this.activeSettingsDrawer = false;
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index 42f2d7e66..896151a86 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -16,11 +16,12 @@ import SearchCoverDialog from "@/components/common/Game/Dialog/SearchCoverRom.vu
 import SearchRomDialog from "@/components/common/Game/Dialog/SearchRom.vue";
 import UploadRomDialog from "@/components/common/Game/Dialog/UploadRom.vue";
 import LoadingView from "@/components/common/LoadingView.vue";
+import MainAppBar from "@/components/common/Navigation/MainAppBar.vue";
+import MainDrawer from "@/components/common/Navigation/MainDrawer.vue";
 import NewVersion from "@/components/common/NewVersion.vue";
 import DeletePlatformDialog from "@/components/common/Platform/Dialog/DeletePlatform.vue";
-import PlatformListItem from "@/components/common/Platform/ListItem.vue";
-import RommIso from "@/components/common/RommIso.vue";
-import identityApi from "@/services/api/identity";
+import PlatformsDrawer from "@/components/common/Navigation/PlatformsDrawer.vue";
+import SettingsDrawer from "@/components/common/Navigation/SettingsDrawer.vue";
 import platformApi from "@/services/api/platform";
 import userApi from "@/services/api/user";
 import storeAuth from "@/stores/auth";
@@ -28,11 +29,9 @@ import storeNavigation from "@/stores/navigation";
 import storePlatforms from "@/stores/platforms";
 import storeScanning from "@/stores/scanning";
 import type { Events } from "@/types/emitter";
-import { defaultAvatarPath } from "@/utils";
 import type { Emitter } from "mitt";
 import { storeToRefs } from "pinia";
-import { inject, onMounted, ref } from "vue";
-import { useRouter } from "vue-router";
+import { inject, onMounted } from "vue";
 import { useDisplay } from "vuetify";
 
 // Props
@@ -41,9 +40,6 @@ const scanningStore = storeScanning();
 const { scanning } = storeToRefs(scanningStore);
 const navigationStore = storeNavigation();
 const platformsStore = storePlatforms();
-const { activePlatformsDrawer, activeSettingsDrawer } =
-  storeToRefs(navigationStore);
-const router = useRouter();
 const auth = storeAuth();
 const emitter = inject<Emitter<Events>>("emitter");
 emitter?.on("refreshDrawer", async () => {
@@ -52,45 +48,6 @@ emitter?.on("refreshDrawer", async () => {
 });
 
 // Functions
-function goHome() {
-  navigationStore.resetDrawers();
-  router.push({ name: "dashboard" });
-}
-
-function goScan() {
-  navigationStore.resetDrawers();
-  router.push({ name: "scan" });
-}
-
-function togglePlatformsDrawer() {
-  activeSettingsDrawer.value = false;
-  navigationStore.switchActivePlatformsDrawer();
-}
-
-function toggleSettingsDrawer() {
-  activePlatformsDrawer.value = false;
-  navigationStore.switchActiveSettingsDrawer();
-}
-
-async function logout() {
-  identityApi
-    .logout()
-    .then(({ data }) => {
-      emitter?.emit("snackbarShow", {
-        msg: data.msg,
-        icon: "mdi-check-bold",
-        color: "green",
-      });
-      router.push({ name: "login" });
-    })
-    .catch(() => {
-      router.push({ name: "login" });
-    })
-    .finally(() => {
-      auth.setUser(null);
-    });
-}
-
 onMounted(async () => {
   navigationStore.resetDrawers();
   await userApi
@@ -122,241 +79,13 @@ onMounted(async () => {
   />
 
   <!-- TODO: refactor and extract components -->
-  <v-navigation-drawer
-    v-if="!smAndDown"
-    permanent
-    rail
-    :floating="activePlatformsDrawer || activeSettingsDrawer"
-    rail-width="60"
-  >
-    <template #prepend>
-      <v-row no-gutters class="my-2 justify-center">
-        <router-link :to="{ name: 'dashboard' }">
-          <v-hover v-slot="{ isHovering, props: hoverProps }">
-            <romm-iso
-              v-bind="hoverProps"
-              :class="{ 'border-romm-accent-1': isHovering }"
-              :size="40"
-            />
-          </v-hover>
-        </router-link>
-      </v-row>
-      <v-row no-gutters class="my-4 justify-center">
-        <v-btn
-          icon="mdi-magnify"
-          size="small"
-          variant="flat"
-          @click="emitter?.emit('showSearchRomDialog', null)"
-        />
-        <v-btn
-          v-if="auth.scopes.includes('roms.write')"
-          icon="mdi-upload"
-          size="small"
-          variant="flat"
-          @click="emitter?.emit('showUploadRomDialog', null)"
-        />
-      </v-row>
-    </template>
-    <v-row no-gutters class="justify-center">
-      <v-btn
-        block
-        rounded="0"
-        variant="flat"
-        :color="activePlatformsDrawer ? 'terciary' : ''"
-        icon
-        @click="togglePlatformsDrawer"
-        ><v-icon :color="$route.name == 'platform' ? 'romm-accent-1' : ''"
-          >mdi-controller</v-icon
-        ></v-btn
-      >
-      <v-btn
-        v-if="auth.scopes.includes('platforms.write')"
-        block
-        rounded="0"
-        variant="flat"
-        color="primary"
-        icon
-        @click="goScan"
-        ><v-icon :color="$route.name == 'scan' ? 'romm-accent-1' : ''"
-          >mdi-magnify-scan</v-icon
-        ></v-btn
-      >
-    </v-row>
-    <template #append>
-      <v-row no-gutters class="justify-center">
-        <v-hover v-slot="{ isHovering, props: hoverProps }">
-          <v-avatar
-            v-bind="hoverProps"
-            :class="{ 'border-romm-accent-1': isHovering }"
-            @click="toggleSettingsDrawer"
-            size="35"
-            class="my-2 pointer"
-          >
-            <v-img
-              :src="
-                auth.user?.avatar_path
-                  ? `/assets/romm/assets/${auth.user?.avatar_path}?ts=${auth.user?.updated_at}`
-                  : defaultAvatarPath
-              "
-            />
-          </v-avatar>
-        </v-hover>
-      </v-row>
-    </template>
-  </v-navigation-drawer>
-
-  <v-app-bar
-    v-if="smAndDown"
-    :elevation="0"
-    class="bg-primary justify-center"
-    mode="shift"
-    height="45"
-  >
-    <template #prepend>
-      <v-hover v-slot="{ isHovering, props: hoverProps }">
-        <romm-iso
-          @click="goHome"
-          v-bind="hoverProps"
-          class="pointer ml-1"
-          :class="{ 'border-romm-accent-1': isHovering }"
-          :size="35"
-        />
-      </v-hover>
-    </template>
+  <main-drawer v-if="!smAndDown" />
 
-    <v-btn
-      rounded="0"
-      variant="flat"
-      :color="activePlatformsDrawer ? 'terciary' : ''"
-      icon
-      @click="togglePlatformsDrawer"
-      ><v-icon :color="$route.name == 'platform' ? 'romm-accent-1' : ''"
-        >mdi-controller</v-icon
-      ></v-btn
-    >
-    <v-btn
-      v-if="auth.scopes.includes('platforms.write')"
-      rounded="0"
-      variant="flat"
-      color="primary"
-      icon
-      @click="goScan"
-      ><v-icon :color="$route.name == 'scan' ? 'romm-accent-1' : ''"
-        >mdi-magnify-scan</v-icon
-      ></v-btn
-    >
-    <template #append>
-      <v-btn
-        icon="mdi-magnify"
-        size="small"
-        variant="flat"
-        @click="emitter?.emit('showSearchRomDialog', null)"
-      />
-      <v-btn
-        v-if="auth.scopes.includes('roms.write')"
-        icon="mdi-upload"
-        size="small"
-        variant="flat"
-        class="mr-1"
-        @click="emitter?.emit('showUploadRomDialog', null)"
-      />
-      <v-hover v-slot="{ isHovering, props: hoverProps }">
-        <v-avatar
-          @click="toggleSettingsDrawer"
-          class="mr-1 pointer"
-          size="35"
-          v-bind="hoverProps"
-          :class="{ 'border-romm-accent-1': isHovering }"
-        >
-          <v-img
-            :src="
-              auth.user?.avatar_path
-                ? `/assets/romm/assets/${auth.user?.avatar_path}?ts=${auth.user?.updated_at}`
-                : defaultAvatarPath
-            "
-          />
-        </v-avatar>
-      </v-hover>
-    </template>
-  </v-app-bar>
+  <main-app-bar v-if="smAndDown" />
 
-  <v-navigation-drawer
-    :location="smAndDown ? 'top' : 'left'"
-    mobile
-    width="400"
-    v-model="activePlatformsDrawer"
-    class="bg-terciary"
-  >
-    <v-list rounded="0" class="pa-0">
-      <platform-list-item
-        v-for="platform in platformsStore.filledPlatforms"
-        :key="platform.slug"
-        :platform="platform"
-        class="py-4"
-      />
-    </v-list>
-  </v-navigation-drawer>
+  <platforms-drawer />
 
-  <v-navigation-drawer
-    :location="smAndDown ? 'top' : 'left'"
-    mobile
-    width="300"
-    v-model="activeSettingsDrawer"
-    class="bg-terciary"
-  >
-    <v-list rounded="0" class="pa-0">
-      <v-list-img>
-        <v-img
-          :src="
-            auth.user?.avatar_path
-              ? `/assets/romm/assets/${auth.user?.avatar_path}?ts=${auth.user?.updated_at}`
-              : defaultAvatarPath
-          "
-          cover
-        >
-        </v-img>
-      </v-list-img>
-      <v-list-item class="mb-1 text-shadow text-white">
-        <template #title>
-          <span>{{ auth.user?.username }}</span>
-        </template>
-        <template #subtitle>
-          <span>{{ auth.user?.role }}</span>
-        </template>
-      </v-list-item>
-    </v-list>
-    <v-list rounded="0" class="pa-0">
-      <v-list-item :to="{ name: 'settings' }" append-icon="mdi-palette"
-        >UI Settings</v-list-item
-      >
-      <v-list-item
-        v-if="auth.scopes.includes('platforms.write')"
-        append-icon="mdi-table-cog"
-        :to="{ name: 'management' }"
-        >Library Management
-      </v-list-item>
-      <v-list-item
-        v-if="auth.scopes.includes('users.write')"
-        :to="{ name: 'administration' }"
-        append-icon="mdi-security"
-        >Administration</v-list-item
-      >
-      <template v-if="smAndDown">
-        <v-divider />
-        <v-list-item @click="logout" append-icon="mdi-location-exit"
-          >Logout</v-list-item
-        >
-      </template>
-    </v-list>
-    <template v-if="!smAndDown" #append>
-      <v-list rounded="0" class="pa-0">
-        <v-divider />
-        <v-list-item @click="logout" append-icon="mdi-location-exit"
-          >Logout</v-list-item
-        >
-      </v-list>
-    </template>
-  </v-navigation-drawer>
+  <settings-drawer />
 
   <new-version />
   <router-view />
@@ -381,8 +110,7 @@ onMounted(async () => {
   <loading-view />
 </template>
 <style scoped>
-.v-progress-linear,
-.v-bottom-navigation {
+.v-progress-linear {
   z-index: 9999 !important;
 }
 </style>

From 02f4bf4961948f2b5530ec10bca2bc43f5a2040d Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Fri, 28 Jun 2024 11:49:23 +0200
Subject: [PATCH 02/33] collections view added

---
 .../components/common/Game/Card/ActionBar.vue |  12 +-
 .../common/Navigation/CollectionsBtn.vue      |  31 ++
 .../common/Navigation/CollectionsDrawer.vue   |  64 ++++
 .../common/Navigation/MainAppBar.vue          |   2 +
 .../common/Navigation/MainDrawer.vue          |  14 +-
 .../common/Navigation/PlatformsBtn.vue        |   9 +
 .../common/Navigation/PlatformsDrawer.vue     |   2 +-
 .../components/common/Navigation/ScanBtn.vue  |   9 +
 .../common/Navigation/SettingsDrawer.vue      |  14 +-
 .../components/common/Platform/ListItem.vue   |   2 +-
 frontend/src/plugins/router.ts                |   7 +-
 frontend/src/stores/navigation.ts             |   9 +
 frontend/src/views/Gallery/Collection.vue     | 311 ++++++++++++++++++
 .../{Gallery.vue => Gallery/Platform.vue}     |   0
 frontend/src/views/Home.vue                   |   3 +
 15 files changed, 465 insertions(+), 24 deletions(-)
 create mode 100644 frontend/src/components/common/Navigation/CollectionsBtn.vue
 create mode 100644 frontend/src/components/common/Navigation/CollectionsDrawer.vue
 create mode 100644 frontend/src/views/Gallery/Collection.vue
 rename frontend/src/views/{Gallery.vue => Gallery/Platform.vue} (100%)

diff --git a/frontend/src/components/common/Game/Card/ActionBar.vue b/frontend/src/components/common/Game/Card/ActionBar.vue
index 255bb21fa..c3b8e9720 100644
--- a/frontend/src/components/common/Game/Card/ActionBar.vue
+++ b/frontend/src/components/common/Game/Card/ActionBar.vue
@@ -1,19 +1,15 @@
 <script setup lang="ts">
+import AdminMenu from "@/components/common/Game/AdminMenu.vue";
 import romApi from "@/services/api/rom";
-import storeDownload from "@/stores/download";
 import storeAuth from "@/stores/auth";
-import AdminMenu from "@/components/common/Game/AdminMenu.vue";
-import storeGalleryView from "@/stores/galleryView";
+import storeDownload from "@/stores/download";
 import type { SimpleRom } from "@/stores/roms";
 import { isEmulationSupported } from "@/utils";
-import { storeToRefs } from "pinia";
 
 // Props
 defineProps<{ rom: SimpleRom }>();
 const auth = storeAuth();
 const downloadStore = storeDownload();
-const galleryViewStore = storeGalleryView();
-const { currentView } = storeToRefs(galleryViewStore);
 </script>
 
 <template>
@@ -28,8 +24,8 @@ const { currentView } = storeToRefs(galleryViewStore);
         variant="text"
         @click="romApi.downloadRom({ rom })"
       />
-      </v-col>
-      <v-col>
+    </v-col>
+    <v-col>
       <v-btn
         v-if="isEmulationSupported(rom.platform_slug)"
         class="action-bar-btn-small"
diff --git a/frontend/src/components/common/Navigation/CollectionsBtn.vue b/frontend/src/components/common/Navigation/CollectionsBtn.vue
new file mode 100644
index 000000000..476cad35b
--- /dev/null
+++ b/frontend/src/components/common/Navigation/CollectionsBtn.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import storeNavigation from "@/stores/navigation";
+import storePlatforms from "@/stores/platforms";
+import { storeToRefs } from "pinia";
+import { useDisplay } from "vuetify";
+
+// Props
+withDefaults(
+  defineProps<{
+    block?: boolean;
+  }>(),
+  {
+    block: false,
+  }
+);
+const navigationStore = storeNavigation();
+const { activeCollectionsDrawer } = storeToRefs(navigationStore);
+</script>
+<template>
+  <v-btn
+    :block="block"
+    rounded="0"
+    variant="flat"
+    :color="activeCollectionsDrawer ? 'terciary' : ''"
+    icon
+    @click="navigationStore.switchActiveCollectionsDrawer"
+    ><v-icon :color="$route.name == 'collection' ? 'romm-accent-1' : ''"
+      >mdi-bookmark-box-multiple</v-icon
+    ></v-btn
+  >
+</template>
diff --git a/frontend/src/components/common/Navigation/CollectionsDrawer.vue b/frontend/src/components/common/Navigation/CollectionsDrawer.vue
new file mode 100644
index 000000000..12417284b
--- /dev/null
+++ b/frontend/src/components/common/Navigation/CollectionsDrawer.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import storeNavigation from "@/stores/navigation";
+import { storeToRefs } from "pinia";
+import { useDisplay } from "vuetify";
+
+// Props
+const navigationStore = storeNavigation();
+const { smAndDown } = useDisplay();
+const { activeCollectionsDrawer } = storeToRefs(navigationStore);
+</script>
+<template>
+  <v-navigation-drawer
+    :location="smAndDown ? 'top' : 'left'"
+    mobile
+    width="400"
+    v-model="activeCollectionsDrawer"
+    class="bg-terciary"
+  >
+    <v-list lines="two" rounded="0" class="pa-0">
+      <v-list-item
+        v-for="collection in [
+          {
+            name: 'Favourites',
+            description: 'My favourites collection',
+            rom_count: 10,
+            id: 0,
+          },
+          {
+            name: 'Nintendo',
+            description: 'Nintendo collection',
+            rom_count: 7,
+            id: 1,
+          },
+          {
+            name: 'Sony',
+            description: 'Sony collection',
+            rom_count: 20,
+            id: 2,
+          },
+        ]"
+        :to="{ name: 'collection', params: { collection: collection.id } }"
+        :value="collection"
+      >
+        <v-row no-gutters
+          ><v-col
+            ><span class="text-body-1">{{ collection.name }}</span></v-col
+          ></v-row
+        >
+        <v-row no-gutters>
+          <v-col>
+            <span class="text-caption text-grey">{{
+              collection.description
+            }}</span>
+          </v-col>
+        </v-row>
+        <template #append>
+          <v-chip class="ml-2" size="x-small" label>
+            {{ collection.rom_count }}
+          </v-chip>
+        </template>
+      </v-list-item>
+    </v-list>
+  </v-navigation-drawer>
+</template>
diff --git a/frontend/src/components/common/Navigation/MainAppBar.vue b/frontend/src/components/common/Navigation/MainAppBar.vue
index 9f59e7390..94da3a95c 100644
--- a/frontend/src/components/common/Navigation/MainAppBar.vue
+++ b/frontend/src/components/common/Navigation/MainAppBar.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import HomeBtn from "@/components/common/Navigation/HomeBtn.vue";
 import PlatformsBtn from "@/components/common/Navigation/PlatformsBtn.vue";
+import CollectionsBtn from "@/components/common/Navigation/CollectionsBtn.vue";
 import ScanBtn from "@/components/common/Navigation/ScanBtn.vue";
 import SearchBtn from "@/components/common/Navigation/SearchBtn.vue";
 import UploadBtn from "@/components/common/Navigation/UploadBtn.vue";
@@ -18,6 +19,7 @@ import UserBtn from "@/components/common/Navigation/UserBtn.vue";
     </template>
 
     <platforms-btn />
+    <collections-btn />
     <scan-btn />
 
     <template #append>
diff --git a/frontend/src/components/common/Navigation/MainDrawer.vue b/frontend/src/components/common/Navigation/MainDrawer.vue
index f44e3d2d1..d1e1c8e93 100644
--- a/frontend/src/components/common/Navigation/MainDrawer.vue
+++ b/frontend/src/components/common/Navigation/MainDrawer.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import HomeBtn from "@/components/common/Navigation/HomeBtn.vue";
 import PlatformsBtn from "@/components/common/Navigation/PlatformsBtn.vue";
+import CollectionsBtn from "@/components/common/Navigation/CollectionsBtn.vue";
 import ScanBtn from "@/components/common/Navigation/ScanBtn.vue";
 import SearchBtn from "@/components/common/Navigation/SearchBtn.vue";
 import UploadBtn from "@/components/common/Navigation/UploadBtn.vue";
@@ -10,14 +11,16 @@ import { storeToRefs } from "pinia";
 
 // Props
 const navigationStore = storeNavigation();
-const { activePlatformsDrawer, activeSettingsDrawer } =
+const { activePlatformsDrawer, activeCollectionsDrawer, activeSettingsDrawer } =
   storeToRefs(navigationStore);
 </script>
 <template>
   <v-navigation-drawer
     permanent
     rail
-    :floating="activePlatformsDrawer || activeSettingsDrawer"
+    :floating="
+      activePlatformsDrawer || activeCollectionsDrawer || activeSettingsDrawer
+    "
     rail-width="60"
   >
     <template #prepend>
@@ -30,9 +33,10 @@ const { activePlatformsDrawer, activeSettingsDrawer } =
       </v-row>
     </template>
 
-    <v-row no-gutters class="justify-center">
-      <platforms-btn />
-      <scan-btn />
+    <v-row no-gutters class="justify-center my-5">
+      <platforms-btn block />
+      <collections-btn block />
+      <scan-btn block />
     </v-row>
     <template #append>
       <v-row no-gutters class="my-2 justify-center">
diff --git a/frontend/src/components/common/Navigation/PlatformsBtn.vue b/frontend/src/components/common/Navigation/PlatformsBtn.vue
index d2571f0fe..6b1fcb34c 100644
--- a/frontend/src/components/common/Navigation/PlatformsBtn.vue
+++ b/frontend/src/components/common/Navigation/PlatformsBtn.vue
@@ -2,11 +2,20 @@
 import storeNavigation from "@/stores/navigation";
 import { storeToRefs } from "pinia";
 
+withDefaults(
+  defineProps<{
+    block?: boolean;
+  }>(),
+  {
+    block: false,
+  }
+);
 const navigationStore = storeNavigation();
 const { activePlatformsDrawer } = storeToRefs(navigationStore);
 </script>
 <template>
   <v-btn
+    :block="block"
     rounded="0"
     variant="flat"
     :color="activePlatformsDrawer ? 'terciary' : ''"
diff --git a/frontend/src/components/common/Navigation/PlatformsDrawer.vue b/frontend/src/components/common/Navigation/PlatformsDrawer.vue
index f622a98fd..cbb1dc3b1 100644
--- a/frontend/src/components/common/Navigation/PlatformsDrawer.vue
+++ b/frontend/src/components/common/Navigation/PlatformsDrawer.vue
@@ -19,7 +19,7 @@ const { activePlatformsDrawer } = storeToRefs(navigationStore);
     v-model="activePlatformsDrawer"
     class="bg-terciary"
   >
-    <v-list rounded="0" class="pa-0">
+    <v-list lines="two" rounded="0" class="pa-0">
       <platform-list-item
         v-for="platform in platformsStore.filledPlatforms"
         :key="platform.slug"
diff --git a/frontend/src/components/common/Navigation/ScanBtn.vue b/frontend/src/components/common/Navigation/ScanBtn.vue
index a6ef5e925..6b74523ac 100644
--- a/frontend/src/components/common/Navigation/ScanBtn.vue
+++ b/frontend/src/components/common/Navigation/ScanBtn.vue
@@ -3,12 +3,21 @@ import storeAuth from "@/stores/auth";
 import storeNavigation from "@/stores/navigation";
 
 // Props
+withDefaults(
+  defineProps<{
+    block?: boolean;
+  }>(),
+  {
+    block: false,
+  }
+);
 const navigationStore = storeNavigation();
 const auth = storeAuth();
 </script>
 <template>
   <v-btn
     v-if="auth.scopes.includes('platforms.write')"
+    :block="block"
     rounded="0"
     variant="flat"
     color="primary"
diff --git a/frontend/src/components/common/Navigation/SettingsDrawer.vue b/frontend/src/components/common/Navigation/SettingsDrawer.vue
index 2e60c9193..4e6f2bff5 100644
--- a/frontend/src/components/common/Navigation/SettingsDrawer.vue
+++ b/frontend/src/components/common/Navigation/SettingsDrawer.vue
@@ -42,7 +42,7 @@ async function logout() {
   <v-navigation-drawer
     :location="smAndDown ? 'top' : 'left'"
     mobile
-    width="300"
+    width="400"
     v-model="activeSettingsDrawer"
     class="bg-terciary"
   >
@@ -58,13 +58,11 @@ async function logout() {
         >
         </v-img>
       </v-list-img>
-      <v-list-item class="mb-1 text-shadow text-white">
-        <template #title>
-          <span>{{ auth.user?.username }}</span>
-        </template>
-        <template #subtitle>
-          <span>{{ auth.user?.role }}</span>
-        </template>
+      <v-list-item
+        :title="auth.user?.username"
+        :subtitle="auth.user?.role"
+        class="mb-1 text-shadow text-white"
+      >
       </v-list-item>
     </v-list>
     <v-list rounded="0" class="pa-0">
diff --git a/frontend/src/components/common/Platform/ListItem.vue b/frontend/src/components/common/Platform/ListItem.vue
index 79cb7baa2..384159ce2 100644
--- a/frontend/src/components/common/Platform/ListItem.vue
+++ b/frontend/src/components/common/Platform/ListItem.vue
@@ -36,7 +36,7 @@ withDefaults(defineProps<{ platform: Platform; rail?: boolean }>(), {
     </template>
     <v-row no-gutters
       ><v-col
-        ><span class="text-body-2">{{ platform.name }}</span></v-col
+        ><span class="text-body-1">{{ platform.name }}</span></v-col
       ></v-row
     >
     <v-row no-gutters>
diff --git a/frontend/src/plugins/router.ts b/frontend/src/plugins/router.ts
index 62a7269fd..ab1a3cc56 100644
--- a/frontend/src/plugins/router.ts
+++ b/frontend/src/plugins/router.ts
@@ -20,7 +20,12 @@ const routes = [
       {
         path: "/platform/:platform",
         name: "platform",
-        component: () => import("@/views/Gallery.vue"),
+        component: () => import("@/views/Gallery/Platform.vue"),
+      },
+      {
+        path: "/collection/:collection",
+        name: "collection",
+        component: () => import("@/views/Gallery/Collection.vue"),
       },
       {
         path: "/rom/:rom",
diff --git a/frontend/src/stores/navigation.ts b/frontend/src/stores/navigation.ts
index 3bb9ad9b2..d2a4225f4 100644
--- a/frontend/src/stores/navigation.ts
+++ b/frontend/src/stores/navigation.ts
@@ -3,16 +3,24 @@ import { defineStore } from "pinia";
 export default defineStore("navigation", {
   state: () => ({
     activePlatformsDrawer: false,
+    activeCollectionsDrawer: false,
     activeSettingsDrawer: false,
   }),
 
   actions: {
     switchActivePlatformsDrawer() {
+      this.activeCollectionsDrawer = false;
       this.activeSettingsDrawer = false;
       this.activePlatformsDrawer = !this.activePlatformsDrawer;
     },
+    switchActiveCollectionsDrawer() {
+      this.activePlatformsDrawer = false;
+      this.activeSettingsDrawer = false;
+      this.activeCollectionsDrawer = !this.activeCollectionsDrawer;
+    },
     switchActiveSettingsDrawer() {
       this.activePlatformsDrawer = false;
+      this.activeCollectionsDrawer = false;
       this.activeSettingsDrawer = !this.activeSettingsDrawer;
     },
     goHome() {
@@ -25,6 +33,7 @@ export default defineStore("navigation", {
     },
     resetDrawers() {
       this.activePlatformsDrawer = false;
+      this.activeCollectionsDrawer = false;
       this.activeSettingsDrawer = false;
     },
   },
diff --git a/frontend/src/views/Gallery/Collection.vue b/frontend/src/views/Gallery/Collection.vue
new file mode 100644
index 000000000..4fdcfca38
--- /dev/null
+++ b/frontend/src/views/Gallery/Collection.vue
@@ -0,0 +1,311 @@
+<script setup lang="ts">
+import GalleryAppBar from "@/components/Gallery/AppBar/Base.vue";
+import FabOverlay from "@/components/Gallery/FabOverlay.vue";
+import EmptyGame from "@/components/common/EmptyGame.vue";
+import EmptyPlatform from "@/components/common/EmptyPlatform.vue";
+import GameCard from "@/components/common/Game/Card/Base.vue";
+import GameCardFlags from "@/components/common/Game/Card/Flags.vue";
+import GameDataTable from "@/components/common/Game/Table.vue";
+import platformApi from "@/services/api/platform";
+import romApi from "@/services/api/rom";
+import storeGalleryFilter from "@/stores/galleryFilter";
+import storeGalleryView from "@/stores/galleryView";
+import storePlatforms from "@/stores/platforms";
+import storeRoms, { type SimpleRom } from "@/stores/roms";
+import type { Events } from "@/types/emitter";
+import { normalizeString, views } from "@/utils";
+import type { Emitter } from "mitt";
+import { storeToRefs } from "pinia";
+import { inject, onBeforeUnmount, onMounted, ref } from "vue";
+import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
+import { useDisplay } from "vuetify";
+
+// Props
+const { smAndDown } = useDisplay();
+const route = useRoute();
+const galleryViewStore = storeGalleryView();
+const galleryFilterStore = storeGalleryFilter();
+const { scrolledToTop, currentView } = storeToRefs(galleryViewStore);
+const platforms = storePlatforms();
+const romsStore = storeRoms();
+const {
+  allRoms,
+  filteredRoms,
+  selectedRoms,
+  currentPlatform,
+  itemsPerBatch,
+  gettingRoms,
+} = storeToRefs(romsStore);
+const itemsShown = ref(itemsPerBatch.value);
+const noPlatformError = ref(false);
+const router = useRouter();
+let timeout: ReturnType<typeof setTimeout>;
+const emitter = inject<Emitter<Events>>("emitter");
+emitter?.on("filter", onFilterChange);
+
+// Functions
+async function fetchRoms() {
+  if (gettingRoms.value) return;
+
+  gettingRoms.value = true;
+  emitter?.emit("showLoadingDialog", {
+    loading: gettingRoms.value,
+    scrim: false,
+  });
+
+  await romApi
+    .getRoms({
+      platformId: romsStore.currentPlatform?.id,
+      searchTerm: normalizeString(galleryFilterStore.filterSearch),
+    })
+    .then(({ data }) => {
+      romsStore.set(data);
+      romsStore.setFiltered(data, galleryFilterStore);
+    })
+    .catch((error) => {
+      emitter?.emit("snackbarShow", {
+        msg: `Couldn't fetch roms for platform ID ${currentPlatform.value?.id}: ${error}`,
+        icon: "mdi-close-circle",
+        color: "red",
+        timeout: 4000,
+      });
+      console.error(
+        `Couldn't fetch roms for platform ID ${currentPlatform.value?.id}: ${error}`
+      );
+      noPlatformError.value = true;
+    })
+    .finally(() => {
+      gettingRoms.value = false;
+      emitter?.emit("showLoadingDialog", {
+        loading: gettingRoms.value,
+        scrim: false,
+      });
+    });
+}
+
+function setFilters() {
+  galleryFilterStore.setFilterGenre([
+    ...new Set(
+      romsStore.filteredRoms
+        .flatMap((rom) => rom.genres.map((genre) => genre))
+        .sort()
+    ),
+  ]);
+  galleryFilterStore.setFilterFranchise([
+    ...new Set(
+      romsStore.filteredRoms
+        .flatMap((rom) => rom.franchises.map((franchise) => franchise))
+        .sort()
+    ),
+  ]);
+  galleryFilterStore.setFilterCompany([
+    ...new Set(
+      romsStore.filteredRoms
+        .flatMap((rom) => rom.companies.map((company) => company))
+        .sort()
+    ),
+  ]);
+  galleryFilterStore.setFilterCollection([
+    ...new Set(
+      romsStore.filteredRoms
+        .flatMap((rom) => rom.collections.map((collection) => collection))
+        .sort()
+    ),
+  ]);
+}
+
+async function onFilterChange() {
+  romsStore.setFiltered(allRoms.value, galleryFilterStore);
+  emitter?.emit("updateDataTablePages", null);
+}
+
+function onGameClick(emitData: { rom: SimpleRom; event: MouseEvent }) {
+  let index = filteredRoms.value.indexOf(emitData.rom);
+  if (
+    emitData.event.ctrlKey ||
+    emitData.event.shiftKey ||
+    romsStore.selecting ||
+    romsStore.selectedRoms.length > 0
+  ) {
+    emitData.event.preventDefault();
+    emitData.event.stopPropagation();
+    if (!selectedRoms.value.includes(emitData.rom)) {
+      romsStore.addToSelection(emitData.rom);
+    } else {
+      romsStore.removeFromSelection(emitData.rom);
+    }
+    if (emitData.event.shiftKey) {
+      const [start, end] = [romsStore.lastSelectedIndex, index].sort(
+        (a, b) => a - b
+      );
+      if (romsStore.selectedRoms.includes(emitData.rom)) {
+        for (let i = start + 1; i < end; i++) {
+          romsStore.addToSelection(filteredRoms.value[i]);
+        }
+      } else {
+        for (let i = start; i <= end; i++) {
+          romsStore.removeFromSelection(filteredRoms.value[i]);
+        }
+      }
+      romsStore.updateLastSelected(
+        romsStore.selectedRoms.includes(emitData.rom) ? index : index - 1
+      );
+    } else {
+      romsStore.updateLastSelected(index);
+    }
+  } else {
+    router.push({ name: "rom", params: { rom: emitData.rom.id } });
+  }
+}
+
+function onGameTouchStart(emitData: { rom: SimpleRom; event: TouchEvent }) {
+  timeout = setTimeout(() => {
+    romsStore.addToSelection(emitData.rom);
+  }, 500);
+}
+
+function onGameTouchEnd() {
+  clearTimeout(timeout);
+}
+
+function onScroll() {
+  if (galleryViewStore.currentView != 2) {
+    window.setTimeout(async () => {
+      const { scrollTop, scrollHeight, clientHeight } =
+        document.documentElement;
+      scrolledToTop.value = scrollTop === 0;
+      const totalScrollableHeight = scrollHeight - clientHeight;
+      const ninetyPercentPoint = totalScrollableHeight * 0.9;
+      if (
+        scrollTop >= ninetyPercentPoint &&
+        itemsShown.value < filteredRoms.value.length
+      ) {
+        itemsShown.value = itemsShown.value + itemsPerBatch.value;
+        setFilters();
+        galleryViewStore.scroll = scrollHeight;
+      }
+    }, 100);
+    clearTimeout(timeout);
+  }
+}
+
+function resetGallery() {
+  romsStore.reset();
+  galleryFilterStore.reset();
+  scrolledToTop.value = true;
+  noPlatformError.value = false;
+  itemsShown.value = itemsPerBatch.value;
+}
+
+onMounted(async () => {
+  const routePlatformId = Number(route.params.collection);
+  const routePlatform = platforms.get(routePlatformId);
+
+  if (!routePlatform) {
+    await platformApi
+      .getPlatform(routePlatformId)
+      .then((data) => {
+        platforms.add(data.data);
+        romsStore.setCurrentPlatform(data.data);
+      })
+      .catch((error) => {
+        console.log(error);
+        noPlatformError.value = true;
+      });
+  } else {
+    romsStore.setCurrentPlatform(routePlatform);
+  }
+  resetGallery();
+  await fetchRoms();
+  setFilters();
+
+  window.addEventListener("wheel", onScroll);
+  window.addEventListener("scroll", onScroll);
+});
+
+onBeforeRouteUpdate(async (to, from) => {
+  // Triggers when change param of the same route
+  // Reset store if switching to another platform
+  if (to.path === from.path) return;
+
+  resetGallery();
+
+  const routePlatformId = Number(to.params.collection);
+  const routePlatform = platforms.get(routePlatformId);
+  if (!routePlatform) {
+    const { data } = await platformApi.getPlatform(routePlatformId);
+    platforms.add(data);
+  } else {
+    romsStore.setCurrentPlatform(routePlatform);
+  }
+
+  await fetchRoms();
+  setFilters();
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("wheel", onScroll);
+  window.removeEventListener("scroll", onScroll);
+});
+</script>
+
+<template>
+  <template v-if="!noPlatformError">
+    <gallery-app-bar />
+    <template v-if="filteredRoms.length > 0">
+      <v-row
+        no-gutters
+        class="overflow-hidden"
+        :class="{ 'pa-1': currentView != 2 }"
+      >
+        <!-- Gallery cards view -->
+        <!-- v-show instead of v-if to avoid recalculate on view change -->
+        <v-col
+          v-for="rom in filteredRoms.slice(0, itemsShown)"
+          v-show="currentView != 2"
+          :key="rom.id"
+          class="pa-1"
+          :cols="views[currentView]['size-cols']"
+          :sm="views[currentView]['size-sm']"
+          :md="views[currentView]['size-md']"
+          :lg="views[currentView]['size-lg']"
+          :xl="views[currentView]['size-xl']"
+        >
+          <game-card
+            :rom="rom"
+            title-on-hover
+            show-action-bar
+            transform-scale
+            with-border
+            :with-border-romm-accent="
+              romsStore.isSimpleRom(rom) && selectedRoms?.includes(rom)
+            "
+            @click="onGameClick"
+            @touchstart="onGameTouchStart"
+            @touchend="onGameTouchEnd"
+          >
+            <template #prepend-inner>
+              <game-card-flags :rom="rom" />
+            </template>
+          </game-card>
+        </v-col>
+
+        <!-- Gallery list view -->
+        <v-col v-show="currentView == 2">
+          <game-data-table
+            :class="{
+              'fill-height-desktop': !smAndDown,
+              'fill-height-mobile': smAndDown,
+            }"
+          />
+        </v-col>
+      </v-row>
+      <fab-overlay />
+    </template>
+    <template v-else>
+      <empty-game v-if="!gettingRoms && galleryFilterStore.isFiltered()" />
+    </template>
+  </template>
+
+  <empty-platform v-else />
+</template>
diff --git a/frontend/src/views/Gallery.vue b/frontend/src/views/Gallery/Platform.vue
similarity index 100%
rename from frontend/src/views/Gallery.vue
rename to frontend/src/views/Gallery/Platform.vue
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index 896151a86..9286f15e0 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -21,6 +21,7 @@ import MainDrawer from "@/components/common/Navigation/MainDrawer.vue";
 import NewVersion from "@/components/common/NewVersion.vue";
 import DeletePlatformDialog from "@/components/common/Platform/Dialog/DeletePlatform.vue";
 import PlatformsDrawer from "@/components/common/Navigation/PlatformsDrawer.vue";
+import CollectionsDrawer from "@/components/common/Navigation/CollectionsDrawer.vue";
 import SettingsDrawer from "@/components/common/Navigation/SettingsDrawer.vue";
 import platformApi from "@/services/api/platform";
 import userApi from "@/services/api/user";
@@ -85,6 +86,8 @@ onMounted(async () => {
 
   <platforms-drawer />
 
+  <collections-drawer />
+
   <settings-drawer />
 
   <new-version />

From bfb8ab371b245ef944b04bd79d6dc1b6a7ab7b8b Mon Sep 17 00:00:00 2001
From: Zurdi <zurdizurdo25@gmail.com>
Date: Fri, 28 Jun 2024 18:02:07 +0200
Subject: [PATCH 03/33] tweak collections/platforms drawers

---
 .../common/Navigation/CollectionsDrawer.vue   | 47 +++++++++----------
 .../common/Navigation/PlatformsDrawer.vue     | 28 +++++------
 2 files changed, 34 insertions(+), 41 deletions(-)

diff --git a/frontend/src/components/common/Navigation/CollectionsDrawer.vue b/frontend/src/components/common/Navigation/CollectionsDrawer.vue
index a09f11fd8..bf3baed36 100644
--- a/frontend/src/components/common/Navigation/CollectionsDrawer.vue
+++ b/frontend/src/components/common/Navigation/CollectionsDrawer.vue
@@ -25,31 +25,18 @@ function clear() {
     class="bg-terciary"
   >
     <template #prepend>
-      <v-list>
-        <v-list-item>
-          <v-btn
-            variant="outlined"
-            color="romm-accent-1"
-            prepend-icon="mdi-plus"
-            block
-            >Add Collection</v-btn
-          >
-        </v-list-item>
-        <v-list-item>
-          <v-text-field
-            v-model="searchText"
-            prepend-inner-icon="mdi-filter-outline"
-            clearable
-            hide-details
-            @click:clear="clear"
-            @update:model-value=""
-            single-line
-            label="Search collection"
-            density="compact"
-            variant="outlined"
-          ></v-text-field>
-        </v-list-item>
-      </v-list>
+      <v-text-field
+        v-model="searchText"
+        prepend-inner-icon="mdi-filter-outline"
+        clearable
+        hide-details
+        @click:clear="clear"
+        @update:model-value=""
+        single-line
+        label="Search collection"
+        variant="solo-filled"
+        rounded="0"
+      ></v-text-field>
     </template>
     <v-list lines="two" rounded="0" class="pa-0">
       <v-list-item
@@ -76,5 +63,15 @@ function clear() {
         </template>
       </v-list-item>
     </v-list>
+    <template #append>
+      <v-btn
+        variant="tonal"
+        color="romm-accent-1"
+        prepend-icon="mdi-plus"
+        size="large"
+        block
+        >Add Collection</v-btn
+      >
+    </template>
   </v-navigation-drawer>
 </template>
diff --git a/frontend/src/components/common/Navigation/PlatformsDrawer.vue b/frontend/src/components/common/Navigation/PlatformsDrawer.vue
index 26c4bfff2..96b04f984 100644
--- a/frontend/src/components/common/Navigation/PlatformsDrawer.vue
+++ b/frontend/src/components/common/Navigation/PlatformsDrawer.vue
@@ -27,22 +27,18 @@ function clear() {
     class="bg-terciary"
   >
     <template #prepend>
-      <v-list>
-        <v-list-item>
-          <v-text-field
-            v-model="searchText"
-            prepend-inner-icon="mdi-filter-outline"
-            clearable
-            hide-details
-            @click:clear="clear"
-            @update:model-value=""
-            single-line
-            label="Search platform"
-            density="compact"
-            variant="outlined"
-          ></v-text-field>
-        </v-list-item>
-      </v-list>
+      <v-text-field
+        v-model="searchText"
+        prepend-inner-icon="mdi-filter-outline"
+        clearable
+        hide-details
+        @click:clear="clear"
+        @update:model-value=""
+        single-line
+        label="Search platform"
+        variant="solo-filled"
+        rounded="0"
+      ></v-text-field>
     </template>
     <v-list lines="two" rounded="0" class="pa-0">
       <platform-list-item

From 08ff388edf9cbbeabc4dd27a24fc86b91fdde831 Mon Sep 17 00:00:00 2001
From: Zurdi <zurdizurdo25@gmail.com>
Date: Fri, 28 Jun 2024 18:38:51 +0200
Subject: [PATCH 04/33] little ui tweaks

---
 frontend/src/components/common/Game/Card/Flags.vue         | 1 -
 frontend/src/components/common/Game/Dialog/MatchRom.vue    | 7 ++++++-
 .../src/components/common/Game/Dialog/SearchCoverRom.vue   | 1 +
 frontend/src/components/common/Game/Dialog/SearchRom.vue   | 3 ++-
 frontend/src/components/common/Game/Table.vue              | 2 +-
 5 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/common/Game/Card/Flags.vue b/frontend/src/components/common/Game/Card/Flags.vue
index ab6bf47ac..adeecfc12 100644
--- a/frontend/src/components/common/Game/Card/Flags.vue
+++ b/frontend/src/components/common/Game/Card/Flags.vue
@@ -41,7 +41,6 @@ const showSiblings = isNull(localStorage.getItem("settings.showSiblings"))
     </v-chip>
     <v-chip
       v-if="rom.siblings && rom.siblings.length > 0 && showSiblings"
-      :title="`${rom.siblings.length + 1} versions`"
       class="translucent-dark mr-1 mt-1"
       density="compact"
     >
diff --git a/frontend/src/components/common/Game/Dialog/MatchRom.vue b/frontend/src/components/common/Game/Dialog/MatchRom.vue
index 0caedd0ed..ef6ce6e4c 100644
--- a/frontend/src/components/common/Game/Dialog/MatchRom.vue
+++ b/frontend/src/components/common/Game/Dialog/MatchRom.vue
@@ -39,7 +39,9 @@ emitter?.on("showMatchRomDialog", (romToSearch) => {
   rom.value = romToSearch;
   searchTerm.value = romToSearch.name || romToSearch.file_name_no_tags || "";
   show.value = true;
-  searchRom();
+  if (rom.value.igdb_id || rom.value.moby_id) {
+    searchRom();
+  }
 });
 
 // Functions
@@ -266,11 +268,13 @@ onBeforeUnmount(() => {
       <v-row class="align-center" no-gutters>
         <v-col cols="6" sm="8">
           <v-text-field
+            autofocus
             id="search-text-field"
             @keyup.enter="searchRom()"
             @click:clear="searchTerm = ''"
             class="bg-terciary"
             v-model="searchTerm"
+            :disabled="searching"
             label="Search"
             hide-details
             clearable
@@ -278,6 +282,7 @@ onBeforeUnmount(() => {
         </v-col>
         <v-col cols="4" sm="3">
           <v-select
+            :disabled="searching"
             label="by"
             class="bg-terciary"
             :items="['ID', 'Name']"
diff --git a/frontend/src/components/common/Game/Dialog/SearchCoverRom.vue b/frontend/src/components/common/Game/Dialog/SearchCoverRom.vue
index 4f69673ed..015463cbf 100644
--- a/frontend/src/components/common/Game/Dialog/SearchCoverRom.vue
+++ b/frontend/src/components/common/Game/Dialog/SearchCoverRom.vue
@@ -151,6 +151,7 @@ onBeforeUnmount(() => {
             @click:clear="searchTerm = ''"
             class="bg-terciary"
             v-model="searchTerm"
+            :disabled="searching"
             label="Search"
             hide-details
             clearable
diff --git a/frontend/src/components/common/Game/Dialog/SearchRom.vue b/frontend/src/components/common/Game/Dialog/SearchRom.vue
index 86311a4d1..837b4b64b 100644
--- a/frontend/src/components/common/Game/Dialog/SearchRom.vue
+++ b/frontend/src/components/common/Game/Dialog/SearchRom.vue
@@ -117,6 +117,7 @@ onBeforeUnmount(() => {
             @keyup.enter="searchRoms"
             @click:clear="searchRoms"
             v-model="searchValue"
+            :disabled="searching"
             label="Search"
             hide-details
             class="bg-terciary"
@@ -128,7 +129,7 @@ onBeforeUnmount(() => {
             label="Platform"
             class="bg-terciary"
             item-title="platform_name"
-            :disabled="platforms.length == 0"
+            :disabled="platforms.length == 0 || searching"
             hide-details
             clearable
             single-line
diff --git a/frontend/src/components/common/Game/Table.vue b/frontend/src/components/common/Game/Table.vue
index 2be0d1a15..e89805a53 100644
--- a/frontend/src/components/common/Game/Table.vue
+++ b/frontend/src/components/common/Game/Table.vue
@@ -144,7 +144,7 @@ onMounted(() => {
               class="translucent-dark ml-2"
               size="x-small"
             >
-              <span class="text-caption">+{{ item.siblings.length + 1 }}</span>
+              <span class="text-caption">+{{ item.siblings.length }}</span>
             </v-chip>
           </template>
         </v-list-item>

From cc9e05f6680267395c91eb35accdc5a1395a1c0b Mon Sep 17 00:00:00 2001
From: Zurdi <zurdizurdo25@gmail.com>
Date: Mon, 1 Jul 2024 23:47:15 +0200
Subject: [PATCH 05/33] collections migration added

---
 backend/alembic/env.py                        |   1 +
 backend/alembic/versions/0022_collections_.py |  66 +++++++++++
 backend/endpoints/collections.py              | 106 ++++++++++++++++++
 backend/endpoints/responses/collection.py     |  21 ++++
 backend/exceptions/endpoint_exceptions.py     |  26 +++++
 .../handler/database/collections_handler.py   |  40 +++++++
 backend/handler/database/roms_handler.py      |   3 -
 backend/models/collection.py                  |  35 +++---
 8 files changed, 279 insertions(+), 19 deletions(-)
 create mode 100644 backend/alembic/versions/0022_collections_.py
 create mode 100644 backend/endpoints/collections.py
 create mode 100644 backend/endpoints/responses/collection.py
 create mode 100644 backend/handler/database/collections_handler.py

diff --git a/backend/alembic/env.py b/backend/alembic/env.py
index 2bf6bfbc6..85294e200 100644
--- a/backend/alembic/env.py
+++ b/backend/alembic/env.py
@@ -6,6 +6,7 @@
 from config.config_manager import ConfigManager
 from models.assets import Save, Screenshot, State  # noqa
 from models.base import BaseModel
+from models.collection import Collection
 from models.firmware import Firmware  # noqa
 from models.platform import Platform  # noqa
 from models.rom import Rom  # noqa
diff --git a/backend/alembic/versions/0022_collections_.py b/backend/alembic/versions/0022_collections_.py
new file mode 100644
index 000000000..351780eed
--- /dev/null
+++ b/backend/alembic/versions/0022_collections_.py
@@ -0,0 +1,66 @@
+"""empty message
+
+Revision ID: 0022_collections
+Revises: 0021_rom_user
+Create Date: 2024-07-01 23:23:39.090219
+
+"""
+
+import sqlalchemy as sa
+from alembic import op
+from sqlalchemy.dialects import mysql
+
+# revision identifiers, used by Alembic.
+revision = "0022_collections"
+down_revision = "0021_rom_user"
+branch_labels = None
+depends_on = None
+
+
+def upgrade() -> None:
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.create_table(
+        "collections",
+        sa.Column("id", sa.Integer(), autoincrement=True, nullable=False),
+        sa.Column("name", sa.String(length=400), nullable=False),
+        sa.Column("description", sa.Text(), nullable=True),
+        sa.Column("logo_path", sa.String(length=1000), nullable=True),
+        sa.Column("roms", sa.JSON(), nullable=False),
+        sa.Column("user_id", sa.Integer(), nullable=False),
+        sa.Column("is_public", sa.Boolean(), nullable=False),
+        sa.Column(
+            "created_at",
+            sa.DateTime(timezone=True),
+            server_default=sa.text("now()"),
+            nullable=False,
+        ),
+        sa.Column(
+            "updated_at",
+            sa.DateTime(timezone=True),
+            server_default=sa.text("now()"),
+            nullable=False,
+        ),
+        sa.ForeignKeyConstraint(["user_id"], ["users.id"], ondelete="CASCADE"),
+        sa.PrimaryKeyConstraint("id"),
+    )
+    with op.batch_alter_table("rom_user", schema=None) as batch_op:
+        batch_op.alter_column(
+            "is_main_sibling",
+            existing_type=mysql.TINYINT(display_width=1),
+            nullable=True,
+        )
+
+    # ### end Alembic commands ###
+
+
+def downgrade() -> None:
+    # ### commands auto generated by Alembic - please adjust! ###
+    with op.batch_alter_table("rom_user", schema=None) as batch_op:
+        batch_op.alter_column(
+            "is_main_sibling",
+            existing_type=mysql.TINYINT(display_width=1),
+            nullable=False,
+        )
+
+    op.drop_table("collections")
+    # ### end Alembic commands ###
diff --git a/backend/endpoints/collections.py b/backend/endpoints/collections.py
new file mode 100644
index 000000000..1f0622a63
--- /dev/null
+++ b/backend/endpoints/collections.py
@@ -0,0 +1,106 @@
+from decorators.auth import protected_route
+from endpoints.responses import MessageResponse
+from endpoints.responses.collection import CollectionSchema
+from exceptions.endpoint_exceptions import CollectionNotFoundInDatabaseException
+from fastapi import APIRouter, Request
+from handler.database import db_collection_handler
+from handler.filesystem import fs_collection_handler
+from logger.logger import log
+
+router = APIRouter()
+
+
+@protected_route(router.post, "/collections", ["collections.write"])
+async def add_collection(request: Request) -> CollectionSchema:
+    """Create collection endpoint
+
+    Args:
+        request (Request): Fastapi Request object
+
+    Returns:
+        CollectionSchema: Just created collection
+    """
+
+    data = await request.json()
+    cleaned_data = {}
+    cleaned_data["name"] = data["name"]
+    cleaned_data["description"] = data["description"]
+    cleaned_data["user_id"] = request.user.id
+    return fs_collection_handler.add_collection(cleaned_data)
+
+
+@protected_route(router.get, "/collections", ["collections.read"])
+def get_collections(request: Request) -> list[CollectionSchema]:
+    """Get collections endpoint
+
+    Args:
+        request (Request): Fastapi Request object
+        id (int, optional): Collection id. Defaults to None.
+
+    Returns:
+        list[CollectionSchema]: List of collections
+    """
+
+    return db_collection_handler.get_collections()
+
+
+@protected_route(router.get, "/collections/{id}", ["collections.read"])
+def get_collection(request: Request, id: int) -> CollectionSchema:
+    """Get collections endpoint
+
+    Args:
+        request (Request): Fastapi Request object
+        id (int, optional): Collection id. Defaults to None.
+
+    Returns:
+        CollectionSchema: Collection
+    """
+
+    collection = db_collection_handler.get_collection(id)
+
+    if not collection:
+        raise CollectionNotFoundInDatabaseException(id)
+
+    return collection
+
+
+@protected_route(router.put, "/collections/{id}", ["collections.write"])
+async def update_collection(request: Request) -> MessageResponse:
+    """Update collection endpoint
+
+    Args:
+        request (Request): Fastapi Request object
+
+    Returns:
+        MessageResponse: Standard message response
+    """
+
+    return {"msg": "Enpoint not available yet"}
+
+
+@protected_route(router.delete, "/collections/{id}", ["collections.write"])
+async def delete_collections(request: Request, id: int) -> MessageResponse:
+    """Delete collections endpoint
+
+    Args:
+        request (Request): Fastapi Request object
+        {
+            "collections": List of rom's ids to delete
+        }
+
+    Raises:
+        HTTPException: Collection not found
+
+    Returns:
+        MessageResponse: Standard message response
+    """
+
+    collection = db_collection_handler.get_collection(id)
+
+    if not collection:
+        raise CollectionNotFoundInDatabaseException(id)
+
+    log.info(f"Deleting {collection.name} [{collection.fs_slug}] from database")
+    db_collection_handler.delete_collection(id)
+
+    return {"msg": f"{collection.name} - [{collection.fs_slug}] deleted successfully!"}
diff --git a/backend/endpoints/responses/collection.py b/backend/endpoints/responses/collection.py
new file mode 100644
index 000000000..c6d5d8383
--- /dev/null
+++ b/backend/endpoints/responses/collection.py
@@ -0,0 +1,21 @@
+from datetime import datetime
+
+from pydantic import BaseModel
+
+
+class CollectionSchema(BaseModel):
+    id: int
+    name: str
+    description: str
+    logo_path: str = ""
+    roms: set[int] = {}
+    rom_count: int
+    user_id: int
+    user__username: str
+    is_public: bool
+
+    created_at: datetime
+    updated_at: datetime
+
+    class Config:
+        from_attributes = True
diff --git a/backend/exceptions/endpoint_exceptions.py b/backend/exceptions/endpoint_exceptions.py
index c668b0e96..a2d206739 100644
--- a/backend/exceptions/endpoint_exceptions.py
+++ b/backend/exceptions/endpoint_exceptions.py
@@ -26,3 +26,29 @@ def __init__(self, id):
 
     def __repr__(self) -> str:
         return self.message
+
+
+class CollectionNotFoundInDatabaseException(Exception):
+    def __init__(self, id):
+        self.message = f"Collection with id '{id}' not found"
+        super().__init__(self.message)
+        log.critical(self.message)
+        raise HTTPException(
+            status_code=status.HTTP_500_INTERNAL_SERVER_ERROR, detail=self.message
+        )
+
+    def __repr__(self) -> str:
+        return self.message
+
+
+class CollectionAlreadyExistsException(Exception):
+    def __init__(self, name):
+        self.message = f"Collection with name '{name}' already exists"
+        super().__init__(self.message)
+        log.critical(self.message)
+        raise HTTPException(
+            status_code=status.HTTP_500_INTERNAL_SERVER_ERROR, detail=self.message
+        )
+
+    def __repr__(self) -> str:
+        return self.message
diff --git a/backend/handler/database/collections_handler.py b/backend/handler/database/collections_handler.py
new file mode 100644
index 000000000..a8812b05e
--- /dev/null
+++ b/backend/handler/database/collections_handler.py
@@ -0,0 +1,40 @@
+from decorators.database import begin_session
+from models.collection import Collection
+from models.rom import Rom
+from sqlalchemy import Select, delete, or_, select
+from sqlalchemy.orm import Query, Session
+
+from .base_handler import DBBaseHandler
+
+
+class DBCollectionsHandler(DBBaseHandler):
+    @begin_session
+    def add_collection(
+        self, data: dict, query: Query = None, session: Session = None
+    ) -> Collection | None:
+        collection = session.merge(**data)
+        session.flush()
+
+        return session.scalar(query.filter_by(id=collection.id).limit(1))
+
+    @begin_session
+    def get_collection(
+        self, id: int, *, query: Query = None, session: Session = None
+    ) -> Collection | None:
+        return session.scalar(query.filter_by(id=id).limit(1))
+
+    @begin_session
+    def get_collections(self, *, session: Session = None) -> Select[tuple[Collection]]:
+        return (
+            session.scalars(select(Collection).order_by(Collection.name.asc()))  # type: ignore[attr-defined]
+            .unique()
+            .all()
+        )
+
+    @begin_session
+    def delete_collection(self, id: int, session: Session = None) -> int:
+        return session.execute(
+            delete(Collection)
+            .where(Collection.id == id)
+            .execution_options(synchronize_session="evaluate")
+        )
diff --git a/backend/handler/database/roms_handler.py b/backend/handler/database/roms_handler.py
index 6c881efaa..998fa714d 100644
--- a/backend/handler/database/roms_handler.py
+++ b/backend/handler/database/roms_handler.py
@@ -8,9 +8,6 @@
 from .base_handler import DBBaseHandler
 
 
-class ImplementationError(Exception): ...
-
-
 def with_details(func):
     @functools.wraps(func)
     def wrapper(*args, **kwargs):
diff --git a/backend/models/collection.py b/backend/models/collection.py
index 9c988da20..bbac97d26 100644
--- a/backend/models/collection.py
+++ b/backend/models/collection.py
@@ -1,32 +1,35 @@
-from datetime import datetime
+from __future__ import annotations
 
 from models.base import BaseModel
-from models.rom import Rom
-from sqlalchemy import DateTime, String, Text, func, select
-from sqlalchemy.orm import Mapped, column_property, mapped_column, relationship
+from models.user import User
+from sqlalchemy import JSON, ForeignKey, String, Text
+from sqlalchemy.orm import Mapped, mapped_column, relationship
 
 
 class Collection(BaseModel):
     __tablename__ = "collections"
 
     id: Mapped[int] = mapped_column(primary_key=True, autoincrement=True)
-    name: Mapped[str | None] = mapped_column(String(length=400))
+
+    name: Mapped[str] = mapped_column(String(length=400))
     description: Mapped[str | None] = mapped_column(Text)
     logo_path: Mapped[str | None] = mapped_column(String(length=1000), default="")
 
-    roms: Mapped[list["Rom"]] = relationship(back_populates="platform")
-
-    created_at: Mapped[datetime] = mapped_column(
-        DateTime(timezone=True), server_default=func.now()
-    )
-    updated_at: Mapped[datetime] = mapped_column(
-        DateTime(timezone=True), server_default=func.now(), onupdate=func.now()
+    roms: Mapped[set[int]] = mapped_column(
+        JSON, default=[], doc="Rom id's that belong to this collection"
     )
 
-    # This runs a subquery to get the count of roms for the platform
-    rom_count = column_property(
-        select(func.count(Rom.id)).where(Rom.platform_id == id).scalar_subquery()
-    )
+    user_id: Mapped[int] = mapped_column(ForeignKey("users.id", ondelete="CASCADE"))
+    is_public: Mapped[bool] = mapped_column(default=False)
+    user: Mapped[User] = relationship(lazy="joined", back_populates="collections")
+
+    @property
+    def user__username(self) -> str:
+        return self.user.username
+
+    @property
+    def rom_count(self):
+        return len(self.roms)
 
     def __repr__(self) -> str:
         return self.name

From 2b6a86898a5fa02787da586e0d047e9d710b4d33 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Tue, 2 Jul 2024 01:48:43 +0200
Subject: [PATCH 06/33] cleanup scan socket

---
 backend/endpoints/sockets/scan.py | 13 ++-----------
 1 file changed, 2 insertions(+), 11 deletions(-)

diff --git a/backend/endpoints/sockets/scan.py b/backend/endpoints/sockets/scan.py
index b485c63d4..1b67e1bf1 100644
--- a/backend/endpoints/sockets/scan.py
+++ b/backend/endpoints/sockets/scan.py
@@ -156,6 +156,7 @@ async def scan_platforms(
                     exclude=EXCLUDED_FROM_DUMP
                 ),
             )
+            await sm.emit("", None)
 
             # Scanning firmware
             try:
@@ -187,17 +188,6 @@ async def scan_platforms(
                 _added_firmware = db_firmware_handler.add_firmware(scanned_firmware)
                 firmware = db_firmware_handler.get_firmware(_added_firmware.id)
 
-                await sm.emit(
-                    "scan:scanning_firmware",
-                    {
-                        "platform_name": platform.name,
-                        "platform_slug": platform.slug,
-                        **FirmwareSchema.model_validate(firmware).model_dump(
-                            exclude=EXCLUDED_FROM_DUMP
-                        ),
-                    },
-                )
-
             # Scanning roms
             try:
                 fs_roms = fs_rom_handler.get_roms(platform)
@@ -269,6 +259,7 @@ async def scan_platforms(
                             ),
                         },
                     )
+                    await sm.emit("", None)
 
             db_rom_handler.purge_roms(
                 platform.id, [rom["file_name"] for rom in fs_roms]

From ac6975a58c15e253e81af1b3bb2d0fbded3926c7 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Tue, 2 Jul 2024 12:23:41 +0200
Subject: [PATCH 07/33] fixed pinia router typed

---
 frontend/src/plugins/pinia.d.ts | 8 ++++++++
 frontend/tsconfig.json          | 3 ++-
 2 files changed, 10 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/plugins/pinia.d.ts

diff --git a/frontend/src/plugins/pinia.d.ts b/frontend/src/plugins/pinia.d.ts
new file mode 100644
index 000000000..32a722b64
--- /dev/null
+++ b/frontend/src/plugins/pinia.d.ts
@@ -0,0 +1,8 @@
+import "pinia";
+import { Router } from "vue-router";
+
+declare module "pinia" {
+  export interface PiniaCustomProperties {
+    $router: Router;
+  }
+}
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index ee0b2a2b4..e565a9fb7 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -10,6 +10,7 @@
     "noImplicitAny": true,
     "paths": {
       "@/*": ["./src/*"]
-    }
+    },
+    "types": ["./src/plugins/pinia.d.ts"]
   }
 }

From 1d6ba70080b3bd4abb0fe27ce6e327828830aa32 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Tue, 2 Jul 2024 12:24:06 +0200
Subject: [PATCH 08/33] collections get_roms endpoint added

---
 backend/alembic/versions/0022_collections_.py |   3 +-
 backend/endpoints/collections.py              |  30 ++-
 backend/endpoints/platform.py                 |   3 +-
 backend/endpoints/responses/collection.py     |   5 +-
 backend/endpoints/rom.py                      |   3 +
 backend/handler/auth/base_handler.py          |   2 +
 backend/handler/database/__init__.py          |   2 +
 .../handler/database/collections_handler.py   |  32 +--
 backend/handler/database/roms_handler.py      |  35 ++--
 backend/main.py                               |   2 +
 backend/models/collection.py                  |   4 +-
 backend/models/user.py                        |   2 +
 frontend/src/__generated__/index.ts           |   1 +
 .../__generated__/models/CollectionSchema.ts  |  19 ++
 .../components/Gallery/AppBar/AdminMenu.vue   |  14 --
 .../Gallery/AppBar/Collection/AdminMenu.vue   |   9 +
 .../Gallery/AppBar/{ => Collection}/Base.vue  |  16 +-
 .../Gallery/AppBar/Collection/DeleteBtn.vue   |  31 +++
 .../Gallery/AppBar/Platform/AdminMenu.vue     |  14 ++
 .../Gallery/AppBar/Platform/Base.vue          |  47 +++++
 .../AppBar/{ => Platform}/DeleteBtn.vue       |  17 +-
 .../AppBar/{ => Platform}/FirmwareBtn.vue     |   0
 .../{ => AppBar/Platform}/FirmwareDrawer.vue  |   0
 .../Gallery/AppBar/{ => Platform}/ScanBtn.vue |   0
 .../AppBar/{ => Platform}/UploadRomBtn.vue    |   0
 .../Gallery/AppBar/{ => common}/FilterBtn.vue |   0
 .../{ => AppBar/common}/FilterDrawer/Base.vue |   2 +-
 .../FilterDrawer/FilterUnmatchedBtn.vue       |   0
 .../AppBar/{ => common}/FilterTextField.vue   |   0
 .../AppBar/{ => common}/GalleryViewBtn.vue    |   0
 .../AppBar/{ => common}/SelectingBtn.vue      |   0
 .../Gallery/AppBar/{ => common}/SortBar.vue   |   0
 .../Gallery/AppBar/{ => common}/SortBtn.vue   |   0
 .../src/components/common/Collection/Card.vue |  40 ++++
 .../components/common/Collection/Cover.vue    |  31 +++
 .../Collection/Dialog/CreateCollection.vue    | 187 ++++++++++++++++++
 .../Collection/Dialog/DeleteCollection.vue    |  90 +++++++++
 .../components/common/Collection/ListItem.vue |  47 +++++
 .../components/common/Collection/RAvatar.vue  |  23 +++
 .../src/components/common/EmptyCollection.vue |   8 +
 .../common/Navigation/CollectionsDrawer.vue   |  49 ++---
 .../src/layouts/Dashboard/Collections.vue     |  29 +++
 frontend/src/layouts/Dashboard/Recent.vue     |  18 +-
 .../Dashboard/{Summary.vue => Stats.vue}      |   0
 frontend/src/services/api/collection.ts       |  49 +++++
 frontend/src/services/api/rom.ts              |   3 +
 frontend/src/stores/collections.ts            | 114 +----------
 frontend/src/stores/roms.ts                   |   5 +
 frontend/src/types/emitter.d.ts               |   3 +
 frontend/src/views/Dashboard.vue              |  38 +++-
 frontend/src/views/Gallery/Collection.vue     |  64 +++---
 frontend/src/views/Gallery/Platform.vue       |   2 +-
 frontend/src/views/Home.vue                   |  10 +-
 53 files changed, 845 insertions(+), 258 deletions(-)
 create mode 100644 frontend/src/__generated__/models/CollectionSchema.ts
 delete mode 100644 frontend/src/components/Gallery/AppBar/AdminMenu.vue
 create mode 100644 frontend/src/components/Gallery/AppBar/Collection/AdminMenu.vue
 rename frontend/src/components/Gallery/AppBar/{ => Collection}/Base.vue (56%)
 create mode 100644 frontend/src/components/Gallery/AppBar/Collection/DeleteBtn.vue
 create mode 100644 frontend/src/components/Gallery/AppBar/Platform/AdminMenu.vue
 create mode 100644 frontend/src/components/Gallery/AppBar/Platform/Base.vue
 rename frontend/src/components/Gallery/AppBar/{ => Platform}/DeleteBtn.vue (68%)
 rename frontend/src/components/Gallery/AppBar/{ => Platform}/FirmwareBtn.vue (100%)
 rename frontend/src/components/Gallery/{ => AppBar/Platform}/FirmwareDrawer.vue (100%)
 rename frontend/src/components/Gallery/AppBar/{ => Platform}/ScanBtn.vue (100%)
 rename frontend/src/components/Gallery/AppBar/{ => Platform}/UploadRomBtn.vue (100%)
 rename frontend/src/components/Gallery/AppBar/{ => common}/FilterBtn.vue (100%)
 rename frontend/src/components/Gallery/{ => AppBar/common}/FilterDrawer/Base.vue (95%)
 rename frontend/src/components/Gallery/{ => AppBar/common}/FilterDrawer/FilterUnmatchedBtn.vue (100%)
 rename frontend/src/components/Gallery/AppBar/{ => common}/FilterTextField.vue (100%)
 rename frontend/src/components/Gallery/AppBar/{ => common}/GalleryViewBtn.vue (100%)
 rename frontend/src/components/Gallery/AppBar/{ => common}/SelectingBtn.vue (100%)
 rename frontend/src/components/Gallery/AppBar/{ => common}/SortBar.vue (100%)
 rename frontend/src/components/Gallery/AppBar/{ => common}/SortBtn.vue (100%)
 create mode 100644 frontend/src/components/common/Collection/Card.vue
 create mode 100644 frontend/src/components/common/Collection/Cover.vue
 create mode 100644 frontend/src/components/common/Collection/Dialog/CreateCollection.vue
 create mode 100644 frontend/src/components/common/Collection/Dialog/DeleteCollection.vue
 create mode 100644 frontend/src/components/common/Collection/ListItem.vue
 create mode 100644 frontend/src/components/common/Collection/RAvatar.vue
 create mode 100644 frontend/src/components/common/EmptyCollection.vue
 create mode 100644 frontend/src/layouts/Dashboard/Collections.vue
 rename frontend/src/layouts/Dashboard/{Summary.vue => Stats.vue} (100%)
 create mode 100644 frontend/src/services/api/collection.ts

diff --git a/backend/alembic/versions/0022_collections_.py b/backend/alembic/versions/0022_collections_.py
index 351780eed..b67a3a0c8 100644
--- a/backend/alembic/versions/0022_collections_.py
+++ b/backend/alembic/versions/0022_collections_.py
@@ -24,7 +24,8 @@ def upgrade() -> None:
         sa.Column("id", sa.Integer(), autoincrement=True, nullable=False),
         sa.Column("name", sa.String(length=400), nullable=False),
         sa.Column("description", sa.Text(), nullable=True),
-        sa.Column("logo_path", sa.String(length=1000), nullable=True),
+        sa.Column("path_cover_l", sa.String(length=1000), nullable=True),
+        sa.Column("path_cover_s", sa.String(length=1000), nullable=True),
         sa.Column("roms", sa.JSON(), nullable=False),
         sa.Column("user_id", sa.Integer(), nullable=False),
         sa.Column("is_public", sa.Boolean(), nullable=False),
diff --git a/backend/endpoints/collections.py b/backend/endpoints/collections.py
index 1f0622a63..f7896c530 100644
--- a/backend/endpoints/collections.py
+++ b/backend/endpoints/collections.py
@@ -1,11 +1,14 @@
 from decorators.auth import protected_route
 from endpoints.responses import MessageResponse
 from endpoints.responses.collection import CollectionSchema
-from exceptions.endpoint_exceptions import CollectionNotFoundInDatabaseException
+from exceptions.endpoint_exceptions import (
+    CollectionAlreadyExistsException,
+    CollectionNotFoundInDatabaseException,
+)
 from fastapi import APIRouter, Request
 from handler.database import db_collection_handler
-from handler.filesystem import fs_collection_handler
 from logger.logger import log
+from models.collection import Collection
 
 router = APIRouter()
 
@@ -22,11 +25,18 @@ async def add_collection(request: Request) -> CollectionSchema:
     """
 
     data = await request.json()
-    cleaned_data = {}
-    cleaned_data["name"] = data["name"]
-    cleaned_data["description"] = data["description"]
-    cleaned_data["user_id"] = request.user.id
-    return fs_collection_handler.add_collection(cleaned_data)
+    cleaned_data = {
+        "name": data["name"],
+        "description": data["description"],
+        "user_id": request.user.id,
+    }
+    collection_db = db_collection_handler.get_collection_by_name(
+        cleaned_data["name"], request.user.id
+    )
+    if collection_db:
+        raise CollectionAlreadyExistsException(cleaned_data["name"])
+    collection = Collection(**cleaned_data)
+    return db_collection_handler.add_collection(collection)
 
 
 @protected_route(router.get, "/collections", ["collections.read"])
@@ -41,7 +51,7 @@ def get_collections(request: Request) -> list[CollectionSchema]:
         list[CollectionSchema]: List of collections
     """
 
-    return db_collection_handler.get_collections()
+    return db_collection_handler.get_collections(user_id=request.user.id)
 
 
 @protected_route(router.get, "/collections/{id}", ["collections.read"])
@@ -100,7 +110,7 @@ async def delete_collections(request: Request, id: int) -> MessageResponse:
     if not collection:
         raise CollectionNotFoundInDatabaseException(id)
 
-    log.info(f"Deleting {collection.name} [{collection.fs_slug}] from database")
+    log.info(f"Deleting {collection.name} from database")
     db_collection_handler.delete_collection(id)
 
-    return {"msg": f"{collection.name} - [{collection.fs_slug}] deleted successfully!"}
+    return {"msg": f"{collection.name} deleted successfully!"}
diff --git a/backend/endpoints/platform.py b/backend/endpoints/platform.py
index 85b018451..b701e66b1 100644
--- a/backend/endpoints/platform.py
+++ b/backend/endpoints/platform.py
@@ -34,8 +34,7 @@ async def add_platforms(request: Request) -> PlatformSchema:
     except PlatformAlreadyExistsException:
         log.info(f"Detected platform: {fs_slug}")
     scanned_platform = scan_platform(fs_slug, [fs_slug])
-    platform = db_platform_handler.add_platform(scanned_platform)
-    return platform
+    return db_platform_handler.add_platform(scanned_platform)
 
 
 @protected_route(router.get, "/platforms", ["platforms.read"])
diff --git a/backend/endpoints/responses/collection.py b/backend/endpoints/responses/collection.py
index c6d5d8383..d6e8d15cc 100644
--- a/backend/endpoints/responses/collection.py
+++ b/backend/endpoints/responses/collection.py
@@ -7,8 +7,9 @@ class CollectionSchema(BaseModel):
     id: int
     name: str
     description: str
-    logo_path: str = ""
-    roms: set[int] = {}
+    path_cover_l: str | None
+    path_cover_s: str | None
+    roms: set[int]
     rom_count: int
     user_id: int
     user__username: str
diff --git a/backend/endpoints/rom.py b/backend/endpoints/rom.py
index 907afad42..f02e26c9e 100644
--- a/backend/endpoints/rom.py
+++ b/backend/endpoints/rom.py
@@ -94,6 +94,7 @@ def add_roms(
 def get_roms(
     request: Request,
     platform_id: int | None = None,
+    collection_id: int | None = None,
     search_term: str = "",
     limit: int | None = None,
     order_by: str = "name",
@@ -108,8 +109,10 @@ def get_roms(
     Returns:
         list[RomSchema]: List of roms stored in the database
     """
+
     db_roms = db_rom_handler.get_roms(
         platform_id=platform_id,
+        collection_id=collection_id,
         search_term=search_term.lower(),
         order_by=order_by.lower(),
         order_dir=order_dir.lower(),
diff --git a/backend/handler/auth/base_handler.py b/backend/handler/auth/base_handler.py
index 3127d0cf0..c2350aab1 100644
--- a/backend/handler/auth/base_handler.py
+++ b/backend/handler/auth/base_handler.py
@@ -24,6 +24,8 @@
     "firmware.read": "View firmware",
     "roms.user.read": "View user-rom properties",
     "roms.user.write": "Modify user-rom properties",
+    "collections.read": "View collections",
+    "collections.write": "Modify collections",
 }
 
 WRITE_SCOPES_MAP: Final = {
diff --git a/backend/handler/database/__init__.py b/backend/handler/database/__init__.py
index e09b022bc..65816f359 100644
--- a/backend/handler/database/__init__.py
+++ b/backend/handler/database/__init__.py
@@ -1,3 +1,4 @@
+from .collections_handler import DBCollectionsHandler
 from .firmware_handler import DBFirmwareHandler
 from .platforms_handler import DBPlatformsHandler
 from .roms_handler import DBRomsHandler
@@ -15,3 +16,4 @@
 db_state_handler = DBStatesHandler()
 db_stats_handler = DBStatsHandler()
 db_user_handler = DBUsersHandler()
+db_collection_handler = DBCollectionsHandler()
diff --git a/backend/handler/database/collections_handler.py b/backend/handler/database/collections_handler.py
index a8812b05e..1a439aa01 100644
--- a/backend/handler/database/collections_handler.py
+++ b/backend/handler/database/collections_handler.py
@@ -1,8 +1,7 @@
 from decorators.database import begin_session
 from models.collection import Collection
-from models.rom import Rom
-from sqlalchemy import Select, delete, or_, select
-from sqlalchemy.orm import Query, Session
+from sqlalchemy import Select, and_, delete, or_, select
+from sqlalchemy.orm import Session
 
 from .base_handler import DBBaseHandler
 
@@ -10,23 +9,34 @@
 class DBCollectionsHandler(DBBaseHandler):
     @begin_session
     def add_collection(
-        self, data: dict, query: Query = None, session: Session = None
+        self, collection: Collection, session: Session = None
     ) -> Collection | None:
-        collection = session.merge(**data)
+        collection = session.merge(collection)
         session.flush()
+        return session.scalar(select(Collection).filter_by(id=collection.id).limit(1))
 
-        return session.scalar(query.filter_by(id=collection.id).limit(1))
+    @begin_session
+    def get_collection(self, id: int, session: Session = None) -> Collection | None:
+        return session.scalar(select(Collection).filter_by(id=id).limit(1))
 
     @begin_session
-    def get_collection(
-        self, id: int, *, query: Query = None, session: Session = None
+    def get_collection_by_name(
+        self, name: str, user_id: int, session: Session = None
     ) -> Collection | None:
-        return session.scalar(query.filter_by(id=id).limit(1))
+        return session.scalar(
+            select(Collection).filter_by(name=name, user_id=user_id).limit(1)
+        )
 
     @begin_session
-    def get_collections(self, *, session: Session = None) -> Select[tuple[Collection]]:
+    def get_collections(
+        self, user_id: int, session: Session = None
+    ) -> Select[tuple[Collection]]:
         return (
-            session.scalars(select(Collection).order_by(Collection.name.asc()))  # type: ignore[attr-defined]
+            session.scalars(
+                select(Collection)
+                .filter_by(user_id=user_id)
+                .order_by(Collection.name.asc())
+            )  # type: ignore[attr-defined]
             .unique()
             .all()
         )
diff --git a/backend/handler/database/roms_handler.py b/backend/handler/database/roms_handler.py
index 998fa714d..5fa17e399 100644
--- a/backend/handler/database/roms_handler.py
+++ b/backend/handler/database/roms_handler.py
@@ -1,6 +1,7 @@
 import functools
 
 from decorators.database import begin_session
+from models.collection import Collection
 from models.rom import Rom, RomUser
 from sqlalchemy import and_, delete, func, or_, select, update
 from sqlalchemy.orm import Query, Session, selectinload
@@ -44,10 +45,26 @@ def wrapper(*args, **kwargs):
 
 
 class DBRomsHandler(DBBaseHandler):
-    def _filter(self, data, platform_id: int | None, search_term: str):
+    def _filter(
+        self,
+        data,
+        platform_id: int | None,
+        collection_id: int | None,
+        search_term: str,
+        session: Session,
+    ):
         if platform_id:
             data = data.filter(Rom.platform_id == platform_id)
 
+        elif collection_id:
+            collection = (
+                session.query(Collection)
+                .filter(Collection.id == collection_id)
+                .one_or_none()
+            )
+            if collection:
+                data = data.filter(Rom.id.in_(collection.roms))
+
         if search_term:
             data = data.filter(
                 or_(
@@ -90,6 +107,7 @@ def get_roms(
         self,
         *,
         platform_id: int | None = None,
+        collection_id: int | None = None,
         search_term: str = "",
         order_by: str = "name",
         order_dir: str = "asc",
@@ -97,17 +115,12 @@ def get_roms(
         query: Query = None,
         session: Session = None,
     ) -> list[Rom]:
-        return (
-            session.scalars(
-                self._order(
-                    self._filter(query, platform_id, search_term),
-                    order_by,
-                    order_dir,
-                ).limit(limit)
-            )
-            .unique()
-            .all()
+        filtered_query = self._filter(
+            query, platform_id, collection_id, search_term, session
         )
+        ordered_query = self._order(filtered_query, order_by, order_dir)
+        limited_query = ordered_query.limit(limit)
+        return session.scalars(limited_query).unique().all()
 
     @begin_session
     @with_details
diff --git a/backend/main.py b/backend/main.py
index 65f89020d..5f006f900 100644
--- a/backend/main.py
+++ b/backend/main.py
@@ -8,6 +8,7 @@
 from config import DEV_HOST, DEV_PORT, DISABLE_CSRF_PROTECTION, ROMM_AUTH_SECRET_KEY
 from endpoints import (
     auth,
+    collections,
     config,
     feeds,
     firmware,
@@ -93,6 +94,7 @@ async def lifespan(app: FastAPI):
 app.include_router(raw.router)
 app.include_router(screenshots.router)
 app.include_router(firmware.router)
+app.include_router(collections.router)
 
 app.mount("/ws", socket_handler.socket_app)
 
diff --git a/backend/models/collection.py b/backend/models/collection.py
index bbac97d26..4d46cd3ea 100644
--- a/backend/models/collection.py
+++ b/backend/models/collection.py
@@ -13,7 +13,9 @@ class Collection(BaseModel):
 
     name: Mapped[str] = mapped_column(String(length=400))
     description: Mapped[str | None] = mapped_column(Text)
-    logo_path: Mapped[str | None] = mapped_column(String(length=1000), default="")
+
+    path_cover_l: Mapped[str | None] = mapped_column(Text, default="")
+    path_cover_s: Mapped[str | None] = mapped_column(Text, default="")
 
     roms: Mapped[set[int]] = mapped_column(
         JSON, default=[], doc="Rom id's that belong to this collection"
diff --git a/backend/models/user.py b/backend/models/user.py
index c86c2d80d..c1d80f34f 100644
--- a/backend/models/user.py
+++ b/backend/models/user.py
@@ -11,6 +11,7 @@
 
 if TYPE_CHECKING:
     from models.assets import Save, Screenshot, State
+    from models.collection import Collection
     from models.rom import RomUser
 
 
@@ -40,6 +41,7 @@ class User(BaseModel, SimpleUser):
     states: Mapped[list[State]] = relationship(back_populates="user")
     screenshots: Mapped[list[Screenshot]] = relationship(back_populates="user")
     rom_users: Mapped[list[RomUser]] = relationship(back_populates="user")
+    collections: Mapped[list[Collection]] = relationship(back_populates="user")
 
     @property
     def oauth_scopes(self):
diff --git a/frontend/src/__generated__/index.ts b/frontend/src/__generated__/index.ts
index 37f066c7f..5ea59a9cd 100644
--- a/frontend/src/__generated__/index.ts
+++ b/frontend/src/__generated__/index.ts
@@ -13,6 +13,7 @@ export type { Body_add_states_states_post } from "./models/Body_add_states_state
 export type { Body_token_token_post } from "./models/Body_token_token_post";
 export type { Body_update_rom_roms__id__put } from "./models/Body_update_rom_roms__id__put";
 export type { Body_update_user_users__id__put } from "./models/Body_update_user_users__id__put";
+export type { CollectionSchema } from "./models/CollectionSchema";
 export type { ConfigResponse } from "./models/ConfigResponse";
 export type { DetailedRomSchema } from "./models/DetailedRomSchema";
 export type { FirmwareSchema } from "./models/FirmwareSchema";
diff --git a/frontend/src/__generated__/models/CollectionSchema.ts b/frontend/src/__generated__/models/CollectionSchema.ts
new file mode 100644
index 000000000..481255ea9
--- /dev/null
+++ b/frontend/src/__generated__/models/CollectionSchema.ts
@@ -0,0 +1,19 @@
+/* generated using openapi-typescript-codegen -- do no edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+
+export type CollectionSchema = {
+  id: number;
+  name: string;
+  description: string;
+  path_cover_l: string | null;
+  path_cover_s: string | null;
+  roms: Array<number>;
+  rom_count: number;
+  user_id: number;
+  user__username: string;
+  is_public: boolean;
+  created_at: string;
+  updated_at: string;
+};
diff --git a/frontend/src/components/Gallery/AppBar/AdminMenu.vue b/frontend/src/components/Gallery/AppBar/AdminMenu.vue
deleted file mode 100644
index fb3b275f7..000000000
--- a/frontend/src/components/Gallery/AppBar/AdminMenu.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import ScanBtn from "@/components/Gallery/AppBar/ScanBtn.vue";
-import UploadRomBtn from "@/components/Gallery/AppBar/UploadRomBtn.vue";
-import DeleteBtn from "@/components/Gallery/AppBar/DeleteBtn.vue";
-</script>
-
-<template>
-  <v-list rounded="0" class="pa-0">
-    <upload-rom-btn />
-    <scan-btn />
-    <v-divider />
-    <delete-btn />
-  </v-list>
-</template>
diff --git a/frontend/src/components/Gallery/AppBar/Collection/AdminMenu.vue b/frontend/src/components/Gallery/AppBar/Collection/AdminMenu.vue
new file mode 100644
index 000000000..a8fb3cebc
--- /dev/null
+++ b/frontend/src/components/Gallery/AppBar/Collection/AdminMenu.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import DeleteBtn from "@/components/Gallery/AppBar/Collection/DeleteBtn.vue";
+</script>
+
+<template>
+  <v-list rounded="0" class="pa-0">
+    <delete-btn />
+  </v-list>
+</template>
diff --git a/frontend/src/components/Gallery/AppBar/Base.vue b/frontend/src/components/Gallery/AppBar/Collection/Base.vue
similarity index 56%
rename from frontend/src/components/Gallery/AppBar/Base.vue
rename to frontend/src/components/Gallery/AppBar/Collection/Base.vue
index c5fed7b4c..6af920b9a 100644
--- a/frontend/src/components/Gallery/AppBar/Base.vue
+++ b/frontend/src/components/Gallery/AppBar/Collection/Base.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import AdminMenu from "@/components/Gallery/AppBar/AdminMenu.vue";
-import FilterBtn from "@/components/Gallery/AppBar/FilterBtn.vue";
-import FilterTextField from "@/components/Gallery/AppBar/FilterTextField.vue";
-import FirmwareBtn from "@/components/Gallery/AppBar/FirmwareBtn.vue";
-import GalleryViewBtn from "@/components/Gallery/AppBar/GalleryViewBtn.vue";
-import SelectingBtn from "@/components/Gallery/AppBar/SelectingBtn.vue";
-import FilterDrawer from "@/components/Gallery/FilterDrawer/Base.vue";
-import FirmwareDrawer from "@/components/Gallery/FirmwareDrawer.vue";
+import AdminMenu from "@/components/Gallery/AppBar/Collection/AdminMenu.vue";
+import FilterBtn from "@/components/Gallery/AppBar/common/FilterBtn.vue";
+import FilterTextField from "@/components/Gallery/AppBar/common/FilterTextField.vue";
+import GalleryViewBtn from "@/components/Gallery/AppBar/common/GalleryViewBtn.vue";
+import SelectingBtn from "@/components/Gallery/AppBar/common/SelectingBtn.vue";
+import FilterDrawer from "@/components/Gallery/AppBar/common/FilterDrawer/Base.vue";
+import FirmwareDrawer from "@/components/Gallery/AppBar/Platform/FirmwareDrawer.vue";
 import storeAuth from "@/stores/auth";
 
 // Props
@@ -15,7 +14,6 @@ const auth = storeAuth();
 
 <template>
   <v-app-bar id="gallery-app-bar" elevation="0" density="compact">
-    <firmware-btn />
     <filter-btn />
     <filter-text-field />
     <selecting-btn />
diff --git a/frontend/src/components/Gallery/AppBar/Collection/DeleteBtn.vue b/frontend/src/components/Gallery/AppBar/Collection/DeleteBtn.vue
new file mode 100644
index 000000000..c91e490cc
--- /dev/null
+++ b/frontend/src/components/Gallery/AppBar/Collection/DeleteBtn.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { type Collection } from "@/stores/collections";
+import storeRoms from "@/stores/roms";
+import type { Events } from "@/types/emitter";
+import type { Emitter } from "mitt";
+import { inject } from "vue";
+import { useRoute } from "vue-router";
+
+// Props
+const emitter = inject<Emitter<Events>>("emitter");
+const route = useRoute();
+const roms = storeRoms();
+</script>
+
+<template>
+  <v-list-item
+    v-if="route.params.collection"
+    class="py-4 pr-5 text-romm-red"
+    @click="
+      emitter?.emit(
+        'showDeleteCollectionDialog',
+        roms.currentCollection as Collection
+      )
+    "
+  >
+    <v-list-item-title class="d-flex">
+      <v-icon icon="mdi-delete" color="red" class="mr-2" />
+      Delete collection
+    </v-list-item-title>
+  </v-list-item>
+</template>
diff --git a/frontend/src/components/Gallery/AppBar/Platform/AdminMenu.vue b/frontend/src/components/Gallery/AppBar/Platform/AdminMenu.vue
new file mode 100644
index 000000000..d159b0db1
--- /dev/null
+++ b/frontend/src/components/Gallery/AppBar/Platform/AdminMenu.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import ScanBtn from "@/components/Gallery/AppBar/Platform/ScanBtn.vue";
+import UploadRomBtn from "@/components/Gallery/AppBar/Platform/UploadRomBtn.vue";
+import DeleteBtn from "@/components/Gallery/AppBar/Platform/DeleteBtn.vue";
+</script>
+
+<template>
+  <v-list rounded="0" class="pa-0">
+    <upload-rom-btn />
+    <scan-btn />
+    <v-divider />
+    <delete-btn />
+  </v-list>
+</template>
diff --git a/frontend/src/components/Gallery/AppBar/Platform/Base.vue b/frontend/src/components/Gallery/AppBar/Platform/Base.vue
new file mode 100644
index 000000000..abb62d621
--- /dev/null
+++ b/frontend/src/components/Gallery/AppBar/Platform/Base.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import AdminMenu from "@/components/Gallery/AppBar/Platform/AdminMenu.vue";
+import FilterBtn from "@/components/Gallery/AppBar/common/FilterBtn.vue";
+import FilterTextField from "@/components/Gallery/AppBar/common/FilterTextField.vue";
+import FirmwareBtn from "@/components/Gallery/AppBar/Platform/FirmwareBtn.vue";
+import GalleryViewBtn from "@/components/Gallery/AppBar/common/GalleryViewBtn.vue";
+import SelectingBtn from "@/components/Gallery/AppBar/common/SelectingBtn.vue";
+import FilterDrawer from "@/components/Gallery/AppBar/common/FilterDrawer/Base.vue";
+import FirmwareDrawer from "@/components/Gallery/AppBar/Platform/FirmwareDrawer.vue";
+import storeAuth from "@/stores/auth";
+
+// Props
+const auth = storeAuth();
+</script>
+
+<template>
+  <v-app-bar id="gallery-app-bar" elevation="0" density="compact">
+    <firmware-btn />
+    <filter-btn />
+    <filter-text-field />
+    <selecting-btn />
+    <gallery-view-btn />
+    <v-menu location="bottom">
+      <template #activator="{ props }">
+        <v-btn
+          v-if="auth.scopes.includes('roms.write')"
+          v-bind="props"
+          rounded="0"
+          variant="text"
+          class="mr-0"
+          icon="mdi-dots-vertical"
+          @click.stop
+        />
+      </template>
+      <admin-menu />
+    </v-menu>
+  </v-app-bar>
+
+  <filter-drawer />
+  <firmware-drawer />
+</template>
+
+<style scoped>
+#gallery-app-bar {
+  z-index: 999 !important;
+}
+</style>
diff --git a/frontend/src/components/Gallery/AppBar/DeleteBtn.vue b/frontend/src/components/Gallery/AppBar/Platform/DeleteBtn.vue
similarity index 68%
rename from frontend/src/components/Gallery/AppBar/DeleteBtn.vue
rename to frontend/src/components/Gallery/AppBar/Platform/DeleteBtn.vue
index 6252244d4..6afe35aa8 100644
--- a/frontend/src/components/Gallery/AppBar/DeleteBtn.vue
+++ b/frontend/src/components/Gallery/AppBar/Platform/DeleteBtn.vue
@@ -1,13 +1,14 @@
 <script setup lang="ts">
+import { type Platform } from "@/stores/platforms";
+import storeRoms from "@/stores/roms";
+import type { Events } from "@/types/emitter";
+import type { Emitter } from "mitt";
 import { inject } from "vue";
 import { useRoute } from "vue-router";
-import type { Emitter } from "mitt";
-import type { Events } from "@/types/emitter";
-import storePlatforms, { type Platform } from "@/stores/platforms";
 
 // Props
 const emitter = inject<Emitter<Events>>("emitter");
-const platforms = storePlatforms();
+const roms = storeRoms();
 const route = useRoute();
 </script>
 
@@ -18,16 +19,12 @@ const route = useRoute();
     @click="
       emitter?.emit(
         'showDeletePlatformDialog',
-        platforms.get(Number(route.params.platform)) as Platform
+        roms.currentPlatform as Platform
       )
     "
   >
     <v-list-item-title class="d-flex">
-      <v-icon
-        icon="mdi-delete"
-        color="red"
-        class="mr-2"
-      />
+      <v-icon icon="mdi-delete" color="red" class="mr-2" />
       Delete platform
     </v-list-item-title>
   </v-list-item>
diff --git a/frontend/src/components/Gallery/AppBar/FirmwareBtn.vue b/frontend/src/components/Gallery/AppBar/Platform/FirmwareBtn.vue
similarity index 100%
rename from frontend/src/components/Gallery/AppBar/FirmwareBtn.vue
rename to frontend/src/components/Gallery/AppBar/Platform/FirmwareBtn.vue
diff --git a/frontend/src/components/Gallery/FirmwareDrawer.vue b/frontend/src/components/Gallery/AppBar/Platform/FirmwareDrawer.vue
similarity index 100%
rename from frontend/src/components/Gallery/FirmwareDrawer.vue
rename to frontend/src/components/Gallery/AppBar/Platform/FirmwareDrawer.vue
diff --git a/frontend/src/components/Gallery/AppBar/ScanBtn.vue b/frontend/src/components/Gallery/AppBar/Platform/ScanBtn.vue
similarity index 100%
rename from frontend/src/components/Gallery/AppBar/ScanBtn.vue
rename to frontend/src/components/Gallery/AppBar/Platform/ScanBtn.vue
diff --git a/frontend/src/components/Gallery/AppBar/UploadRomBtn.vue b/frontend/src/components/Gallery/AppBar/Platform/UploadRomBtn.vue
similarity index 100%
rename from frontend/src/components/Gallery/AppBar/UploadRomBtn.vue
rename to frontend/src/components/Gallery/AppBar/Platform/UploadRomBtn.vue
diff --git a/frontend/src/components/Gallery/AppBar/FilterBtn.vue b/frontend/src/components/Gallery/AppBar/common/FilterBtn.vue
similarity index 100%
rename from frontend/src/components/Gallery/AppBar/FilterBtn.vue
rename to frontend/src/components/Gallery/AppBar/common/FilterBtn.vue
diff --git a/frontend/src/components/Gallery/FilterDrawer/Base.vue b/frontend/src/components/Gallery/AppBar/common/FilterDrawer/Base.vue
similarity index 95%
rename from frontend/src/components/Gallery/FilterDrawer/Base.vue
rename to frontend/src/components/Gallery/AppBar/common/FilterDrawer/Base.vue
index b0b7175d7..5ddae329e 100644
--- a/frontend/src/components/Gallery/FilterDrawer/Base.vue
+++ b/frontend/src/components/Gallery/AppBar/common/FilterDrawer/Base.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import FilterUnmatchedBtn from "@/components/Gallery/FilterDrawer/FilterUnmatchedBtn.vue";
+import FilterUnmatchedBtn from "@/components/Gallery/AppBar/common/FilterDrawer/FilterUnmatchedBtn.vue";
 import storeGalleryFilter from "@/stores/galleryFilter";
 import type { Events } from "@/types/emitter";
 import type { Emitter } from "mitt";
diff --git a/frontend/src/components/Gallery/FilterDrawer/FilterUnmatchedBtn.vue b/frontend/src/components/Gallery/AppBar/common/FilterDrawer/FilterUnmatchedBtn.vue
similarity index 100%
rename from frontend/src/components/Gallery/FilterDrawer/FilterUnmatchedBtn.vue
rename to frontend/src/components/Gallery/AppBar/common/FilterDrawer/FilterUnmatchedBtn.vue
diff --git a/frontend/src/components/Gallery/AppBar/FilterTextField.vue b/frontend/src/components/Gallery/AppBar/common/FilterTextField.vue
similarity index 100%
rename from frontend/src/components/Gallery/AppBar/FilterTextField.vue
rename to frontend/src/components/Gallery/AppBar/common/FilterTextField.vue
diff --git a/frontend/src/components/Gallery/AppBar/GalleryViewBtn.vue b/frontend/src/components/Gallery/AppBar/common/GalleryViewBtn.vue
similarity index 100%
rename from frontend/src/components/Gallery/AppBar/GalleryViewBtn.vue
rename to frontend/src/components/Gallery/AppBar/common/GalleryViewBtn.vue
diff --git a/frontend/src/components/Gallery/AppBar/SelectingBtn.vue b/frontend/src/components/Gallery/AppBar/common/SelectingBtn.vue
similarity index 100%
rename from frontend/src/components/Gallery/AppBar/SelectingBtn.vue
rename to frontend/src/components/Gallery/AppBar/common/SelectingBtn.vue
diff --git a/frontend/src/components/Gallery/AppBar/SortBar.vue b/frontend/src/components/Gallery/AppBar/common/SortBar.vue
similarity index 100%
rename from frontend/src/components/Gallery/AppBar/SortBar.vue
rename to frontend/src/components/Gallery/AppBar/common/SortBar.vue
diff --git a/frontend/src/components/Gallery/AppBar/SortBtn.vue b/frontend/src/components/Gallery/AppBar/common/SortBtn.vue
similarity index 100%
rename from frontend/src/components/Gallery/AppBar/SortBtn.vue
rename to frontend/src/components/Gallery/AppBar/common/SortBtn.vue
diff --git a/frontend/src/components/common/Collection/Card.vue b/frontend/src/components/common/Collection/Card.vue
new file mode 100644
index 000000000..23be015c9
--- /dev/null
+++ b/frontend/src/components/common/Collection/Card.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { Collection } from "@/stores/collections";
+import CollectionCover from "@/components/common/Collection/Cover.vue";
+
+defineProps<{ collection: Collection }>();
+</script>
+
+<template>
+  <v-hover v-slot="{ isHovering, props }">
+    <v-card
+      v-bind="props"
+      class="bg-terciary transform-scale"
+      :class="{ 'on-hover': isHovering }"
+      :elevation="isHovering ? 20 : 3"
+      :to="{ name: 'collection', params: { collection: collection.id } }"
+    >
+      <v-card-text>
+        <v-row class="pa-1 justify-center bg-primary">
+          <div
+            :title="collection.name?.toString()"
+            class="px-2 text-truncate text-caption"
+          >
+            {{ collection.name }}
+          </div>
+        </v-row>
+        <v-row>
+          <collection-cover :collection="collection" />
+          <v-chip
+            class="bg-chip position-absolute"
+            size="x-small"
+            style="bottom: 0.5rem; right: 0.5rem"
+            label
+          >
+            {{ collection.rom_count }}
+          </v-chip>
+        </v-row>
+      </v-card-text>
+    </v-card>
+  </v-hover>
+</template>
diff --git a/frontend/src/components/common/Collection/Cover.vue b/frontend/src/components/common/Collection/Cover.vue
new file mode 100644
index 000000000..dd80d5193
--- /dev/null
+++ b/frontend/src/components/common/Collection/Cover.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { Collection } from "@/stores/collections";
+import { useTheme } from "vuetify";
+
+defineProps<{ collection: Collection }>();
+const theme = useTheme();
+</script>
+
+<template>
+  <v-img
+    :aspect-ratio="2 / 3"
+    :src="
+      collection.path_cover_l ??
+      `/assets/default/cover/big_${theme.global.name.value}_empty.png`
+    "
+    :lazy-src="
+      collection.path_cover_s ??
+      `/assets/default/cover/small_${theme.global.name.value}_empty.png`
+    "
+    cover
+  >
+    <template #error>
+      <v-img
+        :aspect-ratio="2 / 3"
+        :src="`assets/default/cover/big_${theme.global.name.value}_empty.png`"
+        cover
+      >
+      </v-img>
+    </template>
+  </v-img>
+</template>
diff --git a/frontend/src/components/common/Collection/Dialog/CreateCollection.vue b/frontend/src/components/common/Collection/Dialog/CreateCollection.vue
new file mode 100644
index 000000000..a27b8aaa9
--- /dev/null
+++ b/frontend/src/components/common/Collection/Dialog/CreateCollection.vue
@@ -0,0 +1,187 @@
+<script setup lang="ts">
+import RDialog from "@/components/common/RDialog.vue";
+import collectionApi from "@/services/api/collection";
+import storeCollections, { type Collection } from "@/stores/collections";
+import type { Events } from "@/types/emitter";
+import type { Emitter } from "mitt";
+import { inject, ref } from "vue";
+import { useDisplay, useTheme } from "vuetify";
+
+// Props
+const theme = useTheme();
+const { smAndDown, lgAndUp } = useDisplay();
+const show = ref(false);
+const collectionName = ref("");
+const collectionDescription = ref("");
+const collectionsStore = storeCollections();
+const imagePreviewUrl = ref<string | undefined>("");
+const removeCover = ref(false);
+const emitter = inject<Emitter<Events>>("emitter");
+emitter?.on(
+  "showCreateCollectionDialog",
+  (collectionToEdit: Collection | null) => {
+    if (collectionToEdit) {
+      collectionName.value = collectionToEdit.name;
+      collectionDescription.value = collectionToEdit.description;
+    }
+    show.value = true;
+  }
+);
+
+// Functions
+function triggerFileInput() {
+  const fileInput = document.getElementById("file-input");
+  fileInput?.click();
+}
+
+function previewImage(event: Event) {
+  const input = event.target as HTMLInputElement;
+  if (!input.files) return;
+
+  const reader = new FileReader();
+  reader.onload = () => {
+    imagePreviewUrl.value = reader.result?.toString();
+  };
+  if (input.files[0]) {
+    reader.readAsDataURL(input.files[0]);
+  }
+}
+
+async function removeArtwork() {
+  imagePreviewUrl.value = `/assets/default/cover/big_${theme.global.name.value}_missing_cover.png`;
+  removeCover.value = true;
+}
+
+async function createCollection() {
+  emitter?.emit("showLoadingDialog", { loading: true, scrim: true });
+
+  await collectionApi
+    .createCollection({
+      name: collectionName.value,
+      description: collectionDescription.value,
+    })
+    .then(({ data }) => {
+      collectionsStore.add(data);
+      emitter?.emit("snackbarShow", {
+        msg: `Collection ${collectionName.value} created successfully!`,
+        icon: "mdi-check-bold",
+        color: "green",
+        timeout: 2000,
+      });
+      show.value = false;
+    })
+    .catch((error) => {
+      console.log(error);
+      emitter?.emit("snackbarShow", {
+        msg: error.response.data.detail,
+        icon: "mdi-close-circle",
+        color: "red",
+      });
+      return;
+    })
+    .finally(() => {
+      emitter?.emit("showLoadingDialog", { loading: false, scrim: false });
+    });
+}
+
+function closeDialog() {
+  show.value = false;
+  imagePreviewUrl.value = "";
+}
+</script>
+
+<template>
+  <r-dialog
+    @close="closeDialog"
+    v-model="show"
+    icon="mdi-pencil-box"
+    :width="lgAndUp ? '65vw' : '95vw'"
+  >
+    <template #content>
+      <v-row class="align-center pa-2" no-gutters>
+        <v-col cols="12" md="8" lg="8" xl="9">
+          <v-row class="pa-2" no-gutters>
+            <v-col>
+              <v-text-field
+                v-model="collectionName"
+                class="py-2"
+                label="Name"
+                variant="outlined"
+                required
+                hide-details
+                @keyup.enter="createCollection()"
+              />
+            </v-col>
+          </v-row>
+          <v-row class="pa-2" no-gutters>
+            <v-col>
+              <v-textarea
+                v-model="collectionDescription"
+                class="py-2"
+                label="Description"
+                variant="outlined"
+                required
+                hide-details
+                @keyup.enter="createCollection()"
+              />
+            </v-col>
+          </v-row>
+        </v-col>
+        <!-- <v-col>
+          <v-row class="pa-2 justify-center" no-gutters>
+            <v-col class="cover">
+              <collection-card :src="imagePreviewUrl">
+                <template #append-inner>
+                  <v-chip-group class="pa-0">
+                    <v-chip
+                      class="translucent-dark"
+                      :size="smAndDown ? 'large' : 'small'"
+                      @click="triggerFileInput"
+                      label
+                    >
+                      <v-icon>mdi-pencil</v-icon>
+                      <v-file-input
+                        id="file-input"
+                        v-model="rom.artwork"
+                        accept="image/*"
+                        hide-details
+                        class="file-input"
+                        @change="previewImage"
+                      />
+                    </v-chip>
+                    <v-chip
+                      class="translucent-dark"
+                      :size="smAndDown ? 'large' : 'small'"
+                      @click="removeArtwork"
+                      label
+                    >
+                      <v-icon class="text-romm-red"> mdi-delete </v-icon>
+                    </v-chip>
+                  </v-chip-group>
+                </template>
+              </collection-card>
+            </v-col>
+          </v-row>
+        </v-col> -->
+      </v-row>
+    </template>
+    <template #append>
+      <v-row class="justify-center mb-2" no-gutters>
+        <v-btn-group divided density="compact">
+          <v-btn class="bg-terciary" @click="closeDialog"> Cancel </v-btn>
+          <v-btn class="text-romm-green bg-terciary" @click="createCollection">
+            Create
+          </v-btn>
+        </v-btn-group>
+      </v-row>
+    </template>
+  </r-dialog>
+</template>
+<style scoped>
+.cover {
+  min-width: 240px;
+  min-height: 330px;
+  max-width: 240px;
+  max-height: 330px;
+}
+</style>
diff --git a/frontend/src/components/common/Collection/Dialog/DeleteCollection.vue b/frontend/src/components/common/Collection/Dialog/DeleteCollection.vue
new file mode 100644
index 000000000..79f760795
--- /dev/null
+++ b/frontend/src/components/common/Collection/Dialog/DeleteCollection.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import RAvatar from "@/components/common/Collection/RAvatar.vue";
+import RDialog from "@/components/common/RDialog.vue";
+import collectionApi from "@/services/api/collection";
+import storeCollections, { type Collection } from "@/stores/collections";
+import type { Events } from "@/types/emitter";
+import type { Emitter } from "mitt";
+import { inject, ref } from "vue";
+import { useRouter } from "vue-router";
+import { useDisplay } from "vuetify";
+
+const router = useRouter();
+const { lgAndUp } = useDisplay();
+const collectionsStore = storeCollections();
+const collection = ref<Collection | null>(null);
+const show = ref(false);
+const emitter = inject<Emitter<Events>>("emitter");
+emitter?.on("showDeleteCollectionDialog", (collectionToDelete) => {
+  collection.value = collectionToDelete;
+  show.value = true;
+});
+
+async function deleteCollection() {
+  if (!collection.value) return;
+
+  show.value = false;
+  await collectionApi
+    .deleteCollection({ collection: collection.value })
+    .then((response) => {
+      emitter?.emit("snackbarShow", {
+        msg: response.data.msg,
+        icon: "mdi-check-bold",
+        color: "green",
+      });
+    })
+    .catch((error) => {
+      console.log(error);
+      emitter?.emit("snackbarShow", {
+        msg: error.response.data.detail,
+        icon: "mdi-close-circle",
+        color: "red",
+      });
+      return;
+    });
+
+  await router.push({ name: "dashboard" });
+
+  collectionsStore.remove(collection.value);
+  emitter?.emit("refreshDrawer", null);
+  closeDialog();
+}
+
+function closeDialog() {
+  show.value = false;
+}
+</script>
+<template>
+  <r-dialog
+    v-if="collection"
+    @close="closeDialog"
+    v-model="show"
+    icon="mdi-delete"
+    scroll-content
+    :width="lgAndUp ? '50vw' : '95vw'"
+  >
+    <template #content>
+      <v-row class="justify-center align-center pa-2" no-gutters>
+        <span>Removing collection</span>
+        <template v-if="collection.path_cover_l">
+          <r-avatar class="ml-1" :src="collection.path_cover_s" />
+        </template>
+        <template v-else>
+          <v-icon class="ml-1">mdi-bookmark</v-icon>
+        </template>
+        <span class="ml-1 text-romm-accent-1">{{ collection.name }}</span>
+        <span class="ml-1">from RomM. Do you confirm?</span>
+      </v-row>
+    </template>
+    <template #append>
+      <v-row class="justify-center pa-2" no-gutters>
+        <v-btn-group divided density="compact">
+          <v-btn class="bg-terciary" @click="closeDialog"> Cancel </v-btn>
+          <v-btn class="bg-terciary text-romm-red" @click="deleteCollection">
+            Confirm
+          </v-btn>
+        </v-btn-group>
+      </v-row>
+    </template>
+  </r-dialog>
+</template>
diff --git a/frontend/src/components/common/Collection/ListItem.vue b/frontend/src/components/common/Collection/ListItem.vue
new file mode 100644
index 000000000..d49139253
--- /dev/null
+++ b/frontend/src/components/common/Collection/ListItem.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import type { Collection } from "@/stores/collections";
+import RAvatar from "@/components/common/Collection/RAvatar.vue";
+
+// Props
+defineProps<{ collection: Collection }>();
+</script>
+
+<template>
+  <v-list-item
+    :key="collection.id"
+    :to="{ name: 'collection', params: { collection: collection.id } }"
+    :value="collection.name"
+  >
+    <template #prepend>
+      <template v-if="collection.path_cover_s">
+        <r-avatar :src="collection.path_cover_s" />
+      </template>
+      <template v-else>
+        <v-icon>mdi-bookmark</v-icon>
+      </template>
+    </template>
+    <v-row no-gutters
+      ><v-col
+        ><span class="text-body-1">{{ collection.name }}</span></v-col
+      ></v-row
+    >
+    <v-row no-gutters>
+      <v-col>
+        <span class="text-caption text-grey">{{ collection.description }}</span>
+      </v-col>
+    </v-row>
+    <template #append>
+      <v-chip class="ml-2" size="x-small" label>
+        {{ collection.rom_count }}
+      </v-chip>
+    </template>
+  </v-list-item>
+</template>
+
+<style scoped>
+.not-found-icon {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+</style>
diff --git a/frontend/src/components/common/Collection/RAvatar.vue b/frontend/src/components/common/Collection/RAvatar.vue
new file mode 100644
index 000000000..644a8cdf9
--- /dev/null
+++ b/frontend/src/components/common/Collection/RAvatar.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { useTheme } from "vuetify";
+
+withDefaults(defineProps<{ src?: string | null; size?: number }>(), { size: 45 });
+const theme = useTheme();
+</script>
+
+<template>
+  <v-avatar :rounded="0" :size="size">
+    <v-img
+      :src="
+        src ?? `/assets/default/cover/big_${theme.global.name.value}_empty.png`
+      "
+    >
+      <template #error>
+        <v-img
+          :src="`assets/default/cover/big_${theme.global.name.value}_empty.png`"
+        >
+        </v-img>
+      </template>
+    </v-img>
+  </v-avatar>
+</template>
diff --git a/frontend/src/components/common/EmptyCollection.vue b/frontend/src/components/common/EmptyCollection.vue
new file mode 100644
index 000000000..5185b2bb6
--- /dev/null
+++ b/frontend/src/components/common/EmptyCollection.vue
@@ -0,0 +1,8 @@
+<template>
+  <v-empty-state
+    headline="Whoops, 404"
+    title="Collection not found"
+    text="The collection you were looking for does not exist"
+    icon="mdi-rhombus-split"
+  ></v-empty-state>
+</template>
diff --git a/frontend/src/components/common/Navigation/CollectionsDrawer.vue b/frontend/src/components/common/Navigation/CollectionsDrawer.vue
index bf3baed36..955c9aaba 100644
--- a/frontend/src/components/common/Navigation/CollectionsDrawer.vue
+++ b/frontend/src/components/common/Navigation/CollectionsDrawer.vue
@@ -1,7 +1,12 @@
 <script setup lang="ts">
+import CollectionListItem from "@/components/common/Collection/ListItem.vue";
+import collectionApi from "@/services/api/collection";
+import storeCollections from "@/stores/collections";
 import storeNavigation from "@/stores/navigation";
+import type { Events } from "@/types/emitter";
+import type { Emitter } from "mitt";
 import { storeToRefs } from "pinia";
-import storeCollections from "@/stores/collections";
+import { inject, onMounted, ref } from "vue";
 import { useDisplay } from "vuetify";
 
 // Props
@@ -10,11 +15,27 @@ const { smAndDown } = useDisplay();
 const collectionsStore = storeCollections();
 const { filteredCollections, searchText } = storeToRefs(collectionsStore);
 const { activeCollectionsDrawer } = storeToRefs(navigationStore);
+const emitter = inject<Emitter<Events>>("emitter");
 
 // Functions
+async function addCollection() {
+  emitter?.emit("showCreateCollectionDialog", null);
+}
+
 function clear() {
   searchText.value = "";
 }
+
+onMounted(async () => {
+  await collectionApi
+    .getCollections()
+    .then(({ data: collections }) => {
+      collectionsStore.set(collections);
+    })
+    .catch((error) => {
+      console.error(error);
+    });
+});
 </script>
 <template>
   <v-navigation-drawer
@@ -39,36 +60,20 @@ function clear() {
       ></v-text-field>
     </template>
     <v-list lines="two" rounded="0" class="pa-0">
-      <v-list-item
+      <collection-list-item
         v-for="collection in filteredCollections"
-        :to="{ name: 'collection', params: { collection: collection.id } }"
-        :value="collection"
+        :collection="collection"
       >
-        <v-row no-gutters
-          ><v-col
-            ><span class="text-body-1">{{ collection.name }}</span></v-col
-          ></v-row
-        >
-        <v-row no-gutters>
-          <v-col>
-            <span class="text-caption text-grey">{{
-              collection.description
-            }}</span>
-          </v-col>
-        </v-row>
-        <template #append>
-          <v-chip class="ml-2" size="x-small" label>
-            {{ collection.rom_count }}
-          </v-chip>
-        </template>
-      </v-list-item>
+      </collection-list-item>
     </v-list>
     <template #append>
       <v-btn
+        @click="addCollection()"
         variant="tonal"
         color="romm-accent-1"
         prepend-icon="mdi-plus"
         size="large"
+        rounded="0"
         block
         >Add Collection</v-btn
       >
diff --git a/frontend/src/layouts/Dashboard/Collections.vue b/frontend/src/layouts/Dashboard/Collections.vue
new file mode 100644
index 000000000..a82b48c17
--- /dev/null
+++ b/frontend/src/layouts/Dashboard/Collections.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import CollectionCard from "@/components/common/Collection/Card.vue";
+import RSection from "@/components/common/RSection.vue";
+import storeCollections from "@/stores/collections";
+import { views } from "@/utils";
+
+// Props
+const collections = storeCollections();
+</script>
+<template>
+  <r-section icon="mdi-bookmark-box-multiple" title="Collections">
+    <template #content>
+      <v-row no-gutters>
+        <v-col
+          v-for="collection in collections.all"
+          :key="collection.name"
+          class="pa-1"
+          :cols="views[0]['size-cols']"
+          :sm="views[0]['size-sm']"
+          :md="views[0]['size-md']"
+          :lg="views[0]['size-lg']"
+          :xl="views[0]['size-xl']"
+        >
+          <collection-card :key="collection.name" :collection="collection" />
+        </v-col>
+      </v-row>
+    </template>
+  </r-section>
+</template>
diff --git a/frontend/src/layouts/Dashboard/Recent.vue b/frontend/src/layouts/Dashboard/Recent.vue
index f7a924777..d44ddab71 100644
--- a/frontend/src/layouts/Dashboard/Recent.vue
+++ b/frontend/src/layouts/Dashboard/Recent.vue
@@ -1,38 +1,27 @@
 <script setup lang="ts">
 import GameCard from "@/components/common/Game/Card/Base.vue";
 import RSection from "@/components/common/RSection.vue";
-import romApi from "@/services/api/rom";
 import storeRoms, { type SimpleRom } from "@/stores/roms";
 import { views } from "@/utils";
-import { onMounted } from "vue";
+import { storeToRefs } from "pinia";
 import { useRouter } from "vue-router";
 
 // Props
 const romsStore = storeRoms();
+const { recentRoms } = storeToRefs(romsStore)
 const router = useRouter();
 
 // Functions
 function onGameClick(emitData: { rom: SimpleRom; event: MouseEvent }) {
   router.push({ name: "rom", params: { rom: emitData.rom.id } });
 }
-
-onMounted(() => {
-  romApi
-    .getRecentRoms()
-    .then(({ data: recentData }) => {
-      romsStore.setRecentRoms(recentData);
-    })
-    .catch((error) => {
-      console.error(error);
-    });
-});
 </script>
 <template>
   <r-section icon="mdi-shimmer" title="Recently added">
     <template #content>
       <v-row class="flex-nowrap overflow-x-auto" no-gutters>
         <v-col
-          v-for="rom in romsStore.recentRoms"
+          v-for="rom in recentRoms"
           :key="rom.id"
           class="px-1 pt-1 pb-2"
           :cols="views[0]['size-cols']"
@@ -54,5 +43,4 @@ onMounted(() => {
       <!-- TODO: Add a button to upload roms if no roms were uploaded in the last 30 days -->
     </template>
   </r-section>
-
 </template>
diff --git a/frontend/src/layouts/Dashboard/Summary.vue b/frontend/src/layouts/Dashboard/Stats.vue
similarity index 100%
rename from frontend/src/layouts/Dashboard/Summary.vue
rename to frontend/src/layouts/Dashboard/Stats.vue
diff --git a/frontend/src/services/api/collection.ts b/frontend/src/services/api/collection.ts
new file mode 100644
index 000000000..641fba367
--- /dev/null
+++ b/frontend/src/services/api/collection.ts
@@ -0,0 +1,49 @@
+import type { MessageResponse } from "@/__generated__";
+import api from "@/services/api/index";
+import type { Collection } from "@/stores/collections";
+
+export const collectionApi = api;
+
+async function createCollection({
+  name,
+  description,
+}: {
+  name: string;
+  description: string;
+}): Promise<{ data: Collection }> {
+  return api.post("/collections", { name: name, description: description });
+}
+
+async function getCollections(): Promise<{ data: Collection[] }> {
+  return api.get("/collections");
+}
+
+async function getCollection(
+  id: number | undefined,
+): Promise<{ data: Collection }> {
+  return api.get(`/collections/${id}`);
+}
+
+async function updateCollection({
+  collection,
+}: {
+  collection: Collection;
+}): Promise<{ data: MessageResponse }> {
+  return api.delete(`/collections/${collection.id}`);
+}
+
+async function deleteCollection({
+  collection,
+}: {
+  collection: Collection;
+}): Promise<{ data: MessageResponse }> {
+  return api.delete(`/collections/${collection.id}`);
+}
+
+export default {
+  createCollection,
+  getCollections,
+  getCollection,
+  updateCollection,
+  deleteCollection,
+};
diff --git a/frontend/src/services/api/rom.ts b/frontend/src/services/api/rom.ts
index 828e0979d..228543c8e 100644
--- a/frontend/src/services/api/rom.ts
+++ b/frontend/src/services/api/rom.ts
@@ -32,11 +32,13 @@ async function uploadRoms({
 
 async function getRoms({
   platformId = null,
+  collectionId = null,
   searchTerm = "",
   orderBy = "name",
   orderDir = "asc",
 }: {
   platformId?: number | null;
+  collectionId?: number | null;
   searchTerm?: string | null;
   orderBy?: string | null;
   orderDir?: string | null;
@@ -44,6 +46,7 @@ async function getRoms({
   return api.get(`/roms`, {
     params: {
       platform_id: platformId,
+      collection_id: collectionId,
       search_term: searchTerm,
       order_by: orderBy,
       order_dir: orderDir,
diff --git a/frontend/src/stores/collections.ts b/frontend/src/stores/collections.ts
index d37516435..f0bc87bbd 100644
--- a/frontend/src/stores/collections.ts
+++ b/frontend/src/stores/collections.ts
@@ -7,116 +7,14 @@ export type Collection = CollectionSchema;
 export default defineStore("collections", {
   state: () => {
     return {
-      all: [
-        {
-          name: "Favourites",
-          description: "My favourites collection",
-          rom_count: 10,
-          id: 3,
-        },
-        {
-          name: "Nintendo",
-          description: "Nintendo collection",
-          rom_count: 7,
-          id: 1,
-        },
-        {
-          name: "Sony",
-          description: "Sony collection",
-          rom_count: 20,
-          id: 2,
-        },
-        {
-          name: "Sega",
-          description: "Sega collection",
-          rom_count: 0,
-          id: 2,
-        },
-        {
-          name: "Favourites",
-          description: "My favourites collection",
-          rom_count: 10,
-          id: 0,
-        },
-        {
-          name: "Nintendo",
-          description: "Nintendo collection",
-          rom_count: 7,
-          id: 1,
-        },
-        {
-          name: "Sony",
-          description: "Sony collection",
-          rom_count: 20,
-          id: 2,
-        },
-        {
-          name: "Sega",
-          description: "Sega collection",
-          rom_count: 0,
-          id: 2,
-        },
-        {
-          name: "Favourites",
-          description: "My favourites collection",
-          rom_count: 10,
-          id: 0,
-        },
-        {
-          name: "Nintendo",
-          description: "Nintendo collection",
-          rom_count: 7,
-          id: 1,
-        },
-        {
-          name: "Sony",
-          description: "Sony collection",
-          rom_count: 20,
-          id: 2,
-        },
-        {
-          name: "Sega",
-          description: "Sega collection",
-          rom_count: 0,
-          id: 2,
-        },
-        {
-          name: "Favourites",
-          description: "My favourites collection",
-          rom_count: 10,
-          id: 0,
-        },
-        {
-          name: "Nintendo",
-          description: "Nintendo collection",
-          rom_count: 7,
-          id: 1,
-        },
-        {
-          name: "Sony",
-          description: "Sony collection",
-          rom_count: 20,
-          id: 2,
-        },
-        {
-          name: "Sega",
-          description: "Sega collection",
-          rom_count: 0,
-          id: 2,
-        },
-      ] as Collection[],
+      all: [] as Collection[],
       searchText: "" as string,
     };
   },
   getters: {
-    totalGames: ({ all: value }) =>
-      value.reduce((count, p) => count + p.rom_count, 0),
-    filledCollections: ({ all }) => all.filter((p) => p.rom_count > 0),
     filteredCollections: ({ all, searchText }) =>
-      all.filter(
-        (p) =>
-          p.rom_count > 0 &&
-          p.name.toLowerCase().includes(searchText.toLowerCase()),
+      all.filter((p) =>
+        p.name.toLowerCase().includes(searchText.toLowerCase()),
       ),
   },
   actions: {
@@ -131,14 +29,14 @@ export default defineStore("collections", {
     },
     add(collection: Collection) {
       this.all.push(collection);
-      // this._reorder();
+      this._reorder();
     },
     exists(collection: Collection) {
-      return this.all.filter((p) => p.fs_slug == collection.fs_slug).length > 0;
+      return this.all.filter((p) => p.name == collection.name).length > 0;
     },
     remove(collection: Collection) {
       this.all = this.all.filter((p) => {
-        return p.slug !== collection.slug;
+        return p.name !== collection.name;
       });
     },
     get(collectionId: number) {
diff --git a/frontend/src/stores/roms.ts b/frontend/src/stores/roms.ts
index 2f13ea14b..53386e0bc 100644
--- a/frontend/src/stores/roms.ts
+++ b/frontend/src/stores/roms.ts
@@ -1,6 +1,7 @@
 import type { SearchRomSchema } from "@/__generated__";
 import type { DetailedRomSchema, RomSchema } from "@/__generated__/";
 import { type Platform } from "@/stores/platforms";
+import { type Collection } from "@/stores/collections";
 import type { ExtractPiniaStoreType } from "@/types";
 import { groupBy, uniqBy } from "lodash";
 import { nanoid } from "nanoid";
@@ -18,6 +19,7 @@ export type DetailedRom = DetailedRomSchema;
 export default defineStore("roms", {
   state: () => ({
     currentPlatform: null as Platform | null,
+    currentCollection: null as Collection | null,
     allRoms: [] as SimpleRom[],
     _grouped: [] as SimpleRom[],
     _filteredIDs: [] as number[],
@@ -84,6 +86,9 @@ export default defineStore("roms", {
     setRecentRoms(roms: SimpleRom[]) {
       this.recentRoms = roms;
     },
+    setCurrentCollection(collection: Collection) {
+      this.currentCollection = collection;
+    },
     set(roms: SimpleRom[]) {
       this.allRoms = roms;
       this._reorder();
diff --git a/frontend/src/types/emitter.d.ts b/frontend/src/types/emitter.d.ts
index f89124ffc..aabe0acba 100644
--- a/frontend/src/types/emitter.d.ts
+++ b/frontend/src/types/emitter.d.ts
@@ -1,4 +1,5 @@
 import type { SaveSchema, StateSchema } from "@/__generated__";
+import type { Collection } from "@/stores/collections";
 import type { Platform } from "@/stores/platforms";
 import type { SimpleRom } from "@/stores/roms";
 import type { User } from "@/stores/users";
@@ -18,6 +19,8 @@ export type SnackbarStatus = {
 
 export type Events = {
   showDeletePlatformDialog: Platform;
+  showCreateCollectionDialog: Collection | null;
+  showDeleteCollectionDialog: Collection;
   showMatchRomDialog: SimpleRom;
   showSearchCoverDialog: SimpleRom;
   showSearchRomDialog: null;
diff --git a/frontend/src/views/Dashboard.vue b/frontend/src/views/Dashboard.vue
index bfb9f46f7..3d4c4434e 100644
--- a/frontend/src/views/Dashboard.vue
+++ b/frontend/src/views/Dashboard.vue
@@ -1,11 +1,39 @@
 <script setup lang="ts">
-import dashboardPlatforms from "@/layouts/Dashboard/Platforms.vue";
+import Collections from "@/layouts/Dashboard/Collections.vue";
+import Platforms from "@/layouts/Dashboard/Platforms.vue";
 import recentlyAdded from "@/layouts/Dashboard/Recent.vue";
-import dashboardSummary from "@/layouts/Dashboard/Summary.vue";
+import Stats from "@/layouts/Dashboard/Stats.vue";
+import romApi from "@/services/api/rom";
+import storeCollections from "@/stores/collections";
+import storePlatforms from "@/stores/platforms";
+import storeRoms from "@/stores/roms";
+import { storeToRefs } from "pinia";
+import { onMounted } from "vue";
+
+// Props
+const romsStore = storeRoms();
+const { recentRoms } = storeToRefs(romsStore);
+const platforms = storePlatforms();
+const { filledPlatforms } = storeToRefs(platforms);
+const collections = storeCollections();
+const { all } = storeToRefs(collections);
+
+// Functions
+onMounted(async () => {
+  await romApi
+    .getRecentRoms()
+    .then(({ data: recentData }) => {
+      romsStore.setRecentRoms(recentData);
+    })
+    .catch((error) => {
+      console.error(error);
+    });
+});
 </script>
 
 <template>
-  <dashboard-summary />
-  <recently-added />
-  <dashboard-platforms />
+  <stats />
+  <recently-added v-if="recentRoms.length > 0" />
+  <platforms v-if="filledPlatforms.length > 0" />
+  <collections v-if="all.length > 0" />
 </template>
diff --git a/frontend/src/views/Gallery/Collection.vue b/frontend/src/views/Gallery/Collection.vue
index c39277cdf..036df6867 100644
--- a/frontend/src/views/Gallery/Collection.vue
+++ b/frontend/src/views/Gallery/Collection.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import GalleryAppBar from "@/components/Gallery/AppBar/Base.vue";
+import GalleryAppBarCollection from "@/components/Gallery/AppBar/Collection/Base.vue";
 import FabOverlay from "@/components/Gallery/FabOverlay.vue";
 import EmptyGame from "@/components/common/EmptyGame.vue";
-import EmptyPlatform from "@/components/common/EmptyPlatform.vue";
+import EmptyCollection from "@/components/common/EmptyCollection.vue";
 import GameCard from "@/components/common/Game/Card/Base.vue";
 import GameCardFlags from "@/components/common/Game/Card/Flags.vue";
 import GameDataTable from "@/components/common/Game/Table.vue";
-import platformApi from "@/services/api/platform";
+import collectionApi from "@/services/api/collection";
 import romApi from "@/services/api/rom";
 import storeGalleryFilter from "@/stores/galleryFilter";
 import storeGalleryView from "@/stores/galleryView";
-import storePlatforms from "@/stores/platforms";
+import storeCollections from "@/stores/collections";
 import storeRoms, { type SimpleRom } from "@/stores/roms";
 import type { Events } from "@/types/emitter";
 import { normalizeString, views } from "@/utils";
@@ -26,18 +26,18 @@ const route = useRoute();
 const galleryViewStore = storeGalleryView();
 const galleryFilterStore = storeGalleryFilter();
 const { scrolledToTop, currentView } = storeToRefs(galleryViewStore);
-const platforms = storePlatforms();
+const collections = storeCollections();
 const romsStore = storeRoms();
 const {
   allRoms,
   filteredRoms,
   selectedRoms,
-  currentPlatform,
+  currentCollection,
   itemsPerBatch,
   gettingRoms,
 } = storeToRefs(romsStore);
 const itemsShown = ref(itemsPerBatch.value);
-const noPlatformError = ref(false);
+const noCollectionError = ref(false);
 const router = useRouter();
 let timeout: ReturnType<typeof setTimeout>;
 const emitter = inject<Emitter<Events>>("emitter");
@@ -55,7 +55,7 @@ async function fetchRoms() {
 
   await romApi
     .getRoms({
-      platformId: romsStore.currentPlatform?.id,
+      collectionId: romsStore.currentCollection?.id,
       searchTerm: normalizeString(galleryFilterStore.filterSearch),
     })
     .then(({ data }) => {
@@ -64,15 +64,15 @@ async function fetchRoms() {
     })
     .catch((error) => {
       emitter?.emit("snackbarShow", {
-        msg: `Couldn't fetch roms for platform ID ${currentPlatform.value?.id}: ${error}`,
+        msg: `Couldn't fetch roms for collection ID ${currentCollection.value?.id}: ${error}`,
         icon: "mdi-close-circle",
         color: "red",
         timeout: 4000,
       });
       console.error(
-        `Couldn't fetch roms for platform ID ${currentPlatform.value?.id}: ${error}`
+        `Couldn't fetch roms for collection ID ${currentCollection.value?.id}: ${error}`
       );
-      noPlatformError.value = true;
+      noCollectionError.value = true;
     })
     .finally(() => {
       gettingRoms.value = false;
@@ -193,29 +193,29 @@ function resetGallery() {
   romsStore.reset();
   galleryFilterStore.reset();
   scrolledToTop.value = true;
-  noPlatformError.value = false;
+  noCollectionError.value = false;
   itemsShown.value = itemsPerBatch.value;
 }
 
 onMounted(async () => {
-  const routePlatformId = Number(route.params.collection);
-  const routePlatform = platforms.get(routePlatformId);
+  const routeCollectionId = Number(route.params.collection);
+  const routeCollection = collections.get(routeCollectionId);
 
-  if (!routePlatform) {
-    await platformApi
-      .getPlatform(routePlatformId)
+  if (!routeCollection) {
+    await collectionApi
+      .getCollection(routeCollectionId)
       .then((data) => {
-        platforms.add(data.data);
-        romsStore.setCurrentPlatform(data.data);
+        collections.add(data.data);
+        romsStore.setCurrentCollection(data.data);
       })
       .catch((error) => {
         console.log(error);
-        noPlatformError.value = true;
+        noCollectionError.value = true;
       });
   } else {
-    romsStore.setCurrentPlatform(routePlatform);
+    romsStore.setCurrentCollection(routeCollection);
   }
-  if (!noPlatformError.value) {
+  if (!noCollectionError.value) {
     resetGallery();
     await fetchRoms();
     setFilters();
@@ -226,18 +226,18 @@ onMounted(async () => {
 
 onBeforeRouteUpdate(async (to, from) => {
   // Triggers when change param of the same route
-  // Reset store if switching to another platform
+  // Reset store if switching to another collection
   if (to.path === from.path) return;
 
   resetGallery();
 
-  const routePlatformId = Number(to.params.collection);
-  const routePlatform = platforms.get(routePlatformId);
-  if (!routePlatform) {
-    const { data } = await platformApi.getPlatform(routePlatformId);
-    platforms.add(data);
+  const routeCollectionId = Number(to.params.collection);
+  const routeCollection = collections.get(routeCollectionId);
+  if (!routeCollection) {
+    const { data } = await collectionApi.getCollection(routeCollectionId);
+    collections.add(data);
   } else {
-    romsStore.setCurrentPlatform(routePlatform);
+    romsStore.setCurrentCollection(routeCollection);
   }
 
   await fetchRoms();
@@ -251,8 +251,8 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <template v-if="!noPlatformError">
-    <gallery-app-bar />
+  <template v-if="!noCollectionError">
+    <gallery-app-bar-collection />
     <template v-if="filteredRoms.length > 0">
       <v-row
         no-gutters
@@ -308,5 +308,5 @@ onBeforeUnmount(() => {
     </template>
   </template>
 
-  <empty-platform v-else />
+  <empty-collection v-else />
 </template>
diff --git a/frontend/src/views/Gallery/Platform.vue b/frontend/src/views/Gallery/Platform.vue
index 4977a83d8..570533b73 100644
--- a/frontend/src/views/Gallery/Platform.vue
+++ b/frontend/src/views/Gallery/Platform.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import GalleryAppBar from "@/components/Gallery/AppBar/Base.vue";
+import GalleryAppBar from "@/components/Gallery/AppBar/Platform/Base.vue";
 import FabOverlay from "@/components/Gallery/FabOverlay.vue";
 import EmptyGame from "@/components/common/EmptyGame.vue";
 import EmptyPlatform from "@/components/common/EmptyPlatform.vue";
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index 9286f15e0..a54fce0bb 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -7,6 +7,8 @@ import CreatePlatformBindingDialog from "@/components/Management/Dialog/CreatePl
 import CreatePlatformVersionDialog from "@/components/Management/Dialog/CreatePlatformVersion.vue";
 import DeletePlatformBindingDialog from "@/components/Management/Dialog/DeletePlatformBinding.vue";
 import DeletePlatformVersionDialog from "@/components/Management/Dialog/DeletePlatformVersion.vue";
+import CreateCollectionDialog from "@/components/common/Collection/Dialog/CreateCollection.vue";
+import DeleteCollectionDialog from "@/components/common/Collection/Dialog/DeleteCollection.vue";
 import DeleteAssetDialog from "@/components/common/Game/Dialog/Asset/DeleteAssets.vue";
 import CopyRomDownloadLinkDialog from "@/components/common/Game/Dialog/CopyDownloadLink.vue";
 import DeleteRomDialog from "@/components/common/Game/Dialog/DeleteRom.vue";
@@ -16,13 +18,13 @@ import SearchCoverDialog from "@/components/common/Game/Dialog/SearchCoverRom.vu
 import SearchRomDialog from "@/components/common/Game/Dialog/SearchRom.vue";
 import UploadRomDialog from "@/components/common/Game/Dialog/UploadRom.vue";
 import LoadingView from "@/components/common/LoadingView.vue";
+import CollectionsDrawer from "@/components/common/Navigation/CollectionsDrawer.vue";
 import MainAppBar from "@/components/common/Navigation/MainAppBar.vue";
 import MainDrawer from "@/components/common/Navigation/MainDrawer.vue";
-import NewVersion from "@/components/common/NewVersion.vue";
-import DeletePlatformDialog from "@/components/common/Platform/Dialog/DeletePlatform.vue";
 import PlatformsDrawer from "@/components/common/Navigation/PlatformsDrawer.vue";
-import CollectionsDrawer from "@/components/common/Navigation/CollectionsDrawer.vue";
 import SettingsDrawer from "@/components/common/Navigation/SettingsDrawer.vue";
+import NewVersion from "@/components/common/NewVersion.vue";
+import DeletePlatformDialog from "@/components/common/Platform/Dialog/DeletePlatform.vue";
 import platformApi from "@/services/api/platform";
 import userApi from "@/services/api/user";
 import storeAuth from "@/stores/auth";
@@ -94,6 +96,8 @@ onMounted(async () => {
   <router-view />
 
   <delete-platform-dialog />
+  <create-collection-dialog />
+  <delete-collection-dialog />
   <search-rom-dialog />
   <match-rom-dialog />
   <search-cover-dialog />

From fd54e4dc6b25b0d864c64f8fc18c0a0ec9486025 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Tue, 2 Jul 2024 15:45:04 +0200
Subject: [PATCH 09/33] split create/edit collection dialog

---
 .../Gallery/AppBar/Collection/AdminMenu.vue   |   3 +
 .../Gallery/AppBar/Collection/EditBtn.vue     |  31 +++
 .../Collection/Dialog/CreateCollection.vue    |  52 ++---
 .../Collection/Dialog/EditCollection.vue      | 185 ++++++++++++++++++
 .../common/Navigation/CollectionsDrawer.vue   |   7 +-
 frontend/src/types/emitter.d.ts               |   3 +-
 6 files changed, 251 insertions(+), 30 deletions(-)
 create mode 100644 frontend/src/components/Gallery/AppBar/Collection/EditBtn.vue
 create mode 100644 frontend/src/components/common/Collection/Dialog/EditCollection.vue

diff --git a/frontend/src/components/Gallery/AppBar/Collection/AdminMenu.vue b/frontend/src/components/Gallery/AppBar/Collection/AdminMenu.vue
index a8fb3cebc..fe0dbc675 100644
--- a/frontend/src/components/Gallery/AppBar/Collection/AdminMenu.vue
+++ b/frontend/src/components/Gallery/AppBar/Collection/AdminMenu.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import DeleteBtn from "@/components/Gallery/AppBar/Collection/DeleteBtn.vue";
+import EditBtn from "@/components/Gallery/AppBar/Collection/EditBtn.vue";
 </script>
 
 <template>
   <v-list rounded="0" class="pa-0">
+    <edit-btn />
+    <v-divider />
     <delete-btn />
   </v-list>
 </template>
diff --git a/frontend/src/components/Gallery/AppBar/Collection/EditBtn.vue b/frontend/src/components/Gallery/AppBar/Collection/EditBtn.vue
new file mode 100644
index 000000000..30e224907
--- /dev/null
+++ b/frontend/src/components/Gallery/AppBar/Collection/EditBtn.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import storeRoms from "@/stores/roms";
+import Collection from "@/stores/collections";
+import type { Events } from "@/types/emitter";
+import type { Emitter } from "mitt";
+import { inject } from "vue";
+import { useRoute } from "vue-router";
+
+// Props
+const emitter = inject<Emitter<Events>>("emitter");
+const route = useRoute();
+const roms = storeRoms();
+</script>
+
+<template>
+  <v-list-item
+    v-if="route.params.collection"
+    class="py-4 pr-5"
+    @click="
+      emitter?.emit(
+        'showEditCollectionDialog',
+        roms.currentCollection as Collection
+      )
+    "
+  >
+    <v-list-item-title class="d-flex">
+      <v-icon icon="mdi-pencil-box" class="mr-2" />
+      Edit collection
+    </v-list-item-title>
+  </v-list-item>
+</template>
diff --git a/frontend/src/components/common/Collection/Dialog/CreateCollection.vue b/frontend/src/components/common/Collection/Dialog/CreateCollection.vue
index a27b8aaa9..5115c1c13 100644
--- a/frontend/src/components/common/Collection/Dialog/CreateCollection.vue
+++ b/frontend/src/components/common/Collection/Dialog/CreateCollection.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import RDialog from "@/components/common/RDialog.vue";
+import CollectionCard from "@/components/common/Collection/Card.vue";
 import collectionApi from "@/services/api/collection";
 import storeCollections, { type Collection } from "@/stores/collections";
 import type { Events } from "@/types/emitter";
@@ -11,22 +12,17 @@ import { useDisplay, useTheme } from "vuetify";
 const theme = useTheme();
 const { smAndDown, lgAndUp } = useDisplay();
 const show = ref(false);
-const collectionName = ref("");
-const collectionDescription = ref("");
+const collection = ref<{ name: string; description: string }>({
+  name: "",
+  description: "",
+});
 const collectionsStore = storeCollections();
 const imagePreviewUrl = ref<string | undefined>("");
 const removeCover = ref(false);
 const emitter = inject<Emitter<Events>>("emitter");
-emitter?.on(
-  "showCreateCollectionDialog",
-  (collectionToEdit: Collection | null) => {
-    if (collectionToEdit) {
-      collectionName.value = collectionToEdit.name;
-      collectionDescription.value = collectionToEdit.description;
-    }
-    show.value = true;
-  }
-);
+emitter?.on("showCreateCollectionDialog", () => {
+  show.value = true;
+});
 
 // Functions
 function triggerFileInput() {
@@ -53,17 +49,19 @@ async function removeArtwork() {
 }
 
 async function createCollection() {
+  if (!collection.value) return;
+
   emitter?.emit("showLoadingDialog", { loading: true, scrim: true });
 
   await collectionApi
     .createCollection({
-      name: collectionName.value,
-      description: collectionDescription.value,
+      name: collection.value.name,
+      description: collection.value.description,
     })
     .then(({ data }) => {
       collectionsStore.add(data);
       emitter?.emit("snackbarShow", {
-        msg: `Collection ${collectionName.value} created successfully!`,
+        msg: `Collection ${data.name} created successfully!`,
         icon: "mdi-check-bold",
         color: "green",
         timeout: 2000,
@@ -86,25 +84,29 @@ async function createCollection() {
 
 function closeDialog() {
   show.value = false;
+  collection.value = {
+    name: "",
+    description: "",
+  };
   imagePreviewUrl.value = "";
 }
 </script>
 
 <template>
   <r-dialog
+    v-if="collection"
     @close="closeDialog"
     v-model="show"
-    icon="mdi-pencil-box"
-    :width="lgAndUp ? '65vw' : '95vw'"
+    icon="mdi-bookmark-box-multiple"
+    :width="lgAndUp ? '45vw' : '95vw'"
   >
     <template #content>
       <v-row class="align-center pa-2" no-gutters>
-        <v-col cols="12" md="8" lg="8" xl="9">
+        <v-col>
           <v-row class="pa-2" no-gutters>
             <v-col>
               <v-text-field
-                v-model="collectionName"
-                class="py-2"
+                v-model="collection.name"
                 label="Name"
                 variant="outlined"
                 required
@@ -115,9 +117,9 @@ function closeDialog() {
           </v-row>
           <v-row class="pa-2" no-gutters>
             <v-col>
-              <v-textarea
-                v-model="collectionDescription"
-                class="py-2"
+              <v-text-field
+                v-model="collection.description"
+                class="mt-1"
                 label="Description"
                 variant="outlined"
                 required
@@ -130,7 +132,7 @@ function closeDialog() {
         <!-- <v-col>
           <v-row class="pa-2 justify-center" no-gutters>
             <v-col class="cover">
-              <collection-card :src="imagePreviewUrl">
+              <collection-card :collection="collection">
                 <template #append-inner>
                   <v-chip-group class="pa-0">
                     <v-chip
@@ -142,7 +144,7 @@ function closeDialog() {
                       <v-icon>mdi-pencil</v-icon>
                       <v-file-input
                         id="file-input"
-                        v-model="rom.artwork"
+                        v-model="collection.artwork"
                         accept="image/*"
                         hide-details
                         class="file-input"
diff --git a/frontend/src/components/common/Collection/Dialog/EditCollection.vue b/frontend/src/components/common/Collection/Dialog/EditCollection.vue
new file mode 100644
index 000000000..251477efe
--- /dev/null
+++ b/frontend/src/components/common/Collection/Dialog/EditCollection.vue
@@ -0,0 +1,185 @@
+<script setup lang="ts">
+import RDialog from "@/components/common/RDialog.vue";
+import CollectionCard from "@/components/common/Collection/Card.vue";
+import collectionApi from "@/services/api/collection";
+import storeCollections, { type Collection } from "@/stores/collections";
+import type { Events } from "@/types/emitter";
+import type { Emitter } from "mitt";
+import { inject, ref } from "vue";
+import { useDisplay, useTheme } from "vuetify";
+
+// Props
+const theme = useTheme();
+const { smAndDown, lgAndUp } = useDisplay();
+const show = ref(false);
+const collection = ref<Collection>();
+const collectionsStore = storeCollections();
+const imagePreviewUrl = ref<string | undefined>("");
+const removeCover = ref(false);
+const emitter = inject<Emitter<Events>>("emitter");
+emitter?.on("showEditCollectionDialog", (collectionToEdit: Collection) => {
+  collection.value = collectionToEdit;
+  show.value = true;
+});
+
+// Functions
+function triggerFileInput() {
+  const fileInput = document.getElementById("file-input");
+  fileInput?.click();
+}
+
+function previewImage(event: Event) {
+  const input = event.target as HTMLInputElement;
+  if (!input.files) return;
+
+  const reader = new FileReader();
+  reader.onload = () => {
+    imagePreviewUrl.value = reader.result?.toString();
+  };
+  if (input.files[0]) {
+    reader.readAsDataURL(input.files[0]);
+  }
+}
+
+async function removeArtwork() {
+  imagePreviewUrl.value = `/assets/default/cover/big_${theme.global.name.value}_missing_cover.png`;
+  removeCover.value = true;
+}
+
+async function editCollection() {
+  if (!collection.value) return;
+
+  emitter?.emit("showLoadingDialog", { loading: true, scrim: true });
+
+  await collectionApi
+    .editCollection({
+      name: collection.value.name,
+      description: collection.value.description,
+    })
+    .then(({ data }) => {
+      collectionsStore.add(data);
+      emitter?.emit("snackbarShow", {
+        msg: `Collection ${data.name} created successfully!`,
+        icon: "mdi-check-bold",
+        color: "green",
+        timeout: 2000,
+      });
+      show.value = false;
+    })
+    .catch((error) => {
+      console.log(error);
+      emitter?.emit("snackbarShow", {
+        msg: error.response.data.detail,
+        icon: "mdi-close-circle",
+        color: "red",
+      });
+      return;
+    })
+    .finally(() => {
+      emitter?.emit("showLoadingDialog", { loading: false, scrim: false });
+    });
+}
+
+function closeDialog() {
+  show.value = false;
+  collection.value = undefined;
+  imagePreviewUrl.value = "";
+}
+</script>
+
+<template>
+  <r-dialog
+    v-if="collection"
+    @close="closeDialog"
+    v-model="show"
+    icon="mdi-pencil-box"
+    :width="lgAndUp ? '45vw' : '95vw'"
+  >
+    <template #content>
+      <v-row class="align-center pa-2" no-gutters>
+        <v-col cols="12" md="8" lg="8" xl="9">
+          <v-row class="pa-2" no-gutters>
+            <v-col>
+              <v-text-field
+                v-model="collection.name"
+                class="py-2"
+                label="Name"
+                variant="outlined"
+                required
+                hide-details
+                @keyup.enter="createCollection()"
+              />
+            </v-col>
+          </v-row>
+          <v-row class="pa-2" no-gutters>
+            <v-col>
+              <v-textarea
+                v-model="collection.description"
+                class="py-2"
+                label="Description"
+                variant="outlined"
+                required
+                hide-details
+                @keyup.enter="createCollection()"
+              />
+            </v-col>
+          </v-row>
+        </v-col>
+        <!-- <v-col>
+          <v-row class="pa-2 justify-center" no-gutters>
+            <v-col class="cover">
+              <collection-card :collection="collection">
+                <template #append-inner>
+                  <v-chip-group class="pa-0">
+                    <v-chip
+                      class="translucent-dark"
+                      :size="smAndDown ? 'large' : 'small'"
+                      @click="triggerFileInput"
+                      label
+                    >
+                      <v-icon>mdi-pencil</v-icon>
+                      <v-file-input
+                        id="file-input"
+                        v-model="collection.artwork"
+                        accept="image/*"
+                        hide-details
+                        class="file-input"
+                        @change="previewImage"
+                      />
+                    </v-chip>
+                    <v-chip
+                      class="translucent-dark"
+                      :size="smAndDown ? 'large' : 'small'"
+                      @click="removeArtwork"
+                      label
+                    >
+                      <v-icon class="text-romm-red"> mdi-delete </v-icon>
+                    </v-chip>
+                  </v-chip-group>
+                </template>
+              </collection-card>
+            </v-col>
+          </v-row>
+        </v-col> -->
+      </v-row>
+    </template>
+    <template #append>
+      <v-row class="justify-center mb-2" no-gutters>
+        <v-btn-group divided density="compact">
+          <v-btn class="bg-terciary" @click="closeDialog"> Cancel </v-btn>
+          <v-btn class="text-romm-green bg-terciary" @click="createCollection">
+            Update
+          </v-btn>
+        </v-btn-group>
+      </v-row>
+    </template>
+  </r-dialog>
+</template>
+<style scoped>
+.cover {
+  min-width: 240px;
+  min-height: 330px;
+  max-width: 240px;
+  max-height: 330px;
+}
+</style>
diff --git a/frontend/src/components/common/Navigation/CollectionsDrawer.vue b/frontend/src/components/common/Navigation/CollectionsDrawer.vue
index 955c9aaba..03cc4c7bf 100644
--- a/frontend/src/components/common/Navigation/CollectionsDrawer.vue
+++ b/frontend/src/components/common/Navigation/CollectionsDrawer.vue
@@ -6,7 +6,7 @@ import storeNavigation from "@/stores/navigation";
 import type { Events } from "@/types/emitter";
 import type { Emitter } from "mitt";
 import { storeToRefs } from "pinia";
-import { inject, onMounted, ref } from "vue";
+import { inject, onMounted } from "vue";
 import { useDisplay } from "vuetify";
 
 // Props
@@ -19,7 +19,7 @@ const emitter = inject<Emitter<Events>>("emitter");
 
 // Functions
 async function addCollection() {
-  emitter?.emit("showCreateCollectionDialog", null);
+  emitter?.emit("showCreateCollectionDialog");
 }
 
 function clear() {
@@ -63,8 +63,7 @@ onMounted(async () => {
       <collection-list-item
         v-for="collection in filteredCollections"
         :collection="collection"
-      >
-      </collection-list-item>
+      />
     </v-list>
     <template #append>
       <v-btn
diff --git a/frontend/src/types/emitter.d.ts b/frontend/src/types/emitter.d.ts
index aabe0acba..c52297414 100644
--- a/frontend/src/types/emitter.d.ts
+++ b/frontend/src/types/emitter.d.ts
@@ -19,7 +19,8 @@ export type SnackbarStatus = {
 
 export type Events = {
   showDeletePlatformDialog: Platform;
-  showCreateCollectionDialog: Collection | null;
+  showCreateCollectionDialog: null;
+  showEditCollectionDialog: Collection;
   showDeleteCollectionDialog: Collection;
   showMatchRomDialog: SimpleRom;
   showSearchCoverDialog: SimpleRom;

From 57d3ad363c9a1b1a6d41f6af7935d528dcb97cff Mon Sep 17 00:00:00 2001
From: Zurdi <zurdizurdo25@gmail.com>
Date: Tue, 2 Jul 2024 17:41:14 +0200
Subject: [PATCH 10/33] added collection cover placeholder

---
 .../default/cover/big_dark_collection.png     | Bin 0 -> 6268 bytes
 .../default/cover/big_light_collection.png    | Bin 0 -> 5021 bytes
 .../default/cover/small_dark_collection.png   | Bin 0 -> 3320 bytes
 .../default/cover/small_light_collection.png  | Bin 0 -> 2618 bytes
 .../src/components/common/Collection/Card.vue | 118 +++++++++++++-----
 .../Collection/Dialog/CreateCollection.vue    |   6 +-
 .../Collection/Dialog/EditCollection.vue      |  33 +++--
 .../src/components/common/Game/Card/Base.vue  |   2 +-
 .../components/common/Game/Dialog/EditRom.vue |   2 +-
 .../common/Game/Dialog/SearchCoverRom.vue     |   9 +-
 .../src/layouts/Dashboard/Collections.vue     |   2 +-
 frontend/src/services/api/collection.ts       |  18 ++-
 frontend/src/services/api/rom.ts              |  12 +-
 frontend/src/services/api/steamgriddb.ts      |  16 +++
 frontend/src/views/Home.vue                   |   2 +
 15 files changed, 154 insertions(+), 66 deletions(-)
 create mode 100644 frontend/assets/default/cover/big_dark_collection.png
 create mode 100644 frontend/assets/default/cover/big_light_collection.png
 create mode 100644 frontend/assets/default/cover/small_dark_collection.png
 create mode 100644 frontend/assets/default/cover/small_light_collection.png
 create mode 100644 frontend/src/services/api/steamgriddb.ts

diff --git a/frontend/assets/default/cover/big_dark_collection.png b/frontend/assets/default/cover/big_dark_collection.png
new file mode 100644
index 0000000000000000000000000000000000000000..869d0e68736909b79c6b8f32f2d757ff3924e129
GIT binary patch
literal 6268
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
UAIvKM=c|CHsj8z=qih}WUyb!|761SM

literal 0
HcmV?d00001

diff --git a/frontend/assets/default/cover/big_light_collection.png b/frontend/assets/default/cover/big_light_collection.png
new file mode 100644
index 0000000000000000000000000000000000000000..9d1570e5e38e8d77c661c751b21a1636ae23cbac
GIT binary patch
literal 5021
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

literal 0
HcmV?d00001

diff --git a/frontend/assets/default/cover/small_dark_collection.png b/frontend/assets/default/cover/small_dark_collection.png
new file mode 100644
index 0000000000000000000000000000000000000000..996e703853e81ad2636848ac083800af3f1192cc
GIT binary patch
literal 3320
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

literal 0
HcmV?d00001

diff --git a/frontend/assets/default/cover/small_light_collection.png b/frontend/assets/default/cover/small_light_collection.png
new file mode 100644
index 0000000000000000000000000000000000000000..239a4a10d58269f2540d348c7b7e2fa791304e7e
GIT binary patch
literal 2618
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

literal 0
HcmV?d00001

diff --git a/frontend/src/components/common/Collection/Card.vue b/frontend/src/components/common/Collection/Card.vue
index 23be015c9..46c8074da 100644
--- a/frontend/src/components/common/Collection/Card.vue
+++ b/frontend/src/components/common/Collection/Card.vue
@@ -1,40 +1,102 @@
 <script setup lang="ts">
 import type { Collection } from "@/stores/collections";
-import CollectionCover from "@/components/common/Collection/Cover.vue";
+import { useTheme } from "vuetify";
 
-defineProps<{ collection: Collection }>();
+const props = withDefaults(
+  defineProps<{
+    collection: Collection;
+    transformScale?: boolean;
+    showTitle?: boolean;
+    showRomCount?: boolean;
+    withLink?: boolean;
+    src?: string;
+  }>(),
+  {
+    transformScale: false,
+    showTitle: false,
+    showRomCount: false,
+    withLink: true,
+    src: "",
+  }
+);
+const theme = useTheme();
 </script>
 
 <template>
-  <v-hover v-slot="{ isHovering, props }">
+  <v-hover v-slot="{ isHovering, props: hoverProps }">
     <v-card
-      v-bind="props"
-      class="bg-terciary transform-scale"
-      :class="{ 'on-hover': isHovering }"
-      :elevation="isHovering ? 20 : 3"
-      :to="{ name: 'collection', params: { collection: collection.id } }"
+      v-bind="hoverProps"
+      :class="{
+        'on-hover': isHovering,
+        'transform-scale': transformScale,
+      }"
+      :elevation="isHovering && transformScale ? 20 : 3"
+      :to="
+        withLink
+          ? { name: 'collection', params: { collection: collection.id } }
+          : ''
+      "
     >
-      <v-card-text>
-        <v-row class="pa-1 justify-center bg-primary">
-          <div
-            :title="collection.name?.toString()"
-            class="px-2 text-truncate text-caption"
-          >
-            {{ collection.name }}
+      <v-row v-if="showTitle" no-gutters class="py-1 px-2 text-truncate text-center text-caption">
+        <v-col>
+          {{ collection.name }}
+        </v-col>
+      </v-row>
+      <v-img
+        cover
+        :src="
+          src
+            ? src
+            : collection.path_cover_l
+            ? collection.path_cover_l
+            : `/assets/default/cover/big_${theme.global.name.value}_collection.png`
+        "
+        :lazy-src="
+          src
+            ? src
+            : collection.path_cover_s
+            ? collection.path_cover_s
+            : `/assets/default/cover/small_${theme.global.name.value}_collection.png`
+        "
+        :aspect-ratio="2 / 3"
+      >
+        <div class="position-absolute append-inner">
+          <slot name="append-inner"></slot>
+        </div>
+
+        <template #error>
+          <v-img
+            :src="`/assets/default/cover/big_${theme.global.name.value}_missing_cover.png`"
+            cover
+            :aspect-ratio="2 / 3"
+          ></v-img>
+        </template>
+        <template #placeholder>
+          <div class="d-flex align-center justify-center fill-height">
+            <v-progress-circular
+              :width="2"
+              :size="40"
+              color="romm-accent-1"
+              indeterminate
+            />
           </div>
-        </v-row>
-        <v-row>
-          <collection-cover :collection="collection" />
-          <v-chip
-            class="bg-chip position-absolute"
-            size="x-small"
-            style="bottom: 0.5rem; right: 0.5rem"
-            label
-          >
-            {{ collection.rom_count }}
-          </v-chip>
-        </v-row>
-      </v-card-text>
+        </template>
+      </v-img>
+      <v-chip
+        v-if="showRomCount"
+        class="bg-chip position-absolute"
+        size="x-small"
+        style="bottom: 0.5rem; right: 0.5rem"
+        label
+      >
+        {{ collection.rom_count }}
+      </v-chip>
     </v-card>
   </v-hover>
 </template>
+<style scoped>
+.append-inner {
+  bottom: -0.1rem;
+  right: -0.3rem;
+}
+</style>
diff --git a/frontend/src/components/common/Collection/Dialog/CreateCollection.vue b/frontend/src/components/common/Collection/Dialog/CreateCollection.vue
index 5115c1c13..e0bc94c5c 100644
--- a/frontend/src/components/common/Collection/Dialog/CreateCollection.vue
+++ b/frontend/src/components/common/Collection/Dialog/CreateCollection.vue
@@ -10,7 +10,7 @@ import { useDisplay, useTheme } from "vuetify";
 
 // Props
 const theme = useTheme();
-const { smAndDown, lgAndUp } = useDisplay();
+const { smAndDown, mdAndUp } = useDisplay();
 const show = ref(false);
 const collection = ref<{ name: string; description: string }>({
   name: "",
@@ -98,11 +98,11 @@ function closeDialog() {
     @close="closeDialog"
     v-model="show"
     icon="mdi-bookmark-box-multiple"
-    :width="lgAndUp ? '45vw' : '95vw'"
+    :width="mdAndUp ? '55vw' : '95vw'"
   >
     <template #content>
       <v-row class="align-center pa-2" no-gutters>
-        <v-col>
+        <v-col cols="12" md="8" lg="8" xl="9">
           <v-row class="pa-2" no-gutters>
             <v-col>
               <v-text-field
diff --git a/frontend/src/components/common/Collection/Dialog/EditCollection.vue b/frontend/src/components/common/Collection/Dialog/EditCollection.vue
index 251477efe..b25273641 100644
--- a/frontend/src/components/common/Collection/Dialog/EditCollection.vue
+++ b/frontend/src/components/common/Collection/Dialog/EditCollection.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import RDialog from "@/components/common/RDialog.vue";
 import CollectionCard from "@/components/common/Collection/Card.vue";
-import collectionApi from "@/services/api/collection";
+import collectionApi, {
+  type UpdateCollection,
+} from "@/services/api/collection";
 import storeCollections, { type Collection } from "@/stores/collections";
 import type { Events } from "@/types/emitter";
 import type { Emitter } from "mitt";
@@ -12,8 +14,7 @@ import { useDisplay, useTheme } from "vuetify";
 const theme = useTheme();
 const { smAndDown, lgAndUp } = useDisplay();
 const show = ref(false);
-const collection = ref<Collection>();
-const collectionsStore = storeCollections();
+const collection = ref<UpdateCollection>();
 const imagePreviewUrl = ref<string | undefined>("");
 const removeCover = ref(false);
 const emitter = inject<Emitter<Events>>("emitter");
@@ -52,19 +53,16 @@ async function editCollection() {
   emitter?.emit("showLoadingDialog", { loading: true, scrim: true });
 
   await collectionApi
-    .editCollection({
-      name: collection.value.name,
-      description: collection.value.description,
+    .updateCollection({
+      collection: collection.value,
     })
     .then(({ data }) => {
-      collectionsStore.add(data);
       emitter?.emit("snackbarShow", {
-        msg: `Collection ${data.name} created successfully!`,
+        msg: `Collection updated successfully!`,
         icon: "mdi-check-bold",
         color: "green",
         timeout: 2000,
       });
-      show.value = false;
     })
     .catch((error) => {
       console.log(error);
@@ -77,6 +75,7 @@ async function editCollection() {
     })
     .finally(() => {
       emitter?.emit("showLoadingDialog", { loading: false, scrim: false });
+      closeDialog();
     });
 }
 
@@ -93,7 +92,7 @@ function closeDialog() {
     @close="closeDialog"
     v-model="show"
     icon="mdi-pencil-box"
-    :width="lgAndUp ? '45vw' : '95vw'"
+    :width="lgAndUp ? '65vw' : '95vw'"
   >
     <template #content>
       <v-row class="align-center pa-2" no-gutters>
@@ -107,7 +106,7 @@ function closeDialog() {
                 variant="outlined"
                 required
                 hide-details
-                @keyup.enter="createCollection()"
+                @keyup.enter="editCollection"
               />
             </v-col>
           </v-row>
@@ -120,15 +119,15 @@ function closeDialog() {
                 variant="outlined"
                 required
                 hide-details
-                @keyup.enter="createCollection()"
+                @keyup.enter="editCollection"
               />
             </v-col>
           </v-row>
         </v-col>
-        <!-- <v-col>
+        <v-col>
           <v-row class="pa-2 justify-center" no-gutters>
             <v-col class="cover">
-              <collection-card :collection="collection">
+              <collection-card :show-title="false" :with-link="false" :collection="collection" :src="imagePreviewUrl">
                 <template #append-inner>
                   <v-chip-group class="pa-0">
                     <v-chip
@@ -160,14 +159,14 @@ function closeDialog() {
               </collection-card>
             </v-col>
           </v-row>
-        </v-col> -->
+        </v-col>
       </v-row>
     </template>
     <template #append>
-      <v-row class="justify-center mb-2" no-gutters>
+      <v-row class="justify-center mt-4 mb-2" no-gutters>
         <v-btn-group divided density="compact">
           <v-btn class="bg-terciary" @click="closeDialog"> Cancel </v-btn>
-          <v-btn class="text-romm-green bg-terciary" @click="createCollection">
+          <v-btn class="text-romm-green bg-terciary" @click="editCollection">
             Update
           </v-btn>
         </v-btn-group>
diff --git a/frontend/src/components/common/Game/Card/Base.vue b/frontend/src/components/common/Game/Card/Base.vue
index a86e8e2bc..b802d078d 100644
--- a/frontend/src/components/common/Game/Card/Base.vue
+++ b/frontend/src/components/common/Game/Card/Base.vue
@@ -65,7 +65,7 @@ onMounted(() => {
         'transform-scale': transformScale,
         'with-border': withBorder,
       }"
-      :elevation="isHovering && transformScale ? 20 : 2"
+      :elevation="isHovering && transformScale ? 20 : 3"
     >
       <v-progress-linear
         v-if="romsStore.isSimpleRom(rom)"
diff --git a/frontend/src/components/common/Game/Dialog/EditRom.vue b/frontend/src/components/common/Game/Dialog/EditRom.vue
index 212bc9183..b85afd417 100644
--- a/frontend/src/components/common/Game/Dialog/EditRom.vue
+++ b/frontend/src/components/common/Game/Dialog/EditRom.vue
@@ -197,7 +197,7 @@ function closeDialog() {
       </v-row>
     </template>
     <template #append>
-      <v-row class="justify-center mb-2" no-gutters>
+      <v-row class="justify-center mt-4 mb-2" no-gutters>
         <v-btn-group divided density="compact">
           <v-btn class="bg-terciary" @click="closeDialog"> Cancel </v-btn>
           <v-btn class="text-romm-green bg-terciary" @click="updateRom">
diff --git a/frontend/src/components/common/Game/Dialog/SearchCoverRom.vue b/frontend/src/components/common/Game/Dialog/SearchCoverRom.vue
index 015463cbf..4c4329e80 100644
--- a/frontend/src/components/common/Game/Dialog/SearchCoverRom.vue
+++ b/frontend/src/components/common/Game/Dialog/SearchCoverRom.vue
@@ -2,6 +2,7 @@
 import type { SearchCoverSchema } from "@/__generated__";
 import RDialog from "@/components/common/RDialog.vue";
 import romApi from "@/services/api/rom";
+import steamgriddb from "@/services/api/steamgriddb";
 import storeRoms, { type SimpleRom } from "@/stores/roms";
 import type { Events } from "@/types/emitter";
 import type { Emitter } from "mitt";
@@ -39,7 +40,7 @@ async function searchCovers() {
 
   if (!searching.value) {
     searching.value = true;
-    await romApi
+    await steamgriddb
       .searchCover({
         searchTerm: searchTerm.value,
       })
@@ -215,7 +216,11 @@ onBeforeUnmount(() => {
                     cover
                   >
                     <template #error>
-                      <v-img :src="resource.url" cover :aspect-ratio="2 / 3"></v-img>
+                      <v-img
+                        :src="resource.url"
+                        cover
+                        :aspect-ratio="2 / 3"
+                      ></v-img>
                     </template>
                     <template #placeholder>
                       <div
diff --git a/frontend/src/layouts/Dashboard/Collections.vue b/frontend/src/layouts/Dashboard/Collections.vue
index a82b48c17..cf65bbe43 100644
--- a/frontend/src/layouts/Dashboard/Collections.vue
+++ b/frontend/src/layouts/Dashboard/Collections.vue
@@ -21,7 +21,7 @@ const collections = storeCollections();
           :lg="views[0]['size-lg']"
           :xl="views[0]['size-xl']"
         >
-          <collection-card :key="collection.name" :collection="collection" />
+          <collection-card show-rom-count show-title transformScale :key="collection.name" :collection="collection" />
         </v-col>
       </v-row>
     </template>
diff --git a/frontend/src/services/api/collection.ts b/frontend/src/services/api/collection.ts
index 641fba367..b605a6311 100644
--- a/frontend/src/services/api/collection.ts
+++ b/frontend/src/services/api/collection.ts
@@ -24,12 +24,26 @@ async function getCollection(
   return api.get(`/collections/${id}`);
 }
 
+export type UpdateCollection = Collection & {
+  artwork?: File;
+  url_cover?: string;
+};
+
 async function updateCollection({
   collection,
+  removeCover = false,
 }: {
-  collection: Collection;
+  collection: UpdateCollection;
+  removeCover?: boolean;
 }): Promise<{ data: MessageResponse }> {
-  return api.delete(`/collections/${collection.id}`);
+  const formData = new FormData();
+  formData.append("name", collection.name || "");
+  formData.append("description", collection.description || "");
+  formData.append("url_cover", collection.url_cover || "");
+  if (collection.artwork) formData.append("artwork", collection.artwork);
+  return api.put(`/collections/${collection.id}`, formData, {
+    params: { remove_cover: removeCover },
+  });
 }
 
 async function deleteCollection({
diff --git a/frontend/src/services/api/rom.ts b/frontend/src/services/api/rom.ts
index 228543c8e..3b855c28c 100644
--- a/frontend/src/services/api/rom.ts
+++ b/frontend/src/services/api/rom.ts
@@ -1,13 +1,12 @@
 import type {
   AddRomsResponse,
   MessageResponse,
-  SearchCoverSchema,
   SearchRomSchema,
 } from "@/__generated__";
 import api from "@/services/api/index";
 import socket from "@/services/socket";
 import storeDownload from "@/stores/download";
-import type { SimpleRom, DetailedRom } from "@/stores/roms";
+import type { DetailedRom, SimpleRom } from "@/stores/roms";
 import { getDownloadLink } from "@/utils";
 
 export const romApi = api;
@@ -94,14 +93,6 @@ async function searchRom({
   });
 }
 
-async function searchCover({
-  searchTerm,
-}: {
-  searchTerm: string;
-}): Promise<{ data: SearchCoverSchema[] }> {
-  return api.get("/search/cover", { params: { search_term: searchTerm } });
-}
-
 // Listen for multi-file download completion events
 socket.on("download:complete", clearRomFromDownloads);
 
@@ -196,7 +187,6 @@ export default {
   getRom,
   downloadRom,
   searchRom,
-  searchCover,
   updateRom,
   deleteRoms,
   updateUserRomProps,
diff --git a/frontend/src/services/api/steamgriddb.ts b/frontend/src/services/api/steamgriddb.ts
new file mode 100644
index 000000000..dc1eca314
--- /dev/null
+++ b/frontend/src/services/api/steamgriddb.ts
@@ -0,0 +1,16 @@
+import type { SearchCoverSchema } from "@/__generated__";
+import api from "@/services/api/index";
+
+export const romApi = api;
+
+async function searchCover({
+  searchTerm,
+}: {
+  searchTerm: string;
+}): Promise<{ data: SearchCoverSchema[] }> {
+  return api.get("/search/cover", { params: { search_term: searchTerm } });
+}
+
+export default {
+  searchCover,
+};
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index a54fce0bb..579c1be9b 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -8,6 +8,7 @@ import CreatePlatformVersionDialog from "@/components/Management/Dialog/CreatePl
 import DeletePlatformBindingDialog from "@/components/Management/Dialog/DeletePlatformBinding.vue";
 import DeletePlatformVersionDialog from "@/components/Management/Dialog/DeletePlatformVersion.vue";
 import CreateCollectionDialog from "@/components/common/Collection/Dialog/CreateCollection.vue";
+import EditCollectionDialog from "@/components/common/Collection/Dialog/EditCollection.vue";
 import DeleteCollectionDialog from "@/components/common/Collection/Dialog/DeleteCollection.vue";
 import DeleteAssetDialog from "@/components/common/Game/Dialog/Asset/DeleteAssets.vue";
 import CopyRomDownloadLinkDialog from "@/components/common/Game/Dialog/CopyDownloadLink.vue";
@@ -97,6 +98,7 @@ onMounted(async () => {
 
   <delete-platform-dialog />
   <create-collection-dialog />
+  <edit-collection-dialog />
   <delete-collection-dialog />
   <search-rom-dialog />
   <match-rom-dialog />

From 97f9792f9d0a23bd38ecfbc84144e07488414fda Mon Sep 17 00:00:00 2001
From: Zurdi <zurdizurdo25@gmail.com>
Date: Tue, 2 Jul 2024 18:13:41 +0200
Subject: [PATCH 11/33] fixed create collection dialog

---
 .../src/components/Details/Info/FileInfo.vue  | 18 +++++------
 .../Gallery/AppBar/Collection/EditBtn.vue     |  2 +-
 .../src/components/common/Collection/Card.vue | 10 +++++--
 .../Collection/Dialog/CreateCollection.vue    | 30 +++++++++++--------
 .../common/Navigation/CollectionsDrawer.vue   |  2 +-
 5 files changed, 36 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/Details/Info/FileInfo.vue b/frontend/src/components/Details/Info/FileInfo.vue
index ac34f3c49..620c657e2 100644
--- a/frontend/src/components/Details/Info/FileInfo.vue
+++ b/frontend/src/components/Details/Info/FileInfo.vue
@@ -26,19 +26,19 @@ const romUser = ref(
 
 // Functions
 async function toggleMainSibling() {
-  ownProps.value.is_main_sibling = !ownProps.value.is_main_sibling;
+  romUser.value.is_main_sibling = !romUser.value.is_main_sibling;
   romApi.updateUserRomProps({
     romId: props.rom.id,
-    noteRawMarkdown: ownProps.value.note_raw_markdown,
-    noteIsPublic: ownProps.value.note_is_public,
-    isMainSibling: ownProps.value.is_main_sibling,
+    noteRawMarkdown: romUser.value.note_raw_markdown,
+    noteIsPublic: romUser.value.note_is_public,
+    isMainSibling: romUser.value.is_main_sibling,
   });
 }
 
 watch(
   () => props.rom,
   async () => {
-    ownProps.value = props.rom.rom_user ?? {
+    romUser.value = props.rom.rom_user ?? {
       id: null,
       user_id: auth.user?.id,
       rom_id: props.rom.id,
@@ -79,14 +79,14 @@ watch(
                   size="small"
                   @click="toggleMainSibling"
                   ><v-icon
-                    :class="ownProps.is_main_sibling ? '' : 'mr-1'"
-                    :color="ownProps.is_main_sibling ? 'romm-accent-1' : ''"
+                    :class="romUser.is_main_sibling ? '' : 'mr-1'"
+                    :color="romUser.is_main_sibling ? 'romm-accent-1' : ''"
                     >{{
-                      ownProps.is_main_sibling
+                      romUser.is_main_sibling
                         ? "mdi-checkbox-outline"
                         : "mdi-checkbox-blank-outline"
                     }}</v-icon
-                  >{{ ownProps.is_main_sibling ? "" : "Default" }}</v-btn
+                  >{{ romUser.is_main_sibling ? "" : "Default" }}</v-btn
                 >
               </template></v-tooltip
             >
diff --git a/frontend/src/components/Gallery/AppBar/Collection/EditBtn.vue b/frontend/src/components/Gallery/AppBar/Collection/EditBtn.vue
index 30e224907..3081b5fe5 100644
--- a/frontend/src/components/Gallery/AppBar/Collection/EditBtn.vue
+++ b/frontend/src/components/Gallery/AppBar/Collection/EditBtn.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import storeRoms from "@/stores/roms";
-import Collection from "@/stores/collections";
+import type { Collection } from "@/stores/collections";
 import type { Events } from "@/types/emitter";
 import type { Emitter } from "mitt";
 import { inject } from "vue";
diff --git a/frontend/src/components/common/Collection/Card.vue b/frontend/src/components/common/Collection/Card.vue
index 46c8074da..9472e9204 100644
--- a/frontend/src/components/common/Collection/Card.vue
+++ b/frontend/src/components/common/Collection/Card.vue
@@ -2,7 +2,7 @@
 import type { Collection } from "@/stores/collections";
 import { useTheme } from "vuetify";
 
-const props = withDefaults(
+withDefaults(
   defineProps<{
     collection: Collection;
     transformScale?: boolean;
@@ -32,12 +32,16 @@ const theme = useTheme();
       }"
       :elevation="isHovering && transformScale ? 20 : 3"
       :to="
-        withLink
+        withLink && collection
           ? { name: 'collection', params: { collection: collection.id } }
           : ''
       "
     >
-      <v-row v-if="showTitle" no-gutters class="py-1 px-2 text-truncate text-center text-caption">
+      <v-row
+        v-if="showTitle"
+        no-gutters
+        class="py-1 px-2 text-truncate text-center text-caption"
+      >
         <v-col>
           {{ collection.name }}
         </v-col>
diff --git a/frontend/src/components/common/Collection/Dialog/CreateCollection.vue b/frontend/src/components/common/Collection/Dialog/CreateCollection.vue
index e0bc94c5c..cd268abfc 100644
--- a/frontend/src/components/common/Collection/Dialog/CreateCollection.vue
+++ b/frontend/src/components/common/Collection/Dialog/CreateCollection.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
-import RDialog from "@/components/common/RDialog.vue";
 import CollectionCard from "@/components/common/Collection/Card.vue";
-import collectionApi from "@/services/api/collection";
-import storeCollections, { type Collection } from "@/stores/collections";
+import RDialog from "@/components/common/RDialog.vue";
+import collectionApi, {
+  type UpdateCollection,
+} from "@/services/api/collection";
+import storeCollections from "@/stores/collections";
 import type { Events } from "@/types/emitter";
 import type { Emitter } from "mitt";
 import { inject, ref } from "vue";
@@ -12,10 +14,10 @@ import { useDisplay, useTheme } from "vuetify";
 const theme = useTheme();
 const { smAndDown, mdAndUp } = useDisplay();
 const show = ref(false);
-const collection = ref<{ name: string; description: string }>({
+const collection = ref<UpdateCollection>({
   name: "",
   description: "",
-});
+} as UpdateCollection);
 const collectionsStore = storeCollections();
 const imagePreviewUrl = ref<string | undefined>("");
 const removeCover = ref(false);
@@ -87,14 +89,13 @@ function closeDialog() {
   collection.value = {
     name: "",
     description: "",
-  };
+  } as UpdateCollection;
   imagePreviewUrl.value = "";
 }
 </script>
 
 <template>
   <r-dialog
-    v-if="collection"
     @close="closeDialog"
     v-model="show"
     icon="mdi-bookmark-box-multiple"
@@ -117,7 +118,7 @@ function closeDialog() {
           </v-row>
           <v-row class="pa-2" no-gutters>
             <v-col>
-              <v-text-field
+              <v-textarea
                 v-model="collection.description"
                 class="mt-1"
                 label="Description"
@@ -129,10 +130,15 @@ function closeDialog() {
             </v-col>
           </v-row>
         </v-col>
-        <!-- <v-col>
+        <v-col>
           <v-row class="pa-2 justify-center" no-gutters>
             <v-col class="cover">
-              <collection-card :collection="collection">
+              <collection-card
+                :show-title="false"
+                :with-link="false"
+                :collection="collection"
+                :src="imagePreviewUrl"
+              >
                 <template #append-inner>
                   <v-chip-group class="pa-0">
                     <v-chip
@@ -164,11 +170,11 @@ function closeDialog() {
               </collection-card>
             </v-col>
           </v-row>
-        </v-col> -->
+        </v-col>
       </v-row>
     </template>
     <template #append>
-      <v-row class="justify-center mb-2" no-gutters>
+      <v-row class="justify-center MT-4 mb-2" no-gutters>
         <v-btn-group divided density="compact">
           <v-btn class="bg-terciary" @click="closeDialog"> Cancel </v-btn>
           <v-btn class="text-romm-green bg-terciary" @click="createCollection">
diff --git a/frontend/src/components/common/Navigation/CollectionsDrawer.vue b/frontend/src/components/common/Navigation/CollectionsDrawer.vue
index 03cc4c7bf..c99ce09b3 100644
--- a/frontend/src/components/common/Navigation/CollectionsDrawer.vue
+++ b/frontend/src/components/common/Navigation/CollectionsDrawer.vue
@@ -19,7 +19,7 @@ const emitter = inject<Emitter<Events>>("emitter");
 
 // Functions
 async function addCollection() {
-  emitter?.emit("showCreateCollectionDialog");
+  emitter?.emit("showCreateCollectionDialog", null);
 }
 
 function clear() {

From 23e0a064abb57be10ef0b8ce14bea1cc6986a407 Mon Sep 17 00:00:00 2001
From: Zurdi <zurdizurdo25@gmail.com>
Date: Tue, 2 Jul 2024 23:34:50 +0200
Subject: [PATCH 12/33] added update collection endpoint

---
 backend/alembic/versions/0022_collections_.py |   1 +
 backend/endpoints/collections.py              |  33 ++-
 backend/endpoints/responses/collection.py     |   1 +
 backend/endpoints/responses/rom.py            |   6 -
 backend/endpoints/rom.py                      |   6 +-
 backend/exceptions/endpoint_exceptions.py     |  15 +-
 .../handler/database/collections_handler.py   |  13 +-
 backend/models/collection.py                  |  10 +
 .../Collection/Dialog/EditCollection.vue      |   2 +-
 .../common/Game/Dialog/AddToCollection.vue    | 240 ++++++++++++++++++
 .../common/Game/Dialog/DeleteRom.vue          |   2 +-
 frontend/src/services/api/collection.ts       |   1 +
 12 files changed, 313 insertions(+), 17 deletions(-)
 create mode 100644 frontend/src/components/common/Game/Dialog/AddToCollection.vue

diff --git a/backend/alembic/versions/0022_collections_.py b/backend/alembic/versions/0022_collections_.py
index b67a3a0c8..992ce32d2 100644
--- a/backend/alembic/versions/0022_collections_.py
+++ b/backend/alembic/versions/0022_collections_.py
@@ -26,6 +26,7 @@ def upgrade() -> None:
         sa.Column("description", sa.Text(), nullable=True),
         sa.Column("path_cover_l", sa.String(length=1000), nullable=True),
         sa.Column("path_cover_s", sa.String(length=1000), nullable=True),
+        sa.Column("url_cover", sa.Text(), nullable=True),
         sa.Column("roms", sa.JSON(), nullable=False),
         sa.Column("user_id", sa.Integer(), nullable=False),
         sa.Column("is_public", sa.Boolean(), nullable=False),
diff --git a/backend/endpoints/collections.py b/backend/endpoints/collections.py
index f7896c530..16da33bda 100644
--- a/backend/endpoints/collections.py
+++ b/backend/endpoints/collections.py
@@ -1,9 +1,12 @@
+import json
+
 from decorators.auth import protected_route
 from endpoints.responses import MessageResponse
 from endpoints.responses.collection import CollectionSchema
 from exceptions.endpoint_exceptions import (
     CollectionAlreadyExistsException,
     CollectionNotFoundInDatabaseException,
+    CollectionPermissionError,
 )
 from fastapi import APIRouter, Request
 from handler.database import db_collection_handler
@@ -75,7 +78,7 @@ def get_collection(request: Request, id: int) -> CollectionSchema:
 
 
 @protected_route(router.put, "/collections/{id}", ["collections.write"])
-async def update_collection(request: Request) -> MessageResponse:
+async def update_collection(request: Request, id: int) -> MessageResponse:
     """Update collection endpoint
 
     Args:
@@ -85,7 +88,33 @@ async def update_collection(request: Request) -> MessageResponse:
         MessageResponse: Standard message response
     """
 
-    return {"msg": "Enpoint not available yet"}
+    data = await request.form()
+    collection = db_collection_handler.get_collection(id)
+
+    if collection.user_id != request.user.id:
+        raise CollectionPermissionError(id)
+
+    if not collection:
+        raise CollectionNotFoundInDatabaseException(id)
+
+    roms = collection.roms  # Default to the roms list from the database
+
+    if "roms" in data:
+        try:
+            roms = json.loads(data.get("roms"))
+        except json.JSONDecodeError:
+            raise ValueError("Invalid JSON for roms field")
+
+    cleaned_data = {
+        "name": data.get("name", collection.name),
+        "description": data.get("description", collection.description),
+        "roms": roms,
+        "is_public": data.get("is_public", collection.is_public),
+        "user_id": request.user.id,
+    }
+
+    db_collection_handler.update_collection(id, cleaned_data)
+    return {"msg": "Collection updated  successfully!"}
 
 
 @protected_route(router.delete, "/collections/{id}", ["collections.write"])
diff --git a/backend/endpoints/responses/collection.py b/backend/endpoints/responses/collection.py
index d6e8d15cc..484c96be5 100644
--- a/backend/endpoints/responses/collection.py
+++ b/backend/endpoints/responses/collection.py
@@ -9,6 +9,7 @@ class CollectionSchema(BaseModel):
     description: str
     path_cover_l: str | None
     path_cover_s: str | None
+    url_cover: str
     roms: set[int]
     rom_count: int
     user_id: int
diff --git a/backend/endpoints/responses/rom.py b/backend/endpoints/responses/rom.py
index b0122473a..9f709a687 100644
--- a/backend/endpoints/responses/rom.py
+++ b/backend/endpoints/responses/rom.py
@@ -126,12 +126,6 @@ def from_orm_with_request(cls, db_rom: Rom, request: Request) -> RomSchema:
 
         return rom
 
-    @classmethod
-    def from_orm_with_request_list(
-        cls, db_roms: list[Rom], request: Request
-    ) -> list[RomSchema]:
-        return [cls.from_orm_with_request(rom, request) for rom in db_roms]
-
     @computed_field  # type: ignore
     @property
     def sort_comparator(self) -> str:
diff --git a/backend/endpoints/rom.py b/backend/endpoints/rom.py
index f02e26c9e..304df2c94 100644
--- a/backend/endpoints/rom.py
+++ b/backend/endpoints/rom.py
@@ -110,7 +110,7 @@ def get_roms(
         list[RomSchema]: List of roms stored in the database
     """
 
-    db_roms = db_rom_handler.get_roms(
+    roms = db_rom_handler.get_roms(
         platform_id=platform_id,
         collection_id=collection_id,
         search_term=search_term.lower(),
@@ -119,7 +119,7 @@ def get_roms(
         limit=limit,
     )
 
-    return RomSchema.from_orm_with_request_list(db_roms, request)
+    return [RomSchema.from_orm_with_request(rom, request) for rom in roms]
 
 
 @protected_route(
@@ -370,7 +370,7 @@ async def update_rom(
         else:
             cleaned_data["url_cover"] = data.get("url_cover", rom.url_cover)
             path_cover_s, path_cover_l = fs_resource_handler.get_rom_cover(
-                overwrite=True,
+                overwrite=cleaned_data["url_cover"] != rom.url_cover,
                 rom=rom,
                 url_cover=cleaned_data.get("url_cover", ""),
             )
diff --git a/backend/exceptions/endpoint_exceptions.py b/backend/exceptions/endpoint_exceptions.py
index 473d0d21e..6e297a8f1 100644
--- a/backend/exceptions/endpoint_exceptions.py
+++ b/backend/exceptions/endpoint_exceptions.py
@@ -29,9 +29,18 @@ def __init__(self, id):
         self.message = f"Collection with id '{id}' not found"
         super().__init__(self.message)
         log.critical(self.message)
-        raise HTTPException(
-            status_code=status.HTTP_500_INTERNAL_SERVER_ERROR, detail=self.message
-        )
+        raise HTTPException(status_code=status.HTTP_404_NOT_FOUND, detail=self.message)
+
+    def __repr__(self) -> str:
+        return self.message
+
+
+class CollectionPermissionError(Exception):
+    def __init__(self, id):
+        self.message = f"Permission denied for collection with id '{id}'"
+        super().__init__(self.message)
+        log.critical(self.message)
+        raise HTTPException(status_code=status.HTTP_403_FORBIDDEN, detail=self.message)
 
     def __repr__(self) -> str:
         return self.message
diff --git a/backend/handler/database/collections_handler.py b/backend/handler/database/collections_handler.py
index 1a439aa01..019f3714a 100644
--- a/backend/handler/database/collections_handler.py
+++ b/backend/handler/database/collections_handler.py
@@ -1,6 +1,6 @@
 from decorators.database import begin_session
 from models.collection import Collection
-from sqlalchemy import Select, and_, delete, or_, select
+from sqlalchemy import Select, delete, select, update
 from sqlalchemy.orm import Session
 
 from .base_handler import DBBaseHandler
@@ -41,6 +41,17 @@ def get_collections(
             .all()
         )
 
+    @begin_session
+    def update_collection(
+        self, id: int, data: dict, session: Session = None
+    ) -> Collection:
+        return session.execute(
+            update(Collection)
+            .where(Collection.id == id)
+            .values(**data)
+            .execution_options(synchronize_session="evaluate")
+        )
+
     @begin_session
     def delete_collection(self, id: int, session: Session = None) -> int:
         return session.execute(
diff --git a/backend/models/collection.py b/backend/models/collection.py
index 4d46cd3ea..5f25ac373 100644
--- a/backend/models/collection.py
+++ b/backend/models/collection.py
@@ -1,5 +1,7 @@
 from __future__ import annotations
 
+from functools import cached_property
+
 from models.base import BaseModel
 from models.user import User
 from sqlalchemy import JSON, ForeignKey, String, Text
@@ -17,6 +19,10 @@ class Collection(BaseModel):
     path_cover_l: Mapped[str | None] = mapped_column(Text, default="")
     path_cover_s: Mapped[str | None] = mapped_column(Text, default="")
 
+    url_cover: Mapped[str | None] = mapped_column(
+        Text, default="", doc="URL to cover image stored in IGDB"
+    )
+
     roms: Mapped[set[int]] = mapped_column(
         JSON, default=[], doc="Rom id's that belong to this collection"
     )
@@ -33,5 +39,9 @@ def user__username(self) -> str:
     def rom_count(self):
         return len(self.roms)
 
+    @cached_property
+    def has_cover(self) -> bool:
+        return bool(self.path_cover_s or self.path_cover_l)
+
     def __repr__(self) -> str:
         return self.name
diff --git a/frontend/src/components/common/Collection/Dialog/EditCollection.vue b/frontend/src/components/common/Collection/Dialog/EditCollection.vue
index b25273641..aa84256be 100644
--- a/frontend/src/components/common/Collection/Dialog/EditCollection.vue
+++ b/frontend/src/components/common/Collection/Dialog/EditCollection.vue
@@ -43,7 +43,7 @@ function previewImage(event: Event) {
 }
 
 async function removeArtwork() {
-  imagePreviewUrl.value = `/assets/default/cover/big_${theme.global.name.value}_missing_cover.png`;
+  imagePreviewUrl.value = `/assets/default/cover/big_${theme.global.name.value}_collection.png`;
   removeCover.value = true;
 }
 
diff --git a/frontend/src/components/common/Game/Dialog/AddToCollection.vue b/frontend/src/components/common/Game/Dialog/AddToCollection.vue
new file mode 100644
index 000000000..392e68fb8
--- /dev/null
+++ b/frontend/src/components/common/Game/Dialog/AddToCollection.vue
@@ -0,0 +1,240 @@
+<script setup lang="ts">
+import RAvatar from "@/components/common/Game/RAvatar.vue";
+import RDialog from "@/components/common/RDialog.vue";
+import romApi from "@/services/api/rom";
+import storeRoms, { type SimpleRom } from "@/stores/roms";
+import type { Events } from "@/types/emitter";
+import { formatBytes } from "@/utils";
+import type { Emitter } from "mitt";
+import { inject, ref, watch } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import { useDisplay, useTheme } from "vuetify";
+
+// Props
+const theme = useTheme();
+const { smAndUp, mdAndUp } = useDisplay();
+const router = useRouter();
+const route = useRoute();
+const show = ref(false);
+const romsStore = storeRoms();
+const roms = ref<SimpleRom[]>([]);
+const romsToDeleteFromFs = ref<number[]>([]);
+const platformId = ref<number>(0);
+const emitter = inject<Emitter<Events>>("emitter");
+emitter?.on("showDeleteRomDialog", (romsToDelete) => {
+  roms.value = romsToDelete;
+  platformId.value = roms.value[0].platform_id;
+  updateDataTablePages();
+  show.value = true;
+});
+const HEADERS = [
+  {
+    title: "Name",
+    align: "start",
+    sortable: true,
+    key: "name",
+  },
+] as const;
+const page = ref(1);
+const itemsPerPage = ref(10);
+const pageCount = ref(0);
+const PER_PAGE_OPTIONS = [10, 25, 50, 100];
+
+// Functions
+async function deleteRoms() {
+  await romApi
+    .deleteRoms({ roms: roms.value, deleteFromFs: romsToDeleteFromFs.value })
+    .then((response) => {
+      emitter?.emit("snackbarShow", {
+        msg: response.data.msg,
+        icon: "mdi-check-bold",
+        color: "green",
+      });
+      romsStore.resetSelection();
+      romsStore.remove(roms.value);
+      emitter?.emit("refreshDrawer", null);
+      closeDialog();
+      if (route.name == "rom") {
+        router.push({
+          name: "platform",
+          params: { platform: platformId.value },
+        });
+      }
+    })
+    .catch((error) => {
+      console.log(error);
+      emitter?.emit("snackbarShow", {
+        msg: error.response.data.detail,
+        icon: "mdi-close-circle",
+        color: "red",
+      });
+      return;
+    });
+}
+
+function updateDataTablePages() {
+  pageCount.value = Math.ceil(roms.value.length / itemsPerPage.value);
+}
+
+watch(itemsPerPage, async () => {
+  updateDataTablePages();
+});
+
+function closeDialog() {
+  romsToDeleteFromFs.value = [];
+  roms.value = [];
+  show.value = false;
+}
+</script>
+
+<template>
+  <r-dialog
+    @close="closeDialog"
+    v-model="show"
+    icon="mdi-delete"
+    scroll-content
+    :width="mdAndUp ? '50vw' : '95vw'"
+  >
+    <template #header>
+      <v-row no-gutters class="justify-center">
+        <span>Removing</span>
+        <span class="text-romm-accent-1 mx-1">{{ roms.length }}</span>
+        <span>games from RomM</span>
+      </v-row>
+    </template>
+    <template #prepend>
+      <v-list-item class="text-caption text-center">
+        <span
+          >Select the games you want to remove from your filesystem, otherwise
+          they will only be deleted from RomM database.</span
+        >
+      </v-list-item>
+    </template>
+    <template #content>
+      <v-data-table
+        :item-value="(item) => item.id"
+        :items="roms"
+        :width="mdAndUp ? '60vw' : '95vw'"
+        :items-per-page="itemsPerPage"
+        :items-per-page-options="PER_PAGE_OPTIONS"
+        :headers="HEADERS"
+        v-model="romsToDeleteFromFs"
+        v-model:page="page"
+        show-select
+      >
+        <template #item.name="{ item }">
+          <v-list-item class="px-0">
+            <template #prepend>
+              <r-avatar
+                :src="
+                  !item.igdb_id && !item.moby_id
+                    ? `/assets/default/cover/small_${theme.global.name.value}_unmatched.png`
+                    : item.has_cover
+                    ? `/assets/romm/resources/${item.path_cover_s}?ts=${item.updated_at}`
+                    : `/assets/default/cover/small_${theme.global.name.value}_missing_cover.png`
+                "
+              />
+            </template>
+            <v-row no-gutters
+              ><v-col>{{ item.name }}</v-col></v-row
+            >
+            <v-row v-if="romsToDeleteFromFs.includes(item.id)" no-gutters
+              ><v-col class="text-romm-accent-1"
+                >{{ item.file_name
+                }}<v-chip
+                  v-if="romsToDeleteFromFs.includes(item.id) && smAndUp"
+                  label
+                  size="x-small"
+                  class="text-romm-red ml-1"
+                >
+                  Removing from filesystem
+                </v-chip></v-col
+              ></v-row
+            >
+            <v-row
+              v-if="romsToDeleteFromFs.includes(item.id) && !smAndUp"
+              no-gutters
+            >
+              <v-col>
+                <v-chip label size="x-small" class="text-romm-red">
+                  Removing from filesystem
+                </v-chip>
+              </v-col>
+            </v-row>
+            <v-row no-gutters>
+              <v-col>
+                <v-chip v-if="!smAndUp" size="x-small" label
+                  >{{ formatBytes(item.file_size_bytes) }}
+                </v-chip>
+              </v-col>
+            </v-row>
+            <template #append>
+              <v-row no-gutters v-if="smAndUp">
+                <v-col>
+                  <v-chip size="x-small" label>{{
+                    formatBytes(item.file_size_bytes)
+                  }}</v-chip>
+                </v-col>
+              </v-row>
+            </template>
+          </v-list-item>
+        </template>
+        <template #bottom>
+          <v-divider />
+          <v-row no-gutters class="pt-2 align-center justify-center">
+            <v-col class="px-6">
+              <v-pagination
+                v-model="page"
+                rounded="0"
+                :show-first-last-page="true"
+                active-color="romm-accent-1"
+                :length="pageCount"
+              />
+            </v-col>
+            <v-col cols="5" sm="3" xl="2">
+              <v-select
+                v-model="itemsPerPage"
+                class="pa-2"
+                label="Roms per page"
+                density="compact"
+                variant="outlined"
+                :items="PER_PAGE_OPTIONS"
+                hide-details
+              />
+            </v-col>
+          </v-row>
+        </template>
+      </v-data-table>
+    </template>
+    <template #append>
+      <v-row v-if="romsToDeleteFromFs.length > 0" no-gutters>
+        <v-col>
+          <v-list-item class="text-center mt-2">
+            <span class="text-romm-red text-body-1">WARNING:</span>
+            <span class="text-body-2 ml-1">You are going to remove</span>
+            <span class="text-romm-red text-body-1 ml-1">{{
+              romsToDeleteFromFs.length
+            }}</span>
+            <span class="text-body-2 ml-1"
+              >roms from your filesystem. This action can't be reverted!</span
+            >
+          </v-list-item>
+        </v-col>
+      </v-row>
+      <v-row class="justify-center my-2">
+        <v-btn-group divided density="compact">
+          <v-btn class="bg-terciary" @click="closeDialog" variant="flat">
+            Cancel
+          </v-btn>
+          <v-btn
+            class="text-romm-red bg-terciary"
+            variant="flat"
+            @click="deleteRoms"
+          >
+            Confirm
+          </v-btn>
+        </v-btn-group>
+      </v-row>
+    </template>
+  </r-dialog>
+</template>
diff --git a/frontend/src/components/common/Game/Dialog/DeleteRom.vue b/frontend/src/components/common/Game/Dialog/DeleteRom.vue
index 392e68fb8..b73b3bbae 100644
--- a/frontend/src/components/common/Game/Dialog/DeleteRom.vue
+++ b/frontend/src/components/common/Game/Dialog/DeleteRom.vue
@@ -127,7 +127,7 @@ function closeDialog() {
             <template #prepend>
               <r-avatar
                 :src="
-                  !item.igdb_id && !item.moby_id
+                  !item.igdb_id && !item.moby_id && !item.has_cover
                     ? `/assets/default/cover/small_${theme.global.name.value}_unmatched.png`
                     : item.has_cover
                     ? `/assets/romm/resources/${item.path_cover_s}?ts=${item.updated_at}`
diff --git a/frontend/src/services/api/collection.ts b/frontend/src/services/api/collection.ts
index b605a6311..f2b56f0a5 100644
--- a/frontend/src/services/api/collection.ts
+++ b/frontend/src/services/api/collection.ts
@@ -40,6 +40,7 @@ async function updateCollection({
   formData.append("name", collection.name || "");
   formData.append("description", collection.description || "");
   formData.append("url_cover", collection.url_cover || "");
+  formData.append("roms", JSON.stringify(collection.roms));
   if (collection.artwork) formData.append("artwork", collection.artwork);
   return api.put(`/collections/${collection.id}`, formData, {
     params: { remove_cover: removeCover },

From 50bcd00361f545f0841cc83c377dff93f18b3a74 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Wed, 3 Jul 2024 01:29:01 +0200
Subject: [PATCH 13/33] added remove rom from collection dialog

---
 backend/endpoints/collections.py              |  12 +-
 backend/endpoints/responses/collection.py     |   1 +
 .../__generated__/models/CollectionSchema.ts  |   2 +
 .../src/components/Gallery/FabOverlay.vue     |  39 ++--
 .../common/Collection/Dialog/AddRoms.vue      | 197 ++++++++++++++++++
 .../Collection/Dialog/CreateCollection.vue    |   7 +-
 .../Collection/Dialog/EditCollection.vue      |  16 +-
 .../common/Collection/Dialog/RemoveRoms.vue   | 175 ++++++++++++++++
 .../components/common/Collection/ListItem.vue |   7 +-
 .../components/common/Collection/RAvatar.vue  |  13 +-
 .../src/components/common/Game/AdminMenu.vue  |  16 +-
 .../common/Game/Dialog/AddToCollection.vue    |  10 +-
 .../common/Game/Dialog/DeleteRom.vue          |  10 +-
 .../src/components/common/Game/RAvatar.vue    |  16 +-
 frontend/src/components/common/Game/Table.vue |  10 +-
 frontend/src/types/emitter.d.ts               |   2 +
 frontend/src/views/Gallery/Collection.vue     |  10 +-
 frontend/src/views/Home.vue                   |   4 +
 frontend/src/views/Play/Base.vue              |  10 +-
 frontend/src/views/Scan.vue                   |  10 +-
 20 files changed, 478 insertions(+), 89 deletions(-)
 create mode 100644 frontend/src/components/common/Collection/Dialog/AddRoms.vue
 create mode 100644 frontend/src/components/common/Collection/Dialog/RemoveRoms.vue

diff --git a/backend/endpoints/collections.py b/backend/endpoints/collections.py
index 16da33bda..7511014f2 100644
--- a/backend/endpoints/collections.py
+++ b/backend/endpoints/collections.py
@@ -97,18 +97,18 @@ async def update_collection(request: Request, id: int) -> MessageResponse:
     if not collection:
         raise CollectionNotFoundInDatabaseException(id)
 
-    roms = collection.roms  # Default to the roms list from the database
-
-    if "roms" in data:
+    try:
         try:
-            roms = json.loads(data.get("roms"))
+            roms = json.loads(data["roms"])
         except json.JSONDecodeError:
-            raise ValueError("Invalid JSON for roms field")
+            raise ValueError("Invalid list for roms field in update collection")
+    except KeyError:
+        roms = collection.roms
 
     cleaned_data = {
         "name": data.get("name", collection.name),
         "description": data.get("description", collection.description),
-        "roms": roms,
+        "roms": list(set(roms)),
         "is_public": data.get("is_public", collection.is_public),
         "user_id": request.user.id,
     }
diff --git a/backend/endpoints/responses/collection.py b/backend/endpoints/responses/collection.py
index 484c96be5..a78defb4e 100644
--- a/backend/endpoints/responses/collection.py
+++ b/backend/endpoints/responses/collection.py
@@ -9,6 +9,7 @@ class CollectionSchema(BaseModel):
     description: str
     path_cover_l: str | None
     path_cover_s: str | None
+    has_cover: bool
     url_cover: str
     roms: set[int]
     rom_count: int
diff --git a/frontend/src/__generated__/models/CollectionSchema.ts b/frontend/src/__generated__/models/CollectionSchema.ts
index 481255ea9..762969e9b 100644
--- a/frontend/src/__generated__/models/CollectionSchema.ts
+++ b/frontend/src/__generated__/models/CollectionSchema.ts
@@ -9,6 +9,8 @@ export type CollectionSchema = {
   description: string;
   path_cover_l: string | null;
   path_cover_s: string | null;
+  has_cover: boolean;
+  url_cover: string;
   roms: Array<number>;
   rom_count: number;
   user_id: number;
diff --git a/frontend/src/components/Gallery/FabOverlay.vue b/frontend/src/components/Gallery/FabOverlay.vue
index cbb90b08e..b099de106 100644
--- a/frontend/src/components/Gallery/FabOverlay.vue
+++ b/frontend/src/components/Gallery/FabOverlay.vue
@@ -118,35 +118,50 @@ function onDownload() {
       </v-btn>
       <v-btn
         key="2"
+        v-if="auth.scopes.includes('roms.write')"
         color="terciary"
         elevation="8"
-        icon
+        icon="mdi-magnify-scan"
         size="default"
-        @click="onDownload"
-      >
-        <v-icon>mdi-download</v-icon>
-      </v-btn>
+        @click="onScan"
+      />
       <v-btn
         key="3"
-        v-if="auth.scopes.includes('roms.write')"
         color="terciary"
         elevation="8"
-        icon
+        icon="mdi-download"
         size="default"
-        @click="onScan"
-      >
-        <v-icon>mdi-magnify-scan</v-icon>
-      </v-btn>
+        @click="onDownload"
+      />
       <v-btn
         key="4"
         color="terciary"
         elevation="8"
+        :icon="
+          $route.name == 'platform'
+            ? 'mdi-bookmark-plus'
+            : 'mdi-bookmark-remove'
+        "
+        size="default"
+        @click.stop="
+          $route.name == 'platform'
+            ? emitter?.emit('showAddToCollectionDialog', romsStore.selectedRoms)
+            : emitter?.emit(
+                'showRemoveFromCollectionDialog',
+                romsStore.selectedRoms
+              )
+        "
+      />
+      <v-btn
+        key="5"
+        color="terciary"
+        elevation="8"
         icon="mdi-select-all"
         size="default"
         @click.stop="selectAllRoms"
       />
       <v-btn
-        key="5"
+        key="6"
         color="terciary"
         elevation="8"
         icon="mdi-select"
diff --git a/frontend/src/components/common/Collection/Dialog/AddRoms.vue b/frontend/src/components/common/Collection/Dialog/AddRoms.vue
new file mode 100644
index 000000000..fbc8dcde0
--- /dev/null
+++ b/frontend/src/components/common/Collection/Dialog/AddRoms.vue
@@ -0,0 +1,197 @@
+<script setup lang="ts">
+import RAvatarCollection from "@/components/common/Collection/RAvatar.vue";
+import RAvatarRom from "@/components/common/Game/RAvatar.vue";
+import RDialog from "@/components/common/RDialog.vue";
+import type { UpdateCollection } from "@/services/api/collection";
+import collectionApi from "@/services/api/collection";
+import storeCollections from "@/stores/collections";
+import { type SimpleRom } from "@/stores/roms";
+import type { Events } from "@/types/emitter";
+import type { Emitter } from "mitt";
+import { inject, ref, watch } from "vue";
+import { useDisplay, useTheme } from "vuetify";
+
+// Props
+const theme = useTheme();
+const { mdAndUp } = useDisplay();
+const show = ref(false);
+const collectionsStore = storeCollections();
+const selectedCollection = ref<UpdateCollection>();
+const roms = ref<SimpleRom[]>([]);
+const emitter = inject<Emitter<Events>>("emitter");
+emitter?.on("showAddToCollectionDialog", (romsToAdd) => {
+  roms.value = romsToAdd;
+  updateDataTablePages();
+  show.value = true;
+});
+const HEADERS = [
+  {
+    title: "Name",
+    align: "start",
+    sortable: true,
+    key: "name",
+  },
+] as const;
+const page = ref(1);
+const itemsPerPage = ref(10);
+const pageCount = ref(0);
+const PER_PAGE_OPTIONS = [10, 25, 50, 100];
+
+// Functions
+async function addRomsToCollection() {
+  if (!selectedCollection.value) return;
+  selectedCollection.value.roms.push(...roms.value.map((r) => r.id));
+  await collectionApi
+    .updateCollection({ collection: selectedCollection.value })
+    .then(({ data }) => {
+      emitter?.emit("snackbarShow", {
+        msg: `Roms added to ${selectedCollection.value?.name} successfully!`,
+        icon: "mdi-check-bold",
+        color: "green",
+        timeout: 2000,
+      });
+    })
+    .catch((error) => {
+      console.log(error);
+      emitter?.emit("snackbarShow", {
+        msg: error.response.data.detail,
+        icon: "mdi-close-circle",
+        color: "red",
+      });
+      return;
+    })
+    .finally(() => {
+      emitter?.emit("showLoadingDialog", { loading: false, scrim: false });
+      closeDialog();
+    });
+}
+
+function updateDataTablePages() {
+  pageCount.value = Math.ceil(roms.value.length / itemsPerPage.value);
+}
+
+watch(itemsPerPage, async () => {
+  updateDataTablePages();
+});
+
+function closeDialog() {
+  roms.value = [];
+  show.value = false;
+  selectedCollection.value = undefined;
+}
+</script>
+
+<template>
+  <r-dialog
+    @close="closeDialog"
+    v-model="show"
+    icon="mdi-bookmark-plus-outline"
+    scroll-content
+    :width="mdAndUp ? '45vw' : '95vw'"
+  >
+    <template #header>
+      <v-row no-gutters class="justify-center">
+        <span>Adding</span>
+        <span class="text-romm-accent-1 mx-1">{{ roms.length }}</span>
+        <span>games to collection</span>
+      </v-row>
+    </template>
+    <template #prepend>
+      <v-select
+        v-model="selectedCollection"
+        class="pa-3"
+        density="default"
+        label="Collection"
+        item-title="name"
+        :items="collectionsStore.all"
+        variant="outlined"
+        hide-details
+        return-object
+        clearable
+      >
+        <template #item="{ props, item }">
+          <v-list-item
+            class="py-4"
+            v-bind="props"
+            :title="item.raw.name ?? ''"
+            :subtitle="item.raw.description"
+          >
+            <template #prepend>
+              <r-avatar-collection :collection="item.raw" />
+            </template>
+            <template #append>
+              <v-chip class="ml-2" size="x-small" label>
+                {{ item.raw.rom_count }}
+              </v-chip>
+            </template>
+          </v-list-item>
+        </template>
+      </v-select>
+    </template>
+    <template #content>
+      <v-data-table
+        :item-value="(item) => item.id"
+        :items="roms"
+        :width="mdAndUp ? '60vw' : '95vw'"
+        :items-per-page="itemsPerPage"
+        :items-per-page-options="PER_PAGE_OPTIONS"
+        :headers="HEADERS"
+        v-model:page="page"
+        hide-default-header
+      >
+        <template #item.name="{ item }">
+          <v-list-item class="px-0">
+            <template #prepend>
+              <r-avatar-rom :rom="item" />
+            </template>
+            <v-row no-gutters
+              ><v-col>{{ item.name }}</v-col></v-row
+            >
+          </v-list-item>
+        </template>
+        <template #bottom>
+          <v-divider />
+          <v-row no-gutters class="pt-2 align-center justify-center">
+            <v-col class="px-6">
+              <v-pagination
+                v-model="page"
+                rounded="0"
+                :show-first-last-page="true"
+                active-color="romm-accent-1"
+                :length="pageCount"
+              />
+            </v-col>
+            <v-col cols="5" sm="3">
+              <v-select
+                v-model="itemsPerPage"
+                class="pa-2"
+                label="Roms per page"
+                density="compact"
+                variant="outlined"
+                :items="PER_PAGE_OPTIONS"
+                hide-details
+              />
+            </v-col>
+          </v-row>
+        </template>
+      </v-data-table>
+    </template>
+    <template #append>
+      <v-row class="justify-center my-2">
+        <v-btn-group divided density="compact">
+          <v-btn class="bg-terciary" @click="closeDialog" variant="flat">
+            Cancel
+          </v-btn>
+          <v-btn
+            class="bg-terciary text-romm-green"
+            :disabled="!selectedCollection"
+            :variant="!selectedCollection ? 'plain' : 'flat'"
+            @click="addRomsToCollection"
+          >
+            Confirm
+          </v-btn>
+        </v-btn-group>
+      </v-row>
+    </template>
+  </r-dialog>
+</template>
diff --git a/frontend/src/components/common/Collection/Dialog/CreateCollection.vue b/frontend/src/components/common/Collection/Dialog/CreateCollection.vue
index cd268abfc..416e2e141 100644
--- a/frontend/src/components/common/Collection/Dialog/CreateCollection.vue
+++ b/frontend/src/components/common/Collection/Dialog/CreateCollection.vue
@@ -177,7 +177,12 @@ function closeDialog() {
       <v-row class="justify-center MT-4 mb-2" no-gutters>
         <v-btn-group divided density="compact">
           <v-btn class="bg-terciary" @click="closeDialog"> Cancel </v-btn>
-          <v-btn class="text-romm-green bg-terciary" @click="createCollection">
+          <v-btn
+            class="bg-terciary text-romm-green"
+            :disabled="!collection.name"
+            :variant="!collection.name ? 'plain' : 'flat'"
+            @click="createCollection"
+          >
             Create
           </v-btn>
         </v-btn-group>
diff --git a/frontend/src/components/common/Collection/Dialog/EditCollection.vue b/frontend/src/components/common/Collection/Dialog/EditCollection.vue
index aa84256be..1c27c17a8 100644
--- a/frontend/src/components/common/Collection/Dialog/EditCollection.vue
+++ b/frontend/src/components/common/Collection/Dialog/EditCollection.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import RDialog from "@/components/common/RDialog.vue";
 import CollectionCard from "@/components/common/Collection/Card.vue";
-import collectionApi, {
-  type UpdateCollection,
-} from "@/services/api/collection";
-import storeCollections, { type Collection } from "@/stores/collections";
+import RDialog from "@/components/common/RDialog.vue";
+import collectionApi from "@/services/api/collection";
+import type { UpdateCollection } from "@/services/api/collection";
+import { type Collection } from "@/stores/collections";
 import type { Events } from "@/types/emitter";
 import type { Emitter } from "mitt";
 import { inject, ref } from "vue";
@@ -127,7 +126,12 @@ function closeDialog() {
         <v-col>
           <v-row class="pa-2 justify-center" no-gutters>
             <v-col class="cover">
-              <collection-card :show-title="false" :with-link="false" :collection="collection" :src="imagePreviewUrl">
+              <collection-card
+                :show-title="false"
+                :with-link="false"
+                :collection="collection"
+                :src="imagePreviewUrl"
+              >
                 <template #append-inner>
                   <v-chip-group class="pa-0">
                     <v-chip
diff --git a/frontend/src/components/common/Collection/Dialog/RemoveRoms.vue b/frontend/src/components/common/Collection/Dialog/RemoveRoms.vue
new file mode 100644
index 000000000..693dd6ba1
--- /dev/null
+++ b/frontend/src/components/common/Collection/Dialog/RemoveRoms.vue
@@ -0,0 +1,175 @@
+<script setup lang="ts">
+import RAvatarRom from "@/components/common/Game/RAvatar.vue";
+import RDialog from "@/components/common/RDialog.vue";
+import router from "@/plugins/router";
+import collectionApi from "@/services/api/collection";
+import type { Collection } from "@/stores/collections";
+import storeRoms, { type SimpleRom } from "@/stores/roms";
+import type { Events } from "@/types/emitter";
+import type { Emitter } from "mitt";
+import { inject, ref, watch } from "vue";
+import { useDisplay } from "vuetify";
+
+// Props
+const { mdAndUp } = useDisplay();
+const show = ref(false);
+const romsStore = storeRoms();
+const selectedCollection = ref<Collection>();
+const roms = ref<SimpleRom[]>([]);
+const emitter = inject<Emitter<Events>>("emitter");
+emitter?.on("showRemoveFromCollectionDialog", (romsToRemove) => {
+  roms.value = romsToRemove;
+  selectedCollection.value = romsStore.currentCollection as Collection;
+  updateDataTablePages();
+  show.value = true;
+});
+const HEADERS = [
+  {
+    title: "Name",
+    align: "start",
+    sortable: true,
+    key: "name",
+  },
+] as const;
+const page = ref(1);
+const itemsPerPage = ref(10);
+const pageCount = ref(0);
+const PER_PAGE_OPTIONS = [10, 25, 50, 100];
+
+// Functions
+async function removeRomsFromCollection() {
+  if (!selectedCollection.value) return;
+  selectedCollection.value.roms = selectedCollection.value.roms.filter(
+    (id) => !roms.value.map((r) => r.id).includes(id)
+  );
+  await collectionApi
+    .updateCollection({ collection: selectedCollection.value })
+    .then(({ data }) => {
+      emitter?.emit("snackbarShow", {
+        msg: `Roms removed from ${selectedCollection.value?.name} successfully!`,
+        icon: "mdi-check-bold",
+        color: "green",
+        timeout: 2000,
+      });
+      romsStore.resetSelection();
+      romsStore.remove(roms.value);
+      emitter?.emit("refreshDrawer", null);
+    })
+    .catch((error) => {
+      console.log(error);
+      emitter?.emit("snackbarShow", {
+        msg: error.response.data.detail,
+        icon: "mdi-close-circle",
+        color: "red",
+      });
+      return;
+    })
+    .finally(() => {
+      emitter?.emit("showLoadingDialog", { loading: false, scrim: false });
+      if (selectedCollection.value?.roms.length == 0) {
+        router.push({ name: "dashboard" });
+      }
+      closeDialog();
+    });
+}
+
+function updateDataTablePages() {
+  pageCount.value = Math.ceil(roms.value.length / itemsPerPage.value);
+}
+
+watch(itemsPerPage, async () => {
+  updateDataTablePages();
+});
+
+function closeDialog() {
+  roms.value = [];
+  show.value = false;
+  selectedCollection.value = undefined;
+}
+</script>
+
+<template>
+  <r-dialog
+    @close="closeDialog"
+    v-model="show"
+    icon="mdi-bookmark-plus-outline"
+    scroll-content
+    :width="mdAndUp ? '45vw' : '95vw'"
+  >
+    <template #header>
+      <v-row no-gutters class="justify-center">
+        <span>Removing</span>
+        <span class="text-romm-accent-1 mx-1">{{ roms.length }}</span>
+        <span>games from</span>
+        <span class="text-romm-accent-1 mx-1">{{
+          selectedCollection?.name
+        }}</span>
+        <span>collection.</span>
+      </v-row>
+    </template>
+    <template #content>
+      <v-data-table
+        :item-value="(item) => item.id"
+        :items="roms"
+        :width="mdAndUp ? '60vw' : '95vw'"
+        :items-per-page="itemsPerPage"
+        :items-per-page-options="PER_PAGE_OPTIONS"
+        :headers="HEADERS"
+        v-model:page="page"
+        hide-default-header
+      >
+        <template #item.name="{ item }">
+          <v-list-item class="px-0">
+            <template #prepend>
+              <r-avatar-rom :rom="item" />
+            </template>
+            <v-row no-gutters
+              ><v-col>{{ item.name }}</v-col></v-row
+            >
+          </v-list-item>
+        </template>
+        <template #bottom>
+          <v-divider />
+          <v-row no-gutters class="pt-2 align-center justify-center">
+            <v-col class="px-6">
+              <v-pagination
+                v-model="page"
+                rounded="0"
+                :show-first-last-page="true"
+                active-color="romm-accent-1"
+                :length="pageCount"
+              />
+            </v-col>
+            <v-col cols="5" sm="3">
+              <v-select
+                v-model="itemsPerPage"
+                class="pa-2"
+                label="Roms per page"
+                density="compact"
+                variant="outlined"
+                :items="PER_PAGE_OPTIONS"
+                hide-details
+              />
+            </v-col>
+          </v-row>
+        </template>
+      </v-data-table>
+    </template>
+    <template #append>
+      <v-row class="justify-center my-2">
+        <v-btn-group divided density="compact">
+          <v-btn class="bg-terciary" @click="closeDialog" variant="flat">
+            Cancel
+          </v-btn>
+          <v-btn
+            class="bg-terciary text-romm-red"
+            variant="flat"
+            @click="removeRomsFromCollection"
+          >
+            Confirm
+          </v-btn>
+        </v-btn-group>
+      </v-row>
+    </template>
+  </r-dialog>
+</template>
diff --git a/frontend/src/components/common/Collection/ListItem.vue b/frontend/src/components/common/Collection/ListItem.vue
index d49139253..5e0f52f3f 100644
--- a/frontend/src/components/common/Collection/ListItem.vue
+++ b/frontend/src/components/common/Collection/ListItem.vue
@@ -13,12 +13,7 @@ defineProps<{ collection: Collection }>();
     :value="collection.name"
   >
     <template #prepend>
-      <template v-if="collection.path_cover_s">
-        <r-avatar :src="collection.path_cover_s" />
-      </template>
-      <template v-else>
-        <v-icon>mdi-bookmark</v-icon>
-      </template>
+      <r-avatar :collection="collection" />
     </template>
     <v-row no-gutters
       ><v-col
diff --git a/frontend/src/components/common/Collection/RAvatar.vue b/frontend/src/components/common/Collection/RAvatar.vue
index 644a8cdf9..d768fe069 100644
--- a/frontend/src/components/common/Collection/RAvatar.vue
+++ b/frontend/src/components/common/Collection/RAvatar.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
+import type { Collection } from "@/stores/collections";
 import { useTheme } from "vuetify";
 
-withDefaults(defineProps<{ src?: string | null; size?: number }>(), { size: 45 });
+withDefaults(defineProps<{ collection: Collection; size?: number }>(), {
+  size: 45,
+});
 const theme = useTheme();
 </script>
 
@@ -9,12 +12,16 @@ const theme = useTheme();
   <v-avatar :rounded="0" :size="size">
     <v-img
       :src="
-        src ?? `/assets/default/cover/big_${theme.global.name.value}_empty.png`
+        !collection.has_cover
+          ? `/assets/default/cover/small_${theme.global.name.value}_collection.png`
+          : collection.has_cover
+          ? `/assets/romm/resources/${collection.path_cover_s}?ts=${collection.updated_at}`
+          : `/assets/default/cover/small_${theme.global.name.value}_collection.png`
       "
     >
       <template #error>
         <v-img
-          :src="`assets/default/cover/big_${theme.global.name.value}_empty.png`"
+          :src="`assets/default/cover/big_${theme.global.name.value}_collection.png`"
         >
         </v-img>
       </template>
diff --git a/frontend/src/components/common/Game/AdminMenu.vue b/frontend/src/components/common/Game/AdminMenu.vue
index 2d4646beb..5acac2a3f 100644
--- a/frontend/src/components/common/Game/AdminMenu.vue
+++ b/frontend/src/components/common/Game/AdminMenu.vue
@@ -39,12 +39,12 @@ const heartbeat = storeHeartbeat();
       </v-list-item-title>
       <v-list-item-subtitle>
         {{
-          !heartbeat.value.STEAMGRIDDB_ENABLED ? "SteamgridDB is not enabled" : ""
+          !heartbeat.value.STEAMGRIDDB_ENABLED
+            ? "SteamgridDB is not enabled"
+            : ""
         }}
       </v-list-item-subtitle>
     </v-list-item>
-
-    <v-divider />
     <v-list-item
       class="py-4 pr-5"
       @click="emitter?.emit('showEditRomDialog', { ...rom })"
@@ -54,6 +54,16 @@ const heartbeat = storeHeartbeat();
       </v-list-item-title>
     </v-list-item>
     <v-divider />
+    <v-list-item
+      class="py-4 pr-5"
+      @click="emitter?.emit('showAddToCollectionDialog', [{ ...rom }])"
+    >
+      <v-list-item-title class="d-flex">
+        <v-icon icon="mdi-bookmark-plus-outline" class="mr-2" />Add to
+        collection
+      </v-list-item-title>
+    </v-list-item>
+    <v-divider />
     <v-list-item
       class="py-4 pr-5 text-romm-red"
       @click="emitter?.emit('showDeleteRomDialog', [rom])"
diff --git a/frontend/src/components/common/Game/Dialog/AddToCollection.vue b/frontend/src/components/common/Game/Dialog/AddToCollection.vue
index 392e68fb8..371dbfac1 100644
--- a/frontend/src/components/common/Game/Dialog/AddToCollection.vue
+++ b/frontend/src/components/common/Game/Dialog/AddToCollection.vue
@@ -125,15 +125,7 @@ function closeDialog() {
         <template #item.name="{ item }">
           <v-list-item class="px-0">
             <template #prepend>
-              <r-avatar
-                :src="
-                  !item.igdb_id && !item.moby_id
-                    ? `/assets/default/cover/small_${theme.global.name.value}_unmatched.png`
-                    : item.has_cover
-                    ? `/assets/romm/resources/${item.path_cover_s}?ts=${item.updated_at}`
-                    : `/assets/default/cover/small_${theme.global.name.value}_missing_cover.png`
-                "
-              />
+              <r-avatar :rom="item" />
             </template>
             <v-row no-gutters
               ><v-col>{{ item.name }}</v-col></v-row
diff --git a/frontend/src/components/common/Game/Dialog/DeleteRom.vue b/frontend/src/components/common/Game/Dialog/DeleteRom.vue
index b73b3bbae..371dbfac1 100644
--- a/frontend/src/components/common/Game/Dialog/DeleteRom.vue
+++ b/frontend/src/components/common/Game/Dialog/DeleteRom.vue
@@ -125,15 +125,7 @@ function closeDialog() {
         <template #item.name="{ item }">
           <v-list-item class="px-0">
             <template #prepend>
-              <r-avatar
-                :src="
-                  !item.igdb_id && !item.moby_id && !item.has_cover
-                    ? `/assets/default/cover/small_${theme.global.name.value}_unmatched.png`
-                    : item.has_cover
-                    ? `/assets/romm/resources/${item.path_cover_s}?ts=${item.updated_at}`
-                    : `/assets/default/cover/small_${theme.global.name.value}_missing_cover.png`
-                "
-              />
+              <r-avatar :rom="item" />
             </template>
             <v-row no-gutters
               ><v-col>{{ item.name }}</v-col></v-row
diff --git a/frontend/src/components/common/Game/RAvatar.vue b/frontend/src/components/common/Game/RAvatar.vue
index e4a8d0f2c..bdc2c5fe0 100644
--- a/frontend/src/components/common/Game/RAvatar.vue
+++ b/frontend/src/components/common/Game/RAvatar.vue
@@ -1,9 +1,21 @@
 <script setup lang="ts">
-withDefaults(defineProps<{ src: string; size?: number }>(), { size: 45 });
+import type { SimpleRom } from "@/stores/roms";
+import { useTheme } from "vuetify";
+
+withDefaults(defineProps<{ rom: SimpleRom; size?: number }>(), { size: 45 });
+const theme = useTheme();
 </script>
 
 <template>
   <v-avatar :rounded="0" :size="size">
-    <v-img :src="src" />
+    <v-img
+      :src="
+        !rom.igdb_id && !rom.moby_id && !rom.has_cover
+          ? `/assets/default/cover/small_${theme.global.name.value}_unmatched.png`
+          : rom.has_cover
+          ? `/assets/romm/resources/${rom.path_cover_s}?ts=${rom.updated_at}`
+          : `/assets/default/cover/small_${theme.global.name.value}_missing_cover.png`
+      "
+    />
   </v-avatar>
 </template>
diff --git a/frontend/src/components/common/Game/Table.vue b/frontend/src/components/common/Game/Table.vue
index e89805a53..bcb98c33f 100644
--- a/frontend/src/components/common/Game/Table.vue
+++ b/frontend/src/components/common/Game/Table.vue
@@ -120,15 +120,7 @@ onMounted(() => {
       <td class="name-row">
         <v-list-item class="px-0">
           <template #prepend>
-            <r-avatar
-              :src="
-                (!item.igdb_id && !item.moby_id) && !item.has_cover
-                  ? `/assets/default/cover/small_${theme.global.name.value}_unmatched.png`
-                  : item.has_cover
-                  ? `/assets/romm/resources/${item.path_cover_s}?ts=${item.updated_at}`
-                  : `/assets/default/cover/small_${theme.global.name.value}_missing_cover.png`
-              "
-            />
+            <r-avatar :rom="item" />
           </template>
           <v-row no-gutters
             ><v-col>{{ item.name }}</v-col></v-row
diff --git a/frontend/src/types/emitter.d.ts b/frontend/src/types/emitter.d.ts
index c52297414..5265bb456 100644
--- a/frontend/src/types/emitter.d.ts
+++ b/frontend/src/types/emitter.d.ts
@@ -21,6 +21,8 @@ export type Events = {
   showDeletePlatformDialog: Platform;
   showCreateCollectionDialog: null;
   showEditCollectionDialog: Collection;
+  showAddToCollectionDialog: SimpleRom[];
+  showRemoveFromCollectionDialog: SimpleRom[];
   showDeleteCollectionDialog: Collection;
   showMatchRomDialog: SimpleRom;
   showSearchCoverDialog: SimpleRom;
diff --git a/frontend/src/views/Gallery/Collection.vue b/frontend/src/views/Gallery/Collection.vue
index 036df6867..abcda3af9 100644
--- a/frontend/src/views/Gallery/Collection.vue
+++ b/frontend/src/views/Gallery/Collection.vue
@@ -26,7 +26,7 @@ const route = useRoute();
 const galleryViewStore = storeGalleryView();
 const galleryFilterStore = storeGalleryFilter();
 const { scrolledToTop, currentView } = storeToRefs(galleryViewStore);
-const collections = storeCollections();
+const collectionsStore = storeCollections();
 const romsStore = storeRoms();
 const {
   allRoms,
@@ -199,13 +199,13 @@ function resetGallery() {
 
 onMounted(async () => {
   const routeCollectionId = Number(route.params.collection);
-  const routeCollection = collections.get(routeCollectionId);
+  const routeCollection = collectionsStore.get(routeCollectionId);
 
   if (!routeCollection) {
     await collectionApi
       .getCollection(routeCollectionId)
       .then((data) => {
-        collections.add(data.data);
+        collectionsStore.add(data.data);
         romsStore.setCurrentCollection(data.data);
       })
       .catch((error) => {
@@ -232,10 +232,10 @@ onBeforeRouteUpdate(async (to, from) => {
   resetGallery();
 
   const routeCollectionId = Number(to.params.collection);
-  const routeCollection = collections.get(routeCollectionId);
+  const routeCollection = collectionsStore.get(routeCollectionId);
   if (!routeCollection) {
     const { data } = await collectionApi.getCollection(routeCollectionId);
-    collections.add(data);
+    collectionsStore.add(data);
   } else {
     romsStore.setCurrentCollection(routeCollection);
   }
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index 579c1be9b..fb0188f09 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -9,6 +9,8 @@ import DeletePlatformBindingDialog from "@/components/Management/Dialog/DeletePl
 import DeletePlatformVersionDialog from "@/components/Management/Dialog/DeletePlatformVersion.vue";
 import CreateCollectionDialog from "@/components/common/Collection/Dialog/CreateCollection.vue";
 import EditCollectionDialog from "@/components/common/Collection/Dialog/EditCollection.vue";
+import AddRomsToCollectionDialog from "@/components/common/Collection/Dialog/AddRoms.vue";
+import RemoveRomsFromCollectionDialog from "@/components/common/Collection/Dialog/RemoveRoms.vue";
 import DeleteCollectionDialog from "@/components/common/Collection/Dialog/DeleteCollection.vue";
 import DeleteAssetDialog from "@/components/common/Game/Dialog/Asset/DeleteAssets.vue";
 import CopyRomDownloadLinkDialog from "@/components/common/Game/Dialog/CopyDownloadLink.vue";
@@ -99,6 +101,8 @@ onMounted(async () => {
   <delete-platform-dialog />
   <create-collection-dialog />
   <edit-collection-dialog />
+  <add-roms-to-collection-dialog />
+  <remove-roms-from-collection-dialog />
   <delete-collection-dialog />
   <search-rom-dialog />
   <match-rom-dialog />
diff --git a/frontend/src/views/Play/Base.vue b/frontend/src/views/Play/Base.vue
index 2bcb1358d..f6b1cba81 100644
--- a/frontend/src/views/Play/Base.vue
+++ b/frontend/src/views/Play/Base.vue
@@ -91,15 +91,7 @@ onMounted(async () => {
           <v-divider class="my-4" />
           <v-list-item class="px-2">
             <template #prepend>
-              <r-avatar
-                :src="
-                  !rom.igdb_id && !rom.moby_id
-                    ? `/assets/default/cover/small_${theme.global.name.value}_unmatched.png`
-                    : rom.has_cover
-                    ? `/assets/romm/resources/${rom.path_cover_s}?ts=${rom.updated_at}`
-                    : `/assets/default/cover/small_${theme.global.name.value}_missing_cover.png`
-                "
-              />
+              <r-avatar :rom="rom" />
             </template>
             <v-row no-gutters
               ><v-col>{{ rom.name }}</v-col></v-row
diff --git a/frontend/src/views/Scan.vue b/frontend/src/views/Scan.vue
index fc59ee88a..9dfe931a8 100644
--- a/frontend/src/views/Scan.vue
+++ b/frontend/src/views/Scan.vue
@@ -338,15 +338,7 @@ async function stopScan() {
               :to="{ name: 'rom', params: { rom: rom.id } }"
             >
               <template #prepend>
-                <r-avatar
-                  :src="
-                    !rom.igdb_id && !rom.moby_id
-                      ? `/assets/default/cover/small_${theme.global.name.value}_unmatched.png`
-                      : rom.has_cover
-                      ? `/assets/romm/resources/${rom.path_cover_s}?ts=${rom.updated_at}`
-                      : `/assets/default/cover/small_${theme.global.name.value}_missing_cover.png`
-                  "
-                />
+                <r-avatar :rom="rom" />
               </template>
               <v-row no-gutters>
                 <span

From 39708ff828d9463c2655e6248910319b9e6df065 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Wed, 3 Jul 2024 10:03:55 +0200
Subject: [PATCH 14/33] fixes from trunk

---
 backend/alembic/env.py            | 1 -
 backend/endpoints/collections.py  | 4 ++--
 backend/endpoints/sockets/scan.py | 1 -
 3 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/backend/alembic/env.py b/backend/alembic/env.py
index 85294e200..2bf6bfbc6 100644
--- a/backend/alembic/env.py
+++ b/backend/alembic/env.py
@@ -6,7 +6,6 @@
 from config.config_manager import ConfigManager
 from models.assets import Save, Screenshot, State  # noqa
 from models.base import BaseModel
-from models.collection import Collection
 from models.firmware import Firmware  # noqa
 from models.platform import Platform  # noqa
 from models.rom import Rom  # noqa
diff --git a/backend/endpoints/collections.py b/backend/endpoints/collections.py
index 7511014f2..994322595 100644
--- a/backend/endpoints/collections.py
+++ b/backend/endpoints/collections.py
@@ -100,8 +100,8 @@ async def update_collection(request: Request, id: int) -> MessageResponse:
     try:
         try:
             roms = json.loads(data["roms"])
-        except json.JSONDecodeError:
-            raise ValueError("Invalid list for roms field in update collection")
+        except json.JSONDecodeError as e:
+            raise ValueError("Invalid list for roms field in update collection") from e
     except KeyError:
         roms = collection.roms
 
diff --git a/backend/endpoints/sockets/scan.py b/backend/endpoints/sockets/scan.py
index 1b67e1bf1..0153d7e66 100644
--- a/backend/endpoints/sockets/scan.py
+++ b/backend/endpoints/sockets/scan.py
@@ -3,7 +3,6 @@
 import emoji
 import socketio  # type: ignore
 from config import SCAN_TIMEOUT
-from endpoints.responses.firmware import FirmwareSchema
 from endpoints.responses.platform import PlatformSchema
 from endpoints.responses.rom import RomSchema
 from exceptions.fs_exceptions import (

From 59c2a51a6f6c501f40badfb39c277c163dab68d1 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Wed, 3 Jul 2024 11:59:52 +0200
Subject: [PATCH 15/33] added collection cover management

---
 .../versions/0019_resources_refactor.py       |  12 +-
 backend/endpoints/collections.py              | 109 +++++++-
 backend/endpoints/rom.py                      |  65 ++---
 backend/endpoints/sockets/scan.py             |   4 +-
 .../handler/database/collections_handler.py   |   3 +-
 .../handler/filesystem/resources_handler.py   |  43 ++--
 backend/handler/filesystem/tests/test_fs.py   |   4 +-
 backend/models/collection.py                  |   4 +
 backend/models/rom.py                         |   2 +-
 frontend/src/__generated__/index.ts           |   2 +
 .../Body_add_collection_collections_post.ts   |   8 +
 ..._update_collection_collections__id__put.ts |   8 +
 .../src/components/Gallery/FabOverlay.vue     |   2 +-
 .../src/components/common/Collection/Card.vue |  27 +-
 .../components/common/Collection/Cover.vue    |  31 ---
 .../common/Collection/Dialog/AddRoms.vue      |  15 +-
 .../Collection/Dialog/CreateCollection.vue    |  68 +++--
 .../Collection/Dialog/DeleteCollection.vue    |   7 +-
 .../Collection/Dialog/EditCollection.vue      |  58 +++--
 .../common/Collection/Dialog/RemoveRoms.vue   |   4 +-
 .../src/components/common/Game/AdminMenu.vue  |  17 --
 .../src/components/common/Game/Card/Base.vue  |   9 +-
 .../common/Game/Dialog/AddToCollection.vue    | 232 ------------------
 .../components/common/Game/Dialog/EditRom.vue |  45 ++--
 .../common/Navigation/MainAppBar.vue          |   7 +-
 .../common/Navigation/MainDrawer.vue          |  16 +-
 .../common/Navigation/SearchBtn.vue           |   2 +-
 .../common/Navigation/UploadBtn.vue           |   3 +-
 .../src/components/common/Platform/Card.vue   |   2 +-
 .../SearchCoverRom.vue => SearchCover.vue}    |  82 ++-----
 .../src/layouts/Dashboard/Collections.vue     |   8 +-
 frontend/src/layouts/Dashboard/Recent.vue     |   1 +
 frontend/src/services/api/collection.ts       |  26 +-
 frontend/src/types/emitter.d.ts               |   3 +-
 frontend/src/views/Gallery/Collection.vue     |   1 +
 frontend/src/views/Gallery/Platform.vue       |   1 +
 frontend/src/views/GameDetails.vue            |   2 +-
 frontend/src/views/Home.vue                   |   2 +-
 38 files changed, 406 insertions(+), 529 deletions(-)
 create mode 100644 frontend/src/__generated__/models/Body_add_collection_collections_post.ts
 create mode 100644 frontend/src/__generated__/models/Body_update_collection_collections__id__put.ts
 delete mode 100644 frontend/src/components/common/Collection/Cover.vue
 delete mode 100644 frontend/src/components/common/Game/Dialog/AddToCollection.vue
 rename frontend/src/components/common/{Game/Dialog/SearchCoverRom.vue => SearchCover.vue} (73%)

diff --git a/backend/alembic/versions/0019_resources_refactor.py b/backend/alembic/versions/0019_resources_refactor.py
index 22b47ba13..d463cc0b7 100644
--- a/backend/alembic/versions/0019_resources_refactor.py
+++ b/backend/alembic/versions/0019_resources_refactor.py
@@ -44,7 +44,7 @@ def upgrade() -> None:
 
         old_folder_path = f"{RESOURCES_BASE_PATH}/{platform_slug}/{rom.name}"
         new_folder_path = (
-            f"{RESOURCES_BASE_PATH}/{platform_folder_name}/{rom_folder_name}"
+            f"{RESOURCES_BASE_PATH}/roms/{platform_folder_name}/{rom_folder_name}"
         )
 
         print("INFO:\t  [Resources migration] Renaming folder:")
@@ -52,7 +52,9 @@ def upgrade() -> None:
         print(f"INFO:\t  [Resources migration]  - new: {new_folder_path}")
 
         try:
-            os.makedirs(f"{RESOURCES_BASE_PATH}/{platform_folder_name}", exist_ok=True)
+            os.makedirs(
+                f"{RESOURCES_BASE_PATH}/roms/{platform_folder_name}", exist_ok=True
+            )
         except OSError as error:
             print(error)
 
@@ -68,17 +70,17 @@ def upgrade() -> None:
 
         updated_path_cover_s = re.sub(
             quoted_platform_slug,
-            platform_folder_name,
+            f"roms/{platform_folder_name}",
             re.sub(quoted_rom_name, rom_folder_name, rom.path_cover_s),
         )
         updated_path_cover_l = re.sub(
             quoted_platform_slug,
-            platform_folder_name,
+            f"roms/{platform_folder_name}",
             re.sub(quoted_rom_name, rom_folder_name, rom.path_cover_l),
         )
         updated_path_screenshots = re.sub(
             quoted_platform_slug,
-            platform_folder_name,
+            f"roms/{platform_folder_name}",
             re.sub(quoted_rom_name, rom_folder_name, rom.path_screenshots),
         )
 
diff --git a/backend/endpoints/collections.py b/backend/endpoints/collections.py
index 994322595..935f52562 100644
--- a/backend/endpoints/collections.py
+++ b/backend/endpoints/collections.py
@@ -1,5 +1,7 @@
 import json
+from shutil import rmtree
 
+from config import RESOURCES_BASE_PATH
 from decorators.auth import protected_route
 from endpoints.responses import MessageResponse
 from endpoints.responses.collection import CollectionSchema
@@ -8,16 +10,21 @@
     CollectionNotFoundInDatabaseException,
     CollectionPermissionError,
 )
-from fastapi import APIRouter, Request
+from fastapi import APIRouter, Request, UploadFile
 from handler.database import db_collection_handler
+from handler.filesystem import fs_resource_handler
 from logger.logger import log
 from models.collection import Collection
+from sqlalchemy.inspection import inspect
 
 router = APIRouter()
 
 
 @protected_route(router.post, "/collections", ["collections.write"])
-async def add_collection(request: Request) -> CollectionSchema:
+async def add_collection(
+    request: Request,
+    artwork: UploadFile | None = None,
+) -> CollectionSchema:
     """Create collection endpoint
 
     Args:
@@ -27,19 +34,57 @@ async def add_collection(request: Request) -> CollectionSchema:
         CollectionSchema: Just created collection
     """
 
-    data = await request.json()
+    data = await request.form()
     cleaned_data = {
-        "name": data["name"],
-        "description": data["description"],
+        "name": data.get("name", ""),
+        "description": data.get("description", ""),
+        "url_cover": data.get("url_cover", ""),
+        "is_public": data.get("is_public", False),
         "user_id": request.user.id,
     }
     collection_db = db_collection_handler.get_collection_by_name(
         cleaned_data["name"], request.user.id
     )
+
     if collection_db:
         raise CollectionAlreadyExistsException(cleaned_data["name"])
-    collection = Collection(**cleaned_data)
-    return db_collection_handler.add_collection(collection)
+
+    _added_collection = db_collection_handler.add_collection(Collection(**cleaned_data))
+
+    if artwork is not None:
+        file_ext = artwork.filename.split(".")[-1]
+        (
+            path_cover_l,
+            path_cover_s,
+            artwork_path,
+        ) = fs_resource_handler.build_artwork_path(_added_collection, file_ext)
+
+        artwork_file = artwork.file.read()
+        file_location_s = f"{artwork_path}/small.{file_ext}"
+        with open(file_location_s, "wb+") as artwork_s:
+            artwork_s.write(artwork_file)
+            fs_resource_handler.resize_cover_to_small(file_location_s)
+
+        file_location_l = f"{artwork_path}/big.{file_ext}"
+        with open(file_location_l, "wb+") as artwork_l:
+            artwork_l.write(artwork_file)
+    else:
+        path_cover_s, path_cover_l = fs_resource_handler.get_cover(
+            overwrite=True,
+            entity=_added_collection,
+            url_cover=_added_collection.url_cover,
+        )
+
+    _added_collection.path_cover_s = path_cover_s
+    _added_collection.path_cover_l = path_cover_l
+    # Update the collection with the cover path and update database
+    return db_collection_handler.update_collection(
+        _added_collection.id,
+        {
+            c: getattr(_added_collection, c)
+            for c in inspect(_added_collection).mapper.column_attrs.keys()
+        },
+    )
 
 
 @protected_route(router.get, "/collections", ["collections.read"])
@@ -78,7 +123,12 @@ def get_collection(request: Request, id: int) -> CollectionSchema:
 
 
 @protected_route(router.put, "/collections/{id}", ["collections.write"])
-async def update_collection(request: Request, id: int) -> MessageResponse:
+async def update_collection(
+    request: Request,
+    id: int,
+    remove_cover: bool = False,
+    artwork: UploadFile | None = None,
+) -> MessageResponse:
     """Update collection endpoint
 
     Args:
@@ -109,12 +159,48 @@ async def update_collection(request: Request, id: int) -> MessageResponse:
         "name": data.get("name", collection.name),
         "description": data.get("description", collection.description),
         "roms": list(set(roms)),
+        "url_cover": data.get("url_cover", collection.url_cover),
         "is_public": data.get("is_public", collection.is_public),
         "user_id": request.user.id,
     }
 
+    if remove_cover:
+        cleaned_data.update(fs_resource_handler.remove_cover(collection))
+        cleaned_data.update({"url_cover": ""})
+    else:
+        if artwork is not None:
+            file_ext = artwork.filename.split(".")[-1]
+            (
+                path_cover_l,
+                path_cover_s,
+                artwork_path,
+            ) = fs_resource_handler.build_artwork_path(collection, file_ext)
+
+            cleaned_data["path_cover_l"] = path_cover_l
+            cleaned_data["path_cover_s"] = path_cover_s
+
+            artwork_file = artwork.file.read()
+            file_location_s = f"{artwork_path}/small.{file_ext}"
+            with open(file_location_s, "wb+") as artwork_s:
+                artwork_s.write(artwork_file)
+                fs_resource_handler.resize_cover_to_small(file_location_s)
+
+            file_location_l = f"{artwork_path}/big.{file_ext}"
+            with open(file_location_l, "wb+") as artwork_l:
+                artwork_l.write(artwork_file)
+        else:
+            cleaned_data["url_cover"] = data.get("url_cover", collection.url_cover)
+            path_cover_s, path_cover_l = fs_resource_handler.get_cover(
+                overwrite=cleaned_data["url_cover"] != collection.url_cover,
+                entity=collection,
+                url_cover=cleaned_data.get("url_cover", ""),
+            )
+            cleaned_data.update(
+                {"path_cover_s": path_cover_s, "path_cover_l": path_cover_l}
+            )
+
     db_collection_handler.update_collection(id, cleaned_data)
-    return {"msg": "Collection updated  successfully!"}
+    return {"msg": f"Collection {cleaned_data['name']} updated successfully!"}
 
 
 @protected_route(router.delete, "/collections/{id}", ["collections.write"])
@@ -142,4 +228,9 @@ async def delete_collections(request: Request, id: int) -> MessageResponse:
     log.info(f"Deleting {collection.name} from database")
     db_collection_handler.delete_collection(id)
 
+    try:
+        rmtree(f"{RESOURCES_BASE_PATH}/{collection.fs_resources_path}")
+    except FileNotFoundError:
+        log.error(f"Couldn't find resources to delete for {collection.name}")
+
     return {"msg": f"{collection.name} deleted successfully!"}
diff --git a/backend/endpoints/rom.py b/backend/endpoints/rom.py
index 304df2c94..05ca83f56 100644
--- a/backend/endpoints/rom.py
+++ b/backend/endpoints/rom.py
@@ -295,9 +295,10 @@ async def update_rom(
     if not rom:
         raise RomNotFoundInDatabaseException(id)
 
-    cleaned_data = {}
-    cleaned_data["igdb_id"] = data.get("igdb_id", None)
-    cleaned_data["moby_id"] = data.get("moby_id", None)
+    cleaned_data = {
+        "igdb_id": data.get("igdb_id", None),
+        "moby_id": data.get("moby_id", None),
+    }
 
     if cleaned_data["moby_id"]:
         moby_rom = meta_moby_handler.get_rom_by_id(cleaned_data["moby_id"])
@@ -311,8 +312,12 @@ async def update_rom(
     else:
         cleaned_data.update({"igdb_metadata": {}})
 
-    cleaned_data["name"] = data.get("name", rom.name)
-    cleaned_data["summary"] = data.get("summary", rom.summary)
+    cleaned_data.update(
+        {
+            "name": data.get("name", rom.name),
+            "summary": data.get("summary", rom.summary),
+        }
+    )
 
     fs_safe_file_name = data.get("file_name", rom.file_name).strip().replace("/", "-")
     fs_safe_name = cleaned_data["name"].strip().replace("/", "-")
@@ -330,21 +335,25 @@ async def update_rom(
                 file_path=rom.file_path,
             )
     except RomAlreadyExistsException as exc:
-        log.error(str(exc))
+        log.error(exc)
         raise HTTPException(
-            status_code=status.HTTP_500_INTERNAL_SERVER_ERROR, detail=str(exc)
+            status_code=status.HTTP_500_INTERNAL_SERVER_ERROR, detail=exc
         ) from exc
 
-    cleaned_data["file_name"] = fs_safe_file_name
-    cleaned_data["file_name_no_tags"] = fs_rom_handler.get_file_name_with_no_tags(
-        fs_safe_file_name
-    )
-    cleaned_data["file_name_no_ext"] = fs_rom_handler.get_file_name_with_no_extension(
-        fs_safe_file_name
+    cleaned_data.update(
+        {
+            "file_name": fs_safe_file_name,
+            "file_name_no_tags": fs_rom_handler.get_file_name_with_no_tags(
+                fs_safe_file_name
+            ),
+            "file_name_no_ext": fs_rom_handler.get_file_name_with_no_extension(
+                fs_safe_file_name
+            ),
+        }
     )
 
     if remove_cover:
-        cleaned_data.update(fs_resource_handler.remove_cover(rom=rom))
+        cleaned_data.update(fs_resource_handler.remove_cover(rom))
         cleaned_data.update({"url_cover": ""})
     else:
         if artwork is not None:
@@ -355,8 +364,9 @@ async def update_rom(
                 artwork_path,
             ) = fs_resource_handler.build_artwork_path(rom, file_ext)
 
-            cleaned_data["path_cover_l"] = path_cover_l
-            cleaned_data["path_cover_s"] = path_cover_s
+            cleaned_data.update(
+                {"path_cover_s": path_cover_s, "path_cover_l": path_cover_l}
+            )
 
             artwork_file = artwork.file.read()
             file_location_s = f"{artwork_path}/small.{file_ext}"
@@ -368,10 +378,10 @@ async def update_rom(
             with open(file_location_l, "wb+") as artwork_l:
                 artwork_l.write(artwork_file)
         else:
-            cleaned_data["url_cover"] = data.get("url_cover", rom.url_cover)
-            path_cover_s, path_cover_l = fs_resource_handler.get_rom_cover(
+            cleaned_data.update({"url_cover": data.get("url_cover", rom.url_cover)})
+            path_cover_s, path_cover_l = fs_resource_handler.get_cover(
                 overwrite=cleaned_data["url_cover"] != rom.url_cover,
-                rom=rom,
+                entity=rom,
                 url_cover=cleaned_data.get("url_cover", ""),
             )
             cleaned_data.update(
@@ -454,15 +464,12 @@ async def update_rom_user(request: Request, id: int) -> RomUserSchema:
         id, request.user.id
     ) or db_rom_handler.add_rom_user(id, request.user.id)
 
-    cleaned_data = {}
-    cleaned_data["note_raw_markdown"] = data.get(
-        "note_raw_markdown", db_rom_user.note_raw_markdown
-    )
-    cleaned_data["note_is_public"] = data.get(
-        "note_is_public", db_rom_user.note_is_public
-    )
-    cleaned_data["is_main_sibling"] = data.get(
-        "is_main_sibling", db_rom_user.is_main_sibling
-    )
+    cleaned_data = {
+        "note_raw_markdown": data.get(
+            "note_raw_markdown", db_rom_user.note_raw_markdown
+        ),
+        "note_is_public": data.get("note_is_public", db_rom_user.note_is_public),
+        "is_main_sibling": data.get("is_main_sibling", db_rom_user.is_main_sibling),
+    }
 
     return db_rom_handler.update_rom_user(db_rom_user.id, cleaned_data)
diff --git a/backend/endpoints/sockets/scan.py b/backend/endpoints/sockets/scan.py
index 0153d7e66..c0eb38a38 100644
--- a/backend/endpoints/sockets/scan.py
+++ b/backend/endpoints/sockets/scan.py
@@ -225,9 +225,9 @@ async def scan_platforms(
 
                     _added_rom = db_rom_handler.add_rom(scanned_rom)
 
-                    path_cover_s, path_cover_l = fs_resource_handler.get_rom_cover(
+                    path_cover_s, path_cover_l = fs_resource_handler.get_cover(
                         overwrite=True,
-                        rom=_added_rom,
+                        entity=_added_rom,
                         url_cover=_added_rom.url_cover,
                     )
 
diff --git a/backend/handler/database/collections_handler.py b/backend/handler/database/collections_handler.py
index 019f3714a..3871f637c 100644
--- a/backend/handler/database/collections_handler.py
+++ b/backend/handler/database/collections_handler.py
@@ -45,12 +45,13 @@ def get_collections(
     def update_collection(
         self, id: int, data: dict, session: Session = None
     ) -> Collection:
-        return session.execute(
+        session.execute(
             update(Collection)
             .where(Collection.id == id)
             .values(**data)
             .execution_options(synchronize_session="evaluate")
         )
+        return self.get_collection(id)
 
     @begin_session
     def delete_collection(self, id: int, session: Session = None) -> int:
diff --git a/backend/handler/filesystem/resources_handler.py b/backend/handler/filesystem/resources_handler.py
index 4c13d0c54..c96742cc6 100644
--- a/backend/handler/filesystem/resources_handler.py
+++ b/backend/handler/filesystem/resources_handler.py
@@ -6,6 +6,7 @@
 from config import RESOURCES_BASE_PATH
 from fastapi import HTTPException, status
 from logger.logger import log
+from models.collection import Collection
 from models.rom import Rom
 from PIL import Image
 from urllib3.exceptions import ProtocolError
@@ -90,55 +91,57 @@ def _get_cover_path(rom: Rom, size: CoverSize):
         """
         return f"{rom.fs_resources_path}/cover/{size.value}.png"
 
-    def get_rom_cover(
-        self, rom: Rom | None, overwrite: bool, url_cover: str = ""
+    def get_cover(
+        self, entity: Rom | Collection | None, overwrite: bool, url_cover: str = ""
     ) -> tuple[str, str]:
-        if not rom:
+        if not entity:
             return "", ""
 
-        if (overwrite or not self._cover_exists(rom, CoverSize.SMALL)) and url_cover:
-            self._store_cover(rom, url_cover, CoverSize.SMALL)
+        if (overwrite or not self._cover_exists(entity, CoverSize.SMALL)) and url_cover:
+            self._store_cover(entity, url_cover, CoverSize.SMALL)
         path_cover_s = (
-            self._get_cover_path(rom, CoverSize.SMALL)
-            if self._cover_exists(rom, CoverSize.SMALL)
+            self._get_cover_path(entity, CoverSize.SMALL)
+            if self._cover_exists(entity, CoverSize.SMALL)
             else ""
         )
 
-        if (overwrite or not self._cover_exists(rom, CoverSize.BIG)) and url_cover:
-            self._store_cover(rom, url_cover, CoverSize.BIG)
+        if (overwrite or not self._cover_exists(entity, CoverSize.BIG)) and url_cover:
+            self._store_cover(entity, url_cover, CoverSize.BIG)
         path_cover_l = (
-            self._get_cover_path(rom, CoverSize.BIG)
-            if self._cover_exists(rom, CoverSize.BIG)
+            self._get_cover_path(entity, CoverSize.BIG)
+            if self._cover_exists(entity, CoverSize.BIG)
             else ""
         )
 
         return path_cover_s, path_cover_l
 
     @staticmethod
-    def remove_cover(rom: Rom | None):
-        if not rom:
+    def remove_cover(entity: Rom | Collection | None):
+        if not entity:
             return {"path_cover_s": "", "path_cover_l": ""}
 
         try:
-            cover_path = f"{RESOURCES_BASE_PATH}/{rom.fs_resources_path}/cover"
+            cover_path = f"{RESOURCES_BASE_PATH}/{entity.fs_resources_path}/cover"
             shutil.rmtree(cover_path)
         except FileNotFoundError:
             log.warning(
-                f"Couldn't remove rom '{rom.name or rom.id}' cover since '{cover_path}' doesn't exists."
+                f"Couldn't remove cover from '{entity.name or entity.id}' since '{cover_path}' doesn't exists."
             )
 
         return {"path_cover_s": "", "path_cover_l": ""}
 
     @staticmethod
-    def build_artwork_path(rom: Rom | None, file_ext: str):
-        if not rom:
+    def build_artwork_path(entity: Rom | Collection | None, file_ext: str):
+        if not entity:
             return "", "", ""
 
-        path_cover_l = f"{rom.fs_resources_path}/cover/{CoverSize.BIG.value}.{file_ext}"
+        path_cover_l = (
+            f"{entity.fs_resources_path}/cover/{CoverSize.BIG.value}.{file_ext}"
+        )
         path_cover_s = (
-            f"{rom.fs_resources_path}/cover/{CoverSize.SMALL.value}.{file_ext}"
+            f"{entity.fs_resources_path}/cover/{CoverSize.SMALL.value}.{file_ext}"
         )
-        artwork_path = f"{RESOURCES_BASE_PATH}/{rom.fs_resources_path}/cover"
+        artwork_path = f"{RESOURCES_BASE_PATH}/{entity.fs_resources_path}/cover"
         Path(artwork_path).mkdir(parents=True, exist_ok=True)
 
         return path_cover_l, path_cover_s, artwork_path
diff --git a/backend/handler/filesystem/tests/test_fs.py b/backend/handler/filesystem/tests/test_fs.py
index 7f91fbd2d..0291a1b4f 100644
--- a/backend/handler/filesystem/tests/test_fs.py
+++ b/backend/handler/filesystem/tests/test_fs.py
@@ -8,8 +8,8 @@
 
 @pytest.mark.vcr
 def test_get_rom_cover():
-    path_cover_s, path_cover_l = fs_resource_handler.get_rom_cover(
-        overwrite=False, rom=None, url_cover=""
+    path_cover_s, path_cover_l = fs_resource_handler.get_cover(
+        overwrite=False, entity=None, url_cover=""
     )
 
     assert "" in path_cover_s
diff --git a/backend/models/collection.py b/backend/models/collection.py
index 5f25ac373..eee6aec69 100644
--- a/backend/models/collection.py
+++ b/backend/models/collection.py
@@ -43,5 +43,9 @@ def rom_count(self):
     def has_cover(self) -> bool:
         return bool(self.path_cover_s or self.path_cover_l)
 
+    @property
+    def fs_resources_path(self) -> str:
+        return f"collections/{str(self.id)}"
+
     def __repr__(self) -> str:
         return self.name
diff --git a/backend/models/rom.py b/backend/models/rom.py
index 5500af70a..f01f74d5d 100644
--- a/backend/models/rom.py
+++ b/backend/models/rom.py
@@ -142,7 +142,7 @@ def game_modes(self) -> list[str]:
 
     @property
     def fs_resources_path(self) -> str:
-        return f"{str(self.platform_id)}/{str(self.id)}"
+        return f"roms/{str(self.platform_id)}/{str(self.id)}"
 
     def __repr__(self) -> str:
         return self.file_name
diff --git a/frontend/src/__generated__/index.ts b/frontend/src/__generated__/index.ts
index 5ea59a9cd..66aefac00 100644
--- a/frontend/src/__generated__/index.ts
+++ b/frontend/src/__generated__/index.ts
@@ -5,12 +5,14 @@
 
 export type { AddFirmwareResponse } from "./models/AddFirmwareResponse";
 export type { AddRomsResponse } from "./models/AddRomsResponse";
+export type { Body_add_collection_collections_post } from "./models/Body_add_collection_collections_post";
 export type { Body_add_firmware_firmware_post } from "./models/Body_add_firmware_firmware_post";
 export type { Body_add_roms_roms_post } from "./models/Body_add_roms_roms_post";
 export type { Body_add_saves_saves_post } from "./models/Body_add_saves_saves_post";
 export type { Body_add_screenshots_screenshots_post } from "./models/Body_add_screenshots_screenshots_post";
 export type { Body_add_states_states_post } from "./models/Body_add_states_states_post";
 export type { Body_token_token_post } from "./models/Body_token_token_post";
+export type { Body_update_collection_collections__id__put } from "./models/Body_update_collection_collections__id__put";
 export type { Body_update_rom_roms__id__put } from "./models/Body_update_rom_roms__id__put";
 export type { Body_update_user_users__id__put } from "./models/Body_update_user_users__id__put";
 export type { CollectionSchema } from "./models/CollectionSchema";
diff --git a/frontend/src/__generated__/models/Body_add_collection_collections_post.ts b/frontend/src/__generated__/models/Body_add_collection_collections_post.ts
new file mode 100644
index 000000000..decb18554
--- /dev/null
+++ b/frontend/src/__generated__/models/Body_add_collection_collections_post.ts
@@ -0,0 +1,8 @@
+/* generated using openapi-typescript-codegen -- do no edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+
+export type Body_add_collection_collections_post = {
+  artwork?: Blob | null;
+};
diff --git a/frontend/src/__generated__/models/Body_update_collection_collections__id__put.ts b/frontend/src/__generated__/models/Body_update_collection_collections__id__put.ts
new file mode 100644
index 000000000..f04969c88
--- /dev/null
+++ b/frontend/src/__generated__/models/Body_update_collection_collections__id__put.ts
@@ -0,0 +1,8 @@
+/* generated using openapi-typescript-codegen -- do no edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+
+export type Body_update_collection_collections__id__put = {
+  artwork?: Blob | null;
+};
diff --git a/frontend/src/components/Gallery/FabOverlay.vue b/frontend/src/components/Gallery/FabOverlay.vue
index b099de106..09576c494 100644
--- a/frontend/src/components/Gallery/FabOverlay.vue
+++ b/frontend/src/components/Gallery/FabOverlay.vue
@@ -143,7 +143,7 @@ function onDownload() {
             : 'mdi-bookmark-remove'
         "
         size="default"
-        @click.stop="
+        @click="
           $route.name == 'platform'
             ? emitter?.emit('showAddToCollectionDialog', romsStore.selectedRoms)
             : emitter?.emit(
diff --git a/frontend/src/components/common/Collection/Card.vue b/frontend/src/components/common/Collection/Card.vue
index 9472e9204..a9165a714 100644
--- a/frontend/src/components/common/Collection/Card.vue
+++ b/frontend/src/components/common/Collection/Card.vue
@@ -37,29 +37,28 @@ const theme = useTheme();
           : ''
       "
     >
-      <v-row
-        v-if="showTitle"
-        no-gutters
-        class="py-1 px-2 text-truncate text-center text-caption"
-      >
-        <v-col>
-          {{ collection.name }}
-        </v-col>
+      <v-row v-if="showTitle" class="pa-1 justify-center bg-primary">
+        <div
+          :title="collection.name?.toString()"
+          class="py-4 px-6 text-truncate text-caption"
+        >
+          <span>{{ collection.name }}</span>
+        </div>
       </v-row>
       <v-img
         cover
         :src="
           src
             ? src
-            : collection.path_cover_l
-            ? collection.path_cover_l
+            : collection.has_cover
+            ? `/assets/romm/resources/${collection.path_cover_l}?ts=${collection.updated_at}`
             : `/assets/default/cover/big_${theme.global.name.value}_collection.png`
         "
         :lazy-src="
           src
             ? src
-            : collection.path_cover_s
-            ? collection.path_cover_s
+            : collection.has_cover
+            ? `/assets/romm/resources/${collection.path_cover_s}?ts=${collection.updated_at}`
             : `/assets/default/cover/small_${theme.global.name.value}_collection.png`
         "
         :aspect-ratio="2 / 3"
@@ -100,7 +99,7 @@ const theme = useTheme();
 </template>
 <style scoped>
 .append-inner {
-  bottom: -0.1rem;
-  right: -0.3rem;
+  bottom: 0rem;
+  right: 0rem;
 }
 </style>
diff --git a/frontend/src/components/common/Collection/Cover.vue b/frontend/src/components/common/Collection/Cover.vue
deleted file mode 100644
index dd80d5193..000000000
--- a/frontend/src/components/common/Collection/Cover.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import type { Collection } from "@/stores/collections";
-import { useTheme } from "vuetify";
-
-defineProps<{ collection: Collection }>();
-const theme = useTheme();
-</script>
-
-<template>
-  <v-img
-    :aspect-ratio="2 / 3"
-    :src="
-      collection.path_cover_l ??
-      `/assets/default/cover/big_${theme.global.name.value}_empty.png`
-    "
-    :lazy-src="
-      collection.path_cover_s ??
-      `/assets/default/cover/small_${theme.global.name.value}_empty.png`
-    "
-    cover
-  >
-    <template #error>
-      <v-img
-        :aspect-ratio="2 / 3"
-        :src="`assets/default/cover/big_${theme.global.name.value}_empty.png`"
-        cover
-      >
-      </v-img>
-    </template>
-  </v-img>
-</template>
diff --git a/frontend/src/components/common/Collection/Dialog/AddRoms.vue b/frontend/src/components/common/Collection/Dialog/AddRoms.vue
index fbc8dcde0..303def397 100644
--- a/frontend/src/components/common/Collection/Dialog/AddRoms.vue
+++ b/frontend/src/components/common/Collection/Dialog/AddRoms.vue
@@ -2,21 +2,21 @@
 import RAvatarCollection from "@/components/common/Collection/RAvatar.vue";
 import RAvatarRom from "@/components/common/Game/RAvatar.vue";
 import RDialog from "@/components/common/RDialog.vue";
-import type { UpdateCollection } from "@/services/api/collection";
+import type { UpdatedCollection } from "@/services/api/collection";
 import collectionApi from "@/services/api/collection";
 import storeCollections from "@/stores/collections";
-import { type SimpleRom } from "@/stores/roms";
+import storeRoms, { type SimpleRom } from "@/stores/roms";
 import type { Events } from "@/types/emitter";
 import type { Emitter } from "mitt";
 import { inject, ref, watch } from "vue";
-import { useDisplay, useTheme } from "vuetify";
+import { useDisplay } from "vuetify";
 
 // Props
-const theme = useTheme();
 const { mdAndUp } = useDisplay();
 const show = ref(false);
+const romsStore = storeRoms();
 const collectionsStore = storeCollections();
-const selectedCollection = ref<UpdateCollection>();
+const selectedCollection = ref<UpdatedCollection>();
 const roms = ref<SimpleRom[]>([]);
 const emitter = inject<Emitter<Events>>("emitter");
 emitter?.on("showAddToCollectionDialog", (romsToAdd) => {
@@ -62,6 +62,7 @@ async function addRomsToCollection() {
     })
     .finally(() => {
       emitter?.emit("showLoadingDialog", { loading: false, scrim: false });
+      romsStore.resetSelection();
       closeDialog();
     });
 }
@@ -97,7 +98,7 @@ function closeDialog() {
       </v-row>
     </template>
     <template #prepend>
-      <v-select
+      <v-autocomplete
         v-model="selectedCollection"
         class="pa-3"
         density="default"
@@ -126,7 +127,7 @@ function closeDialog() {
             </template>
           </v-list-item>
         </template>
-      </v-select>
+      </v-autocomplete>
     </template>
     <template #content>
       <v-data-table
diff --git a/frontend/src/components/common/Collection/Dialog/CreateCollection.vue b/frontend/src/components/common/Collection/Dialog/CreateCollection.vue
index 416e2e141..8b6605264 100644
--- a/frontend/src/components/common/Collection/Dialog/CreateCollection.vue
+++ b/frontend/src/components/common/Collection/Dialog/CreateCollection.vue
@@ -2,9 +2,10 @@
 import CollectionCard from "@/components/common/Collection/Card.vue";
 import RDialog from "@/components/common/RDialog.vue";
 import collectionApi, {
-  type UpdateCollection,
+  type UpdatedCollection,
 } from "@/services/api/collection";
 import storeCollections from "@/stores/collections";
+import storeHeartbeat from "@/stores/heartbeat";
 import type { Events } from "@/types/emitter";
 import type { Emitter } from "mitt";
 import { inject, ref } from "vue";
@@ -12,12 +13,10 @@ import { useDisplay, useTheme } from "vuetify";
 
 // Props
 const theme = useTheme();
-const { smAndDown, mdAndUp } = useDisplay();
+const { mdAndUp } = useDisplay();
 const show = ref(false);
-const collection = ref<UpdateCollection>({
-  name: "",
-  description: "",
-} as UpdateCollection);
+const heartbeat = storeHeartbeat();
+const collection = ref<UpdatedCollection>({} as UpdatedCollection);
 const collectionsStore = storeCollections();
 const imagePreviewUrl = ref<string | undefined>("");
 const removeCover = ref(false);
@@ -25,6 +24,11 @@ const emitter = inject<Emitter<Events>>("emitter");
 emitter?.on("showCreateCollectionDialog", () => {
   show.value = true;
 });
+emitter?.on("updateUrlCover", (url_cover) => {
+  if (!collection.value) return;
+  collection.value.url_cover = url_cover;
+  imagePreviewUrl.value = url_cover;
+});
 
 // Functions
 function triggerFileInput() {
@@ -57,8 +61,7 @@ async function createCollection() {
 
   await collectionApi
     .createCollection({
-      name: collection.value.name,
-      description: collection.value.description,
+      collection: collection.value,
     })
     .then(({ data }) => {
       collectionsStore.add(data);
@@ -77,19 +80,16 @@ async function createCollection() {
         icon: "mdi-close-circle",
         color: "red",
       });
-      return;
     })
     .finally(() => {
       emitter?.emit("showLoadingDialog", { loading: false, scrim: false });
+      closeDialog();
     });
 }
 
 function closeDialog() {
   show.value = false;
-  collection.value = {
-    name: "",
-    description: "",
-  } as UpdateCollection;
+  collection.value = {} as UpdatedCollection;
   imagePreviewUrl.value = "";
 }
 </script>
@@ -118,7 +118,7 @@ function closeDialog() {
           </v-row>
           <v-row class="pa-2" no-gutters>
             <v-col>
-              <v-textarea
+              <v-text-field
                 v-model="collection.description"
                 class="mt-1"
                 label="Description"
@@ -134,20 +134,33 @@ function closeDialog() {
           <v-row class="pa-2 justify-center" no-gutters>
             <v-col class="cover">
               <collection-card
+                :key="collection.updated_at"
                 :show-title="false"
                 :with-link="false"
                 :collection="collection"
                 :src="imagePreviewUrl"
               >
                 <template #append-inner>
-                  <v-chip-group class="pa-0">
-                    <v-chip
+                  <v-btn-group rounded="0" divided density="compact">
+                    <v-btn
+                      :disabled="!heartbeat.value.STEAMGRIDDB_ENABLED"
+                      size="small"
+                      class="translucent-dark"
+                      @click="
+                        emitter?.emit(
+                          'showSearchCoverDialog',
+                          collection.name as string
+                        )
+                      "
+                    >
+                      <v-icon size="large">mdi-image-search-outline</v-icon>
+                    </v-btn>
+                    <v-btn
+                      size="small"
                       class="translucent-dark"
-                      :size="smAndDown ? 'large' : 'small'"
                       @click="triggerFileInput"
-                      label
                     >
-                      <v-icon>mdi-pencil</v-icon>
+                      <v-icon size="large">mdi-pencil</v-icon>
                       <v-file-input
                         id="file-input"
                         v-model="collection.artwork"
@@ -156,16 +169,17 @@ function closeDialog() {
                         class="file-input"
                         @change="previewImage"
                       />
-                    </v-chip>
-                    <v-chip
+                    </v-btn>
+                    <v-btn
+                      size="small"
                       class="translucent-dark"
-                      :size="smAndDown ? 'large' : 'small'"
                       @click="removeArtwork"
-                      label
                     >
-                      <v-icon class="text-romm-red"> mdi-delete </v-icon>
-                    </v-chip>
-                  </v-chip-group>
+                      <v-icon size="large" class="text-romm-red"
+                        >mdi-delete</v-icon
+                      >
+                    </v-btn>
+                  </v-btn-group>
                 </template>
               </collection-card>
             </v-col>
@@ -174,7 +188,7 @@ function closeDialog() {
       </v-row>
     </template>
     <template #append>
-      <v-row class="justify-center MT-4 mb-2" no-gutters>
+      <v-row class="justify-center mt-4 mb-2" no-gutters>
         <v-btn-group divided density="compact">
           <v-btn class="bg-terciary" @click="closeDialog"> Cancel </v-btn>
           <v-btn
diff --git a/frontend/src/components/common/Collection/Dialog/DeleteCollection.vue b/frontend/src/components/common/Collection/Dialog/DeleteCollection.vue
index 79f760795..2a3ae3bca 100644
--- a/frontend/src/components/common/Collection/Dialog/DeleteCollection.vue
+++ b/frontend/src/components/common/Collection/Dialog/DeleteCollection.vue
@@ -66,12 +66,7 @@ function closeDialog() {
     <template #content>
       <v-row class="justify-center align-center pa-2" no-gutters>
         <span>Removing collection</span>
-        <template v-if="collection.path_cover_l">
-          <r-avatar class="ml-1" :src="collection.path_cover_s" />
-        </template>
-        <template v-else>
-          <v-icon class="ml-1">mdi-bookmark</v-icon>
-        </template>
+        <r-avatar class="ml-1" :collection="collection" />
         <span class="ml-1 text-romm-accent-1">{{ collection.name }}</span>
         <span class="ml-1">from RomM. Do you confirm?</span>
       </v-row>
diff --git a/frontend/src/components/common/Collection/Dialog/EditCollection.vue b/frontend/src/components/common/Collection/Dialog/EditCollection.vue
index 1c27c17a8..77ca72dc3 100644
--- a/frontend/src/components/common/Collection/Dialog/EditCollection.vue
+++ b/frontend/src/components/common/Collection/Dialog/EditCollection.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import CollectionCard from "@/components/common/Collection/Card.vue";
 import RDialog from "@/components/common/RDialog.vue";
+import type { UpdatedCollection } from "@/services/api/collection";
 import collectionApi from "@/services/api/collection";
-import type { UpdateCollection } from "@/services/api/collection";
 import { type Collection } from "@/stores/collections";
+import storeHeartbeat from "@/stores/heartbeat";
 import type { Events } from "@/types/emitter";
 import type { Emitter } from "mitt";
 import { inject, ref } from "vue";
@@ -11,16 +12,22 @@ import { useDisplay, useTheme } from "vuetify";
 
 // Props
 const theme = useTheme();
-const { smAndDown, lgAndUp } = useDisplay();
+const { lgAndUp } = useDisplay();
 const show = ref(false);
-const collection = ref<UpdateCollection>();
+const collection = ref<UpdatedCollection>({} as UpdatedCollection);
 const imagePreviewUrl = ref<string | undefined>("");
 const removeCover = ref(false);
+const heartbeat = storeHeartbeat();
 const emitter = inject<Emitter<Events>>("emitter");
 emitter?.on("showEditCollectionDialog", (collectionToEdit: Collection) => {
   collection.value = collectionToEdit;
   show.value = true;
 });
+emitter?.on("updateUrlCover", (url_cover) => {
+  if (!collection.value) return;
+  collection.value.url_cover = url_cover;
+  imagePreviewUrl.value = url_cover;
+});
 
 // Functions
 function triggerFileInput() {
@@ -70,7 +77,6 @@ async function editCollection() {
         icon: "mdi-close-circle",
         color: "red",
       });
-      return;
     })
     .finally(() => {
       emitter?.emit("showLoadingDialog", { loading: false, scrim: false });
@@ -80,7 +86,7 @@ async function editCollection() {
 
 function closeDialog() {
   show.value = false;
-  collection.value = undefined;
+  collection.value = {} as UpdatedCollection;
   imagePreviewUrl.value = "";
 }
 </script>
@@ -91,7 +97,7 @@ function closeDialog() {
     @close="closeDialog"
     v-model="show"
     icon="mdi-pencil-box"
-    :width="lgAndUp ? '65vw' : '95vw'"
+    :width="lgAndUp ? '55vw' : '95vw'"
   >
     <template #content>
       <v-row class="align-center pa-2" no-gutters>
@@ -111,7 +117,7 @@ function closeDialog() {
           </v-row>
           <v-row class="pa-2" no-gutters>
             <v-col>
-              <v-textarea
+              <v-text-field
                 v-model="collection.description"
                 class="py-2"
                 label="Description"
@@ -127,20 +133,33 @@ function closeDialog() {
           <v-row class="pa-2 justify-center" no-gutters>
             <v-col class="cover">
               <collection-card
+                :key="collection.updated_at"
                 :show-title="false"
                 :with-link="false"
                 :collection="collection"
                 :src="imagePreviewUrl"
               >
                 <template #append-inner>
-                  <v-chip-group class="pa-0">
-                    <v-chip
+                  <v-btn-group rounded="0" divided density="compact">
+                    <v-btn
+                      :disabled="!heartbeat.value.STEAMGRIDDB_ENABLED"
+                      size="small"
+                      class="translucent-dark"
+                      @click="
+                        emitter?.emit(
+                          'showSearchCoverDialog',
+                          collection.name as string
+                        )
+                      "
+                    >
+                      <v-icon size="large">mdi-image-search-outline</v-icon>
+                    </v-btn>
+                    <v-btn
+                      size="small"
                       class="translucent-dark"
-                      :size="smAndDown ? 'large' : 'small'"
                       @click="triggerFileInput"
-                      label
                     >
-                      <v-icon>mdi-pencil</v-icon>
+                      <v-icon size="large">mdi-pencil</v-icon>
                       <v-file-input
                         id="file-input"
                         v-model="collection.artwork"
@@ -149,16 +168,17 @@ function closeDialog() {
                         class="file-input"
                         @change="previewImage"
                       />
-                    </v-chip>
-                    <v-chip
+                    </v-btn>
+                    <v-btn
+                      size="small"
                       class="translucent-dark"
-                      :size="smAndDown ? 'large' : 'small'"
                       @click="removeArtwork"
-                      label
                     >
-                      <v-icon class="text-romm-red"> mdi-delete </v-icon>
-                    </v-chip>
-                  </v-chip-group>
+                      <v-icon size="large" class="text-romm-red"
+                        >mdi-delete</v-icon
+                      >
+                    </v-btn>
+                  </v-btn-group>
                 </template>
               </collection-card>
             </v-col>
diff --git a/frontend/src/components/common/Collection/Dialog/RemoveRoms.vue b/frontend/src/components/common/Collection/Dialog/RemoveRoms.vue
index 693dd6ba1..1d96e596d 100644
--- a/frontend/src/components/common/Collection/Dialog/RemoveRoms.vue
+++ b/frontend/src/components/common/Collection/Dialog/RemoveRoms.vue
@@ -51,7 +51,6 @@ async function removeRomsFromCollection() {
         color: "green",
         timeout: 2000,
       });
-      romsStore.resetSelection();
       romsStore.remove(roms.value);
       emitter?.emit("refreshDrawer", null);
     })
@@ -66,6 +65,7 @@ async function removeRomsFromCollection() {
     })
     .finally(() => {
       emitter?.emit("showLoadingDialog", { loading: false, scrim: false });
+      romsStore.resetSelection();
       if (selectedCollection.value?.roms.length == 0) {
         router.push({ name: "dashboard" });
       }
@@ -92,7 +92,7 @@ function closeDialog() {
   <r-dialog
     @close="closeDialog"
     v-model="show"
-    icon="mdi-bookmark-plus-outline"
+    icon="mdi-bookmark-remove-outline"
     scroll-content
     :width="mdAndUp ? '45vw' : '95vw'"
   >
diff --git a/frontend/src/components/common/Game/AdminMenu.vue b/frontend/src/components/common/Game/AdminMenu.vue
index 5acac2a3f..d1d86efc9 100644
--- a/frontend/src/components/common/Game/AdminMenu.vue
+++ b/frontend/src/components/common/Game/AdminMenu.vue
@@ -28,23 +28,6 @@ const heartbeat = storeHeartbeat();
         }}
       </v-list-item-subtitle>
     </v-list-item>
-
-    <v-list-item
-      :disabled="!heartbeat.value.STEAMGRIDDB_ENABLED"
-      class="py-4 pr-5"
-      @click="emitter?.emit('showSearchCoverDialog', rom)"
-    >
-      <v-list-item-title class="d-flex">
-        <v-icon icon="mdi-image-outline" class="mr-2" />Cover search
-      </v-list-item-title>
-      <v-list-item-subtitle>
-        {{
-          !heartbeat.value.STEAMGRIDDB_ENABLED
-            ? "SteamgridDB is not enabled"
-            : ""
-        }}
-      </v-list-item-subtitle>
-    </v-list-item>
     <v-list-item
       class="py-4 pr-5"
       @click="emitter?.emit('showEditRomDialog', { ...rom })"
diff --git a/frontend/src/components/common/Game/Card/Base.vue b/frontend/src/components/common/Game/Card/Base.vue
index b802d078d..cf48b9901 100644
--- a/frontend/src/components/common/Game/Card/Base.vue
+++ b/frontend/src/components/common/Game/Card/Base.vue
@@ -15,6 +15,7 @@ const props = withDefaults(
     rom: SimpleRom | SearchRomSchema;
     transformScale?: boolean;
     titleOnHover?: boolean;
+    pointerOnHover?: boolean;
     titleOnFooter?: boolean;
     showActionBar?: boolean;
     withBorder?: boolean;
@@ -24,6 +25,7 @@ const props = withDefaults(
   {
     transformScale: false,
     titleOnHover: false,
+    pointerOnHover: true,
     titleOnFooter: false,
     showActionBar: false,
     withBorder: false,
@@ -80,9 +82,10 @@ onMounted(() => {
           @touchstart="handleTouchStart"
           @touchend="handleTouchEnd"
           v-bind="hoverProps"
-          class="pointer"
+          :class="{ pointer: pointerOnHover }"
           ref="card"
           cover
+          :key="romsStore.isSimpleRom(rom) ? rom.updated_at : ''"
           :src="
             src
               ? src
@@ -205,7 +208,7 @@ onMounted(() => {
   -ms-user-select: none; /* Internet Explorer/Edge */
 }
 .append-inner {
-  bottom: -0.1rem;
-  right: -0.3rem;
+  bottom: 0rem;
+  right: 0rem;
 }
 </style>
diff --git a/frontend/src/components/common/Game/Dialog/AddToCollection.vue b/frontend/src/components/common/Game/Dialog/AddToCollection.vue
deleted file mode 100644
index 371dbfac1..000000000
--- a/frontend/src/components/common/Game/Dialog/AddToCollection.vue
+++ /dev/null
@@ -1,232 +0,0 @@
-<script setup lang="ts">
-import RAvatar from "@/components/common/Game/RAvatar.vue";
-import RDialog from "@/components/common/RDialog.vue";
-import romApi from "@/services/api/rom";
-import storeRoms, { type SimpleRom } from "@/stores/roms";
-import type { Events } from "@/types/emitter";
-import { formatBytes } from "@/utils";
-import type { Emitter } from "mitt";
-import { inject, ref, watch } from "vue";
-import { useRouter, useRoute } from "vue-router";
-import { useDisplay, useTheme } from "vuetify";
-
-// Props
-const theme = useTheme();
-const { smAndUp, mdAndUp } = useDisplay();
-const router = useRouter();
-const route = useRoute();
-const show = ref(false);
-const romsStore = storeRoms();
-const roms = ref<SimpleRom[]>([]);
-const romsToDeleteFromFs = ref<number[]>([]);
-const platformId = ref<number>(0);
-const emitter = inject<Emitter<Events>>("emitter");
-emitter?.on("showDeleteRomDialog", (romsToDelete) => {
-  roms.value = romsToDelete;
-  platformId.value = roms.value[0].platform_id;
-  updateDataTablePages();
-  show.value = true;
-});
-const HEADERS = [
-  {
-    title: "Name",
-    align: "start",
-    sortable: true,
-    key: "name",
-  },
-] as const;
-const page = ref(1);
-const itemsPerPage = ref(10);
-const pageCount = ref(0);
-const PER_PAGE_OPTIONS = [10, 25, 50, 100];
-
-// Functions
-async function deleteRoms() {
-  await romApi
-    .deleteRoms({ roms: roms.value, deleteFromFs: romsToDeleteFromFs.value })
-    .then((response) => {
-      emitter?.emit("snackbarShow", {
-        msg: response.data.msg,
-        icon: "mdi-check-bold",
-        color: "green",
-      });
-      romsStore.resetSelection();
-      romsStore.remove(roms.value);
-      emitter?.emit("refreshDrawer", null);
-      closeDialog();
-      if (route.name == "rom") {
-        router.push({
-          name: "platform",
-          params: { platform: platformId.value },
-        });
-      }
-    })
-    .catch((error) => {
-      console.log(error);
-      emitter?.emit("snackbarShow", {
-        msg: error.response.data.detail,
-        icon: "mdi-close-circle",
-        color: "red",
-      });
-      return;
-    });
-}
-
-function updateDataTablePages() {
-  pageCount.value = Math.ceil(roms.value.length / itemsPerPage.value);
-}
-
-watch(itemsPerPage, async () => {
-  updateDataTablePages();
-});
-
-function closeDialog() {
-  romsToDeleteFromFs.value = [];
-  roms.value = [];
-  show.value = false;
-}
-</script>
-
-<template>
-  <r-dialog
-    @close="closeDialog"
-    v-model="show"
-    icon="mdi-delete"
-    scroll-content
-    :width="mdAndUp ? '50vw' : '95vw'"
-  >
-    <template #header>
-      <v-row no-gutters class="justify-center">
-        <span>Removing</span>
-        <span class="text-romm-accent-1 mx-1">{{ roms.length }}</span>
-        <span>games from RomM</span>
-      </v-row>
-    </template>
-    <template #prepend>
-      <v-list-item class="text-caption text-center">
-        <span
-          >Select the games you want to remove from your filesystem, otherwise
-          they will only be deleted from RomM database.</span
-        >
-      </v-list-item>
-    </template>
-    <template #content>
-      <v-data-table
-        :item-value="(item) => item.id"
-        :items="roms"
-        :width="mdAndUp ? '60vw' : '95vw'"
-        :items-per-page="itemsPerPage"
-        :items-per-page-options="PER_PAGE_OPTIONS"
-        :headers="HEADERS"
-        v-model="romsToDeleteFromFs"
-        v-model:page="page"
-        show-select
-      >
-        <template #item.name="{ item }">
-          <v-list-item class="px-0">
-            <template #prepend>
-              <r-avatar :rom="item" />
-            </template>
-            <v-row no-gutters
-              ><v-col>{{ item.name }}</v-col></v-row
-            >
-            <v-row v-if="romsToDeleteFromFs.includes(item.id)" no-gutters
-              ><v-col class="text-romm-accent-1"
-                >{{ item.file_name
-                }}<v-chip
-                  v-if="romsToDeleteFromFs.includes(item.id) && smAndUp"
-                  label
-                  size="x-small"
-                  class="text-romm-red ml-1"
-                >
-                  Removing from filesystem
-                </v-chip></v-col
-              ></v-row
-            >
-            <v-row
-              v-if="romsToDeleteFromFs.includes(item.id) && !smAndUp"
-              no-gutters
-            >
-              <v-col>
-                <v-chip label size="x-small" class="text-romm-red">
-                  Removing from filesystem
-                </v-chip>
-              </v-col>
-            </v-row>
-            <v-row no-gutters>
-              <v-col>
-                <v-chip v-if="!smAndUp" size="x-small" label
-                  >{{ formatBytes(item.file_size_bytes) }}
-                </v-chip>
-              </v-col>
-            </v-row>
-            <template #append>
-              <v-row no-gutters v-if="smAndUp">
-                <v-col>
-                  <v-chip size="x-small" label>{{
-                    formatBytes(item.file_size_bytes)
-                  }}</v-chip>
-                </v-col>
-              </v-row>
-            </template>
-          </v-list-item>
-        </template>
-        <template #bottom>
-          <v-divider />
-          <v-row no-gutters class="pt-2 align-center justify-center">
-            <v-col class="px-6">
-              <v-pagination
-                v-model="page"
-                rounded="0"
-                :show-first-last-page="true"
-                active-color="romm-accent-1"
-                :length="pageCount"
-              />
-            </v-col>
-            <v-col cols="5" sm="3" xl="2">
-              <v-select
-                v-model="itemsPerPage"
-                class="pa-2"
-                label="Roms per page"
-                density="compact"
-                variant="outlined"
-                :items="PER_PAGE_OPTIONS"
-                hide-details
-              />
-            </v-col>
-          </v-row>
-        </template>
-      </v-data-table>
-    </template>
-    <template #append>
-      <v-row v-if="romsToDeleteFromFs.length > 0" no-gutters>
-        <v-col>
-          <v-list-item class="text-center mt-2">
-            <span class="text-romm-red text-body-1">WARNING:</span>
-            <span class="text-body-2 ml-1">You are going to remove</span>
-            <span class="text-romm-red text-body-1 ml-1">{{
-              romsToDeleteFromFs.length
-            }}</span>
-            <span class="text-body-2 ml-1"
-              >roms from your filesystem. This action can't be reverted!</span
-            >
-          </v-list-item>
-        </v-col>
-      </v-row>
-      <v-row class="justify-center my-2">
-        <v-btn-group divided density="compact">
-          <v-btn class="bg-terciary" @click="closeDialog" variant="flat">
-            Cancel
-          </v-btn>
-          <v-btn
-            class="text-romm-red bg-terciary"
-            variant="flat"
-            @click="deleteRoms"
-          >
-            Confirm
-          </v-btn>
-        </v-btn-group>
-      </v-row>
-    </template>
-  </r-dialog>
-</template>
diff --git a/frontend/src/components/common/Game/Dialog/EditRom.vue b/frontend/src/components/common/Game/Dialog/EditRom.vue
index b85afd417..b34486fdc 100644
--- a/frontend/src/components/common/Game/Dialog/EditRom.vue
+++ b/frontend/src/components/common/Game/Dialog/EditRom.vue
@@ -2,7 +2,8 @@
 import GameCard from "@/components/common/Game/Card/Base.vue";
 import RDialog from "@/components/common/RDialog.vue";
 import romApi, { type UpdateRom } from "@/services/api/rom";
-import storeRoms from "@/stores/roms";
+import storeHeartbeat from "@/stores/heartbeat";
+import storeRoms, { type SimpleRom } from "@/stores/roms";
 import type { Events } from "@/types/emitter";
 import type { Emitter } from "mitt";
 import { inject, ref } from "vue";
@@ -10,7 +11,8 @@ import { useDisplay, useTheme } from "vuetify";
 
 // Props
 const theme = useTheme();
-const { smAndDown, lgAndUp } = useDisplay();
+const { lgAndUp } = useDisplay();
+const heartbeat = storeHeartbeat();
 const show = ref(false);
 const rom = ref<UpdateRom>();
 const romsStore = storeRoms();
@@ -25,6 +27,11 @@ emitter?.on("showEditRomDialog", (romToEdit: UpdateRom | undefined) => {
   show.value = true;
   rom.value = romToEdit;
 });
+emitter?.on("updateUrlCover", (url_cover) => {
+  if (!rom.value) return;
+  rom.value.url_cover = url_cover;
+  imagePreviewUrl.value = url_cover;
+});
 
 // Functions
 function triggerFileInput() {
@@ -163,14 +170,23 @@ function closeDialog() {
             <v-col class="cover">
               <game-card :rom="rom" :src="imagePreviewUrl">
                 <template #append-inner>
-                  <v-chip-group class="pa-0">
-                    <v-chip
+                  <v-btn-group rounded="0" divided density="compact">
+                    <v-btn
+                      :disabled="!heartbeat.value.STEAMGRIDDB_ENABLED"
+                      size="small"
+                      class="translucent-dark"
+                      @click="
+                        emitter?.emit('showSearchCoverDialog', rom?.name as string)
+                      "
+                    >
+                      <v-icon size="large">mdi-image-search-outline</v-icon>
+                    </v-btn>
+                    <v-btn
+                      size="small"
                       class="translucent-dark"
-                      :size="smAndDown ? 'large' : 'small'"
                       @click="triggerFileInput"
-                      label
                     >
-                      <v-icon>mdi-pencil</v-icon>
+                      <v-icon size="large">mdi-pencil</v-icon>
                       <v-file-input
                         id="file-input"
                         v-model="rom.artwork"
@@ -179,16 +195,17 @@ function closeDialog() {
                         class="file-input"
                         @change="previewImage"
                       />
-                    </v-chip>
-                    <v-chip
+                    </v-btn>
+                    <v-btn
+                      size="small"
                       class="translucent-dark"
-                      :size="smAndDown ? 'large' : 'small'"
                       @click="removeArtwork"
-                      label
                     >
-                      <v-icon class="text-romm-red"> mdi-delete </v-icon>
-                    </v-chip>
-                  </v-chip-group>
+                      <v-icon size="large" class="text-romm-red"
+                        >mdi-delete</v-icon
+                      >
+                    </v-btn>
+                  </v-btn-group>
                 </template>
               </game-card>
             </v-col>
diff --git a/frontend/src/components/common/Navigation/MainAppBar.vue b/frontend/src/components/common/Navigation/MainAppBar.vue
index 94da3a95c..8cca01e2e 100644
--- a/frontend/src/components/common/Navigation/MainAppBar.vue
+++ b/frontend/src/components/common/Navigation/MainAppBar.vue
@@ -18,13 +18,14 @@ import UserBtn from "@/components/common/Navigation/UserBtn.vue";
       <home-btn />
     </template>
 
+    <search-btn />
     <platforms-btn />
     <collections-btn />
+    <v-divider opacity="0" class="mx-3" vertical />
+    <upload-btn />
     <scan-btn />
-
+    
     <template #append>
-      <search-btn />
-      <upload-btn />
       <user-btn />
     </template>
   </v-app-bar>
diff --git a/frontend/src/components/common/Navigation/MainDrawer.vue b/frontend/src/components/common/Navigation/MainDrawer.vue
index d1e1c8e93..57137581d 100644
--- a/frontend/src/components/common/Navigation/MainDrawer.vue
+++ b/frontend/src/components/common/Navigation/MainDrawer.vue
@@ -27,17 +27,15 @@ const { activePlatformsDrawer, activeCollectionsDrawer, activeSettingsDrawer } =
       <v-row no-gutters class="my-2 justify-center">
         <home-btn />
       </v-row>
-      <v-row no-gutters class="my-4 justify-center">
-        <search-btn />
-        <upload-btn />
-      </v-row>
     </template>
 
-    <v-row no-gutters class="justify-center my-5">
-      <platforms-btn block />
-      <collections-btn block />
-      <scan-btn block />
-    </v-row>
+    <v-divider opacity="0" class="my-4" />
+    <search-btn block />
+    <platforms-btn block />
+    <collections-btn block />
+    <v-divider opacity="0" class="my-3" />
+    <upload-btn block />
+    <scan-btn block />
     <template #append>
       <v-row no-gutters class="my-2 justify-center">
         <user-btn />
diff --git a/frontend/src/components/common/Navigation/SearchBtn.vue b/frontend/src/components/common/Navigation/SearchBtn.vue
index f1854310a..d29ebc339 100644
--- a/frontend/src/components/common/Navigation/SearchBtn.vue
+++ b/frontend/src/components/common/Navigation/SearchBtn.vue
@@ -8,8 +8,8 @@ const emitter = inject<Emitter<Events>>("emitter");
 <template>
   <v-btn
     icon="mdi-magnify"
-    size="small"
     variant="flat"
+    rounded="0"
     @click="emitter?.emit('showSearchRomDialog', null)"
   />
 </template>
diff --git a/frontend/src/components/common/Navigation/UploadBtn.vue b/frontend/src/components/common/Navigation/UploadBtn.vue
index c3e76fe7a..c8ae3d383 100644
--- a/frontend/src/components/common/Navigation/UploadBtn.vue
+++ b/frontend/src/components/common/Navigation/UploadBtn.vue
@@ -12,9 +12,8 @@ const auth = storeAuth();
   <v-btn
     v-if="auth.scopes.includes('roms.write')"
     icon="mdi-upload"
-    size="small"
     variant="flat"
-    class="mr-1"
+    rounded="0"
     @click="emitter?.emit('showUploadRomDialog', null)"
   />
 </template>
diff --git a/frontend/src/components/common/Platform/Card.vue b/frontend/src/components/common/Platform/Card.vue
index 30aef3983..42a6b74be 100644
--- a/frontend/src/components/common/Platform/Card.vue
+++ b/frontend/src/components/common/Platform/Card.vue
@@ -20,7 +20,7 @@ defineProps<{ platform: Platform }>();
             :title="platform.name?.toString()"
             class="px-2 text-truncate text-caption"
           >
-            {{ platform.name }}
+            <span>{{ platform.name }}</span>
           </div>
         </v-row>
         <v-row class="pa-1 justify-center">
diff --git a/frontend/src/components/common/Game/Dialog/SearchCoverRom.vue b/frontend/src/components/common/SearchCover.vue
similarity index 73%
rename from frontend/src/components/common/Game/Dialog/SearchCoverRom.vue
rename to frontend/src/components/common/SearchCover.vue
index 4c4329e80..5ff2787d1 100644
--- a/frontend/src/components/common/Game/Dialog/SearchCoverRom.vue
+++ b/frontend/src/components/common/SearchCover.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
 import type { SearchCoverSchema } from "@/__generated__";
 import RDialog from "@/components/common/RDialog.vue";
-import romApi from "@/services/api/rom";
 import steamgriddb from "@/services/api/steamgriddb";
-import storeRoms, { type SimpleRom } from "@/stores/roms";
 import type { Events } from "@/types/emitter";
 import type { Emitter } from "mitt";
 import { inject, onBeforeUnmount, ref } from "vue";
@@ -12,27 +10,22 @@ import { useDisplay } from "vuetify";
 // Props
 const { lgAndUp } = useDisplay();
 const show = ref(false);
-const romsStore = storeRoms();
-const rom = ref<SimpleRom | null>(null);
 const searching = ref(false);
 const searchTerm = ref("");
-const games = ref<SearchCoverSchema[]>();
-const filteredGames = ref<SearchCoverSchema[]>();
+const coverType = ref("all");
+const covers = ref<SearchCoverSchema[]>([]);
+const filteredCovers = ref<SearchCoverSchema[]>();
 const panels = ref([0]);
 const emitter = inject<Emitter<Events>>("emitter");
-const type = ref("all");
-emitter?.on("showSearchCoverDialog", (romToSearch) => {
-  rom.value = romToSearch;
-  searchTerm.value = romToSearch.name || romToSearch.file_name_no_tags || "";
+emitter?.on("showSearchCoverDialog", (term) => {
+  searchTerm.value = term;
   show.value = true;
-  searchCovers();
+  if (searchTerm.value) searchCovers();
 });
 
 // Functions
 async function searchCovers() {
-  games.value = undefined;
-
-  if (!rom.value) return;
+  covers.value = [];
 
   // Auto hide android keyboard
   const inputElement = document.getElementById("search-text-field");
@@ -45,16 +38,16 @@ async function searchCovers() {
         searchTerm: searchTerm.value,
       })
       .then((response) => {
-        games.value = response.data;
-        filteredGames.value = games.value
+        covers.value = response.data;
+        filteredCovers.value = covers.value
           .map((game) => {
             return {
               ...game,
               resources:
-                type.value === "all"
+                coverType.value === "all"
                   ? game.resources
                   : game.resources.filter(
-                      (resource) => resource.type === type.value
+                      (resource) => resource.type === coverType.value
                     ),
             };
           })
@@ -73,47 +66,22 @@ async function searchCovers() {
   }
 }
 
-async function updateCover(url_cover: string) {
-  if (!rom.value) return;
-
-  show.value = false;
-  emitter?.emit("showLoadingDialog", { loading: true, scrim: true });
-
-  rom.value.url_cover = url_cover.replace("thumb", "grid");
-
-  await romApi
-    .updateRom({ rom: rom.value })
-    .then(({ data }) => {
-      emitter?.emit("snackbarShow", {
-        msg: "Rom updated successfully!",
-        icon: "mdi-check-bold",
-        color: "green",
-      });
-      romsStore.update(data);
-    })
-    .catch((error) => {
-      emitter?.emit("snackbarShow", {
-        msg: error.response.data.detail,
-        icon: "mdi-close-circle",
-        color: "red",
-      });
-    })
-    .finally(() => {
-      emitter?.emit("showLoadingDialog", { loading: false, scrim: false });
-    });
+async function selectCover(url_cover: string) {
+  emitter?.emit("updateUrlCover", url_cover.replace("thumb", "grid"));
+  closeDialog();
 }
 
 function filterCovers() {
-  if (games.value) {
-    filteredGames.value = games.value
+  if (covers.value) {
+    filteredCovers.value = covers.value
       .map((game) => {
         return {
           ...game,
           resources:
-            type.value === "all"
+            coverType.value === "all"
               ? game.resources
               : game.resources.filter(
-                  (resource) => resource.type === type.value
+                  (resource) => resource.type === coverType.value
                 ),
         };
       })
@@ -123,7 +91,9 @@ function filterCovers() {
 
 function closeDialog() {
   show.value = false;
-  games.value = undefined;
+  covers.value = [];
+  filteredCovers.value = [];
+  searchTerm.value = "";
 }
 
 onBeforeUnmount(() => {
@@ -135,9 +105,9 @@ onBeforeUnmount(() => {
   <r-dialog
     @close="closeDialog"
     v-model="show"
-    icon="mdi-image-outline"
+    icon="mdi-image-search-outline"
     :loading-condition="searching"
-    :empty-state-condition="filteredGames?.length == 0"
+    :empty-state-condition="filteredCovers?.length == 0"
     empty-state-type="game"
     scroll-content
     :width="lgAndUp ? '60vw' : '95vw'"
@@ -161,7 +131,7 @@ onBeforeUnmount(() => {
         <v-col cols="2" sm="2">
           <v-select
             :disabled="searching"
-            v-model="type"
+            v-model="coverType"
             hide-details
             label="Type"
             @update:model-value="filterCovers"
@@ -190,7 +160,7 @@ onBeforeUnmount(() => {
         rounded="0"
         variant="accordion"
       >
-        <v-expansion-panel v-for="game in filteredGames" :key="game.name">
+        <v-expansion-panel v-for="game in filteredCovers" :key="game.name">
           <v-expansion-panel-title class="bg-terciary">
             <v-row no-gutters class="justify-center">
               <v-list-item class="pa-0">{{ game.name }}</v-list-item>
@@ -210,7 +180,7 @@ onBeforeUnmount(() => {
                     v-bind="hoverProps"
                     :class="{ 'on-hover': isHovering }"
                     class="transform-scale pointer"
-                    @click="updateCover(resource.url)"
+                    @click="selectCover(resource.url)"
                     :aspect-ratio="2 / 3"
                     :src="resource.thumb"
                     cover
diff --git a/frontend/src/layouts/Dashboard/Collections.vue b/frontend/src/layouts/Dashboard/Collections.vue
index cf65bbe43..a7a553cad 100644
--- a/frontend/src/layouts/Dashboard/Collections.vue
+++ b/frontend/src/layouts/Dashboard/Collections.vue
@@ -21,7 +21,13 @@ const collections = storeCollections();
           :lg="views[0]['size-lg']"
           :xl="views[0]['size-xl']"
         >
-          <collection-card show-rom-count show-title transformScale :key="collection.name" :collection="collection" />
+          <collection-card
+            show-rom-count
+            show-title
+            transformScale
+            :key="collection.updated_at"
+            :collection="collection"
+          />
         </v-col>
       </v-row>
     </template>
diff --git a/frontend/src/layouts/Dashboard/Recent.vue b/frontend/src/layouts/Dashboard/Recent.vue
index d44ddab71..d04327d26 100644
--- a/frontend/src/layouts/Dashboard/Recent.vue
+++ b/frontend/src/layouts/Dashboard/Recent.vue
@@ -31,6 +31,7 @@ function onGameClick(emitData: { rom: SimpleRom; event: MouseEvent }) {
           :xl="views[0]['size-xl']"
         >
           <game-card
+            :key="rom.updated_at"
             @click="onGameClick"
             :rom="rom"
             transform-scale
diff --git a/frontend/src/services/api/collection.ts b/frontend/src/services/api/collection.ts
index f2b56f0a5..1f1fff885 100644
--- a/frontend/src/services/api/collection.ts
+++ b/frontend/src/services/api/collection.ts
@@ -2,16 +2,25 @@ import type { MessageResponse } from "@/__generated__";
 import api from "@/services/api/index";
 import type { Collection } from "@/stores/collections";
 
+export type UpdatedCollection = Collection & {
+  artwork?: File;
+  url_cover?: string;
+};
+
 export const collectionApi = api;
 
 async function createCollection({
-  name,
-  description,
+  collection,
 }: {
-  name: string;
-  description: string;
+  collection: UpdatedCollection;
 }): Promise<{ data: Collection }> {
-  return api.post("/collections", { name: name, description: description });
+  const formData = new FormData();
+  formData.append("name", collection.name || "");
+  formData.append("description", collection.description || "");
+  formData.append("url_cover", collection.url_cover || "");
+  formData.append("roms", JSON.stringify(collection.roms));
+  if (collection.artwork) formData.append("artwork", collection.artwork);
+  return api.post(`/collections`, formData);
 }
 
 async function getCollections(): Promise<{ data: Collection[] }> {
@@ -24,16 +33,11 @@ async function getCollection(
   return api.get(`/collections/${id}`);
 }
 
-export type UpdateCollection = Collection & {
-  artwork?: File;
-  url_cover?: string;
-};
-
 async function updateCollection({
   collection,
   removeCover = false,
 }: {
-  collection: UpdateCollection;
+  collection: UpdatedCollection;
   removeCover?: boolean;
 }): Promise<{ data: MessageResponse }> {
   const formData = new FormData();
diff --git a/frontend/src/types/emitter.d.ts b/frontend/src/types/emitter.d.ts
index 5265bb456..60e4322e9 100644
--- a/frontend/src/types/emitter.d.ts
+++ b/frontend/src/types/emitter.d.ts
@@ -25,7 +25,8 @@ export type Events = {
   showRemoveFromCollectionDialog: SimpleRom[];
   showDeleteCollectionDialog: Collection;
   showMatchRomDialog: SimpleRom;
-  showSearchCoverDialog: SimpleRom;
+  showSearchCoverDialog: string;
+  updateUrlCover: string;
   showSearchRomDialog: null;
   showEditRomDialog: SimpleRom;
   showCopyDownloadLinkDialog: string;
diff --git a/frontend/src/views/Gallery/Collection.vue b/frontend/src/views/Gallery/Collection.vue
index abcda3af9..f817e4292 100644
--- a/frontend/src/views/Gallery/Collection.vue
+++ b/frontend/src/views/Gallery/Collection.vue
@@ -273,6 +273,7 @@ onBeforeUnmount(() => {
           :xl="views[currentView]['size-xl']"
         >
           <game-card
+            :key="rom.updated_at"
             :rom="rom"
             title-on-hover
             show-action-bar
diff --git a/frontend/src/views/Gallery/Platform.vue b/frontend/src/views/Gallery/Platform.vue
index 570533b73..2351e9801 100644
--- a/frontend/src/views/Gallery/Platform.vue
+++ b/frontend/src/views/Gallery/Platform.vue
@@ -274,6 +274,7 @@ onBeforeUnmount(() => {
           :xl="views[currentView]['size-xl']"
         >
           <game-card
+            :key="rom.updated_at"
             :rom="rom"
             title-on-hover
             show-action-bar
diff --git a/frontend/src/views/GameDetails.vue b/frontend/src/views/GameDetails.vue
index ec88d765d..2a0960f14 100644
--- a/frontend/src/views/GameDetails.vue
+++ b/frontend/src/views/GameDetails.vue
@@ -107,7 +107,7 @@ watch(
           'cover-mobile': smAndDown,
         }"
       >
-        <cover :rom="rom" />
+        <cover :pointerOnHover="false" :rom="rom" />
         <action-bar class="mt-2" :rom="rom" />
         <related-games v-if="mdAndUp" class="mt-3" :rom="rom" />
       </v-col>
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index fb0188f09..7802642a3 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -17,7 +17,7 @@ import CopyRomDownloadLinkDialog from "@/components/common/Game/Dialog/CopyDownl
 import DeleteRomDialog from "@/components/common/Game/Dialog/DeleteRom.vue";
 import EditRomDialog from "@/components/common/Game/Dialog/EditRom.vue";
 import MatchRomDialog from "@/components/common/Game/Dialog/MatchRom.vue";
-import SearchCoverDialog from "@/components/common/Game/Dialog/SearchCoverRom.vue";
+import SearchCoverDialog from "@/components/common/SearchCover.vue";
 import SearchRomDialog from "@/components/common/Game/Dialog/SearchRom.vue";
 import UploadRomDialog from "@/components/common/Game/Dialog/UploadRom.vue";
 import LoadingView from "@/components/common/LoadingView.vue";

From 69ed831d5e826748683446e7c1010d621f6790f0 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Wed, 3 Jul 2024 14:55:49 +0200
Subject: [PATCH 16/33] added running scan loader to drawer btn

---
 frontend/src/App.vue                          |  85 +--------------
 .../Users/Dialog/CreateUser.vue               |   2 +-
 .../Collection/Dialog/CreateCollection.vue    |   2 +-
 .../Collection/Dialog/EditCollection.vue      |   6 +-
 .../components/common/Navigation/ScanBtn.vue  | 102 +++++++++++++++++-
 frontend/src/plugins/router.ts                |   1 +
 frontend/src/views/Home.vue                   |  18 +---
 frontend/src/views/Scan.vue                   |   6 +-
 8 files changed, 110 insertions(+), 112 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 750c7935a..3a6030176 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,94 +1,18 @@
 <script setup lang="ts">
 import Notification from "@/components/common/Notification.vue";
 import api from "@/services/api/index";
-import socket from "@/services/socket";
 import storeConfig from "@/stores/config";
-import storeGalleryFilter from "@/stores/galleryFilter";
 import storeHeartbeat from "@/stores/heartbeat";
 import storeNotifications from "@/stores/notifications";
-import storeRoms, { type SimpleRom } from "@/stores/roms";
-import storeScanning from "@/stores/scanning";
-import type { Events } from "@/types/emitter";
-import { normalizeString } from "@/utils";
-import type { Emitter } from "mitt";
 import { storeToRefs } from "pinia";
-import { inject, onBeforeUnmount, onMounted } from "vue";
+import { onMounted } from "vue";
 
 // Props
-const scanningStore = storeScanning();
 const notificationStore = storeNotifications();
 const { notifications } = storeToRefs(notificationStore);
-const { scanningPlatforms } = storeToRefs(scanningStore);
-const romsStore = storeRoms();
-const galleryFilter = storeGalleryFilter();
-const isFiltered = normalizeString(galleryFilter.filterSearch).trim() != "";
-const emitter = inject<Emitter<Events>>("emitter");
 const heartbeat = storeHeartbeat();
 const configStore = storeConfig();
 
-socket.on(
-  "scan:scanning_platform",
-  ({ name, slug, id }: { name: string; slug: string; id: number }) => {
-    scanningStore.set(true);
-    scanningPlatforms.value = scanningPlatforms.value.filter(
-      (platform) => platform.name !== name
-    );
-    scanningPlatforms.value.push({ name, slug, id, roms: [] });
-  }
-);
-
-socket.on("scan:scanning_rom", (rom: SimpleRom) => {
-  scanningStore.set(true);
-  if (romsStore.currentPlatform?.id === rom.platform_id) {
-    romsStore.add([rom]);
-    romsStore.setFiltered(
-      isFiltered ? romsStore.filteredRoms : romsStore.allRoms,
-      galleryFilter
-    );
-  }
-
-  let scannedPlatform = scanningPlatforms.value.find(
-    (p) => p.slug === rom.platform_slug
-  );
-
-  // Add the platform if the socket dropped and it's missing
-  if (!scannedPlatform) {
-    scanningPlatforms.value.push({
-      name: rom.platform_name,
-      slug: rom.platform_slug,
-      id: rom.platform_id,
-      roms: [],
-    });
-    scannedPlatform = scanningPlatforms.value[0];
-  }
-
-  scannedPlatform?.roms.push(rom);
-});
-
-socket.on("scan:done", () => {
-  scanningStore.set(false);
-  socket.disconnect();
-
-  emitter?.emit("refreshDrawer", null);
-  emitter?.emit("snackbarShow", {
-    msg: "Scan completed successfully!",
-    icon: "mdi-check-bold",
-    color: "green",
-    timeout: 4000,
-  });
-});
-
-socket.on("scan:done_ko", (msg) => {
-  scanningStore.set(false);
-
-  emitter?.emit("snackbarShow", {
-    msg: `Scan failed: ${msg}`,
-    icon: "mdi-close-circle",
-    color: "red",
-  });
-  socket.disconnect();
-});
-
 onMounted(async () => {
   await api.get("/heartbeat").then(({ data: data }) => {
     heartbeat.set(data);
@@ -98,13 +22,6 @@ onMounted(async () => {
     configStore.set(data);
   });
 });
-
-onBeforeUnmount(() => {
-  socket.off("scan:scanning_platform");
-  socket.off("scan:scanning_rom");
-  socket.off("scan:done");
-  socket.off("scan:done_ko");
-});
 </script>
 
 <template>
diff --git a/frontend/src/components/Administration/Users/Dialog/CreateUser.vue b/frontend/src/components/Administration/Users/Dialog/CreateUser.vue
index 885a747b1..3379e6d08 100644
--- a/frontend/src/components/Administration/Users/Dialog/CreateUser.vue
+++ b/frontend/src/components/Administration/Users/Dialog/CreateUser.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
+import RDialog from "@/components/common/RDialog.vue";
 import userApi from "@/services/api/user";
 import storeUsers from "@/stores/users";
 import type { Events } from "@/types/emitter";
 import type { Emitter } from "mitt";
 import { inject, ref } from "vue";
 import { useDisplay } from "vuetify";
-import RDialog from "@/components/common/RDialog.vue";
 
 // Props
 const user = ref({
diff --git a/frontend/src/components/common/Collection/Dialog/CreateCollection.vue b/frontend/src/components/common/Collection/Dialog/CreateCollection.vue
index 8b6605264..0c0f34873 100644
--- a/frontend/src/components/common/Collection/Dialog/CreateCollection.vue
+++ b/frontend/src/components/common/Collection/Dialog/CreateCollection.vue
@@ -103,7 +103,7 @@ function closeDialog() {
   >
     <template #content>
       <v-row class="align-center pa-2" no-gutters>
-        <v-col cols="12" md="8" lg="8" xl="9">
+        <v-col cols="12" lg="7" xl="9">
           <v-row class="pa-2" no-gutters>
             <v-col>
               <v-text-field
diff --git a/frontend/src/components/common/Collection/Dialog/EditCollection.vue b/frontend/src/components/common/Collection/Dialog/EditCollection.vue
index 77ca72dc3..7e0d68ee7 100644
--- a/frontend/src/components/common/Collection/Dialog/EditCollection.vue
+++ b/frontend/src/components/common/Collection/Dialog/EditCollection.vue
@@ -12,7 +12,7 @@ import { useDisplay, useTheme } from "vuetify";
 
 // Props
 const theme = useTheme();
-const { lgAndUp } = useDisplay();
+const { mdAndUp } = useDisplay();
 const show = ref(false);
 const collection = ref<UpdatedCollection>({} as UpdatedCollection);
 const imagePreviewUrl = ref<string | undefined>("");
@@ -97,11 +97,11 @@ function closeDialog() {
     @close="closeDialog"
     v-model="show"
     icon="mdi-pencil-box"
-    :width="lgAndUp ? '55vw' : '95vw'"
+    :width="mdAndUp ? '55vw' : '95vw'"
   >
     <template #content>
       <v-row class="align-center pa-2" no-gutters>
-        <v-col cols="12" md="8" lg="8" xl="9">
+        <v-col cols="12" lg="7" xl="9">
           <v-row class="pa-2" no-gutters>
             <v-col>
               <v-text-field
diff --git a/frontend/src/components/common/Navigation/ScanBtn.vue b/frontend/src/components/common/Navigation/ScanBtn.vue
index 6b74523ac..b3482c616 100644
--- a/frontend/src/components/common/Navigation/ScanBtn.vue
+++ b/frontend/src/components/common/Navigation/ScanBtn.vue
@@ -1,6 +1,15 @@
 <script setup lang="ts">
+import socket from "@/services/socket";
 import storeAuth from "@/stores/auth";
+import storeGalleryFilter from "@/stores/galleryFilter";
 import storeNavigation from "@/stores/navigation";
+import storeRoms, { type SimpleRom } from "@/stores/roms";
+import storeScanning from "@/stores/scanning";
+import type { Events } from "@/types/emitter";
+import { normalizeString } from "@/utils";
+import type { Emitter } from "mitt";
+import { storeToRefs } from "pinia";
+import { inject, onBeforeUnmount } from "vue";
 
 // Props
 withDefaults(
@@ -13,6 +22,85 @@ withDefaults(
 );
 const navigationStore = storeNavigation();
 const auth = storeAuth();
+const galleryFilter = storeGalleryFilter();
+const isFiltered = normalizeString(galleryFilter.filterSearch).trim() != "";
+const emitter = inject<Emitter<Events>>("emitter");
+const scanningStore = storeScanning();
+const { scanningPlatforms } = storeToRefs(scanningStore);
+const romsStore = storeRoms();
+const { scanning } = storeToRefs(scanningStore);
+// Connect to socket on load to catch running scans
+if (!socket.connected) socket.connect();
+
+socket.on(
+  "scan:scanning_platform",
+  ({ name, slug, id }: { name: string; slug: string; id: number }) => {
+    scanningStore.set(true);
+    scanningPlatforms.value = scanningPlatforms.value.filter(
+      (platform) => platform.name !== name
+    );
+    scanningPlatforms.value.push({ name, slug, id, roms: [] });
+  }
+);
+
+socket.on("scan:scanning_rom", (rom: SimpleRom) => {
+  scanningStore.set(true);
+  if (romsStore.currentPlatform?.id === rom.platform_id) {
+    romsStore.add([rom]);
+    romsStore.setFiltered(
+      isFiltered ? romsStore.filteredRoms : romsStore.allRoms,
+      galleryFilter
+    );
+  }
+
+  let scannedPlatform = scanningPlatforms.value.find(
+    (p) => p.slug === rom.platform_slug
+  );
+
+  // Add the platform if the socket dropped and it's missing
+  if (!scannedPlatform) {
+    scanningPlatforms.value.push({
+      name: rom.platform_name,
+      slug: rom.platform_slug,
+      id: rom.platform_id,
+      roms: [],
+    });
+    scannedPlatform = scanningPlatforms.value[0];
+  }
+
+  scannedPlatform?.roms.push(rom);
+});
+
+socket.on("scan:done", () => {
+  scanningStore.set(false);
+  socket.disconnect();
+
+  emitter?.emit("refreshDrawer", null);
+  emitter?.emit("snackbarShow", {
+    msg: "Scan completed successfully!",
+    icon: "mdi-check-bold",
+    color: "green",
+    timeout: 4000,
+  });
+});
+
+socket.on("scan:done_ko", (msg) => {
+  scanningStore.set(false);
+
+  emitter?.emit("snackbarShow", {
+    msg: `Scan failed: ${msg}`,
+    icon: "mdi-close-circle",
+    color: "red",
+  });
+  socket.disconnect();
+});
+
+onBeforeUnmount(() => {
+  socket.off("scan:scanning_platform");
+  socket.off("scan:scanning_rom");
+  socket.off("scan:done");
+  socket.off("scan:done_ko");
+});
 </script>
 <template>
   <v-btn
@@ -23,8 +111,16 @@ const auth = storeAuth();
     color="primary"
     icon
     @click="navigationStore.goScan"
-    ><v-icon :color="$route.name == 'scan' ? 'romm-accent-1' : ''"
-      >mdi-magnify-scan</v-icon
-    ></v-btn
   >
+    <v-progress-circular
+      v-if="scanning"
+      color="romm-accent-1"
+      :width="2"
+      :size="20"
+      indeterminate
+    />
+    <v-icon v-else :color="$route.name == 'scan' ? 'romm-accent-1' : ''"
+      >mdi-magnify-scan</v-icon
+    >
+  </v-btn>
 </template>
diff --git a/frontend/src/plugins/router.ts b/frontend/src/plugins/router.ts
index ab1a3cc56..b897e284f 100644
--- a/frontend/src/plugins/router.ts
+++ b/frontend/src/plugins/router.ts
@@ -74,6 +74,7 @@ const router = createRouter({
 router.afterEach(() => {
   // Scroll to top to avoid annoying behaviour in mobile
   window.scrollTo({ top: 0, left: 0 });
+  // TODO: check permission for views. Ex: view user can access to /scan view
 });
 
 export default router;
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index 7802642a3..6907add50 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -7,17 +7,16 @@ import CreatePlatformBindingDialog from "@/components/Management/Dialog/CreatePl
 import CreatePlatformVersionDialog from "@/components/Management/Dialog/CreatePlatformVersion.vue";
 import DeletePlatformBindingDialog from "@/components/Management/Dialog/DeletePlatformBinding.vue";
 import DeletePlatformVersionDialog from "@/components/Management/Dialog/DeletePlatformVersion.vue";
+import AddRomsToCollectionDialog from "@/components/common/Collection/Dialog/AddRoms.vue";
 import CreateCollectionDialog from "@/components/common/Collection/Dialog/CreateCollection.vue";
+import DeleteCollectionDialog from "@/components/common/Collection/Dialog/DeleteCollection.vue";
 import EditCollectionDialog from "@/components/common/Collection/Dialog/EditCollection.vue";
-import AddRomsToCollectionDialog from "@/components/common/Collection/Dialog/AddRoms.vue";
 import RemoveRomsFromCollectionDialog from "@/components/common/Collection/Dialog/RemoveRoms.vue";
-import DeleteCollectionDialog from "@/components/common/Collection/Dialog/DeleteCollection.vue";
 import DeleteAssetDialog from "@/components/common/Game/Dialog/Asset/DeleteAssets.vue";
 import CopyRomDownloadLinkDialog from "@/components/common/Game/Dialog/CopyDownloadLink.vue";
 import DeleteRomDialog from "@/components/common/Game/Dialog/DeleteRom.vue";
 import EditRomDialog from "@/components/common/Game/Dialog/EditRom.vue";
 import MatchRomDialog from "@/components/common/Game/Dialog/MatchRom.vue";
-import SearchCoverDialog from "@/components/common/SearchCover.vue";
 import SearchRomDialog from "@/components/common/Game/Dialog/SearchRom.vue";
 import UploadRomDialog from "@/components/common/Game/Dialog/UploadRom.vue";
 import LoadingView from "@/components/common/LoadingView.vue";
@@ -28,22 +27,19 @@ import PlatformsDrawer from "@/components/common/Navigation/PlatformsDrawer.vue"
 import SettingsDrawer from "@/components/common/Navigation/SettingsDrawer.vue";
 import NewVersion from "@/components/common/NewVersion.vue";
 import DeletePlatformDialog from "@/components/common/Platform/Dialog/DeletePlatform.vue";
+import SearchCoverDialog from "@/components/common/SearchCover.vue";
 import platformApi from "@/services/api/platform";
 import userApi from "@/services/api/user";
 import storeAuth from "@/stores/auth";
 import storeNavigation from "@/stores/navigation";
 import storePlatforms from "@/stores/platforms";
-import storeScanning from "@/stores/scanning";
 import type { Events } from "@/types/emitter";
 import type { Emitter } from "mitt";
-import { storeToRefs } from "pinia";
 import { inject, onMounted } from "vue";
 import { useDisplay } from "vuetify";
 
 // Props
 const { smAndDown } = useDisplay();
-const scanningStore = storeScanning();
-const { scanning } = storeToRefs(scanningStore);
 const navigationStore = storeNavigation();
 const platformsStore = storePlatforms();
 const auth = storeAuth();
@@ -77,14 +73,6 @@ onMounted(async () => {
 </script>
 
 <template>
-  <v-progress-linear
-    color="romm-accent-1"
-    :active="scanning"
-    :indeterminate="true"
-    absolute
-  />
-
-  <!-- TODO: refactor and extract components -->
   <main-drawer v-if="!smAndDown" />
 
   <main-app-bar v-if="smAndDown" />
diff --git a/frontend/src/views/Scan.vue b/frontend/src/views/Scan.vue
index 9dfe931a8..4901b7b0f 100644
--- a/frontend/src/views/Scan.vue
+++ b/frontend/src/views/Scan.vue
@@ -7,7 +7,7 @@ import storePlatforms, { type Platform } from "@/stores/platforms";
 import storeScanning from "@/stores/scanning";
 import { storeToRefs } from "pinia";
 import { computed, ref, watch } from "vue";
-import { useDisplay, useTheme } from "vuetify";
+import { useDisplay } from "vuetify";
 
 // Props
 const { xs, smAndDown } = useDisplay();
@@ -16,7 +16,6 @@ const { scanning, scanningPlatforms, scanStats } = storeToRefs(scanningStore);
 const platforms = storePlatforms();
 const heartbeat = storeHeartbeat();
 const platformsToScan = ref<Platform[]>([]);
-const theme = useTheme();
 const panels = ref([0]);
 const panelIndex = ref(0);
 // Use a computed property to reactively update metadataOptions based on heartbeat
@@ -71,9 +70,6 @@ const scanOptions = [
 ];
 const scanType = ref("quick");
 
-// Connect to socket on load to catch running scans
-if (!socket.connected) socket.connect();
-
 async function scan() {
   scanningStore.set(true);
   scanningPlatforms.value = [];

From b1b55f16bed2bd3bd47232b703266ba5af61a626 Mon Sep 17 00:00:00 2001
From: Zurdi <zurdizurdo25@gmail.com>
Date: Wed, 3 Jul 2024 17:19:49 +0200
Subject: [PATCH 17/33] fixed migrations

---
 .../versions/0019_resources_refactor.py       | 12 ++--
 backend/alembic/versions/0022_collections_.py | 57 +++++++++++++++++++
 2 files changed, 62 insertions(+), 7 deletions(-)

diff --git a/backend/alembic/versions/0019_resources_refactor.py b/backend/alembic/versions/0019_resources_refactor.py
index d463cc0b7..22b47ba13 100644
--- a/backend/alembic/versions/0019_resources_refactor.py
+++ b/backend/alembic/versions/0019_resources_refactor.py
@@ -44,7 +44,7 @@ def upgrade() -> None:
 
         old_folder_path = f"{RESOURCES_BASE_PATH}/{platform_slug}/{rom.name}"
         new_folder_path = (
-            f"{RESOURCES_BASE_PATH}/roms/{platform_folder_name}/{rom_folder_name}"
+            f"{RESOURCES_BASE_PATH}/{platform_folder_name}/{rom_folder_name}"
         )
 
         print("INFO:\t  [Resources migration] Renaming folder:")
@@ -52,9 +52,7 @@ def upgrade() -> None:
         print(f"INFO:\t  [Resources migration]  - new: {new_folder_path}")
 
         try:
-            os.makedirs(
-                f"{RESOURCES_BASE_PATH}/roms/{platform_folder_name}", exist_ok=True
-            )
+            os.makedirs(f"{RESOURCES_BASE_PATH}/{platform_folder_name}", exist_ok=True)
         except OSError as error:
             print(error)
 
@@ -70,17 +68,17 @@ def upgrade() -> None:
 
         updated_path_cover_s = re.sub(
             quoted_platform_slug,
-            f"roms/{platform_folder_name}",
+            platform_folder_name,
             re.sub(quoted_rom_name, rom_folder_name, rom.path_cover_s),
         )
         updated_path_cover_l = re.sub(
             quoted_platform_slug,
-            f"roms/{platform_folder_name}",
+            platform_folder_name,
             re.sub(quoted_rom_name, rom_folder_name, rom.path_cover_l),
         )
         updated_path_screenshots = re.sub(
             quoted_platform_slug,
-            f"roms/{platform_folder_name}",
+            platform_folder_name,
             re.sub(quoted_rom_name, rom_folder_name, rom.path_screenshots),
         )
 
diff --git a/backend/alembic/versions/0022_collections_.py b/backend/alembic/versions/0022_collections_.py
index 992ce32d2..7c11b82af 100644
--- a/backend/alembic/versions/0022_collections_.py
+++ b/backend/alembic/versions/0022_collections_.py
@@ -6,8 +6,13 @@
 
 """
 
+import json
+import os
+import shutil
+
 import sqlalchemy as sa
 from alembic import op
+from config import RESOURCES_BASE_PATH
 from sqlalchemy.dialects import mysql
 
 # revision identifiers, used by Alembic.
@@ -52,6 +57,58 @@ def upgrade() -> None:
             nullable=True,
         )
 
+    connection = op.get_bind()
+    roms = connection.execute(
+        sa.text(
+            "SELECT id, name, platform_id, path_cover_s, path_cover_l, path_screenshots FROM roms"
+        )
+    ).fetchall()
+
+    # Define the path for the new folder
+    roms_folder_path = os.path.join(RESOURCES_BASE_PATH, "roms")
+
+    # Create the new folder if it doesn't exist
+    os.makedirs(roms_folder_path, exist_ok=True)
+
+    # List all items in the base directory
+    for folder in os.listdir(RESOURCES_BASE_PATH):
+        folder_path = os.path.join(RESOURCES_BASE_PATH, folder)
+
+        # Check if the item is a directory and not the new folder itself
+        if os.path.isdir(folder_path) and folder != "roms":
+            # Move the folder to the new folder
+            shutil.move(folder_path, roms_folder_path)
+
+    # Update paths for each rom
+    for rom in roms:
+        path_cover_s = rom.path_cover_s
+        path_cover_l = rom.path_cover_l
+        path_screenshots = rom.path_screenshots
+
+        # Add "roms/" prefix to path_cover_s and path_cover_l
+        if path_cover_s:
+            path_cover_s = f"roms/{path_cover_s}"
+        if path_cover_l:
+            path_cover_l = f"roms/{path_cover_l}"
+
+        # Add "roms/" prefix to each path in path_screenshots
+        if path_screenshots:
+            path_screenshots_list = json.loads(path_screenshots)
+            path_screenshots_list = [f"roms/{path}" for path in path_screenshots_list]
+            path_screenshots = json.dumps(path_screenshots_list)
+
+        # Update the database with the new paths
+        connection.execute(
+            sa.text(
+                "UPDATE roms SET path_cover_s = :path_cover_s, path_cover_l = :path_cover_l, path_screenshots = :path_screenshots WHERE id = :id"
+            ),
+            {
+                "path_cover_s": path_cover_s,
+                "path_cover_l": path_cover_l,
+                "path_screenshots": path_screenshots,
+                "id": rom.id,
+            },
+        )
     # ### end Alembic commands ###
 
 

From 2a7def81ac3cefedbe07837a34908deda527fc9c Mon Sep 17 00:00:00 2001
From: Zurdi <zurdizurdo25@gmail.com>
Date: Wed, 3 Jul 2024 21:58:58 +0200
Subject: [PATCH 18/33] added reactivity to collections

---
 backend/endpoints/collections.py                            | 5 ++---
 backend/handler/database/collections_handler.py             | 2 +-
 .../components/common/Collection/Dialog/EditCollection.vue  | 4 +++-
 frontend/src/services/api/collection.ts                     | 2 +-
 frontend/src/stores/collections.ts                          | 6 ++++++
 frontend/src/views/Play/Base.vue                            | 2 --
 6 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/backend/endpoints/collections.py b/backend/endpoints/collections.py
index 935f52562..787de28c1 100644
--- a/backend/endpoints/collections.py
+++ b/backend/endpoints/collections.py
@@ -128,7 +128,7 @@ async def update_collection(
     id: int,
     remove_cover: bool = False,
     artwork: UploadFile | None = None,
-) -> MessageResponse:
+) -> CollectionSchema:
     """Update collection endpoint
 
     Args:
@@ -199,8 +199,7 @@ async def update_collection(
                 {"path_cover_s": path_cover_s, "path_cover_l": path_cover_l}
             )
 
-    db_collection_handler.update_collection(id, cleaned_data)
-    return {"msg": f"Collection {cleaned_data['name']} updated successfully!"}
+    return db_collection_handler.update_collection(id, cleaned_data)
 
 
 @protected_route(router.delete, "/collections/{id}", ["collections.write"])
diff --git a/backend/handler/database/collections_handler.py b/backend/handler/database/collections_handler.py
index 3871f637c..2b82a55eb 100644
--- a/backend/handler/database/collections_handler.py
+++ b/backend/handler/database/collections_handler.py
@@ -51,7 +51,7 @@ def update_collection(
             .values(**data)
             .execution_options(synchronize_session="evaluate")
         )
-        return self.get_collection(id)
+        return session.query(Collection).filter_by(id=id).one()
 
     @begin_session
     def delete_collection(self, id: int, session: Session = None) -> int:
diff --git a/frontend/src/components/common/Collection/Dialog/EditCollection.vue b/frontend/src/components/common/Collection/Dialog/EditCollection.vue
index 7e0d68ee7..1977f8115 100644
--- a/frontend/src/components/common/Collection/Dialog/EditCollection.vue
+++ b/frontend/src/components/common/Collection/Dialog/EditCollection.vue
@@ -3,7 +3,7 @@ import CollectionCard from "@/components/common/Collection/Card.vue";
 import RDialog from "@/components/common/RDialog.vue";
 import type { UpdatedCollection } from "@/services/api/collection";
 import collectionApi from "@/services/api/collection";
-import { type Collection } from "@/stores/collections";
+import collectionStore, { type Collection } from "@/stores/collections";
 import storeHeartbeat from "@/stores/heartbeat";
 import type { Events } from "@/types/emitter";
 import type { Emitter } from "mitt";
@@ -14,6 +14,7 @@ import { useDisplay, useTheme } from "vuetify";
 const theme = useTheme();
 const { mdAndUp } = useDisplay();
 const show = ref(false);
+const storeCollection = collectionStore();
 const collection = ref<UpdatedCollection>({} as UpdatedCollection);
 const imagePreviewUrl = ref<string | undefined>("");
 const removeCover = ref(false);
@@ -63,6 +64,7 @@ async function editCollection() {
       collection: collection.value,
     })
     .then(({ data }) => {
+      storeCollection.update(data);
       emitter?.emit("snackbarShow", {
         msg: `Collection updated successfully!`,
         icon: "mdi-check-bold",
diff --git a/frontend/src/services/api/collection.ts b/frontend/src/services/api/collection.ts
index 1f1fff885..1ee57285f 100644
--- a/frontend/src/services/api/collection.ts
+++ b/frontend/src/services/api/collection.ts
@@ -39,7 +39,7 @@ async function updateCollection({
 }: {
   collection: UpdatedCollection;
   removeCover?: boolean;
-}): Promise<{ data: MessageResponse }> {
+}): Promise<{ data: Collection }> {
   const formData = new FormData();
   formData.append("name", collection.name || "");
   formData.append("description", collection.description || "");
diff --git a/frontend/src/stores/collections.ts b/frontend/src/stores/collections.ts
index f0bc87bbd..a54dcd860 100644
--- a/frontend/src/stores/collections.ts
+++ b/frontend/src/stores/collections.ts
@@ -31,6 +31,12 @@ export default defineStore("collections", {
       this.all.push(collection);
       this._reorder();
     },
+    update(collection: Collection) {
+      this.all = this.all.map((value) =>
+        value.id === collection.id ? collection : value,
+      );
+      this._reorder();
+    },
     exists(collection: Collection) {
       return this.all.filter((p) => p.name == collection.name).length > 0;
     },
diff --git a/frontend/src/views/Play/Base.vue b/frontend/src/views/Play/Base.vue
index f6b1cba81..e1decaa3e 100644
--- a/frontend/src/views/Play/Base.vue
+++ b/frontend/src/views/Play/Base.vue
@@ -170,8 +170,6 @@ onMounted(async () => {
               })) ?? []
             "
           />
-          <!-- TODO: diisable selector when start playing -->
-          <!-- TODO: reset emulation to re-select -->
           <!-- <v-select
             class="my-1"
             hide-details

From 040fd836370f7916f0c1fad86064d340f9b8823a Mon Sep 17 00:00:00 2001
From: Zurdi <zurdizurdo25@gmail.com>
Date: Wed, 3 Jul 2024 21:59:45 +0200
Subject: [PATCH 19/33] added reactivity to gallery

---
 .../components/Details/BackgroundHeader.vue   | 13 ++--
 .../components/common/Game/Dialog/EditRom.vue | 12 +++-
 frontend/src/stores/roms.ts                   |  7 ++
 frontend/src/views/GameDetails.vue            | 70 +++++++++++--------
 4 files changed, 64 insertions(+), 38 deletions(-)

diff --git a/frontend/src/components/Details/BackgroundHeader.vue b/frontend/src/components/Details/BackgroundHeader.vue
index 53a289c9c..e46c21bb5 100644
--- a/frontend/src/components/Details/BackgroundHeader.vue
+++ b/frontend/src/components/Details/BackgroundHeader.vue
@@ -1,19 +1,22 @@
 <script setup lang="ts">
-import type { DetailedRom } from "@/stores/roms";
+import storeRoms from "@/stores/roms";
+import { storeToRefs } from "pinia";
 import { useTheme } from "vuetify";
 
-defineProps<{ rom: DetailedRom }>();
+// Props
 const theme = useTheme();
+const romsStore = storeRoms();
+const { currentRom } = storeToRefs(romsStore);
 </script>
 
 <template>
-  <v-card rounded="0">
+  <v-card :key="currentRom.updated_at" v-if="currentRom" rounded="0">
     <v-img
       id="background-header"
       :src="
-        !rom.igdb_id && !rom.moby_id && !rom.has_cover
+        !currentRom.igdb_id && !currentRom.moby_id && !currentRom.has_cover
           ? `/assets/default/cover/big_${theme.global.name.value}_unmatched.png`
-          : `/assets/romm/resources/${rom.path_cover_l}`
+          : `/assets/romm/resources/${currentRom.path_cover_l}?ts=${currentRom.updated_at}`
       "
       lazy
       cover
diff --git a/frontend/src/components/common/Game/Dialog/EditRom.vue b/frontend/src/components/common/Game/Dialog/EditRom.vue
index b34486fdc..cead8ebd0 100644
--- a/frontend/src/components/common/Game/Dialog/EditRom.vue
+++ b/frontend/src/components/common/Game/Dialog/EditRom.vue
@@ -7,12 +7,14 @@ import storeRoms, { type SimpleRom } from "@/stores/roms";
 import type { Events } from "@/types/emitter";
 import type { Emitter } from "mitt";
 import { inject, ref } from "vue";
+import { useRoute } from "vue-router";
 import { useDisplay, useTheme } from "vuetify";
 
 // Props
 const theme = useTheme();
 const { lgAndUp } = useDisplay();
 const heartbeat = storeHeartbeat();
+const route = useRoute();
 const show = ref(false);
 const rom = ref<UpdateRom>();
 const romsStore = storeRoms();
@@ -87,7 +89,10 @@ async function updateRom() {
         icon: "mdi-check-bold",
         color: "green",
       });
-      romsStore.update(data);
+      romsStore.update(data as SimpleRom);
+      if (route.name == "rom") {
+        romsStore.currentRom = data;
+      }
     })
     .catch((error) => {
       console.log(error);
@@ -176,7 +181,10 @@ function closeDialog() {
                       size="small"
                       class="translucent-dark"
                       @click="
-                        emitter?.emit('showSearchCoverDialog', rom?.name as string)
+                        emitter?.emit(
+                          'showSearchCoverDialog',
+                          rom?.name as string
+                        )
                       "
                     >
                       <v-icon size="large">mdi-image-search-outline</v-icon>
diff --git a/frontend/src/stores/roms.ts b/frontend/src/stores/roms.ts
index 776c385fc..e5f0b39ad 100644
--- a/frontend/src/stores/roms.ts
+++ b/frontend/src/stores/roms.ts
@@ -20,6 +20,7 @@ export default defineStore("roms", {
   state: () => ({
     currentPlatform: null as Platform | null,
     currentCollection: null as Collection | null,
+    currentRom: null as DetailedRom | null,
     allRoms: [] as SimpleRom[],
     _grouped: [] as SimpleRom[],
     _filteredIDs: [] as number[],
@@ -91,6 +92,9 @@ export default defineStore("roms", {
     setCurrentPlatform(platform: Platform) {
       this.currentPlatform = platform;
     },
+    setCurrentRom(rom: DetailedRom) {
+      this.currentRom = rom;
+    },
     setRecentRoms(roms: SimpleRom[]) {
       this.recentRoms = roms;
     },
@@ -109,6 +113,9 @@ export default defineStore("roms", {
       this.allRoms = this.allRoms.map((value) =>
         value.id === rom.id ? rom : value,
       );
+      this.recentRoms = this.recentRoms.map((value) =>
+        value.id === rom.id ? rom : value,
+      );
       this._reorder();
     },
     remove(roms: SimpleRom[]) {
diff --git a/frontend/src/views/GameDetails.vue b/frontend/src/views/GameDetails.vue
index 2a0960f14..83f4136e9 100644
--- a/frontend/src/views/GameDetails.vue
+++ b/frontend/src/views/GameDetails.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import EmptyGame from "@/components/common/EmptyGame.vue";
-import Cover from "@/components/common/Game/Card/Base.vue";
 import ActionBar from "@/components/Details/ActionBar.vue";
 import AdditionalContent from "@/components/Details/AdditionalContent.vue";
 import BackgroundHeader from "@/components/Details/BackgroundHeader.vue";
@@ -11,20 +9,22 @@ import RelatedGames from "@/components/Details/RelatedGames.vue";
 import Saves from "@/components/Details/Saves.vue";
 import States from "@/components/Details/States.vue";
 import TitleInfo from "@/components/Details/Title.vue";
+import EmptyGame from "@/components/common/EmptyGame.vue";
+import Cover from "@/components/common/Game/Card/Base.vue";
 import platformApi from "@/services/api/platform";
 import romApi from "@/services/api/rom";
 import storeDownload from "@/stores/download";
 import type { Platform } from "@/stores/platforms";
-import type { DetailedRom } from "@/stores/roms";
+import storeRoms from "@/stores/roms";
 import type { Events } from "@/types/emitter";
 import type { Emitter } from "mitt";
+import { storeToRefs } from "pinia";
 import { inject, onBeforeMount, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useDisplay } from "vuetify";
 
 // Props
 const route = useRoute();
-const rom = ref<DetailedRom>();
 const platform = ref<Platform>();
 const tab = ref<
   | "details"
@@ -38,13 +38,15 @@ const tab = ref<
 const { smAndDown, mdAndDown, mdAndUp, lgAndUp } = useDisplay();
 const emitter = inject<Emitter<Events>>("emitter");
 const noRomError = ref(false);
+const romsStore = storeRoms();
+const { currentRom } = storeToRefs(romsStore);
 
 // Functions
 async function fetchDetails() {
   await romApi
     .getRom({ romId: parseInt(route.params.rom as string) })
-    .then((response) => {
-      rom.value = response.data;
+    .then(({ data }) => {
+      currentRom.value = data;
     })
     .catch((error) => {
       console.log(error);
@@ -56,7 +58,7 @@ async function fetchDetails() {
 
   if (!noRomError.value) {
     await platformApi
-      .getPlatform(rom.value?.platform_id)
+      .getPlatform(currentRom.value?.platform_id)
       .then((response) => {
         platform.value = response.data;
       })
@@ -71,7 +73,7 @@ async function fetchDetails() {
 
 onBeforeMount(async () => {
   emitter?.emit("showLoadingDialog", { loading: true, scrim: false });
-  if (rom.value) {
+  if (currentRom.value?.id == parseInt(route.params.rom as string)) {
     emitter?.emit("showLoadingDialog", { loading: false, scrim: false });
   } else {
     await fetchDetails();
@@ -89,8 +91,9 @@ watch(
 </script>
 
 <template>
-  <template v-if="rom && platform">
-    <background-header :rom="rom" />
+  <!-- TODO: review layout on certain roms - ej: mortal kombat 2 for gb  -->
+  <template v-if="currentRom && platform">
+    <background-header />
 
     <v-row
       class="px-5"
@@ -107,9 +110,13 @@ watch(
           'cover-mobile': smAndDown,
         }"
       >
-        <cover :pointerOnHover="false" :rom="rom" />
-        <action-bar class="mt-2" :rom="rom" />
-        <related-games v-if="mdAndUp" class="mt-3" :rom="rom" />
+        <cover
+          :key="currentRom.updated_at"
+          :pointerOnHover="false"
+          :rom="currentRom"
+        />
+        <action-bar class="mt-2" :rom="currentRom" />
+        <related-games v-if="mdAndUp" class="mt-3" :rom="currentRom" />
       </v-col>
 
       <v-col
@@ -128,7 +135,7 @@ watch(
             'justify-center': smAndDown,
           }"
         >
-          <title-info :rom="rom" :platform="platform" />
+          <title-info :rom="currentRom" :platform="platform" />
         </div>
         <v-row
           :class="{
@@ -144,8 +151,8 @@ watch(
             <v-tab
               v-if="
                 mdAndDown &&
-                ((rom.igdb_metadata?.expansions ?? []).length > 0 ||
-                  (rom.igdb_metadata?.dlcs ?? []).length > 0)
+                ((currentRom.igdb_metadata?.expansions ?? []).length > 0 ||
+                  (currentRom.igdb_metadata?.dlcs ?? []).length > 0)
               "
               value="additionalcontent"
               rounded="0"
@@ -157,9 +164,9 @@ watch(
             <v-tab
               v-if="
                 smAndDown &&
-                ((rom.igdb_metadata?.remakes ?? []).length > 0 ||
-                  (rom.igdb_metadata?.remasters ?? []).length > 0 ||
-                  (rom.igdb_metadata?.expanded_games ?? []).length > 0)
+                ((currentRom.igdb_metadata?.remakes ?? []).length > 0 ||
+                  (currentRom.igdb_metadata?.remasters ?? []).length > 0 ||
+                  (currentRom.igdb_metadata?.expanded_games ?? []).length > 0)
               "
               value="relatedgames"
               rounded="0"
@@ -173,27 +180,28 @@ watch(
             <v-window disabled v-model="tab" class="py-2">
               <v-window-item value="details">
                 <v-row no-gutters :class="{ 'mx-2': mdAndUp }">
-                  <file-info :rom="rom" :platform="platform" />
-                  <game-info :rom="rom" />
+                  <file-info :rom="currentRom" :platform="platform" />
+                  <game-info :rom="currentRom" />
                 </v-row>
               </v-window-item>
               <v-window-item value="saves">
-                <saves :rom="rom" />
+                <saves :rom="currentRom" />
               </v-window-item>
               <v-window-item value="states">
-                <states :rom="rom" />
+                <states :rom="currentRom" />
               </v-window-item>
               <v-window-item value="notes">
-                <notes :rom="rom" />
+                <notes :rom="currentRom" />
               </v-window-item>
               <v-window-item
                 v-if="
                   mdAndDown &&
-                  (rom.igdb_metadata?.expansions || rom.igdb_metadata?.dlcs)
+                  (currentRom.igdb_metadata?.expansions ||
+                    currentRom.igdb_metadata?.dlcs)
                 "
                 value="additionalcontent"
               >
-                <additional-content :rom="rom" />
+                <additional-content :rom="currentRom" />
               </v-window-item>
               <!-- TODO: user screenshots -->
               <!-- <v-window-item v-if="rom.user_screenshots.lenght > 0" value="screenshots">
@@ -202,13 +210,13 @@ watch(
               <v-window-item
                 v-if="
                   smAndDown &&
-                  (rom.igdb_metadata?.remakes ||
-                    rom.igdb_metadata?.remasters ||
-                    rom.igdb_metadata?.expanded_games)
+                  (currentRom.igdb_metadata?.remakes ||
+                    currentRom.igdb_metadata?.remasters ||
+                    currentRom.igdb_metadata?.expanded_games)
                 "
                 value="relatedgames"
               >
-                <related-games :rom="rom" />
+                <related-games :rom="currentRom" />
               </v-window-item>
             </v-window>
           </v-col>
@@ -217,7 +225,7 @@ watch(
 
       <template v-if="lgAndUp">
         <v-col>
-          <additional-content :rom="rom" />
+          <additional-content :rom="currentRom" />
         </v-col>
       </template>
     </v-row>

From 1a0a06d1e3d16555ba0b27052eacad2f0fb4a9bd Mon Sep 17 00:00:00 2001
From: Zurdi <zurdizurdo25@gmail.com>
Date: Wed, 3 Jul 2024 22:02:38 +0200
Subject: [PATCH 20/33] fixed detail view

---
 .../src/components/common/Game/Dialog/MatchRom.vue   |  7 ++++++-
 frontend/src/views/GameDetails.vue                   | 12 +++++++++---
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/common/Game/Dialog/MatchRom.vue b/frontend/src/components/common/Game/Dialog/MatchRom.vue
index ef6ce6e4c..f17d19c32 100644
--- a/frontend/src/components/common/Game/Dialog/MatchRom.vue
+++ b/frontend/src/components/common/Game/Dialog/MatchRom.vue
@@ -8,6 +8,7 @@ import storeRoms, { type SimpleRom } from "@/stores/roms";
 import type { Events } from "@/types/emitter";
 import type { Emitter } from "mitt";
 import { inject, onBeforeUnmount, ref } from "vue";
+import { useRoute } from "vue-router";
 import { useDisplay, useTheme } from "vuetify";
 
 type MatchedSource = {
@@ -21,6 +22,7 @@ const show = ref(false);
 const rom = ref<SimpleRom | null>(null);
 const romsStore = storeRoms();
 const searching = ref(false);
+const route = useRoute();
 const searchTerm = ref("");
 const theme = useTheme();
 const searchBy = ref("Name");
@@ -169,7 +171,10 @@ async function updateRom(selectedRom: SearchRomSchema) {
         icon: "mdi-check-bold",
         color: "green",
       });
-      romsStore.update(data);
+      romsStore.update(data as SimpleRom);
+      if (route.name == "rom") {
+        romsStore.currentRom = data;
+      }
     })
     .catch((error) => {
       emitter?.emit("snackbarShow", {
diff --git a/frontend/src/views/GameDetails.vue b/frontend/src/views/GameDetails.vue
index 83f4136e9..cd25045ac 100644
--- a/frontend/src/views/GameDetails.vue
+++ b/frontend/src/views/GameDetails.vue
@@ -20,7 +20,7 @@ import type { Events } from "@/types/emitter";
 import type { Emitter } from "mitt";
 import { storeToRefs } from "pinia";
 import { inject, onBeforeMount, ref, watch } from "vue";
-import { useRoute } from "vue-router";
+import { onBeforeRouteLeave, useRoute } from "vue-router";
 import { useDisplay } from "vuetify";
 
 // Props
@@ -82,6 +82,10 @@ onBeforeMount(async () => {
   downloadStore.clear();
 });
 
+onBeforeRouteLeave(() => {
+  currentRom.value = null;
+});
+
 watch(
   () => route.fullPath,
   async () => {
@@ -180,8 +184,10 @@ watch(
             <v-window disabled v-model="tab" class="py-2">
               <v-window-item value="details">
                 <v-row no-gutters :class="{ 'mx-2': mdAndUp }">
-                  <file-info :rom="currentRom" :platform="platform" />
-                  <game-info :rom="currentRom" />
+                  <v-col>
+                    <file-info :rom="currentRom" :platform="platform" />
+                    <game-info :rom="currentRom" />
+                  </v-col>
                 </v-row>
               </v-window-item>
               <v-window-item value="saves">

From 7570c3fdf39850b63efdffb7e1fd79a3924610cf Mon Sep 17 00:00:00 2001
From: Zurdi <zurdizurdo25@gmail.com>
Date: Wed, 3 Jul 2024 23:34:16 +0200
Subject: [PATCH 21/33] added reactivity tu current user

---
 .../src/components/Administration/Users/Dialog/EditUser.vue | 5 +++++
 frontend/src/components/Administration/Users/Table.vue      | 4 +++-
 frontend/src/components/common/Navigation/UserBtn.vue       | 6 ++++--
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Administration/Users/Dialog/EditUser.vue b/frontend/src/components/Administration/Users/Dialog/EditUser.vue
index f9868a59f..a61ee6b59 100644
--- a/frontend/src/components/Administration/Users/Dialog/EditUser.vue
+++ b/frontend/src/components/Administration/Users/Dialog/EditUser.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import RDialog from "@/components/common/RDialog.vue";
 import userApi from "@/services/api/user";
+import storeAuth from "@/stores/auth";
 import storeUsers from "@/stores/users";
 import type { Events, UserItem } from "@/types/emitter";
 import { defaultAvatarPath } from "@/utils";
@@ -12,6 +13,7 @@ import { useDisplay } from "vuetify";
 const user = ref<UserItem | null>(null);
 const { lgAndUp } = useDisplay();
 const show = ref(false);
+const auth = storeAuth();
 const usersStore = storeUsers();
 const imagePreviewUrl = ref<string | undefined>("");
 const emitter = inject<Emitter<Events>>("emitter");
@@ -52,6 +54,9 @@ function editUser() {
         timeout: 5000,
       });
       usersStore.update(data);
+      if (data.id == auth.user?.id) {
+        auth.setUser(data);
+      }
     })
     .catch(({ response, message }) => {
       emitter?.emit("snackbarShow", {
diff --git a/frontend/src/components/Administration/Users/Table.vue b/frontend/src/components/Administration/Users/Table.vue
index 9b9ea1bfd..ada898542 100644
--- a/frontend/src/components/Administration/Users/Table.vue
+++ b/frontend/src/components/Administration/Users/Table.vue
@@ -6,6 +6,7 @@ import storeUsers, { type User } from "@/stores/users";
 import type { Events } from "@/types/emitter";
 import { defaultAvatarPath, formatTimestamp } from "@/utils";
 import type { Emitter } from "mitt";
+import { storeToRefs } from "pinia";
 import { inject, onMounted, ref } from "vue";
 import { useDisplay } from "vuetify";
 
@@ -14,6 +15,7 @@ const userSearch = ref("");
 const { xs } = useDisplay();
 const emitter = inject<Emitter<Events>>("emitter");
 const usersStore = storeUsers();
+const { all } = storeToRefs(usersStore);
 const auth = storeAuth();
 const HEADERS = [
   {
@@ -106,7 +108,7 @@ onMounted(() => {
         :items-per-page-options="PER_PAGE_OPTIONS"
         :search="userSearch"
         :headers="HEADERS"
-        :items="usersStore.all"
+        :items="all"
         :sort-by="[{ key: 'username', order: 'asc' }]"
         fixed-header
         fixed-footer
diff --git a/frontend/src/components/common/Navigation/UserBtn.vue b/frontend/src/components/common/Navigation/UserBtn.vue
index c4765a0f4..c5b98fda1 100644
--- a/frontend/src/components/common/Navigation/UserBtn.vue
+++ b/frontend/src/components/common/Navigation/UserBtn.vue
@@ -2,10 +2,12 @@
 import storeAuth from "@/stores/auth";
 import storeNavigation from "@/stores/navigation";
 import { defaultAvatarPath } from "@/utils";
+import { storeToRefs } from "pinia";
 
 // Props
 const navigationStore = storeNavigation();
 const auth = storeAuth();
+const { user } = storeToRefs(auth);
 </script>
 <template>
   <v-hover v-slot="{ isHovering, props: hoverProps }">
@@ -18,8 +20,8 @@ const auth = storeAuth();
     >
       <v-img
         :src="
-          auth.user?.avatar_path
-            ? `/assets/romm/assets/${auth.user?.avatar_path}?ts=${auth.user?.updated_at}`
+          user?.avatar_path
+            ? `/assets/romm/assets/${user?.avatar_path}?ts=${user?.updated_at}`
             : defaultAvatarPath
         "
       />

From 9a4283805c14dd37e99407fd11ebcefa45b7a3ea Mon Sep 17 00:00:00 2001
From: Zurdi <zurdizurdo25@gmail.com>
Date: Wed, 3 Jul 2024 23:42:59 +0200
Subject: [PATCH 22/33] check steamgriddb api key on endpoint

---
 backend/endpoints/search.py | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/backend/endpoints/search.py b/backend/endpoints/search.py
index 5cee25c3a..a2c8d624b 100644
--- a/backend/endpoints/search.py
+++ b/backend/endpoints/search.py
@@ -6,6 +6,7 @@
 from handler.metadata import meta_igdb_handler, meta_moby_handler, meta_sgdb_handler
 from handler.metadata.igdb_handler import IGDB_API_ENABLED
 from handler.metadata.moby_handler import MOBY_API_ENABLED
+from handler.metadata.sgdb_handler import STEAMGRIDDB_API_ENABLED
 from handler.scan_handler import _get_main_platform_igdb_id
 from logger.logger import log
 
@@ -115,4 +116,11 @@ async def search_cover(
     search_term: str | None = None,
 ) -> list[SearchCoverSchema]:
 
+    if not STEAMGRIDDB_API_ENABLED:
+        log.error("Search error: No SteamGridDB enabled")
+        raise HTTPException(
+            status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
+            detail="No SteamGridDB enabled",
+        )
+
     return meta_sgdb_handler.get_details(search_term)

From 5126c56ba9a9e1f34576f19bbd3ce0ae5045d5aa Mon Sep 17 00:00:00 2001
From: Zurdi <zurdizurdo25@gmail.com>
Date: Thu, 4 Jul 2024 00:05:37 +0200
Subject: [PATCH 23/33] get collections for detailed rom info

---
 backend/endpoints/responses/rom.py       |  5 +++++
 backend/handler/database/roms_handler.py | 14 ++++++++++++++
 backend/models/rom.py                    |  6 ++++++
 3 files changed, 25 insertions(+)

diff --git a/backend/endpoints/responses/rom.py b/backend/endpoints/responses/rom.py
index 9f709a687..4bd164007 100644
--- a/backend/endpoints/responses/rom.py
+++ b/backend/endpoints/responses/rom.py
@@ -5,6 +5,7 @@
 from typing import NotRequired, get_type_hints
 
 from endpoints.responses.assets import SaveSchema, ScreenshotSchema, StateSchema
+from endpoints.responses.collection import CollectionSchema
 from fastapi import Request
 from fastapi.responses import StreamingResponse
 from handler.metadata.igdb_handler import IGDBMetadata
@@ -147,6 +148,7 @@ class DetailedRomSchema(RomSchema):
     user_states: list[StateSchema] = Field(default_factory=list)
     user_screenshots: list[ScreenshotSchema] = Field(default_factory=list)
     user_notes: list[UserNotesSchema] = Field(default_factory=list)
+    collections: list[CollectionSchema] = Field(default_factory=list)
 
     @classmethod
     def from_orm_with_request(cls, db_rom: Rom, request: Request) -> DetailedRomSchema:
@@ -169,6 +171,9 @@ def from_orm_with_request(cls, db_rom: Rom, request: Request) -> DetailedRomSche
             for s in db_rom.screenshots
             if s.user_id == user_id
         ]
+        rom.collections = [
+            CollectionSchema.model_validate(c) for c in db_rom.get_collections()
+        ]
 
         return rom
 
diff --git a/backend/handler/database/roms_handler.py b/backend/handler/database/roms_handler.py
index 5fa17e399..ad5b6e862 100644
--- a/backend/handler/database/roms_handler.py
+++ b/backend/handler/database/roms_handler.py
@@ -179,6 +179,20 @@ def get_sibling_roms(
             )
         ).all()
 
+    @begin_session
+    def get_rom_collections(
+        self, rom_id: int, session: Session = None
+    ) -> list[Collection]:
+        return (
+            session.scalars(
+                select(Collection)
+                .filter(Collection.roms.contains([rom_id]))
+                .order_by(Collection.name.asc())
+            )
+            .unique()
+            .all()
+        )
+
     @begin_session
     def update_rom(self, id: int, data: dict, session: Session = None) -> Rom:
         return session.execute(
diff --git a/backend/models/rom.py b/backend/models/rom.py
index f01f74d5d..e100c1e9f 100644
--- a/backend/models/rom.py
+++ b/backend/models/rom.py
@@ -11,6 +11,7 @@
 
 if TYPE_CHECKING:
     from models.assets import Save, Screenshot, State
+    from models.collection import Collection
     from models.platform import Platform
     from models.user import User
 
@@ -103,6 +104,11 @@ def get_sibling_roms(self) -> list[Rom]:
 
         return db_rom_handler.get_sibling_roms(self)
 
+    def get_collections(self) -> list[Collection]:
+        from handler.database import db_rom_handler
+
+        return db_rom_handler.get_rom_collections(self.id)
+
     # Metadata fields
     @property
     def alternative_names(self) -> list[str]:

From f2f202de9ee3ddbf2dfdadc5c34be6cd19462be4 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Thu, 4 Jul 2024 00:51:17 +0200
Subject: [PATCH 24/33] add user collections to details

---
 backend/endpoints/responses/rom.py            |  6 ++---
 backend/handler/database/roms_handler.py      |  8 +++++--
 backend/models/rom.py                         |  4 ++--
 .../__generated__/models/DetailedRomSchema.ts |  2 ++
 .../src/components/Details/Info/FileInfo.vue  | 24 +++++++++++++++++++
 .../src/components/Details/Info/GameInfo.vue  |  2 +-
 6 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/backend/endpoints/responses/rom.py b/backend/endpoints/responses/rom.py
index 4bd164007..81a35463b 100644
--- a/backend/endpoints/responses/rom.py
+++ b/backend/endpoints/responses/rom.py
@@ -148,7 +148,7 @@ class DetailedRomSchema(RomSchema):
     user_states: list[StateSchema] = Field(default_factory=list)
     user_screenshots: list[ScreenshotSchema] = Field(default_factory=list)
     user_notes: list[UserNotesSchema] = Field(default_factory=list)
-    collections: list[CollectionSchema] = Field(default_factory=list)
+    user_collections: list[CollectionSchema] = Field(default_factory=list)
 
     @classmethod
     def from_orm_with_request(cls, db_rom: Rom, request: Request) -> DetailedRomSchema:
@@ -171,8 +171,8 @@ def from_orm_with_request(cls, db_rom: Rom, request: Request) -> DetailedRomSche
             for s in db_rom.screenshots
             if s.user_id == user_id
         ]
-        rom.collections = [
-            CollectionSchema.model_validate(c) for c in db_rom.get_collections()
+        rom.user_collections = [
+            CollectionSchema.model_validate(c) for c in db_rom.get_collections(user_id)
         ]
 
         return rom
diff --git a/backend/handler/database/roms_handler.py b/backend/handler/database/roms_handler.py
index ad5b6e862..44897ecc5 100644
--- a/backend/handler/database/roms_handler.py
+++ b/backend/handler/database/roms_handler.py
@@ -181,12 +181,16 @@ def get_sibling_roms(
 
     @begin_session
     def get_rom_collections(
-        self, rom_id: int, session: Session = None
+        self, rom: Rom, user_id: int, session: Session = None
     ) -> list[Collection]:
+
         return (
             session.scalars(
                 select(Collection)
-                .filter(Collection.roms.contains([rom_id]))
+                .filter(
+                    func.json_contains(Collection.roms, f"{rom.id}"),
+                    Collection.user_id == user_id,
+                )
                 .order_by(Collection.name.asc())
             )
             .unique()
diff --git a/backend/models/rom.py b/backend/models/rom.py
index e100c1e9f..cd34df019 100644
--- a/backend/models/rom.py
+++ b/backend/models/rom.py
@@ -104,10 +104,10 @@ def get_sibling_roms(self) -> list[Rom]:
 
         return db_rom_handler.get_sibling_roms(self)
 
-    def get_collections(self) -> list[Collection]:
+    def get_collections(self, user_id) -> list[Collection]:
         from handler.database import db_rom_handler
 
-        return db_rom_handler.get_rom_collections(self.id)
+        return db_rom_handler.get_rom_collections(self, user_id)
 
     # Metadata fields
     @property
diff --git a/frontend/src/__generated__/models/DetailedRomSchema.ts b/frontend/src/__generated__/models/DetailedRomSchema.ts
index 4df6c7079..9dad0491a 100644
--- a/frontend/src/__generated__/models/DetailedRomSchema.ts
+++ b/frontend/src/__generated__/models/DetailedRomSchema.ts
@@ -3,6 +3,7 @@
 /* tslint:disable */
 /* eslint-disable */
 
+import type { CollectionSchema } from "./CollectionSchema";
 import type { RomIGDBMetadata } from "./RomIGDBMetadata";
 import type { RomMobyMetadata } from "./RomMobyMetadata";
 import type { RomSchema } from "./RomSchema";
@@ -58,5 +59,6 @@ export type DetailedRomSchema = {
   user_states?: Array<StateSchema>;
   user_screenshots?: Array<ScreenshotSchema>;
   user_notes?: Array<UserNotesSchema>;
+  user_collections?: Array<CollectionSchema>;
   readonly sort_comparator: string;
 };
diff --git a/frontend/src/components/Details/Info/FileInfo.vue b/frontend/src/components/Details/Info/FileInfo.vue
index 620c657e2..7ed3bb50c 100644
--- a/frontend/src/components/Details/Info/FileInfo.vue
+++ b/frontend/src/components/Details/Info/FileInfo.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import VersionSwitcher from "@/components/Details/VersionSwitcher.vue";
+import RAvatar from "@/components/common/Collection/RAvatar.vue";
 import romApi from "@/services/api/rom";
 import storeAuth from "@/stores/auth";
 import storeDownload from "@/stores/download";
@@ -150,6 +151,29 @@ watch(
           </v-chip>
         </v-col>
       </v-row>
+      <v-row
+        v-if="rom.user_collections && rom.user_collections?.length > 0"
+        no-gutters
+        class="align-center my-3"
+      >
+        <v-col cols="3" xl="2">
+          <span>Collections</span>
+        </v-col>
+        <v-col>
+          <v-chip
+            v-for="collection in rom.user_collections"
+            :to="{ name: 'collection', params: { collection: collection.id } }"
+            size="large"
+            class="mr-1 mt-1"
+            label
+          >
+            <template #prepend>
+              <r-avatar :size="25" :collection="collection" />
+            </template>
+            <span class="ml-2">{{ collection.name }}</span>
+          </v-chip>
+        </v-col>
+      </v-row>
     </v-col>
   </v-row>
 </template>
diff --git a/frontend/src/components/Details/Info/GameInfo.vue b/frontend/src/components/Details/Info/GameInfo.vue
index de5bc6029..7d5cd613f 100644
--- a/frontend/src/components/Details/Info/GameInfo.vue
+++ b/frontend/src/components/Details/Info/GameInfo.vue
@@ -40,7 +40,7 @@ const show = ref(false);
         <v-divider class="mx-2 my-4" />
         <v-row no-gutters>
           <v-col class="text-caption">
-            <p v-text="rom.summary" />
+            <span>{{ rom.summary }}</span>
           </v-col>
         </v-row>
       </template>

From 0d5620edcfd5182d0ac8f0dd92e3321ad5a6bd42 Mon Sep 17 00:00:00 2001
From: Zurdi <34356590+zurdi15@users.noreply.github.com>
Date: Thu, 4 Jul 2024 18:56:03 +0200
Subject: [PATCH 25/33] Update backend/endpoints/collections.py

Co-authored-by: Georges-Antoine Assi <3247106+gantoine@users.noreply.github.com>
---
 backend/endpoints/collections.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/backend/endpoints/collections.py b/backend/endpoints/collections.py
index 787de28c1..94bd0d557 100644
--- a/backend/endpoints/collections.py
+++ b/backend/endpoints/collections.py
@@ -42,7 +42,7 @@ async def add_collection(
         "is_public": data.get("is_public", False),
         "user_id": request.user.id,
     }
-    collection_db = db_collection_handler.get_collection_by_name(
+    db_collection = db_collection_handler.get_collection_by_name(
         cleaned_data["name"], request.user.id
     )
 

From 124e1e781b9d622a8cac0385f925c9b37cb8e8dd Mon Sep 17 00:00:00 2001
From: Zurdi <34356590+zurdi15@users.noreply.github.com>
Date: Thu, 4 Jul 2024 18:56:52 +0200
Subject: [PATCH 26/33] Update backend/endpoints/collections.py

Co-authored-by: Georges-Antoine Assi <3247106+gantoine@users.noreply.github.com>
---
 backend/endpoints/collections.py | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/backend/endpoints/collections.py b/backend/endpoints/collections.py
index 94bd0d557..62eb99c9f 100644
--- a/backend/endpoints/collections.py
+++ b/backend/endpoints/collections.py
@@ -148,10 +148,9 @@ async def update_collection(
         raise CollectionNotFoundInDatabaseException(id)
 
     try:
-        try:
-            roms = json.loads(data["roms"])
-        except json.JSONDecodeError as e:
-            raise ValueError("Invalid list for roms field in update collection") from e
+        roms = json.loads(data["roms"])
+    except json.JSONDecodeError as e:
+        raise ValueError("Invalid list for roms field in update collection") from e
     except KeyError:
         roms = collection.roms
 

From 3ac40e1ccafb3e8f4bfd1d9f3200e28c5fbd1867 Mon Sep 17 00:00:00 2001
From: Zurdi <34356590+zurdi15@users.noreply.github.com>
Date: Thu, 4 Jul 2024 18:58:12 +0200
Subject: [PATCH 27/33] Update frontend/src/components/common/SearchCover.vue

Co-authored-by: Georges-Antoine Assi <3247106+gantoine@users.noreply.github.com>
---
 frontend/src/components/common/SearchCover.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/common/SearchCover.vue b/frontend/src/components/common/SearchCover.vue
index 5ff2787d1..2a8eabfb3 100644
--- a/frontend/src/components/common/SearchCover.vue
+++ b/frontend/src/components/common/SearchCover.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { SearchCoverSchema } from "@/__generated__";
 import RDialog from "@/components/common/RDialog.vue";
-import steamgriddb from "@/services/api/steamgriddb";
+import sgdbApi from "@/services/api/sgdb";
 import type { Events } from "@/types/emitter";
 import type { Emitter } from "mitt";
 import { inject, onBeforeUnmount, ref } from "vue";

From febc579fb89f29c4c7ee088479261926169a2658 Mon Sep 17 00:00:00 2001
From: Zurdi <zurdizurdo25@gmail.com>
Date: Thu, 4 Jul 2024 19:05:04 +0200
Subject: [PATCH 28/33] changes from PR comments

---
 .../components/Administration/Users/Table.vue |  6 ++---
 .../common/Collection/Dialog/AddRoms.vue      |  2 +-
 .../src/layouts/Dashboard/Collections.vue     |  2 +-
 frontend/src/stores/collections.ts            | 24 ++++++++++---------
 frontend/src/stores/users.ts                  | 14 +++++------
 frontend/src/views/Dashboard.vue              |  4 ++--
 6 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/frontend/src/components/Administration/Users/Table.vue b/frontend/src/components/Administration/Users/Table.vue
index ada898542..cc9f6ada6 100644
--- a/frontend/src/components/Administration/Users/Table.vue
+++ b/frontend/src/components/Administration/Users/Table.vue
@@ -15,7 +15,7 @@ const userSearch = ref("");
 const { xs } = useDisplay();
 const emitter = inject<Emitter<Events>>("emitter");
 const usersStore = storeUsers();
-const { all } = storeToRefs(usersStore);
+const { allUSers } = storeToRefs(usersStore);
 const auth = storeAuth();
 const HEADERS = [
   {
@@ -60,7 +60,7 @@ emitter?.on("updateDataTablePages", updateDataTablePages);
 
 // Functions
 function updateDataTablePages() {
-  pageCount.value = Math.ceil(usersStore.all.length / usersPerPage.value);
+  pageCount.value = Math.ceil(usersStore.allUSers.length / usersPerPage.value);
 }
 
 function disableUser(user: User) {
@@ -108,7 +108,7 @@ onMounted(() => {
         :items-per-page-options="PER_PAGE_OPTIONS"
         :search="userSearch"
         :headers="HEADERS"
-        :items="all"
+        :items="allUSers"
         :sort-by="[{ key: 'username', order: 'asc' }]"
         fixed-header
         fixed-footer
diff --git a/frontend/src/components/common/Collection/Dialog/AddRoms.vue b/frontend/src/components/common/Collection/Dialog/AddRoms.vue
index 303def397..a51857703 100644
--- a/frontend/src/components/common/Collection/Dialog/AddRoms.vue
+++ b/frontend/src/components/common/Collection/Dialog/AddRoms.vue
@@ -104,7 +104,7 @@ function closeDialog() {
         density="default"
         label="Collection"
         item-title="name"
-        :items="collectionsStore.all"
+        :items="collectionsStore.allCollections"
         variant="outlined"
         hide-details
         return-object
diff --git a/frontend/src/layouts/Dashboard/Collections.vue b/frontend/src/layouts/Dashboard/Collections.vue
index a7a553cad..eae3beb27 100644
--- a/frontend/src/layouts/Dashboard/Collections.vue
+++ b/frontend/src/layouts/Dashboard/Collections.vue
@@ -12,7 +12,7 @@ const collections = storeCollections();
     <template #content>
       <v-row no-gutters>
         <v-col
-          v-for="collection in collections.all"
+          v-for="collection in collections.allCollections"
           :key="collection.name"
           class="pa-1"
           :cols="views[0]['size-cols']"
diff --git a/frontend/src/stores/collections.ts b/frontend/src/stores/collections.ts
index a54dcd860..0044b39b7 100644
--- a/frontend/src/stores/collections.ts
+++ b/frontend/src/stores/collections.ts
@@ -7,46 +7,48 @@ export type Collection = CollectionSchema;
 export default defineStore("collections", {
   state: () => {
     return {
-      all: [] as Collection[],
+      allCollections: [] as Collection[],
       searchText: "" as string,
     };
   },
   getters: {
-    filteredCollections: ({ all, searchText }) =>
-      all.filter((p) =>
+    filteredCollections: ({ allCollections, searchText }) =>
+      allCollections.filter((p) =>
         p.name.toLowerCase().includes(searchText.toLowerCase()),
       ),
   },
   actions: {
     _reorder() {
-      this.all = this.all.sort((a, b) => {
+      this.allCollections = this.allCollections.sort((a, b) => {
         return a.name.localeCompare(b.name);
       });
-      this.all = uniqBy(this.all, "id");
+      this.allCollections = uniqBy(this.allCollections, "id");
     },
     set(collections: Collection[]) {
-      this.all = collections;
+      this.allCollections = collections;
     },
     add(collection: Collection) {
-      this.all.push(collection);
+      this.allCollections.push(collection);
       this._reorder();
     },
     update(collection: Collection) {
-      this.all = this.all.map((value) =>
+      this.allCollections = this.allCollections.map((value) =>
         value.id === collection.id ? collection : value,
       );
       this._reorder();
     },
     exists(collection: Collection) {
-      return this.all.filter((p) => p.name == collection.name).length > 0;
+      return (
+        this.allCollections.filter((p) => p.name == collection.name).length > 0
+      );
     },
     remove(collection: Collection) {
-      this.all = this.all.filter((p) => {
+      this.allCollections = this.allCollections.filter((p) => {
         return p.name !== collection.name;
       });
     },
     get(collectionId: number) {
-      return this.all.find((p) => p.id === collectionId);
+      return this.allCollections.find((p) => p.id === collectionId);
     },
   },
 });
diff --git a/frontend/src/stores/users.ts b/frontend/src/stores/users.ts
index e21793388..601aa97d3 100644
--- a/frontend/src/stores/users.ts
+++ b/frontend/src/stores/users.ts
@@ -5,22 +5,22 @@ export type User = UserSchema;
 
 export default defineStore("users", {
   state: () => ({
-    all: [] as User[],
+    allUSers: [] as User[],
   }),
 
   getters: {
-    admins: (state) => state.all.filter((user) => user.role === "admin"),
+    admins: (state) => state.allUSers.filter((user) => user.role === "admin"),
   },
 
   actions: {
     set(users: User[]) {
-      this.all = users;
+      this.allUSers = users;
     },
     add(user: User) {
-      this.all = this.all.concat(user);
+      this.allUSers = this.allUSers.concat(user);
     },
     update(user: User) {
-      this.all = this.all.map((value) => {
+      this.allUSers = this.allUSers.map((value) => {
         if (value.id === user.id) {
           return user;
         }
@@ -28,12 +28,12 @@ export default defineStore("users", {
       });
     },
     remove(userId: number) {
-      this.all = this.all.filter((value) => {
+      this.allUSers = this.allUSers.filter((value) => {
         return value.id !== userId;
       });
     },
     reset() {
-      this.all = [];
+      this.allUSers = [];
     },
   },
 });
diff --git a/frontend/src/views/Dashboard.vue b/frontend/src/views/Dashboard.vue
index 3d4c4434e..ad0814bac 100644
--- a/frontend/src/views/Dashboard.vue
+++ b/frontend/src/views/Dashboard.vue
@@ -16,7 +16,7 @@ const { recentRoms } = storeToRefs(romsStore);
 const platforms = storePlatforms();
 const { filledPlatforms } = storeToRefs(platforms);
 const collections = storeCollections();
-const { all } = storeToRefs(collections);
+const { allCollections } = storeToRefs(collections);
 
 // Functions
 onMounted(async () => {
@@ -35,5 +35,5 @@ onMounted(async () => {
   <stats />
   <recently-added v-if="recentRoms.length > 0" />
   <platforms v-if="filledPlatforms.length > 0" />
-  <collections v-if="all.length > 0" />
+  <collections v-if="allCollections.length > 0" />
 </template>

From 0bd4c6f704fe1ea15d98d0c013e8aeb5873fd45a Mon Sep 17 00:00:00 2001
From: Zurdi <zurdizurdo25@gmail.com>
Date: Thu, 4 Jul 2024 19:09:01 +0200
Subject: [PATCH 29/33] fixed from PR comment

---
 backend/endpoints/collections.py                      | 2 +-
 frontend/src/components/common/SearchCover.vue        | 2 +-
 frontend/src/services/api/{steamgriddb.ts => sgdb.ts} | 0
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename frontend/src/services/api/{steamgriddb.ts => sgdb.ts} (100%)

diff --git a/backend/endpoints/collections.py b/backend/endpoints/collections.py
index 62eb99c9f..de8ca2dd6 100644
--- a/backend/endpoints/collections.py
+++ b/backend/endpoints/collections.py
@@ -46,7 +46,7 @@ async def add_collection(
         cleaned_data["name"], request.user.id
     )
 
-    if collection_db:
+    if db_collection:
         raise CollectionAlreadyExistsException(cleaned_data["name"])
 
     _added_collection = db_collection_handler.add_collection(Collection(**cleaned_data))
diff --git a/frontend/src/components/common/SearchCover.vue b/frontend/src/components/common/SearchCover.vue
index 2a8eabfb3..c8c655ca3 100644
--- a/frontend/src/components/common/SearchCover.vue
+++ b/frontend/src/components/common/SearchCover.vue
@@ -33,7 +33,7 @@ async function searchCovers() {
 
   if (!searching.value) {
     searching.value = true;
-    await steamgriddb
+    await sgdbApi
       .searchCover({
         searchTerm: searchTerm.value,
       })
diff --git a/frontend/src/services/api/steamgriddb.ts b/frontend/src/services/api/sgdb.ts
similarity index 100%
rename from frontend/src/services/api/steamgriddb.ts
rename to frontend/src/services/api/sgdb.ts

From 7fafef085a6f16dc9625979616ac3af8b7729bab Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Fri, 5 Jul 2024 00:04:14 +0200
Subject: [PATCH 30/33] fixed add to collection for non-admin users

---
 frontend/src/components/Details/ActionBar.vue |  8 +-
 .../src/components/common/Game/AdminMenu.vue  | 82 ++++++++++---------
 .../components/common/Game/Card/ActionBar.vue |  3 -
 frontend/src/components/common/Game/Table.vue |  8 +-
 4 files changed, 46 insertions(+), 55 deletions(-)

diff --git a/frontend/src/components/Details/ActionBar.vue b/frontend/src/components/Details/ActionBar.vue
index f210dcf08..5c9140919 100644
--- a/frontend/src/components/Details/ActionBar.vue
+++ b/frontend/src/components/Details/ActionBar.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import AdminMenu from "@/components/common/Game/AdminMenu.vue";
 import romApi from "@/services/api/rom";
-import storeAuth from "@/stores/auth";
 import storeDownload from "@/stores/download";
 import type { DetailedRom } from "@/stores/roms";
 import type { Events } from "@/types/emitter";
@@ -13,7 +12,6 @@ import { inject, ref } from "vue";
 const props = defineProps<{ rom: DetailedRom }>();
 const downloadStore = storeDownload();
 const emitter = inject<Emitter<Events>>("emitter");
-const auth = storeAuth();
 const playInfoIcon = ref("mdi-play");
 const emulationSupported = isEmulationSupported(props.rom.platform_slug);
 
@@ -88,11 +86,7 @@ async function copyDownloadLink(rom: DetailedRom) {
     </v-btn>
     <v-menu location="bottom">
       <template #activator="{ props: menuProps }">
-        <v-btn
-          v-if="auth.scopes.includes('roms.write')"
-          class="flex-grow-1"
-          v-bind="menuProps"
-        >
+        <v-btn class="flex-grow-1" v-bind="menuProps">
           <v-icon icon="mdi-dots-vertical" size="large" />
         </v-btn>
       </template>
diff --git a/frontend/src/components/common/Game/AdminMenu.vue b/frontend/src/components/common/Game/AdminMenu.vue
index d1d86efc9..f9c2e160d 100644
--- a/frontend/src/components/common/Game/AdminMenu.vue
+++ b/frontend/src/components/common/Game/AdminMenu.vue
@@ -1,42 +1,46 @@
 <script setup lang="ts">
-import { inject } from "vue";
-import type { Emitter } from "mitt";
-import type { Events } from "@/types/emitter";
-import type { SimpleRom } from "@/stores/roms";
+import storeAuth from "@/stores/auth";
 import storeHeartbeat from "@/stores/heartbeat";
+import type { SimpleRom } from "@/stores/roms";
+import type { Events } from "@/types/emitter";
+import type { Emitter } from "mitt";
+import { inject } from "vue";
 
 defineProps<{ rom: SimpleRom }>();
 const emitter = inject<Emitter<Events>>("emitter");
 const heartbeat = storeHeartbeat();
+const auth = storeAuth();
 </script>
 
 <template>
   <v-list rounded="0" class="pa-0">
-    <v-list-item
-      :disabled="!heartbeat.value.ANY_SOURCE_ENABLED"
-      class="py-4 pr-5"
-      @click="emitter?.emit('showMatchRomDialog', rom)"
-    >
-      <v-list-item-title class="d-flex">
-        <v-icon icon="mdi-search-web" class="mr-2" />Manual match
-      </v-list-item-title>
-      <v-list-item-subtitle>
-        {{
-          !heartbeat.value.ANY_SOURCE_ENABLED
-            ? "No metadata source enabled"
-            : ""
-        }}
-      </v-list-item-subtitle>
-    </v-list-item>
-    <v-list-item
-      class="py-4 pr-5"
-      @click="emitter?.emit('showEditRomDialog', { ...rom })"
-    >
-      <v-list-item-title class="d-flex">
-        <v-icon icon="mdi-pencil-box" class="mr-2" />Edit
-      </v-list-item-title>
-    </v-list-item>
-    <v-divider />
+    <template v-if="auth.scopes.includes('roms.write')">
+      <v-list-item
+        :disabled="!heartbeat.value.ANY_SOURCE_ENABLED"
+        class="py-4 pr-5"
+        @click="emitter?.emit('showMatchRomDialog', rom)"
+      >
+        <v-list-item-title class="d-flex">
+          <v-icon icon="mdi-search-web" class="mr-2" />Manual match
+        </v-list-item-title>
+        <v-list-item-subtitle>
+          {{
+            !heartbeat.value.ANY_SOURCE_ENABLED
+              ? "No metadata source enabled"
+              : ""
+          }}
+        </v-list-item-subtitle>
+      </v-list-item>
+      <v-list-item
+        class="py-4 pr-5"
+        @click="emitter?.emit('showEditRomDialog', { ...rom })"
+      >
+        <v-list-item-title class="d-flex">
+          <v-icon icon="mdi-pencil-box" class="mr-2" />Edit
+        </v-list-item-title>
+      </v-list-item>
+      <v-divider />
+    </template>
     <v-list-item
       class="py-4 pr-5"
       @click="emitter?.emit('showAddToCollectionDialog', [{ ...rom }])"
@@ -46,14 +50,16 @@ const heartbeat = storeHeartbeat();
         collection
       </v-list-item-title>
     </v-list-item>
-    <v-divider />
-    <v-list-item
-      class="py-4 pr-5 text-romm-red"
-      @click="emitter?.emit('showDeleteRomDialog', [rom])"
-    >
-      <v-list-item-title class="d-flex">
-        <v-icon icon="mdi-delete" class="mr-2" />Delete
-      </v-list-item-title>
-    </v-list-item>
+    <template v-if="auth.scopes.includes('roms.write')">
+      <v-divider />
+      <v-list-item
+        class="py-4 pr-5 text-romm-red"
+        @click="emitter?.emit('showDeleteRomDialog', [rom])"
+      >
+        <v-list-item-title class="d-flex">
+          <v-icon icon="mdi-delete" class="mr-2" />Delete
+        </v-list-item-title>
+      </v-list-item>
+    </template>
   </v-list>
 </template>
diff --git a/frontend/src/components/common/Game/Card/ActionBar.vue b/frontend/src/components/common/Game/Card/ActionBar.vue
index c3b8e9720..618f54621 100644
--- a/frontend/src/components/common/Game/Card/ActionBar.vue
+++ b/frontend/src/components/common/Game/Card/ActionBar.vue
@@ -1,14 +1,12 @@
 <script setup lang="ts">
 import AdminMenu from "@/components/common/Game/AdminMenu.vue";
 import romApi from "@/services/api/rom";
-import storeAuth from "@/stores/auth";
 import storeDownload from "@/stores/download";
 import type { SimpleRom } from "@/stores/roms";
 import { isEmulationSupported } from "@/utils";
 
 // Props
 defineProps<{ rom: SimpleRom }>();
-const auth = storeAuth();
 const downloadStore = storeDownload();
 </script>
 
@@ -44,7 +42,6 @@ const downloadStore = storeDownload();
     <v-menu location="bottom">
       <template #activator="{ props }">
         <v-btn
-          v-if="auth.scopes.includes('roms.write')"
           class="action-bar-btn-small"
           size="x-small"
           v-bind="props"
diff --git a/frontend/src/components/common/Game/Table.vue b/frontend/src/components/common/Game/Table.vue
index bcb98c33f..b0529dcd3 100644
--- a/frontend/src/components/common/Game/Table.vue
+++ b/frontend/src/components/common/Game/Table.vue
@@ -2,7 +2,6 @@
 import AdminMenu from "@/components/common/Game/AdminMenu.vue";
 import RAvatar from "@/components/common/Game/RAvatar.vue";
 import romApi from "@/services/api/rom";
-import storeAuth from "@/stores/auth";
 import storeDownload from "@/stores/download";
 import storeRoms, { type SimpleRom } from "@/stores/roms";
 import type { Events } from "@/types/emitter";
@@ -30,7 +29,6 @@ const router = useRouter();
 const route = useRoute();
 const downloadStore = storeDownload();
 const romsStore = storeRoms();
-const auth = storeAuth();
 const page = ref(parseInt(window.location.hash.slice(1)) || 1);
 const storedRomsPerPage = parseInt(localStorage.getItem("romsPerPage") ?? "");
 const itemsPerPage = ref(isNaN(storedRomsPerPage) ? 25 : storedRomsPerPage);
@@ -181,11 +179,7 @@ onMounted(() => {
         </v-btn>
         <v-menu location="bottom">
           <template #activator="{ props }">
-            <v-btn
-              v-if="auth.scopes.includes('roms.write')"
-              v-bind="props"
-              size="small"
-            >
+            <v-btn v-bind="props" size="small">
               <v-icon>mdi-dots-vertical</v-icon>
             </v-btn>
           </template>

From 91dcec379a61cbde70e4a464869e466b02d06b18 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Fri, 5 Jul 2024 09:34:29 +0200
Subject: [PATCH 31/33] fixed edit collection permission for non-admin user

---
 frontend/src/components/Gallery/AppBar/Collection/Base.vue | 2 +-
 frontend/src/components/common/Game/AdminMenu.vue          | 1 +
 frontend/src/views/Play/Base.vue                           | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Gallery/AppBar/Collection/Base.vue b/frontend/src/components/Gallery/AppBar/Collection/Base.vue
index 6af920b9a..584696d13 100644
--- a/frontend/src/components/Gallery/AppBar/Collection/Base.vue
+++ b/frontend/src/components/Gallery/AppBar/Collection/Base.vue
@@ -21,7 +21,7 @@ const auth = storeAuth();
     <v-menu location="bottom">
       <template #activator="{ props }">
         <v-btn
-          v-if="auth.scopes.includes('roms.write')"
+          v-if="auth.scopes.includes('collections.write')"
           v-bind="props"
           rounded="0"
           variant="text"
diff --git a/frontend/src/components/common/Game/AdminMenu.vue b/frontend/src/components/common/Game/AdminMenu.vue
index f9c2e160d..bc1dca9bd 100644
--- a/frontend/src/components/common/Game/AdminMenu.vue
+++ b/frontend/src/components/common/Game/AdminMenu.vue
@@ -42,6 +42,7 @@ const auth = storeAuth();
       <v-divider />
     </template>
     <v-list-item
+      v-if="auth.scopes.includes('collections.write')"
       class="py-4 pr-5"
       @click="emitter?.emit('showAddToCollectionDialog', [{ ...rom }])"
     >
diff --git a/frontend/src/views/Play/Base.vue b/frontend/src/views/Play/Base.vue
index e1decaa3e..ac27b39d3 100644
--- a/frontend/src/views/Play/Base.vue
+++ b/frontend/src/views/Play/Base.vue
@@ -81,7 +81,7 @@ onMounted(async () => {
       :md="!gameRunning ? 8 : 4"
       :xl="!gameRunning ? 6 : 2"
     >
-      <v-row class="px-3" no-gutters>
+      <v-row class="px-3 mt-6" no-gutters>
         <v-col>
           <v-img
             class="mx-auto"

From 3c658d0e6599a6c6272dac799f4aca8d46db199c Mon Sep 17 00:00:00 2001
From: Zurdi <34356590+zurdi15@users.noreply.github.com>
Date: Fri, 5 Jul 2024 20:31:27 +0200
Subject: [PATCH 32/33] Update frontend/src/stores/users.ts

Co-authored-by: Georges-Antoine Assi <3247106+gantoine@users.noreply.github.com>
---
 .../src/components/Administration/Users/Table.vue  |  6 +++---
 frontend/src/stores/users.ts                       | 14 +++++++-------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/Administration/Users/Table.vue b/frontend/src/components/Administration/Users/Table.vue
index cc9f6ada6..6318c420a 100644
--- a/frontend/src/components/Administration/Users/Table.vue
+++ b/frontend/src/components/Administration/Users/Table.vue
@@ -15,7 +15,7 @@ const userSearch = ref("");
 const { xs } = useDisplay();
 const emitter = inject<Emitter<Events>>("emitter");
 const usersStore = storeUsers();
-const { allUSers } = storeToRefs(usersStore);
+const { allUsers } = storeToRefs(usersStore);
 const auth = storeAuth();
 const HEADERS = [
   {
@@ -60,7 +60,7 @@ emitter?.on("updateDataTablePages", updateDataTablePages);
 
 // Functions
 function updateDataTablePages() {
-  pageCount.value = Math.ceil(usersStore.allUSers.length / usersPerPage.value);
+  pageCount.value = Math.ceil(usersStore.allUsers.length / usersPerPage.value);
 }
 
 function disableUser(user: User) {
@@ -108,7 +108,7 @@ onMounted(() => {
         :items-per-page-options="PER_PAGE_OPTIONS"
         :search="userSearch"
         :headers="HEADERS"
-        :items="allUSers"
+        :items="allUsers"
         :sort-by="[{ key: 'username', order: 'asc' }]"
         fixed-header
         fixed-footer
diff --git a/frontend/src/stores/users.ts b/frontend/src/stores/users.ts
index 601aa97d3..a5448b080 100644
--- a/frontend/src/stores/users.ts
+++ b/frontend/src/stores/users.ts
@@ -5,22 +5,22 @@ export type User = UserSchema;
 
 export default defineStore("users", {
   state: () => ({
-    allUSers: [] as User[],
+    allUsers: [] as User[],
   }),
 
   getters: {
-    admins: (state) => state.allUSers.filter((user) => user.role === "admin"),
+    admins: (state) => state.allUsers.filter((user) => user.role === "admin"),
   },
 
   actions: {
     set(users: User[]) {
-      this.allUSers = users;
+      this.allUsers = users;
     },
     add(user: User) {
-      this.allUSers = this.allUSers.concat(user);
+      this.allUsers = this.allUsers.concat(user);
     },
     update(user: User) {
-      this.allUSers = this.allUSers.map((value) => {
+      this.allUsers = this.allUsers.map((value) => {
         if (value.id === user.id) {
           return user;
         }
@@ -28,12 +28,12 @@ export default defineStore("users", {
       });
     },
     remove(userId: number) {
-      this.allUSers = this.allUSers.filter((value) => {
+      this.allUsers = this.allUsers.filter((value) => {
         return value.id !== userId;
       });
     },
     reset() {
-      this.allUSers = [];
+      this.allUsers = [];
     },
   },
 });

From ebaa5d65208a6266c81f41c86eb8635d9b85e237 Mon Sep 17 00:00:00 2001
From: Zurdi <zurdizurdo25@gmail.com>
Date: Fri, 5 Jul 2024 20:59:14 +0200
Subject: [PATCH 33/33] fixed filter roms both by platform and collection

---
 backend/handler/database/roms_handler.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/backend/handler/database/roms_handler.py b/backend/handler/database/roms_handler.py
index 44897ecc5..bb69cead2 100644
--- a/backend/handler/database/roms_handler.py
+++ b/backend/handler/database/roms_handler.py
@@ -56,7 +56,7 @@ def _filter(
         if platform_id:
             data = data.filter(Rom.platform_id == platform_id)
 
-        elif collection_id:
+        if collection_id:
             collection = (
                 session.query(Collection)
                 .filter(Collection.id == collection_id)