UI improvements

frontend/src/components/map/MapPage.tsx

@@ -33,6 +33,7 @@ import { useLicense } from '../../hooks/useLicense';
 import UpgradeModal from '../ui/UpgradeModal';
 import { SpinnerIcon } from '../ui/icons/SpinnerIcon';
 import { MapPinIcon } from '../ui/icons/MapPinIcon';
+import { BookmarkIcon } from '../ui/icons/BookmarkIcon';
 
 export interface ExportState {
   onExport: () => void;
@@ -101,6 +102,22 @@ export default function MapPage({
   const [mobileDrawerOpen, setMobileDrawerOpen] = useState(false);
   const [poiPaneOpen, setPoiPaneOpen] = useState(false);
 
+  const [showBookmarkToast, setShowBookmarkToast] = useState(false);
+  const bookmarkToastDismissed = useRef(
+    localStorage.getItem('bookmark_toast_dismissed') === '1'
+  );
+
+  const handleSavePropertyWithToast = useCallback(
+    (property: Property) => {
+      onSaveProperty?.(property);
+      if (!bookmarkToastDismissed.current) {
+        setShowBookmarkToast(true);
+        bookmarkToastDismissed.current = true;
+      }
+    },
+    [onSaveProperty]
+  );
+
   const {
     filters,
     activeFeature,
@@ -358,6 +375,31 @@ export default function MapPage({
     }
   }, [screenshotMode, mapData.loading, mapData.data.length, mapData.postcodeData.length, mapData.usePostcodeView]);
 
+  const bookmarkToast = showBookmarkToast && (
+    <div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-[60] flex items-center gap-3 px-4 py-3 rounded-lg bg-navy-900 text-white text-sm shadow-lg animate-fade-in">
+      <BookmarkIcon className="w-4 h-4 text-teal-400 shrink-0" filled />
+      <span>Property saved!</span>
+      <button
+        onClick={() => {
+          setShowBookmarkToast(false);
+          onNavigateTo('saved', 'properties');
+        }}
+        className="px-3 py-1 rounded bg-teal-600 hover:bg-teal-500 text-white text-xs font-medium whitespace-nowrap"
+      >
+        View saved
+      </button>
+      <button
+        onClick={() => {
+          setShowBookmarkToast(false);
+          localStorage.setItem('bookmark_toast_dismissed', '1');
+        }}
+        className="text-warm-400 hover:text-warm-200 text-xs whitespace-nowrap"
+      >
+        Don&apos;t show again
+      </button>
+    </div>
+  );
+
   if (screenshotMode) {
     return (
       <div className="h-full w-full">
@@ -416,7 +458,7 @@ export default function MapPage({
       loading={selection.loadingProperties}
       hexagonId={selection.selectedHexagon?.id || null}
       onLoadMore={selection.handleLoadMoreProperties}
-      onSaveProperty={onSaveProperty}
+      onSaveProperty={onSaveProperty ? handleSavePropertyWithToast : undefined}
       onUnsaveProperty={onUnsaveProperty}
       isPropertySaved={isPropertySaved}
       getSavedPropertyId={getSavedPropertyId}
@@ -592,6 +634,8 @@ export default function MapPage({
           />
         )}
 
+        {bookmarkToast}
+
         {mapData.licenseRequired && (
           <UpgradeModal
             isLoggedIn={!!user}
@@ -730,6 +774,8 @@ export default function MapPage({
         </div>
       )}
 
+      {bookmarkToast}
+
       {mapData.licenseRequired && (
         <UpgradeModal
           isLoggedIn={!!user}