UPD: Fancy layout changes

src/App.vue

@@ -22,11 +22,7 @@ store.fetchProfiles()
     <div class="flex-1 min-h-0 flex flex-row">
       <ProfileManager
         class="basis-1/3 min-w-80 flex-1 flex flex-col border-solid border-0 border-r bg-zinc-900 bg-opacity-30" />
-      <div class="basis-1/3 flex-1 flex flex-col border-solid border-0 border-r">
+      <DevicePreview class="basis-1/3 flex-col flex border-solid border-0 border-r" />
-        <DevicePreview class="flex-col flex flex-none" />
-        <ConfigSection class="flex-none" :title="$t('config_options.title')" :foldable="false" :icon-component="Bolt" />
-        <ConfigSelect v-model="currentConfigPage" class="overflow-y-auto flex-1" />
-      </div>
       <ConfigPane
         class="flex-1 basis-2/5 flex flex-col border-solid border-0 border-r bg-zinc-900 bg-opacity-30"
         :page="currentConfigPage" />

src/components/Navbar.vue

@@ -1,25 +1,27 @@
 <template>
   <div class="flex app-titlebar">
-    <Menubar class="w-full h-20 rounded-none bg-zinc-950">
+    <Menubar class="w-full h-14 rounded-none bg-zinc-900 justify-between text-muted-foreground font-mono">
-      <div
+      <div class="flex items-center">
-        class="p-3 min-w-48 app-titlebar-button"
+        <h1
-        @click="$refs.zerooneSubtitle.scramble(1,100,0); $refs.zerooneTitle.scramble(1,100,0)">
+          class="text-2xl min-w-32 app-titlebar-button ml-3 text-zinc-100"
-        <h1 class="text-3xl">
+          @click="$refs.zerooneTitle.scramble(1,100,0); $refs.zerooneSubtitle.scramble(1,75,30)">
           <ScrambleText
             ref="zerooneTitle"
             text=" ZERO/ONE" scramble-on-mount :scramble-amount="1" :fill-interval="100"
             :replace-interval="100"
           />
         </h1>
-        <p class="text-xs text-muted-foreground">
+        <h2 class="text-sm min-w-48 text-muted-foreground font-mono">
+          ::
           <ScrambleText
             ref="zerooneSubtitle"
             text="Haptics Configurator" scramble-on-mount :scramble-amount="1" :fill-interval="35"
             :replace-interval="40" />
-        </p>
+        </h2>
       </div>
+      <div class="flex gap-2">
         <MenubarMenu>
-        <MenubarTrigger v-t="'navbar.device.title'" class="app-titlebar-button" />
+          <MenubarTrigger v-t="'navbar.device.title'" class="app-titlebar-button text-muted-foreground" />
           <MenubarContent>
             <!-- TODO: Switch keyboard shortcut icons based on platform -->
             <MenubarItem>
@@ -42,22 +44,32 @@
             </MenubarItem>
           </MenubarContent>
         </MenubarMenu>
-      <span class="pl-14 inline-block">STATUS: <b class="font-heading text-lg">CONNECTED</b></span>
+        <MenubarMenu>
-      <span class="text-muted-foreground px-5 inline-block">///</span>
+          <MenubarTrigger class="app-titlebar-button text-muted-foreground">About</MenubarTrigger>
-      <p>SYNCING...</p>
+        </MenubarMenu>
-      <div class="absolute top-0 right-0 flex h-9 w-32">
+        <MenubarMenu>
+          <MenubarTrigger class="app-titlebar-button text-muted-foreground">Help</MenubarTrigger>
+        </MenubarMenu>
+      </div>
+      <div class="text-sm">
+        Status: <span class="text-zinc-200">Connected :: Syncing...</span>
+      </div>
+      <Button variant="outline" class="app-titlebar-button">
+        Disconnect
+      </Button>
+      <div class="flex h-full w-32">
         <button
-          class="grow flex justify-center items-center app-titlebar-button hover:bg-opacity-100 bg-zinc-900 text-zinc-100 bg-opacity-50"
+          class="grow flex justify-center items-center app-titlebar-button hover:text-white"
           @click="oi('Not implemented ¯\\_(ツ)_/¯')">
           <Minus class="h-5 w-5 mr-0.5" />
         </button>
         <button
-          class="grow flex justify-center items-center app-titlebar-button hover:bg-opacity-100 bg-zinc-900 text-zinc-100 bg-opacity-50"
+          class="grow flex justify-center items-center app-titlebar-button hover:text-white"
           @click="oi('Not implemented ¯\\_(ツ)_/¯')">
-          <Square class="h-4 w-4 mr-0.5" />
+          <Square class="h-3.5 w-3.5 mr-0.5" />
         </button>
         <button
-          class="grow flex justify-center items-center app-titlebar-button bg-orange-950 hover:bg-orange-900"
+          class="grow flex justify-center items-center app-titlebar-button hover:text-white"
           @click="oi('Not implemented ¯\\_(ツ)_/¯')">
           <X class="h-5 w-5 mr-0.5" />
         </button>
@@ -77,6 +89,7 @@ import {
 } from '@/components/ui/menubar/index.js'
 import ScrambleText from '@/components/effects/ScrambleText.vue'
 import { X, Square, Minus } from 'lucide-vue-next'
+import { Button } from '@/components/ui/button'
 
 const oi = (msg) => alert(msg)
 

src/components/config/ConfigPane.vue

@@ -1,18 +1,16 @@
 <template>
   <div>
