feat(composables): add useRightDrawer facade over useShellUiStore

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

apps/app/src/composables/useRightDrawer.ts

@@ -0,0 +1,30 @@
+import { storeToRefs } from 'pinia'
+import type { ComputedRef } from 'vue'
+import { computed } from 'vue'
+import { useShellUiStore } from '@/stores/useShellUiStore'
+
+// Thin facade over useShellUiStore.drawer (RFC-WS-GUI-REDESIGN AD-G4,
+// issue 5). NOT a module-level ref singleton: state lives in the Pinia
+// store so Playwright CT can drive the drawer via @pinia/testing
+// without rendering the shell, and tests don't leak state across cases.
+
+export interface UseRightDrawer {
+  isOpen: ComputedRef<boolean>
+  component: ComputedRef<string | null>
+  props: ComputedRef<Record<string, unknown>>
+  open: (component: string, props?: Record<string, unknown>) => void
+  close: () => void
+}
+
+export function useRightDrawer(): UseRightDrawer {
+  const store = useShellUiStore()
+  const { drawer } = storeToRefs(store)
+
+  return {
+    isOpen: computed(() => drawer.value.isOpen),
+    component: computed(() => drawer.value.component),
+    props: computed(() => drawer.value.props),
+    open: (component, props = {}) => store.openDrawer(component, props),
+    close: () => store.closeDrawer(),
+  }
+}