Open
Conversation
- Add Directory nav item to site config - Implement directory registry system - Add registry components and documentation
📝 WalkthroughWalkthroughAdds a Registry Directory feature: new searchable RegistryList and AddRegistryModal Vue components, a directory JSON data file and TypeScript interface, a docs page, and a navigation link to the directory docs. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🤖 Fix all issues with AI agents
In `@apps/v4/components/registry/RegistryList.vue`:
- Around line 36-41: The toggleAddRegistryModal function can leave stale state
because selectedRegistry.value is only set when registry is truthy; change the
logic in toggleAddRegistryModal (and keep references to selectedRegistry and
addRegistryOpen) so that selectedRegistry.value is explicitly set to the
incoming registry (which may be null) or cleared when the modal is being
closed—i.e., assign selectedRegistry.value = registry (or set to null) whenever
toggleAddRegistryModal is invoked, or clear selectedRegistry.value when flipping
addRegistryOpen from true to false.
- Around line 52-56: In RegistryList.vue update the count display inside the
InputGroupAddon to use the filtered array length (registryList.length) instead
of the total list (directoryRegistryList.length); locate the span that currently
renders directoryRegistryList.length and the pluralization expression and
replace both occurrences to reference registryList.length so the visible count
and plural label reflect filtered results from registryList.
- Around line 63-70: The Clear button <InputGroupButton> is missing an `@click`
handler and the wrapper closing tag is incorrectly cased; add an `@click` to the
<InputGroupButton> that resets the bound search state (e.g. `@click`="searchQuery
= ''" or `@click`="clearSearch()" if you prefer a method) and ensure the addon
wrapper uses the correct component casing (close with </InputGroupAddon> to
match the opening tag), so the button actually clears searchQuery and the
template renders correctly.
In `@apps/v4/content/docs/directory.md`:
- Around line 8-10: The example CLI command contains a trailing period in the
snippet "npx shadcn-vue add @<registry>/<component>." which will produce a
syntax error if copy-pasted; update the content to remove the trailing dot so
the command reads "npx shadcn-vue add @<registry>/<component>" (edit the
markdown snippet in the docs where that command appears).
In `@apps/v4/registry/directory.json`:
- Around line 3-4: Update the "name" field value in
apps/v4/registry/directory.json from "Insipira UI" to "Inspira UI" to match the
description; ensure the JSON "name" key (and any other occurrences of "Insipira
UI" in the file or nearby metadata) are corrected so the registry name and the
description are consistent.
🧹 Nitpick comments (3)
apps/v4/registry/directory.json (1)
17-17: Minor formatting: missing space after comma.For consistency with other descriptions, consider adding a space.
✏️ Suggested fix
- "description": "Beautiful maps,made simple.", + "description": "Beautiful maps, made simple.",apps/v4/lib/directory-registry.ts (1)
1-10: Move import to top of file.The import statement should be placed before the interface declaration, following standard TypeScript/JavaScript conventions.
♻️ Suggested refactor
+import directoryJson from '@/registry/directory.json' + export interface DirectoryRegistry { name: string description: string link: string command?: string logo: string } -import directoryJson from '@/registry/directory.json' export const directoryRegistryList: DirectoryRegistry[] = [...directoryJson]apps/v4/components/registry/RegistryList.vue (1)
31-35: Search is case-sensitive.Using
.includes()directly performs case-sensitive matching, which may not match user expectations.♻️ Suggested fix for case-insensitive search
const registryList = computed(() => { + const query = searchQuery.value.toLowerCase() return directoryRegistryList.filter((r) => { - return r.name.includes(searchQuery.value) || r.description.includes(searchQuery.value) + return r.name.toLowerCase().includes(query) || r.description.toLowerCase().includes(query) }) })
Comment on lines
+52
to
+56
| <InputGroupAddon align="inline-end"> | ||
| <span class="text-muted-foreground tabular-nums sm:text-xs"> | ||
| {{ directoryRegistryList.length }} | ||
| {{ directoryRegistryList.length === 1 ? "Registry" : "Registries" }} | ||
| </span> |
There was a problem hiding this comment.
Count displays total instead of filtered results.
The count shows directoryRegistryList.length (total) rather than registryList.length (filtered), which could confuse users when searching.
✏️ Suggested fix
<span class="text-muted-foreground tabular-nums sm:text-xs">
- {{ directoryRegistryList.length }}
- {{ directoryRegistryList.length === 1 ? "Registry" : "Registries" }}
+ {{ registryList.length }}
+ {{ registryList.length === 1 ? "Registry" : "Registries" }}
</span>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <InputGroupAddon align="inline-end"> | |
| <span class="text-muted-foreground tabular-nums sm:text-xs"> | |
| {{ directoryRegistryList.length }} | |
| {{ directoryRegistryList.length === 1 ? "Registry" : "Registries" }} | |
| </span> | |
| <InputGroupAddon align="inline-end"> | |
| <span class="text-muted-foreground tabular-nums sm:text-xs"> | |
| {{ registryList.length }} | |
| {{ registryList.length === 1 ? "Registry" : "Registries" }} | |
| </span> |
🤖 Prompt for AI Agents
In `@apps/v4/components/registry/RegistryList.vue` around lines 52 - 56, In
RegistryList.vue update the count display inside the InputGroupAddon to use the
filtered array length (registryList.length) instead of the total list
(directoryRegistryList.length); locate the span that currently renders
directoryRegistryList.length and the pluralization expression and replace both
occurrences to reference registryList.length so the visible count and plural
label reflect filtered results from registryList.
Comment on lines
+63
to
+70
| <InputGroupButton | ||
| aria-label="Clear" | ||
| title="Clear" | ||
| size="icon-xs" | ||
| > | ||
| <X /> | ||
| </InputGroupButton> | ||
| </inputgroupaddon> |
There was a problem hiding this comment.
Clear button is non-functional and has incorrect tag casing.
- The clear button lacks an
@clickhandler to clearsearchQuery. - Line 70 uses lowercase
</inputgroupaddon>which may cause rendering issues in Vue templates.
🐛 Suggested fix
<InputGroupAddon
align="inline-end"
- :data-disabled="false"
+ :data-disabled="!searchQuery"
class-name="data-[disabled=true]:hidden"
>
<InputGroupButton
aria-label="Clear"
title="Clear"
size="icon-xs"
+ `@click`="searchQuery = ''"
>
<X />
</InputGroupButton>
- </inputgroupaddon>
+ </InputGroupAddon>🤖 Prompt for AI Agents
In `@apps/v4/components/registry/RegistryList.vue` around lines 63 - 70, The Clear
button <InputGroupButton> is missing an `@click` handler and the wrapper closing
tag is incorrectly cased; add an `@click` to the <InputGroupButton> that resets
the bound search state (e.g. `@click`="searchQuery = ''" or `@click`="clearSearch()"
if you prefer a method) and ensure the addon wrapper uses the correct component
casing (close with </InputGroupAddon> to match the opening tag), so the button
actually clears searchQuery and the template renders correctly.
Comment on lines
+8
to
+10
| ```bash | ||
| npx shadcn-vue add @<registry>/<component>. | ||
| ``` |
There was a problem hiding this comment.
Trailing period in command will cause syntax error.
The bash command includes a trailing period that would cause an error if users copy-paste and execute it.
✏️ Suggested fix
```bash
-npx shadcn-vue add @<registry>/<component>.
+npx shadcn-vue add @<registry>/<component></details>
<!-- suggestion_start -->
<details>
<summary>📝 Committable suggestion</summary>
> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
```suggestion
🤖 Prompt for AI Agents
In `@apps/v4/content/docs/directory.md` around lines 8 - 10, The example CLI
command contains a trailing period in the snippet "npx shadcn-vue add
@<registry>/<component>." which will produce a syntax error if copy-pasted;
update the content to remove the trailing dot so the command reads "npx
shadcn-vue add @<registry>/<component>" (edit the markdown snippet in the docs
where that command appears).
Comment on lines
+3
to
+4
| "name": "Insipira UI", | ||
| "description": "Inspira UI is a collection of reusable, animated components powered by TailwindCSS , motion-v , GSAP & threejs — crafted to help you ship faster and better.", |
There was a problem hiding this comment.
Typo in registry name.
The name is "Insipira UI" but the description references "Inspira UI". This appears to be a typo.
✏️ Suggested fix
- "name": "Insipira UI",
+ "name": "Inspira UI",📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| "name": "Insipira UI", | |
| "description": "Inspira UI is a collection of reusable, animated components powered by TailwindCSS , motion-v , GSAP & threejs — crafted to help you ship faster and better.", | |
| "name": "Inspira UI", | |
| "description": "Inspira UI is a collection of reusable, animated components powered by TailwindCSS , motion-v , GSAP & threejs — crafted to help you ship faster and better.", |
🤖 Prompt for AI Agents
In `@apps/v4/registry/directory.json` around lines 3 - 4, Update the "name" field
value in apps/v4/registry/directory.json from "Insipira UI" to "Inspira UI" to
match the description; ensure the JSON "name" key (and any other occurrences of
"Insipira UI" in the file or nearby metadata) are corrected so the registry name
and the description are consistent.
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
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.
I have added directory to match https://ui.shadcn.com/docs/directory
📖 Documentation (updates to the documentation, readme or JSdoc annotations)
🐞 Bug fix (a non-breaking change that fixes an issue)
👌 Enhancement (improving an existing functionality like performance)
✨ New feature (a non-breaking change that adds functionality)
🧹 Chore (updates to the build process or auxiliary tools and libraries)
📚 Description
📸 Screenshots (if appropriate)
Summary by CodeRabbit
New Features
Documentation
✏️ Tip: You can customize this high-level summary in your review settings.