Conversation
Signed-off-by: Gašper Grom <gasper.grom@gmail.com>
WalkthroughThis pull request updates the pagination and repository handling across several components. The collection views now use an explicit “Load more” button instead of scroll-based loading, and their page size values have been adjusted. In addition, the project header and repository components now compute and pass repository slugs rather than names. Corresponding changes have been made in the project store, search result component, API endpoints, helper functions, and type definitions to reflect the updated data structure for repositories. Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant C as Collection View Component
participant API as API Endpoint
U->>C: Clicks "Load More" button
C->>C: Execute loadMore() (increments page counter)
C->>API: Request next set of data (using updated page and pageSize)
API-->>C: Return additional project/collection data
C->>U: Render and append newly loaded items
Possibly related PRs
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🔇 Additional comments (8)
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
frontend/server/helpers/repository.helpers.ts (1)
29-29: New utility function to convert repository names to slugsThe implementation correctly handles repository name conversion to URL-friendly slugs by replacing slashes with hyphens and applying lowercase transformation.
Consider adding a null/undefined check to make the function more robust:
-export const getRepoSlugFromName = (name: string): string => slugify(name.replace(/\//g, '-'), {lower: true}) +export const getRepoSlugFromName = (name: string): string => { + if (!name) return ''; + return slugify(name.replace(/\//g, '-'), {lower: true}); +}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
frontend/pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (14)
frontend/app/components/modules/collection/views/collection-details.vue(4 hunks)frontend/app/components/modules/collection/views/collection-list.vue(3 hunks)frontend/app/components/modules/project/components/shared/header.vue(4 hunks)frontend/app/components/modules/project/components/shared/header/repository-switch.vue(1 hunks)frontend/app/components/modules/project/store/project.store.ts(1 hunks)frontend/app/components/shared/layout/search/search-result.vue(1 hunks)frontend/app/components/uikit/tag/tag.scss(1 hunks)frontend/app/layouts/default.vue(1 hunks)frontend/package.json(1 hunks)frontend/server/api/project/[slug]/index.ts(3 hunks)frontend/server/api/search.ts(2 hunks)frontend/server/helpers/repository.helpers.ts(2 hunks)frontend/types/project.ts(1 hunks)frontend/types/search.ts(1 hunks)
🧰 Additional context used
🧬 Code Definitions (2)
frontend/app/components/modules/project/store/project.store.ts (1)
frontend/types/project.ts (1) (1)
ProjectRepository(1-5)
frontend/server/api/search.ts (1)
frontend/server/helpers/repository.helpers.ts (2) (2)
getRepoNameFromUrl(3-27)getRepoSlugFromName(29-29)
🔇 Additional comments (33)
frontend/package.json (1)
32-32: Added new dependency slugifyThe addition of the slugify package is appropriate for generating URL-friendly strings from repository names.
frontend/types/search.ts (1)
13-13: Added name property to SearchRepository interfaceThis addition properly aligns the repository data structure with the changes in the API and UI components that now handle both repository names and slugs.
frontend/app/components/uikit/tag/tag.scss (1)
36-36: Enhanced transparent tag styling with text colorThe addition of
text-neutral-500to the transparent tag variant ensures consistent text coloring, which improves the visual hierarchy.frontend/server/helpers/repository.helpers.ts (1)
1-2: Added slugify importCorrectly imported the slugify package to support the new functionality.
frontend/app/layouts/default.vue (1)
7-11: Footer layout improvementThe addition of a container for the footer improves the layout consistency with the rest of the application, while the padding adjustments provide better spacing, especially on different screen sizes.
frontend/app/components/modules/project/components/shared/header/repository-switch.vue (2)
44-45: Repository identification updatesGood change from using repository name to using the slug for routing. This is more reliable as slugs are URL-friendly and consistent identifiers.
50-50: Consistent repository selectionThis maintains consistency with the routing changes by using the repository slug for selection comparison instead of the name.
frontend/app/components/modules/collection/views/collection-details.vue (4)
51-62: Improved loading mechanism with explicit buttonReplacing automatic scroll-based loading with a manual "Load more" button improves user experience by giving users more control over when to load additional content.
76-76: Added button component importAppropriate import for the newly added Load more button.
89-89: Increased page sizeIncreased page size from 50 to 60, which will show more projects at once before requiring users to load more.
122-124: Simple load more implementationClear and straightforward implementation of the load more functionality that increments the page number.
frontend/server/api/search.ts (2)
3-3: Added repository helper function importsProperly importing the necessary helper functions for repository name and slug extraction.
62-67: Improved repository data handlingThe changes implement better handling of repository data by:
- Extracting the repository name from URL using a dedicated helper function
- Generating a consistent slug from the name
- Storing both name and slug in the repository object
This approach ensures consistent formatting and representation of repository information across the application.
frontend/app/components/modules/project/store/project.store.ts (2)
44-44: Good simplification of the projectRepos computed property.The change removes unnecessary mapping and directly returns the repositories array, making the code more maintainable.
47-48: Repository selection now uses slug instead of name.This change aligns with the ProjectRepository interface that includes a slug property and makes the routing more consistent throughout the application.
frontend/server/api/project/[slug]/index.ts (4)
2-3: Good addition of necessary imports.Adding the ProjectTinybird type and getRepoSlugFromName helper improves type safety and enables the new repository slug functionality.
24-26: Documentation updates match implementation changes.The documentation now correctly describes the updated repository object structure that includes name, url, and slug properties.
35-35: Improved type safety with ProjectTinybird.Using the more specific ProjectTinybird type improves type safety for the API response.
41-54: Enhanced repository structure with name and slug properties.This transformation improves the repository data structure by explicitly computing and including both name and slug properties, which are used for display and routing respectively.
frontend/app/components/shared/layout/search/search-result.vue (1)
69-71: Simplified repository iteration and routing.The changes remove the need for an intermediate computed property by using props.repositories directly and correctly use the repository.slug for routing, making the code more maintainable.
frontend/app/components/modules/collection/views/collection-list.vue (4)
89-100: Added explicit "Load more" button for better UX.Replacing scroll-based pagination with an explicit button gives users more control over when to load additional content and improves clarity.
119-119: Added required button component import.Correctly added the import for the newly used LfxButton component.
126-126: Increased page size for more efficient loading.Increasing the page size from 10 to 50 reduces the number of network requests needed when browsing collections, which improves performance.
161-163: Added loadMore function for manual pagination.This function properly increments the page value to fetch the next set of collections when the user clicks the "Load more" button.
frontend/app/components/modules/project/components/shared/header.vue (6)
28-31: Improved responsive title handling with truncationThe conditional class binding for the h1 element adds proper truncation when a repository is selected, which prevents layout shifts and improves the UI when repository names are long.
50-52: Enhanced repository name display with better stylingThe updated styling with text color and truncation provides better visual hierarchy and prevents long repository names from breaking the layout.
53-56: Improved visual distinction for "All repositories" labelThe styling change for the fallback span provides better visual distinction between the active repository and the default "All repositories" text.
139-144: Using slug instead of name for repository identificationThe change from
:repo="repoName"to:repo="repoSlug"properly aligns with URL-based navigation patterns, which is important for consistent routing.
150-151: Added necessary imports for state management and typesThe addition of imports for storeToRefs, project types, and the ProjectStore provides better type safety and enables access to the centralized project state.
Also applies to: 166-166
174-180: Enhanced repository identification using slugsThe changes to repository handling are well-implemented:
- Accessing repositories from the centralized store
- Finding repositories by slug instead of name (better for URL-based navigation)
- Computing a clean display name by extracting the last segment of the full name
- Directly accessing the slug from route parameters
This approach provides better consistency across the application's routing.
frontend/types/project.ts (3)
1-5: Improved ProjectRepository interface with URL and slug supportThe changes to the ProjectRepository interface are well-structured:
- Changing
repotourlbetter describes the property's purpose- Adding a
slugproperty supports URL-friendly identifiers for repositoriesThis is a good improvement for URL-based navigation and API consistency.
7-16: Enhanced Project interface with comprehensive propertiesThe Project interface has been significantly expanded with essential properties:
- Basic identifiers (id, name, slug)
- Display properties (description, logo)
- Metrics (contributorCount, organizationCount)
- Related data (repositories)
This provides a more complete and structured representation of project data, which will benefit components that consume this data.
18-27: Well-structured ProjectTinybird interfaceThe ProjectTinybird interface maintains consistency with the main Project interface structure while using a simplified repositories representation (string array). This allows for lighter-weight data transfer when full repository details aren't needed.
emlimlf
left a comment
emlimlf
left a comment
There was a problem hiding this comment.
Was just a minor comment, otherwise all good
frontend/app/components/modules/collection/views/collection-details.vue
Outdated
Show resolved
Hide resolved
frontend/app/components/modules/collection/views/collection-list.vue
Outdated
Show resolved
Hide resolved
Signed-off-by: Gašper Grom <gasper.grom@gmail.com>
2 participants
Summary by CodeRabbit
New Features
Style
Chores