-    <div
+    <div class="flex font-heading">
-      class="flex-none px-6 h-20 flex items-center bg-zinc-900 bg-opacity-40">
+      <button
-      <div>
+        v-for="(option, key) in configPageOptions" :key="key"
-        <h1 class="text-lg">
+        class="flex-1 p-4 items-center text-center"
-          <ScrambleText class="align-middle" :text="$t(`config_options.${page}.title`)" />
+        :class="currentPage!==key ? 'hover:bg-zinc-800 text-zinc-200' : 'text-black bg-zinc-200 hover:bg-zinc-100'"
-        </h1>
+        @click="currentPage = key">
-        <p class="text-xs text-muted-foreground">
+        {{ $t(option.titleKey) }}
-          <ScrambleText class="align-middle" :text="$t(`config_options.${page}.subtitle`)" :replace-interval="5" />
+      </button>
-        </p>
-      </div>
     </div>
     <div class="grow overflow-y-auto">
-      <component :is="configPages[page]" />
+      <component :is="configPageOptions[currentPage].component" />
     </div>
   </div>
 </template>
@@ -21,21 +19,30 @@ import LEDsConfig from '@/components/config/pages/LEDsConfig.vue'
 import ProfileConfig from '@/components/config/pages/ProfileConfig.vue'
 import MappingConfig from '@/components/config/pages/MappingConfig.vue'
 import HapticConfig from '@/components/config/pages/HapticConfig.vue'
-import ScrambleText from '@/components/effects/ScrambleText.vue'
-import DevPlayground from '@/components/config/pages/DevPlayground.vue'
 
 defineProps({
-  page: {
+  currentPage: {
     type: String,
-    default: 'profile_settings',
+    default: 'profileConfig',
   },
 })
 
-const configPages = {
+const configPageOptions = {
-  profile_settings: ProfileConfig,
+  profileConfig: {
-  feedback_designer: HapticConfig,
+    titleKey: 'config_options.profile_settings.title',
-  mapping_configuration: MappingConfig,
+    component: ProfileConfig,
-  light_designer: LEDsConfig,
+  },
-  dev_playground: DevPlayground,
+  hapticConfig: {
+    titleKey: 'config_options.feedback_designer.title',
+    component: HapticConfig,
+  },
+  mappingConfig: {
+    titleKey: 'config_options.mapping_configuration.title',
+    component: MappingConfig,
+  },
+  ledsConfig: {
+    titleKey: 'config_options.light_designer.title',
+    component: LEDsConfig,
+  },
 }
 </script>

src/components/config/ConfigSelect.vue

@@ -15,9 +15,6 @@
             v-t="config.badgeKey"
             class="font-mono ml-2 rounded-full h-4 align-middle bg-zinc-900 text-muted-foreground" />
         </h1>
-        <p class="text-xs" :class="current_tab===config.id?'text-black' : 'text-muted-foreground'">
-          {{ $t(`config_options.${config.id}.subtitle`) }}
-        </p>
       </div>
       <ChevronRight v-if="current_tab === config.id" class="float-right" />
     </div>

src/components/device/DevicePreview.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
-    <div class="px-4 pt-5 pb-3">
+    <div class="flex px-4 pt-5 pb-3 items-baseline font-heading">
-      <h1 class="text-lg">
+      <span class="text-lg">{{ $t('preview.title') }}</span>
-        {{ $t('preview.title') }}
+      &nbsp;
-      </h1>
+      <span class="text-zinc-600">(Nano_D++)</span>
     </div>
     <div class="flex justify-center">
       <div

src/lang/en.json

@@ -5,7 +5,7 @@
   "config_options": {
     "dev_playground": {
       "subtitle": "UI Designer's Paradise",
-      "title": "Dev Playground"
+      "title": "Debug"
     },
     "feedback_designer": {
       "auditory_response": {
@@ -27,12 +27,12 @@
         "title": "Haptic Response"
       },
       "subtitle": "Adjust haptic and auditory feedback",
-      "title": "Feedback Designer",
+      "title": "Feedback",
       "total_positions": "Total Positions"
     },
     "gui_designer": {
       "subtitle": "Adjust graphic interface parameters",
-      "title": "GUI Designer"
+      "title": "Display"
     },
     "light_designer": {
       "led_colors": "LED Colors",
@@ -42,7 +42,7 @@
       "primary_color": "Primary",
       "secondary_color": "Secondary",
       "subtitle": "Adjust behavior of LED Ring. Turn On/Off.",
-      "title": "Light Designer"
+      "title": "Lighting"
     },
     "mapping_configuration": {
       "key_mapping": {
@@ -60,7 +60,7 @@
         "title": "Knob Mapping"
       },
       "subtitle": "Assign function to Knob and Keys",
-      "title": "Mapping Configuration"
+      "title": "Mapping"
     },
     "profile_settings": {
       "connection_type": {
@@ -81,7 +81,7 @@
         "title": "Profile Properties"
       },
       "subtitle": "Operation mode and Profile Naming",
-      "title": "Profile Settings"
+      "title": "Profile"
     },
     "title": "Configuration Options"
   },
@@ -98,13 +98,13 @@
     }
   },
   "preview": {
-    "title": "Live Preview"
+    "title": "Preview"
   },
   "profiles": {
     "filter_placeholder": "Filter Profiles...",
     "name_placeholder": "Profile name",
     "not_found": "No profiles found ;-;",
     "subtitle": "Customize to your heart's content",
-    "title": "Device Profiles"
+    "title": "Profiles"
   }
 }