fixed file name generation

src/app/interface/bottom-bar/bottom-bar.tsx

@@ -184,7 +184,7 @@ function BottomBar() {
           >Load</Button> : null}
           {canSeeBetaFeatures ? <Button
             onClick={downloadClap}
-            disabled={!prompt?.length || remainingImages > 0 || !currentClap}
+            disabled={remainingImages > 0}
           >
           {remainingImages ? `${allStatus.length - remainingImages}/${allStatus.length} ⌛` : `Save`}
         </Button> : null}

src/app/store/index.ts

@@ -638,9 +638,12 @@ export const useStore = create<{
 
     const [stylePrompt, storyPrompt] = prompt.split("||").map(x => x.trim())
 
-    const cleanStylePrompt = stylePrompt.replace(/([a-z0-9_,]+)/gi, "_")
-    const cleanStoryPrompt = storyPrompt.replace(/([a-z0-9_,]+)/gi, "_")
-    const cleanName = `${cleanStoryPrompt.slice(0, 20)} (${cleanStylePrompt.slice(0, 20) || "default style"})`
+    const cleanStylePrompt = stylePrompt.replace(/([^a-z0-9, ]+)/gi, "_")
+
+    const firstPartOfStory = storyPrompt.split(",").shift() || ""
+    const cleanStoryPrompt = firstPartOfStory.replace(/([^a-z0-9, ]+)/gi, "_")
+
+    const cleanName = `${cleanStoryPrompt.slice(0, 22)} (${cleanStylePrompt.slice(0, 22) || "default style"})`
 
     anchor.download = `${cleanName}.clap`