feat(composables): add useRightDrawer facade over useShellUiStore

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

apps/app/src/composables/__tests__/useRightDrawer.spec.ts

@@ -0,0 +1,27 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import { createPinia, setActivePinia } from 'pinia'
+import { useRightDrawer } from '@/composables/useRightDrawer'
+import { useShellUiStore } from '@/stores/useShellUiStore'
+
+describe('useRightDrawer', () => {
+  beforeEach(() => setActivePinia(createPinia()))
+
+  it('open() writes through to the store', () => {
+    const { open } = useRightDrawer()
+
+    open('ArtistCard', { id: '01H' })
+
+    const s = useShellUiStore()
+
+    expect(s.drawer).toEqual({ isOpen: true, component: 'ArtistCard', props: { id: '01H' } })
+  })
+
+  it('close() clears the store drawer', () => {
+    const { open, close, isOpen } = useRightDrawer()
+
+    open('ArtistCard')
+    close()
+    expect(isOpen.value).toBe(false)
+    expect(useShellUiStore().drawer.isOpen).toBe(false)
+  })
+})

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(),
+  }
+}