accessibility

Build a Next.js App Router locale switcher that preserves the current path with usePathname and a regex swap, plus an accessible active state.

TL;DR: A naive locale switcher sent users to the locale homepage instead of the same page. The fix: a small client component that swaps the /en or /id prefix while preserving the rest of the pathname, plus aria-current for the active state. Stick with this for simple sites; adopt next-intl once routing grows complex.

A server monitoring dashboard becomes noise when attention items pile up with no organization. Three complementary fixes transform a flat grid into a usable workflow.

TL;DR: Dashboard Guy Eighteen flat grid of alerts made it impossible to find critical issues across nine servers. Backend search with debounce, severity filter buttons, and collapsible server groups solved the noise problem by pushing all filtering logic server-side. Three tools together let you triage from hundreds of items in two taps or three words.

Removing the WhatsApp consultation pill and promoting Ask AI into the segmented nav: placement contracts for external CTAs versus internal features.

TL;DR: The WhatsApp consultation button was removed from the header, not just restyled. Ask AI moved into the main nav as a permanent entry, with the mobile consultation slot reassigned to it. The takeaway: features belong in navigation, while one-shot external actions like WhatsApp links belong on pages where they matter.

Shrinking the desktop chat input field and buttons with four responsive Tailwind classes, no separate component and no JavaScript required.

TL;DR: The chunky mobile-sized chat composer was wasting desktop space, but a separate component felt like overkill. Four responsive Tailwind classes fixed it: base sizes stay touch-friendly for phones, sm: variants tighten padding and shrink buttons on desktop. Trade-off is width-based, not pointer-based, so wide touchscreen laptops get small buttons too.

Mode chips at the bottom of a sidebar stay invisible until you scroll. Moved to the top, with type and aria-pressed kept intact.

TL;DR: Moving the chat mode switch to the sidebar's top fixed a real usability bug: users only found the search-versus-about toggle after scrolling past the decision point. Core lesson: layout order is decision order, so mode-setting controls belong above scrollable content. The move kept accessibility attributes like aria-pressed and type=button intact, shrinking the form to one responsibility.