ADD: Zero/One skin select

src/components/device/DevicePreview.vue

@@ -2,7 +2,8 @@
   <div class="aspect-[800/1100]">
     <div
       class="bg-contain bg-top bg-no-repeat h-full w-full relative"
-      :style="{backgroundImage: `linear-gradient(to bottom, black, rgba(0,0,0,0.2) 12%, rgba(0,0,0,0.3) 95%, black), url(${RenderNano})`}">
+      :style="{backgroundImage: `linear-gradient(to bottom, black, rgba(0,0,0,0.25) 12%, rgba(0,0,0,0.35) 95%, black), url(${previewDeviceImage})`,
+      backgroundBlendMode: 'multiply'}">
       <Transition name="fade">
         <div v-if="store.connected" class="px-10 h-12 flex justify-between items-center">
           <h2>
@@ -56,7 +57,7 @@
       <Transition name="fade-delayed">
         <DeviceKeys
           v-if="store.connected"
-          class="absolute w-[72.7%] top-[77.2%] gap-[2.8%] left-0 right-0 mx-auto"
+          class="absolute w-[72.7%] top-[77.5%] gap-[2.2%] left-0 right-0 mx-auto"
           :selected="store.selectedFeature === 'key' ? store.selectedKey : ''"
           @select="store.selectKey" />
       </Transition>
@@ -64,7 +65,8 @@
   </div>
 </template>
 <script setup>
-import RenderNano from '@/assets/images/renderNano.png'
+import RenderNanoOne from '@/assets/images/renderNanoOneTransparent.png'
+import RenderNanoZero from '@/assets/images/renderNanoZeroTransparent.png'
 import LogoMidi from '@/assets/logos/logoMidi.svg'
 import DeviceBar from '@/components/device/DeviceBar.vue'
 import { useStore } from '@/store'
@@ -80,6 +82,13 @@ const barValue = computed(() => value.value / 127 * 100)
 
 const store = useStore()
 
+const previewDeviceImages = {
+  nanoOne: RenderNanoOne,
+  nanoZero: RenderNanoZero,
+}
+
+const previewDeviceImage = computed(() => previewDeviceImages[store.previewDeviceModel || 'nanoOne'])
+
 const targetValue = ref(69)
 const animateValue = () => {
   targetValue.value = Math.floor(Math.random() * 127)

src/components/navbar/Navbar.vue

@@ -43,6 +43,10 @@
               <MenubarShortcut>⌘N</MenubarShortcut>
             </MenubarItem>
             <MenubarSeparator />
+            <MenubarItem @click="store.switchPreviewDeviceModel">
+              Skin: {{ previewDeviceNames[store.previewDeviceModel || 'nanoOne'] }}
+            </MenubarItem>
+            <MenubarSeparator />
             <MenubarItem>{{ $t('navbar.device.preferences') }}
               <MenubarShortcut>⌘,</MenubarShortcut>
             </MenubarItem>
@@ -136,6 +140,11 @@ const { electron } = window
 const isMacOS = electron?.platform === 'darwin'
 const zoomFactor = ref(1)
 
+const previewDeviceNames = ref({
+  nanoOne: 'One',
+  nanoZero: 'Zero',
+})
+
 onMounted(() => {
   window.addEventListener('resize', () => {
     zoomFactor.value = window.outerWidth / window.innerWidth

src/components/old/DevicePreviewOld.vue

@@ -8,7 +8,7 @@
     <div class="flex justify-center">
       <div
         class="flex bg-cover mb-6 w-72 aspect-square"
-        style="background-image: url(../../assets/icons/xl-bg-ico.svg)">
+        style="background-image: url(../../assets/old/xl-bg-ico.svg)">
         <div class="flex flex-col w-full justify-center m-9 rounded-full overflow-hidden">
           <div class="self-center w-8 mb-1 opacity-50">
             <img src="../../assets/logos/logoMidi.svg" alt="midi-logo">
@@ -27,5 +27,5 @@
 </template>
 <script setup>
 import DeviceBar from '@/components/device/DeviceBar.vue'
-import DeviceBackground from '@/assets/icons/xl-bg-ico.svg'
+import DeviceBackground from '@/assets/old/xl-bg-ico.svg'
 </script>

src/store.js

@@ -39,6 +39,7 @@ export const useStore = defineStore('main', {
           },
         },
       },
+      previewDeviceModel: 'nanoOne',
     }
   }, getters: {
     profiles: (state) => state.profileCategories.flatMap(c => c.profiles),
@@ -153,6 +154,9 @@ export const useStore = defineStore('main', {
     setConnected(connected) {
       this.connected = connected
     },
+    switchPreviewDeviceModel() {
+      this.previewDeviceModel = this.previewDeviceModel === 'nanoOne' ? 'nanoZero' : 'nanoOne'
+    },
   },
 })