feat: Introduce a frontend perfection roadmap, enhance footer social icon styling, update the theme storage key, and adjust Next.js configuration.

[Yaannko]

Screenshots/Recordings:

TODO: Introduce a frontend perfection roadmap, enhance footer social icon styling, update the theme storage key, and adjust Next.js configuration.

• earlier it's not responding when we hover in the dark mode , now when we hover it give yellow color in hover.

Check one of the checkboxes below:

• This PR does not contain AI-generated code at all.
• This PR contains AI-generated code. I have read the AI Usage Policy and this PR complies with this policy. I have tested the code locally and I am responsible for it.

Summary by CodeRabbit

• New Features

  • Enhanced social media links with interactive scale animations and improved visual feedback on hover and active states.

• Style

  • Updated dark mode theme with yellow-tinted accent colors for social link interactions and refined 300ms transition effects.

• Bug Fixes

  • Fixed theme persistence to ensure user theme preferences are properly saved and restored across sessions.

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request updates Next.js configuration to add a webpack fallback for async-storage, changes the localStorage theme key from 'theme' to 'fate-protocol-theme' in the layout, and enhances the Footer component with group-based hover effects and scale animations for improved interactive feedback.

Changes

Cohort / File(s)	Summary
Next.js Configuration next.config.mjs	Commented out export-related configuration lines (output, distDir) and added webpack fallback entry for '@react-native-async-storage/async-storage'.
Theme Management src/app/layout.tsx	Updated localStorage key for theme retrieval from 'theme' to 'fate-protocol-theme' in the theme initialization script.
Footer Component Styling src/components/layout/Footer.tsx	Added group-based hover effects to social links with scale animations (hover:scale-110, active:scale-95), enhanced dark mode styling with yellow-tinted hover background, and improved transition effects for interactive feedback.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• Fix UI Visibility Issues (Navbar/Footer) #28: Modifies Footer.tsx styling with hover and color class enhancements for social icons.
• Resolve (#6) add GitHub Pages workflow and fix linting #10: Updates Next.js configuration and theme storage key handling in layout and Footer components.

Suggested reviewers

• Zahnentferner

Poem

🐰 A rabbit hops through config files,
With webpack fallbacks and storage keys filed,
The Footer now dances on hover and scale,
Dark mode glows yellow—a thematic tale!
Scale-up, scale-down, themes taking flight,
The fate-protocol gleams with interactive light! 🌟

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes multiple key changes in the PR: footer social icon styling enhancement, theme storage key update, and Next.js configuration adjustments.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

📝 Coding Plan

• Generate coding plan for human review comments

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Tip

You can get early access to new features in CodeRabbit.

Enable the early_access setting to enable early access features such as new models, tools, and more.

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (1)

src/components/layout/Footer.tsx (1)

138-144: Add explicit focus-visible styling to match new hover affordances.

Line 138 introduces strong hover interactions; consider adding keyboard-focus styles so non-pointer users get equivalent feedback.

Suggested refinement

-                className="group rounded-full bg-white/10 dark:bg-white/5 p-2 hover:bg-white/20 dark:hover:bg-yellow-400/10 transition-all duration-300 hover:scale-110 active:scale-95"
+                className="group rounded-full bg-white/10 dark:bg-white/5 p-2 hover:bg-white/20 dark:hover:bg-yellow-400/10 transition-all duration-300 hover:scale-110 active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-yellow-400 focus-visible:ring-offset-2 focus-visible:ring-offset-black"

🤖 Prompt for AI Agents

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

In `@src/components/layout/Footer.tsx` around lines 138 - 144, The hover-only
affordance on the footer action wrapper needs matching keyboard focus styling:
update the element rendering the icon (the button/container with className
starting "group rounded-full ..." in Footer.tsx around item.icon) to include
focus-visible utility classes (e.g., focus-visible:outline
focus-visible:outline-<color>/<opacity> and focus-visible:scale-110 or
focus-visible:bg-... matching the hover classes) so keyboard users get
equivalent visual feedback; also add corresponding focus-visible color classes
to the icon element (the <item.icon /> element) to mirror
group-hover:text-yellow-500 behavior (use dark: variants as needed) and ensure
focus styles are not applied on general focus but only on focus-visible.

🤖 Prompt for all review comments with AI agents

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

Inline comments:
In `@next.config.mjs`:
- Around line 3-4: The build is configured for GitHub Pages static export but
next.config.mjs has static export disabled; re-enable static export by restoring
the Next.js config options (set output: 'export' and distDir: 'out' in
next.config.mjs) so the build writes to ./out for the workflow's
static_site_generator: next artifact upload, or if you intend SSR, update the
workflow (static_site_generator and artifact path) to target the SSR output
instead.
- Around line 9-14: The code currently overwrites Next.js's pre-populated
webpack fallbacks by assigning directly to config.resolve.fallback; instead,
update the webpack callback to merge your fallbacks with the existing ones (use
the spread operator) so config.resolve.fallback = { ...config.resolve.fallback,
fs: false, net: false, tls: false, '@react-native-async-storage/async-storage':
false } (locate this in next.config.mjs inside the webpack(...) callback and
change the assignment to a merged object).

---

Nitpick comments:
In `@src/components/layout/Footer.tsx`:
- Around line 138-144: The hover-only affordance on the footer action wrapper
needs matching keyboard focus styling: update the element rendering the icon
(the button/container with className starting "group rounded-full ..." in
Footer.tsx around item.icon) to include focus-visible utility classes (e.g.,
focus-visible:outline focus-visible:outline-<color>/<opacity> and
focus-visible:scale-110 or focus-visible:bg-... matching the hover classes) so
keyboard users get equivalent visual feedback; also add corresponding
focus-visible color classes to the icon element (the <item.icon /> element) to
mirror group-hover:text-yellow-500 behavior (use dark: variants as needed) and
ensure focus styles are not applied on general focus but only on focus-visible.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 7d8998d0-7535-439f-a953-3bcdf068fa7a

📥 Commits

Reviewing files that changed from the base of the PR and between 9eaff96 and cf4582c.

📒 Files selected for processing (3)

• next.config.mjs
• src/app/layout.tsx
• src/components/layout/Footer.tsx