Pr@dev@codex/fix windows workspace header drag

scripts/ssh-port-forward.ps1

@@ -1,7 +1,7 @@
 $ErrorActionPreference = "Stop"
 
 $sshTarget = "guang@192.168.31.169"
-$ports = 5001, 5050, 8080, 2222, 8082, 3306, 5432
+$ports = 5001, 5050, 8080, 2222, 8082, 3306, 5432, 8888
 
 $sshArguments = @(
     "-N"

ui/components/Header/DesktopTitleBar.vue

@@ -266,6 +266,8 @@ const windowControls = computed(() => [
       </div>
     </div>
 
+    <slot name="trailing" />
+
     <div class="flex h-full shrink-0 items-stretch">
       <UButton
         v-for="button in windowControls"

ui/components/Header/header.test.ts

@@ -0,0 +1,57 @@
+import ts from "typescript";
+import { expect, it } from "vitest";
+import { computed, ref } from "vue";
+import source from "./header.vue?raw";
+
+it("keeps guest tools accessible while hiding only the empty Windows workspace bar", () => {
+  const desktop = ref(true);
+  const isWindows = ref(true);
+  const loggedIn = ref(false);
+  const focusMode = ref(false);
+  const tabs = ref<object[]>([]);
+  const path = ref("/");
+  const script = source.match(/<script setup lang="ts">([\s\S]*?)<\/script>/)![1]!;
+  const { outputText } = ts.transpileModule(script, { compilerOptions: { module: ts.ModuleKind.CommonJS } });
+  const scope = {
+    exports: {},
+    require: () => ({ useUserInfoStore: () => ({ loggedIn }) }),
+    computed,
+    storeToRefs: (store: unknown) => store,
+    useRouter: () => ({ currentRoute: computed(() => ({ path: path.value })) }),
+    useLocalePath: () => (value: unknown) => value,
+    useI18n: () => ({ t: (key: string) => key }),
+    usePlatform: () => ({ isMacOS: computed(() => !isWindows.value), isWindows }),
+    useWorkspaceMode: () => ({ activeWorkspaceMode: ref("assets") }),
+    useWorkspaceTabs: () => ({ focusMode, tabs, workspaceFullscreen: ref(false) }),
+    isDesktopRuntime: () => desktop.value
+  };
+  const header = new Function(
+    ...Object.keys(scope),
+    `${outputText}; return { showTitleBarMenu, showWorkspaceHeader };`
+  )(...Object.values(scope));
+
+  expect(header.showTitleBarMenu.value).toBe(true);
+  expect(header.showWorkspaceHeader.value).toBe(false);
+  for (const tool of ["/videoplayer", "/tools", "/transcode", "/face"]) {
+    path.value = tool;
+    expect(header.showWorkspaceHeader.value).toBe(true);
+  }
+  path.value = "/";
+  tabs.value = [{}];
+  expect(header.showWorkspaceHeader.value).toBe(true);
+  focusMode.value = true;
+  expect(header.showWorkspaceHeader.value).toBe(false);
+  focusMode.value = false;
+  tabs.value = [];
+  loggedIn.value = true;
+  expect(header.showTitleBarMenu.value).toBe(false);
+  expect(header.showWorkspaceHeader.value).toBe(true);
+  loggedIn.value = false;
+  desktop.value = false;
+  expect(header.showTitleBarMenu.value).toBe(false);
+  expect(header.showWorkspaceHeader.value).toBe(true);
+  desktop.value = true;
+  isWindows.value = false;
+  expect(header.showTitleBarMenu.value).toBe(false);
+  expect(header.showWorkspaceHeader.value).toBe(true);
+});

ui/components/Header/header.vue

@@ -4,13 +4,13 @@ import { useUserInfoStore } from "~/store/modules/userInfo";
 const router = useRouter();
 const localePath = useLocalePath();
 const { t } = useI18n();
-const { isMacOS } = usePlatform();
+const { isMacOS, isWindows } = usePlatform();
 const { activeWorkspaceMode } = useWorkspaceMode();
 const userInfoStore = useUserInfoStore();
 const { loggedIn } = storeToRefs(userInfoStore);
 const { exitFocusMode, focusMode, tabs, workspaceFullscreen } = useWorkspaceTabs();
 const hasMacTrafficLightInset = computed(() => isDesktopRuntime() && isMacOS.value);
-const showWorkspaceHeader = computed(() => !focusMode.value);
+const showTitleBarMenu = computed(() => isDesktopRuntime() && isWindows.value && !loggedIn.value);
 const isToolRoute = computed(() => {
   const path = router.currentRoute.value.path.toLowerCase();
   return (
@@ -24,6 +24,9 @@ const showSidebarChrome = computed(() => loggedIn.value && !isToolRoute.value);
 const showAssetTabs = computed(
   () => activeWorkspaceMode.value === "assets" && (loggedIn.value || tabs.value.length > 0)
 );
+const showWorkspaceHeader = computed(
+  () => !focusMode.value && (!showTitleBarMenu.value || showAssetTabs.value || isToolRoute.value)
+);
 
 const returnFromTool = async () => {
   if (!loggedIn.value) {
@@ -77,7 +80,13 @@ const pageHeader = computed(() => {
 
 <template>
   <div>
-    <HeaderDesktopTitleBar />
+    <HeaderDesktopTitleBar>
+      <template v-if="showTitleBarMenu" #trailing>
+        <div class="flex items-center px-2" data-desktop-drag-region="false">
+          <SideBarProfile />
+        </div>
+      </template>
+    </HeaderDesktopTitleBar>
     <div
       v-if="hasMacTrafficLightInset && !showWorkspaceHeader && !workspaceFullscreen"
       data-desktop-drag-region
@@ -95,7 +104,7 @@ const pageHeader = computed(() => {
         @click="exitFocusMode"
       />
     </div>
-    <WorkspaceTopHeader v-show="showWorkspaceHeader">
+    <WorkspaceTopHeader v-show="showWorkspaceHeader" :show-profile="!showTitleBarMenu">
       <template v-if="showSidebarChrome" #leading>
         <SideBarTopControls />
       </template>

ui/components/SideBar/profile.vue

@@ -142,6 +142,7 @@ const enableLoginBtnAfter = (ms: number) => {
 };
 
 const accountTooltip = computed(() => {
+  if (!loggedIn.value) return t("Common.More");
   if (loggedIn.value && currentUser.value?.name) return currentUser.value.name;
   return t("Common.Account");
 });
@@ -971,7 +972,7 @@ onBeforeUnmount(() => {
         @pointerdown="profileOpenedByPointer = true"
         @keydown="profileOpenedByPointer = false"
       >
-        <UIcon :name="loggedIn ? 'i-lucide-circle-user-round' : 'i-lucide-user-round'" class="size-4" />
+        <UIcon :name="loggedIn ? 'i-lucide-circle-user-round' : 'i-lucide-menu'" class="size-4" />
       </UButton>
     </UTooltip>
 

ui/components/Workspace/topHeader.vue

@@ -7,6 +7,8 @@ const props = withDefaults(defineProps<{ showActions?: boolean; showProfile?: bo
 });
 const { collapse, modernIsland } = useSettingManager();
 const { sidebarWidth } = useSidebarLayout();
+const { isWindows, isLoading } = usePlatform();
+const canDragWindow = computed(() => isDesktopRuntime() && !isLoading.value && !isWindows.value);
 const isNarrowScreen = useMediaQuery("(max-width: 767px)");
 const leadingAreaStyle = computed(() => {
   if (collapse.value || isNarrowScreen.value) return { width: "fit-content" };
@@ -19,7 +21,7 @@ const leadingAreaStyle = computed(() => {
 });
 
 const handleWindowDrag = async (event: MouseEvent) => {
-  if (!isDesktopRuntime()) return;
+  if (!canDragWindow.value) return;
 
   const target = event.target as HTMLElement;
   if (
@@ -43,7 +45,7 @@ const handleWindowDrag = async (event: MouseEvent) => {
 
 <template>
   <div
-    data-desktop-drag-region
+    :data-desktop-drag-region="canDragWindow"
     class="header-bg h-10 min-h-10 max-h-10 shrink-0 flex items-center"
     :style="{
       backgroundColor: 'var(--app-header-bg)',