From 5b13bb065ad0f7a7404d0bb255777bb927c17ab2 Mon Sep 17 00:00:00 2001
From: zurdi zurdo <zurdizurdo25@gmail.com>
Date: Wed, 12 Apr 2023 18:29:44 +0200
Subject: [PATCH 1/6] small and big gallery views added

---
 frontend/src/components/AppBar/Base.vue       |  4 ++-
 .../src/components/AppBar/GalleryViewBtn.vue  | 25 +++++++++++++++++++
 .../src/components/AppBar/PlatformsBtn.vue    |  3 ++-
 .../src/components/GameCard/ActionBar.vue     |  6 ++---
 frontend/src/components/GameCard/Base.vue     |  9 -------
 frontend/src/components/GameCard/Cover.vue    | 18 ++++++++++---
 .../src/components/SettingsDrawer/Base.vue    |  2 +-
 frontend/src/utils/utils.js                   |  8 +++++-
 frontend/src/views/Gallery.vue                | 13 ++++++++--
 9 files changed, 67 insertions(+), 21 deletions(-)
 create mode 100644 frontend/src/components/AppBar/GalleryViewBtn.vue

diff --git a/frontend/src/components/AppBar/Base.vue b/frontend/src/components/AppBar/Base.vue
index e87997fdc..220807374 100644
--- a/frontend/src/components/AppBar/Base.vue
+++ b/frontend/src/components/AppBar/Base.vue
@@ -2,9 +2,10 @@
 import { ref, inject } from "vue"
 import RomMIcon from '@/components/AppBar/RomMIcon.vue'
 import PlatformsBtn from '@/components/AppBar/PlatformsBtn.vue'
+import UploadBtn from '@/components/AppBar/UploadBtn.vue'
 import SearchBar from '@/components/AppBar/SearchBar.vue'
+import GalleryViewBtn from '@/components/AppBar/GalleryViewBtn.vue'
 import SettingsBtn from '@/components/AppBar/SettingsBtn.vue'
-import UploadBtn from '@/components/AppBar/UploadBtn.vue'
 
 // Props
 const scanning = ref(false)
@@ -34,6 +35,7 @@ emitter.on('scanning', (s) => { scanning.value = s })
         <search-bar/>
         
         <template v-slot:append>
+            <gallery-view-btn/>
             <settings-btn/>
         </template>
         
diff --git a/frontend/src/components/AppBar/GalleryViewBtn.vue b/frontend/src/components/AppBar/GalleryViewBtn.vue
new file mode 100644
index 000000000..f352fa09c
--- /dev/null
+++ b/frontend/src/components/AppBar/GalleryViewBtn.vue
@@ -0,0 +1,25 @@
+<script setup>
+import { ref, inject } from "vue"
+import { views } from '@/utils/utils.js'
+
+// Event listeners bus
+const emitter = inject('emitter')
+const currentView = ref(JSON.parse(localStorage.getItem('currentView')) || 0)
+
+// Functions
+function changeView() {
+    if(currentView.value == 2){currentView.value = 0}
+    else{currentView.value = currentView.value + 1}
+    emitter.emit('currentView', currentView.value)
+    localStorage.setItem('currentView', currentView.value)
+}
+</script>
+
+<template>
+    <v-app-bar-nav-icon
+        @click="changeView()"
+        class="ma-2"
+        rounded="0">
+        <v-icon :icon="views[currentView]['icon']"/>
+    </v-app-bar-nav-icon>
+</template>
\ No newline at end of file
diff --git a/frontend/src/components/AppBar/PlatformsBtn.vue b/frontend/src/components/AppBar/PlatformsBtn.vue
index 8b6bb73d4..6f0572b62 100644
--- a/frontend/src/components/AppBar/PlatformsBtn.vue
+++ b/frontend/src/components/AppBar/PlatformsBtn.vue
@@ -16,7 +16,8 @@ emitter.on('selectedPlatform', (p) => { selectedPlatform.value = p })
         rounded="0"
         icon>
         <v-avatar rounded="0">
-            <v-img :src="'/assets/platforms/'+selectedPlatform.slug+'.ico'"/>
+            <v-img v-show="selectedPlatform != ''" :src="'/assets/platforms/'+selectedPlatform.slug+'.ico'"/>
+            <v-icon v-show="selectedPlatform == ''" icon="mdi-menu"/>
         </v-avatar>
     </v-btn>
 </template>
\ No newline at end of file
diff --git a/frontend/src/components/GameCard/ActionBar.vue b/frontend/src/components/GameCard/ActionBar.vue
index 0dbc206b6..71076bf9e 100644
--- a/frontend/src/components/GameCard/ActionBar.vue
+++ b/frontend/src/components/GameCard/ActionBar.vue
@@ -17,19 +17,19 @@ const emitter = inject('emitter')
                 <v-btn
                     @click="downloadRom(rom, emitter)"
                     icon="mdi-download"
-                    size="small"
+                    size="x-small"
                     variant="text"/>
                 <v-btn
                     @click="downloadSave(rom, emitter)"
                     icon="mdi-content-save-all"
-                    size="small"
+                    size="x-small"
                     variant="text"
                     :disabled="!saveFiles"/>
             </v-col>
             <v-btn
                 @click=""
                 icon="mdi-dots-vertical"
-                size="small"
+                size="x-small"
                 variant="text"
                 :disabled="!saveFiles"/>
         </v-row>
