feat: files manager

Author: RonenMars

package-lock.json

@@ -81,6 +81,7 @@
 		"react-ga4": "^2.1.0",
 		"react-hook-form": "^7.54.2",
 		"react-i18next": "^15.5.1",
+		"react-icons": "^5.5.0",
 		"react-markdown": "^10.1.0",
 		"react-router-dom": "^7.6.0",
 		"react-select": "^5.9.0",

package.json

@@ -0,0 +1,125 @@
+import React, { useEffect } from "react";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { useParams } from "react-router-dom";
+import { z } from "zod";
+
+import { ModalName } from "@enums/components";
+import { LoggerService } from "@services";
+import { namespaces } from "@src/constants";
+import { fileOperations } from "@src/factories";
+
+import { useModalStore, useToastStore } from "@store";
+
+import { Button, ErrorMessage, Input } from "@components/atoms";
+import { Modal } from "@components/molecules";
+
+const hasInvalidCharacters = (name: string): boolean => {
+	const invalidChars = /[<>:"/\\|?*]/;
+	if (invalidChars.test(name)) return true;
+
+	for (let i = 0; i < name.length; i++) {
+		const code = name.charCodeAt(i);
+		if (code < 32) return true;
+	}
+	return false;
+};
+
+const directorySchema = z.object({
+	name: z
+		.string()
+		.min(1, "Directory name is required")
+		.refine((name) => !hasInvalidCharacters(name), "Directory name contains invalid characters")
+		.refine((name) => !name.startsWith("."), "Directory name cannot start with a dot")
+		.refine((name) => name.trim() === name, "Directory name cannot have leading or trailing spaces"),
+});
+
+type DirectoryFormData = z.infer<typeof directorySchema>;
+
+export const AddDirectoryModal = () => {
+	const { projectId } = useParams();
+	const { t } = useTranslation(["modals", "buttons"]);
+	const { closeModal } = useModalStore();
+	const addToast = useToastStore((state) => state.addToast);
+	const { createDirectory } = fileOperations(projectId!);
+
+	const {
+		clearErrors,
+		formState: { errors },
+		handleSubmit,
+		register,
+		reset,
+	} = useForm<DirectoryFormData>({
+		defaultValues: {
+			name: "",
+		},
+		resolver: zodResolver(directorySchema),
+	});
+
+	useEffect(() => {
+		reset({ name: "" });
+		clearErrors();
+	}, [reset, clearErrors]);
+
+	const onSubmit = async (data: DirectoryFormData) => {
+		try {
+			const success = await createDirectory(data.name);
+			if (!success) {
+				addToast({
+					message: `Failed to create directory "${data.name}"`,
+					type: "error",
+				});
+
+				LoggerService.error(
+					namespaces.projectUICode,
+					`Failed to create directory "${data.name}" in project ${projectId}`
+				);
+				return;
+			}
+
+			addToast({
+				message: `Directory "${data.name}" created successfully`,
+				type: "success",
+			});
+		} catch (error) {
+			addToast({
+				message: `Failed to create directory "${data.name}"`,
+				type: "error",
+			});
+
+			LoggerService.error(namespaces.projectUICode, `Failed to create directory: ${error}`);
+		}
+		clearErrors();
+		closeModal(ModalName.addDirectory);
+		reset({ name: "" });
+	};
+
+	return (
+		<Modal className="w-550" name={ModalName.addDirectory}>
+			<div className="mx-6">
+				<h3 className="mb-5 text-xl font-bold">{t("addDirectory.title", { ns: "modals" })}</h3>
+
+				<form onSubmit={handleSubmit(onSubmit)}>
+					<div className="relative w-full">
+						<Input
+							{...register("name")}
+							aria-label={t("addDirectory.ariaLabelNewDirectory", { ns: "modals" })}
+							isError={!!errors.name}
+							isRequired
+							label={t("addDirectory.placeholderName", { ns: "modals" })}
+							variant="light"
+						/>
+
+						<ErrorMessage className="relative">{errors.name?.message as string}</ErrorMessage>
+					</div>
+
+					<Button className="mt-3 justify-center rounded-lg py-2.5 font-bold" type="submit" variant="filled">
+						{t("create", { ns: "buttons" })}
+					</Button>
+				</form>
+			</div>
+		</Modal>
+	);
+};

src/autokitteh

@@ -10,19 +10,35 @@ import { useModalStore } from "@store";
 import { Button, Loader } from "@components/atoms";
 import { Modal } from "@components/molecules";
 
+interface DeleteFileModalData {
+	name: string;
+	isDirectory?: boolean;
+	fileCount?: number;
+}
+
 export const DeleteFileModal = ({ isDeleting, onDelete }: DeleteModalProps) => {
 	const { t } = useTranslation("modals", { keyPrefix: "deleteFile" });
-	const fileName = useModalStore((state) => state.data as string);
+	const modalData = useModalStore((state) => state.data) as DeleteFileModalData | string;
 	const { closeModal } = useModalStore();
 
+	const fileName = typeof modalData === "string" ? modalData : modalData?.name || "";
+	const isDirectory = typeof modalData === "object" && modalData?.isDirectory;
+	const fileCount = typeof modalData === "object" ? modalData?.fileCount : 0;
+
+	const typeLabel = isDirectory ? t("directory") : t("file");
+
 	return (
 		<Modal hideCloseButton name={ModalName.deleteFile}>
 			<div className="mx-6">
-				<h3 className="mb-5 text-xl font-bold">{t("title")}</h3>
+				<h3 className="mb-5 text-xl font-bold">{t("title", { type: typeLabel })}</h3>
 
 				<p>{t("content", { name: fileName })}</p>
 
-				<p>{t("deleteWarning")}</p>
+				{isDirectory && fileCount ? (
+					<p>{t("deleteDirectoryWarning", { count: fileCount })}</p>
+				) : (
+					<p>{t("deleteWarning")}</p>
+				)}
 			</div>
 
 			<div className="mt-8 flex w-full justify-end gap-2">