feat: improve dashboard layout, add chat quick-start templates, and s… - #2
Merged
Conversation
…ecure API key controls
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
PR Summary by QodoImprove dashboard filters, add chat templates, and enhance API key UX
AI Description
Diagram
High-Level Assessment
Files changed (7)
|
Code Review by Qodo
1. setSortBy uses as any
|
![qodo-code-review[bot]](https://avatars.githubusercontent.com/in/484649?s=60&v=4){kind=small}
| <ArrowUpDown className="w-3.5 h-3.5 text-slate-400" /> | ||
| <select | ||
| value={sortBy} | ||
| onChange={(e) => setSortBy(e.target.value as any)} |
There was a problem hiding this comment.
1. setsortby uses as any 📘 Rule violation ⚙ Maintainability
The new sort dropdown casts e.target.value to any without documenting why any is unavoidable, which erases type safety and makes future refactors riskier. This violates the strict TypeScript requirement to avoid any unless explicitly justified with an explanatory comment.
Agent Prompt
## Issue description
`setSortBy(e.target.value as any)` introduces an undocumented `any` cast, violating strict typing requirements.
## Issue Context
`sortBy` is already a finite union (`'newest' | 'oldest' | 'name'`). The event value can be safely narrowed to that union (optionally with a runtime guard) without using `any`.
## Fix Focus Areas
- app/(app)/dashboard/page.tsx[253-261]
ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools
| {/* Header of Mockup */} | ||
| <div className="flex items-center justify-between border-b border-slate-800/60 pb-3 mb-4 select-none"> | ||
| <div className="flex items-center gap-2"> | ||
| <span className="w-2.5 h-2.5 rounded-full bg-rose-500/85" /> |
There was a problem hiding this comment.
2. Non-brand accent colors used 📘 Rule violation ≡ Correctness
The marketing page introduces decorative Tailwind accent colors (rose, amber, emerald) and emerald-styled status chips, which conflicts with the design-system requirement to use #6366F1 as the single visual accent and restrict green to positive indicators. This can cause brand inconsistency and fail UI compliance checks.
Agent Prompt
## Issue description
The landing page uses non-design-system accent colors (`bg-rose-500`, `bg-amber-500`, `bg-emerald-500` and related emerald styling) which violates the "single accent" requirement.
## Issue Context
Per the design system, `#6366F1` is the only visual accent color; gradients are disallowed; and green should be reserved for positive/ready indicators (and should not be used decoratively).
## Fix Focus Areas
- app/(marketing)/page.tsx[70-75]
- app/(marketing)/page.tsx[118-121]
ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools
| import { Logo } from '@/components/ui/logo' | ||
| import { Button } from '@/components/ui/button' | ||
| import Link from 'next/link' | ||
| import { |
There was a problem hiding this comment.
3. Unused icon imports 🐞 Bug ≡ Correctness
app/(marketing)/page.tsx imports ShieldCheck and ArrowRight from lucide-react but never uses them, which is likely to be reported by the repo’s ESLint run (npm script: lint is eslint). This can break CI if no-unused-vars/unused imports are treated as errors (common with eslint-config-next/typescript).
Agent Prompt
### Issue description
`ShieldCheck` and `ArrowRight` are imported but unused in `app/(marketing)/page.tsx`, which will likely be flagged during `bun run lint`.
### Issue Context
The repo’s lint script runs plain `eslint` (see `package.json`). Keeping unused imports risks lint failure depending on configured rule severity.
### Fix Focus Areas
- app/(marketing)/page.tsx[4-15]
ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools
|
|
||
| {/* Filters and Sort */} | ||
| <div className="flex flex-wrap items-center gap-3.5"> | ||
| {/* Platform Tabs */} |
There was a problem hiding this comment.
4. Missing gpt filter tab 🐞 Bug ⚙ Maintainability
DashboardPage supports filtering by 'gpt' (state type and metrics) but the rendered platform tab list omits 'gpt', so users can’t select GPT via the new filter UI. This makes the filtering feature inconsistent with the supported Skill.platform values shown on the page.
Agent Prompt
### Issue description
The dashboard filter state supports `'gpt'`, and the dashboard metrics compute `gptCount`, but the platform tabs only render `all/cursor/claude/windsurf`. This prevents users from filtering GPT skills using the UI.
### Issue Context
`Skill.platform` includes `gpt`, and the page already counts GPT skills in metrics.
### Fix Focus Areas
- app/(app)/dashboard/page.tsx[54-56]
- app/(app)/dashboard/page.tsx[233-248]
ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools
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
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.
…ecure API key controls
📌 Descripción
Describa los cambios principales introducidos en este Pull Request y qué problema resuelven.
🧪 Pruebas realizadas
Detalle los pasos para verificar los cambios localmente:
bun run lintexitosamente?bun run buildexitosamente?📸 Capturas de pantalla o grabaciones (si aplica)
Adjunte capturas o grabaciones para cambios de interfaz de usuario.
📋 Lista de verificación
AGENTS.md).