ADD: Multi device mocks

src/components/navbar/Navbar.vue

@@ -4,7 +4,7 @@
       <div v-if="isMacOS" :style="{width: 80 / zoomFactor + 'px'}" />
       <div class="flex items-center">
         <h1
-          class="text-2xl min-w-32 app-titlebar-button text-zinc-100"
+          class="text-2xl min-w-32   app-titlebar-button text-zinc-100 text-nowrap"
           @click="$refs.zerooneTitle.scramble(1,100,0); $refs.zerooneSubtitle.scramble(1,75,30)">
           <ScrambleText
             ref="zerooneTitle"
@@ -12,7 +12,7 @@
             :replace-interval="100"
           />
         </h1>
-        <h2 class="text-sm min-w-[188px] text-muted-foreground font-mono">
+        <h2 class="text-sm min-w-[188px] text-muted-foreground font-mono text-nowrap">
           ::
           <ScrambleText
             ref="zerooneSubtitle"
@@ -25,16 +25,27 @@
       </div>
       <div class="flex gap-2">
         <MenubarMenu>
-          <MenubarTrigger v-t="'navbar.device.title'" class="app-titlebar-button" />
+          <MenubarTrigger class="app-titlebar-button">
+            <template v-if="store.multipleDevicesConnected">
+              Devices<span class="text-zinc-600">&nbsp;(2)</span>
+            </template>
+            <template v-else>
+              Device
+            </template>
+          </MenubarTrigger>
           <MenubarContent>
             <!-- TODO: Switch keyboard shortcut icons based on platform -->
             <MenubarItem>
-              {{ $t('navbar.device.disconnect') }}
+              {{ store.connected ? $t('navbar.device.disconnect') : $t('navbar.device.connect') }}
               <MenubarShortcut>⌘D</MenubarShortcut>
             </MenubarItem>
-            <MenubarItem>{{ $t('navbar.device.about') }}</MenubarItem>
+            <MenubarItem v-if="store.multipleDevicesConnected">Next Device
+              <MenubarShortcut>⌘N</MenubarShortcut>
+            </MenubarItem>
             <MenubarSeparator />
-            <MenubarItem>{{ $t('navbar.device.preferences') }}</MenubarItem>
+            <MenubarItem>{{ $t('navbar.device.preferences') }}
+              <MenubarShortcut>⌘,</MenubarShortcut>
+            </MenubarItem>
             <MenubarSeparator />
             <MenubarItem>{{ $t('navbar.device.export') }}
               <MenubarShortcut>⌘E</MenubarShortcut>
@@ -54,25 +65,16 @@
         <MenubarMenu>
           <MenubarTrigger class="app-titlebar-button">Help</MenubarTrigger>
           <MenubarContent>
-            <!-- TODO: Switch keyboard shortcut icons based on platform -->
+            <MenubarItem>Help?</MenubarItem>
-            <MenubarItem>
+            <MenubarItem>HELP!</MenubarItem>
-              {{ $t('navbar.device.disconnect') }}
+            <MenubarItem>HEEEELLLP!!!</MenubarItem>
-              <MenubarShortcut>⌘D</MenubarShortcut>
-            </MenubarItem>
-            <MenubarItem>{{ $t('navbar.device.about') }}</MenubarItem>
             <MenubarSeparator />
-            <MenubarItem>{{ $t('navbar.device.preferences') }}</MenubarItem>
+            <MenubarItem>Aaah!!!</MenubarItem>
+            <MenubarItem>AAAAAaaaaaahh!!!</MenubarItem>
+            <MenubarItem>AAAAAAAAAAAAAaaaaaargh!!!</MenubarItem>
             <MenubarSeparator />
-            <MenubarItem>{{ $t('navbar.device.export') }}
+            <MenubarItem>Contact Support</MenubarItem>
-              <MenubarShortcut>⌘E</MenubarShortcut>
+            <MenubarItem>Report a Bug</MenubarItem>
-            </MenubarItem>
-            <MenubarItem>{{ $t('navbar.device.import') }}
-              <MenubarShortcut>⌘I</MenubarShortcut>
-            </MenubarItem>
-            <MenubarSeparator />
-            <MenubarItem>{{ $t('navbar.device.quit') }}
-              <MenubarShortcut>⌘Q</MenubarShortcut>
-            </MenubarItem>
           </MenubarContent>
         </MenubarMenu>
       </div>

src/components/profile/ProfileManager.vue

@@ -18,7 +18,7 @@
         <Transition name="fade">
           <button
             v-if="!showProfileConfig"
-            class="bg-zinc-200 text-black hover:bg-zinc-100 rounded-full aspect-square h-7 flex justify-center items-center"
+            class="bg-zinc-200 text-black hover:bg-zinc-100 rounded-lg h-8 aspect-square flex justify-center items-center"
             @click="store.addProfile">
             <Plus class="h-4" />
           </button>

src/lang/en.json

@@ -90,8 +90,8 @@
       "about": "About Device",
       "connect": "Connect",
       "disconnect": "Disconnect",
-      "export": "Export JSON",
+      "export": "Export Profiles",
-      "import": "Import JSON",
+      "import": "Import Profiles",
       "preferences": "Preferences",
       "quit": "Quit",
       "title": "Device"

src/store.js

@@ -18,6 +18,7 @@ export const useStore = defineStore('main', {
       profileCategories: [],
       selectedProfileId: null,
       connected: false,
+      connectedDevices: ['test1', 'test2'],
       selectedFeature: 'knob',
       selectedKey: 'a',
       currentConfigPage: 'mapping',
@@ -46,6 +47,7 @@ export const useStore = defineStore('main', {
     selectedProfile: (state) => state.profiles.find(p => p.id === state.selectedProfileId),
     currentConfigComponent: (state) => state.configPages[state.selectedFeature][state.currentConfigPage]?.component || WIP,
     currentConfigPages: (state) => state.configPages[state.selectedFeature] || {},
+    multipleDevicesConnected: (state) => state.connectedDevices.length > 1,
   }, actions: {
     selectProfile(id) {
       if (!this.profileIds.includes(id)) return false