Refactor frontend structure, integrate API, and enhance UI components#125
Merged
Conversation
…ntend structure and folder for further migration and named it frontend. Fixed initial errors.
…w frontend folder.
…ct. Could be resolved.
…ct. Could be resolved.
…lder public with the rive-files and a new file RiveLogo.tsx in frontend/components for the integration.
…th a new RiveLoader.tsx file in apps/frontend/src/components. Changes in App.tsx were made.
…esign` to `GitRay - Git analytics`.
…rontend/src/services`. Added `axios` into `frontend/package.json`. Added a `shared-types` alias into the `frontend/vite.config.ts`.
… the landingpage. Added state variabled for commits, heatmapData and repoUrl. Added error handling. Passed Data to Dashboard. Additionally: Added a check - if the URL doesnt ends with `.git` then add a `.git` to it.
…`CommitHeatmap.tsx` file in `/apps/frontend/src/components`.
…into the `api.ts` and into the `FileDistributionChart.tsx` for a working file type distribution.
…`api.ts` file in `frontend` and `/apps/frontend/src/components/CodeChurnChart.tsx`. Added the api-call into the `/apps/frontend/src/components/DashboardPage.tsx`. Limited the api-output in `backend` by Top-50-files.
…name. On hover effect with full path is now implemented.
… longer than 25 Charts it gets truncated: e.g. `VeryLongFileNameConfiguration.ts` to `VeryLongFileNameCo...ts`.
…from `apps/frontend/src/components/FileDistributionChart.tsx` for the `/apps/frontend/src/components/FileTypeList.tsx` and integrated the data in the component which is shown in the `File Types`-Tab in the `Analytics`-Tab.
…lter-buttons for time-periods: `last 3 months`, `last 6 months` and `last 12 months`. Added the data from the api-route to have a working peak activity calculation.
…apps/frontend/src/services/api.ts`: `getWorkspaceCommits` and ` getHeatmapData`, since `getRepositoryFullData` is used instead.
… the Activity Snapshot in `/apps/frontend/src/components/ActivityChart.tsx` with real commit data using the existing commits data.
…UT WITH ERRORS. Integrated the `Recent Activity`-Section in `/apps/frontend/src/components/GraphViewTimeline.tsx`: `Analytics-Timeline` in nested-tabs in frontend-ui. Uses `Commits`-Data. BUT at the moment only hardcoded data is shown and not the actual data.
… from all UI component imports. Removed unused imports from components: `Medal`,`TrendingUp`,`X`,`ChrevronDown`,`useEffect`. Updated `GraphViewTimeline.tsx` to use correct properties: `commit.authorName`,`commit.abbreviatedHash`.
…e logic: If files without any type, display `No Extension`. For the `File Type Distribution` in `/apps/frontend/src/components/FileDistributionChart.tsx`: Files types less than 5% gets grouped into the category `Others`. For the `File Type Distribution` in `/apps/frontend/src/components/FileTypeList.tsx`: Added the label `Files:` in front of the file-count. At the bottom: `File Types`-Data got moved to the right and `Average File Size`-Data got added in the center.
…ed tab `Code Churn` in `Analytics`, displays now all filenames on the left. Added better spacing to avoid layout overlapping.
…d of 10, are shown in the `Recent Activity` section in the nested tab `Timeline` in `Analytics`, File `/apps/frontend/src/components/GraphViewTimeline.tsx`. Added a `Show More`-Button in the right-top of this section: expands the section and shows the latest 20 commits and a `Back To Top`-Button appears at the bottom of this section, that scrolls to the top, the `Show More`-Button transforms after clicking to a `Show Less`-Button. A Scrollbar was added in this section to display after clicking the `Show More`-Button: ERROR: The Scrollbar dont work and dont get displayed yet.
…d the data from the `Summary API` into the `/apps/frontend/src/components/DashboardPage.tsx` with a proper date-format and a `Age`-naming.
During the UI redesign migration from apps/frontendOld to apps/frontend,
the Vitest configuration files were not transferred. This caused all test
commands to fail with "Projects definition references a non-existing file".
Added files:
- apps/frontend/vitest.config.ts: Complete Vitest config with jsdom,
React plugin, thread pool settings, and coverage configuration
- apps/frontend/src/test-setup.ts: Test setup with React 19 compatibility,
DOM cleanup, and window.matchMedia mock
The root vitest.config.ts references these files, and all tests now pass:
- Backend: 893 tests passing
- Full test suite: All projects working
Related to #87
…KB`at the bottom of the `File Types`-List for the `Average File Size`-Data. Added the mathematical approximation symbol before the number of the `Average File Size`-Data.
…er function to convert file extensions to human-readable names in `FileTypeList.tsx`. Updated the layout and styling in `GraphViewTimeline.tsx` for better spacing and scrollbar visibility: ERROR sadly still dont work.
… commit streak to accurately reflect consecutive days with commits, and updated the average commits per day metric for better analytics insights.
…ints with updated query handling and error logging.
… readability and maintainability. Migrated the old frontend completely to the new frontend and deleted the old frontend folder.
… readability and maintainability. Migrated the old frontend completely to the new frontend and deleted the old frontend folder.
…ATURES, MOCKUP_DATA, QUICK_START, and Guidelines.
- Updated project overview to reflect React 18.3 and new technology stack - Revamped codebase structure to include shadcn/ui components and new visualization features - Enhanced coding standards with shadcn/ui patterns and best practices - Created detailed frontend architecture documentation outlining component design and state management - Updated task completion checklist to include shadcn/ui specific requirements - Added new memory update summary for January 3, 2026, detailing all changes and current project state - Revised README to reflect new frontend technologies and components.
- Added `monthsToShow` prop to `CommitHeatmap` for selecting the number of months to display (3, 6, or 12). - Updated heatmap data generation logic to utilize either API-provided data or fallback to commit data based on the selected month range. - Modified `DashboardPage` to pass the new `monthsToShow` prop to `CommitHeatmap`. - Refactored API service calls to use URLSearchParams for building query parameters, ensuring undefined values are omitted for stable cache keys.
…nd enhance API test scenarios - Updated color variables in globals.css to use lowercase hex codes for consistency. - Changed the React plugin in vitest.config.ts to use @vitejs/plugin-react-swc for improved performance. - Refined ESLint configuration for better readability and consistency in rule definitions. - Enhanced comments in backend codebase to follow best practices for clarity and professionalism. - Optimized unit test guidelines to improve coverage and reduce redundancy. - Added a comprehensive verification script to automate testing of critical commands post-migration. - Expanded API testing scenarios to cover cache behavior, error handling, and response validation for various routes.
…sive health verification script.
…t state and technology stack.
…map, and custom hooks; update tsconfig and vitest config for improved testing support.
…eamline mock component definitions.
… and file type calculations.
…inability; consolidate extension definitions and enhance mock distribution structure.
…es components; enhance API service tests for error handling scenarios.
30 tasks
Owner
|
hallo |
jonasyr
approved these changes
Apr 7, 2026
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 453a1d0b89
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
NiklasSkulll
deleted the
87-featfrontend-ui-redesign-migration-to-shadcnui
branch
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request contains extensive updates to the project’s documentation, focusing on a major redesign and architectural improvements to the frontend, as well as expanded technical documentation for both backend and frontend components. The most important changes are the introduction of a new UI component library (
shadcn/ui), a restructured frontend architecture, and enhanced backend service documentation. Additionally,.gitignorepatterns and coding standards have been updated.Frontend Redesign and Architecture:
apps/frontend/src/) is now redesigned using theshadcn/uicomponent library, with 47+ accessible, customizable UI primitives based on Radix UI, CVA, and Tailwind. The architecture now features a clear separation of core, visualization, and feature components, and improved file structure for scalability and maintainability. (.serena/memories/architecture_overview.md, [1];.serena/memories/codebase_structure.md, [2] [3]Header.tsx,Footer.tsx,LandingPage.tsx,DashboardPage.tsx, and specialized visualization and feature components, replacing the previous monolithic layout. (.serena/memories/architecture_overview.md, [1];.serena/memories/codebase_structure.md, [2]Backend and Infrastructure Documentation:
.serena/memories/architecture_overview.md, [1] [2] [3] [4] [5] [6] [7];.serena/memories/codebase_structure.md, [8] [9]Build, Testing, and Configuration:
.serena/memories/codebase_structure.md, [1] [2].gitignore and Linting:
.markdownlint-cli2.yamlto ignore markdown files in the new frontend source directory, ensuring linting tools do not process UI library or documentation files unnecessarily. (.markdownlint-cli2.yaml, .markdownlint-cli2.yamlL41-R45)Coding Standards:
.serena/memories/coding_standards.md, [1] [2]