fix: give touch tips in the welcome banner on a phone

components/ui/__tests__/welcome-banner.test.tsx

@@ -0,0 +1,37 @@
+import { render, screen } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import React from 'react';
+
+// On a phone the banner said "Press c to compose" and pointed at a sidebar
+// that the phone layout does not have.
+
+const device = vi.hoisted(() => ({ isMobile: false }));
+vi.mock('@/hooks/use-media-query', () => ({
+  useDeviceDetection: () => ({ isMobile: device.isMobile, isTablet: false, isDesktop: !device.isMobile }),
+}));
+vi.mock('@/components/tour/tour-provider', () => ({ useTour: () => ({ startTour: vi.fn() }) }));
+vi.mock('@/i18n/navigation', () => ({ useRouter: () => ({ push: vi.fn() }) }));
+
+const { WelcomeBanner } = await import('../welcome-banner');
+const { useSettingsStore } = await import('@/stores/settings-store');
+
+describe('WelcomeBanner tips', () => {
+  beforeEach(() => {
+    useSettingsStore.setState({ onboardingCompleted: false });
+  });
+
+  it('gives keyboard tips on a desktop', () => {
+    device.isMobile = false;
+    render(<WelcomeBanner />);
+    expect(screen.getByText('tip_compose')).toBeInTheDocument();
+    expect(screen.getByText('tip_shortcuts')).toBeInTheDocument();
+  });
+
+  it('gives touch tips on a phone', () => {
+    device.isMobile = true;
+    render(<WelcomeBanner />);
+    expect(screen.getByText('tip_compose_touch')).toBeInTheDocument();
+    expect(screen.getByText('tip_sidebar_touch')).toBeInTheDocument();
+    expect(screen.queryByText('tip_shortcuts')).toBeNull();
+  });
+});

components/ui/welcome-banner.tsx

@@ -7,6 +7,7 @@ import { Button } from "@/components/ui/button";
 import { useRouter } from "@/i18n/navigation";
 import { useTour } from "@/components/tour/tour-provider";
 import { useSettingsStore } from "@/stores/settings-store";
+import { useDeviceDetection } from "@/hooks/use-media-query";
 
 const ONBOARDING_KEY = "onboarding_completed";
 
@@ -19,6 +20,8 @@ export function WelcomeBanner() {
   const updateSetting = useSettingsStore((s) => s.updateSetting);
   const [visible, setVisible] = useState(false);
   const [dismissed, setDismissed] = useState(false);
+  // A phone has no keyboard shortcuts and keeps the apps in the bottom bar.
+  const { isMobile } = useDeviceDetection();
 
   useEffect(() => {
     // One-time migration: if the legacy per-device flag is set but the synced
@@ -89,9 +92,9 @@ export function WelcomeBanner() {
                 {t("title")}
               </h3>
               <ul className="space-y-1 text-sm text-muted-foreground">
-                <li>{t("tip_compose")}</li>
-                <li>{t("tip_shortcuts")}</li>
-                <li>{t("tip_sidebar")}</li>
+                <li>{isMobile ? t("tip_compose_touch") : t("tip_compose")}</li>
+                {!isMobile && <li>{t("tip_shortcuts")}</li>}
+                <li>{isMobile ? t("tip_sidebar_touch") : t("tip_sidebar")}</li>
                 <li>{t("tip_settings")}</li>
               </ul>
             </div>

locales/en/common.json

@@ -3600,6 +3600,8 @@
     "tip_shortcuts": "Press ? to see all keyboard shortcuts",
     "tip_sidebar": "Find Calendar, Contacts and Settings in the sidebar menu",
     "tip_settings": "Customize your experience in Settings",
+    "tip_compose_touch": "Tap the pencil button to write a new email",
+    "tip_sidebar_touch": "Find Calendar, Contacts and Settings in the bar at the bottom",
     "got_it": "Got it",
     "settings": "Settings",
     "dismiss": "Dismiss",