docs/src/components/support/CryptoModal.tsx (1)

69-70: Mark these inline icons as decorative.

These icons are paired with visible text, so hiding them from assistive tech avoids duplicate/extra narration.

♿ Suggested adjustment

-              <IconCurrencyBitcoin size={24} stroke={1.5} />
+              <IconCurrencyBitcoin size={24} stroke={1.5} aria-hidden="true" focusable={false} />
@@
-                    <IconCheck size={16} stroke={2} />
+                    <IconCheck size={16} stroke={2} aria-hidden="true" focusable={false} />
@@
-                    <IconCopy size={16} stroke={1.5} />
+                    <IconCopy size={16} stroke={1.5} aria-hidden="true" focusable={false} />

Also applies to: 137-143

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@docs/src/components/support/CryptoModal.tsx` around lines 69 - 70, The inline
icons (e.g., IconCurrencyBitcoin and the icons used around lines 137-143) are
redundant with visible text and should be marked decorative for screen readers;
update each icon component to include accessibility attributes like
aria-hidden="true" and focusable={false} (or the equivalent props accepted by
the icon component library) so they are ignored by assistive tech, and ensure
you do not add an accessible title to these instances.

docs/src/components/support/config/donationConfig.tsx (1)

49-133: Consider deduplicating repeated icon props.

size/stroke are repeated throughout config entries; extracting shared constants would reduce noise and simplify future updates.

♻️ Optional refactor

+const DONATION_ICON_PROPS = { size: 24, stroke: 1.5 } as const;
+const SUPPORT_ICON_PROPS = { size: 20, stroke: 1.5 } as const;
+
 export const donationMethods: DonationMethod[] = [
   {
@@
-    icon: <IconHeart size={24} stroke={1.5} />,
+    icon: <IconHeart {...DONATION_ICON_PROPS} />,
@@
-    icon: <IconCoffee size={24} stroke={1.5} />,
+    icon: <IconCoffee {...DONATION_ICON_PROPS} />,
@@
-    icon: <IconCurrencyBitcoin size={24} stroke={1.5} />,
+    icon: <IconCurrencyBitcoin {...DONATION_ICON_PROPS} />,
@@
-    icon: <IconCurrencyBitcoin size={20} stroke={1.5} />,
+    icon: <IconCurrencyBitcoin {...SUPPORT_ICON_PROPS} />,
@@
-    icon: <IconCurrencyEthereum size={20} stroke={1.5} />,
+    icon: <IconCurrencyEthereum {...SUPPORT_ICON_PROPS} />,

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@docs/src/components/support/config/donationConfig.tsx` around lines 49 - 133,
The config repeats icon size/stroke literals across donationConfig,
cryptoCurrencies, and alternativeSupport; extract shared constants (e.g.,
ICON_SIZE and ICON_STROKE) at the top of the module and replace occurrences like
IconHeart size={24} stroke={1.5} (and all other Icon... uses) with
size={ICON_SIZE} stroke={ICON_STROKE}; ensure the new constants are exported or
scoped appropriately and update any new icon entries to use these constants so
future changes require updating only the constants instead of each config item.

docs/src/components/documentation/SectionTitle.tsx (1)

2-2: icon prop is currently a no-op; render it here or remove the prop from callsites.
SectionTitle accepts icon but never uses it, so usages like icon="brand-telegram" don’t display anything.

Proposed fix

 import React, { useState } from 'react';
 import { IconLink, IconCheck } from '@tabler/icons-react';
 import styles from './documentation.module.css';
 import { generateIdFromTitle } from './utils';
+import { renderIcon } from './iconMap';
@@
       <h2 id={elementId} className={`${styles.sectionTitle} ${className || ''}`}>
+        {icon && <span aria-hidden="true">{renderIcon(icon, 18)}</span>}
         {children}
       </h2>

