Improve tree view by adding indents and vertical lines and aligning texts

[m42cel]

Improve tree view by

• indenting directory contents one level below the directory name,
• aligning the text of directories and files within the same directory, and
• adding vertical lines that span the contents of directories

Closes #80

[brufdev]

Thank you for the contribution.

I believe the issues with the development environment are caused by the missing broadcasting service. Add the following to you .env file:

SCOUT_DRIVER=null
BROADCAST_CONNECTION=null

I would prefer you stick with TailwindCSS for everything, so instead of the class, you could add: pl-2 ml-2 border-l-2 border-light-base-300 dark:border-base-500. Please double-check if this produces the same result, as I haven't tested it. This adds the color to both themes as well.

Can you confirm these changes on a vault containing only files? Just to check, that the padding on the left doesn't seem too much without the chevrons.

I will work on other things first but I can finish this later if you can't.

[m42cel]

Thanks for pointing out the tailwind classes, I totally agree! I guess then we'd also just add them to the element directly without a custom class in between?

I checked the colors again, and while your choice was pretty spot on with my first color I think border-light-base-400 works a little better.

And you had a good point with the indent with a files only vault. It indeed look a little too much:

We could counter it by also indenting the vault name

I also noticed that the vault title could use a font-semibold, which would make it stand out a little from its contents and would also look just as in the vault overview.

This would be with indent and semibold:

[brufdev]

About the indent, I was thinking of only indenting files if there are folders at that level, but maybe that could be confusing. I'll try it out and see how it looks.

Thank you!