Jiseoup/showmycodePublic
EN|KO
  • Code
  • Commits
  • Pull Requests
← Back to list
Merged

feat: add changed-files tree sidebar to PR and commit detail

#12
JiseoupJiseoup · May 18, 2026feat/changed-files-tree-sidebar → main
feat
OverviewCommitsFiles changed

Related Issue

N/A

Changes

  • Add FilesChangedWithTree: sticky left-side directory tree of changed files with collapsible folders, used on the PR "Files changed" tab and the commit detail page.
  • Click a file in the tree to scroll the right pane to that file's diff (scrollIntoView against id="file-${sha}" anchors added to each FilesChanged card).
  • DFS the sorted tree to produce the ordered file list passed to FilesChanged, so tree order and diff order always match.
  • Reuse the existing folder-toggle icon (the one used on the code tab) for the tree's expand/collapse-all button — plus icon when all collapsed, minus when any expanded.
  • Align file rows with their parent folder using a chevron-width placeholder (no magic padding offset).
  • Widen the PR Files tab and commit detail pages to max-w-6xl; other PR tabs keep max-w-4xl. Sidebar is hidden below the md breakpoint.
  • Add tree.title / tree.expandAll / tree.collapseAll to pulls and commits slices in both locales/en.json and locales/ko.json.

How to Verify

  1. npm run dev and open a PR with files across multiple nested directories. Visit the Files changed tab.
  2. Confirm the tree appears on the left and the diffs on the right, in matching order.
  3. Toggle individual folders, and use the header icon button to expand/collapse all.
  4. Click a file in the tree — the right pane should smoothly scroll to that file's diff.
  5. Scroll the diff pane and confirm the tree stays pinned to the viewport.
  6. Open the commit detail page (/[lang]/repository/[owner]/[repo]/commits/[sha]) and repeat steps 2–5.
  7. Shrink the viewport below 768px — the tree should be hidden and the diff list should look unchanged from before.
  8. Switch the locale to KO and confirm the tree header reads 변경된 파일.
  9. Toggle dark mode and confirm the tree and status dots remain readable.

Checklist

  • npm run format:check passes
  • npm run lint passes
  • npm run typecheck passes
  • npm run build passes
  • PR title follows Conventional Commits (feat:, fix:, chore:, refactor:, docs:, test:, )
i18n:
  • New/updated strings added to both locales/ko.json and locales/en.json (if applicable)