UPD: Profile & nav styling

src/components/Navbar.vue

@@ -19,6 +19,9 @@
             :replace-interval="40" />
         </h2>
       </div>
+      <div>
+        <Separator orientation="vertical" class="h-6" />
+      </div>
       <div class="flex gap-2">
         <MenubarMenu>
           <MenubarTrigger v-t="'navbar.device.title'" class="app-titlebar-button text-muted-foreground" />
@@ -51,8 +54,12 @@
           <MenubarTrigger class="app-titlebar-button text-muted-foreground">Help</MenubarTrigger>
         </MenubarMenu>
       </div>
-      <div class="text-sm text-nowrap">
+      <div>
-        Status: <span class="text-zinc-200">Connected :: Syncing...</span>
+        <Separator orientation="vertical" class="h-6" />
+      </div>
+      <div class="grow" />
+      <div class="text-sm text-nowrap px-2">
+        Status: <span class="text-zinc-200">Connected :: Operation</span>
       </div>
       <Button variant="outline" class="app-titlebar-button">
         Disconnect
@@ -91,6 +98,7 @@ import ScrambleText from '@/components/effects/ScrambleText.vue'
 import { X, Square, Minus } from 'lucide-vue-next'
 import { Button } from '@/components/ui/button'
 import { ref } from 'vue'
+import { Separator } from '@/components/ui/separator'
 
 const resizeable = ref(false)
 

src/components/config/ConfigPane.vue

@@ -3,7 +3,7 @@
     <div class="flex">
       <div v-for="(option, index) in configPageOptions" :key="index" class="flex flex-1 items-center">
         <button
-          class="flex-1 h-12 items-center text-center group px-1 font-heading"
+          class="flex-1 h-12 items-center text-center group px-3 font-heading"
           :class="index===currentPage ? 'bg-zinc-900': 'hover:bg-zinc-800 text-zinc-200 bg-zinc-950'"
           @click="currentPage = index">
           {{ $t(option.titleKey) }}

src/components/profile/ProfileButton.vue

@@ -10,7 +10,7 @@
       <input
         ref="profileNameInput" v-model="nameInput"
         onfocus="this.select()" :placeholder="$t('profiles.name_placeholder')"
-        class="flex-1 pl-10 h-full bg-transparent focus-visible:ring-0 focus-visible:outline-none"
+        class="flex-1 pl-6 h-full bg-transparent focus-visible:ring-0 focus-visible:outline-none min-w-0"
         :class="{'font-semibold bg-zinc-200 hover:bg-zinc-100 text-black' : selected,
         'hover:bg-zinc-900 bg-opacity-50 text-white': !selected}"
         @blur="onNameInputBlur">
@@ -29,7 +29,7 @@
       'hover:bg-zinc-900 bg-opacity-50 text-white': !selected}"
       class="flex-1 h-full text-left whitespace-nowrap overflow-hidden text-ellipsis pr-4"
       @click="!editing && $emit('select') && $refs.profileTitle.scramble()">
-      <span class="ml-4 w-4 mr-2" :class="{'ml-8': !draggable}">
+      <span class="ml-4 w-4 mr-2" :class="{'ml-4': !draggable}">
         <GripHorizontal
           v-if="draggable"
           :class="{'text-zinc-600': selected,

src/components/profile/ProfileManager.vue

@@ -15,8 +15,8 @@
       </div>
       <Separator />
     </div>
-    <div>
+    <div v-if="showFilter">
-      <div v-if="showFilter" class="flex w-full h-12 items-center">
+      <div class="flex w-full h-12 items-center">
         <label for="filter" class="flex h-full items-center cursor-text">
           <Search class="ml-4 mr-2 mb-0.5 h-4 w-4 shrink-0 opacity-50 float-left" />
         </label>