fixes + work on first wizard

package-lock.json

@@ -10,7 +10,7 @@
       "dependencies": {
         "@aitube/broadway": "0.0.22",
         "@aitube/clap": "0.0.30",
-        "@aitube/clapper-services": "0.0.27",
+        "@aitube/clapper-services": "0.0.28",
         "@aitube/engine": "0.0.26",
         "@aitube/timeline": "0.0.42",
         "@fal-ai/serverless-client": "^0.11.0",
@@ -149,9 +149,9 @@
       }
     },
     "node_modules/@aitube/clapper-services": {
-      "version": "0.0.27",
-      "resolved": "https://registry.npmjs.org/@aitube/clapper-services/-/clapper-services-0.0.27.tgz",
-      "integrity": "sha512-/bAzDtnlVA10BD5cZJDc+2T0jr7DK05+ZEy/dRBK36/cFaEhFKltWNLqW10mIlprhXCo+kjEX18jQQjFH42HzQ==",
+      "version": "0.0.28",
+      "resolved": "https://registry.npmjs.org/@aitube/clapper-services/-/clapper-services-0.0.28.tgz",
+      "integrity": "sha512-YmiPGAGtZcgqqnXmgtWvFyd9TL5eCpF343+ndvDa+aorQ43PkIKo7f3df550njOICM5KZhSBRFEIh1c5Dsi7Yg==",
       "peerDependencies": {
         "@aitube/clap": "0.0.30",
         "@aitube/timeline": "0.0.42",

package.json

@@ -21,7 +21,7 @@
   "dependencies": {
     "@aitube/broadway": "0.0.22",
     "@aitube/clap": "0.0.30",
-    "@aitube/clapper-services": "0.0.27",
+    "@aitube/clapper-services": "0.0.28",
     "@aitube/engine": "0.0.26",
     "@aitube/timeline": "0.0.42",
     "@fal-ai/serverless-client": "^0.11.0",

src/components/wizards/project/index.tsx

@@ -0,0 +1,92 @@
+import { Button } from '@/components/ui/button'
+import { Dialog, DialogContent, DialogFooter } from '@/components/ui/dialog'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { cn } from '@/lib/utils'
+import { useUI } from '@/services'
+import { ProjectCreationWizardStep } from '@aitube/clapper-services'
+
+export function StepChooseCategory() {
+  return (
+    <>
+      <p>Choose a category:</p>
+    </>
+  )
+}
+
+
+export function StepCreateFromPrompt() {
+  return (
+    <>
+      <p>Type a prompt:</p>
+    </>
+  )
+}
+
+const stepPanels: Record<ProjectCreationWizardStep, JSX.Element> = {
+  [ProjectCreationWizardStep.NONE]: <></>,
+  [ProjectCreationWizardStep.CHOOSE_CATEGORY]: <StepChooseCategory />,
+  [ProjectCreationWizardStep.CREATE_FROM_PROMPT]: <StepCreateFromPrompt />,
+}
+
+const stepLabels = {
+  [ProjectCreationWizardStep.NONE]: '',
+  [ProjectCreationWizardStep.CHOOSE_CATEGORY]: 'Choose category',
+  [ProjectCreationWizardStep.CREATE_FROM_PROMPT]: 'Create from prompt'
+} as any
+
+export function ProjectCreationWizard() {
+  const projectCreationWizardStep = useUI((s) => s.projectCreationWizardStep)
+  const setProjectCreationWizardStep = useUI((s) => s.setProjectCreationWizardStep)
+
+  return (
+    <Dialog
+      open={projectCreationWizardStep !== ProjectCreationWizardStep.NONE}
+      onOpenChange={(open) =>
+        setProjectCreationWizardStep(
+          open ? ProjectCreationWizardStep.CHOOSE_CATEGORY : ProjectCreationWizardStep.NONE
+        )
+      }
+    >
+      <DialogContent
+        className={cn(
+          `select-none`,
+          // DialogContent comes with some hardcoded values so we need to override them
+          `h-[70%] w-[95w] max-w-6xl md:w-[60vw]`,
+          `flex flex-row`
+        )}
+      >
+        <ScrollArea className="flex h-full w-44 flex-col">
+          <div className="flex flex-col items-end">
+            {Object.keys(stepPanels).map((key) => (
+              <Button
+                key={key}
+                variant="ghost"
+                className="flex w-full flex-col items-end text-right text-lg font-thin capitalize text-stone-300"
+                onClick={() => setProjectCreationWizardStep(key as ProjectCreationWizardStep)}
+              >
+                {stepLabels[key]}
+              </Button>
+            ))}
+          </div>
+        </ScrollArea>
+
+        <div className="flex h-full max-w-[calc(100%-150px)] flex-grow select-none flex-col justify-between border-l border-stone-800 pl-8">
+          <ScrollArea className="flex h-full flex-row">
+            {stepPanels[projectCreationWizardStep]}
+          </ScrollArea>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              className="text-sm font-light dark:border-stone-700 dark:bg-stone-800 dark:text-stone-400"
+              onClick={() => {
+                setProjectCreationWizardStep(ProjectCreationWizardStep.NONE)
+              }}
+            >
+              Close
+            </Button>
+          </DialogFooter>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

src/lib/utils/formatSegmentForExport.ts

@@ -44,7 +44,6 @@ export function formatSegmentForExport(
   const directory = `${segment.category}`.toLowerCase()
   const prefix = `shot_${String(index).padStart(4, '0')}_`
 
-
   const notFoundFileFormat = 'unknown/unknown'
   let fallbackFileFormat = notFoundFileFormat
 
@@ -75,7 +74,7 @@ export function formatSegmentForExport(
     segment.assetUrl.startsWith('data:')
 
   const category = segment.category.toLocaleLowerCase()
-  
+
   return {
     id: segment.id,
     segment,

src/services/io/useIO.ts

@@ -403,7 +403,7 @@ export const useIO = create<IOStore>((set, get) => ({
           isExportableToFile && id !== ignoreThisVideoSegmentId
       )
 
-    console.log("segments:", segments)
+    console.log('segments:', segments)
 
     const videos: FFMPegVideoInput[] = []
     const audios: FFMPegAudioInput[] = []

src/services/ui/useUI.ts

@@ -4,6 +4,7 @@ import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
 
 import {
+  ProjectCreationWizardStep,
   ScriptEditorService,
   ScriptEditorStore,
   SettingsCategory,
@@ -76,6 +77,9 @@ export const useUI = create<UIStore>()(
       setEditorFontSize: (editorFontSize: number) => {
         set({ editorFontSize })
       },
+      setProjectCreationWizardStep: (projectCreationWizardStep: ProjectCreationWizardStep) => {
+        set({ projectCreationWizardStep })
+      }
     }),
     {
       name: 'CLAPPER_REVISION_0_CONTROLLERS_UI',