All changes

frontend/src/components/ui/CollapsibleGroupHeader.tsx

@@ -16,11 +16,11 @@ export function CollapsibleGroupHeader({
   children,
 }: CollapsibleGroupHeaderProps) {
   return (
-    <button onClick={onToggle} className={`w-full flex items-center justify-between ${className}`}>
+    <button onClick={onToggle} className={`w-full flex items-center justify-between border-b border-warm-300 dark:border-warm-700 ${className}`}>
       <span>{name}</span>
       <div className="flex items-center gap-1">
         {children}
-        <ChevronIcon direction={expanded ? 'down' : 'right'} className="w-3.5 h-3.5" />
+        <ChevronIcon direction={expanded ? 'down' : 'right'} className="w-4 h-4" />
       </div>
     </button>
   );

frontend/src/components/ui/DestinationDropdown.tsx

@@ -3,18 +3,21 @@ import {
   useRef,
   useEffect,
   useCallback,
-  useLayoutEffect,
   useMemo,
 } from 'react';
 import { createPortal } from 'react-dom';
 import type { Destination } from '../../hooks/useTravelDestinations';
+import { useDropdownPosition } from '../../hooks/useDropdownPosition';
 import { MapPinIcon } from './icons/MapPinIcon';
 import { ChevronIcon } from './icons/ChevronIcon';
+import { CloseIcon } from './icons/CloseIcon';
 
 interface DestinationDropdownProps {
   destinations: Destination[];
   loading: boolean;
   onSelect: (slug: string, label: string) => void;
+  onClear?: () => void;
+  value?: string;
   placeholder?: string;
 }
 
@@ -22,19 +25,18 @@ export function DestinationDropdown({
   destinations,
   loading,
   onSelect,
+  onClear,
+  value,
   placeholder = 'Select destination...',
 }: DestinationDropdownProps) {
   const [open, setOpen] = useState(false);
   const [filter, setFilter] = useState('');
   const [activeIndex, setActiveIndex] = useState(-1);
   const containerRef = useRef<HTMLDivElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
   const listRef = useRef<HTMLDivElement>(null);
-  const [pos, setPos] = useState<{
-    top: number;
-    left: number;
-    width: number;
-  } | null>(null);
+  const pos = useDropdownPosition(containerRef, open);
 
   const filtered = useMemo(() => {
     if (!filter) return destinations;
@@ -46,31 +48,14 @@ export function DestinationDropdown({
     );
   }, [destinations, filter]);
 
-  // Position the dropdown portal
-  const updatePos = useCallback(() => {
-    if (!containerRef.current) return;
-    const rect = containerRef.current.getBoundingClientRect();
-    setPos({ top: rect.bottom + 4, left: rect.left, width: rect.width });
-  }, []);
-
-  useLayoutEffect(() => {
-    if (!open) return;
-    updatePos();
-    window.addEventListener('scroll', updatePos, true);
-    window.addEventListener('resize', updatePos);
-    return () => {
-      window.removeEventListener('scroll', updatePos, true);
-      window.removeEventListener('resize', updatePos);
-    };
-  }, [open, updatePos]);
-
   // Close on outside click
   useEffect(() => {
     if (!open) return;
     const handler = (e: MouseEvent) => {
       if (
         containerRef.current &&
-        !containerRef.current.contains(e.target as Node)
+        !containerRef.current.contains(e.target as Node) &&
+        !dropdownRef.current?.contains(e.target as Node)
       ) {
         setOpen(false);
         setFilter('');
@@ -129,6 +114,7 @@ export function DestinationDropdown({
 
   const dropdown = open && (
     <div
+      ref={dropdownRef}
       className="bg-white dark:bg-warm-800 rounded shadow-lg border border-warm-200 dark:border-warm-700 overflow-hidden"
       style={
         pos
@@ -199,22 +185,37 @@ export function DestinationDropdown({
 
   return (
     <div ref={containerRef} className="relative">
-      <button
-        type="button"
-        onClick={handleOpen}
-        className="w-full flex items-center gap-1.5 px-2 py-1 text-xs rounded border border-warm-200 dark:border-warm-600 bg-white dark:bg-warm-800 text-warm-400 dark:text-warm-500 hover:border-warm-300 dark:hover:border-warm-500 outline-none focus:ring-1 focus:ring-teal-400"
-      >
-        {loading ? (
-          <div className="w-3 h-3 border-2 border-warm-300 dark:border-warm-600 border-t-teal-500 rounded-full animate-spin shrink-0" />
+      <div className={`w-full flex items-center gap-1.5 px-2 py-1 text-xs rounded border ${value ? 'border-warm-200 dark:border-warm-700 bg-warm-50 dark:bg-warm-800' : 'border-warm-200 dark:border-warm-600 bg-white dark:bg-warm-800 hover:border-warm-300 dark:hover:border-warm-500'}`}>
+        <button
+          type="button"
+          onClick={handleOpen}
+          className="flex items-center gap-1.5 flex-1 min-w-0 outline-none"
+        >
+          {loading ? (
+            <div className="w-3 h-3 border-2 border-warm-300 dark:border-warm-600 border-t-teal-500 rounded-full animate-spin shrink-0" />
+          ) : (
+            <MapPinIcon className={`w-3 h-3 shrink-0 ${value ? 'text-red-500' : 'text-warm-400 dark:text-warm-500'}`} />
+          )}
+          <span className={`flex-1 text-left truncate ${value ? 'text-navy-950 dark:text-warm-200' : 'text-warm-400 dark:text-warm-500'}`}>
+            {value || placeholder}
+          </span>
+        </button>
+        {value && onClear ? (
+          <button
+            type="button"
+            onClick={onClear}
+            className="text-warm-400 hover:text-warm-700 dark:hover:text-warm-300 shrink-0"
+            title="Clear destination"
+          >
+            <CloseIcon className="w-3 h-3" />
+          </button>
         ) : (
-          <MapPinIcon className="w-3 h-3 shrink-0" />
+          <ChevronIcon
+            direction={open ? 'up' : 'down'}
+            className="w-3 h-3 shrink-0 text-warm-400 dark:text-warm-500"
+          />
         )}
-        <span className="flex-1 text-left truncate">{placeholder}</span>
-        <ChevronIcon
-          direction={open ? 'up' : 'down'}
-          className="w-3 h-3 shrink-0"
-        />
-      </button>
+      </div>
 
       {open && createPortal(dropdown, document.body)}
     </div>

frontend/src/components/ui/Header.tsx

@@ -14,7 +14,18 @@ import { SpinnerIcon } from './icons/SpinnerIcon';
 import UserMenu from './UserMenu';
 import MobileMenu from './MobileMenu';
 
-export type Page = 'home' | 'dashboard' | 'learn' | 'pricing' | 'account' | 'invite';
+export type Page = 'home' | 'dashboard' | 'learn' | 'pricing' | 'account' | 'saved' | 'invites' | 'invite';
+
+export const PAGE_PATHS: Record<Page, string> = {
+  home: '/',
+  dashboard: '/dashboard',
+  learn: '/learn',
+  pricing: '/pricing',
+  saved: '/saved',
+  invites: '/invites',
+  account: '/account',
+  invite: '/invite',
+};
 
 export default function Header({
   activePage,
@@ -88,6 +99,12 @@ export default function Header({
     }
   }, [doCopy]);
 
+  const navLink = (page: Page, e: React.MouseEvent) => {
+    if (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0) return;
+    e.preventDefault();
+    onPageChange(page);
+  };
+
   const tabClass = (page: Page) =>
     `px-3 py-1.5 rounded text-sm font-medium transition-colors ${
       activePage === page
@@ -99,35 +116,41 @@ export default function Header({
     <header className="h-12 bg-navy-900 text-white flex items-center px-4 shrink-0">
       {/* Left: Logo + nav */}
       <div className="flex items-center gap-4">
-        <button
+        <a
+          href="/"
           className="flex items-center gap-2 hover:opacity-80 transition-opacity"
-          onClick={() => onPageChange('home')}
+          onClick={(e) => navLink('home', e)}
         >
           <LogoIcon className="w-5 h-5 text-teal-400" />
           <span className="font-semibold text-lg">Perfect Postcode</span>
-        </button>
+        </a>
 
         {/* Desktop nav */}
         {!isMobile && (
           <nav className="flex items-center gap-2">
-            <button className={tabClass('dashboard')} onClick={() => onPageChange('dashboard')}>
+            <a href={PAGE_PATHS.dashboard} className={tabClass('dashboard')} onClick={(e) => navLink('dashboard', e)}>
               Dashboard
-            </button>
+            </a>
             {user && (
-              <button
-                className={tabClass('account')}
-                onClick={() => onPageChange('account')}
-              >
-                Account
-              </button>
+              <>
+                <a href={PAGE_PATHS.saved} className={tabClass('saved')} onClick={(e) => navLink('saved', e)}>
+                  Saved
+                </a>
+                <a href={PAGE_PATHS.invites} className={tabClass('invites')} onClick={(e) => navLink('invites', e)}>
+                  Invite
+                </a>
+                <a href={PAGE_PATHS.account} className={tabClass('account')} onClick={(e) => navLink('account', e)}>
+                  Account
+                </a>
+              </>
             )}
-            <button className={tabClass('learn')} onClick={() => onPageChange('learn')}>
+            <a href={PAGE_PATHS.learn} className={tabClass('learn')} onClick={(e) => navLink('learn', e)}>
               Learn
-            </button>
+            </a>
             {user?.subscription !== 'licensed' && !user?.isAdmin && (
-              <button className={tabClass('pricing')} onClick={() => onPageChange('pricing')}>
+              <a href={PAGE_PATHS.pricing} className={tabClass('pricing')} onClick={(e) => navLink('pricing', e)}>
                 Pricing
-              </button>
+              </a>
             )}
           </nav>
         )}

frontend/src/components/ui/MobileMenu.tsx

@@ -1,4 +1,5 @@
 import type { Page } from './Header';
+import { PAGE_PATHS } from './Header';
 import type { AuthUser } from '../../hooks/useAuth';
 import { DownloadIcon } from './icons/DownloadIcon';
 import { BookmarkIcon } from './icons/BookmarkIcon';
@@ -45,20 +46,23 @@ export default function MobileMenu({
   copied,
 }: MobileMenuProps) {
   const mobileNavItem = (page: Page, label: string) => (
-    <button
+    <a
       key={page}
-      className={`w-full text-left px-4 py-3 text-base font-medium rounded ${
+      href={PAGE_PATHS[page]}
+      className={`block w-full text-left px-4 py-3 text-base font-medium rounded ${
         activePage === page
           ? 'bg-navy-700 text-white'
           : 'text-warm-300 hover:bg-navy-800 hover:text-white'
       }`}
-      onClick={() => {
+      onClick={(e) => {
+        if (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0) return;
+        e.preventDefault();
         onPageChange(page);
         onClose();
       }}
     >
       {label}
-    </button>
+    </a>
   );
 
   return (
@@ -82,6 +86,8 @@ export default function MobileMenu({
           {mobileNavItem('dashboard', 'Dashboard')}
           {mobileNavItem('learn', 'Learn')}
           {user?.subscription !== 'licensed' && !user?.isAdmin && mobileNavItem('pricing', 'Pricing')}
+          {user && mobileNavItem('saved', 'Saved')}
+          {user && mobileNavItem('invites', 'Invite')}
           {user && mobileNavItem('account', 'Account')}
 
           {/* Dashboard actions */}

frontend/src/components/ui/PlaceSearchInput.tsx

@@ -1,7 +1,8 @@
-import { useRef, useCallback, useLayoutEffect, useState as useStateR } from 'react';
+import { useRef } from 'react';
 import { createPortal } from 'react-dom';
 import type React from 'react';
 import type { SearchResult } from '../../hooks/useLocationSearch';
+import { useDropdownPosition } from '../../hooks/useDropdownPosition';
 import { SearchIcon } from './icons/SearchIcon';
 import { MapPinIcon } from './icons/MapPinIcon';
 
@@ -31,32 +32,6 @@ interface PlaceSearchInputProps {
   portal?: boolean;
 }
 
-function useDropdownPosition(
-  anchorRef: React.RefObject<HTMLElement | null>,
-  open: boolean,
-) {
-  const [pos, setPos] = useStateR<{ top: number; left: number; width: number } | null>(null);
-
-  const update = useCallback(() => {
-    if (!anchorRef.current) return;
-    const rect = anchorRef.current.getBoundingClientRect();
-    setPos({ top: rect.bottom + 4, left: rect.left, width: rect.width });
-  }, [anchorRef]);
-
-  useLayoutEffect(() => {
-    if (!open) return;
-    update();
-    window.addEventListener('scroll', update, true);
-    window.addEventListener('resize', update);
-    return () => {
-      window.removeEventListener('scroll', update, true);
-      window.removeEventListener('resize', update);
-    };
-  }, [open, update]);
-
-  return pos;
-}
-
 export function PlaceSearchInput({
   search,
   onSelect,

frontend/src/components/ui/UpgradeModal.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import { CloseIcon } from './icons/CloseIcon';
 import { SpinnerIcon } from './icons/SpinnerIcon';
-import { apiUrl } from '../../lib/api';
+import { apiUrl, logNonAbortError } from '../../lib/api';
 
 interface UpgradeModalProps {
   isLoggedIn: boolean;
@@ -28,7 +28,7 @@ export default function UpgradeModal({
       .then((data) => {
         if (data) setPricePence(data.current_price_pence);
       })
-      .catch(() => {});
+      .catch((err) => logNonAbortError('Failed to fetch pricing', err));
   }, []);
 
   const priceLabel =

frontend/src/components/ui/icons/BookmarkIcon.tsx

@@ -1,13 +1,14 @@
 interface IconProps {
   className?: string;
+  filled?: boolean;
 }
 
-export function BookmarkIcon({ className = 'w-3.5 h-3.5' }: IconProps) {
+export function BookmarkIcon({ className = 'w-3.5 h-3.5', filled = false }: IconProps) {
   return (
     <svg
       className={className}
       viewBox="0 0 24 24"
-      fill="none"
+      fill={filled ? 'currentColor' : 'none'}
       stroke="currentColor"
       strokeWidth={2}
     >

frontend/src/components/ui/icons/SparklesIcon.tsx

@@ -0,0 +1,13 @@
+interface IconProps {
+  className?: string;
+}
+
+export function SparklesIcon({ className = 'w-4 h-4' }: IconProps) {
+  return (
+    <svg className={className} viewBox="0 0 16 16" fill="currentColor">
+      <path d="M8 1.5a.5.5 0 0 1 .5.5v2.5H11a.5.5 0 0 1 0 1H8.5V8a.5.5 0 0 1-1 0V5.5H5a.5.5 0 0 1 0-1h2.5V2a.5.5 0 0 1 .5-.5Z" />
+      <path d="M12.5 8a.5.5 0 0 1 .5.5v1.5h1.5a.5.5 0 0 1 0 1H13v1.5a.5.5 0 0 1-1 0V11H10.5a.5.5 0 0 1 0-1H12V8.5a.5.5 0 0 1 .5-.5Z" opacity=".7" />
+      <path d="M3.5 10a.5.5 0 0 1 .5.5V12h1.5a.5.5 0 0 1 0 1H4v1.5a.5.5 0 0 1-1 0V13H1.5a.5.5 0 0 1 0-1H3v-1.5a.5.5 0 0 1 .5-.5Z" opacity=".4" />
+    </svg>
+  );
+}

frontend/src/components/ui/icons/index.ts

@@ -1,21 +1,34 @@
-export { CloseIcon } from './CloseIcon';
-export { InfoIcon } from './InfoIcon';
-export { EyeIcon } from './EyeIcon';
-export { PlusIcon } from './PlusIcon';
-export { ChevronIcon } from './ChevronIcon';
-export { FilterIcon } from './FilterIcon';
-export { LightbulbIcon } from './LightbulbIcon';
-export { MenuIcon } from './MenuIcon';
-export { RouteIcon } from './RouteIcon';
-export { CarIcon } from './CarIcon';
 export { BicycleIcon } from './BicycleIcon';
-export { WalkingIcon } from './WalkingIcon';
-export { TransitIcon } from './TransitIcon';
-export { HouseIcon } from './HouseIcon';
-export { GraduationCapIcon } from './GraduationCapIcon';
+export { BookmarkIcon } from './BookmarkIcon';
+export { CarIcon } from './CarIcon';
 export { ChartBarIcon } from './ChartBarIcon';
+export { CheckIcon } from './CheckIcon';
+export { ChevronIcon } from './ChevronIcon';
+export { ClipboardIcon } from './ClipboardIcon';
+export { CloseIcon } from './CloseIcon';
+export { DownloadIcon } from './DownloadIcon';
+export { EyeIcon } from './EyeIcon';
+export { FilterIcon } from './FilterIcon';
+export { GoogleIcon } from './GoogleIcon';
+export { GraduationCapIcon } from './GraduationCapIcon';
+export { HouseIcon } from './HouseIcon';
+export { InfoIcon } from './InfoIcon';
+export { LightbulbIcon } from './LightbulbIcon';
+export { LogoIcon } from './LogoIcon';
+export { MapPinIcon } from './MapPinIcon';
+export { MenuIcon } from './MenuIcon';
+export { MoonIcon } from './MoonIcon';
+export { PlusIcon } from './PlusIcon';
+export { RouteIcon } from './RouteIcon';
+export { SearchIcon } from './SearchIcon';
 export { ShieldIcon } from './ShieldIcon';
-export { UsersIcon } from './UsersIcon';
 export { ShoppingBagIcon } from './ShoppingBagIcon';
-export { TreeIcon } from './TreeIcon';
+export { SparklesIcon } from './SparklesIcon';
+export { SpinnerIcon } from './SpinnerIcon';
+export { SunIcon } from './SunIcon';
 export { TagIcon } from './TagIcon';
+export { TrashIcon } from './TrashIcon';
+export { TransitIcon } from './TransitIcon';
+export { TreeIcon } from './TreeIcon';
+export { UsersIcon } from './UsersIcon';
+export { WalkingIcon } from './WalkingIcon';