Use icon controls for the mobile app header

Author: felixgollnhuber

src/components/app-chrome.tsx

@@ -3,6 +3,7 @@
 import { useState } from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { HistoryIcon, PlusIcon } from "lucide-react";
 
 import { LanguageSwitcher } from "@/components/language-switcher";
 import { buttonVariants } from "@/components/ui/button-variants";
@@ -41,7 +42,7 @@ export function AppChrome({
   return (
     <>
       <header className="border-b bg-background/90 backdrop-blur supports-[backdrop-filter]:bg-background/70">
-        <div className="app-shell flex min-h-16 flex-wrap items-center justify-between gap-x-2 gap-y-3 py-3 sm:flex-nowrap sm:gap-4">
+        <div className="app-shell flex h-16 items-center justify-between gap-3 sm:gap-4">
           <Link
             href="/"
             className="inline-flex shrink-0 items-center text-base font-semibold tracking-tight sm:text-lg"
@@ -58,21 +59,21 @@ export function AppChrome({
               appName
             )}
           </Link>
-          <nav className="ml-auto flex min-w-0 flex-wrap items-center justify-end gap-1.5 sm:flex-nowrap sm:gap-2">
+          <nav className="ml-auto flex shrink-0 items-center gap-1.5 sm:gap-2">
             <LanguageSwitcher
-              className="h-9 min-w-16 px-2.5 text-xs sm:min-w-28 sm:px-3 sm:text-sm"
-              compactLabel
+              className="h-9 w-12 px-2 sm:w-[8.75rem] sm:px-3 sm:text-sm"
+              mobileIcon
             />
             <Link
               href="/new"
               aria-label={messages.appChrome.newEvent}
               className={cn(
-                buttonVariants({ variant: "ghost" }),
-                "h-9 px-3 text-xs sm:px-4 sm:text-sm",
+                buttonVariants({ variant: "outline" }),
+                "size-9 p-0 sm:h-9 sm:w-auto sm:border-transparent sm:bg-transparent sm:px-4 sm:shadow-none sm:hover:bg-accent sm:hover:text-accent-foreground",
               )}
             >
               <span aria-hidden="true" className="sm:hidden">
-                {messages.appChrome.newEventCompact}
+                <PlusIcon className="size-4" />
               </span>
               <span aria-hidden="true" className="hidden sm:inline">
                 {messages.appChrome.newEvent}
@@ -83,11 +84,11 @@ export function AppChrome({
               aria-label={messages.appChrome.recentEvents}
               className={cn(
                 buttonVariants({ variant: "outline" }),
-                "h-9 px-3 text-xs sm:px-4 sm:text-sm",
+                "size-9 p-0 sm:h-9 sm:w-auto sm:px-4 sm:text-sm",
               )}
             >
               <span aria-hidden="true" className="sm:hidden">
-                {messages.appChrome.recentEventsCompact}
+                <HistoryIcon className="size-4" />
               </span>
               <span aria-hidden="true" className="hidden sm:inline">
                 {messages.appChrome.recentEvents}

src/components/language-switcher.test.tsx

@@ -0,0 +1,23 @@
+import { screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+import { LanguageSwitcher } from "./language-switcher";
+import { renderWithI18n } from "@/test/render-with-i18n";
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({
+    refresh: vi.fn(),
+  }),
+}));
+
+describe("LanguageSwitcher", () => {
+  it("wraps the mobile icon variant in a single direct span inside the trigger", () => {
+    renderWithI18n(<LanguageSwitcher mobileIcon />, { locale: "de" });
+
+    const trigger = screen.getByRole("combobox", { name: "Sprache" });
+    const directSpans = Array.from(trigger.children).filter((child) => child.tagName === "SPAN");
+
+    expect(directSpans).toHaveLength(1);
+    expect(trigger.querySelector("svg")).not.toBeNull();
+  });
+});

src/components/language-switcher.tsx

@@ -2,6 +2,7 @@
 
 import { useTransition } from "react";
 import { useRouter } from "next/navigation";
+import { LanguagesIcon } from "lucide-react";
 
 import {
   Select,
@@ -17,12 +18,12 @@ const oneYearInSeconds = 60 * 60 * 24 * 365;
 
 type LanguageSwitcherProps = {
   className?: string;
-  compactLabel?: boolean;
+  mobileIcon?: boolean;
 };
 
 export function LanguageSwitcher({
   className,
-  compactLabel = false,
+  mobileIcon = false,
 }: LanguageSwitcherProps) {
   const router = useRouter();
   const [isPending, startTransition] = useTransition();
@@ -47,15 +48,15 @@ export function LanguageSwitcher({
         className={className}
         disabled={isPending}
       >
-        {compactLabel ? (
-          <>
+        {mobileIcon ? (
+          <span className="inline-flex min-w-0 items-center">
             <span aria-hidden="true" className="sm:hidden">
-              {getCompactLocaleLabel(locale)}
+              <LanguagesIcon className="size-4" />
             </span>
             <span aria-hidden="true" className="hidden sm:inline">
               {currentLocaleLabel}
             </span>
-          </>
+          </span>
         ) : (
           <SelectValue />
         )}
@@ -80,7 +81,3 @@ function getLocaleLabel(
 ) {
   return locale === "de" ? labels.de : labels.en;
 }
-
-function getCompactLocaleLabel(locale: AppLocale) {
-  return locale.toUpperCase();
-}

src/lib/i18n/messages.ts

@@ -42,9 +42,7 @@ export const en = {
   },
   appChrome: {
     newEvent: "New event",
-    newEventCompact: "New",
     recentEvents: "Recent events",
-    recentEventsCompact: "Recent",
     footerDescription:
       "{appName} is a self-hostable, realtime scheduling board for modern teams.",
     featureRequest: "Feature request or suggestion",
@@ -605,9 +603,7 @@ export const de: Messages = {
   },
   appChrome: {
     newEvent: "Neues Event",
-    newEventCompact: "Neu",
     recentEvents: "Letzte Events",
-    recentEventsCompact: "Events",
     footerDescription:
       "{appName} ist ein selbst hostbares Echtzeit-Planungsboard für moderne Teams.",
     featureRequest: "Feature-Wunsch oder Vorschlag",