A folder can have both files and folders as its children

[DreamBot706]

Change the entire file system so that a folder can hold both files and folders inside it. This requires a major overhaul of the entire file system especially a lot of change to the ui. (design required for this)

This is required for:
option 2 of issue #170
issue #172

[RsbhThakur]

@DreamBot706 does the below implementation plan seem sound to you? Any advice or Suggestions would be helpful.

Mixed Folder File System Overhaul

Change the entire file system so that folders can hold both files and subfolders concurrently. This provides a modern, nested hierarchy similar to Google Drive or OneDrive, removing the legacy restriction where folders had to be strictly "only subfolders" or "only files".

Important

Zero-Downtime Database Schema Migration:
To guarantee complete backward-compatibility with existing database records, we introduce two dedicated relation arrays (subFolders and files) alongside a tiny auto-migration hook on server boot. This preserves all existing file structures without requiring database wipes or downtime.

---

Technical Architecture & Design Decisions

1. Database Schema Evolution

The legacy FolderSchema restricts children to a single childType per parent folder. We will evolve FolderSchema to separate subfolders and files cleanly:

const FolderSchema = Schema({
    courses: [{ type: String, required: true }],
    name: { type: String, required: true },
    // Backward compatibility fields:
    childType: { type: String, enum: ["File", "Folder", "Mixed"], default: "Mixed" },
    children: [{ type: Schema.Types.ObjectId, refPath: "childType" }],
    // Modern multi-type fields:
    subFolders: [{ type: Schema.Types.ObjectId, ref: "Folder" }],
    files: [{ type: Schema.Types.ObjectId, ref: "File" }]
});

2. Auto-Migration Hook (Two-Phase Lifecycle)

To ensure zero-downtime deployment and ease of transition across all environments (production, staging, and local developer machines), we employ a Two-Phase Migration Lifecycle:

• Phase 1 (The Transition - Current Release): We integrate a temporary, lightweight hook on server boot.
  • On startup, it checks for any records matching { childType: { $ne: "Mixed" } }.
  • For folders where childType === "Folder", copy children → subFolders and update childType to "Mixed".
  • For folders where childType === "File", copy children → files and update childType to "Mixed".
  • Once migrated, subsequent server boots find 0 legacy records and exit instantly (<2ms), resulting in zero runtime overhead.
• Phase 2 (The Clean-up - Next Release): Once the new schema is successfully deployed to production and all active developer environments have been initialized at least once, the boot hook and the migration.js script will be deleted entirely from the codebase, leaving the boot path 100% pristine.

3. Unified API Controller Output (Zero Redux Breaking Changes)

In getFolderContent, we query and populate both subFolders and files. We then merge them back into a single children array containing a discriminator property itemType:

const response = {
    ...folder.toObject(),
    childType: "Mixed",
    children: [
        ...folder.subFolders.map(sf => ({ ...sf, itemType: "Folder" })),
        ...folder.files.map(f => ({ ...f, itemType: "File" }))
    ]
};

By normalizing the payload structure in the backend, frontend Redux reducers and actions require 0 lines of code changes!

---

Proposed Changes

Backend Components

[MODIFY] course.model.js

• Extend FolderSchema to support "Mixed" enum value for childType.
• Add subFolders and files reference arrays.

[MODIFY] folder.controller.js

• Update getFolderContent to populate both subFolders and files, returning them as a unified merged array.
• Update createFolder to automatically append new folders to the parent's subFolders array.
• Update recursiveDelete to safely delete both subfolders and files recursively.

[NEW] migration.js

• A boot script that automatically migrates legacy homogeneous folders to the "Mixed" format in the background.

[MODIFY] index.js

• Invoke the database migration hook on startup.

---

Frontend Components

[MODIFY] browse/index.jsx

• Remove the strict binary childType === "File" check.
• Split folderData.children into subfolders and files.
• Render the subfolders using <BrowseFolder> lists, and render the files below using <FileController>.

---

Verification Plan

Automated Tests

• Run the server boot hook and verify no unhandled promise rejections occur.
• Verify through MongoDB Compass that all Folder records transitioned from childType: "Folder/File" to childType: "Mixed".

Manual Verification

1. Browse Existing Courses: Open a course and verify that folders are listed and navigation continues to function normally.
2. Create Mixed Folder: Create a subfolder inside a folder that already contains files. Verify both the files and the subfolder appear in the same view.
3. Upload Files: Upload a new file into a folder containing other folders. Verify that both subfolders and the new file render cleanly side-by-side.
4. Delete Mixed Folder: Delete a folder containing both files and folders. Verify that all nested resources are recursively cleaned up from both Cloud Storage and MongoDB.