fix(ui): keep driver store/settings page switching and tab active state (#7035)

apps/desktop/src/components/config/DriverStoreDialog.vue

@@ -2224,8 +2224,8 @@ watch(driverStoreTab, (tab) => {
         </Tabs>
       </div>
     </div>
+    <AgentOfflineExportDialog v-model:open="offlineExportDialogOpen" :preview="offlineExportPreview" :loading="offlineExportLoading" :exporting="offlineExporting" :error="offlineExportError" @confirm="exportOfflinePackage" />
   </div>
-  <AgentOfflineExportDialog v-model:open="offlineExportDialogOpen" :preview="offlineExportPreview" :loading="offlineExportLoading" :exporting="offlineExporting" :error="offlineExportError" @confirm="exportOfflinePackage" />
 </template>
 
 <style>

apps/desktop/src/components/config/__tests__/DriverStoreDialog.visibility.spec.ts

@@ -0,0 +1,12 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+
+const source = readFileSync(new URL("../DriverStoreDialog.vue", import.meta.url), "utf8");
+const templateStart = source.indexOf("<template>");
+const template = source.slice(templateStart, source.indexOf("\n<style", templateStart)).trim();
+
+describe("DriverStoreDialog visibility", () => {
+  it("keeps the page and its auxiliary dialog under one root so component v-show works", () => {
+    expect(template).toMatch(/^<template>\s*<div class="driver-store-view[^"]*">[\s\S]*<AgentOfflineExportDialog[^>]*\/>\s*<\/div>\s*<\/template>$/);
+  });
+});

apps/desktop/src/components/layout/AppTabBar.vue

@@ -500,6 +500,11 @@ function tabColorStyle(tab: QueryTab) {
   };
 }
 
+function specialTabActiveStyle(active: boolean | undefined): CSSProperties | undefined {
+  if (!active) return undefined;
+  return isClassicLayout.value ? { boxShadow: "inset 0 -2px 0 var(--ring)" } : { borderColor: "var(--ring)" };
+}
+
 function tabIconClass(tab: QueryTab) {
   if (tab.externalSqlFileMissing) return "text-amber-600 dark:text-amber-400";
   if (tab.mode === "mq") return "";
@@ -764,7 +769,7 @@ function onOverflowItemKeydown(event: KeyboardEvent, tabId: string, kind: "regul
                     ? ['h-full border-r border-border/80 dark:border-border/45 font-medium', settingsPageActive ? 'bg-background text-foreground' : 'text-foreground/70 hover:text-foreground/90']
                     : ['h-7 rounded-md border font-medium', settingsPageActive ? 'border-ring text-foreground' : 'border-border/60 text-foreground/70 hover:border-border hover:text-foreground/90']
                 "
-                :style="isClassicLayout && settingsPageActive ? { boxShadow: '0 1px 0 0 var(--color-background)' } : {}"
+                :style="specialTabActiveStyle(settingsPageActive)"
                 :data-active-tab="settingsPageActive"
                 @click="emit('activate-settings-page')"
                 @mousedown.middle.prevent="emit('close-settings-page')"
@@ -791,7 +796,7 @@ function onOverflowItemKeydown(event: KeyboardEvent, tabId: string, kind: "regul
                     ? ['h-full border-r border-border/80 dark:border-border/45 font-medium', driverStoreActive ? 'bg-background text-foreground' : 'text-foreground/70 hover:text-foreground/90']
                     : ['h-7 rounded-md border font-medium', driverStoreActive ? 'border-ring text-foreground' : 'border-border/60 text-foreground/70 hover:border-border hover:text-foreground/90']
                 "
-                :style="isClassicLayout && driverStoreActive ? { boxShadow: '0 1px 0 0 var(--color-background)' } : {}"
+                :style="specialTabActiveStyle(driverStoreActive)"
                 :data-active-tab="driverStoreActive"
                 @click="emit('activate-driver-store')"
                 @mousedown.middle.prevent="emit('close-driver-store')"

apps/desktop/src/components/layout/__tests__/AppTabBar.spec.ts

@@ -95,6 +95,15 @@ describe("AppTabBar right-side close action", () => {
   });
 });
 
+describe("AppTabBar special page selection", () => {
+  it("shows the active settings or driver-manager tab with the same ring used by regular tabs", () => {
+    expect(tabBarSource).toContain("function specialTabActiveStyle(active: boolean | undefined)");
+    expect(tabBarSource).toContain('return isClassicLayout.value ? { boxShadow: "inset 0 -2px 0 var(--ring)" } : { borderColor: "var(--ring)" };');
+    expect(tabBarSource).toContain(':style="specialTabActiveStyle(settingsPageActive)"');
+    expect(tabBarSource).toContain(':style="specialTabActiveStyle(driverStoreActive)"');
+  });
+});
+
 describe("AppTabBar overflow search", () => {
   it("filters every open tab by its display and source titles", () => {
     expect(tabBarSource).toContain('const tabSearchQuery = ref("");');