refactor: extract the retake dialog slice from useStore

ui/src/stores/retakeDialogSlice.ts

@@ -0,0 +1,19 @@
+export type RetakeDialogSlice = {
+  retakeDialogOpen: boolean
+  retakeSourceFile: string | null
+  openRetakeDialog: (filename: string) => void
+  closeRetakeDialog: () => void
+}
+
+type SetRetakeDialogState = (
+  partial: Partial<RetakeDialogSlice> | ((state: RetakeDialogSlice) => Partial<RetakeDialogSlice>),
+) => void
+
+export function createRetakeDialogSlice(set: SetRetakeDialogState): RetakeDialogSlice {
+  return {
+    retakeDialogOpen: false,
+    retakeSourceFile: null,
+    openRetakeDialog: filename => set({ retakeDialogOpen: true, retakeSourceFile: filename }),
+    closeRetakeDialog: () => set({ retakeDialogOpen: false, retakeSourceFile: null }),
+  }
+}

ui/src/stores/useStore.ts

@@ -12,6 +12,7 @@ import { mapDirectorClipImages } from '../lib/directorClipImages'
 import { llmActivityPreview } from '../lib/llmActivityPreview'
 import { createDeveloperModeSlice } from './developerModeSlice'
 import { createDirectorSlice } from './directorSlice'
+import { createRetakeDialogSlice } from './retakeDialogSlice'
 import { createSettingsSlice } from './settingsSlice'
 import { createSidebarSlice } from './sidebarSlice'
 import { createThemeSlice } from './themeSlice'
@@ -2335,6 +2336,7 @@ export const useStore = create<AppState>((set, get) => ({
     partial => set(partial as never),
     () => get(),
   ),
+  ...createRetakeDialogSlice(partial => set(partial as never)),
   ...createDeveloperModeSlice(
     partial => set(partial as never),
     () => get(),
@@ -3048,11 +3050,6 @@ export const useStore = create<AppState>((set, get) => ({
 
   // CivitAI LoRA Browser
   // Director Pipeline Dashboard
-  retakeDialogOpen: false,
-  retakeSourceFile: null,
-  openRetakeDialog: (filename) => set({ retakeDialogOpen: true, retakeSourceFile: filename }),
-  closeRetakeDialog: () => set({ retakeDialogOpen: false, retakeSourceFile: null }),
-
   dashboardOpen: false,
   dashboardPipelineList: [],
   dashboardPipelineTotal: 0,

ui/tests/architectureSlices.test.mjs

@@ -140,6 +140,32 @@ test('sidebar slice toggles open through the public facade', async () => {
   assert.equal(useStore.getState().sidebarOpen, false)
 })
 
+test('retake dialog slice opens and closes through the public facade', async () => {
+  const { createRetakeDialogSlice } = await import('../src/stores/retakeDialogSlice.ts')
+  let state
+  const set = update => {
+    const partial = typeof update === 'function' ? update(state) : update
+    state = { ...state, ...partial }
+  }
+  state = createRetakeDialogSlice(set)
+  assert.equal(state.retakeDialogOpen, false)
+  assert.equal(state.retakeSourceFile, null)
+  state.openRetakeDialog('clip.mp4')
+  assert.equal(state.retakeDialogOpen, true)
+  assert.equal(state.retakeSourceFile, 'clip.mp4')
+  state.closeRetakeDialog()
+  assert.equal(state.retakeDialogOpen, false)
+  assert.equal(state.retakeSourceFile, null)
+
+  const { useStore } = await import('../src/stores/useStore.ts')
+  useStore.getState().openRetakeDialog('source.mp4')
+  assert.equal(useStore.getState().retakeDialogOpen, true)
+  assert.equal(useStore.getState().retakeSourceFile, 'source.mp4')
+  useStore.getState().closeRetakeDialog()
+  assert.equal(useStore.getState().retakeDialogOpen, false)
+  assert.equal(useStore.getState().retakeSourceFile, null)
+})
+
 test('developer-mode slice persists the local flag through the public facade', async () => {
   if (!globalThis.localStorage) {
     const { JSDOM } = await import('jsdom')