src/app/story/edit.tsx

@@ -5,6 +5,7 @@ import { Button } from "@/components/ui/button";
 import { ComponentProps, useState } from "react";
 import { Genre, Story } from "@prisma/client";
 import StoryForm from "app/ui/forms/story";
+import { Plus } from "lucide-react";
 
 
 export default function EditStoryDialog({ genres, closeDialog, defaults }: ComponentProps<"div"> & { genres: Genre[], closeDialog: () => void, defaults: Story }) {

src/app/ui/forms/genrePicker.tsx

@@ -21,7 +21,7 @@ export default function GenrePicker({ genres, form }: ComponentProps<"div"> & {
 							<Button
 								variant={"outline"}
 								className={cn(
-									"min-w-fit max-w-60 pl-3 text-left font-normal flex-wrap gap-y-1 h-fit min-h-10",
+									"min-w-fit max-w-full w-fit pl-3 text-left font-normal flex-wrap gap-y-1 h-fit min-h-10",
 									!field.value && "text-muted-foreground"
 								)}
 							>

src/app/ui/forms/story.tsx

@@ -21,7 +21,6 @@ import { randomStoryTitle } from "app/lib/shortStoryTitleGenerator"
 import GenrePicker from "./genrePicker"
 import { useRouter } from "next/navigation"
 import { Ban, Cross } from "lucide-react"
-import { StoryWithGenres } from "app/story/page"
 
 export const formSchema = z.object({
 	id: z.number().optional(),
@@ -30,13 +29,13 @@ export const formSchema = z.object({
 	genres: z.array(z.number())
 })
 
-export default function StoryForm({ genres, dbAction, className, closeDialog, defaults }: ComponentProps<"div"> & { genres: Array<Genre>, dbAction: (data: any) => Promise<{ success: string }>, className: string, closeDialog: () => void, defaults?: StoryWithGenres }) {
+export default function StoryForm({ genres, dbAction, className, closeDialog, defaults }: ComponentProps<"div"> & { genres: Array<Genre>, dbAction: (data: any) => Promise<{ success: string }>, className: string, closeDialog: () => void, defaults?: Story }) {
 	const form = useForm<z.infer<typeof formSchema>>({
 		resolver: zodResolver(formSchema),
 		defaultValues: {
 			title: defaults?.title ?? "",
 			word_count: defaults?.word_count ?? 500,
-			genres: defaults?.genres.map(e => e.id) ?? []
+			genres: []
 		},
 	})
 	console.log("DEFAULTS: " + defaults)