The sidebar is fully functional!! You can drag and drop all your files and folders around, nest them as much as you want, and it will retain all of this information in the database. It only took a database rework and many hours of my life
Let’s talk about it…

So. The database was originally structured with file and folder tables. Both of them had parentId fields and folders had children. Unfortunately this complicated the code more when I tried implementing this as I had to get all the files and folders and combine them into one array. I looked up the proper way to do this because I clearly was not doing it correctly, and switched to just one table, nodes. This simplified just about everything, and this made me split off the file contents as another table as well. I was meaning to do that anyway just to save on memory, as otherwise all the content of every file would be in memory all the time.

Now this node table has all the same fields as before. How do I render this tree? I looked around for good libraries (there’s almost none), and found react-arborist. Looked great, had alright documentation. I started implementing it, and realized I needed to implement the control functions for moving the elements. That’s easy, I said. It wasn’t

After like an hour it still was just not working. It was really close but was being weird. I looked up the proper way to do it with this library and apparently there’s a class that has a move function that does all the work for you. And yep. It works. For some reason it turned folders back into files but ended up being an easy fix.

So that was a mess but here we are. It works flawlessly. Now I’ve got to implement context menus in this mess, including creating files in folders, etc.