Add global page filter controls with UI sheet and CSS variables#23
Add global page filter controls with UI sheet and CSS variables#23
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 4d23b46876
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| )} | ||
| > | ||
| <div className="pointer-events-none fixed inset-0 -z-10 bg-[radial-gradient(circle_at_15%_15%,color-mix(in_oklch,var(--color-highlight),transparent_84%),transparent_42%),radial-gradient(circle_at_85%_0%,color-mix(in_oklch,var(--color-surface-strong),transparent_86%),transparent_48%),linear-gradient(180deg,var(--background),color-mix(in_oklch,var(--background),black_5%))]" /> | ||
| <div className="page-filter-layer pointer-events-none fixed inset-0 z-30" /> |
There was a problem hiding this comment.
The new page filter layer is fixed at z-30, but the header is rendered at z-40 (src/shared/ui/header.tsx), so the header is always painted above the filter. Since backdrop-filter only applies to content behind the layer, moving the sliders updates the body content but leaves the sticky nav unfiltered on every page, which breaks the expected page-wide behavior of this control.
Useful? React with 👍 / 👎.
| <p className="text-sm font-semibold">Global Backdrop Filter</p> | ||
| <p className="text-xs text-muted-foreground"> | ||
| 실시간으로 전체 페이지 필터를 조절합니다. | ||
| </p> |
There was a problem hiding this comment.
This commit adds user-facing copy directly in the component instead of next-intl messages, including a Korean-only helper sentence in the sheet. In the English locale, users will see mixed-language UI for the new control, and these labels cannot be translated consistently like the rest of the footer. Move these strings into locale message files and read them via useTranslations.
Useful? React with 👍 / 👎.
1 participant
Motivation
Description
div.page-filter-layerinto the root layout (src/app/[locale]/layout.tsx) so the global filter can be rendered above the background and behind content.--page-filter-brightness,--page-filter-contrast,--page-filter-saturation, and--page-filter-hueand a.page-filter-layerutility insrc/app/globals.cssthat appliesbackdrop-filterusing those variables.src/shared/ui/footer.tsx(added"use client") including a filter button, a slide-up sheet with range inputs for brightness/contrast/saturation/hue, persistence via root CSS properties, a reset action, and related icons/UI.layout.tsxandglobals.cssfor consistent styling.Testing
tsc --noEmitand it succeeded.npm run lintand there were no new issues.next buildwhich completed successfully.Codex Task