fix: More issues from feedback

* Dealer and event fave button style adjusted, wasn't clear.
* Header hit slop fixed.
* Global search type detection moved to actual type tagging (dealer had no registration number).
* Map styling adjusted to allow for minimum pad, percent styles did not work properly.
* Search selector for global adjusted to create the tagged objects.
* Version of map view updated

package.json

@@ -51,7 +51,7 @@
     "@expo/vector-icons": "^14.0.0",
     "@gorhom/bottom-sheet": "^4.4.7",
     "@hookform/resolvers": "^3.1.1",
-    "@openspacelabs/react-native-zoomable-view": "^2.1.1",
+    "@openspacelabs/react-native-zoomable-view": "^2.1.6",
     "@react-native-async-storage/async-storage": "1.23.1",
     "@react-native-firebase/analytics": "^18.3.0",
     "@react-native-firebase/app": "^18.3.0",

src/components/dealers/DealerContent.tsx

@@ -137,7 +137,7 @@ export const DealerContent: FC<DealerContentProps> = ({ dealer, parentPad = 0, u
 
             <Label type="para">{dealer.ShortDescriptionContent}</Label>
 
-            <Button containerStyle={styles.marginBefore} outline={dealer.Favorite} icon={dealer.Favorite ? "heart-outline" : "heart"} onPress={toggleFavorite}>
+            <Button containerStyle={styles.marginBefore} outline={dealer.Favorite} icon={dealer.Favorite ? "heart-minus" : "heart-plus-outline"} onPress={toggleFavorite}>
                 {dealer.Favorite ? t("remove_favorite") : t("add_favorite")}
             </Button>
 

src/components/events/EventContent.tsx

@@ -145,7 +145,12 @@ export const EventContent: FC<EventContentProps> = ({ event, parentPad = 0, upda
             )}
 
             <Row style={styles.marginBefore}>
-                <Button containerStyle={styles.rowLeft} outline={isFavorite} icon={isFavorite ? "heart-outline" : "heart"} onPress={() => toggleReminder().catch(captureException)}>
+                <Button
+                    containerStyle={styles.rowLeft}
+                    outline={isFavorite}
+                    icon={isFavorite ? "heart-minus" : "heart-plus-outline"}
+                    onPress={() => toggleReminder().catch(captureException)}
+                >
                     {isFavorite ? t("remove_favorite") : t("add_favorite")}
                 </Button>
                 <Button containerStyle={styles.rowRight} icon={event.Hidden ? "eye" : "eye-off"} onPress={() => dispatch(toggleEventHidden(event.Id))} outline>

src/components/generic/containers/Header.tsx

@@ -1,7 +1,7 @@
 import { useNavigation } from "@react-navigation/core";
 import React, { FC, PropsWithChildren } from "react";
 import { StyleSheet, ViewStyle } from "react-native";
-import { TouchableOpacity } from "react-native-gesture-handler";
+import { TouchableOpacity, TouchableOpacityProps } from "react-native-gesture-handler";
 
 import { useThemeBackground, useThemeBorder, useThemeColorValue } from "../../../hooks/themes/useThemeHooks";
 import { Continuous } from "../atoms/Continuous";
@@ -25,6 +25,26 @@ export type HeaderProps = PropsWithChildren<
       }
 >;
 
+/**
+ * Hit slop for the back button.
+ */
+const backHitSlop: TouchableOpacityProps["hitSlop"] = {
+    left: 15,
+    top: 15,
+    bottom: 15,
+    right: 160,
+};
+
+/**
+ * Hit slop for the secondary button if present.
+ */
+const secondaryHitSlop: TouchableOpacityProps["hitSlop"] = {
+    right: 15,
+    top: 15,
+    bottom: 15,
+    left: 50,
+};
+
 export const Header: FC<HeaderProps> = (props) => {
     const colorValue = useThemeColorValue("text");
     const styleBackground = useThemeBackground("background");
@@ -33,7 +53,7 @@ export const Header: FC<HeaderProps> = (props) => {
     const navigation = useNavigation();
     return (
         <Row style={[styles.container, styleBackground, styleBorder, props.style]} type="center" variant="spaced">
-            <TouchableOpacity hitSlop={180} containerStyle={styles.back} onPress={() => navigation.goBack()}>
+            <TouchableOpacity hitSlop={backHitSlop} containerStyle={styles.back} onPress={() => navigation.goBack()}>
                 <Icon name="chevron-left" size={iconSize} color={colorValue} />
             </TouchableOpacity>
 
@@ -43,7 +63,7 @@ export const Header: FC<HeaderProps> = (props) => {
 
             {/* Optional secondary action. */}
             {!("secondaryIcon" in props) ? null : (
-                <TouchableOpacity hitSlop={50} containerStyle={styles.secondary} onPress={() => props.secondaryPress()}>
+                <TouchableOpacity hitSlop={secondaryHitSlop} containerStyle={styles.secondary} onPress={() => props.secondaryPress()}>
                     <Icon name={props.secondaryIcon} size={iconSize} color={colorValue} />
                 </TouchableOpacity>
             )}

src/components/home/GlobalSearch.tsx

@@ -12,11 +12,12 @@ import { EventCard } from "../events/EventCard";
 import { Section } from "../generic/atoms/Section";
 import { KbEntryCard } from "../kb/KbEntryCard";
 import { useZoneAbbr } from "../../hooks/time/useZoneAbbr";
+import { WithType } from "../../store/eurofurence/selectors/search";
 
 export type GlobalSearchProps = {
     navigation: HomeProps["navigation"];
     now: Moment;
-    results: (DealerDetails | EventDetails | KnowledgeEntryDetails)[] | null;
+    results: (WithType<DealerDetails, "dealer"> | WithType<EventDetails, "event"> | WithType<KnowledgeEntryDetails, "knowledgeEntry">)[] | null;
 };
 
 export const GlobalSearch = ({ navigation, now, results }: GlobalSearchProps) => {
@@ -28,9 +29,9 @@ export const GlobalSearch = ({ navigation, now, results }: GlobalSearchProps) =>
     const zone = useZoneAbbr();
 
     // Use all dealers and group generically.
-    const dealers = useDealerInstances(tDealers, now, results?.filter((r) => "RegistrationNumber" in r) as DealerDetails[]);
-    const events = useEventInstances(tEvents, now, zone, results?.filter((r) => "StartDateTimeUtc" in r) as EventDetails[]);
-    const kbGroups = results?.filter((r) => "KnowledgeGroupId" in r) as KnowledgeEntryDetails[];
+    const dealers = useDealerInstances(tDealers, now, results?.filter((r) => r.type === "dealer") as DealerDetails[]);
+    const events = useEventInstances(tEvents, now, zone, results?.filter((r) => r.type === "event") as EventDetails[]);
+    const kbGroups = results?.filter((r) => r.type === "knowledgeEntry") as KnowledgeEntryDetails[];
 
     if (!results) return null;
     return (

src/components/maps/MapContent.tsx

@@ -145,8 +145,8 @@ export const MapContent: FC<MapContentProps> = ({ map, entry }) => {
     }, []);
 
     return (
-        <>
-            <View style={styles.container}>
+        <View style={styles.container} testID="mapContainer">
+            <View style={styles.map}>
                 <ZoomableView
                     ref={refZoom}
                     contentWidth={map.Image.Width}
@@ -164,9 +164,8 @@ export const MapContent: FC<MapContentProps> = ({ map, entry }) => {
                     </View>
                 </ZoomableView>
             </View>
-
             {!map?.Entries?.length ? null : (
-                <BottomSheet ref={refSheet} backgroundStyle={styleBackground} handleStyle={styles.handle} handleIndicatorStyle={styleHandle} snapPoints={["17%", "75%"]} index={0}>
+                <BottomSheet ref={refSheet} backgroundStyle={styleBackground} handleStyle={styles.handle} handleIndicatorStyle={styleHandle} snapPoints={[170, "75%"]} index={0}>
                     <MapContentFlatList
                         initialNumToRender={2}
                         maxToRenderPerBatch={1}
@@ -179,18 +178,21 @@ export const MapContent: FC<MapContentProps> = ({ map, entry }) => {
                     />
                 </BottomSheet>
             )}
-        </>
+        </View>
     );
 };
 
 const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
     handle: {
         borderTopLeftRadius: 15,
         borderTopRightRadius: 15,
     },
-    container: {
+    map: {
         flex: 1,
-        paddingBottom: "17%",
+        marginBottom: 190,
     },
     image: {
         width: "100%",

src/store/eurofurence/selectors/search.ts

@@ -6,6 +6,11 @@ import { AnnouncementDetails, DealerDetails, EventDetails, KnowledgeEntryDetails
 import { selectDealersInAd, selectDealersInRegular } from "./dealers";
 import { announcementsSelectors, dealersSelectors, eventsSelector, knowledgeEntriesSelectors } from "./records";
 
+/**
+ * T with a Type tag.
+ */
+export type WithType<T, TType> = T & { type: TType };
+
 /**
  * Search options.
  */
@@ -102,7 +107,13 @@ export const selectKbAllSearchIndex = createSelector([knowledgeEntriesSelectors.
 export const selectGlobalSearchIndex = createSelector(
     [dealersSelectors.selectAll, eventsSelector.selectAll, knowledgeEntriesSelectors.selectAll],
     (dealers, events, knowledgeEntries) => {
-        const data = [...dealers, ...events, ...knowledgeEntries];
+        const data = new Array<WithType<DealerDetails, "dealer"> | WithType<EventDetails, "event"> | WithType<KnowledgeEntryDetails, "knowledgeEntry">>(
+            dealers.length + events.length + knowledgeEntries.length,
+        );
+        for (const dealer of dealers) data.push({ ...dealer, type: "dealer" });
+        for (const event of events) data.push({ ...event, type: "event" });
+        for (const knowledgeEntry of knowledgeEntries) data.push({ ...knowledgeEntry, type: "knowledgeEntry" });
+
         return new Fuse(
             data,
             { ...searchOptions, threshold: 0.1 },