ui redesign

frontend/src/App.vue

@@ -6,25 +6,24 @@ import RomsGallery from '@/components/RomsGallery.vue'
 
 
 const romsGalleryRef = ref(null)
-const currentPlatform = localStorage.getItem('currentPlatform')
+const currentPlatformSlug = localStorage.getItem('currentPlatformSlug') || ""
 useTheme().global.name.value = localStorage.getItem('theme') || 'dark'
 
 
-function getRoms(platform){
-  localStorage.setItem('currentPlatform', platform)
-  romsGalleryRef.value.getRoms(platform)
+function getRoms(platformSlug){
+  romsGalleryRef.value.getRoms(platformSlug)
 }
 
 
 onMounted(() => {
-  if(currentPlatform){ getRoms(currentPlatform) }
+  if(currentPlatformSlug){ getRoms(currentPlatformSlug) }
 })
 </script>
 
 <template>
   <v-app>
     
-    <platforms-bar @currentPlatform="(platform) => getRoms(platform)"/>
+    <platforms-bar @currentPlatformSlug="(platformSlug) => getRoms(platformSlug)"/>
 
     <v-main>
       <v-container fluid>

frontend/src/components/PlatformsBar.vue

@@ -1,10 +1,12 @@
 <script setup>
-import axios from 'axios'
-import { ref } from "vue";
+import axios from "axios"
+import { ref } from "vue"
 import { useTheme } from "vuetify";
 
 
+const emit = defineEmits(['currentPlatformSlug'])
 const platforms = ref([])
+const currentPlatformName = ref(localStorage.getItem('currentPlatformName') || "")
 const scanOverwrite = ref(false)
 const scanning = ref(false)
 const drawer = ref(null)
@@ -21,6 +23,13 @@ async function getPlatforms() {
     }).catch((error) => {console.log(error)})
 }
 
+function selectPlatform(platform){    
+    localStorage.setItem('currentPlatformSlug', platform.slug)
+    localStorage.setItem('currentPlatformName', platform.name)
+    currentPlatformName.value = platform.name
+    emit('currentPlatformSlug', platform.slug)
+}
+
 async function scan() {
     console.log("scanning...")
     scanning.value = true
@@ -42,38 +51,45 @@ getPlatforms()
 </script>
 
 <template>
-    <v-toolbar color="primary">
-        <v-app-bar-nav-icon @click="drawer = !drawer" />
+    <v-app-bar color="toolbar" >
+        <v-app-bar-nav-icon icon="mdi mdi-controller" @click="drawer = !drawer" />
 
-        <v-spacer></v-spacer>
+        <v-toolbar-title>{{ currentPlatformName }}</v-toolbar-title>
 
-        <v-btn icon>
-        <v-icon>mdi-magnify</v-icon>
-        </v-btn>
+        <v-btn icon><v-icon>mdi-magnify</v-icon></v-btn>
 
-        <v-btn icon>
-        <v-icon>mdi-dots-vertical</v-icon>
-        </v-btn>
-    </v-toolbar>
+        <v-menu :close-on-content-click="false" >
+            <template v-slot:activator="{ props }">
+                <v-btn v-bind="props" icon><v-icon>mdi-dots-vertical</v-icon></v-btn>
+            </template>
+            <v-list>
+                <v-list-item class="d-flex align-center justify-center mb-2">
+                    <v-btn :disabled="scanning" color="secondary" prepend-icon="mdi mdi-magnify-scan" @click="scan()" inset >
+                        <p v-if="!scanning">Scan</p>
+                        <p v-if="scanning">Scanning</p>
+                        <v-progress-circular v-show="scanning" indeterminate color="primary" :width="2" :size="20" class="ml-2"></v-progress-circular>
+                    </v-btn>
+                </v-list-item>
+                <v-divider ></v-divider>
+                <v-list-item class="d-flex align-center justify-center">
+                    <v-switch prepend-icon="mdi mdi-brightness-6" class="pr-2 pl-2" v-model="darkMode" @change="toggleTheme()" hide-details="true" inset/>
+                </v-list-item>
+            </v-list>
+        </v-menu>
+    </v-app-bar>
 
     <v-navigation-drawer width="250" v-model="drawer" >
-        <v-list>
-            <v-list-item prepend-icon="mdi mdi-controller">Rom Manager</v-list-item>
-        </v-list>
-
-        <v-divider ></v-divider>
-
         <v-list nav>
             <v-list-item v-for="platform in platforms" 
                 :title="platform.name" 
                 :value="platform.slug"
                 :key="platform"
-                @:click="$emit('currentPlatform', platform.slug)"/>
+                @:click="selectPlatform(platform)"/>
         </v-list>
 
-        <v-divider ></v-divider>
+        <!-- <v-divider ></v-divider> -->
 
-        <v-list>
+        <!-- <v-list>
             <v-row>
                 <div class="font-weight-bold d-flex align-center justify-center fill-height ml-3">
                     <v-col>
@@ -85,16 +101,22 @@ getPlatforms()
                     </v-col>
                 </div>
             </v-row>
-        </v-list>
+        </v-list> -->
 
-        <v-divider ></v-divider>
+        <!-- <v-divider ></v-divider>
 
         <v-list>
             <div class="font-weight-bold d-flex align-center justify-center fill-height">
                 <v-switch prepend-icon="mdi mdi-brightness-6" v-model="darkMode" @change="toggleTheme()" inset class="ml-3"/>
             </div>
-        </v-list>
+        </v-list> -->
 
     </v-navigation-drawer>
 
 </template>
+
+<style scoped>
+/* .dark_switch {
+    overflow: visible !important;
+} */
+</style>

frontend/src/plugins/vuetify.js

@@ -20,12 +20,14 @@ export default createVuetify({
         colors: {
           primary: '#212121',
           secondary: '#BDBDBD',
+          toolbar: '#212121',
         },
       },
       light: {
         colors: {
           primary: '#1867C0',
           secondary: '#42A5F5',
+          toolbar: '#42A5F5'
         }
       }
     }