Also applies to: 63-63

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@docs/src/components/documentation/SectionTitle.tsx` at line 2, SectionTitle
currently accepts an icon prop but never renders it; update the SectionTitle
component to use the icon prop (or change its type) and render it next to the
title so usages like icon="brand-telegram" actually display; specifically,
modify the SectionTitle component to accept icon: ReactNode (or a string mapped
to a Tabler icon) and render that node before the heading (referencing the
SectionTitle component and the icon prop), or alternatively remove the unused
icon prop from all callsites if you prefer not to support icons.

docs/src/components/documentation/ConfigSection.tsx (1)

53-53: Render the icon wrapper only when icon lookup succeeds.

Right now, an unknown token renders an empty .configIcon span (extra gap before title). Guard the wrapper with the resolved node.

♻️ Proposed refactor

 export default function ConfigSection({
@@
 }: ConfigSectionProps) {
   const [copied, setCopied] = useState(false);
+  const iconNode = icon ? renderIcon(icon) : null;
@@
         <h3 className={styles.configTitle}>
-          {icon && <span className={styles.configIcon}>{renderIcon(icon)}</span>}
+          {iconNode && <span className={styles.configIcon}>{iconNode}</span>}
           {title}
         </h3>

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@docs/src/components/documentation/ConfigSection.tsx` at line 53, The icon
wrapper is rendered even when an unknown token returns no node; update
ConfigSection to resolve the icon node first (call renderIcon(icon) into a
variable) and only render the <span className={styles.configIcon}> wrapper when
that resolved node is truthy; use the resolved node inside the span (and keep
existing styles/configIcon and renderIcon references) so unknown tokens do not
produce an empty gap.

docs/src/components/documentation/EnhancedAdmonition.tsx (1)

41-43: Prefer decorative icon semantics to avoid duplicate screen-reader announcements.

Because the title text is already rendered in <strong>, the icon can be hidden from assistive tech.

Suggested tweak

-        <span className={styles.admonitionIcon} aria-label={displayTitle}>
+        <span className={styles.admonitionIcon} aria-hidden="true">
           {config.icon}
         </span>

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@docs/src/components/documentation/EnhancedAdmonition.tsx` around lines 41 -
43, The icon span in the EnhancedAdmonition component is announced redundantly
to screen readers because it uses aria-label while the title is already exposed;
update the span (the element using className styles.admonitionIcon that renders
config.icon alongside displayTitle) to be decorative by removing the aria-label
and adding aria-hidden="true" (and for SVG icons also add focusable="false"
where applicable) so the icon is hidden from assistive technology while the
title remains accessible.

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

docs/src/css/custom.css (2)

199-226: Consider will-change for ambient orb performance.

These large, blurred, animated pseudo-elements can stress the compositor on lower-end devices. Adding will-change: transform promotes them to their own GPU layer, which may improve animation smoothness.

⚡ Proposed optimization

 [data-theme='dark'] main::before,
 [data-theme='dark'] main::after {
   content: '';
   position: fixed;
   border-radius: 50%;
   filter: blur(120px);
   opacity: 0.12;
   pointer-events: none;
   z-index: 0;
   animation: float 20s ease-in-out infinite alternate;
+  will-change: transform;
 }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@docs/src/css/custom.css` around lines 199 - 226, Add will-change: transform
to the dark-theme ambient orb pseudo-elements to promote GPU compositing: update
the CSS rules for [data-theme='dark'] main::before and [data-theme='dark']
main::after in docs/src/css/custom.css (the two selector blocks that define the
blurred, animated radial-gradient orbs) to include will-change: transform; so
both pseudo-elements are promoted to their own layer for smoother animation on
low-end devices.

---

148-161: Light mode inline code missing explicit background color.

Dark mode explicitly sets background-color and border for inline code elements, but light mode only defines padding/border-radius. This may cause inconsistent styling if Infima defaults change or if the inherited background doesn't match your design intent.

💅 Proposed fix to add explicit light mode background

 [data-theme='light'] code {
+  background-color: rgba(109, 40, 217, 0.08);
   padding: 0.2em 0.4em;
   border-radius: 4px;
   font-size: 0.95em;
+  border: 1px solid rgba(126, 87, 194, 0.15);
 }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@docs/src/css/custom.css` around lines 148 - 161, The light-mode inline code
style ([data-theme='light'] code) lacks an explicit background and border,
causing inconsistent appearance vs the dark-mode rule ([data-theme='dark']
code); update the [data-theme='light'] code rule to include a specific
background-color (e.g., a subtle light gray) and a light border (e.g., 1px solid
with low-opacity dark color) alongside the existing
padding/border-radius/font-size so inline code renders consistently across
themes.

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes