feat: DR-7392 Add navigation menu for website/blog#7533
feat: DR-7392 Add navigation menu for website/blog#7533
Conversation
WalkthroughThis PR introduces a comprehensive web navigation system by replacing the existing HomeLayout with a new WebNavigation component. It adds multiple navigation-related components and hooks, updates design tokens to switch the monospace font from Jetbrains Mono to Monaspace Neon Var, and expands component styling with new color and size variants. Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes 🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Comment |
🍈 Lychee Link Check Report3664 links: ❌ Errors
Full Statistics Table
|
Add hooks for GH stargazer and scroll threshold Update button Update blog layout with navbar
Update blog layout for mobile
337f5f4 to
9d18100
Compare
|
The latest updates on your projects. Learn more about Argos notifications ↗︎
|
There was a problem hiding this comment.
Actionable comments posted: 17
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/eclipse/src/components/button.tsx (1)
15-17:⚠️ Potential issue | 🟡 MinorFix malformed Tailwind utility in
errorvariant (backΩgroundtypo breaks hover styling).Line 16 contains an invalid character (Ω) in the class name
hover:bg-backΩground-error-reverse-strong, preventing the hover state from applying. The corrected utilitybg-background-error-reverse-strongis properly defined in your globals.css.🐛 Proposed patch
error: - "bg-background-error-reverse text-foreground-error-reverse hover:bg-backΩground-error-reverse-strong focus-visible:ring-stroke-error", + "bg-background-error-reverse text-foreground-error-reverse hover:bg-background-error-reverse-strong focus-visible:ring-stroke-error",🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/eclipse/src/components/button.tsx` around lines 15 - 17, In the Button component's variant map update the malformed Tailwind class for the "error" variant: replace the invalid "hover:bg-backΩground-error-reverse-strong" token with the correct "hover:bg-background-error-reverse-strong" so the hover state applies; locate the `error` entry in the variants object (in packages/eclipse/src/components/button.tsx) and fix that class name in the string of classes.
🧹 Nitpick comments (8)
packages/eclipse/src/components/action.tsx (1)
31-31: Consider aligning thenavsize name with the existing scale-based convention.All other size keys (
lg,2xl,4xl,5xl) follow a scale/magnitude naming scheme, whilenavis semantic and context-tied. This is workable today, but it sets a precedent where the size map becomes a mix of two incompatible naming systems — the next engineer adding a size has to decide which convention to follow.If the design system has a scale name that maps to
h-10 w-10(e.g.3xl), that would be the more internally consistent choice.♻️ Suggested rename to keep the scale pattern intact
- nav: "h-10 w-10 p-2.5", + "3xl": "h-10 w-10 p-2.5",Call sites would then use
size="3xl"instead ofsize="nav".🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/eclipse/src/components/action.tsx` at line 31, The size map entry named "nav" should be renamed to a scale-based key (e.g., "3xl") to keep the sizing convention consistent; update the size map entry (currently `nav: "h-10 w-10"`) to `3xl: "h-10 w-10"` and then replace any uses of size="nav" in the Action component and its consumers (look for the Action component, its `size` prop, and any call sites in this package) to use size="3xl" instead so the map stays scale-based and consistent.packages/ui/src/components/star-count.tsx (1)
4-4: Replace theanyprop type with an explicit interface.Using
anyfor props defeats TypeScript's type safety, hides the component's public API contract from consumers, and suppresses useful autocomplete.♻️ Proposed fix
-export const StarCount = ({ className }: any) => { +interface StarCountProps { + className?: string; +} + +export const StarCount = ({ className }: StarCountProps) => {🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/ui/src/components/star-count.tsx` at line 4, Replace the use of the any prop type for the StarCount component with an explicit interface (e.g., define StarCountProps with a className?: string) and annotate the component signature to use that interface (either via React.FC<StarCountProps> or ({ className }: StarCountProps) => ...). Update the export line for the StarCount component to reference the new StarCountProps interface so callers get proper typing and autocomplete.packages/ui/src/hooks/use-scroll-threshold.ts (1)
15-16: Use a passive scroll listener for smoother scrolling.On Line 15, this handler is read-only, so passive mode is a better default to reduce main-thread scroll blocking risk.
Suggested refactor
- window.addEventListener("scroll", scrollListener); - return () => window.removeEventListener("scroll", scrollListener); + const listenerOptions = { passive: true }; + window.addEventListener("scroll", scrollListener, listenerOptions); + return () => window.removeEventListener("scroll", scrollListener, listenerOptions);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/ui/src/hooks/use-scroll-threshold.ts` around lines 15 - 16, The scroll listener is added without passive options causing possible main-thread scroll blocking; update the window.addEventListener call that registers scrollListener in use-scroll-threshold.ts to use a passive option (e.g., { passive: true }) and ensure the corresponding window.removeEventListener uses the same options or a stored options object so the removal matches; reference the scrollListener registration/cleanup where window.addEventListener("scroll", scrollListener) and its return cleanup removeEventListener are defined.packages/eclipse/src/tokens/index.ts (1)
238-238: Add fallback fonts tomonospacetoken for consistency and resilience.The monospace token at line 238 is the only font-family value in this token set without a fallback stack. In
globals.css, all other typography variables include system fallbacks (--font-family-sans-display: Inter, sans-serif;etc.), but--font-family-monolacks them. Without fallbacks, typography gracefully degrades if Monaspace Neon Var is unavailable.♻️ Proposed patch
- monospace: "Monaspace Neon Var", + monospace: "Monaspace Neon Var", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace,🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/eclipse/src/tokens/index.ts` at line 238, The monospace token value "Monaspace Neon Var" has no fallback stack; update the monospace entry in the tokens export (the monospace token in packages/eclipse/src/tokens/index.ts) to include a sensible fallback stack (e.g., system/engine monospace names and final generic monospace) so it matches the other typography tokens and degrades gracefully when the variable font is unavailable; ensure the string includes proper comma-separated font names and the final generic "monospace" token and verify any corresponding CSS variable like --font-family-mono will now receive the fallback stack.packages/eclipse/src/styles/globals.css (1)
6-11: Addfont-display: swapto optimize font loading and prevent invisible text.The
@font-facerule (lines 6–11) correctly defines the custom font, but lacks thefont-displayproperty. Without it, browsers may display invisible text while the custom font loads—a poor user experience. Addingfont-display: swaptells the browser to show a fallback font immediately and swap in the custom font once loaded, which is the recommended approach for web fonts.While making this change, consider reordering the source URLs to prioritize the modern, more efficient
woff2format first.Suggested refactor
`@font-face` { font-family: "Monaspace Neon Var"; + font-display: swap; src: - url("../static/fonts/monaspace_neon_var.woff") format("woff"), - url("../static/fonts/monaspace_neon_var.woff2") format("woff2"); + url("../static/fonts/monaspace_neon_var.woff2") format("woff2"), + url("../static/fonts/monaspace_neon_var.woff") format("woff"); }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/eclipse/src/styles/globals.css` around lines 6 - 11, Update the `@font-face` rule for "Monaspace Neon Var" to include font-display: swap and reorder the src entries to list the modern woff2 file first; specifically modify the `@font-face` block that defines font-family "Monaspace Neon Var" (and its src URLs) to add font-display: swap and place url("../static/fonts/monaspace_neon_var.woff2") before the woff entry so browsers use the more efficient format first and show fallback text while the custom font loads.packages/ui/src/components/navigation-menu.tsx (2)
58-78: Confusing children pattern inNavigationWrapper.
childrenisn't destructured from props, so{...props}(Line 73) includeschildrenin the spread on the<div>, and then{props.children}is also rendered explicitly on Line 75. This works in React (explicit JSX children win), but it reads as if children are being passed twice. Destructurechildrenfor clarity:♻️ Suggested cleanup
function NavigationWrapper({ className, mobileOpen, + children, ...props }: React.ComponentPropsWithRef<"div"> & { mobileOpen?: boolean }) { const scroll = useScrollThreshold(64); return ( <div className={cn( "transition-navbar max-w-7xl w-full mx-auto py-3 px-6 shadow-drop-high bg-background-neutral-weaker rounded-high flex justify-between align-center", mobileOpen && "py-7 px-10 rounded-none md:py-3! md:px-6!", className, scroll && "max-w-235", )} {...props} > - {props.children} + {children} </div> ); }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/ui/src/components/navigation-menu.tsx` around lines 58 - 78, The NavigationWrapper component is spreading props (which includes children) onto the <div> and also rendering props.children explicitly, which is confusing; update NavigationWrapper to destructure children from the props signature (e.g., function NavigationWrapper({ className, mobileOpen, children, ...props }...) ) and then remove the duplicated props.children in the JSX so only {children} is rendered while still spreading ...props onto the div; ensure references to useScrollThreshold and cn remain unchanged.
322-322: Mobile menu overlay has double space in className.Line 328:
"px-6 py-4 h-auto!"has an extraneous space. Very minor, but since we're here:- className="px-6 py-4 h-auto! hover:bg-background-neutral-weak border-b border-stroke-neutral" + className="px-6 py-4 h-auto! hover:bg-background-neutral-weak border-b border-stroke-neutral"🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/ui/src/components/navigation-menu.tsx` at line 322, In the mobile menu overlay in navigation-menu.tsx (NavigationMenu component), fix the className string that currently contains a double space: locate the class value containing "px-6 py-4 h-auto!" and remove the extra space so it reads "px-6 py-4 h-auto!"; update that className usage accordingly.packages/ui/src/styles/globals.css (1)
129-131: Use Tailwind v4's@utilitydirective instead of a bare class.Defining
.transition-navbaroutside any@layergives it higher cascade priority than all of Tailwind's layered utilities, making it impossible for Tailwind utilities to override it. Using the@utilitydirective is the idiomatic way to add a custom utility in Tailwind v4, and it is automatically inserted into the utilities layer alongside all built-in utilities.♻️ Proposed refactor
- -.transition-navbar { - transition: max-width 0.5s cubic-bezier(0.075, 0.82, 0.165, 1); -} + +@utility transition-navbar { + transition: max-width 0.5s cubic-bezier(0.075, 0.82, 0.165, 1); +}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/ui/src/styles/globals.css` around lines 129 - 131, The custom rule .transition-navbar is defined as a bare class which places it outside Tailwind's layers and gives it higher specificity; replace it with a Tailwind v4 custom utility using the `@utility` directive so it is emitted into the utilities layer (e.g., create a utility named transition-navbar that sets transition: max-width 0.5s cubic-bezier(0.075, 0.82, 0.165, 1)); update the CSS to use `@utility` and remove the standalone .transition-navbar rule so Tailwind utilities can override it as intended.
🤖 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/blog/src/app/`(blog)/layout.tsx:
- Around line 17-22: Update the navigation item's description where text ===
"ORM" in the layout.tsx nav array: replace the incorrect copy-pasted desc
"Managed Postgres for global workloads" with an appropriate ORM description
(e.g., "Lightweight, type-safe ORM for streamlined database access") so the
"ORM" menu entry shows the correct user-facing text.
In `@apps/blog/src/app/layout.tsx`:
- Line 17: The Layout component uses the generic type LayoutProps in the
signature of function Layout({ children }: LayoutProps<"/">) but LayoutProps is
not imported or defined; add an appropriate type import (e.g., import {
LayoutProps } from 'fumadocs-ui') or define a local interface matching the
expected children prop (similar to BaseLayoutProps used elsewhere) and update
the component signature to use that type so TypeScript strict mode compiles
successfully.
- Around line 24-29: The <Script> usage in apps/blog/src/app/layout.tsx is
incorrectly placed inside the <head>; move the next/script <Script> out of the
head and into the layout component body (e.g., alongside or above the rendered
children) so it uses a body placement compatible with its default strategy, or
explicitly set strategy="beforeInteractive" if you must keep it in head; also
remove the duplicate Font Awesome kit by reconciling with the kit injected by
WebNavigation/FontAwesomeScript (choose one kit ID — either 6916e9db27 or
ad485975d2 — and load it only once via the chosen component).
In `@packages/eclipse/src/styles/globals.css`:
- Line 85: The CSS variable --font-family-mono currently uses an unquoted
multi-word font name without a generic fallback; update the declaration for
--font-family-mono to quote the font family name ("Monaspace Neon Var") and
append a generic fallback (monospace) so it matches other --font-family-*
variables and satisfies stylelint rules font-family-name-quotes and
font-family-no-missing-generic-family-keyword.
In `@packages/ui/src/components/fontawesome-web.tsx`:
- Around line 4-8: In the fontawesome-web.tsx component, replace the invalid JSX
prop name "cross-origin" on the script element with the correct camelCase prop
"crossOrigin" so the attribute is rendered; also verify the kit ID value
(ad485975d2) against the other usage (6916e9db27) and correct it if both should
use the same FontAwesome kit ID to avoid mismatched kits. Ensure you only update
the script element in fontawesome-web.tsx and, if needed, update the other file
so both use the intended kit ID consistently.
In `@packages/ui/src/components/navigation-menu.tsx`:
- Line 295: Replace the pervasive any usage in the mobile navigation components
by importing/locating the existing Link interface from web-navigation.tsx and
using it in component props and map callbacks: change the
MobileMenuItemWithSubmenu signature to accept link: Link, change
NavigationMobileMenu to accept { links }: { links: Link[] }, and type the .map
callbacks and sub-item variables as Link (or Link[]) so fields like icon and
desc are compile-time checked; update any auxiliary local types to use Link
where appropriate.
- Around line 118-131: The data-slot attribute on
NavigationMenuPrimitive.Trigger incorrectly contains a Tailwind class
("text-foreground-neutral"); move that utility into the element's className so
data-slot is a single identifier (e.g., "navigation-menu-trigger") and ensure
the className includes cn(navigationMenuTriggerStyle(), "group",
"text-foreground-neutral", className) so the styling is applied; update the JSX
in the NavigationMenuPrimitive.Trigger usage accordingly.
In `@packages/ui/src/components/star-count.tsx`:
- Line 5: The component currently destructures only starCount from useStarCount
and ignores isLoading and error; update the component to also extract isLoading
and error from useStarCount and handle both: when isLoading is true keep the
existing hidden placeholder but make it explicit (e.g., render the "0K" span
with aria-hidden and a data-loading attribute or early return), and when error
is non-null log the error (console.error or the app logger) and render a
sensible fallback or aria-label indicating unavailable instead of silently
showing zero; reference useStarCount, starCount, isLoading, and error when
making these changes.
In `@packages/ui/src/components/web-navigation.tsx`:
- Around line 38-41: The effect that toggles document.body.classList based on
mobileView (useEffect in web-navigation.tsx) lacks a cleanup, so if the
component unmounts while the mobile menu is open the "overflow-hidden" class
persists; update the useEffect to return a cleanup function that always removes
"overflow-hidden" from document.body on unmount and ensure the effect also
removes the class before applying it (or simply remove it in cleanup) so
document scrolling is restored when the component is torn down.
- Around line 20-29: The Link interface is missing the optional icon field used
by MenuNavigationItem and NavigationMobileMenu; update the Link type (and the
nested sub item type) to include icon?: React.ReactNode (or another appropriate
JSX/Component type used in your codebase) so TypeScript can validate data from
apps/blog layout through MenuNavigationItem and NavigationMobileMenu end-to-end.
- Around line 93-98: The mobile menu toggle currently renders an <i> inside
NavigationMenuItem with only an onClick (NavigationMenuItem, setMobileView,
mobileView); replace that with a semantic <button> element inside
NavigationMenuItem so it is focusable and keyboard-activatable, move the
existing onClick to the button, add an accessible label via aria-label (e.g.,
"Toggle navigation menu") and appropriate classes (e.g., the "flex md:hidden"
styling) on the button, and remove reliance on click-only behavior so screen
readers and keyboard users can operate the toggle.
In `@packages/ui/src/hooks/use-scroll-threshold.ts`:
- Around line 6-17: The hook initializes isScrolled false but never checks the
current scroll position on mount; update useEffect (the scrollListener closure)
to run once on mount to set the initial state based on window.scrollY >=
threshold (e.g., call scrollListener() immediately after adding the event
listener or invoke the same logic before adding it) so setIsScrolled reflects
the current position without waiting for the next scroll; ensure cleanup still
removes the same scrollListener and keep threshold in the dependency array.
In `@packages/ui/src/hooks/use-star-count.ts`:
- Line 3: The hook currently fetches GitHub stars directly from GITHUB_API_URL
which will hit unauthenticated rate limits; change useStarCount to call a
server-side endpoint (or Next.js route handler) that adds Authorization: `token
${process.env.GITHUB_TOKEN}` or implements edge caching with revalidate so the
GitHub REST call is made sparingly; specifically, remove direct client fetch to
GITHUB_API_URL in the use-star-count hook and instead fetch from an internal API
route (e.g., /api/github-stars) or a cached route handler that performs the
GitHub request with the GITHUB_TOKEN and returns the star count to the client.
- Around line 28-29: In the catch block inside the useStarCount hook (the
use-star-count.ts function), avoid casting the thrown value to Error and instead
normalize the error to a string before calling setError; update the catch to
derive a safe message (e.g., use typeof err === 'string' ? err : (err && (err as
any).message) || String(err) or a default like 'Unknown error') and pass that
string to setError so setError never receives undefined.
- Around line 15-36: The effect's fetchStarCount can update state after unmount;
fix by creating an AbortController inside useEffect, pass controller.signal into
fetch(GITHUB_API_URL, { signal }), and in the cleanup return call
controller.abort(); inside fetchStarCount handle aborts by ignoring DOMException
with name "AbortError" (or check signal.aborted before calling
setStarCount/setIsLoading/setError) so setStarCount, setIsLoading and setError
are not invoked after unmount.
In `@packages/ui/src/styles/globals.css`:
- Around line 129-131: The .transition-navbar rule applies a width transition
without respecting users' motion preferences; wrap or augment it with a
prefers-reduced-motion media query so that when (prefers-reduced-motion: reduce)
is matched the transition is disabled (set transition: none or remove max-width
transition for .transition-navbar, using !important if necessary to override) to
honor accessibility settings.
- Line 7: The global CSS defines --breakpoint-md in px which changes all md:
utilities and mixes units; change --breakpoint-md to rem (e.g., convert 874px to
rem using the project root font-size) so it matches Tailwind v4 breakpoint units
and avoids build-time sorting issues, and confirm this global change won't break
layouts that expect the original 768px threshold; additionally, replace the
plain .transition-navbar class with a Tailwind v4 `@utility` named
transition-navbar inside the appropriate layer so it supports variants (hover:,
lg:, etc.), and wrap the width transition in a prefers-reduced-motion guard to
disable/limit the animation for users who prefer reduced motion.
---
Outside diff comments:
In `@packages/eclipse/src/components/button.tsx`:
- Around line 15-17: In the Button component's variant map update the malformed
Tailwind class for the "error" variant: replace the invalid
"hover:bg-backΩground-error-reverse-strong" token with the correct
"hover:bg-background-error-reverse-strong" so the hover state applies; locate
the `error` entry in the variants object (in
packages/eclipse/src/components/button.tsx) and fix that class name in the
string of classes.
---
Nitpick comments:
In `@packages/eclipse/src/components/action.tsx`:
- Line 31: The size map entry named "nav" should be renamed to a scale-based key
(e.g., "3xl") to keep the sizing convention consistent; update the size map
entry (currently `nav: "h-10 w-10"`) to `3xl: "h-10 w-10"` and then replace any
uses of size="nav" in the Action component and its consumers (look for the
Action component, its `size` prop, and any call sites in this package) to use
size="3xl" instead so the map stays scale-based and consistent.
In `@packages/eclipse/src/styles/globals.css`:
- Around line 6-11: Update the `@font-face` rule for "Monaspace Neon Var" to
include font-display: swap and reorder the src entries to list the modern woff2
file first; specifically modify the `@font-face` block that defines font-family
"Monaspace Neon Var" (and its src URLs) to add font-display: swap and place
url("../static/fonts/monaspace_neon_var.woff2") before the woff entry so
browsers use the more efficient format first and show fallback text while the
custom font loads.
In `@packages/eclipse/src/tokens/index.ts`:
- Line 238: The monospace token value "Monaspace Neon Var" has no fallback
stack; update the monospace entry in the tokens export (the monospace token in
packages/eclipse/src/tokens/index.ts) to include a sensible fallback stack
(e.g., system/engine monospace names and final generic monospace) so it matches
the other typography tokens and degrades gracefully when the variable font is
unavailable; ensure the string includes proper comma-separated font names and
the final generic "monospace" token and verify any corresponding CSS variable
like --font-family-mono will now receive the fallback stack.
In `@packages/ui/src/components/navigation-menu.tsx`:
- Around line 58-78: The NavigationWrapper component is spreading props (which
includes children) onto the <div> and also rendering props.children explicitly,
which is confusing; update NavigationWrapper to destructure children from the
props signature (e.g., function NavigationWrapper({ className, mobileOpen,
children, ...props }...) ) and then remove the duplicated props.children in the
JSX so only {children} is rendered while still spreading ...props onto the div;
ensure references to useScrollThreshold and cn remain unchanged.
- Line 322: In the mobile menu overlay in navigation-menu.tsx (NavigationMenu
component), fix the className string that currently contains a double space:
locate the class value containing "px-6 py-4 h-auto!" and remove the extra
space so it reads "px-6 py-4 h-auto!"; update that className usage accordingly.
In `@packages/ui/src/components/star-count.tsx`:
- Line 4: Replace the use of the any prop type for the StarCount component with
an explicit interface (e.g., define StarCountProps with a className?: string)
and annotate the component signature to use that interface (either via
React.FC<StarCountProps> or ({ className }: StarCountProps) => ...). Update the
export line for the StarCount component to reference the new StarCountProps
interface so callers get proper typing and autocomplete.
In `@packages/ui/src/hooks/use-scroll-threshold.ts`:
- Around line 15-16: The scroll listener is added without passive options
causing possible main-thread scroll blocking; update the window.addEventListener
call that registers scrollListener in use-scroll-threshold.ts to use a passive
option (e.g., { passive: true }) and ensure the corresponding
window.removeEventListener uses the same options or a stored options object so
the removal matches; reference the scrollListener registration/cleanup where
window.addEventListener("scroll", scrollListener) and its return cleanup
removeEventListener are defined.
In `@packages/ui/src/styles/globals.css`:
- Around line 129-131: The custom rule .transition-navbar is defined as a bare
class which places it outside Tailwind's layers and gives it higher specificity;
replace it with a Tailwind v4 custom utility using the `@utility` directive so it
is emitted into the utilities layer (e.g., create a utility named
transition-navbar that sets transition: max-width 0.5s cubic-bezier(0.075, 0.82,
0.165, 1)); update the CSS to use `@utility` and remove the standalone
.transition-navbar rule so Tailwind utilities can override it as intended.
ℹ️ Review info
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (3)
packages/eclipse/src/static/fonts/monaspace_neon_var.woffis excluded by!**/*.woffpackages/eclipse/src/static/fonts/monaspace_neon_var.woff2is excluded by!**/*.woff2pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (14)
apps/blog/src/app/(blog)/layout.tsxapps/blog/src/app/layout.tsxpackages/eclipse/src/components/action.tsxpackages/eclipse/src/components/button.tsxpackages/eclipse/src/styles/globals.csspackages/eclipse/src/tokens/index.tspackages/ui/package.jsonpackages/ui/src/components/fontawesome-web.tsxpackages/ui/src/components/navigation-menu.tsxpackages/ui/src/components/star-count.tsxpackages/ui/src/components/web-navigation.tsxpackages/ui/src/hooks/use-scroll-threshold.tspackages/ui/src/hooks/use-star-count.tspackages/ui/src/styles/globals.css
Summary by CodeRabbit
New Features
Style