diff --git a/frontend/src/components/GameCard/Base.vue b/frontend/src/components/GameCard/Base.vue
index bcc21d449..3e511f25f 100644
--- a/frontend/src/components/GameCard/Base.vue
+++ b/frontend/src/components/GameCard/Base.vue
@@ -21,15 +21,6 @@ const props = defineProps(['rom'])
 </template>
 
 <style scoped>
-.v-card .rom-title{
-    transition: opacity .4s ease-in-out;
-}
-.rom-title.on-hover {
-    opacity: 1;
-}
-.rom-title:not(.on-hover) {
-    opacity: 0.85;
-}
 .v-card.on-hover {
     opacity: 1;
 }
diff --git a/frontend/src/components/GameCard/Cover.vue b/frontend/src/components/GameCard/Cover.vue
index f9d9e4595..8a69c883f 100644
--- a/frontend/src/components/GameCard/Cover.vue
+++ b/frontend/src/components/GameCard/Cover.vue
@@ -3,7 +3,7 @@ import { inject } from 'vue'
 import { useRouter } from 'vue-router'
 
 // Props
-const props = defineProps(['rom', 'isHovering', 'hoverProps'])
+const props = defineProps(['rom', 'isHovering', 'hoverProps', 'size'])
 const forceImgReload = Date.now()
 const router = useRouter()
 
