fix: give the help links in the account menu icons like the other rows

components/icons/index.ts

@@ -111,6 +111,7 @@ export {
   IconWorld as Globe,
   IconGridDots as Grid3x3,
   IconGripVertical as GripVertical,
+  IconHandStop as Hand,
   IconServer2 as HardDrive,
   IconH1 as Heading1,
   IconH2 as Heading2,

components/layout/account-switcher.tsx

@@ -568,7 +568,8 @@ export function AccountSwitcher({
               <HelpMenuItems
                 onSelect={() => setOpen(false)}
                 className="mt-2 rounded-3xl bg-background py-1"
-                itemClassName="w-full flex items-center px-5 py-3 text-sm text-start hover:bg-muted transition-colors"
+                itemClassName="w-full flex items-center gap-4 px-5 py-3 text-sm text-start hover:bg-muted transition-colors"
+                iconClassName="w-5 h-5 shrink-0 text-muted-foreground"
               />
             </>
           )}
@@ -593,7 +594,7 @@ export function AccountSwitcher({
             <HelpMenuItems
               onSelect={() => setOpen(false)}
               className="border-t border-border py-1"
-              itemClassName="w-full flex items-center px-3 py-2 pointer-coarse:min-h-11 text-sm text-start text-foreground hover:bg-muted transition-colors"
+              itemClassName="w-full flex items-center gap-2 px-3 py-2 pointer-coarse:min-h-11 text-sm text-start text-foreground hover:bg-muted transition-colors"
             />
           )}
 

components/layout/help-links.tsx

@@ -1,10 +1,19 @@
 'use client';
 
 import { useTranslations } from 'next-intl';
+import { Accessibility, BookOpen, Flag, Hand, HelpCircle } from '@/components/icons';
 import { useConfig } from '@/hooks/use-config';
-import { helpLinksFrom, type HelpLink } from '@/lib/help-links';
+import { helpLinksFrom, type HelpLink, type HelpLinkId } from '@/lib/help-links';
 import { cn } from '@/lib/utils';
 
+const ICONS: Record<HelpLinkId, typeof Accessibility> = {
+  statement: Accessibility,
+  feedback: Flag,
+  help: HelpCircle,
+  easy_read: BookOpen,
+  sign_language: Hand,
+};
+
 /** The configured accessibility and help links, in their fixed order. */
 export function useHelpLinks(): HelpLink[] {
   const { accessibilityStatementUrl, accessibilityFeedbackUrl, helpUrl, easyReadUrl, signLanguageUrl } = useConfig();
@@ -53,29 +62,34 @@ export function HelpLinks({ className, listClassName, linkClassName }: { classNa
  * The links as menu items, for the account menu. `onSelect` closes the
  * menu. Renders nothing when the operator set none.
  */
-export function HelpMenuItems({ onSelect, className, itemClassName }: {
+export function HelpMenuItems({ onSelect, className, itemClassName, iconClassName = 'w-4 h-4 shrink-0' }: {
   onSelect?: () => void;
   className?: string;
   itemClassName?: string;
+  iconClassName?: string;
 }) {
   const t = useTranslations('help_links');
   const links = useHelpLinks();
   if (links.length === 0) return null;
   return (
     <div role="group" aria-label={t('label')} className={className} data-testid="help-menu-items">
-      {links.map((link) => (
-        <a
-          key={link.id}
-          role="menuitem"
-          href={link.href}
-          target={link.external ? '_blank' : undefined}
-          rel={link.external ? 'noopener noreferrer' : undefined}
-          onClick={() => onSelect?.()}
-          className={itemClassName}
-        >
-          <LinkText link={link} />
-        </a>
-      ))}
+      {links.map((link) => {
+        const Icon = ICONS[link.id];
+        return (
+          <a
+            key={link.id}
+            role="menuitem"
+            href={link.href}
+            target={link.external ? '_blank' : undefined}
+            rel={link.external ? 'noopener noreferrer' : undefined}
+            onClick={() => onSelect?.()}
+            className={itemClassName}
+          >
+            <Icon className={iconClassName} aria-hidden="true" />
+            <span><LinkText link={link} /></span>
+          </a>
+        );
+      })}
     </div>
   );
 }