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

Merged

sleepy merged 3 commits from feature/1-port-gitea-ux into forgejo 2026-05-08 11:16:51 +02:00

Conversation 1 Commits 3 Files changed 20 +843 -2

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

Owner

Copy link

Summary

• Added file tree sidebar for code view (Vue 3 component reusing existing DiffFileTree patterns, /tree-list API)
• Added global keyboard shortcuts (data-shortcut-keys) for input focus with Escape to clear
• Persists sidebar visibility via localStorage

Changes

• New: ViewFileTree.vue, ViewFileTreeItem.vue, repo-view-file-tree.ts — file tree sidebar for code view
• New: view_file_tree.tmpl, view_file_tree_toggle_button.tmpl — Go templates for sidebar mount point and toggle
• Modified: view_file.tmpl — flex layout with sidebar + content
• New: shortcut.ts, shortcut.css — global keyboard shortcut system
• Modified: common-global.js, repo-code.ts, find/files.tmpl — wire features into existing pages
• New: keyboard-shortcut.tmpl — dev test page
• Added locale keys: show_file_tree, hide_file_tree (en-US, ar, nb_NO)

Test Results

• Frontend tests: 26 files, 104 tests — all passed
• TypeScript: no errors
• Lint: clean (0 errors, 0 warnings)

## Summary - Added file tree sidebar for code view (Vue 3 component reusing existing DiffFileTree patterns, `/tree-list` API) - Added global keyboard shortcuts (`data-shortcut-keys`) for input focus with Escape to clear - Persists sidebar visibility via localStorage ## Changes - New: `ViewFileTree.vue`, `ViewFileTreeItem.vue`, `repo-view-file-tree.ts` — file tree sidebar for code view - New: `view_file_tree.tmpl`, `view_file_tree_toggle_button.tmpl` — Go templates for sidebar mount point and toggle - Modified: `view_file.tmpl` — flex layout with sidebar + content - New: `shortcut.ts`, `shortcut.css` — global keyboard shortcut system - Modified: `common-global.js`, `repo-code.ts`, `find/files.tmpl` — wire features into existing pages - New: `keyboard-shortcut.tmpl` — dev test page - Added locale keys: `show_file_tree`, `hide_file_tree` (en-US, ar, nb_NO) ## Test Results - Frontend tests: 26 files, 104 tests — all passed - TypeScript: no errors - Lint: clean (0 errors, 0 warnings)

sleepy added 1 commit 2026-05-08 10:31:54 +02:00

fix: resolve eslint errors and warnings ... 8ce706e00b

- Merge duplicate import in shortcut.ts
- Replace .forEach() with for...of loops in shortcut.ts
- Fix Vue template formatting in ViewFileTree.vue and ViewFileTreeItem.vue

sleepy commented 2026-05-08 10:44:18 +02:00

Author

Owner

Copy link

Review: CHANGES_REQUESTED

1. Dead/fragile CSS — shortcut.css:5-18

Bare kbd rule conflicts with base.css kbd rule (loaded earlier). Kill the bare rule, move all styling into .global-shortcut-wrapper > kbd.

2. Hardcoded English — ViewFileTree.vue:136

"Loading..." needs i18n via window.config.i18n.

3. No test coverage

4 new TS modules + 2 Vue components with zero tests. Add Vitest tests for: fileTree computed, fileLink, initGlobalShortcut.

4. Unencoded branch name — ViewFileTreeItem.vue:32

branchNameSubURL passed unencoded into URL. Apply split("/").map(encodeURIComponent).join("/") like file paths.

## Review: CHANGES_REQUESTED ### 1. Dead/fragile CSS — `shortcut.css:5-18` Bare `kbd` rule conflicts with `base.css` kbd rule (loaded earlier). Kill the bare rule, move all styling into `.global-shortcut-wrapper > kbd`. ### 2. Hardcoded English — `ViewFileTree.vue:136` `"Loading..."` needs i18n via `window.config.i18n`. ### 3. No test coverage 4 new TS modules + 2 Vue components with zero tests. Add Vitest tests for: `fileTree` computed, `fileLink`, `initGlobalShortcut`. ### 4. Unencoded branch name — `ViewFileTreeItem.vue:32` `branchNameSubURL` passed unencoded into URL. Apply `split("/").map(encodeURIComponent).join("/")` like file paths.

sleepy added 1 commit 2026-05-08 11:03:55 +02:00

fix: address review feedback for file tree PR ... 2a0cca76e8

- Remove fragile bare kbd rule from shortcut.css, merge into
  .global-shortcut-wrapper > kbd selector
- Add i18n for Loading... text in ViewFileTree.vue
- Add test coverage for ViewFileTree, ViewFileTreeItem, and shortcut modules
- Fix unencoded branch name in ViewFileTreeItem fileLink URL

sleepy added 1 commit 2026-05-08 11:13:20 +02:00

Fix i18n key lookup for view_file_tree_loading in repo template ... 9026265a31

The template referenced 'view_file_tree_loading' without the 'repo.'
prefix, causing the i18n lookup to fail. Also added the missing key to
the Arabic and Norwegian Bokmål locale files.

sleepy merged commit 714c6551e1 into forgejo 2026-05-08 11:16:51 +02:00

sleepy referenced this pull request 2026-05-08 11:23:40 +02:00

Port file tree sidebar and keyboard shortcuts from Gitea #1

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels

No items

No labels

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

sleepy/forgejo!2

No description provided.