From 73d7b0ac496c521a106f3424ae1e55098a96a6a1 Mon Sep 17 00:00:00 2001 From: Michelle Date: Sat, 3 Jan 2026 12:29:30 +0400 Subject: [PATCH 1/3] refactor: rename route group (root) to (app) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Route Group Rename: - Rename app/(root)/ to app/(app)/ for all pages and layout The name (app) pairs semantically with (auth) as both describe purpose rather than position. This improves LLM comprehension and reduces ambiguity with the actual root layout at app/layout.tsx. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- app/{(root) => (app)}/ask-question/page.tsx | 0 app/{(root) => (app)}/collections/page.tsx | 0 app/{(root) => (app)}/community/page.tsx | 0 app/{(root) => (app)}/jobs/page.tsx | 0 app/{(root) => (app)}/layout.tsx | 0 app/{(root) => (app)}/page.tsx | 0 app/{(root) => (app)}/profile/page.tsx | 0 app/{(root) => (app)}/question/[id]/page.tsx | 0 app/{(root) => (app)}/tags/[slug]/page.tsx | 0 app/{(root) => (app)}/tags/page.tsx | 0 10 files changed, 0 insertions(+), 0 deletions(-) rename app/{(root) => (app)}/ask-question/page.tsx (100%) rename app/{(root) => (app)}/collections/page.tsx (100%) rename app/{(root) => (app)}/community/page.tsx (100%) rename app/{(root) => (app)}/jobs/page.tsx (100%) rename app/{(root) => (app)}/layout.tsx (100%) rename app/{(root) => (app)}/page.tsx (100%) rename app/{(root) => (app)}/profile/page.tsx (100%) rename app/{(root) => (app)}/question/[id]/page.tsx (100%) rename app/{(root) => (app)}/tags/[slug]/page.tsx (100%) rename app/{(root) => (app)}/tags/page.tsx (100%) diff --git a/app/(root)/ask-question/page.tsx b/app/(app)/ask-question/page.tsx similarity index 100% rename from app/(root)/ask-question/page.tsx rename to app/(app)/ask-question/page.tsx diff --git a/app/(root)/collections/page.tsx b/app/(app)/collections/page.tsx similarity index 100% rename from app/(root)/collections/page.tsx rename to app/(app)/collections/page.tsx diff --git a/app/(root)/community/page.tsx b/app/(app)/community/page.tsx similarity index 100% rename from app/(root)/community/page.tsx rename to app/(app)/community/page.tsx diff --git a/app/(root)/jobs/page.tsx b/app/(app)/jobs/page.tsx similarity index 100% rename from app/(root)/jobs/page.tsx rename to app/(app)/jobs/page.tsx diff --git a/app/(root)/layout.tsx b/app/(app)/layout.tsx similarity index 100% rename from app/(root)/layout.tsx rename to app/(app)/layout.tsx diff --git a/app/(root)/page.tsx b/app/(app)/page.tsx similarity index 100% rename from app/(root)/page.tsx rename to app/(app)/page.tsx diff --git a/app/(root)/profile/page.tsx b/app/(app)/profile/page.tsx similarity index 100% rename from app/(root)/profile/page.tsx rename to app/(app)/profile/page.tsx diff --git a/app/(root)/question/[id]/page.tsx b/app/(app)/question/[id]/page.tsx similarity index 100% rename from app/(root)/question/[id]/page.tsx rename to app/(app)/question/[id]/page.tsx diff --git a/app/(root)/tags/[slug]/page.tsx b/app/(app)/tags/[slug]/page.tsx similarity index 100% rename from app/(root)/tags/[slug]/page.tsx rename to app/(app)/tags/[slug]/page.tsx diff --git a/app/(root)/tags/page.tsx b/app/(app)/tags/page.tsx similarity index 100% rename from app/(root)/tags/page.tsx rename to app/(app)/tags/page.tsx From 401a9f0ed1a552d1bde81fb7defa230b02b9db24 Mon Sep 17 00:00:00 2001 From: Michelle Date: Sat, 3 Jan 2026 16:33:51 +0400 Subject: [PATCH 2/3] fix: align topbar content with main content at wide viewports MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Layout: - Wrap main content in centred max-w-5xl container - Replace layout-padding-x utility with inline responsive padding Desktop Topbar: - Mirror main layout structure (padding + max-w-5xl centring) - Set right section width to match right sidebar at xl breakpoint - Hide "Global Search" text below lg breakpoint CSS Variables: - Add --right-sidebar-width (22rem) for shared width reference - Remove unused .layout-padding-x utility class At wide viewports (1700px+), the topbar content drifted out of alignment with main content because they used different centring strategies. The topbar now mirrors the main layout structure, and both reference the same sidebar width variable to ensure consistent alignment at all breakpoints. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- app/(app)/layout.tsx | 4 ++-- app/globals.css | 6 +----- components/navigation/desktop-topbar.tsx | 12 ++++++++---- components/right-sidebar/right-sidebar.tsx | 2 +- 4 files changed, 12 insertions(+), 12 deletions(-) diff --git a/app/(app)/layout.tsx b/app/(app)/layout.tsx index aefd44e..cbbdfd3 100644 --- a/app/(app)/layout.tsx +++ b/app/(app)/layout.tsx @@ -21,8 +21,8 @@ const RootLayout = async ({ children }: { children: React.ReactNode }) => { {/* Content + Right Sidebar row */}
-
- {children} +
+
{children}
diff --git a/app/globals.css b/app/globals.css index e7ffeff..fa3c889 100644 --- a/app/globals.css +++ b/app/globals.css @@ -69,6 +69,7 @@ :root { /* Layout */ --top-bar-height: 4rem; /* 64px — desktop & mobile top navigation */ + --right-sidebar-width: 22rem; /* 352px — right sidebar width at xl+ */ /* Base */ --radius: 0.625rem; @@ -256,11 +257,6 @@ @apply invert dark:invert-0; } - /* Consistent horizontal padding for main content and top bar alignment */ - .layout-padding-x { - @apply px-6 md:px-8 lg:px-12; - } - /* Subtle directional shadow for navigation edges (light mode only) */ .shadow-light { box-shadow: -10px 10px 20px 0px oklch(0.877 0.006 17.26 / 10%); diff --git a/components/navigation/desktop-topbar.tsx b/components/navigation/desktop-topbar.tsx index 96c44fd..337b313 100644 --- a/components/navigation/desktop-topbar.tsx +++ b/components/navigation/desktop-topbar.tsx @@ -4,12 +4,16 @@ import { Button } from "@/components/ui/button"; export function DesktopTopBar() { return ( -
-
-

Global Search

+
+ {/* Left section: matches main content structure (padding + max-w-5xl centering) */} +
+
+

Global Search

+
-
+ {/* Right section: matches right sidebar width on xl */} +
diff --git a/components/right-sidebar/right-sidebar.tsx b/components/right-sidebar/right-sidebar.tsx index 4a83a15..d9bc504 100644 --- a/components/right-sidebar/right-sidebar.tsx +++ b/components/right-sidebar/right-sidebar.tsx @@ -27,7 +27,7 @@ export async function RightSidebar() { id="right-sidebar" side="right" collapsible="none" - width="22rem" + width="var(--right-sidebar-width)" className="border-l shadow-light" > From 3de4c4ee7c22d3c1eafef3f6a91fba310290e47b Mon Sep 17 00:00:00 2001 From: Michelle Date: Sat, 3 Jan 2026 16:59:49 +0400 Subject: [PATCH 3/3] style: apply chromeless design to top bars and right sidebar MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Navigation: - Switch desktop and mobile top bars from bg-sidebar to bg-background - Remove shadow-light from both top bars Right Sidebar: - Replace shadow-light with bg-background to override Sidebar component default - Retain border-l for visual separation Tags: - Add border-border in light mode for subtle definition against card backgrounds Top bars and right sidebar now blend seamlessly with the page background in both light and dark modes. The left sidebar retains its distinct bg-sidebar styling. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- components/navigation/desktop-topbar.tsx | 2 +- components/navigation/mobile-topbar.tsx | 2 +- components/right-sidebar/right-sidebar.tsx | 2 +- components/tag-link.tsx | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/components/navigation/desktop-topbar.tsx b/components/navigation/desktop-topbar.tsx index 337b313..069a12e 100644 --- a/components/navigation/desktop-topbar.tsx +++ b/components/navigation/desktop-topbar.tsx @@ -4,7 +4,7 @@ import { Button } from "@/components/ui/button"; export function DesktopTopBar() { return ( -
+
{/* Left section: matches main content structure (padding + max-w-5xl centering) */}
diff --git a/components/navigation/mobile-topbar.tsx b/components/navigation/mobile-topbar.tsx index 37cb033..8769632 100644 --- a/components/navigation/mobile-topbar.tsx +++ b/components/navigation/mobile-topbar.tsx @@ -4,7 +4,7 @@ import { ThemeToggle } from "@/components/navigation/theme-toggle"; export function MobileTopBar() { return ( -
+
{/* biome-ignore lint/a11y/useAltText: Decorative logo, aria-label on parent link */} {/* biome-ignore lint/performance/noImgElement: SVG logo doesn't benefit from next/image optimisation */} diff --git a/components/right-sidebar/right-sidebar.tsx b/components/right-sidebar/right-sidebar.tsx index d9bc504..b6f99b4 100644 --- a/components/right-sidebar/right-sidebar.tsx +++ b/components/right-sidebar/right-sidebar.tsx @@ -28,7 +28,7 @@ export async function RightSidebar() { side="right" collapsible="none" width="var(--right-sidebar-width)" - className="border-l shadow-light" + className="border-l bg-background" > diff --git a/components/tag-link.tsx b/components/tag-link.tsx index 1648fa7..9a22516 100644 --- a/components/tag-link.tsx +++ b/components/tag-link.tsx @@ -23,7 +23,7 @@ export function TagLink({ href={`/tags/${name}`} className="group flex items-center justify-between gap-2 rounded-md p-1 transition-transform duration-150 hover:-translate-y-0.5 hover:scale-[1.005]" > - + {showIcon && (iconClass ? (