Everything tag, frontend #55
Conversation
There was a problem hiding this comment.
Pull request overview
This PR introduces an "everything" tag feature to the frontend, allowing users to indicate that a resource covers all topics or languages. It refactors tag display into reusable Tag and TagList components, adds mode support to TagSelector for distinguishing between create and search contexts, and updates the UI to highlight the "everything" tag with a distinctive orange theme.
Key Changes:
- Created new
Tag.vueandTagList.vuecomponents for consistent tag rendering across the application - Added
modeprop toTagSelectorto differentiate between 'create' and 'search' modes, preventing new tag creation during search - Introduced special styling for the "everything" tag with orange colors and bold text to make it visually distinct
Reviewed changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| resources/js/Components/Tag.vue | New component for rendering individual tags with support for variants, icons, counts, and special "everything" tag styling |
| resources/js/Components/TagList.vue | New component for rendering lists of tags with optional labels and icons |
| resources/js/Components/Form/TagSelector.vue | Added mode and allowEverything props, integrated Tag component, enhanced dropdown with "everything" tag highlighting |
| resources/js/Pages/Resources/Form/TagsFields.vue | Updated documentation to explain "everything" tag usage, added mode and allowEverything props to TagSelector instances |
| resources/js/Pages/ResourceEdits/Create.vue | Added mode and allowEverything props to TagSelector instances |
| resources/js/Components/Resources/ResourceOverview.vue | Refactored to use new Tag and TagList components instead of inline tag rendering |
| resources/js/Components/Resources/ResourceCard.vue | Refactored to use new Tag component for consistent tag display |
| resources/js/Components/Resources/FilterBar.vue | Added mode prop to TagSelector instances for search context |
| README.md | Added deployment documentation about Ansible usage |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <span | ||
| v-if="count !== null" | ||
| class="ml-1.5 text-xs px-2 py-1 rounded-full" | ||
| :class="variant === 'highlighted' | ||
| ? 'bg-secondary text-primaryDark dark:bg-gray-800 dark:text-primaryLight' | ||
| : 'bg-gray-100 text-gray-600 dark:bg-gray-900 dark:text-gray-300'" | ||
| > | ||
| {{ count }} | ||
| </span> |
There was a problem hiding this comment.
When the "everything" tag has a count, the count badge uses default gray/secondary styling instead of matching the orange theme. Consider adding special styling for the count when isEverything.value is true to maintain visual consistency with the orange theme.
There was a problem hiding this comment.
@copilot open a new pull request to apply changes based on this feedback
| icon="mdi:information-outline" | ||
| class="absolute right-3 size-5 text-gray-400 dark:text-gray-500 cursor-help" | ||
| v-tooltip.top="'You can add multiple tags at once by separating them with commas (e.g., tag1, tag2, tag3)'" | ||
| v-tooltip.top="`'everything' tag covers all possible tags`" |
There was a problem hiding this comment.
The tooltip now only mentions the 'everything' tag but removes the helpful information about comma-separated tags functionality. In 'create' mode, users can still add multiple tags at once using commas. Consider including both pieces of information in the tooltip or making it mode-aware to show relevant help text.
There was a problem hiding this comment.
@copilot open a new pull request to apply changes based on this feedback
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
|
@AllanKoder I've opened a new pull request, #56, to work on those changes. Once the pull request is ready, I'll request review from you. |
|
@AllanKoder I've opened a new pull request, #57, to work on those changes. Once the pull request is ready, I'll request review from you. |
* Initial plan * Make tooltip mode-aware to show comma-separated tags help Co-authored-by: AllanKoder <74692833+AllanKoder@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: AllanKoder <74692833+AllanKoder@users.noreply.github.com>
* Initial plan * Add orange-themed styling for count badge on 'everything' tag Co-authored-by: AllanKoder <74692833+AllanKoder@users.noreply.github.com> * Add explicit handling for 'selected' variant in count badge styling Co-authored-by: AllanKoder <74692833+AllanKoder@users.noreply.github.com> * Consolidate duplicate styling logic for highlighted and selected variants Co-authored-by: AllanKoder <74692833+AllanKoder@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: AllanKoder <74692833+AllanKoder@users.noreply.github.com>
No description provided.