@@ -34,7 +34,7 @@ async function selectRom(rom) {
         <v-expand-transition>
             <div 
                 v-if="isHovering || !rom.has_cover"
-                class="rom-title d-flex transition-fast-in-fast-out bg-secondary text-caption-1">
+                class="rom-title d-flex transition-fast-in-fast-out bg-secondary text-caption">
                 <v-list-item>{{ rom.file_name }}</v-list-item>
             </div>
         </v-expand-transition>
@@ -53,4 +53,16 @@ async function selectRom(rom) {
             </v-chip>
         </div>
     </v-img>
-</template>
\ No newline at end of file
+</template>
+
+<style scoped>
+.v-card .rom-title{
+    transition: opacity .4s ease-in-out;
+}
+.rom-title.on-hover {
+    opacity: 1;
+}
+.rom-title:not(.on-hover) {
+    opacity: 0.85;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/SettingsDrawer/Base.vue b/frontend/src/components/SettingsDrawer/Base.vue
index b7e114b01..ce445cdd9 100644
--- a/frontend/src/components/SettingsDrawer/Base.vue
+++ b/frontend/src/components/SettingsDrawer/Base.vue
@@ -27,7 +27,7 @@ emitter.on('toggleSettings', () => { settingsDrawer.value = !settingsDrawer.valu
         <v-divider class="border-opacity-100" :thickness="2"/>
         
         <scan/>
-
+        
         <template v-slot:append>
             <v-divider class="border-opacity-25"/>
             <theme-toggle/>
diff --git a/frontend/src/utils/utils.js b/frontend/src/utils/utils.js
index 1e3e89a1c..59bc6d719 100644
--- a/frontend/src/utils/utils.js
+++ b/frontend/src/utils/utils.js
@@ -32,4 +32,10 @@ export async function downloadRom(rom, emitter, filesToDownload=[]) {
 
 export async function downloadSave(rom, emitter) { console.log("Downloading "+rom.file_name+" save file") }
 
-export function normalizeString(s) { return s.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g,"") }
\ No newline at end of file
+export function normalizeString(s) { return s.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g,"") }
+
+export const views = {
+    0:{'view': 'small', 'icon': 'mdi-view-comfy', 'size-lg': 1, 'size-md': 2, 'size-sm': 2, 'size-xs': 3, 'size-cols': 4},
+    1:{'view': 'big', 'icon': 'mdi-view-module', 'size-lg': 2, 'size-md': 3, 'size-sm': 3, 'size-xs': 6, 'size-cols': 6},
+    2:{'view': 'list', 'icon': 'mdi-view-list', 'size-lg': 1, 'size-md': 2, 'size-sm': 2, 'size-xs': 3, 'size-cols': 4}
+}
diff --git a/frontend/src/views/Gallery.vue b/frontend/src/views/Gallery.vue
index fd66abbac..58a233d1c 100644
--- a/frontend/src/views/Gallery.vue
+++ b/frontend/src/views/Gallery.vue
@@ -1,7 +1,7 @@
 <script setup>
 import axios from 'axios'
 import { ref, inject, onMounted } from 'vue'
-import { normalizeString } from '@/utils/utils.js'
+import { normalizeString, views } from '@/utils/utils.js'
 import GameCard from '@/components/GameCard/Base.vue'
 
 // Props
@@ -10,11 +10,13 @@ const gettingRoms = ref(false)
 const noRoms = ref(false)
 const romsFiltered = ref([])
 const currentFilter = ref('')
+const currentView = ref(JSON.parse(localStorage.getItem('currentView')) || 0)
 
 // Event listeners bus
 const emitter = inject('emitter')
 emitter.on('selectedPlatform', (platform) => { getRoms(platform.slug) })
 emitter.on('filter', (filter) => { setFilter(filter) })
+emitter.on('currentView', (view) => { currentView.value = view })
 
 // Functions
 async function getRoms(platform) {
@@ -47,7 +49,14 @@ onMounted(() => {
 <template>
 
     <v-row>
-        <v-col v-for="rom in romsFiltered" cols="6" xs="6" sm="3" md="3" lg="2">
+        <v-col v-for="rom in romsFiltered"
+            :cols="views[currentView]['size-cols']"
+            :xs="views[currentView]['size-xs']"
+            :sm="views[currentView]['size-sm']"
+            :md="views[currentView]['size-md']"
+            :lg="views[currentView]['size-lg']"
+            class="pa-1"
+            v-show="currentView != 2">
             <game-card :rom="rom"/>
         </v-col>
     </v-row>

From 3e609068b63da43b99e12de6d46c67cd8399a7b6 Mon Sep 17 00:00:00 2001
From: zurdi zurdo <zurdizurdo25@gmail.com>
Date: Thu, 13 Apr 2023 00:09:02 +0200
Subject: [PATCH 2/6] game list view added

---
 .../Card}/ActionBar.vue                       |  0
 .../{GameCard => GameEntry/Card}/Base.vue     |  4 +-
 .../{GameCard => GameEntry/Card}/Cover.vue    | 10 +---
 .../components/GameEntry/ListItem/Base.vue    | 60 +++++++++++++++++++
 .../components/GameEntry/ListItem/Header.vue  | 20 +++++++
 .../components/PlatformsDrawer/Platform.vue   |  5 +-
 frontend/src/utils/utils.js                   | 13 +++-
 frontend/src/views/Gallery.vue                | 30 ++++++++--
 8 files changed, 121 insertions(+), 21 deletions(-)
 rename frontend/src/components/{GameCard => GameEntry/Card}/ActionBar.vue (100%)
 rename frontend/src/components/{GameCard => GameEntry/Card}/Base.vue (84%)
 rename frontend/src/components/{GameCard => GameEntry/Card}/Cover.vue (87%)
 create mode 100644 frontend/src/components/GameEntry/ListItem/Base.vue
 create mode 100644 frontend/src/components/GameEntry/ListItem/Header.vue

diff --git a/frontend/src/components/GameCard/ActionBar.vue b/frontend/src/components/GameEntry/Card/ActionBar.vue
similarity index 100%
rename from frontend/src/components/GameCard/ActionBar.vue
rename to frontend/src/components/GameEntry/Card/ActionBar.vue
diff --git a/frontend/src/components/GameCard/Base.vue b/frontend/src/components/GameEntry/Card/Base.vue
similarity index 84%
rename from frontend/src/components/GameCard/Base.vue
rename to frontend/src/components/GameEntry/Card/Base.vue
index 3e511f25f..fd1f6e528 100644
--- a/frontend/src/components/GameCard/Base.vue
+++ b/frontend/src/components/GameEntry/Card/Base.vue
@@ -1,6 +1,6 @@
 <script setup>
-import ActionBar from '@/components/GameCard/ActionBar.vue'
-import Cover from '@/components/GameCard/Cover.vue'
+import ActionBar from '@/components/GameEntry/Card/ActionBar.vue'
+import Cover from '@/components/GameEntry/Card/Cover.vue'
 
 // Props
 const props = defineProps(['rom'])
diff --git a/frontend/src/components/GameCard/Cover.vue b/frontend/src/components/GameEntry/Card/Cover.vue
similarity index 87%
rename from frontend/src/components/GameCard/Cover.vue
rename to frontend/src/components/GameEntry/Card/Cover.vue
index 8a69c883f..97bd53213 100644
--- a/frontend/src/components/GameCard/Cover.vue
+++ b/frontend/src/components/GameEntry/Card/Cover.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { inject } from 'vue'
 import { useRouter } from 'vue-router'
+import { selectRom } from '@/utils/utils.js'
 
 // Props
 const props = defineProps(['rom', 'isHovering', 'hoverProps', 'size'])
@@ -9,18 +10,11 @@ const router = useRouter()
 
 // Event listeners bus
 const emitter = inject('emitter')
-
-// Functions
-async function selectRom(rom) {   
-    localStorage.setItem('currentRom', JSON.stringify(rom))
-    await router.push(import.meta.env.BASE_URL+'details')
-    emitter.emit('currentRom', rom)
-}
 </script>
 
 <template>
     <v-img 
-        @click="selectRom(rom)"
+        @click="selectRom(rom, emitter, router)"
         v-bind="hoverProps"
         :src="'/assets'+rom.path_cover_l+'?reload='+forceImgReload"
         :lazy-src="'/assets'+rom.path_cover_s+'?reload='+forceImgReload"
diff --git a/frontend/src/components/GameEntry/ListItem/Base.vue b/frontend/src/components/GameEntry/ListItem/Base.vue
new file mode 100644
index 000000000..7bf9b58b8
--- /dev/null
+++ b/frontend/src/components/GameEntry/ListItem/Base.vue
@@ -0,0 +1,60 @@
+<script setup>
+import { ref, inject } from 'vue'
+import { useRouter } from 'vue-router'
+import { selectRom, downloadRom, downloadSave } from '@/utils/utils.js'
+
+// Props
+const props = defineProps(['rom'])
+const forceImgReload = Date.now()
+const router = useRouter()
+const saveFiles = ref(false)
+
+// Event listeners bus
+const emitter = inject('emitter')
+</script>
+
+<template>
+    <v-list-item 
+        @:click="selectRom(rom, emitter, router)"
+        :value="rom.file_name"
+        :key="rom.file_name"
+        class="pa-2">
+        <v-row class="text-subtitle-2">
+            <v-col><p>{{ rom.name }}</p></v-col>
+            <v-col class="hidden-sm-and-down"><p>{{ rom.file_name }}</p></v-col>
+            <v-col class="hidden-sm-and-down"><p>{{ rom.p_slug }}</p></v-col>
+            <v-col class="hidden-sm-and-down"><p>{{ rom.file_size }} MB</p></v-col>
+            <v-col class="hidden-sm-and-down"><p>{{ rom.region }}</p></v-col>
+            <v-col class="hidden-sm-and-down"><p>{{ rom.revision }}</p></v-col>
+        </v-row>
+        <template v-slot:prepend>
+            <v-avatar :rounded="0">
+                <v-img
+                    :src="'/assets'+rom.path_cover_l+'?reload='+forceImgReload"
+                    :lazy-src="'/assets'+rom.path_cover_s+'?reload='+forceImgReload"
+                    min-height="100"/>
+            </v-avatar>
+        </template>
+        <template v-slot:append>
+            <v-col class="pa-0 ml-1">
+            <v-btn
+                @click="downloadRom(rom, emitter)"
+                icon="mdi-download"
+                size="x-small"
+                variant="text"/>
+            <v-btn
+                @click="downloadSave(rom, emitter)"
+                icon="mdi-content-save-all"
+                size="x-small"
+                variant="text"
+                :disabled="!saveFiles"/>
+            </v-col>
+            <v-btn
+                @click=""
+                icon="mdi-dots-vertical"
+                size="x-small"
+                variant="text"
+                :disabled="!saveFiles"/>
+        </template>
+    </v-list-item>
+</template>
\ No newline at end of file
diff --git a/frontend/src/components/GameEntry/ListItem/Header.vue b/frontend/src/components/GameEntry/ListItem/Header.vue
new file mode 100644
index 000000000..88f9d7623
--- /dev/null
+++ b/frontend/src/components/GameEntry/ListItem/Header.vue
@@ -0,0 +1,20 @@
+<template>
+    <v-list-item class="pa-2 text-body-1">
+        <v-row>
+            <v-col><p>Name</p></v-col>
+            <v-col class="hidden-sm-and-down"><p>File</p></v-col>
+            <v-col class="hidden-sm-and-down"><p>Platform</p></v-col>
+            <v-col class="hidden-sm-and-down"><p>Size</p></v-col>
+            <v-col class="hidden-sm-and-down"><p>Region</p></v-col>
+            <v-col class="hidden-sm-and-down"><p>Revision</p></v-col>
+        </v-row>
+        <template v-slot:prepend><v-avatar/></template>
+        <template v-slot:append>
+            <v-col class="pa-0 ml-1">
+                <v-btn disabled size="x-small" variant="text"/>
+                <v-btn size="x-small" variant="text" disabled/>
+            </v-col>
+            <v-btn size="x-small" variant="text" disabled/>
+        </template>
+    </v-list-item>
+</template>
\ No newline at end of file
diff --git a/frontend/src/components/PlatformsDrawer/Platform.vue b/frontend/src/components/PlatformsDrawer/Platform.vue
index 743a6d957..bb603c9a5 100644
--- a/frontend/src/components/PlatformsDrawer/Platform.vue
+++ b/frontend/src/components/PlatformsDrawer/Platform.vue
@@ -21,10 +21,7 @@ async function selectPlatform(platform){
 </script>
 
 <template>
-    <v-list-item
-        :value="platform.slug"
-        :key="platform"
-        @:click="selectPlatform(platform)" class="pt-4 pb-4">
+    <v-list-item :value="platform.slug" :key="platform" @:click="selectPlatform(platform)" class="pt-4 pb-4">
         <p class="text-subtitle-2 text-truncate">{{ rail ? '' : platform.name }}</p>
         <template v-slot:prepend>
             <v-avatar :rounded="0"><v-img :src="'/assets/platforms/'+platform.slug+'.ico'"></v-img></v-avatar>
diff --git a/frontend/src/utils/utils.js b/frontend/src/utils/utils.js
index 59bc6d719..4cd4cc0ea 100644
--- a/frontend/src/utils/utils.js
+++ b/frontend/src/utils/utils.js
@@ -3,6 +3,13 @@ import { toRaw } from "vue"
 import { saveAs } from 'file-saver'
 
 
+
+export async function selectRom(rom, emitter, router) { 
+    localStorage.setItem('currentRom', JSON.stringify(rom))
+    await router.push(import.meta.env.BASE_URL+'details')
+    emitter.emit('currentRom', rom)
+}
+
 export async function downloadRom(rom, emitter, filesToDownload=[]) {
     emitter.emit('snackbarScan', {'msg': "Downloading "+rom.file_name+"...", 'icon': 'mdi-download', 'color': 'green'})
     if(rom.multi){
@@ -35,7 +42,7 @@ export async function downloadSave(rom, emitter) { console.log("Downloading "+ro
 export function normalizeString(s) { return s.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g,"") }
 
 export const views = {
-    0:{'view': 'small', 'icon': 'mdi-view-comfy', 'size-lg': 1, 'size-md': 2, 'size-sm': 2, 'size-xs': 3, 'size-cols': 4},
-    1:{'view': 'big', 'icon': 'mdi-view-module', 'size-lg': 2, 'size-md': 3, 'size-sm': 3, 'size-xs': 6, 'size-cols': 6},
-    2:{'view': 'list', 'icon': 'mdi-view-list', 'size-lg': 1, 'size-md': 2, 'size-sm': 2, 'size-xs': 3, 'size-cols': 4}
+    0:{'view': 'small', 'icon': 'mdi-view-module', 'size-lg': 1, 'size-md': 2, 'size-sm': 2, 'size-xs': 3, 'size-cols': 4},
+    1:{'view': 'big', 'icon': 'mdi-view-list', 'size-lg': 2, 'size-md': 3, 'size-sm': 3, 'size-xs': 6, 'size-cols': 6},
+    2:{'view': 'list', 'icon': 'mdi-view-comfy', 'size-lg': 1, 'size-md': 2, 'size-sm': 2, 'size-xs': 3, 'size-cols': 4}
 }
diff --git a/frontend/src/views/Gallery.vue b/frontend/src/views/Gallery.vue
index 58a233d1c..3ecdcd8c9 100644
--- a/frontend/src/views/Gallery.vue
+++ b/frontend/src/views/Gallery.vue
@@ -2,7 +2,9 @@
 import axios from 'axios'
 import { ref, inject, onMounted } from 'vue'
 import { normalizeString, views } from '@/utils/utils.js'
-import GameCard from '@/components/GameCard/Base.vue'
+import GameCard from '@/components/GameEntry/Card/Base.vue'
+import GameListHeader from '@/components/GameEntry/ListItem/Header.vue'
+import GameListItem from '@/components/GameEntry/ListItem/Base.vue'
 
 // Props
 const roms = ref([])
@@ -48,18 +50,23 @@ onMounted(() => {
 
 <template>
 
-    <v-row>
+    <v-row v-show="currentView != 2">
         <v-col v-for="rom in romsFiltered"
             :cols="views[currentView]['size-cols']"
             :xs="views[currentView]['size-xs']"
             :sm="views[currentView]['size-sm']"
             :md="views[currentView]['size-md']"
             :lg="views[currentView]['size-lg']"
-            class="pa-1"
-            v-show="currentView != 2">
+            class="pa-1">
             <game-card :rom="rom"/>
         </v-col>
     </v-row>
+
+    <v-list v-show="currentView == 2">
+        <game-list-header/>
+        <v-divider class="border-opacity-100 ml-3 mb-4 mr-3" :thickness="2"/>
+        <game-list-item v-for="rom in romsFiltered" :rom="rom"/>
+    </v-list>
     
     <v-row v-if="noRoms" class="d-flex justify-center align-center mt-16">
         <div class="text-h6">Feels cold here... <v-icon>mdi-emoticon-sad</v-icon></div>
@@ -70,3 +77,18 @@ onMounted(() => {
     </v-dialog>
 
 </template>
+
+<style scoped>
+.rom{
+    transition: opacity .4s ease-in-out;
+}
+.rom.on-hover {
+    opacity: 1;
+}
+.rom:not(.on-hover) {
+    opacity: 0.85;
+}
+.rom{
+    cursor: pointer;
+}
+</style>
\ No newline at end of file

From ad85b8823fcabbe82530b846a57b68d61fccf7fd Mon Sep 17 00:00:00 2001
From: zurdi zurdo <zurdizurdo25@gmail.com>
Date: Thu, 13 Apr 2023 00:09:02 +0200
Subject: [PATCH 3/6] game list view added

---
 .../Card}/ActionBar.vue                       |  0
 .../{GameCard => GameEntry/Card}/Base.vue     |  4 +-
 .../{GameCard => GameEntry/Card}/Cover.vue    | 10 +--
 .../components/GameEntry/ListItem/Base.vue    | 61 +++++++++++++++++++
 .../components/GameEntry/ListItem/Header.vue  | 20 ++++++
 .../components/PlatformsDrawer/Platform.vue   |  5 +-
 frontend/src/utils/utils.js                   | 13 +++-
 frontend/src/views/Gallery.vue                | 30 +++++++--
 8 files changed, 122 insertions(+), 21 deletions(-)
 rename frontend/src/components/{GameCard => GameEntry/Card}/ActionBar.vue (100%)
 rename frontend/src/components/{GameCard => GameEntry/Card}/Base.vue (84%)
 rename frontend/src/components/{GameCard => GameEntry/Card}/Cover.vue (87%)
 create mode 100644 frontend/src/components/GameEntry/ListItem/Base.vue
 create mode 100644 frontend/src/components/GameEntry/ListItem/Header.vue

diff --git a/frontend/src/components/GameCard/ActionBar.vue b/frontend/src/components/GameEntry/Card/ActionBar.vue
similarity index 100%
rename from frontend/src/components/GameCard/ActionBar.vue
rename to frontend/src/components/GameEntry/Card/ActionBar.vue
diff --git a/frontend/src/components/GameCard/Base.vue b/frontend/src/components/GameEntry/Card/Base.vue
similarity index 84%
rename from frontend/src/components/GameCard/Base.vue
rename to frontend/src/components/GameEntry/Card/Base.vue
index 3e511f25f..fd1f6e528 100644
--- a/frontend/src/components/GameCard/Base.vue
+++ b/frontend/src/components/GameEntry/Card/Base.vue
@@ -1,6 +1,6 @@
 <script setup>
-import ActionBar from '@/components/GameCard/ActionBar.vue'
-import Cover from '@/components/GameCard/Cover.vue'
+import ActionBar from '@/components/GameEntry/Card/ActionBar.vue'
+import Cover from '@/components/GameEntry/Card/Cover.vue'
 
 // Props
 const props = defineProps(['rom'])
diff --git a/frontend/src/components/GameCard/Cover.vue b/frontend/src/components/GameEntry/Card/Cover.vue
similarity index 87%
rename from frontend/src/components/GameCard/Cover.vue
rename to frontend/src/components/GameEntry/Card/Cover.vue
index 8a69c883f..97bd53213 100644
--- a/frontend/src/components/GameCard/Cover.vue
+++ b/frontend/src/components/GameEntry/Card/Cover.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { inject } from 'vue'
 import { useRouter } from 'vue-router'
+import { selectRom } from '@/utils/utils.js'
 
 // Props
 const props = defineProps(['rom', 'isHovering', 'hoverProps', 'size'])
@@ -9,18 +10,11 @@ const router = useRouter()
 
 // Event listeners bus
 const emitter = inject('emitter')
-
-// Functions
-async function selectRom(rom) {   
-    localStorage.setItem('currentRom', JSON.stringify(rom))
-    await router.push(import.meta.env.BASE_URL+'details')
-    emitter.emit('currentRom', rom)
-}
 </script>
 
 <template>
     <v-img 
-        @click="selectRom(rom)"
+        @click="selectRom(rom, emitter, router)"
         v-bind="hoverProps"
         :src="'/assets'+rom.path_cover_l+'?reload='+forceImgReload"
         :lazy-src="'/assets'+rom.path_cover_s+'?reload='+forceImgReload"
diff --git a/frontend/src/components/GameEntry/ListItem/Base.vue b/frontend/src/components/GameEntry/ListItem/Base.vue
new file mode 100644
index 000000000..ef2b231dd
--- /dev/null
+++ b/frontend/src/components/GameEntry/ListItem/Base.vue
@@ -0,0 +1,61 @@
+<script setup>
+import { ref, inject } from 'vue'
+import { useRouter } from 'vue-router'
+import { selectRom, downloadRom, downloadSave } from '@/utils/utils.js'
+
+// Props
+const props = defineProps(['rom'])
+const forceImgReload = Date.now()
+const router = useRouter()
+const saveFiles = ref(false)
+
+// Event listeners bus
+const emitter = inject('emitter')
+</script>
+
+<template>
+    <v-list-item 
+        @:click="selectRom(rom, emitter, router)"
+        :value="rom.file_name"
+        :key="rom.file_name"
+        class="pa-2">
+        <v-row class="text-subtitle-2">
+            <v-col md="3" lg="3"><p>{{ rom.name }}</p></v-col>
+            <v-col md="3" lg="3" class="hidden-sm-and-down"><p>{{ rom.file_name }}</p></v-col>
+            <v-col class="hidden-sm-and-down"><p>{{ rom.p_slug }}</p></v-col>
+            <v-col class="hidden-sm-and-down"><p>{{ rom.file_size }} MB</p></v-col>
+            <v-col class="hidden-sm-and-down"><p>{{ rom.region }}</p></v-col>
+            <v-col class="hidden-sm-and-down"><p>{{ rom.revision }}</p></v-col>
+        </v-row>
+        <template v-slot:prepend>
+            <v-avatar :rounded="0" class="ml-3">
+                <v-img
+                    :src="'/assets'+rom.path_cover_l+'?reload='+forceImgReload"
+                    :lazy-src="'/assets'+rom.path_cover_s+'?reload='+forceImgReload"
+                    min-height="100"/>
+            </v-avatar>
+        </template>
+        <template v-slot:append>
+            <v-col class="pa-0 ml-1">
+            <v-btn
+                @click="downloadRom(rom, emitter)"
+                icon="mdi-download"
+                size="x-small"
+                variant="text"/>
+            <v-btn
+                @click="downloadSave(rom, emitter)"
+                icon="mdi-content-save-all"
+                size="x-small"
+                variant="text"
+                :disabled="!saveFiles"/>
+            </v-col>
+            <v-btn
+                @click=""
+                icon="mdi-dots-vertical"
+                size="x-small"
+                variant="text"
+                class="mr-3"
+                :disabled="!saveFiles"/>
+        </template>
+    </v-list-item>
+</template>
\ No newline at end of file
diff --git a/frontend/src/components/GameEntry/ListItem/Header.vue b/frontend/src/components/GameEntry/ListItem/Header.vue
new file mode 100644
index 000000000..a552d1bcb
--- /dev/null
+++ b/frontend/src/components/GameEntry/ListItem/Header.vue
@@ -0,0 +1,20 @@
+<template>
+    <v-list-item class="pa-2 ml-3 mr-3 text-body-1">
+        <v-row class="">
+            <v-col cols="3"><p>Name</p></v-col>
+            <v-col cols="3" class="hidden-sm-and-down"><p>File</p></v-col>
+            <v-col class="hidden-sm-and-down"><p>Platform</p></v-col>
+            <v-col class="hidden-sm-and-down"><p>Size</p></v-col>
+            <v-col class="hidden-sm-and-down"><p>Region</p></v-col>
+            <v-col class="hidden-sm-and-down"><p>Revision</p></v-col>
+        </v-row>
+        <template v-slot:prepend><v-avatar/></template>
+        <template v-slot:append>
+            <v-col class="pa-0 ml-1">
+                <v-btn disabled size="x-small" variant="text"/>
+                <v-btn size="x-small" variant="text" disabled/>
+            </v-col>
+            <v-btn size="x-small" variant="text" disabled/>
+        </template>
+    </v-list-item>
+</template>
\ No newline at end of file
diff --git a/frontend/src/components/PlatformsDrawer/Platform.vue b/frontend/src/components/PlatformsDrawer/Platform.vue
index 743a6d957..bb603c9a5 100644
--- a/frontend/src/components/PlatformsDrawer/Platform.vue
+++ b/frontend/src/components/PlatformsDrawer/Platform.vue
@@ -21,10 +21,7 @@ async function selectPlatform(platform){
 </script>
 
 <template>
-    <v-list-item
-        :value="platform.slug"
-        :key="platform"
-        @:click="selectPlatform(platform)" class="pt-4 pb-4">
+    <v-list-item :value="platform.slug" :key="platform" @:click="selectPlatform(platform)" class="pt-4 pb-4">
         <p class="text-subtitle-2 text-truncate">{{ rail ? '' : platform.name }}</p>
         <template v-slot:prepend>
             <v-avatar :rounded="0"><v-img :src="'/assets/platforms/'+platform.slug+'.ico'"></v-img></v-avatar>
diff --git a/frontend/src/utils/utils.js b/frontend/src/utils/utils.js
index 59bc6d719..4cd4cc0ea 100644
--- a/frontend/src/utils/utils.js
+++ b/frontend/src/utils/utils.js
@@ -3,6 +3,13 @@ import { toRaw } from "vue"
 import { saveAs } from 'file-saver'
 
 
+
+export async function selectRom(rom, emitter, router) { 
+    localStorage.setItem('currentRom', JSON.stringify(rom))
+    await router.push(import.meta.env.BASE_URL+'details')
+    emitter.emit('currentRom', rom)
+}
+
 export async function downloadRom(rom, emitter, filesToDownload=[]) {
     emitter.emit('snackbarScan', {'msg': "Downloading "+rom.file_name+"...", 'icon': 'mdi-download', 'color': 'green'})
     if(rom.multi){
@@ -35,7 +42,7 @@ export async function downloadSave(rom, emitter) { console.log("Downloading "+ro
 export function normalizeString(s) { return s.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g,"") }
 
 export const views = {
-    0:{'view': 'small', 'icon': 'mdi-view-comfy', 'size-lg': 1, 'size-md': 2, 'size-sm': 2, 'size-xs': 3, 'size-cols': 4},
-    1:{'view': 'big', 'icon': 'mdi-view-module', 'size-lg': 2, 'size-md': 3, 'size-sm': 3, 'size-xs': 6, 'size-cols': 6},
-    2:{'view': 'list', 'icon': 'mdi-view-list', 'size-lg': 1, 'size-md': 2, 'size-sm': 2, 'size-xs': 3, 'size-cols': 4}
+    0:{'view': 'small', 'icon': 'mdi-view-module', 'size-lg': 1, 'size-md': 2, 'size-sm': 2, 'size-xs': 3, 'size-cols': 4},
+    1:{'view': 'big', 'icon': 'mdi-view-list', 'size-lg': 2, 'size-md': 3, 'size-sm': 3, 'size-xs': 6, 'size-cols': 6},
+    2:{'view': 'list', 'icon': 'mdi-view-comfy', 'size-lg': 1, 'size-md': 2, 'size-sm': 2, 'size-xs': 3, 'size-cols': 4}
 }
diff --git a/frontend/src/views/Gallery.vue b/frontend/src/views/Gallery.vue
index 58a233d1c..3ecdcd8c9 100644
--- a/frontend/src/views/Gallery.vue
+++ b/frontend/src/views/Gallery.vue
@@ -2,7 +2,9 @@
 import axios from 'axios'
 import { ref, inject, onMounted } from 'vue'
 import { normalizeString, views } from '@/utils/utils.js'
-import GameCard from '@/components/GameCard/Base.vue'
+import GameCard from '@/components/GameEntry/Card/Base.vue'
+import GameListHeader from '@/components/GameEntry/ListItem/Header.vue'
+import GameListItem from '@/components/GameEntry/ListItem/Base.vue'
 
 // Props
 const roms = ref([])
@@ -48,18 +50,23 @@ onMounted(() => {
 
 <template>
 
-    <v-row>
+    <v-row v-show="currentView != 2">
         <v-col v-for="rom in romsFiltered"
             :cols="views[currentView]['size-cols']"
             :xs="views[currentView]['size-xs']"
             :sm="views[currentView]['size-sm']"
             :md="views[currentView]['size-md']"
             :lg="views[currentView]['size-lg']"
-            class="pa-1"
-            v-show="currentView != 2">
+            class="pa-1">
             <game-card :rom="rom"/>
         </v-col>
     </v-row>
+
+    <v-list v-show="currentView == 2">
+        <game-list-header/>
+        <v-divider class="border-opacity-100 ml-3 mb-4 mr-3" :thickness="2"/>
+        <game-list-item v-for="rom in romsFiltered" :rom="rom"/>
+    </v-list>
     
     <v-row v-if="noRoms" class="d-flex justify-center align-center mt-16">
         <div class="text-h6">Feels cold here... <v-icon>mdi-emoticon-sad</v-icon></div>
@@ -70,3 +77,18 @@ onMounted(() => {
     </v-dialog>
 
 </template>
+
+<style scoped>
+.rom{
+    transition: opacity .4s ease-in-out;
+}
+.rom.on-hover {
+    opacity: 1;
+}
+.rom:not(.on-hover) {
+    opacity: 0.85;
+}
+.rom{
+    cursor: pointer;
+}
+</style>
\ No newline at end of file

From 598abf66821ab0c0d923dd71eb3445d2ae0cc2a0 Mon Sep 17 00:00:00 2001
From: zurdi zurdo <zurdizurdo25@gmail.com>
Date: Thu, 13 Apr 2023 00:27:40 +0200
Subject: [PATCH 4/6] changelog updated

---
 CHANGELOG.md | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9c5d8a272..f1581282b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,12 @@
+# v1.6.5 (_12-04-2023_)
+
+## Added
+ - Multiple games gallery display modes
+## Changed
+ - Some fixes and improvements
+
+<br>
+
 # v1.6.4 (_12-04-2023_)
 
 ## Added

From 67d48d9eceb6ab3e6f6412f26b4da12a4f896cb6 Mon Sep 17 00:00:00 2001
From: zurdi zurdo <zurdizurdo25@gmail.com>
Date: Thu, 13 Apr 2023 00:43:07 +0200
Subject: [PATCH 5/6] ui tweaks

---
 frontend/src/App.vue                                  | 2 +-
 frontend/src/components/GameEntry/ListItem/Base.vue   | 2 +-
 frontend/src/components/GameEntry/ListItem/Header.vue | 4 ++--
 frontend/src/views/Details.vue                        | 2 +-
 frontend/src/views/Gallery.vue                        | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index c38c41017..b125fec88 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -25,7 +25,7 @@ emitter.on('refresh', () => { refresh.value = !refresh.value })
     <platforms-drawer :key="refresh"/>
 
     <v-main>
-      <v-container fluid>
+      <v-container class="pa-0" fluid>
         <router-view :key="refresh"/>
       </v-container>
     </v-main>
diff --git a/frontend/src/components/GameEntry/ListItem/Base.vue b/frontend/src/components/GameEntry/ListItem/Base.vue
index ef2b231dd..74797e8d6 100644
--- a/frontend/src/components/GameEntry/ListItem/Base.vue
+++ b/frontend/src/components/GameEntry/ListItem/Base.vue
@@ -21,7 +21,7 @@ const emitter = inject('emitter')
         class="pa-2">
         <v-row class="text-subtitle-2">
             <v-col md="3" lg="3"><p>{{ rom.name }}</p></v-col>
-            <v-col md="3" lg="3" class="hidden-sm-and-down"><p>{{ rom.file_name }}</p></v-col>
+            <v-col md="3" lg="4" class="hidden-sm-and-down"><p>{{ rom.file_name }}</p></v-col>
             <v-col class="hidden-sm-and-down"><p>{{ rom.p_slug }}</p></v-col>
             <v-col class="hidden-sm-and-down"><p>{{ rom.file_size }} MB</p></v-col>
             <v-col class="hidden-sm-and-down"><p>{{ rom.region }}</p></v-col>
diff --git a/frontend/src/components/GameEntry/ListItem/Header.vue b/frontend/src/components/GameEntry/ListItem/Header.vue
index a552d1bcb..da340f4b5 100644
--- a/frontend/src/components/GameEntry/ListItem/Header.vue
+++ b/frontend/src/components/GameEntry/ListItem/Header.vue
@@ -1,8 +1,8 @@
 <template>
-    <v-list-item class="pa-2 ml-3 mr-3 text-body-1">
+    <v-list-item class="pl-2 pr-2 pb-2 ml-3 mr-3 text-body-1">
         <v-row class="">
             <v-col cols="3"><p>Name</p></v-col>
-            <v-col cols="3" class="hidden-sm-and-down"><p>File</p></v-col>
+            <v-col cols="4" class="hidden-sm-and-down"><p>File</p></v-col>
             <v-col class="hidden-sm-and-down"><p>Platform</p></v-col>
             <v-col class="hidden-sm-and-down"><p>Size</p></v-col>
             <v-col class="hidden-sm-and-down"><p>Region</p></v-col>
diff --git a/frontend/src/views/Details.vue b/frontend/src/views/Details.vue
index 719cbae4c..a0de99d2f 100644
--- a/frontend/src/views/Details.vue
+++ b/frontend/src/views/Details.vue
@@ -75,7 +75,7 @@ async function deleteRom() {
 </script>
 
 <template>
-    <v-row class="text-body-1 justify-center">
+    <v-row class="text-body-1 justify-center pa-5">
         <v-col cols="8" xs="8" sm="4" md="3" lg="2">
             <v-container class="pa-0" fluid>
                 <v-row>
diff --git a/frontend/src/views/Gallery.vue b/frontend/src/views/Gallery.vue
index 3ecdcd8c9..b2b95734a 100644
--- a/frontend/src/views/Gallery.vue
+++ b/frontend/src/views/Gallery.vue
@@ -50,7 +50,7 @@ onMounted(() => {
 
 <template>
 
-    <v-row v-show="currentView != 2">
+    <v-row class="pa-5" v-show="currentView != 2">
         <v-col v-for="rom in romsFiltered"
             :cols="views[currentView]['size-cols']"
             :xs="views[currentView]['size-xs']"

From 0b3cb6447ba69fc8ccbed8dc6a35cf8f7c67a5ea Mon Sep 17 00:00:00 2001
From: zurdi zurdo <zurdizurdo25@gmail.com>
Date: Thu, 13 Apr 2023 00:45:30 +0200
Subject: [PATCH 6/6] version upgraded to 1.6.5

---
 frontend/.env              | 2 +-
 frontend/package-lock.json | 4 ++--
 frontend/package.json      | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/.env b/frontend/.env
index 009fc3a8e..e88ce292c 100644
--- a/frontend/.env
+++ b/frontend/.env
@@ -1 +1 @@
-VITE_ROMM_VERSION=1.6.4
\ No newline at end of file
+VITE_ROMM_VERSION=1.6.5
\ No newline at end of file
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index ea9a765d0..02035abfe 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "romm",
-  "version": "1.6.4",
+  "version": "1.6.5",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "romm",
-      "version": "1.6.4",
+      "version": "1.6.5",
       "dependencies": {
         "@mdi/font": "7.0.96",
         "axios": "^1.3.4",
diff --git a/frontend/package.json b/frontend/package.json
index a29a7420a..612b70b78 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "romm",
-  "version": "1.6.4",
+  "version": "1.6.5",
   "private": true,
   "scripts": {
     "dev": "vite --host",