[backport cloud/1.37] Workspaces 3 create a workspace (#8221) (#8252)

## Summary
- Backport of #8221 to cloud/1.37
- Cherry-picked commit a08ccb55c1 with
conflict resolution

## Conflicts resolved
- `src/components/dialog/GlobalDialog.vue`: Added workspace mode CSS
styling from PR
- `src/platform/cloud/subscription/components/SubscriptionPanel.vue`:
Accepted PR refactoring to use conditional workspace components

🤖 Generated with [Claude Code](https://claude.ai/code)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8252-backport-cloud-1-37-Workspaces-3-create-a-workspace-8221-2f06d73d365081e1a38ed4492a7bc6a8)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
Co-authored-by: GitHub Action <action@github.com>

src/platform/workspace/composables/useWorkspaceUI.ts

@@ -0,0 +1,125 @@
+import { computed, ref } from 'vue'
+import { createSharedComposable } from '@vueuse/core'
+
+import type { WorkspaceRole, WorkspaceType } from '../api/workspaceApi'
+import { useTeamWorkspaceStore } from '../stores/teamWorkspaceStore'
+
+/** Permission flags for workspace actions */
+interface WorkspacePermissions {
+  canLeaveWorkspace: boolean
+  canAccessWorkspaceMenu: boolean
+  canManageSubscription: boolean
+}
+
+/** UI configuration for workspace role */
+interface WorkspaceUIConfig {
+  showEditWorkspaceMenuItem: boolean
+  workspaceMenuAction: 'leave' | 'delete' | null
+  workspaceMenuDisabledTooltip: string | null
+}
+
+function getPermissions(
+  type: WorkspaceType,
+  role: WorkspaceRole
+): WorkspacePermissions {
+  if (type === 'personal') {
+    return {
+      canLeaveWorkspace: false,
+      canAccessWorkspaceMenu: false,
+      canManageSubscription: true
+    }
+  }
+
+  if (role === 'owner') {
+    return {
+      canLeaveWorkspace: true,
+      canAccessWorkspaceMenu: true,
+      canManageSubscription: true
+    }
+  }
+
+  // member role
+  return {
+    canLeaveWorkspace: true,
+    canAccessWorkspaceMenu: true,
+    canManageSubscription: false
+  }
+}
+
+function getUIConfig(
+  type: WorkspaceType,
+  role: WorkspaceRole
+): WorkspaceUIConfig {
+  if (type === 'personal') {
+    return {
+      showEditWorkspaceMenuItem: false,
+      workspaceMenuAction: null,
+      workspaceMenuDisabledTooltip: null
+    }
+  }
+
+  if (role === 'owner') {
+    return {
+      showEditWorkspaceMenuItem: true,
+      workspaceMenuAction: 'delete',
+      workspaceMenuDisabledTooltip:
+        'workspacePanel.menu.deleteWorkspaceDisabledTooltip'
+    }
+  }
+
+  // member role
+  return {
+    showEditWorkspaceMenuItem: false,
+    workspaceMenuAction: 'leave',
+    workspaceMenuDisabledTooltip: null
+  }
+}
+
+/**
+ * Internal implementation of UI configuration composable.
+ */
+function useWorkspaceUIInternal() {
+  const store = useTeamWorkspaceStore()
+
+  // Tab management (shared UI state)
+  const activeTab = ref<string>('plan')
+
+  function setActiveTab(tab: string | number) {
+    activeTab.value = String(tab)
+  }
+
+  const workspaceType = computed<WorkspaceType>(
+    () => store.activeWorkspace?.type ?? 'personal'
+  )
+
+  const workspaceRole = computed<WorkspaceRole>(
+    () => store.activeWorkspace?.role ?? 'owner'
+  )
+
+  const permissions = computed<WorkspacePermissions>(() =>
+    getPermissions(workspaceType.value, workspaceRole.value)
+  )
+
+  const uiConfig = computed<WorkspaceUIConfig>(() =>
+    getUIConfig(workspaceType.value, workspaceRole.value)
+  )
+
+  return {
+    // Tab management
+    activeTab: computed(() => activeTab.value),
+    setActiveTab,
+
+    // Permissions and config
+    permissions,
+    uiConfig,
+    workspaceType,
+    workspaceRole
+  }
+}
+
+/**
+ * UI configuration composable derived from workspace state.
+ * Controls what UI elements are visible/enabled based on role and workspace type.
+ * Uses createSharedComposable to ensure tab state is shared across components.
+ */
+export const useWorkspaceUI = createSharedComposable(useWorkspaceUIInternal)