Port file tree sidebar and keyboard shortcuts from Gitea #1

New issue

Closed

opened 2026-05-08 09:29:06 +02:00 by sleepy · 1 comment

sleepy commented

2026-05-08 09:29:06 +02:00

Owner

Feature request

Port the file tree sidebar and keyboard shortcuts that Gitea has added since the hard fork.

1. File Tree Sidebar (when viewing source files)

Gitea added a toggleable file tree sidebar that appears when viewing a file. It shows the full directory tree alongside the code, replacing the need for the t fuzzy finder in many workflows.

Gitea implementation files:

File	Purpose
`web_src/js/features/repo-view-file-tree.ts`	Vue component that mounts the file tree sidebar on file view pages
`web_src/js/features/repo-diff-filetree.ts`	File tree in diff view
`web_src/js/features/repo-findfile.ts`	Fuzzy file finder (the `t` hotkey — also worth porting)
`templates/repo/view_file_tree.tmpl`	HTML template for the file tree component
`templates/repo/view_file_tree_toggle_button.tmpl`	Toggle button to show/hide sidebar

How it works:

A button (repo-view-file-tree-toggle) shows/hides the sidebar
The sidebar loads a Vue app (ViewFileTree.vue) that renders the directory tree
User preference (show/hide) is persisted via POST /user/settings/update_preferences with codeViewShowFileTree
The tree is populated from the existing /tree-list endpoint (which Forgejo already has!)

Key commits to look at in Gitea repo:

Search repo-view-file-tree in Gitea commit history
The feature was added around Gitea v1.23-1.24 timeframe

2. Keyboard Shortcuts

Gitea has global keyboard shortcuts that work on any repo page.

Gitea implementation files:

File	Purpose
`web_src/js/modules/shortcut.ts`	Global keyboard shortcut handler (input focus, Escape, `<kbd>` hints)
`templates/devtest/keyboard-shortcut.tmpl`	Shortcut help modal template
`web_src/css/modules/shortcut.css`	Styling for shortcut hints

How it works:

<kbd> elements next to <input> fields declare shortcuts
data-shortcut-keys attribute specifies the key
global-shortcut-wrapper CSS class marks shortcut-enabled inputs
Typing the key focuses the input; Escape clears and blurs it

Why this matters

Forgejo was a soft fork of Gitea and the codebases are both Go with Vue frontends. The file tree sidebar and keyboard shortcuts are self-contained features that should be straightforward to port — the backend endpoints (/tree-list, /find) already exist in Forgejo.

These are the two most noticeable UX gaps when switching from Gitea to Forgejo.

References

Gitea source: https://github.com/go-gitea/gitea
This repo mirrors: https://codeberg.org/forgejo/forgejo (default branch: forgejo)

## Feature request Port the **file tree sidebar** and **keyboard shortcuts** that Gitea has added since the hard fork. --- ### 1. File Tree Sidebar (when viewing source files) Gitea added a toggleable file tree sidebar that appears when viewing a file. It shows the full directory tree alongside the code, replacing the need for the `t` fuzzy finder in many workflows. **Gitea implementation files:** | File | Purpose | |---|---| | `web_src/js/features/repo-view-file-tree.ts` | Vue component that mounts the file tree sidebar on file view pages | | `web_src/js/features/repo-diff-filetree.ts` | File tree in diff view | | `web_src/js/features/repo-findfile.ts` | Fuzzy file finder (the `t` hotkey — also worth porting) | | `templates/repo/view_file_tree.tmpl` | HTML template for the file tree component | | `templates/repo/view_file_tree_toggle_button.tmpl` | Toggle button to show/hide sidebar | **How it works:** - A button (`repo-view-file-tree-toggle`) shows/hides the sidebar - The sidebar loads a Vue app (`ViewFileTree.vue`) that renders the directory tree - User preference (show/hide) is persisted via `POST /user/settings/update_preferences` with `codeViewShowFileTree` - The tree is populated from the existing `/tree-list` endpoint (which Forgejo already has!) **Key commits to look at in Gitea repo:** - Search `repo-view-file-tree` in Gitea commit history - The feature was added around Gitea v1.23-1.24 timeframe --- ### 2. Keyboard Shortcuts Gitea has global keyboard shortcuts that work on any repo page. **Gitea implementation files:** | File | Purpose | |---|---| | `web_src/js/modules/shortcut.ts` | Global keyboard shortcut handler (input focus, Escape, `<kbd>` hints) | | `templates/devtest/keyboard-shortcut.tmpl` | Shortcut help modal template | | `web_src/css/modules/shortcut.css` | Styling for shortcut hints | **How it works:** - `<kbd>` elements next to `<input>` fields declare shortcuts - `data-shortcut-keys` attribute specifies the key - `global-shortcut-wrapper` CSS class marks shortcut-enabled inputs - Typing the key focuses the input; Escape clears and blurs it --- ### Why this matters Forgejo was a soft fork of Gitea and the codebases are both Go with Vue frontends. The file tree sidebar and keyboard shortcuts are self-contained features that should be straightforward to port — the backend endpoints (`/tree-list`, `/find`) already exist in Forgejo. These are the two most noticeable UX gaps when switching from Gitea to Forgejo. --- ### References - Gitea source: https://github.com/go-gitea/gitea - This repo mirrors: https://codeberg.org/forgejo/forgejo (default branch: `forgejo`)

sleepy referenced this issue

2026-05-08 10:31:54 +02:00

[UX] Port file tree sidebar and keyboard shortcuts from Gitea (#1) #2

sleepy referenced this issue from a commit

2026-05-08 11:16:51 +02:00

[UX] Port file tree sidebar and keyboard shortcuts from Gitea (#1)

sleepy closed this issue

2026-05-08 11:16:51 +02:00

sleepy commented

2026-05-08 11:23:40 +02:00

Author

Owner