Add filetree on left of diff view

[sebastian-sauer]

This PR adds a filetree to the left side of the files/diff view.

Initially the filetree will not be shown and may be shown via a new "Show file tree" button.

Showing and hiding is using the same icon as github. Folders are collapsible. On small devices (max-width 991 PX) the file tree will be hidden.

Screenshots

• [x] Show more button currently not working for diffs with > 100 files
• [x] Translation
• [x] Hide file list on small devices
• [x] User Setting / localStorage Key to configure visibility of file tree

closes #18192

[silverwind]

Please add a toggle button that remembers its state (ideally in user config table on server, but localStorage may be acceptable as well), just like GitHub. The view in disabled toggle state should be like it is currently.

[lunny]

Good job. But a tree view is better.

[sebastian-sauer]

I've added a non collapsible file tree to make navigation through diff files easier - see screenshots in PR description for an updated version.

Any feedback is much appreciated :)

[silverwind]

Maybe we should have the toggle button in the same place as GitHub? E.g. top left of diff view:

[JakobDev]

On the Screenshot it looks like Directories are not collapsible. This needs to be added, especially for bigger PRs.

[sebastian-sauer]

On the Screenshot it looks like Directories are not collapsible. This needs to be added, especially for bigger PRs.

Directories are now collapsible.

[sebastian-sauer]

Added a hover style following the github tree and tweaked some paddings

[sebastian-sauer]

The show more functionality for our file tree has now been added.

[sebastian-sauer]

Now all folders containing only a folder will be merged into one directory entry in our tree. So we reduce the depth of our tree and make the tree behave like the github one

the following screenshot shows the result of the folder fonts and lato being combined into one entry fonts/lato

[sebastian-sauer]

Hi all, I really would appreciate this feature in 1.18. Is there any new feedback on this PR?

[delvh]

Reviewing this PR is also still on my bucketlist (which is currently way too long with far too little free time).

---

One thing I've already noticed in GitHubs behavior is that I'd really like it if it would display a read-only checkbox for whether I've already (re-)viewed the file. You could perhaps do this the following way: If the user is not signed in, show the icon. Otherwise, show either the marked or unmarked checkbox instead. However, this can also be added later if it's too much effort.

[lunny]

I have tested it and I think it's mature enough as the first step. But find out that performance is a problem when there are over one hundred of files changed. And of course, the performance problem is still there without this PR. LGTM

[sebastian-sauer]

Yes - the performance of the diff view for large diffs is (and was) not the best. I hope i'll find some more spare time to analyze and improve the overall performance (maybe some lazy rendering of the diff).

But this wouls be done in a different/follow up PR.

[Rainson12]

I would also really like to see this merged. I think the implementation is great and 1.18 should be shipped with it. It would be a huge QoL upgrade for me coming from bitbucket

[lunny]

Please resolve the conflict

[codecov-commenter]

Codecov Report

:exclamation: No coverage uploaded for pull request base (main@f1ea6c9). Click here to learn what that means. The diff coverage is 29.47%.

:exclamation: Current head 834b592 differs from pull request most recent head b6748c1. Consider uploading reports for the commit b6748c1 to get more accurate results

@@           Coverage Diff           @@
##             main   #21012   +/-   ##
=======================================
  Coverage        ?   47.12%           
=======================================
  Files           ?     1017           
  Lines           ?   138119           
  Branches        ?        0           
=======================================
  Hits            ?    65092           
  Misses          ?    65080           
  Partials        ?     7947           

Impacted Files	Coverage Δ
cmd/serv.go	2.22% <ø> (ø)
models/activities/repo_activity.go	61.50% <ø> (ø)
models/repo/repo.go	61.73% <ø> (ø)
modules/markup/markdown/convertyaml.go	0.00% <0.00%> (ø)
modules/markup/markdown/math/block_node.go	0.00% <0.00%> (ø)
modules/markup/markdown/math/inline_node.go	0.00% <0.00%> (ø)
modules/markup/markdown/renderconfig.go	0.00% <0.00%> (ø)
modules/packages/vagrant/metadata.go	79.62% <ø> (ø)
modules/repository/create.go	44.19% <ø> (ø)
modules/setting/setting.go	49.58% <ø> (ø)
... and 30 more

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

[wxiaoguang]

I am still reading this PR. Some changes:

1. The diff-file-tree-visibility-buttons is replaced by a single <a>, remove the inline style, simplify the HTML elements, (and now it has mouse pointer by <a>)
2. isolate DiffFileList related event handler code into its component
3. Use flex for diff-file-boxes, instead of #diff-file-tree[style*='display: block'] ~ #diff-file-boxes
4. The height: calc(100vh - 50px); of diff-file-tree seems incorrect, it caused unnecessary scroll bars for small PRs. So it's changed to height: 100%

[wxiaoguang]

Let's get it in Gitea 1.18. After the CI/CD job (about 1 hour later), it can be tested on try.gitea.io

---

Update: it's on https://try.gitea.io/ now.