✨ feat(web): enhance landing page hero interactions#475
Open
✨ feat(web): enhance landing page hero interactions#475
Conversation
- Add hero section with interactive block demos (notion prompt, button groups, input groups, etc.) - Add example pages scaffolding (dashboard, authentication, playground, tasks) - Add missing icons (at-sign, bot, circle-dashed, globe, paperclip) to icon registry - Add z-dropdown-menu-label selector alias to menu label component - Update installation docs for icon and menu components
Wire up the theme preset selector dropdown and copy-to-clipboard button in the hero nav tabs. Apply scoped theme CSS variables to the desktop examples grid. Fix icon button sizing in button-group blocks.
📝 WalkthroughWalkthroughReplaces the monolithic hero/GSAP diagram with a modular hero composed of header, nav tabs, and examples grid; adds nested home routing with lazy example pages; introduces 18+ reusable "block" UI components; removes SVG diagram components and related types; updates icon set and minor style/menu selector changes. Changes
Sequence Diagram(s)sequenceDiagram
participant Browser
participant Router
participant HomePage
participant HeroComponents
participant ExampleModule
Browser->>Router: Navigate to '/'
Router->>HomePage: resolve route -> NewHeroComponent
HomePage->>HeroComponents: render header + nav tabs + examples grid
HeroComponents->>Router: RouterOutlet requests child route (e.g. /examples/dashboard)
Router->>ExampleModule: lazy-load example page/component
ExampleModule-->>HeroComponents: example page rendered in outlet
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
Tip Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs). Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 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: 17
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/web/src/app/app.routes.ts`:
- Around line 11-46: The examples.routes.ts file defines an unused
EXAMPLES_ROUTES constant which is dead code because the same routes (dashboard,
tasks, playground, authentication) are already in app.routes.ts under the
HomePage children; delete the examples.routes.ts file and remove any imports or
re-exports referencing EXAMPLES_ROUTES (search for the symbol EXAMPLES_ROUTES
and any index.ts that re-exports it), and ensure app.routes.ts remains the sole
source of the examples/* routes (no additional route wiring or imports needed).
In
`@apps/web/src/app/domain/pages/home/sections/hero/components/blocks/appearance-settings.component.ts`:
- Around line 84-96: The GPU stepper buttons in the AppearanceSettings component
are still using the old CSS class "size-8!" causing inconsistent sizing; update
the two button elements that call decrementGpu() and incrementGpu() (the
z-button elements with aria-label "Decrement" and "Increment") to use "size-7!"
instead of "size-8!" so they match the corrected button-group sizing elsewhere.
In
`@apps/web/src/app/domain/pages/home/sections/hero/components/blocks/button-group-popover.component.ts`:
- Line 46: The textarea currently relies only on placeholder text which is
inaccessible; add a programmatic label by giving the textarea an id (e.g.,
taskDescriptionId) and either adding a visible or visually-hidden <label
for="taskDescriptionId">Describe your task</label> or adding
aria-label="Describe your task" / aria-labelledby that references a label
element; update the template in button-group-popover.component.ts where the
<textarea> is declared to include the id and associated label/ARIA attribute so
screen readers can announce the field.
In
`@apps/web/src/app/domain/pages/home/sections/hero/components/blocks/field-hear.component.ts`:
- Around line 12-15: The prompt currently reads "Select the option..." but the
inputs in field-hear.component.ts (inside the z-card block and the checkbox
inputs used on the option lines) behave as multi-select checkboxes and some
inputs are hidden via class="hidden", breaking semantics and focus affordance;
either change the copy in the z-card title/paragraph to "Select all that apply"
to match the checkbox controls, or convert the option inputs to radio buttons
(replace checkbox inputs with radios and ensure they share the same name) to
enforce single-choice; additionally remove or avoid class="hidden" on
interactive inputs and add visible focus styles (or accessible focus-visible
classes) so the inputs remain keyboard-focusable and have clear focus outlines.
In
`@apps/web/src/app/domain/pages/home/sections/hero/components/blocks/field-slider.component.ts`:
- Around line 30-32: BlockFieldSliderComponent currently uses a plain property
sliderValue = 50; convert this to an Angular signal by importing signal from
`@angular/core` and replacing sliderValue with a signal initialized to 50 (e.g.,
sliderValue = signal(50)); update any template bindings and event handlers to
read the value via sliderValue() and update via sliderValue.set(...) (or
sliderValue.update(...)) instead of directly mutating the property so the
component works properly with OnPush and reactive patterns.
In
`@apps/web/src/app/domain/pages/home/sections/hero/components/blocks/input-group-chat.component.ts`:
- Around line 31-35: The chat input only relies on placeholder text and lacks an
accessible name; update the input in input-group-chat.component (the <input
z-input ... /> with [placeholder] and [disabled] bound to voiceEnabled()) to
provide a persistent accessible name by adding an appropriate aria-label or
linking a visually hidden <label>; ensure the label/aria-label updates to
reflect the dynamic state (use voiceEnabled() to choose between "Record and send
audio" and "Send a message") so assistive technologies always receive a clear,
persistent name.
In
`@apps/web/src/app/domain/pages/home/sections/hero/components/blocks/input-group-secure.component.ts`:
- Around line 29-40: The two <button> elements in the InputGroupSecure component
(the info button with attributes z-button zType="secondary" zSize="sm"
zShape="circle" and the other action button around lines ~52-63) lack an
explicit type and thus default to "submit"; update both buttons to include
type="button" to prevent accidental form submission when this component is
placed inside forms (locate the buttons in input-group-secure.component and add
type="button" to each).
In
`@apps/web/src/app/domain/pages/home/sections/hero/components/blocks/input-group-stack.component.ts`:
- Around line 27-44: The stacked input controls using z-input-group (the
instances wrapping inputs and the textarea) rely only on placeholders and need
explicit accessible names; update each z-input-group/input/textarea (the four
occurrences: search input with zAddonBefore="searchIcon", URL input with
zAddonBefore="https://", textarea with zAddonAfter="textareaActions", and
username input with zAddonAfter="checkIcon") to include an accessible label —
either add a visible or visually-hidden <label> tied via for/id, or add
aria-label or aria-labelledby attributes with unique IDs so screen readers get a
persistent name rather than relying on placeholder text.
In
`@apps/web/src/app/domain/pages/home/sections/hero/components/blocks/item-two-factor.component.ts`:
- Line 23: The <button> element in item-two-factor.component.ts (the one
rendered with attributes z-button and zSize="sm") is missing an explicit type
and will default to submit; update that button to include type="button" to
prevent accidental form submission when this component is used inside a <form>.
In
`@apps/web/src/app/domain/pages/home/sections/hero/components/blocks/item-verified.component.ts`:
- Around line 11-26: The anchor uses href="#" which will change the URL/scroll;
replace the <a ... href="#"> element in the item-verified template with a
semantic <button type="button"> (keeping the same classes and inner elements
like z-icon zType="badge-check" and z-icon zType="chevron-right") so it behaves
as a non-navigating interactive control, or if you must keep an anchor remove
href="#" and instead prevent navigation by handling the click (e.g., add a click
handler that calls event.preventDefault()); ensure accessible attributes (type
for button or role/aria if using anchor) are present.
In
`@apps/web/src/app/domain/pages/home/sections/hero/components/blocks/notion-prompt-form.component.ts`:
- Around line 253-267: Make the four methods used by the
template—getMentionItem, addMention, removeMention, and selectModel—use
protected visibility instead of public by adding the protected modifier to each
method declaration; ensure signatures remain unchanged (protected
getMentionItem(title: string): MentionableItem | undefined, protected
addMention(title: string): void, protected removeMention(title: string): void,
protected selectModel(model: ModelItem): void) so the template can still call
them while following block component conventions.
- Line 115: The overflow axis is wrong on the chip container in
notion-prompt-form.component.ts: the element with class "no-scrollbar -m-1.5
flex gap-1 overflow-y-auto p-1.5" uses horizontal flex/gap but vertical
overflow; change the overflow class from overflow-y-auto to overflow-x-auto so
horizontal chip overflow scrolls correctly (update the div with classes
"no-scrollbar -m-1.5 flex gap-1 ...").
- Around line 237-251: The class BlockNotionPromptFormComponent exposes several
properties used by the template (mentions, selectedModel, models, mentionable,
hasMentions, availablePages, availableUsers); change their visibility from
public (default) to protected so they remain accessible to the template but
clearly indicate they are not part of the component's public API—update the
declarations for mentions, selectedModel, models, mentionable, hasMentions,
availablePages, and availableUsers to use the protected modifier.
In
`@apps/web/src/app/domain/pages/home/sections/hero/components/blocks/payment-form.component.ts`:
- Around line 56-57: The month and year label elements in
payment-form.component.ts reference ids `checkout-exp-month` and
`checkout-exp-year` but the corresponding z-select controls are missing those id
attributes; update the two <z-select> elements (the month select and the year
select) to include id="checkout-exp-month" and id="checkout-exp-year"
respectively so each <label for="..."> correctly associates with its control and
restores accessible label-to-control linkage.
- Line 117: The hardcoded readonly array years in PaymentFormComponent is stale;
replace it with a dynamically generated list based on the current year (e.g.,
const start = new Date().getFullYear()) and produce N consecutive year strings
(e.g., start..start+5) so the dropdown always contains current and upcoming
expiration years; update the property name years (or whatever readonly years is)
to compute at runtime (or initialize in the constructor/ngOnInit) and ensure
values are strings to match existing bindings.
- Line 24: The form in payment-form.component.ts lacks a submit handler so the
type="submit" button will trigger a full page submit; add
(ngSubmit)="onSubmit()" on the <form> tag (or as a minimal quick fix use
(submit)="$event.preventDefault()") and implement an onSubmit() method in the
component class (e.g., PaymentFormComponent.onSubmit) to handle/validate the
payment flow and prevent default navigation/reload.
In
`@apps/web/src/app/domain/pages/home/sections/hero/components/hero-nav-tabs.component.ts`:
- Around line 106-112: The tabs data is static so replace the signal usage with
a plain readonly array: change the declaration of tabs from
signal<NavTab[]>(...) to a readonly tabs: NavTab[] = [...], keep the same NavTab
entries, then update any template or code usages (previously calling tabs()) to
access tabs without parentheses (tabs) and remove the signal import if it
becomes unused; ensure the NavTab type name remains the same to avoid further
type changes.
ℹ️ Review info
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (4)
apps/web/public/installation/cli/add-testing.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/icon.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/menu.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/testing.mdis excluded by!apps/web/public/**and included byapps/**
📒 Files selected for processing (39)
apps/web/src/app/app.routes.tsapps/web/src/app/domain/pages/examples/authentication/authentication-example.page.tsapps/web/src/app/domain/pages/examples/dashboard/dashboard-example.page.tsapps/web/src/app/domain/pages/examples/examples.page.tsapps/web/src/app/domain/pages/examples/examples.routes.tsapps/web/src/app/domain/pages/examples/playground/playground-example.page.tsapps/web/src/app/domain/pages/examples/tasks/tasks-example.page.tsapps/web/src/app/domain/pages/home/home.page.tsapps/web/src/app/domain/pages/home/sections/hero/components/blocks/appearance-settings.component.tsapps/web/src/app/domain/pages/home/sections/hero/components/blocks/button-group-nested.component.tsapps/web/src/app/domain/pages/home/sections/hero/components/blocks/button-group-popover.component.tsapps/web/src/app/domain/pages/home/sections/hero/components/blocks/button-group-toolbar.component.tsapps/web/src/app/domain/pages/home/sections/hero/components/blocks/empty-avatar-group.component.tsapps/web/src/app/domain/pages/home/sections/hero/components/blocks/field-checkbox.component.tsapps/web/src/app/domain/pages/home/sections/hero/components/blocks/field-hear.component.tsapps/web/src/app/domain/pages/home/sections/hero/components/blocks/field-separator.component.tsapps/web/src/app/domain/pages/home/sections/hero/components/blocks/field-slider.component.tsapps/web/src/app/domain/pages/home/sections/hero/components/blocks/index.tsapps/web/src/app/domain/pages/home/sections/hero/components/blocks/input-group-chat.component.tsapps/web/src/app/domain/pages/home/sections/hero/components/blocks/input-group-secure.component.tsapps/web/src/app/domain/pages/home/sections/hero/components/blocks/input-group-stack.component.tsapps/web/src/app/domain/pages/home/sections/hero/components/blocks/item-two-factor.component.tsapps/web/src/app/domain/pages/home/sections/hero/components/blocks/item-verified.component.tsapps/web/src/app/domain/pages/home/sections/hero/components/blocks/notion-prompt-form.component.tsapps/web/src/app/domain/pages/home/sections/hero/components/blocks/payment-form.component.tsapps/web/src/app/domain/pages/home/sections/hero/components/blocks/spinner-badges.component.tsapps/web/src/app/domain/pages/home/sections/hero/components/blocks/spinner-empty.component.tsapps/web/src/app/domain/pages/home/sections/hero/components/hero-default-content.component.tsapps/web/src/app/domain/pages/home/sections/hero/components/hero-diagram.component.tsapps/web/src/app/domain/pages/home/sections/hero/components/hero-examples-grid.component.tsapps/web/src/app/domain/pages/home/sections/hero/components/hero-header.component.tsapps/web/src/app/domain/pages/home/sections/hero/components/hero-nav-tabs.component.tsapps/web/src/app/domain/pages/home/sections/hero/components/svg-inputs.component.tsapps/web/src/app/domain/pages/home/sections/hero/components/svg-node-props.interface.tsapps/web/src/app/domain/pages/home/sections/hero/components/svg-outputs.component.tsapps/web/src/app/domain/pages/home/sections/hero/hero.component.tsapps/web/src/styles.csslibs/zard/src/lib/shared/components/icon/icons.tslibs/zard/src/lib/shared/components/menu/menu-label.component.ts
💤 Files with no reviewable changes (4)
- apps/web/src/app/domain/pages/home/sections/hero/components/svg-outputs.component.ts
- apps/web/src/app/domain/pages/home/sections/hero/components/hero-diagram.component.ts
- apps/web/src/app/domain/pages/home/sections/hero/components/svg-node-props.interface.ts
- apps/web/src/app/domain/pages/home/sections/hero/components/svg-inputs.component.ts
...b/src/app/domain/pages/home/sections/hero/components/blocks/appearance-settings.component.ts
Outdated
Show resolved
Hide resolved
.../src/app/domain/pages/home/sections/hero/components/blocks/button-group-popover.component.ts
Outdated
Show resolved
Hide resolved
apps/web/src/app/domain/pages/home/sections/hero/components/blocks/field-hear.component.ts
Show resolved
Hide resolved
apps/web/src/app/domain/pages/home/sections/hero/components/blocks/field-slider.component.ts
Show resolved
Hide resolved
...eb/src/app/domain/pages/home/sections/hero/components/blocks/notion-prompt-form.component.ts
Outdated
Show resolved
Hide resolved
apps/web/src/app/domain/pages/home/sections/hero/components/blocks/payment-form.component.ts
Outdated
Show resolved
Hide resolved
apps/web/src/app/domain/pages/home/sections/hero/components/blocks/payment-form.component.ts
Outdated
Show resolved
Hide resolved
apps/web/src/app/domain/pages/home/sections/hero/components/blocks/payment-form.component.ts
Outdated
Show resolved
Hide resolved
apps/web/src/app/domain/pages/home/sections/hero/components/hero-nav-tabs.component.ts
Outdated
Show resolved
Hide resolved
mikij
requested changes
Mar 2, 2026
Contributor
mikij
left a comment
mikij
left a comment
There was a problem hiding this comment.
Please address coderabbitai comments first. I see a lot valid comments
Contributor
Author
|
Got it, will fix them. Guess this branch was not run/reviewed by CodeRabbit earlier. CC: @Luizgomess |
Fix accessibility (aria-labels, type=button, label associations), remove dead code, improve semantics, and add reactive state management to hero block components.
There was a problem hiding this comment.
Actionable comments posted: 7
♻️ Duplicate comments (1)
apps/web/src/app/domain/pages/home/sections/hero/components/blocks/field-hear.component.ts (1)
19-22:⚠️ Potential issue | 🟠 MajorKeep the checkbox visually hidden, not fully hidden.
Line 21 uses
class="hidden", which removes keyboard focusability and breaks accessible interaction for these options. Use a visually-hidden class and a focus-within style on the label instead.Suggested fix
- <label - class="has-checked:bg-primary/5 has-checked:border-primary dark:has-checked:bg-primary/10 flex w-fit cursor-pointer items-center gap-1.5 rounded-full border px-3 py-1.5 text-sm font-medium transition-all" - > - <z-checkbox class="hidden" /> + <label + class="has-checked:bg-primary/5 has-checked:border-primary dark:has-checked:bg-primary/10 focus-within:ring-ring/50 flex w-fit cursor-pointer items-center gap-1.5 rounded-full border px-3 py-1.5 text-sm font-medium transition-all focus-within:ring-2" + > + <z-checkbox class="sr-only" /> <span>{{ option }}</span> </label>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/web/src/app/domain/pages/home/sections/hero/components/blocks/field-hear.component.ts` around lines 19 - 22, The checkbox input (z-checkbox) is currently fully hidden with class="hidden", removing keyboard focusability; replace that with a screen-reader-only/visually-hidden approach (e.g., use your project's "sr-only" or "visually-hidden" utility on z-checkbox) so the input remains focusable, and add a focus-within style to the parent label wrapper (the element with the has-checked:... and rounded-full classes) to show a visible focus ring/state when the hidden input receives keyboard focus (e.g., add focus-within:outline/focus-within:ring classes) so keyboard users can interact with the option.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In
`@apps/web/src/app/domain/pages/home/sections/hero/components/blocks/appearance-settings.component.ts`:
- Around line 27-117: The outer layout wrapper uses a <fieldset> without a
<legend>, hurting form semantics; replace that outer <fieldset> (the one
wrapping the whole template that contains the inner legend "Compute
Environment") with a neutral container element (e.g., <div> or <section>) by
updating its opening and closing tags so the inner <fieldset> that contains the
<legend> "Compute Environment" remains unchanged and all child elements keep
their structure and bindings (e.g., computeEnv, gpuCount(), decrementGpu(),
incrementGpu(), z-switch).
In
`@apps/web/src/app/domain/pages/home/sections/hero/components/blocks/input-group-chat.component.ts`:
- Line 25: The two buttons in the InputGroupChat component template (the
elements matching <button z-button zType="outline" zShape="circle"
aria-label="Add"> and the other similar button later in the same file) are
missing explicit types and will default to type="submit"; update both button
elements in
apps/web/src/app/domain/pages/home/sections/hero/components/input-group-chat.component.ts
to include type="button" to prevent accidental form submissions, leaving all
other attributes unchanged.
In
`@apps/web/src/app/domain/pages/home/sections/hero/components/blocks/input-group-secure.component.ts`:
- Around line 69-74: The template-bound members lack explicit visibility; update
the BlockInputGroupSecureComponent by marking the signal property isFavorite and
the method toggleFavorite() as protected (i.e., change their declarations to
protected isFavorite and protected toggleFavorite()) so they follow project
conventions for template-bound members and maintain camelCase naming.
In
`@apps/web/src/app/domain/pages/home/sections/hero/components/blocks/input-group-stack.component.ts`:
- Around line 89-93: The check icon inside the <ng-template `#checkIcon`> should
be made accessible: update the wrapper (currently the generic div around <z-icon
zType="check">) to include an appropriate ARIA role and label (for example
role="img" and aria-label="verified" or a localized string) or ensure the parent
input's accessible name/state explicitly communicates the verified status;
adjust the <ng-template `#checkIcon`> markup and any related binding in
InputGroupStackComponent so screen readers receive the verification semantics
via the wrapper or the input's accessible attributes.
- Around line 56-85: The buttons in the templates (the info button in
ng-template `#infoButton` and the buttons inside ng-template `#textareaActions` —
the Add circle button, the Auto ghost button with z-dropdown, and the Send
circle button) lack explicit type attributes and will default to type="submit"
inside forms; update each <button z-button ...> to include type="button" to
prevent unintended form submissions (locate and modify the buttons within the
`#infoButton` and `#textareaActions` templates and add type="button" on each).
In
`@apps/web/src/app/domain/pages/home/sections/hero/components/blocks/notion-prompt-form.component.ts`:
- Around line 58-231: Buttons inside the NotionPromptForm template are missing
explicit types and will default to submit; update every interactive <button>
that uses z-button (e.g., the mention dropdown toggle with
[zDropdownMenu]="mentionMenu", the add/remove mention buttons invoking
addMention/removeMention, the Attach File button, the model selector
([zDropdownMenu]="modelMenu"), the sources selector
([zDropdownMenu]="sourcesMenu"), and the Send button) to include type="button"
to prevent unintended form submissions.
In
`@apps/web/src/app/domain/pages/home/sections/hero/components/hero-nav-tabs.component.ts`:
- Around line 46-58: The z-button directive causes native <button> elements to
default to type="submit"; update the ZardButtonComponent to set a default host
attribute '[attr.type]': '"button"' (add to the component's host bindings) so
all usages of z-button behave as non-submitting buttons, or alternatively update
this component's template (hero-nav-tabs.component) to explicitly set
type="button" on the buttons using z-button (e.g., the theme selector and copy
theme buttons) to prevent unintended form submissions.
---
Duplicate comments:
In
`@apps/web/src/app/domain/pages/home/sections/hero/components/blocks/field-hear.component.ts`:
- Around line 19-22: The checkbox input (z-checkbox) is currently fully hidden
with class="hidden", removing keyboard focusability; replace that with a
screen-reader-only/visually-hidden approach (e.g., use your project's "sr-only"
or "visually-hidden" utility on z-checkbox) so the input remains focusable, and
add a focus-within style to the parent label wrapper (the element with the
has-checked:... and rounded-full classes) to show a visible focus ring/state
when the hidden input receives keyboard focus (e.g., add
focus-within:outline/focus-within:ring classes) so keyboard users can interact
with the option.
ℹ️ Review info
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (12)
apps/web/src/app/domain/pages/home/sections/hero/components/blocks/appearance-settings.component.tsapps/web/src/app/domain/pages/home/sections/hero/components/blocks/button-group-popover.component.tsapps/web/src/app/domain/pages/home/sections/hero/components/blocks/field-hear.component.tsapps/web/src/app/domain/pages/home/sections/hero/components/blocks/field-slider.component.tsapps/web/src/app/domain/pages/home/sections/hero/components/blocks/input-group-chat.component.tsapps/web/src/app/domain/pages/home/sections/hero/components/blocks/input-group-secure.component.tsapps/web/src/app/domain/pages/home/sections/hero/components/blocks/input-group-stack.component.tsapps/web/src/app/domain/pages/home/sections/hero/components/blocks/item-two-factor.component.tsapps/web/src/app/domain/pages/home/sections/hero/components/blocks/item-verified.component.tsapps/web/src/app/domain/pages/home/sections/hero/components/blocks/notion-prompt-form.component.tsapps/web/src/app/domain/pages/home/sections/hero/components/blocks/payment-form.component.tsapps/web/src/app/domain/pages/home/sections/hero/components/hero-nav-tabs.component.ts
...b/src/app/domain/pages/home/sections/hero/components/blocks/appearance-settings.component.ts
Outdated
Show resolved
Hide resolved
.../web/src/app/domain/pages/home/sections/hero/components/blocks/input-group-chat.component.ts
Outdated
Show resolved
Hide resolved
...eb/src/app/domain/pages/home/sections/hero/components/blocks/input-group-secure.component.ts
Show resolved
Hide resolved
...web/src/app/domain/pages/home/sections/hero/components/blocks/input-group-stack.component.ts
Show resolved
Hide resolved
...web/src/app/domain/pages/home/sections/hero/components/blocks/input-group-stack.component.ts
Show resolved
Hide resolved
...eb/src/app/domain/pages/home/sections/hero/components/blocks/notion-prompt-form.component.ts
Outdated
Show resolved
Hide resolved
apps/web/src/app/domain/pages/home/sections/hero/components/hero-nav-tabs.component.ts
Show resolved
Hide resolved
Contributor
|
You don't need everything but some obvious things should be fixed. I have zero tolerance only for lib and CLI code |
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In
`@apps/web/src/app/domain/pages/home/sections/hero/components/blocks/input-group-secure.component.ts`:
- Around line 53-64: Add an ARIA pressed state to the favorite toggle by binding
aria-pressed to the component's state; update the button element that calls
toggleFavorite() and uses isFavorite() so it includes
[attr.aria-pressed]="isFavorite()" (ensuring the bound value is a
boolean/boolean-like string) so assistive tech can read the active/inactive
state.
- Around line 23-25: The template uses a hard-coded id "input-secure-19" causing
duplicate IDs when the BlockInputGroupSecureComponent is rendered multiple
times; add a static counter (e.g., private static nextInputId = 0) and an
instance readonly field (e.g., protected readonly inputId =
`input-secure-${BlockInputGroupSecureComponent.nextInputId++}`) in the
BlockInputGroupSecureComponent class, then replace the literal "input-secure-19"
in the template with the instance inputId for both the <label for="..."> and
<input id="..."> so each component instance gets a unique id.
In
`@apps/web/src/app/domain/pages/home/sections/hero/components/blocks/notion-prompt-form.component.ts`:
- Around line 60-64: The template uses hard-coded IDs ('notion-prompt',
'web-search', 'apps') in NotionPromptFormComponent which will collide when the
component is rendered multiple times; replace static IDs with instance-unique
IDs by adding a component property (e.g., inputId, webSearchId, appsId)
generated in the NotionPromptFormComponent constructor (use a simple
incrementing static counter or a UUID) and bind those properties to the template
id and label for attributes (update the <label for="..."> and <textarea
id="..."> and any other references). Ensure all places that reference the static
strings are updated to use the new properties so label associations remain
correct across multiple instances.
In
`@apps/web/src/app/domain/pages/home/sections/hero/components/hero-nav-tabs.component.ts`:
- Around line 124-129: The clipboard promise in copyThemeCss can resolve after
the component is destroyed and still call setFeedbackState which creates
timeouts; add a destruction guard (e.g. a private boolean like isDestroyed or a
Subject/ngUnsubscribe) and set it in ngOnDestroy, then update copyThemeCss (and
the similar block at 131-143) to check the guard before calling setFeedbackState
(or short-circuit the promise handlers) so no new timeouts are scheduled after
destruction; keep existing clearTimeout logic in ngOnDestroy to clear any
timeouts created while alive.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: 00b453cd-e7c4-478e-9833-52d0c2b23c44
📒 Files selected for processing (6)
apps/web/src/app/domain/pages/home/sections/hero/components/blocks/appearance-settings.component.tsapps/web/src/app/domain/pages/home/sections/hero/components/blocks/input-group-chat.component.tsapps/web/src/app/domain/pages/home/sections/hero/components/blocks/input-group-secure.component.tsapps/web/src/app/domain/pages/home/sections/hero/components/blocks/input-group-stack.component.tsapps/web/src/app/domain/pages/home/sections/hero/components/blocks/notion-prompt-form.component.tsapps/web/src/app/domain/pages/home/sections/hero/components/hero-nav-tabs.component.ts
...eb/src/app/domain/pages/home/sections/hero/components/blocks/input-group-secure.component.ts
Outdated
Show resolved
Hide resolved
...eb/src/app/domain/pages/home/sections/hero/components/blocks/input-group-secure.component.ts
Show resolved
Hide resolved
...eb/src/app/domain/pages/home/sections/hero/components/blocks/notion-prompt-form.component.ts
Outdated
Show resolved
Hide resolved
apps/web/src/app/domain/pages/home/sections/hero/components/hero-nav-tabs.component.ts
Show resolved
Hide resolved
Contributor
Author
|
Done, check now. |
mikij
requested changes
Mar 4, 2026
...eb/src/app/domain/pages/home/sections/hero/components/blocks/input-group-secure.component.ts
Outdated
Show resolved
Hide resolved
Contributor
Can you please revise those new comments and resolve them if you don't think they need to be addressed. That way I know you are ignoring something on purpose, otherwise I will think you want to address it and so I will wait for it first. |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In
`@apps/web/src/app/domain/pages/home/sections/hero/components/hero-nav-tabs.component.ts`:
- Around line 126-130: The current copyThemeCss method attaches a redundant
.catch which masks unexpected errors; remove the .catch and rely on
ThemeGeneratorService.copyToClipboard() to resolve to a boolean, then call
this.setFeedbackState(success) in the .then handler (i.e., replace the
.then(...).catch(...) chain with a single .then(success =>
this.setFeedbackState(success))), keeping references to copyThemeCss,
ThemeGeneratorService.copyToClipboard, and setFeedbackState to locate the
change.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: cde697e7-dbaf-41b5-8a4f-1cb78a4b7be0
📒 Files selected for processing (3)
apps/web/src/app/domain/pages/home/sections/hero/components/blocks/input-group-secure.component.tsapps/web/src/app/domain/pages/home/sections/hero/components/blocks/notion-prompt-form.component.tsapps/web/src/app/domain/pages/home/sections/hero/components/hero-nav-tabs.component.ts
apps/web/src/app/domain/pages/home/sections/hero/components/hero-nav-tabs.component.ts
Show resolved
Hide resolved
Contributor
Author
|
Addressed all of them. |
Contributor
|
@neopavan i really like the switch of the colors, is the best approach instead the modal like shadcn/ui, but the button to copy and the select, their size isnt the same. current: expected: I believe that some things either need correction or are not yet 100%, but some colors are not fully adapted. 
other point, some interactions isn't completely adapted like the shadcn/ui page: https://ui.shadcn.com/ current: expected: current: expected: current: expected: |
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
4 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.
Summary
DestroyRef[style]="scopedStyles()".theme-containerwithprefers-reduced-motionsupportsize-8!→size-7!) in button-group block componentsCloses #461
Test plan
/prefers-reduced-motionenabled → no transitionsSummary by CodeRabbit
New Features
UI/UX Improvements
Removals