feat(plugin): Update FileSystemViewer UI top-row button redesign

[net-wayfarer]

Description of Changes

Update FileSystemViewer UI top-row button redesign to better suit the layout Vencord has made.

Before:

After:

Rationale behind Changes

Vencord updated the button layout for the buttons atop both the Settings tab as well as Themes tab. This change is heavily inspired by the updates made in Vencord, and has the potential to allow custom icons to be used alongside the buttons in the redesign.

Suggested Testing Steps

• Apply this PR as a patch, using something like git apply --3way file.patch,
• Recompile with the applied patch,
• Run Vencord, navigate to user settings → Virtual Filesystem,
• Observe the changes as indicated in screenshot,
• When content, run git stash in the source path and git stash drop or alternatively use git checkout <HEAD/githash> -- src/plugins/bdCompatLayer/fileSystemViewer.tsx to revert changes

[Davilarek]

Here's how it looks on my display: In my opinion, this looks weird being outside of the main box:

@zrodevkaan what you think about this redesign?

[net-wayfarer]

I'm not entirely sure on how to have the Size of /: entry in the same area as those buttons.

[zrodevkaan]

Here's how it looks on my display: In my opinion, this looks weird being outside of the main box:

@zrodevkaan what you think about this redesign?

My apologizes. I did not see this till now.

Very nice UI. Although please do work on the actual FS SystemView if you can. Its just slashes. Id like to see if you could change that up a bit ?

[Davilarek]

wdym "just slashes"? https://en.wikipedia.org/wiki/Filesystem_Hierarchy_Standard?lang=en#:~:text=in%20the%20fhs%2C%20all%20files%20and%20directories%20appear%20under%20the%20root%20directory%20%2F%2C

In the FHS, all files and directories appear under the root directory /

[zrodevkaan]

wdym "just slashes"? https://en.wikipedia.org/wiki/Filesystem_Hierarchy_Standard?lang=en#:~:text=in%20the%20fhs%2C%20all%20files%20and%20directories%20appear%20under%20the%20root%20directory%20%2F%2C

In the FHS, all files and directories appear under the root directory /

/ is not what I meant directly. The UI just needs to be changed instead of white bold stokes around the border.

[Davilarek]

I feel that's out of scope of this PR. "feat(plugin): Update FileSystemViewer UI top-row button redesign"

[zrodevkaan]

Thats the point of a question and asking. Not making.

Its possible said person could.

[Davilarek]

I managed to place it here, does it look okay or nay?

[Davilarek]

Or this @net-wayfarer @zrodevkaan

[zrodevkaan]

Or this @net-wayfarer @zrodevkaan

Size of looks abnormal.

[Davilarek]

What?

[zrodevkaan]

It looks weird.. ?

[Davilarek]

why?

[net-wayfarer]

Or this @net-wayfarer @zrodevkaan

I'd say that just creates ambiguity, end users may/may not know if that Size of: is actually a button or are the rest of the buttons are purely cosmetic (has no functionality). If it was coloured or shaped differently to the rest of the buttons, it can prevent that unwanted confusion. Then again that's not my call.

[Davilarek]

I managed to place it here, does it look okay or nay?

Okay, so is this one better?

[net-wayfarer]

Or you could have it like this, inspired by GitHub looks for navigation, also breadcrumb navigation.

This is only a mockup, there's no code for this.

Update: Directories should be at the top, perhaps with their own icon to set it apart from regular files within the tree. Also there should be a way to navigate back to parent directory, but that's also missing.

[Davilarek]

I'll consider making something like this but not right now, let's focus on this PR. I think the current version is enough and satisfies me enough. Marking as ready to merge.

[Davilarek]

This will be squashed on merge. @zrodevkaan do you approve these changes?